/* Championship 2026 design tokens — 「數位生態箱」(Digital Terrarium), 2026-09-29.
 *
 * The creatures and their habitats are the brightest, most saturated things on
 * screen, so the interface around them stays calm: matte panels drawn with
 * hairlines, and one living colour for everything the player can act on or has
 * chosen. Amber is kept for bits and rewards; the status colours only ever mean
 * their status, and always come with text or a shape.
 *
 * Every other stylesheet reads these names. A colour, size or curve that is
 * not here should not be typed as a literal elsewhere.
 * Design notes: docs/reports/ui-redesign-2026-09-29/DESIGN_ZH_TW.md
 *
 * THEMES (settings round, 2026-09-29)
 * -----------------------------------
 *   night  深色夜景  the original night-lab palette (default)
 *   clear  藍白清爽  a light, cool palette
 *   warm   經典暖黃  a light, warm cream-and-amber palette
 * The theme is an attribute on <html> (data-theme), set before the first paint
 * by the boot script in championship.html and afterwards by the settings. A
 * palette can also be scoped to one element with data-palette, which is
 * how the settings screen previews a theme without switching the page, and
 * how the title screen (drawn key art) keeps the night palette in every theme.
 * Only interface colours change: character and scene art is never recoloured.
 * Each palette keeps body text at 4.5:1 or better on every surface it sits on
 * (checked by tests/championship-settings-cases.mjs).
 */

/* ---- Palette: night (A) ------------------------------------------------ */
:root, [data-palette="night"] {
  color-scheme: dark;

  /* Ground */
  --c-void: #050706;          /* outside the portrait frame */
  --c-ground: #080b0a;        /* app background */
  --c-ground-raised: #101713; /* bands inside a page */
  --c-stage-light: #0d1912;   /* the lamp behind the habitat */
  --c-stage-glow: rgba(13, 25, 18, 0.16);
  --c-backdrop-top: #080b0a;
  --c-backdrop-bottom: #050706;
  --c-scene-backdrop: #0a0e0b; /* behind a scene canvas while it loads */

  /* Surfaces */
  --c-surface-1: #121c17;     /* cards, rows */
  --c-surface-2: #18261e;     /* raised / hover */
  --c-surface-3: #203128;     /* pressed, meter tracks */
  --c-surface-glass: rgba(8, 11, 10, 0.82);  /* soft chips over the scene */
  /* A panel floating over a live scene (Home, Hunt, the battle result) is
     denser and never blurs what is behind it: a backdrop blur over a canvas
     that redraws every frame costs a GPU read-back per frame (measured: it
     caused the only long frames while dragging the habitat). */
  --c-surface-hud: rgba(8, 11, 10, 0.92);
  /* Bars and footers over page content (status bar, sticky footers). */
  --c-surface-bar: rgba(5, 7, 6, 0.94);
  --c-scrim: rgba(3, 9, 11, 0.62);
  --c-selection: rgba(86, 227, 194, 0.28);

  /* Lines */
  --c-line-1: rgba(190, 236, 226, 0.10);
  --c-line-2: rgba(190, 236, 226, 0.20);
  --c-line-3: rgba(190, 236, 226, 0.34);

  /* Text */
  --c-text-1: #eaf5f2;
  --c-text-2: #b3c8c3;
  --c-text-3: #88a29c;
  --c-text-disabled: #5b6f6b;
  --c-text-on-accent: #042019;
  --c-text-on-gold: #2a1a00;

  /* Accent: the one colour for "act here" and "chosen" */
  --c-accent: #56e3c2;
  --c-accent-strong: #86f2d8;
  --c-accent-deep: #1f8f78;
  --c-accent-soft: rgba(86, 227, 194, 0.14);
  --c-accent-line: rgba(86, 227, 194, 0.55);
  --c-accent-hi: #56e3c2;

  /* Bits and rewards */
  --c-gold: #f4b740;
  --c-gold-strong: #ffd27a;
  --c-gold-soft: rgba(244, 183, 64, 0.15);
  --c-coin-light: #ffe7a8;
  --c-coin-shade: #b8801f;

  /* Status: each colour means one thing, always with text or shape */
  --c-success: #52d98b;
  --c-success-soft: rgba(82, 217, 139, 0.15);
  --c-warning: #ffb54c;
  --c-warning-soft: rgba(255, 181, 76, 0.15);
  --c-danger: #ff6f6b;
  --c-danger-soft: rgba(255, 111, 107, 0.15);
  --c-danger-line: rgba(255, 111, 107, 0.5);
  --c-danger-text: #ffb3b0;   /* danger words on a danger-soft surface */
  --c-info: #6bb7ff;
  --c-info-soft: rgba(107, 183, 255, 0.15);
  --c-rare: #b794ff;
  --c-rare-soft: rgba(183, 148, 255, 0.16);

  /* Teams: battle only. The player's side is the accent; the opponent's side
     is ember, which is neither danger red nor warning amber. */
  --c-team-player: #56e3c2;
  --c-team-opponent: #ff8a5c;
  --c-team-opponent-soft: rgba(255, 138, 92, 0.16);

  /* Seasons: the calendar mark only */
  --c-season-spring: #7ee08a;
  --c-season-summer: #ffc857;
  --c-season-autumn: #ff9a5c;
  --c-season-winter: #9fd3ff;

  /* Resistance bars (roster detail) */
  --c-element-heat: #ff8a5c;
  --c-element-cold: #7cc8ff;
  --c-element-thunder: #ffd35c;
  --c-element-light: #f4f0c8;
  --c-element-dark: #9c7cff;

  /* Readouts */
  --c-stat-hp: #52d98b;
  --c-stat-hp-low: #ff6f6b;
  --c-stat-tp: #6bb7ff;
  --c-stat-ap: #f4b740;
  --c-stat-capacity: #9fb8b2;

  /* Depth */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.48);
  --shadow-lift: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-frame: 0 30px 80px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 0 1px var(--c-accent-line), 0 0 18px rgba(86, 227, 194, 0.28);

  /* The pixel stair, in this palette's accent and gold */
  --motif-stair: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%2356e3c2' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
  --motif-stair-gold: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23f4b740' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
}

