/*
 * 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-guild: #f2a7c3;         /* guild chat (Magestorm's ticket #45; guild-chat.ts): the "[Guild]" lines, rose - apart from the moon-cyan accent, the DMs' violet and the orders' colours; AA on --ms-bg / surface / surface-2 */
  --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;
  /* Colour-blind support (team-colours.ts, from Magestorm ticket #18, 2026-10-19): Allies & enemies mode's pair -
     Okabe-Ito's blue and orange, apart under protanopia, deuteranopia and tritanopia (tools/team-colours-selftest.ts).
     Each surface that sets its own team tokens sets its pair too (hud-style.css, warfront-hud.css, sb-ui frame.css):
     the dark pair on night stone, glass and plaques, the deeper one on vellum - 4.5:1 or more on each. */
  --ms-ally: #5cadff;
  --ms-enemy: #ff9f1c;
  --ms-view-ally: #5cadff;
  --ms-view-enemy: #ff9f1c;
  /* Names over the 3D view (play.ts): the same in both themes - the view is no page surface. Before 2026-10-19 they took
     the theme's order colours and a shadow of --ms-bg, which in the light theme ringed every name in vellum: the look
     of a Warden's hurt ring (Magestorm's ticket #18, "everyone's nametags are permanently hollow"). */
  --ms-view-team-neutral: #b4c3c7;
  --ms-view-team-chaos: #eca875;
  --ms-view-team-order: #b9a6e2;
  --ms-view-team-balance: #d1db9d;
  --ms-view-ffa-enemy: #cc7048;
  --ms-view-muted: #91a4ab;
  /* The hit text under the crosshair (hit-text.ts, with Magestorm's ticket #27): a hit, a body hurting you, your heal -
     over the 3D view, outlined in black (7:1+ against the outline, which is what the eye reads it on). */
  --ms-view-hit-text: #f2f6f4;
  --ms-view-hurt-text: #f0b4a0;
  --ms-view-heal-text: #90d9dd;
  --ms-name-shadow: #0b1017;
  /* 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;
  /* Guild chat (Magestorm's ticket #45): the painted tavern's "[Guild]" lines, on the night stone (9:1). */
  --sb-guild: #f2a7c3;
  --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-guild: #7f2a50;
  --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-ally: #004a99;
  --ms-enemy: #8a3d00;
  --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-guild: #7f2a50;
    --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-ally: #004a99;
  --ms-enemy: #8a3d00;
  --ms-goblin: #485538;
  --ms-bounty: #633e38;
    --ms-laurel: #414a50;
    --ms-dev: #633e38;
    color-scheme: light;
  }
}

/*
 * Allies & enemies (team-colours.ts applyTeamColours: data-team-colours, data-ally = your order, data-ffa): on every
 * element each order's tokens become its surface's ally or enemy colour (--ms-ally / --ms-enemy, set where a surface
 * sets its own team tokens - hud-style.css, warfront-hud.css, frame.css - so the vellum's deeper pair and the glass's
 * light one each read on their ground), !important over those scopes' own team tokens. Everything drawn in an order's
 * colour follows: nameplates, team chat, the minimap, the scoreboard, the kill feed, the shrine / pool bars, the orb
 * lines, Warfront's waystones and bases, the escort HUD, the tavern's arena list, the results. A free for all
 * (data-ally 0): every order an enemy.
 */
