/* ---------------------------------------------------------------------------
   Game tokens: the one stylesheet of values for games built in the editor.

   Served (with game-kit.css) as /sdk/game.css. Not the site's tokens.css —
   a game's look is the creator's theme preset, and only light or dark
   follows the player. Site skins never reach inside a game frame.

   Plain CSS only. Token names are append-only (src/lib/game-tokens.ts).
   Each preset has a light block and a dark block.
--------------------------------------------------------------------------- */

:root,
html.light {
  color-scheme: light;
  --background: #f6f5f1;
  --foreground: #1c1917;
  --surface: #ffffff;
  --surface-2: #f2f0eb;
  --line: #e6e3dd;
  --line-strong: #d4d0c8;
  --muted: #6b6660;
  --accent: #059669;
  --accent-strong: #047857;
  --accent-soft: #d7f2e5;
  --accent-fg: #ffffff;
  --sh-card: 0 1px 2px rgb(28 25 23 / 0.04), 0 1px 3px rgb(28 25 23 / 0.05);
  --sh-pop: 0 12px 32px -14px rgb(28 25 23 / 0.22);
  --tile-green: #6aaa64;
  --tile-yellow: #c9b458;
  --tile-blue: #5b8def;
  --tile-purple: #a56bd6;
  --tile-orange: #f5793a;
  --tile-red: #e0524f;
  --tile-hint: #f6d365;
  --tile-empty: #dcdad4;
  --tile-fg: #ffffff;
  --highlight: #e8ff4a;
  --brand-blue: #73aae6;
  --brand-pink: #e98bd1;
  --brand-green: #78c26f;
  --placeholder: #6b6660;
  --success: #047857;
  --success-soft: #d1fae5;
  --success-text: #065f46;
  --on-success: #ffffff;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --warn-text: #92400e;
  --on-warn: #ffffff;
  --danger: #be123c;
  --danger-soft: #fff1f2;
  --danger-text: #9f1239;
  --on-danger: #ffffff;
  --accent-fill: #047857;
  --accent-fill-hover: #065f46;
  --accent-fill-fg: #ffffff;
  --scrim: rgb(0 0 0 / 0.5);
  --cover: #ffffff;
  --r-control: 0.5rem;
  --r-media: 0.75rem;
  --r-panel: 1rem;
  --r-tile: 0.25rem;
}

html.dark {
  color-scheme: dark;
  --background: #0e0d0c;
  --foreground: #ebe8e3;
  --surface: #181614;
  --surface-2: #221f1c;
  --line: #2c2926;
  --line-strong: #3d3935;
  --muted: #a39e97;
  --accent: #10b981;
  --accent-strong: #059669;
  --accent-soft: rgb(16 185 129 / 0.16);
  --accent-fg: #ffffff;
  --sh-card: 0 1px 2px rgb(0 0 0 / 0.35);
  --sh-pop: 0 12px 32px -14px rgb(0 0 0 / 0.6);
  --tile-empty: #3a3733;
  --highlight: #c6e624;
  --placeholder: #a39e97;
  --success: #34d399;
  --success-soft: rgb(16 185 129 / 0.16);
  --success-text: #6ee7b7;
  --on-success: #062b1f;
  --warn: #fbbf24;
  --warn-soft: rgb(245 158 11 / 0.16);
  --warn-text: #fcd34d;
  --on-warn: #1f1300;
  --danger: #fb7185;
  --danger-soft: rgb(244 63 94 / 0.16);
  --danger-text: #fda4af;
  --on-danger: #2a0a10;
  --accent-fill: #34d399;
  --accent-fill-hover: #6ee7b7;
  --accent-fill-fg: #062b1f;
  --scrim: rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    color-scheme: dark;
    --background: #0e0d0c;
    --foreground: #ebe8e3;
    --surface: #181614;
    --surface-2: #221f1c;
    --line: #2c2926;
    --line-strong: #3d3935;
    --muted: #a39e97;
    --accent: #10b981;
    --accent-strong: #059669;
    --accent-soft: rgb(16 185 129 / 0.16);
    --accent-fg: #ffffff;
    --sh-card: 0 1px 2px rgb(0 0 0 / 0.35);
    --sh-pop: 0 12px 32px -14px rgb(0 0 0 / 0.6);
    --tile-empty: #3a3733;
    --highlight: #c6e624;
    --placeholder: #a39e97;
    --success: #34d399;
    --success-soft: rgb(16 185 129 / 0.16);
    --success-text: #6ee7b7;
    --on-success: #062b1f;
    --warn: #fbbf24;
    --warn-soft: rgb(245 158 11 / 0.16);
    --warn-text: #fcd34d;
    --on-warn: #1f1300;
    --danger: #fb7185;
    --danger-soft: rgb(244 63 94 / 0.16);
    --danger-text: #fda4af;
    --on-danger: #2a0a10;
    --accent-fill: #34d399;
    --accent-fill-hover: #6ee7b7;
    --accent-fill-fg: #062b1f;
    --scrim: rgb(0 0 0 / 0.6);
  }
}