/* ---- Palette: arena (D) 晴空競技 — default from 2026-10-15 ---------------
 * The title key art is the brightest thing the player sees first: sky, ivory
 * stone, a teal network cable and a trophy's gold. This palette carries that
 * daylight into every screen. The accent is the cable's teal (deep enough for
 * white words on it); gold stays for bits and rewards; ink is a deep navy, not
 * black, so pixel art keeps its own darkest values. Light-tech, not neon:
 * hairline cyan grid on the ground, white HUD islands over the scenes. */
:root[data-theme="arena"], [data-palette="arena"] {
  color-scheme: light;

  --c-void: #d4e5f0;
  --c-ground: #eef5fa;
  --c-ground-raised: #e3eef6;
  --c-stage-light: #cfe8f2;
  --c-stage-glow: rgba(160, 222, 236, 0.55);
  --c-backdrop-top: #f6fbfe;
  --c-backdrop-bottom: #e4eff7;
  --c-scene-backdrop: #dcebf4;

  --c-surface-1: #ffffff;
  --c-surface-2: #f3f8fb;
  --c-surface-3: #e2edf4;
  --c-surface-glass: rgba(255, 255, 255, 0.88);
  --c-surface-hud: rgba(250, 253, 255, 0.94);
  --c-surface-bar: rgba(246, 251, 254, 0.95);
  --c-scrim: rgba(10, 34, 52, 0.42);
  --c-selection: rgba(8, 122, 140, 0.22);

  --c-line-1: rgba(16, 72, 104, 0.10);
  --c-line-2: rgba(16, 72, 104, 0.18);
  --c-line-3: rgba(16, 72, 104, 0.32);

  --c-text-1: #0d2638;
  --c-text-2: #34536a;
  --c-text-3: #4b677c;
  --c-text-disabled: #8a9cab;
  --c-text-on-accent: #ffffff;
  --c-text-on-gold: #2a1a00;

  --c-accent: #087a8c;
  --c-accent-strong: #05687a;
  --c-accent-deep: #04505c;
  --c-accent-soft: rgba(8, 122, 140, 0.12);
  --c-accent-line: rgba(8, 122, 140, 0.5);
  /* Decoration only (glows, rings, the cable motif): never under words. */
  --c-accent-hi: #19c3d3;

  --c-gold: #e2a21f;
  --c-gold-strong: #875600;
  --c-gold-soft: rgba(226, 162, 31, 0.16);
  --c-coin-light: #ffe7a8;
  --c-coin-shade: #a86e12;

  --c-success: #17783f;
  --c-success-soft: rgba(23, 120, 63, 0.12);
  --c-warning: #995400;
  --c-warning-soft: rgba(153, 84, 0, 0.12);
  --c-danger: #c0322b;
  --c-danger-soft: rgba(192, 50, 43, 0.10);
  --c-danger-line: rgba(192, 50, 43, 0.45);
  --c-danger-text: #a3221e;
  --c-info: #1d60bf;
  --c-info-soft: rgba(29, 96, 191, 0.12);
  --c-rare: #7146cc;
  --c-rare-soft: rgba(113, 70, 204, 0.12);

  --c-team-player: #087a8c;
  --c-team-opponent: #b8481a;
  --c-team-opponent-soft: rgba(184, 72, 26, 0.12);

  --c-season-spring: #2e7d3a;
  --c-season-summer: #946000;
  --c-season-autumn: #b3451a;
  --c-season-winter: #1f62c4;

  --c-element-heat: #e0662f;
  --c-element-cold: #3b8fd6;
  --c-element-thunder: #d4a400;
  --c-element-light: #c9bd6a;
  --c-element-dark: #7a5ad6;

  --c-stat-hp: #17783f;
  --c-stat-hp-low: #c0322b;
  --c-stat-tp: #1d60bf;
  --c-stat-ap: #875600;
  --c-stat-capacity: #5b7387;

  --shadow-card: 0 1px 2px rgba(13, 38, 56, 0.08), 0 3px 10px rgba(13, 38, 56, 0.07);
  --shadow-float: 0 10px 28px rgba(13, 38, 56, 0.16);
  --shadow-lift: 0 18px 48px rgba(13, 38, 56, 0.22);
  --shadow-frame: 0 30px 80px rgba(13, 38, 56, 0.2);
  --glow-accent: 0 0 0 1px var(--c-accent-line), 0 0 16px rgba(25, 195, 211, 0.28);

  /* The ground's light-tech grid: hairlines a few percent strong. */
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 .5h48M.5 0v48' stroke='%23087a8c' stroke-opacity='.06'/%3E%3Ccircle cx='.5' cy='.5' r='1.5' fill='%23087a8c' fill-opacity='.10'/%3E%3C/svg%3E");

  --motif-stair: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23087a8c' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
  --motif-stair-gold: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23e2a21f' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
}

