/*
 * Shrinebreaker design tokens (STYLE.md, ~/shrinebreaker-art/style/palette.json). Every screen takes its colours
 * from these properties: night-stone surfaces, pewter borders, silver text, moon-cyan accents, vellum for the light
 * variant - no gold. The team tokens keep their old names (--ms-team-chaos/order/balance = wire teams 1/2/3) and
 * carry the orders' colours: Cinder Vow (apricot), Moon Veil (violet), Reed Vigil (lichen) - the light ramps on the
 * dark theme, deepened for contrast on vellum. --sb-* are the raw palette for the sb-ui screens.
 */
:root {
  --ms-bg: #121923;            /* page background, deep navy */
  --ms-surface: #1d2938;       /* panels, menus */
  --ms-surface-2: #2b3b50;     /* raised / hover */
  --ms-border: #41566b;
  --ms-accent: #90d9dd;        /* primary accent, cyan */
  --ms-accent-2: #daf8ef;      /* secondary accent, sky */
  --ms-text: #e2e9e6;          /* body text, ice blue */
  --ms-text-muted: #91a4ab;    /* secondary text, steel blue */
  --ms-danger: #eca875;
  --ms-ok: #d1db9d;
  --ms-warn: #eca875;
  --ms-god: #e6d9ff;           /* the God class tag (ours: admins' and God testers' test class) */
  --ms-caution: #eca875;       /* God testing arenas: the caution for a character that would be protected there (yellow) */
  --ms-event: #d1db9d;         /* the experience event's banner, badges and HUD line (ours, 2026-09-30) */
  --ms-season: #eca875;        /* the seasonal calendar's tavern line (ours, 2026-10-02; season-banner.ts) */
  /* The start and end countdowns (ours, 2026-10-05; match-countdown.ts): drawn over the arena in both themes - the
     arcane face's two inks top to bottom, its glow and its dark edge. */
  --ms-countdown-ink: #f5f1dd;
  --ms-countdown-ink-2: #90d9dd;
  --ms-countdown-glow: rgba(144, 217, 221, 0.85);
  --ms-countdown-edge: rgba(18, 25, 35, 0.95);
  --ms-dm: #c4a3ee;            /* tavern DMs (ours, 2026-10-01; dm-banner.ts): the purple chat line and the banner's accent */
  --ms-dm-bg: rgba(69, 54, 83, 0.94);  /* the DM banner's card */
  --ms-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  --ms-overlay: rgba(18, 25, 35, 0.78);   /* scrim behind dialogs, glass panels */
  --ms-team-neutral: #b4c3c7;
  --ms-team-chaos: #eca875;
  --ms-team-order: #b9a6e2;
  --ms-team-balance: #d1db9d;
  --ms-ffa-enemy: #cc7048;
  /* Ours (arena events): the Chaos Goblin's nameplate and health bar. */
  --ms-goblin: #a5b967;
  /* Ours (arena events: Bounty): the marked body's name and its minimap mark. */
  --ms-bounty: #ffc9a0;
  --ms-hurt-outline: #ffffff;  /* a hurt body's name, outlined for a Warden (retail's palette 0xff); both themes: it is drawn over the 3D view */
  /* Ours (Weekly Honours, docs/HONOURS.md): the laurel by a winner's name - on the pages (themed) and on nameplates over the 3D view (both themes). */
  --ms-laurel: #b4c3c7;
  --ms-laurel-plate: #e2e9e6;
  /* Ours (2026-10-05; src/app/name-mark.ts): a developer account's "Dev" badge and name - orange. On the dark surfaces
     #ff8a1f is 6.5:1 (the light theme's #a64400 is 6:1 on white, 5.1:1 on --ms-surface-2); over the 3D view (nameplates,
     both themes, with the names' shadow) the plate's. */
  --ms-dev: #eca875;
  --ms-dev-plate: #eca875;
  --ms-radius: 8px;
  --ms-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ms-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Feats (docs/FEATS.md): the icon ring of each tier - Bronze, Silver, Gold, Mithril, Arcane (feat-icons.ts), and the icon's disc. */
  --ms-feat-tier-1: #b07a44; --ms-feat-tier-2: #c9d1da; --ms-feat-tier-3: #e8c048; --ms-feat-tier-4: #7fdbff; --ms-feat-tier-5: #c77dff;
  --ms-feat-disc: #0b1522;
  /* The shared hardening kit's overlays (src/net/hardening): "Connection lost - reconnecting…" and "A new version is available - Reload". */
  --ms-reconnect-bg: rgba(18, 25, 35, 0.9);
  --build-banner-bg: var(--ms-surface);
  --build-banner-fg: var(--ms-text);
  --build-banner-accent: var(--ms-accent);
  color-scheme: dark;
}

/* The raw STYLE.md palette for the sb-ui screens (src/sb-ui). */
:root {
  --sb-night: #121923; --sb-stone-shadow: #1d2938; --sb-slate: #2b3b50; --sb-stone-mid: #41566b; --sb-stone-light: #657c8b;
  --sb-mist: #91a4ab; --sb-pewter-dark: #414a50; --sb-pewter: #77868c; --sb-silver: #b4c3c7; --sb-silver-light: #e2e9e6;
  --sb-vellum-shadow: #a99d86; --sb-vellum: #d5c8ad; --sb-vellum-light: #eee3ca; --sb-ink: #292c31;
  --sb-moon-dark: #326a76; --sb-moon: #90d9dd; --sb-moon-light: #daf8ef; --sb-bone: #f5f1dd;
  --sb-cinder: #cc7048; --sb-cinder-light: #eca875; --sb-cinder-dark: #633e38; --sb-cinder-glow: #ffc9a0;
  --sb-veil: #9079c1; --sb-veil-light: #b9a6e2; --sb-veil-dark: #453653; --sb-veil-glow: #e6d9ff;
  --sb-reed: #a5b967; --sb-reed-light: #d1db9d; --sb-reed-dark: #485538; --sb-reed-glow: #ecf3c1;
  --sb-font: "Source Serif 4", Georgia, "Times New Roman", serif;
}

