/* Scrolls SMP: the final layer (final simple round, 2026-10-25; docs/DESIGN.md and docs/PLAN-FINAL-SIMPLE.md).
   Loaded after site.css and replaces the old premium layer. Simple and confident like mcpvp.com and mctiers.gg: flat
   surfaces, one highlight per section (on the home page only the glow behind #1), rows separated by lines, one tier
   icon, few labels, Inter for text, the pixel face only for the wordmark and the big rank numbers.
   1 tokens and fonts, 2 base and motion, 3 shell, 4 tier icon, 5 home, then one marked section per page. */

/* ================================================================ 1 tokens and fonts */
/* Jersey 10 (OFL 1.1, The Soft Type Project Authors, via Google Fonts v4): a clean pixel face for the wordmark and the
   big rank numbers only (chosen over Pixelify Sans, Silkscreen, Micro 5 and Tiny5: its "c", "5" and "1" stay clear at
   22 px). Licence in static/fonts/LICENSE-jersey10.txt. */
@font-face { font-family: "Jersey 10"; src: url("/static/fonts/jersey10-latin.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }

:root {
  --bg: #0e2618;                 /* the page (mcpvp's navy) */
  --nav: #0a2013;                /* the bar, the search bar */
  --panel: #102e1d;              /* the few real cards */
  --card-bg: #102e1d;
  --row: #0f301d;                /* a slightly lighter row (places 4 and 5) */
  --hover: rgb(255 255 255 / 0.03);
  --line: #1c402b;
  --line-2: #224932;
  --line-3: #2b573d;
  --line-hi: #4b735c;
  --font-px: "Jersey 10", "Inter", system-ui, sans-serif;
  --font-display: var(--font-ui);   /* older rules that still name the display face get Inter */
  --gold-2: #ffd766; --gold-3: #f4b83a;
  --silver-2: #e6eaf3; --silver-3: #b8c0d0;
  --bronze-2: #f2ab70; --bronze-3: #d2864d;
  --t-fast: 150ms; --t-med: 220ms; --t-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sh-card: none; --sh-bar: none; --sh-row: none; --sh-panel: none;
}

/* ================================================================ 2 base and motion */
html, body { background: var(--bg) }
h1, h2, h3, .ptitle, .shead__t, .stitle--lg { font-family: var(--font-ui); letter-spacing: -0.01em }
.ptitle { font: 800 28px / 1.15 var(--font-ui) }
/* page enter: the content fades in and rises 6 px, once */
/* the entrance animations only move things: content is never held at opacity 0, so a page whose animations do not run
   (a background tab, a screenshot, a paused renderer) still shows everything (Polish 2: a faded home page) */
@keyframes f-enter { from { transform: translateY(6px) } }
@keyframes f-fade { from { opacity: 0 } }
@keyframes f-rise { from { transform: translateY(14px) } }
@keyframes f-live { 0% { transform: scale(1); opacity: 0.6 } 80%, 100% { transform: scale(2.4); opacity: 0 } }
main > .wrap, main > section, main > div { animation: f-enter 240ms var(--ease-out) both }
/* the LIVE dot: the only thing that moves for ever */
.ldot, .live__dot { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--live); box-shadow: none; animation: none }
.ldot::after, .live__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: f-live 1.6s var(--ease-out) infinite }
.livechip--paused .live__dot::after { display: none }
/* a player picture that is still on its way: a faint plate, no pulse */
img.is-loading { border-radius: 8px; background: rgb(163 242 196 / 0.06); animation: none }
.shim { position: relative }

/* ================================================================ 3 shell: testing note, nav with the logo notch, search, footer */
.testing { padding: 3px 12px; border-bottom: 1px solid var(--line); background: none; color: var(--dim); font-size: 12px; letter-spacing: 0.01em }
.top { padding-top: 22px }
.nav { height: 52px; margin-bottom: 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--nav); box-shadow: none }
/* the logo sits in a notch of the bar: one piece with it, the same colour, no box of its own. The notch is one SVG
   outline (base.html) that leaves the bar's lower edge in a soft bend, runs round the logo and bends back into the edge;
   its fill hides the edge between the bends. The plaque is only the link, over the bar and the notch. */
.plaque { --hang: 20px; top: 0; z-index: 2; height: calc(100% + var(--hang)); width: 214px; padding: 0 16px; translate: -50% 0; gap: 10px;
  border: 0; border-radius: 0 0 12px 12px; background: none; box-shadow: none }
.notch { position: absolute; top: 100%; left: 50%; z-index: 1; display: none; overflow: visible; translate: -50% 0; pointer-events: none }
.notch__fill { fill: var(--nav) }
.notch__line { fill: none; stroke: var(--line); stroke-width: 1 }
.notch--lg { display: block }
.plaque img { width: 40px; height: 40px; filter: none }
.wordmark { color: var(--gold); background: none; -webkit-text-fill-color: currentColor; filter: none; font: 400 30px / 1 var(--font-px); letter-spacing: 0.02em }
.nav__a { font-weight: 600; font-size: 15px }
.nav__a[aria-current="page"]::after { top: auto; bottom: -11px; height: 2px; background: var(--gold); box-shadow: none }
@media (hover: hover) and (pointer: fine) { .nav__a:hover { translate: none } .nav__a:hover svg { scale: 1 } }
/* the Discord button with the queue state as a dot on its corner (the tooltip says it) */
.cta { position: relative; height: 32px; border-color: transparent; box-shadow: none }
.qdot { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border: 2px solid var(--nav); border-radius: 50%; background: var(--off) }
.qdot--open { background: var(--green) }
.sbar { padding: 0 0 14px }
.sbar input { height: 44px; background: var(--nav); box-shadow: none }
.foot { border-top: 1px solid var(--line); background: var(--foot) }
.foot__logo .wordmark { font-size: 22px }
@media (max-width: 1300px) {
  .notch--lg { display: none } .notch--md { display: block }
  .plaque { width: 180px; padding: 0 12px }
  .plaque img { width: 34px; height: 34px }
  .wordmark { font-size: 26px }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .notch--md { display: none } .notch--sm { display: block }
  .plaque { width: 146px; gap: 6px }
  .plaque img { width: 26px; height: 26px }
  .plaque .wordmark { font-size: 20px }
}
@media (max-width: 900px) {
  .top { padding-top: 10px }
  .nav { height: auto; margin-bottom: 0 }
  .plaque { position: static; height: 36px; width: auto; padding: 0 4px; translate: none; background: none; border-radius: 0 }
  .notch { display: none !important }
  .wordmark { font-size: 26px }
  .nav__a { font-size: 12px }
  .nav__a[aria-current="page"]::after { bottom: 0 }
  .sbar { padding: 12px 0 10px }
}

/* ================================================================ 4 the tier icon
   One tier icon everywhere: the emblem and the tier code in its colour, no box, no border, no glow, no underline.
   tier_tile (.tt) in three sizes, tier_inline (.ti), the kit tile (.ktile), the tag next to a name (.ttag). */
.tt, .ti { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--t-fg); font: 700 14px / 1 var(--font-ui); white-space: nowrap }
.tt { position: relative }
.tt__ic { display: grid; place-items: center; width: 22px; height: 22px; flex: none }
.tt__ic .em, .ti .em { width: 100%; height: 100% }
.ti .em { width: 18px; height: 18px }
.tt .tstep, .ti .tstep { font-size: 0.75em; vertical-align: 0.3em }
.tt--lg { gap: 8px; font-size: 18px }
.tt--lg .tt__ic { width: 30px; height: 30px }
.tt--sm { gap: 5px; font-size: 13px }
.tt--sm .tt__ic { width: 18px; height: 18px }
.ti--lg { gap: 8px; font-size: 16px }
.ti--lg .em { width: 22px; height: 22px }
.tt.tier--unranked, .ti.tier--unranked { color: var(--dim) }
.ttag { min-width: 0; height: auto; padding: 0; border: 0; background: none; color: var(--t-fg); font: 700 12px / 1 var(--font-ui) }
.ttag.tier--unranked { border: 0; background: none; color: var(--dim) }
.ktile { width: auto; min-width: 44px; height: auto; gap: 5px; padding: 4px 2px; border: 0; border-radius: 0; background: none; box-shadow: none }
.ktile::after { display: none }
.ktile__t { padding-top: 0; border-top: 0; font-size: 12px; text-transform: none }
.ktile--empty { min-height: 52px; border: 1px dashed var(--line-3); border-radius: 8px; background: none }
@media (hover: hover) and (pointer: fine) {
  .ktile:not(.ktile--empty):hover { translate: none; border: 0; background: none; box-shadow: none }
  .ktile:not(.ktile--empty):hover .ktile__em { transform: none }
}

/* ================================================================ 5 home: Top Players, places 4 and 5, Tier tests
   The podium at mcpvp's size (1440 wide: #1 190 x 300, #2 170 x 260, #3 170 x 250, 22 px apart), so the podium, places
   4 and 5 and "Full leaderboard" fit on the first screen with the nav and the search bar. The figures are the owner's
   reference: our three-quarter render (#2 turned right, #3 left, towards #1), cut by the pedestal's glowing top edge at
   the knees, a soft contact shadow behind the legs (.pod__shade) and the pedestal's colour lighting them from below
   (.pod__light, screen blend). Figure sizes follow from the render (600 x 800, the figure from 5 % to 95 % of its
   height; the pedestal edge cuts it at 76 %, just above the knees): --fh is the picture height, --ft its top. */
.home { display: block }
.tops { position: relative; text-align: center }
.tops__t { margin: 2px 0 18px; color: var(--gold); font: 800 28px / 1.1 var(--font-ui); letter-spacing: -0.01em }
.tops__pod { position: relative; width: max-content; max-width: 100%; margin: 0 auto }
.podium { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 22px }
.pod { --w: 170px; --h: 260px; --ph: 84px; --fh: 180px; --ft: 39px; --name: var(--silver-2); --edge: #f4f7ff; --lit: rgb(205 216 240 / 0.2);
  --base: linear-gradient(180deg, #4a5264 0%, #3a4152 40%, #2c3240 100%); --num: #eef1f7; --num-sh: #1f2430;
  position: relative; flex: none; width: var(--w); animation: f-rise var(--t-slow) var(--ease-out) var(--delay, 0ms) both }
.pod--1 { --w: 190px; --h: 300px; --ph: 94px; --fh: 214px; --ft: 41px; --name: var(--gold-2); --edge: #fff2c4; --lit: rgb(255 200 80 / 0.22);
  --base: linear-gradient(180deg, #6e5414 0%, #57410f 40%, #3f2f0a 100%); --num: #ffe9a6; --num-sh: #2e2106; order: 2 }
.pod--2 { order: 1; --delay: 90ms }
.pod--3 { --h: 250px; --ph: 80px; --fh: 172px; --ft: 39px; --name: var(--bronze-2); --edge: #ffd6b0; --lit: rgb(240 150 80 / 0.22);
  --base: linear-gradient(180deg, #6a3d1d 0%, #533016 40%, #3d2310 100%); --num: #ffd8b4; --num-sh: #2b1608; order: 3; --delay: 160ms }
/* the one glow of the page: soft gold behind #1 */
.pod--1::before { content: ""; position: absolute; left: -40%; right: -40%; top: -12%; bottom: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 196 64 / 0.16), transparent 80%) }
.pod__card { position: relative; display: block; width: 100%; height: var(--h); overflow: hidden; isolation: isolate; border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 12px; background: linear-gradient(180deg, #153b25 0%, #0e301c 100%); color: var(--name); text-decoration: none;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out) }
.pod--1 .pod__card { border-color: rgb(255 215 102 / 0.22) }

.pod__card:focus-visible { outline: 2px solid var(--name); outline-offset: 3px }
.pod__name { position: absolute; left: 10px; right: 10px; top: 13px; z-index: 3; overflow: hidden; color: var(--name); font: 700 15px / 1.25 var(--font-ui);
  white-space: nowrap; text-overflow: ellipsis }
.pod--1 .pod__name { top: 14px; font-size: 16px }
.nl-14 .pod__name, .pod__name.nl-14, .pod__name.nl-15, .pod__name.nl-16 { font-size: 13px }
.pod__fig { position: absolute; left: 50%; top: var(--ft); z-index: 1; width: calc(var(--fh) * 0.75); height: var(--fh); translate: -50% 0 }
.pod__img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.45)) }
/* the contact shadow: a soft dark pool on the back wall behind the legs, right above the pedestal */
.pod__shade { position: absolute; left: 14%; right: 14%; bottom: calc(var(--ph) - 6px); z-index: 0; height: 34px; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgb(0 0 0 / 0.55), transparent) }
/* the pedestal's light from below: brightens the legs and the wall above the edge in the pedestal colour */
.pod__light { position: absolute; left: 0; right: 0; bottom: var(--ph); z-index: 2; height: 34px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(50% 100% at 50% 100%, var(--lit), transparent 75%) }
.pod__base { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--ph); background: var(--base) }
/* the glowing top edge the figure stands behind */
.pod__base::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--edge);
  box-shadow: 0 0 8px 0 color-mix(in srgb, var(--edge) 70%, transparent) }