/* ---------------------------------------------------------------------------
   Preset: High contrast. Bolder lines, colour-blind tile palette.
--------------------------------------------------------------------------- */
html[data-game-theme="contrast"] {
  --background: #ffffff;
  --foreground: #000000;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --line: #6b6b6b;
  --line-strong: #000000;
  --muted: #333333;
  --placeholder: #444444;
  --accent: #005a3c;
  --accent-strong: #003d29;
  --accent-soft: #cdeedd;
  --accent-fill: #005a3c;
  --accent-fill-hover: #003d29;
  --accent-fill-fg: #ffffff;
  --success: #005a3c;
  --success-soft: #cdeedd;
  --success-text: #003d29;
  --warn: #7a4a00;
  --warn-soft: #ffe8b3;
  --warn-text: #4a2c00;
  --danger: #a4001f;
  --danger-soft: #ffe0e5;
  --danger-text: #6e0014;
  --tile-green: #f5793a;
  --tile-yellow: #85c0f9;
  --tile-empty: #787c7e;
  --sh-card: none;
  --r-tile: 0;
  --sh-pop: 0 0 0 2px #000000;
}
html.dark[data-game-theme="contrast"] {
  --background: #000000;
  --foreground: #ffffff;
  --surface: #000000;
  --surface-2: #1a1a1a;
  --line: #9a9a9a;
  --line-strong: #ffffff;
  --muted: #d0d0d0;
  --placeholder: #c0c0c0;
  --accent: #4ade80;
  --accent-strong: #22c55e;
  --accent-soft: rgb(74 222 128 / 0.2);
  --accent-fill: #4ade80;
  --accent-fill-hover: #86efac;
  --accent-fill-fg: #000000;
  --success: #4ade80;
  --success-soft: rgb(74 222 128 / 0.2);
  --success-text: #bbf7d0;
  --warn: #fbbf24;
  --warn-soft: rgb(251 191 36 / 0.2);
  --warn-text: #fde68a;
  --danger: #ff6b81;
  --danger-soft: rgb(255 107 129 / 0.2);
  --danger-text: #ffb3bf;
  --tile-empty: #5a5e60;
  --sh-pop: 0 0 0 2px #ffffff;
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="contrast"] {
    --background: #000000;
    --foreground: #ffffff;
    --surface: #000000;
    --surface-2: #1a1a1a;
    --line: #9a9a9a;
    --line-strong: #ffffff;
    --muted: #d0d0d0;
    --placeholder: #c0c0c0;
    --accent: #4ade80;
    --accent-strong: #22c55e;
    --accent-soft: rgb(74 222 128 / 0.2);
    --accent-fill: #4ade80;
    --accent-fill-hover: #86efac;
    --accent-fill-fg: #000000;
    --success: #4ade80;
    --success-soft: rgb(74 222 128 / 0.2);
    --success-text: #bbf7d0;
    --warn: #fbbf24;
    --warn-soft: rgb(251 191 36 / 0.2);
    --warn-text: #fde68a;
    --danger: #ff6b81;
    --danger-soft: rgb(255 107 129 / 0.2);
    --danger-text: #ffb3bf;
    --tile-empty: #5a5e60;
    --sh-pop: 0 0 0 2px #ffffff;
  }
}

/* ---------------------------------------------------------------------------
   Preset: Aqua. Dark is Graphite: chrome goes grey, surfaces stay light.
--------------------------------------------------------------------------- */
html[data-game-theme="aqua"] {
  color-scheme: light;
  --background: #f0f0f0;
  --foreground: #1a1a1a;
  --surface: #ffffff;
  --surface-2: #ececec;
  --line: #c9c9c9;
  --line-strong: #8f8f8f;
  --muted: #5c5c5c;
  --placeholder: #6f6f6f;
  --accent: #2260c2;
  --accent-strong: #1d52a8;
  --accent-soft: #dbe9fb;
  --accent-fg: #ffffff;
  --accent-fill: #2b6fd0;
  --accent-fill-hover: #2260c2;
  --accent-fill-fg: #ffffff;
  --sh-card: 0 1px 0 rgb(255 255 255 / 0.8), inset 0 1px 0 #ffffff;
  --sh-pop: 0 12px 32px -14px rgb(0 0 0 / 0.45);
  --r-control: 999px;
  --r-media: 6px;
  --r-panel: 6px;
  --r-tile: 3px;
  --gel-1: #7fb5f2;
  --gel-2: #3f86e0;
  --gel-3: #2260c2;
  --gel-4: #4a90e6;
  --gel-line: #1d52a8;
  --success: #047857;
  --success-soft: #d1fae5;
  --success-text: #065f46;
  --on-success: #ffffff;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --warn-text: #92400e;
  --on-warn: #ffffff;
  --danger: #be123c;
  --danger-soft: #fff1f2;
  --danger-text: #9f1239;
  --on-danger: #ffffff;
  --tile-empty: #dcdad4;
  --highlight: #e8ff4a;
  --scrim: rgb(0 0 0 / 0.5);
}
html.dark[data-game-theme="aqua"] {
  --accent: #5f6a79;
  --accent-strong: #4d5866;
  --accent-soft: #e4e7eb;
  --accent-fill: #6b7684;
  --accent-fill-hover: #5f6a79;
  --gel-1: #c9cfd8;
  --gel-2: #8e98a6;
  --gel-3: #5f6a79;
  --gel-4: #98a2b0;
  --gel-line: #4d5866;
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="aqua"] {
    --accent: #5f6a79;
    --accent-strong: #4d5866;
    --accent-soft: #e4e7eb;
    --accent-fill: #6b7684;
    --accent-fill-hover: #5f6a79;
    --gel-1: #c9cfd8;
    --gel-2: #8e98a6;
    --gel-3: #5f6a79;
    --gel-4: #98a2b0;
    --gel-line: #4d5866;
  }
}