/* ---- Palette: clear (B) 藍白清爽 ------------------------------------------ */
:root[data-theme="clear"], [data-palette="clear"] {
  color-scheme: light;

  --c-void: #dde7f0;
  --c-ground: #eef3f8;
  --c-ground-raised: #e4ecf4;
  --c-stage-light: #cfe0ee;
  --c-stage-glow: rgba(160, 196, 226, 0.55);
  --c-backdrop-top: #f3f7fb;
  --c-backdrop-bottom: #e6eef6;
  --c-scene-backdrop: #d9e4ee;

  --c-surface-1: #ffffff;
  --c-surface-2: #f3f7fb;
  --c-surface-3: #e3ebf3;
  --c-surface-glass: rgba(255, 255, 255, 0.86);
  --c-surface-hud: rgba(255, 255, 255, 0.94);
  --c-surface-bar: rgba(247, 250, 253, 0.95);
  --c-scrim: rgba(12, 26, 44, 0.45);
  --c-selection: rgba(26, 104, 198, 0.22);

  --c-line-1: rgba(22, 52, 90, 0.10);
  --c-line-2: rgba(22, 52, 90, 0.18);
  --c-line-3: rgba(22, 52, 90, 0.32);

  --c-text-1: #10233a;
  --c-text-2: #3b5068;
  --c-text-3: #556a80;
  --c-text-disabled: #8595a7;
  --c-text-on-accent: #ffffff;
  --c-text-on-gold: #2a1a00;

  --c-accent: #1a68c6;
  --c-accent-strong: #0f58b0;
  --c-accent-deep: #0b3f82;
  --c-accent-soft: rgba(26, 104, 198, 0.12);
  --c-accent-line: rgba(26, 104, 198, 0.5);
  --c-accent-hi: #4aa3ff;

  --c-gold: #d99a1e;
  --c-gold-strong: #865600;
  --c-gold-soft: rgba(217, 154, 30, 0.16);
  --c-coin-light: #ffe7a8;
  --c-coin-shade: #a86e12;

  --c-success: #1b7a43;
  --c-success-soft: rgba(27, 122, 67, 0.12);
  --c-warning: #9e5700;
  --c-warning-soft: rgba(158, 87, 0, 0.12);
  --c-danger: #c42f2a;
  --c-danger-soft: rgba(196, 47, 42, 0.10);
  --c-danger-line: rgba(196, 47, 42, 0.45);
  --c-danger-text: #a3221e;
  --c-info: #1f62c4;
  --c-info-soft: rgba(31, 98, 196, 0.12);
  --c-rare: #7447d0;
  --c-rare-soft: rgba(116, 71, 208, 0.12);

  --c-team-player: #1a68c6;
  --c-team-opponent: #b3451a;
  --c-team-opponent-soft: rgba(179, 69, 26, 0.12);

  --c-season-spring: #2e7d3a;
  --c-season-summer: #946000;
  --c-season-autumn: #b3451a;
  --c-season-winter: #1f62c4;

  --c-element-heat: #e0662f;
  --c-element-cold: #3b8fd6;
  --c-element-thunder: #d4a400;
  --c-element-light: #c9bd6a;
  --c-element-dark: #7a5ad6;

  --c-stat-hp: #1b7a43;
  --c-stat-hp-low: #c42f2a;
  --c-stat-tp: #1f62c4;
  --c-stat-ap: #8a5c00;
  --c-stat-capacity: #5f7489;

  --shadow-card: 0 1px 2px rgba(16, 35, 58, 0.08), 0 2px 8px rgba(16, 35, 58, 0.08);
  --shadow-float: 0 12px 32px rgba(16, 35, 58, 0.18);
  --shadow-lift: 0 18px 48px rgba(16, 35, 58, 0.24);
  --shadow-frame: 0 30px 80px rgba(16, 35, 58, 0.22);
  --glow-accent: 0 0 0 1px var(--c-accent-line), 0 0 14px rgba(26, 104, 198, 0.18);

  --motif-stair: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%231a68c6' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
  --motif-stair-gold: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23d99a1e' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
}

