/* Generated by npm run styles. Edit web/arcade.css or the style-grammar source sheets. */

/* style-grammar/style-grammar.css | sha256:145654e6cde4593bf5ad47292144201b6c989d53b52facb5f4e85656393a5e25 */
/*
  style-grammar: the workshop house style.

  Drop in with one <link>. Styles plain HTML elements; no classes needed.
  Uses only features Baseline lists as newly or widely available.
  Experimental enhancements live in style-grammar-edge.css.

  Everything sits inside the `grammar` cascade layer, so any unlayered
  CSS on the page overrides it regardless of specificity.
*/

@layer grammar.reset, grammar.tokens, grammar.base, grammar.edge;

/* ------------------------------------------------------------------ */
/* Reset                                                              */
/* ------------------------------------------------------------------ */

@layer grammar.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  svg,
  canvas {
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  :where(h1, h2, h3, h4, h5, h6, p, li, dd, blockquote, figcaption, caption) {
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------------------ */
/* Tokens                                                             */
/* ------------------------------------------------------------------ */

/*
  Colors come in families. Each family has one job.

  Neutrals  paper, line, ink. Carry no meaning; all hierarchy comes from them.
  Act       you can act here: links, focus, selection.
  State     what condition something is in. Saturated, rare, always with a glyph.
  Identity  which thing this is. Muted, stable, ordered by contrast with paper.

  Within a family, members differ in lightness so a grayscale rendering
  still tells them apart. Each value is written as oklch() so lightness
  is the first number.
*/

@layer grammar.tokens {
  :root {
    color-scheme: light dark;

    /* Neutrals */
    --paper:   light-dark(oklch(0.985 0.004 95), oklch(0.20 0.008 250));
    --paper-2: light-dark(oklch(0.955 0.005 95), oklch(0.24 0.008 250));
    --line:    light-dark(oklch(0.86 0.006 95),  oklch(0.34 0.010 250));
    --line-2:  light-dark(oklch(0.70 0.008 95),  oklch(0.48 0.012 250));
    --ink-2:   light-dark(oklch(0.48 0.010 95),  oklch(0.72 0.010 250));
    --ink:     light-dark(oklch(0.24 0.010 95),  oklch(0.92 0.006 250));

    /* Act */
    --act: light-dark(oklch(0.50 0.15 255), oklch(0.74 0.12 250));

    /* State, after IEC 60073 */
    --stop:    light-dark(oklch(0.53 0.19 28), oklch(0.62 0.19 25));
    --normal:  light-dark(oklch(0.62 0.14 150), oklch(0.75 0.15 150));
    --caution: light-dark(oklch(0.84 0.16 85), oklch(0.88 0.15 90));
    /* Yellow on light paper is too faint alone; its glyph gets an ink edge, like a warning sign. */
    --caution-edge: light-dark(oklch(0.24 0.010 95), transparent);

    --glyph-stop: "■";
    --glyph-caution: "▲";
    --glyph-normal: "●";
    --glyph-working: "◌";

    /* Identity: id-1 has the most contrast with paper in both themes */
    --id-1: light-dark(oklch(0.40 0.080 300), oklch(0.88 0.050 300));
    --id-2: light-dark(oklch(0.53 0.075 200), oklch(0.73 0.070 200));
    --id-3: light-dark(oklch(0.66 0.080 65),  oklch(0.58 0.080 65));

    /* Type */
    --font-sans:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Oxygen, Ubuntu, Cantarell,
      "Helvetica Neue",
      Arial,
      sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --text-label: 0.75rem;
    --text-small: 0.8125rem;
    --text-code: 0.875em;

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;

    /* Shape */
    --measure: 70ch;
    --radius: 3px;
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */

@layer grammar.base {
  html {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.5;
  }

  body {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
  }

  /* Flow: blocks space themselves below, never above. */
  :where(p, ul, ol, dl, pre, blockquote, table, figure, fieldset, details, form) {
    margin-block: 0 var(--space-3);
  }

  /* Containers do not add space at their own edges. */
  :where(dialog, [popover], fieldset, details, blockquote, li, dd, td, th) > :first-child {
    margin-block-start: 0;
  }

  :where(dialog, [popover], fieldset, details, blockquote, li, dd, td, th) > :last-child {
    margin-block-end: 0;
  }

  /* Headings ------------------------------------------------------- */

  h1, h2, h3, h4, h5, h6 {
    margin-block: var(--space-5) var(--space-2);
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
  }

  h1 {
    margin-block-start: 0;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
  }

  /* The section label sits in the frame line, as on a panel. */
  h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;

    &::after {
      content: "";
      flex: 1;
      border-block-start: 1px solid var(--line);
    }
  }

  h3 {
    font-size: 1.0625rem;
  }

  /* Labels: small, tracked capitals, the engraved legend under a control. */
  h4, h5, h6, legend, th {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  h4, h5, h6 {
    margin-block-start: var(--space-4);
  }

  /* Text ----------------------------------------------------------- */

  a {
    color: var(--act);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  :focus-visible {
    outline: 2px solid var(--act);
    outline-offset: 2px;
  }

  ::selection {
    background: color-mix(in oklch, var(--act) 25%, transparent);
  }

  strong, b {
    font-weight: 600;
  }

  small {
    font-size: var(--text-small);
  }

  /* A highlight, not a warning: yellow means caution here, so mark stays neutral. */
  mark {
    background: color-mix(in oklch, var(--ink) 12%, transparent);
    color: inherit;
  }

  abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  del {
    color: var(--ink-2);
  }

  sub, sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  /* Numbers are instruments: digits keep fixed widths. */
  data, output, table, ol {
    font-variant-numeric: tabular-nums;
  }

  /* A value and its unit never break apart. */
  data, output {
    white-space: nowrap;
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: var(--text-code);
  }

  code {
    padding: 0.1em 0.3em;
    border-radius: var(--radius);
    background: var(--paper-2);
  }

  kbd {
    padding: 0.05em 0.35em;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
  }

  pre {
    overflow-x: auto;
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--paper-2);
    line-height: 1.45;

    & code {
      padding: 0;
      background: none;
      font-size: inherit;
    }
  }

  blockquote {
    margin-inline: 0;
    padding-inline-start: var(--space-3);
    border-inline-start: 3px solid var(--line);
    color: var(--ink-2);
  }

  hr {
    margin-block: var(--space-5);
    border: 0;
    border-block-start: 1px solid var(--line);
  }

  /* Lists ---------------------------------------------------------- */

  ul, ol {
    padding-inline-start: 1.5em;
  }

  /* A dash, so list markers never look like state glyphs. */
  ul {
    list-style-type: "– ";
  }

  li + li {
    margin-block-start: var(--space-1);
  }

  li > :is(ul, ol) {
    margin-block: var(--space-1) 0;
  }

  dt {
    font-weight: 600;
  }

  dd {
    margin-inline-start: 1.5em;

    & + dt {
      margin-block-start: var(--space-2);
    }
  }

  /* Tables --------------------------------------------------------- */

  table {
    width: 100%;
    border-collapse: collapse;
    border-block: 1px solid var(--line-2);
  }

  caption {
    padding-block-end: var(--space-2);
    text-align: start;
    font-size: var(--text-small);
    color: var(--ink-2);
  }

  th, td {
    padding: 0.375rem 0.75rem;
    vertical-align: top;

    &:first-child {
      padding-inline-start: 0;
    }

    &:last-child {
      padding-inline-end: 0;
    }
  }

  th {
    vertical-align: bottom;

    /* Respect align from Markdown renderers. */
    &:not([align]) {
      text-align: start;
    }
  }

  thead th {
    border-block-end: 1px solid var(--line-2);
  }

  tbody tr + tr {
    border-block-start: 1px solid var(--line);
  }

  /* Wrap a wide table in a figure and the figure scrolls, not the page. */
  figure:has(> table) {
    overflow-x: auto;
  }

  /* A cell holding only a <data> value is a number: right-align it. */
  td:has(> data:only-child) {
    text-align: end;
  }

  /* Figures -------------------------------------------------------- */

  figure {
    margin-inline: 0;
  }

  figcaption {
    margin-block-start: var(--space-2);
    font-size: var(--text-small);
    color: var(--ink-2);
  }

  /* Forms ---------------------------------------------------------- */

  /* A group is a panel: a frame with its label in the frame line. */
  fieldset {
    min-inline-size: 0;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  legend {
    padding-inline: var(--space-2);
    margin-inline-start: calc(-1 * var(--space-2));
  }

  label {
    display: block;
    margin-block-end: var(--space-1);
    font-size: 0.875rem;
    font-weight: 600;
  }

  label:has(> input:is([type="checkbox"], [type="radio"])) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 400;
  }

  /* :where keeps this at zero specificity, so :user-invalid and :disabled can override it. */
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), select, textarea) {
    display: block;
    width: 100%;
    margin-block-end: var(--space-3);
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--paper);
  }

  textarea {
    min-block-size: 6rem;
    resize: vertical;
  }

  input[type="checkbox"],
  input[type="radio"] {
    margin: 0;
  }

  input[type="range"] {
    width: 100%;
  }

  ::placeholder {
    color: var(--ink-2);
    opacity: 1;
  }

  /* Invalid after the person has interacted: stop color plus a heavier edge, so it reads without color. */
  :user-invalid,
  :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--stop);
    border-inline-start-width: 4px;
  }

  :disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  button,
  input:is([type="submit"], [type="button"], [type="reset"]),
  ::file-selector-button {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--paper-2);
    font-weight: 600;
    cursor: pointer;

    &:hover:not(:disabled) {
      background: color-mix(in oklch, var(--paper-2), var(--ink) 6%);
    }

    &:active:not(:disabled) {
      background: color-mix(in oklch, var(--paper-2), var(--ink) 12%);
    }
  }

  /* Disclosure and overlays ---------------------------------------- */

  summary {
    font-weight: 600;
    cursor: pointer;
  }

  details[open] > summary {
    margin-block-end: var(--space-2);
  }

  dialog,
  [popover] {
    max-inline-size: min(var(--measure), calc(100vw - 2 * var(--space-3)));
    padding: var(--space-4);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
  }

  /* Only modal dialogs dim the page; popovers stay light. */
  dialog::backdrop {
    background: rgb(0 0 0 / 0.4);
    background: color-mix(in oklch, var(--ink) 30%, transparent);
  }

  /* State ---------------------------------------------------------- */

  /*
    data-state names a condition. The glyph carries it without color;
    the color carries it without the glyph. Normal is quiet by default:
    in a dark board, only deviations light up, so an application at rest
    shows no state at all.
  */
  [data-state="stop"] {
    --signal: var(--stop);
    --glyph: var(--glyph-stop);
  }

  [data-state="caution"] {
    --signal: var(--caution);
    --glyph: var(--glyph-caution);
  }

  [data-state="normal"] {
    --signal: var(--normal);
    --glyph: var(--glyph-normal);
  }

  /*
    Working is a signal, not a state: something is under way and nothing is
    wrong. It is ink, hollow where the states are filled, and it breathes
    slowly instead of blinking.
  */
  [data-state="working"] {
    --signal: var(--ink);
    --glyph: var(--glyph-working);
  }

  /* The glyph replaces the list marker rather than following it. */
  li[data-state] {
    list-style-type: none;
  }

  [data-state]::before {
    content: var(--glyph) / "";
    margin-inline-end: 0.4em;
    color: var(--signal);
  }

  [data-state="caution"]::before {
    text-shadow:
      1px 0 var(--caution-edge),
      -1px 0 var(--caution-edge),
      0 1px var(--caution-edge),
      0 -1px var(--caution-edge);
  }

  /*
    Only the glyph breathes; the word beside it holds still. The dotted
    circle draws smaller and lighter than the filled glyphs, so it is set
    larger to match them, without growing the line.
  */
  [data-state="working"]::before {
    font-size: 1.25em;
    line-height: 0;
    animation: grammar-breathe 1.6s ease-in-out infinite alternate;
  }

  @keyframes grammar-breathe {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.35;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-state="working"]::before {
      animation: none;
    }
  }

  /* Print ---------------------------------------------------------- */

  @media print {
    :root {
      color-scheme: light;
    }

    body {
      max-width: none;
      padding: 0;
    }

    a {
      color: inherit;
    }

    pre, blockquote, table, figure {
      break-inside: avoid;
    }
  }
}