/* ---------------------------------------------------------------------------
   Preset: Newsprint. Off-white stock, ink lines, masthead red. No radii, no shadows; dark is the page printed in reverse.
--------------------------------------------------------------------------- */
html[data-game-theme="newsprint"] {
  --background: #f3efe4;
  --foreground: #17140f;
  --surface: #faf7ee;
  --surface-2: #ebe6d8;
  --line: #17140f;
  --line-strong: #17140f;
  --muted: #5a554b;
  --placeholder: #5a554b;
  --accent: #b3201a;
  --accent-strong: #8e1712;
  --accent-soft: #f6e6e0;
  --accent-fg: #ffffff;
  --accent-fill: #17140f;
  --accent-fill-hover: #3a352c;
  --accent-fill-fg: #f3efe4;
  --sh-card: none;
  --sh-pop: 0 0 0 1px #17140f;
  --tile-empty: #d9d3c4;
  --highlight: #f0e26a;
  --r-control: 0;
  --r-media: 0;
  --r-panel: 0;
  --r-tile: 0;
}
html.dark[data-game-theme="newsprint"] {
  --background: #15130f;
  --foreground: #ece5d3;
  --surface: #1d1a15;
  --surface-2: #26221b;
  --line: #ece5d3;
  --line-strong: #ece5d3;
  --muted: #a79f8c;
  --placeholder: #a79f8c;
  --accent: #e2534a;
  --accent-strong: #f07a72;
  --accent-soft: #3a1f1c;
  --accent-fg: #ffffff;
  --accent-fill: #ece5d3;
  --accent-fill-hover: #ffffff;
  --accent-fill-fg: #15130f;
  --sh-pop: 0 0 0 1px #ece5d3;
  --tile-empty: #3a352c;
  --highlight: #c9bd4a;
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="newsprint"] {
    --background: #15130f;
    --foreground: #ece5d3;
    --surface: #1d1a15;
    --surface-2: #26221b;
    --line: #ece5d3;
    --line-strong: #ece5d3;
    --muted: #a79f8c;
    --placeholder: #a79f8c;
    --accent: #e2534a;
    --accent-strong: #f07a72;
    --accent-soft: #3a1f1c;
    --accent-fg: #ffffff;
    --accent-fill: #ece5d3;
    --accent-fill-hover: #ffffff;
    --accent-fill-fg: #15130f;
    --sh-pop: 0 0 0 1px #ece5d3;
    --tile-empty: #3a352c;
    --highlight: #c9bd4a;
  }
}

/* ---------------------------------------------------------------------------
   Preset: Notebook. Ruled page, ballpoint blue, a highlighter for what is done. Dark is graph paper on charcoal.
--------------------------------------------------------------------------- */
html[data-game-theme="notebook"] {
  --background: #fdfcf5;
  --foreground: #1d2433;
  --surface: #ffffff;
  --surface-2: #f1efe4;
  --line: #bfd0f0;
  --line-strong: #2f5fc4;
  --muted: #5f6779;
  --placeholder: #5f6779;
  --accent: #2f5fc4;
  --accent-strong: #24499a;
  --accent-soft: #e6eefc;
  --accent-fg: #ffffff;
  --accent-fill: #2f5fc4;
  --accent-fill-hover: #24499a;
  --accent-fill-fg: #ffffff;
  --sh-card: none;
  --sh-pop: 2px 3px 0 rgb(0 0 0 / 0.15);
  --tile-empty: #dfe3ea;
  --highlight: #fff27a;
  --r-control: 0.375rem;
  --r-media: 0.625rem;
  --r-panel: 0.875rem;
}
html.dark[data-game-theme="notebook"] {
  --background: #1a1c1a;
  --foreground: #eef0e6;
  --surface: #222523;
  --surface-2: #2a2e2b;
  --line: #33404f;
  --line-strong: #8fb3ff;
  --muted: #a3ab9f;
  --placeholder: #a3ab9f;
  --accent: #8fb3ff;
  --accent-strong: #b3ccff;
  --accent-soft: #25324a;
  --accent-fg: #101827;
  --accent-fill: #8fb3ff;
  --accent-fill-hover: #b3ccff;
  --accent-fill-fg: #101827;
  --sh-pop: 2px 3px 0 rgb(0 0 0 / 0.5);
  --tile-empty: #3a3f3a;
  --highlight: #c9c24a;
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="notebook"] {
    --background: #1a1c1a;
    --foreground: #eef0e6;
    --surface: #222523;
    --surface-2: #2a2e2b;
    --line: #33404f;
    --line-strong: #8fb3ff;
    --muted: #a3ab9f;
    --placeholder: #a3ab9f;
    --accent: #8fb3ff;
    --accent-strong: #b3ccff;
    --accent-soft: #25324a;
    --accent-fg: #101827;
    --accent-fill: #8fb3ff;
    --accent-fill-hover: #b3ccff;
    --accent-fill-fg: #101827;
    --sh-pop: 2px 3px 0 rgb(0 0 0 / 0.5);
    --tile-empty: #3a3f3a;
    --highlight: #c9c24a;
  }
}