/* ---- Palette: warm (C) 經典暖黃 ------------------------------------------ */
:root[data-theme="warm"], [data-palette="warm"] {
  color-scheme: light;

  --c-void: #e8d9b8;
  --c-ground: #f7efd6;
  --c-ground-raised: #efe3c3;
  --c-stage-light: #efd9a8;
  --c-stage-glow: rgba(232, 196, 120, 0.5);
  --c-backdrop-top: #faf3de;
  --c-backdrop-bottom: #f1e5c6;
  --c-scene-backdrop: #eadcbc;

  --c-surface-1: #fffaee;
  --c-surface-2: #fbf3de;
  --c-surface-3: #f0e3c3;
  --c-surface-glass: rgba(255, 250, 238, 0.88);
  --c-surface-hud: rgba(255, 250, 238, 0.95);
  --c-surface-bar: rgba(250, 243, 222, 0.95);
  --c-scrim: rgba(40, 26, 6, 0.45);
  --c-selection: rgba(168, 76, 8, 0.2);

  --c-line-1: rgba(90, 60, 10, 0.12);
  --c-line-2: rgba(90, 60, 10, 0.22);
  --c-line-3: rgba(90, 60, 10, 0.36);

  --c-text-1: #33230c;
  --c-text-2: #5a4320;
  --c-text-3: #6f5634;
  --c-text-disabled: #9c8769;
  --c-text-on-accent: #ffffff;
  --c-text-on-gold: #2a1a00;

  --c-accent: #a84c08;
  --c-accent-strong: #8a3f00;
  --c-accent-deep: #6e3200;
  --c-accent-soft: rgba(168, 76, 8, 0.12);
  --c-accent-line: rgba(168, 76, 8, 0.5);
  --c-accent-hi: #e08a2a;

  --c-gold: #c98a12;
  --c-gold-strong: #7a5200;
  --c-gold-soft: rgba(201, 138, 18, 0.16);
  --c-coin-light: #ffe7a8;
  --c-coin-shade: #9a6a0e;

  --c-success: #2c7630;
  --c-success-soft: rgba(44, 118, 48, 0.12);
  --c-warning: #955600;
  --c-warning-soft: rgba(149, 86, 0, 0.12);
  --c-danger: #b0261e;
  --c-danger-soft: rgba(176, 38, 30, 0.10);
  --c-danger-line: rgba(176, 38, 30, 0.45);
  --c-danger-text: #92201a;
  --c-info: #2a5ca4;
  --c-info-soft: rgba(42, 92, 164, 0.12);
  --c-rare: #7646b3;
  --c-rare-soft: rgba(118, 70, 179, 0.12);

  /* The accent is amber here, so the player's side takes a deep teal to stay
     apart from the opponent's ember. */
  --c-team-player: #23657d;
  --c-team-opponent: #a8410f;
  --c-team-opponent-soft: rgba(168, 65, 15, 0.12);

  --c-season-spring: #2c7630;
  --c-season-summer: #8a5c00;
  --c-season-autumn: #a8410f;
  --c-season-winter: #2a5ca4;

  --c-element-heat: #d25a24;
  --c-element-cold: #3a82c4;
  --c-element-thunder: #c89800;
  --c-element-light: #bfae5c;
  --c-element-dark: #7650c0;

  --c-stat-hp: #2c7630;
  --c-stat-hp-low: #b0261e;
  --c-stat-tp: #2a5ca4;
  --c-stat-ap: #845b00;
  --c-stat-capacity: #76643f;

  --shadow-card: 0 1px 2px rgba(60, 40, 5, 0.10), 0 2px 8px rgba(60, 40, 5, 0.08);
  --shadow-float: 0 12px 32px rgba(60, 40, 5, 0.18);
  --shadow-lift: 0 18px 48px rgba(60, 40, 5, 0.24);
  --shadow-frame: 0 30px 80px rgba(60, 40, 5, 0.22);
  --glow-accent: 0 0 0 1px var(--c-accent-line), 0 0 14px rgba(168, 76, 8, 0.18);

  --motif-stair: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23a84c08' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
  --motif-stair-gold: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23c98a12' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
}

/* ---- Retro blue & gold (id "classic", 2026-10-04) -------------------------
   The tokens for the parts the earlier interface skin never knew (settings,
   dialogs, the highlight, autosave): navy ground, dark-green windows, gold
   accent, taken from that skin's own palette. The skin itself
   (nativeUiSkin.css) dresses the screens under the same attribute. */
