:root{
  --bg:#0d0f0c; --bg2:#141812; --panel:#1a1f17; --panel2:#222a1d;
  --line:#2c3524; --txt:#e6ecdf; --muted:#8a9479; --acc:#6fbf3a; --acc2:#4a8c22;
  --blood:#c0392b; --blood2:#7a1f16; --zomb:#8e44ad; --gold:#f1c40f;
  --r:14px; --shadow:0 6px 22px rgba(0,0,0,.45);
  --cell:min(11vw,44px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 50% -10%,#1a2113 0%,var(--bg) 60%);
  color:var(--txt); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none; -webkit-user-select:none; user-select:none;
}
#app{max-width:520px;margin:0 auto;min-height:100%;padding:env(safe-area-inset-top) 14px calc(14px + env(safe-area-inset-bottom))}

/* screens */
.screen{display:none;flex-direction:column;gap:14px;padding-top:14px;animation:fade .25s}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}

/* brand */
.brand{text-align:center;margin-top:8px}
.logo{font-size:30px;font-weight:900;letter-spacing:2px;display:flex;gap:8px;justify-content:center;align-items:center}
.logo span{background:linear-gradient(180deg,#a9e05a,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 20px rgba(111,191,58,.25)}
.tag{color:var(--muted);margin:4px 0 0;font-size:13px}

/* cards */
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.card.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.fieldlbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.namerow{display:flex;gap:8px;margin:6px 0 12px}
input{flex:1;background:#0f130c;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:12px;font-size:16px;outline:none}
input:focus{border-color:var(--acc)}
.stats{display:flex;justify-content:space-around;text-align:center;border-top:1px solid var(--line);padding-top:12px}
.stats .k{display:block;font-size:20px;font-weight:800;color:var(--acc)}
.stats .l{font-size:11px;color:var(--muted)}

/* buttons */
.btn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .06s,background .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.play{background:linear-gradient(180deg,var(--acc),var(--acc2));border-color:var(--acc2);color:#0c1206}
.btn.ghost{background:transparent}
.btn.tiny{padding:8px 12px;font-size:15px;border-radius:10px}
.btn.big{width:100%;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;position:relative}
.btn.big b{font-size:17px}
.btn.big small{color:var(--muted);font-weight:400;font-size:12px}
.btn.big .ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:26px;opacity:.9}
.btn.big.play{color:#0c1206}
.btn.big.play small{color:#20340f}
.menu{display:flex;flex-direction:column;gap:10px}

.conn{text-align:center;font-size:12px;color:var(--muted);margin:0}
.conn.ok{color:var(--acc)} .conn.bad{color:var(--blood)}
.rules-link{text-align:center;color:var(--muted);text-decoration:underline;font-size:13px;cursor:pointer;margin:0}

/* headers */
.hbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hbar h2{margin:0;font-size:18px}
.hbar.game{position:sticky;top:0;z-index:5}
.turnpill{font-weight:800;padding:6px 14px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);font-size:13px}
.turnpill.you{background:linear-gradient(180deg,var(--acc),var(--acc2));color:#0c1206;border-color:var(--acc2)}
.turnpill.opp{background:var(--blood2);color:#ffd9d4;border-color:var(--blood)}
.oppname{font-size:13px;color:var(--muted);max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* grids */
.grid-wrap{display:flex;justify-content:center}
.grid{display:grid;grid-template-columns:repeat(8,var(--cell));grid-template-rows:repeat(8,var(--cell));gap:3px;padding:8px;background:#0a0d07;border:1px solid var(--line);border-radius:12px}
.cell{width:var(--cell);height:var(--cell);border-radius:6px;background:#161c10;border:1px solid #212a18;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell) * .5);position:relative;transition:background .1s}
.grid.enemy .cell{cursor:crosshair}
.cell.bld{background:#33402180;border-color:#5c7a2e}
.cell.surv{background:#2a2140;border-color:var(--zomb)}
.cell.prev{background:#3a4a2280;border-color:var(--acc)}
.cell.prev.bad{background:#4a222280;border-color:var(--blood)}
.cell.miss::after{content:"";width:26%;height:26%;border-radius:50%;background:#3a4530}
.cell.hit{background:radial-gradient(circle,#e05a4a,#7a1f16);border-color:var(--blood);animation:pop .25s}
.cell.hit::after{content:"💥"}
.cell.dead{background:#111;border-color:#333;filter:grayscale(.4)}
.cell.dead::after{content:"☠️"}
.cell.svhit{background:radial-gradient(circle,#b06adf,#4a2170);border-color:var(--zomb)}
.cell.svhit::after{content:"🧟"}
.cell.aim{outline:2px solid var(--gold);outline-offset:-2px}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
.grid.own .cell{cursor:default}
.grid.locked .cell{cursor:not-allowed}

/* tray */
.tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.trayitem{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);cursor:pointer;font-size:13px}
.trayitem .pips{display:flex;gap:2px}
.trayitem .pip{width:9px;height:9px;border-radius:2px;background:#5c7a2e}
.trayitem.surv .pip{background:var(--zomb)}
.trayitem.sel{border-color:var(--acc);box-shadow:0 0 0 2px rgba(111,191,58,.3)}
.trayitem.done{opacity:.4}
.placeActions{display:flex;gap:8px}
.placeActions .btn{flex:1}
.hint{text-align:center;color:var(--muted);font-size:13px;margin:0;min-height:18px}

/* fleet status dots */
.fleetrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-size:20px;min-height:24px}
.fleetrow .f{opacity:.9;transition:opacity .2s;position:relative}
.fleetrow .f.dead{opacity:.25;filter:grayscale(1)}
.fleetrow .f.dead::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--blood);font-size:14px;font-weight:900}
.boardblock{display:flex;flex-direction:column;gap:6px}
.boardblock.small{--cell:min(7.5vw,30px);opacity:.95}
.blabel{text-align:center;font-size:13px;color:var(--muted)}
.blabel b{color:var(--txt)}

/* log */
.log{background:#0a0d07;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--muted);max-height:70px;overflow-y:auto;line-height:1.5}
.log .hit{color:#e88}.log .win{color:var(--acc)}.log .sv{color:#c89be0}

/* wait / room */
.wait h2{margin:4px 0}
.spinner{font-size:44px;animation:sway 1.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.room .code{font-size:40px;font-weight:900;letter-spacing:10px;color:var(--gold);margin:6px 0}
.sharebtns{display:flex;gap:8px;justify-content:center}
#codeInput{text-align:center;font-size:26px;letter-spacing:8px;text-transform:uppercase;margin-bottom:10px}
.hidden{display:none!important}

/* result */
.verdict{font-size:60px}
#verdictTitle{margin:0}
.eloline{font-size:15px;font-weight:700}
.eloline .up{color:var(--acc)}.eloline .dn{color:var(--blood)}
.overActions{display:flex;gap:10px}
.overActions .btn{flex:1}

/* leaderboard */
.lb{display:flex;flex-direction:column;gap:6px}
.lbrow{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}
.lbrow.me{border-color:var(--acc);background:var(--panel2)}
.lbrow .pos{font-weight:800;color:var(--muted);text-align:center}
.lbrow .pos.top{color:var(--gold)}
.lbrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .el{font-weight:800;color:var(--acc)}
.lbrow .wl{font-size:12px;color:var(--muted)}

/* rules */
.rules{font-size:14px;line-height:1.6;color:var(--txt)}
.rules h3{color:var(--acc);margin:14px 0 4px;font-size:15px}
.rules ul{margin:4px 0;padding-left:20px}
.rules .em{font-size:22px}

/* version tag + update banner */
.buildtag{text-align:center;font-size:11px;color:#5b6650;margin:2px 0 0;letter-spacing:.3px}
.updatebar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:linear-gradient(180deg,var(--acc),var(--acc2));color:#0c1206;font-weight:700;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:drop .25s}
.updatebar .btn{padding:6px 12px}
@keyframes drop{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* confirm / preview bar */
.confirmbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:min(500px,calc(100% - 20px));background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--acc2);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 -8px 26px rgba(0,0,0,.55);z-index:30;animation:rise .16s}
@keyframes rise{from{transform:translateX(-50%) translateY(12px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.confirmbar .cbinfo{font-size:14px;text-align:center;font-weight:600}
.confirmbar .cbinfo b{color:var(--acc)}
.confirmbar .cbtns{display:flex;gap:8px}
.confirmbar .cbtns .btn{flex:1;padding:12px}
.confirmbar.bad{border-color:var(--blood)}
.confirmbar.bad .cbinfo b{color:var(--blood)}
.confirmbar.bad #pcOk{opacity:.4}
.cell.prev{background:#3a4a2280;border-color:var(--acc);animation:pulse 1s infinite}
.cell.prev.bad{background:#4a222280;border-color:var(--blood);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(111,191,58,.5)}50%{box-shadow:0 0 0 3px rgba(111,191,58,.15)}}
.cell.aim{outline:3px solid var(--gold);outline-offset:-2px;z-index:1}
.cell.aim::before{content:"🎯";position:absolute;font-size:calc(var(--cell) * .55)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#000d;color:#fff;padding:10px 16px;border-radius:20px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:50;border:1px solid var(--line)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-height:720px){.btn.big{padding:11px 14px}.btn.big small{display:none}}