/* ---------------------------------------------------------------------------
   Preset: Teletype. Paper teletype in light, green phosphor in dark; tiles read by darkness, not hue.
--------------------------------------------------------------------------- */
html[data-game-theme="teletype"] {
  --background: #ecebe2;
  --foreground: #1f1d1a;
  --surface: #ecebe2;
  --surface-2: #e0dfd3;
  --line: #1f1d1a;
  --line-strong: #1f1d1a;
  --muted: #5d5a52;
  --placeholder: #5d5a52;
  --accent: #1f6f3f;
  --accent-strong: #165230;
  --accent-soft: #dcebd9;
  --accent-fg: #ffffff;
  --accent-fill: #1f1d1a;
  --accent-fill-hover: #3d3a34;
  --accent-fill-fg: #ecebe2;
  --sh-card: none;
  --sh-pop: 0 0 0 1px #1f1d1a;
  --tile-green: #1f6f3f;
  --tile-yellow: #8a8778;
  --tile-blue: #1f1d1a;
  --tile-purple: #1f1d1a;
  --tile-empty: #c9c7b8;
  --highlight: #f0e26a;
  --r-control: 0;
  --r-media: 0;
  --r-panel: 0;
  --r-tile: 0;
}
html.dark[data-game-theme="teletype"] {
  --background: #070b07;
  --foreground: #9ef29e;
  --surface: #070b07;
  --surface-2: #0e160e;
  --line: #2f6b2f;
  --line-strong: #9ef29e;
  --muted: #5faa5f;
  --placeholder: #5faa5f;
  --accent: #d8ff7a;
  --accent-strong: #eaffb0;
  --accent-soft: #12240f;
  --accent-fg: #070b07;
  --accent-fill: #9ef29e;
  --accent-fill-hover: #c8ffc8;
  --accent-fill-fg: #070b07;
  --sh-pop: 0 0 0 1px #9ef29e;
  --tile-green: #9ef29e;
  --tile-yellow: #4f8a4f;
  --tile-blue: #9ef29e;
  --tile-purple: #9ef29e;
  --tile-empty: #1c2e1c;
  --highlight: #d8ff7a;
  --success: #9ef29e;
  --success-soft: #12240f;
  --success-text: #c8ffc8;
  --on-success: #070b07;
  --warn: #d8ff7a;
  --warn-soft: #1a2410;
  --warn-text: #eaffb0;
  --on-warn: #070b07;
  --danger: #ff8f6b;
  --danger-soft: #2a140c;
  --danger-text: #ffb59e;
  --on-danger: #070b07;
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="teletype"] {
    --background: #070b07;
    --foreground: #9ef29e;
    --surface: #070b07;
    --surface-2: #0e160e;
    --line: #2f6b2f;
    --line-strong: #9ef29e;
    --muted: #5faa5f;
    --placeholder: #5faa5f;
    --accent: #d8ff7a;
    --accent-strong: #eaffb0;
    --accent-soft: #12240f;
    --accent-fg: #070b07;
    --accent-fill: #9ef29e;
    --accent-fill-hover: #c8ffc8;
    --accent-fill-fg: #070b07;
    --sh-pop: 0 0 0 1px #9ef29e;
    --tile-green: #9ef29e;
    --tile-yellow: #4f8a4f;
    --tile-blue: #9ef29e;
    --tile-purple: #9ef29e;
    --tile-empty: #1c2e1c;
    --highlight: #d8ff7a;
    --success: #9ef29e;
    --success-soft: #12240f;
    --success-text: #c8ffc8;
    --on-success: #070b07;
    --warn: #d8ff7a;
    --warn-soft: #1a2410;
    --warn-text: #eaffb0;
    --on-warn: #070b07;
    --danger: #ff8f6b;
    --danger-soft: #2a140c;
    --danger-text: #ffb59e;
    --on-danger: #070b07;
  }
}