/* style-grammar/style-grammar-edge.css | sha256:3c7247cb8b3639b3d8d3dbb0781670d1f8addedbd9f8bf0190038f007ed92245 */
/*
  style-grammar edge: experimental enhancements.

  Load after style-grammar.css. Every rule here is a progressive
  enhancement: a page reads correctly when the browser ignores it.
  Each entry names its Baseline status (webstatus.dev, 2026-10-01)
  and what happens without it.
*/

@layer grammar.edge {
  /*
    accent-color: limited.
    Checkboxes, radios, range sliders, and progress bars take the act color.
    Without it they use the platform's own accent.
  */
  :root {
    accent-color: var(--act);
  }

  /*
    text-wrap: pretty: limited.
    Avoids one-word last lines in running text.
    Without it lines wrap greedily.
  */
  p, li, dd, blockquote, figcaption {
    text-wrap: pretty;
  }
}

/* model-arcade/web/arcade.css | sha256:e72f3744067be8bf2f60207605c5730f4b572302223130871ea86cacabeae9b3 */
:root {
  --muted: var(--ink-2);
  --arcade-measure: 1120px;
}

body {
  max-width: none;
  margin: 0;
  padding: 0;
}

button, a, input, select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:disabled { cursor: default; }
h1:focus { outline: none; }
p { line-height: 1.6; }
button, input, select, textarea { font-size: inherit; }