:root[data-theme="light"] {
  --ms-bg: #eee3ca;
  --ms-surface: #f5f1dd;
  --ms-surface-2: #d5c8ad;
  --ms-border: #a99d86;
  /* AA on the light surfaces (2026-10-05: #0288c7 / #0aa4d8 were 3.6:1 / 2.6:1 on --ms-bg): 5.4:1, the hover darker at 6.3:1. */
  --ms-accent: #326a76;
  --ms-accent-2: #2b3b50;
  --ms-text: #292c31;
  --ms-text-muted: #41566b;
  --ms-danger: #633e38;
  --ms-ok: #485538;
  --ms-warn: #633e38;
  --ms-god: #453653;
  --ms-caution: #633e38;
  --ms-event: #485538;
  --ms-season: #633e38;
  --ms-dm: #5a3a8a;
  --ms-dm-bg: rgba(238, 227, 202, 0.96);
  --ms-feat-tier-1: #8a5a2b; --ms-feat-tier-2: #5f6b78; --ms-feat-tier-3: #9a7400; --ms-feat-tier-4: #0f7fa8; --ms-feat-tier-5: #7b3fb0;
  --ms-shadow: 0 6px 24px rgba(13, 27, 42, 0.15);
  --ms-overlay: rgba(238, 227, 202, 0.82);
  --ms-reconnect-bg: rgba(238, 227, 202, 0.9);
  --ms-team-neutral: #41566b;
  --ms-team-chaos: #8a4a30;
  --ms-team-order: #5a4680;
  --ms-team-balance: #4f6030;
  --ms-ffa-enemy: #633e38;
  --ms-goblin: #485538;
  --ms-bounty: #633e38;
  --ms-laurel: #414a50;
  --ms-dev: #633e38;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ms-reconnect-bg: rgba(238, 227, 202, 0.9);
    --ms-bg: #eee3ca;
    --ms-surface: #f5f1dd;
    --ms-surface-2: #d5c8ad;
    --ms-border: #a99d86;
    --ms-accent: #326a76;
    --ms-accent-2: #2b3b50;
    --ms-text: #292c31;
    --ms-text-muted: #41566b;
    --ms-danger: #633e38;
    --ms-ok: #485538;
    --ms-warn: #633e38;
    --ms-god: #453653;
    --ms-caution: #633e38;
    --ms-event: #485538;
    --ms-season: #633e38;
    --ms-dm: #5a3a8a;
    --ms-dm-bg: rgba(238, 227, 202, 0.96);
    --ms-feat-tier-1: #8a5a2b; --ms-feat-tier-2: #5f6b78; --ms-feat-tier-3: #9a7400; --ms-feat-tier-4: #0f7fa8; --ms-feat-tier-5: #7b3fb0;
    --ms-shadow: 0 6px 24px rgba(13, 27, 42, 0.15);
    --ms-overlay: rgba(238, 227, 202, 0.82);
    --ms-team-neutral: #41566b;
    --ms-team-chaos: #8a4a30;
    --ms-team-order: #5a4680;
    --ms-team-balance: #4f6030;
    --ms-ffa-enemy: #633e38;
  --ms-goblin: #485538;
  --ms-bounty: #633e38;
    --ms-laurel: #414a50;
    --ms-dev: #633e38;
    color-scheme: light;
  }
}

/* The standalone page /whats-new (tools/whats-new.ts appends this to theme.css as /whats-new.css). Colours only from theme.css tokens. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ms-bg); color: var(--ms-text); font: 16px/1.6 var(--ms-font); }
a { color: var(--ms-accent); }
a:hover { color: var(--ms-accent-2); }
.wn-page { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.wn-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--ms-border); }
.wn-brand { font-size: 22px; letter-spacing: .28em; color: var(--ms-accent-2); text-decoration: none; font-weight: 600; }
.wn-top .spacer { flex: 1; }
.wn-play { display: inline-block; background: var(--ms-accent); color: var(--ms-bg); border-radius: 6px; padding: 8px 16px; font-weight: 600; text-decoration: none; }
.wn-play:hover { background: var(--ms-accent-2); color: var(--ms-bg); }
h1 { font-size: 30px; line-height: 1.2; margin: 28px 0 8px; font-weight: 600; }
.wn-intro { color: var(--ms-text-muted); margin: 0 0 20px; }
.wn-day { margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-surface); }
.wn-day.latest { border-color: var(--ms-accent); box-shadow: 0 0 0 1px var(--ms-accent); }
.wn-day h2 { font-size: 17px; margin: 0 0 8px; color: var(--ms-accent-2); font-weight: 600; }
.wn-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-bg); background: var(--ms-accent); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; margin-left: 6px; }
.wn-day ul { margin: 0; padding-left: 20px; }
.wn-day li { margin: 6px 0; }
.wn-day li strong:first-child { color: var(--ms-text); }
code { font: .9em var(--ms-mono); background: var(--ms-surface-2); border-radius: 4px; padding: 0 4px; }
.wn-foot { margin-top: 28px; color: var(--ms-text-muted); font-size: 14px; }
/* The fan-revival notice (src/app/fan-notice-text.ts): small, muted, under the footer links. */
.wn-foot .fan-notice { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ms-border); font-size: 13px; line-height: 1.5; }