/* a soft sheen in the lower middle of the block */
.pod__base::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 110%, rgb(255 255 255 / 0.16), transparent 70%) }
.pod__num { position: absolute; inset: 4px 0 0; z-index: 1; display: grid; place-items: center; color: var(--num); font: 400 64px / 1 var(--font-px);
  text-shadow: 0 3px 0 var(--num-sh) }
.pod--1 .pod__num { font-size: 72px }
/* the podium area like mcpvp's: one big dark panel (darker than the page, a lighter band round the title), the title
   with a soft gold glow, two large laurels filled in gold (scripts/podium_decor.py) with a warm glow round them and
   behind them, a few still sparkles that rise in once, and a thin light line under the podium */
.tops__panel { position: relative; overflow: hidden; isolation: isolate; padding: 28px 24px 22px; border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(52% 38% at 50% 0%, rgb(55 109 78 / 0.26), transparent 72%), linear-gradient(180deg, #0b1a11 0%, #0e2919 34%, #0b1a11 80%) }
.tops__t { text-shadow: 0 1px 17px rgb(250 162 0 / 0.55) }
.pd-defs { position: absolute; width: 0; height: 0; overflow: hidden }
.tops__deco { position: absolute; top: 50%; z-index: 0; width: 250px; aspect-ratio: 250 / 300; pointer-events: none; animation: f-fade 0.8s var(--ease-out) 0.25s both }
.tops__deco::before { content: ""; position: absolute; inset: -26% -36%; z-index: -1;
  background: radial-gradient(closest-side, rgb(255 184 60 / 0.17), rgb(255 184 60 / 0.06) 55%, transparent) }
.tops__deco--l { right: calc(100% + 34px); translate: 0 -50% }
.tops__deco--r { left: calc(100% + 34px); translate: 0 -50% }
.pdeco { display: block; width: 100%; height: 100%; overflow: visible; opacity: 0.88; filter: drop-shadow(0 0 9px rgb(255 186 64 / 0.38)) }
.tops__deco--r .pdeco { transform: scaleX(-1) }
@keyframes f-spark { from { opacity: 0; translate: 0 10px } }
.spark { position: absolute; z-index: 0; width: 3px; height: 3px; border-radius: 50%; background: #fff7dc; box-shadow: 0 0 6px 1px rgb(255 232 170 / 0.7);
  opacity: 0.75; pointer-events: none; animation: f-spark 1.4s var(--ease-out) var(--sd, 0.5s) both }
.spark--3, .spark--8 { width: 10px; height: 10px; border-radius: 0; box-shadow: none; opacity: 0.85;
  background: radial-gradient(closest-side, #fffbe8, #ffd877 55%, transparent 85%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%) }
.spark--1 { left: -92px; top: 6% } .spark--2 { left: -330px; top: 24%; --sd: 0.7s } .spark--3 { left: -70px; top: 68%; --sd: 0.6s }
.spark--4 { left: -296px; top: 86%; --sd: 0.8s } .spark--5 { left: -176px; top: -6%; opacity: 0.5; --sd: 0.9s }
.spark--6 { right: -100px; top: 14%; --sd: 0.6s } .spark--7 { right: -312px; top: 32% } .spark--8 { right: -74px; top: 60%; --sd: 0.75s }
.spark--9 { right: -236px; top: 92%; opacity: 0.5; --sd: 0.85s } .spark--10 { right: -160px; top: -4%; --sd: 0.95s }
.tops__line { display: block; width: min(100%, 1020px); height: 2px; margin: 26px auto 18px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(189 246 213 / 0.25) 10%, rgb(255 255 255 / 0.65) 50%, rgb(189 246 213 / 0.25) 90%, transparent);
  filter: drop-shadow(0 6px 14px rgb(161 242 195 / 0.25)) }
@media (max-width: 1200px) { .tops__deco { width: 210px } }
@media (max-width: 1000px) { .tops__deco { width: 160px } .tops__deco--l { right: calc(100% + 14px) } .tops__deco--r { left: calc(100% + 14px) }
  .spark--2, .spark--4, .spark--7, .spark--9 { display: none } }
/* places 4 and 5: slim rows on a slightly lighter surface */
.slim { display: grid; gap: 8px; width: min(100%, 560px); margin: 0 auto }
.slim__row { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 56px; padding: 0 18px 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--row); color: var(--text); text-align: left; transition: background-color var(--t-fast), border-color var(--t-fast) }
@media (hover: hover) and (pointer: fine) { .slim__row:hover { border-color: var(--line-3); background: #123822 } }
.slim__n { color: var(--muted); font: 400 28px / 1 var(--font-px); text-align: center }
.slim__av { width: 40px; height: 40px; overflow: hidden; border-radius: 8px }
.slim__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0 }
.slim__name { overflow: hidden; color: #fff; font: 700 16px / 1.2 var(--font-ui); white-space: nowrap; text-overflow: ellipsis }
.tops__foot { display: flex; justify-content: center; margin-top: 14px }
.home .more-link { font-size: 15px }
/* Tier tests on the home page: the list, "All tier tests" under it */
.hsec { margin-top: 40px }
.shead { margin-bottom: 12px }
.shead__t { font: 800 22px / 1.2 var(--font-ui) }
.tsub { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; color: var(--soft); font: 700 14px / 1 var(--font-ui) }
.tsub--live { color: var(--live-hi) }
.htests__foot { display: flex; justify-content: center; margin-top: 14px }
/* under the tier tests: the next event (one slim card) and the testing servers (compact rows), side by side */
.hmore { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px 24px; width: min(100%, 980px); margin-inline: auto }
.hmore__col { display: flex; flex-direction: column; min-width: 0 }
.hmore .htests__foot { margin-top: 0; padding-top: 14px }
.hev { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 72px; margin: 0; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--row); color: inherit; text-decoration: none }
.hev.is-live { box-shadow: inset 2px 0 0 var(--live) }
@media (hover: hover) and (pointer: fine) { a.hev:hover { background: #123822 } a.hev:hover .hev__t { text-decoration: underline; text-underline-offset: 3px } }
.hev__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: rgb(245 189 59 / 0.1); color: var(--gold) }
.hev__ic svg { width: 20px; height: 20px }
.hev__id { display: grid; gap: 4px; min-width: 0 }
.hev__t { overflow: hidden; color: #fff; font: 700 16px / 1.25 var(--font-ui); white-space: nowrap; text-overflow: ellipsis }
.hev__s { color: var(--muted); font-size: 13px }
.hev__cd { color: var(--gold); font: 700 14px / 1 var(--font-ui); white-space: nowrap }
.hev--none .hev__t { color: var(--soft) }
.hsrv { display: grid; overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--row); list-style: none }
.hsrv__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 30px; align-items: center; gap: 14px; min-height: 64px; padding: 10px 12px 10px 16px }
.hsrv__row + .hsrv__row { border-top: 1px solid var(--line) }
.hsrv__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: rgb(255 255 255 / 0.04); color: var(--soft) }
.hsrv__ic svg { width: 19px; height: 19px }
.hsrv__id { display: grid; gap: 3px; min-width: 0 }
.hsrv__name { color: #fff; font: 700 15px / 1.25 var(--font-ui) }
.hsrv__ip { overflow: hidden; color: var(--muted); font: 500 13px / 1.2 var(--font-ui); white-space: nowrap; text-overflow: ellipsis }
.hsrv__ip code { font: inherit }
.hsrv__state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap }
.hsrv__state--on { color: var(--green-hi) }
.hsrv__state--on .srv__dot { background: var(--green) }
@media (max-width: 760px) {
  .hmore { gap: 28px }
  .hev { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px }
  .hev__ic, .hsrv__ic { width: 36px; height: 36px }
  .hev__cd { grid-column: 2 }
  .hsrv__row { grid-template-columns: 36px minmax(0, 1fr) auto 30px; gap: 10px; padding: 10px 10px 10px 14px }
}
@media (max-width: 760px) {
  .tops__t { font-size: 24px; margin-bottom: 14px }
  /* the podium scales with the screen: the three cards share the width, the figures follow */
  .tops__pod { width: 100% }
  .podium { gap: 8px }
  .pod { --w: 27.5vw; flex: 0 1 var(--w); --h: 40.8vw; --ph: 12.4vw; --fh: 27.5vw; --ft: 7.45vw }
  .pod--1 { --w: 30vw; --h: 45.9vw; --ph: 13.7vw; --fh: 31.8vw; --ft: 8vw }
  .pod--3 { --h: 39vw; --ph: 12vw; --fh: 26.2vw; --ft: 7.2vw }
  .pod__name { top: 8px; left: 6px; right: 6px; font-size: 12px }
  .pod--1 .pod__name { top: 9px; font-size: 13px }
  .pod__num { font-size: 9.8vw } .pod--1 .pod__num { font-size: 11vw }
  .tops__panel { padding: 20px 8px 16px; border-radius: 12px }
  .tops__deco, .spark { display: none }
  .spark--1, .spark--6, .spark--8 { display: block } .spark--1 { left: 6%; top: -4% } .spark--6 { right: 4%; top: 8% } .spark--8 { right: 8%; top: 84% }
  .tops__line { margin: 20px auto 14px }
  .slim__row { height: 52px; gap: 12px; padding: 0 14px 0 10px }
}

/* ================================================================ 6 tier test rows (home and Tier tests)
   One list with lines between the rows (site.css .tlist); the result as coloured text; LIVE rows only get a red line
   on their left edge. */
.tlist { border-color: var(--line); background: none }
.ttrow { min-height: 54px; border-top-color: var(--line) }
.ttrow--live { background: none; box-shadow: inset 2px 0 0 var(--live) }
.tlist--live { border-color: var(--line) }
.ttrow__head { border-radius: 6px }
@media (hover: hover) and (pointer: fine) { .ttrow:hover { background-color: var(--hover) } }
.tres { font-size: 14px }
/* places 4 and 5 as one group with a line between them */
.slim { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--row) }
.slim > li + li { border-top: 1px solid var(--line) }
.slim__row { border: 0; border-radius: 0; background: none }
@media (hover: hover) and (pointer: fine) { .slim__row:hover { border: 0; background: var(--hover) } }
/* the home list keeps to a readable width under the podium */
.htests { width: min(100%, 980px); margin-inline: auto }
@media (min-width: 1000px) { .htests .ttrow--nowhen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 120px 190px } }
.livechip { display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0; border: 0; background: none; color: var(--live-hi); font: 700 12px / 1 var(--font-ui);
  letter-spacing: 0.02em; text-transform: none }
.change .pill, .ttrow__chg .pill { font-weight: 700 }
/* the columns: the result and the tier change side by side, the free width for the names; the tester page shows the
   test type where the other lists show the tester */
@media (min-width: 1000px) {
  .ttrow, .tcols, .ttrow--notester, .tcols--notester { grid-template-columns: 76px minmax(0, 1.4fr) minmax(0, 1.2fr) 140px 230px }
  .ttrow--nowhen, .htests .tcols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 140px 230px }
}
@media (min-width: 721px) and (max-width: 999px) {
  .ttrow--notester, .tcols--notester { grid-template-columns: 76px minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(96px, 0.8fr) minmax(130px, 0.9fr) }
}
@media (max-width: 720px) {
  .ttrow--notester .ttrow__type { display: none }
  /* phones: two lines per test: the player and the result, then the tester, the time and the tier */
  .ttrow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "p p res" "t when chg"; gap: 6px 10px; padding: 10px 12px }
  .ttrow--nowhen { grid-template-areas: "p p res" "t t chg" }
  .ttrow--notester { grid-template-areas: "p p res" "when when chg" }
  .ttrow__when { font-size: 12px }
}
/* the Tier tests page: the list on the page itself, no card around it */
.res { padding: 0; border: 0; background: none; box-shadow: none }
.res__title { font: 800 30px / 1.15 var(--font-ui) }
.loadmore { background: none; font: 600 13px / 1 var(--font-ui); letter-spacing: 0; text-transform: none }
/* under "Live now" a running test needs no LIVE word of its own (a paused one still says so) */
.tlist--live .ttrow--nowhen .livechip:not(.livechip--paused) { display: none }

/* ================================================================ 7 rankings (mcpvp overall, mctiers): tabs, toolbar, rows
   Columns: rank, player, country, tier (tests, last test and since live on the profile). Rows 58 px with a line
   between them, no card per row. Places 1-3: a gold, silver or bronze ribbon behind the rank and a ring of the same
   colour round the head, nothing else. The rank in the pixel face. */
