/* Rogue ATC Trainer — mobile radar game interface. Version 1.7.8. */
:root{--green:#71ff9b;--green2:#1acb66;--blue:#ffd84d;--blue2:#fff0a3;--dim:#187642;--black:#020705;--panel:#06110c;--red:#ff5268;--amber:#ffd166;--ink:#d8ffe4;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
body{overscroll-behavior:none;touch-action:manipulation}
button,input{font:inherit}
button{color:inherit}
.app-shell{height:100dvh;max-width:680px;margin:0 auto;display:grid;grid-template-rows:auto auto minmax(220px,1fr) auto;background:radial-gradient(circle at 50% 35%,#07140d 0,#020604 62%,#000 100%);position:relative}
.topbar{height:58px;padding:9px 12px 4px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #123823}
h1{font-size:15px;line-height:1.1;letter-spacing:.08em;margin:0;color:var(--green);text-shadow:0 0 9px #27df6f}
.byline{display:block;margin-bottom:25px;font-size:.9rem;color:#67ad7c;text-decoration:none;line-height:1.1}
.header-controls{display:flex;gap:6px}
.icon-button{width:38px;height:38px;border:1px solid #24603a;background:#07140d;border-radius:10px;font-size:20px;display:grid;place-items:center;cursor:pointer}
.icon-button:disabled{opacity:.35;cursor:not-allowed}
.status-strip{height:48px;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #1b5e35;background:#030a06}
.status-strip span,.final-stats span{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #123823}
.status-strip span:last-child,.final-stats span:last-child{border:0}
.status-strip b{font-size:15px;letter-spacing:.05em;color:var(--green)}
.status-strip small,.radio-line small{color:var(--blue)}
small{font-size:9px;letter-spacing:.08em;color:#679477}
.radar-toolbar{position:absolute;z-index:4;right:9px;top:8px;display:flex;pointer-events:none}
.zoom-button{min-width:46px;height:26px;padding:0 10px;border:1px solid var(--blue);border-radius:7px;background:#171405;color:var(--blue2);font-size:12px;font-weight:900;letter-spacing:.06em;box-shadow:0 0 8px #d88b0038;cursor:pointer}
.zoom-button{pointer-events:auto}
.zoom-button[aria-pressed="true"]{background:#3a3108;color:#fff5bd}
.radar-wrap{position:relative;min-height:0;overflow:hidden;background:#010503;box-shadow:inset 0 0 35px #000}
#radarCanvas{display:block;width:100%;height:100%;touch-action:none}
.distance-scale{height:30px;position:absolute;z-index:2;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 0,#010503 44%);color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.04em;text-shadow:0 0 5px #d88b00;pointer-events:none}
.distance-scale:before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--blue);box-shadow:0 0 5px #d88b00}
.distance-scale span{position:absolute;top:16px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.distance-scale span:before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:7px;background:var(--blue);box-shadow:0 0 4px #d88b00}
.distance-scale span:first-child{left:calc(50% - var(--ten-nm-px,152px))}
.distance-scale span:nth-child(2){left:calc(50% - var(--five-nm-px,76px))}
.distance-scale span:nth-child(3){left:50%}
.distance-scale span:nth-child(4){left:calc(50% + var(--five-nm-px,76px))}
.distance-scale span:last-child{left:calc(50% + var(--ten-nm-px,152px))}
.banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:6px 12px;background:#142015e8;border:1px solid var(--amber);color:var(--amber);font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:6px;white-space:nowrap;box-shadow:0 0 14px #ffc40033}
.toast{position:absolute;bottom:42px;left:12px;right:12px;text-align:center;padding:9px;background:#06130dec;border:1px solid #278f50;border-radius:8px;font-size:11px;color:var(--green);box-shadow:0 0 18px #11ff7033}
.sound-unlock{position:absolute;right:9px;top:42px;border:1px solid var(--amber);background:#211b07d9;color:var(--amber);padding:6px 8px;border-radius:6px;font-size:9px}
.pause-curtain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000a;backdrop-filter:blur(2px);z-index:3;color:var(--blue2);text-shadow:0 0 18px #d88b00}
.pause-curtain b{font-size:27px;letter-spacing:.16em}.pause-curtain small{margin-top:7px;color:var(--blue)}
.hidden{display:none!important}
.radio-panel{padding:7px 10px calc(9px + var(--safe-bottom));background:#040b07;border-top:1px solid #1c5e36}
.radio-line{height:18px;display:flex;align-items:center;gap:7px;color:#6db382;font-size:9px;letter-spacing:.07em}
.radio-line #simRateBadge{margin-left:auto;color:#9dd6ad}
.radio-lamp{width:7px;height:7px;border-radius:50%;background:var(--green2);box-shadow:0 0 8px var(--green)}
.radio-lamp.busy{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse .8s infinite}
.command-row{display:flex;gap:5px;margin-bottom:6px}
.command-input{position:relative;display:block;flex:1}
.command-input input{width:100%;height:36px;border:1px solid #1d6338;border-radius:9px;background:#020805;color:#bbffcf;padding:0 35px 0 11px;outline:none;font-size:12px}
.command-input input:focus{border-color:var(--green);box-shadow:0 0 0 2px #52ff8a1f}
.clear-button{position:absolute;right:4px;top:4px;width:28px;height:28px;border:0;background:#123421;color:#97d3a9;border-radius:50%;font-size:18px}
.done-button{height:36px;padding:0 10px;border:1px solid #347b4d;background:#0b2113;border-radius:8px;font-size:11px}
.talk-button{width:100%;height:58px;border:1px solid #2b9f54;border-radius:14px;background:linear-gradient(180deg,#103a20,#082413);box-shadow:inset 0 1px #68ff9c4d,0 5px 14px #000;display:grid;grid-template-columns:32px auto;grid-template-rows:1fr 16px;align-items:center;justify-content:center;column-gap:5px;cursor:pointer;user-select:none;touch-action:none}
.talk-button .talk-icon{grid-row:1/3;font-size:23px;color:var(--green);text-shadow:0 0 9px var(--green)}
.talk-button #talkLabel{align-self:end;font-weight:800;font-size:14px;letter-spacing:.09em;color:#d8ffe4}
.talk-button #talkHint{align-self:start;font-size:8px}
.talk-button.recording{background:linear-gradient(180deg,#5a1722,#310811);border-color:var(--red);transform:scale(.985)}
.talk-button.recording .talk-icon{color:var(--red);text-shadow:0 0 9px var(--red);animation:pulse .55s infinite}
.talk-button:disabled{opacity:.42;filter:saturate(.55);cursor:not-allowed;transform:none}
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:#000c;backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.2s}
.overlay.show{opacity:1;visibility:visible}
.modal{width:min(100%,390px);background:linear-gradient(150deg,#0a1d11,#030805);border:1px solid #287449;border-radius:20px;padding:25px 20px;text-align:center;box-shadow:0 20px 60px #000,0 0 35px #1cc36124}
.modal h2{margin:5px 0 12px;color:var(--green);text-transform:uppercase;letter-spacing:.04em;font-size:28px;text-shadow:0 0 15px #29d56f55}
.modal p{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#aac9b3;font-size:14px;line-height:1.45}
.eyebrow{font:700 10px/1 monospace!important;letter-spacing:.16em;color:#63b57d!important;margin:0}
.radar-mark{width:72px;height:72px;border:1px solid #2dd76c;border-radius:50%;margin:0 auto 13px;position:relative;background:repeating-radial-gradient(circle,transparent 0 11px,#1f8c4828 12px 13px)}
.radar-mark:after{content:"";position:absolute;inset:50% 0 0 50%;transform-origin:0 0;background:conic-gradient(from 0deg,#62ff9d88,transparent 35deg);animation:sweep 2s linear infinite}
.radar-mark span{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.primary-button,.secondary-button{width:100%;height:50px;border-radius:12px;font-weight:800;letter-spacing:.06em;margin-top:10px;cursor:pointer}
.primary-button{border:1px solid #65f68e;background:linear-gradient(180deg,#2fa75a,#147138);color:#021407;box-shadow:0 0 18px #2cef6d38}
.secondary-button{border:1px solid #356146;background:#08140c;color:#b2d8bd}
.start-card>small{display:block;margin-top:13px}
.danger{color:var(--red)!important}
.fired-card{border-color:#8a2937}
.fired-card h2{color:var(--red);font-size:30px;text-shadow:0 0 15px #ff3f5b55}
.fired-card h2 span{font-size:17px}
.final-stats{height:62px;display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #44232a;border-radius:10px;margin:15px 0;background:#100608}
.final-stats b{font-size:18px;color:#ffd7dc}
.replay-button.active{background:#683044;color:#fff;border-color:#ff7185}
.hearing-note{min-height:18px;font-size:11px!important;margin:13px 0 0!important;color:#d89da6!important}
.overlay.replay-mode{background:transparent;backdrop-filter:none;align-items:end;pointer-events:auto;padding:8px 10px calc(134px + var(--safe-bottom));cursor:pointer}
.overlay.replay-mode:before{content:"TAP ANYWHERE TO STOP REPLAY";position:absolute;top:116px;left:50%;transform:translateX(-50%);padding:7px 11px;border:1px solid var(--blue);border-radius:8px;background:#181304e8;color:var(--blue2);font-size:10px;font-weight:800;letter-spacing:.08em;white-space:nowrap;box-shadow:0 0 16px #d88b0044}
.overlay.replay-mode .fired-card{pointer-events:auto;width:min(100%,360px);padding:8px;border-color:#3280ad;background:#041018e8;border-radius:12px}
.overlay.replay-mode .fired-card>*:not(.replay-button){display:none}
.overlay.replay-mode .replay-button{height:40px;margin:0;background:#493b12;border-color:var(--blue);color:#fff0a3}
.sheet-overlay{align-items:end;padding:0;background:#0008}
.settings-sheet{width:min(100%,680px);background:#08130d;border:1px solid #27563a;border-bottom:0;border-radius:20px 20px 0 0;padding:7px 17px calc(18px + var(--safe-bottom));box-shadow:0 -20px 50px #000}
.sheet-handle{width:44px;height:4px;background:#375b43;border-radius:5px;margin:2px auto 8px}
.sheet-title{display:flex;align-items:center;justify-content:space-between}.sheet-title h2{margin:0;color:#c7efd2;font:700 20px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.setting-row,.toggle-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.setting-row span,.toggle-row span{display:flex;flex-direction:column}.setting-row b,.toggle-row b{font-size:14px}.setting-row small,.toggle-row small{margin-top:3px;font-size:10px;letter-spacing:0}
.speed-setting output{color:var(--green);font-weight:700}
#speedSlider{width:100%;accent-color:var(--green);margin:11px 0 4px}
.toggle-row input{display:none}.toggle-row i{width:44px;height:25px;background:#24362a;border-radius:20px;position:relative;transition:.2s}.toggle-row i:after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#7e9484;transition:.2s}.toggle-row input:checked+i{background:#198746}.toggle-row input:checked+i:after{left:22px;background:#d1ffdd}
.menu-button{width:100%;height:45px;margin-top:10px;border:1px solid #244a32;background:#0b1c11;border-radius:10px;text-align:left;padding:0 14px;color:#c5e8cf}.menu-button span{margin-left:8px}
.scores-panel{margin-top:10px;border:1px solid #244a32;border-radius:10px;overflow:hidden}.score-entry{display:grid;grid-template-columns:28px 1fr auto;padding:7px 10px;border-bottom:1px solid #193523;font-size:11px}.score-entry:last-child{border:0}.score-entry em{color:#729a7d;font-style:normal}
.revision{text-align:center;color:#52715b;font-size:9px;margin:14px 0 0;letter-spacing:.1em}
.tower-view-overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#000;opacity:0;visibility:hidden;transition:opacity .16s}
.tower-view-overlay.show{opacity:1;visibility:visible}
.tower-view-overlay img{display:block;width:100%;max-height:100%;object-fit:contain;cursor:pointer;outline:none}
.tower-view-overlay img:focus-visible{box-shadow:inset 0 0 0 3px var(--blue)}
.tower-view-overlay p{position:absolute;left:50%;bottom:calc(14px + var(--safe-bottom));transform:translateX(-50%);margin:0;padding:7px 10px;border:1px solid #ffe57a88;border-radius:7px;background:#080806cc;color:#ffe57a;font-size:9px;font-weight:800;letter-spacing:.07em;white-space:nowrap;pointer-events:none;text-shadow:0 0 5px #d88b00}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes pulse{50%{opacity:.35}}@keyframes sweep{to{transform:rotate(360deg)}}
@media (max-height:650px){.topbar{height:51px;padding-top:6px}.status-strip{height:40px}.zoom-button{height:24px}.radio-panel{padding-top:4px}.talk-button{height:50px}.command-input input,.done-button{height:31px}.command-row{margin-bottom:4px}.byline{font-size:11px}.modal{padding:18px}.modal h2{font-size:24px}}