/*
 * Magestorm web - design tokens. Every screen (dev viewer now; login, lobby,
 * HUD, admin console later) takes its colours from these properties, so the
 * palette lives in exactly one place. Deliberately NOT the green terminal look
 * of Aliens Online / MPBT: deep navy, cyan and sky accents, ice-blue text,
 * steel-blue secondary text, with a light variant.
 */
:root {
  --ms-bg: #0d1b2a;            /* page background, deep navy */
  --ms-surface: #13263a;       /* panels, menus */
  --ms-surface-2: #1b3350;     /* raised / hover */
  --ms-border: #2a4a6b;
  --ms-accent: #4fc3f7;        /* primary accent, cyan */
  --ms-accent-2: #7fdbff;      /* secondary accent, sky */
  --ms-text: #e6f4ff;          /* body text, ice blue */
  --ms-text-muted: #8fa9c2;    /* secondary text, steel blue */
  --ms-danger: #ff7a8a;
  --ms-ok: #7ee0b5;
  --ms-warn: #ffc27a;
  --ms-god: #ffd54f;           /* the God class tag (ours: admins' and God testers' test class) */
  --ms-caution: #ffd84a;       /* God testing arenas: the caution for a character that would be protected there (yellow) */
  --ms-event: #b7f07a;         /* the experience event's banner, badges and HUD line (ours, 2026-09-30) */
  --ms-season: #ffb74d;        /* 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: #fff6d8;
  --ms-countdown-ink-2: #e8b44c;
  --ms-countdown-glow: rgba(79, 195, 247, 0.85);
  --ms-countdown-edge: rgba(4, 10, 18, 0.95);
  --ms-dm: #d49cff;            /* tavern DMs (ours, 2026-10-01; dm-banner.ts): the purple chat line and the banner's accent */
  --ms-dm-bg: rgba(44, 18, 72, 0.94);  /* the DM banner's card */
  --ms-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  --ms-overlay: rgba(6, 14, 24, 0.72);   /* scrim behind dialogs, glass panels */
  /* The login painting's veil (login-art.ts; the same in both themes - the art is dark): ~64% of its brightness. */
  --ms-login-veil-base: #0d1b2a;
  --ms-login-veil: rgba(13, 27, 42, 0.36);
  /* The character screens' veil over it (their headings sit on the page itself): the login's in dark, light in light. */
  --ms-study-veil: rgba(13, 27, 42, 0.36);
  --ms-team-neutral: #b8c7d6;
  --ms-team-chaos: #ff6b6b;
  --ms-team-order: #6ea8ff;
  --ms-team-balance: #7ee0a0;
  /* Team chat's words (team-chat.ts, feedback #14, 2026-10-17): the team's colour, AA on the chat's surfaces. */
  --ms-chat-team-chaos: #ff6b6b;
  --ms-chat-team-order: #6ea8ff;
  --ms-chat-team-balance: #7ee0a0;
  --ms-ffa-enemy: #ffa94d;
  /* Colour-blind support (team-colours.ts, 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). --ms-ally / --ms-enemy on
     the page's surfaces (AA on --ms-bg, --ms-surface, --ms-surface-2 in each theme); --ms-view-* over the 3D view (both
     themes); --ms-classic-* on Classic's parchment (4.5:1+ on its mean). */
  --ms-ally: #4da3ff;
  --ms-enemy: #ff9f1c;
  --ms-view-ally: #4da3ff;
  --ms-view-enemy: #ff9f1c;
  --ms-classic-ally: #072a6e;
  --ms-classic-enemy: #5c2400;
  /* 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 team colours and a shadow of --ms-bg, which in the light theme ringed every name in near-white: the
     look of a Cleric's hurt ring (ticket #18, "everyone's nametags are permanently hollow"). */
  --ms-view-team-neutral: #b8c7d6;
  --ms-view-team-chaos: #ff6b6b;
  --ms-view-team-order: #6ea8ff;
  --ms-view-team-balance: #7ee0a0;
  --ms-view-ffa-enemy: #ffa94d;
  --ms-view-muted: #8fa9c2;
  /* Harmful spells' names on the spell bar and chips (was --ms-team-chaos, which Allies & enemies now remaps). */
  --ms-spell-harm: #ff6b6b;
  --ms-name-shadow: #05080c;
  /* Ours (arena events): the Chaos Goblin's nameplate and health bar. */
  --ms-goblin: #b8ff5a;
  /* Ours (arena events: Bounty): the marked body's name and its minimap mark. */
  --ms-bounty: #ffd54f;
  --ms-hurt-outline: #ffffff;  /* a hurt body's name, outlined for a Cleric (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: #ffd36b;
  --ms-laurel-plate: #ffd36b;
  /* 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; Classic: --ms-classic-dev* below. */
  --ms-dev: #ff8a1f;
  --ms-dev-plate: #ff8a1f;
  --ms-radius: 8px;
  --ms-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --ms-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Classic interface (retail art): the letterbox around the 640x480 frame, the tooltip box. Same in both themes. */
  --ms-classic-letterbox: #000;
  --ms-classic-tip-bg: #eadcb6;
  --ms-classic-tip-border: #5a3d18;
  --ms-classic-select: rgba(255, 236, 170, 0.22);
  --ms-classic-caution: #e8b400;  /* God testing arenas: the yellow caution in the Classic list (god-arena.ts) */
  --ms-classic-feat-bar: #8a6a28; /* Feats: Classic's progress bar on parchment (classic/feats.ts) */
  --ms-classic-feat-gold: #ffd070; /* Feats: Classic's level-up print over the view (classic/arena.ts) */
  --ms-classic-dm: #c77dff;       /* tavern DMs: Classic's purple chat line (the arena's and the tavern's buffers) */
  --ms-classic-season: #a84a00;   /* the seasonal calendar: Classic's tavern status line (classic/tavern.ts) */
  --ms-classic-dm-ink: #6a1b9a;   /* tavern DMs: the sender on Classic's parchment banner */
  --ms-classic-laurel: #9a6a08;   /* Weekly Honours: the laurel in Classic's tavern column, on parchment (docs/HONOURS.md) */
  --ms-classic-dev: #662700;      /* a developer's name (name-mark.ts) in Classic's chat, player column, roster and scoreboard: 4.6:1+ on the parchment */
  --ms-classic-dev-plate: #ff8a1f; /* ... and the Dev badge: dark letters on an orange plate (8.6:1), both art modes */
  --ms-classic-dev-on-plate: #1a0a00;
  /* The Classic art (docs/CLASSIC-HD.md): the pewter tokens over the silver HD art (Codex's theme-handoff.json),
     in place of the four above and the gold chosen outline / brown panel frames, only while the option is on. */
  --ms-classic-hd-tip-border: #8c98a5;
  --ms-classic-hd-select: rgba(215, 226, 239, 0.22);
  --ms-classic-hd-feat-bar: #7c8c9b;
  --ms-classic-hd-laurel: #aab6c4;
  --ms-classic-hd-dev: #6a2800;
  --ms-classic-hd-select-line: rgba(215, 226, 239, 0.9);
  --ms-classic-hd-frame: #8c98a5;
  /* Ours (2026-10-05): text straight on the dark art (the Classic login's links and lines under the dialog, widgets.ts
     darkLink / darkPlate): light inks on a soft dark plate, WCAG AA (tools/login-contrast-page-check.mts). The
     parchment's light, a lighter muted, the Feats' gold under the pointer and for the focus ring, a light retail red
     for "new" and errors; with the Classic art pewter-light, the laurel's pewter, white. */
  --ms-classic-on-dark: #eadcb6;
  --ms-classic-on-dark-muted: #cdbd98;
  --ms-classic-on-dark-hot: #ffd070;
  --ms-classic-on-dark-new: #ff9a80;
  --ms-classic-on-dark-plate: rgba(0, 0, 0, 0.78);
  --ms-classic-hd-on-dark: #d7e2ef;
  --ms-classic-hd-on-dark-muted: #aab6c4;
  --ms-classic-hd-on-dark-hot: #ffffff;
  --ms-classic-hd-on-dark-plate: rgba(4, 8, 14, 0.78);
  /* 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;
  /* Classic "What's new" panel: parchment, dark ink, the retail red. */
  --ms-classic-ink: #3b2610;
  --ms-classic-ink-muted: #6b5030;
  --ms-classic-red: #9a2414;
  /* Team inks on parchment (the wrap-up's Classic table). */
  --ms-classic-team-chaos: #a3261a;
  --ms-classic-team-order: #1f4fa8;
  --ms-classic-team-balance: #1f7a3c;
  /* Team chat's words in Classic's arena chat (team-chat.ts, feedback #14, 2026-10-17): darker team inks for the chat
     panel's parchment (Playback, both art modes) - 4.5:1+ on the panel's mean (tools/chat-filter-selftest.ts). */
  --ms-classic-chat-team-chaos: #6b0d06;
  --ms-classic-chat-team-order: #14357a;
  --ms-classic-chat-team-balance: #08401a;
  --ms-classic-spell-name: #ffd23c; /* the readied spell's name at the view's bottom right (classic/spell-label.ts, feedback #13), outlined in black */
  /* The shared hardening kit's overlays (src/net/hardening): "Connection lost - reconnecting…" and "A new version is available - Reload". */
  --ms-reconnect-bg: rgba(6, 14, 24, 0.86);
  --build-banner-bg: var(--ms-surface);
  --build-banner-fg: var(--ms-text);
  --build-banner-accent: var(--ms-accent);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ms-bg: #eef6fc;
  --ms-surface: #ffffff;
  --ms-surface-2: #dcecf8;
  --ms-border: #b4cde2;
  /* 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: #016aa0;
  --ms-accent-2: #005f8f;
  --ms-text: #0d1b2a;
  --ms-text-muted: #4f6b85;
  --ms-danger: #c6283c;
  --ms-ok: #16865a;
  --ms-warn: #a45a00;
  --ms-god: #8a5a00;
  --ms-caution: #8a6d00;
  --ms-event: #3f7d12;
  --ms-season: #a14d00;
  --ms-dm: #7a2db8;
  --ms-dm-bg: rgba(246, 236, 255, 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, 246, 252, 0.8);
  --ms-study-veil: rgba(238, 246, 252, 0.8);
  --ms-reconnect-bg: rgba(238, 246, 252, 0.9);
  --ms-team-neutral: #5a6b7c;
  --ms-team-chaos: #c62f3a;
  --ms-team-order: #1f5fcf;
  --ms-team-balance: #1b8a4c;
  --ms-chat-team-chaos: #b52a34;
  --ms-chat-team-order: #1f5fcf;
  --ms-chat-team-balance: #146b3a;
  --ms-ffa-enemy: #b35c00;
  --ms-ally: #0060c0;
  --ms-spell-harm: #c62f3a;
  --ms-enemy: #a34a00;
  --ms-goblin: #3f8a00;
  --ms-bounty: #9a6b00;
  --ms-laurel: #8a6400;
  --ms-dev: #a64400;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ms-reconnect-bg: rgba(238, 246, 252, 0.9);
    --ms-bg: #eef6fc;
    --ms-surface: #ffffff;
    --ms-surface-2: #dcecf8;
    --ms-border: #b4cde2;
    --ms-accent: #016aa0;
    --ms-accent-2: #005f8f;
    --ms-text: #0d1b2a;
    --ms-text-muted: #4f6b85;
    --ms-danger: #c6283c;
    --ms-ok: #16865a;
    --ms-warn: #a45a00;
    --ms-god: #8a5a00;
    --ms-caution: #8a6d00;
    --ms-event: #3f7d12;
    --ms-season: #a14d00;
    --ms-dm: #7a2db8;
    --ms-dm-bg: rgba(246, 236, 255, 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, 246, 252, 0.8);
    --ms-study-veil: rgba(238, 246, 252, 0.8);
    --ms-team-neutral: #5a6b7c;
    --ms-team-chaos: #c62f3a;
    --ms-team-order: #1f5fcf;
    --ms-team-balance: #1b8a4c;
    --ms-chat-team-chaos: #b52a34;
    --ms-chat-team-order: #1f5fcf;
    --ms-chat-team-balance: #146b3a;
    --ms-ffa-enemy: #b35c00;
  --ms-ally: #0060c0;
  --ms-spell-harm: #c62f3a;
  --ms-enemy: #a34a00;
  --ms-goblin: #3f8a00;
  --ms-bounty: #9a6b00;
    --ms-laurel: #8a6400;
    --ms-dev: #a64400;
    color-scheme: light;
  }
}

/*
 * Allies & enemies (team-colours.ts applyTeamColours: data-team-colours, data-ally = your team, data-ffa): each team's
 * tokens become the ally's or the enemy's, so everything drawn in a team colour follows - nameplates, team chat, the
 * minimap, the scoreboard, the kill feed, the shrine / pool bars, the orb lines, the arena list, the results, Classic's
 * team inks. In a free for all (data-ally 0) every team is an enemy.
 */
:root[data-team-colours="allies"][data-ally="0"] {
  --ms-team-chaos: var(--ms-enemy); --ms-chat-team-chaos: var(--ms-enemy); --ms-view-team-chaos: var(--ms-view-enemy);
  --ms-classic-team-chaos: var(--ms-classic-enemy); --ms-classic-chat-team-chaos: var(--ms-classic-enemy);
  --ms-team-order: var(--ms-enemy); --ms-chat-team-order: var(--ms-enemy); --ms-view-team-order: var(--ms-view-enemy);
  --ms-classic-team-order: var(--ms-classic-enemy); --ms-classic-chat-team-order: var(--ms-classic-enemy);
  --ms-team-balance: var(--ms-enemy); --ms-chat-team-balance: var(--ms-enemy); --ms-view-team-balance: var(--ms-view-enemy);
  --ms-classic-team-balance: var(--ms-classic-enemy); --ms-classic-chat-team-balance: var(--ms-classic-enemy);
  --ms-ffa-enemy: var(--ms-enemy); --ms-view-ffa-enemy: var(--ms-view-enemy);
}
:root[data-team-colours="allies"][data-ally="1"] {
  --ms-team-chaos: var(--ms-ally); --ms-chat-team-chaos: var(--ms-ally); --ms-view-team-chaos: var(--ms-view-ally);
  --ms-classic-team-chaos: var(--ms-classic-ally); --ms-classic-chat-team-chaos: var(--ms-classic-ally);
  --ms-team-order: var(--ms-enemy); --ms-chat-team-order: var(--ms-enemy); --ms-view-team-order: var(--ms-view-enemy);
  --ms-classic-team-order: var(--ms-classic-enemy); --ms-classic-chat-team-order: var(--ms-classic-enemy);
  --ms-team-balance: var(--ms-enemy); --ms-chat-team-balance: var(--ms-enemy); --ms-view-team-balance: var(--ms-view-enemy);
  --ms-classic-team-balance: var(--ms-classic-enemy); --ms-classic-chat-team-balance: var(--ms-classic-enemy);
  --ms-ffa-enemy: var(--ms-enemy); --ms-view-ffa-enemy: var(--ms-view-enemy);
}
:root[data-team-colours="allies"][data-ally="2"] {
  --ms-team-chaos: var(--ms-enemy); --ms-chat-team-chaos: var(--ms-enemy); --ms-view-team-chaos: var(--ms-view-enemy);
  --ms-classic-team-chaos: var(--ms-classic-enemy); --ms-classic-chat-team-chaos: var(--ms-classic-enemy);
  --ms-team-order: var(--ms-ally); --ms-chat-team-order: var(--ms-ally); --ms-view-team-order: var(--ms-view-ally);
  --ms-classic-team-order: var(--ms-classic-ally); --ms-classic-chat-team-order: var(--ms-classic-ally);
  --ms-team-balance: var(--ms-enemy); --ms-chat-team-balance: var(--ms-enemy); --ms-view-team-balance: var(--ms-view-enemy);
  --ms-classic-team-balance: var(--ms-classic-enemy); --ms-classic-chat-team-balance: var(--ms-classic-enemy);
  --ms-ffa-enemy: var(--ms-enemy); --ms-view-ffa-enemy: var(--ms-view-enemy);
}
:root[data-team-colours="allies"][data-ally="3"] {
  --ms-team-chaos: var(--ms-enemy); --ms-chat-team-chaos: var(--ms-enemy); --ms-view-team-chaos: var(--ms-view-enemy);
  --ms-classic-team-chaos: var(--ms-classic-enemy); --ms-classic-chat-team-chaos: var(--ms-classic-enemy);
  --ms-team-order: var(--ms-enemy); --ms-chat-team-order: var(--ms-enemy); --ms-view-team-order: var(--ms-view-enemy);
  --ms-classic-team-order: var(--ms-classic-enemy); --ms-classic-chat-team-order: var(--ms-classic-enemy);
  --ms-team-balance: var(--ms-ally); --ms-chat-team-balance: var(--ms-ally); --ms-view-team-balance: var(--ms-view-ally);
  --ms-classic-team-balance: var(--ms-classic-ally); --ms-classic-chat-team-balance: var(--ms-classic-ally);
  --ms-ffa-enemy: var(--ms-enemy); --ms-view-ffa-enemy: var(--ms-view-enemy);
}

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