/* ---------------------------------------------------------------------------
   Preset: Classic. Grey panels, navy accent, bevels drawn by the kit. Dark is the Midnight scheme.
--------------------------------------------------------------------------- */
html[data-game-theme="classic"] {
  --background: #c0c0c0;
  --warn: #8a3d00;
  --foreground: #000000;
  --surface: #ffffff;
  --surface-2: #dfdfdf;
  --line: #808080;
  --line-strong: #000000;
  --muted: #3f3f3f;
  --placeholder: #4a4a4a;
  --accent: #000080;
  --accent-strong: #000060;
  --accent-soft: #d6d6e8;
  --accent-fg: #ffffff;
  --accent-fill: #000080;
  --accent-fill-hover: #10309a;
  --accent-fill-fg: #ffffff;
  --sh-card: none;
  --sh-pop: 0 0 0 1px #000000;
  --tile-empty: #c0c0c0;
  --highlight: #ffff00;
  --r-control: 0;
  --r-media: 0;
  --r-panel: 0;
  --r-tile: 0;
  --bevel-hi: #ffffff;
  --bevel-lo: #808080;
  --bevel-dk: #000000;
}
html.dark[data-game-theme="classic"] {
  --background: #3b3b3b;
  --warn: #fbbf24;
  --foreground: #f0f0f0;
  --surface: #1f1f1f;
  --surface-2: #4a4a4a;
  --line: #6a6a6a;
  --line-strong: #000000;
  --muted: #c8c8c8;
  --placeholder: #b0b0b0;
  --accent: #8ab4f8;
  --accent-strong: #b3cdfb;
  --accent-soft: #2a3550;
  --accent-fg: #ffffff;
  --accent-fill: #10306e;
  --accent-fill-hover: #1a4290;
  --accent-fill-fg: #ffffff;
  --sh-pop: 0 0 0 1px #000000;
  --tile-empty: #4a4a4a;
  --highlight: #e6e64a;
  --bevel-hi: #6f6f6f;
  --bevel-lo: #1a1a1a;
  --bevel-dk: #000000;
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="classic"] {
    --background: #3b3b3b;
    --warn: #fbbf24;
    --foreground: #f0f0f0;
    --surface: #1f1f1f;
    --surface-2: #4a4a4a;
    --line: #6a6a6a;
    --line-strong: #000000;
    --muted: #c8c8c8;
    --placeholder: #b0b0b0;
    --accent: #8ab4f8;
    --accent-strong: #b3cdfb;
    --accent-soft: #2a3550;
    --accent-fg: #ffffff;
    --accent-fill: #10306e;
    --accent-fill-hover: #1a4290;
    --accent-fill-fg: #ffffff;
    --sh-pop: 0 0 0 1px #000000;
    --tile-empty: #4a4a4a;
    --highlight: #e6e64a;
    --bevel-hi: #6f6f6f;
    --bevel-lo: #1a1a1a;
    --bevel-dk: #000000;
  }
}

/* ---------------------------------------------------------------------------
   Preset: Handheld. Four shades of green and nothing else; every outcome and tile collapses to a shade. Dark is the backlit model.
--------------------------------------------------------------------------- */
html[data-game-theme="handheld"] {
  --background: #9bbc0f;
  --foreground: #0f380f;
  --surface: #8bac0f;
  --surface-2: #8bac0f;
  --line: #306230;
  --line-strong: #0f380f;
  --muted: #1f4a1f;
  --placeholder: #1f4a1f;
  --accent: #0f380f;
  --accent-strong: #0f380f;
  --accent-soft: #8bac0f;
  --accent-fg: #9bbc0f;
  --accent-fill: #0f380f;
  --accent-fill-hover: #306230;
  --accent-fill-fg: #9bbc0f;
  --sh-card: none;
  --sh-pop: 0 0 0 2px #0f380f;
  --tile-green: #0f380f;
  --tile-yellow: #306230;
  --tile-blue: #306230;
  --tile-purple: #0f380f;
  --tile-orange: #306230;
  --tile-red: #0f380f;
  --tile-hint: #8bac0f;
  --tile-empty: #8bac0f;
  --tile-fg: #9bbc0f;
  --highlight: #8bac0f;
  --success: #0f380f;
  --success-soft: #8bac0f;
  --success-text: #0f380f;
  --on-success: #9bbc0f;
  --warn: #306230;
  --warn-soft: #8bac0f;
  --warn-text: #0f380f;
  --on-warn: #9bbc0f;
  --danger: #0f380f;
  --danger-soft: #8bac0f;
  --danger-text: #0f380f;
  --on-danger: #9bbc0f;
  --cover: #9bbc0f;
  --scrim: rgb(15 56 15 / 0.7);
  --r-control: 0;
  --r-media: 0;
  --r-panel: 0;
  --r-tile: 0;
}
html.dark[data-game-theme="handheld"] {
  --background: #0f380f;
  --foreground: #9bbc0f;
  --surface: #306230;
  --surface-2: #306230;
  --line: #8bac0f;
  --line-strong: #9bbc0f;
  --muted: #a9c91c;
  --placeholder: #a9c91c;
  --accent: #9bbc0f;
  --accent-strong: #9bbc0f;
  --accent-soft: #306230;
  --accent-fg: #0f380f;
  --accent-fill: #9bbc0f;
  --accent-fill-hover: #8bac0f;
  --accent-fill-fg: #0f380f;
  --sh-pop: 0 0 0 2px #9bbc0f;
  --tile-green: #9bbc0f;
  --tile-yellow: #8bac0f;
  --tile-blue: #8bac0f;
  --tile-purple: #9bbc0f;
  --tile-orange: #8bac0f;
  --tile-red: #9bbc0f;
  --tile-hint: #306230;
  --tile-empty: #306230;
  --tile-fg: #0f380f;
  --highlight: #306230;
  --success: #9bbc0f;
  --success-soft: #306230;
  --success-text: #9bbc0f;
  --on-success: #0f380f;
  --warn: #8bac0f;
  --warn-soft: #306230;
  --warn-text: #9bbc0f;
  --on-warn: #0f380f;
  --danger: #9bbc0f;
  --danger-soft: #306230;
  --danger-text: #9bbc0f;
  --on-danger: #0f380f;
  --cover: #0f380f;
  --scrim: rgb(0 0 0 / 0.7);
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="handheld"] {
    --background: #0f380f;
    --foreground: #9bbc0f;
    --surface: #306230;
    --surface-2: #306230;
    --line: #8bac0f;
    --line-strong: #9bbc0f;
    --muted: #a9c91c;
    --placeholder: #a9c91c;
    --accent: #9bbc0f;
    --accent-strong: #9bbc0f;
    --accent-soft: #306230;
    --accent-fg: #0f380f;
    --accent-fill: #9bbc0f;
    --accent-fill-hover: #8bac0f;
    --accent-fill-fg: #0f380f;
    --sh-pop: 0 0 0 2px #9bbc0f;
    --tile-green: #9bbc0f;
    --tile-yellow: #8bac0f;
    --tile-blue: #8bac0f;
    --tile-purple: #9bbc0f;
    --tile-orange: #8bac0f;
    --tile-red: #9bbc0f;
    --tile-hint: #306230;
    --tile-empty: #306230;
    --tile-fg: #0f380f;
    --highlight: #306230;
    --success: #9bbc0f;
    --success-soft: #306230;
    --success-text: #9bbc0f;
    --on-success: #0f380f;
    --warn: #8bac0f;
    --warn-soft: #306230;
    --warn-text: #9bbc0f;
    --on-warn: #0f380f;
    --danger: #9bbc0f;
    --danger-soft: #306230;
    --danger-text: #9bbc0f;
    --on-danger: #0f380f;
    --cover: #0f380f;
    --scrim: rgb(0 0 0 / 0.7);
  }
}