.rk-card { padding: 14px; border-color: var(--line); background: var(--panel); box-shadow: none }
.ktab { height: 54px; border-color: var(--line); background: var(--nav); font: 700 12px / 1 var(--font-ui); letter-spacing: 0; text-transform: none; box-shadow: none }
.ktab[aria-current="page"] { border-color: var(--line-hi); background: #163a25; color: #fff; box-shadow: none }
.ktabs__ind { background: var(--gold); box-shadow: none }
@media (hover: hover) and (pointer: fine) { .ktab:not([aria-current="page"]):hover { translate: none; border-color: var(--line-3); background: #12311f; box-shadow: none } }
.seg > a, .seg > button { font-size: 12px; letter-spacing: 0; text-transform: none }
.seg__ind { display: none }   /* no sliding pill: the lit item has its own quiet background */
.rk-sw__b { font-size: 12px }
.stand__k { font-size: 10px; letter-spacing: 0.04em; text-transform: none; font-weight: 600 }
.rk-head { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 14px; padding: 16px 10px 10px 0; border: 0; background: none }
.rk-th { color: var(--dim); font: 600 12px / 1 var(--font-ui); letter-spacing: 0; text-transform: none }
.rk-th--p, .rk-th--ctry, .rk-th--l { justify-content: flex-start }
.rk-th--p { padding-left: 56px }
.rk-rows { display: block; border-top: 1px solid var(--line) }
.rkr { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 120px; align-items: center; gap: 14px; min-height: 58px; padding: 0 10px 0 0;
  border-bottom: 1px solid var(--line); transition: background-color var(--t-fast) }
@media (hover: hover) and (pointer: fine) { .rkr:hover { background: var(--hover) } }
.rkr__rank { position: relative; align-self: stretch; display: grid; place-items: center; cursor: default }
.rkr__n { position: relative; z-index: 1; color: var(--muted); font: 400 26px / 1 var(--font-px) }
.rkr__rank:has(.rkr__n:not(:empty)) { min-width: 0 }
/* places 1-3: a ribbon like mcpvp's: it starts at the row's left edge, runs on under the head, and its lower edge is
   cut on a diagonal down to the row's bottom; gold, silver or bronze with a little sheen, the number in dark */
.rkr--1, .rkr--2, .rkr--3 { --rib: linear-gradient(135deg, #ffe08f 0%, #f2bd45 45%, #c88b22 100%); --ring: var(--gold-3); --rib-n: #3a2604 }
.rkr--2 { --rib: linear-gradient(135deg, #f1f4f9 0%, #c9d0dc 45%, #9aa4b6 100%); --ring: #c9d0dc; --rib-n: #23382c }
.rkr--3 { --rib: linear-gradient(135deg, #f6bf8d 0%, #d58d55 45%, #a5612f 100%); --ring: #d08a52; --rib-n: #2e1606 }
.rkr--1 .rkr__rank::before, .rkr--2 .rkr__rank::before, .rkr--3 .rkr__rank::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 0;
  width: calc(100% + 34px); background: var(--rib); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%) }
.rkr--1 .rkr__n, .rkr--2 .rkr__n, .rkr--3 .rkr__n { color: var(--rib-n); translate: -4px -3px }
.rkr--1 .rkr__ava, .rkr--2 .rkr__ava, .rkr--3 .rkr__ava { z-index: 1 }
.rkr__who { display: flex; align-items: center; gap: 14px; min-width: 0 }
.rkr__ava { position: relative; flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: #183f28 }
.rkr--1 .rkr__ava, .rkr--2 .rkr__ava, .rkr--3 .rkr__ava { box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--panel) }
.rkr__bust { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: translateY(6%) scale(1.06) }
.rkr .rk-name { min-width: 0; overflow: hidden; color: #fff; font: 700 16px / 1.2 var(--font-ui); white-space: nowrap; text-overflow: ellipsis }
.rkr .rk-name::after { content: ""; position: absolute; inset: 0; z-index: 0 }   /* the name link covers the row */
.rkr .trend, .rkr .rk-flag, .rkr [data-tip] { position: relative; z-index: 1 }
.rkr__ctry { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--soft); font-size: 14px }
.rkr__ctry > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.rkr__none { color: var(--dim) }
.rkr__tier { display: flex; align-items: center }
.rkr.is-me { background: rgb(245 189 59 / 0.06); box-shadow: inset 2px 0 0 var(--gold) }
.rkr:has(.rk-name:focus-visible) { outline: 2px solid var(--gold); outline-offset: -2px }
.rk-none { padding: 18px 12px; color: var(--muted) }
.loadmore { border-color: var(--line); background: none; box-shadow: none }
@media (max-width: 1100px) { .rk-head, .rkr { grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr) 100px; gap: 12px } }
@media (max-width: 760px) {
  .rk-head { display: none }
  .rkr { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; min-height: 56px; padding-right: 8px }
  .rkr__ctry { display: none }
  .rk-bar .rk-sw { display: none }   /* phones: no distribution switch above the list */
  .rkr__ava { width: 36px; height: 36px }
  .rkr__who { gap: 10px }
  .rkr .rk-name { font-size: 15px }
  .rkr__n { font-size: 22px }
  .rkr--1 .rkr__rank::before, .rkr--2 .rkr__rank::before, .rkr--3 .rkr__rank::before { top: 10px; width: calc(100% + 28px) }
}

/* ================================================================ 8 board (mctiers): plain columns, clean headers */
.bhead__t { font: 800 22px / 1.2 var(--font-ui) }
.bcol { border-color: var(--line); background: var(--nav); box-shadow: none }
.bcol__h { min-height: 60px; box-shadow: none }
.bro__a { gap: 10px; height: 42px; padding-left: 10px }
.bro__a { padding-right: 12px }
.bro__chip { display: none }
.bro__chip--keep { flex: none; min-width: 16px; color: var(--dim); font: 600 12px / 1 var(--font-ui); font-variant-numeric: tabular-nums; text-align: right }
.bro__head { width: 28px; height: 28px; border-radius: 4px }
/* a row under the pointer (or focused) lights up in its tier colour; no hover card (it covered the next column) */
.bro__a { transition: background-color var(--t-fast), box-shadow var(--t-fast) }
.bro__a:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--gold) }
.bip__l { font-size: 11px; letter-spacing: 0; text-transform: none }

/* ================================================================ 9 profile (mcpvp profile): the header card, tabs, blocks
   The header is the one real card: the render, the name with the flag and the views, one line with the tier icon, the
   rank and the title. Below, the tabs and flat blocks; small labels in normal case. */
.phead { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 26px; min-height: 0; padding: 18px 24px 0 20px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: none; animation: none }
.phead__fig { position: relative; align-self: end; width: 140px; height: 186px; border-radius: 0; background: none; overflow: visible }
.phead__fig::after { display: none }
.phead__img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; translate: 0 8px; filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.45)) }
.phead__id { gap: 10px; padding-bottom: 18px }
.phead__name { color: #fff; font: 800 clamp(26px, 2.6vw, 36px) / 1.1 var(--font-ui); letter-spacing: -0.02em }
.prof--1 .phead__name { color: var(--gold-2) }
.phead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--muted); font-size: 15px }
.phead__tier { display: inline-flex }
.phead__peak { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px }
.phead__rank { color: #fff; font: 700 15px / 1 var(--font-ui) }
.phead__rank span { color: var(--muted); font-weight: 500 }
.phead__rank--1 { color: var(--gold-2) } .phead__rank--2 { color: var(--silver-2) } .phead__rank--3 { color: var(--bronze-2) }
.phead__title { display: inline; padding: 0; border: 0; background: none; box-shadow: none; color: var(--soft); font: 500 15px / 1.2 var(--font-ui) }
.phead__act { align-self: start; padding-top: 4px }
.views { color: var(--dim) }
.ptabs { margin-top: 16px }
.ptab[aria-selected="true"] { border-color: var(--line-hi); background: #163a25; color: #fff; box-shadow: none }
.alabel, .scard__k, .sview__k, .rk-k { letter-spacing: 0; text-transform: none }
.alabel { color: var(--muted); font: 600 13px / 1 var(--font-ui) }
.apill__txt small { font-size: 12px; letter-spacing: 0; text-transform: none }
.box, .card { border-color: var(--line); box-shadow: none }
.bdgs__i { box-shadow: none }
/* the General blocks without inner boxes: the status as a dot and two lines, recent tests as rows with lines, the UUID
   as a plain copy line, the journey's peak as muted text, badges smaller in one row */
.apill { min-width: 0; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 10px }
.apill__txt b { font-size: 15px }
.alist { gap: 0; margin-top: 4px; border-top: 1px solid var(--line) }
.arow { grid-template-columns: minmax(0, 1fr) auto 20px; margin: 0; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none }
.arow:hover { border-color: var(--line); background: var(--hover) }
.arow--none:hover { background: none }
.jstep__peak { padding: 0; border: 0; color: var(--dim); font: 600 12px / 1 var(--font-ui); letter-spacing: 0; text-transform: none }
.bdgs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px }
.bdgs__i .bdg { width: 30px; height: 30px }
.phead__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
@media (max-width: 820px) {
  .phead { grid-template-columns: 96px minmax(0, 1fr); gap: 12px 16px; padding: 14px 14px 0 10px }
  .phead__fig { width: 96px; height: 128px }
  .phead__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; padding: 0 0 14px 4px }
  .phead__id { padding-bottom: 12px }
}

/* ================================================================ 10 the other pages: page heads, season, events,
   news, tester, info, 404, and the small profile parts. Flat rows on one surface, small labels in normal
   case, no glows. */
