/* /play/ — the game page. Linked after /assets/site.css, whose tokens and fonts it
   uses. The page is one canvas: no scroll, no selection, no browser gestures on it.
   The board is always night (site.css: "the painted fields ... are drawn dark in
   both themes"), so the frame around the canvas is --board in either theme. */
html,body{margin:0;padding:0;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body.game{background:var(--board);color:var(--ink);font-family:var(--font-body)}
#game{position:fixed;inset:0;display:block;width:100vw;height:100dvh;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}

/* Shown only when the game cannot start. Plain, readable, in the site's type. */
.nogl{position:fixed;inset:0;overflow:auto;box-sizing:border-box;padding:12vh 1.5rem 2rem;
  background:var(--bg);color:var(--ink);line-height:1.5;font-size:1.1rem}
.nogl>*{max-width:36rem;margin-left:auto;margin-right:auto}
.nogl[hidden]{display:none}
.nogl h1{font-family:var(--font-display);font-weight:700;font-size:2.2rem;line-height:1.1;color:var(--gold);margin-top:0;margin-bottom:1rem}
.nogl a{color:var(--gold)}

/* main.js reads env(safe-area-inset-bottom) off this probe's padding (a phone's home
   indicator), so the battle's action bar can sit just above it. Never visible. */
.safe-probe{position:fixed;left:0;bottom:0;width:0;height:0;visibility:hidden;pointer-events:none;
  padding-bottom:env(safe-area-inset-bottom,0px)}

/* The title's Duel -> Join a code box (scenes/title.js, T-DGM2.6): the one text field the
   game has, laid over the canvas exactly where the panel draws its slot. Its colours are the
   canvas's own night panel and ink (ui/theme.js C.panel / C.ink), the same in both site
   themes, as the board is. */
.duel-code{position:fixed;z-index:2;box-sizing:border-box;margin:0;padding:0 .4em;border:2px solid var(--gold);
  border-radius:0;background:#1a1820;color:#f1eadc;caret-color:var(--gold);font-family:var(--font-display);font-weight:700;
  text-align:center;letter-spacing:.3em;text-transform:uppercase;outline:none;-webkit-user-select:text;user-select:text}
.duel-code:focus{box-shadow:0 0 0 3px var(--gold-dim)}
.duel-code::placeholder{color:#a39b8c;letter-spacing:.2em}
.duel-code[hidden]{display:none}