/* WordCrew — the game screen.
   Built to sample_reference/Wordcrew Game.dc.html and its README: cream and
   burnt orange, Chakra Petch, a 520px column, flip reveals.

   Two deliberate departures from the prototype, both noted in the handoff reply:
   1. Chakra Petch is SELF-HOSTED. The prototype links Google Fonts; this site's
      CSP forbids third-party requests and the privacy policy promises there are
      none. Same typeface, served from our own origin.
   2. The next empty tile carries a cursor ring. The prototype has no such cue;
      it was asked for directly, twice, so it stays.

   The page owns its palette — cream and burnt orange rather than the site's
   navy and cyan — but it carries all three of the site's themes, so the toggle
   behaves identically everywhere. Header, game and footer are one warm world. */

/* --------------------------------------------------------------------------
   Typeface
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Palette — the spec's light theme, and its dark peer
   -------------------------------------------------------------------------- */
.page-play {
  --bg: #efe9dc;
  --ink: #423a2e;
  --muted: #6f6454;   /* 4.79 on --bg, 5.13 on --chip. The handoff's #8d8271
                         measured 3.12 and carries real body text (.wf-lead,
                         .wf-note), which is below the AA floor. */
  --rule: #dcd3bf;
  --chip: #f6f1e4;
  --accent: #c64a17;
  --accent-dark: #a63c10;

  --tile-bd: #d5cbb5;
  --tile-bd-fill: #a99d85;
  --tile-fill: #f9f4e7;
  --key-bg: #f6f0e1;
  --key-bd: #c6bba1;      /* 1.9:1 on the key, 2.2:1 on the page — a real edge */
  --btn-edge: #211b14;    /* 13.6:1 on --chip — the solid boundary, as asked */

  --correct: #7a9440;
  --present: #cfa02b;
  --absent: #a0977f;
  --on-status: #fff8ec;

  /* Letters on a judged tile or key. Cream reads beautifully and fails
     the contrast floor on anything but a dark ground: it measured 3.24 on
     correct, 2.28 on present, 2.75 on absent, and the keyboard's 15px/600
     labels need 4.5. Dark hue-matched ink instead, wherever the ground is
     a mid-tone. */
  --on-correct: #16220b;   /* 4.84 on --correct */
  --on-present: #2a2005;   /* 6.67 on --present */
  --on-absent:  #201c14;   /* 5.84 on --absent  */

  /* The accent, adjusted until it works as SMALL text. --accent is tuned to
     be a fill and a border, where 3:1 is the floor; as 12-15px label text it
     measured 3.95 here and 4.48 on the dark theme, both under 4.5. Use
     --accent for anything painted, --accent-text for anything read. */
  --accent-text: #93330a;  /* 6.0 on --bg, 4.8 on the winner row's accent tint */

  --shadow-key: 0 2px 0 rgba(40, 32, 20, 0.12);
  --shadow-btn: 0 3px 0 rgba(120, 42, 10, 0.35);
  --shadow-toast: 0 6px 18px rgba(40, 32, 20, 0.25);

  /* the site's shared components read these; point them at the game palette
     so header, footer, forms and dialogs belong to the same world */
  --paper: var(--chip);
  --surface: var(--chip);
  --bright: var(--ink);
  --bdr: var(--rule);
  --bdr2: var(--rule);
  --edge: var(--rule);
  --accent-ink: var(--accent);
  --accent-2: var(--accent);
  --accent-2-ink: var(--accent);
  --field-bg: var(--chip);
  --field-fg: var(--ink);
  --field-ph: var(--muted);
  --field-bdr: var(--rule);
  --field-bdr-hover: var(--accent);
  --field-bdr-focus: var(--accent);
  --field-shadow: none;
  --field-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  --btn-bg: var(--accent);
  --btn-fg: var(--on-status);
  --glow: rgba(198, 74, 23, 0.2);
  --tile-c: var(--correct);
  --tile-p: var(--present);
  --tile-a: var(--absent);

  --font-display: "Chakra Petch", "Orbitron", sans-serif;
  --font-body: "Chakra Petch", "Exo 2", system-ui, sans-serif;
  --font-mono: "Chakra Petch", "Share Tech Mono", monospace;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  transition: background 0.35s ease;
  color-scheme: light;
}