:root[data-theme="classic"], [data-palette="classic"] {
  color-scheme: dark;

  --c-void: #041d3b;
  --c-ground: #072f5e;
  --c-ground-raised: #0a4a86;
  --c-stage-light: #1f8bff;
  --c-stage-glow: rgba(127, 233, 255, 0.35);
  --c-backdrop-top: #0b56e8;
  --c-backdrop-bottom: #072f5e;
  --c-scene-backdrop: #0a4a86;

  --c-surface-1: #12301f;
  --c-surface-2: #1d4132;
  --c-surface-3: #2a5744;
  --c-surface-glass: rgba(16, 40, 29, 0.9);
  --c-surface-hud: rgba(16, 40, 29, 0.95);
  --c-surface-bar: rgba(7, 47, 94, 0.96);
  --c-scrim: rgba(2, 10, 30, 0.62);
  --c-selection: rgba(255, 223, 70, 0.25);

  --c-line-1: rgba(255, 223, 70, 0.18);
  --c-line-2: rgba(255, 223, 70, 0.32);
  --c-line-3: rgba(255, 223, 70, 0.5);

  --c-text-1: #eafff2;
  --c-text-2: #bfe6cf;
  --c-text-3: #94c4a8;
  --c-text-disabled: #6f9580;
  --c-text-on-accent: #061119;
  --c-text-on-gold: #2a1a00;

  --c-accent: #ffdf46;
  --c-accent-strong: #fff6a8;
  --c-accent-deep: #c46a04;
  --c-accent-soft: rgba(255, 223, 70, 0.16);
  --c-accent-line: rgba(255, 223, 70, 0.55);
  --c-accent-hi: #fff6a8;

  --c-gold: #ffbe28;
  --c-gold-strong: #ffdf46;
  --c-gold-soft: rgba(255, 190, 40, 0.16);
  --c-coin-light: #fff6a8;
  --c-coin-shade: #c46a04;

  --c-success: #6ee07a;
  --c-success-soft: rgba(110, 224, 122, 0.14);
  --c-warning: #ffbe28;
  --c-warning-soft: rgba(255, 190, 40, 0.14);
  --c-danger: #ff6b5e;
  --c-danger-soft: rgba(255, 107, 94, 0.14);
  --c-danger-line: rgba(255, 107, 94, 0.5);
  --c-danger-text: #ff8a7e;
  --c-info: #7fe9ff;
  --c-info-soft: rgba(127, 233, 255, 0.14);
  --c-rare: #d8a8ff;
  --c-rare-soft: rgba(216, 168, 255, 0.14);

  /* The accent is gold here, so the player's side takes the skin's cyan. */
  --c-team-player: #3ec6ff;
  --c-team-opponent: #ff7a3c;
  --c-team-opponent-soft: rgba(255, 122, 60, 0.14);

  --c-season-spring: #7fe08a;
  --c-season-summer: #ff7ab8;
  --c-season-autumn: #ffa04a;
  --c-season-winter: #7fc8ff;

  --c-element-heat: #ff7a3c;
  --c-element-cold: #7fc8ff;
  --c-element-thunder: #ffdf46;
  --c-element-light: #fff6a8;
  --c-element-dark: #c08cff;

  --c-stat-hp: #6ee07a;
  --c-stat-hp-low: #ff6b5e;
  --c-stat-tp: #7fe9ff;
  --c-stat-ap: #ffdf46;
  --c-stat-capacity: #c8d6a0;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 10, 30, 0.35);
  --shadow-float: 0 12px 32px rgba(0, 10, 30, 0.5);
  --shadow-lift: 0 18px 48px rgba(0, 10, 30, 0.6);
  --shadow-frame: 0 30px 80px rgba(0, 10, 30, 0.55);
  --glow-accent: 0 0 0 1px var(--c-accent-line), 0 0 14px rgba(255, 223, 70, 0.25);

  --motif-stair: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23ffdf46' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
  --motif-stair-gold: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23ffbe28' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
}

/* ---- Palette: arcade 街機拍檔 (default from 2026-10-26) ------------------ *
 * Owner 2026-10-26: the whole game takes the arcade rebuild's UI. Cream paper
 * panels with ink outlines and hard slab shadows over a dotted purple stage;
 * every colour is a saturated arcade face. Component structure (thick borders,
 * button physics, the dock) lives in ui/arcade.css. */
