/* ==========================================================================
   Professor Dynamo — shared style system
   Direction: a visitor's guide to the inhouse, after Deadlock's
   "The City Never Sleeps". Warm charcoal streets, one colour per subway
   line (section), pill signs as page titles, slanted stickers, numbered
   stops, framed photos, kraft notes with tape, white chalk scribbles and
   chunky poster lettering.

   Every class and id the scripts rely on is kept; old token names are
   remapped onto the new palette so nothing downstream breaks.
   ========================================================================== */

/* Valve's Deadlock faces, as on playdeadlock.com. The license allows them in
   fan art. Every weight maps to the one cut, so nothing gets synthetic bold. */
@font-face { font-family: "Pulp"; src: url("../assets/fonts/VALVEPulp-Bold.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Oracle"; src: url("../assets/fonts/VALVEOracle-Medium.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Oracle"; src: url("../assets/fonts/VALVEOracle-SemiBold.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

:root {
    /* Ink: warm charcoal, never blue-black */
    --ink-0: #0E0D0C;
    --ink-1: #141312;
    --ink-2: #1C1A19;
    --ink-3: #252220;
    --ink-4: #302C29;
    --ink-5: #3B3632;
    --night: #0B0A09;

    /* Paper */
    --paper: #F2ECE2;
    --paper-2: #BDB5A8;
    --paper-3: #958E82;
    --frame: #E8E1D4;
    --kraft: #D3B07E;
    --kraft-ink: #3B2A16;
    --tape: rgba(244, 233, 206, 0.62);
    --on-color: #140F0B;

    /* Lines: every section is a subway line with its own colour */
    --line-a: #F0642D;
    --line-t: #A57BFF;
    --line-l: #F4C430;
    --line-m: #7ED957;
    --line-r: #34C6D3;
    --line-b: #FF7A9A;
    --line-s: #B9B2A5;
    --line-d: #5B9BE6;

    /* Sides and signals */
    --hk: #F5A623;          /* Hidden King */
    --am: #4FA3FF;          /* Archmother */
    --sapphire: #4FA3FF;
    --win: #7ED957;
    --loss: #EF4F5A;

    /* Shop slots */
    --slot-weapon: #F29A3A;
    --slot-vitality: #6CD08B;
    --slot-spirit: #B58CFF;

    /* Tournament teams */
    --team-red: #E8624C;
    --team-blue: #5B9BE6;
    --team-green: #8CC35A;
    --team-yellow: #F2C94C;
    --team-purple: #B58CFF;
    --team-orange: #F29A3A;

    --hair: rgba(242, 236, 226, 0.1);
    --hair-strong: rgba(242, 236, 226, 0.22);
    --focus: #F2ECE2;

    /* Legacy names, remapped so older markup and scripts keep working */
    --ink-900: var(--ink-1);
    --ink-800: var(--ink-2);
    --ink-700: var(--ink-3);
    --ink-600: var(--ink-4);
    --ink-500: var(--ink-5);
    --ink-black: var(--night);
    --brass-line: var(--hair);
    --brass-soft: #6E675F;
    --brass-bright: var(--paper-3);
    --paper-dim: var(--paper-2);
    --paper-faint: var(--paper-3);
    --amber: var(--hk);
    --amber-deep: #B87A12;
    --amber-wash: rgba(245, 166, 35, 0.12);
    --oxblood: var(--am);
    --oxblood-deep: #2F6BB0;
    --oxblood-wash: rgba(79, 163, 255, 0.12);
    --danger: var(--loss);
    --success: var(--win);
    --caption: var(--frame);
    --ink-line: 2px solid var(--night);
    --edge: 1.5px solid var(--hair-strong);
    --hard: 3px 3px 0 var(--night);
    --hard-lg: 5px 5px 0 var(--night);
    --halftone: radial-gradient(circle, rgba(255, 240, 220, 0.05) 1px, transparent 1.5px) 0 0 / 7px 7px;

    /* The current line; pages switch it through body[data-line] */
    --d: var(--line-a);

    /* Type */
    --f-poster: "Pulp", "Arial Black", "Segoe UI Black", system-ui, sans-serif;
    --f-head: "Oracle", "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-body: "Jost", "Oracle", "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-cond: "Fira Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --f-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
    --font-display: var(--f-head);
    --font-body: var(--f-body);

    --gap: 16px;
    --radius: 3px;
    --radius-pill: 999px;
    --wrap: 1180px;
    --topbar-h: 64px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: var(--ease);
    --shadow-photo: 0 18px 40px -16px rgba(0, 0, 0, 0.85);
    --shadow-sticker: 2px 3px 0 rgba(0, 0, 0, 0.45);
    --shadow-panel: 0 20px 40px -26px rgba(0, 0, 0, 0.9);
    --z-tooltip: 70;

    color-scheme: dark;
}

/* Derived from the current line wherever --d is set */
:root, body, [class*="is-line-"], [data-line], .mod-panel {
    --d-ground: color-mix(in srgb, var(--d) 8%, var(--ink-1));
    --d-panel: color-mix(in srgb, var(--d) 12%, var(--ink-2));
    --d-soft: color-mix(in srgb, var(--d) 24%, transparent);
    --d-wash: color-mix(in srgb, var(--d) 10%, transparent);
}

body[data-line="a"], .is-line-a { --d: var(--line-a); }
body[data-line="t"], .is-line-t { --d: var(--line-t); }
body[data-line="l"], .is-line-l { --d: var(--line-l); }
body[data-line="m"], .is-line-m { --d: var(--line-m); }
body[data-line="r"], .is-line-r { --d: var(--line-r); }
body[data-line="b"], .is-line-b { --d: var(--line-b); }
body[data-line="s"], .is-line-s { --d: var(--line-s); }
body[data-line="d"], .is-line-d { --d: var(--line-d); }

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background-color: var(--d-ground);
    color: var(--paper);
    font: 400 15px/1.55 var(--f-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    transition: background-color 0.6s ease;
}

body.is-arena { font-size: 14px; background-color: var(--ink-1); }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--f-head);
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.15;
    text-wrap: balance;
}

::selection { background: var(--d); color: var(--on-color); }

a { color: var(--d); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--paper); }

img { max-width: 100%; display: block; }

button,
input,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Icons come only from our own SVG sprite, no icon fonts. */
.mark {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.14em;
}

.mark--lg { width: 1.5em; height: 1.5em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Atmosphere (layers added by js/guide.js) ---------- */

.fx { position: fixed; inset: 0; pointer-events: none; }
/* Grain (alpha noise, no blend mode) and the vignette in one layer; only the
   noise tile shifts, four times a second. */
.fx--grain { z-index: 96; background-image: var(--grain, none), radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(0, 0, 0, 0.5) 100%); background-size: 180px 180px, 100% 100%; animation: grain 0.9s steps(4) infinite; }
.fx--fog { z-index: -2; background: radial-gradient(50vmax 30vmax at 18% 12%, rgba(130, 110, 90, 0.08), transparent 70%), radial-gradient(50vmax 30vmax at 82% 82%, rgba(100, 88, 76, 0.07), transparent 70%); animation: fog 38s ease-in-out infinite alternate; }
/* A fixed-size glow moved with transform, so the pointer never repaints the page. */
.fx--lamp { z-index: 1; inset: auto; top: 0; left: 0; width: 880px; height: 880px; margin: -440px 0 0 -440px; opacity: 0; transform: translate3d(50vw, 30vh, 0); transition: opacity 0.6s; will-change: transform; background: radial-gradient(440px circle at 50% 50%, rgba(255, 224, 180, 0.05), transparent 70%); }
body.has-pointer .fx--lamp { opacity: 1; }
.fx--edge { z-index: 94; opacity: 0; transition: opacity 0.4s; }

@keyframes grain {
    0% { background-position: 0 0, 0 0; }
    25% { background-position: -28px 14px, 0 0; }
    50% { background-position: 18px -24px, 0 0; }
    75% { background-position: -12px -8px, 0 0; }
    100% { background-position: 0 0, 0 0; }
}

@keyframes fog { to { transform: translate3d(4vw, -2vh, 0) scale(1.08); } }

/* Chalk doodles from the ranked terminal stay as a faint wall behind pages. */
.chalk-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.chalk-bg img { position: absolute; height: auto; opacity: 0.07; transform: rotate(var(--rot, 0deg)); animation: chalk-draw 1.6s var(--ease) var(--delay, 0ms) backwards; }
.chalk-bg__doodle { width: clamp(240px, 30vw, 540px); }
.chalk-bg__mark { width: clamp(64px, 7vw, 120px); opacity: 0.06; }
body.is-arena .chalk-bg img { opacity: 0.04; }

@keyframes chalk-draw {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* ---------- Guidebook pieces ---------- */

/* White chalk scribbles in page margins */
.scribble { position: absolute; z-index: 0; pointer-events: none; color: var(--paper); opacity: 0.3; }
.scribble svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scribble path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: scribble-draw 1.4s var(--ease) 0.3s forwards; }
@keyframes scribble-draw { to { stroke-dashoffset: 0; } }

/* Rooftops (or treetops) rising from the top edge of a district */
.skyline {
    position: relative;
    z-index: 0;
    display: block;
    width: 100vw;
    height: 92px;
    margin-left: calc(50% - 50vw);
    margin-bottom: -1px;
    color: var(--d-ground);
    background: var(--ink-1);
    transition: color 0.6s ease;
}
.skyline svg { display: block; width: 100%; height: 100%; }
.skyline__lamp { position: absolute; bottom: 0; width: 2px; background: rgba(242, 236, 226, 0.12); }

/* Subway pill sign: page names */
.sign {
    --sign-size: clamp(30px, 5.6vw, 70px);
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    max-width: 100%;
    margin: 0;
    padding: 0.14em 0.5em 0.14em 0.16em;
    border-radius: var(--radius-pill);
    background: var(--night);
    border: 0.07em solid var(--d);
    box-shadow: 0 0 0 0.05em var(--night), 0 0 0.5em color-mix(in srgb, var(--d) 45%, transparent), 0 14px 30px -12px rgba(0, 0, 0, 0.9);
    font-size: var(--sign-size);
    line-height: 1;
    transform: rotate(var(--rot, -3deg));
    transform-origin: left center;
    animation: sign-in 0.8s var(--ease) both;
}
.sign__bullet {
    display: grid;
    place-items: center;
    width: 1.1em;
    height: 1.1em;
    flex: none;
    border-radius: 50%;
    background: var(--d);
    color: var(--on-color);
    font: 400 0.72em/1 var(--f-poster);
    font-synthesis: none;
}
.sign__name {
    min-width: 0;
    padding-bottom: 0.04em;
    overflow: hidden;
    color: var(--paper);
    font: 400 1em/1 var(--f-poster);
    font-synthesis: none;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.sign--sm { --sign-size: 22px; }
@keyframes sign-in { from { opacity: 0; transform: rotate(-12deg) translateX(-30px); } to { opacity: 1; transform: rotate(var(--rot, -3deg)); } }

/* Slanted stickers */
.sticker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 10px 4px;
    background: var(--d);
    color: var(--on-color);
    font: 800 13px/1.15 var(--f-head);
    box-shadow: var(--shadow-sticker);
    transform: rotate(var(--rot, -3deg));
    animation: sticker-slap 0.6s var(--ease) 0.15s both;
}
.sticker--new { background: var(--line-a); padding: 4px 8px 3px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.sticker--paper { background: var(--frame); }
.sticker--red { background: var(--loss); }
.sticker--amber { background: var(--hk); }
.sticker--sapphire { background: var(--am); }
.sticker--win { background: var(--win); }
@keyframes sticker-slap { from { opacity: 0; transform: rotate(-20deg) scale(1.7); } to { opacity: 1; transform: rotate(var(--rot, -3deg)) scale(1); } }

/* One highlighted word per headline */
mark {
    position: relative;
    display: inline-block;
    margin: 0 0.04em;
    padding: 0 0.16em;
    background: var(--d);
    color: var(--on-color);
    box-shadow: var(--shadow-sticker);
    transform: rotate(-2.5deg);
    animation: mark-in 0.7s var(--ease) 0.25s both;
}
mark.is-orange { background: var(--line-a); }
@keyframes mark-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.headline { margin: 0; color: var(--paper); font: 900 clamp(32px, 4.4vw, 56px)/1.06 var(--f-head); letter-spacing: -0.01em; text-wrap: balance; }
.headline--sm { font-size: clamp(26px, 3.2vw, 40px); }
.presenting { color: var(--line-a); font: 700 14px/1.2 var(--f-head); }
.label { color: var(--paper-3); font: 700 11px/1.2 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.lede { max-width: 62ch; margin: 0; color: var(--paper-2); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.cond { font-family: var(--f-cond); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
.hand { font-family: var(--f-hand); font-weight: 700; }

.stopno { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--d); color: var(--on-color); font: 800 16px/1 var(--f-head); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d) 25%, transparent); }
.stopicon { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1.5px solid var(--paper-3); color: var(--paper-2); font-size: 16px; }

/* Framed photos and kraft notes */
.photo { position: relative; display: block; overflow: hidden; border: 3px solid var(--frame); background: var(--ink-0); box-shadow: var(--shadow-photo); transform: rotate(var(--rot, 0deg)); transition: transform 0.6s var(--ease); }
.photo:hover { transform: rotate(0deg) scale(1.01); }

.note {
    position: relative;
    display: block;
    max-width: 250px;
    margin: 0;
    padding: 22px 18px 16px;
    background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, 0.12), transparent 60%), repeating-linear-gradient(0deg, rgba(90, 60, 20, 0.04) 0 2px, transparent 2px 4px), var(--kraft);
    color: var(--kraft-ink);
    font: 700 22px/1.15 var(--f-hand);
    box-shadow: 0 14px 22px -12px rgba(0, 0, 0, 0.8);
    transform: rotate(var(--rot, 3deg));
}
.note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 76px; height: 22px; margin-left: -38px; background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transform: rotate(-4deg); }
.note > .sticker { position: absolute; top: -12px; left: -10px; }

/* ---------- Buttons ---------- */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    background: transparent;
    border: 2px solid var(--paper);
    border-radius: var(--radius);
    color: var(--paper);
    font: 800 12.5px/1 var(--f-head);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--paper); color: var(--on-color); transform: rotate(-1.5deg); }
.btn:active { transform: translateY(1px); }
.btn .mark { font-size: 16px; }

.btn--ghost { border-color: transparent; color: var(--paper-2); }
.btn--ghost:hover { background: transparent; border-color: var(--hair-strong); color: var(--paper); transform: none; }

/* The solid button wears the colour of the page's line; it presses into a hard shadow. */
.btn--amber,
.btn-solid {
    background: var(--d);
    border: 2px solid var(--d);
    color: var(--on-color);
    box-shadow: 3px 3px 0 var(--night);
}
.btn--amber:hover,
.btn-solid:hover:not(:disabled) { background: var(--d); color: var(--on-color); box-shadow: 5px 5px 0 var(--night); transform: rotate(-1.5deg) translate(-1px, -1px); }
.btn--amber:active,
.btn-solid:active:not(:disabled) { box-shadow: 0 0 0 var(--night); transform: translate(3px, 3px); }

.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--radius);
    font: 800 13.5px/1 var(--f-head);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s, background-color 0.2s;
}

.btn.is-active { background: var(--d); border-color: var(--d); color: var(--on-color); box-shadow: var(--shadow-sticker); }

.btn:disabled,
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Segmented filters read as round pills; the chosen one is a tilted sticker. */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .btn {
    min-height: 34px;
    padding: 0 14px;
    background: var(--ink-2);
    border: 1.5px solid var(--hair-strong);
    border-radius: var(--radius-pill);
    color: var(--paper-2);
    font: 700 12.5px/1 var(--f-head);
    letter-spacing: 0;
    text-transform: none;
}
.filters .btn:hover { background: var(--ink-3); border-color: var(--paper-3); color: var(--paper); transform: none; }
.filters .btn.is-active { background: var(--d); border-color: var(--d); color: var(--on-color); box-shadow: var(--shadow-sticker); transform: rotate(-2deg); }

.iconbtn {
    display: inline-grid;
    grid-auto-flow: column;
    place-items: center;
    gap: 6px;
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    background: var(--ink-2);
    border: 1.5px solid var(--hair-strong);
    border-radius: var(--radius-pill);
    color: var(--paper-2);
    font: 700 11px/1 var(--f-head);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, transform 0.3s var(--ease);
}
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover { border-color: var(--paper); color: var(--paper); }
.iconbtn[aria-pressed="true"] { color: var(--d); border-color: var(--d); }

/* ---------- Panels ---------- */

/* A panel is flat and square, tinted by the page's line. */
.plate {
    position: relative;
    background: var(--d-panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
}

.rule {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--d);
    font: 800 12px/1 var(--f-head);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.rule::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, color-mix(in srgb, var(--d) 50%, transparent), transparent); }
.rule .mark { font-size: 15px; }

/* ---------- Fields ---------- */

.search { position: relative; flex: 1 1 200px; min-width: 160px; }
.search__mark { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: var(--d); transform: translateY(-50%); pointer-events: none; }
.search input,
.field-row input,
.settings__field input,
.meta-filters__band select,
.meta-filters__band input {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    background: var(--ink-0);
    border: 1.5px solid var(--hair-strong);
    border-radius: var(--radius);
    color: var(--paper);
    font-size: 14.5px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search input { padding-left: 38px; }
.search input::placeholder,
.meta-filters__band input::placeholder { color: var(--paper-3); }
.search input:focus,
.field-row input:focus,
.settings__field input:focus,
.meta-filters__band select:focus,
.meta-filters__band input:focus { outline: none; border-color: var(--d); box-shadow: 0 0 0 3px var(--d-soft); }
.meta-filters__band select {
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--d) 50%), linear-gradient(135deg, var(--d) 50%, transparent 50%);
    background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.meta-filters__band select option { background: var(--ink-2); color: var(--paper); }

/* ==========================================================================
   Top bar, the subway line navigation, account, splash, About
   ========================================================================== */

.topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: var(--topbar-h);
    padding: 8px 22px;
    background: rgba(22, 20, 19, 0.97);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--paper); }

/* The logo is a painted portrait: a round medallion with a cream rim. */
.brand__logo,
.brand__mark--img {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--frame), 0 6px 14px -6px rgba(0, 0, 0, 0.9);
    transition: transform 0.6s var(--ease);
}
.brand:hover .brand__logo,
.brand:hover .brand__mark--img { transform: rotate(-12deg) scale(1.06); }
.brand__mark { width: 34px; height: 34px; color: var(--line-a); }
.brand__title { font: 400 17px/1 var(--f-poster); font-synthesis: none; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.brand__sub { margin-top: 5px; color: var(--line-a); font: 700 10px/1 var(--f-head); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }

.topbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.topbar .btn--amber { --d: var(--line-a); }

/* ---- The line: every section is a stop with a lettered bullet ---- */

.nav {
    position: relative;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
}
.nav__rail { position: absolute; left: 18px; right: 18px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--ink-4); pointer-events: none; }
.nav__train {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;
    width: 46px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 4px;
    background: var(--paper);
    box-shadow: 0 0 12px rgba(242, 236, 226, 0.7);
    opacity: 0;
    transform: translateX(var(--train-x, 0px));
    transition: transform 0.9s var(--ease), opacity 0.4s;
    pointer-events: none;
}
.nav.has-train .nav__train { opacity: 0.9; }
.nav__head { display: none; }

.nav__item {
    --c: var(--d);
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 4px 11px 4px 4px;
    background: var(--ink-2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--paper-3);
    font: 700 12.5px/1 var(--f-head);
    cursor: pointer;
    transition: color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease);
}
.nav__bullet {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--c);
    color: var(--on-color);
    font: 400 12px/1 var(--f-poster);
    font-synthesis: none;
    transition: transform 0.4s var(--ease);
}
.nav__name { white-space: nowrap; }
.nav__cap { display: none; }
.nav__item:hover { color: var(--paper); transform: translateY(-1px); }
.nav__item:hover .nav__bullet { transform: rotate(-10deg) scale(1.08); }
.nav__item.is-active,
.nav__item.is-parent { background: var(--night); border-color: var(--c); color: var(--paper); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c) 60%, transparent); }

#nav-home { --c: var(--line-a); }
#nav-tournament { --c: var(--line-t); }
#nav-leaderboard { --c: var(--line-l); }
#nav-meta { --c: var(--line-m); }
#nav-ranks { --c: var(--line-r); }
#nav-builder { --c: var(--line-b); }
#nav-settings { --c: var(--line-s); }
#nav-app { --c: var(--line-d); }

.burger { display: none; }

/* ---- Account ---- */

.user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 2px var(--frame); }
.user__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.user__name { max-width: 150px; overflow: hidden; color: var(--paper); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.user__admin { padding: 1px 5px; background: var(--line-a); color: var(--on-color); font: 800 9px/1.3 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-2deg); }

/* ---- Intro splash: decorative, never takes clicks, gone in under a second ---- */

.splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--ink-1);
    pointer-events: none;
    animation: splash-out 0.3s ease-in 0.75s forwards;
}
.splash.is-done { display: none; }
.splash__inner { display: grid; justify-items: center; gap: 12px; animation: splash-in 0.45s var(--ease) both; }
.splash__logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px var(--frame), 0 20px 40px -14px rgba(0, 0, 0, 0.9); }
.splash__title { padding: 4px 16px 2px; border: 3px solid var(--line-a); border-radius: var(--radius-pill); background: var(--night); font: 400 24px/1.1 var(--f-poster); font-synthesis: none; letter-spacing: 0.02em; box-shadow: 0 0 18px -4px var(--line-a); transform: rotate(-3deg); }
.splash__rule { width: 160px; height: 3px; border-radius: 2px; background: var(--line-a); transform-origin: left center; animation: splash-rule 0.4s ease-out 0.2s both; }
.splash__sub { color: var(--paper-3); font: 700 10px/1 var(--f-head); letter-spacing: 0.3em; text-transform: uppercase; }

@keyframes splash-in { from { opacity: 0; transform: scale(0.94) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes splash-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }

/* ---- "About us": the chalk sticker in the corner and its dialog (js/about.js) ---- */

.about-fab {
    position: fixed;
    left: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 40;
    width: clamp(96px, 9vw, 150px);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0.72;
    filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.6));
    transform: rotate(-6deg);
    transform-origin: bottom left;
    transition: transform 0.4s var(--ease), opacity 0.3s, filter 0.3s;
    animation: slot-in 0.5s var(--ease) 0.8s backwards;
}
.about-fab:hover,
.about-fab:focus-visible { opacity: 1; transform: rotate(0deg) scale(1.06); filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(240, 100, 45, 0.35)); }
.about-fab:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.about-fab__art { display: block; width: 100%; height: auto; }
body:has(.link-line) .about-fab { bottom: 40px; width: clamp(84px, 7vw, 120px); opacity: 0.5; }

.about {
    --d: var(--line-a);
    width: min(580px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    color: var(--paper);
}
.about::backdrop { background: rgba(10, 9, 8, 0.84); }
.about[open] .about__panel { animation: pop-in 0.45s var(--ease) both; }
.about__panel {
    position: relative;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 34px 30px 26px;
    background: var(--ink-2);
    box-shadow: 0 0 0 3px var(--frame), 12px 12px 0 var(--night);
}
.about__panel p { max-width: 62ch; margin: 0 0 12px; color: var(--paper-2); }
.about__panel .about__lead { color: var(--paper); font-size: 16px; font-weight: 700; }
.about__title {
    display: inline-block;
    margin: 0 0 18px;
    padding: 0.12em 0.5em 0.1em;
    border: 3px solid var(--line-a);
    border-radius: var(--radius-pill);
    background: var(--night);
    font: 400 30px/1 var(--f-poster);
    font-synthesis: none;
    text-transform: uppercase;
    box-shadow: 0 0 16px -4px var(--line-a);
    transform: rotate(-3deg);
}
.about__heading { margin: 20px 0 10px; color: var(--line-a); font: 800 12px/1 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.about__devs { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.about__devs li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.about__dev { color: var(--paper); font: 900 19px/1.2 var(--f-head); text-decoration: underline; text-decoration-color: var(--line-a); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.about__dev:hover { color: var(--line-a); }
.about__gh { color: var(--paper-3); font-size: 12px; }
.about__support {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 22px;
    padding: 18px 16px 14px;
    background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, 0.12), transparent 60%), var(--kraft);
    color: var(--kraft-ink);
    box-shadow: 0 14px 22px -12px rgba(0, 0, 0, 0.8);
    transform: rotate(-1deg);
}
.about__support::before { content: ""; position: absolute; top: -10px; left: 50%; width: 76px; height: 22px; margin-left: -38px; background: var(--tape); transform: rotate(-4deg); }
.about__label { font: 700 24px/1 var(--f-hand); }
.about__card { font: 800 21px/1 var(--f-cond); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.about__copy { margin-left: auto; }
.about__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--ink-3);
    border: 1.5px solid var(--hair-strong);
    border-radius: 50%;
    color: var(--paper);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s var(--ease), border-color 0.2s;
}
.about__close:hover { border-color: var(--paper); transform: rotate(90deg); }

/* ==========================================================================
   Draft rooms: status in the top bar, the arena, sides, hero cards
   ========================================================================== */

.status { display: grid; justify-items: center; gap: 5px; min-width: 0; text-align: center; }
.status__phase { color: var(--paper-3); font: 800 11px/1 var(--f-head); letter-spacing: 0.2em; text-transform: uppercase; }
.status__turn {
    max-width: 100%;
    padding: 6px 14px 5px;
    overflow: hidden;
    background: var(--ink-3);
    color: var(--paper);
    font: 400 19px/1.1 var(--f-poster);
    font-synthesis: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--shadow-sticker);
    transform: rotate(-2deg);
    transition: background-color 0.3s, color 0.3s;
}
.status__turn[data-side="1"] { background: var(--hk); color: var(--on-color); }
.status__turn[data-side="2"] { background: var(--am); color: var(--on-color); }
.status__next { max-width: 100%; overflow: hidden; color: var(--paper-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.status__next[data-side="1"] { color: color-mix(in srgb, var(--hk) 75%, var(--paper-2)); }
.status__next[data-side="2"] { color: color-mix(in srgb, var(--am) 75%, var(--paper-2)); }

/* The clock: a slim fuse that burns down in the colour of the side on the clock. */
.gauge {
    --fuse: var(--paper);
    position: relative;
    width: min(340px, 100%);
    height: 18px;
    margin-top: 3px;
    overflow: hidden;
    background: var(--night);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1.5px var(--ink-4);
}
.status:has(.status__turn[data-side="1"]) .gauge { --fuse: var(--hk); }
.status:has(.status__turn[data-side="2"]) .gauge { --fuse: var(--am); }
.gauge__fill {
    position: absolute;
    inset: 3px;
    border-radius: var(--radius-pill);
    background: var(--fuse);
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 9px);
    transform: scaleX(var(--fill, 1));
    transform-origin: left center;
    transition: transform 0.9s linear, background-color 0.3s;
    will-change: transform;
}
.gauge.is-urgent { --fuse: var(--loss); animation: urgent 0.9s ease-in-out infinite; }
.gauge.is-urgent .gauge__fill { transition: transform 0.25s linear; }
@keyframes urgent { 50% { box-shadow: inset 0 0 0 1.5px var(--loss), 0 0 14px rgba(239, 79, 90, 0.55); } }
.gauge__value {
    position: relative;
    display: block;
    color: var(--paper);
    font: 800 12px/18px var(--f-cond);
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow: 0 0 3px var(--night), 0 1px 0 var(--night), 0 0 6px var(--night);
}

.badge-role {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    background: var(--ink-2);
    border: 1.5px solid var(--hair-strong);
    border-radius: var(--radius-pill);
    color: var(--paper-2);
    font: 700 12px/1 var(--f-head);
    white-space: nowrap;
}
.badge-role[data-side="1"],
.badge-role[data-side="2"] { border-color: transparent; color: var(--on-color); box-shadow: var(--shadow-sticker); transform: rotate(-2deg); }
.badge-role[data-side="1"] { background: var(--hk); }
.badge-role[data-side="2"] { background: var(--am); }

.arena {
    display: grid;
    grid-template-columns: minmax(240px, 290px) minmax(0, 1fr) minmax(240px, 290px);
    gap: var(--gap);
    height: calc(100vh - 86px);
    min-height: 0;
    padding: var(--gap) var(--gap) 40px;
}

/* The sides: Hidden King plays amber, Archmother plays sapphire. */
.side {
    --c: var(--side);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--side) 11%, var(--ink-2));
    transition: box-shadow 0.4s;
}
.side--one, .squad--king { --side: var(--hk); }
.side--two, .squad--mother { --side: var(--am); }
body:has(.status__turn[data-side="1"]) .side--one,
body:has(.status__turn[data-side="2"]) .side--two,
body:has(.status__turn[data-side="1"]) .squad--king,
body:has(.status__turn[data-side="2"]) .squad--mother { box-shadow: 0 0 0 2px var(--side), 0 0 34px -8px var(--side); }

.side__head { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 2px; }
.side__head > div { min-width: 0; }
.side__crest {
    width: 44px;
    height: 44px;
    flex: none;
    padding: 9px;
    border-radius: 50%;
    background: var(--side);
    color: var(--on-color);
    box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--side);
    stroke-width: 2;
}
.side__head .side__crest { color: var(--on-color); }
.side__name { overflow: hidden; color: var(--paper); font: 400 20px/1.05 var(--f-poster); font-synthesis: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.side__label { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--side); color: var(--on-color); font: 800 10px/1.2 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-2deg); }
.side .rule, .squad .rule { color: var(--paper-2); }
.side .rule::after, .squad .rule::after { background: linear-gradient(90deg, var(--hair-strong), transparent); }

.bans { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; }
.ban-slot {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(239, 79, 90, 0.05);
    border: 1.5px dashed color-mix(in srgb, var(--loss) 55%, transparent);
}
.ban-slot img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(0.9) brightness(0.55); }
.ban-slot.is-filled { border: 2px solid var(--loss); animation: slot-in 0.38s var(--ease) both; }
.ban-slot.is-filled::after { content: ""; position: absolute; left: -10%; top: 50%; width: 120%; height: 4px; margin-top: -2px; background: var(--loss); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transform: rotate(-45deg); animation: slash 0.35s var(--ease) 0.15s both; }
@keyframes slash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.roster, .squad__list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-4) transparent;
}

.pick-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    color: var(--paper-3);
    transition: background-color 0.3s;
}
.pick-row__art {
    display: grid;
    grid-template: 100% / 100%;
    place-items: center;
    width: 48px;
    height: 52px;
    flex: none;
    overflow: hidden;
    border: 1.5px dashed var(--hair-strong);
    background: var(--ink-0);
    color: var(--paper-3);
}
.pick-row__art > * { grid-area: 1 / 1; }
.pick-row__art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pick-row__text { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.pick-row__player { max-width: 100%; overflow: hidden; color: var(--paper); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pick-row__hero { color: var(--paper-3); font: 600 12px/1.2 var(--f-head); }
.pick-row.is-filled { animation: reveal 0.9s var(--ease) both; }
.pick-row.is-filled .pick-row__art { border: 2px solid var(--frame); background: radial-gradient(80% 70% at 50% 25%, color-mix(in srgb, var(--side) 40%, transparent), transparent 70%), var(--ink-0); }
.pick-row.is-filled .pick-row__hero { padding: 2px 6px; background: var(--side); color: var(--on-color); font-weight: 800; transform: rotate(-2deg); }
@keyframes reveal { 0% { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--side) 55%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

/* ---- The centre: search, filters, the prompt and the pool ---- */

.selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 14px;
    background: var(--ink-2);
}
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    background: var(--ink-3);
    color: var(--paper-2);
    font: 800 13px/1.2 var(--f-head);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
}
.prompt::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--paper-3); }
.prompt[data-side] { color: var(--on-color); box-shadow: var(--shadow-sticker); transform: rotate(-0.6deg); animation: caption-in 0.4s var(--ease) both; }
.prompt[data-side="1"] { background: var(--hk); }
.prompt[data-side="2"] { background: var(--am); }
.prompt[data-side]::before { background: var(--on-color); animation: blink 1s infinite; }

/* grid-auto-rows: max-content keeps fixed-height containers from stretching rows. */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 6px 6px 6px 2px;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-4) transparent;
}

/* Hero cards are framed photos, slightly tilted, with a cream name strip. */
.card {
    --c: var(--paper);
    position: relative;
    overflow: hidden;
    background: var(--frame);
    border: 3px solid var(--frame);
    box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.3s, filter 0.4s;
}
.card:nth-child(3n+1) { --tilt: -1deg; }
.card:nth-child(3n+2) { --tilt: 0.8deg; }
.card:nth-child(3n) { --tilt: -0.5deg; }
body:has(.status__turn[data-side="1"]) .card { --c: var(--hk); }
body:has(.status__turn[data-side="2"]) .card { --c: var(--am); }
.card:hover { z-index: 2; border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 18px 30px -12px rgba(0, 0, 0, 0.95); transform: translateY(-4px) rotate(0deg); }
.card:active { transform: translateY(1px); }

/* The aspect ratio sits on the image itself so auto rows get the right height on the first pass. */
.card__art {
    overflow: hidden;
    background: radial-gradient(85% 65% at 50% 28%, rgba(255, 214, 170, 0.16), transparent 70%), linear-gradient(180deg, #2B2623, #121010);
}
.card__art img {
    width: 100%;
    height: auto;
    aspect-ratio: 14 / 19;
    object-fit: cover;
    object-position: top;
    transition: filter 0.3s ease, transform 0.5s var(--ease);
}
.card:hover .card__art img { transform: scale(1.05); }
.card__name {
    padding: 4px 4px 3px;
    overflow: hidden;
    background: var(--frame);
    color: var(--on-color);
    font: 800 10.5px/1.15 var(--f-head);
    letter-spacing: 0.04em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.card.is-taken { cursor: not-allowed; }
.card.is-taken:hover { border-color: var(--frame); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.9); transform: rotate(var(--tilt, 0deg)); }
.card.is-taken:hover .card__art img { transform: none; }
.card.is-banned { border-color: #5A5450; background: #5A5450; }
.card.is-banned .card__art img { filter: grayscale(1) brightness(0.4); }
.card.is-banned .card__name { background: #5A5450; color: var(--paper-2); }
.card.is-picked-1, .card.is-picked-2 { filter: saturate(0.75); }
.card.is-picked-1 .card__art img, .card.is-picked-2 .card__art img { filter: brightness(0.5); }
.card.is-picked-1 { border-color: var(--hk); }
.card.is-picked-2 { border-color: var(--am); }

/* A sticker slapped across the portrait. */
.card__stamp {
    position: absolute;
    left: 50%;
    top: 42%;
    display: none;
    padding: 4px 9px 3px;
    color: var(--on-color);
    font: 800 12px/1 var(--f-head);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--shadow-sticker);
    transform: translate(-50%, -50%) rotate(-10deg);
    pointer-events: none;
}
.card.is-taken .card__stamp { display: block; animation: stamp-in 0.4s var(--ease) both; }
.card.is-banned .card__stamp { background: var(--loss); }
.card.is-picked-1 .card__stamp { background: var(--hk); }
.card.is-picked-2 .card__stamp { background: var(--am); }
.card.is-flash { animation: card-flash 0.7s var(--ease); }
@keyframes card-flash { 0% { filter: brightness(2.4) saturate(0); } 100% { filter: none; } }

/* ---- Ability draft ---- */

.ability-arena {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(230px, 290px);
    gap: var(--gap);
    height: calc(100vh - 86px);
    min-height: 0;
    padding: var(--gap) var(--gap) 40px;
}

.squad {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--side) 11%, var(--ink-2));
    transition: box-shadow 0.4s;
}

.fighter {
    position: relative;
    padding: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    color: var(--paper-3);
    transition: box-shadow 0.3s;
}
.fighter.is-turn { box-shadow: inset 0 0 0 2px var(--side); }
.fighter.is-turn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--side) 22%, transparent) 50%, transparent 80%); animation: scan 1.6s linear infinite; pointer-events: none; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.fighter.is-you { background: color-mix(in srgb, var(--paper) 6%, rgba(0, 0, 0, 0.25)); }
.fighter.is-you .fighter__name::after { content: "you"; margin-left: 6px; padding: 1px 5px; background: var(--paper); color: var(--on-color); font: 800 9px/1.3 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px; }
.fighter__top { position: relative; display: flex; align-items: center; gap: 10px; }
.fighter__top > div { min-width: 0; }
.fighter__body {
    display: grid;
    grid-template: 100% / 100%;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    overflow: hidden;
    border: 1.5px dashed var(--hair-strong);
    background: var(--ink-0);
    color: var(--paper-3);
}
.fighter__body > * { grid-area: 1 / 1; }
.fighter__body img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fighter__body:has(img:not([hidden])) { border: 2px solid var(--frame); }
.fighter__name { overflow: hidden; color: var(--paper); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fighter__hero { color: var(--paper-3); font: 600 11.5px/1.2 var(--f-head); }

.loadout { position: relative; display: flex; gap: 6px; margin-top: 8px; }
.loadout__slot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    background: var(--ink-0);
    border: 1.5px dashed var(--hair-strong);
    border-radius: 50%;
}
.loadout__slot.is-ultimate { border-radius: 5px; transform: rotate(45deg) scale(0.86); }
.loadout__slot.is-ultimate .loadout__icon { transform: rotate(-45deg); }
.loadout__slot.is-filled { border: 0; background: color-mix(in srgb, var(--side) 30%, var(--ink-3)); animation: pop 0.5s var(--ease); }
.loadout__slot.is-ultimate.is-filled { background: var(--line-a); }
.loadout__slot.is-ultimate.is-filled .loadout__icon { background-color: var(--on-color); }
@keyframes pop { 0% { transform: scale(0.2); } 70% { transform: scale(1.2); } }
.loadout__icon {
    display: block;
    width: 78%;
    height: 78%;
    background-color: var(--paper);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.fighter.is-you .loadout__slot.is-filled:not(.is-ultimate) { cursor: pointer; }
.loadout__slot.is-swap { box-shadow: 0 0 0 2px var(--paper); animation: blink 1s infinite; }
.loadout__hint { display: none; margin-top: 6px; color: var(--paper-3); font: 700 10px/1.2 var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; }
.fighter.is-you .loadout__hint { display: block; }

/* Match mod: appears once every slot is filled. */
.mod-panel {
    --d: var(--line-m);
    position: relative;
    padding: 18px;
    background: var(--d-panel);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--d) 50%, transparent), var(--shadow-panel);
    animation: rise 0.5s var(--ease) both;
}
.mod-panel__title { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--d); font: 900 18px/1.1 var(--f-head); }
.mod-panel__note { margin: 0 0 12px; color: var(--paper-2); font-size: 13.5px; }
.mod-panel__server { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.mod-panel__server .mod-panel__note { color: var(--paper); }
.mod-panel__connect { display: flex; flex-wrap: wrap; align-items: stretch; gap: 9px; }
.mod-panel__connect code { flex: 1 1 220px; min-width: 0; padding: 9px 12px; background: var(--ink-0); border-radius: var(--radius); color: var(--d); font: 600 14px/1.3 var(--f-body); word-break: break-all; user-select: all; }
.mod-panel__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.mod-panel__steps { display: grid; gap: 4px; margin: 0 0 10px; padding-left: 20px; color: var(--paper-2); font-size: 13px; line-height: 1.55; }
.mod-panel__steps code { padding: 1px 6px; background: var(--ink-0); border-radius: 3px; color: var(--d); font: 600 12px/1.4 var(--f-body); word-break: break-all; }
.mod-panel__warn { margin: 0; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--paper-3); font-size: 12.5px; }

/* The shared pool: one row per hero, the hero first, then four abilities. */
.ability-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
    overflow-anchor: none;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-4) transparent;
}
.pool-group { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; padding: 6px; background: rgba(0, 0, 0, 0.22); }
.pool-group__hero { display: flex; }
.pool-group__abilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px; }

.ability {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px;
    background: var(--ink-3);
    border: 1.5px solid transparent;
    color: var(--paper);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.25s var(--ease), opacity 0.3s, filter 0.3s;
}
.ability:hover { border-color: var(--line-a); transform: translateY(-2px) rotate(-0.6deg); }
.ability:active { transform: translateY(1px); }
.ability.is-ultimate { background: color-mix(in srgb, var(--line-a) 14%, var(--ink-3)); }
.ability.is-ultimate::after { content: "ult"; position: absolute; top: 4px; right: 5px; color: var(--line-a); font: 800 9px/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.ability--hero { flex: 1; justify-content: center; background: var(--ink-2); }
.ability--hero .ability__art { width: 62px; height: 62px; }

/* Ability glyphs arrive white or black in the alpha channel: draw them as a mask in our own colour. */
.ability__icon {
    display: block;
    width: 44px;
    height: 44px;
    flex: none;
    background-color: var(--paper);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.ability.is-ultimate .ability__icon { background-color: var(--line-a); }
.ability__art { width: 46px; height: 46px; object-fit: cover; object-position: top; border: 2px solid var(--frame); background: var(--ink-0); }
.ability__name { color: var(--paper); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.ability__from { color: var(--paper-3); font: 700 9px/1.1 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.ability.is-taken { opacity: 0.28; filter: grayscale(1); cursor: not-allowed; }
.ability.is-taken:hover { border-color: transparent; transform: none; }
.ability.is-banned { opacity: 0.55; border-color: var(--loss); }
.ability.is-banned .ability__name { text-decoration: line-through; text-decoration-color: var(--loss); text-decoration-thickness: 2px; }

/* ==========================================================================
   Dialogs, toasts, the connection strip
   ========================================================================== */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 97;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(10, 9, 8, 0.84);
}
.overlay.is-open { display: grid; animation: fade-in 0.25s ease-out; }
.overlay.is-open .dialog { animation: pop-in 0.45s var(--ease) both; }

.dialog {
    width: min(540px, 100%);
    padding: 30px 28px 26px;
    background: var(--ink-2);
    box-shadow: 0 0 0 3px var(--frame), 12px 12px 0 var(--night);
}
.dialog h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-right: 40px; font: 900 22px/1.15 var(--f-head); }
.dialog h3 .mark { color: var(--d); }
.dialog p { margin: 0 0 16px; color: var(--paper-2); }
.dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--ink-3);
    border: 1.5px solid var(--hair-strong);
    border-radius: 50%;
    color: var(--paper);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.3s var(--ease), border-color 0.2s;
}
.dialog__close:hover { border-color: var(--paper); transform: rotate(90deg); }
.dialog--wide { width: min(660px, 100%); }