.ihead { margin-bottom: 24px }
.ihead__t { font: 800 30px / 1.15 var(--font-ui); letter-spacing: -0.01em }
.ihead__line { margin-top: 6px; font-size: 15px }
.ipage { padding-top: 18px }
.phero { display: grid; justify-items: start; gap: 6px; margin-bottom: 26px }
.phero__k { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font: 600 13px / 1 var(--font-ui) }
.phero__k svg { width: 14px; height: 14px }
.phero__sub { color: var(--muted); font-size: 15px }
.nline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--muted); font-size: 14px }
.nline b { color: #fff; font-weight: 700 }
.nline__tier { display: inline-flex; align-items: center; gap: 6px }
.colhead, .eyebrow { letter-spacing: 0.02em; text-transform: none }
/* season: the top 10 as rankings rows, the highlights and past seasons as row lists */
.season .sbody { row-gap: 32px }
.season .phero { margin-bottom: 8px }
.season .ssec { margin-top: 0 }
.stop { display: block; max-width: none; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--nav); box-shadow: none }
.stop .rkr { grid-template-columns: 56px minmax(0, 1fr) auto; padding-right: 16px }
.stop .rkr:last-child { border-bottom: 0 }
.slist { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--nav) }
.slist > li + li { border-top: 1px solid var(--line) }
.srow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; transition: background-color var(--t-fast) }
@media (hover: hover) and (pointer: fine) { .srow:hover { background: var(--hover) } }
.srow .head { width: 36px; height: 36px; border-radius: 6px }
.srow__id { display: grid; gap: 4px; min-width: 0 }
.srow__k { color: var(--muted); font-size: 12.5px }
.srow__id b { overflow: hidden; color: #fff; font-size: 15px; white-space: nowrap; text-overflow: ellipsis }
.srow__ch { display: inline-flex; align-items: center; gap: 6px }
.srow__ch > svg { width: 12px; height: 12px; color: var(--dim) }
.srow__v { color: var(--soft); font-size: 13px; white-space: nowrap }
.srw { display: block } .srw__i { display: grid; gap: 4px; padding: 12px 14px; border: 0; background: none }
.sarc__i { display: block; padding: 12px 14px }
.sarc__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.sarc__h > span { margin-left: auto; color: var(--dim); font-size: 13px }
.sarc__h svg { width: 10px; height: 10px; color: var(--dim) }
.sarc__h:hover b { text-decoration: underline; text-underline-offset: 3px }
.sarc__top li { gap: 8px }
.sarc__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
/* events: the next one as one calm card, the rest as rows */
.evs { margin-top: 22px }
.evs__t { margin-bottom: 12px; color: #fff; font: 700 18px / 1.2 var(--font-ui) }
.evs__t--sub { margin-top: 26px }
.evs__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px }
.evs__head h2 { color: #fff; font: 700 18px / 1.2 var(--font-ui) }
.evnext { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 150px; padding-right: 26px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); transition: border-color var(--t-fast) }
@media (hover: hover) and (pointer: fine) { .evnext:hover { border-color: var(--line-3) } .evnext:hover .evnext__t { text-decoration: underline; text-underline-offset: 4px } }
.evnext.is-live { box-shadow: inset 2px 0 0 var(--live) }
.evnext__art { position: relative; align-self: stretch; overflow: hidden; isolation: isolate }
.evnext__art .art { z-index: 0 }
.evnext__art .art__mark { display: none }
.evnext__art .art__fig { height: 86% } .evnext__art .art__fig--a { right: 44% } .evnext__art .art__fig--b { right: 4% }
.evnext__art .icard__img { width: 100%; height: 100%; object-fit: cover }
.evnext__id { display: grid; gap: 6px; min-width: 0; padding: 18px 0 }
.evnext__t { color: #fff; font: 800 22px / 1.2 var(--font-ui) }
.evnext__s { color: var(--soft); font-size: 14px }
.evnext__sum { max-width: 60ch; color: var(--muted); font-size: 14px; line-height: 1.5 }
.evnext__cd { color: var(--gold); font: 700 15px / 1 var(--font-ui); white-space: nowrap }
.evl { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--nav) }
.evl__row + .evl__row { border-top: 1px solid var(--line) }
.evl__a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 14px; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; transition: background-color var(--t-fast) }
@media (hover: hover) and (pointer: fine) { .evl__a:hover { background: var(--hover) } }
.evl__a > svg { width: 14px; height: 14px; color: var(--dim) }
.evl__date { display: grid; justify-items: center; gap: 2px; color: #fff; font: 800 18px / 1 var(--font-ui) }
.evl__date b { color: var(--gold); font: 700 11px / 1 var(--font-ui); text-transform: uppercase }
.evl__id { display: grid; gap: 4px; min-width: 0 }
.evl__t { overflow: hidden; color: #fff; font: 700 15px / 1.2 var(--font-ui); white-space: nowrap; text-overflow: ellipsis }
.evl__s { color: var(--muted); font-size: 13px }
.evl__cd { color: var(--soft); font-size: 13px; white-space: nowrap }
.evp { padding: 0; border: 0; background: none }
.evrows { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--nav) }
.evrow { min-height: 56px; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none }
.evrow:first-child { border-top: 0 }
.evrow__pill { min-width: 0; height: auto; padding: 0; border: 0; background: none; color: var(--dim); font: 600 13px / 1 var(--font-ui) }
/* one event: the head card holds the words and the buttons only (the picture is on the Events list) */
.evhd { position: relative; display: block; padding: 22px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: none }
.evhd__media { display: none }
.evhd__l, .evhd__r { max-width: none }
.evhd__k { gap: 6px 12px; color: var(--muted); font-size: 13px }
.evhd__t { margin-top: 8px; font-size: clamp(24px, 2.6vw, 32px) }
.evhd__cd { color: var(--gold); font: 700 15px / 1 var(--font-ui) }
.evbox, .evsteps li, .evrewards__i { box-shadow: none }
/* one event: the main text in one card, the facts and the schedule in one card beside it */
.evg__main, .evg__side { gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel) }
.evg__main > .evbox, .evg__side > .evbox { border: 0; border-radius: 0; background: none }
.evg__main > .evbox + .evbox, .evg__side > .evbox + .evbox { border-top: 1px solid var(--line) }
.evsteps { display: block; padding-left: 18px; list-style: disc }
.evsteps li { display: list-item; min-height: 0; padding: 4px 0; border: 0; background: none; color: var(--soft) }
.evsteps li::marker { color: var(--dim) }
.evrewards__i { min-height: 40px; padding: 8px 0 }
.rone__one .rone__kv > div:first-child { border-top: 1px solid var(--line) }
/* news: one list, the date, the title, one line */
.nwl { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--nav) }
.nwl > li + li { border-top: 1px solid var(--line) }
.nwl__a { display: grid; grid-template-columns: 110px minmax(0, 1fr) 14px; align-items: center; gap: 18px; min-height: 68px; padding: 12px 18px; transition: background-color var(--t-fast) }
@media (hover: hover) and (pointer: fine) { .nwl__a:hover { background: var(--hover) } .nwl__a:hover .nwl__t { text-decoration: underline; text-underline-offset: 3px } }
.nwl__a > svg { width: 14px; height: 14px; color: var(--dim) }
.nwl__date { color: var(--dim); font-size: 13px; white-space: nowrap }
.nwl__id { display: grid; gap: 4px; min-width: 0 }
.nwl__t { color: #fff; font: 700 16px / 1.3 var(--font-ui) }
.nwl__s { color: var(--muted); font-size: 14px; line-height: 1.45 }
.nwp__head { display: grid; gap: 8px; margin-bottom: 20px }
.nwp__t { color: #fff; font: 800 clamp(26px, 3vw, 34px) / 1.2 var(--font-ui) }
.nwp__meta { color: var(--muted); font-size: 14px }
/* tester page: the profile's header, then three cards and the latest tests */
.tsp .back { margin: 6px 0 14px }
.phead--tester { margin-bottom: 14px }
.phead--tester .phead__line .spill { height: 24px }
.tsp__card { border-color: var(--line); background: var(--panel); box-shadow: none }
.tsp__h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #fff; font: 700 15px / 1.2 var(--font-ui) }
.tsp__h svg { width: 16px; height: 16px; color: var(--muted) }
.tsp__well { border-color: var(--line); background: var(--nav) }
.tsp__latest { margin-top: 14px; padding: 16px; box-shadow: none }
.tsp__lhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
.tsp__lhead .more-link { margin-left: auto }
.tsp__ln { color: var(--dim); font-size: 13px }
.career__nums dt { letter-spacing: 0; text-transform: none; font-size: 12px }
.ttrow__type { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 500 13px / 1.2 var(--font-ui) }
.ttrow__type svg { width: 15px; height: 15px; flex: none; color: var(--dim) }
.given__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 30px; align-items: center; gap: 12px; min-height: 26px }
.given__n { color: var(--soft); font-size: 13px; text-align: right }
/* info */
.itiers__order { margin: 2px 0 4px; color: var(--soft); font-size: 15px }
.itiers__n { display: inline-block; min-width: 2.5ch; text-align: right }
.itester__go { display: none }
@media (min-width: 900px) {
  .itester__a { grid-template-columns: 32px minmax(0, 1.6fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) 96px 20px }
  .itester__go { display: grid; place-items: center; color: var(--dim) } .itester__go svg { width: 14px; height: 14px }
}
.inav { box-shadow: none }
/* Info: the steps as a plain numbered list, the FAQ without numbers, the tester state as a dot and a word */
.isteps { display: block; margin: 0 0 16px; padding-left: 22px; list-style: decimal; color: var(--soft) }
.isteps li { padding: 5px 0; line-height: 1.5 }
.isteps li::marker { color: var(--dim); font-weight: 700 }
.isteps b { color: #fff }
.qa__item summary { grid-template-columns: minmax(0, 1fr) 32px; padding-left: 4px }
.qa__a { padding: 0 20px 18px 4px }
.qa__x { border: 0; background: none }
.itiers__name { color: var(--muted); font: 500 14px / 1 var(--font-ui) }
.tstate { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 600 13px / 1 var(--font-ui); white-space: nowrap }
.tstate i { width: 7px; height: 7px; border-radius: 50%; background: var(--off) }
.tstate--active i, .tstate--on i { background: var(--green) } .tstate--active { color: var(--green-hi) }
.tstate--live i { background: var(--live) } .tstate--live { color: var(--live-hi) }
/* badges in Info: a compact list, small emblems */
.ibdgs { gap: 6px 14px }
.ibdg { padding: 6px 0; border: 0; background: none; box-shadow: none }
.ibdg .bdg { width: 28px; height: 28px }
.isec, .scard, .stat, .mu, .me__card { box-shadow: none }
/* 404: Steve, the number, the way on */
.lost { margin-top: 20px; padding: 40px 24px; box-shadow: none }
.lost__fig { display: block; width: 110px; height: 146px; margin: 0 auto 6px }
.lost__fig img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.45)) }
.lost__n { color: var(--gold); font: 400 72px / 1 var(--font-px) }
.lost__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
/* the small profile parts */
.views__w { margin-left: 2px; color: var(--dim); font-size: 12px }
.rmini__more { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font: 600 13px / 1.2 var(--font-ui) }
.rmini__more svg { width: 12px; height: 12px }
.rmini__more:hover { color: #fff }
.htools__k { color: var(--dim); font: 600 12px / 1 var(--font-ui); white-space: nowrap }
.sgen__cap { margin: 8px 0 0; color: var(--soft); font: 500 12px / 1.3 var(--font-ui) }
.tcard__step { margin-top: 8px; color: var(--muted); font-size: 13px }
.h2h__hint { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--muted); font: 500 13px / 1.3 var(--font-ui) }
.h2h__hint svg { width: 14px; height: 14px; flex: none }
/* one tier test: one card; the title and its links, the matchup, the tier change, a few facts */
.rone__one { max-width: 860px; padding: 20px 22px 8px; border-radius: 12px; box-shadow: none }
.rone__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px }
.rone__title { font: 800 24px / 1.15 var(--font-ui); letter-spacing: -0.01em }
.rone__quick { position: static; flex-wrap: wrap }
.rone__copy { margin-top: 0 }
.rone__one .rone__vc { min-height: 0; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--line) }
.rone__word { letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--muted) }
.rone__mid .bigscore { font-size: 30px }
.rone__one .rone__change { justify-content: flex-start; padding: 14px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none }
.rone__change .pill { font-size: 18px } .rone__change .pill__disc, .rone__change .pill__disc .em { width: 26px; height: 26px }
.rone__kv > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line) }
.rone__kv dt { color: var(--muted); font-size: 14px } .rone__kv dd { color: var(--text); font-size: 14px }
.rone__more { max-width: 860px; margin-top: 16px; padding: 0; border: 0; background: none; box-shadow: none }
.rone__clip { max-width: 860px }
/* Test History: the result as a word in its colour, a smaller score, no filter row for a short history */
.hrow__word { padding: 0; background: none; font: 700 14px / 1 var(--font-ui); letter-spacing: 0; text-transform: none }
.hrow__word.resw--win { color: var(--win) } .hrow__word.resw--loss { color: var(--loss) } .hrow__word.resw--draw { color: var(--soft) }
.hrow .bigscore { font-size: 18px }
.hist--few .wl, .hist--few .htools__k { display: none }
.hrow__chip { border: 0; background: none }
/* Stats: the test record as one strip of numbers on one card */
.sgen { display: block; padding: 18px 20px; border-color: var(--line); border-radius: 12px; background: var(--panel) }
.sstrip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 18px; margin: 14px 0 16px }
.sstrip > div { display: grid; align-content: start; gap: 6px; min-width: 0 }
.sstrip dt { color: var(--muted); font: 500 12.5px / 1.2 var(--font-ui) }
.sstrip dd { margin: 0; color: #fff; font: 800 22px / 1.1 var(--font-ui); white-space: nowrap }
.sstrip dd .srow__sub { display: block; margin-top: 4px; color: var(--dim); font: 500 12px / 1.2 var(--font-ui) }
.sgen .srec__bar { height: 6px }
@media (max-width: 1100px) { .sstrip { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
@media (max-width: 520px) { .sstrip { grid-template-columns: repeat(2, minmax(0, 1fr)) } .sstrip dd { font-size: 20px } }
@media (max-width: 760px) {
  .evnext { grid-template-columns: 110px minmax(0, 1fr); padding-right: 14px; gap: 14px }
  .evnext__cd { grid-column: 2; padding-bottom: 14px }
  .evnext__id { padding: 14px 0 0 }
  .evnext__t { font-size: 18px }
  .evl__a { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 12px }
  .evl__cd { grid-column: 2; grid-row: 2 }
  .evhd { padding: 18px }
  .evg { display: flex; flex-direction: column }   /* phones: the event's text first, then its facts */
  .nwl__a { grid-template-columns: minmax(0, 1fr) 14px; gap: 6px 12px; padding: 12px 14px }
  .nwl__date { grid-column: 1; grid-row: 1 }
  .nwl__id { grid-column: 1; grid-row: 2 }
  .nwl__a > svg { grid-column: 2; grid-row: 1 / span 2 }
  .lost__n { font-size: 60px }
}

/* ================================================================ 11 labels in normal case (rule 4): the small
   upper-case labels of the older layers lose their caps and tracking */
.eyebrow, .colhead, .menu-list__label, .filt__f, .icard__k, .resw, .tbl th, .tcols, .dist__ytitle, .dist__foot, .stand__k, .rk-mhead,
.bip__l, .ctry__head, .rk-th, .alabel, .apill__txt small, .ktile__cap, .picker__label, .slabel, .hlabel, .jstep__peak, .rhead, .rrow__for,
.career__nums dt, .rone__word, .rone__mini dt, .srch__sortl, .thd__col,
.itiers thead th, .gts__label, .gtc__facts dt, .gtf__big small, .evh__eyebrow, .evc__meta, .sznhero__k, .sugg__label, .flag {
  letter-spacing: 0; text-transform: none }

/* ================================================================ 12 review round 2: one type scale, fewer nested
   boxes, aligned columns. Titles: pages 28 px, sections 20 px, cards 15 px. */
.ihead__t, .ptitle, .res__title, .rone__title { font: 800 28px / 1.15 var(--font-ui); letter-spacing: -0.01em }
.shead__t, .evs__t, .evs__head h2, .isec__h h2, .bhead__t, .box__t, .stitle--lg { font: 800 20px / 1.2 var(--font-ui) }
.tsp__h, .scard__t, .evbox > h2, .stitle { font: 700 15px / 1.2 var(--font-ui); letter-spacing: 0 }
code, .srv__ip code, .bip__ip { font-family: var(--font-ui) }
/* home: the tier of places 4-5 on the name's line */
.slim__tier { display: flex; align-items: center; line-height: 1 }
.slim__tier .tt { line-height: 1 }
/* tier test rows: the tester quieter than the player */
.ttrow__tn { color: var(--muted); font-weight: 500 }
/* rankings: one place for the view switch (left), the tier icons in one column on phones */
.rk-bar > .rk-sw:first-child { margin-left: 0 }
@media (max-width: 760px) { .rkr__tier { min-width: 3.4rem; justify-content: flex-start } }
/* board on phones: the info and the server on the title line */
@media (max-width: 640px) { .bhead__tools { gap: 8px } }
/* profile: badges as a tight row without a card; both columns end together */
.bdgbox { padding: 0; border: 0; background: none }
.bdgs { display: flex; flex-wrap: wrap; gap: 6px 18px }
.bdgs__i { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; text-align: left }
.bdgs__i .bdg { width: 26px; height: 26px }

/* a tier test: centred; Stats: no bar under the numbers */
.rone { max-width: 860px }
.sgen .srec__bar, .sgen .sgen__cap { display: none }
.sstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 4px }
@media (max-width: 760px) { .sstrip { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
/* Rivals on Stats: the list first on phones, the sort chips and the search only for many testers */
@media (max-width: 900px) { .h2h__opp { order: -1 } }
.h2h { align-items: start }
.h2h__tools:has(+ .h2h__rows > li:nth-child(-n + 5):last-child) { display: none }
/* tester: the record card without the coloured big numbers, the tiers given under it, no type for a normal test */
.tsp .career__nums dd { color: #fff }
.tsp__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) }
.tsp__card--wide { grid-column: 1 / -1 }
.career__rl { display: flex; justify-content: space-between; margin-top: 14px; color: var(--muted) }
.career__rl b { color: #fff }
.career__wl { margin-top: 6px; color: var(--dim); font-size: 13px }
@media (max-width: 900px) { .tsp__grid { grid-template-columns: minmax(0, 1fr) } .tsp__card--wide { grid-column: auto } }
/* events: past events in the same rows; one bullet style */
.evl--past .evl__cd { color: var(--dim) }
.evrules li::before { width: 5px; height: 5px; border-radius: 50%; background: var(--dim) }
.evhd { padding: 18px 22px }
.evhd__btns { margin-top: 14px }
/* Info: no icons in the sub-nav, the server and tester lists flat inside their section */
.inav__a svg { display: none }
.srv { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; padding: 14px 0 }
.srvs { gap: 0 18px }
.itesters { border: 0; border-radius: 0; background: none; border-top: 1px solid var(--line) }
.ifacts svg { color: var(--dim) }
/* 404: no card */
.lost { border: 0; background: none; box-shadow: none }

/* ================================================================ 13 review round 3: results written once, aligned
   edges, one heading size */
.info__t, .evhd__t { font: 800 28px / 1.15 var(--font-ui); letter-spacing: -0.01em }
.evhd__t { margin-top: 6px }
/* home: places 4-5 exactly as wide as the podium */
.slim { width: min(100%, 574px) }
/* rankings: quieter trend arrows */
.rkr .trend { opacity: 0.6 }
.rkr .trend--same { opacity: 0.35 }
/* profile: the buttons on the name's line */
.phead__act { align-self: center; padding-top: 0 }
.phead--tester .phead__act { align-self: center }
/* Stats › Rivals: the tester rows say the name and the record; the matchup's score in one colour */
.h2h__row .h2h__bar, .h2h__row .h2h__pct, .h2h__row .h2h__lead { display: none }
.h2h__agg { display: none }
.h2h__score { gap: 8px; font-size: 24px }
.h2h__score .win, .h2h__score .loss, .h2h__score .draw { color: #fff }
/* History: "Won 4–0" as one coloured text where the result used to be split in two */
.hrow { grid-template-columns: 44px 96px minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr) auto }
.hrow__word { white-space: nowrap }
.hlabel { margin-top: 0 }
@media (max-width: 1100px) { .hrow { grid-template-columns: 100px minmax(0, 1fr) 150px auto auto } .hrow__vs { white-space: nowrap } }
@media (max-width: 760px) { .hrow { grid-template-columns: minmax(0, 1fr) auto } }
/* a tier test: the rows below without the player (it is the page's player); the link at the title's size */
@media (min-width: 1000px) { .ttrow--noplayer { grid-template-columns: 76px minmax(0, 1fr) 140px 230px } }
@media (min-width: 721px) and (max-width: 999px) { .ttrow--noplayer { grid-template-columns: 76px minmax(0, 1fr) 110px 170px } }
@media (max-width: 720px) { .ttrow--noplayer { grid-template-areas: "t t res" "when when chg" } .ttrow--noplayer .ttrow__t { padding-left: 0 } }
.rone__morehead .more-link { font-size: 14px }
/* season: both column heads the same height */
.season .shead { min-height: 30px; margin-bottom: 12px }
/* tester: the record rows start at the edge of the big numbers */
.career__list > div { padding-inline: 0 }
/* event: the buttons beside the title, a lower head card */
@media (min-width: 761px) {
  .evhd { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center }
  .evhd__btns { grid-column: 2; grid-row: 1 / span 3; margin-top: 0 }
}
.evg__side, .evg__main { width: 100%; min-width: 0 }
/* Info on phones: the section tabs in one row that scrolls */
@media (max-width: 600px) { .inav { flex-wrap: nowrap; overflow-x: auto } }

/* ================================================================ 14 polish round (2026-10-25, docs/CHECKLIST-POLISH.md)
   Profile: "More info" at the bottom, collapsed: the previous names with the UUID and the punishments. */
.pmore { margin-top: 26px; border-top: 1px solid var(--line) }
.pmore__sum { display: flex; align-items: baseline; gap: 12px; padding: 16px 2px; cursor: pointer; list-style: none; border-radius: 8px }
.pmore__sum::-webkit-details-marker { display: none }
.pmore__sum:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.pmore__t { color: #fff; font: 800 20px / 1.2 var(--font-ui) }
.pmore__s { color: var(--muted); font-size: 14px }
.pmore__sum svg { align-self: center; width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: rotate var(--t-fast) var(--ease-out) }
@media (hover: hover) and (pointer: fine) { .pmore__sum:hover .pmore__t { text-decoration: underline; text-underline-offset: 4px } .pmore__sum:hover svg { color: #fff } }
.pmore[open] .pmore__sum svg { rotate: 180deg }
.pmore__body { display: grid; gap: 22px; padding: 2px 0 6px }
@media (min-width: 900px) { .pmore__body--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px } }
.pmore__part { min-width: 0 }
.pmore__h { margin: 0 0 10px; color: var(--soft); font: 700 15px / 1.2 var(--font-ui) }
.pmore .puns { max-height: none; overflow: visible }

/* Info and Privacy: plain sections with a title and a thin line between them, no boxes (like mctiers' info). The
   section bar is sticky on wide screens on a solid strip of the page colour, so nothing shows through and the sections
   stop at its lower edge; a jump to a section leaves a 16 px gap under the bar. Phones: the bar scrolls with the page. */
.inav-bar { position: sticky; top: 0; z-index: 20; margin: 0; padding: 10px 0 12px; background: var(--bg) }
.info .inav { position: static; display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 5px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--nav); backdrop-filter: none; box-shadow: none }
.info .inav::-webkit-scrollbar { display: none }
.info .inav__a { display: inline-flex; flex: none; flex-direction: row; align-items: center; height: 34px; min-height: 0; padding: 0 14px; border-radius: 8px;
  color: var(--soft); font: 600 14px / 1 var(--font-ui); text-align: left; white-space: nowrap; text-decoration: none }
@media (hover: hover) and (pointer: fine) { .info .inav__a:hover { background: rgb(255 255 255 / 0.05); color: #fff } }
.info .isec, .iprv .isec { scroll-margin-top: 60px; margin: 0; padding: 28px 0 30px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none }
.info .isec:first-of-type, .iprv .isec:first-of-type { border-top: 0; padding-top: 16px }
.info .isec__h, .iprv .isec__h { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: none }
.isub { margin: 22px 0 10px; color: var(--soft); font: 700 15px / 1.2 var(--font-ui) }
.isrv { max-width: 640px; margin-bottom: 4px }
.info .ifacts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--soft); font-size: 14px; line-height: 1.4 }
.info .ifacts li { display: inline-flex; align-items: center; gap: 8px }
.info .ifacts svg { width: 16px; height: 16px; flex: none; margin: 0; color: var(--dim) }
/* the FAQ list ends without its own line (the next section's line follows) */
.info .qa { margin-top: 0 }
.info .qa__item:last-child { border-bottom: 0 }
.iprv .ihead, .iprv .isec { max-width: 860px }
.iprv__list { display: grid; gap: 10px; margin: 0; padding-left: 20px; list-style: disc; color: var(--soft); line-height: 1.55 }
.iprv__list li::marker { color: var(--dim) }
.iprv__p { margin: 0; color: var(--soft); line-height: 1.55 }
@media (max-width: 600px) {
  .inav-bar { position: static; padding: 0 0 4px }
  .info .inav { display: flex; gap: 2px; padding: 4px }
  .info .inav__a { height: 32px; padding: 0 10px; font-size: 13px }
  .info .isec, .iprv .isec { padding: 22px 0 24px; scroll-margin-top: 0 }
  .info .ifacts { display: grid; gap: 8px }
}

/* Test History: the results strip, calmer: small squares without a border, a faint tint, the letter small */
.htools { justify-content: flex-start; gap: 14px }
.wl { flex: 0 1 auto; max-width: none; gap: 6px 4px }
.wl__track { grid-template-columns: repeat(var(--per, 9), 22px); gap: 5px; margin-right: 6px }
.wl__slot { height: 22px; border: 0; border-radius: 5px; background: rgb(255 255 255 / 0.05) }
.wl__slot--w { border: 0; background: rgb(116 192 68 / 0.16) }
.wl__slot--l { border: 0; background: rgb(223 134 141 / 0.16) }
.wl__slot b { font: 700 11px / 1 var(--font-ui) }
.wl__arrow { width: 22px; height: 22px }
.htools .hsearch { margin-left: auto }


/* review round 1 */
/* board on phones: the info button and the testing server on one line; the info opens to the right of its button */
@media (max-width: 600px) {
  .bhead__tools { flex-wrap: nowrap }
  .bhead__tools .bip { flex: 1 1 auto; min-width: 0 }
}
/* events on phones: the picture of the next event runs the whole height of its card */
@media (max-width: 760px) { .evnext__art { grid-row: 1 / span 2 } }
/* More info: no underline left over after a tap */
@media (hover: none) { .pmore__sum:hover .pmore__t { text-decoration: none } }
/* home: the event card as tall as the server list, so both links below sit on one line */
.hmore__col > .hev, .hmore__col > .hsrv { flex: 1 }

/* the tester page: the latest tests flush with the header card above them */
.tsp__latest { margin-top: 26px; padding: 0; border: 0; background: none; box-shadow: none }
.tsp__lhead { margin-bottom: 0; padding: 0 0 12px }

/* ================================================================ 16 profile polish (2026-10-25)
   The header hugs its content (no empty space on the right): the render fills its height and the tier sits big beside
   the name. Tabs: only the selected tab is a box, the others are plain text (their hover only with a mouse, so a tap
   on a phone never leaves a second tab lit). Activity and the tier journey are as tall as their content (the columns
   start at the top); the block titles are smaller. */
.prof .phead { width: fit-content; max-width: 100%; grid-template-columns: 156px minmax(0, auto) auto; column-gap: 32px; align-items: center;
  padding: 12px 28px 12px 14px }
.prof .phead__fig { align-self: center; width: 156px; height: 208px }
.prof .phead__img { translate: none }
.prof .phead__id { gap: 12px; padding-bottom: 0 }
.prof .phead__line { gap: 10px 16px }
.prof .phead__tier .tt { gap: 10px; font-size: 30px; font-weight: 800; line-height: 1 }
.prof .phead__tier .tt__ic { width: 38px; height: 38px }
.prof .phead__act { flex-direction: column; align-items: stretch; align-self: center }
.ptab, .ptab:hover { border-color: transparent; background: none; color: var(--muted); box-shadow: none }
.ptab[aria-selected="true"], .ptab[aria-selected="true"]:hover { border-color: var(--line-hi); background: #163a25; color: #fff }
@media (hover: hover) and (pointer: fine) { .ptab:not([aria-selected="true"]):hover { color: #fff } }
.prof .box__t { margin-bottom: 8px; font-size: 16px; font-weight: 700 }
.prof .box__t svg { width: 15px; height: 15px }
.prof .pmore__t { font-size: 16px; font-weight: 700 }
@media (max-width: 760px) {
  .prof .phead { width: auto; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 10px 14px 14px 6px }
  .prof .phead__fig { width: 112px; height: 150px }
  .prof .phead__act { grid-column: 1 / -1; flex-direction: row; padding: 0 0 0 8px }
  .prof .phead__tier .tt { font-size: 24px } .prof .phead__tier .tt__ic { width: 30px; height: 30px }
}

/* ================================================================ 15 a player under the pointer (2026-10-25, like mcpvp)
   Everywhere a click opens a player: the row gets a little lighter, the head grows to 1.05, the name turns gold; a
   podium card lifts 4 px and its medal glow gets stronger. 180 ms and soft; only transforms and colours change, so
   nothing moves the layout. Keyboard focus shows the same. Touch: a short flash on a tap (site.js .is-tap), no
   hover. Reduced motion: only the colours change (the lift and the growth are in the no-preference block).
   Written by a small script from one list of rows (row, head, name). */
:root { --row-hi: rgb(255 255 255 / 0.05); --row-tap: rgb(255 255 255 / 0.1); --hov-t: 180ms }
.rkr, .bro__a, .ttrow, .slim__row, .srow, .itester__a, .shit, .sugg__hit { transition: background-color var(--hov-t) var(--ease-out), border-color var(--hov-t) var(--ease-out) }
.rkr .rkr__ava, .bro__a .bro__head, .ttrow .ttrow__head, .slim__row .slim__av, .srow > .head, .itester__a .itester__head, .shit .shit__render, .sugg__hit > .head { transition: transform var(--hov-t) var(--ease-out); translate: none }
.rkr .rk-name, .bro__a .bro__name, .ttrow .ttrow__name, .slim__row .slim__name, .srow .srow__id > b, .itester__a .itester__name, .shit .shit__name, .sugg__hit .sugg__name { transition: color var(--hov-t) var(--ease-out); text-decoration: none }
.pod__card { transition: transform var(--hov-t) var(--ease-out), border-color var(--hov-t) var(--ease-out), box-shadow var(--hov-t) var(--ease-out) }
.pod__base::before { transition: box-shadow var(--hov-t) var(--ease-out) }
@media (hover: hover) and (pointer: fine) {
  .rkr:hover, .bro__a:hover, .ttrow:hover, .slim__row:hover, .srow:hover, .itester__a:hover, .shit:hover, .sugg__hit:hover { background-color: var(--row-hi) }
  .rkr:hover .rk-name, .bro__a:hover .bro__name, .ttrow:hover .ttrow__name, .slim__row:hover .slim__name, .srow:hover .srow__id > b, .itester__a:hover .itester__name, .shit:hover .shit__name, .sugg__hit:hover .sugg__name { color: var(--gold); text-decoration: none }
  .shit:hover .shit__go, .shit:hover .shit__render { translate: none }
  .pod__card:hover { border-color: color-mix(in srgb, var(--name) 55%, transparent);
    box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--name) 60%, transparent), 0 0 26px -8px color-mix(in srgb, var(--name) 50%, transparent) }
  .pod__card:hover .pod__base::before { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--edge) 85%, transparent) }
}
.rkr:focus-within, .bro__a:focus-visible, .ttrow:focus-within, .slim__row:focus-visible, .srow:focus-visible, .itester__a:focus-visible, .shit:focus-within, .sugg__hit:focus-visible { background-color: var(--row-hi) }
.rkr:focus-within .rk-name, .bro__a:focus-visible .bro__name, .ttrow:focus-within .ttrow__name, .slim__row:focus-visible .slim__name, .srow:focus-visible .srow__id > b, .itester__a:focus-visible .itester__name, .shit:focus-within .shit__name, .sugg__hit:focus-visible .sugg__name { color: var(--gold) }
.sugg__hit[aria-selected="true"] .sugg__name { color: var(--gold) }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .rkr:hover .rkr__ava, .bro__a:hover .bro__head, .ttrow:hover .ttrow__head, .slim__row:hover .slim__av, .srow:hover > .head, .itester__a:hover .itester__head, .shit:hover .shit__render, .sugg__hit:hover > .head { transform: scale(1.05) }
    .pod__card:hover { transform: translateY(-4px) }
  }
  .rkr:focus-within .rkr__ava, .bro__a:focus-visible .bro__head, .ttrow:focus-within .ttrow__head, .slim__row:focus-visible .slim__av, .srow:focus-visible > .head, .itester__a:focus-visible .itester__head, .shit:focus-within .shit__render, .sugg__hit:focus-visible > .head { transform: scale(1.05) }
}
/* touch: no hover; a tapped row or card flashes (site.js adds .is-tap for a moment once the finger is down and
   still; a scroll cancels it) and fades out in 180 ms */
.rkr.is-tap, .bro__a.is-tap, .ttrow.is-tap, .slim__row.is-tap, .srow.is-tap, .itester__a.is-tap, .shit.is-tap, .sugg__hit.is-tap { background-color: var(--row-tap); transition-duration: 0s }
.rkr.is-tap .rk-name, .bro__a.is-tap .bro__name, .ttrow.is-tap .ttrow__name, .slim__row.is-tap .slim__name, .srow.is-tap .srow__id > b, .itester__a.is-tap .itester__name, .shit.is-tap .shit__name, .sugg__hit.is-tap .sugg__name { color: var(--gold); transition-duration: 0s }
.pod__card.is-tap { border-color: color-mix(in srgb, var(--name) 55%, transparent); transition-duration: 0s;
  box-shadow: 0 0 26px -6px color-mix(in srgb, var(--name) 60%, transparent) }
.pod__card.is-tap .pod__base::before { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--edge) 85%, transparent); transition-duration: 0s }

