/* Scrolls SMP: the green layer (green round, 27 Oct 2026; the owner's "Design Improvements & Redesign" prompt).
   Loaded last, after site.css, final.css and /tiers.css. The logo's greens (#053019 dark … #9ee457 light, sampled from
   static/logo-512.png) for every surface and the hero, the scroll's beige (#f2d3a3, from static/logo-mark-512.png)
   where the site used gold for its own controls (nav, Discord, buttons, links); gold stays for S and for place 1.
   mctiers.gg is the reference for the leaderboard, the search bar and the board, adapted to our one game mode.
   1 tokens, 2 shell (nav, logo, search), 3 tier icons, 4 hero, 5 podium, 6 leaderboard, 7 board, 8 SMP members,
   9 info and the rest. Every animation only moves things and stops with reduced motion. */

/* ================================================================ 1 tokens */
:root {
  --beige: #f2d3a3; --beige-hi: #f9e5c6; --beige-lo: #c99a63; --beige-ink: #2b1b08;
  --g-dark: #053019; --g-mid: #1f6b2a; --g-grass: #3e9a3c; --g-light: #9ee457;
  /* night round (30 Oct 2026; the owner: the original greens back, "the overall page background significantly
     lighter", depth from the logo's dark-to-light greens): the page a mid forest green that gets lighter toward the
     top (body below), the cards a deeper green on it, so text keeps its contrast */
  --bg: #153723;
  --bg-top: #1e482c;
  --bg-bot: #0f2a1b;
  --nav: #0b2115;
  --panel: #0e2719;
  --card-bg: #0e2719;
  --row: #10291b;
  --row-2: #10291b;
  --foot: #0a1d12;
  --raise: #183524;
  --hover: rgb(158 228 87 / 0.05);
  --well: linear-gradient(180deg, #0c2216 0%, #0e2719 17%, #0c2216 25%);
  --line: #1c3b29;
  --line-2: #224431;
  --line-3: #2d533c;
  --line-hi: #447454;
  --text: #e6efe7; --head: #f0f7ef; --soft: #c3d2c6; --muted: #a0b4a5; --label: #9fb2a3; --meta: #a0b4a5; --dim: #9aad9e; --index: #9aad9e;
  /* the site's own highlight is the scroll's beige now (gold is kept for S and place 1 through --gold-2/3 and tiers.css) */
  --gold: var(--beige); --gold-hi: var(--beige-hi); --gold-ink: var(--beige-ink); --cta: var(--beige);
  --green: #6cc644; --green-hi: #a6e45c; --green-lo: #1f6b2a; --green-bg: rgb(108 198 68 / 0.1);
  --on: #6cc644;
  --grad-green: linear-gradient(110deg, #47a43f 0%, #2b7f30 22%, #175a24 48%, #0b3a18 74%, #062712 100%);
  --smp-dark: #1f6b2a; --smp-light: #8ddc56;
}
html, body { background: var(--bg) }
/* the page: the logo's light green high up, fading into the forest green, a little deeper at the very bottom */
body { background: radial-gradient(1200px 560px at 50% -160px, rgb(110 196 74 / 0.2), transparent 72%) no-repeat,
  linear-gradient(180deg, var(--bg-top) 0, var(--bg) 640px, var(--bg) 85%, var(--bg-bot) 100%) }

/* ================================================================ 2 shell: the bar, a larger logo, the search bar */
.nav { background: var(--nav); border-color: var(--line) }
.notch__fill { fill: var(--nav) }
.notch__line { stroke: var(--line) }
.plaque { --hang: 30px; width: 300px; gap: 12px }
.plaque img { width: 56px; height: 56px; border-radius: 10px }
.wordmark { color: var(--beige); font-size: 40px }
.foot__logo .wordmark { font-size: 26px }
.nav__a { color: var(--soft) }
.nav__a:hover { color: #fff }
.nav__a[aria-current="page"] { color: var(--beige) }
.nav__a[aria-current="page"] svg { color: var(--beige) }
.nav__a[aria-current="page"]::after { background: var(--beige) }
.cta { border-color: var(--beige-lo); background: var(--beige); color: var(--beige-ink) }
.cta svg { color: var(--beige-ink) }
.btn--gold, .btn--beige { border-color: var(--beige-lo); background: var(--beige); color: var(--beige-ink); font-weight: 700 }
.btn--gold:hover, .btn--beige:hover { border-color: var(--beige-lo); color: var(--beige-ink); filter: brightness(1.05) }
.btn--line { border-color: rgb(255 255 255 / 0.32); background: rgb(4 24 12 / 0.25); color: #fff }
.btn--line:hover { border-color: #fff; color: #fff }
.more-link:hover { color: var(--beige-hi) }
@media (max-width: 1300px) {
  .plaque { width: 250px }
  .plaque img { width: 48px; height: 48px }
  .wordmark { font-size: 34px }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .plaque { width: 196px; gap: 8px }
  .plaque img { width: 38px; height: 38px }
  .plaque .wordmark { font-size: 26px }
}
@media (max-width: 900px) {
  .plaque { width: auto; height: 46px; gap: 9px }
  .plaque img { width: 40px; height: 40px; border-radius: 8px }
  .wordmark { font-size: 28px }
  .nav__a { flex: 1 1 15%; font-size: 12px }   /* six links in one row */
}
/* six links and the larger logo: tighter gaps, room for the plaque; 901-1150 px the small plaque and words only */
.nav__g--l { gap: clamp(14px, 1.9vw, 30px); padding-right: 166px }
.nav__g--r { gap: clamp(14px, 1.9vw, 30px); padding-left: 166px }
@media (max-width: 1300px) { .nav__g--l { padding-right: 140px } .nav__g--r { padding-left: 140px } }
@media (max-width: 1150px) and (min-width: 901px) {
  .notch--lg, .notch--md { display: none } .notch--sm { display: block }
  .plaque { width: 196px; gap: 8px }
  .plaque img { width: 38px; height: 38px }
  .plaque .wordmark { font-size: 26px }
  .nav__g--l { padding-right: 112px } .nav__g--r { padding-left: 112px }
  .nav__a { font-size: 14px }
  .nav__a svg { display: none }
}
/* the search bar like mctiers': a rounded field in the middle, the glass on the left, "/" on the right, a green ring */
.sbar { padding: 4px 0 18px }
.sbar form { max-width: 640px; margin: 0 auto }
.sbar input { height: 48px; padding: 12px 52px 12px 50px; border: 1px solid var(--line-3); border-radius: 999px; background: #0b1c12; color: #fff;
  font-size: 15px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast) }
.sbar input::placeholder { color: var(--dim) }
.sbar input:hover { border-color: var(--line-hi) }
.sbar input:focus { border-color: var(--green); background: #0d2116; box-shadow: 0 0 0 4px rgb(108 198 68 / 0.16); outline: 0 }
.sbar__box > svg { left: 19px; color: var(--muted) }
.sbar__box:focus-within > svg { color: var(--green-hi) }
.kbd { right: 16px; border-color: var(--line-hi); border-radius: 6px; background: #10281a; color: var(--soft) }
.sbar__clear { right: 12px; border-radius: 50% }
.sugg { border-color: var(--line-3); background: #0b1c12 }
@media (max-width: 900px) { .sbar { padding: 12px 0 10px } .sbar input { height: 46px } }
/* the rankings toolbar: the same round field, the standing box in green */
.field { border-color: var(--line-3); background: #0b1c12 }
.field > svg { color: var(--muted) }
.field input::placeholder { color: var(--dim) }
.field:focus-within { border-color: var(--green); background: #0d2116; box-shadow: 0 0 0 4px rgb(108 198 68 / 0.14) }
.field:focus-within > svg { color: var(--green-hi) }
.rk-q { border-radius: 999px; padding-left: 16px }
.stand { border-color: var(--line-3); border-radius: 999px; background: #0b1c12 }
.stand:hover, .stand:focus-within { border-color: var(--line-hi) }
.ibtn { border-color: var(--line-3); background: #0b1c12 }


/* ================================================================ 3 tier icons: S the golden scroll, A to F the letter in a circle */
.em--c .cb { fill: var(--t-bg); stroke: var(--t-fg); stroke-width: 2 }
.em--c .ct { fill: var(--t-fg); font: 800 17px / 1 var(--font-ui) }
.tier--unranked .em--c .cb { fill: transparent; stroke: var(--line-hi) }
.tt__l, .ti > span[aria-hidden] { line-height: 1 }
.tname--step .tstep { font-size: 0.85em; vertical-align: 0.45em }
.tt__l:has(.tname--step), .pill > span:has(.tname--step), .ti > span:has(.tname--step) { margin-left: -4px }
.tt--md .tt__ic { width: 26px; height: 26px }
.tt--lg .tt__ic { width: 34px; height: 34px }
.pill { gap: 4px }

/* ================================================================ 4 hero: the logo's green, the original logo, what this site is */
/* night round (30 Oct 2026; the owner: the original green "around Official Scrolls SMP Tier List" back): the green
   round's box again, the logo's greens from light (left, behind the logo) to dark (right, behind the text), a soft
   light behind the logo and a little shade at the bottom; the logo and the text as one group; on phones the logo
   beside the title, so the podium starts on the first screen */
.hero { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px 52px;
  min-height: 290px; margin-bottom: 24px; padding: 34px 48px; overflow: hidden; isolation: isolate;
  border: 1px solid rgb(158 228 87 / 0.2); border-radius: 18px;
  background: linear-gradient(110deg, #47a43f 0%, #2b7f30 22%, #175a24 50%, #0f3f1f 78%, #0d3a1d 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 18px 40px rgb(3 18 9 / 0.35) }
.hero::before { content: ""; position: absolute; left: -6%; top: -40%; z-index: -1; width: 60%; height: 180%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(214 248 140 / 0.3), rgb(158 228 87 / 0.08) 58%, transparent) }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent 42%, rgb(0 0 0 / 0.2)) }
.hero__art { position: relative; flex: none; display: grid; place-items: center }
/* our original logo (static/logo-512.png, the file as it is, with its own green background): still, no animation, at
   most 256 px wide so a 2x screen still draws it from the 512 px original without blowing it up; the rounded corners
   only cut the background */
.hero__logo { display: block; width: 210px; height: auto; border-radius: 26px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22), 0 18px 34px rgb(2 22 8 / 0.5) }
.hero__text { max-width: 560px }
.hero__t { margin: 0; color: #fff; font: 800 40px / 1.1 var(--font-ui); text-wrap: balance; letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.25) }
.hero__brand { color: var(--beige-hi) }
.hero__p { margin: 14px 0 0; color: rgb(240 248 236 / 0.92); font: 400 17px / 1.55 var(--font-ui) }
.hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }
.hero__btns .btn { height: 42px; padding: 0 20px; font-size: 15px }
@media (max-width: 1000px) {
  .hero { gap: 16px 32px; min-height: 0; padding: 28px 32px }
  .hero__logo { width: 160px; border-radius: 20px }
  .hero__t { font-size: 32px }
}
@media (max-width: 760px) {
  .hero { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px 16px; padding: 18px 18px 20px;
    background: linear-gradient(135deg, #47a43f 0%, #2b7f30 26%, #175a24 56%, #0b3a18 100%) }
  .hero::before { left: -30%; top: -30%; width: 90%; height: 120% }
  .hero__logo { width: 84px; border-radius: 16px }
  .hero__text { display: contents }
  .hero__t { font-size: 23px }
  .hero__p, .hero__btns { grid-column: 1 / -1 }
  .hero__p { margin: 0; font-size: 15px }
  .hero__btns { margin-top: 0 }
  .hero__btns .btn { flex: 1; height: 40px; padding: 0 14px }
}

/* ================================================================ 5 podium: three steps, the rank on the rankings' plate, twinkling stars */
.tops__panel { padding: 26px 24px 22px; border-color: var(--line);
  background: radial-gradient(56% 40% at 50% 0%, rgb(62 154 60 / 0.2), transparent 72%), linear-gradient(180deg, #10301e 0%, #0d2718 60%, #0b2215 100%) }
/* gold only for winning (final round): the title, #1's step edge, the plates */
.tops__t { margin: 0 0 24px; color: #f3d27a; font: 800 27px / 1.1 var(--font-ui); text-shadow: 0 0 22px rgb(243 196 90 / 0.2) }
.podium { gap: 18px }
/* three cards of one width (different widths put #1 11 px off the centre) on steps of their own height, #1 highest;
   the figures one size, standing on their step; one name colour (the plate says gold, silver or bronze) */
.pod { --w: 212px; --fh: 206px; --name: #fff; --edge: #c9d0dc;
  --h: 336px; --ph: 100px; --ft: calc(var(--h) - var(--ph) - var(--fh) + 8px) }
.pod--1 { --h: 364px; --ph: 120px; --edge: #f2bd45 }
.pod--2 { --h: 336px; --ph: 100px }
.pod--3 { --h: 322px; --ph: 98px; --edge: #d58d55 }
.pod--1::before { background: radial-gradient(closest-side, rgb(255 205 90 / 0.1), transparent 80%) }
.pod__card { border-color: rgb(158 228 87 / 0.12); background: linear-gradient(180deg, #133621 0%, #0d2618 100%) }
.pod--1 .pod__card { border-color: rgb(255 215 102 / 0.3) }
.pod__name { top: 14px }
.pod--1 .pod__name { top: 16px; font-size: 17px }
.pod__smp { position: absolute; left: 0; right: 0; top: 38px; z-index: 3; display: flex; justify-content: center }
.pod--1 .pod__smp { top: 42px }
.pod__img { filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.4)) }
/* the step: dark green with the plate colour on its top edge; on it the rank on the rankings page's slanted plate
   (the same .rkr__rank / .rkr__n rules and .rkr--1/2/3 colours, 62 x 40 px like a rankings row, 40 x 32 px on phones
   like there), the tier and the flag under it */
.pod__base { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 16px;
  background: linear-gradient(180deg, #153a24 0%, #0f2c1b 100%) }
.pod__base::after { content: none }
.pod__plate { display: flex; justify-content: center }
.pod__plate .rkr__rank { width: 62px; height: 40px; margin: 0 }
.pod--1 .pod__base { padding-top: 26px }
.pod__meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 20px }
.pod__meta .cflag { width: 20px; height: 15px; border-radius: 2px }
/* twinkling stars round the podium (the owner liked the old site's sparkles): they grow and turn, never fade, so they
   are always there; more of them near #1, none over text; still with reduced motion */
.tw { position: absolute; z-index: 0; width: var(--s, 10px); height: var(--s, 10px); pointer-events: none;
  animation: g-twinkle var(--d, 3.4s) ease-in-out var(--dl, 0s) infinite }
.tw::before { content: ""; position: absolute; inset: -90%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 228 150 / 0.22), transparent) }
.tw::after { content: ""; position: absolute; inset: 0; background: #fff4d2;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%) }
@keyframes g-twinkle { 0%, 100% { transform: scale(0.4) rotate(0deg) } 50% { transform: scale(1) rotate(45deg) } }
.tw--1 { left: -9%; top: 8%; --s: 14px; --d: 3.2s }
.tw--2 { left: -24%; top: 30%; --s: 9px; --d: 4.1s; --dl: -1.2s }
.tw--3 { left: -14%; top: 58%; --s: 11px; --d: 3.6s; --dl: -2.3s }
.tw--4 { left: -32%; top: 76%; --s: 7px; --d: 4.6s; --dl: -0.6s }
.tw--5 { left: -37%; top: 12%; --s: 6px; --d: 5s; --dl: -3s }
.tw--6 { right: -9%; top: 12%; --s: 13px; --d: 3.4s; --dl: -1.8s }
.tw--7 { right: -22%; top: 36%; --s: 10px; --d: 4.3s; --dl: -0.4s }
.tw--8 { right: -13%; top: 64%; --s: 8px; --d: 3.9s; --dl: -2.8s }
.tw--9 { right: -30%; top: 82%; --s: 7px; --d: 4.8s; --dl: -1.1s }
.tw--10 { right: -36%; top: 20%; --s: 6px; --d: 5.2s; --dl: -3.6s }
.tw--11 { left: 30%; top: -4%; --s: 10px; --d: 3.8s; --dl: -2s }
.tw--12 { right: 30%; top: 1%; --s: 7px; --d: 4.4s; --dl: -0.9s }
/* the figures stand still (owner, 29 Oct 2026: of all that moved on the podium, only the twinkling stars stay;
   #1 hopped, #2 swayed, #3 floated before) */
.tops__foot { margin-top: 16px }
.slim { margin-top: 22px }
.slim__row { position: relative; border-color: var(--line); background: var(--row) }
@media (hover: hover) and (pointer: fine) { .slim__row:hover { border-color: var(--line-3); background: #12291c } }
.slim__name { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; min-width: 0 }
/* places 4 and 5: the rank on the rankings' plate too (dark green for 4 and up, like there) */
.slim__row { grid-template-columns: 62px 40px minmax(0, 1fr) auto; padding-left: 12px }
.slim__n { display: flex; font: inherit }
.slim__n .rkr__rank { width: 62px; height: 40px; margin: 0 }
@media (max-width: 760px) { .slim__row { grid-template-columns: 40px 40px minmax(0, 1fr) auto; height: auto; min-height: 56px; padding-block: 8px }
  .slim__n .rkr__rank { width: 40px; height: 32px } }
@media (max-width: 760px) {
  .podium { gap: 8px }
  .tops__pod { width: 100% }
  .pod { --w: calc((100% - 16px) / 3); --fh: 128px; --h: 236px; --ph: 84px }
  .pod--1 { --h: 258px; --ph: 98px }
  .pod--3 { --h: 230px; --ph: 86px }
  .pod__name, .pod--1 .pod__name { top: 10px; left: 2px; right: 2px; font-size: 12px; letter-spacing: -0.01em }
  .pod__name.nl-14, .pod__name.nl-15, .pod__name.nl-16 { font-size: 12px; letter-spacing: -0.035em }
  .pod__smp, .pod--1 .pod__smp { top: 28px }
  .pod__smp .smp { height: 15px; padding: 0 5px; font-size: 9px }
  .pod__base { gap: 8px; padding-top: 12px }
  .pod--1 .pod__base { padding-top: 18px }
  .pod__plate .rkr__rank { width: 40px; height: 32px; margin: 0 }
  .pod__meta .cflag { display: none }
  .tw--2, .tw--4, .tw--5, .tw--7, .tw--9, .tw--10 { display: none }
  .tw--1 { left: 6%; top: 1% } .tw--3 { left: 22%; top: 6% } .tw--6 { right: 6%; top: 3% } .tw--8 { right: 21%; top: 9% }
  .tw--11 { left: 31%; top: -6% } .tw--12 { right: 31%; top: -4% }
}

/* ================================================================ 6 leaderboard (mctiers' overall list): rank plate, player, region, country, tier */
.rk-card { border-color: var(--line); background: var(--panel) }
.ktab { border-color: var(--line); background: var(--nav) }
.ktab[aria-current="page"] { border-color: var(--line-hi); background: #143021 }
.ktabs__ind { background: var(--beige) }
@media (hover: hover) and (pointer: fine) { .ktab:not([aria-current="page"]):hover { border-color: var(--line-3); background: #10261a } }
.rk-head, .rkr { grid-template-columns: 72px minmax(0, 1.5fr) 84px minmax(0, 1fr) 110px }
.rk-th--p { padding-left: 58px }
/* every rank on a slanted plate: dark green, gold, silver and bronze for 1-3 (replaces the ribbon) */
.rkr__rank { align-self: center; height: 40px; margin-left: 10px }
.rkr__rank::before, .rkr--1 .rkr__rank::before, .rkr--2 .rkr__rank::before, .rkr--3 .rkr__rank::before { content: ""; position: absolute; inset: 0; top: 0;
  width: auto; border-radius: 5px; background: var(--rib, #12291c); clip-path: none; transform: skewX(-14deg);
  box-shadow: inset 0 0 0 1px rgb(158 228 87 / 0.1) }
.rkr--1 .rkr__rank::before, .rkr--2 .rkr__rank::before, .rkr--3 .rkr__rank::before { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 3px 10px rgb(0 0 0 / 0.3) }
.rkr__n { color: var(--soft); font-size: 26px }
.rkr--1 .rkr__n, .rkr--2 .rkr__n, .rkr--3 .rkr__n { translate: none }
.rkr__ava { background: #12291c }
.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__id { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0 }
.rkr__reg { display: flex; align-items: center }
.rkr.is-me { background: rgb(242 211 163 / 0.06); box-shadow: inset 2px 0 0 var(--beige) }
.rkr:has(.rk-name:focus-visible) { outline-color: var(--beige) }
@media (max-width: 1100px) { .rk-head, .rkr { grid-template-columns: 64px minmax(0, 1.4fr) 70px minmax(0, 1fr) 96px; gap: 12px } }
@media (max-width: 760px) {
  /* phones: the region and the country under the name */
  .rkr { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "rank who tier" "rank sub tier"; row-gap: 2px; min-height: 62px; padding: 8px 8px 8px 0 }
  .rkr__rank { grid-area: rank; height: 32px; margin-left: 6px }
  .rkr__n { font-size: 21px }
  .rkr__who { grid-area: who }
  .rkr__reg { grid-area: sub; padding-left: 46px }
  .rkr__ctry { grid-area: sub; display: flex; padding-left: 86px; font-size: 13px }
  .rkr__reg:empty + .rkr__ctry { padding-left: 46px }
  .rkr__tier { grid-area: tier }
  .rkr__who { align-items: flex-start }
  .rkr__ava { margin-top: 2px }
  .rkr__id { gap: 3px 8px }
}
/* the region like mctiers' coloured chip; the country next to it */
.reg { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid rgb(108 198 68 / 0.38); border-radius: 5px;
  background: rgb(108 198 68 / 0.12); color: #b9ee8a; font: 700 11px / 1 var(--font-ui); letter-spacing: 0.04em }
.rkr__ctry { color: var(--soft) }

/* ================================================================ 7 board (mctiers' tier board for one game mode): six columns side by side */
.bcol { border-color: var(--line); background: #0a1a11 }
.bcol__h { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--t-bd) 16%, #0c1d13), #0c1d13) }
.bcol__em { width: 30px; height: 30px }
.bcol__em .em { width: 100%; height: 100% }
.bro { position: relative }
.bro__a:focus-visible { box-shadow: inset 0 0 0 2px var(--beige) }

/* ================================================================ 8 Scrolls SMP members: the tag and the pulsing green outline
   The outline is two layers: a dark green line that always shows and a light green one whose opacity pulses (2.8 s),
   so only opacity animates (cheap, no repaint). Nothing else differs: same background, same colours. */
.smp { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; flex: none; border: 1px solid rgb(141 220 86 / 0.45); border-radius: 999px;
  background: rgb(31 107 42 / 0.32); color: #c4f29a; font: 700 11px / 1 var(--font-ui); letter-spacing: 0.01em; white-space: nowrap }
@keyframes g-pulse { 0%, 100% { opacity: 0 } 50% { opacity: 1 } }
.rkr.is-smp, .slim__row.is-smp, .bro.is-smp { border-radius: 8px }
.rkr.is-smp::before, .slim__row.is-smp::before, .bro.is-smp::before, .pod.is-smp .pod__card::before, .pf__card.is-smp::before,
.rkr.is-smp::after, .slim__row.is-smp::after, .bro.is-smp::after, .pod.is-smp .pod__card::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--smp-dark) }
.rkr.is-smp::after, .slim__row.is-smp::after, .bro.is-smp::after, .pod.is-smp .pod__card::after {
  box-shadow: inset 0 0 0 1.5px var(--smp-light), inset 0 0 12px rgb(141 220 86 / 0.14); opacity: 0; animation: g-pulse 2.8s ease-in-out infinite }
.pod.is-smp .pod__card { border-color: transparent }
.pf__card.is-smp { box-shadow: 0 0 0 1.5px var(--smp-dark) }
.pf__card.is-smp::before { inset: -1.5px; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--smp-light), 0 0 14px rgb(141 220 86 / 0.25); opacity: 0;
  animation: g-pulse 2.8s ease-in-out infinite }

/* ================================================================ 9 info and the rest */
.iopen { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid rgb(108 198 68 / 0.4); border-radius: 10px;
  background: linear-gradient(110deg, rgb(62 154 60 / 0.22), rgb(31 107 42 / 0.1)); color: var(--soft); font-size: 15px; line-height: 1.5 }
.iopen svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--green-hi) }
.iopen b { color: #fff }
.pf__ctry { color: var(--soft) }
.pf__sub .reg { margin-left: 0 }
.pf__line .smp { align-self: center }
.empty { border-color: var(--line); background: rgb(5 16 9 / 0.6) }
.hev__ic { background: rgb(242 211 163 / 0.1); color: var(--beige) }
.foot { border-top-color: var(--line); background: var(--foot) }

@media (prefers-reduced-motion: reduce) {
  .pod__img { animation: none }
  .tw { animation: none; transform: scale(0.75) }
  main > .wrap, main > section, main > div { animation: none }
  .tops__panel { transform: none }
  .rkr.is-smp::after, .slim__row.is-smp::after, .bro.is-smp::after, .pod.is-smp .pod__card::after, .pf__card.is-smp::before { animation: none; opacity: 0.6 }
}
.ibtn:hover, .ibtn[aria-expanded="true"], details[open] > .ibtn { border-color: var(--line-hi); background: #143021; color: #fff }
.itiers .tt__ic { width: 26px; height: 26px }
.jstep__tier b:has(.tname--step) { margin-left: -3px }
.hero__brand { color: var(--beige-hi); white-space: nowrap }
.bcol--empty .bcol__none { font-size: 13px }
.bempty { display: none }
@media (max-width: 600px) { .bempty { display: block } }

/* ================================================================ 10 finishing touches (29 Oct 2026) */
/* page change: the new page fades in through the View Transition (site.css section 7; a snapshot, so the page itself is
   never held invisible when animations do not run, e.g. in a background tab) and its content rises 10 px. 260 ms, the
   same on every page; reduced motion turns both off (site.css and section 9 above) */
::view-transition-new(page), ::view-transition-new(shell-foot) { animation: g-page-in 0.26s var(--ease-out) both }
@keyframes g-page-in { from { opacity: 0 } }
@keyframes g-rise { from { transform: translateY(10px) } }
main > .wrap, main > section, main > div { animation: g-rise 260ms var(--ease-out) both }
/* Top Players: full size while in view; while it scrolls out at the top it shrinks a little toward its lower edge
   (site.js sets --tops-s from the scroll position, never below 0.9) and grows back on the way up */
.tops__panel { transform: scale(var(--tops-s, 1)); transform-origin: 50% 100%; will-change: transform }

/* ================================================================ 11 night round (30 Oct 2026): the Info page */
/* The owner: "still cramped and cluttered: rebuild the layout with clear sections and enough spacing", "How to Get
   Tested and testing eligibility at the top, impossible to miss", "shorter, cleaner". One column of at most 1040 px,
   a sticky row of jump links (site.js marks the part you read), 72 px between the parts, every part a heading with
   one short line and a few calm cards; the long reference lists (mods, the verify steps) folded with their title
   visible; tables for the rubric and the punishment levels (mctiers' guide pages are the reference). */
.ipage { padding-top: 30px }
.ipage > * { max-width: 1040px; margin-inline: auto }
.ipage b { color: #fff }
.ip-list code, .ip-card code { padding: 1px 6px; border-radius: 5px; background: rgb(0 0 0 / 0.28); color: var(--beige-hi); font-size: 0.9em }
.ipage a:not(.btn):not(.ip-nav__a):not(.itiers__tier):not(.itiers__sub):not(.itester__a) { color: var(--beige-hi); text-decoration: underline;
  text-decoration-color: rgb(249 229 198 / 0.35); text-underline-offset: 3px }
/* channel names like Discord shows them */
.dch { padding: 0 3px; border-radius: 5px; background: rgb(255 255 255 / 0.08); color: var(--text); white-space: nowrap }

/* the top: title, one line, five facts */
.ip-top__t { margin: 0; color: #fff; font: 800 44px / 1.08 var(--font-ui); letter-spacing: -0.02em }
.ip-top__p { max-width: 660px; margin: 12px 0 0; color: var(--soft); font: 400 17px / 1.6 var(--font-ui) }
.ip-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 720px; margin: 24px 0 0; padding: 0; list-style: none }
.ip-facts li { display: grid; align-content: start; gap: 3px; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(8 30 17 / 0.6) }
.ip-facts b { font: 700 17px / 1.2 var(--font-ui) }
.ip-facts span { color: var(--muted); font-size: 13.5px; line-height: 1.35 }

/* the jump links: one row that stays on top while you read */
.ip-nav { position: sticky; top: 10px; z-index: 30; margin-top: 22px; padding: 6px; border: 1px solid var(--line-3); border-radius: 999px;
  background: var(--nav); box-shadow: 0 10px 24px rgb(0 0 0 / 0.3) }
.ip-nav__list { position: relative; display: flex; gap: 2px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none }
.ip-nav__list::-webkit-scrollbar { display: none }
/* phones and tablets, where the row can be wider than the screen: an edge fades where more links are (site.js sets
   is-scrolled and is-end; a row that fits is at its end, so it does not fade) */
@media (max-width: 960px) {
  .ip-nav__list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent) }
  .ip-nav__list.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 28px), transparent) }
  .ip-nav__list.is-end { -webkit-mask-image: none; mask-image: none }
  .ip-nav__list.is-scrolled.is-end { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px); mask-image: linear-gradient(90deg, transparent 0, #000 22px) }
}
.ip-nav__list li { flex: 1 0 auto }
.ip-nav__a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--soft); font: 600 14px / 1.2 var(--font-ui); text-align: center;
  white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast) }
.ip-nav__a:hover { color: #fff; background: rgb(255 255 255 / 0.05) }
.ip-nav__a.is-on { background: rgb(242 211 163 / 0.14); color: var(--beige-hi) }

/* every part: room above, a heading with an icon and one short line */
.ip-sec { margin-top: 60px; padding-top: 44px; border-top: 1px solid rgb(158 228 87 / 0.14); scroll-margin-top: 84px }
.ip-sec.ip-get { padding-top: 34px; border-top: 1px solid rgb(158 228 87 / 0.3) }
.ip-h { margin-bottom: 22px }
.ip-h__t { display: flex; align-items: center; gap: 12px; margin: 0; color: #fff; font: 800 28px / 1.15 var(--font-ui); letter-spacing: -0.01em }
.ip-h__t svg { width: 24px; height: 24px; flex: none; color: var(--green-hi) }
.ip-h__lead { max-width: 760px; margin: 8px 0 0; color: var(--muted); font: 400 16px / 1.6 var(--font-ui) }

/* 1 how to get tested: the one part with the logo's green */
.ip-get { margin-top: 30px; padding: 34px 36px 30px; border: 1px solid rgb(158 228 87 / 0.3); border-radius: 22px;
  background: radial-gradient(70% 90% at 0% 0%, rgb(110 196 74 / 0.24), transparent 70%), linear-gradient(160deg, #164a2a 0%, #0f3220 45%, #0c2819 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 20px 44px rgb(3 18 9 / 0.35) }
.ip-get__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px }
.ip-get__t { margin: 0; color: #fff; font: 800 34px / 1.1 var(--font-ui); letter-spacing: -0.02em }
.ip-free { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px solid rgb(158 228 87 / 0.4); border-radius: 999px;
  background: rgb(108 198 68 / 0.14); color: var(--text); font: 400 14.5px / 1.3 var(--font-ui) }
.ip-free svg { width: 18px; height: 18px; flex: none; color: var(--green-hi) }
.ip-get__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 40px; margin-top: 30px }
.ip-steps { margin: 0; padding: 0; list-style: none }
.ip-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 24px }
.ip-step:last-child { padding-bottom: 0 }
.ip-step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; border-radius: 2px; background: rgb(242 211 163 / 0.28) }
.ip-step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--beige); color: var(--beige-ink);
  font: 400 21px / 1 var(--font-px); box-shadow: 0 0 0 5px rgb(242 211 163 / 0.12) }
.ip-step__b { padding-top: 2px; min-width: 0 }
.ip-step__t { margin: 0 0 4px; color: #fff; font: 700 18.5px / 1.3 var(--font-ui) }
.ip-step__b p { margin: 0; color: var(--soft); font: 400 15.5px / 1.6 var(--font-ui) }
/* the bot's line is the step itself: larger and white, its bold words stand out */
.ip-step__b .ip-step__line { padding-top: 8px; color: var(--text); font: 500 17px / 1.5 var(--font-ui) }
.ip-step__b .ip-step__more { margin-top: 6px; color: var(--muted); font-size: 14.5px }
.ip-more { margin-top: 10px }
.ip-more > summary { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--beige-hi); font: 600 14.5px / 1.3 var(--font-ui); cursor: pointer; list-style: none }
.ip-more > summary::-webkit-details-marker { display: none }
.ip-more > summary svg { width: 16px; height: 16px; flex: none; margin-top: 1px; transition: transform var(--t-fast) }
.ip-more[open] > summary svg { transform: rotate(180deg) }
.ip-more__in { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(4 22 12 / 0.5) }
.ip-where { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 14px }
.ip-where svg { width: 16px; height: 16px; flex: none; margin-top: 2px }
/* who can get tested: a checklist beside the steps */
.ip-can { padding: 24px 24px 20px; border: 1px solid var(--line-3); border-radius: 18px; background: rgb(5 24 13 / 0.62) }
.ip-can__t { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font: 700 19px / 1.25 var(--font-ui) }
.ip-can__t svg { width: 22px; height: 22px; color: var(--green-hi) }
.ip-can__lead { margin: 10px 0 12px; color: var(--soft); font: 400 15px / 1.55 var(--font-ui) }
.ip-checks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none }
.ip-checks li { position: relative; padding-left: 30px; color: var(--soft); font: 400 15px / 1.5 var(--font-ui) }
.ip-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: rgb(108 198 68 / 0.18) }
.ip-checks li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--green-hi); border-width: 0 2px 2px 0; transform: rotate(45deg) }
.ip-can__also { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--muted); font: 400 14.5px / 1.55 var(--font-ui) }
.ip-can__btn { display: flex; justify-content: center; width: 100%; height: 44px; margin-top: 16px; font-size: 15px }
.ip-can__q { display: flex; justify-content: center; margin: 12px 0 0; font-size: 13.5px }
.ip-warn { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 14px 18px; border: 1px solid rgb(229 140 60 / 0.35); border-radius: 14px;
  background: rgb(229 140 60 / 0.09); color: var(--soft); font: 400 14.5px / 1.55 var(--font-ui) }
.ip-warn > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #f0a35e }
.ip-warn > div > b:first-child { margin-right: 6px }
.ip-inline { display: inline; margin: 0; padding: 0; list-style: none }
.ip-inline li { display: inline }
.ip-warn .ip-inline li + li::before { content: " " }

/* cards: one surface, a short title, a few lines */
.ip-cards { display: grid; gap: 16px }
.ip-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.ip-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px }
.ip-cards--rec { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start }
.ip-stack { display: grid; gap: 16px }
.ip-card { padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); box-shadow: 0 10px 26px rgb(3 18 9 / 0.18) }
.ip-card--flush { padding: 0; overflow: hidden }
.ip-card--warn { border-color: rgb(217 71 91 / 0.35) }
.ip-card--high { border-color: rgb(243 210 122 / 0.3) }
.ip-card__t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; color: #fff; font: 700 17px / 1.3 var(--font-ui) }
.ip-card__t > svg { width: 20px; height: 20px; flex: none; color: var(--green-hi) }
.ip-card--warn .ip-card__t > svg { color: #ef7b85 }
.ip-card__t small { color: var(--muted); font: 600 13.5px / 1.3 var(--font-ui) }
.ip-card p { margin: 0; color: var(--soft); font: 400 15.5px / 1.6 var(--font-ui) }
.ip-card .ip-card__sub { margin: 14px 0 8px; color: var(--muted); font-size: 14px; font-weight: 600 }
.ip-tag { padding: 4px 11px; border-radius: 999px; background: rgb(242 211 163 / 0.13); color: var(--beige-hi); font: 700 14px / 1.2 var(--font-ui) }
.ip-tag--high { background: rgb(243 210 122 / 0.16); color: #f6dc93 }
.ip-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.ip-list li { position: relative; padding-left: 18px; color: var(--soft); font: 400 15.5px / 1.6 var(--font-ui) }
.ip-list li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--green) }
.ip-list ul { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none }
.ip-list ul li::before { background: var(--line-hi) }
.ip-good { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none }
.ip-good li { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(8 30 17 / 0.55);
  color: var(--soft); font: 400 14.5px / 1.55 var(--font-ui) }
.ip-good svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted) }
.ip-after { display: flex; gap: 10px; margin: 16px 0 0; color: var(--muted); font: 400 14.5px / 1.55 var(--font-ui) }
.ip-after > svg { width: 17px; height: 17px; flex: none; margin-top: 2px }
.ip-after.ip-text p { margin: 0 }
.ip-text p { margin: 0 0 10px; color: var(--soft); font: 400 15px / 1.6 var(--font-ui) }
.ip-text p:last-child { margin-bottom: 0 }
.ip-text .ip-list { margin-bottom: 12px }
.ip-text .ip-list:last-child { margin-bottom: 0 }
.ip-sub { margin: 14px 0 8px; color: #fff; font: 700 15px / 1.3 var(--font-ui) }
.ip-note { display: flex; gap: 8px; color: var(--muted) }
.ip-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px }

/* tables: the rubric steps and the punishment levels */
.ip-table-wrap { overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); box-shadow: 0 10px 26px rgb(3 18 9 / 0.18) }
.ip-ladder, .ip-sev, .ip-kinds { width: 100%; border-collapse: collapse }
.ip-ladder thead th, .ip-sev thead th, .ip-kinds thead th { padding: 13px 22px; background: rgb(0 0 0 / 0.18); color: var(--muted); font: 600 13.5px / 1.3 var(--font-ui); text-align: left }
.ip-ladder tbody th, .ip-ladder td, .ip-sev tbody th, .ip-sev td, .ip-kinds tbody th, .ip-kinds td { padding: 16px 22px; border-top: 1px solid var(--line); color: var(--soft);
  font: 400 15.5px / 1.55 var(--font-ui); text-align: left; vertical-align: middle }
.ip-ladder td small, .ip-sev td small { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px }
.ip-ladder__step { width: 150px; white-space: nowrap }
.ip-kinds tbody th { width: 170px; color: #fff; font-weight: 700 }
.ip-kinds tbody th small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 600 }
.ip-kinds td:nth-child(2) { width: 34% }
.ip-kinds--high th { color: #f6dc93 !important }
.ip-ladder__step > * { vertical-align: middle }
.ip-ladder__arrow { display: inline-block; margin: 0 6px; color: var(--dim) }
.ip-ladder__arrow svg { width: 16px; height: 16px; vertical-align: -3px }
.ip-must { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: rgb(243 210 122 / 0.16); color: #f6dc93;
  font: 700 12.5px / 1.4 var(--font-ui); vertical-align: 1px }
.ip-sev tbody th { width: 150px; color: #fff; font-weight: 700; white-space: nowrap }
.ip-sev__dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--sev) }
.ip-sev--low { --sev: #6cc644 }
.ip-sev--medium { --sev: #e7b04a }
.ip-sev--high { --sev: #e5743c }
.ip-sev--permanent { --sev: #d9475b }
.ip-sev__len { width: 120px; color: #fff !important; font-weight: 600 !important; white-space: nowrap }
.ip-sev .ip-inline li:not(:last-child)::after { content: " · "; color: var(--dim) }
/* appeals: one card, the list in two columns on wide screens */
.ip-card--wide { margin-top: 16px }
.ip-card--wide .ip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px }

/* the kit: the items in three columns */
.ip-kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin: 0; padding: 8px 20px; list-style: none;
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel) }
.ip-kit li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--soft); font: 400 15px / 1.45 var(--font-ui) }
.ip-kit li:nth-last-child(-n + 2):nth-child(3n + 2), .ip-kit li:nth-last-child(-n + 3):nth-child(3n + 1), .ip-kit li:last-child { border-bottom: 0 }

/* folded reference lists: the title stays visible */
.ip-fold { margin-top: 16px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel) }
.ip-fold__s { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none }
.ip-fold__s::-webkit-details-marker { display: none }
.ip-fold__s > svg { width: 20px; height: 20px; flex: none; color: var(--green-hi) }
.ip-fold__t { display: grid; gap: 2px; color: #fff; font: 700 16.5px / 1.3 var(--font-ui) }
.ip-fold__t small { color: var(--muted); font: 400 14px / 1.35 var(--font-ui) }
.ip-fold__x { display: grid; place-items: center; width: 32px; height: 32px; flex: none; margin-left: auto; border-radius: 50%; background: rgb(255 255 255 / 0.05) }
.ip-fold__x svg { width: 16px; height: 16px; color: var(--soft); transition: transform var(--t-fast) }
.ip-fold[open] .ip-fold__x svg { transform: rotate(180deg) }
.ip-fold__in { padding: 0 22px 22px }
/* the kit inside its fold: the items on the fold's own surface */
.ip-fold--kit { margin-top: 0 }
.ip-fold--kit .ip-kit { margin: 0 22px 18px; padding: 0; border: 0; border-radius: 0; background: none }
.ip-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; margin-bottom: 14px }
.ip-mods__col { padding: 16px 18px; border-radius: 12px }
.ip-mods__col--ok { border: 1px solid rgb(108 198 68 / 0.28); background: rgb(108 198 68 / 0.07) }
.ip-mods__col--no { border: 1px solid rgb(239 100 90 / 0.32); background: rgb(5 24 13 / 0.45) }
.ip-mods__col--ok > p:first-child b { color: var(--green-hi) }
.ip-mods__col--no > p:first-child b { color: #f39a9a }

/* the website's own parts on this page */
.ipage .qa { margin: 0 }
.ipage .qa__item summary { padding-inline: 22px 16px }
.ipage .qa__a { padding: 0 22px 18px }
.ipage .qa__item:last-child { border-bottom: 0 }
.ipage .isrv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0 }
.ipage .isrvbox .isrv { border: 0 }   /* the card is the frame (two frames showed as a step at the top edge) */
@media (min-width: 761px) { .ipage .isrv .hsrv__row + .hsrv__row { border-top: 0; border-left: 1px solid var(--line) } }
.ipage .itesters { margin-top: 0 }
.ipage .itiers__sub { display: inline-block; padding: 4px 3px }
.ipage .itiers thead th { padding: 13px 22px; background: rgb(0 0 0 / 0.18); color: var(--muted); font: 600 13.5px / 1.3 var(--font-ui) }
.ipage .itiers tbody th, .ipage .itiers td { padding: 12px 22px }
.ipage .itesters { overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel) }
/* the high test notes in two balanced columns */
.ip-list--cols { display: block; columns: 2; column-gap: 36px }
.ip-list--cols li { margin-bottom: 8px; break-inside: avoid }
.ip-who { max-width: 820px; margin: 0 0 18px; color: var(--muted); font: 400 15px / 1.6 var(--font-ui) }
.ip-card .ip-card__end { margin-top: 10px; color: var(--muted); font-size: 14.5px }

@media (min-width: 1001px) { .ip-can { position: sticky; top: 84px } }
@media (max-width: 1000px) {
  .ip-get__grid { grid-template-columns: minmax(0, 1fr); gap: 28px }
  .ip-cards--3, .ip-good { grid-template-columns: minmax(0, 1fr) }
  .ip-kit { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ip-kit li { border-bottom: 1px solid var(--line) !important }
  .ip-kit li:nth-last-child(-n + 2):nth-child(2n + 1), .ip-kit li:last-child { border-bottom: 0 !important }
}
@media (max-width: 760px) {
  .ipage { padding-top: 16px }
  .ip-top__t { font-size: 30px }
  .ip-top__p { margin-top: 6px; font-size: 15px }
  .ip-facts { gap: 6px; margin-top: 14px }
  .ip-facts li { gap: 1px; padding: 8px 10px; border-radius: 12px }
  .ip-facts b { font-size: 14.5px }
  .ip-facts span { font-size: 11.5px; line-height: 1.3 }
  .ip-nav { top: 8px; margin-inline: -4px; padding: 5px; -webkit-mask-image: none }
  .ip-nav__a { padding: 8px 12px; font-size: 13.5px }
  .ip-sec { margin-top: 44px; padding-top: 32px; scroll-margin-top: 72px }
  .ip-h { margin-bottom: 16px }
  .ip-h__t { gap: 10px; font-size: 23px }
  .ip-h__t svg { width: 21px; height: 21px }
  .ip-list--cols { columns: 1 }
  .ip-more__in { margin-left: -52px }
  .ip-h__lead { font-size: 15px }
  .ip-get { margin-top: 18px; padding: 22px 18px 20px; border-radius: 18px }
  .ip-get__t { font-size: 27px }
  .ip-get__grid { margin-top: 22px }
  .ip-step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 20px }
  .ip-step:not(:last-child)::before { left: 18px; top: 44px }
  .ip-step__n { width: 38px; height: 38px; font-size: 18px }
  .ip-step__t { font-size: 17px }
  .ip-can { padding: 20px 18px 18px }
  .ip-cards--2, .ip-cards--rec { grid-template-columns: minmax(0, 1fr) }
  .ip-card { padding: 18px 18px }
  .ip-list li, .ip-card p { font-size: 15px }
  .ip-kit { gap: 0 14px; padding: 4px 14px }
  .ip-fold--kit .ip-kit { margin: 0 16px 14px; padding: 0 }
  .ipage .itiers thead th { padding: 11px 14px }
  .ipage .itiers tbody th, .ipage .itiers td { padding: 9px 14px }
  .ip-kit li { padding: 9px 0; font-size: 13.5px }
  .ip-fold__s { padding: 16px 16px }
  .ip-fold__in { padding: 0 16px 16px }
  .ip-mods, .ipage .isrv, .ip-card--wide .ip-list { grid-template-columns: minmax(0, 1fr) }
  .ip-sev .ip-inline { font-size: 14px }
  /* the tables become one block per row */
  .ip-ladder thead, .ip-sev thead, .ip-kinds thead { display: none }
  .ip-kinds tr { display: grid; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--line) }
  .ip-kinds tbody tr:first-child { border-top: 0 }
  .ip-kinds tbody th, .ip-kinds td { width: auto !important; padding: 0; border: 0; font-size: 15px }
  .ip-kinds tbody th { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px }
  .ip-kinds tbody th small { margin: 0 }
  .ip-kinds td::before { content: attr(data-label) " "; color: var(--muted); font: 600 14px / 1.3 var(--font-ui) }
  .ip-ladder tr, .ip-sev tr { display: grid; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--line) }
  .ip-ladder tbody tr:first-child, .ip-sev tbody tr:first-child { border-top: 0 }
  .ip-ladder tbody th, .ip-ladder td, .ip-sev tbody th, .ip-sev td, .ip-kinds tbody th, .ip-kinds td { width: auto; padding: 0; border: 0; font-size: 15px }
  .ip-ladder td::before { content: attr(data-label) " "; color: var(--muted); font: 600 14px / 1.3 var(--font-ui) }
  .ip-ladder tbody th { margin-bottom: 2px }
  .ip-good { gap: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(8 30 17 / 0.55) }
  .ip-good li { border: 0; border-radius: 0; background: none; padding: 12px 14px }
  .ip-good li + li { border-top: 1px solid var(--line) }
  .ip-step__b .ip-step__line { padding-top: 6px; font-size: 16px }
  .ip-sev tr { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px }
  .ip-sev td:last-child { grid-column: 1 / -1 }
  .ip-sev__len { width: auto; text-align: right !important }
}
@media (prefers-reduced-motion: reduce) { .ip-nav__a, .ip-more > summary svg, .ip-fold__x svg { transition: none } }

/* ================================================================ 12 final round: the design check's fixes */
/* the profile name never breaks inside the word (it read "vincentplusnow / a"): long names a little smaller instead */
.pf__name { overflow-wrap: normal; word-break: normal }
@media (max-width: 760px) {
  .pf__name.nl-12, .pf__name.nl-13 { font-size: 23px }
  .pf__name.nl-14, .pf__name.nl-15, .pf__name.nl-16 { font-size: 20px; letter-spacing: -0.025em }
}
/* rankings on phones: the search gets its own full row (it was 68 px wide), the tools under it */
@media (max-width: 640px) {
  .rk-tools { display: flex; flex-wrap: wrap }
  .rk-q { flex: 1 0 100% }
}
/* strips that scroll sideways show that there is more: a soft fade at the edges */
@media (max-width: 640px) {
  .ktabs { mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%) }
}
/* Tier tests: below 900 px the row in two lines like on phones would need the template; the columns get room instead */
@media (min-width: 721px) and (max-width: 999px) {
  .ttrow, .tcols { column-gap: 16px }
  /* "Tier set by staff" needs more than the 96 px result column it had (it ran into "New") */
  .ttrow:not(.ttrow--notester):not(.ttrow--nowhen):not(.ttrow--noplayer), .tcols:not(.tcols--notester) { grid-template-columns: 76px minmax(0, 1.4fr) minmax(0, 1fr) 128px 130px }
}
/* the QA check's fixes: the tester name and its state wrap on very small phones instead of running out (320 px) */
.tsh__line { flex-wrap: wrap; min-width: 0 }
.tsh__name { min-width: 0 }
@media (max-width: 400px) { .tsh__name { font-size: min(28px, 7.2vw) } }
/* very small phones (320 px): the results strip's nine fixed 22 px slots shrink instead of running 2 px out */
@media (max-width: 360px) { .wl { max-width: 100% } .wl__track { grid-template-columns: repeat(var(--per, 9), minmax(0, 22px)); gap: 4px } }
/* round 2 of the checks: the priority server's place may wrap on phones (it was cut to "Priority, Fr…"); the longest
   names fit at 320 px; the rankings popover is still with reduced motion */
@media (max-width: 600px) { .hsrv__ip:has(.hsrv__prio) { white-space: normal } }
@media (max-width: 360px) {
  .pod__name.nl-14, .pod__name.nl-15, .pod__name.nl-16 { font-size: 10.5px }
  .pf__name.nl-14, .pf__name.nl-15, .pf__name.nl-16 { font-size: 18px }
}
@media (prefers-reduced-motion: reduce) { .rk-info__panel { animation: none !important } }

/* ================================================================ 13 night round: the design check's fixes (checks/design-r1) */
/* lists that sat straight on the near-black page get the card surface on the lighter green (their borders vanished) */
.tlist { border-color: var(--line-2); background: var(--panel) }
.pf { border-color: var(--line-2); background: rgb(8 30 17 / 0.45) }
/* the priority server's place in beige again (lost with the old Info styles) */
.hsrv__prio { color: var(--beige) }
/* tablets: the side stars sit inside the panel (the podium fills it) */
@media (min-width: 761px) and (max-width: 1000px) {
  .tw--2, .tw--4, .tw--5, .tw--7, .tw--9, .tw--10 { display: none }
  .tw--1 { left: -2%; top: 4% } .tw--3 { left: 1%; top: 46% } .tw--6 { right: -2%; top: 6% } .tw--8 { right: 1%; top: 52% }
}
/* small phones (320 to 384 px, the iPhone SE and mini at 375): a little less side padding round the podium and #1's
   card a little wider, so the longest names fit on #1 at a readable 11 px (they were cut to "vincentplusn…") */
@media (max-width: 384px) {
  .tops__panel { padding-inline: 12px }
  .podium { gap: 6px }
  .pod { --w: calc((100% - 12px) * 0.32) }
  .pod--1 { --w: calc((100% - 12px) * 0.36) }
  .pod--1 .pod__name.nl-14, .pod--1 .pod__name.nl-15, .pod--1 .pod__name.nl-16 { font-size: 12px; letter-spacing: -0.035em }
}
/* QA round 1: the podium plates as wide as the rankings plates on tablets (54 px there, from its 64 px column); the
   focus ring of a jump link inside the row (the row's sideways scroll cut its top and bottom); deep links to a fold
   or a table row land below the sticky jump row */
@media (min-width: 761px) and (max-width: 1100px) { .pod__plate .rkr__rank, .slim__n .rkr__rank { width: 54px } .slim__row { grid-template-columns: 54px 40px minmax(0, 1fr) auto } }
.ip-nav__a:focus-visible { outline-offset: -2px }
.ipage [id^="d-"] { scroll-margin-top: 84px }
@media (max-width: 760px) { .ipage [id^="d-"] { scroll-margin-top: 72px } }

/* ================================================================ 14 the live look, made better (owner, 30 Oct 2026, prompts 10 and 11)
   The site stays what it was; only data, infos, phones and motion got better. */
/* rankings: nothing that says the same on every row (no region, no country) */
.rk-head, .rkr { grid-template-columns: 72px minmax(0, 1fr) 120px }
@media (max-width: 1100px) { .rk-head, .rkr { grid-template-columns: 64px minmax(0, 1fr) 100px; gap: 12px } }
/* Overall: the title each player earned, in the colour of the tier, so the row is not empty in the middle (phones have no room) */
.rk-head--title, .orow { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) 120px }
.rk-th--t { justify-content: flex-start }
.rkr__title { min-width: 0; overflow: hidden; color: var(--t-fg); font: 600 15px / 1.2 var(--font-ui); white-space: nowrap; text-overflow: ellipsis }
@media (max-width: 1100px) { .rk-head--title, .orow { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 100px } }
@media (max-width: 760px) {
  .rkr__title { display: none }
  .rkr { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "rank who tier"; align-items: center; min-height: 62px; padding: 8px 8px 8px 0 }
  .rkr__who { align-items: center }
  .rkr__ava { margin-top: 0 }
}
/* a placement is no loss; staff entries on a profile */
.tres--place, .resw--place { color: var(--text) }
.hrow--place { --res: var(--text) }
.wl__slot--p { background: var(--line-hi) }
.arow__m--p { color: var(--text) }
.bigscore--place { color: var(--beige); font-size: 0.6em }
.rone__note { margin: 0 0 12px; color: var(--soft); font-size: 15px }
/* tier signs: + and − as big as the letter, on its line, the same on every tier */
.tname { display: inline-flex; align-items: baseline; font-weight: 800; letter-spacing: 0 }
.tstep, .tt .tstep, .ti .tstep, .pill .tstep { margin-left: 0.03em; color: inherit; font-size: 1em; font-weight: 800; line-height: inherit; vertical-align: baseline }
.tt__l, .ti > span[aria-hidden], .pill > span[aria-hidden] { line-height: 1 }
/* how to get tested on Home */
.home-how { margin-top: 44px; scroll-margin-top: 16px }
.ip-can__q { display: flex; justify-content: center; margin: 12px 0 0; font-size: 13.5px }
.home-how__note { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); color: var(--soft); font-size: 14.5px }
.ip-facts .tname, .ip-can__also .tname, .ip-facts .tstep, .ip-can__also .tstep { color: inherit; font: inherit }
.pfg .jrny { min-height: 0 }
.rk-how { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px }
.rk-how th, .rk-how td { padding: 5px 0; border-top: 1px solid var(--line-2); font-weight: 500; text-align: left }
.rk-how thead th { border-top: 0; color: var(--muted); font-size: 13px }
.rk-how tbody th { width: 40px; color: var(--t-fg, inherit); font-weight: 800 }
.rk-how tbody th span { color: var(--t-fg) }
.rk-how td:last-child, .rk-how th:last-child { text-align: right }
/* phones: buttons a thumb can hit, nothing under 12 px */
@media (max-width: 760px) {
  .hero__btns .btn { min-height: 48px }
  .srv__copy, .hsrv__copy { width: 44px; height: 44px }
  .sh__more, .more-link { min-height: 44px; display: inline-flex; align-items: center }
  .home-how { margin-top: 32px }
  .nav__a, .nav__a span, .ip-facts span, .jstep__by, .jstep__held, .reg, .pf__sub .reg, .filt__f span { font-size: 12px }
  .hsrv__row { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; padding-inline: 14px 8px }
  .hsrv__ic { display: none }
  .vs, .bro .tstep, .bro__st, .bro__mk { font-size: 13px }
  .shit__testers b { font-size: 12px }
}
/* touch has no hover: a tap on the podium lights it */
/* ---------------- motion: the podium rises in place by place, the plate lands, the rest follows. Only transform: where
   animations do not run nothing stays hidden. */
