:root { --bg:#0e1116; --panel:#171c24; --line:#2a3340; --text:#dfe6ee; --dim:#8b97a6; --acc:#e8b84a; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font:14px/1.4 Segoe UI, system-ui, sans-serif; }
[hidden] { display:none !important; }
button, select, input { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:4px; padding:5px 10px; font:inherit; }
button { cursor:pointer; } button:hover { border-color:var(--acc); }

#login { height:100%; display:grid; place-items:center; }
#loginForm { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:28px; width:min(340px, 90vw); display:grid; gap:12px; }
#loginForm h1 { margin:0 0 4px; font-size:20px; }
#loginErr { margin:0; color:#e66; min-height:1.4em; }

#app { height:100%; display:grid; grid-template-rows:auto 1fr auto; }
header, footer { display:flex; gap:10px; align-items:center; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); }
footer { border-top:1px solid var(--line); border-bottom:0; }
.spacer { flex:1; }
.badge { padding:2px 8px; border-radius:10px; background:#2a3340; color:var(--dim); font-size:12px; }
.badge.live { background:#1f5c2c; color:#9df0ae; }
.badge.replay { background:#5c4a1f; color:#f0d79d; }
main { display:grid; grid-template-columns:1fr 320px; min-height:0; }
#mapWrap { position:relative; overflow:hidden; background:#000; cursor:grab; }
#mapWrap.drag { cursor:grabbing; }
#map { display:block; width:100%; height:100%; image-rendering:pixelated; }
#tip { position:absolute; pointer-events:none; background:#000c; border:1px solid var(--line); padding:3px 7px; border-radius:4px; font-size:12px; white-space:nowrap; }
aside { display:flex; flex-direction:column; border-left:1px solid var(--line); min-height:0; overflow:auto; }
aside section { padding:10px 12px; border-bottom:1px solid var(--line); }
aside section.grow { flex:1; min-height:120px; overflow:auto; }
aside h2 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
ul { list-style:none; margin:0; padding:0; }
#players li { display:flex; align-items:center; gap:8px; padding:2px 0; }
#players .dot { width:12px; height:12px; border-radius:50%; flex:none; }
#players .cur { color:var(--acc); font-weight:600; }
#players .num { margin-left:auto; color:var(--dim); font-size:12px; }
#events li { padding:3px 0; border-bottom:1px solid #1d242e; cursor:pointer; }
#events li:hover { color:var(--acc); }
#events .r { color:var(--dim); margin-right:6px; font-size:12px; }
#stats table { border-collapse:collapse; width:100%; font-size:13px; }
#stats th, #stats td { text-align:right; padding:2px 6px; border-bottom:1px solid #1d242e; }
#stats th:first-child, #stats td:first-child { text-align:left; }
#stats th { color:var(--dim); font-weight:600; }
#slider { flex:1; }
#turnLabel { min-width:130px; color:var(--dim); }

@media (max-width: 800px) {
  main { grid-template-columns:1fr; grid-template-rows:55% 45%; }
  aside { border-left:0; border-top:1px solid var(--line); }
}