/* ================================================================ reduced motion: everything at its end state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important }
  .ldot::after, .live__dot::after { animation: none !important }
}

/* ================================================================ 17 order round (2026-10-25): one grid, one spacing,
   one section title for every page (docs/DESIGN.md "Grid and spacing"). The container is .wrap (1260 px, 50/24/12 px
   from the window edge); inside it 12 columns with one gap (--g). Every box, card, table and section spans whole
   columns, so their left and right edges line up; ?grid=1 shows the columns. */
:root { --g: 24px; --sec: 40px; --head: 12px; --pad: 16px; --sh: 18px }
@media (max-width: 900px) { :root { --g: 16px; --sec: 32px; --pad: 14px } }
@media (max-width: 540px) { :root { --g: 12px; --sec: 28px; --pad: 12px; --sh: 17px } }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); align-items: start }
.grid--stretch { align-items: stretch }
.c-2 { grid-column: span 2 } .c-3 { grid-column: span 3 } .c-4 { grid-column: span 4 } .c-5 { grid-column: span 5 }
.c-6 { grid-column: span 6 } .c-7 { grid-column: span 7 } .c-8 { grid-column: span 8 } .c-9 { grid-column: span 9 }
.c-10 { grid-column: span 10 } .c-12 { grid-column: 1 / -1 }
@media (max-width: 900px) { .grid > [class*="c-"] { grid-column: 1 / -1 } .grid > .c-t6 { grid-column: span 6 } }
.sec { margin-top: var(--sec) }
.sec:first-child { margin-top: 0 }
/* the section title: an icon and the title (mcpvp's box titles, 18/600), a quiet link on the right */
.sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: var(--head) }
.sh__t { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: var(--sh); font-weight: 600; line-height: 1.25; color: var(--text) }
.sh__t > svg { flex: none; width: 18px; height: 18px; color: var(--muted) }
.sh__more { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 13px; color: var(--muted); transition: color var(--t-fast) }
.sh__more svg { width: 14px; height: 14px }
.sh__more:hover { color: var(--text) }
/* the one box: a flat panel with one line, the same padding everywhere */
.bx { padding: var(--pad); border: 1px solid var(--line); border-radius: var(--r-box); background: var(--panel) }
.bx--flush { padding: 0 }
/* the grid overlay for checks: /any/page?grid=1 (site.js sets html.grid-debug) */
html.grid-debug body { position: relative }
html.grid-debug body::after { content: ""; position: absolute; z-index: 9999; top: 0; bottom: 0; left: 50%; width: min(100% - 2 * var(--gutter), var(--shell)); transform: translateX(-50%); pointer-events: none;
  outline: 1px solid rgb(255 60 140 / 0.55);
  background: repeating-linear-gradient(90deg, rgb(255 60 140 / 0.11) 0 calc((100% - 11 * var(--g)) / 12), transparent calc((100% - 11 * var(--g)) / 12) calc((100% - 11 * var(--g)) / 12 + var(--g))) }

