@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#07090b;
  --surface:#0d1114;
  --surface-2:#11171b;
  --line:#1c252b;
  --line-2:#2a363e;
  --text:#edf1f3;
  --muted:#89949e;
  --faint:#55616a;
  --accent:#c8ff00;
  --accent-soft:rgba(200,255,0,.12);
  --cyan:#62d9ff;
  --danger:#ff8798;
  --on-accent:#101500;
  --mono:'IBM Plex Mono',monospace;
  --sans:'Inter',sans-serif;
}

*{box-sizing:border-box}
html{min-width:320px;background:var(--bg);color-scheme:dark}
body{min-height:100vh;margin:0;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--sans)}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}

.ambient,.grid-bg,.code-bg{position:fixed;inset:0;pointer-events:none}
.ambient{z-index:0;width:100%;height:100%}
.grid-bg{z-index:0;opacity:.07;background-size:46px 46px;background-image:linear-gradient(to right,var(--accent) 1px,transparent 1px),linear-gradient(to bottom,var(--accent) 1px,transparent 1px);mask-image:linear-gradient(to bottom,#000 20%,transparent 92%)}
.code-bg{z-index:0;margin:0;padding:80px 24px;color:var(--accent);opacity:.035;font:12px/1.8 var(--mono);white-space:pre;overflow:hidden}
.app-shell{position:relative;z-index:1;width:min(1240px,calc(100% - 36px));margin:0 auto;padding:26px 0 44px}

.game-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:112px;padding-bottom:22px;border-bottom:1px solid var(--line);animation:rise .55s ease both}
.head-nav,.head-actions{display:flex;align-items:center;gap:8px}
.head-actions{justify-self:end;flex-wrap:wrap;justify-content:flex-end}
.nav-btn,.icon-btn,.head-status{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 11px;border:1px solid var(--line-2);border-radius:7px;background:color-mix(in srgb,var(--surface) 84%,transparent);color:var(--muted);font:11px var(--mono);transition:color .2s,border-color .2s,background .2s}
.nav-btn:hover,.icon-btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line-2))}
.icon-btn{width:34px;padding:0;cursor:pointer}
.icon-btn svg{width:15px;height:15px}.icon-btn .sound-on{display:none}.icon-btn.on .sound-on{display:block}.icon-btn.on .sound-off{display:none}
.brand{position:relative;display:flex;align-items:center;justify-content:center}
.brand-mark{position:absolute;right:calc(100% + 13px);display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--accent);border-radius:9px;color:var(--accent);background:rgba(200,255,0,.03);font:700 13px var(--mono);text-transform:uppercase;box-shadow:inset 0 0 18px rgba(200,255,0,.04)}
.brand-copy{display:flex;flex-direction:column;align-items:center;text-align:center}.brand-copy small{margin-bottom:2px;color:var(--faint);font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}.brand-copy strong{font-size:clamp(30px,4vw,48px);line-height:.9;letter-spacing:0}
@media(max-width:640px){.brand{padding-left:53px}.brand-mark{left:0;right:auto}.brand-copy{align-items:flex-start;text-align:left}}
.lang-switch{display:flex;overflow:hidden;border:1px solid var(--line-2);border-radius:7px;background:var(--bg)}
.lang-switch button{min-width:38px;min-height:32px;border:0;background:transparent;color:var(--muted);cursor:pointer;font:11px var(--mono)}
.lang-switch button.on{background:var(--accent);color:var(--on-accent)}
.head-status i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start;padding-top:24px}
.receiver,.control-room{border:1px solid var(--line-2);border-radius:8px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 22px 80px rgba(0,0,0,.18)}
.receiver{padding:clamp(18px,3vw,30px);overflow:hidden;animation:rise .55s .08s ease both}
.control-room{padding:18px;animation:rise .55s .14s ease both}
.receiver-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.micro{color:var(--faint);font:11px var(--mono);letter-spacing:.15em;text-transform:uppercase}
.receiver-top h1{margin:7px 0 0;font-size:clamp(22px,3vw,34px);letter-spacing:0}.receiver-top h1 b{color:var(--accent);font-family:var(--mono);font-size:.74em}
.receiver-readouts{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--bg)}
.receiver-readouts span{display:flex;flex-direction:column;min-width:88px;padding:9px 12px;border-left:1px solid var(--line)}.receiver-readouts span:first-child{border-left:0}
.receiver-readouts small,.result-stats small{margin-bottom:4px;color:var(--faint);font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase}.receiver-readouts b{font:600 11px var(--mono)}