@keyframes plus-rise { from { transform: translateY(26px) } }
@keyframes plus-fig { from { transform: translateY(26px) scale(0.94) } }
@keyframes plus-land { 0% { transform: translateY(-14px) scale(1.3) } 60% { transform: translateY(1px) scale(0.95) } }
@keyframes plus-pop { 0% { transform: scale(0.7) } 70% { transform: scale(1.08) } }
@keyframes plus-row { from { transform: translate3d(-10px, 0, 0) } }
@keyframes plus-hop { 40% { transform: translateY(-3px) } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
  /* the first frames of a page are the busiest: the rows wait 90 ms for them, then slide on a softer curve. Only the rows on the
     screen move, and the page around them stands still meanwhile */
  .rk-rows > .rkr, .tlist > li, .hsrv > li { animation: plus-row 420ms cubic-bezier(0.22, 0.61, 0.36, 1) calc(90ms + var(--i, 8) * 40ms) backwards }
  .rk-rows > .rkr:nth-child(n + 13), .tlist > li:nth-child(n + 13) { animation: none }
  main:has(.rk-rows, .tlist) > .wrap { animation: none }
  :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(1) { --i: 0 } :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(2) { --i: 1 } :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(3) { --i: 2 }
  :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(4) { --i: 3 } :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(5) { --i: 4 } :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(6) { --i: 5 }
  :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(7) { --i: 6 } :is(.slim, .rk-rows, .tlist, .hsrv) > :nth-child(8) { --i: 7 }
  .is-js [data-reveal]:not(.is-in) { transform: translateY(22px) }
  .is-js [data-reveal] { transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1) }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rkr:hover .tt__ic, .pod__card:hover .tt__ic { animation: plus-hop 420ms cubic-bezier(0.3, 1.4, 0.5, 1) }
  .btn:active, .cta:active { transform: translateY(1px) }
}
/* "reduce motion" means no motion at all: the older entrances of the pages stop too */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; transition: none !important }
}