/* ================================================================ 18 the profile like mcpvp (order round): one panel,
   the header line (name, tier, views | tabs) over a thin line, then 12 columns: the render card and its buttons (2),
   the tab (10). General: the chart, the tier journey | Activity, Punishments. Stats: the
   record across, the chart (6) beside the results by tester (4). The nested grids have 10 columns and the same gap,
   so their columns are the panel's columns. */
.pf { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: rgb(255 255 255 / 0.012) }
.pf__head { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: 18px; margin-bottom: var(--g); border-bottom: 1px solid var(--line) }
.pf__id { min-width: 0 }
.pf__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px }
.pf__name { min-width: 0; color: var(--gold-2); font: 800 clamp(28px, 2.9vw, 40px) / 1.05 var(--font-ui); letter-spacing: -0.02em; overflow-wrap: anywhere }
.pf__tier .tt { gap: 8px; font-size: 26px; font-weight: 800; line-height: 1 }
.pf__tier .tt__ic { width: 32px; height: 32px }
.pf .views { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 15px }
.pf .views svg { width: 16px; height: 16px }
.pf .views b { color: #fff; font-weight: 700 }
.pf__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; color: var(--muted); font-size: 15px }
.pf__rank { color: #fff; font-weight: 700 }
.pf__rank--1 { color: var(--gold-2) } .pf__rank--2 { color: var(--silver-2) } .pf__rank--3 { color: var(--bronze-2) }
.pf__dot { color: var(--dim) }
.pf__title { color: var(--soft) }
.pf__peak { display: inline-flex; align-items: center; gap: 6px }
.pf__tabs { flex: none; margin: 0 }
.pf__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); align-items: start }
.pf__side { grid-column: span 2; display: grid; gap: 10px }
.pf__main { grid-column: span 10; min-width: 0 }
/* the tall render card: the figure in a frame, a soft gradient in the tier colour at the bottom */
.pf__card { position: relative; aspect-ratio: 5 / 8; overflow: hidden; border: 1px solid var(--line-2); border-radius: 8px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--t-bd) 46%, transparent) 0%, color-mix(in srgb, var(--t-bd) 14%, transparent) 38%, transparent 70%), #0b2415 }
.pf__card::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: color-mix(in srgb, var(--t-bd) 70%, transparent) }
.pf__img { position: absolute; left: 50%; bottom: 0; width: auto; height: 97%; max-width: none; transform: translateX(-50%) }
.pf__btns { display: grid; gap: 8px }
.pf__btns form { display: contents }
.pf__btn { justify-content: center; width: 100%; height: 38px }
/* the UUID under NameMC, as wide as the button: its title line, then the whole UUID (a click copies it, site.js) */
.nuuid__chip { display: grid; grid-template-columns: 14px minmax(0, 1fr) 14px; align-items: center; gap: 6px 8px; width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--nav); color: var(--muted); text-align: left; cursor: pointer;
  transition: color 0.15s, border-color 0.15s }