/* The game keeps its own warm world, but it carries all three of the site's
   themes so the toggle means the same thing everywhere: Deep is the spec's
   warm dark, Midnight goes near-black and colder for night play. */
:root[data-theme="deep"] .page-play,
:root[data-theme="midnight"] .page-play {
  --bg: #211b15;
  --ink: #ede5d4;
  --muted: #938874;
  --rule: #3b332a;
  --chip: #2c251d;
  --accent: #e0561f;
  --accent-dark: #c04516;

  --tile-bd: #3e362b;
  --tile-bd-fill: #6a5f4d;
  --tile-fill: #2c251d;
  --key-bg: #372e24;
  --key-bd: #574a3a;
  --btn-edge: #8a7c66;    /* 4.6:1 on --chip */

  --correct: #7ea047;
  --present: #d4ac2b;
  --absent: #514838;
  /* correct and present are mid-tones here too, so they take the same
     dark ink; absent is a dark brown, where cream is the legible one */
  --on-correct: #16220b;   /* 5.53 */
  --on-present: #2a2005;   /* 7.45 */
  --on-absent:  #fff8ec;   /* 8.52 */
  --accent-text: #ef7038;  /* 5.72 on --bg, 5.20 on a tinted row */

  --shadow-key: 0 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-btn: 0 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* Midnight — the darkest of the three, cooled toward the site's night palette
   while the accent stays the game's orange. Contrast measured against --bg:
   ink 13.9, muted 4.6, accent 5.0. */
:root[data-theme="midnight"] .page-play {
  --bg: #0d0b09;
  --ink: #e8e2d6;
  --muted: #8e8778;
  --rule: #262220;
  --chip: #171512;
  --accent: #f06a2a;
  --accent-dark: #cf5218;

  --tile-bd: #2b2622;
  --tile-bd-fill: #5f574a;
  --tile-fill: #171512;
  --key-bg: #211d19;
  --key-bd: #46403a;
  --btn-edge: #7d7367;    /* 5.1:1 on --chip */

  --correct: #86a84c;
  --present: #dbb434;
  --absent: #3e3931;
  --on-correct: #16220b;   /* 6.09 */
  --on-present: #2a2005;   /* 8.10 */
  --on-absent:  #fff8ec;   /* 10.84 */
  --accent-text: var(--accent);   /* 6.36 already — nothing to adjust */

  --shadow-key: 0 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-btn: 0 3px 0 rgba(0, 0, 0, 0.6);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Page frame — a single centred column, the game filling the viewport
   -------------------------------------------------------------------------- */
.page-play .site-head { display: none; }   /* the game screen carries its own */

/* The handoff sizes everything for a tall phone. Those are the sizes wherever
   there is room; on shorter screens the same design compresses in three steps
   so the board and keyboard still land on one screen. */
.page-play {
  --wc-pad: 28px;
  --wc-gap: 18px;
  --wc-key: 52px;
  --wc-kgap: 6px;
  --wc-tgap: 7px;
  --wc-head: 92px;      /* utility row + wordmark + strapline + rule */
  --wc-actions: 46px;
}
@media (max-width: 27rem) {
  .page-play { --wc-head: 78px; }   /* the strapline is hidden at this width */
}
@media (max-height: 760px) {
  .page-play { --wc-pad: 14px; --wc-gap: 13px; --wc-key: 46px; --wc-tgap: 6px; --wc-actions: 44px; }
}
@media (max-height: 640px) {
  .page-play { --wc-pad: 10px; --wc-gap: 10px; --wc-key: 42px; --wc-kgap: 5px; --wc-tgap: 5px; --wc-actions: 40px; }
  .page-play .btn { padding: 11px 20px; font-size: 12px; }
  .key { font-size: 14px; }
  .key.wide { font-size: 10px; }
}

.page-play #main {
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wc-pad) 16px;
}
/* Centring is for the board, which has to sit in the middle of the thumb's
   reach. The menu, setup and lobby read top-down like a page, so they start at
   the top and grow downward instead of drifting as their content changes. */
.page-play:not(.is-playing) #main { justify-content: flex-start; }
.wf-stage {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: var(--wc-gap);
  min-width: 0;
}