/* /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}
/* The Daily board's name field (scenes/daily-board.js, T-DGDAILY.2b): the same box, for a name */
.daily-name{letter-spacing:.04em;text-transform:none;font-weight:600}
.daily-name::placeholder{letter-spacing:.04em}

/* The copy strip (ui/copy-strip.js, T-DGGUARD.1): only on a host that is not dankgame.com.
   One line in the page's flow above the canvas; main.js sizes and places the game under it,
   so it covers nothing. Night colours, as the board and the code box use in both themes. */
.copy-strip{position:relative;z-index:3;box-sizing:border-box;display:block;margin:0;padding:env(safe-area-inset-top,0px) .75rem 0;
  background:#1a1820;color:#f1eadc;border-bottom:1px solid var(--gold-dim);font:.8125rem/1.35 var(--font-body);text-align:center}
.copy-strip a{display:inline-block;min-height:44px;line-height:44px;padding:0 .4em;color:#e8b34f;font-weight:700}
html.home .copy-strip{order:-2;flex:none}