/* ================================================================ 15 tidied up (the owner, 31 Oct 2026) */
/* the podium: no box round it, no tier, the stars stay, numbers are plain numbers */
/* the podium has the sizes of the live site (the owner, 31 Oct 2026). Without the tier under it the plate sits in the middle of
   its step; the glow under the pointer has the colour of the plate */
.pod { --glow: #c9d0dc } .pod--1 { --glow: #f2bd45 } .pod--3 { --glow: #f58f45 }
.pod .pod__base { justify-content: center; padding-top: 0 }
@media (hover: hover) and (pointer: fine) {
  .pod__card:hover { border-color: color-mix(in srgb, var(--glow) 55%, transparent);
    box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 26px -8px color-mix(in srgb, var(--glow) 50%, transparent) }
  .pod__card:hover .pod__base::before { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--glow) 85%, transparent) }
}
.pod__card.is-tap { border-color: color-mix(in srgb, var(--glow) 55%, transparent); box-shadow: 0 0 26px -6px color-mix(in srgb, var(--glow) 60%, transparent) }
.pod__card.is-tap .pod__base::before { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--glow) 85%, transparent) }
.rkr__n { color: var(--soft); font-family: var(--font-ui); font-size: 20px; font-weight: 800; font-style: normal; letter-spacing: 0; font-variant-numeric: lining-nums }
.rkr--1 .rkr__n { color: #3b2c08 } .rkr--2 .rkr__n { color: #232e2a } .rkr--3 .rkr__n { color: #36200f }
/* the coins: the whole tier is on them (app/emblems.py) */
.em .m { fill: var(--em-1) } .em .d { fill: var(--em-2) } .em .l { fill: var(--em-3); opacity: 0.7 } .em .ri { fill: none; stroke: var(--em-2); stroke-width: 0.8; opacity: 0.55 }
.em .ct { fill: var(--t-bg); font: 800 15px / 1 var(--font-ui) } .em .ct--2 { font-size: 13px; letter-spacing: -0.4px }
.tt { gap: 0 } .tt__ic { width: 38px; height: 38px } .tt--sm .tt__ic { width: 34px; height: 34px } .tt--lg .tt__ic { width: 46px; height: 46px }
.tt--md .tt__ic, .itiers .tt__ic { width: 38px; height: 38px } .ktab { height: 66px }
.pill { gap: 0 } .pill__disc { width: 34px; height: 34px; background: none; border: 0; box-shadow: none } .ti svg { width: 34px; height: 34px }
.ktab__ic--em { width: 34px; height: 34px } .bcol__em { width: 40px; height: 40px } .jstep__em { width: 38px; height: 38px }
.tt__ic .em, .pill__disc .em, .ktab__ic--em .em, .bcol__em .em, .jstep__em .em { display: block; width: 100%; height: 100% }
/* small things */
main { position: relative; z-index: 2 } .foot { position: relative; z-index: 1 }

/* 16. Small details on the live look (the owner, 31 Oct 2026) ------------------------------------------- */
/* the Board: the column says S or A, next to the player only the + or − (the owner, 31 Oct 2026) */
.bcol__list { grid-template-columns: minmax(0, 1fr) }
.bro__a { gap: 8px; padding-right: 8px }
.bro__st { position: static; flex: none; margin-left: -3px; color: var(--t-fg); font: 800 18px / 1 var(--font-ui) }
@media (min-width: 761px) {
  .ttrow__chg { justify-content: flex-end } .tcols > span:last-child { text-align: right }
  .rkr__tier { justify-content: flex-end } .rk-head > [role="columnheader"]:last-of-type { justify-self: end; text-align: right }
}
/* a second name next to the first is the tester, not an opponent; the Tier tests page has its column titles for that */
.ttrow__by { flex: none; color: var(--muted); font-size: 13px }
.res__list .ttrow__by, .tsp__latest .ttrow__by { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }

/* the letters on the purple medals, darker than the tier's own dark */
.tier--a-plus .em .ct, .tier--a .em .ct, .tier--a-minus .em .ct { fill: #0d0818 }

/* phones: one size for the three names on the podium */
@media (max-width: 640px) {
  .pod .pod__name { left: 3px; right: 3px; font-size: 12.5px; letter-spacing: -0.2px; white-space: nowrap; text-overflow: ellipsis }
  .tops__panel { padding-inline: 8px }
  .slim__name { display: block; min-width: 0; font-size: 15px }
}

/* six menu items on the smallest phones: two rows of three, every label whole */
@media (max-width: 340px) { .nav__a { flex: 1 1 30%; height: 44px } }

/* the search bar only on Rankings and the search page: the room under the header */
.top { padding-bottom: 8px }
main > .wrap:first-child, main > .home { margin-top: 14px }

/* Info: one short page in the sections of Home */
.inf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch }
.inf__s { display: flex; flex-direction: column; min-width: 0 }
.inf__s--wide { grid-column: 1 / -1 }
.inf__box { display: flex; flex: 1; padding: 18px 20px }
.inf__steps { display: grid; flex: 1; align-content: space-between; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; color: var(--soft); font-size: 15px; line-height: 1.5 }
.inf__steps li { position: relative; padding: 2px 0 2px 40px; counter-increment: step }
.inf__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--beige); color: #10261a; font: 800 14px / 1 var(--font-ui) }
.inf__list { display: grid; flex: 1; align-content: space-between; gap: 8px; margin: 0; padding: 0 0 0 18px; list-style: disc; color: var(--soft); font-size: 15px; line-height: 1.5 }
.inf__list li::marker { color: var(--muted) }
.inf__tests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 }
.inf__tests > div { min-width: 0; padding: 18px 20px }
.inf__tests > div + div { border-left: 1px solid var(--line) }
.inf__tests dt { margin-bottom: 6px; color: #fff; font: 700 15px / 1.3 var(--font-ui) }
.inf__tests dd { margin: 4px 0 0; color: var(--soft); font-size: 15px; line-height: 1.5 }
.inf__note { margin: 10px 2px 0; color: var(--muted); font-size: 14px }
.inf b, .inf strong { color: #fff; font-weight: 600 }
.inf .dch { padding: 0; background: none; color: var(--beige); font-weight: 600 }
.inf__tiers, .inf__cells { display: grid; margin: 0; padding: 0; list-style: none }
.inf__tiers { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.inf__cells { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.inf__tiers li, .inf__cells li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 16px 8px; color: var(--muted); font-size: 13px; line-height: 1.3; text-align: center }
.inf__tiers li + li, .inf__cells li + li { border-left: 1px solid var(--line) }
.inf__tiers b, .inf__cells b { font-size: 15px; font-weight: 700 }
.inf__box > p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.6 }
.inf__em { display: block; width: 46px; height: 46px; margin-bottom: 8px }
.inf__em .em { display: block; width: 100%; height: 100% }
.inf__sevs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.inf__sev { min-width: 0; padding: 18px 20px }
.inf__sev + .inf__sev { border-left: 1px solid var(--line) }
.inf__sev h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 10px; color: #fff; font: 700 15px / 1.3 var(--font-ui) }
.inf__sev h3 span { color: var(--beige); font-size: 14px; white-space: nowrap }
.inf__sev .inf__list { display: block; flex: none; align-content: start; font-size: 14.5px }
.inf__sev .inf__list li + li { margin-top: 6px }
.inf__sev { display: flex; flex-direction: column }
.inf__once { margin: auto 0 0; padding-top: 12px; color: var(--beige); font-size: 14px; font-weight: 600 }
.inf__end { margin: 24px 0 0; text-align: center }
.inf__end p { margin: 0 0 12px; color: var(--soft); font-size: 15px }
.inf__end--note { color: var(--muted); font-size: 13px }
/* the footer: only the legal line, no links, no logo, no icons */
.foot__in { display: block; min-height: 0; padding-top: 18px; padding-bottom: 18px }
.foot__legal { margin: 0; gap: 2px 8px }
@media (max-width: 900px) { .inf { grid-template-columns: minmax(0, 1fr); gap: 20px } }
@media (max-width: 1100px) {
  .inf__tests { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .inf__tests > div:nth-child(odd) { border-left: 0 } .inf__tests > div:nth-child(n + 3) { border-top: 1px solid var(--line) }
}
@media (max-width: 560px) {
  .inf__tests { grid-template-columns: minmax(0, 1fr) } .inf__tests > div + div { border-left: 0; border-top: 1px solid var(--line) }
}
@media (max-width: 1100px) {
  .inf__sevs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .inf__sev:nth-child(odd) { border-left: 0 } .inf__sev:nth-child(n + 3) { border-top: 1px solid var(--line) }
}
@media (max-width: 560px) {
  .inf__sevs { grid-template-columns: minmax(0, 1fr) }
  .inf__sev, .inf__sev:nth-child(odd) { border-left: 0 } .inf__sev + .inf__sev { border-top: 1px solid var(--line) }
}
@media (max-width: 640px) {
  .inf__box { padding: 14px } .inf__tiers { grid-template-columns: repeat(3, minmax(0, 1fr)) } .inf__cells { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .inf__tiers li:nth-child(3n + 1), .inf__cells li:nth-child(2n + 1) { border-left: 0 }
  .inf__tiers li:nth-child(n + 4), .inf__cells li:nth-child(n + 3) { border-top: 1px solid var(--line) }
  .inf__end .btn { display: flex; justify-content: center }
  .inf__sev, .inf__tests > div { padding: 14px }
}

/* places 4 and 5: still while the page loads; under the pointer the content rises softly by a little (the owner, 31 Oct 2026). The
   li and the row stay put, so the pointer stays on the row and it cannot flicker */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .slim > li > .slim__row > * { transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1) }
  .slim > li:hover > .slim__row > * { transform: translateY(-3px) }
}

/* Tier tests: the state of the live list while nothing runs */
.res__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px }
.res__idle { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; color: var(--muted); font-size: 14px }
.res:has(.feed--live:not([hidden])) .res__idle { display: none }
.res__idot { width: 8px; height: 8px; border-radius: 50%; background: var(--off) }
/* the tier journey: the medal is the step */
.pfg .jrny .jstep { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "dot what date" "dot tier held"; column-gap: 12px; row-gap: 2px; justify-items: start; text-align: left }
.jstep > .jstep__em { grid-area: dot; width: 40px; height: 40px }
.jstep .jstep__date, .jstep .jstep__held { justify-self: end }
.afacts__go { color: inherit; text-decoration: underline; text-decoration-color: var(--line-hi); text-underline-offset: 3px }
.afacts:last-child { padding-bottom: 0; border-bottom: 0 }

/* 18. The profile: what counts most in one row, big numbers on Stats (the idea of mcpvp, in our look) */
.pfk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--g); border: 1px solid var(--line); border-radius: 12px; background: var(--row) }
.pfk > div { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 84px; padding: 12px 18px }
.pfk > div + div { border-left: 1px solid var(--line) }
.pfk dt { color: var(--muted); font-size: 13px }
.pfk dd { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font: 700 19px / 1.2 var(--font-ui) }
.pfk .pf__rank--1 { color: var(--gold-2) } .pfk .pf__rank--2 { color: var(--silver-2) } .pfk .pf__rank--3 { color: var(--bronze-2) }
.pfk > .pfk__tier dd { color: var(--t-fg) }
.sbig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 }
.sbig dt, .sduo dt { color: var(--muted); font-size: 13px }
.sbig dd { margin: 4px 0 0; color: #fff; font: 800 40px / 1.1 var(--font-ui); font-variant-numeric: tabular-nums }
.sbig .srow__sub { margin-left: 8px; font-size: 14px; font-weight: 600 }
.pfs__more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g) }
.sduo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 16px 20px }
.sduo dd { margin: 4px 0 0; color: #fff; font: 800 28px / 1.1 var(--font-ui); font-variant-numeric: tabular-nums }
@media (max-width: 900px) { .pfk { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pfk > div:nth-child(3) { border-left: 0 } .pfk > div:nth-child(n + 3) { border-top: 1px solid var(--line) } }
@media (max-width: 640px) {
  .pfk > div { min-height: 72px; padding: 10px 14px } .pfk dd { font-size: 16px }
  .sbig dd { font-size: 30px } .pfs__more { grid-template-columns: minmax(0, 1fr) }
}

/* the header: only the name, in the normal font (the owner, 31 Oct 2026) */

/* the hero: the gradient runs under the border too, otherwise its light start shows again in the right border */
.hero { background-origin: border-box }
/* the tier tabs: the coin says the tier, a larger coin and no letter under it */
.ktab__ic--em { width: 42px; height: 42px }

/* a player without a tier in a test or waiting */
.pwait { display: grid; gap: 10px; padding: 20px }
.pwait__vs, .pwait__t { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5 }
.pwait__vs b { color: #fff }
/* the rank chart with little data: the area under the line gives the plot its weight */
.rl__area { fill: #f7d046; opacity: 0.07; stroke: none }
/* the tier test: the result is the big thing */
.rone__one .rone__vc { align-items: center; padding: 26px 0 }
.rone__mid { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center }
.rone__coin { display: block; width: 92px; height: 92px; margin-bottom: 6px }
.rone__coin .em { display: block; width: 100%; height: 100% }
.rone__res { margin: 0; color: #fff; font: 800 30px / 1.15 var(--font-ui); letter-spacing: -0.01em }
.rone__res b { color: var(--t-fg); font-weight: 800 }
.rone__played { margin: 0; color: var(--soft); font-size: 17px; font-weight: 600 }
/* short pages: the footer comes right after the content, the page ends dark below it */
main:has(.rone__one), main:has(.prof) { padding-bottom: 32px }
@media (max-width: 640px) {
  .rone__one .rone__vc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px }
  .rone__mid { grid-column: 1 / -1; grid-row: 1 }
  .rone__coin { width: 76px; height: 76px } .rone__res { font-size: 24px } .rone__played { font-size: 16px }
}

/* 19. General on a PC: no hole under the skin and no half empty box, however much a player has. The rail and the top (tier row,
   chart) end on one line, under them Activity, the journey and Punishments run across the whole panel, one row each. A journey
   of any length shares its row: one step fills it, five sit side by side, more wrap. Phones stack as before. */
@media (min-width: 901px) {
  .pf__body--lined { --rail: 3; grid-template-rows: auto 1fr }
  .pf__body--lined .pf__main, .pf__body--lined .pfg, .pf__body--lined .pfg__mid, .pf__body--lined .pfg__right { display: contents }
  .pf__body--lined .pf__side { grid-column: 1 / var(--rail); grid-row: 1 / span 2 }
  .pf__body--lined .pfk { grid-column: var(--rail) / -1; grid-row: 1; margin: 0 }
  .pf__body--lined .tpanel { grid-column: var(--rail) / -1; grid-row: 2 }
  .pf__body--lined .pfg__chart { display: flex; flex-direction: column; grid-column: var(--rail) / -1; grid-row: 2; min-width: 0; align-self: stretch }
  .pf__body--lined .pfg__chart .cbox { flex: 1; grid-template-rows: auto minmax(0, 1fr) }
  .pf__body--lined .pfg__act, .pf__body--lined .pfg__journey, .pf__body--lined .pfg__pun { grid-column: 1 / -1; min-width: 0 }
  .pf__body--lined .pfg__act { order: 3 } .pf__body--lined .pfg__journey { order: 4 } .pf__body--lined .pfg__pun { order: 5 }
  /* the skin's card takes what the chart leaves, the figure keeps its size and stands on the floor */
  .pf__body--lined:has(#panel-general:not([hidden])) .pf__side { position: static; align-self: stretch; grid-template-rows: 1fr auto }
  .pf__body--lined:has(#panel-general:not([hidden])) .pf__card { width: 100%; align-self: stretch }
  .pf__body--lined .pf__img { width: 125%; height: 97%; object-fit: contain; object-position: 50% 100% }
  /* Activity: the state and the two numbers like the tier row, the recent tests in two columns under them */
  .pf__body--lined .abox { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--g); align-items: center; align-content: start }
  .pf__body--lined .afacts { display: contents }
  .pf__body--lined .apill { align-self: start; gap: 8px }
  .pf__body--lined .apill__txt { justify-items: start; gap: 4px; text-align: left }
  .pf__body--lined .apill__txt small { font: 400 12.5px / 1.2 var(--font-ui) }
  .pf__body--lined .apill__txt b { font: 700 18px / 1.1 var(--font-ui) }
  .pf__body--lined .afacts > div { padding-left: var(--g); border-left: 1px solid var(--line) }
  .pf__body--lined .alabel, .pf__body--lined .alist, .pf__body--lined .abox__more { grid-column: 1 / -1 }
  .pf__body--lined .alabel { margin: 14px 0 8px }
  .pf__body--lined .alist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g) }
  .pf__body--lined .abox__more { margin-top: 10px }
  .pf__body--lined .jrny { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px var(--g); padding: 8px 0 }
  .pf__body--lined .jrny .jstep:not(:last-child)::after { display: none }
  .pf__body--lined .jrny:has(> :nth-child(3)) .jstep { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "dot what" "dot tier" "dot date" "dot held" }
  .pf__body--lined .jrny:has(> :nth-child(3)) .jstep__date, .pf__body--lined .jrny:has(> :nth-child(3)) .jstep__held { justify-self: start }
}
@media (min-width: 901px) and (max-width: 1100px) { .pf__body--lined { --rail: 4 } }

/* 20. Touch screens: everything you tap is at least 40 px tall, the popups of Rankings stay on the screen */
@media (pointer: coarse) {
  .btn, .btn--sm, .pf__btn, .cta, .res__clear, .seg > a, .seg > button { min-height: 40px }
  .btn--sm, .pf__btn, .res__clear { height: 40px }
  .cta { height: 40px }
  .ibtn, .stand__go { width: 40px; height: 40px }
  .rk-q__x { right: 4px; width: 40px; height: 40px }
  .select, .field, .srch__selw select { height: 44px }
  input, select { font-size: 16px }       /* below that an iPhone zooms into the page on every tap */
  .res__seg { height: 46px }
  .stand__x { right: 2px; width: 36px; height: 36px; opacity: 1 }
  .pf .ranges button { min-height: 40px; padding: 6px 12px }
  .rk-showing__all, .rk-filt__clear, .back, .sh__more, .more-link { display: inline-flex; align-items: center; min-height: 40px }
  .loadmore { min-height: 44px }
  .srv__copy, .hsrv__copy { width: 44px; height: 44px }
  .stand__form input { min-height: 40px }
}
.ibtn__n { font-size: 12px }
.rl--narrow .rl__axis, .rl--narrow .rl__date { font-size: 13px }
@media (max-width: 640px) {
  .rk-tools { position: relative }
  .rk-tools__btns, .rk-tools .rk-pop { position: static }
  .rk-tools .pop__panel { left: 0; right: 0; width: auto; min-width: 0 }
}
.livechip--paused { color: var(--muted) }
.rk-info__rule { margin-top: 0; padding-top: 0; border-top: 0 }
.stand__me .stand__k { line-height: 1.3 }
.lost p, .lost h1 { overflow-wrap: anywhere }
.pf .jbox--compact .jrny { padding-inline: 0 }
/* Rankings on phones: all eight tabs in one row, nothing to scroll sideways to */
@media (max-width: 640px) {
  .ktabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; overflow: visible; mask-image: none }
  .ktab { height: 52px; min-width: 0; padding: 0 }
  .ktab__ic--em { width: 30px; height: 30px }
  .ktab__l { display: none }
}
/* tablets: the buttons under the name fill the height of the skin without stretching across the page, the tabs share the row */
@media (min-width: 601px) and (max-width: 900px) {
  .pf__btns { grid-template-columns: minmax(0, 340px); align-self: end }
  .pf__tabs { display: flex }
  .pf__tabs .ptab { flex: 1 1 0; justify-content: center }
}
/* Tier tests on phones have no Tester column, so the row says who the tester is */
@media (max-width: 720px) { .res__list .ttrow__by, .tsp__latest .ttrow__by { position: static; width: auto; height: auto; overflow: visible; clip-path: none } }
/* how many players are ranked, above the list of Overall */
.rk-total { display: flex; align-items: baseline; gap: 7px; margin: 12px 2px 4px; color: var(--muted); font-size: 14px }
.rk-total b { color: #fff; font: 700 22px / 1 var(--font-ui) }
.srch { margin-top: 0 }
@media (pointer: coarse) { .hsrv__row { grid-template-columns: 36px minmax(0, 1fr) auto 44px } }
@media (max-width: 760px) and (pointer: coarse) { .hsrv__row { grid-template-columns: minmax(0, 1fr) auto 44px } }
/* the narrowest phones: long names and the six links keep every letter */
@media (max-width: 380px) {
  .rkr { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 8px }
  .nav__a { flex: 1 1 auto; padding-inline: 1px }
}
/* the distribution says the number itself; the icons stay under the thumb while the name field is open */
.rk-body:has(#rk-dist:not([hidden])) .rk-total { display: none }
@media (max-width: 640px) { .rk-tools .stand.is-open ~ .rk-tools__btns { margin-left: 48px } }
@media (pointer: coarse) { .select, .sbar input, .srch__selw select, .filt__f select { font-size: 16px } }
/* the last details of the second round */
body { min-height: 100svh }
.sbar { padding-top: 16px; padding-bottom: 0 }
.srch__status--none { margin-bottom: 0 }
.stand__k { font-size: 12px; letter-spacing: 0 }
.rk-total { margin-inline: 0 }
.rk-th--n { padding-left: 10px }
.rk-th--p { padding-left: 56px }
.pf .hrow__srv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (min-width: 1101px) and (max-width: 1320px) { .bro__name { font-size: 14px; letter-spacing: -0.01em } }

/* a long e-mail in a cell of the legal notice breaks instead of touching the edge */
.inf__cells a { overflow-wrap: anywhere }