:root {
  --bg: #080a0e;
  --panel: rgba(15, 18, 25, 0.82);
  --panel-2: rgba(20, 24, 33, 0.82);
  --line: rgba(255, 255, 255, 0.1);
  --muted: #8b919c;
  --text: #f2f4f7;
  --cyan: #50f4ff;
  --cyan-soft: rgba(80, 244, 255, .15);
  --magenta: #ff4fcb;
  --magenta-soft: rgba(255, 79, 203, .15);
  --lime: #b8ff5b;
  --danger: #ff6b73;
  --tile: rgba(255,255,255,.035);
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--text); background:
    radial-gradient(circle at 20% 15%, rgba(80,244,255,.07), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(255,79,203,.07), transparent 28%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button,input { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; pointer-events:none; opacity:.25; z-index: 50; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }
.shell { min-height: 100vh; max-width: 1500px; margin: 0 auto; padding: 0 28px 26px; }
.topbar { height: 82px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--line); }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px; letter-spacing:.12em; }
.brand-mark { border:1px solid rgba(80,244,255,.5); color:var(--cyan); padding:8px 10px; font-weight:900; font-size:12px; box-shadow:inset 0 0 20px rgba(80,244,255,.08); }
.brand strong { display:block; font-size:14px; }
.brand small { display:block; margin-top:2px; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.18em; }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-btn { background:none; border:1px solid var(--line); border-radius:999px; font-size:9px; letter-spacing:.12em; padding:8px 11px; cursor:pointer; }
.net-badge { display:flex; gap:7px; align-items:center; border:1px solid var(--line); padding:8px 11px; border-radius:999px; color:var(--muted); font-size:9px; letter-spacing:.12em; }
.net-badge i { width:6px; height:6px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 4px rgba(139,145,156,.08); }
.net-badge.online { color:var(--lime); border-color:rgba(184,255,91,.18); }
.net-badge.online i { background:var(--lime); box-shadow:0 0 12px rgba(184,255,91,.8); }
.view { display:none; }
.view.active { display:block; }
.glass { background:linear-gradient(145deg, rgba(18,22,30,.90), rgba(10,12,17,.88)); border:1px solid var(--line); box-shadow:0 24px 70px rgba(0,0,0,.34); backdrop-filter: blur(18px); }
.landing { min-height: calc(100vh - 108px); padding:9vh 0 6vh; }
.hero-copy { max-width:900px; margin-bottom:54px; }
.eyebrow { margin:0 0 15px; color:var(--lime); font-size:10px; font-weight:800; letter-spacing:.22em; }
h1 { margin:0; font-size:clamp(48px,7vw,104px); line-height:.9; letter-spacing:-.065em; max-width:1100px; }
h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.5); }
.hero-desc { max-width:650px; margin:25px 0 0; color:#b5bbc4; font-size:16px; line-height:1.7; }
.trust-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:25px; color:#707783; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.connect-card { max-width:900px; padding:24px; border-radius:var(--radius); }
.profile-row { display:flex; gap:15px; align-items:end; padding-bottom:20px; border-bottom:1px solid var(--line); }
.sigil { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(80,244,255,.35); background:var(--cyan-soft); color:var(--cyan); font-weight:900; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.grow { flex:1; }
.field span { font-size:9px; color:var(--muted); letter-spacing:.16em; font-weight:800; }
.field input { height:45px; color:#fff; background:#090b10; border:1px solid var(--line); outline:none; padding:0 13px; text-transform:uppercase; border-radius:6px; font-weight:800; letter-spacing:.08em; }
.field input:focus { border-color:rgba(80,244,255,.5); box-shadow:0 0 0 3px rgba(80,244,255,.06); }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.join-wrap { display:grid; grid-template-columns:145px 1fr; gap:10px; }
.choice { position:relative; min-height:98px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:#0c0f15; border:1px solid var(--line); border-radius:10px; padding:17px 18px 15px 54px; cursor:pointer; transition:.18s ease; text-align:left; }
.choice:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.22); background:#11151d; }
.choice.primary { border-color:rgba(80,244,255,.33); background:linear-gradient(135deg,rgba(80,244,255,.09),#0c0f15 60%); }
.choice-index { position:absolute; left:15px; top:16px; color:var(--muted); font-size:9px; }
.choice strong { letter-spacing:.08em; font-size:14px; }
.choice small { color:var(--muted); margin-top:6px; font-size:11px; line-height:1.4; }
.join-wrap .field { justify-content:center; }
.microcopy { margin:17px 0 0; color:#656c77; font-size:9px; line-height:1.6; }
.lobby { min-height:calc(100vh - 108px); display:none; place-items:center; }
.lobby.active { display:grid; }
.lobby-panel { width:min(620px,100%); padding:36px; border-radius:20px; }
.lobby-panel h2 { margin:0 0 28px; font-size:34px; letter-spacing:-.04em; }
.room-code-wrap { background:#080a0e; border:1px solid var(--line); padding:15px 18px; display:flex; align-items:center; justify-content:space-between; border-radius:10px; }
.room-code-wrap > span { color:var(--muted); font-size:9px; letter-spacing:.18em; }
.room-code { background:none; border:0; color:var(--cyan); font-weight:900; font-size:25px; letter-spacing:.2em; cursor:pointer; }
.lobby-actions { display:grid; grid-template-columns:1fr 120px; gap:10px; margin:12px 0 25px; }
.btn { min-height:44px; border:1px solid var(--line); background:#0c0f15; border-radius:7px; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.12em; transition:.16s ease; }
.btn:hover:not(:disabled) { border-color:rgba(255,255,255,.25); transform:translateY(-1px); }
.btn.primary { color:#031012; background:var(--cyan); border-color:var(--cyan); }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn.full { width:100%; }
.btn.tactical { width:100%; color:var(--lime); border-color:rgba(184,255,91,.22); margin:0 0 8px; }
.peer-slots { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.peer-slot { display:flex; align-items:center; gap:10px; padding:15px; border:1px solid var(--line); background:#0a0c11; border-radius:9px; opacity:.55; }
.peer-slot.connected { opacity:1; }
.peer-slot .dot { width:7px; height:7px; border-radius:50%; background:#4d535d; }
.peer-slot.connected .dot { background:var(--lime); box-shadow:0 0 10px rgba(184,255,91,.7); }
.peer-slot strong { display:block; font-size:11px; letter-spacing:.1em; }
.peer-slot small { display:block; color:var(--muted); margin-top:3px; font-size:8px; letter-spacing:.1em; }
.scanline { margin-top:28px; height:2px; overflow:hidden; background:rgba(255,255,255,.04); }
.scanline span { display:block; height:100%; width:25%; background:linear-gradient(90deg,transparent,var(--cyan),transparent); animation:scan 1.8s linear infinite; }
@keyframes scan { from { transform:translateX(-100%);} to {transform:translateX(500%);} }
.status-line { color:var(--muted); font-size:10px; text-align:center; letter-spacing:.08em; margin:12px 0 0; }
.game { padding-top:18px; }
.scorebar { min-height:74px; border-radius:12px; display:grid; grid-template-columns:1fr 170px 1fr; align-items:center; padding:0 20px; }
.player-block { display:flex; align-items:center; gap:18px; }
.player-block.magenta { justify-content:flex-end; }
.player-meta { display:flex; gap:10px; align-items:center; }
.player-meta.right { text-align:right; }
.player-meta strong { display:block; font-size:11px; letter-spacing:.12em; }
.player-meta small { display:block; font-size:8px; color:var(--muted); margin-top:3px; letter-spacing:.12em; }
.team-dot { width:9px; height:9px; border-radius:50%; }
.cyan .team-dot { background:var(--cyan); box-shadow:0 0 16px rgba(80,244,255,.8); }
.magenta .team-dot { background:var(--magenta); box-shadow:0 0 16px rgba(255,79,203,.8); }
.score { font-size:35px; font-weight:900; letter-spacing:-.05em; }
.cyan .score { color:var(--cyan); }
.magenta .score { color:var(--magenta); }
.round-block { text-align:center; }
.round-block span { display:block; color:var(--lime); font-size:9px; letter-spacing:.14em; margin-bottom:5px; }
.round-block strong { display:block; font-size:10px; letter-spacing:.13em; }
.round-block small { display:block; color:var(--muted); font-size:7px; margin-top:4px; letter-spacing:.1em; }
.game-layout { display:grid; grid-template-columns:230px minmax(420px,1fr) 250px; gap:14px; margin-top:14px; align-items:stretch; }
.side-panel { min-height:560px; border-radius:12px; padding:16px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:13px; border-bottom:1px solid var(--line); font-size:8px; letter-spacing:.15em; color:var(--muted); }
.panel-heading b { color:var(--text); }
.selected-card { min-height:158px; padding:18px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.selected-card .selected-icon { font-size:34px; color:var(--cyan); }
.selected-card strong { margin-top:8px; font-size:12px; letter-spacing:.1em; }
.selected-card small { color:var(--muted); margin-top:7px; font-size:9px; line-height:1.5; }
.selected-card .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; margin-top:12px; }
.selected-card .stats span { background:#090b10; border:1px solid var(--line); padding:7px 3px; border-radius:5px; font-size:8px; color:var(--muted); }
.legend { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:9px; color:var(--muted); font-size:8px; line-height:1.4; }
.legend i { display:inline-block; width:8px; height:8px; margin-right:7px; vertical-align:-1px; }
.legend-node { border:1px solid var(--lime); box-shadow:0 0 8px rgba(184,255,91,.45); }
.legend-shield { border:1px solid #fff; transform:rotate(45deg); }
.board-wrap { position:relative; min-height:560px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:linear-gradient(rgba(255,255,255,.015),rgba(255,255,255,.025)), #090b10; overflow:hidden; }
.board-wrap:before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:22px 22px; mask-image:radial-gradient(circle,#000 30%,transparent 80%); pointer-events:none; }
.board { position:relative; z-index:2; width:min(88%,560px); aspect-ratio:1; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(7,1fr); gap:5px; }
.tile { position:relative; min-width:0; border:1px solid rgba(255,255,255,.07); background:var(--tile); border-radius:5px; display:grid; place-items:center; cursor:pointer; transition:.12s ease; overflow:hidden; }
.tile:hover { background:rgba(255,255,255,.07); }
.tile.node:before { content:""; position:absolute; width:22%; height:22%; border:1px solid rgba(184,255,91,.5); transform:rotate(45deg); box-shadow:0 0 14px rgba(184,255,91,.16); }
.tile.node:after { content:"RELAY"; position:absolute; bottom:4px; font-size:5px; color:rgba(184,255,91,.5); letter-spacing:.1em; }
.tile.legal { background:rgba(184,255,91,.08); border-color:rgba(184,255,91,.42); box-shadow:inset 0 0 12px rgba(184,255,91,.06); }
.tile.attackable { background:rgba(255,107,115,.08); border-color:rgba(255,107,115,.5); }
.tile.selected { border-color:#fff; box-shadow:inset 0 0 0 1px #fff,0 0 16px rgba(255,255,255,.08); }
.unit { position:relative; z-index:2; width:64%; height:64%; display:grid; place-items:center; border:1px solid; border-radius:8px; font-weight:1000; font-size:clamp(13px,2vw,22px); transition:.15s ease; }
.unit.cyan { color:#001012; background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 18px rgba(80,244,255,.18); }
.unit.magenta { color:#15000e; background:var(--magenta); border-color:var(--magenta); box-shadow:0 0 18px rgba(255,79,203,.18); }
.unit.acted { opacity:.43; filter:saturate(.6); }
.unit .hp { position:absolute; bottom:-10px; width:100%; display:flex; gap:2px; justify-content:center; }
.unit .hp i { width:18%; height:2px; background:currentColor; opacity:.9; }
.unit .shield { position:absolute; top:-8px; right:-8px; width:16px; height:16px; display:grid; place-items:center; background:#0b0d12; border:1px solid #fff; transform:rotate(45deg); color:#fff; font-size:7px; }
.unit .shield span { transform:rotate(-45deg); }
.unit .type-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#0a0c10; border:1px solid var(--line); color:#aab0ba; font-size:5px; padding:2px 3px; letter-spacing:.08em; white-space:nowrap; }
.board-overlay { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(6,8,11,.82); backdrop-filter:blur(8px); text-align:center; }
.board-overlay h2 { margin:0; font-size:45px; letter-spacing:-.04em; }
.board-overlay p { color:var(--muted); margin:8px 0 0; font-size:11px; }
.hidden { display:none !important; }
.objective { padding:15px 0 16px; border-bottom:1px solid var(--line); }
.objective small { color:var(--lime); font-size:7px; letter-spacing:.15em; }
.objective strong { display:block; margin-top:5px; font-size:12px; letter-spacing:.08em; }
.objective p { color:var(--muted); font-size:9px; line-height:1.55; margin:8px 0 0; }
.unit-key { display:grid; gap:7px; padding:13px 0; border-bottom:1px solid var(--line); }
.unit-key > div { display:flex; gap:9px; align-items:center; background:#090b10; border:1px solid rgba(255,255,255,.05); padding:8px; border-radius:6px; }
.unit-key b { width:25px; text-align:center; font-size:17px; color:#dce0e6; }
.unit-key strong { display:block; font-size:8px; letter-spacing:.12em; }
.unit-key small { display:block; margin-top:2px; color:var(--muted); font-size:7px; }
.log-wrap { padding-top:12px; }
.log-wrap > span { color:var(--muted); font-size:7px; letter-spacing:.15em; }
.combat-log { margin-top:8px; height:180px; overflow:auto; display:flex; flex-direction:column; gap:6px; scrollbar-width:thin; }
.log-line { padding-left:8px; border-left:1px solid var(--line); color:#7f8791; font-size:8px; line-height:1.45; }
.log-line strong { color:#c9cdd3; }
.game-footer { display:flex; justify-content:space-between; align-items:center; padding:13px 4px 0; color:#6f7680; font-size:8px; letter-spacing:.12em; }
.text-btn { background:none; border:0; color:#8b929b; cursor:pointer; font-size:8px; letter-spacing:.1em; }
.text-btn.danger { color:#a96066; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:#f1f3f6; color:#11151a; border-radius:999px; padding:10px 16px; font-weight:800; font-size:10px; letter-spacing:.06em; opacity:0; pointer-events:none; transition:.2s ease; z-index:100; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1050px) {
  .game-layout { grid-template-columns:190px minmax(390px,1fr); }
  .side-panel.right { display:none; }
}
@media (max-width:760px) {
  .shell { padding:0 13px 20px; }
  .topbar { height:68px; }
  .brand small { display:none; }
  .landing { padding-top:7vh; }
  h1 { font-size:clamp(48px,16vw,82px); }
  .hero-desc { font-size:14px; }
  .connect-card { padding:16px; }
  .choice-grid { grid-template-columns:1fr; }
  .join-wrap { grid-template-columns:120px 1fr; }
  .peer-slots { grid-template-columns:1fr; }
  .game { padding-top:10px; }
  .scorebar { grid-template-columns:1fr 95px 1fr; padding:0 10px; min-height:65px; }
  .player-meta small { display:none; }
  .score { font-size:27px; }
  .round-block small { display:none; }
  .game-layout { grid-template-columns:1fr; }
  .board-wrap { min-height:auto; aspect-ratio:1; order:1; }
  .side-panel.left { min-height:0; order:2; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .side-panel.left .panel-heading, .side-panel.left .selected-card, .side-panel.left .legend { grid-column:1/-1; }
  .selected-card { min-height:90px; padding:10px; }
  .selected-card .selected-icon { font-size:24px; }
  .side-panel.left .btn { margin:0; }
  .board { width:94%; gap:3px; }
  .game-footer { padding-bottom:4px; }
}

/* ---- Award-informed polish pass: tactical clarity + tactile feedback ---- */
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.icon-btn { transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.icon-btn:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.035); }
.score-stack { display:flex; flex-direction:column; gap:4px; min-width:86px; }
.score-stack.right { align-items:flex-end; }
.signal-pips { display:grid; grid-template-columns:repeat(10,5px); gap:2px; }
.signal-pips span { width:5px; height:3px; border-radius:1px; background:rgba(255,255,255,.09); transition:background .2s ease,box-shadow .2s ease,transform .2s ease; }
.cyan-pips span.on { background:var(--cyan); box-shadow:0 0 8px rgba(80,244,255,.55); }
.magenta-pips span.on { background:var(--magenta); box-shadow:0 0 8px rgba(255,79,203,.5); }
.score.bump { animation:scoreBump .38s cubic-bezier(.2,.8,.2,1); }
@keyframes scoreBump { 45% { transform:scale(1.22); filter:brightness(1.5); } }

.board-wrap { isolation:isolate; }
.board-wrap:after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(circle at 50% 50%,transparent 42%,rgba(0,0,0,.2) 78%,rgba(0,0,0,.42)); }
.board-wrap.turn-cyan { box-shadow:inset 0 0 44px rgba(80,244,255,.035),0 24px 70px rgba(0,0,0,.34); }
.board-wrap.turn-magenta { box-shadow:inset 0 0 44px rgba(255,79,203,.035),0 24px 70px rgba(0,0,0,.34); }
.board { z-index:3; }
.tile { transform:translateZ(0); }
.tile:hover { transform:translateY(-1px); }
.tile.legal:after { content:"MOVE"; position:absolute; top:5px; right:5px; z-index:4; font-size:5px; font-weight:900; letter-spacing:.12em; color:rgba(184,255,91,.75); }
.tile.attackable:after { content:"STRIKE"; position:absolute; top:5px; right:5px; z-index:4; font-size:5px; font-weight:900; letter-spacing:.12em; color:rgba(255,107,115,.92); }
.tile.node { overflow:visible; }
.tile.node:before { animation:relayPulse 2.2s ease-in-out infinite; }
.tile.node-owned-cyan { border-color:rgba(80,244,255,.4); background:linear-gradient(rgba(80,244,255,.07),rgba(80,244,255,.025)); }
.tile.node-owned-cyan:before { border-color:var(--cyan); box-shadow:0 0 16px rgba(80,244,255,.42); }
.tile.node-owned-magenta { border-color:rgba(255,79,203,.4); background:linear-gradient(rgba(255,79,203,.07),rgba(255,79,203,.025)); }
.tile.node-owned-magenta:before { border-color:var(--magenta); box-shadow:0 0 16px rgba(255,79,203,.42); }
@keyframes relayPulse { 0%,100% { transform:rotate(45deg) scale(.92); opacity:.7; } 50% { transform:rotate(45deg) scale(1.08); opacity:1; } }
.unit { box-shadow:0 5px 14px rgba(0,0,0,.28); }
.tile.selected .unit { transform:scale(1.08); filter:brightness(1.1); }
.tile.attackable .unit { animation:targetPulse .8s ease-in-out infinite alternate; }
@keyframes targetPulse { to { transform:scale(.94); filter:brightness(1.25); } }
.damage-hint { position:absolute; z-index:6; right:3px; bottom:4px; min-width:25px; padding:3px 4px; border-radius:999px; background:#16090b; border:1px solid rgba(255,107,115,.45); color:#ff9299; font-size:7px; font-weight:1000; letter-spacing:.05em; box-shadow:0 4px 12px rgba(0,0,0,.35); }

.coach-strip { position:absolute; z-index:4; top:12px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); padding:7px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(7,9,13,.84); backdrop-filter:blur(8px); color:#747c87; font-size:7px; letter-spacing:.09em; pointer-events:none; transition:opacity .25s ease,transform .25s ease; white-space:nowrap; }
.coach-strip b { color:#dce2e8; font-size:6px; }
.coach-strip i { color:#424853; font-style:normal; padding:0 4px; }
.coach-strip.dismissed { opacity:0; transform:translate(-50%,-8px); }
.turn-burst { position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%,-50%) scale(.84); opacity:0; pointer-events:none; padding:12px 18px; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:rgba(6,8,11,.88); backdrop-filter:blur(10px); font-size:13px; font-weight:1000; letter-spacing:.16em; white-space:nowrap; }
.turn-burst.show { animation:turnBurst .72s cubic-bezier(.2,.8,.2,1); }
.turn-burst.cyan { color:var(--cyan); box-shadow:0 0 30px rgba(80,244,255,.15); }
.turn-burst.magenta { color:var(--magenta); box-shadow:0 0 30px rgba(255,79,203,.15); }
@keyframes turnBurst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.84); } 25%,62% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-56%) scale(1.03); } }

.selected-card:not(.empty) { position:relative; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent); border-bottom:1px solid rgba(255,255,255,.045); }
.selected-card .selected-icon { text-shadow:0 0 20px rgba(80,244,255,.28); }
.selected-card.enemy .selected-icon { color:var(--magenta); text-shadow:0 0 20px rgba(255,79,203,.28); }
.selected-card .forecast { width:100%; margin-top:9px; display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.selected-card .forecast span { padding:6px 4px; border-radius:4px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.055); color:#737b86; font-size:7px; }
.selected-card .forecast b { color:#d9dee5; }
.btn.primary:not(:disabled) { box-shadow:0 0 0 0 rgba(80,244,255,0); }
.btn.primary:not(:disabled):hover { box-shadow:0 0 24px rgba(80,244,255,.12); }

.modal { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:rgba(4,6,9,.72); backdrop-filter:blur(12px); }
.modal-card { width:min(720px,100%); border-radius:18px; padding:28px; }
.modal-kicker { color:var(--lime); font-size:8px; font-weight:900; letter-spacing:.2em; margin-bottom:10px; }
.modal-head { display:flex; gap:20px; align-items:flex-start; justify-content:space-between; }
.modal-head h2 { margin:0; max-width:560px; font-size:clamp(30px,5vw,52px); line-height:.96; letter-spacing:-.05em; }
.modal-close { flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); background:#0a0c11; border-radius:50%; color:#aab0b8; cursor:pointer; font-size:20px; }
.rule-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:24px 0 12px; }
.rule-grid article { min-height:150px; padding:14px; border:1px solid var(--line); background:#090b10; border-radius:8px; }
.rule-grid article > span { display:block; color:#555d68; font-size:8px; margin-bottom:26px; }
.rule-grid strong { display:block; font-size:10px; letter-spacing:.1em; }
.rule-grid p { color:var(--muted); font-size:9px; line-height:1.55; margin:7px 0 0; }
.win-rule { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0; padding:11px 13px; border:1px solid rgba(184,255,91,.13); background:rgba(184,255,91,.035); border-radius:8px; font-size:9px; }
.win-rule span { color:var(--lime); font-size:7px; font-weight:1000; letter-spacing:.15em; }
.win-rule em { color:#555d68; font-style:normal; }

@media (max-width:760px) {
  #howToBtn { display:none; }
  .score-stack { min-width:auto; }
  .signal-pips { grid-template-columns:repeat(5,5px); width:33px; }
  .coach-strip { top:7px; font-size:5.5px; padding:5px 7px; letter-spacing:.05em; }
  .coach-strip i { padding:0 1px; }
  .damage-hint { font-size:6px; min-width:22px; }
  .rule-grid { grid-template-columns:1fr; }
  .rule-grid article { min-height:0; }
  .rule-grid article > span { margin-bottom:10px; }
  .modal-card { padding:20px; max-height:92vh; overflow:auto; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---- Gameplay v2: forgiving action economy + relay influence ---- */
.action-cluster { display:grid; grid-template-columns:1fr; gap:7px; margin-bottom:8px; }
.action-cluster .btn.tactical { margin:0; min-height:42px; font-size:8px; }
.legend-ap { border-radius:50%; background:var(--lime); box-shadow:0 0 8px rgba(184,255,91,.45); }
.ap-track { width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:5px; margin-top:10px; }
.ap-track i { height:5px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.05); }
.ap-track i.on { background:var(--lime); border-color:var(--lime); box-shadow:0 0 9px rgba(184,255,91,.38); }
.unit .ap-badge { position:absolute; left:-9px; top:-8px; min-width:24px; padding:2px 4px; border-radius:999px; background:#0a0c10; border:1px solid rgba(255,255,255,.22); color:#f0f3f6; font-size:6px; line-height:1; letter-spacing:.03em; box-shadow:0 4px 10px rgba(0,0,0,.3); }
.tile.relay-zone { background-image:radial-gradient(circle at 50% 50%,rgba(184,255,91,.045),transparent 66%); border-color:rgba(184,255,91,.11); }
.tile.node-contested { border-color:rgba(255,216,92,.5); background:linear-gradient(rgba(255,216,92,.06),rgba(255,216,92,.02)); }
.tile.node-contested:before { border-color:#ffd85c; box-shadow:0 0 17px rgba(255,216,92,.34); }
.relay-state { position:absolute; z-index:5; top:4px; left:50%; transform:translateX(-50%); width:max-content; max-width:92%; padding:2px 4px; border-radius:999px; background:rgba(5,7,10,.8); border:1px solid rgba(255,255,255,.08); color:#7f8791; font-size:5px; font-weight:900; letter-spacing:.07em; pointer-events:none; }
.tile.node-owned-cyan .relay-state { color:var(--cyan); border-color:rgba(80,244,255,.22); }
.tile.node-owned-magenta .relay-state { color:var(--magenta); border-color:rgba(255,79,203,.22); }
.tile.node-contested .relay-state { color:#ffd85c; border-color:rgba(255,216,92,.22); }
.player-meta small[id$="Failsafe"] { font-size:6px; letter-spacing:.08em; }
.rule-grid { grid-template-columns:repeat(2,1fr); }
.rule-grid article { min-height:132px; }

@media (max-width:760px) {
  .action-cluster { grid-template-columns:1fr 1fr; grid-column:1/-1; margin:0; }
  .action-cluster .btn.tactical { min-height:40px; }
  .unit .ap-badge { left:-6px; top:-6px; min-width:19px; padding:2px 3px; font-size:5px; }
  .relay-state { display:none; }
  .rule-grid { grid-template-columns:1fr; }
}
.legend-capture { border-radius:50%; border:1px solid #ffd85c; box-shadow:0 0 8px rgba(255,216,92,.25); }
@media (max-width:760px) {
  #cyanFailsafe, #magentaFailsafe { display:block !important; font-size:5px; line-height:1.1; max-width:82px; }
}

/* ---- Tutorial vs AI ---- */
.tutorial-entry {
  width:100%; margin-top:18px; min-height:78px; display:grid; grid-template-columns:46px 1fr auto; gap:14px; align-items:center;
  padding:14px 16px; border:1px solid rgba(184,255,91,.28); border-radius:10px; background:linear-gradient(120deg,rgba(184,255,91,.07),rgba(80,244,255,.035) 45%,#0b0e13 78%);
  cursor:pointer; text-align:left; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.tutorial-entry:hover { transform:translateY(-2px); border-color:rgba(184,255,91,.52); box-shadow:0 12px 32px rgba(0,0,0,.22),0 0 24px rgba(184,255,91,.06); }
.tutorial-entry-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(184,255,91,.35); border-radius:50%; color:var(--lime); font-size:22px; box-shadow:inset 0 0 18px rgba(184,255,91,.05); }
.tutorial-entry strong { display:block; font-size:12px; letter-spacing:.12em; }
.tutorial-entry small { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.45; }
.tutorial-entry b { color:var(--lime); font-size:8px; letter-spacing:.13em; white-space:nowrap; }

.tutorial-hud {
  margin-top:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 22px; padding:13px 16px 12px;
  border:1px solid rgba(184,255,91,.2); border-radius:11px; background:linear-gradient(100deg,rgba(184,255,91,.045),rgba(80,244,255,.035) 40%,rgba(12,15,21,.94));
  box-shadow:0 12px 30px rgba(0,0,0,.18); position:relative; overflow:hidden;
}
.tutorial-hud:before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--lime); box-shadow:0 0 16px rgba(184,255,91,.5); }
.tutorial-hud-top { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.tutorial-hud-top > span { color:var(--lime); font-size:7px; font-weight:1000; letter-spacing:.18em; }
.tutorial-hud-top button { padding:0; border:0; background:none; color:#717985; cursor:pointer; font-size:7px; font-weight:900; letter-spacing:.1em; }
.tutorial-hud-top button:hover { color:#d7dce3; }
.tutorial-hud-copy { min-width:0; }
.tutorial-hud-copy strong { display:block; font-size:13px; letter-spacing:.04em; }
.tutorial-hud-copy p { margin:4px 0 0; color:#949ba5; font-size:9px; line-height:1.45; }
.tutorial-progress { align-self:end; display:grid; grid-auto-flow:column; grid-auto-columns:12px; gap:3px; }
.tutorial-progress i { height:3px; border-radius:99px; background:rgba(255,255,255,.09); transition:.18s ease; }
.tutorial-progress i.done { background:rgba(184,255,91,.45); }
.tutorial-progress i.active { background:var(--lime); box-shadow:0 0 9px rgba(184,255,91,.5); transform:scaleY(1.5); }

.tile.tutorial-focus { border-color:var(--lime) !important; box-shadow:inset 0 0 0 1px rgba(184,255,91,.72),0 0 22px rgba(184,255,91,.2) !important; animation:tutorialTilePulse 1s ease-in-out infinite alternate; }
.tile.tutorial-focus:before { filter:brightness(1.35); }
@keyframes tutorialTilePulse { from { filter:brightness(1); } to { filter:brightness(1.16); } }
.btn.tutorial-target:not(:disabled) { border-color:var(--lime) !important; box-shadow:0 0 0 1px rgba(184,255,91,.28),0 0 22px rgba(184,255,91,.12) !important; animation:tutorialButtonPulse .9s ease-in-out infinite alternate; }
@keyframes tutorialButtonPulse { to { transform:translateY(-1px); filter:brightness(1.08); } }

@media (max-width:760px) {
  .tutorial-entry { grid-template-columns:38px 1fr; padding:12px; }
  .tutorial-entry-icon { width:34px; height:34px; font-size:17px; }
  .tutorial-entry b { grid-column:2; }
  .tutorial-hud { grid-template-columns:1fr; margin-top:8px; padding:11px 13px; gap:7px; }
  .tutorial-hud-top { gap:10px; }
  .tutorial-hud-copy strong { font-size:11px; }
  .tutorial-hud-copy p { font-size:8px; }
  .tutorial-progress { grid-auto-columns:1fr; width:100%; }
}

/* ---- Signature powers ---- */
.btn.signature { width:100%; min-height:44px; margin:0; color:#fff3a6; border-color:rgba(255,225,105,.42); background:linear-gradient(135deg,rgba(255,225,105,.10),rgba(255,79,203,.055)); box-shadow:inset 0 0 18px rgba(255,225,105,.025); }
.btn.signature:not(:disabled):hover { border-color:rgba(255,225,105,.82); box-shadow:0 0 20px rgba(255,225,105,.10), inset 0 0 18px rgba(255,225,105,.05); }
.signature-line { width:100%; margin-top:9px; padding:7px 8px; display:flex; gap:6px; align-items:center; justify-content:space-between; border:1px solid rgba(255,225,105,.18); background:rgba(255,225,105,.035); border-radius:5px; font-size:7px; letter-spacing:.06em; }
.signature-line b { color:#fff3a6; font-size:7px; }
.signature-line span { color:#8b8f78; text-align:right; }
.signature-line.spent { opacity:.45; filter:saturate(.3); }
.sig-ready { position:absolute; left:3px; top:2px; z-index:4; color:#fff3a6; font-size:7px; text-shadow:0 0 8px rgba(255,225,105,.85); }