.nuuid__chip svg { width: 14px; height: 14px }
.nuuid__k { font: 600 12.5px / 1 var(--font-ui); white-space: nowrap }
.nuuid__do { display: grid } .nuuid__do svg { grid-area: 1 / 1 } .nuuid__do svg + svg { opacity: 0 }
.nuuid__chip code { grid-column: 1 / -1; color: var(--soft); font: 500 12px / 1.35 var(--font-ui); overflow-wrap: anywhere }
.nuuid__chip:hover { border-color: var(--line-hi); color: #fff }
.nuuid__chip.is-done { border-color: #10b981 }
.nuuid__chip.is-done .nuuid__do svg { opacity: 0 }
.nuuid__chip.is-done .nuuid__do svg + svg { opacity: 1; color: #10b981 }
/* General */
.pfg, .pfs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--g); align-items: start }
.pfg__mid { grid-column: span 6; display: grid; gap: var(--g); min-width: 0 }
.pfg__right { grid-column: span 4; display: grid; gap: var(--g); min-width: 0 }
.pf .sh { margin-bottom: var(--head) }
.pf .gcell { margin: 0 }
.pf .gcell--info, .pf .gcell--act, .pf .gcell--mod, .pf .gcell--names, .pf .gcell--chart { grid-area: auto }   /* the old General grid's named areas */
/* the chart box */
.pf .cbox { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-box) }
.pf .cplot { min-height: 0; border-radius: 3px; background: #091d11 }
[data-rchart] .sh { flex-wrap: wrap }   /* narrow phones: the ranges in a line of their own, "All time" stays in one piece */
.pf .ranges { gap: 4px }
.pf .ranges button { padding: 6px 10px; border-radius: 4px; color: var(--soft); white-space: nowrap }
.pf .ranges [aria-pressed="true"], .pf .ranges [aria-pressed="true"]:hover { border-color: var(--line-hi); background: #163a25; color: #fff }
.rl__line { stroke-width: 2 }
.rl__dot { r: 3 }
.rl__dot--now { fill: #fff3c2; stroke: #f7d046; stroke-width: 1.5 }
/* Activity */
.pf .abox { display: grid; gap: 12px }
.pf .apill { justify-self: start }
.afacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.afacts > div { display: grid; gap: 4px; min-width: 0 }
.afacts dt { color: var(--muted); font-size: 12.5px }
.afacts dd { margin: 0; color: #fff; font: 700 18px / 1.1 var(--font-ui); white-space: nowrap }
.pf .alabel { margin: 2px 0 0 }
.pf .alist { margin: 0 }
.pf .arow { position: relative; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 10px; padding: 9px 4px; cursor: pointer }
.arow__go { position: absolute; inset: 0; z-index: 1; width: auto; height: auto; border-radius: 0 }
.arow__go:focus-visible { outline-offset: -2px }
.arow__chev { display: grid; place-items: center; color: var(--dim) }
.arow__chev svg { width: 14px; height: 14px }
.arow__v { color: var(--muted); font-size: 13px; white-space: nowrap }
.pf .abox__more { justify-self: start; margin: 0 }
/* Punishments */
.pnone { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600 }
.pnone svg { width: 16px; height: 16px; color: var(--win) }
.pf .puns { display: grid; gap: 10px; max-height: 300px }
/* the tier journey in its column */
.pf .jbox { padding: 6px var(--pad) }
/* Stats */
.pfs { align-items: stretch }
.pfs__rec { grid-column: 1 / -1 }
.pfs__chart { grid-column: span 6; display: flex; flex-direction: column; min-width: 0 }
.pfs__vs { grid-column: span 4; display: flex; flex-direction: column; min-width: 0 }
.pfs__vs--wide { grid-column: 1 / -1 }
.pfs__chart .cbox, .pfs__vs .vbox { flex: 1 }
.pf .srec { display: grid; gap: 16px }
.pf .sstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 }
.wlbar { display: grid; gap: 8px }
.wlbar__bar { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 4px; background: var(--line) }
.wlbar__bar i { width: var(--pct); min-width: 4px }
.wlbar__bar i:last-child { flex: 1 }
.wlbar__w { background: var(--win) } .wlbar__d { background: #80978a } .wlbar__l { background: var(--loss) }
.wlbar__key { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px }
.wlbar__k { display: inline-flex; align-items: center; gap: 7px }
.wlbar__k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor }
.wlbar__k--w::before { background: var(--win) } .wlbar__k--d::before { background: #80978a } .wlbar__k--l::before { background: var(--loss) }
/* results by tester: fixed columns, the name on the left, the numbers right-aligned */
.vbox { display: flex; flex-direction: column; overflow: hidden }
.vt { display: grid; grid-template-columns: minmax(0, 1fr) 48px 70px 70px; align-items: center; gap: 10px; min-height: 44px; padding: 6px var(--pad); border-bottom: 1px solid var(--line) }
.vlist .vt:last-child { border-bottom: 0 }
.vt > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap }
.vt--head { min-height: 34px; color: var(--muted); font-size: 12.5px; background: rgb(255 255 255 / 0.015) }
.vt--head > span:not(:first-child) { color: var(--muted) }
.vt__who { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 600 }
.vt__who a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.vt__who a:hover { color: var(--gold-2) }
.vt__head { flex: none; width: 24px; height: 24px; border-radius: 3px }
.vt small { color: var(--dim); font-size: 12px }
.vt--none { display: block; color: var(--muted) }
.vlist { flex: 1 }
/* Test History: the results strip and the tester search on one line, then the list in fixed columns */
.pf .hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 }
.pf .htools { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; min-height: 44px; margin: 0 0 var(--g); padding: 0 }
.pf .htools .hsearch { margin-left: auto; width: min(100%, 280px) }
.pf .hlabel { margin-bottom: var(--head) }
.hcols, .pf .hrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 170px 170px; grid-template-areas: none; align-items: center; column-gap: 16px }
.pf .hrow > * { grid-area: auto }
.pf .hist--few .wl { display: flex } .pf .hist--few .htools__k { display: inline }
.hcols { padding: 0 14px 8px; color: var(--muted); font-size: 12.5px }
.hcols > span:last-child, .pf .hrow__chip { justify-self: end; text-align: right }
.pf .hrow { position: relative; min-height: 54px; padding: 8px 14px; cursor: pointer }
.hrow__go { position: absolute; inset: 0; z-index: 0; border-radius: inherit }
.hrow__go:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px }
.pf .hrow > :not(.hrow__go) { position: relative; z-index: 1; pointer-events: none }
.pf .hrow a:not(.hrow__go), .pf .hrow [data-tip], .pf .hrow button { pointer-events: auto }
.pf .hrow__main { display: flex; align-items: center; gap: 10px; min-width: 0 }
.pf .hrow__thumb { flex: none }
.pf .hrow__head { width: 28px; height: 28px; border-radius: 3px }
.pf .hrow__vs { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.pf .hrow__srv { margin-left: 8px; color: var(--dim); font-size: 12.5px }
.pf .hrow__when { display: flex; gap: 8px; color: var(--muted); font-size: 13.5px; white-space: nowrap }
.pf .hrow__time { color: var(--dim) }
.pf .hrow__chip { display: inline-flex; align-items: center; gap: 6px }
@media (max-width: 1100px) {
  .pf__side { grid-column: span 3 }
  .pf__main { grid-column: span 9 }
  .pfg, .pfs { grid-template-columns: minmax(0, 1fr) }
  .pfg__mid, .pfg__right, .pfs__chart, .pfs__vs { grid-column: 1 / -1 }
}
@media (max-width: 900px) {
  .pf { padding: 16px }
  .pf__head { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 14px }
  .pf__tabs { overflow-x: auto; scrollbar-width: none }
  .pf__tabs::-webkit-scrollbar { display: none }
  .pf__body { grid-template-columns: minmax(0, 1fr) }
  .pf__side, .pf__main { grid-column: 1 / -1 }
  .pf__side { grid-template-columns: 150px minmax(0, 1fr); align-items: end; gap: 12px }
  .pf__btns { align-content: end }
  /* General on phones: Activity, the chart, the tier journey, then the rest */
  .pfg { display: flex; flex-direction: column; align-items: stretch; gap: var(--g) }
  .pfg__mid, .pfg__right { display: contents }
  .pfg__act { order: 1 } .pfg__chart { order: 2 } .pfg__journey { order: 3 } .pfg__pun { order: 4 }
  .pf .sstrip { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .hcols { display: none }
  .pf .hrow { grid-template-columns: 86px minmax(0, 1fr) auto; grid-template-areas: "word main chip" "word when chip"; row-gap: 2px; padding: 8px 10px }
  .pf .hrow__word { grid-area: word } .pf .hrow__main { grid-area: main } .pf .hrow__when { grid-area: when; font-size: 12.5px } .pf .hrow__chip { grid-area: chip }
  .pf .hrow__thumb { display: none }
}
@media (max-width: 540px) {
  .pf { padding: 12px; border-radius: var(--r-panel) }
  .pf__name { font-size: 28px }
  .pf__tier .tt { font-size: 22px } .pf__tier .tt__ic { width: 26px; height: 26px }
  .pf__side { grid-template-columns: 124px minmax(0, 1fr) }
  .pf .sstrip { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .vt { grid-template-columns: minmax(0, 1fr) 40px 56px 56px; gap: 8px }
}
/* General on wide screens without a chart (no rank): the journey beside Activity, Punishments as one slim line at the foot.
   With a chart: green.css 19 */
@media (min-width: 1101px) {
  .pfg { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch }
  .pfg__mid, .pfg__right { display: contents }
  .pf .pfg__chart, .pf .pfg__pun { grid-column: 1 / -1 }
  .pf .pfg__journey, .pf .pfg__act { grid-column: auto }
  .pfg__chart { order: 1 } .pfg__journey { order: 2 } .pfg__act { order: 3 } .pfg__pun { order: 4 }
  .pfg__mid > *, .pfg__right > * { display: flex; flex-direction: column; min-width: 0 }
  .pfg__mid > * > .bx, .pfg__right > * > .bx { flex: 1 }
  .pf .abox { align-content: start }
}
@media (max-width: 540px) { .pf .hrow__time, .pf .hrow__srv { display: none } .pf .hrow__date { white-space: nowrap } .pf .hday--one .hrow__date::after { content: none } }
@media (min-width: 901px) { .pf__side { position: sticky; top: 16px } }   /* the card stays in view along a long tab */
/* rows that open a test (or a player): the whole row is the target, the pointer says so (site.js [data-row]) */
[data-row] { cursor: pointer }
[data-row] [data-tip] { cursor: pointer }

/* ================================================================ 19 every page on the grid (order round)
   home: the tier tests across the whole width (the podium panel's edges), the next event and the servers 6 + 6 */
.htests { width: auto; margin-inline: 0 }
.hmore { width: auto; margin-inline: 0 }
.hmore__col { display: flex; flex-direction: column; min-width: 0 }
.hmore__col > .hev, .hmore__col > .hsrv { flex: 1 }
.hmore .hev { align-content: center }
.home .tsub:first-of-type { margin-top: 0 }
/* the test lists everywhere: one set of columns per list, the result centred, the header row over the same columns */
@media (min-width: 1000px) {
  .ttrow--notester, .tcols--notester { grid-template-columns: 76px minmax(0, 1fr) 130px 140px 230px }
  .ttrow__res, .tcols > span:nth-last-child(2) { justify-self: center; text-align: center }
}
.tcols { color: var(--muted); font: 500 12.5px / 1 var(--font-ui); letter-spacing: 0; text-transform: none }
.ttrow__type span { padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--soft); font-size: 12px; white-space: nowrap }

/* one tier test: the card (7 columns) beside More tests (5), one height; no narrow card in the middle */
.rone { max-width: none }
.rone__grid { margin: 0 }
.rone__one { max-width: none; margin: 0 }
.rone__more { display: flex; flex-direction: column; max-width: none; margin: 0 }
.rone__more .tlist { flex: 1; align-content: start }
.rone .rone__clip { margin-top: var(--g) }
@media (min-width: 1000px) {
  .rone__more .ttrow { grid-template-columns: 64px minmax(0, 1fr) 96px 150px; gap: 12px; padding-inline: 14px }
}

/* the tester page: one header box across the width (the render, the name and the state | the numbers), the latest tests */
.tsh { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 12px 8px 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel) }
.tsh__fig { width: 96px; height: 128px }
.tsh__fig img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100% }
.tsh__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
.tsh__name { color: #fff; font: 800 clamp(26px, 2.6vw, 34px) / 1.1 var(--font-ui); letter-spacing: -0.02em }
.tsh__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; color: var(--muted); font-size: 15px }
.tsh__btn { margin-top: 12px }
.tsh__nums { display: grid; grid-template-columns: repeat(5, auto); margin: 0 }
.tsh__nums > div { display: grid; gap: 6px; padding: 4px 24px; border-left: 1px solid var(--line); text-align: right }
.tsh__nums dt { color: var(--muted); font-size: 12.5px; white-space: nowrap }
.tsh__nums dd { margin: 0; color: #fff; font: 800 24px / 1 var(--font-ui); font-variant-numeric: tabular-nums }
@media (max-width: 1000px) {
  .tsh { grid-template-columns: 80px minmax(0, 1fr) }
  .tsh__fig { width: 80px; height: 107px }
  .tsh__nums { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 12px; border-top: 1px solid var(--line) }
  .tsh__nums > div { padding: 0 8px; border: 0; text-align: left }
}
@media (max-width: 540px) {
  .tsh { padding: 12px }
  .tsh__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px }
  .tsh__nums dd { font-size: 20px }
}
/* More tests: one box like the test's card, its title inside, so both boxes start and end on one line */
.rone__more { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel) }
.rone__mhead { margin: 0; padding: 16px 16px 12px; border-bottom: 1px solid var(--line) }
.rone__more .tlist { border: 0; border-radius: 0; background: none }
.rone__more .ttrow:first-child { border-top: 0 }
/* season: the top 10 (8 columns) beside the highlights and past seasons (4); the side column's last list grows, so
   both columns end on one line */