:root[data-theme="arcade"], [data-palette="arcade"] {
  color-scheme: light;

  /* The arcade's own tokens (ui/arcade.css reads these). */
  --ax-ink: #14141f;
  --ax-ink-2: #2a2a3d;
  --ax-paper: #fff8e7;
  --ax-paper-2: #f3e6c4;
  --ax-red: #ff4d5e;     --ax-red-sh: #a3192a;
  --ax-orange: #ff9f1c;  --ax-orange-sh: #a85c00;
  --ax-yellow: #ffd23f;  --ax-yellow-sh: #a98400;
  --ax-green: #3ddc84;   --ax-green-sh: #188a49;
  --ax-cyan: #2ec4f1;    --ax-cyan-sh: #10739a;
  --ax-blue: #4d7cff;    --ax-blue-sh: #2341a8;
  --ax-purple: #a259ff;  --ax-purple-sh: #5b2aa8;
  --ax-pink: #ff6fb5;    --ax-pink-sh: #a32a6a;
  --ax-white: #fffdf6;   --ax-white-sh: #b9ad8f;
  --ax-snap: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ax-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ax-t-hover: 220ms;
  --ax-t-press: 45ms;
  --ax-border: 3px solid var(--ax-ink);
  --ax-hl: inset 0 3px 0 rgba(255, 255, 255, 0.45);
  --ax-depth: 6px;
  --ax-hard: 0 6px 0 var(--ax-ink);
  --ax-dots: radial-gradient(rgba(20, 20, 31, 0.55) 1.2px, transparent 1.6px) 0 0 / 6px 6px;
  --ax-dots-light: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.6px) 0 0 / 6px 6px;
  --ax-stage: radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.6px) 0 0 / 8px 8px,
    linear-gradient(180deg, #3b2468 0%, #4a2f7f 42%, #2f5a86 78%, #2a8a8f 100%);

  --c-void: #2b1d4a;
  /* Ground is paper so any base text on it stays legible; the purple stage is the
     page background drawn by ui/arcade.css. */
  --c-ground: #f3e6c4;
  --c-ground-raised: #eadbb4;
  --c-stage-light: #6a4bb0;
  --c-stage-glow: rgba(162, 89, 255, 0.35);
  --c-backdrop-top: #3b2468;
  --c-backdrop-bottom: #2a8a8f;
  --c-scene-backdrop: #352058;

  --c-surface-1: #fff8e7;
  --c-surface-2: #fffdf6;
  --c-surface-3: #f3e6c4;
  --c-surface-glass: #fff8e7;
  --c-surface-hud: #fff8e7;
  --c-surface-bar: #fff8e7;
  --c-scrim: rgba(20, 20, 31, 0.55);
  --c-selection: rgba(255, 210, 63, 0.45);

  --c-line-1: rgba(20, 20, 31, 0.18);
  --c-line-2: rgba(20, 20, 31, 0.45);
  --c-line-3: #14141f;

  --c-text-1: #14141f;
  --c-text-2: #2a2a3d;
  --c-text-3: #4a4660;
  --c-text-disabled: #8d879c;
  --c-text-on-accent: #ffffff;
  --c-text-on-gold: #14141f;

  /* The accent is the arcade purple: white words on it keep 4.5:1 with the ink stroke. */
  --c-accent: #7b3fe0;
  --c-accent-strong: #5b2aa8;
  --c-accent-deep: #3d1a78;
  --c-accent-soft: rgba(162, 89, 255, 0.18);
  --c-accent-line: #14141f;
  --c-accent-hi: #ffd23f;

  --c-gold: #ffd23f;
  --c-gold-strong: #755a00;
  --c-gold-soft: rgba(255, 210, 63, 0.3);
  --c-coin-light: #fff1a8;
  --c-coin-shade: #a98400;

  --c-success: #13703b;
  --c-success-soft: rgba(61, 220, 132, 0.22);
  --c-warning: #8f4e00;
  --c-warning-soft: rgba(255, 159, 28, 0.22);
  --c-danger: #c41d33;
  --c-danger-soft: rgba(255, 77, 94, 0.18);
  --c-danger-line: #a3192a;
  --c-danger-text: #a3192a;
  --c-info: #2341a8;
  --c-info-soft: rgba(77, 124, 255, 0.18);
  --c-rare: #5b2aa8;
  --c-rare-soft: rgba(162, 89, 255, 0.2);

  --c-team-player: #2341a8;
  --c-team-opponent: #c41d33;
  --c-team-opponent-soft: rgba(255, 77, 94, 0.18);

  --c-season-spring: #188a49;
  --c-season-summer: #a85c00;
  --c-season-autumn: #c4471d;
  --c-season-winter: #2341a8;

  --c-element-heat: #ff5a2a;
  --c-element-cold: #2ec4f1;
  --c-element-thunder: #e0b000;
  --c-element-light: #d8c25a;
  --c-element-dark: #8a4fe0;

  --c-stat-hp: #17783f;
  --c-stat-hp-low: #ff4d5e;
  --c-stat-tp: #2350c8;
  --c-stat-ap: #ff9f1c;
  --c-stat-capacity: #a259ff;

  /* Depth is a hard ink slab, never a blur. */
  --shadow-card: 0 4px 0 #14141f;
  --shadow-float: 0 6px 0 #14141f;
  --shadow-lift: 0 8px 0 #14141f;
  --shadow-frame: 0 8px 0 #14141f;
  --glow-accent: 0 0 0 3px #14141f, 0 0 0 6px #ffd23f;

  --bg-pattern: radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.6px);

  --motif-stair: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23a259ff' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");
  --motif-stair-gold: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath fill='%23ffd23f' d='M0 0h3v3H0zM3 3h3v3H3zM6 6h3v3H6z'/%3E%3C/svg%3E");

  /* Shared chrome, re-tuned: chunky radii, heavy type, an ink focus ring, no glass. */
  --r-tag: 8px;
  --r-control: 14px;
  --r-card: 16px;
  --r-sheet: 22px;
  --fw-regular: 700;
  --fw-strong: 800;
  --fw-heavy: 900;
  --focus-ring: 0 0 0 3px #fffdf6, 0 0 0 6px #14141f;
  --backdrop-glass: none;
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --btn-primary-bg: #ffd23f;
  --btn-primary-edge: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 6px 0 #a98400;
  --btn-primary-hover: saturate(1.12) brightness(1.04);
}