/* ---------------------------------------------------------------------------
   Preset: Sticker. Off-white backing, ink outlines, hard offset shadows, one raspberry pop. Dark flips ink and paper.
--------------------------------------------------------------------------- */
html[data-game-theme="sticker"] {
  --background: #fbfbf7;
  --foreground: #1f1a2e;
  --surface: #ffffff;
  --surface-2: #f1f1ea;
  --line: #1f1a2e;
  --line-strong: #1f1a2e;
  --muted: #5a5470;
  --placeholder: #5a5470;
  --accent: #e0397b;
  --accent-strong: #b82a62;
  --accent-soft: #fde4ee;
  --accent-fg: #ffffff;
  --accent-fill: #e0397b;
  --accent-fill-hover: #b82a62;
  --accent-fill-fg: #ffffff;
  --sh-card: 4px 4px 0 #1f1a2e;
  --sh-pop: 6px 6px 0 #1f1a2e;
  --tile-green: #4fbf6a;
  --tile-yellow: #ffc933;
  --tile-empty: #e6e6df;
  --highlight: #ffd166;
  --r-control: 0.875rem;
  --r-media: 1.125rem;
  --r-panel: 1.5rem;
  --r-tile: 0.375rem;
}
html.dark[data-game-theme="sticker"] {
  --background: #1f1a2e;
  --foreground: #fbfbf7;
  --surface: #2b2540;
  --surface-2: #352e4d;
  --line: #fbfbf7;
  --line-strong: #fbfbf7;
  --muted: #b9b0cc;
  --placeholder: #b9b0cc;
  --accent: #ffd166;
  --accent-strong: #ffe08f;
  --accent-soft: #3e3550;
  --accent-fg: #1f1a2e;
  --accent-fill: #ffd166;
  --accent-fill-hover: #ffe08f;
  --accent-fill-fg: #1f1a2e;
  --sh-card: 4px 4px 0 #fbfbf7;
  --sh-pop: 6px 6px 0 #fbfbf7;
  --tile-empty: #443c5c;
  --highlight: #e0397b;
}
@media (prefers-color-scheme: dark) {
  html:not(.light)[data-game-theme="sticker"] {
    --background: #1f1a2e;
    --foreground: #fbfbf7;
    --surface: #2b2540;
    --surface-2: #352e4d;
    --line: #fbfbf7;
    --line-strong: #fbfbf7;
    --muted: #b9b0cc;
    --placeholder: #b9b0cc;
    --accent: #ffd166;
    --accent-strong: #ffe08f;
    --accent-soft: #3e3550;
    --accent-fg: #1f1a2e;
    --accent-fill: #ffd166;
    --accent-fill-hover: #ffe08f;
    --accent-fill-fg: #1f1a2e;
    --sh-card: 4px 4px 0 #fbfbf7;
    --sh-pop: 6px 6px 0 #fbfbf7;
    --tile-empty: #443c5c;
    --highlight: #e0397b;
  }
}