@media (min-width: 1001px) {
  .season .sbody--side { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: stretch }
  .season .sbody--side > .ssec { grid-column: span 8 }
  .season .sbody--side > .sside { grid-column: span 4; display: flex; flex-direction: column; gap: var(--sec) }
  .season .sside > .ssec:last-child { flex: 1; display: flex; flex-direction: column }
  .season .sside > .ssec:last-child > .slist { flex: 1; align-content: start }
}
.season .phero { margin-bottom: 0 } .season .sbody { margin-top: 0 }   /* the page grid already puts 40 px between them */
.season .shead .more-link { margin-left: auto }
/* events: the section titles like everywhere; "Later" under the next event */
.evs .sh.sec { margin-top: var(--g) }
/* privacy: two boxes side by side (6 + 6), the note across under them */
.iprv .ihead { max-width: none }
.iprv__box { display: flex; flex-direction: column; min-width: 0 }
.iprv__box > .bx { flex: 1; margin: 0 }
.iprv__list.bx { display: grid; gap: 10px; padding-left: calc(var(--pad) + 16px) }
.iprv__list.bx { align-content: start }
/* one event: the main card (8 columns) beside the facts and the schedule (4) */
@media (min-width: 1001px) {
  .evg { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g) }
  .evg__main { grid-column: span 8 } .evg__side { grid-column: span 4 }
  .evg--solo .evg__side { grid-column: 1 / -1 }
}
/* Info (the highlights): How to get tested (7) beside the testing servers (5); the tiers (7) beside the rules and the
   FAQ (5); the testers across. Every box of a row ends on one line. */
.info .iblk { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 64px }
.info .iblk > .bx, .info .iblk > .hsrv { flex: 1; margin: 0 }
.info .iside { display: flex; flex-direction: column; gap: var(--g); min-width: 0 }
.info .iside > .iblk:last-child { flex: 1 }
.info .isrv { max-width: none; margin: 0; align-content: start }
.info .isteps { display: grid; gap: 12px; margin: 0; padding-left: 22px; list-style: decimal; color: var(--soft); line-height: 1.5 }
.info .isteps li::marker { color: var(--gold); font-weight: 700 }
.info .isteps b { color: #fff }
.info .isteps i { color: #fff; font-style: normal }
.ibox__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line) }
.icool { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 14px }
.icool svg { width: 16px; height: 16px; flex: none; color: var(--dim) }
.sh__meta { margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap }
.info .itiers__order { margin: 0; padding: 12px var(--pad); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px }
.info .itiers { width: 100% }
.info .itiers th, .info .itiers td { padding-inline: var(--pad) }
.info .itiers tbody tr:last-child > * { border-bottom: 0 }
.info .irules { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none }
.info .irules li { display: flex; align-items: flex-start; gap: 10px; color: var(--soft); line-height: 1.45 }
.info .irules svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--win) }
.info .ibox__in .qa { margin: 0 }
.info .itesters { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--panel) }
@media (max-width: 900px) { .info .iside { gap: var(--sec) } .info .iblk + .iblk { margin-top: 0 } }

/* home: under the testing servers one line with the new way in: apply in the Discord */
.hsrv__note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; color: var(--muted); font-size: 14px }
.hsrv__note a { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); font-weight: 600 }
.hsrv__note a svg { width: 14px; height: 14px }
.info .isteps { grid-template-columns: minmax(0, 1fr) }
@media (min-width: 901px) { .info .itiers tbody th, .info .itiers tbody td { height: 52px } }
.info .iblk > .hsrv { flex: 1 }
.info .iblk > .icool { flex: none; margin-top: 12px; padding: 12px var(--pad) }
.info .ibox__in .qa__item summary { min-height: 46px; padding-block: 10px }
.info .ibox__in .qa__item { min-height: 0 }
/* rows that open a test on the profile (recent tests, Test History): lighter under the pointer, a flash on a tap */
.pf .arow, .pf .hrow { transition: background-color var(--hov-t) var(--ease-out) }
@media (hover: hover) and (pointer: fine) { .pf .arow:hover, .pf .hrow:hover { background-color: var(--row-hi) } }
.pf .arow:focus-within, .pf .hrow:focus-within { background-color: var(--row-hi) }
.pf .arow.is-tap, .pf .hrow.is-tap { background-color: var(--row-tap); transition-duration: 0s }
.pf .pfg__act, .pf .pfg__pun { min-width: 0 }
/* the tier in short under the card's buttons */
.pf__tinfo { display: grid; justify-items: start; gap: 6px; padding: 14px }
.pf__tbig .tt { gap: 8px; font-size: 24px; font-weight: 800; line-height: 1 }
.pf__tbig .tt__ic { width: 28px; height: 28px }
.pf__tttl { color: #fff; font-weight: 600; font-size: 14px }
.pf__tsince { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px }
@media (max-width: 900px) { .pf__tinfo { display: none } }   /* phones: the header says it */
/* review fixes (order round) */
/* Test History: the title first, then the results strip with the tester search on its right, then the list */
.pf .htools { justify-content: flex-start; margin-bottom: 12px }
.pf .hlabel { margin-bottom: var(--head) }
/* privacy: "When you visit" beside the two shorter boxes stacked, so both columns end on one line */
.iprv__col { display: flex; flex-direction: column; gap: var(--g); min-width: 0 }
.iprv__col > .iprv__box:last-child { flex: 1 }
/* Stats: the record, the chart and the results by tester one under the other across the tab (no stretched boxes);
   the chart switches to its full-width drawing in a wide box */
.pfs { align-items: start }
.pfs__chart, .pfs__vs { grid-column: 1 / -1 }
.rl--full { display: none }
@container (min-width: 760px) { .rl--wide { display: none } .rl--full { display: block } }
.vt { grid-template-columns: minmax(0, 1fr) 64px 90px 90px 120px }
@media (max-width: 540px) { .vt { grid-template-columns: minmax(0, 1fr) 40px 56px 56px } .vt__last, .vt--head > span:last-child { display: none } }
/* home: the next event and the later ones in one box, the servers and the Apply line in one box; the boxes end together */
.hbox { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--row) }
.hbox > .hev, .hbox > .hsrv { margin: 0; border: 0; border-radius: 0; background: none }
.hbox > .hev + .hev { border-top: 1px solid var(--line) }
.hbox > .hsrv { flex: 1 }
.hbox > .hev:only-child { flex: 1 }
.hev--later { grid-template-columns: 40px minmax(0, 1fr); min-height: 60px; padding-block: 10px }
.hev__date { display: grid; justify-items: center; line-height: 1 }
.hev__date small { color: var(--gold); font: 700 11px / 1 var(--font-ui); text-transform: uppercase }
.hev__date b { margin-top: 3px; color: #fff; font: 800 17px / 1 var(--font-ui) }
.hbox .hsrv__note { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line) }
.home .tsub:not(:first-child) { margin-top: 16px }
/* Info: the servers and the cooldown line in one box (its footer at the bottom) */
.info .isrvbox { display: flex; flex: 1; flex-direction: column; overflow: hidden }
.info .isrvbox .isrv { flex: none; border: 0; border-radius: 0; background: none }
.info .isrvbox .icool { margin-top: auto; padding: 12px var(--pad); border-top: 1px solid var(--line) }
.isrv__none { margin: 0; padding: 14px var(--pad); color: var(--muted) }
@media (min-width: 901px) { .info .itiers tbody th, .info .itiers tbody td { height: 56px } }
/* the tier test page: a title over each box; the card and More tests end together */
.rone__col { display: flex; flex-direction: column; min-width: 0 }
.rone__col > .rone__card { flex: 1 }
.rone__more { overflow: visible; border: 0; border-radius: 0; background: none }
.rone__more .tlist { flex: 1; border: 1px solid var(--line); border-radius: 12px; background: var(--panel) }
/* the tester list: the type right after the player's column, no wide blank band */
@media (min-width: 1000px) { .ttrow--notester, .tcols--notester { grid-template-columns: 76px minmax(0, 1.2fr) minmax(0, 1fr) 140px 230px } }
@media (max-width: 540px) {
  .tsh__meta { display: grid; gap: 2px } .tsh__dot { display: none }
  .tsh__nums { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .tsh__nums > div:nth-child(-n + 3) { grid-column: span 2 } .tsh__nums > div:nth-child(n + 4) { grid-column: span 3 }
}
/* the profile on phones: the card, and beside it the tier in short above the buttons (no empty corner) */
@media (max-width: 900px) {
  .pf__side { grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch }
  .pf__card { grid-row: 1 / span 2 }
  .pf__tinfo { display: grid; align-content: center }
  .pf__btns { align-content: end }
}

/* ================================================================ 20 Polish 2 (2026-10-26): every piece of information once,
   the weak pages, phones (docs/PLAN-POLISH-2.md) */
/* Info: the tiers table one row per letter: the tier, its sub-tiers as small links (S+ · S · S−), the title once, the
   players with the split as a tooltip */
.itiers--letters .itiers__subs { display: inline-flex; align-items: center; gap: 6px; margin-left: 5px; vertical-align: middle }   /* S+ under B's letter */
.itiers__sub { color: var(--t-fg); font: 700 13px / 1 var(--font-ui) }
.itiers__sub:hover { text-decoration: underline; text-underline-offset: 3px }
.itiers__dot { color: var(--dim); font-size: 12px }
.itiers .tt--bare .tt__l { display: none }   /* S and A: the icon only, the sub-tiers beside it say the letter */
.itiers--letters .itiers__n[data-tip] { cursor: help; border-bottom: 1px dotted var(--line-hi) }
@media (min-width: 901px) { .info .itiers--letters tbody th, .info .itiers--letters tbody td { height: 80px } }
@media (max-width: 540px) { .itiers--letters .itiers__subs { gap: 4px } .itiers__sub { font-size: 12px } }
/* the profile on phones: the card beside the name and the tier line, the buttons under them, then the tabs (one line,
   scrolling if needed) and the tab; tier, rank and title only in the header line */
.pf .ptab { white-space: nowrap }
@media (max-width: 900px) {
  .pf { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "card id" "card btns" "tabs tabs" "main main";
    column-gap: 14px; row-gap: 12px; align-items: start }
  .pf__head, .pf__body, .pf__side { display: contents }
  .pf__card { grid-area: card; align-self: start }
  .pf__id { grid-area: id; align-self: start }
  .pf__btns { grid-area: btns; align-self: end; grid-template-columns: 1fr; gap: 8px }
  .pf__btn { height: 36px }
  .pf__tabs { grid-area: tabs; padding: 12px 0; border-block: 1px solid var(--line) }
  .pf__main { grid-area: main }
  .pf__name { font-size: 26px }
  .pf__sub { margin-top: 6px; font-size: 14px }
  .pf .ptab { padding-inline: 10px; font-size: 13px }
}
/* phones: the rank and the title as two short lines beside the card (no lone dot), the chart's title in one line */
@media (max-width: 540px) {
  .pf__sub { flex-direction: column; align-items: flex-start; gap: 2px }
  .pf__dot { display: none }
  .pf .sh__t > span { white-space: nowrap }
  .pf .ranges { gap: 2px }
  .pf .ranges button { padding: 6px 7px }
}
/* rankings: the distribution switch is a toolbar button; on phones the tier tabs are one row that scrolls and "Your
   standing" waits behind its icon (a tap opens the field under the toolbar), so the toolbar is one line */
.rk-distbtn[aria-expanded="true"] { border-color: var(--line-hi); background: #163a25; color: #fff }
.dist { margin-top: 20px }   /* it used to sit up beside the old switch (-26px); now it opens under the tier tabs */
@media (max-width: 640px) {
  .ktabs { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0; padding: 0 0 2px }
  .ktabs::-webkit-scrollbar { display: none }
  .ktab { flex: 0 0 68px }
  .rk-tools { position: relative; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px }
  .rk-q { grid-column: auto }
  .rk-tools .stand { width: 40px; height: 40px; justify-content: center }
  .rk-tools .stand:not(.stand--on):not(.is-open) .stand__form { padding: 0; justify-content: center }
  .rk-tools .stand:not(.stand--on):not(.is-open) .stand__k, .rk-tools .stand:not(.stand--on):not(.is-open) input { display: none }
  .rk-tools .stand.is-open { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; width: auto; box-shadow: 0 10px 24px rgb(0 0 0 / 0.45) }
  .rk-tools .stand.is-open .stand__form { padding-left: 12px }
  .rk-tools .stand--on { width: auto }
  .rk-tools .stand--on .stand__k, .rk-tools .stand--on .stand__chip { display: none }
  .bhead { flex-wrap: nowrap; align-items: flex-start }   /* the Board's info button beside its title, not on a row alone */
  .bhead__tools { width: auto; flex: none }
}
/* privacy (and any plain text page): one readable column at the grid's left edge, short sections, no boxes */
.doc { max-width: 720px }
.doc .ihead { max-width: none; margin-bottom: 28px }
.doc__lead { margin: 0 0 8px; color: var(--soft); font-size: 17px; line-height: 1.6 }
.doc h2 { margin: 32px 0 10px; color: #fff; font: 700 19px / 1.3 var(--font-ui) }
.doc p { margin: 0 0 12px; color: var(--soft); font-size: 15.5px; line-height: 1.65 }
.doc p:last-child { margin-bottom: 0 }
/* events: the winner of a past event in place of "Ended" */
.evl__win { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-2); font-weight: 600 }
.evl__win svg { width: 14px; height: 14px }
.evkv__win { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-2); font-weight: 700 }
.evkv__win svg { width: 15px; height: 15px }