.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1; min-width: 0; color: var(--paper-2); }

.toasts {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 44px);
    z-index: 98;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    padding: 11px 16px 10px;
    background: var(--paper);
    color: var(--on-color);
    font: 700 14px/1.25 var(--f-head);
    box-shadow: 4px 4px 0 var(--night);
    transform: rotate(-1.5deg);
    animation: toast-in 0.5s var(--ease) both;
}
.toast::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--on-color); }
.toast--error { background: var(--loss); }
.toast--good { background: var(--win); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) rotate(-6deg) scale(0.96); } to { opacity: 1; transform: rotate(-1.5deg); } }

.link-line {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px calc(env(safe-area-inset-bottom, 0px) + 6px);
    background: var(--ink-0);
    border-top: 1px solid var(--hair);
    color: var(--paper-3);
    font: 600 11.5px/1.2 var(--f-head);
    letter-spacing: 0.04em;
}
.link-line .mark { color: var(--win); }
.link-line__legal { margin-left: auto; font-weight: 400; opacity: 0.7; }
.link-line.is-down { color: var(--loss); }
.link-line.is-down .mark { color: var(--loss); animation: blink 1s infinite; }

/* ==========================================================================
   Portal pages: districts, page heads, the home guide
   ========================================================================== */

.view { position: relative; }

.hub {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px 96px;
}
.hub--wide { max-width: var(--wrap); }

/* Page head: sticker with one true fact, the line's sign, a headline, a lede. */
.phead {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: 16px;
    padding: 40px 0 34px;
}
.phead__signs { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 100%; margin-bottom: 4px; }
.phead .headline { max-width: 22ch; }
.phead .lede { margin-top: 2px; }
.phead__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Leftover hooks from the previous layout */
.hub__lead { margin: 0; }
.hub__sub { max-width: 62ch; margin: 0; color: var(--paper-2); font-size: 17px; line-height: 1.6; }
.hub__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.hub__note { margin: 0; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--paper-3); font-size: 12.5px; }

/* The head of profile, hero and match pages sits right under the skyline. */
.view > .hub__actions:first-of-type,
.view > .skyline + .hub__actions { margin-top: 26px; }

.backlink, #profileBack, #heroBack, #matchBack {
    padding-left: 0;
    border: 0;
    color: var(--d);
    font: 800 12px/1 var(--f-head);
    letter-spacing: 0.08em;
}
#profileBack:hover, #heroBack:hover, #matchBack:hover { background: none; color: var(--paper); transform: translateX(-4px); }

/* ---------- Home: the city at night ---------- */

#home-view { max-width: none; padding: 0 0 40px; background: var(--ink-1); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.city {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink-1);
}
.city canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.city::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46% 30% at 50% 80%, rgba(14, 12, 10, 0.82), transparent 100%), radial-gradient(60% 40% at 50% 30%, rgba(14, 12, 10, 0.35), transparent 100%); }
.city::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 220px; pointer-events: none; background: linear-gradient(180deg, transparent, var(--ink-1)); }
.city__in { display: grid; justify-items: center; gap: 22px; padding-block: 48px 64px; text-align: center; }

.title3d { position: relative; display: grid; justify-items: center; margin: 0; padding-top: 6px; }
.title3d__line {
    position: relative;
    display: block;
    color: #6B1E14;
    font: 400 1em/0.86 var(--f-poster);
    font-synthesis: none;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #7E2416, 2px 2px 0 #7E2416, 3px 3px 0 #6B1E14, 4px 4px 0 #6B1E14, 5px 5px 0 #571710, 6px 6px 0 #571710, 7px 7px 0 #45120C, 8px 8px 0 #45120C, 12px 16px 24px rgba(0, 0, 0, 0.7);
}
.title3d__line::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    text-shadow: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, #FFE6BF 0%, #FFB37A 34%, #F0642D 62%, #D93D4A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1.5px rgba(255, 240, 215, 0.9);
}
.title3d__line--a { font-size: clamp(34px, 6.6vw, 88px); transform: rotate(-4deg) translateX(-4%); animation: title-in 0.9s var(--ease) both; }
.title3d__line--b { margin-top: -0.02em; font-size: clamp(54px, 12.6vw, 172px); transform: rotate(-4deg) translateX(3%); animation: title-in 0.9s var(--ease) 0.12s both; }
.title3d > .sticker { position: absolute; right: -2%; bottom: -6%; --rot: -6deg; font-size: clamp(11px, 1.3vw, 15px); letter-spacing: 0.06em; text-transform: uppercase; animation-delay: 0.8s; }
@keyframes title-in { from { opacity: 0; transform: rotate(-10deg) translateY(30px) scale(0.92); } }