.page-shell {
  max-width: var(--arcade-measure);
  padding: 0 32px;
  margin: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 94px;
  border-bottom: 1px solid var(--line-2);
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.5px;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  font: 700 39px/.8 Georgia, serif;
  padding-bottom: 4px;
}

.brand-mark span { position: absolute; top: -4px; right: 1px; font: 23px/1 Georgia, serif; }
.header-right { display: flex; align-items: center; gap: 20px; }
.edition, .eyebrow, .mode-badge, .art-note, .art-caption, .site-footer, .evidence-date {
  font-size: var(--text-label);
  font-weight: 550;
  letter-spacing: .075em;
}

.edition { color: var(--ink-2); font-size: 10px; }
.mode-badge { font-size: 10px; padding: 6px 0; white-space: nowrap; }
.appearance { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 11px; }
.appearance select { width: auto; min-height: 36px; margin: 0; padding: 5px 8px; font-size: 12px; }
.fixture-notice { color: var(--ink-2); font-size: 12px; margin: 18px 0; }
.cabinet { margin-top: 42px; }
.hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: 70px; align-items: center; }
.eyebrow { color: var(--ink-2); font-size: 10px; margin-bottom: 16px; }
.game-title { font-size: clamp(72px, 9vw, 114px); font-weight: 650; letter-spacing: -.075em; line-height: .86; margin: 30px 0 24px; }
.game-title span { display: block; }
.game-title span:last-child { margin-left: 42px; }
.tagline { font-size: 20px; font-weight: 550; letter-spacing: -.035em; margin-bottom: 8px; }
.intro-copy { color: var(--ink-2); font-size: 14px; max-width: 365px; margin-bottom: 28px; }
.model-picker { min-width: 0; margin: 0 0 16px; padding: 12px; }
.model-picker legend { margin: 0; padding-inline: 6px; }
.model-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.model-option { display: flex; align-items: center; gap: 10px; padding: 12px 8px; margin: 0; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.model-option.selected { border-color: var(--act); background: color-mix(in oklch, var(--act) 6%, var(--paper)); }
.model-option input { flex-shrink: 0; width: 15px; height: 15px; }
.model-option strong { display: block; font-size: 13px; font-weight: 650; }
.model-option small { display: block; margin-top: 4px; color: var(--ink-2); font-size: 10px; line-height: 1.4; }
.primary, .secondary { min-height: 44px; padding: 12px 18px; border-radius: var(--radius); font-size: 14px; line-height: 1.4; }
.primary { min-height: 48px; border-color: var(--act); background: var(--act); color: var(--paper); }
.primary:hover:enabled { background: color-mix(in oklch, var(--act), var(--ink) 12%); }
.primary:active:enabled { background: color-mix(in oklch, var(--act), var(--ink) 20%); }
.secondary { background: var(--paper); }
.play-button { width: 100%; text-align: left; font-size: 16px; }
.card-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 12px; }
.word-art { position: relative; padding: 20px 8px; max-width: 430px; width: 100%; margin: auto; }
.art-note { font-size: 10px; margin-bottom: 20px; }
.sample-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; transform: rotate(-4deg); margin: 25px 0 30px; }
.sample-tile { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1.08; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: clamp(18px, 2.4vw, 25px); background: var(--paper); }
.sample-target { border: 2px solid var(--ink); font-weight: 650; transform: rotate(7deg); }
.art-spark { position: absolute; right: 7%; top: -21px; font-size: 54px; line-height: 1; }
.art-caption { text-align: right; max-width: 265px; margin: 0 0 0 auto; color: var(--ink-2); font-size: 10px; line-height: 1.6; letter-spacing: .03em; }
.how-to { list-style: none; counter-reset: steps; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 26px 0 0; margin: 44px 0; border-top: 1px solid var(--line); }
.how-to li { counter-increment: steps; position: relative; margin: 0; padding-left: 28px; }
.how-to li::before { content: '0' counter(steps); position: absolute; left: 0; top: 3px; font-size: 10px; color: var(--ink-2); }
.how-to h2 { display: block; margin: 0 0 8px; font-size: 14px; }
.how-to h2::after { content: none; }
.how-to p { color: var(--ink-2); font-size: 12px; margin: 0; }
.site-footer { display: flex; justify-content: space-between; align-items: start; gap: 32px; margin-top: 48px; padding: 22px 0 28px; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 10px; letter-spacing: .02em; }
.about-arcade { max-width: 440px; margin: 0; text-align: right; }
.about-arcade summary { color: var(--act); font-size: 11px; }
.about-arcade p { font-size: 12px; margin: 14px 0 0; text-align: left; letter-spacing: 0; }