:root[data-team-colours="allies"][data-ally="0"], :root[data-team-colours="allies"][data-ally="0"] * {
  --ms-team-chaos: var(--ms-enemy) !important; --ms-view-team-chaos: var(--ms-view-enemy) !important;
  --ms-team-order: var(--ms-enemy) !important; --ms-view-team-order: var(--ms-view-enemy) !important;
  --ms-team-balance: var(--ms-enemy) !important; --ms-view-team-balance: var(--ms-view-enemy) !important;
  --ms-ffa-enemy: var(--ms-enemy) !important; --ms-view-ffa-enemy: var(--ms-view-enemy) !important;
}
:root[data-team-colours="allies"][data-ally="1"], :root[data-team-colours="allies"][data-ally="1"] * {
  --ms-team-chaos: var(--ms-ally) !important; --ms-view-team-chaos: var(--ms-view-ally) !important;
  --ms-team-order: var(--ms-enemy) !important; --ms-view-team-order: var(--ms-view-enemy) !important;
  --ms-team-balance: var(--ms-enemy) !important; --ms-view-team-balance: var(--ms-view-enemy) !important;
  --ms-ffa-enemy: var(--ms-enemy) !important; --ms-view-ffa-enemy: var(--ms-view-enemy) !important;
}
:root[data-team-colours="allies"][data-ally="2"], :root[data-team-colours="allies"][data-ally="2"] * {
  --ms-team-chaos: var(--ms-enemy) !important; --ms-view-team-chaos: var(--ms-view-enemy) !important;
  --ms-team-order: var(--ms-ally) !important; --ms-view-team-order: var(--ms-view-ally) !important;
  --ms-team-balance: var(--ms-enemy) !important; --ms-view-team-balance: var(--ms-view-enemy) !important;
  --ms-ffa-enemy: var(--ms-enemy) !important; --ms-view-ffa-enemy: var(--ms-view-enemy) !important;
}
:root[data-team-colours="allies"][data-ally="3"], :root[data-team-colours="allies"][data-ally="3"] * {
  --ms-team-chaos: var(--ms-enemy) !important; --ms-view-team-chaos: var(--ms-view-enemy) !important;
  --ms-team-order: var(--ms-enemy) !important; --ms-view-team-order: var(--ms-view-enemy) !important;
  --ms-team-balance: var(--ms-ally) !important; --ms-view-team-balance: var(--ms-view-ally) !important;
  --ms-ffa-enemy: var(--ms-enemy) !important; --ms-view-ffa-enemy: var(--ms-view-enemy) !important;
}

/* 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; }

/* The public guild tournaments page, /tournaments (src/app/tournaments-page.ts; tools/tournaments-page.ts builds /tournaments.css = theme.css + whats-new-page.css + this). Colours only from theme.css tokens. */
.tn-page h1 { margin-bottom: 4px; }
.tn-intro, .tn-meta, .tn-blurb { color: var(--ms-text-muted); margin: 0 0 14px; }
.tn-phase { color: var(--ms-accent-2); font-weight: 600; margin: 0 0 6px; }
.tn-stale { color: var(--ms-warn); font-size: 13px; margin: 0 0 8px; }
.tn-section { margin: 0 0 26px; }
.tn-section h2 { font-size: 20px; margin: 0 0 10px; color: var(--ms-accent-2); font-weight: 600; }
.tn-none { color: var(--ms-text-muted); font-style: italic; margin: 6px 0; }
.tn-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tn-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-surface); }
.tn-card-title { font-size: 17px; font-weight: 600; }
.tn-status { color: var(--ms-accent-2); font-size: 13px; }
.tn-when, .tn-count { color: var(--ms-text-muted); font-size: 13px; }
.tn-champ { color: var(--ms-event); font-weight: 600; margin: 4px 0; }
.tn-entries { border-collapse: collapse; width: 100%; }
.tn-entries td { padding: 4px 8px; border-bottom: 1px solid var(--ms-border); }
.tn-entries tr.out td { color: var(--ms-text-muted); text-decoration: line-through; }
.tn-tag { font-weight: 600; white-space: nowrap; }
.num { text-align: right; }
.tn-live { color: var(--ms-text-muted); font-size: 14px; }
.tn-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.tn-round h3 { font-size: 13px; letter-spacing: .06em; color: var(--ms-text-muted); margin: 0 0 6px; font-weight: 600; }
.tn-pod { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); background: var(--ms-surface); padding: 8px 10px; margin: 0 0 10px; }
.tn-pod.live { border-color: var(--ms-accent); }
.tn-pod h4 { margin: 0 0 4px; font-size: 14px; }
.tn-pod table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tn-pod td { padding: 2px 4px; }
.tn-pod tr.winner { color: var(--ms-event); font-weight: 600; }
.tn-pod tr.winner td.tn-crown { color: var(--ms-event); }
.tn-pod tr.house td, .tn-pod tr.forfeit td { color: var(--ms-text-muted); }
.tn-pod .tn-crown { width: 1.2em; }
/* The orders (wire teams 1-3; theme.css keeps the old token names): Cinder Vow, Moon Veil, Reed Vigil. */
.tn-team.cinder { color: var(--ms-team-chaos, var(--ms-text)); }
.tn-team.veil { color: var(--ms-team-order, var(--ms-text)); }
.tn-team.reed { color: var(--ms-team-balance, var(--ms-text)); }
.tn-foot { color: var(--ms-text-muted); font-size: 12px; margin: 4px 0 0; }
.tn-corrected { font-size: 11px; color: var(--ms-warn); font-weight: 400; }
.tn-standings { font-size: 14px; }
/* Phones: the bracket's rounds stack. */
@media (max-width: 640px) {
  .tn-bracket { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
}