:root {
  --bg: #10131a; --panel: #1a1e29; --panel2: #222736; --panel3: #2a3042;
  --text: #e8e9ee; --dim: #9aa0b0; --faint: #6b7183;
  --accent: #7aa2f7; --good: #9ece6a; --bad: #f7768e; --warn: #e0af68;
  --plan: #bb9af7; --border: #2c3040; --border2: #3a4056;
  --land: #8a7a55; --creature: #6a9955; --artifact: #8f98a8;
  --enchantment: #a97fd1; --planeswalker: #d1a75f; --instant: #6fa8dc;
  --sorcery: #cc7b6f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column;
}
header {
  padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  /* deliberately NOT sticky: nav, account, settings and the bug button are
     all "before you play" chrome — scrolling down to read someone else's
     board should leave every bit of it behind. The turn ruler (#phasebar) is
     the one header-ish thing worth keeping on screen, and it pins itself. */
  position: relative; z-index: 5;
}
header h1 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: .01em;
            cursor: pointer; }
header .sub { color: var(--dim); font-size: 12.5px; }
#turninfo { margin-left: auto; font-variant-numeric: tabular-nums; }
#conn { width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
        display: inline-block; margin-right: 6px; transition: background .3s; }
#conn.on { background: var(--good); }
/* header nav: the games menu jumps between everything this browser can sit at */
.hbtn { min-height: 0; padding: 3px 10px; font-size: 12px; border-radius: 12px;
        color: var(--dim); flex: 0 0 auto; }
#gamesmenu {
  position: absolute; top: calc(100% + 4px); right: 10px; z-index: 30;
  width: min(420px, calc(100vw - 20px));
  background: var(--panel2); border: 1px solid var(--border2);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55);
  padding: 6px; max-height: 70vh; overflow-y: auto;
}
#gamesmenu .gmrow { display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
#gamesmenu .gmrow:hover { background: var(--panel3); }
#gamesmenu .gmrow.cur { outline: 1px solid var(--accent); }
#gamesmenu .gmrow .sub { margin-left: auto; text-align: right;
                         white-space: nowrap; }
#gamesmenu .gmhead { font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); padding: 6px 10px 2px; }
/* the document itself scrolls (not main) so the scrollbar sits at the true
   window edge instead of floating at the centered content's inner border */
main { flex: 1; padding: 12px 14px 240px; }
@media (min-width: 980px) {
  main { max-width: 980px; margin: 0 auto; width: 100%; }
  /* fixed + left/right 0 + margin auto centers it; translateX tricks push it
     off-screen (the improvised UI had this bug too) */
  #prompt-bar { max-width: 760px; margin: 0 auto; }
}