.reel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); width: min(860px, 100%); margin-top: 10px; }
.reel__card {
    --rot: 0deg;
    position: relative;
    display: block;
    aspect-ratio: 14 / 19;
    overflow: hidden;
    border: 3px solid var(--frame);
    background: radial-gradient(85% 60% at 50% 30%, color-mix(in srgb, var(--glow, #F0642D) 45%, transparent), transparent 72%), linear-gradient(180deg, #2B2623, #110F0E);
    color: var(--paper);
    box-shadow: var(--shadow-photo);
    transform: rotate(var(--rot)) translateY(var(--y, 0));
    transition: transform 0.5s var(--ease);
    animation: reel-in 0.8s var(--ease) both;
}
.reel__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.6s var(--ease); }
.reel__card:nth-child(1) { --rot: -3deg; --y: 8px; --glow: #F0642D; animation-delay: 0.10s; }
.reel__card:nth-child(2) { --rot: 2deg; --y: -6px; --glow: #34C6D3; animation-delay: 0.16s; }
.reel__card:nth-child(3) { --rot: -1.5deg; --y: 4px; --glow: #F4C430; animation-delay: 0.22s; }
.reel__card:nth-child(4) { --rot: 2.5deg; --y: -4px; --glow: #A57BFF; animation-delay: 0.28s; }
.reel__card:nth-child(5) { --rot: -2deg; --y: 6px; --glow: #7ED957; animation-delay: 0.34s; }
.reel__card:nth-child(6) { --rot: 3deg; --y: -8px; --glow: #FF7A9A; animation-delay: 0.40s; }
.reel__card:hover { z-index: 2; color: var(--paper); transform: rotate(0deg) translateY(-10px) scale(1.04); }
.reel__card:hover img { transform: scale(1.06); }
.reel__card .sticker { position: absolute; left: 6px; right: 6px; bottom: 8px; justify-content: center; padding: 4px 4px 3px; font-size: clamp(8px, 1vw, 12px); text-align: center; white-space: normal; --rot: -2deg; animation-delay: 0.9s; }
.reel__wr { position: absolute; top: 6px; right: 6px; padding: 2px 5px; background: var(--night); color: var(--win); font: 800 clamp(9px, 1vw, 12px)/1.1 var(--f-cond); }
@keyframes reel-in { from { opacity: 0; transform: rotate(0deg) translateY(40px); } }

.city__in .lede { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8); }
.city__tag { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
    max-width: 40ch; margin: 10px 0 0; font: 900 clamp(18px, 2.2vw, 24px)/1.25 var(--f-head); text-wrap: balance; }
.city__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; color: var(--paper-3); font-size: 13px; }
.city__meta b { color: var(--paper); font-family: var(--f-cond); font-size: 18px; font-weight: 800; }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 13.5px; }

/* Departures board: the bot's commands, split-flap */
.onair { position: relative; display: grid; justify-items: center; gap: 20px; padding-block: 36px 56px; text-align: center; }
.departures {
    position: relative;
    width: min(760px, 100%);
    padding: 16px;
    background: var(--night);
    border: 3px solid #2A2623;
    border-radius: 8px;
    box-shadow: 0 0 0 1px #000, 0 30px 60px -30px #000;
    text-align: left;
}
.departures::before, .departures::after { content: ""; position: absolute; top: -26px; width: 4px; height: 24px; background: #2A2623; }
.departures::before { left: 22%; }
.departures::after { right: 22%; }
.departures__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 12px; }
.departures__title { color: var(--paper); font: 400 18px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.departures__clock { color: var(--line-l); font: 800 18px/1 var(--f-cond); letter-spacing: 0.06em; }
.departures__cols, .departures__row { display: grid; grid-template-columns: 30px 212px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.departures__cols { padding: 0 10px 8px; }
.departures__cols span { color: var(--paper-3); font: 700 10px/1 var(--f-head); letter-spacing: 0.16em; text-transform: uppercase; }
.departures__rows { display: grid; gap: 6px; }
.departures__row {
    width: 100%;
    padding: 8px 10px;
    background: #151311;
    border: 1px solid #221F1C;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--ease);
}
.departures__row:hover { background: #1F1C19; border-color: var(--c, var(--line-a)); transform: translateX(3px); }
.departures__bullet { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c, var(--line-a)); color: var(--on-color); font: 400 13px/1 var(--f-poster); font-synthesis: none; }
.departures__what { display: grid; gap: 3px; min-width: 0; }
.departures__what b { font: 800 14px/1.1 var(--f-head); }
.departures__what span { overflow: hidden; color: var(--paper-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.departures__copy { color: var(--paper-3); font: 700 10.5px/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.departures__row:hover .departures__copy { color: var(--c, var(--line-a)); }
.departures__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 4px 0; color: var(--paper-3); font-size: 12px; }

.flaps { display: inline-flex; gap: 2px; min-width: 0; overflow: hidden; }
.flap {
    display: inline-grid;
    place-items: center;
    width: 0.86em;
    height: 1.4em;
    border-radius: 2px;
    background: linear-gradient(180deg, #24211E 0 49%, #000 49% 51%, #1D1A18 51%);
    color: #FFF3DC;
    font: 800 16px/1 var(--f-cond);
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.flap.is-flip { animation: flap 0.09s linear; }
.flaps--c .flap { color: var(--c, var(--line-a)); }
@keyframes flap { 50% { transform: rotateX(-70deg); filter: brightness(0.6); } }

/* "An updated visitor's guide" */
.guide-intro { position: relative; display: grid; justify-items: center; gap: 14px; padding-block: 56px 10px; text-align: center; }
.metro {
    position: relative;
    display: grid;
    align-content: space-between;
    width: 260px;
    aspect-ratio: 1.6;
    margin-top: 34px;
    padding: 16px 18px;
    border: 0;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(140deg, #A8F0E6, #4DD6C5 45%, #1FA59C);
    color: #08302F;
    font: inherit;
    text-align: left;
    box-shadow: 10px 16px 0 -2px #188A83, 0 30px 50px -20px rgba(0, 0, 0, 0.9);
    transform: rotate(-9deg);
    cursor: pointer;
    animation: float 6s ease-in-out infinite;
}
.metro::after { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 16px; background: rgba(8, 48, 47, 0.8); }
.metro b { position: relative; z-index: 1; font: 400 32px/1 var(--f-poster); font-synthesis: none; }
.metro small { position: relative; z-index: 1; font: 800 11px/1.2 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.metro small:first-child { margin-top: 26px; }
@keyframes float { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-8px); } }

.district { position: relative; isolation: isolate; background: var(--d-ground); }
.district > .skyline { color: var(--d-ground); background: var(--d-ground-above, var(--ink-1)); }
.route-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 36px; padding-block: 18px 48px; }
.route-head__signs { display: grid; justify-items: start; gap: 14px; min-width: 0; }
.lens { position: relative; width: 220px; height: 220px; flex: none; }
.lens svg { width: 100%; height: 100%; overflow: visible; }
.lens > .sticker { position: absolute; top: 8px; left: -18px; z-index: 1; --rot: -8deg; }
.lens__ring { fill: none; stroke: var(--d); stroke-width: 4; filter: drop-shadow(0 0 8px var(--d)); }
.lens__street { stroke: rgba(242, 236, 226, 0.12); stroke-width: 3; }
.lens__route { fill: none; stroke: var(--d); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; animation: march 1.2s linear infinite; }
.lens__pin { fill: var(--d); }
.lens__pin-text { fill: var(--on-color); font: 800 13px var(--f-head); text-anchor: middle; dominant-baseline: central; }
@keyframes march { to { stroke-dashoffset: -18; } }

.stops { display: grid; gap: 56px; padding-bottom: 56px; }
.stops > *, .mustdos > * { min-width: 0; }
.stoprow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; }
.stoprow:nth-child(even) .stoprow__text { order: 2; }
.stoprow__text { display: grid; justify-items: start; gap: 12px; }
.stoprow__head { display: flex; align-items: center; gap: 10px; }
.stoprow__text h3 { font: 800 24px/1.15 var(--f-head); }
.stoprow__text p { max-width: 46ch; margin: 0; color: var(--paper-2); }
.stoprow .photo { --rot: 1.5deg; }
.stoprow:nth-child(even) .photo { --rot: -1.5deg; }

.cmdticket {
    --notch: var(--d-ground);
    position: relative;
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    background: var(--d);
    border: 0;
    color: var(--on-color);
    font: inherit;
    box-shadow: var(--shadow-sticker);
    transform: rotate(-2deg);
    cursor: pointer;
    transition: transform 0.3s var(--ease);
}
.cmdticket:hover { transform: rotate(1deg) translateY(-2px); }
.cmdticket__main { padding: 9px 14px; font: 800 15px/1 var(--f-head); }
.cmdticket__stub { position: relative; display: grid; place-items: center; padding: 0 10px; border-left: 2px dashed rgba(20, 15, 11, 0.45); font: 800 10px/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.cmdticket__stub::before, .cmdticket__stub::after { content: ""; position: absolute; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--notch); }
.cmdticket__stub::before { top: -6px; }
.cmdticket__stub::after { bottom: -6px; }
.cmdticket__stub svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The pictures next to each stop: little scenes made from real assets */
.scene { position: relative; display: grid; align-content: center; gap: 12px; min-height: 230px; padding: 18px; background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--d) 22%, transparent), transparent 60%), #12100F; font-size: 13px; text-align: left; }
.scene__chat { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 10px; }
.scene__ava { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: hsl(var(--h, 30) 45% 40%); color: #FFF8EE; font: 800 12px/1 var(--f-head); }
.scene__ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; background: #fff; }
.scene__who { font-size: 13px; font-weight: 800; }
.scene__who small { margin-left: 6px; color: var(--paper-3); font-weight: 500; }
.scene__who .tag { margin-left: 6px; padding: 1px 4px; border-radius: 3px; background: #5865F2; color: #fff; font-size: 9px; font-weight: 800; vertical-align: 1px; }
.scene__cmd { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 4px; background: rgba(242, 236, 226, 0.08); color: var(--d); font-weight: 700; }
.scene__embed { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 10px 12px; border-left: 3px solid var(--d); border-radius: 3px; background: rgba(0, 0, 0, 0.35); color: var(--paper-2); }
.scene__embed img { width: 44px; height: auto; }
.scene__chan { display: flex; align-items: center; gap: 8px; color: var(--paper-2); font-weight: 800; }
.scene__chan .pill { margin-left: auto; }
.scene__members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
.scene__member { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--paper-2); font-size: 12.5px; white-space: nowrap; }
.scene__member .scene__ava { width: 24px; height: 24px; font-size: 9px; }
.scene__member.is-talking .scene__ava { box-shadow: 0 0 0 2px var(--win); animation: talk 1.2s ease-in-out infinite; }
@keyframes talk { 50% { box-shadow: 0 0 0 4px rgba(126, 217, 87, 0.4); } }
.scene__team { display: grid; grid-template-columns: 14px repeat(6, minmax(0, 1fr)); align-items: center; gap: 5px; }
.scene__team > i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.scene__hero { position: relative; aspect-ratio: 14 / 19; overflow: hidden; border: 2px solid var(--frame); background: radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--c, #F0642D) 40%, transparent), transparent 70%), #1C1917; }
.scene__hero img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scene__bans { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--paper-3); font: 700 11px/1 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.scene__bans .scene__hero { width: 34px; aspect-ratio: 1; border-color: var(--loss); filter: grayscale(1) brightness(0.6); }
.scene__row { display: grid; grid-template-columns: 42px repeat(4, 32px) minmax(0, 1fr); align-items: center; gap: 7px; }
.scene__row .scene__hero { aspect-ratio: 1; }
.scene__ab { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-4); }
.scene__ab i { width: 72%; height: 72%; background: var(--paper); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.scene__ab.is-ult { border-radius: 5px; background: var(--line-a); transform: rotate(45deg) scale(0.86); }
.scene__ab.is-ult i { background: var(--on-color); transform: rotate(-45deg); }
.scene__row b { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

.callout-wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
.callout-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; max-width: 640px; padding: 24px 30px; background: color-mix(in srgb, var(--d) 18%, var(--ink-2)); }
.callout-card > .sticker--new { position: absolute; left: -8px; top: -10px; }
.callout-card__badge { width: 76px; height: auto; transform: rotate(-6deg); }
.callout-card__kicker { color: var(--paper-2); font-size: 13px; }
.callout-card__title { margin: 2px 0 6px; color: var(--d); font: 900 22px/1.1 var(--f-head); }
.callout-card p { margin: 0; color: var(--paper-2); font-size: 14px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1.5px solid var(--hair-strong); border-radius: var(--radius-pill); color: var(--paper-2); font: 700 11px/1.2 var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.pill--live { border-color: color-mix(in srgb, var(--win) 50%, transparent); color: var(--win); }
.pill--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--win); box-shadow: 0 0 8px var(--win); animation: blink 1.4s infinite; }

/* "The new must-do's" */
.mustdo-head { position: relative; display: grid; justify-items: center; gap: 14px; padding-block: 80px 30px; text-align: center; }
.tonight { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 28px; }
.tonight__cell { position: relative; display: grid; gap: 6px; padding: 26px 16px 16px; background: rgba(242, 236, 226, 0.04); text-align: left; }
.tonight__cell .stopno { position: absolute; top: -14px; left: 14px; width: 28px; height: 28px; font-size: 13px; }
.tonight__num { color: var(--paper); font-size: clamp(46px, 6vw, 74px); }
.mustdos { display: grid; gap: 24px; padding-bottom: 80px; }
.mustdo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 32px; justify-self: center; width: 100%; max-width: 920px; padding: 24px; background: var(--d-panel); }
.mustdo:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.mustdo:nth-child(even) .mustdo__media { order: 2; }
.mustdo__media { min-width: 0; }
.mustdo__text { display: grid; justify-items: start; gap: 8px; }
.mustdo__text p { margin: 0; color: var(--paper-2); font-size: 14px; }
.mustdo__kicker { color: var(--paper-3); font-size: 13px; }
.mustdo__title { margin: 0; font: 900 24px/1.1 var(--f-head); }
.mustdo .btn--amber { margin-top: 6px; }
.stamp { display: inline-grid; place-items: center; width: 66px; height: 66px; margin-top: 6px; padding: 6px; border: 2px dashed var(--d); border-radius: 50%; color: var(--d); font: 800 9px/1.15 var(--f-head); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; transform: rotate(-12deg); }

.podium-mini { display: grid; gap: 8px; padding: 14px; }
.podium-mini__row { display: grid; grid-template-columns: 30px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(242, 236, 226, 0.05); color: var(--paper); transition: transform 0.3s var(--ease), background-color 0.2s; }
.podium-mini__row:hover { background: rgba(242, 236, 226, 0.09); color: var(--paper); transform: translateX(4px); }
.podium-mini__pos { color: var(--d); font-size: 26px; }
.podium-mini__badge { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(242, 236, 226, 0.18)); }
.podium-mini__row b { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.podium-mini__row small { color: var(--paper-3); font-size: 12px; }
.podium-mini__mmr { font: 800 18px/1 var(--f-cond); }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; padding: 16px 14px; background: #14120F; }
.ttile { position: relative; display: grid; color: var(--on-color); text-align: center; background: var(--frame); border: 3px solid var(--frame); box-shadow: 0 10px 16px -10px rgba(0, 0, 0, 0.9); transform: rotate(var(--tilt, 0deg)); transition: transform 0.35s var(--ease); }
.ttile:nth-child(odd) { --tilt: -1.5deg; }
.ttile:nth-child(even) { --tilt: 1.2deg; }
.ttile:hover { z-index: 2; color: var(--on-color); transform: rotate(0deg) translateY(-5px) scale(1.04); }
.ttile img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; background: linear-gradient(180deg, #2B2623, #110F0E); }
.ttile b { padding: 4px 2px 0; overflow: hidden; font: 800 9.5px/1.1 var(--f-head); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ttile__wr { padding-bottom: 3px; color: #2E6B1F; font: 800 12px/1.2 var(--f-cond); }
.tour-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); background: var(--d-panel); color: var(--paper); transform: rotate(-0.8deg); }
.tour-mini:hover { color: var(--paper); }
.tour-mini__stub { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 16px; border-right: 3px dashed var(--ink-1); background: var(--d); color: var(--on-color); text-align: center; }
.tour-mini__stub b { font: 400 26px/0.9 var(--f-poster); font-synthesis: none; }
.tour-mini__stub span { font: 800 10px/1 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.tour-mini__main { display: grid; align-content: center; gap: 6px; min-width: 0; padding: 16px; }
.tour-mini__name { overflow: hidden; font: 400 22px/1.05 var(--f-poster); font-synthesis: none; text-overflow: ellipsis; text-transform: uppercase; }
.tour-mini__facts { color: var(--paper-3); font-size: 13px; }
.mustdo__empty { padding: 24px; border: 1.5px dashed var(--hair-strong); color: var(--paper-3); text-align: center; }

.home-foot { display: grid; gap: 10px; padding-block: 10px 30px; }

/* ==========================================================================
   Data pages: boards, tables, stats
   ========================================================================== */

.board { padding: 18px; overflow-x: auto; animation: rise 0.5s var(--ease) 0.06s backwards; }
.board__empty { margin: 0; color: var(--paper-2); }
.board > .rule, .sim > .rule { margin-bottom: 16px; }
.builder .board > .rule { margin-bottom: 0; }
.board__empty:empty { display: none; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th,
.table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.table th {
    padding-block: 13px 11px;
    background: color-mix(in srgb, var(--d) 14%, var(--ink-2));
    border-bottom: 2px solid var(--d);
    color: var(--d);
    font: 800 11px/1.1 var(--f-head);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table tbody tr { transition: background-color 0.2s; }
.table tbody tr:hover { background: rgba(242, 236, 226, 0.04); }
.table tr.is-you td { color: var(--d); font-weight: 700; }
.table tr.is-you { box-shadow: inset 3px 0 0 var(--d); }
.table__link { color: var(--paper); font-weight: 700; }
.table__link:hover,
.table__link:focus-visible { color: var(--d); text-decoration: underline; text-underline-offset: 3px; }
.table__num { font-variant-numeric: tabular-nums; }
.table__sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.table__sort::after { content: "\2195"; opacity: 0.45; font-size: 11px; }
.table__sort:hover { color: var(--paper); }
.table__sort[data-dir="asc"]::after { content: "\25B2"; opacity: 1; }
.table__sort[data-dir="desc"]::after { content: "\25BC"; opacity: 1; }

/* Chalk rank badges with the rank written underneath. */
.table td.table__rank { text-align: center; }
.rank-badge { display: block; width: 44px; height: 44px; margin: 0 auto 4px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(242, 236, 226, 0.15)); transition: transform 0.3s var(--ease); }
.table tbody tr:hover .rank-badge { transform: rotate(-8deg) scale(1.14); }
.rank-badge__label { display: block; color: var(--paper-2); font: 800 10.5px/1.1 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.table th:has(.table__sort[data-sort="rank"]) { text-align: center; }

/* Leaderboard podium: second, first, third on stepped blocks in podium colours. */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 2vw, 18px); max-width: 780px; margin: 0 auto 28px; padding: 0; list-style: none; }
.podium__place { --c: var(--frame); --h: 116px; display: grid; justify-items: center; gap: 12px; min-width: 0; animation: rise 0.55s var(--ease) both; }
.podium__place--1 { --c: var(--line-l); --h: 156px; animation-delay: 0.08s; }
.podium__place--3 { --c: #E0915A; --h: 88px; animation-delay: 0.16s; }
.podium__who { display: grid; justify-items: center; gap: 6px; min-width: 0; max-width: 100%; color: var(--paper); text-align: center; }
.podium__who:hover { color: var(--paper); }
.podium__portrait { position: relative; display: grid; place-items: center; width: clamp(64px, 11vw, 104px); aspect-ratio: 1; border: 4px solid var(--c); border-radius: 50%; background: var(--night); box-shadow: 0 0 0 4px var(--night), 0 0 28px -6px var(--c); transition: transform 0.3s var(--ease); }
.podium__place--1 .podium__portrait { width: clamp(76px, 13vw, 124px); }
a.podium__who:hover .podium__portrait, a.podium__who:focus-visible .podium__portrait { transform: translateY(-4px) scale(1.04); }
.podium__avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.podium__badge { width: 78%; height: 78%; object-fit: contain; }
.podium__crown { position: absolute; top: -32px; left: 50%; width: 30px; height: 30px; margin-left: -15px; color: var(--c); filter: drop-shadow(0 2px 0 var(--night)); }
.podium__name { max-width: 100%; overflow: hidden; font: 400 clamp(14px, 1.8vw, 19px)/1.1 var(--f-poster); font-synthesis: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.podium__rank { display: inline-flex; align-items: center; gap: 5px; color: var(--paper-2); font: 800 10.5px/1.1 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.podium__rank-badge { width: 22px; height: 22px; object-fit: contain; }
.podium__step { display: grid; align-content: start; justify-items: center; gap: 4px; width: 100%; height: var(--h); padding-top: 12px; border-top: 6px solid var(--c); border-radius: 6px 6px 0 0; background: var(--halftone), linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, var(--ink-2)), var(--ink-2)); box-shadow: var(--shadow-panel); }
.podium__pos { color: var(--c); font: 400 clamp(34px, 5vw, 56px)/1 var(--f-poster); font-synthesis: none; text-shadow: 3px 3px 0 var(--night); }
.podium__place--1 .podium__pos { font-size: clamp(44px, 6.5vw, 72px); }
.podium__mmr { color: var(--paper-2); font: 800 clamp(13px, 1.6vw, 16px)/1 var(--f-cond); font-variant-numeric: tabular-nums; }

/* Leaderboard: big condensed positions, the top three on podium colours. */
#leaderboardTable { table-layout: fixed; }
#leaderboardTable th:nth-child(1) { width: 12%; }
#leaderboardTable th:nth-child(2) { width: 36%; }
#leaderboardTable th:nth-child(3) { width: 22%; }
#leaderboardTable th:nth-child(4) { width: 30%; }
#leaderboardTable th:nth-child(4),
#leaderboardTable td:nth-child(4) { padding-right: 24px; text-align: right; }
#leaderboardTable td:nth-child(1) { color: var(--paper-3); font: 800 26px/1 var(--f-cond); }
#leaderboardTable td:nth-child(2) { overflow-wrap: anywhere; font-weight: 700; }
#leaderboardTable td:nth-child(4) { font: 800 20px/1 var(--f-cond); }
#leaderboardTable tbody tr:nth-child(1) td:nth-child(1) { color: var(--line-l); font-size: 34px; }
#leaderboardTable tbody tr:nth-child(2) td:nth-child(1) { color: var(--frame); font-size: 30px; }
#leaderboardTable tbody tr:nth-child(3) td:nth-child(1) { color: #E0915A; font-size: 28px; }
#leaderboardTable tr.is-link { cursor: pointer; }

@media (max-width: 560px) {
    #leaderboardTable { table-layout: auto; }
    #leaderboardTable th { width: auto !important; }
    #leaderboardTable th:nth-child(4),
    #leaderboardTable td:nth-child(4) { padding-right: 10px; }
    #leaderboardTable td, #leaderboardTable th { padding-inline: 8px; }
    #leaderboardTable .rank-badge__label { font-size: 9px; }
}

.stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { position: relative; display: grid; gap: 6px; padding: 16px; background: var(--d-panel); }
.stat__label { color: var(--paper-3); font: 700 11px/1.2 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.stat__value { color: var(--paper); font: 800 clamp(28px, 3vw, 40px)/1 var(--f-cond); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats__heroes { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.stats__heroes li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.22); color: var(--paper-2); }

.settings { display: grid; gap: 16px; }
.settings__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.settings__field { display: grid; gap: 6px; }
.settings__field input[aria-invalid="true"] { border-color: var(--loss); }
.settings__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.settings__status { min-height: 1.4em; margin: 0; color: var(--paper-2); }
.settings__status.is-error { color: var(--loss); }
.settings__status.is-good { color: var(--win); }
.settings__caption { padding-bottom: 8px; caption-side: top; color: var(--paper-3); font-size: 12px; text-align: left; }

/* ---------- Player profile: the ID card ---------- */

.profile__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin: 6px 0 18px;
    padding: 24px;
    animation: rise 0.5s var(--ease) backwards;
}
.profile__avatar { width: 112px; height: 112px; object-fit: cover; border: 4px solid var(--frame); background: var(--ink-3); box-shadow: var(--shadow-photo); transform: rotate(-3deg); }
.profile__head:has(.profile__avatar[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
.profile__who { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.profile__name { margin: 0; overflow-wrap: anywhere; color: var(--paper); font: 400 clamp(28px, 4.4vw, 50px)/1 var(--f-poster); font-synthesis: none; letter-spacing: 0.01em; text-transform: uppercase; }
.profile__account { color: var(--paper-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.profile__rank { display: grid; justify-items: center; gap: 6px; text-align: center; }
.profile__badge { width: 84px; height: 84px; }
.profile__head:hover .profile__badge { transform: rotate(-8deg) scale(1.08); }
.profile__rank .rank-badge__label { padding: 3px 7px 2px; background: var(--d); color: var(--on-color); box-shadow: var(--shadow-sticker); transform: rotate(-3deg); }
.profile__rank .rank-badge__label:empty { display: none; }
.profile__stats { grid-template-columns: repeat(6, minmax(0, 1fr)); animation: rise 0.5s var(--ease) 0.04s backwards; }
.profile__stats .stat__value { font-size: clamp(22px, 2.3vw, 32px); white-space: normal; overflow-wrap: anywhere; }
/* Long totals like 506 / 316 / 678 shrink to the tile instead of breaking in two. */
.profile__stats .stat { container-type: inline-size; }
#profileTotals { font-size: min(clamp(22px, 2.3vw, 32px), 14cqi); white-space: nowrap; }
.profile__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.profile__rule { flex: 1; min-width: 160px; }

.profile-matches { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

/* Each match carries its result as a coloured spine. */
.match {
    --outcome: var(--paper-3);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 6px 0 0 var(--outcome);
    animation: slide-in 0.35s var(--ease) backwards;
}
.match--win { --outcome: var(--win); }
.match--loss { --outcome: var(--loss); }
.match__summary {
    display: grid;
    grid-template-columns: 84px minmax(140px, 1.5fr) minmax(104px, auto) repeat(4, minmax(64px, 1fr));
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px 10px 20px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.3s var(--ease);
}
.match__summary:hover,
.match.is-open .match__summary { background: var(--d-wash); }
.match__outcome { justify-self: start; padding: 3px 7px 2px; background: var(--outcome); color: var(--on-color); font: 800 11px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: var(--shadow-sticker); transform: rotate(-3deg); }
.match__hero { display: flex; align-items: center; gap: 10px; min-width: 0; }
.match__hero-art { width: 42px; height: 42px; flex: none; object-fit: cover; object-position: top; border: 2px solid var(--frame); background: var(--ink-3); }
.match__hero-text { display: flex; flex-direction: column; min-width: 0; }
.match__hero-name { overflow: hidden; color: var(--paper); font: 800 15px/1.2 var(--f-head); text-overflow: ellipsis; white-space: nowrap; }
.match__mode { color: var(--paper-3); font-size: 11.5px; }
.match__metric { display: flex; flex-direction: column; gap: 2px; }
.match__metric .stat__label { font-size: 10px; }
.match__value { color: var(--paper); font: 800 17px/1 var(--f-cond); font-variant-numeric: tabular-nums; white-space: nowrap; }
.match__when .match__value { color: var(--paper-2); font: 600 13px/1.2 var(--f-body); }
.match__details { display: grid; gap: 14px; padding: 16px 18px 20px 22px; border-top: 1px solid var(--hair); animation: fade-in 0.25s ease; }
.match__note { margin: 0; color: var(--paper-2); }
.match__combat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.match__stat { padding: 12px; background: var(--d-panel); }
.match__stat .stat__value { font-size: 22px; }
.match__build { display: grid; justify-items: start; gap: 14px; }

/* The in-game inventory: 6 × 2 cards tinted by category, tier in the corner. */
.inv { --cell: 52px; display: grid; width: max-content; grid-template-columns: repeat(6, var(--cell)); gap: 5px; padding: 6px; background: rgba(0, 0, 0, 0.32); border-radius: 8px; }
.inv--sm { --cell: 34px; gap: 3px; padding: 4px; border-radius: 6px; }
.inv__slot { --slot: transparent; position: relative; display: grid; place-items: center; width: var(--cell); height: var(--cell); border-radius: 6px; background: var(--slot); box-shadow: inset 0 0 0 1px rgba(242, 236, 226, 0.08), inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
.inv__slot:not([class*="--"]) { background: rgba(242, 236, 226, 0.04); box-shadow: inset 0 0 0 1px rgba(242, 236, 226, 0.08); }
.inv__slot--weapon { --slot: var(--slot-weapon); }
.inv__slot--vitality { --slot: var(--slot-vitality); }
.inv__slot--spirit { --slot: var(--slot-spirit); }
.inv__art { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.inv__tier { position: absolute; right: 2px; bottom: 1px; color: rgba(10, 9, 8, 0.75); font: 800 9px/1 var(--f-cond); letter-spacing: 0.02em; }
.inv--sm .inv__tier { display: none; }
.inv__slot.is-new { outline: 2px solid var(--paper); outline-offset: 1px; }

.inv-time { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; max-width: 640px; }
.inv-time__play { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 2px solid var(--d); border-radius: 50%; background: var(--night); color: var(--d); font: 800 12px/1 var(--f-head); cursor: pointer; }
.inv-time__play:hover, .inv-time__play:focus-visible { background: var(--d); color: var(--night); }
.inv-time__track { position: relative; display: grid; align-items: center; height: 34px; }
.inv-time__ticks { position: absolute; inset: 0 9px; pointer-events: none; }
.inv-time__tick { position: absolute; top: 3px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: var(--paper-3); }
.inv-time__tick--weapon { background: var(--slot-weapon); }
.inv-time__tick--vitality { background: var(--slot-vitality); }
.inv-time__tick--spirit { background: var(--slot-spirit); }
.inv-time__range { width: 100%; margin: 10px 0 0; accent-color: var(--d); cursor: pointer; }
.inv-time__clock { min-width: 4ch; color: var(--paper); font: 800 17px/1 var(--f-cond); font-variant-numeric: tabular-nums; text-align: right; }
/* Stays under the top bar so both teams can be scrubbed while scrolling. */
.match-replay { position: sticky; top: 88px; z-index: 5; display: grid; gap: 10px; margin-bottom: 18px; padding: 14px 18px; box-shadow: var(--shadow-panel); }
@media (max-width: 560px) {
    .inv { --cell: 44px; gap: 4px; }
    .inv--sm { --cell: 34px; gap: 3px; }
}
.match__open { display: inline-flex; margin: 4px 0 12px; font: 800 12px/1 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 720px) {
    .profile__head { grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 18px; }
    .profile__avatar { width: 76px; height: 76px; }
    .profile__rank { grid-column: 1 / -1; grid-auto-flow: column; justify-self: start; align-items: center; gap: 12px; }
    .profile__rank .rank-badge { margin: 0; }
    .profile__badge { width: 60px; height: 60px; }
    .profile__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .match__summary { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
    .match__summary .match__hero { grid-column: span 3; }
    .match__summary .match__grade { grid-column: 1 / -1; }
    .match__combat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Tabs: the active tab wears a sticker that slides between tabs ---------- */

.tabs {
    position: relative;
    display: flex;
    gap: 6px;
    margin: 26px 0 18px;
    padding: 8px 4px 10px;
    overflow-x: auto;
    border-bottom: 1.5px solid var(--hair);
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
    position: relative;
    z-index: 1;
    flex: none;
    padding: 9px 14px 8px;
    background: none;
    border: 0;
    color: var(--paper-3);
    font: 800 15.5px/1 var(--f-head);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s;
}
.tabs__tab:hover { color: var(--paper); }
.tabs__tab.is-active { color: var(--on-color); }
.tabs:not(.has-ink) .tabs__tab.is-active { background: var(--d); box-shadow: var(--shadow-sticker); transform: rotate(-2deg); }
.tabs__ink { position: absolute; left: 0; top: 8px; z-index: 0; width: 40px; height: 32px; background: var(--d); box-shadow: var(--shadow-sticker); transform: translateX(var(--ink-x, 0)) rotate(-2deg); transition: transform 0.5s var(--ease), width 0.5s var(--ease), background-color 0.4s; pointer-events: none; }

.tabs__panel { animation: rise 0.35s var(--ease) backwards; }
.tabs__panel > .plate + .plate,
.tabs__panel > section + section { margin-top: 18px; }

/* Overview: rank chart beside form and top heroes */
.overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 18px; }
.overview .rule { margin: 4px 0 14px; }
.overview .rule:not(:first-child) { margin-top: 22px; }

/* ---------- Charts ---------- */

.chart { width: 100%; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid line { stroke: var(--hair); stroke-width: 1; }
.chart__tick { fill: var(--paper-3); font: 600 11.5px var(--f-head); }
.chart__tick--rank { fill: var(--paper-2); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.chart__axis { fill: var(--paper-2); font: 800 11.5px var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.chart__quadrant { fill: var(--paper-2); font: 800 11.5px var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; stroke: var(--ink-2); stroke-width: 4px; paint-order: stroke; pointer-events: none; }
.chart__grid .chart__minor { stroke-dasharray: 2 4; opacity: 0.6; }
.chart__ref { stroke: var(--paper-3); stroke-width: 1; stroke-dasharray: 4 5; }
.chart__line { fill: none; stroke: var(--d); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: line-draw 1.6s var(--ease) 0.15s forwards; }
.chart__end { fill: var(--d); stroke: var(--ink-1); stroke-width: 3; }
.chart__cross { stroke: var(--paper-3); stroke-width: 1; }
.chart__dot { fill: var(--paper); stroke: var(--ink-1); stroke-width: 2; }
.chart__hit { fill: transparent; cursor: crosshair; }
.chart__mark { cursor: pointer; outline: none; animation: mark-pop 0.5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 12ms); }
.chart__ring { fill: var(--ink-3); stroke: var(--frame); stroke-width: 2; transition: stroke 0.2s; }
.chart__mark:hover .chart__ring,
.chart__mark:focus-visible .chart__ring { stroke: var(--d); stroke-width: 3; }
.chart__mark .chart__hit { cursor: pointer; }
.chart__mark.is-link { cursor: pointer; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-pop { from { opacity: 0; } }

.chart-tip {
    position: fixed;
    z-index: var(--z-tooltip);
    max-width: 260px;
    padding: 9px 12px 8px;
    background: var(--frame);
    color: var(--on-color);
    font-size: 13px;
    box-shadow: 4px 4px 0 var(--night);
    transform: rotate(-1deg);
    pointer-events: none;
}
.chart-tip__title { display: block; margin-bottom: 2px; font: 900 15px/1.15 var(--f-head); }
.chart-tip__line { color: #4A4038; }

/* Recent form: wins are filled tokens, losses are outlined */
.form-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.form-strip__game { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 12.5px/1 var(--f-head); outline: none; animation: pop 0.5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.form-strip__game.is-win { background: var(--win); color: var(--on-color); }
.form-strip__game.is-loss { box-shadow: inset 0 0 0 2px var(--loss); color: var(--loss); }
.form-strip__game.is-unknown { box-shadow: inset 0 0 0 1.5px var(--hair-strong); color: var(--paper-3); }
.form-strip__game:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.top-heroes, .people { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.top-heroes__hero, .people__person {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(110px, 150px);
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.22);
    animation: slide-in 0.3s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}
.top-heroes__games, .people__games { color: var(--paper-3); font-size: 12px; white-space: nowrap; }
.top-heroes__hero { grid-template-columns: minmax(0, 1fr) minmax(110px, 150px); }
.top-heroes__hero .hero-cell__name { display: grid; line-height: 1.2; }
.top-heroes__hero .top-heroes__games { font-weight: 400; }
.people__link { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--paper); }
.people__link:hover .people__name { color: var(--d); }
.people__avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 2px var(--frame); }
.people__name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

/* Rate bars: win rate diverges from a 50% midline, pick rate grows from zero */
.rate { display: grid; grid-template-columns: minmax(48px, 1fr) auto; align-items: center; gap: 8px; min-width: 110px; }
.rate__track { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--ink-4); }
.rate__track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--paper-3); }
.rate__bar { position: absolute; top: 0; bottom: 0; animation: grow 0.8s var(--ease) backwards; }
.rate__bar.is-up { background: var(--win); }
.rate__bar.is-down { background: var(--loss); }
.rate__bar.is-magnitude { left: 0; background: var(--d); border-radius: 4px; }
.rate:has(.is-magnitude) .rate__track::after { display: none; }
.rate__value { min-width: 48px; color: var(--paper); font: 800 15px/1 var(--f-cond); font-variant-numeric: tabular-nums; text-align: right; }

.hero-cell, .item-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hero-cell__art { width: 34px; height: 34px; flex: none; object-fit: cover; object-position: top; border: 2px solid var(--frame); background: var(--ink-3); }
.hero-cell__name { font-weight: 700; white-space: nowrap; }
.item-cell__art { width: 34px; height: 34px; flex: none; padding: 4px; object-fit: contain; border-radius: 6px; background: var(--slot-color, var(--brass-soft)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 -5px 0 rgba(0, 0, 0, 0.18); }
.item-cell--weapon { --slot-color: var(--slot-weapon); }
.item-cell--vitality { --slot-color: var(--slot-vitality); }
.item-cell--spirit { --slot-color: var(--slot-spirit); }
.item-cell__text { display: grid; min-width: 0; }
.item-cell__name { font-weight: 700; white-space: nowrap; }
.item-cell__slot { color: var(--slot-color, var(--paper-3)); font: 800 10px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }

.data-table td { vertical-align: middle; }
.data-table tbody tr { animation: fade-in 0.3s ease-out backwards; }

/* ---------- Meta ---------- */

.meta-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 20px; margin-bottom: 10px; }
.meta-filters__band { display: grid; gap: 6px; min-width: 180px; }
.meta-filters__note { margin: 0 0 8px; color: var(--paper-3); font-size: 13px; }
.meta-footnote { max-width: 72ch; margin: 12px 0; color: var(--paper-3); font-size: 12.5px; }

/* Tier list: a big lettered disc per row, polaroid tiles that drop in */
.tier-list { display: grid; gap: 22px; }
.tier-row {
    --tier: var(--line-s);
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    animation: slide-in 0.45s var(--ease) backwards;
    animation-delay: calc(var(--row, 0) * 70ms);
}
.tier-row--s { --tier: var(--line-l); }
.tier-row--a { --tier: var(--line-a); }
.tier-row--b { --tier: var(--line-r); }
.tier-row--c { --tier: var(--line-s); }
.tier-row--d { --tier: var(--ink-5); }
.tier-row__letter {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 84px;
    height: 84px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--tier);
    color: var(--on-color);
    font: 400 44px/1 var(--f-poster);
    font-synthesis: none;
    box-shadow: 0 0 0 4px var(--d-ground), 0 0 0 6px var(--tier);
}
.tier-row--d .tier-row__letter { color: var(--paper); }
.tier-row__heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); align-content: start; gap: 16px 12px; margin: 0; padding: 16px; background: rgba(0, 0, 0, 0.22); list-style: none; }
.tier-card {
    display: grid;
    justify-items: stretch;
    width: 100%;
    background: var(--frame);
    border: 3px solid var(--frame);
    color: var(--on-color);
    text-align: center;
    box-shadow: 0 10px 16px -10px rgba(0, 0, 0, 0.9);
    outline: none;
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.35s var(--ease), box-shadow 0.35s;
    animation: pop-in 0.4s var(--ease) backwards;
    animation-delay: calc(var(--row, 0) * 70ms + var(--i, 0) * 30ms);
}
li:nth-child(odd) > .tier-card { --tilt: -1.5deg; }
li:nth-child(even) > .tier-card { --tilt: 1.2deg; }
.tier-card:hover,
.tier-card:focus-visible { z-index: 2; color: var(--on-color); box-shadow: 0 0 0 2px var(--tier), 0 18px 26px -12px rgba(0, 0, 0, 0.95); transform: rotate(0deg) translateY(-5px) scale(1.04); }
a.tier-card { cursor: pointer; }
.tier-card__art { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top; background: radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--tier) 40%, transparent), transparent 75%), linear-gradient(180deg, #2B2623, #110F0E); }
.tier-card__name { max-width: 100%; padding: 4px 2px 0; overflow: hidden; font: 800 10px/1.1 var(--f-head); letter-spacing: 0.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tier-card__rate { padding-bottom: 3px; font: 800 13px/1.2 var(--f-cond); font-variant-numeric: tabular-nums; }
.tier-card__rate.is-up { color: #2E6B1F; }
.tier-card__rate.is-down { color: #A3212B; }

.tier-chip { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tier, var(--line-s)); color: var(--on-color); font: 400 14px/1 var(--f-poster); font-synthesis: none; }
.tier-chip--s { --tier: var(--line-l); }
.tier-chip--a { --tier: var(--line-a); }
.tier-chip--b { --tier: var(--line-r); }
.tier-chip--c { --tier: var(--line-s); }
.tier-chip--d { --tier: var(--ink-5); color: var(--paper); }
.tier-chip--big { width: 80px; height: 80px; font-size: 42px; box-shadow: 4px 4px 0 var(--night); transform: rotate(-8deg); }

@media (max-width: 900px) {
    .overview { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .tier-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tier-row__letter { justify-self: start; width: 52px; height: 52px; margin: 0 0 0 6px; font-size: 26px; }
    .tier-row__heroes { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 8px; padding: 10px; }
    .top-heroes__hero, .people__person { grid-template-columns: minmax(0, 1fr) minmax(96px, 120px); }
    .people__games { display: none; }
    .data-table { display: block; overflow-x: auto; }
}

/* ---------- Hero page ---------- */

.hero-link { min-width: 0; color: var(--paper); }
.hero-link:hover .hero-cell__name { color: var(--d); }

.hero-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin: 6px 0 18px;
    padding: 24px;
}
.hero-head__art {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: top;
    border: 4px solid var(--frame);
    background: radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--d) 45%, transparent), transparent 75%), linear-gradient(180deg, #2B2623, #110F0E);
    box-shadow: var(--shadow-photo);
    transform: rotate(-3deg);
}
.hero-head__name { color: var(--paper); font: 400 clamp(34px, 5.4vw, 66px)/0.95 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.hero-head__meta { margin: 12px 0 0; color: var(--paper-2); }

.versus-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.versus .rule { margin-bottom: 12px; }
.versus.is-good .rule { color: var(--win); }
.versus.is-bad .rule { color: var(--loss); }
.versus.is-good .rule::after { background: linear-gradient(90deg, color-mix(in srgb, var(--win) 50%, transparent), transparent); }
.versus.is-bad .rule::after { background: linear-gradient(90deg, color-mix(in srgb, var(--loss) 50%, transparent), transparent); }
.versus__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.versus__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 170px);
    grid-template-areas: "hero bar" "hero sub";
    align-items: center;
    column-gap: 12px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.22);
    animation: slide-in 0.3s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 30ms);
}
.versus__row .hero-link { grid-area: hero; }
.versus__row .rate { grid-area: bar; }
.versus__row .versus__sub { grid-area: sub; text-align: right; }
.versus__sub { color: var(--paper-3); font-size: 12px; white-space: nowrap; }

.item-chip {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 6px;
    background: var(--slot-color, var(--ink-4));
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 -6px 0 rgba(0, 0, 0, 0.18);
    outline: none;
    transition: transform 0.25s var(--ease);
}
.item-chip:hover, .item-chip:focus-visible { transform: translateY(-3px) rotate(-4deg); }
.item-chip--weapon { --slot-color: var(--slot-weapon); }
.item-chip--vitality { --slot-color: var(--slot-vitality); }
.item-chip--spirit { --slot-color: var(--slot-spirit); }
.item-chip__art { width: 30px; height: 30px; object-fit: contain; }

.builds, .orders, .live { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.build, .order { padding: 18px 20px; animation: rise 0.45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.build__head { list-style: none; cursor: pointer; }
.build__head::-webkit-details-marker { display: none; }
.build__head::after { content: "+"; float: right; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -32px; border-radius: 50%; background: var(--d); color: var(--on-color); font: 800 18px/1 var(--f-head); }
.build[open] .build__head::after { content: "\2212"; }
.build[open] .build__head { margin-bottom: 12px; }
.build__name { padding-right: 40px; font: 900 20px/1.2 var(--f-head); }
.build__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; color: var(--paper-3); font-size: 13px; }
.build__fav { color: var(--d); font-weight: 700; }
.build__id { color: var(--paper-2); font-variant-numeric: tabular-nums; }
.build__group { margin-top: 14px; }
.build__group-name { margin-bottom: 8px; color: var(--paper-2); font: 800 11px/1 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.build__items { display: flex; flex-wrap: wrap; gap: 8px; }
.build__played { font-weight: 700; }
.build__played.is-up, .build__verdict.is-up { color: var(--win); }
.build__played.is-down, .build__verdict.is-down { color: var(--loss); }
.build__analyze { margin-top: 14px; }
.build__summary { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 6px; color: var(--paper-2); font-size: 14px; }
.build__verdict { margin: 4px 0 0; font-size: 13px; }
.build__rated { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.build__rated-item { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(130px, 190px) minmax(0, 150px); align-items: center; gap: 12px; padding: 6px 8px; background: rgba(0, 0, 0, 0.22); }
.build__rated-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build__rated-item .versus__sub { text-align: right; }

/* ---------- Builder ---------- */

.builder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 18px; }
.builder .board { display: grid; gap: 14px; }
.builder .board > .rule { margin: 0; }
.builder__summary { margin: 0; color: var(--paper-2); }
.builder__summary:empty { display: none; }
.builder__row { grid-template-columns: auto minmax(0, 1fr) minmax(110px, 170px) minmax(0, 130px) auto; animation: rise 0.4s var(--ease) backwards; }
.builder__remove { min-width: 32px; min-height: 32px; padding: 0 8px; border-color: var(--hair-strong); border-radius: 50%; color: var(--paper-3); }
.builder__remove:hover { background: transparent; border-color: var(--loss); color: var(--loss); transform: none; }
.builder__pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 70vh; margin: 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
.builder__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px 6px 6px;
    background: rgba(0, 0, 0, 0.22);
    border: 1.5px solid transparent;
    color: var(--paper);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.25s var(--ease), opacity 0.3s;
}
.builder__item:hover, .builder__item:focus-visible { border-color: var(--slot-color, var(--d)); transform: translateY(-2px) rotate(-0.6deg); }
.builder__item.is-picked { border-color: var(--d); background: var(--d-wash); }
.builder__item .item-cell { min-width: 0; }
.builder__item .item-cell__name { overflow: hidden; text-overflow: ellipsis; }
.builder__cost { flex: none; color: var(--paper-3); font: 800 13px/1 var(--f-cond); font-variant-numeric: tabular-nums; }

/* ---------- Rank simulator ---------- */

.sim { display: grid; gap: 14px; }
.sim__form { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 4px 0; }
.sim__field { display: grid; gap: 8px; min-width: 220px; }
.sim__field output { color: var(--d); font: 800 16px/1 var(--f-cond); }
.sim__field input[type="range"] { width: 100%; height: 30px; accent-color: var(--d); }
.sim__field input[type="number"] { width: 140px; min-height: 42px; padding: 0 12px; background: var(--ink-0); border: 1.5px solid var(--hair-strong); border-radius: var(--radius); color: var(--paper); }
.sim__field input[type="number"]:focus { outline: none; border-color: var(--d); box-shadow: 0 0 0 3px var(--d-soft); }
.sim__result { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.sim__row { padding: 14px; background: rgba(0, 0, 0, 0.22); }
.sim__row dt { margin: 0; }
.sim__row dd { margin: 0; }
.sim__value { margin: 6px 0 0; color: var(--paper); font: 800 26px/1 var(--f-cond); }

@media (max-width: 900px) {
    .builder { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ability orders ---------- */

.order__head { display: grid; grid-template-columns: auto minmax(140px, 220px) auto; align-items: center; gap: 16px; margin-bottom: 14px; }
.order__rank { color: var(--d); font: 800 30px/1 var(--f-cond); }
.order__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.order__step { position: relative; outline: none; }
.order__icon { display: block; width: 42px; height: 42px; padding: 4px; object-fit: contain; border-radius: 50%; background: var(--ink-4); }
.order__num { position: absolute; right: -4px; bottom: -5px; min-width: 18px; padding: 1px 4px 0; background: var(--d); color: var(--on-color); font: 800 10px/1.4 var(--f-head); text-align: center; box-shadow: var(--shadow-sticker); transform: rotate(-4deg); }

/* ---------- Match page ---------- */

.match-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin: 6px 0 18px; padding: 24px; }
.match-head__kicker { display: inline-block; margin: 0 0 12px; padding: 4px 9px 3px; background: var(--d); color: var(--on-color); font: 800 12px/1.2 var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: var(--shadow-sticker); transform: rotate(-3deg); }
.match-head__kicker:empty { display: none; }
.match-head__title { font: 400 clamp(30px, 5vw, 56px)/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.match-head__facts { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 28px; margin: 0; }
.match-head__facts dt { grid-row: 1; color: var(--paper-3); font: 700 11px/1.2 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.match-head__facts dd { grid-row: 2; margin: 0; font: 800 24px/1 var(--f-cond); }

.teams { display: grid; gap: 18px; }
.team { overflow: hidden; }
.team--0 { --team-color: var(--hk); }
.team--1 { --team-color: var(--am); }
.team.is-winner { box-shadow: 0 0 0 2px var(--team-color), var(--shadow-panel); }
.team__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 18px; background: color-mix(in srgb, var(--team-color) 16%, var(--ink-2)); border-bottom: 2px solid var(--team-color); }
.team__title { color: var(--team-color); font: 400 22px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.team__totals { color: var(--paper-2); font-size: 13px; font-weight: 600; }
.team__stamp { margin-left: auto; padding: 4px 10px 3px; background: var(--team-color); color: var(--on-color); font: 800 12px/1.2 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: var(--shadow-sticker); transform: rotate(-4deg); animation: sticker-slap 0.6s var(--ease) 0.3s backwards; }
.team__scroll { padding: 4px 12px 12px; overflow-x: auto; }
.team__table th { background: transparent; border-bottom-color: var(--hair-strong); color: var(--paper-3); }
.team__table .table__num { white-space: nowrap; }
.team__who { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.team__hero .hero-cell__art { width: 40px; height: 40px; }
.team__text { display: grid; min-width: 0; }
.team__name { max-width: 180px; overflow: hidden; color: var(--paper); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.team__name:hover { color: var(--team-color); }
.team__hero-name { color: var(--paper-3); font-size: 12px; }
.team__build { min-width: 240px; }

/* ---------- Ranks ---------- */

.distribution { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.distribution__row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 64px; align-items: center; gap: 16px; animation: slide-in 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.distribution__label { display: flex; align-items: center; gap: 12px; }
.distribution__badge { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(242, 236, 226, 0.15)); transition: transform 0.3s var(--ease); }
.distribution__row:hover .distribution__badge { transform: rotate(-8deg) scale(1.12); }
.distribution__name { font: 800 13px/1.1 var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; }
.distribution__track { height: 26px; padding: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.3); }
.distribution__bar { display: flex; gap: 2px; height: 100%; transform-origin: left; animation: grow 0.9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms + 0.1s); }
.distribution__segment { flex-basis: 0; min-width: 2px; background: var(--d); outline: none; transition: background-color 0.15s; }
.distribution__segment:nth-child(even) { background: color-mix(in srgb, var(--d) 70%, var(--ink-1)); }
.distribution__segment:hover, .distribution__segment:focus-visible { background: var(--paper); }
.distribution__share { color: var(--paper); font: 800 17px/1 var(--f-cond); font-variant-numeric: tabular-nums; text-align: right; }
@keyframes grow { from { transform: scaleX(0); } }

.world__heroes { display: flex; gap: 6px; }
.world__hero { display: inline-block; outline: none; }
.world__hero .hero-cell__art { transition: transform 0.25s var(--ease); }
.world__hero:hover .hero-cell__art { transform: rotate(-6deg) scale(1.1); }
.world__hero:focus-visible .hero-cell__art { outline: 2px solid var(--focus); }

.live { grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); }
.live__match { padding: 16px 18px; animation: rise 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.live__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; color: var(--paper-2); font-size: 13px; text-transform: capitalize; }
.live__dot { display: inline-flex; align-items: center; gap: 6px; color: var(--win); font: 800 11px/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.live__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 8px var(--win); animation: blink 1.4s infinite; }
.live__watchers { margin-left: auto; }
.live__body { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live__body > .live__team { flex: 1 1 0; min-width: 0; }
.live__team { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.live__team:first-child .live__hero { border-color: var(--hk); }
.live__team:last-child .live__hero { border-color: var(--am); }
.live__hero { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top; border: 2px solid var(--frame); background: var(--ink-3); outline: none; }
.live__vs { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--line-a); color: var(--on-color); font: 400 15px/1 var(--f-poster); font-synthesis: none; box-shadow: 3px 3px 0 var(--night); transform: rotate(-8deg); }
.live__lead { position: relative; height: 10px; margin-top: 14px; overflow: hidden; border-radius: 5px; background: var(--am); outline: none; }
.live__lead-bar { position: absolute; inset: 0; background: var(--hk); transform-origin: left; transition: transform 0.6s var(--ease); }

@media (max-width: 900px) {
    .versus-cols { grid-template-columns: minmax(0, 1fr); }
    .hero-head { grid-template-columns: auto minmax(0, 1fr); }
    .hero-head .tier-chip--big { grid-column: 1 / -1; justify-self: start; }
}

/* Phones: every player of a match becomes a compact card. */
@media (max-width: 640px) {
    .team__scroll { padding: 0 10px 6px; overflow-x: visible; }
    .team__table thead { display: none; }
    .team__table, .team__table tbody { display: block; }
    .team__table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
    .team__table tr:last-child { border-bottom: 0; }
    .team__table td { padding: 0; border: 0; }
    .team__table td:first-child, .team__table .team__build { grid-column: 1 / -1; }
    .team__table .team__stat { font-size: 14px; }
    .team__table .team__stat::before { content: attr(data-label); display: block; color: var(--paper-3); font: 700 10px/1.3 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
    .team__who, .team__items { min-width: 0; }
    .team__name { max-width: none; }
    .team__head { padding: 12px; }
    .match-head { padding: 18px; }
    .match-head__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
    .match-head__facts dd { font-size: 18px; overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
    .hero-head { gap: 16px; padding: 18px; }
    .hero-head__art { width: 88px; height: 88px; }
    .distribution__row { grid-template-columns: minmax(0, 1fr) 56px; gap: 6px 10px; }
    .distribution__track { grid-column: 1 / -1; grid-row: 2; height: 20px; }
    .distribution__badge { width: 30px; height: 30px; }
    .order__head { grid-template-columns: auto minmax(0, 1fr); }
    .order__head .versus__sub { grid-column: 1 / -1; }
    .build__rated-item { grid-template-columns: auto minmax(0, 1fr); }
    .build__rated-item .rate, .build__rated-item .versus__sub { grid-column: 1 / -1; text-align: left; }
    .builder__row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .builder__row .rate, .builder__row .versus__sub { grid-column: 1 / -1; }
    .builder__row .builder__remove { grid-row: 1; grid-column: 3; }
    .live__body { flex-direction: column; align-items: stretch; }
    .live__vs { align-self: center; }
}

/* ---------- Room not found ---------- */

.empty {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    min-height: 100vh;
    padding: 24px;
    text-align: center;
}
.empty__mark { width: 70px; height: 70px; padding: 14px; border-radius: 50%; background: var(--loss); color: var(--on-color); box-shadow: 0 0 0 4px var(--d-ground), 0 0 0 6px var(--loss); stroke-width: 2.2; animation: slot-in 0.5s var(--ease) both; }
.empty h1 { padding: 0.12em 0.5em 0.1em; border: 0.07em solid var(--loss); border-radius: var(--radius-pill); background: var(--night); font: 400 clamp(28px, 6vw, 58px)/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; box-shadow: 0 0 0.5em color-mix(in srgb, var(--loss) 40%, transparent); transform: rotate(-3deg); animation: sign-in 0.8s var(--ease) both; }
.empty p { max-width: 46ch; margin: 0; color: var(--paper-2); font-size: 16px; }

/* ==========================================================================
   Draft broadcast effects (js/guide.js): edge light, callouts, finale
   ========================================================================== */

/* "Your turn" lights the screen edge in the side's colour. */
body:has(.prompt[data-side="1"]) .fx--edge { opacity: 1; box-shadow: inset 0 0 0 4px var(--hk), inset 0 0 90px rgba(245, 166, 35, 0.26); animation: edge 1.6s ease-in-out infinite; }
body:has(.prompt[data-side="2"]) .fx--edge { opacity: 1; box-shadow: inset 0 0 0 4px var(--am), inset 0 0 90px rgba(79, 163, 255, 0.26); animation: edge 1.6s ease-in-out infinite; }
@keyframes edge { 50% { opacity: 0.45; } }

.callout {
    position: fixed;
    left: 50%;
    top: 42%;
    z-index: 99;
    max-width: calc(100vw - 24px);
    padding: 10px 26px 8px;
    overflow: hidden;
    background: var(--paper);
    color: var(--on-color);
    font: 400 clamp(28px, 6vw, 76px)/1 var(--f-poster);
    font-synthesis: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 8px 8px 0 var(--night);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-5deg);
    pointer-events: none;
}
.callout.is-red { background: var(--loss); }
.callout.is-amber { background: var(--hk); }
.callout.is-sapphire { background: var(--am); }
.callout.is-show { animation: callout 1.6s var(--ease) both; }
@keyframes callout {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(1.6); }
    16% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
    72% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -60%) rotate(-5deg) scale(0.96); }
}

.shake { animation: shake 0.35s linear; }
@keyframes shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 2px); } 80% { transform: translate(2px, -1px); } }

/* Finale: both lineups when the draft completes */
.finale { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: rgba(10, 9, 8, 0.92); animation: fade-in 0.4s ease both; }
.finale__panel { display: grid; justify-items: center; gap: 24px; width: min(1080px, 100%); animation: rise 0.8s var(--ease) both; }
.finale__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; width: 100%; }
.finale__side { --c: var(--hk); display: grid; gap: 12px; min-width: 0; }
.finale__side--2 { --c: var(--am); }
.finale__name { overflow: hidden; color: var(--c); font: 400 26px/1 var(--f-poster); font-synthesis: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.finale__side--2 .finale__name { text-align: right; }
.finale__lineup { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.finale__card { position: relative; aspect-ratio: 14 / 19; overflow: hidden; border: 3px solid var(--frame); background: radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--c) 45%, transparent), transparent 72%), linear-gradient(180deg, #2B2623, #110F0E); animation: reel-in 0.7s var(--ease) both; animation-delay: calc(0.3s + var(--i, 0) * 0.08s); }
.finale__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.finale__card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 2px 2px; overflow: hidden; background: var(--frame); color: var(--on-color); font: 800 9px/1.1 var(--f-head); text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.finale__vs { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--line-a); color: var(--on-color); font: 400 28px/1 var(--f-poster); font-synthesis: none; box-shadow: 4px 4px 0 var(--night); transform: rotate(-8deg); animation: slam 0.5s var(--ease) 0.5s both; }
@keyframes slam { 0% { opacity: 0; transform: scale(3) rotate(-30deg); } 70% { opacity: 1; transform: scale(0.92) rotate(-4deg); } 100% { transform: scale(1) rotate(-8deg); } }

@media (max-width: 760px) {
    .finale__teams { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
    .finale__vs { justify-self: center; width: 56px; height: 56px; font-size: 20px; }
    .finale__side--2 .finale__name { text-align: left; }
    .finale__lineup { gap: 5px; }
}

/* ==========================================================================
   Motion vocabulary shared by every page
   ========================================================================== */

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.92) rotate(-1.5deg); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes caption-in { from { opacity: 0; transform: translateY(-8px) rotate(-3deg); } }
@keyframes stamp-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(2.2); } }
@keyframes slot-in { from { opacity: 0; transform: scale(1.6) rotate(-8deg); } }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1240px) {
    .topbar--portal .nav__name { display: none; }
    .topbar--portal .nav__item { padding: 4px; }
    .topbar--portal .nav__item.is-active { padding-right: 11px; }
    .topbar--portal .nav__item.is-active .nav__name,
    .topbar--portal .nav__item.is-parent .nav__name { display: inline; }
    .topbar--portal .nav__item.is-parent { padding-right: 11px; }
}

/* Phones and tablets: the line folds into a full-screen line map behind a button. */
@media (max-width: 1000px) {
    .topbar--portal { grid-template-columns: minmax(0, 1fr) auto; }
    .topbar--portal .burger { display: inline-grid; }
    .topbar--portal .nav { display: none; }
    .topbar--portal .user__text { display: none; }

    .topbar--portal .nav.is-open {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: grid;
        grid-auto-rows: max-content;
        align-content: start;
        justify-self: stretch;
        gap: 4px;
        padding: calc(env(safe-area-inset-top, 0px) + 18px) 24px calc(env(safe-area-inset-bottom, 0px) + 28px);
        overflow-y: auto;
        background: rgba(18, 17, 16, 0.985);
        animation: fade-in 0.3s ease both;
    }
    .nav.is-open .nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .nav.is-open .nav__rail { left: 39px; right: auto; top: 96px; bottom: 34px; width: 4px; height: auto; margin: 0; }
    .nav.is-open .nav__train { display: none; }
    .nav.is-open .nav__item {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        min-height: 0;
        padding: 8px 0;
        background: none;
        border: 0;
        box-shadow: none;
        color: var(--paper-2);
        text-align: left;
        animation: slide-in 0.5s var(--ease) backwards;
    }
    .nav.is-open .nav__item:nth-of-type(2) { animation-delay: 0.04s; }
    .nav.is-open .nav__item:nth-of-type(3) { animation-delay: 0.08s; }
    .nav.is-open .nav__item:nth-of-type(4) { animation-delay: 0.12s; }
    .nav.is-open .nav__item:nth-of-type(5) { animation-delay: 0.16s; }
    .nav.is-open .nav__item:nth-of-type(6) { animation-delay: 0.2s; }
    .nav.is-open .nav__item:nth-of-type(7) { animation-delay: 0.24s; }
    .nav.is-open .nav__bullet { position: relative; z-index: 1; width: 44px; height: 44px; font-size: 19px; box-shadow: 0 0 0 4px rgb(18, 17, 16); }
    .nav.is-open .nav__name { display: block !important; color: var(--paper); font: 400 28px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
    .nav.is-open .nav__cap { display: block; grid-column: 2; margin-top: -8px; color: var(--paper-3); font: 500 13px/1.3 var(--f-body); }
    .nav.is-open .nav__item.is-active .nav__name { color: var(--c); }
    .nav__title { color: var(--paper); font: 400 20px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
    .nav__about { margin-top: 18px; justify-self: start; }
    body.is-map-open { overflow: hidden; }
}

@media (max-width: 1080px) {
    .topbar:not(.topbar--portal) { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding-inline: 16px; }
    .topbar:not(.topbar--portal) .status { grid-column: 1 / -1; grid-row: 2; }

    .arena,
    .ability-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; min-height: 0; padding-inline: 12px; gap: 12px; }
    .arena .selector,
    .ability-arena .selector { grid-column: 1 / -1; grid-row: 2; }
    .side, .squad, .selector { overflow: visible; }
    .grid, .ability-grid, .roster, .squad__list { max-height: none; overflow: visible; }
    .roster, .squad__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
    body.is-arena .about-fab { display: none; }
}

@media (max-width: 900px) {
    .stoprow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .stoprow:nth-child(even) .stoprow__text { order: 0; }
    .route-head { gap: 24px; }
    .lens { width: 170px; height: 170px; }
    .callout-card { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .tonight { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
    .profile__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .mustdo, .mustdo:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
    .mustdo:nth-child(even) .mustdo__media { order: 0; }
    .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 6px; padding: 12px 10px; }
}

@media (max-width: 600px) {
    .topbar { gap: 10px; padding-inline: 16px; }
    .brand__sub { display: none; }
    .brand__title { font-size: 14px; line-height: 1.1; white-space: normal; }
    .brand__logo, .brand__mark--img { width: 36px; height: 36px; }
    .topbar--portal #myProfileBtn,
    .topbar--portal #logoutBtn { display: none; }
    .topbar--portal #loginBtn { min-height: 36px; padding: 0 12px; font-size: 11px; }
    .hub { padding-inline: 16px; }
    .wrap { padding-inline: 16px; }
    .phead { padding: 30px 0 26px; }
    .lede, .hub__sub { font-size: 16px; }
    .skyline { height: 66px; }
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reel__card:nth-child(n+4) { display: none; }
    .departures__cols { display: none; }
    .departures__row { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .departures__row .flaps { display: none; }
    .departures__copy { display: none; }
    .metro { width: 220px; }
    .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tiles .ttile:nth-child(n+4) { display: none; }
    .board { padding: 14px; }
    .table th, .table td { padding: 10px; }
    .about-fab { display: none; }
    .phead .scribble { display: none; }
}

@media (max-width: 760px) {
    /* Draft rooms on phones: the two sides sit side by side above the pool. */
    .arena, .ability-arena { gap: 8px; padding: 10px 8px 44px; }
    .side, .squad { gap: 10px; padding: 10px; }
    .side__head { gap: 9px; }
    .side__crest { width: 30px; height: 30px; padding: 6px; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--side); }
    .side__name { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
    .side__label { display: none; }
    .bans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .pick-row { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 4px; }
    .pick-row__art { width: 100%; height: auto; aspect-ratio: 1; }
    .pick-row__player { font-size: 10.5px; }
    .pick-row__hero { display: none; }
    .pick-row.is-filled .pick-row__hero { display: block; max-width: 100%; overflow: hidden; padding: 1px 3px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .card { border-width: 2px; }
    .card__name { padding: 2px 1px; font-size: 7.5px; letter-spacing: 0; }
    .card__stamp { padding: 2px 5px 1px; font-size: 9px; }
    .selector { padding: 10px; }
    .prompt { padding: 10px 12px; font-size: 12px; }
    .status__turn { white-space: normal; font-size: 16px; }
    .topbar:not(.topbar--portal) .brand__title { display: none; }
    .topbar:not(.topbar--portal) .badge-role { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
    .squad__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .fighter { padding: 5px; }
    .fighter__top { gap: 6px; }
    .fighter__body { width: 30px; height: 30px; }
    .fighter__name { font-size: 11px; }
    .fighter__hero { font-size: 10px; }
    .fighter.is-you .fighter__name::after { display: none; }
    .loadout { gap: 3px; }
    .loadout__slot { width: 20px; height: 20px; }
    .loadout__hint { display: none !important; }
    .pool-group { grid-template-columns: minmax(0, 1fr); }
    .pool-group__abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ability--hero { flex-direction: row; justify-content: flex-start; text-align: left; }
    .ability--hero .ability__art { width: 40px; height: 40px; }
    .ability__icon { width: 36px; height: 36px; }
    .link-line { font-size: 10.5px; }
}

/* Narrow phones: the sign-in button and the lines menu leave room for the logo only. */
@media (max-width: 440px) {
    .topbar--portal .brand__title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .fx--grain, .fx--fog { animation: none !important; }
}

/* ---- Dynamo Hub: the desktop app's download line ------------------------ */

.app-release { color: var(--paper-2); font-size: 14px; }
#appDownload[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.app-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.app-feature { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 22px; }
.app-feature h3 { margin: 0; font: 900 21px/1.15 var(--f-head); }
.app-feature p { margin: 0; color: var(--paper-2); font-size: 14px; }
.app-install { display: grid; gap: 12px; margin-top: 18px; }
.app-install__title { margin: 0; font: 900 22px/1.1 var(--f-head); }
.app-steps { display: grid; gap: 10px; margin: 0; padding-left: 22px; color: var(--paper-2); }
.app-steps strong { color: var(--paper); }
.app-hash { margin: 0; color: var(--paper-3); font-size: 12px; overflow-wrap: anywhere; }
.app-hash code { color: var(--paper-2); font: 12px/1.4 ui-monospace, Consolas, monospace; }

/* ---- Site notices: admin messages shown after sign-in (js/notices.js) --- */

.notice {
    --n: var(--line-d);
    position: relative;
    margin: 0;
    padding: 16px 18px 16px 22px;
    background: color-mix(in srgb, var(--n) 9%, var(--ink-3));
    border-radius: var(--radius);
    box-shadow: inset 4px 0 0 var(--n);
    list-style: none;
}
.notice--success { --n: var(--win); }
.notice--warning { --n: var(--hk); }
.notice--danger { --n: var(--loss); }
.notice__title { margin: 0 0 6px; color: var(--paper); font: 900 19px/1.2 var(--f-head); overflow-wrap: anywhere; }
.notice__body { margin: 0; color: var(--paper-2); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.notice-dialog {
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    color: var(--paper);
}
.notice-dialog::backdrop { background: rgba(10, 9, 8, 0.84); }
.notice-dialog[open] .notice-dialog__panel { animation: pop-in 0.45s var(--ease) both; }
.notice-dialog__panel {
    position: relative;
    display: grid;
    gap: 16px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 30px 28px 24px;
    background: var(--ink-2);
    box-shadow: 0 0 0 3px var(--frame), 12px 12px 0 var(--night);
}
.notice-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notice-dialog__head .sticker { --rot: -3deg; }
.notice-dialog__count { color: var(--paper-3); font: 700 12px/1 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.notice-dialog__time { margin: -6px 0 0; color: var(--paper-3); font-size: 12.5px; }
.notice-dialog__actions { display: flex; justify-content: flex-end; }

/* ==========================================================================
   Analysed statistics (stats.js): grades, overview, performance, laning,
   players, awards and the match window
   ========================================================================== */

.profile__modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 22px 0 -8px; }
.profile__modenote { color: var(--paper-3); font-size: 12.5px; }

/* Grades: a letter per tier, the same colours as the hero tier chips */
.grade-chip { --grade: var(--line-s); display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 4px; background: var(--grade); color: var(--on-color); font: 400 14px/1 var(--f-poster); font-synthesis: none; box-shadow: var(--shadow-sticker); transform: rotate(-3deg); }
.grade-chip--s { --grade: var(--line-l); }
.grade-chip--a { --grade: var(--line-m); }
.grade-chip--b { --grade: var(--line-r); }
.grade-chip--c { --grade: var(--line-s); }
.grade-chip--d { --grade: var(--line-a); }
.grade-chip--e { --grade: var(--loss); }
.grade-chip--none { --grade: var(--ink-5); color: var(--paper-2); }

/* Matches: grade slot, day headers and the overview aside */
.match__grade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.match__place { color: var(--paper); font: 800 15px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.match__rank { padding: 2px 5px; border-radius: 3px; background: var(--ink-4); color: var(--paper-2); font: 800 12px/1.1 var(--f-cond); white-space: nowrap; }
.match__rank.is-up, .match-day__rank.is-up { color: var(--win); }
.match__rank.is-down, .match-day__rank.is-down { color: var(--loss); }
.match__awards { color: var(--line-l); font: 800 12.5px/1 var(--f-cond); }
.match-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 10px; padding: 4px 4px 2px; border-bottom: 1px solid var(--hair); }
.match-day:first-child { margin-top: 0; }
.match-day__label { color: var(--paper); font: 800 13px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.match-day__record { color: var(--paper-2); font: 800 13px/1 var(--f-cond); }
.match-day__rank { margin-left: auto; color: var(--paper-3); font: 800 13px/1 var(--f-cond); }
.matches-layout { display: grid; gap: 18px; }
.match-overview .rule { margin-bottom: 12px; }
.match-overview__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 24px; }
.match-overview__top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.match-overview__note { grid-column: 1 / -1; }
.match-overview__section { min-width: 0; }
.match-overview__head { margin: 16px 0 6px; color: var(--d); font: 800 11.5px/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }

.mini-stat { gap: 4px; padding: 10px; }
.mini-stat__value { font-size: clamp(20px, 2vw, 26px); white-space: normal; }
.mini-stat__sub { color: var(--paper-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.kv { display: grid; gap: 2px; margin: 0; }
.kv__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--hair); }
.kv__label { color: var(--paper-2); font-size: 13px; }
.kv__value { margin: 0; color: var(--paper); font: 800 15px/1.2 var(--f-cond); font-variant-numeric: tabular-nums; }

.hero-icon { flex: none; object-fit: cover; object-position: top; border: 2px solid var(--frame); border-radius: 50%; background: var(--ink-3); }
.meter { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--ink-4); }
.meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--d); animation: grow 0.8s var(--ease) backwards; transform-origin: left; }
.meter.is-up .meter__fill { background: var(--win); }
.meter.is-down .meter__fill { background: var(--loss); }

/* Charts drawn by stats.js */
.chart__series { fill: none; stroke: var(--d); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__series--avg { stroke-width: 3.5; }
.chart__series--faint { stroke: var(--hair-strong); stroke-width: 1; }
.chart__series--net { stroke: var(--line-r); stroke-width: 3; }
.chart__series--heal { stroke: var(--win); }
.chart__series--lead { stroke: var(--paper); stroke-width: 3; }
.chart__series--player { stroke-width: 1.8; opacity: 0.8; transition: opacity 0.2s; }
.chart__series--player.is-dim { opacity: 0.18; }
.chart__series--player.is-focus { stroke-width: 4; opacity: 1; }
.chart__pt { fill: var(--paper-3); stroke: var(--ink-1); stroke-width: 1.5; }
.chart__pt.is-win { fill: var(--win); }
.chart__pt.is-loss { fill: var(--loss); }
.chart__grid .chart__zero { stroke: var(--paper-3); stroke-width: 1.5; }
.chart__marker { fill: var(--paper-3); font: 700 10.5px var(--f-head); }
.chart__hit.is-link { cursor: pointer; }

/* Performance */
.perf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.perf .rule { margin-bottom: 12px; }
.perf__wide { grid-column: 1 / -1; }
.perf__state:empty { display: none; }
.perf__streaks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
.perf__streak { padding: 8px 10px; background: rgba(0, 0, 0, 0.22); }
.perf__streak-value { margin: 4px 0 0; color: var(--paper); font: 800 22px/1 var(--f-cond); }
.perf__table td, .perf__table th { padding: 8px 8px; }
.perf__table .rate { min-width: 84px; }
.calendar__grid { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 3px; overflow-x: auto; }
.calendar__day { display: block; width: 14px; height: 14px; border-radius: 3px; background: rgba(242, 236, 226, 0.05); outline: none; }
.calendar__day.is-win-heavy { background: var(--win); }
.calendar__day.is-win { background: color-mix(in srgb, var(--win) 50%, var(--ink-3)); }
.calendar__day.is-even { background: var(--paper-3); }
.calendar__day.is-loss { background: color-mix(in srgb, var(--loss) 50%, var(--ink-3)); }
.calendar__day.is-loss-heavy { background: var(--loss); }
.calendar__day:focus-visible { outline: 2px solid var(--focus); }
.calendar__legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--paper-3); font-size: 11.5px; }
.placements { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; height: 170px; margin: 0; padding: 0; list-style: none; }
.placements__bar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; height: 100%; outline: none; }
.placements__fill { align-self: end; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--paper-3); animation: rise 0.5s var(--ease) backwards; }
.placements__bar.is-top .placements__fill { background: var(--win); }
.placements__bar.is-low .placements__fill { background: var(--loss); }
.placements__count { color: var(--paper-2); font: 800 12px/1.4 var(--f-cond); }
.placements__place { color: var(--paper-3); font: 700 10.5px/1.6 var(--f-head); }
.rank-cell { display: inline-flex; align-items: center; gap: 8px; }
.rank-cell__badge { width: 28px; height: 28px; object-fit: contain; }
.community { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.community__row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 80px minmax(120px, 2fr) 92px; align-items: center; gap: 12px; padding: 7px 10px; background: rgba(0, 0, 0, 0.22); outline: none; animation: slide-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.community__label { color: var(--paper); font-weight: 700; }
.community__value { color: var(--paper); font: 800 16px/1 var(--f-cond); text-align: right; font-variant-numeric: tabular-nums; }
.community__rank { font: 800 13px/1 var(--f-cond); text-align: right; }
.community__rank.is-up { color: var(--win); }
.community__rank.is-down { color: var(--loss); }
.community__row:focus-visible { outline: 2px solid var(--focus); }

/* Hero pool */
.hero-pool { margin-bottom: 18px; }
.hero-pool__table td, .hero-pool__table th { padding: 8px 10px; }
.hero-pool__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1.2fr); gap: 18px 28px; margin-bottom: 14px; }
.hero-pool__style { display: grid; align-content: start; gap: 8px; }
.hero-pool__name { color: var(--d); font: 400 clamp(30px, 4vw, 46px)/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.hero-pool__sub { color: var(--paper-2); font-size: 13.5px; }
.category-bars { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.category-bars__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 32px; align-items: center; gap: 10px; }
.category-bars__label { color: var(--paper-2); font: 700 12px/1 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }
.category-bars__value { color: var(--paper); font: 800 14px/1 var(--f-cond); text-align: right; }

/* Laning */
.laning__filter { display: flex; align-items: center; gap: 10px; }
.laning__summary { display: grid; gap: 12px; margin-bottom: 18px; }
.laning__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.laning__cols .rule { margin-bottom: 10px; }
.lane-results { display: flex; overflow: hidden; border-radius: 4px; }
.lane-results__part { min-width: 64px; padding: 8px 10px; color: var(--on-color); font: 800 13px/1 var(--f-head); white-space: nowrap; outline: none; }
.lane-results__part.is-won { background: var(--win); }
.lane-results__part.is-drew { background: var(--paper-3); }
.lane-results__part.is-lost { background: var(--loss); }
.lanes, .lane-foes { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lane-row { --lane: var(--paper-3); display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 7px 10px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 4px 0 0 var(--lane); animation: slide-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.lane-row.is-won { --lane: var(--win); }
.lane-row.is-lost { --lane: var(--loss); }
.lane-row__result { color: var(--lane); font: 800 12px/1 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }
.lane-row__sides { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lane-row__vs { margin: 0 4px; color: var(--paper-3); font: 700 11px/1 var(--f-head); text-transform: uppercase; }
.lane-row__souls, .lane-row__kda { color: var(--paper-2); font: 800 13px/1 var(--f-cond); white-space: nowrap; }
.lane-foe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(100px, 140px); align-items: center; gap: 10px; padding: 6px 10px; background: rgba(0, 0, 0, 0.22); }

/* Players: solo against duo */
.duo .rule { margin-bottom: 12px; }
.duo__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.duo__card { display: grid; gap: 8px; padding-bottom: 10px; background: var(--d-panel); }
.duo__card .rate { padding: 0 10px; }
.duo__badge { flex: none; padding: 2px 6px; border-radius: 3px; background: var(--d); color: var(--on-color); font: 800 10.5px/1.2 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }
.players-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.players-cols .rule { margin-bottom: 12px; }

/* Awards */
.milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.milestone { --medal: var(--ink-5); display: grid; gap: 6px; padding: 12px 14px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 3px 0 var(--medal); animation: rise 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.milestone.tier-1 { --medal: #C2834F; }
.milestone.tier-2 { --medal: #C9CFD6; }
.milestone.tier-3 { --medal: var(--line-l); }
.milestone.tier-4 { --medal: var(--line-r); }
.milestone.tier-5 { --medal: var(--line-t); }
.milestone__medal { justify-self: start; padding: 2px 7px; border-radius: 3px; background: var(--medal); color: var(--on-color); font: 800 10.5px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.milestone.tier-0 .milestone__medal { color: var(--paper-2); }
.milestone__name { color: var(--paper); font: 800 17px/1.1 var(--f-head); }
.milestone__text { color: var(--paper-3); font-size: 12.5px; }
.milestone__meter .meter__fill { background: var(--medal); }
.milestone.tier-0 .milestone__meter .meter__fill { background: var(--paper-3); }
.milestone__value { color: var(--paper-2); font: 800 13px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.awards__toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--paper-2); font-size: 13px; cursor: pointer; }
.awards { display: grid; gap: 18px; }
.awards__group { --rarity: var(--paper-3); }
.awards__group.is-legendary { --rarity: var(--line-l); }
.awards__group.is-epic { --rarity: var(--line-t); }
.awards__group.is-rare { --rarity: var(--line-d); }
.awards__group.is-uncommon { --rarity: var(--line-m); }
.awards__group.is-common { --rarity: var(--paper-2); }
.awards__group.is-infamous { --rarity: var(--loss); }
.awards__rarity { margin: 0 0 8px; color: var(--rarity); font: 800 12px/1 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.awards__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.award { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; background: rgba(0, 0, 0, 0.24); box-shadow: inset 3px 0 0 var(--rarity); animation: rise 0.35s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.award.is-locked { opacity: 0.45; filter: grayscale(1); }
.award__name { color: var(--paper); font: 800 15px/1.2 var(--f-head); }
.award__count { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--rarity); font: 800 20px/1 var(--f-cond); }
.award__text { color: var(--paper-3); font-size: 12.5px; }
.award .table__link { font-size: 12px; }

/* Match window */
.match-picker { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; }
.match-picker label { display: flex; align-items: center; gap: 10px; }
.team__grade { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.team__mvp { padding: 1px 5px; border-radius: 3px; background: var(--line-l); color: var(--on-color); font: 800 10px/1.3 var(--f-head); letter-spacing: 0.08em; }
.player-tag { --team: var(--hk); display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.player-tag.team-1 { --team: var(--am); }
.player-tag .hero-icon { border-color: var(--team); }
.player-tag__text { display: grid; min-width: 0; line-height: 1.2; }
.player-tag__name { overflow: hidden; color: var(--paper); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.player-tag__hero { color: var(--paper-3); font-size: 11.5px; }
.highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hl-card { display: grid; align-content: start; gap: 10px; padding: 16px; animation: rise 0.4s var(--ease) backwards; }
.hl-card--wide, .hl-card--head { grid-column: span 2; }
.hl-card__line { display: flex; align-items: baseline; gap: 10px; }
.hl-big { color: var(--paper); font: 800 clamp(32px, 3.4vw, 44px)/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.hl-sub { margin: 0; color: var(--paper-2); font-size: 13px; }
.hl-awards, .hl-list, .hl-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hl-award { padding: 3px 8px; border-radius: 3px; background: var(--d); color: var(--on-color); font: 800 11.5px/1.2 var(--f-head); }
.hl-list li { padding: 4px 8px; border-radius: 3px; background: rgba(0, 0, 0, 0.25); color: var(--paper); font-size: 13px; font-weight: 600; }
.hl-legend li { display: inline-flex; align-items: center; gap: 6px; color: var(--paper-2); font-size: 12.5px; }
.hl-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--swatch, transparent); }
.hl-legend li.is-plain::before { display: none; }
.donut { width: 128px; height: 128px; }
.donut__track { fill: none; stroke: var(--ink-4); stroke-width: 14; }
.donut__arc { fill: none; stroke-width: 14; }
.donut__value { fill: var(--paper); font: 800 26px var(--f-cond); }
.donut__label { fill: var(--paper-3); font: 700 10px var(--f-head); text-transform: uppercase; letter-spacing: 0.1em; }
.rival { display: grid; gap: 4px; padding: 8px 0; border-top: 1px dashed var(--hair); }
.rival:first-of-type { border-top: 0; }
.peak-bars { display: flex; align-items: end; gap: 3px; height: 70px; margin: 0; padding: 0; list-style: none; }
.peak-bars__bar { display: flex; align-items: end; flex: 1; height: 100%; outline: none; }
.peak-bars__fill { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--paper-3); }
.peak-bars__bar.is-peak .peak-bars__fill { background: var(--d); }
.lane-table td, .lane-table th { padding: 7px 10px; }
.lane-table tr.team-0 { box-shadow: inset 3px 0 0 var(--hk); }
.lane-table tr.team-1 { box-shadow: inset 3px 0 0 var(--am); }
.lane-table tr.is-focus td { background: var(--d-wash); }
.mvp { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.mvp__row { --team: var(--hk); display: grid; grid-template-columns: 44px minmax(150px, 1.4fr) 44px 52px minmax(160px, 1.3fr) 104px; align-items: center; gap: 12px; padding: 7px 10px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 4px 0 0 var(--team); animation: slide-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.mvp__row.team-1 { --team: var(--am); }
.mvp__row.is-focus { background: var(--d-wash); }
.mvp__place { color: var(--paper); font: 800 18px/1 var(--f-cond); }
.mvp__score { color: var(--paper); font: 800 18px/1 var(--f-cond); text-align: right; }
.mvp__cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; height: 40px; }
.mvp__cat { position: relative; display: flex; align-items: end; padding-bottom: 12px; outline: none; }
.mvp__cat-fill { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--team); }
.mvp__cat-label { position: absolute; bottom: 0; left: 0; right: 0; color: var(--paper-3); font: 700 9px/1 var(--f-head); text-align: center; text-transform: uppercase; }
.mvp__awards { color: var(--line-l); font: 800 12px/1.2 var(--f-head); text-align: right; }
.lane-cards { display: grid; gap: 14px; }
.lane-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lane-card__name { margin: 0; font: 400 22px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.lane-card__verdict { color: var(--paper-2); font: 800 13px/1 var(--f-head); }
.lane-card__verdict.team-0 { color: var(--hk); }
.lane-card__verdict.team-1 { color: var(--am); }
.lane-card__split { display: flex; overflow: hidden; margin-bottom: 10px; border-radius: 4px; }
.lane-card__side { min-width: 90px; padding: 6px 10px; color: var(--on-color); font: 800 12.5px/1 var(--f-head); white-space: nowrap; }
.lane-card__side.team-0 { background: var(--hk); }
.lane-card__side.team-1 { background: var(--am); text-align: right; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.graph-legend__item { --team: var(--hk); display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1.5px solid var(--hair-strong); border-radius: 999px; background: none; color: var(--paper-2); font: 600 12.5px/1 var(--f-body); cursor: pointer; }
.graph-legend__item.team-1 { --team: var(--am); }
.graph-legend__item .hero-icon { border-color: var(--team); }
.graph-legend__item.is-focus, .graph-legend__item:hover { border-color: var(--team); color: var(--paper); }
.samples { overflow-x: auto; }
.samples__table td, .samples__table th { padding: 7px 10px; white-space: nowrap; }
.timeline { display: grid; gap: 3px; max-height: 620px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.timeline__event { --kind: var(--paper-3); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 5px 10px; background: rgba(0, 0, 0, 0.18); box-shadow: inset 3px 0 0 var(--kind); }
.timeline__event.is-kill { --kind: var(--win); }
.timeline__event.is-death { --kind: var(--loss); }
.timeline__event.is-buy { --kind: var(--slot-weapon); }
.timeline__event.is-sell { --kind: var(--paper-3); }
.timeline__event.is-unlock, .timeline__event.is-level { --kind: var(--slot-spirit); }
.timeline__event.is-objective { --kind: var(--line-l); }
.timeline__time { color: var(--paper-3); font: 800 13px/1.3 var(--f-cond); font-variant-numeric: tabular-nums; }
.timeline__text { color: var(--paper); font-size: 13.5px; }

/* Replay map: the minimap with every hero moving over it */
.replay__layout { display: grid; grid-template-columns: minmax(0, 620px) minmax(220px, 1fr); align-items: start; gap: 18px; }
.replay__map { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--night); }
.replay__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.85; }
.replay__hero { --team: var(--hk); position: absolute; z-index: 1; transform: translate(-50%, -50%); transition: opacity 0.3s; }
.replay__hero.team-1 { --team: var(--am); }
.replay__hero .hero-icon { display: block; border: 2.5px solid var(--team); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.replay__hero.is-dead { opacity: 0.25; filter: grayscale(1); }
.replay__feed { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.replay__event { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 5px 8px; background: rgba(0, 0, 0, 0.22); color: var(--paper); font-size: 13px; }
.replay__event.is-kill { box-shadow: inset 3px 0 0 var(--loss); }
.replay__event.is-objective, .replay__event.is-midboss { box-shadow: inset 3px 0 0 var(--line-l); }
.replay__controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin-top: 14px; }
.replay__controls .inv-time__range { margin: 0; }

@media (max-width: 980px) {
    .perf, .laning__cols, .hero-pool__head, .replay__layout { grid-template-columns: minmax(0, 1fr); }
    .mvp__row { grid-template-columns: 40px minmax(0, 1fr) 40px 48px; }
    .mvp__cats { grid-column: 1 / -1; }
    .mvp__awards { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 640px) {
    .players-cols, .duo__split { grid-template-columns: minmax(0, 1fr); }
    .perf__streaks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .community__row { grid-template-columns: minmax(0, 1fr) auto; }
    .community__meter { grid-column: 1 / -1; }
    .lane-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
    .lane-row__souls, .lane-row__kda { grid-row: 2; }
    .hl-card--wide, .hl-card--head { grid-column: auto; }
    .replay__controls { grid-template-columns: auto minmax(0, 1fr) auto; }
    .replay__controls .filters { grid-column: 1 / -1; }
}

/* ---------- Match window: player stats, summary, MVP, lanes, map and graphs ---------- */

.match-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.match-steps__links { display: flex; flex-wrap: wrap; gap: 8px; }
.match-steps__link { min-height: 36px; }
.subviews { margin: 0 0 14px; }
.field-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--paper-3); }
.field-inline select, .field-inline__num { min-height: 34px; padding: 0 10px; border: 1.5px solid var(--hair-strong); border-radius: 6px; background: var(--ink-2); color: var(--paper); font: 600 13px/1 var(--f-head); }
.field-inline__num { width: 76px; }
.field-inline .inv-time__range { width: 140px; margin: 0; }
.rank-mark { flex: none; object-fit: contain; }
.place-chip { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--ink-4); color: var(--paper-2); font: 800 12px/1 var(--f-cond); }
.place-chip--1 { background: var(--line-l); color: var(--on-color); }
.place-chip--2 { background: var(--paper-2); color: var(--on-color); }
.place-chip--3 { background: var(--slot-weapon); color: var(--on-color); }
.face { --team: var(--hk); display: inline-flex; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--team); }
.face.team-1 { --team: var(--am); }
.face .hero-icon { display: block; border: 0; }
.figchip { display: grid; justify-items: start; gap: 6px; }
.figchip__mark { display: inline-grid; place-items: center; min-width: 46px; min-height: 40px; padding: 2px 10px; border-radius: 6px; background: var(--ink-4); color: var(--paper); font: 800 26px/1 var(--f-cond); font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sticker); transform: rotate(-2deg); }
.figchip.is-gold .figchip__mark { background: var(--line-l); color: var(--on-color); }
.figchip.is-win .figchip__mark { color: var(--win); }
.figchip.is-loss .figchip__mark { color: var(--loss); }
.figchip__mark .grade-chip { min-width: 38px; height: 30px; font-size: 18px; box-shadow: none; transform: none; }
.figchip__caption { color: var(--paper-3); font: 800 11px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }

/* Player stats: the card on the left, the views on the right */
.pstats { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 16px; }
.pstats__main { min-width: 0; }
.pcard { position: sticky; top: 84px; display: grid; gap: 10px; padding: 16px; }
.pcard__team { --team: var(--hk); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pcard__team.team-1 { --team: var(--am); }
.pcard__side { color: var(--team); font: 400 22px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.pcard__result { font: 800 12px/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.pcard__result.is-win { color: var(--win); }
.pcard__result.is-loss { color: var(--loss); }
.pcard__meta { margin: 0; color: var(--paper-3); font: 700 11px/1.3 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.pcard__art { width: 100%; height: 300px; object-fit: cover; object-position: top center; border-radius: 6px; background: var(--ink-1); }
.pcard__line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pcard__place { color: var(--paper); font: 800 26px/1 var(--f-cond); }
.pcard__hero { overflow: hidden; color: var(--paper); font: 400 26px/1 var(--f-poster); font-synthesis: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pcard__pick { width: 100%; min-height: 38px; }
.pcard__profile, .pcard__board { justify-content: center; }
.pcard__kda { margin: 0; color: var(--paper); font: 800 28px/1 var(--f-cond); text-align: center; }
.pcard__items { justify-self: center; }
.pcard__rank { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); }
.pcard__rank-text { display: grid; gap: 2px; }
.pcard__rank-name { color: var(--paper); font: 800 14px/1.1 var(--f-head); }
.pcard__rank-points { color: var(--paper-3); font-size: 12px; }

/* Highlights: an eight-column board of tiles */
.bento { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); grid-auto-flow: row dense; gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; grid-area: var(--area, auto / span 2); outline: none; animation: rise 0.4s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tile__titles { display: grid; gap: 2px; min-width: 0; }
.tile__title { margin: 0; color: var(--d); font: 800 12px/1.2 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.tile__sub { color: var(--paper-3); font-size: 12px; }
.tile__link { flex: none; padding: 2px 0; border: 0; background: none; color: var(--paper-3); font: 800 10.5px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, color 0.2s; }
.tile__link:hover, .tile__link:focus-visible { color: var(--d); }
@media (hover: hover) {
    .tile__link { opacity: 0; }
    .tile:hover .tile__link, .tile:focus-within .tile__link { opacity: 1; }
}
.tile__body { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.tile__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tile__value { color: var(--paper); font: 800 clamp(30px, 3vw, 44px)/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.tile__value--sm { font-size: 26px; }
.tile__caption { color: var(--paper-2); font: 800 12px/1.2 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }
.tile__note { margin: 0; color: var(--paper-3); font-size: 12.5px; }
.tile__detail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 10px 14px; border-radius: 0 0 var(--radius) var(--radius); background: color-mix(in srgb, var(--ink-1) 94%, transparent); color: var(--paper); font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.tile:hover .tile__detail, .tile:focus .tile__detail, .tile:focus-within .tile__detail { opacity: 1; transform: none; }
.tile__stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.tile__row { display: flex; align-items: center; gap: 12px; }
.tile__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile__duo-cell { display: grid; gap: 6px; padding: 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); }
.kd { max-height: 330px; }
.kd__mark { outline: none; }
.kd__ring { fill: var(--ink-3); stroke: var(--hk); stroke-width: 2.5; }
.kd__mark.team-1 .kd__ring { stroke: var(--am); }
.kd__mark.is-focus .kd__ring { stroke: var(--d); stroke-width: 4; }
.splitbar { display: flex; height: 8px; overflow: hidden; border-radius: 4px; background: var(--ink-4); }
.splitbar__part { display: block; height: 100%; }
.splitbar__part--weapon { background: var(--slot-weapon); }
.splitbar__part--vitality { background: var(--slot-vitality); }
.splitbar__part--spirit { background: var(--slot-spirit); }
.peak-bars { position: relative; }
.peak-bars--team { height: 110px; }
.peak-bars__bar.is-over .peak-bars__fill { background: var(--paper-2); }
.peak-bars__even { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--paper-3); pointer-events: none; }
.peak-bars__axis { display: flex; justify-content: space-between; color: var(--paper-3); font: 700 10.5px/1 var(--f-head); }
.kill-types { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.hl-legend--grid { display: grid; gap: 6px; }
.h2h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h2h__side { display: grid; justify-items: center; gap: 4px; }
.h2h__tally { color: var(--paper); font: 800 24px/1 var(--f-cond); }
.h2h__pick { width: 100%; min-height: 32px; }
.h2h__rows { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.h2h__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 6px; }
.h2h__fig { color: var(--paper-2); font: 800 15px/1 var(--f-cond); text-align: center; }
.h2h__fig.is-win { color: var(--win); }
.h2h__fig.is-loss { color: var(--loss); }
.h2h__mid { display: grid; justify-items: center; gap: 2px; }
.h2h__delta { font: 800 11px/1 var(--f-cond); }
.h2h__delta.is-up { color: var(--win); }
.h2h__delta.is-down { color: var(--loss); }
.h2h__stat { color: var(--paper-3); font: 700 10px/1.1 var(--f-head); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }

/* Showcase: playstyle, build and the stats */
.showcase { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr); align-items: start; gap: 14px; }
.sc-stats { grid-column: 1 / -1; }
.sc-style { display: grid; justify-items: center; gap: 6px; }
.radar { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.radar__ring { fill: none; stroke: var(--hair); }
.radar__axis { stroke: var(--hair); }
.radar__shape { fill: color-mix(in srgb, var(--d) 30%, transparent); stroke: var(--d); stroke-width: 2.5; stroke-linejoin: round; }
.radar__label { fill: var(--paper-2); font: 800 10.5px var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; }
.sc-style__name { margin: 0; color: var(--paper); font: 400 22px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.sc-build { display: grid; gap: 12px; }
.sc-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-event { --kind: var(--paper-3); display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 3px 0 0 var(--kind); }
.sc-event.is-buy { --kind: var(--win); }
.sc-event.is-sell { --kind: var(--loss); }
.sc-event.is-unlock, .sc-event.is-level { --kind: var(--slot-spirit); }
.sc-event__art { flex: none; border-radius: 4px; }
.sc-event__text { display: grid; flex: 1; min-width: 0; }
.sc-event__name { overflow: hidden; color: var(--paper); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sc-event__verb { color: var(--paper-3); font-size: 12px; }
.sc-event__time { color: var(--paper-2); font: 800 13px/1 var(--f-cond); }
.sc-build__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.sc-build__col { display: grid; align-content: start; gap: 8px; min-width: 0; }
.sc-build__col--wide { min-width: 160px; padding-right: 8px; }
.sc-inv { justify-self: start; }
.agrid { display: grid; gap: 8px; }
.agrid__row { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; }
.agrid__art { border-radius: 6px; background: var(--ink-1); }
.agrid__name { overflow: hidden; color: var(--paper-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agrid__track { position: relative; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, 0.25); }
.agrid__pip { position: absolute; top: 50%; width: 10px; height: 10px; background: var(--paper); outline: none; transform: translate(-50%, -50%) rotate(45deg); transition: opacity 0.2s; }
.agrid__pip.is-unlock { background: var(--slot-spirit); }
.agrid__pip.is-later { opacity: 0.2; }
.sc-stats__body { display: grid; gap: 12px; margin-top: 12px; }
.rstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.rstat { display: grid; justify-items: center; gap: 5px; padding: 10px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); text-align: center; }
.rstat__value { color: var(--paper); font: 800 22px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.rstat__label { color: var(--paper-3); font: 700 10.5px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.catcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.catcard { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 3px 0 var(--cat); }
.catcard__head { display: flex; align-items: baseline; justify-content: space-between; }
.catcard__name { color: var(--paper); font: 800 15px/1 var(--f-head); }
.catcard__score { color: var(--cat); font: 800 20px/1 var(--f-cond); }
.catcard__meter .meter__fill { background: var(--cat); }
.catcard__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.catcard__label { color: var(--paper-3); font-size: 12px; }
.catcard__value { color: var(--paper); font: 800 15px/1 var(--f-cond); }
.catcard__more { display: grid; gap: 8px; }
.catcard__more summary { color: var(--paper-3); font: 800 11px/1.2 var(--f-head); letter-spacing: 0.06em; cursor: pointer; }
.sbreak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sbreak__card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); }
.sbreak__card--wide { grid-column: span 2; }
.chart__series--farm { stroke: var(--line-l); }
.chart__series--fight { stroke: var(--loss); }
.butterfly { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.butterfly__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; outline: none; }
.butterfly__side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.butterfly__side.is-taken { justify-content: flex-end; }
.butterfly__bar { display: block; height: 10px; border-radius: 3px; }
.butterfly__side.is-taken .butterfly__bar { background: var(--loss); }
.butterfly__side.is-dealt .butterfly__bar { background: var(--win); }
.butterfly__num { min-width: 34px; color: var(--paper-2); font: 800 12px/1 var(--f-cond); }
.butterfly__side.is-taken .butterfly__num { text-align: right; }
.halves td, .halves th { padding: 6px 8px; }
.halves .is-up, .team-mvp__table .is-up { color: var(--win); font-weight: 800; }
.halves .is-down, .team-mvp__table .is-down { color: var(--loss); font-weight: 800; }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.kp-grid__cell { aspect-ratio: 1; border-radius: 3px; background: var(--ink-4); outline: none; }
.kp-grid__cell.is-mine { background: var(--win); }
.herostats { display: grid; gap: 12px; margin-top: 12px; }

/* Against the community: one percentile track per stat */
.pfield { display: grid; gap: 14px; margin-top: 12px; }
.pfield__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pfield__scope { flex-basis: 100%; }
.pfield__group { display: grid; gap: 3px; }
.pfield__name { margin: 0 0 2px; color: var(--d); font: 800 11px/1 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.pfield__row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 64px 92px; align-items: center; gap: 12px; padding: 4px 8px; border-radius: 4px; outline: none; animation: slide-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.pfield__row:hover, .pfield__row:focus-visible { background: rgba(0, 0, 0, 0.22); }
.pfield__label { color: var(--paper); font-size: 13px; font-weight: 600; }
.pfield__track { position: relative; height: 12px; border-radius: 6px; background: var(--ink-4); }
.pfield__track::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--paper-3); }
.pfield__zone { position: absolute; top: 0; bottom: 0; width: 10%; }
.pfield__zone--low { left: 0; border-radius: 6px 0 0 6px; background: color-mix(in srgb, var(--loss) 32%, transparent); }
.pfield__zone--high { right: 0; border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--win) 32%, transparent); }
.pfield__dot { position: absolute; top: 50%; z-index: 1; width: 14px; height: 14px; border: 2px solid var(--ink-1); border-radius: 50%; transform: translate(-50%, -50%); }
.pfield__dot.is-up { background: var(--win); }
.pfield__dot.is-mid { background: var(--line-l); }
.pfield__dot.is-down { background: var(--loss); }
.pfield__value { color: var(--paper-2); font: 800 13px/1 var(--f-cond); text-align: right; }
.pfield__pct { font: 800 13px/1 var(--f-cond); text-align: right; }
.pfield__pct.is-up { color: var(--win); }
.pfield__pct.is-down { color: var(--loss); }
.pfield__axis { display: flex; justify-content: space-between; padding: 0 188px 0 200px; color: var(--paper-3); font: 700 10.5px/1 var(--f-head); }

/* Timeline: a spine with the events on both sides */
.spine { position: relative; margin-top: 12px; overflow: hidden; }
.spine__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--hair-strong); }
.spine__tick { position: absolute; left: 50%; padding: 1px 4px; background: var(--d-panel); color: var(--paper-3); font: 700 10.5px/1 var(--f-cond); transform: translate(-50%, -50%); }
.spine__tick.is-major { z-index: 1; padding: 4px 8px; border: 1.5px solid var(--d); border-radius: 4px; color: var(--paper); font-size: 13px; }
.spine__event { --kind: var(--paper-3); position: absolute; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 2.5px solid var(--kind); border-radius: 50%; background: var(--ink-2); outline: none; transform: translateY(-50%); }
.spine__event.is-left { right: calc(50% + 26px + var(--lane, 0) * 46px); }
.spine__event.is-right { left: calc(50% + 26px + var(--lane, 0) * 46px); }
.spine__event.is-kill { --kind: var(--win); }
.spine__event.is-death { --kind: var(--loss); }
.spine__event.is-buy { --kind: var(--slot-weapon); }
.spine__event.is-sell { --kind: var(--paper-3); opacity: 0.55; }
.spine__event.is-unlock, .spine__event.is-level { --kind: var(--slot-spirit); }
.spine__event:focus-visible { outline: 2px solid var(--focus); }
.spine__art { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.spine__glyph { color: var(--paper); font-size: 16px; }
.spine__badge { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: var(--kind); color: var(--on-color); font: 800 10px/1 var(--f-cond); }
.spine__sample { position: absolute; right: 6px; z-index: 1; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.32); color: var(--line-l); font: 800 12px/1 var(--f-cond); outline: none; transform: translateY(-50%); }

/* Match summary: both teams mirrored around the stat names */
.mirror { display: grid; gap: 12px; }
.mirror__teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mirror__team { --team: var(--hk); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--d-panel); box-shadow: inset 0 3px 0 var(--team), var(--shadow-panel); }
.mirror__team.team-1 { --team: var(--am); flex-direction: row-reverse; }
.mirror__name { display: flex; align-items: center; gap: 10px; }
.mirror__titles { display: grid; gap: 4px; }
.mirror__side { color: var(--team); font: 400 24px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.mirror__result { font: 800 12px/1 var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; }
.mirror__result.is-win { color: var(--win); }
.mirror__result.is-loss { color: var(--loss); }
.mirror__facts { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.mirror__facts dd { margin: 0; }
.mirror__fact { color: var(--paper); font: 800 18px/1.1 var(--f-cond); }
.mirror__scroll { overflow-x: auto; border-radius: var(--radius); background: var(--d-panel); box-shadow: var(--shadow-panel); }
.mirror__table { width: 100%; min-width: 1040px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mirror__table th, .mirror__table td { padding: 6px 4px; text-align: center; }
.mirror__player { --team: var(--hk); padding-top: 12px; vertical-align: top; box-shadow: inset 0 3px 0 var(--team); }
.mirror__player.team-1 { --team: var(--am); }
.mirror__player.is-focus { background: var(--d-wash); }
.mirror__player > .face { margin: 6px 0 4px; }
.mirror__rank, .mirror__grade { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mirror__points { color: var(--paper-3); font: 800 11px/1 var(--f-cond); }
.mirror__who { display: block; max-width: 78px; margin: 0 auto 4px; overflow: hidden; padding: 0; border: 0; background: none; color: var(--paper); font: 700 12px/1.2 var(--f-head); text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mirror__who:hover, .mirror__who:focus-visible { color: var(--d); }
.mirror__label { min-width: 124px; background: rgba(0, 0, 0, 0.2); color: var(--paper-3); font: 800 10.5px/1.2 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.mirror__section th { padding: 14px 6px 6px; color: var(--d); font: 800 11px/1 var(--f-head); letter-spacing: 0.18em; text-transform: uppercase; }
.mirror__value { border-top: 1px solid var(--hair); color: var(--paper-2); font: 700 14px/1 var(--f-cond); }
.mirror__value.is-best { color: var(--win); font-weight: 800; }
.mirror__value.is-focus { background: var(--d-wash); color: var(--paper); }

/* MVP: the race of the scores, comparison, kill score, team MVP and farm impact */
.mvp--race { position: relative; display: block; }
.mvp--race .mvp__row { position: absolute; top: 0; left: 0; right: 0; height: 48px; grid-template-columns: 50px minmax(140px, 1.2fr) 44px 52px minmax(160px, 2fr) 104px; animation: none; transition: transform 0.45s var(--ease); cursor: pointer; }
.mvp__grade .grade-chip { box-shadow: none; transform: none; }
.mvp__stack { display: flex; height: 22px; overflow: hidden; border-radius: 4px; background: rgba(0, 0, 0, 0.3); }
.mvp__seg { display: block; height: 100%; }
.mvp__seg + .mvp__seg { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35); }
.mvp-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.mvp-legend__item { display: grid; gap: 2px; padding: 8px 10px 8px 14px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 4px 0 0 var(--swatch); }
.mvp-legend__name { color: var(--paper); font: 800 13px/1.2 var(--f-head); }
.mvp-legend__text { color: var(--paper-3); font-size: 12px; }
.mvp-play { margin-top: 14px; grid-template-columns: auto minmax(0, 1fr) auto; }
.pstrip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.pchip { --team: var(--hk); display: grid; justify-items: center; gap: 4px; width: 100%; padding: 6px 4px; border: 1.5px solid var(--hair); border-radius: 8px; background: var(--d-panel); color: var(--paper-3); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.pchip.team-1 { --team: var(--am); }
.pchip .hero-icon { border-color: var(--team); }
.pchip:hover, .pchip:focus-visible { border-color: var(--team); color: var(--paper); }
.pchip.is-on { border-color: var(--team); background: color-mix(in srgb, var(--team) 18%, var(--ink-2)); color: var(--paper); }
.pchip__name { max-width: 100%; overflow: hidden; font: 700 11px/1.2 var(--f-head); text-overflow: ellipsis; white-space: nowrap; }
.compare, .kscore, .team-mvp, .farm, .lanes-view { display: grid; gap: 12px; }
.compare__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; }
.compare__side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.compare__side.is-right { flex-direction: row-reverse; text-align: right; }
.compare__names { display: grid; gap: 2px; }
.compare__name { color: var(--paper); font: 400 22px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.compare__vs { color: var(--d); font: 400 30px/1 var(--f-poster); font-synthesis: none; }
.compare__text { margin: 10px 0 0; color: var(--paper); font-size: 15px; line-height: 1.5; }
.compare__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.compare__list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.compare__card { display: grid; gap: 8px; padding: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); }
.compare__row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: center; gap: 6px; }
.compare__pts { color: var(--paper-3); font: 800 11.5px/1 var(--f-cond); }
.compare__row .compare__pts:last-child { text-align: right; }
.compare__metric { display: grid; justify-items: center; gap: 3px; text-align: center; }
.compare__label { color: var(--paper); font: 800 11px/1.2 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }
.compare__values { color: var(--paper-2); font: 800 14px/1 var(--f-cond); }
.compare__bar { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: 3px; }
.compare__bar-part { display: block; min-width: 2px; height: 100%; background: var(--paper-3); }
.compare__bar-part:first-child { background: var(--d); }
.kscore__totals { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 16px; }
.kscore__phase { fill: var(--ink-4); }
.kscore__phase.is-1 { fill: var(--ink-5); }
.kscore__phase.is-2 { fill: color-mix(in srgb, var(--d) 30%, var(--ink-4)); }
.kscore__stem { stroke-width: 1.5; }
.kscore__stem.is-kill { stroke: var(--win); }
.kscore__stem.is-death { stroke: var(--loss); }
.kscore__mark { outline: none; }
.kscore__ring { fill: var(--ink-2); stroke-width: 2.5; }
.kscore__mark.is-kill .kscore__ring { stroke: var(--win); }
.kscore__mark.is-death .kscore__ring { stroke: var(--loss); }
.kscore__pts { font: 800 12px var(--f-cond); }
.kscore__pts.is-kill { fill: var(--win); }
.kscore__pts.is-death { fill: var(--loss); }
.kscore__row { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); align-items: start; gap: 12px; }
.kmap { position: relative; aspect-ratio: 1; overflow: hidden; margin-top: 10px; border-radius: 6px; background: var(--night); }
.kmap__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.8; }
.kmap__dot { position: absolute; width: 12px; height: 12px; border: 2px solid var(--ink-1); border-radius: 50%; outline: none; transform: translate(-50%, -50%); }
.kmap__dot.is-kill { background: var(--win); }
.kmap__dot.is-death { background: var(--loss); }
.kscore__phases { display: grid; gap: 12px; }
.kscore__list { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.kscore__item { --kind: var(--paper-3); display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 3px 0 0 var(--kind); }
.kscore__item.is-kill { --kind: var(--win); }
.kscore__item.is-death { --kind: var(--loss); }
.kscore__time { min-width: 40px; color: var(--paper-3); font: 800 13px/1 var(--f-cond); }
.kscore__points { min-width: 46px; color: var(--kind); font: 800 15px/1 var(--f-cond); }
.kscore__why { color: var(--paper-3); font-size: 12px; }
.team-mvp__tables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team-mvp__team { --team: var(--hk); box-shadow: inset 0 3px 0 var(--team), var(--shadow-panel); }
.team-mvp__team.team-1 { --team: var(--am); }
.team-mvp__team .rule { color: var(--team); }
.team-mvp__table td, .team-mvp__table th { padding: 6px 8px; }
.team-mvp__table tr.is-focus td { background: var(--d-wash); }
.slope { max-width: 720px; margin: 0 auto; }
.slope__line { stroke: var(--hk); stroke-width: 2; opacity: 0.7; }
.slope__line.team-1 { stroke: var(--am); }
.slope__line.is-focus { stroke-width: 4; opacity: 1; }
.slope__move { fill: var(--paper-3); font: 800 12px var(--f-cond); }
.slope__move.is-up { fill: var(--win); }
.slope__move.is-down { fill: var(--loss); }
.slope__name { fill: var(--paper-2); font: 600 12px var(--f-head); }
.farm__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
.farm__side { display: grid; gap: 6px; padding: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 3px 0 var(--line-l); }
.farm__side.is-space { box-shadow: inset 0 3px 0 var(--line-m); }
.farm__title { color: var(--paper); font: 400 20px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.farm__tag { justify-self: start; padding: 3px 8px; border-radius: 3px; background: var(--ink-4); color: var(--paper-2); font: 800 11px/1.2 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; }
.farm__teams { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; }
.farm__team { --team: var(--hk); }
.farm__team.team-1 { --team: var(--am); }
.farm__team .rule { color: var(--team); }
.farm__list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.farm__row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 1.2fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); animation: slide-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.farm__row.is-focus { background: var(--d-wash); }
.farm__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.farm__names { display: grid; gap: 2px; min-width: 0; }
.farm__label { color: var(--paper-3); font: 800 10.5px/1 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.farm__label.is-low { color: var(--line-m); }
.farm__label.is-high, .farm__label.is-highest { color: var(--line-l); }
.farm__meter { display: grid; gap: 4px; }
.farm__bar .meter__fill { background: var(--team); }
.farm__souls { color: var(--paper-3); font-size: 12px; }
.farm__lift { display: flex; align-items: center; gap: 6px; }
.farm__score { color: var(--paper); font: 800 15px/1 var(--f-cond); }
.farm__bonus { min-width: 40px; color: var(--paper-3); font: 800 13px/1 var(--f-cond); text-align: center; }
.farm__bonus.is-up { color: var(--win); }

/* Lanes: pick a lane, the four players and the comparison between them */
.lane-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.lane-picker__lane { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 1.5px solid var(--hair-strong); border-radius: 8px; background: var(--d-panel); color: var(--paper-2); cursor: pointer; }
.lane-picker__lane.is-on, .lane-picker__lane:hover, .lane-picker__lane:focus-visible { border-color: var(--d); color: var(--paper); }
.lane-picker__name { font: 800 12px/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; }
.lane-picker__heroes { display: flex; align-items: center; gap: 6px; }
.lane-picker__vs { color: var(--paper-3); font: 800 11px/1 var(--f-head); }
.lane-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px; }
.lane-head__side { display: flex; flex-wrap: wrap; gap: 16px; }
.lane-head__side.team-1 { justify-content: flex-end; }
.lane-head__player { display: flex; align-items: center; gap: 10px; }
.lane-head__text { display: grid; gap: 2px; }
.lane-head__kda { color: var(--paper-2); font: 800 13px/1 var(--f-cond); }
.lane-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.3fr) minmax(0, 1fr); align-items: start; gap: 12px; }
.lane-grid__side { --team: var(--hk); }
.lane-grid__side.team-1 { --team: var(--am); }
.lane-grid__side .rule { color: var(--team); }
.lane-grid__players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lane-grid__player { display: grid; gap: 6px; min-width: 0; }
.lane-grid__who { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.lane-grid__cell { display: grid; justify-items: center; gap: 2px; padding: 7px 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); }
.lane-grid__cell.is-best .lane-grid__value { color: var(--win); }
.lane-grid__value { color: var(--paper); font: 800 17px/1 var(--f-cond); }
.lane-grid__label { color: var(--paper-3); font: 700 9.5px/1.2 var(--f-head); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.lane-grid__winner { display: grid; justify-items: center; gap: 4px; margin: 10px 0; padding: 10px; border: 1.5px solid var(--hair-strong); border-radius: 6px; }
.lane-grid__winner.team-0 { border-color: var(--hk); }
.lane-grid__winner.team-1 { border-color: var(--am); }
.lane-grid__team { color: var(--paper); font: 400 20px/1 var(--f-poster); font-synthesis: none; text-transform: uppercase; }
.lane-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lane-bars__row { display: grid; gap: 4px; }
.lane-bars__line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lane-bars__num { color: var(--paper); font: 800 15px/1 var(--f-cond); }
.lane-bars__label { color: var(--d); font: 800 10.5px/1 var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; }
.lane-bars__split { display: flex; gap: 2px; height: 7px; overflow: hidden; border-radius: 4px; }
.lane-bars__part { display: block; min-width: 2px; background: var(--hk); }
.lane-bars__part.team-1 { background: var(--am); }

/* Realtime map: controls, objectives, health bars and the side panels */
.replay__side { display: grid; align-content: start; gap: 12px; min-width: 0; }
.replay__side .replay__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; }
.replay__step { min-height: 36px; padding: 0 10px; }
.replay__scrub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.replay__scrub .inv-time__range { margin: 0; }
.replay__objective { position: absolute; z-index: 1; width: 12px; height: 12px; border: 2px solid var(--ink-1); background: var(--hk); transform: translate(-50%, -50%) rotate(45deg); transition: opacity 0.3s, background-color 0.3s; }
.replay__objective.team-1 { background: var(--am); }
.replay__objective.is-core, .replay__objective.is-titan { width: 16px; height: 16px; }
.replay__objective.is-down { background: var(--ink-5); opacity: 0.35; }
.replay__hero.is-faded { opacity: 0.3; }
.replay__hero.is-focus { z-index: 2; }
.replay__hero.is-focus .hero-icon { box-shadow: 0 0 0 3px var(--d), 0 2px 6px rgba(0, 0, 0, 0.7); }
.replay__hp { position: absolute; left: 3px; right: 3px; bottom: -6px; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(0, 0, 0, 0.65); }
.replay__hp-fill { display: block; height: 100%; background: var(--win); }
.replay__feed { max-height: 460px; overflow-y: auto; }
.replay__event { grid-template-columns: 44px auto minmax(0, 1fr) auto; align-items: center; }
.replay__event.team-0 { box-shadow: inset 3px 0 0 var(--hk); }
.replay__event.team-1 { box-shadow: inset 3px 0 0 var(--am); }
.replay__text { min-width: 0; }
.replay__art { border-radius: 4px; }
.replay__stats { display: grid; gap: 8px; }
.live-table td, .live-table th { padding: 5px 6px; font-size: 12.5px; }
.live-table.team-0 thead th:first-child { color: var(--hk); }
.live-table.team-1 thead th:first-child { color: var(--am); }
.networth { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.networth__row { --team: var(--hk); display: grid; grid-template-columns: 22px auto minmax(0, 1fr) 52px; align-items: center; gap: 8px; }
.networth__row.team-1 { --team: var(--am); }
.networth__place { color: var(--paper-3); font: 800 13px/1 var(--f-cond); }
.networth__track { height: 16px; overflow: hidden; border-radius: 4px; background: rgba(0, 0, 0, 0.25); }
.networth__bar { display: block; height: 100%; background: var(--team); }
.networth__souls { color: var(--paper); font: 800 13px/1 var(--f-cond); text-align: right; }

/* Graphs: sources, per minute, impact and win chance */
.ingame, .perminute { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); align-items: start; gap: 16px; }
.ingame__side { display: grid; gap: 8px; }
.ingame__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.ingame__total { color: var(--paper); font: 800 18px/1 var(--f-cond); }
.sources { display: grid; gap: 3px; max-height: 360px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.sources__row { display: grid; grid-template-columns: minmax(0, 1fr) 60px 44px; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; border-radius: 4px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 4px 0 0 var(--swatch, transparent); animation: slide-in 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 20ms); }
.sources__row--head { background: none; box-shadow: none; color: var(--paper-3); }
.sources__row.is-peak { background: var(--d-wash); box-shadow: inset 4px 0 0 var(--d); }
.sources__name { overflow: hidden; color: var(--paper); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sources__value { color: var(--paper); font: 800 14px/1 var(--f-cond); text-align: right; }
.sources__share { color: var(--paper-3); font: 800 12px/1 var(--f-cond); text-align: right; }
.chart__series--source { stroke-width: 2.2; }
.chart__series--impact { stroke-width: 3; }
.chart__series--win { stroke: var(--line-l); stroke-width: 3; }
.chart__bar { fill: var(--paper-3); outline: none; }
.chart__bar.is-peak { fill: var(--d); }
.graph-legend__item--static { cursor: default; box-shadow: inset 0 -3px 0 var(--swatch); }
.fights { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.fights__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.22); animation: rise 0.3s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 20ms); }
.fights__time { color: var(--paper-3); font: 800 13px/1 var(--f-cond); }
.fights__kills { display: flex; gap: 8px; font: 800 13px/1 var(--f-cond); }
.fights__kills .team-0, .fights__swing.team-0 { color: var(--hk); }
.fights__kills .team-1, .fights__swing.team-1 { color: var(--am); }
.fights__swing { color: var(--paper-3); font: 800 14px/1 var(--f-cond); }

@media (max-width: 1100px) {
    .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bento > .tile { grid-area: auto / span 2; }
    .bento > .tile--scatter, .bento > .tile--peak { grid-column: span 4; }
    .sbreak { grid-template-columns: 1fr 1fr; }
    .lane-grid { grid-template-columns: 1fr 1fr; }
    .lane-grid__mid { grid-column: 1 / -1; order: -1; }
    .pfield__row { grid-template-columns: 150px minmax(0, 1fr) 56px 86px; }
    .pfield__axis { padding: 0 166px 0 170px; }
}
@media (max-width: 980px) {
    .pstats, .showcase, .ingame, .perminute, .kscore__row, .team-mvp__tables, .farm__teams, .farm__intro,
    .mirror__teams, .compare__cols { grid-template-columns: minmax(0, 1fr); }
    .pcard { position: static; }
    .pcard__art { height: 220px; }
    .pstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .mvp--race .mvp__row { grid-template-columns: 44px minmax(0, 1fr) 40px 48px; }
    .mvp--race .mvp__stack { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 4px; }
    .mvp--race .mvp__awards { display: none; }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento > .tile, .bento > .tile--scatter, .bento > .tile--peak { grid-area: auto; grid-column: auto; }
    .sbreak, .lane-grid, .sc-build__row { grid-template-columns: minmax(0, 1fr); }
    .sbreak__card--wide { grid-column: auto; }
    .pfield__row { grid-template-columns: minmax(0, 1fr) auto; }
    .pfield__track { grid-column: 1 / -1; grid-row: 2; }
    .pfield__value, .pfield__axis { display: none; }
    .compare__head, .lane-head { grid-template-columns: minmax(0, 1fr); }
    .compare__side.is-right { flex-direction: row; text-align: left; }
    .lane-head__side.team-1 { justify-content: flex-start; }
    .farm__row { grid-template-columns: minmax(0, 1fr) auto; }
    .farm__meter { grid-column: 1 / -1; grid-row: 2; }
    .spine__event { width: 34px; height: 34px; }
    .spine__event.is-left { right: calc(50% + 20px + var(--lane, 0) * 38px); }
    .spine__event.is-right { left: calc(50% + 20px + var(--lane, 0) * 38px); }
    .spine__art { width: 28px; height: 28px; }
    .spine__sample { display: none; }
}