.game-cabinet { max-width: 700px; margin: 28px auto 40px; }
.game-topline, .game-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; }
.game-topline .eyebrow { margin: 0; }
.round-progress { display: flex; gap: 8px; margin: 24px 0; padding: 0; list-style: none; }
.round-mark { flex: 1; margin: 0; padding: 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); text-align: center; font-size: 12px; line-height: 1; }
.round-mark.current { color: var(--ink); border-bottom: 3px solid var(--ink); font-weight: 700; }
.round-mark.correct, .round-mark.incorrect { color: var(--ink); }
.round-mark.unavailable { border-bottom-style: dashed; }
.turn-heading { text-align: center; }
.turn-heading h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; margin: 0 0 10px; }
.turn-heading .eyebrow { margin-bottom: 12px; }
.turn-description { color: var(--ink-2); font-size: 14px; margin-bottom: 20px; }
.clue-display { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; padding: 14px 18px; margin: 18px 0; border-block: 1px solid var(--line); background: var(--paper-2); text-align: center; }
.clue-display .eyebrow { margin: 0; font-size: 9px; }
.clue-text { font-size: 23px; font-weight: 550; letter-spacing: -.035em; overflow-wrap: anywhere; }
.word-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 22px; }
.word-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 86px; padding: 16px 6px 10px; border: 1px solid var(--line-2); background: var(--paper); }
.word-tile:disabled { opacity: 1; }
.word-tile:enabled:hover { border-color: var(--act); background: color-mix(in oklch, var(--act) 6%, var(--paper)); }
.word-tile.target { border: 2px solid var(--ink); background: var(--paper-2); }
.word-tile.chosen:not(.target) { border: 3px double var(--ink); }
.word-tile.target.chosen { border: 2px solid var(--ink); }
.tile-word { font-size: clamp(19px, 2.5vw, 24px); font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; }
.tile-marker { font-size: 9px; font-weight: 600; letter-spacing: .06em; line-height: 1; }
.word-tile.target .tile-marker { color: var(--paper); background: var(--ink); padding: 3px 5px; border-radius: 2px; }
.word-tile.target.chosen .tile-marker { color: var(--ink); background: none; }
.clue-form { margin: 20px 0; }
.clue-form label { font-size: 10px; margin-bottom: 10px; }
.clue-entry { display: flex; gap: 10px; }
.clue-entry input { min-width: 0; min-height: 48px; margin: 0; padding: 12px 14px; font-size: 17px; }
.clue-entry .primary { white-space: nowrap; }
.field-help { color: var(--ink-2); font-size: 12px; margin: 10px 0; }
.partner-wait { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; margin: 18px 0; font-size: 13px; background: var(--paper-2); }
.elapsed { color: var(--ink-2); font-size: 11px; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.reveal { text-align: center; padding: 8px 0 16px; }
.reveal>p { font-size: 14px; margin-bottom: 14px; }
.reveal .primary { min-width: 220px; }
.save-message { padding: 10px; color: var(--ink-2); background: var(--paper-2); border-radius: var(--radius); }
.save-message.save-failed { color: var(--ink); border: 1px solid var(--line-2); }
.game-bottom { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.text-button { min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: var(--act); text-decoration: underline; text-underline-offset: .2em; font-size: 12px; }
.text-button:hover:enabled { background: transparent; text-decoration-thickness: 2px; }

.end-screen { padding: 18px 0; }
.end-screen>.eyebrow { margin-bottom: 16px; }
.end-screen h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -.05em; margin-bottom: 22px; }
.final-score { display: flex; align-items: center; gap: 20px; margin: 22px 0 12px; }
.final-score strong { font-size: 76px; font-weight: 550; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.final-score span { max-width: 110px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.score-detail { font-size: 13px; font-weight: 550; margin-bottom: 20px; }
.end-screen>.muted { max-width: 520px; font-size: 13px; }
.card-cta { display: inline-block; font-size: 13px; margin: 0 0 16px; }
.feedback { margin: 26px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.feedback p { font-size: 14px; }
.feedback button { margin: 0 8px 8px 0; }
.rematch-button { width: 100%; }
.muted { color: var(--ink-2); }
.notice { margin: 20px 0; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper-2); font-size: 14px; }
.notice p:last-child { margin-bottom: 0; }
.error-notice .secondary { margin-top: 8px; }
.clue-error { margin: 10px 0; }
.model-card { max-width: 760px; margin: 28px auto 50px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 30px 0 24px; }
.card-heading h1 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 48px); letter-spacing: -.05em; overflow-wrap: anywhere; scroll-margin-top: 25px; }
.card-heading p { font-size: 13px; }
.model-stamp { display: flex; align-items: center; justify-content: center; width: 74px; height: 88px; border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 48px; font-weight: 500; flex-shrink: 0; }
.card-section { margin-top: 32px; padding-top: 4px; }
.card-section h2 { font-size: 19px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; }
.fact { min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact dt { font-size: 11px; color: var(--ink-2); font-weight: 500; margin-bottom: 6px; }
.fact dd { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.cohort { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.cohort h3 { margin-top: 0; font-size: 15px; }
.cohort-score { display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.cohort-score strong { font-size: 36px; font-weight: 550; letter-spacing: -.04em; }
.cohort-score span { font-size: 12px; color: var(--ink-2); }
.cohort p { font-size: 13px; }
.cohort .evidence-date { font-size: 11px; }
.interpretation { padding-left: 14px; margin-top: 24px; border-left: 2px solid var(--line-2); color: var(--ink-2); font-size: 12px; }
.empty-evidence { padding: 24px; margin: 20px 0; border: 1px dashed var(--line-2); color: var(--ink-2); font-size: 14px; }
.cohort details, .card-section>details { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
summary { font-size: 13px; }
.technical dd { font-family: var(--font-mono); font-size: 11px; }
.sources { list-style: none; padding: 0; }
.sources li { display: flex; flex-direction: column; align-items: start; gap: 6px; margin: 18px 0; font-size: 13px; }
.evidence-date { color: var(--ink-2); font-weight: 400; letter-spacing: 0; }
.loading { display: flex; align-items: center; justify-content: center; min-height: 240px; font-size: 24px; font-weight: 500; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 2; padding: 12px; background: var(--paper); color: var(--act); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-recap { margin: 26px 0 30px; padding-top: 24px; border-top: 1px solid var(--line); text-align: left; }
.game-recap>summary { margin-bottom: 18px; }
.game-recap>.eyebrow { font-size: 9px; margin-bottom: 10px; }
.game-recap h2 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.04em; }
.recap-context, .recap-coverage, .recap-status, .recap-local { color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.recap-table { table-layout: fixed; margin: 20px 0 12px; }
.recap-table th, .recap-table td { padding: 16px 10px; overflow-wrap: anywhere; text-align: left; vertical-align: top; }
.recap-table thead th { padding: 10px; font-size: 9px; }
.recap-table th:first-child { width: 11%; }
.recap-table th:nth-child(2) { width: 23%; }
.recap-table th:nth-child(3) { width: 33%; }
.recap-table .recap-round { padding-top: 19px; font-size: 11px; font-weight: 400; }
.recap-table td { font-size: 16px; line-height: 1.4; }
.recap-word { font-weight: 600; }
.recap-value { display: block; }
.recap-table small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 10px; line-height: 1.5; }
.recap-guess { background: var(--paper-2); }
.recap-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 12px; }
.recap-controls button { font-size: 13px; }
.recap-status:empty { display: none; }
.recap-local { font-size: 11px; margin: 0; }
.recap-copy { width: 100%; padding: 12px; font: 13px/1.5 var(--font-mono); }

@media (max-width: 850px) {
  .page-shell { padding: 0 24px; }
  .hero { gap: 35px; }
  .game-title { font-size: 86px; }
  .model-option { padding: 10px 5px; gap: 7px; }
  .model-option strong { font-size: 12px; }
  .card-links { font-size: 11px; }
  .header-right { gap: 14px; }
  .edition { display: none; }
  .word-art { padding: 20px 0; }
  .how-to { gap: 20px; }
}

@media (max-width: 640px) {
  .page-shell { padding: 0 20px; }
  .site-header { min-height: 80px; gap: 12px; }
  .brand { font-size: 12px; gap: 7px; }
  .brand-mark { width: 34px; height: 35px; font-size: 32px; border-radius: 8px; }
  .brand-mark span { font-size: 20px; top: -3px; }
  .header-right { gap: 10px; }
  .mode-badge { font-size: 9px; letter-spacing: .025em; }
  .appearance>span { display: none; }
  .appearance select { padding: 5px; max-width: 77px; font-size: 11px; }
  .fixture-notice { font-size: 11px; margin: 15px 0 20px; }
  .cabinet { margin-top: 28px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .game-title { font-size: clamp(52px, 18vw, 75px); margin: 26px 0 20px; letter-spacing: -.07em; }
  .game-title span { display: inline; }
  .game-title span:last-child { margin-left: 10px; }
  .tagline { font-size: 19px; }
  .intro-copy { max-width: 340px; font-size: 14px; margin-bottom: 25px; }
  .model-picker { padding: 10px; }
  .model-option strong { font-size: 12px; }
  .model-option small { font-size: 9px; }
  .word-art { max-width: 300px; padding: 15px 15px 0; margin-top: 18px; }
  .art-spark { font-size: 36px; top: -14px; right: 4px; }
  .art-note { font-size: 9px; margin-bottom: 12px; }
  .sample-tiles { gap: 7px; margin: 20px 0 23px; }
  .sample-tile { aspect-ratio: 1.25; font-size: 19px; }
  .art-caption { font-size: 9px; }
  .how-to { grid-template-columns: 1fr; gap: 22px; margin: 32px 0; }
  .how-to h2 { margin-bottom: 4px; }
  .site-footer { flex-direction: column; gap: 14px; margin-top: 32px; }
  .about-arcade { text-align: left; }
  .game-cabinet { margin-top: 24px; }
  .game-topline { font-size: 11px; }
  .game-topline .eyebrow { font-size: 9px; }
  .round-progress { gap: 6px; margin: 20px 0 26px; }
  .round-mark { font-size: 11px; }
  .turn-heading h1 { font-size: 30px; }
  .turn-description { font-size: 13px; }
  .clue-display { gap: 10px; padding: 12px; }
  .clue-text { font-size: 22px; }
  .word-board { gap: 8px; }
  .word-tile { min-height: 82px; padding: 14px 3px 8px; }
  .tile-word { font-size: 20px; }
  .tile-marker { font-size: 8px; letter-spacing: .02em; }
  .clue-entry { flex-direction: column; }
  .clue-entry input { font-size: 16px; }
  .field-help { font-size: 11px; }
  .game-bottom { font-size: 11px; }
  .end-screen { padding: 14px 0; }
  .end-screen h1 { font-size: 34px; }
  .final-score strong { font-size: 64px; }
  .score-detail { font-size: 12px; }
  .model-stamp { width: 54px; height: 66px; font-size: 36px; }
  .facts { gap: 0 18px; }
  .fact dd { font-size: 12px; }
  .fact dt { font-size: 10px; }
  .model-card>.primary { width: 100%; }
  .cohort { padding: 16px; }
  .recap-table th, .recap-table td { padding: 13px 5px; }
  .recap-table thead th { padding: 9px 5px; font-size: 8px; letter-spacing: .04em; }
  .recap-table th:first-child { width: 3rem; }
  .recap-table td { font-size: 14px; }
  .recap-table .recap-round { padding-top: 16px; font-size: 10px; }
  .recap-table small { font-size: 9px; }
  .recap-context { font-size: 11px; }
  .game-recap>.eyebrow { font-size: 8px; letter-spacing: .02em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.final-score .score-denominator { font-size: 28px; font-weight: 400; letter-spacing: -.04em; color: var(--ink-2); }

/* Discovery pages share the cabinet's type, space and interaction grammar. */
.site-nav { display: flex; gap: 20px; align-items: center; font-size: 13px; }
.site-nav a { color: var(--ink); text-underline-offset: 4px; }
.resume-link { display: inline-block; text-decoration: none; margin-bottom: 20px; }
.about-cta { display: block; margin-top: 22px; font-weight: 650; text-underline-offset: 5px; }
.model-directory h1, .about-page h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -.045em; }
.model-directory .intro-copy { max-width: 620px; }
.model-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.model-list li { padding: 24px 0; border-top: 1px solid var(--line-2); }
.model-list h2 { font-size: 24px; margin: 0 0 12px; }
.model-list p { margin: 0; }
.about-page { max-width: 720px; margin-inline: auto; }
.about-lead { font-size: 23px; color: var(--ink-2); }
.about-page section { margin: 36px 0; }
.about-page h2 { font-size: 24px; }
.about-page > .text-link { display: block; margin-bottom: 32px; }
@media (max-width: 960px) {
  .site-header { flex-wrap: wrap; padding-block: 20px; }
  .site-nav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .header-right { gap: 12px; }
  .header-right .edition { display: none; }
}
@media (max-width: 600px) {
  .model-list { grid-template-columns: 1fr; }
}