/* spectre.re — a landing page built from Warcraft III's own interface. One scene behind the whole
   page (the Frozen Throne's main menu, or a race's art); every section is the game's panel, hung
   on chains from the one above; the buttons, frames, tooltips, cursor, score screen and quest log
   are the game's textures. Five styles: the Frozen Throne glue screens, and the four races. */

@font-face { font-family: "W3"; src: url("/assets/w3/friz.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-024F, U+02BB-02BC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "W3"; src: url("/assets/w3/nimrod.woff2") format("woff2"); font-display: swap; unicode-range: U+0400-04FF, U+2116; }
@font-face { font-family: "W3RU"; src: url("/assets/w3/nimrod.woff2") format("woff2"); font-display: swap; }

:root {
  --gold: #fcd312;
  --white: #ffffff;
  --text: #e9e6dd;
  --muted: #aaa69c;
  --ink: #2c1c08;
  --font: "W3", "W3RU", Georgia, serif;
  --wrap: 1120px;
  --chain-gap: 96px;
  /* A war3 frame unit (the screen is 0.8 x 0.6 of them) in px: the game at 600 px tall. */
  --u: 600px;
  /* The races' Esc menu backdrop (EscMenuMainPanel.fdf): EscMenuBorder corners 0.048, EscMenuBackground
     tiles 0.256, inset 0.01. --frame-in is where the border's metal ends inside its corner cell. */
  --frame-c: 0.048; --bg-size: 0.256; --bg-inset: 0.01; --pad: 14px;
  --shade: linear-gradient(90deg, rgba(4, 6, 12, 0.74) 0%, rgba(4, 6, 12, 0.4) 42%, rgba(4, 6, 12, 0.08) 72%), linear-gradient(180deg, rgba(4, 6, 12, 0.35), transparent 22%, transparent 62%, rgba(4, 6, 12, 0.6));
  color-scheme: dark;
}
html[lang="ru"] { --font: "W3RU", Georgia, serif; }

/* ---- the five styles ----------------------------------------------------------------------- */
html[data-theme="tft"] {
  /* The glue screens' dialog (MainMenu.fdf, BattleNet*.fdf): bnet-dialoguebox border and background,
     corners 0.064, background tiles 0.128, inset 0.01. */
  --frame: url("/assets/th/frame-tft.png"); --frame-c: 0.064; --frame-in: 0.33; --bg-size: 0.128;
  --panel-bg: url("/assets/th/bg-tft.webp");
  --cursor: url("/assets/th/human-cursor.png");
  --divider: url("/assets/th/tft-divider.png"); --divider-h: 20px;
  --accent: #8fb4ff; --ring-img: url("/assets/th/ring-human.png");
}
html[data-theme="human"] {
  --frame: url("/assets/th/frame-human.png"); --frame-in: 0.42;
  --panel-bg: url("/assets/th/bg-human.webp");
  --btn-bg: url("/assets/w3/blank-background.png"); --btn-hi: url("/assets/th/human-btn-hi.png");
  --cursor: url("/assets/th/human-cursor.png");
  --divider: url("/assets/th/human-divider.png"); --divider-h: 22px;
  --accent: #9cc4ff; --ring-img: url("/assets/th/ring-human.png");
}
html[data-theme="orc"] {
  --frame: url("/assets/th/frame-orc.png"); --frame-in: 0.53;
  --panel-bg: url("/assets/th/bg-orc.webp");
  --btn-bg: url("/assets/th/orc-btn-bg.webp"); --btn-hi: url("/assets/th/orc-btn-hi.png");
  --cursor: url("/assets/th/orc-cursor.png");
  --divider: url("/assets/th/orc-divider.png"); --divider-h: 24px;
  --accent: #ff8a3c; --ring-img: url("/assets/th/ring-orc.png");
}
html[data-theme="nightelf"] {
  --frame: url("/assets/th/frame-nightelf.png"); --frame-in: 0.59;
  --panel-bg: url("/assets/th/bg-nightelf.webp");
  --btn-bg: url("/assets/th/nightelf-btn-bg.webp"); --btn-hi: url("/assets/th/nightelf-btn-hi.png");
  --cursor: url("/assets/th/nightelf-cursor.png");
  --divider: url("/assets/th/nightelf-divider.png"); --divider-h: 26px;
  --accent: #7cf0c0; --ring-img: url("/assets/th/ring-nightelf.png");
}
html[data-theme="undead"] {
  --frame: url("/assets/th/frame-undead.png"); --frame-in: 0.61;
  --panel-bg: url("/assets/th/bg-undead.webp");
  --btn-bg: url("/assets/th/undead-btn-bg.webp"); --btn-hi: url("/assets/th/undead-btn-hi.png");
  --cursor: url("/assets/th/undead-cursor.png");
  --divider: url("/assets/th/undead-divider.png"); --divider-h: 24px;
  --accent: #a6ff5c; --ring-img: url("/assets/th/ring-undead.png");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; cursor: var(--cursor) 4 2, auto; scrollbar-color: #2d3f8f #050505; }
a, button, summary, [role="option"], label { cursor: var(--cursor) 4 2, pointer; }
body { margin: 0; color: var(--text); font: 400 1.0625rem/1.6 var(--font); overflow-x: hidden; background: #05070b; text-shadow: 0 1px 1px #000; }
img, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold); color: #000; text-shadow: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 90; padding: 8px 14px; background: #000; color: var(--gold); }
.skip:focus { top: 12px; }

/* The game's scrollbar. */
::-webkit-scrollbar { width: 18px; height: 18px; }
::-webkit-scrollbar-track { background: url("/assets/w3/GlueScreen-Scrollbar-BackdropBackground.png") repeat, #050505; box-shadow: inset 2px 0 0 #2a2a2a; }
::-webkit-scrollbar-thumb { background: url("/assets/w3/SinglePlayerSkirmish-ScrollBarKnob.png") center / 18px 18px no-repeat; min-height: 24px; }
::-webkit-scrollbar-button:single-button { display: block; height: 18px; width: 18px; background-color: #000; background-size: 18px 18px; background-repeat: no-repeat; }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("/assets/w3/GlueScreen-Scrollbar-UpArrow.png"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("/assets/w3/GlueScreen-Scrollbar-DownArrow.png"); }

/* ---- the scene behind everything -------------------------------------------------------------- */
/* The style's glue screen, drawn live (scene.js, scene-core.js) on a canvas under its cover: a still frame
   of the same 2:1 widescreen frame (poster.webp, over a blurred thumbnail of itself for the very first
   paint), cropped exactly as the live camera crops it. The cover lies over the canvas until the scene's
   first frame is on screen, then fades away; a style switch fades the next style's cover in over the
   running scene, and out again over the next scene's first frames. The page never shows a blank canvas.
   The crop: the head script sets --kx (portrait pages: how far the window moves across the frame per
   unit of --fx) and --ky (pages wider than 2:1: the same for the height and --fy). */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--scene-bg, #05070b); }
.scene__view { position: absolute; inset: -2%; will-change: transform; }
.scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__cover { position: absolute; inset: 0; will-change: opacity; transition: opacity 0.3s ease-out;
  --at: calc(50% + var(--fx, 0) * var(--kx, 0) * 100%) calc(50% - var(--fy, 0) * var(--ky, 0) * 100%);
  background: var(--poster) var(--at) / cover no-repeat, var(--lqip) var(--at) / cover no-repeat; }
.scene__cover--off { opacity: 0; transition: opacity 0.6s ease-in-out; }
.scene__shade { position: absolute; inset: 0; background: var(--shade); }
.scene__particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-live .scene__particles { display: none; }
html[data-theme="tft"] { --poster: url("/assets/scene/tft/poster.webp?v=3"); --fx: -0.3; --fy: 0.15; --scene-bg: #7f859b;
  --lqip: url("data:image/webp;base64,UklGRvQAAABXRUJQVlA4IOgAAAAwBgCdASowABgAPtFcpk6oJSMiJWzJABoJZQC+wAe5V3+jo2H3ayyGqhtmpvD4cV+DDjsijoWKUMXYAO/6+33hC/aRsjPA/nj9L0v6S1Y7Hm4jUDRbqjbDhvL2rJJG+Ej4n5EjGKO9mU1SjXHRe1P4/uXIrVT2RxQU+SczgcbxmYsEDHlMWRqGtKF1wq3gKbRhAdgU1NF/S2KQ4LtBPEKdDqO5toFKUQ4ulRsJSApnf+iCkvtwmE+lraAtL3GC2xVCNvPCgIsKp2rT+UPoDj3PfZ8qla66UhmpDaS4S7bU6JIde8DIwAAA"); }
html[data-theme="human"] { --poster: url("/assets/scene/human/poster.webp?v=3"); --fx: -0.45; --fy: 0.3; --scene-bg: #434d52;
  --lqip: url("data:image/webp;base64,UklGRpYBAABXRUJQVlA4IIoBAAAwBwCdASowABgAPtFao0woJSMiMBqoAQAaCWgAxQfUq5r3UEZk2a8fksDRbyZboUv4YzYIDq8VfhdSIYVasaLIvlgA/ustBEx0t8q0KQD8n+7ZdntlyxgIVT1NrPIJNZUOx4BYZ0vq7GbRU/CNVn6+Q6cxmY0OUgYgHr+Iz2aCFydrJKKv4EmjRhsqBlWTHtNNGWAOS7MmfqxcuSooP1lTCYlaUa7tyQDWrYNKNoSnU22u9mk56NB5E3RAl4yAwvtYF5pJ8OCzs7j1j2Qa5lYVF6xjByuir8yM7drai6Vn6wecc+1nztUIqQhoaI5Afp8Nictu3/o+98T7aKRUEvZ8CBb7J1gz+Ptr354hs+9UlENX5Id2L1FD6uSWG2D0a4LXrYJWMZFby62qMYSiEC8ins/Lkep39tDVVLLDlWQCFkpw4j+EZ3T0ZAwnMXhN79i2ylD0D9MSAlrCwavEcGyGEKYTRfjAuDFlmiBGFepEvzCdpNRp4cxKHOpVBSKPlKZOUc4HsFCmgAAA"); }
html[data-theme="orc"] { --poster: url("/assets/scene/orc/poster.webp?v=3"); --fx: -0.4; --fy: 0; --scene-bg: #4d2a10;
  --lqip: url("data:image/webp;base64,UklGRrIBAABXRUJQVlA4IKYBAACwBwCdASowABgAPtFUoUuoJKMhsAgBABoJbBYAVSycCPyUEdgRUAdkS5ebjiw4vYOgUpS6SuSOMqNews4ZsJu47QRpzeRAAP7qSZk1DvYlzLDYJijBOrd5z+S3lUXEg9LZbf1H/EkfeiWYtgVCQf9yNiI+TRD3M4dY+LOWmlSbDLf+gxbu4J5m/pqkJrxSL2kMtIUt1/wQr9SdKOoVBmcnNVbXdJDgeEZbddBtUi54twyk5SynXwbxCBVC7ioGuTE9lrqKeiofdmy6CZ3f8ZdBtJELd6mImuQ3R6SwSwrOJzHH58Z/zxf+Tkrdiuw4l1e/+wLXGZt1x+zPitq37JiWcVb0jJvcfPcL5KSZIzkKw4ljpBvaoO5FP5CAYu9vLcPNmjV+PrD2jkhBNsEW7ErSag192/gspP+2V8wXHBWa3XY9nfjJzoxDsTWe9cTswaVdguX2y0sRlMNk33G40Yx4Q+16FG6ju3zOaOFgnJFv5+a9mOCfZE0oxoWk/nljjLslLDs7hnwj+o7JFjFwWAq8qy6cXIZdj/ATnQx7K/8puEmqQsJAAA=="); }
html[data-theme="nightelf"] { --poster: url("/assets/scene/nightelf/poster.webp?v=3"); --fx: -0.36; --fy: -0.2; --scene-bg: #211f15;
  --lqip: url("data:image/webp;base64,UklGRsQAAABXRUJQVlA4ILgAAACQBgCdASowABgAPtFapk2oJKOiMBVYAQAaCWMAygBpYAkB71v42ynLxVhfesN5NFIDbpz6b58vlgzYxrAAAP7+FFY5BrhtUreiN4/yrMtnEWSTp+3Klhd+xXckvpdMIkFruT4eDd/hTVIlIicCCfGr1zBUi1TPrROjgF77j77hI0p3Zn+8P29mpZLD8M6QubjPzBQvWoYV3FM0bnrxvwQH91L37QKh0EKpq+wLRli9szo2bOAMqAAA"); }
html[data-theme="undead"] { --poster: url("/assets/scene/undead/poster.webp?v=3"); --fx: -0.45; --fy: 0; --scene-bg: #0f1a27;
  --lqip: url("data:image/webp;base64,UklGRrYAAABXRUJQVlA4IKoAAABwBgCdASowABgAPslMoEuno6MhtVgMAPAZCUAZALFoxkAD/qNe5DVLj8LyuYtTLB8Dn9kLXGnCn7N83gAA/vvcaLm4Uv/S95/8zeaQNi30H2H3ITsZXC6GRBN3SdBVTqLsoKOvT3+TpE07+P4gkVn5xn9g/4bkK9+8RisT77zAkuq+plYDAp5qSOV3iI06mfEuXwrSDDu56fwc0oKeM5XOfoOQhFaXTIAAAA=="); }

/* ---- text ---------------------------------------------------------------------------------- */
.title { margin: 0 0 16px; font: 400 clamp(1.8rem, 3.2vw, 2.55rem)/1.15 var(--font); color: var(--gold); text-shadow: 0 2px 2px #000; }
.title--center, .text--center { text-align: center; }
.text { margin: 0 0 22px; max-width: 36em; color: var(--text); }
.text--center { margin-left: auto; margin-right: auto; }
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.checks li { position: relative; padding-left: 36px; min-height: 24px; }
.checks li::before, .checks li::after { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; }
.checks li::before { background: url("/assets/w3/checkbox-background.png") center / 100% 100%; }
.checks li::after { background: url("/assets/w3/checkbox-check.png") center / 100% 100%; }

/* ---- buttons: the Frozen Throne's (a blue button in an iron frame with its spike), or the race's Esc menu button */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  font: 400 1.05rem/1 var(--font); color: var(--gold); text-decoration: none; text-shadow: 0 1px 1px #000; user-select: none; }
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.btn::after { z-index: -1; opacity: 0; transition: opacity 0.2s ease; mix-blend-mode: screen; }
.btn:hover { color: var(--white); }
.btn:hover::after { opacity: 1; }
/* The main menu's first button breathes with its own highlight (opacity only, on its own layer). */
.menu .btn--primary:not(:hover)::after { animation: breathe 2.6s ease-in-out 2s infinite; will-change: opacity; }
@keyframes breathe { 0%, 100% { opacity: 0; } 50% { opacity: 0.7; } }

/* The label sits in the middle of the blue body (the spike is the frame's left border). */
html[data-theme="tft"] .btn { height: 52px; padding: 0 16px; border-style: solid; border-width: 9px 6px 9px 53px;
  border-image: url("/assets/th/tft-btn-frame.png") 22 14 22 130 fill / 9px 6px 9px 53px stretch; }
html[data-theme="tft"] .btn::before { z-index: -2; border: 6px solid transparent;
  border-image: url("/assets/th/tft-btn-bevel.png") 32 / 6px stretch; background: url("/assets/th/tft-btn-bg.png") repeat padding-box; }
html[data-theme="tft"] .btn::after { background: url("/assets/th/tft-btn-glow.png") center / 100% 100% no-repeat; }
html[data-theme="tft"] .btn:active::before { border-image-source: url("/assets/th/tft-btn-bevel-down.png"); background-image: url("/assets/th/tft-btn-bg-down.png"); }
html[data-theme="tft"] .btn--tiny { height: 34px; padding: 0 14px; border: 0; border-image: none; font-size: 0.9rem; }

html:not([data-theme="tft"]) .btn { height: 48px; padding: 0 26px; border: 8px solid transparent;
  border-image: url("/assets/w3/human-options-button-border-up.png") 16 / 8px stretch; background: var(--btn-bg) center / 256px repeat padding-box, #000 padding-box; }
html:not([data-theme="tft"]) .btn::after { background: var(--btn-hi) center / 100% 100% no-repeat; }
html:not([data-theme="tft"]) .btn:active { border-image-source: url("/assets/w3/human-options-button-border-down.png"); }
html:not([data-theme="tft"]) .btn--tiny { height: 34px; padding: 0 12px; border-width: 6px; border-image-width: 6px; font-size: 0.9rem; }

/* ---- panels, hung on chains ----------------------------------------------------------------- */
/* A war3 backdrop as its FDF builds it: the background tiles from the inset (under the border's
   metal, so it meets the frame with no gap), the 8-piece edge file draws the frame over it, and the
   content starts right inside the metal. */
.panel { position: relative; isolation: isolate; box-sizing: border-box;
  /* At least the frame's two corners tall: the frame (::after) is never taller than its background. */
  min-height: calc(2 * var(--fc));
  --fc: calc(var(--frame-c) * var(--u)); --fi: calc(var(--bg-inset) * var(--u));
  border: var(--fi) solid transparent; background: var(--panel-bg) 0 0 / calc(var(--bg-size) * var(--u)) repeat padding-box;
  padding: calc(var(--fc) * var(--frame-in) - var(--fi) + var(--pad)); }
/* The panel's shadow, cast by a box a little inside the frame's outer edge: the frame's soft edge
   pixels then lie over shadow too, with no lighter seam between the two. */
.panel::before { content: ""; position: absolute; z-index: -1; inset: calc(3px - var(--fi)); pointer-events: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.panel::after { content: ""; position: absolute; z-index: 3; inset: calc(-1 * var(--fi)); pointer-events: none;
  border: var(--fc) solid transparent; border-image: var(--frame) 64 / var(--fc) round; }
/* The Frozen Throne's iron carries snow: the game's own pieces, laid out per panel by app.js over the
   frame and the shackles (the panel's hang box is its frame box). */
.snow { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.panel > .snow { inset: calc(-1 * var(--fi)); z-index: 4; }
html[data-theme="tft"] .snow { display: block; }
.snow__p { position: absolute; background: url("/assets/th/tft-snow.png?v=2") no-repeat; }

.hang { position: relative; width: min(var(--wrap), 100% - 32px); margin: 0 auto; transform-origin: 50% calc(-1 * var(--chain-gap)); --cx: min(250px, 28vw); --gap: var(--chain-gap); }
.hang--narrow { width: min(860px, 100% - 32px); }
.hang--wide { width: min(1024px, 100% - 32px); }

/* ---- chains ----------------------------------------------------------------------------------- */
/* The game's own chain and shackles from its glue menu panels (the Frozen Throne's MetalPieces for
   its style, the Reign of Chaos ones for the races; see th/chain-*.png). A hung panel's two chains
   run up to the shackles bolted under the panel above and end under them (the panels' backgrounds
   are translucent, as in the game, so a chain must not run on behind one), or, for the main menu, up
   behind the header the way the game's menu hangs from off-screen. */
:root {
  --chain: image-set(url("/assets/th/chain-roc.png") 1x, url("/assets/th/chain-roc@2x.png") 2x);
  --shackle: image-set(url("/assets/th/shackle-roc.png") 1x, url("/assets/th/shackle-roc@2x.png") 2x);
  --shackle-down: image-set(url("/assets/th/shackle-roc-down.png") 1x, url("/assets/th/shackle-roc-down@2x.png") 2x);
}
html[data-theme="tft"] {
  --chain: image-set(url("/assets/th/chain-tft.png") 1x, url("/assets/th/chain-tft@2x.png") 2x);
  --shackle: image-set(url("/assets/th/shackle-tft.png") 1x, url("/assets/th/shackle-tft@2x.png") 2x);
  --shackle-down: image-set(url("/assets/th/shackle-tft-down.png") 1x, url("/assets/th/shackle-tft-down@2x.png") 2x);
}
.hang--hung::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc(50% - var(--cx) - 12.5px); width: calc(2 * var(--cx) + 25px);
  bottom: calc(100% + 6px); height: calc(var(--gap) + 4px); background: var(--chain) left bottom / 25px 26px repeat-y, var(--chain) right bottom / 25px 26px repeat-y; }
.hang--hung::after, .hang--anchor::after { content: ""; position: absolute; z-index: 2; pointer-events: none; left: calc(50% - var(--cx) - 19.5px); width: calc(2 * var(--cx) + 39px); top: -18px; bottom: -18px;
  background: var(--top, none) left top / 39px 29px no-repeat, var(--top, none) right top / 39px 29px no-repeat,
    var(--bottom, none) left bottom / 39px 29px no-repeat, var(--bottom, none) right bottom / 39px 29px no-repeat; }
.hang--hung { --top: var(--shackle); }
.hang--anchor { --bottom: var(--shackle-down); }
/* The main menu's chains go up off the page, behind the header. */
.hang--top::before { height: 100vh; }
.hero__menu .hang { --cx: min(120px, 32%); --gap: 30px; }
.hero__menu .hang--top { z-index: 2; }
.hero__menu .hang--short { z-index: 1; }
/* Each section is painted over the next one, so a chain's upper end sits under the panel above. */
/* Layout containment: a question opening or a panel animating re-lays out its own section only. */
main > section { position: relative; contain: layout style; }
main > section:nth-child(1) { z-index: 9; }
main > section:nth-child(2) { z-index: 8; }
main > section:nth-child(3) { z-index: 7; }
main > section:nth-child(4) { z-index: 6; }
main > section:nth-child(5) { z-index: 5; }
main > section:nth-child(6) { z-index: 4; }
main > section:nth-child(7) { z-index: 3; }
main > section:nth-child(8) { z-index: 2; }

/* ---- the top bar: an iron rail across the screen -------------------------------------------------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; --bar-h: 62px; }
.bar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(3, 4, 7, 0.55), rgba(3, 4, 7, 0.55)), var(--panel-bg) 0 0 / calc(var(--bg-size) * var(--u)) repeat, #05070b; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--divider-h); background: var(--divider) left top / auto var(--divider-h) repeat-x; pointer-events: none; }
.bar__inner { position: relative; z-index: 4; width: min(1240px, 100% - 32px); margin: 0 auto; height: var(--bar-h); display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; margin-right: auto; color: var(--white); text-decoration: none; font: 400 1.45rem/1 var(--font); }
.brand__mark { width: 26px; height: 26px; fill: var(--gold); }
.bar__nav { display: flex; gap: 6px; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.bar--solid .bar__nav { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
@media (max-width: 1300px) { .bar__nav { display: none; } }

.pulldown { position: relative; flex: none; z-index: 5; }
.pulldown__button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; font: 400 0.95rem/1 var(--font); color: var(--white); text-shadow: 0 1px 1px #000; transition: color 0.2s ease;
  border: 8px solid transparent; border-image: url("/assets/th/esc-border.png") 16 / calc(0.0125 * 40px / 0.03) stretch; background: var(--btn-bg) center / 256px repeat padding-box, #000 padding-box; }
.pulldown__button::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--btn-hi) center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: 0; transition: opacity 0.2s ease; }
.pulldown__button:hover, .pulldown__button[aria-expanded="true"] { color: var(--gold); }
.pulldown__button:hover::after, .pulldown__button[aria-expanded="true"]::after { opacity: 1; }
/* The Frozen Throne's glue popup: StandardPopupMenuTemplate's button and its bordered menu. */
html[data-theme="tft"] .pulldown__button { border-width: 10px; border-image: url("/assets/th/tft-pd-border.png") 32 / calc(0.016 * 40px / 0.03) stretch; background: url("/assets/th/tft-pd-bg.png") 0 0 / 32px repeat padding-box, #040719 padding-box; }
html[data-theme="tft"] .pulldown__button::after { background-image: url("/assets/th/tft-pd-hi.png"); }
.pulldown__race { width: 32px; height: 19px; flex: none; }
.pulldown__arrow { width: 14px; height: 14px; flex: none; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pulldown__button[aria-expanded="true"] .pulldown__arrow { transform: rotate(180deg); }
/* The open list, as the game builds its popup menus (FDF MENU): the races' Esc menu one
   (EscMenuPopupMenuMenuTemplate: EscMenuButtonBackdropTemplate's edge, human-options-button-border-up,
   corners 0.0125, the edit box background tiled 0.256 from inset 0.005, items 0.009 in from the edge,
   the hovered item's text red), the Frozen Throne's glue one (StandardPopupMenuMenuTemplate: the
   bordered button backdrop, GlueScreen-Button1-BorderedBackdropBorder, corners 0.016, its background
   tiled 0.032 from inset 0.004, the hovered item's text gold). Sized like the button it drops from: the
   game's 0.03 popup is 40px here, so --k is the game's screen height at that scale. */
/* As wide as its longest label with its icon and the frame's insets, whatever the style, language or
   font (never clipped under the frame), within the screen (app.js moves it in if it would leave it). */
.pulldown__list { position: absolute; z-index: 60; right: 0; top: calc(100% + 2px); width: max-content; min-width: 100%; max-width: calc(100vw - 16px); margin: 0; list-style: none; transform-origin: 100% 0;
  --k: calc(40px / 0.03); --pc: calc(0.0125 * var(--k)); --pi: calc(0.005 * var(--k));
  border: var(--pi) solid transparent; padding: calc(0.009 * var(--k) - var(--pi));
  background: url("/assets/w3/editbox-background.png") 0 0 / calc(0.256 * var(--k)) repeat padding-box, #000 padding-box; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65); }
.pulldown__list::after { content: ""; position: absolute; inset: calc(-1 * var(--pi)); pointer-events: none;
  border: var(--pc) solid transparent; border-image: url("/assets/th/esc-border.png") 16 / var(--pc) stretch; }
html[data-theme="tft"] .pulldown__list { --pc: calc(0.016 * var(--k)); --pi: calc(0.004 * var(--k));
  background: url("/assets/th/tft-pd-bg.png") 0 0 / calc(0.032 * var(--k)) repeat padding-box, #040719 padding-box; }
html[data-theme="tft"] .pulldown__list::after { border-image-source: url("/assets/th/tft-pd-menu-border.png"); border-image-slice: 32; }
.pulldown__list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 10px; color: var(--white); white-space: nowrap; outline: none; transition: color 0.18s ease; }
.pulldown__list { outline: none; }
.pulldown__list li:focus { color: #ff0000; }
html[data-theme="tft"] .pulldown__list li:focus { color: #fcd312; }
.pulldown__list li img { width: 32px; height: 19px; flex: none; }
.pulldown__list li span { flex: none; }
@media (max-width: 600px) { .pulldown:not(.pulldown--lang) [data-pulldown-current] { display: none; } }
/* The narrowest phones: the crest's mark alone (the hero says "Spectre" right below), tighter controls. */
@media (max-width: 359px) {
  .bar__inner { gap: 8px; }
  .brand span { display: none; }
  .pulldown__button { gap: 6px; padding: 0 4px; }
}

.res { display: flex; flex: none; align-items: center; gap: 14px; margin: 0 4px 0 0; padding: 0; list-style: none; }
.res__item { display: inline-flex; align-items: center; gap: 6px; color: var(--white); outline-offset: 4px; }
.res__item img { width: 20px; height: 20px; }
.res__item--upkeep { color: #00ff00; font-size: 0.92rem; }
@media (max-width: 1440px) { .res__item--upkeep { display: none; } }
@media (max-width: 720px) { .res { display: none; } }

/* ---- hero: the main menu ----------------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; width: min(1240px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: center; padding: 90px 0 60px; }
.hero__text { max-width: 640px; }
.crest { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.crest__mark { width: 72px; height: 72px; fill: var(--gold); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 18px rgba(252, 211, 18, 0.25)); }
.crest__word { font: 400 4rem/1 var(--font); color: var(--gold); text-shadow: 0 3px 3px #000, 0 0 30px rgba(252, 211, 18, 0.25); }
.hero__kicker { margin: 0 0 12px; color: var(--gold); font-size: 1.05rem; }
.hero__title { margin: 0; font: 400 clamp(2rem, 4.2vw + 0.9rem, 4.2rem)/1.06 var(--font); overflow-wrap: break-word; hyphens: auto; color: var(--white); text-wrap: balance; text-shadow: 0 3px 4px #000, 0 0 40px rgba(0, 0, 0, 0.7); }
.hero__lead { margin: 22px 0 0; max-width: 32em; font-size: clamp(1.05rem, 1.3vw, 1.18rem); color: #f1eee6; text-shadow: 0 2px 3px #000, 0 0 20px rgba(0, 0, 0, 0.8); }
.hero__menu { align-self: start; padding-top: 70px; display: grid; gap: 30px; }
.menu { display: flex; flex-direction: column; gap: 10px; --pad: 10px; }
.menu .btn { width: 100%; }
.menu--small { --pad: 6px; justify-content: center; }
@media (max-width: 480px) {
  :root { --u: 460px; --pad: 10px; }
  .hang { width: calc(100% - 16px); }
  .hero__menu .hang { width: 100%; }
  /* Long labels ("Download the launcher") wrap instead of pushing the page sideways. */
  html[data-theme] .btn--menu { white-space: normal; height: auto; min-height: 48px; padding-top: 6px; padding-bottom: 6px; line-height: 1.15; }
  html[data-theme="tft"] .btn--menu { min-height: 52px; }
}
.menu__meta { margin: 0; text-align: center; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  /* One column: the menu sits under the title, with nothing above it to hang from. */
  .hang--top::before { display: none; }
  .hang--top { --top: none; }
  .hero { padding-top: 110px; }
  .hero__menu { padding-top: 40px; width: min(420px, 100%); justify-self: center; }
  .crest__word { font-size: 3rem; }
}

/* ---- sections --------------------------------------------------------------------------------- */
.section { padding-top: var(--chain-gap); scroll-margin-top: 80px; }
.section--last { padding-bottom: 90px; }
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(26px, 4vw, 54px); align-items: center; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
/* A screenshot in the style's frame, at two thirds of a panel's: the picture starts where the metal ends. */
.shot { --fc: calc(var(--frame-c) * var(--u) * 0.66); margin: 0; background: #000 padding-box; border: calc(var(--fc) * var(--frame-in)) solid transparent;
  border-image: var(--frame) 64 / var(--fc) round; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); }
.shot img { width: 100%; }

.features { list-style: none; margin: 34px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 36px; }
@media (max-width: 940px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .features { grid-template-columns: 1fr; } }
.feature { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.feature__cast { position: relative; width: 56px; height: 56px; }
/* The command button as on the console: the icon's own bevel, and the game's active-button glow on hover. */
.feature__icon { width: 56px; height: 56px; box-shadow: 0 0 0 1px #000; transition: filter 0.2s ease; }
.feature__cast::before { content: ""; position: absolute; z-index: 1; inset: -3px; pointer-events: none; background: url("/assets/w3/human-activebutton.png") center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: 0; transition: opacity 0.2s ease; }
.feature:hover .feature__icon { filter: brightness(1.15); }
.feature:hover .feature__cast::before { opacity: 1; }
.feature__title { margin: 0 0 4px; font: 400 1.15rem/1.25 var(--font); color: var(--gold); }
.feature__text { margin: 0; font-size: 0.98rem; }
@property --cd { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.feature__cast::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: conic-gradient(rgba(0, 0, 0, 0.72) var(--cd), transparent 0); }
.feature__cast--cd::after { opacity: 1; animation: cooldown 2.4s linear forwards; }
@keyframes cooldown { from { --cd: 360deg; } to { --cd: 0deg; } }
.spark { position: absolute; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; left: 0; top: 0; opacity: 0; pointer-events: none;
  background: url("/assets/w3/GlowStar.png") center / contain no-repeat; mix-blend-mode: screen; }
.feature:hover .spark { opacity: 1; animation: orbit 1.6s linear infinite; }
.feature:hover .spark:nth-child(3) { animation-delay: -0.4s; }
.feature:hover .spark:nth-child(4) { animation-delay: -0.8s; }
.feature:hover .spark:nth-child(5) { animation-delay: -1.2s; }
/* Round the icon's edge (56 px) on transforms only. */
@keyframes orbit { 0% { transform: translate(0, 0); } 25% { transform: translate(56px, 0); } 50% { transform: translate(56px, 56px); } 75% { transform: translate(0, 56px); } 100% { transform: translate(0, 0); } }

.voice__shots { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: end; }
.shot--game { position: relative; z-index: 2; margin-right: -60px; }
.shot--mic { margin-bottom: -30px; }
@media (max-width: 940px) { .voice__shots { grid-template-columns: 1fr; gap: 22px; } .shot--game { margin-right: 0; max-width: 420px; } .shot--mic { margin-bottom: 0; } }

/* The comparison on the score screen's parchment (cropped to the parchment: its two left tabs and the
   metal at its right edge taken out), in the style's own frame like any panel. */
.score { --pad: 0px; }
.score__sheet { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 931 / 768; background: url("/assets/w3/scorescreen-sheet.webp") center / 100% 100% no-repeat; }
.score__title { position: absolute; left: 0; right: 4.4%; top: 1.6%; margin: 0; text-align: center; font: 400 max(16px, calc(26 / 931 * 100cqw))/1 var(--font); color: var(--gold); text-shadow: 0 2px 2px #000, 0 0 12px #000; }
.score__table { position: absolute; left: 2%; top: 13.28%; width: 92.1%; border-collapse: collapse; table-layout: fixed; }
.score__table thead th { height: calc(28 / 931 * 100cqw); padding: 0; white-space: nowrap; font: 400 max(11px, calc(14 / 931 * 100cqw))/1 var(--font); color: var(--gold); text-align: center; }
.score__table thead th:first-child { width: 51%; }
.score__table thead .score__us { color: #fff3a8; }
.score__table tbody th, .score__table tbody td { padding: calc(13 / 931 * 100cqw) 8px; vertical-align: middle; color: var(--ink); text-shadow: none; border-bottom: 1px solid rgba(70, 40, 10, 0.22);
  font-size: max(12px, calc(15.5 / 931 * 100cqw)); line-height: 1.3; }
.score__table tbody th { padding-left: 22px; text-align: left; font: 400 max(13px, calc(18 / 931 * 100cqw))/1.3 var(--font); color: #3b230a; }
.score__table tbody td { text-align: center; }
.score__table tbody td.good { color: #1f5a10; font-weight: 700; }
.score__table tbody tr:last-child th, .score__table tbody tr:last-child td { border-bottom: 0; }
.score__table tbody tr { transition: background 0.15s ease; }
.score__table tbody tr:hover { background: rgba(120, 70, 10, 0.1); }
.score__note { position: absolute; left: 0; right: 7.8%; bottom: 10.5%; margin: 0; text-align: center; font-size: max(11px, calc(13 / 931 * 100cqw)); color: #5a3e1a; text-shadow: none; }
@media (max-width: 900px) {
  .score__sheet { aspect-ratio: auto; padding: 18px 16px; background: url("/assets/w3/scorescreen-sheet.webp") 30% 60% / 1500px auto no-repeat, #c9b28a; }
  .score__title, .score__note { position: static; margin: 0 0 12px; font-size: 1.4rem; }
  .score__note { margin: 12px 0 0; font-size: 0.85rem; }
  .score__table, .score__table tbody, .score__table tr, .score__table th, .score__table td { display: block; position: static; width: 100%; }
  .score__table thead { display: none; }
  .score__table tbody tr { padding: 12px 0; border-bottom: 1px solid rgba(70, 40, 10, 0.25); }
  .score__table tbody tr:last-child { border-bottom: 0; }
  .score__table tbody th { padding: 0 0 6px; border: 0; font-size: 1.15rem; }
  .score__table tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; font-size: 0.95rem; }
  .score__table tbody td::before { content: attr(data-label); color: #6a4a1c; text-align: left; flex: none; }
}

.quests__title { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 400 1.9rem/1.1 var(--font); color: var(--gold); }
.quests__title img { width: 40px; height: 40px; }
.quests__list { margin: 0; padding: 0 0 0 54px; display: grid; gap: 16px; }
.quests__list li::marker { color: var(--gold); font-size: 1.2rem; }
.quests__list h3 { margin: 0 0 2px; font: 400 1.2rem/1.3 var(--font); color: var(--white); }
.quests__list p { margin: 0; }
.quests__cta { margin: 28px 0 0 54px; }
@media (max-width: 580px) { .quests__list { padding-left: 28px; } .quests__cta { margin-left: 0; width: 100%; } }

.faq { margin-top: 18px; }
.qa { border-bottom: 1px solid rgba(252, 211, 18, 0.14); }
.qa:last-child { border-bottom: 0; }
.qa summary { display: flex; align-items: center; gap: 14px; padding: 15px 0; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa__icon { width: 28px; height: 28px; flex: none; box-shadow: 0 0 0 1px #000; }
.qa__q { flex: 1; font: 400 1.1rem/1.3 var(--font); color: var(--gold); }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; background: url("/assets/w3/GlueScreen-Pulldown-Arrow.png") center / contain no-repeat; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.qa--open summary::after { transform: rotate(180deg); }
.qa__q { transition: color 0.2s ease; }
.qa summary:hover .qa__q { color: var(--white); }
.qa__a { overflow: hidden; }
.qa__a p { margin: 0; padding: 0 0 16px 42px; max-width: 44em; }

.final { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; }
.final__hero { position: relative; justify-self: center; width: min(360px, 100%); }
/* The hero (its shadow baked into the picture) stands on the selection circle: the circle lies behind
   him, flat on the ground, and only turns (a pre-coloured, pre-glowed picture on its own layer). */
/* All three motions are compositor-only (transform, opacity) on their own layers: a slow, small float
   (sub-pixel steps, never snapped to whole pixels), the circle's slow turn and a soft pulse of its glow. */
.final__art { position: relative; z-index: 1; width: 100%; animation: float 6s ease-in-out infinite; will-change: transform; }
@keyframes float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
[data-away] .final__art, [data-away] .selection span, [data-away] .ping, [data-away] .btn--primary::after { animation-play-state: paused; }
.selection { position: absolute; z-index: 0; left: 47%; bottom: -14%; width: 74%; aspect-ratio: 1; transform: translateX(-50%) perspective(900px) rotateX(76deg); opacity: 0.9; pointer-events: none; }
.selection span { position: absolute; inset: -6.25%; background: var(--ring-img) center / 100% 100% no-repeat; animation: spin 24s linear infinite, pulse 3s ease-in-out infinite; will-change: transform, opacity; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.pinged { position: relative; display: inline-block; }
.ping { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; pointer-events: none; opacity: 0; z-index: -1;
  background: url("/assets/th/ping-gold.png") center / contain no-repeat; animation: ping 2.8s ease-out infinite; will-change: transform, opacity; }
.ping--late { animation-delay: 1.4s; }
@keyframes ping { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
@media (max-width: 760px) { .final { grid-template-columns: minmax(0, 1fr); text-align: center; } .final .text { margin-left: auto; margin-right: auto; } .final__hero { width: 240px; } }

/* ---- footer ---------------------------------------------------------------------------------- */
.foot { position: relative; padding: 44px 0 40px; background: rgba(4, 5, 8, 0.92); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--divider-h); background: var(--divider) left top / auto var(--divider-h) repeat-x; }
.foot__inner { width: min(1240px, 100% - 32px); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; }
.foot .brand { margin-right: 0; }
.foot__legal { margin: 0; max-width: 48em; color: #8a867c; font-size: 0.85rem; }

/* ---- war3 bits: tooltip, bounty, quest message ----------------------------------------------- */
.w3tip { position: fixed; z-index: 70; left: 0; top: 0; max-width: 280px; padding: 8px 10px; pointer-events: none; transform-origin: 50% 0;
  background: url("/assets/w3/human-tooltip-background.png") repeat padding-box, rgba(0, 0, 0, 0.92) padding-box; border: 6px solid transparent; border-image: url("/assets/w3/human-tooltip-border.png") 16 / 6px stretch; }
.w3tip strong { display: block; color: var(--gold); font-weight: 400; margin-bottom: 2px; }
.w3tip span { color: var(--white); font-size: 0.92rem; line-height: 1.4; }
.bounty { position: absolute; z-index: 80; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); pointer-events: none;
  color: var(--gold); font: 400 1.25rem/1 var(--font); text-shadow: 0 1px 2px #000; animation: bounty 1.6s ease-out forwards; }
.bounty img { width: 16px; height: 16px; }
@keyframes bounty { from { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -70px); } }
.quest-msg { position: fixed; z-index: 60; left: max(16px, 3vw); top: 38%; display: flex; align-items: center; gap: 12px; transition: opacity 1s ease; }
.quest-msg[hidden] { display: none; }
.quest-msg img { width: 36px; height: 36px; }
.quest-msg__kind { display: block; color: var(--gold); font-size: 0.95rem; }
.quest-msg__name { display: block; color: var(--white); font-size: 1.4rem; text-shadow: 0 2px 3px #000; }
.quest-msg--out { opacity: 0; }
/* Where the panels take the whole width, the quest message comes in under the bar on its own backdrop
   (the game's tooltip frame) instead of over a panel's text. */
@media (max-width: 1300px) {
  .quest-msg { left: 16px; right: 16px; top: calc(var(--bar-h, 62px) + 34px); width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 6px 14px 6px 8px;
    border: 6px solid transparent; border-image: url("/assets/th/tooltip-border.png") 16 / 6px stretch;
    background: url("/assets/w3/human-tooltip-background.png") 0 0 / 64px repeat padding-box, rgba(0, 0, 0, 0.92) padding-box; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6); }
  .quest-msg__name { font-size: 1.15rem; }
}

/* Motion (fx.js) starts these hidden and brings them in; without it they simply show. */
.fx [data-hero], .fx [data-hang], .fx .bar__inner { opacity: 0; }

/* ---- the ladder and a player's page (stats.js) -------------------------------------------------- */
/* Their bar keeps its two links at every width; the panel's chains go up behind it. */
@media (max-width: 1300px) { body[data-page] .bar__nav { display: flex; } }
@media (max-width: 520px) { body[data-page] .bar__nav .btn:first-child { display: none; } }
@media (max-width: 440px) { body[data-page] .bar__nav { display: none; } }
.bar__nav .btn[aria-current="page"] { color: var(--gold); }
.section--page { padding-top: calc(var(--bar-h, 62px) + 64px); }
.subtitle { margin: 26px 0 12px; font: 400 1.35rem/1.2 var(--font); color: var(--gold); }
.note { margin: 10px 0; color: var(--muted); }
.note[hidden] { display: none; }
.note--bad { color: #ff6b5b; }
.note .btn { margin-left: 8px; vertical-align: middle; }
.good { color: #3fe05a; }
.bad { color: #ff5a4a; }
.even { color: var(--muted); }

/* The game's edit box: its own backdrop tile in the tooltip's iron edge, a gold caret. */
.editbox { box-sizing: border-box; height: 40px; min-width: 0; padding: 0 12px; color: var(--white); caret-color: var(--gold); font: 400 1rem/1 var(--font); text-shadow: 0 1px 1px #000;
  border: 6px solid transparent; border-image: url("/assets/th/tooltip-border.png") 16 / 6px stretch;
  background: url("/assets/w3/editbox-background.png") 0 0 / 64px repeat padding-box, #000 padding-box; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; }
.editbox::placeholder { color: #8d8a80; }
.editbox:focus { box-shadow: 0 0 0 1px rgba(252, 211, 18, 0.55), 0 0 12px rgba(252, 211, 18, 0.25); }
.editbox::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }

.board__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; }
.board__head .text { margin-bottom: 8px; }
.search { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex: 0 1 360px; }
.search .editbox { flex: 1; }
.board__wrap { min-height: 120px; transition: opacity 0.2s ease; }
.board__wrap--busy { opacity: 0.55; }
.board__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board__table thead th { padding: 9px 10px; font: 400 0.95rem/1 var(--font); color: var(--gold); text-align: center; white-space: nowrap;
  background: rgba(0, 0, 0, 0.5); border-bottom: 2px solid rgba(252, 211, 18, 0.4); }
.board__table td, .board__table tbody th { padding: 7px 10px; text-align: center; border-bottom: 1px solid rgba(252, 211, 18, 0.12); }
.board__table .c-name { text-align: left; font-weight: 400; width: 46%; }
.board__table thead .c-name { text-align: left; }
.board__table .c-place { width: 3.2em; color: var(--muted); }
.board__table tbody tr { cursor: var(--cursor) 4 2, pointer; transition: background 0.15s ease; }
.board__table tbody tr:hover { background: url("/assets/w3/scorescreen-tab-hilight.png") center / 100% 100% no-repeat; }
.board__table tbody tr:nth-child(-n+3) .c-place { color: var(--gold); }
.c-pts { color: var(--white); }
.plink { color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.plink:hover, .plink:focus-visible { color: var(--gold); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.pager[hidden] { display: none; }
.pager__at { color: var(--muted); font-variant-numeric: tabular-nums; }
.btn:disabled { opacity: 0.45; pointer-events: none; }
@media (max-width: 640px) {
  .board__table .c-games, .board__table .c-wl { display: none; }
  .board__table td, .board__table tbody th { padding: 7px 5px; }
  .board__table thead th { padding: 8px 5px; font-size: 0.85rem; }
  .search { flex-basis: 100%; }
}

/* A rank as the launcher draws it: the letter on a dark plate, in its tier's colour. */
.rank { display: inline-grid; place-items: center; min-width: 2.1em; height: 1.75em; padding: 0 4px; box-sizing: border-box; font: 400 1rem/1 var(--font); color: #c9c9c9;
  background: linear-gradient(#1b1d22, #07080a); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(252, 211, 18, 0.35), 0 1px 2px #000; text-shadow: 0 1px 1px #000; }
.rank[data-tier="D"] { color: #b9bcc0; }
.rank[data-tier="C"] { color: #e8a060; }
.rank[data-tier="B"] { color: #eef3fa; }
.rank[data-tier="A"] { color: #ffcc00; }
.rank[data-tier="S"] { color: #ffffff; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #fcd312, 0 0 10px rgba(252, 211, 18, 0.45); }

/* Hero and item icons: the command button's black edge; war3's "?" while one loads or has none. */
.icon { position: relative; display: inline-block; flex: none; width: 40px; height: 40px; background: #050608 url("/assets/w3/quest-unknown.png") center / 60% no-repeat; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.icon img { width: 100%; height: 100%; opacity: 0; transition: opacity 0.25s ease; }
.icon--in { background-image: none; }
.icon--in img { opacity: 1; }
.icon--empty { background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.8); }
.icon--item { width: 32px; height: 32px; }
.icon--big { width: 72px; height: 72px; box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(252, 211, 18, 0.35), 0 6px 14px rgba(0, 0, 0, 0.6); }
.icon--big:empty { display: none; }
.icon--big:not(:empty) { background: none; }
.icon--big > .icon { width: 100%; height: 100%; box-shadow: none; }

.back { display: inline-block; margin-bottom: 10px; color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.back::before { content: "\2039  "; }
.back:hover { color: var(--gold); }
.player__head { display: flex; align-items: center; gap: 18px; }
.player__name { margin: 0; overflow-wrap: anywhere; }
.player__rank { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 0; }
.player__rank:empty { display: none; }
.player__pts { color: var(--white); font-size: 1.1rem; }
.player__place { color: var(--muted); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; margin: 22px 0 0; }
.figure { margin: 0; padding: 10px 12px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(252, 211, 18, 0.14); }
.figure__label { color: var(--muted); font-size: 0.85rem; }
.figure__value { margin: 2px 0 0; font: 400 1.35rem/1.2 var(--font); color: var(--white); font-variant-numeric: tabular-nums; }
.figure__value.good { color: #3fe05a; }
.figure__value.bad { color: #ff5a4a; }
.heroes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
.hero-stat { display: flex; align-items: center; gap: 12px; }
.hero-stat .icon { width: 48px; height: 48px; }
.hero-stat__text { display: grid; min-width: 0; }
.hero-stat__name { color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-stat__line { color: var(--muted); font-size: 0.88rem; }

.matches { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.match { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 6.5em auto 9.5em; align-items: center; gap: 14px; padding: 8px 12px 8px 14px;
  background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.match::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--muted); }
.match--win::before { background: #3fe05a; }
.match--loss::before { background: #ff5a4a; }
.match > .icon { width: 48px; height: 48px; }
.match__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.match__hero { color: var(--gold); font-size: 1.05rem; }
.match__result { font-size: 0.9rem; color: var(--muted); }
.match--win .match__result { color: #3fe05a; }
.match--loss .match__result { color: #ff5a4a; }
.match__meta { display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--muted); font-size: 0.85rem; }
.match__meta span { overflow-wrap: anywhere; }
.match__kda { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); text-align: center; }
.match__kda b { font-weight: 400; color: var(--white); }
.match__kda .k { color: #3fe05a; }
.match__kda .d { color: #ff5a4a; }
.match__items { display: grid; grid-template-columns: repeat(6, 32px); gap: 3px; }
.match__side { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.match__pts { min-width: 2.6em; text-align: right; font: 400 1.05rem/1 var(--font); font-variant-numeric: tabular-nums; }
.history__more { display: flex; justify-content: center; margin-top: 14px; }
.history__more .btn[hidden] { display: none; }
@media (max-width: 860px) {
  .match { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "icon main main" "kda kda side" "items items items"; gap: 6px 12px; }
  .match > .icon { grid-area: icon; align-self: start; }
  .match__main { grid-area: main; }
  .match__side { grid-area: side; }
  .match__kda { grid-area: kda; text-align: left; }
  .match__side { justify-content: flex-end; }
  .match__items { grid-area: items; grid-template-columns: repeat(6, minmax(0, 36px)); }
  .match__items .icon { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (max-width: 480px) { .player__head { gap: 12px; } .icon--big { width: 56px; height: 56px; } .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.note > .note { margin: 0; }
.live__stamp { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.live__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--white); }
.live__hint[hidden] { display: none; }
.live__count { color: var(--muted); font-size: 1rem; }
.live__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.live__list[aria-busy="true"]:empty { min-height: 60px; }
.live__item { position: relative; display: grid; gap: 8px; padding: 10px 12px 10px 14px; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.live__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); opacity: 0.6; }
.live__item--lobby::before { background: var(--muted); }
.live__item--sentinel::before { background: #3fe05a; opacity: 1; }
.live__item--scourge::before { background: #ff5a4a; opacity: 1; }
.live__empty { padding: 10px 0; color: var(--muted); }
.live__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.live__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.live__name { color: var(--gold); font-size: 1.05rem; overflow-wrap: anywhere; }
.live__map { color: var(--white); font-size: 0.9rem; overflow-wrap: anywhere; }
.live__meta { display: flex; flex-wrap: wrap; gap: 0 12px; flex-basis: 100%; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.live__clock { color: var(--white); }
.live__item--sentinel .live__result { color: #3fe05a; }
.live__item--scourge .live__result { color: #ff5a4a; }
.live__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.live__soon { opacity: 0.6; cursor: default; }
.live__noreplay { color: var(--muted); font-size: 0.85rem; }
.live__teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; }
.live__team-name { margin-bottom: 4px; color: var(--gold); font-size: 0.85rem; }
.live__team--obs .live__team-name { color: var(--muted); }
.live__players { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.live__players--inline { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.live__player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live__player .icon { width: 28px; height: 28px; }
.live__swatch { flex: none; width: 12px; height: 12px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.live__swatch--none { background: rgba(255, 255, 255, 0.15); }
.live__kda { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .live__item { padding: 8px 10px 8px 12px; }
  .live__actions { flex-basis: 100%; }
  .live__actions .btn { flex: 1; }
  .live__teams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .live__team--obs { grid-column: 1 / -1; }
  .live__teams--stats { grid-template-columns: minmax(0, 1fr); }
  .live__player { gap: 6px; }
  .live__player .plink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  .live__kda { padding-left: 4px; font-size: 0.78rem; }
  .live__player .icon { width: 24px; height: 24px; }
}