.scope-wrap{position:relative;width:100%;aspect-ratio:16/7;min-height:260px;overflow:hidden;border:1px solid var(--line-2);border-radius:8px;background:#050809;box-shadow:inset 0 0 50px rgba(0,0,0,.55)}
.scope-wrap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-size:10% 25%;background-image:linear-gradient(to right,rgba(98,217,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(98,217,255,.07) 1px,transparent 1px)}
.scope-wrap::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.12) 4px);mix-blend-mode:multiply}
#scope{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.scope-scan{position:absolute;z-index:3;top:0;bottom:0;width:16%;background:linear-gradient(90deg,transparent,rgba(200,255,0,.035),transparent);animation:scan 4.5s linear infinite;pointer-events:none}
.scope-corners{position:absolute;inset:10px;z-index:4;pointer-events:none}.scope-corners i{position:absolute;width:12px;height:12px;border-color:rgba(200,255,0,.34)}.scope-corners i:nth-child(1){left:0;top:0;border-left:1px solid;border-top:1px solid}.scope-corners i:nth-child(2){right:0;top:0;border-right:1px solid;border-top:1px solid}.scope-corners i:nth-child(3){left:0;bottom:0;border-left:1px solid;border-bottom:1px solid}.scope-corners i:nth-child(4){right:0;bottom:0;border-right:1px solid;border-bottom:1px solid}
.scope-label{position:absolute;z-index:4;top:14px;color:var(--faint);font:11px var(--mono);letter-spacing:.13em}.scope-label.top-left{left:18px}.scope-label.top-right{right:18px;color:var(--danger)}.scope-label.top-right.locked{color:var(--accent)}
.scope-legend{position:absolute;z-index:4;left:18px;bottom:14px;display:flex;gap:15px;color:var(--muted);font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase}.scope-legend span{display:flex;align-items:center;gap:6px}.scope-legend i{display:block;width:18px;height:2px}.scope-legend .incoming{background:var(--cyan)}.scope-legend .local{background:var(--accent);box-shadow:0 0 7px rgba(200,255,0,.7)}