/* ---------------------------------------------------------------------------
   Game kit: the controls every daily puzzle has, drawn from the tokens in
   game-tokens.css so a game follows the look the creator picked, in light
   or dark to match the player. Served after game-tokens.css as /sdk/game.css;
   the site never loads it.

   Plain CSS on purpose (no Tailwind, no @apply). Class names are append-only
   for the same reason token names are: stored games reference them.
   Typeface is the creator's: nothing here sets font-family, everything
   inherits --game-font from the game's body.

   Theme overrides sit at the bottom, in the same order as game-tokens.css,
   and may use literal colours: a theme block is where values are allowed
   to live.
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--background);
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: var(--accent-soft);
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Buttons */
.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--foreground);
  box-shadow: var(--sh-card);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s,
    transform 0.15s,
    opacity 0.15s;
}
.dg-btn:hover {
  background: var(--surface-2);
}
.dg-btn:active {
  transform: scale(0.98);
}
.dg-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.dg-btn-primary {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--accent-fill-fg);
}
.dg-btn-primary:hover {
  border-color: var(--accent-fill-hover);
  background: var(--accent-fill-hover);
}
.dg-btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.dg-btn-ghost:hover {
  background: var(--surface-2);
}

/* Inputs. 16px so iOS Safari does not zoom on focus. */
.dg-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--foreground);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.dg-input::placeholder {
  color: var(--placeholder);
}
.dg-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dg-input:disabled {
  opacity: 0.5;
}

/* Panels */
.dg-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--sh-card);
}

/* Tiles: letters, feedback squares, keyboard keys */
.dg-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  background: var(--surface-2);
  color: var(--foreground);
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.dg-tile[data-state="filled"] {
  border-color: var(--line-strong);
  background: var(--surface);
}
.dg-tile[data-state="correct"] {
  border-color: transparent;
  background: var(--tile-green);
  color: var(--tile-fg);
}
.dg-tile[data-state="present"] {
  border-color: transparent;
  background: var(--tile-yellow);
  color: var(--tile-fg);
}
.dg-tile[data-state="absent"] {
  border-color: transparent;
  background: var(--tile-empty);
  color: var(--tile-fg);
}
.dg-tile[data-state="hint"] {
  border-color: transparent;
  background: var(--tile-hint);
  color: var(--tile-fg);
}
.dg-tile[data-state="wrong"] {
  border-color: transparent;
  background: var(--tile-red);
  color: var(--tile-fg);
}

/* Status lines */
.dg-notice {
  padding: 8px 12px;
  border: 1px solid var(--line);
  /* --r-media, not --r-control: aqua's control radius is 999px for pill
     buttons, and a notice that wraps to two lines would come out a stadium. */
  border-radius: var(--r-media);
  background: var(--surface-2);
  font-size: 0.875rem;
}
.dg-notice-ok {
  border-color: color-mix(in srgb, var(--success) 25%, transparent);
  background: var(--success-soft);
  color: var(--success-text);
}
.dg-notice-warn {
  border-color: color-mix(in srgb, var(--warn) 25%, transparent);
  background: var(--warn-soft);
  color: var(--warn-text);
}
.dg-notice-danger {
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
  background: var(--danger-soft);
  color: var(--danger-text);
}
.dg-muted {
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Theme: High contrast. Thicker lines and outlines.
--------------------------------------------------------------------------- */
[data-game-theme="contrast"] .dg-btn,
[data-game-theme="contrast"] .dg-input,
[data-game-theme="contrast"] .dg-panel,
[data-game-theme="contrast"] .dg-tile,
[data-game-theme="contrast"] .dg-notice {
  border-width: 2px;
}
[data-game-theme="contrast"] :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline-width: 3px;
}

/* ---------------------------------------------------------------------------
   Theme: Aqua. Gel buttons and recessed fields. Later than the base rules,
   so the gradient holds on hover.
--------------------------------------------------------------------------- */
[data-game-theme="aqua"] .dg-btn {
  font-weight: 700;
  border-color: #7a7a7a;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.8);
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 48%, #dedede 52%, #f5f5f5 100%);
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.18),
    inset 0 1px 0 #ffffff;
}
[data-game-theme="aqua"] .dg-btn:hover {
  filter: brightness(1.04);
}
[data-game-theme="aqua"] .dg-btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.4);
  border-color: var(--gel-line);
  background: linear-gradient(180deg, var(--gel-1) 0%, var(--gel-2) 48%, var(--gel-3) 52%, var(--gel-4) 100%);
  box-shadow:
    0 1px 2px rgb(20 60 140 / 0.35),
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 0 0 1px var(--gel-line);
}
[data-game-theme="aqua"] .dg-btn-primary:hover {
  filter: brightness(1.06);
}
[data-game-theme="aqua"] .dg-btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
  font-weight: 500;
}
[data-game-theme="aqua"] .dg-input {
  border-color: #858585;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.25);
}
[data-game-theme="aqua"] .dg-input:focus {
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 0.3),
    0 0 0 3px rgb(93 156 236 / 0.6);
}
[data-game-theme="aqua"] .dg-panel {
  border-color: #b3b3b3;
}

/* ---------------------------------------------------------------------------
   Theme: Newsprint. Double-ruled panels, small-caps buttons.
--------------------------------------------------------------------------- */
[data-game-theme="newsprint"] .dg-panel {
  outline: 1px solid var(--line);
  outline-offset: 3px;
}
[data-game-theme="newsprint"] .dg-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-game-theme="newsprint"] .dg-input {
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Theme: Notebook. Ruled body, dashed panels, pill buttons.
--------------------------------------------------------------------------- */
[data-game-theme="notebook"] body {
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 27px, var(--line) 27px, var(--line) 28px);
}
[data-game-theme="notebook"] .dg-panel {
  border-style: dashed;
  border-color: var(--line-strong);
}
[data-game-theme="notebook"] .dg-btn {
  border-radius: 999px;
  border-width: 1.5px;
  font-weight: 700;
}
[data-game-theme="notebook"] .dg-input {
  border-width: 1.5px;
}