/* ---- Everything that does not change with the palette ------------------ */
:root {
  /* Paper: letters are the one warm surface in every theme. The opening
     letter and in-game mail come from people in the world, so they are
     paper, not panels. Nothing else uses these. */
  --c-paper: #f1e9d2;
  --c-paper-ink: #2d2518;
  --c-paper-muted: #6b5d44;
  --c-paper-line: rgba(80, 60, 20, 0.14);

  /* Retro keeps its existing ground; requested palettes set the shared grid. */
  --bg-pattern: none;

  /* The highlight's own darkness is a stage, not a panel: the same in every
     theme, so the reveal reads the same way. */
  --c-highlight-scrim-core: rgba(3, 9, 11, 0.3);
  --c-highlight-scrim-edge: rgba(3, 9, 11, 0.88);

  /* ---- Type ------------------------------------------------------------ *
   * System fonts only: complete Traditional Chinese on every platform and
   * nothing to download on a slow link. iOS/macOS PingFang TC, Windows
   * Microsoft JhengHei, Android/Linux Noto Sans CJK TC. English puts a Latin
   * face first (see :lang(en) below) and keeps the CJK faces as fallback for
   * approved Chinese proper nouns.
   *
   * --text-scale is the reading-size preference (100 / 115 / 130 %). Every
   * text size and line height below follows it; layouts grow with it. */
  --text-scale: 1;
  --font-ui: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", "Noto Sans CJK TC", "Source Han Sans TC", system-ui, sans-serif;
  --font-numeric: var(--font-ui);
  --fs-display: calc(28px * var(--text-scale));  --lh-display: calc(36px * var(--text-scale));
  --fs-title-1: calc(22px * var(--text-scale));  --lh-title-1: calc(30px * var(--text-scale));
  --fs-title-2: calc(18px * var(--text-scale));  --lh-title-2: calc(26px * var(--text-scale));
  --fs-body: calc(15px * var(--text-scale));     --lh-body: calc(22px * var(--text-scale));
  --fs-body-sm: calc(13px * var(--text-scale));  --lh-body-sm: calc(20px * var(--text-scale));
  --fs-label: calc(12px * var(--text-scale));    --lh-label: calc(16px * var(--text-scale));
  --fs-caption: calc(11px * var(--text-scale));  --lh-caption: calc(14px * var(--text-scale));
  --fw-regular: 500;
  --fw-strong: 700;
  --fw-heavy: 800;

  /* ---- Space (4 px grid) ----------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --target: 44px;            /* smallest touch target */
  --control: 48px;           /* standard button height */

  /* ---- Shape ----------------------------------------------------------- *
   * Three radii, not one: tags are nearly square, controls are soft, and
   * only containers are round. Full capsules are not used. */
  --r-tag: 6px;
  --r-control: 10px;
  --r-card: 14px;
  --r-sheet: 20px;

  /* ---- Game buttons (2026-10-15) --------------------------------------- *
   * The one primary action reads as a physical key: lit from above, a darker
   * lip below, and it sinks 1px when pressed. Words sit on the accent band in
   * the middle, so their contrast is the accent's own. */
  --btn-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 84%, #ffffff) 0%, var(--c-accent) 48%, color-mix(in srgb, var(--c-accent) 86%, #000000) 100%);
  --btn-primary-edge: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -3px 0 rgba(0, 0, 0, 0.16), 0 3px 10px color-mix(in srgb, var(--c-accent) 32%, transparent);
  --btn-primary-hover: brightness(1.07);

  /* ---- Depth that is not colour --------------------------------------- */
  --focus-ring: 0 0 0 2px var(--c-ground), 0 0 0 4px var(--c-accent);
  --blur-glass: 14px;  /* only over static page content: footers, the dock, sheets */
  --backdrop-glass: blur(var(--blur-glass));

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  /* Peak opacity of full-screen flashes; the "soft" preference lowers it. */
  --flash-peak: 1;

  /* ---- Layers ---------------------------------------------------------- */
  --z-scene: 0;
  --z-hud: 20;
  --z-card: 30;
  --z-sheet: 40;
  --z-menu: 50;
  --z-dialog: 60;
  --z-toast: 70;
  --z-lifecycle: 80;
  --z-highlight: 90;
  --z-settings: 95;

  /* ---- Chrome sizes ---------------------------------------------------- */
  --hud-height: 48px;
  --dock-height: 76px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---- Chevrons: drawn, not typed, so a button's accessible name is only
   * its words ("返回牧場", never "‹ 返回牧場"). Used as a mask on currentColor. */
  --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7l6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.3 2.2L9.5 3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 .5a5.5 5.5 0 110 11 5.5 5.5 0 010-11zM5.2 2.8h1.6l-.25 4.4h-1.1zM6 8.1a.95.95 0 110 1.9.95.95 0 010-1.9z'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-gear: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.6 1h2.8l.5 2.3 1.6.7 2-1.3 2 2-1.3 2 .7 1.6 2.3.5v2.8l-2.3.5-.7 1.6 1.3 2-2 2-2-1.3-1.6.7-.5 2.3H8.6l-.5-2.3-1.6-.7-2 1.3-2-2 1.3-2-.7-1.6L1 11.4V8.6l2.3-.5.7-1.6-1.3-2 2-2 2 1.3 1.6-.7zM10 6.6a3.4 3.4 0 100 6.8 3.4 3.4 0 000-6.8z'/%3E%3C/svg%3E");
}