.lock-panel{margin-top:18px;padding:15px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.lock-copy,.lock-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;font:11px var(--mono);text-transform:uppercase}.lock-copy{color:var(--muted);letter-spacing:.1em}.lock-copy b{color:var(--text);font-size:15px}.lock-track{position:relative;height:7px;margin:11px 0 9px;overflow:hidden;border-radius:2px;background:var(--surface-2)}.lock-track>i{display:block;width:0;height:100%;background:linear-gradient(90deg,#6f9700,var(--accent));box-shadow:0 0 12px rgba(200,255,0,.4);transition:width .09s linear}.lock-threshold{position:absolute;top:0;bottom:0;left:96%;border-left:1px solid var(--text);opacity:.75}.lock-meta{color:var(--faint);letter-spacing:.04em;text-transform:none}.lock-meta kbd,.action-btn kbd{padding:2px 4px;border:1px solid var(--line-2);border-bottom-color:#3c4a52;border-radius:3px;background:var(--surface);color:var(--muted);font:11px var(--mono)}

.message-panel{margin-top:14px;padding:16px 17px;border:1px solid var(--line);border-radius:7px;background:var(--bg);transition:border-color .25s,background .25s}.message-panel.decoded{border-color:rgba(200,255,0,.45);background:linear-gradient(90deg,rgba(200,255,0,.07),var(--bg) 58%)}
.message-head{display:flex;justify-content:space-between;gap:15px;color:var(--faint);font:11px var(--mono);letter-spacing:.11em;text-transform:uppercase}.message-head b{color:var(--danger)}.message-panel.decoded .message-head b{color:var(--accent)}
.message-panel p{min-height:25px;margin:13px 0 9px;color:var(--muted);font:13px/1.6 var(--mono)}.message-panel.decoded p{color:var(--text)}
.packet-line{overflow:hidden;color:#39454c;font:11px var(--mono);letter-spacing:.13em;white-space:nowrap}.message-panel.decoded .packet-line{color:rgba(200,255,0,.5)}

.panel-head,.mission-log-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--faint);font:11px var(--mono);letter-spacing:.11em;text-transform:uppercase}.panel-head b{color:var(--accent)}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--bg)}.score-grid div{display:flex;flex-direction:column;align-items:center;padding:13px 6px;border-left:1px solid var(--line)}.score-grid div:first-child{border-left:0}.score-grid b{font:700 17px var(--mono)}.score-grid span{margin-top:3px;color:var(--faint);font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tuner-controls{display:grid;gap:10px;margin-top:14px}.tuner{padding:13px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}.tuner-head,.scale{display:flex;align-items:center;justify-content:space-between}.tuner-head label{color:var(--muted);font:11px var(--mono);letter-spacing:.07em;text-transform:uppercase}.tuner-head output{color:var(--text);font:600 12px var(--mono)}
.tuner.hinted{border-color:var(--accent);box-shadow:0 0 0 1px rgba(200,255,0,.12),0 0 24px rgba(200,255,0,.08)}
.slider-row{display:grid;grid-template-columns:30px 1fr 30px;gap:8px;align-items:center;margin-top:11px}.slider-row button{width:30px;height:30px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);color:var(--muted);cursor:pointer}.slider-row button:hover{color:var(--accent);border-color:var(--accent)}
input[type=range]{width:100%;height:18px;margin:0;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 var(--fill,50%),var(--line-2) var(--fill,50%))}input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;appearance:none;border:2px solid var(--bg);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 10px rgba(200,255,0,.35)}input[type=range]::-moz-range-track{height:4px;background:var(--line-2)}input[type=range]::-moz-range-progress{height:4px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--bg);border-radius:50%;background:var(--accent)}
.scale{margin:5px 38px 0;color:var(--faint);font:11px var(--mono)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.action-btn,.primary-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:38px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--muted);cursor:pointer;font:11px var(--mono);transition:color .2s,border-color .2s,background .2s}.action-btn:hover{color:var(--text);border-color:var(--accent)}.action-btn:disabled{opacity:.4;cursor:not-allowed}
.protocol{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}.protocol b{color:var(--accent);font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}.protocol p{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.65}
.mission-log{margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}.mission-log ol{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:11px 0 0;padding:0;list-style:none}.mission-log li{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);border-radius:5px;color:var(--faint);font:11px var(--mono)}.mission-log li.current{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.mission-log li.done{color:var(--on-accent);border-color:var(--accent);background:var(--accent)}

.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(3,5,6,.78);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.modal.open{opacity:1;visibility:visible}.modal-card{width:min(460px,100%);padding:30px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);box-shadow:0 28px 100px rgba(0,0,0,.55);text-align:center;transform:translateY(10px);transition:transform .25s}.modal.open .modal-card{transform:none}.modal-card h2{margin:10px 0 14px;font-size:clamp(32px,7vw,54px);line-height:.95;letter-spacing:0}.modal-card p{margin:0 auto;color:var(--muted);font-size:14px;line-height:1.65}.briefing-wave{height:70px;margin:24px 0;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--bg)}.briefing-wave i{display:block;width:200%;height:100%;background:center/140px 70px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70' viewBox='0 0 140 70'%3E%3Cpath d='M0 35 C15 5 20 5 35 35 S55 65 70 35 S90 5 105 35 S125 65 140 35' fill='none' stroke='%23c8ff00' stroke-width='2'/%3E%3C/svg%3E");animation:waveMove 3s linear infinite;filter:drop-shadow(0 0 6px rgba(200,255,0,.5))}.primary-btn{width:100%;min-height:46px;margin-top:22px;border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}.primary-btn:hover{background:#d5ff38}.result-ring{display:grid;place-items:center;width:108px;height:108px;margin:17px auto;border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 40px rgba(200,255,0,.14),inset 0 0 25px rgba(200,255,0,.06)}.result-ring span{font:700 24px var(--mono);color:var(--accent)}.result-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.result-stats span{display:flex;flex-direction:column;padding:13px;border-left:1px solid var(--line)}.result-stats span:first-child{border-left:0}.result-stats b{font:700 16px var(--mono)}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes scan{from{left:-20%}to{left:110%}}
@keyframes waveMove{to{transform:translateX(-140px)}}

@media(max-width:980px){.game-head{grid-template-columns:1fr auto}.brand{grid-column:1/-1;grid-row:1;justify-self:center}.head-nav{grid-column:1;grid-row:2}.head-actions{grid-column:2;grid-row:2}.game-layout{grid-template-columns:1fr}.control-room{display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel-head,.score-grid,.actions,.protocol,.mission-log{grid-column:1/-1}.tuner-controls{display:contents}.tuner{margin-top:2px}.tuner:last-child{grid-column:1/-1}}
@media(max-width:640px){.app-shell{width:min(100% - 20px,1240px);padding-top:12px}.game-head{gap:12px;min-height:0;padding-bottom:14px}.brand{justify-self:start}.brand-mark{width:40px;height:40px}.brand-copy strong{font-size:31px}.brand-copy small{font-size:11px}.head-nav{gap:5px}.nav-btn{padding:6px 8px}.nav-btn:first-child span:last-child{display:none}.head-actions{gap:5px}.head-status{display:none}.receiver{padding:14px}.receiver-top{align-items:flex-start;flex-direction:column}.receiver-readouts{width:100%}.receiver-readouts span{flex:1;min-width:0}.scope-wrap{aspect-ratio:4/3;min-height:250px}.scope-legend{bottom:10px}.lock-meta kbd{display:none}.control-room{display:block;padding:14px}.tuner{margin-top:9px}.actions{grid-template-columns:1fr}.mission-log ol{grid-template-columns:repeat(8,1fr)}.modal-card{padding:24px 20px}}
@media(max-width:420px){.receiver-readouts b{font-size:11px}.scope-label{top:10px}.scope-label.top-left{left:12px}.scope-label.top-right{right:12px}.scope-legend{left:12px;gap:9px}.message-panel p{font-size:11px}.mission-log ol{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}