:root{
  color-scheme:dark;--bg:#07090f;--panel:#0d111a;--panel2:#121827;--line:#273147;--line2:#1a2233;
  --text:#f5f7fb;--muted:#8994aa;--cyan:#61e7ff;--lime:#a6ff6f;--yellow:#ffd45c;--red:#ff6a7d;--violet:#a98cff;
  --shadow:0 18px 50px #0008;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--sans)}body{overflow-x:hidden;background:radial-gradient(circle at 15% -5%,#142238 0,transparent 34%),radial-gradient(circle at 95% 12%,#25183d 0,transparent 30%),var(--bg)}
button,input,select{font:inherit}button{color:inherit}#noise{position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:30;height:62px;padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;background:#07090edb;backdrop-filter:blur(18px)}
.brand{display:flex;gap:9px;align-items:center;padding:0;border:0;background:none;text-align:left;cursor:pointer}.brand-glyph{width:34px;height:34px;display:grid;place-items:center;border:1px solid #55dcff7a;border-radius:10px;background:linear-gradient(145deg,#152230,#09111c);box-shadow:inset 0 0 22px #52ddff18;color:var(--cyan);font:900 17px var(--mono)}.brand b{display:block;letter-spacing:.16em;font-size:14px}.brand small{display:block;margin-top:2px;color:var(--muted);font:8px var(--mono);letter-spacing:.08em}.net-pill{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:#0b1019;color:var(--muted);font:700 9px var(--mono);letter-spacing:.12em}.net-pill .dot{width:7px;height:7px;border-radius:50%;background:#687389;box-shadow:0 0 0 3px #68738918}.net-pill.online .dot{background:var(--lime);box-shadow:0 0 12px var(--lime)}.net-pill.connecting .dot{background:var(--yellow);animation:pulse 1s infinite}.net-pill.danger .dot{background:var(--red)}
.main{width:min(1100px,100%);margin:auto;padding:24px max(14px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.hero{padding:22px 0 14px}.kicker{color:var(--cyan);font:700 10px var(--mono);letter-spacing:.16em}.hero h1{margin:10px 0 8px;font-size:clamp(38px,10vw,82px);letter-spacing:-.06em;line-height:.9}.hero h1 span{color:transparent;-webkit-text-stroke:1px #8494ac}.hero p{max-width:680px;margin:0;color:#aab4c6;font-size:14px;line-height:1.6}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.big-action{min-height:120px;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#121827,#0a0e16);text-align:left;cursor:pointer;box-shadow:inset 0 1px #ffffff08;transition:.15s transform,.15s border-color}.big-action:hover{border-color:#60708b}.big-action:active{transform:scale(.985)}.big-action strong{display:block;font-size:17px}.big-action span{display:block;margin-top:8px;color:var(--muted);font-size:11px;line-height:1.4}.big-action .icon{margin-bottom:18px;color:var(--cyan);font:900 25px var(--mono)}.big-action:nth-child(2) .icon{color:var(--violet)}.big-action:nth-child(3) .icon{color:var(--lime)}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:28px 0 10px}.section-title h2{margin:0;font-size:17px;letter-spacing:-.02em}.section-title small{color:var(--muted);font:9px var(--mono)}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.game-card{position:relative;min-height:145px;padding:15px;border:1px solid var(--line2);border-radius:15px;overflow:hidden;background:#0c111b;cursor:pointer;text-align:left}.game-card:before{content:"";position:absolute;inset:auto -30px -40px auto;width:110px;height:110px;border-radius:50%;background:var(--accent,#61e7ff);filter:blur(50px);opacity:.11}.game-card:hover{border-color:#42516b}.game-card .tag{color:var(--accent,#61e7ff);font:800 9px var(--mono);letter-spacing:.12em}.game-card h3{margin:10px 0 6px;font-size:18px}.game-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.game-card footer{position:absolute;left:15px;bottom:13px;color:#647086;font:9px var(--mono)}
.panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#0e1420,#090d15);box-shadow:var(--shadow)}.join-panel{max-width:580px;margin:50px auto 0;padding:20px}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.panel-head h2{margin:0;font-size:20px}.close-btn,.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#101725;cursor:pointer}.field-label{display:block;margin:14px 0 6px;color:var(--muted);font:700 9px var(--mono);letter-spacing:.1em}.code-input{width:100%;padding:16px;border:1px solid var(--line);border-radius:13px;outline:0;background:#070b12;color:var(--text);font:900 28px var(--mono);letter-spacing:.22em;text-align:center;text-transform:uppercase}.code-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #61e7ff13}.primary,.secondary,.danger-btn{min-height:46px;padding:11px 15px;border-radius:12px;font-weight:800;cursor:pointer}.primary{border:1px solid #64e6ff88;background:linear-gradient(135deg,#8df0ff,#61e7ff);color:#051016}.secondary{border:1px solid var(--line);background:#111827}.danger-btn{border:1px solid #ff6a7d55;background:#30121a;color:#ffc3cb}.wide{width:100%}.row{display:flex;gap:9px;align-items:center}.row>*{min-width:0}.muted{color:var(--muted)}.tiny{font:9px var(--mono)}
.room-shell{display:grid;grid-template-columns:340px 1fr;gap:12px;margin-top:16px}.room-card{padding:18px}.room-code{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px dashed #53627b;border-radius:14px;background:#080c13}.room-code b{font:900 29px var(--mono);letter-spacing:.14em}.room-code small{display:block;margin-top:3px;color:var(--muted);font:8px var(--mono)}.qr-wrap{display:grid;place-items:center;min-height:240px;margin:14px 0;border-radius:14px;background:#fff}.qr-wrap canvas,.qr-wrap img{max-width:208px!important;width:72%!important;height:auto!important}.player-slots{display:grid;gap:8px}.player-slot{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--line2);border-radius:12px;background:#0a0f18}.avatar{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:#172034;color:var(--cyan);font:900 13px var(--mono)}.player-meta{display:flex;align-items:center;gap:10px}.player-meta b{font-size:12px}.player-meta small{display:block;color:var(--muted);font-size:9px}.status-chip{padding:5px 7px;border-radius:999px;background:#172034;color:var(--muted);font:8px var(--mono)}.status-chip.ready{background:#183421;color:var(--lime)}
.lobby-games{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.lobby-game{padding:12px;border:1px solid var(--line2);border-radius:13px;background:#0a0f18;cursor:pointer}.lobby-game.selected{border-color:var(--cyan);box-shadow:inset 0 0 0 1px #61e7ff44}.lobby-game b{display:block;font-size:12px}.lobby-game small{color:var(--muted);font-size:9px}.lobby-footer{display:flex;gap:9px;margin-top:14px}.lobby-footer .primary{flex:1}
.game-shell{margin-top:10px}.game-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.game-heading .eyebrow{color:var(--cyan);font:800 9px var(--mono);letter-spacing:.12em}.game-heading h1{margin:3px 0 0;font-size:23px}.game-actions{display:flex;gap:7px}.game-status{padding:10px 12px;margin-bottom:10px;border:1px solid var(--line);border-radius:12px;background:#0b1019;color:#b7c1d2;font-size:12px}.game-status strong{color:var(--text)}.board-wrap{padding:12px;border:1px solid var(--line);border-radius:18px;background:#090d14;box-shadow:var(--shadow);overflow:auto}.turnbar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:10px}.score-side{padding:10px;border:1px solid var(--line2);border-radius:11px;background:#0c111b}.score-side.right{text-align:right}.score-side b{display:block;font-size:11px}.score-side span{color:var(--muted);font:9px var(--mono)}.turn-token{padding:7px 9px;border-radius:999px;background:#101827;color:var(--cyan);font:800 9px var(--mono)}
.ttt{display:grid;grid-template-columns:repeat(3,minmax(70px,140px));gap:7px;justify-content:center}.cell{aspect-ratio:1;border:1px solid var(--line);border-radius:13px;background:#101724;font:900 clamp(28px,8vw,54px) var(--mono);cursor:pointer}.cell.x{color:var(--cyan)}.cell.o{color:var(--violet)}
.connect-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:620px;margin:auto;padding:8px;border-radius:16px;background:#111a2a}.connect-cell{aspect-ratio:1;border:0;border-radius:50%;background:#05080d;box-shadow:inset 0 3px 9px #000;cursor:pointer}.connect-cell.p0{background:var(--cyan);box-shadow:inset 0 -5px 12px #1688a7}.connect-cell.p1{background:var(--violet);box-shadow:inset 0 -5px 12px #674cc0}
.gomoku{display:grid;grid-template-columns:repeat(11,minmax(25px,1fr));max-width:650px;margin:auto;border:1px solid #39435a;background:#101725}.g-cell{aspect-ratio:1;border:0;border-right:1px solid #293247;border-bottom:1px solid #293247;background:transparent;position:relative}.g-cell:after{content:"";position:absolute;inset:18%;border-radius:50%;transform:scale(0)}.g-cell.p0:after,.g-cell.p1:after{transform:scale(1)}.g-cell.p0:after{background:var(--cyan)}.g-cell.p1:after{background:var(--violet)}
.reversi{display:grid;grid-template-columns:repeat(8,minmax(34px,1fr));max-width:620px;margin:auto;padding:5px;gap:3px;background:#14222a;border-radius:12px}.r-cell{aspect-ratio:1;border:1px solid #2c5157;border-radius:6px;background:#193238;position:relative}.r-cell:after{content:"";position:absolute;inset:13%;border-radius:50%;transform:scale(0);box-shadow:0 3px 8px #0008}.r-cell.p0:after,.r-cell.p1:after{transform:scale(1)}.r-cell.p0:after{background:#e6faff}.r-cell.p1:after{background:#8e6cff}.r-cell.valid{box-shadow:inset 0 0 0 2px #a6ff6f55}
.dots{display:grid;grid-template-columns:repeat(9,1fr);max-width:620px;margin:auto}.dot{aspect-ratio:1;position:relative}.dot:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#dce4f1;left:50%;top:50%;transform:translate(-50%,-50%)}.edge-h,.edge-v,.box{border:0;background:transparent;position:relative}.edge-h:after{content:"";position:absolute;height:6px;left:8%;right:8%;top:50%;transform:translateY(-50%);border-radius:5px;background:#263149}.edge-v:after{content:"";position:absolute;width:6px;top:8%;bottom:8%;left:50%;transform:translateX(-50%);border-radius:5px;background:#263149}.edge-h.on0:after,.edge-v.on0:after{background:var(--cyan)}.edge-h.on1:after,.edge-v.on1:after{background:var(--violet)}.box{aspect-ratio:1;background:#0c121d}.box.p0{background:#61e7ff20}.box.p1{background:#a98cff22}
.battle-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px}.battle-panel h3{margin:4px 0 8px;font-size:11px;color:var(--muted)}.sea{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:4px;border-radius:10px;background:#0c1722}.sea-cell{aspect-ratio:1;border:0;border-radius:4px;background:#13283a;position:relative}.sea-cell.ship{background:#355169}.sea-cell.miss:after,.sea-cell.hit:after{content:"";position:absolute;inset:28%;border-radius:50%}.sea-cell.miss:after{background:#93a6b9}.sea-cell.hit:after{background:var(--red);box-shadow:0 0 9px var(--red)}.setup-tools{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.fleet-list{display:flex;gap:5px;flex-wrap:wrap}.fleet-chip{padding:5px 7px;border-radius:999px;background:#131b29;color:var(--muted);font:8px var(--mono)}.fleet-chip.sunk{color:var(--red);text-decoration:line-through}
.hang-layout,.code-layout,.signal-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:10px}.word-mask{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;padding:24px 8px}.letter-slot{min-width:32px;padding:0 3px 7px;border-bottom:2px solid #526079;text-align:center;font:900 22px var(--mono)}.keyboard{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}.key{min-height:39px;border:1px solid var(--line);border-radius:8px;background:#111827;font:800 11px var(--mono)}.key:disabled{opacity:.28}.hang-meter{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:12px 0}.hang-life{height:6px;border-radius:6px;background:#273149}.hang-life.lost{background:var(--red)}.setup-form{display:grid;gap:9px}.text-input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#080c13;color:var(--text);outline:0}.text-input:focus{border-color:var(--cyan)}
.code-slots{display:flex;justify-content:center;gap:8px;padding:16px}.code-slot{width:46px;height:54px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:#111827;font:900 23px var(--mono)}.digit-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.history{display:grid;gap:5px;max-height:330px;overflow:auto}.history-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px;border:1px solid var(--line2);border-radius:9px;background:#0b1018;font:10px var(--mono)}.peg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:3px}.peg.exact{background:var(--lime)}.peg.near{background:var(--yellow)}
.signal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:560px;margin:auto}.signal-cell{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:#0e1622;font:800 9px var(--mono);color:#738199}.signal-cell.hot{background:#ff6a7d35;color:#ff9baa}.signal-cell.warm{background:#ffd45c30;color:#ffe294}.signal-cell.cold{background:#61e7ff1f;color:#99f0ff}.signal-cell.found{background:#a6ff6f;color:#13230a}.signal-log{display:grid;gap:6px}.scan-card{padding:9px;border:1px solid var(--line2);border-radius:10px;background:#0a0f18;font-size:10px}.scan-card b{font:800 9px var(--mono)}
.side-card{padding:12px;border:1px solid var(--line2);border-radius:13px;background:#0b1018}.side-card h3{margin:0 0 9px;font-size:11px}.instructions{color:var(--muted);font-size:10px;line-height:1.5}.result-banner{padding:16px;margin-top:10px;border:1px solid #ffffff18;border-radius:14px;text-align:center;background:#111827}.result-banner h2{margin:0 0 6px}.result-banner p{margin:0;color:var(--muted);font-size:11px}.result-actions{display:flex;justify-content:center;gap:8px;margin-top:12px}
.toast-stack{position:fixed;z-index:80;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;gap:7px;pointer-events:none}.toast{max-width:310px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#111827eF;box-shadow:var(--shadow);font-size:11px;animation:toastin .18s ease}.modal-backdrop{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:#03050ad9;backdrop-filter:blur(10px)}.modal-backdrop[hidden]{display:none}.modal{width:min(440px,100%);padding:20px;border:1px solid var(--line);border-radius:18px;background:#0e1420;box-shadow:var(--shadow)}.modal h2{margin:0 0 8px}.modal p{color:var(--muted);font-size:12px;line-height:1.5}
@keyframes pulse{50%{opacity:.35}}@keyframes toastin{from{transform:translateY(8px);opacity:0}}@media(max-width:760px){.main{padding-top:14px}.action-grid{grid-template-columns:1fr}.big-action{min-height:90px}.big-action .icon{margin-bottom:9px}.game-grid{grid-template-columns:repeat(2,1fr)}.room-shell{grid-template-columns:1fr}.qr-wrap{min-height:210px}.battle-layout,.hang-layout,.code-layout,.signal-layout{grid-template-columns:1fr}.battle-layout{gap:16px}.keyboard{grid-template-columns:repeat(7,1fr)}.side-card{order:-1}}
@media(max-width:430px){.game-grid{grid-template-columns:1fr 1fr;gap:7px}.game-card{min-height:132px;padding:12px}.game-card h3{font-size:15px}.brand small{display:none}.main{padding-left:9px;padding-right:9px}.board-wrap{padding:8px}.connect-grid{gap:3px}.lobby-games{grid-template-columns:1fr}.keyboard{grid-template-columns:repeat(6,1fr)}.ttt{grid-template-columns:repeat(3,minmax(70px,1fr))}.game-actions .secondary span{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* HAGCADE FUN FX V2 */
.turn-token.active-turn{color:#07120a;background:var(--lime);box-shadow:0 0 22px #a6ff6f26}
.turn-token.waiting-turn{color:#8d98ad;background:#111725}
.fun-board{position:relative}
.fun-soundboard{position:absolute;z-index:35;right:10px;top:10px}
.fun-soundboard summary{list-style:none;cursor:pointer;padding:7px 9px;border:1px solid #344158;border-radius:10px;background:#090e17e8;color:#dbe5f4;font:800 9px var(--mono);backdrop-filter:blur(10px)}
.fun-soundboard summary::-webkit-details-marker{display:none}
.soundboard-menu{position:absolute;right:0;top:38px;width:176px;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;border:1px solid #35425a;border-radius:12px;background:#090e17f5;box-shadow:0 14px 38px #000b}
.soundboard-menu button{min-height:34px;border:1px solid #283449;border-radius:8px;background:#111927;color:#dce5f2;font:800 8px var(--mono);cursor:pointer}
.soundboard-menu button:active{transform:scale(.96)}
.game-quip{position:absolute;z-index:28;left:50%;top:12px;max-width:min(74%,520px);padding:7px 11px;border:1px solid #ffffff18;border-radius:999px;background:#070b12de;color:#eef5ff;font:700 10px/1.25 var(--mono);text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,-7px);backdrop-filter:blur(9px)}
.game-quip.pop{animation:quipPop 2.25s ease both}
.arcade-float-msg{position:absolute;z-index:34;left:12px;bottom:12px;padding:6px 8px;border-left:2px solid var(--cyan);background:#060a10d8;color:#d9e4f3;font:750 9px var(--mono);pointer-events:none;animation:feedFloat 2.4s ease both}
.combat-feed{position:absolute;z-index:17;left:12px;bottom:11px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;max-width:min(72%,340px);pointer-events:none}
.combat-line{padding:2px 5px;border-radius:4px;background:#04070ca6;color:#8d9ab0;font:700 8px/1.35 var(--mono);text-shadow:0 1px 2px #000}
.combat-line:nth-last-child(1){opacity:1}.combat-line:nth-last-child(2){opacity:.84}.combat-line:nth-last-child(3){opacity:.68}.combat-line:nth-last-child(4){opacity:.5}.combat-line:nth-last-child(-n+8):not(:nth-last-child(-n+4)){opacity:.32}
.combat-line b{color:#dce8f7}.combat-line .hit-txt,.combat-line .kill{color:#ff8898}.combat-line .kill{font-weight:900}.combat-line .miss-txt{color:#86a0b9}
.sea-cell.last-pick,.signal-cell.last-pick{outline:2px solid var(--lime)!important;outline-offset:-2px;box-shadow:0 0 0 1px #071009,0 0 18px #a6ff6f88!important;z-index:5}
.sea-cell.impact{overflow:visible}
.impact-ring{position:absolute;left:50%;top:50%;width:16%;height:16%;border:2px solid #ff8a9a;border-radius:50%;transform:translate(-50%,-50%);animation:impactWave .8s ease-out both;pointer-events:none}
.battle-layout{position:relative}
.battle-panel{min-width:0}
.signal-board-wrap{padding:0!important;overflow:hidden!important;background:#05080d!important}
.signal-game{width:min(1500px,100%);margin-inline:auto}
.signal-game .game-status{margin-bottom:7px}
.signal-setup{min-height:clamp(430px,63dvh,720px);display:grid;place-content:center;gap:17px;max-width:760px;margin:auto;padding:24px}
.signal-setup h2{margin:0 0 6px;font-size:28px}.signal-setup p{margin:0;color:#99a7ba;line-height:1.5;font-size:12px}
.signal-size-grid{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:8px}
.signal-size-grid button{min-height:76px;border:1px solid #27354b;border-radius:13px;background:linear-gradient(145deg,#111a28,#0a1019);color:#eef5ff;cursor:pointer}
.signal-size-grid button b{display:block;font-size:16px}.signal-size-grid button span{display:block;margin-top:5px;color:#728197;font:8px var(--mono)}
.signal-size-grid button:hover{border-color:var(--cyan)}
.signal-custom{display:grid;grid-template-columns:1fr auto;gap:8px}
.signal-custom input{min-width:0;padding:10px 12px;border:1px solid #2d3a51;border-radius:11px;background:#070b12;color:#fff;font:900 18px var(--mono);outline:0}
.signal-wait{min-height:clamp(430px,63dvh,720px);display:grid;place-content:center;text-align:center;gap:7px}.signal-wait b{font-size:22px}.signal-wait span{color:var(--muted);font-size:11px}
.signal-hud{position:absolute;z-index:22;left:10px;right:10px;top:9px;display:flex;align-items:center;gap:7px;pointer-events:none}
.signal-turn{padding:7px 10px;border:1px solid #344057;border-radius:999px;background:#07101adf;font:900 9px var(--mono);letter-spacing:.08em;backdrop-filter:blur(10px)}
.signal-turn.mine{background:#a6ff6f;color:#0a1406;border-color:#c8ff9e;box-shadow:0 0 18px #a6ff6f31}
.signal-turn.theirs{color:#9ba8bb}
.heat-legend{display:flex;gap:3px;padding:4px;border:1px solid #2a374b;border-radius:999px;background:#070b12d9;backdrop-filter:blur(8px)}
.heat-legend span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font:900 9px var(--mono);color:#071016}
.heat-legend .c{background:#63b8ff}.heat-legend .w{background:#55dbc7}.heat-legend .W{background:#d7df62}.heat-legend .h{background:#ff9d4d}.heat-legend .H{background:#ff4d6d;color:#fff}
.signal-zoom{margin-left:auto;display:flex;gap:4px;pointer-events:auto}
.signal-zoom button{min-width:36px;height:32px;border:1px solid #344158;border-radius:9px;background:#080d16dc;color:#e3ebf7;font:900 10px var(--mono);backdrop-filter:blur(8px)}
.signal-viewport{position:relative;width:100%;height:clamp(470px,calc(100dvh - 245px),850px);overflow:hidden;touch-action:none;user-select:none;cursor:grab;background:radial-gradient(circle at 50% 50%,#122035 0,#07101b 38%,#04070c 100%)}
.signal-viewport:active{cursor:grabbing}
.signal-stage{position:absolute;left:0;top:0;display:grid;grid-template-columns:repeat(var(--n),var(--cell));grid-auto-rows:var(--cell);gap:2px;transform-origin:0 0;will-change:transform;padding:2px}
.signal-cell{position:relative;width:var(--cell);height:var(--cell);border:1px solid #1b2b3d;border-radius:5px;background:#0b1622;color:#50657b;font:800 7px var(--mono);overflow:visible}
.signal-cell>span{opacity:.58}
.signal-cell.cold{background:#123557;color:#90d1ff;border-color:#245479}
.signal-cell.warm{background:#164a49;color:#8ff0dc;border-color:#2b756f}
.signal-cell.warmer{background:#596027;color:#f2f57c;border-color:#858d3b}
.signal-cell.hot{background:#75431f;color:#ffc187;border-color:#a6632b}
.signal-cell.hotter{background:#7d2135;color:#ffb3bd;border-color:#c53b59}
.signal-cell.found{background:#9ff66e;color:#102108;border-color:#d5ffba;z-index:8;box-shadow:0 0 35px #a6ff6fb0}
.signal-wave,.signal-wave b{position:absolute;left:50%;top:50%;width:6px;height:6px;border:2px solid #c9ff9e;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.signal-wave{border:0}.signal-wave b{animation:signalWave 1.65s ease-out infinite}.signal-wave b:nth-child(2){animation-delay:.3s}.signal-wave b:nth-child(3){animation-delay:.6s}
.signal-feed{left:10px;bottom:9px;max-width:min(66%,360px)}
.heat-C{color:#7ac7ff}.heat-w{color:#71e4d1}.heat-W{color:#ecf077}.heat-h{color:#ffad67}.heat-H{color:#ff7188}
@keyframes quipPop{0%{opacity:0;transform:translate(-50%,-7px)}10%,72%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,5px)}}
@keyframes feedFloat{0%{opacity:0;transform:translateY(6px)}12%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}
@keyframes impactWave{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}
@keyframes signalWave{0%{opacity:.95;width:8px;height:8px}100%{opacity:0;width:210px;height:210px}}
@media(max-width:760px){
 .signal-game{margin-top:4px}.signal-game .game-header{margin-bottom:6px}.signal-game .turnbar{margin-bottom:6px}.signal-game .game-status{padding:7px 9px;font-size:10px}
 .signal-viewport{height:calc(100dvh - 230px);min-height:430px}.signal-size-grid{grid-template-columns:repeat(2,1fr)}
 .heat-legend{display:none}.signal-hud{top:7px;left:7px;right:7px}.signal-zoom button{height:30px}
 .fun-soundboard{top:48px;right:7px}.game-quip{top:48px;max-width:72%;font-size:9px}
 .combat-feed{left:7px;bottom:7px}.combat-line{font-size:7px}
}
@media(max-width:430px){
 .signal-viewport{height:calc(100dvh - 218px);min-height:410px}
 .signal-setup{padding:15px}.signal-size-grid{gap:6px}.signal-size-grid button{min-height:62px}
 .soundboard-menu{width:162px}.battle-layout{grid-template-columns:1fr;gap:12px}
}

.signal-board-wrap .fun-soundboard{top:50px;right:10px}.signal-board-wrap .game-quip{top:50px}