/* ---------------------------------------------------------------------------
   Theme: Teletype. Dashed rules, bracketed buttons, bare fields.
--------------------------------------------------------------------------- */
[data-game-theme="teletype"] .dg-panel,
[data-game-theme="teletype"] .dg-notice {
  border-style: dashed;
  border-color: var(--line);
}
[data-game-theme="teletype"] .dg-btn {
  background: transparent;
  border-color: var(--line);
  font-weight: 600;
}
[data-game-theme="teletype"] .dg-btn::before {
  content: "[";
}
[data-game-theme="teletype"] .dg-btn::after {
  content: "]";
}
[data-game-theme="teletype"] .dg-btn-primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-fill-fg);
}
[data-game-theme="teletype"] .dg-input {
  background: transparent;
  border-color: var(--line);
}

/* ---------------------------------------------------------------------------
   Theme: Classic. Bevels as inset shadows from the --bevel-* tokens, so the
   Midnight appearance follows. The default button gets the black ring.
--------------------------------------------------------------------------- */
[data-game-theme="classic"] .dg-panel {
  border: 1px solid var(--bevel-lo);
  background: transparent;
  box-shadow:
    1px 1px var(--bevel-hi),
    inset 1px 1px var(--bevel-hi);
}
[data-game-theme="classic"] .dg-btn {
  border: 0;
  background: var(--background);
  color: var(--foreground);
  font-weight: 400;
  box-shadow:
    inset -1px -1px var(--bevel-dk),
    inset 1px 1px var(--bevel-hi),
    inset -2px -2px var(--bevel-lo),
    inset 2px 2px var(--surface-2);
}
[data-game-theme="classic"] .dg-btn:hover {
  background: var(--background);
}
[data-game-theme="classic"] .dg-btn:active {
  background: var(--surface-2);
  box-shadow:
    inset 1px 1px var(--bevel-dk),
    inset -1px -1px var(--bevel-hi),
    inset 2px 2px var(--bevel-lo);
}
[data-game-theme="classic"] .dg-btn-primary {
  outline: 1px solid var(--bevel-dk);
  outline-offset: -1px;
  box-shadow:
    inset -2px -2px var(--bevel-dk),
    inset 2px 2px var(--bevel-hi),
    inset -3px -3px var(--bevel-lo),
    inset 3px 3px var(--surface-2);
}
[data-game-theme="classic"] .dg-btn-ghost {
  background: transparent;
  box-shadow: none;
}
[data-game-theme="classic"] .dg-input {
  border: 0;
  box-shadow:
    inset 1px 1px var(--bevel-lo),
    inset -1px -1px var(--bevel-hi),
    inset 2px 2px var(--bevel-dk);
}
[data-game-theme="classic"] .dg-input:focus {
  outline: 1px dotted var(--foreground);
  outline-offset: -4px;
  box-shadow:
    inset 1px 1px var(--bevel-lo),
    inset -1px -1px var(--bevel-hi),
    inset 2px 2px var(--bevel-dk);
}

/* ---------------------------------------------------------------------------
   Theme: Handheld. Chunky borders and hard shadows in the ink shade.
--------------------------------------------------------------------------- */
[data-game-theme="handheld"] .dg-panel {
  border: 4px double var(--line-strong);
  background: transparent;
}
[data-game-theme="handheld"] .dg-btn,
[data-game-theme="handheld"] .dg-input {
  border: 2px solid var(--line-strong);
  background: transparent;
}
[data-game-theme="handheld"] .dg-btn {
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--line-strong);
}
[data-game-theme="handheld"] .dg-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--line-strong);
}
[data-game-theme="handheld"] .dg-btn-primary {
  background: var(--accent-fill);
  color: var(--accent-fill-fg);
}
[data-game-theme="handheld"] .dg-btn-ghost {
  border-color: transparent;
  box-shadow: none;
}
[data-game-theme="handheld"] .dg-tile {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* ---------------------------------------------------------------------------
   Theme: Sticker. Ink outlines and hard shadows on everything, pill buttons.
--------------------------------------------------------------------------- */
[data-game-theme="sticker"] .dg-panel,
[data-game-theme="sticker"] .dg-input,
[data-game-theme="sticker"] .dg-notice {
  border-width: 2px;
  border-color: var(--line);
}
[data-game-theme="sticker"] .dg-btn {
  border: 2px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--line);
}
[data-game-theme="sticker"] .dg-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--line);
}
[data-game-theme="sticker"] .dg-btn-ghost {
  border-color: transparent;
  box-shadow: none;
}
[data-game-theme="sticker"] .dg-input {
  box-shadow: 3px 3px 0 var(--line);
}
[data-game-theme="sticker"] .dg-input:focus {
  border-color: var(--line);
  box-shadow: 3px 3px 0 var(--accent);
}
[data-game-theme="sticker"] .dg-tile {
  box-shadow: inset 0 0 0 1.5px var(--line);
}