/* Arena geometry in every requested palette; only the ink changes. */
:root[data-theme="night"], [data-palette="night"] {
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 .5h48M.5 0v48' stroke='%23286045' stroke-opacity='.38'/%3E%3Ccircle cx='.5' cy='.5' r='1.5' fill='%23286045' fill-opacity='.45'/%3E%3C/svg%3E");
}
:root[data-theme="clear"], [data-palette="clear"] {
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 .5h48M.5 0v48' stroke='%231a68c6' stroke-opacity='.06'/%3E%3Ccircle cx='.5' cy='.5' r='1.5' fill='%231a68c6' fill-opacity='.10'/%3E%3C/svg%3E");
}
:root[data-theme="warm"], [data-palette="warm"] {
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 .5h48M.5 0v48' stroke='%23a84c08' stroke-opacity='.06'/%3E%3Ccircle cx='.5' cy='.5' r='1.5' fill='%23a84c08' fill-opacity='.10'/%3E%3C/svg%3E");
}

/* ---- Words drawn by CSS (content:) -------------------------------------- *
 * The few labels a stylesheet draws itself cannot pass through the text
 * layer, so they are tokens per language. Everything else is in uiText. */
:root {
  --label-not-open: "（尚未開放）";
  --label-today: " 今天";
  --label-eligible: "可參加";
  --label-fixed: "固定";
  --label-down: "倒下";
}
:root:lang(en) {
  --label-not-open: " (not available yet)";
  --label-today: " · Today";
  --label-eligible: "Open";
  --label-fixed: "Fixed";
  --label-down: "Down";
}
:root:lang(ja) {
  --label-not-open: "（未開放）";
  --label-today: " · 今日";
  --label-eligible: "参加可";
  --label-fixed: "固定";
  --label-down: "ダウン";
}
:root:lang(th) {
  --label-not-open: " (ยังไม่เปิด)";
  --label-today: " · วันนี้";
  --label-eligible: "เข้าร่วมได้";
  --label-fixed: "คงที่";
  --label-down: "ล้มลง";
}
:root:lang(vi) {
  --label-not-open: " (chưa mở)";
  --label-today: " · Hôm nay";
  --label-eligible: "Có thể tham gia";
  --label-fixed: "Cố định";
  --label-down: "Gục ngã";
}

/* ---- Reading size ------------------------------------------------------ */
:root[data-text-scale="115"] { --text-scale: 1.15; }
:root[data-text-scale="130"] { --text-scale: 1.3; }

/* English: a Latin face first; CJK faces stay as the fallback. */
:root:lang(en) {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}

/* Japanese: system Gothic faces */
:root:lang(ja) {
  --font-ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
}

/* Thai: Leelawadee UI / Thonburi / Noto Sans Thai; line-height leaves space for diacritics and tone marks */
:root:lang(th) {
  --font-ui: "Leelawadee UI", "Leelawadee", "Thonburi", "Sukhumvit Set", "Noto Sans Thai", "Noto Sans Thai UI", system-ui, sans-serif;
  --lh-body: calc(24px * var(--text-scale));
  --lh-body-sm: calc(22px * var(--text-scale));
  --lh-label: calc(18px * var(--text-scale));
  --lh-caption: calc(16px * var(--text-scale));
}

/* Vietnamese: system Latin faces with full diacritic coverage */
:root:lang(vi) {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---- Quality: the "saver" tier drops the costly decoration ------------- *
 * No backdrop blur anywhere, no soft outer glows, lighter shadows. Focus
 * rings, selection outlines and every status mark stay. */
:root[data-quality="saver"] {
  --blur-glass: 0px;
  --backdrop-glass: none;
  --glow-accent: 0 0 0 1px var(--c-accent-line);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-float: 0 6px 16px rgba(0, 0, 0, 0.32);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-frame: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ---- Flash intensity ---------------------------------------------------- */
:root[data-flash="soft"] { --flash-peak: 0.35; }

/* ---- Reduced motion ----------------------------------------------------- *
 * Short fades stay (a change still reads as a change) but nothing travels.
 * data-motion is the resolved preference (the player's choice, else the
 * system setting); the media query covers a page that has no attribute yet. */
:root[data-motion="reduced"] {
  --dur-fast: 1ms;
  --dur-base: 90ms;
  --dur-slow: 140ms;
  --ease-spring: var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) {
    --dur-fast: 1ms;
    --dur-base: 90ms;
    --dur-slow: 140ms;
    --ease-spring: var(--ease-out);
  }
}