/* WA Play ranked league: the true-black-flat app style (taste-skill, seed 161256679) with its face
   taken from Worms Armageddon's title screen: a warm near-black ground from the screen's burnt edges
   and the mushroom cloud's orange as the one data hue. Elevation by lightness alone (ground, surface,
   raised), no borders or shadows on cards, the active nav item by brightness, the primary control by
   inversion (a white pill). The orange touches data only: the ladder's current rung, the rating line,
   the player's own row mark. WORMS red is the loss colour.

   Grid (1440 wide): sidebar 224 + 1px rule; canvas padding 29 on both sides;
   content 1440 - 225 - 58 = 1157 = main 749 + gap 24 + rail 384. */
:root[data-theme="dark"] {
  --ground: #0d0806; --surface: #181110; --raised: #271c19; --active: #271c19;
  --border: #241a17; --rule: #241a17; --control: #4d3b36;
  --text: #ffffff; --muted: #bdb3af; --faint: #9c918d;
  --accent: #ff7a1f;
  /* levels and unlocks: their titles and figures only */
  --gold: #f2c14e;
  --primary: #ffffff; --primary-ink: #0d0806;
  --positive: #3fc07a; --negative: #f2584a; --warning: #e5a93b;
  --pill-positive-bg: #15281b; --pill-positive-ink: #3fc07a;
  --pill-negative-bg: #2e1512; --pill-negative-ink: #f2584a;
  --pill-neutral-bg: #271c19; --pill-neutral-ink: #ffffff;
  --chart-1: var(--accent); --chart-muted: #4d3b36; --grid: #2a1f1c; --axis-ink: var(--faint);
  --chart-span: 0.12;

  --sidebar-width: 224px;
  --pad: 29px;
  --gap: 16px;
  --card-pad: 20px;
  --radius-card: 8px;
  --radius-control: 6px;
  --control-height: 36px;
  --nav-row: 32px;
  --fs-title: 20px; --fs-section: 16px; --fs-kpi: 24px; --fs-body: 14px; --fs-small: 12px;
}

/* one ground, cards a lightness step above it: no edges */
.panel, .kpis { border: 0; }
.kpi + .kpi { border-left: 1px solid var(--ground); }

/* ---------- shell: ruled T-frame ---------- */
.sidebar { border-right: 1px solid var(--rule); padding: 16px 12px; }
.brand { display: block; padding: 0 8px; margin-bottom: 12px; }
.brand img { width: 196px; height: auto; image-rendering: pixelated; }
/* the one action: Play ranked, in the middle of the League's header, a button with depth (the
   user's call: gradient and shadow) */
.lg-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.play-side { position: relative; display: grid; justify-items: center; gap: 10px; }
.play-side .ai-btn { min-width: 160px; }
.play-btn { height: 60px; padding: 0 56px; border: 0; border-radius: 10px; color: #1a1205; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; cursor: pointer;
  background: linear-gradient(#ffe08a, #f2c14e 55%, #d9a032); /* taste-skill-ignore: the user asked for a button with depth */
  box-shadow: inset 0 -4px 0 #a8731c, inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 8px 18px rgba(0, 0, 0, 0.45); /* taste-skill-ignore: the user asked for a button with depth */
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) ease, filter var(--t-hover) ease; }
.play-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.play-btn:active:not(:disabled) { transform: translateY(3px);
  box-shadow: inset 0 -1px 0 #a8731c, inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore: the pressed state of the same button */
.play-btn:disabled { filter: saturate(0.6) brightness(0.85); cursor: default; }
.play-side #note { position: absolute; top: calc(100% + 8px); white-space: nowrap; font-size: 13px; }
.play-side #note:empty { display: none; }
.nav-item { color: #bbbbbb; }
.nav-item:hover { background: none; color: var(--text); }
.nav-item[aria-current="page"] { background: none; color: var(--text); }
.sidebar .bottom { display: grid; gap: 2px; }
/* the menu's icons (league/icons: the user's, their black made clear): one box, never stretched */
.nav-icon { width: 24px; height: 24px; flex: none; object-fit: contain; }
.nav-item .nav-icon[src^="avatars/"] { border-radius: 6px; }
/* Play vs Blas and the gacha: a group of their own under the league's two */
.nav-group { display: grid; gap: 2px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
/* the Find opponent button's icon */
.play-btn { display: inline-flex; align-items: center; gap: 12px; }
.play-btn img { height: 30px; width: auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 0 0 var(--pad); border-bottom: 1px solid var(--rule); }
.search { position: relative; width: 316px; }
.search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--ground); color: var(--text); }
.search input::placeholder { color: var(--faint); }
.search svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; stroke: var(--faint); }
.season { margin-left: auto; height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 var(--pad); border-left: 1px solid var(--rule); }
.season b { font-weight: 500; }
.season span { color: var(--faint); font-size: var(--fs-small); }
.canvas { padding: 24px var(--pad) 48px; }
[hidden] { display: none !important; }

/* ---------- league: main column and rail ---------- */
.league { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 24px; align-items: start; }
.col { display: grid; gap: var(--gap); min-width: 0; }
.rail { display: grid; gap: 0; }
.rail h2 { font-size: var(--fs-section); font-weight: 600; margin: 0 0 8px; }
.rail .panel + h2 { margin-top: 16px; }
.kpi-value img { display: inline-block; width: 48px; height: 17px; vertical-align: -2px; margin-right: 8px; }
.kpi-value .rank-name { font-size: 16px; }

/* the rank ladder: twelve rungs, the league's players per rank, you on your rung */
.ladder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; }
.rung { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.rung .count { font-size: var(--fs-small); color: var(--faint); font-variant-numeric: tabular-nums; }
.rung .bar { width: 100%; max-width: 36px; background: var(--chart-muted); border-radius: 2px 2px 0 0; min-height: 0; }
.rung.here .bar { background: var(--accent); }
.rung.here .count { color: var(--text); }
.rung img { width: 48px; height: 17px; max-width: 100%; }
.rung .name { font-size: var(--fs-small); line-height: 14px; color: var(--muted); text-align: center; height: 28px; overflow: hidden; }
.rung.here .name { color: var(--text); }
.rung .from { font-size: var(--fs-small); color: var(--faint); font-variant-numeric: tabular-nums; }
.ladder-base { height: 1px; background: var(--control); grid-column: 1 / -1; margin-top: -6px; }
.progress { margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.progress .end { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.progress .end img { width: 48px; height: 17px; }
.track { position: relative; height: 8px; border-radius: 999px; background: var(--raised); }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.progress-note { margin-top: 10px; color: var(--muted); }
.progress-note b { color: var(--text); font-weight: 500; }

/* tables and rows */
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; color: #fff; }
td .rank-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--muted); }
td .rank-cell img { width: 48px; height: 17px; flex: none; }
tr.me td:first-child { box-shadow: inset 2px 0 0 var(--accent); } /* taste-skill-ignore: a 2px row mark, not elevation */
tr.me td { background: var(--raised); }
.form { display: inline-flex; gap: 3px; }
.form i { width: 14px; height: 14px; border-radius: 3px; font-style: normal; font-size: 10px; line-height: 14px; text-align: center; font-weight: 600; }
.form i.w { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.form i.l { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.up { color: var(--positive); } .down { color: var(--negative); } .zero { color: var(--faint); }
.dash { color: var(--faint); }
td.pos { width: 40px; color: var(--muted); }
th.n, td.n { white-space: nowrap; }
/* the rank insignia are WA-sized pixel art: keep their pixels square */
img[src^="ranks/"] { image-rendering: pixelated; }
.compact .wide { display: none; }

/* recent matches in the rail */
.match { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; }
.match + .match { border-top: 1px solid var(--rule); }
.match .opp { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .meta { grid-column: 1; color: var(--faint); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .res { text-align: right; font-variant-numeric: tabular-nums; }
.match .res .sub { color: var(--faint); font-size: var(--fs-small); text-align: right; }
.rail .card-link { margin-top: 8px; }

/* the last result */
.result header { margin-bottom: 8px; }
.result-line { display: flex; align-items: baseline; gap: 10px; }
.result-line .kpi-value { margin: 0; }
.result-rank { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.result-rank img { width: 48px; height: 17px; }
.result .meta { margin-top: 10px; }
.rail .result + h2 { margin-top: 16px; }
.form i.d { background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }

/* games */
#gm-table .who img { width: 48px; height: 17px; flex: none; }
#gm-table a { color: var(--text); }
#gm-table a:hover { text-decoration: underline; }
#gm-more { margin-top: 12px; }

/* profile pictures */
img.avatar { object-fit: cover; background: var(--raised); }
.avatar.big { width: 64px; height: 64px; border-radius: 12px; }
/* the profile's header: who, their team, their rank (three times the insignia), the one action */
.pf-head { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--surface); border-radius: var(--radius-card); }
.pf-pic { position: relative; flex: none; }
.pf-pic .avatar.big { width: 96px; height: 96px; border-radius: 16px; font-size: 32px; }
/* your own picture: an edit button on hover (or keyboard focus) */
.pf-pic-edit { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink); cursor: pointer; opacity: 0; transition: opacity var(--t-hover) ease; }
.pf-pic-edit svg { width: 14px; height: 14px; }
.pf-pic:hover .pf-pic-edit, .pf-pic-edit:focus-visible { opacity: 1; }
@media (hover: none) { .pf-pic-edit { opacity: 1; } }
.pf-who { display: grid; gap: 6px; min-width: 0; }
.pf-name { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* someone else's profile: Add friend (friends.js), quiet on the right */
.pf-friend { margin-left: auto; flex: none; }
.pf-friend .btn svg { width: 16px; height: 16px; }
.pf-who h1 { font-size: var(--fs-title); font-weight: 600; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-name img { width: 144px; height: 51px; flex: none; }
.pf-who .meta { color: var(--faint); font-size: var(--fs-small); }
.pf-play { margin-left: auto; }
.pf-tabs { margin-top: 20px; }
.lg-tabs { margin-bottom: 20px; }
.pf-look { margin-bottom: var(--gap); }
#pf-overview .six, #pf-team { margin-top: var(--gap); }
#gm-table .who .avatar { width: 24px; height: 24px; }
.dialog { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.dialog-panel { width: min(640px, 100%); max-height: min(80vh, 640px); overflow: auto; background: var(--surface); }
.dialog-panel > header { margin-bottom: 16px; }
.dialog-close { color: var(--muted); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pick { position: relative; aspect-ratio: 1; padding: 4px; border: 1px solid transparent; border-radius: 10px; background: var(--ground); cursor: pointer; }
.pick img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.pick:hover { border-color: var(--control); }
.pick[aria-pressed="true"] { border-color: var(--text); }
.pick.locked { cursor: default; }
.pick.locked img { filter: grayscale(1); opacity: 0.35; }
.pick.locked:hover { border-color: transparent; }
.pick .lock { position: absolute; right: 6px; bottom: 6px; width: 14px; height: 14px; color: var(--muted); }

/* before a match: the two sides and VS, over everything while the game loads */
#splash { position: fixed; inset: 0; z-index: 20; background: var(--ground); display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: center; gap: 24px; padding: 32px; }
#splash.solo { grid-template-columns: minmax(0, 1fr); }
/* a game's lost connection: over everything (the game paused on the server) */
#rejoin { position: fixed; inset: 0; z-index: 30; background: var(--ground); display: grid; place-items: center; padding: 16px; }
#rejoin[hidden] { display: none; }
.rj-box { display: grid; justify-items: center; gap: 12px; max-width: 440px; text-align: center; }
#rj-title { font-size: 28px; line-height: 34px; font-weight: 600; }
#rj-text { color: var(--muted); font-variant-numeric: tabular-nums; min-height: 20px; }
.rj-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.rj-buttons .btn { height: 36px; padding: 0 20px; }
#splash.solo .vs-mid, #splash.solo #vs-opp { display: none; }
.vs-side { display: grid; justify-items: center; gap: 10px; min-width: 0; text-align: center; }
.vs-pic { width: 160px; height: 160px; border-radius: 24px; background: var(--surface); object-fit: cover; }
.vs-name { font-size: 28px; line-height: 34px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-rank { display: grid; justify-items: center; gap: 8px; color: var(--muted); }
.vs-rank img { width: 144px; height: 51px; }
.vs-points { color: var(--muted); font-variant-numeric: tabular-nums; }
.vs-mid { display: grid; justify-items: center; gap: 8px; }
.vs { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.vs-load { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); width: min(320px, 60vw); height: 3px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.vs-fill { height: 100%; width: 0; background: var(--accent); }
@media (max-width: 640px) {
  #splash { grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: center; }
  .vs-pic { width: 96px; height: 96px; border-radius: 16px; }
  .vs { font-size: 40px; }
}

/* sign in */
.btn.provider { height: 40px; justify-content: center; gap: 10px; background: var(--ground); color: var(--text); border-color: var(--control); }
.btn.provider:hover { background: var(--raised); }
.btn.provider svg { width: 18px; height: 18px; }
.auth { max-width: 400px; margin: 48px auto 0; display: grid; gap: 16px; }
.auth h1 { font-size: var(--fs-title); font-weight: 600; }
.auth .input { width: 100%; background: var(--ground); color: var(--text); }
.auth .hint { color: var(--muted); }
.auth .err { color: var(--negative); min-height: 20px; }
.auth .err:empty { display: none; }

/* play */
.play .field + .field { margin-top: 16px; }
.play .input { width: 100%; background: var(--ground); color: var(--text); }
.play .rank-pick { display: flex; align-items: center; gap: 12px; }
.play .rank-pick img { width: 72px; height: 25px; flex: none; }
.play .rank-pick select { flex: 1; }
.play .actions { margin-top: 20px; display: grid; gap: 8px; }
.btn.primary { height: 36px; border-radius: 999px; font-weight: 600; }
.btn.primary:disabled { background: #3a2c28; color: var(--muted); cursor: default; }
.btn.ghost { color: var(--muted); }
#note { min-height: 20px; margin-top: 12px; color: var(--muted); white-space: pre-wrap; }
#note.err { color: var(--negative); }

/* ---------- profile ---------- */
.six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span6 { grid-column: 1 / -1; }
.tile .kpi-label { color: var(--muted); }

/* ---------- the game (unchanged): full screen over the league ---------- */
#game { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; z-index: 10; }
/* the picture fitted to the window in WA's screen shape; the flags over it share its box */
#game .cv-box { position: relative; width: min(100vw, calc(100vh * var(--ar, 16 / 9))); aspect-ratio: var(--ar, 16 / 9); }
#game canvas { display: block; width: 100%; height: 100%; }
#hud { position: absolute; top: 8px; left: 12px; color: var(--muted); font-size: var(--fs-small); pointer-events: none; text-shadow: 0 1px 2px #000; } /* taste-skill-ignore: HUD over the game */

/* the bots */
#bt-table .who .sub { display: block; font-size: var(--fs-small); color: var(--faint); }
.bot-name { font-weight: 500; }
#bt-table td .pill { margin: 2px 0; }

/* your team: a row per setting (what it is, then its controls), one Save */
.team-view { display: grid; gap: var(--gap); }
.team-view .input { width: 100%; background: var(--ground); color: var(--text); }
.team-view .panel > header .input { width: 220px; }
.tm-team { display: grid; gap: 16px; }
/* the team as the game draws it (core preview.rs, 280 x 150 WA pixels, doubled) */
.tm-stage { position: relative; display: grid; place-items: center; width: 100%; max-width: 560px; aspect-ratio: 280 / 150; margin: 0 auto; border-radius: 8px; background: #000; overflow: hidden; }
.tm-stage canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.tm-stage img { position: absolute; left: 50%; top: calc(100% * 131 / 150); width: calc(100% * 32 / 280); transform: translate(-50%, -50%); image-rendering: pixelated; }
.tm-stage .btn { position: absolute; }
.tm-stage canvas[hidden], .tm-stage img[hidden] { display: none; }
/* trying on a locked colour, look or flag: what it is, and buying it */
.tm-try { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.tm-try[hidden] { display: none; }
.tm-try span { color: var(--muted); }
.team-view .tm-name { justify-self: center; width: min(100%, 24ch); text-align: center; font-weight: 600; }
.tm-colours { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; justify-self: center; max-width: 560px; }
.tm-colour { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #000; background: var(--c); outline: 1px solid var(--control); cursor: pointer; padding: 0; }
.tm-colour:hover { outline-color: var(--text); }
/* a worm skin colour's swatch (level-up, the buy dialog) */
.flesh-dot { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid #000; }
.flesh-dot.big { width: 72px; height: 72px; }
.tm-colour[aria-checked="true"] { outline: 2px solid var(--text); }
.worm-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; max-height: 320px; overflow: auto; padding-right: 4px; }
.flag-pick { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: var(--ground); color: var(--muted); cursor: pointer; text-align: left; min-width: 0; }
.flag-pick img { width: 32px; height: 20px; object-fit: contain; image-rendering: pixelated; flex: none; }
.flag-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); }
.flag-pick:hover { border-color: var(--control); color: var(--text); }
.flag-pick[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
.speech-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; max-height: 236px; overflow: auto; padding-right: 4px; }
.speech-pick { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px;
  background: var(--ground); color: var(--muted); font-size: var(--fs-small); text-align: left; cursor: pointer; min-width: 0; }
.speech-pick .pack { width: 24px; height: 24px; object-fit: contain; flex: none; margin-left: auto; }
.speech-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speech-pick:hover { border-color: var(--control); color: var(--text); }
.speech-pick[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
.speech-pick.locked { color: var(--faint); cursor: default; }
.speech-pick.locked:hover { border-color: transparent; color: var(--faint); }
.speech-pick .lock { width: 12px; height: 12px; flex: none; }
.team-save { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
@media (max-width: 860px) { .worm-list { grid-template-columns: minmax(0, 1fr); } }

/* the teams' flags over WA's bars (where WA's own flag was) */
#teambars { position: absolute; inset: 0; pointer-events: none; }
/* the chat: WA's place for it (the top left), the page's look; the recent lines while closed,
   the last ten and the line being typed while open */
#chat { position: absolute; left: 16px; top: 16px; z-index: 11; display: grid; gap: 6px; width: min(560px, calc(100% - 32px));
  pointer-events: none; font-size: var(--fs-body); }
#chat.open { padding: 10px 12px; border-radius: 8px; background: rgba(13, 8, 6, 0.78); }
#chat-log { display: grid; gap: 2px; }
#chat-log > div { display: flex; align-items: center; gap: 8px; color: var(--text); line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); overflow-wrap: anywhere; transition: opacity 400ms ease; } /* taste-skill-ignore: legible over the game picture */
#chat-log > div.old { opacity: 0; }
#chat.open #chat-log > div.old { opacity: 1; }
#chat-log > div.hide { display: none; }
#chat-log b { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#chat-log b img { height: 28px; width: auto; }
#chat-log .ink { background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none; } /* taste-skill-ignore: the team colour sold is a gradient; the chat shows it as the game does */
#chat-input { pointer-events: auto; height: 32px; padding: 0 10px; border: 1px solid var(--control); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text); font: inherit; outline: none; }
#chat-input:focus { border-color: var(--accent); }
#chat-input[hidden] { display: none; }
/* the gacha's pull after its scene: white over the picture, the projectiles flying to a grid */
#gacha-stage { position: absolute; overflow: hidden; z-index: 11; }
#gacha-stage .gs-white { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 500ms var(--ease-out); }
#gacha-stage.white .gs-white { opacity: 1; }
#gacha-stage .gs-item { position: absolute; left: 0; top: 0; image-rendering: pixelated; transition: transform 900ms var(--ease-out); }
/* a prize's cell: what it is above its rarity; opened, the prize under them */
#gacha-stage .gs-cell { position: absolute; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none;
  transform: translate(-50%, -50%) scale(0.2); opacity: 0; transition: transform 420ms var(--ease-out), opacity 200ms ease-out; }
#gacha-stage .gs-cell.shown { transform: translate(-50%, -50%) scale(1); opacity: 1; }
#gacha-stage .gs-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; line-height: 1; color: #222; animation: gs-pop 360ms var(--ease-out); }
#gacha-stage .gs-kind img { width: 1.6em; height: 1.6em; }
#gacha-stage .gs-prize { display: grid; justify-items: center; gap: 4px; animation: gs-pop 360ms var(--ease-out); }
#gacha-stage .gs-prize img.flag { height: calc(var(--size) * 0.45); image-rendering: pixelated; }
#gacha-stage .gs-prize img.avatar { width: calc(var(--size) * 0.8); height: calc(var(--size) * 0.8); border-radius: 8px; }
#gacha-stage .gs-prize .swatch { width: calc(var(--size) * 0.55); height: calc(var(--size) * 0.55); border-radius: 50%; border: 2px solid #000; }
#gacha-stage .gs-prize canvas.worm { width: calc(var(--size) * 0.9); image-rendering: pixelated; }
#gacha-stage .gs-prize .bank { font-weight: 600; color: #111; }
#gacha-stage .gs-prize b { font-size: 12px; color: #555; font-weight: 500; }
#gacha-stage .gs-actions { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; gap: 12px; }
#gacha-stage .gs-actions .btn { height: 44px; padding: 0 22px; font-size: 16px; }
#gacha-stage .gs-actions .btn:not(.primary) { background: #fff; color: #111; border-color: #d1d5db; }
#gacha-stage .gs-actions [hidden] { display: none; }
#gacha-stage.shake { animation: gs-shake 260ms linear; }
@keyframes gs-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gs-shake { 25% { translate: 3px -2px; } 50% { translate: -3px 2px; } 75% { translate: 2px 1px; } }
#gacha-stage .gs-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tb-flag { position: absolute; transform: translate(-50%, -50%); image-rendering: pixelated; }
.picks.kind-flag .pick img { image-rendering: pixelated; }

/* the volume, and the game's own settings (Esc) */
.field.volume { margin-top: 16px; }
.field.volume input { width: 100%; accent-color: var(--accent); }
#game-settings { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100vw - 32px)); z-index: 12;
  padding: 16px 20px 18px; border-radius: var(--radius-card); background: rgba(24, 17, 16, 0.96); color: var(--text); } /* taste-skill-ignore: over the game */
.gs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gs-head b { font-weight: 600; }
.gs-hint { margin-top: 12px; color: var(--faint); font-size: var(--fs-small); }
.gs-quit { width: 100%; margin-top: 12px; }
.field.res { display: grid; gap: 6px; margin-top: 16px; }
.field.res select { width: 100%; }
#game-settings .field.res select { background: var(--ground); }
/* Settings (#settings): controls, gamepad, sound */
.settings-link { width: 40px; padding: 0; margin-left: 8px; }
.settings-link { position: relative; }
.settings-link img { width: 28px; height: 28px; object-fit: contain; }
/* Updates (#updates): the top bar's dot while there's something unseen */
.new-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--negative); box-shadow: 0 0 0 2px var(--ground); }
.new-dot[hidden] { display: none; }
.updates { display: grid; gap: var(--gap); max-width: 860px; }
.updates .panel header { align-items: baseline; }
.updates time { color: var(--muted); font-size: var(--fs-small); }
.updates ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.settings { display: grid; gap: var(--gap); max-width: 860px; }
.st-note { color: var(--muted); margin: 0 0 12px; }
.st-controls td { vertical-align: middle; }
.st-controls td .hint { display: block; color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
.st-controls .bind { min-width: 150px; justify-content: center; }
.st-controls .bind.waiting { border-color: var(--accent); color: var(--accent); }
.st-switch { display: flex; align-items: center; gap: 12px; margin-top: 16px; cursor: pointer; }
.st-switch .hint { display: block; color: var(--muted); font-size: var(--fs-small); }
#perf { position: absolute; /* taste-skill-ignore: a developer overlay (?dev), not the design */ top: 8px; left: 8px; z-index: 13; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); color: #ffffff; font: 12px/1.4 ui-monospace, monospace; pointer-events: none; }
#perf[hidden] { display: none; }
.gs-quit[hidden] { display: none; }

/* watching a replay: one quiet bar in the top right corner (WA's team bars, timer and wind are at
   the foot, its messages top middle) */
#watchbar { position: absolute; right: 12px; top: 12px; width: min(460px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 999px; background: rgba(13, 8, 6, 0.86); color: var(--text); }
.w-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.w-btn:hover { background: var(--raised); }
.w-btn svg { width: 16px; height: 16px; fill: currentColor; }
.w-track { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.w-rail { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 999px; background: var(--control); overflow: hidden; }
.w-fill { height: 100%; width: 0; background: var(--accent); }
.w-knob { position: absolute; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--text); pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.w-track:hover .w-knob { opacity: 1; }
.w-marks { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.w-mark { position: absolute; top: -2px; width: 12px; height: 10px; margin-left: -6px; padding: 0; border: 0; background: #ffd23f; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 50% 100%); }
.w-mark:hover { background: #fff2a8; }
.w-speed-box { position: relative; flex: none; }
.w-speed { width: auto; min-width: 40px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.w-speeds { position: absolute; right: 0; top: calc(100% + 8px); display: grid; padding: 4px; border-radius: 12px; background: rgba(13, 8, 6, 0.94); z-index: 2; }
.w-speeds[hidden] { display: none; }
.w-speeds button { min-width: 56px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: var(--fs-small); text-align: right; cursor: pointer; }
.w-speeds button:hover { background: var(--raised); }
.w-speeds button.on { color: var(--accent); }
.w-time { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
button.card-link { font: inherit; }

/* ---------- phone and tablet ---------- */
@media (max-width: 1100px) { .league { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .topbar { height: 56px; padding: 0 16px; gap: 12px; }
  .season { height: 56px; padding: 0 0 0 12px; }
  .sidebar { background: var(--ground); }
}
@media (max-width: 640px) {
  :root[data-theme="dark"] { --pad: 16px; }
  .search { width: auto; flex: 1; }
  .season span { display: none; }
  .kpis { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .kpi + .kpi { border-left: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--ground); }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--ground); }
  .ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
  .ladder-base { display: none; }
  .six { grid-template-columns: minmax(0, 1fr); }
  .six > * { grid-column: 1 / -1; }
  .pf-head { flex-wrap: wrap; }
  .pf-play { margin-left: 0; }
  .hide-phone { display: none; }
}

/* ---------- levels, coins, buying ---------- */
.xp { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.xp .track { flex: 1; }
.xp .end { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.xp-left { margin-top: 6px; }
.result .earned { color: var(--gold); font-weight: 900; }
.gate { padding: 32px var(--card-pad); }
.gate h2 { font-size: var(--fs-section); font-weight: 600; }
.gate .meta { margin-top: 6px; }
.gate-line { color: var(--muted); }
/* a locked item: as legible as the rest, its price, "Unlock" on hover */
.price { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.price .lock { width: 12px; height: 12px; flex: none; }
.price .now { display: none; color: var(--text); }
.locked:hover .price .was { display: none; }
.locked:hover .price .now { display: inline; }
.pick .price { position: absolute; left: 4px; right: 4px; bottom: 4px; justify-content: center; padding: 2px 0; border-radius: 4px; background: var(--surface); }
.pick.locked { cursor: pointer; }
.pick.locked:hover { border-color: var(--control); }
.speech-pick.locked { cursor: pointer; }
.speech-pick.locked:hover { border-color: var(--control); color: var(--text); }
/* locked: washed out (grey, faded) so what you own stands out; near full colour while hovered or
   tried on */
.flag-pick.locked img, .pick.locked img, .skin-pick.locked img { filter: grayscale(1); opacity: 0.35; transition: filter var(--t-hover) ease, opacity var(--t-hover) ease; }
.flag-pick.locked span, .skin-pick.locked span, .speech-pick.locked { color: var(--faint); opacity: 0.6; }
.flag-pick.locked:hover img, .flag-pick.locked[aria-pressed="true"] img, .pick.locked:hover img, .pick.locked[aria-pressed="true"] img,
.skin-pick.locked:hover img, .skin-pick.locked[aria-checked="true"] img { filter: grayscale(0.2); opacity: 0.9; }
.flag-pick.locked:hover span, .flag-pick.locked[aria-pressed="true"] span, .speech-pick.locked:hover { opacity: 1; }
.tm-colour.locked { opacity: 0.4; transition: opacity var(--t-hover) ease; }
.tm-colour.locked:hover, .tm-colour.locked[aria-checked="true"] { opacity: 0.9; }
/* owned flags: their names in ink, a step up from the ground */
.flag-pick:not(.locked) { color: var(--text); background: var(--raised); }
.speech-pick .price { margin-left: auto; }
.tm-colour { position: relative; display: grid; place-items: center; }
.tm-colour .lock { width: 10px; height: 10px; color: #000; opacity: 0.7; }
.tm-colour.locked:hover .lock { opacity: 1; }
/* the buy and level-up dialogs: from 0.97 scale, 250 ms in, 180 ms out */
#buy .dialog-panel, #levelup .dialog-panel, #setup .dialog-panel { opacity: 0; transform: scale(0.97); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
#buy.open .dialog-panel, #levelup.open .dialog-panel, #setup.open .dialog-panel { opacity: 1; transform: none; transition-duration: 250ms; }
.buy-panel { width: min(400px, 100%); display: grid; gap: 16px; }
/* WA.exe's check: where WA is, what is wrong and how to fix it */
.setup-panel { width: min(560px, 100%); display: grid; gap: 16px; }
.setup-panel p { margin: 0; }
.setup-where { display: grid; gap: 8px; margin: 0; }
.setup-where div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.setup-where dt { font-weight: 600; }
.setup-where dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.setup-problems { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--negative); }
.setup-problems:empty { display: none; }
/* the gacha: the rarities large, each with its odds; the two pulls under them, ten in gold */
.gacha { position: relative; display: grid; gap: 48px; justify-items: center; align-content: center; padding: 48px 72px 56px; border-radius: var(--radius-card);
  /* the banner's scene, washed out: darker in the middle where its odds and pulls are */
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(18, 12, 10, 0.78), rgba(18, 12, 10, 0.5) 100%), linear-gradient(rgba(18, 12, 10, 0.25), rgba(18, 12, 10, 0.25)), var(--banner, none) center / cover no-repeat, var(--surface); }
@media (min-width: 900px) { .gacha { aspect-ratio: 1336 / 510; } }
.gacha-head { display: grid; justify-items: center; gap: 6px; }
.gacha-banner-name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.gacha-arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%;
  background: rgba(18, 12, 10, 0.6); color: var(--text); cursor: pointer; transition: background 150ms ease, transform 150ms ease; }
.gacha-arrow svg { width: 24px; height: 24px; }
.gacha-arrow.prev { left: 16px; }
.gacha-arrow.next { right: 16px; }
.gacha-arrow:hover:not(:disabled) { background: rgba(18, 12, 10, 0.85); transform: scale(1.06); }
.gacha-arrow:disabled { opacity: 0.35; cursor: default; }
.gacha-title { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.gacha-odds b, .gacha-coins { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.gacha-title { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.gacha-odds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
.gacha-odds li { display: grid; justify-items: center; gap: 10px; }
.gacha-odds .bob { display: grid; place-items: center; width: 112px; height: 112px; animation: gacha-bob 3.2s ease-in-out infinite; }
.gacha-odds li:nth-child(2) .bob { animation-delay: -0.6s; }
.gacha-odds li:nth-child(3) .bob { animation-delay: -1.2s; }
.gacha-odds li:nth-child(4) .bob { animation-delay: -1.8s; }
.gacha-odds li:nth-child(5) .bob { animation-delay: -2.4s; }
/* a WA sprite spinning as it flies (ranked.js RarityArt): its frames stacked, stepped through */
.wsprite { display: inline-block; flex: none; width: var(--w); height: var(--h); background-repeat: no-repeat;
  background-size: var(--w) calc(var(--h) * var(--n)); image-rendering: pixelated; animation: wsprite calc(var(--n) * 40ms) steps(var(--n)) infinite; }
@keyframes wsprite { to { background-position: 0 calc(var(--h) * var(--n) * -1); } }
.gacha-tag { display: inline-flex; align-items: center; gap: 4px; }
/* its weapon twice its place's size, the label as it was */
.gacha-tag .wsprite { transform: scale(2); }
.gacha-odds .wname { font-weight: 700; text-align: center; }
/* the look's switch: small, at the sidebar's foot */
.nav-item.theme-toggle { height: 26px; width: 100%; border: 0; background: none; font-size: var(--fs-small); color: var(--faint); cursor: pointer; }
.gacha-odds b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gacha-act { display: grid; justify-items: center; gap: 18px; }
/* the latest SSR and better: each line in its rarity's colour (SSR gold, UR red, LR a rainbow with
   a white shine running through it) */
.gacha-latest { margin-top: var(--gap); }
.gacha-latest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* (each line as wide as its words: the gradients and the shine run through the text) */
.gacha-latest li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; font-weight: 600; }
.gacha-latest .pull-icon { width: 24px; height: 24px; flex: none; object-fit: contain; color: var(--text); }
.gacha-latest .pull-dot { width: 16px; height: 16px; border-radius: 50%; }
/* the worms (a skin, a skin colour): twice the icons' size */
.gacha-latest .pull-worm { width: 48px; height: 48px; }
.gacha-latest li a { color: inherit; }
.gacha-latest .pull-ssr, .gacha-latest .pull-ur, .gacha-latest .pull-lr { -webkit-background-clip: text; background-clip: text; color: transparent; } /* taste-skill-ignore: the user asked for gradient rarity text */
.gacha-latest .pull-ssr { background-image: linear-gradient(180deg, #fff3b0, #f2c14e 45%, #b8811c 55%, #f7d77a); } /* taste-skill-ignore: the user's rarity colours */
.gacha-latest .pull-ur { background-image: linear-gradient(90deg, #ff3b3b, #ff8a5c, #c4122f); } /* taste-skill-ignore: the user's rarity colours */
.gacha-latest .pull-lr { background-image: linear-gradient(100deg, #ff4d4d, #ffb84d, #f7ff4d, #4dff88, #4dc3ff, #9a4dff, #ff4dd2, #ff4d4d), linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%);  /* taste-skill-ignore: the user's rarity colours */
  background-size: 200% 100%, 250% 100%; background-blend-mode: screen; animation: lr-shine 2.4s linear infinite; }
@keyframes lr-shine { from { background-position: 0 0, 150% 0; } to { background-position: -200% 0, -100% 0; } }
@media (prefers-reduced-motion: reduce) { .gacha-latest .pull-lr { animation: none; } }
.gacha-coins { font-size: 18px; color: var(--muted); }
.gacha-coins b { color: var(--text); font-weight: 700; }
.gacha-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.gacha-btn { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 220px; padding: 18px 28px; border: 0; border-radius: 8px;
  background: var(--raised); color: var(--text); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.gacha-btn b { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.gacha-btn > span { font-size: 15px; font-weight: 600; opacity: 0.8; font-variant-numeric: tabular-nums; }
.gacha-btn.ten { background: var(--gold); color: #111; }
.gacha-btn:hover:not(:disabled) { transform: translateY(-2px); }
.gacha-btn:active:not(:disabled) { transform: scale(0.97); }
.gacha-btn:disabled { opacity: 0.4; cursor: default; }
.gacha-tag { position: absolute; top: -14px; right: -18px; padding: 6px 12px; border-radius: 4px; background: #e23b2e; color: #fff;
  font-style: normal; font-size: 14px; font-weight: 800; transform: rotate(7deg); white-space: nowrap; }
@keyframes gacha-bob { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .gacha-odds img { animation: none; } }
@media (max-width: 640px) { .gacha-title { font-size: 40px; } .gacha-odds .bob { width: 72px; height: 72px; } .gacha-odds .wsprite { zoom: 0.75; } .gacha-odds { gap: 20px 24px; } .gacha-btn { min-width: 0; width: 100%; } .gacha-buttons { width: 100%; flex-direction: column; } }
.about-wa p { margin: 0 0 16px; color: var(--muted); }
.about-wa-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.buy-item { display: grid; place-items: center; min-height: 160px; border-radius: var(--radius-card); background: var(--ground); padding: 20px; }
.buy-item > img { width: 128px; height: 128px; object-fit: contain; }
.buy-play { justify-self: start; }
.buy-what h2 { font-size: var(--fs-title); font-weight: 600; }
.buy-what .meta { display: block; margin-top: 4px; }
.buy-price b { font-size: var(--fs-kpi); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 10px; }
.buy-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lu-panel { width: min(480px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; padding: 32px var(--card-pad); }
.lu-title { color: var(--gold); font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.lu-number { color: var(--gold); font-size: 128px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lu-unlocked { margin-top: 12px; color: var(--gold); font-size: var(--fs-section); font-weight: 900; }
.lu-opens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
.lu-open { display: grid; gap: 10px; justify-items: center; padding: 16px 8px; border-radius: var(--radius-card); background: var(--ground); }
.lu-open > span { font-weight: 600; }
.lu-panel .buy-actions { width: 100%; justify-content: center; margin-top: 8px; }
.lu-bar { --team: #ff4a3d; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: #000; color: var(--team); font-weight: 600; white-space: nowrap; }
.lu-bar span { width: 48px; height: 8px; border-radius: 2px; background: var(--team-fill, var(--team)); }
.lu-row { display: flex; gap: 6px; }
.lu-row img { width: 36px; height: 36px; object-fit: contain; }
.lu-row.flags img { width: 32px; height: 20px; image-rendering: pixelated; }
.lu-bank { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.lu-bank.big { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: var(--fs-title); font-weight: 600; }
.lu-bank .pack { width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 860px) {
  .lu-opens { grid-auto-flow: row; }
  .lu-number { font-size: 96px; }
}

/* no text caret where nothing is typed (a click on the page or the game must not leave one);
   the game, its overlays and the controls don't select text either */
body { caret-color: transparent; }
input, textarea, [contenteditable] { caret-color: auto; }
#game, #splash, .sidebar, .topbar, .tabs, button, .btn, .pick, .flag-pick, .speech-pick, .tm-colour, .dialog { -webkit-user-select: none; user-select: none; }

/* the worms' looks: a small chip each (the stage above shows them) */
.skin-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.skin-pick { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid transparent; border-radius: 999px;
  background: var(--ground); color: var(--text); cursor: pointer; }
.skin-pick img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.skin-pick:hover { border-color: var(--control); }
.skin-pick[aria-checked="true"] { border-color: var(--text); }
.skin-pick.locked { color: var(--muted); }
/* the team editor's looks (league.js lookTile): a labelled group each (team colour, worm, skin
   colour), tiles with what they change on them: a name tag for the team colour, a worm for the
   skin colour; locked ones faded with a badge: the Gacha, or (owned already) the level they open */
.look-group { display: grid; gap: 10px; width: 100%; max-width: 560px; justify-self: center; }
.look-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.look-head h3 { margin: 0; font-size: var(--fs-section); }
.look-what { color: var(--muted); font-size: var(--fs-small); }
.look-cur { margin-left: auto; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.look-gate { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--gold); }
.look-gate[hidden] { display: none; }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.look-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 96px; padding: 12px 4px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--ground); color: var(--text); cursor: pointer;
  transition: border-color var(--t-hover) ease, background var(--t-hover) ease; }
.look-tile:hover { border-color: var(--control); }
.look-tile[aria-checked="true"] { border-color: var(--text); background: var(--raised); box-shadow: inset 0 0 0 1px var(--text); }
.look-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.look-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); color: var(--muted); }
.look-tile[aria-checked="true"] .look-name { color: var(--text); font-weight: 600; }
.look-tile.locked > :first-child { filter: grayscale(0.85); opacity: 0.4; transition: filter var(--t-hover) ease, opacity var(--t-hover) ease; }
.look-tile.locked:hover > :first-child, .look-tile.locked[aria-checked="true"] > :first-child { filter: none; opacity: 0.95; }
.look-badge { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 5px; border-radius: 999px;
  background: var(--raised); color: var(--faint); font-size: 10px; font-weight: 700; line-height: 16px; }
.look-badge .lock { width: 9px; height: 9px; }
/* owned, waiting for its level: in gold, it is theirs */
.look-badge.soon { color: var(--gold); }
.look-img { width: 44px; height: 52px; object-fit: contain; image-rendering: pixelated; }
/* the worm (tools/worm_swatch.py, 2x): its flesh filled with the colour, WA's shading multiplied
   over it, the outline / mouth / eyes on top */
.worm-swatch { position: relative; width: 44px; height: 52px; isolation: isolate; }
.worm-swatch::before, .worm-swatch i, .worm-swatch::after { content: ""; position: absolute; inset: 0; }
.worm-swatch::before { background: var(--c); -webkit-mask: url(look/worm-flesh.png) 0 0 / 100% 100%; mask: url(look/worm-flesh.png) 0 0 / 100% 100%; }
.worm-swatch i { background: url(look/worm-shade.png) 0 0 / 100% 100%; mix-blend-mode: multiply; }
.worm-swatch::after { background: url(look/worm-detail.png) 0 0 / 100% 100%; }
/* a name tag as the game draws one: black plate, the name and health in the team colour */
.tag-swatch { display: grid; justify-items: center; gap: 2px; }
.tag-swatch b { display: block; padding: 1px 5px; border: 1px solid #6e6e6e; border-radius: 3px; background: #000; font-size: 11px; font-weight: 800; line-height: 14px; }
.tag-swatch b span { color: transparent; background: var(--c); -webkit-background-clip: text; background-clip: text; }
.buy-item > img.skin-big { width: 120px; height: 120px; image-rendering: pixelated; }

/* the top bar's right end: you, behind a full-height rule; Sign in when signed out */
.account { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 var(--pad); border-left: 1px solid var(--rule); color: inherit; text-decoration: none; }
.account .avatar { width: 32px; height: 32px; border-radius: 50%; }
.acct-who { display: grid; line-height: 18px; }
.acct-who b { font-weight: 500; }
.acct-who .acct-line { display: inline-flex; align-items: center; gap: 8px; }
.acct-who span { color: var(--faint); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
#acct-rank img { width: 48px; height: 17px; display: block; }
a.account:hover .acct-who b { text-decoration: underline; }

/* About */
.prose p { max-width: 68ch; color: var(--muted); text-wrap: pretty; }
.prose p + p { margin-top: 12px; }
.about { align-items: start; }
.credits { display: grid; gap: 18px; }
.credits dt { color: var(--muted); font-size: var(--fs-small); }
.credits dd { margin: 2px 0 0; font-weight: 500; }
.credits a, .features a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px 32px; }
.features dt { font-weight: 600; }
.features dd { margin: 4px 0 0; color: var(--muted); text-wrap: pretty; }
@media (max-width: 860px) {
  .account { height: 56px; padding: 0 12px; }
  .acct-who, #acct-rank { display: none; }
}

/* a replay: Watch, and its .WAgame to download */
.replay-acts { display: inline-flex; align-items: center; gap: 10px; }
.replay-acts .dl { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); }
.replay-acts .dl:hover { color: var(--text); background: var(--raised); }
.replay-acts .dl svg { width: 16px; height: 16px; }

/* the sign-in screen's word on credentials */
.auth-note { margin-top: 16px; color: var(--muted); font-size: var(--fs-small); line-height: 18px; text-wrap: pretty; }
@media (max-width: 860px) { .lg-title { grid-template-columns: 1fr; justify-items: start; gap: 16px; } .play-btn { width: 100%; } .play-side { width: 100%; } }

/* Play vs Blas: its modes, one card each */
.blas-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.blas-mode { display: grid; place-items: center; min-height: 140px; padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) ease; }
.blas-mode b { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.blas-mode:hover:not(:disabled) { background-color: var(--raised); }
/* a clear outline: they are buttons (the palette's control colour; the accent when picked) */
.blas-mode { border: 2px solid var(--control); }
.blas-mode:hover:not(:disabled) { border-color: var(--muted); }
.blas-mode[aria-pressed="true"] { border-color: var(--accent); }
/* each mode's picture behind its name (blas/modes: the user's), washed by the button's own
   colour so the name reads */
.blas-mode { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.blas-mode::before { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: 0.6; transition: opacity var(--t-hover) ease; }
.blas-mode:hover:not(:disabled)::before { opacity: 0.45; }
.blas-mode[aria-pressed="true"]::before { opacity: 0.4; }
.blas-mode b { position: relative; }
.blas-mode[data-blas="roper"] { background-image: url("../blas/modes/roper-16e148ed.jpg"); }
.blas-mode[data-blas="roperace"] { background-image: url("../blas/modes/roperace-9ca6b9e5.jpg"); }
.blas-mode[data-blas="shopper"] { background-image: url("../blas/modes/shopper-24b13804.jpg"); }
.blas-mode[data-blas="aerial"] { background-image: url("../blas/modes/aerial-97c60ed8.jpg"); }
.blas-mode[data-blas="kaos"] { background-image: url("../blas/modes/kaos-5327aaf4.jpg"); }
.blas-mode:active:not(:disabled) { transform: translateY(1px); }
.blas-mode:disabled { opacity: 0.5; cursor: default; }

/* the mode's maps: three in a row, each its thumbnail, name and author */
.blas-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.blas-maps[hidden] { display: none; }
.blas-map { display: grid; gap: 4px; justify-items: start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--t-hover) ease; }
.blas-map:hover:not(:disabled) { background: var(--raised); }
.blas-map:disabled { opacity: 0.5; cursor: default; }
.blas-map .thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 600 / 217; margin-bottom: 6px; border-radius: 6px; background: var(--ground); overflow: hidden; }
.blas-map .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.blas-map b { font-weight: 700; }
.blas-map .by { color: var(--muted); font-size: var(--fs-small); }
/* no mode picked yet: three empty places, an X where the thumbnail goes */
.blas-map.empty { cursor: default; }
.blas-map.empty .thumb { color: var(--control); }
.blas-map.empty .thumb svg { width: 100%; height: 100%; }
#v-blas > .panel { margin-top: var(--gap); }
/* rope race: the maps, and Blas's records on the right */
.blas-play { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.blas-play .blas-maps { margin-top: var(--gap); }
/* (under the maps: the players' best times and Blas's records side by side) */
.blas-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap); margin-top: calc(var(--gap) + 8px); }
@media (max-width: 720px) { .blas-records { grid-template-columns: minmax(0, 1fr); } }
.blas-records[hidden] { display: none; }
.blas-records ol { list-style: none; margin: 0; padding: 0; }
.blas-records li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 0; }
.blas-records li.rec-map { display: block; padding: 12px 0 2px; border-top: 1px solid var(--border); font-weight: 700; }
.blas-records li.rec-map:first-child { border-top: 0; padding-top: 0; }
.blas-records .rec-who-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blas-records .rec-time { font-variant-numeric: tabular-nums; font-weight: 800; justify-self: end; }
.blas-records .rec-who { color: var(--muted); font-size: var(--fs-small); }
.blas-records .card-link { justify-self: end; }
@media (max-width: 860px) { .blas-maps { grid-template-columns: minmax(0, 1fr); } .blas-play:has(.blas-records:not([hidden])) { grid-template-columns: minmax(0, 1fr); } }
.blas-note { margin-top: var(--gap); min-height: 20px; color: var(--muted); }
.blas-note.err { color: var(--negative); }

/* ---------- friends (league/friends.js): a tab on the bottom right of every page, its panel
   opening up from it; a friend's challenge also as a card above the tab while it is closed ---------- */
.fr-dock { position: fixed; right: 24px; bottom: 0; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: 340px; max-width: calc(100vw - 32px); }
.fr-dock[hidden] { display: none; }
.fr-tab { display: flex; align-items: center; gap: 10px; width: 280px; max-width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: background-color var(--t-hover) ease; }
.fr-tab:hover { background: var(--raised); }
.fr-tab b { font-weight: 600; }
.fr-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); flex: none; }
.fr-tab-count { color: var(--muted); font-size: var(--fs-small); margin-right: auto; }
.fr-tab.pulse { animation: fr-pulse 0.9s ease-in-out 3; }
@keyframes fr-pulse { 50% { background: var(--raised); border-color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .fr-tab.pulse { animation: none; } }
.fr-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--negative); color: #ffffff; font-size: 12px; font-weight: 700; flex: none; }
.fr-badge[hidden] { display: none; }
.fr-panel { display: flex; flex-direction: column; width: 100%; height: min(560px, calc(100vh - 140px)); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.fr-panel[hidden] { display: none; }
.fr-panel + .fr-tab { border-top-left-radius: var(--radius-card); }
.fr-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--rule); }
.fr-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.fr-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.fr-title .fr-who { flex: 1; }
.fr-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.fr-icon:hover { background: var(--raised); color: var(--text); }
.fr-icon[hidden] { display: none; }
.fr-icon svg { width: 16px; height: 16px; }
.fr-list { flex: 1; overflow-y: auto; padding: 12px; }
.fr-list[hidden] { display: none; }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; min-width: 0; height: var(--control-height); padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--ground); color: var(--text); font: inherit; }
.fr-notice { margin: 8px 2px 0; color: var(--muted); font-size: var(--fs-small); }
.fr-sec { display: flex; justify-content: space-between; margin: 18px 4px 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fr-sec span { font-variant-numeric: tabular-nums; }
.fr-empty { margin: 14px 4px; color: var(--muted); font-size: var(--fs-small); list-style: none; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-control); cursor: pointer; }
.fr-row:hover, .fr-row:focus-visible { background: var(--raised); outline: none; }
.fr-row.unread .fr-name b { color: var(--text); }
.fr-row.unread .fr-sub { color: var(--text); font-weight: 600; }
.fr-pic { position: relative; flex: none; }
.fr-pic .avatar { width: 34px; height: 34px; border-radius: 50%; }
.fr-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: var(--control); }
.fr-dot.online { background: var(--positive); }
.fr-dot.game { background: var(--accent); }
.fr-who { display: grid; min-width: 0; flex: 1; }
.fr-name { display: flex; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.fr-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-name img { width: 18px; height: 18px; flex: none; }
.fr-sub { color: var(--muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-acts { display: flex; gap: 6px; flex: none; }
.fr-acts .btn, .fr-row > .btn, .fr-challenge, .fr-callout .btn { height: 30px; padding: 0 10px; font-size: var(--fs-small); }
.fr-row .fr-challenge { opacity: 0; transition: opacity var(--t-hover) ease; }
.fr-row:hover .fr-challenge, .fr-row:focus-within .fr-challenge { opacity: 1; }
@media (hover: none) { .fr-row .fr-challenge { opacity: 1; } }
.fr-callout { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--accent); border-radius: var(--radius-card); background: var(--raised); }
.fr-callout > span:first-child { flex: 1; }
.fr-callout.mine { border-color: var(--control); }
.fr-toast { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--accent); border-radius: var(--radius-card); background: var(--surface); }
.fr-toast[hidden] { display: none; }
.fr-toast > span:first-child { flex: 1; }
.fr-toast .btn { height: 30px; padding: 0 10px; font-size: var(--fs-small); }
.fr-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.fr-chat[hidden] { display: none; }
.fr-msgs { flex: 1; overflow-y: auto; margin: 0; padding: 12px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fr-msgs li { max-width: 78%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--raised); overflow-wrap: anywhere; align-self: flex-start; }
.fr-msgs li.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent); color: #1a0d05; }
.fr-msgs li.fr-empty { background: none; align-self: center; }
.fr-send { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rule); }
.fr-send input { flex: 1; min-width: 0; height: var(--control-height); padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--ground); color: var(--text); font: inherit; }
@media (max-width: 640px) { .fr-dock { right: 16px; } .fr-tab { width: 100%; } }

/* ---------- the top bar's right end (league.js purse): one capsule, you then your level and
   coins as pills, what's new and settings as icons with a count badge ---------- */
.hud { display: flex; align-items: center; gap: 6px; margin-right: var(--pad); padding: 4px 6px 4px 4px; border-radius: 999px;
  background: var(--raised); border: 1px solid var(--rule); }
.hud-me { display: flex; align-items: center; gap: 8px; padding-right: 4px; color: inherit; text-decoration: none; }
.hud-me .avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); }
.hud-name { display: inline-flex; align-items: center; gap: 6px; }
.hud-name b { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#acct-rank img { width: 48px; height: 17px; display: block; }
.hud-me:hover .hud-name b { text-decoration: underline; }
.hud-sep { width: 1px; height: 22px; background: var(--rule); margin: 0 2px; }
.hud-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--surface);
  color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.hud-pill b { font-weight: 700; }
.hud-coins:hover { background: var(--active); }
.coin-spin { width: 22px; height: 22px; image-rendering: pixelated; }
.lv-badge { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #1a1408;
  font-size: 12px; font-weight: 800; }
.hud-xp { width: 46px; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.hud-xp i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.hud-icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.hud-icon:hover { background: var(--surface); }
.hud-icon img { width: 26px; height: 26px; object-fit: contain; }
.hud-badge, .nav-badge { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--negative); color: #ffffff; font-size: 11px; font-weight: 800; line-height: 1; }
.hud-badge { position: absolute; top: -3px; right: -4px; box-shadow: 0 0 0 2px var(--raised); }
.hud-badge[hidden], .nav-badge[hidden] { display: none; }
.nav-badge { margin-left: auto; }
.hud-signin { margin-left: 4px; }
.hud-signin[hidden] { display: none; }
@media (max-width: 720px) {
  .hud { margin-right: 8px; gap: 4px; }
  .hud-name, .hud-xp, .hud-sep { display: none; }
}

/* the coin: in place of the word, beside a number of them */
.coins { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.coin { width: 1.15em; height: 1.15em; image-rendering: pixelated; vertical-align: -0.2em; }
.kpi-value.earned { display: inline-flex; align-items: center; gap: 6px; }
.kpi-value.earned .coin { width: 0.9em; height: 0.9em; }

/* ---------- Achievements (#achievements): one card each, opened for its details; locked ones
   greyed, one ready to unlock lit and pulsing, an unlocked one's icon shining ---------- */
.ach-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; gap: var(--gap); max-width: 1240px; }
.ach-todo, .ach-done-list { display: grid; gap: 12px; }
/* (the unlocked ones: a list closed until asked for, on the right) */
.ach-done { border-radius: var(--radius-card); background: var(--raised); border: 1px solid var(--rule); }
.ach-done[hidden] { display: none; }
.ach-done > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 700; }
.ach-done > summary::-webkit-details-marker { display: none; }
.ach-done > summary .ach-chev { margin-left: auto; }
.ach-done[open] > summary .ach-chev { transform: rotate(180deg); }
.ach-done-list { padding: 0 12px 12px; }
.ach-done-list .ach { background: var(--surface); }
@media (max-width: 960px) { .ach-list { grid-template-columns: minmax(0, 1fr); } }
.ach { border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--rule); overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease; }
.ach summary { display: flex; align-items: center; gap: 16px; padding: 14px 16px; cursor: pointer; list-style: none; }
.ach summary::-webkit-details-marker { display: none; }
.ach-icon { position: relative; flex: none; width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 214, 90, 0.22), transparent 70%), var(--raised); }
.ach-icon img { width: 72px; height: 72px; image-rendering: pixelated; }
/* (the shine: a white band crossing the icon's own pixels, its picture as the mask) */
.ach-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.95) 48%, transparent 58%) no-repeat;
  background-size: 300% 100%; -webkit-mask: var(--icon) center / 72px 72px no-repeat; mask: var(--icon) center / 72px 72px no-repeat; }
.ach-claimed .ach-shine, .ach-ready .ach-shine { opacity: 1; animation: ach-shine 2.6s ease-in-out infinite; }
@keyframes ach-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.ach-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ach-main b { font-size: 17px; font-weight: 700; }
.ach-progress { display: flex; align-items: center; gap: 10px; }
.ach-bar { flex: 1; max-width: 360px; height: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.ach-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0a81a, #ffe066); }
.ach-count { color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ach-side { flex: none; }
.ach-lock { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--raised); }
.ach-lock svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.ach-chev { flex: none; width: 18px; height: 18px; stroke: var(--muted); stroke-width: 1.6; transition: transform 200ms ease; }
.ach[open] .ach-chev { transform: rotate(180deg); }
.ach-body { padding: 0 16px 16px 104px; display: grid; gap: 10px; color: var(--muted); }
.ach-body p { margin: 0; }
.ach-reward { color: var(--text); }
.ach-reward .label { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 214, 90, 0.18); color: var(--accent);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.ach-note { color: var(--negative); }
.ach-body .st-switch { margin-top: 2px; }
.ach-ready { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(255, 210, 58, 0.25); }
.ach-claim { animation: ach-pulse 1.6s ease-in-out infinite; }
@keyframes ach-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 210, 58, 0.25); } }
.ach-just .ach-icon { animation: ach-pop 700ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ach-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 720px) {
  .ach summary { gap: 12px; padding: 12px; }
  .ach-icon, .ach-icon img { width: 56px; height: 56px; }
  .ach-shine { -webkit-mask-size: 56px 56px; mask-size: 56px 56px; }
  .ach-body { padding: 0 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ach-shine, .ach-claim { animation: none; } }

/* the rope race's Best times (Play vs Blas): a sticker on the board, its top times wear the
   Golden Rope (the server's achievements.rs) */
.bl-best-panel { position: relative; }
.gold-sticker { position: absolute; top: -12px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px;
  border-radius: 999px; transform: rotate(3deg); font-size: 12px; font-weight: 800; color: #3a2400; white-space: nowrap;
  background: linear-gradient(135deg, #fff3b0, #ffd23a 45%, #f0a81a); box-shadow: 0 2px 0 #b97a0a, 0 4px 10px rgba(0, 0, 0, 0.25); }
.gold-sticker img { width: 24px; height: 24px; image-rendering: pixelated; }

/* what's new: at the start of the top bar's right end, before the season */
.topbar-updates { margin-left: auto; flex: none; }
.topbar-updates + .season { margin-left: 0; }
.topbar-updates .hud-badge { box-shadow: 0 0 0 2px var(--ground); }

/* an achievement's reward beside its name, and the groups (levels, weapons) */
.ach-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ach-prize { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255, 214, 90, 0.16);
  color: var(--accent); font-size: 12px; font-weight: 700; }
.ach-prize .coin { width: 14px; height: 14px; margin-left: 3px; }
.ach-group { margin: 12px 0 0; font-size: 15px; font-weight: 700; color: var(--muted); }
.ach-group:first-child { margin-top: 0; }

/* ---------- the landing page (#home): the game's hot moments full screen, washed out behind
   the way in (league.js landing) ---------- */
.landing { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #0b0807; color: #ffffff; }
.landing[hidden] { display: none; }
body.on-landing { overflow: hidden; }
.ld-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease;
  filter: saturate(0.8) brightness(0.62) contrast(1.05); transform: scale(1.03); }
.ld-video.on { opacity: 1; }
.ld-wash { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 6, 5, 0.92) 0%, rgba(8, 6, 5, 0.7) 34%, rgba(8, 6, 5, 0.15) 70%, rgba(8, 6, 5, 0.35) 100%),
    linear-gradient(0deg, rgba(8, 6, 5, 0.75) 0%, transparent 30%); }
.ld-box { position: relative; display: grid; gap: 18px; align-content: center; width: min(460px, calc(100vw - 32px)); min-height: 100%;
  padding: 48px 0 48px clamp(16px, 6vw, 96px); }
.ld-logo { width: 440px; max-width: 100%; height: auto; image-rendering: pixelated; margin-left: -8px; }
/* (under the logo, a quiet line: the logo is the title) */
.ld-box h1 { margin: 0; padding-top: 14px; border-top: 2px solid rgba(255, 210, 58, 0.55); max-width: 380px;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.9); text-wrap: balance; }
.ld-sub { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 15px; }
/* (the way in: gold, the Discord button's stripes, a touch bigger than it) */
.ld-play { justify-self: start; display: inline-flex; align-items: center; height: 60px; padding: 0 40px; border-radius: 999px; border: 0;
  font-size: 22px; font-weight: 800; color: #3a2400; text-decoration: none; letter-spacing: 0.01em;
  background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.16) 0 10px, rgba(255, 255, 255, 0) 10px 20px),
    linear-gradient(180deg, #ffe066, #f5b400);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 -3px 0 rgba(150, 90, 0, 0.35); transition: transform 150ms ease, filter 150ms ease; }
.ld-play:hover { transform: translateY(-2px); filter: brightness(1.06); background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.16) 0 10px, rgba(255, 255, 255, 0) 10px 20px),
    linear-gradient(180deg, #ffe066, #f5b400); }
.ld-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; counter-reset: s; color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.ld-steps[hidden] { display: none; }
.ld-steps li { counter-increment: s; display: inline-flex; align-items: center; gap: 8px; }
.ld-steps li::before { content: counter(s); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 800; }
.ld-user { margin-top: 6px; }
.ld-me { display: flex; align-items: center; gap: 12px; color: #ffffff; text-decoration: none; }
.ld-me .avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent); }
.ld-me b { display: block; font-size: 18px; font-weight: 800; }
.ld-rank { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.ld-rank img { width: 48px; height: 17px; }
.ld-me:hover b { text-decoration: underline; }
.ld-stats { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ld-stats .hud-pill { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.ld-stats .hud-icon { background: rgba(255, 255, 255, 0.1); }
.ld-stats .hud-badge { box-shadow: none; }
.ld-auth { display: grid; gap: 10px; max-width: 320px; }
.ld-auth .provider { justify-content: center; }
/* (the friends' dock: not over the landing page) */
body.on-landing .fr-dock { display: none; }
.ld-caption { position: absolute; right: 24px; bottom: 20px; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); font-size: 14px; backdrop-filter: blur(4px); }
.ld-caption:empty { display: none; }
.ld-caption b { font-weight: 800; }
.ld-caption .dim { color: rgba(255, 255, 255, 0.65); }
@media (max-width: 720px) {
  .ld-box { width: auto; padding: 32px 16px; align-content: end; }
  .ld-wash { background: linear-gradient(0deg, rgba(8, 6, 5, 0.95) 0%, rgba(8, 6, 5, 0.6) 55%, rgba(8, 6, 5, 0.3) 100%); }
  .ld-caption { left: 16px; right: auto; top: 16px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .ld-video { transition: none; } }

/* resetting the account (your profile, Overview): a quiet panel at the end, its dialog */
.pf-links { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pf-links[hidden] { display: none; }
.pf-links h2 { margin: 0 0 4px; }
.pf-links .meta { margin: 0; }
.pf-links-list { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pf-link { display: inline-flex; align-items: center; gap: 8px; }
.pf-link svg { width: 18px; height: 18px; }
.pf-link.on { padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--muted, #9aa); font-size: 14px; }
.pf-link-note { flex-basis: 100%; text-align: right; }
.pf-reset { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: var(--gap); }
.pf-reset[hidden] { display: none; }
.pf-reset h2 { margin: 0 0 4px; }
.pf-reset .meta { margin: 0; }
.btn.danger { background: transparent; color: var(--negative); border-color: var(--negative); }
.btn.danger:hover:not(:disabled) { background: var(--negative); color: #ffffff; }
.btn.danger:disabled { opacity: 0.45; cursor: not-allowed; }
.reset-panel { display: grid; gap: 12px; max-width: 460px; }
.reset-panel h2 { margin: 0; }
.reset-panel p { margin: 0; }
.reset-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }

/* the landing played in the engine (league.js landingLive, ranked.js Backdrop): its two canvases
   filling the screen behind the wash, the one on screen faded in over the other */
.ld-canvas { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 600ms ease; filter: saturate(0.8) brightness(0.62) contrast(1.05); pointer-events: none; }
.ld-canvas.on { opacity: 1; }
/* (above the videos and canvases: the wash, the box, the caption) */
.ld-wash { z-index: 3; }
.ld-box, .ld-caption { z-index: 4; }
.landing.ld-engine .ld-video { display: none; }

/* an admin's notice over the game (ranked.js 'notice': a restart coming): seen, never in the way
   (no clicks, no keys, no focus: the turn goes on under it) */
.game-notice { pointer-events: none; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 13; max-width: calc(100vw - 32px); padding: 10px 18px;
  border-radius: 12px; background: #c4242a; color: #ffffff; font-weight: 800; letter-spacing: 0.02em; text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); animation: notice-pulse 1s ease-in-out infinite alternate; }
.game-notice[hidden] { display: none; }
@keyframes notice-pulse { to { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(196, 36, 42, 0.35); } }

/* the landing's Discord button (beside Play now): Discord's blurple, a pill with soft stripes */
.ld-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ld-discord { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px 0 22px; border-radius: 999px; color: #ffffff; text-decoration: none;
  font-size: 20px; font-weight: 800; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.07) 0 10px, rgba(255, 255, 255, 0) 10px 20px), #5865f2;
  transition: transform 150ms ease, filter 150ms ease; }
.ld-discord:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ld-discord svg { width: 26px; height: 26px; }

/* highlights: a player's (or bot's) best moments played in the game (league.js highlights) */
.hl-panel { margin-bottom: var(--gap); }
.hl-panel[hidden] { display: none; }
.hl { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.hl-box { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000000; }
.hl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.hl-canvas.on { opacity: 1; }
.hl-cap { position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.62); color: #ffffff; font-size: var(--fs-small); font-weight: 600; }
.hl-cap:empty { display: none; }
.hl-open { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #ffffff; font: inherit; font-size: var(--fs-small); cursor: pointer; }
.hl-open:hover { background: rgba(0, 0, 0, 0.8); }
.hl-load { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-small); }
.hl-load[hidden] { display: none; }
.hl-load-bar { width: min(260px, 60%); height: 4px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.hl-load-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 300ms ease; }
.hl-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--muted); }
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hl-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hl-item span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-item:hover { background: var(--raised); }
.hl-item.on { background: var(--raised); }
.hl-item.on b { color: var(--accent); }
.bt-hl { display: block; margin-top: 2px; font-size: var(--fs-small); }
@media (max-width: 760px) { .hl { grid-template-columns: minmax(0, 1fr); } }

/* live games (league.js liveGames): who plays, the mode and time, Spectate where you may */
.live-games { display: grid; gap: 10px; margin-bottom: var(--gap); }
.live-game { display: grid; gap: 6px; }
.live-game + .live-game { padding-top: 10px; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.live-sides { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-sides .who { min-width: 0; flex: 1 1 0; }
.live-vs { color: var(--muted); font-size: var(--fs-small); }
.live-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--fs-small); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ff4a3d; box-shadow: 0 0 0 3px rgba(255, 74, 61, 0.2); vertical-align: 0; }
.live-watch { padding: 4px 12px; font-size: var(--fs-small); }
/* the watch bar on a live game: no play, seek or speed; LIVE */
.w-live, .w-live-hint { display: none; }
#watchbar.live #w-play, #watchbar.live .w-track, #watchbar.live .w-time, #watchbar.live .w-speed-box { display: none; }
#watchbar.live { width: auto; }
#watchbar.live .w-live { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #ff4a3d; color: #ffffff; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; }
#watchbar.live .w-live-hint { display: inline; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
/* Allow spectators (Settings) */
.st-spec { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-spec[hidden] { display: none; }
.st-spec h2 { margin: 0 0 4px; }
.st-spec .meta { margin: 0; }
.st-spec select { width: auto; min-width: 160px; }

/* Settings: a panel folded away until opened (Controls) */
.st-fold > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; user-select: none; }
.st-fold > summary::-webkit-details-marker { display: none; }
.st-fold > summary h2 { margin: 0; }
.st-fold > summary .meta { margin: 0; flex: 1; }
.st-chev { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform 150ms ease; }
.st-fold[open] .st-chev { transform: rotate(180deg); }
.st-fold-body { margin-top: 14px; }
.st-fold-acts { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* an Updates entry's picture (league/updates) */
.upd-img { display: block; max-width: 100%; height: auto; margin-top: 12px; border-radius: 10px; image-rendering: pixelated; }

/* a banner's featured items (league.js banner): a sticker at its top right */
.gacha-featured { position: absolute; top: 20px; right: 88px; z-index: 1; display: grid; justify-items: center; gap: 2px; padding: 10px 16px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 90, 26, 0.92), rgba(120, 40, 200, 0.92) 55%, rgba(30, 140, 255, 0.92)); color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); transform: rotate(3deg); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* taste-skill-ignore: the banner's three elements as its sticker */
.gacha-featured[hidden] { display: none; }
.gacha-featured b { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.gacha-featured span { font-size: 15px; font-weight: 700; }
.gacha-featured i { font-style: normal; font-size: 26px; font-weight: 800; line-height: 1.1; }
/* the Rates button: the banner's bottom left */
.gacha-rates-btn { position: absolute; left: 20px; bottom: 18px; z-index: 1; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
  background: rgba(18, 12, 10, 0.6); color: var(--text); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.gacha-rates-btn:hover { background: rgba(18, 12, 10, 0.85); }
/* the rates panel */
.rates-panel { width: min(560px, 100%); max-height: min(84vh, 760px); }
.rates-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rates-group { display: flex; justify-content: space-between; margin: 18px 0 6px; font-size: 15px; }
.rates-group span { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.rates-group.feat { color: #ff8a3d; }
.rates-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rates-list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: var(--fs-small); }
.rates-list b { font-variant-numeric: tabular-nums; font-weight: 600; }
.rate-name small { margin-left: 8px; color: var(--muted); }
@media (max-width: 700px) { .gacha-featured { position: static; transform: none; } .gacha-rates-btn { position: static; } }

/* a designed banner's art (Forces of Nature): behind the odds and pulls, the gacha's own content
   above it */
.gacha.designed > *:not(.banner-art):not(.gacha-arrow):not(.gacha-featured):not(.gacha-tickets):not(.gacha-rates-btn) { position: relative; z-index: 1; }
/* (the art clipped to the box; the box itself not, so it grows to fit its content where the
   picture's proportions would be too short for it) */
.banner-art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.banner-art[hidden] { display: none; }
.nature-art { background: linear-gradient(115deg, #2b0905 0%, #5a1606 24%, #1d1040 50%, #0a2b52 76%, #04172c 100%); } /* taste-skill-ignore: the banner's own art */
.na-rays { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; opacity: 0.16;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.9) 0deg 4deg, transparent 4deg 14deg); animation: na-spin 60s linear infinite; } /* taste-skill-ignore: the banner's own art */
@keyframes na-spin { to { transform: rotate(360deg); } }
.na-panel { position: absolute; top: -20%; bottom: -20%; width: 34%; transform: skewX(-14deg); opacity: 0.55; mix-blend-mode: screen; }
.na-panel.fire { left: -6%; background: linear-gradient(180deg, rgba(255, 120, 30, 0.7), rgba(180, 20, 10, 0.25)); }
.na-panel.storm { left: 58%; width: 20%; background: linear-gradient(180deg, rgba(150, 110, 255, 0.55), rgba(60, 40, 160, 0.2)); }
.na-panel.ice { left: 76%; background: linear-gradient(180deg, rgba(120, 210, 255, 0.6), rgba(30, 90, 200, 0.25)); }
.na-title { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); display: grid; justify-items: center; white-space: nowrap; line-height: 0.95; font-family: 'Cinzel', serif; text-transform: uppercase;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(255, 150, 60, 0.35)); }
.na-title b { font-size: clamp(30px, 4.2vw, 64px); font-weight: 900; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff7d6 10%, #ffc04a 55%, #e0561a 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* taste-skill-ignore: the banner's title art */
.na-title span { font-size: clamp(16px, 2.1vw, 32px); font-weight: 700; letter-spacing: 0.28em;
  background: linear-gradient(180deg, #ffffff, #a9e2ff 60%, #5a9be0); -webkit-background-clip: text; background-clip: text; color: transparent; } /* taste-skill-ignore: the banner's title art */
/* the three together in the banner's middle: Ice at the back and above (it looks round), Fire and
   Storm in front */
.na-trio { position: absolute; left: 50%; top: 43%; width: clamp(340px, 31vw, 580px); aspect-ratio: 2.1; transform: translate(-50%, -50%); }
.na-unit { position: absolute; width: 38%; image-rendering: pixelated; }
.na-unit.ice { left: 31%; top: -14%; width: 38%; filter: drop-shadow(0 0 26px rgba(130, 220, 255, 0.8)); }
.na-unit.fire { left: 4%; bottom: -18%; filter: drop-shadow(0 0 28px rgba(255, 110, 20, 0.75)); }
.na-unit.storm { right: 4%; bottom: -18%; filter: drop-shadow(0 0 26px rgba(140, 170, 255, 0.8)); }
/* (its middle dark under the odds and pulls) */
.na-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 14, 0.55), rgba(10, 6, 14, 0) 22%, rgba(10, 6, 14, 0) 62%, rgba(10, 6, 14, 0.8)); }
/* (its own title up top in the art, so not the page's; the odds and the pulls at the foot: the
   middle the three's) */
.gacha.designed { align-content: end; padding-top: 28px; padding-bottom: 32px; }
.gacha.designed .gacha-head { display: none; }
.gacha.designed .gacha-odds { margin-top: clamp(320px, 30vw, 500px); }
.gacha.designed .gacha-odds .bob { animation: none; }
@media (max-width: 900px) { .gacha.designed .gacha-odds { margin-top: 300px; } }
/* (on a designed banner its featured sticker under the banner's title, the corner for its art) */
.gacha.designed .gacha-featured { right: auto; left: 4.5%; top: 36%; transform: rotate(-3deg); }

/* the ticket (league/icons/ticket.png: 21 frames of 25 x 16 down a column), played forward and back */
.ticket-ico { display: inline-block; width: 25px; height: 16px; vertical-align: -3px; background: url("icons/ticket.png") 0 0 / 25px 336px no-repeat;
  image-rendering: pixelated; animation: ticket-turn 1.4s steps(20) infinite alternate; }
.ticket-ico.big { width: 50px; height: 32px; background-size: 50px 672px; animation-name: ticket-turn-big; }
@keyframes ticket-turn { to { background-position: 0 -320px; } }
@keyframes ticket-turn-big { to { background-position: 0 -640px; } }
.coins .ticket-ico { margin-right: 4px; }
/* (a banner paid in tickets: a sticker with the ticket, under the featured one) */
.gacha-tickets { position: absolute; left: 4.5%; top: 58%; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: 230px; padding: 10px 14px; border-radius: 10px;
  background: rgba(20, 14, 30, 0.85); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); transform: rotate(-2deg); }
.gacha-tickets[hidden] { display: none; }
.gacha-tickets .ticket-ico { flex: none; }
@media (max-width: 700px) { .gacha-tickets { position: static; transform: none; } }

/* a banner's featured LR in the odds line: its featured rate, highlighted, with a tiny sticker */
.gacha-odds li.feat b { position: relative; color: #ffd23b; text-shadow: 0 0 10px rgba(255, 170, 40, 0.85), 0 1px 4px rgba(0, 0, 0, 0.8); }
.gacha-odds li.feat .bob { filter: drop-shadow(0 0 10px rgba(255, 190, 60, 0.75)); }
.feat-tag { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%) rotate(-6deg); padding: 2px 6px; border-radius: 6px;
  background: linear-gradient(135deg, #ff5a1a, #b02cff); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore: the banner's sticker colours */

/* Settings: the theme, three choices in a row, the one in use pressed */
.st-theme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.theme-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-picks .btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: transparent; }

/* Kaos Bot (beta): its nav item's and title's Beta tag, Chaotic Blas's card */
.beta-tag { display: inline-block; white-space: nowrap; flex: none; margin-left: 6px; padding: 1px 6px; border-radius: 999px; vertical-align: middle;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #2a1200;
  background: linear-gradient(135deg, #ffd27a, var(--accent)); transform: rotate(-3deg); }
h1 .beta-tag { font-size: 12px; padding: 2px 8px; }
.kb-card { display: flex; align-items: center; gap: 14px; margin-top: var(--gap); }
.kb-card h2 { margin: 0; }
.kb-card .sub { margin: 4px 0 0; }
.kb-avatar { width: 64px; height: 64px; border-radius: 12px; image-rendering: pixelated; }
#v-kaos > .panel { margin-top: var(--gap); }

/* ---------- custom games (league/custom.js): a lobby for two ---------- */
.nav-icon.cg-icon { color: var(--muted); }
.nav-item[aria-current="page"] .cg-icon { color: var(--text); }
.nav-item.cg-live { position: relative; }
.nav-item.cg-live::after { content: ''; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 25%, transparent); }
.cg-start-note:empty { display: none; }
.cg-start-card .cg-start-note { color: var(--warning); }
.cg { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.cg-side, .cg-main { display: grid; gap: var(--gap); min-width: 0; }
.cg .panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cg .panel > header h2 { margin: 0; }
.cg-hint { color: var(--faint); font-size: var(--fs-small); text-align: right; }
/* the players */
#cg-slots { display: grid; gap: 8px; }
.cg-slot { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--raised); min-height: 62px; }
.cg-slot.away { opacity: .6; }
.cg-slot.cg-empty, .cg-slot.cg-wait { background: transparent; border-style: dashed; }
.cg-pic { flex: none; display: grid; place-items: center; }
.cg-pic .avatar { width: 40px; height: 40px; border-radius: 50%; }
.cg-who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cg-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cg-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-sub { color: var(--muted); font-size: var(--fs-small); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cg-away { color: var(--warning); }
.cg-tag, .cg-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
.cg-tag.host { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.cg-pill.ok { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.btn.cg-small { height: 30px; padding: 0 10px; font-size: var(--fs-small); }
.cg-spin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--control); border-top-color: var(--accent); animation: cg-spin 1s linear infinite; }
@keyframes cg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cg-spin { animation: none; } }
.cg-invite { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cg-invite li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-control); }
.cg-invite li:hover { background: var(--raised); }
.cg-invite li .avatar { width: 28px; height: 28px; border-radius: 50%; }
.cg-invite li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the chat */
.cg-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.cg-msgs li.sys { color: var(--faint); font-size: var(--fs-small); font-style: italic; }
.cg-msgs li b { color: var(--accent); }
.cg-send { display: flex; gap: 8px; }
.cg-send .input { flex: 1; min-width: 0; }
/* mode and worms */
.cg-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cg-mode { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 2px; align-content: center; min-height: 60px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: inherit; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
/* the mode's picture (custom/modebg), washed out and faded under the text at the left */
.cg-mode-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: right center / cover no-repeat; opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); transition: opacity .15s ease; }
.cg-mode:hover:not(:disabled) .cg-mode-bg, .cg-mode[aria-pressed="true"] .cg-mode-bg { opacity: .5; }
.cg-mode b { text-shadow: 0 0 6px var(--surface); }
.cg-mode span { color: var(--faint); font-size: var(--fs-small); }
.cg-mode:hover:not(:disabled) { background: var(--raised); }
.cg-mode[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.cg-mode:disabled { cursor: default; }
.cg-mode:disabled:not([aria-pressed="true"]) { opacity: .55; }
.cg-step { display: flex; align-items: center; gap: 10px; }
.cg-step .btn { width: 36px; padding: 0; font-size: 18px; }
.cg-step b { min-width: 24px; text-align: center; font-size: var(--fs-kpi); font-variant-numeric: tabular-nums; }
/* the map: its preview, the authors and their maps */
.cg-preview figure { margin: 0; display: grid; gap: 10px; }
.cg-preview img { width: 100%; max-height: 380px; object-fit: contain; border-radius: var(--radius-card); background: #141830; display: block; }
.cg-preview figcaption { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cg-preview figcaption b { font-size: var(--fs-section); }
.cg-preview figcaption span { color: var(--muted); }
.cg-preview figcaption .cg-tagline { color: var(--faint); font-size: var(--fs-small); }
.cg-preview figcaption a { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.cg-noprev { display: grid; place-items: center; height: 180px; border: 1px dashed var(--control); border-radius: var(--radius-card); color: var(--faint); text-align: center; padding: 0 16px; }
.cg-browser { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.cg-tools { display: flex; gap: 8px; }
.cg-tools .input { flex: 1; min-width: 0; }
.cg-lists { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 10px; height: 440px; }
.cg-authors, .cg-maplist { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; min-height: 0; }
.cg-authors button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: var(--radius-control); background: none; color: var(--muted); text-align: left; cursor: pointer; }
.cg-authors button span { color: var(--faint); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.cg-authors button:hover { background: var(--raised); color: var(--text); }
.cg-authors button[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: 600; }
.cg-maplist { display: grid; align-content: start; gap: 4px; }
.cg-maplist button { width: 100%; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px; border: 1px solid transparent; border-radius: var(--radius-card); background: none; color: inherit; text-align: left; cursor: pointer; }
.cg-maplist button:hover:not(:disabled) { background: var(--raised); }
.cg-maplist button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cg-maplist button:disabled { cursor: default; opacity: .6; }
.cg-maplist img { width: 120px; height: 44px; object-fit: cover; border-radius: 4px; background: #141830; }
.cg-mapname { display: grid; gap: 2px; min-width: 0; }
.cg-mapname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-mapname span { color: var(--faint); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-maplist .cg-more { display: block; text-align: center; color: var(--muted); padding: 10px; }
.cg-loading { color: var(--faint); padding: 12px; }
/* the bar: what's next, and its button */
.cg-status { color: var(--muted); }
@media (max-width: 960px) {
  .cg { grid-template-columns: minmax(0, 1fr); }
  .cg-lists { grid-template-columns: minmax(0, 1fr); height: auto; }
  .cg-authors { max-height: 160px; }
  .cg-maplist { max-height: 420px; }
  .cg-msgs { height: 220px; }
  .cg-start-grid { grid-template-columns: minmax(0, 1fr); }
}
/* (rooms: the start screen, the room's head, the worms, the bar under the chat) */
#v-custom .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); }
.cg-start-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.cg-start-card .cg-create { display: grid; gap: 14px; }
.cg-start-card .btn.primary { justify-self: start; padding: 0 22px; }
.cg-field { display: grid; gap: 6px; }
.cg-field > span { color: var(--faint); font-size: var(--fs-small); }
.cg-vis { display: grid; gap: 8px; }
.cg-vis button { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: inherit; cursor: pointer; }
.cg-vis button svg { grid-row: span 2; width: 20px; height: 20px; color: var(--muted); }
.cg-vis button span { color: var(--faint); font-size: var(--fs-small); }
.cg-vis button:hover { background: var(--raised); }
.cg-vis button[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.cg-vis button[aria-checked="true"] svg { color: var(--accent); }
.cg-vis.compact { grid-template-columns: 1fr 1fr; }
.cg-vis.compact button { display: block; text-align: center; }
.cg-rooms { display: grid; gap: 8px; }
.cg-rooms-empty { padding: 24px 0; text-align: center; margin: 0; color: var(--faint); }
.cg-room { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--raised); transition: border-color .15s ease; }
.cg-room:hover { border-color: var(--control); }
.cg-room.full { opacity: .7; }
.cg-room-pic { position: relative; flex: none; }
.cg-room-pic .avatar { width: 48px; height: 48px; border-radius: 50%; }
.cg-room-icon { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--raised); }
.cg-room-icon svg { width: 13px; height: 13px; }
.cg-room-icon.pub { color: var(--positive); }
.cg-room-icon.priv { color: var(--warning); }
.cg-room-who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cg-room-name { font-size: var(--fs-section); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-room-host { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-small); }
.cg-room-what { color: var(--faint); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-room-seats { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.cg-room-tag { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: var(--fs-small); }
.cg-room-tag svg { width: 14px; height: 14px; }
.cg-room-head { align-items: center; }
.cg-room-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cg-room-title h1 { overflow-wrap: anywhere; }
.cg-room-vis { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); }
.cg-room-vis svg { width: 20px; height: 20px; }
.cg-room-vis.pub { color: var(--positive); }
.cg-room-vis.priv { color: var(--warning); }
.cg-head-acts { display: flex; gap: 8px; flex: none; }
.cg-edit-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto; gap: 14px; align-items: end; margin-bottom: var(--gap); }
.cg-edit-acts { display: flex; gap: 8px; }
.cg-worms { display: grid; gap: 10px; justify-items: center; }
.cg-worms-pic { width: 100%; max-width: 260px; height: 92px; object-fit: contain; object-position: left center; image-rendering: auto; }
.cg-worms-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.cg-worms-row > span { font-weight: 600; }
.cg-msgs { list-style: none; margin: 0 0 10px; padding: 0 4px 0 0; height: 240px; overflow-y: auto; display: grid; align-content: start; gap: 6px; overflow-wrap: anywhere; }
.cg-bar { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.cg-bar .cg-status { font-size: var(--fs-small); }
.btn.cg-go { width: 100%; height: 44px; font-size: var(--fs-section); }
@media (max-width: 760px) {
  .cg-edit-form { grid-template-columns: minmax(0, 1fr); }
  .cg-room-head { flex-wrap: wrap; }
}

/* Kaos crates (custom.js renderCrates / openEditor) */
.cg-crates header { display: flex; align-items: center; gap: 10px; }
.cg-crates header .cg-hint { flex: 1; }
.cg-crates-sum { margin: 0 0 8px; }
.cg-crates-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.cg-crates-cols h3 { margin: 4px 0 6px; font-size: var(--fs-small); color: var(--faint); font-weight: 600; }
.cg-odds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.cg-odds li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.cg-super { font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 6px; background: var(--surface-2, rgba(127,127,127,.15)); color: var(--faint); }
.cg-crates-ed { display: grid; gap: 12px; }
.cg-kpresets, .cg-kgeneral { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.cg-kgeneral .cg-field { width: 150px; }
.cg-kpresets select { min-width: 160px; }
.cg-ktable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cg-ktable th, .cg-ktable td { padding: 3px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.cg-ktable .n { text-align: right; }
.cg-ktable tr.never td { color: var(--faint); }
.cg-ktable tfoot td { font-weight: 600; }
.cg-ktable tfoot td.off { color: var(--warn, #c77700); }
.cg-num { width: 84px; height: 30px; padding: 0 8px; }
.cg-kgeneral .cg-num { width: 100%; height: 38px; }
.cg-kacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cg-grow { flex: 1; }

/* the VS screen's others in a game of more than two (ranked.js splash) */
.vs-many { display: grid; gap: 8px; }
.vs-one { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; text-align: left; }
.vs-one .vs-pic { width: 44px; height: 44px; grid-row: span 2; }
.vs-one .vs-name { font-size: 18px; }
.vs-one .vs-rank { font-size: 13px; }

/* the League's header (its title, Find opponent, Play vs AI) over a game's view: the picture across
   its width, its own shape (cropped above and below only), washed out under the words */
.lg-title { min-height: 340px; padding: 22px 26px; border-radius: var(--radius-card); overflow: hidden;
  background: linear-gradient(90deg, rgba(14, 12, 18, 0.55), rgba(14, 12, 18, 0.2) 50%, rgba(14, 12, 18, 0.55)), url('icons/league-banner-259fa780.webp') center 40% / cover no-repeat; }
.lg-title h1, .lg-title .sub { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }

/* the team editor's folds (ranked.html pf-team): a look's line opens its tiles; the chevron turns */
.look-fold > summary { cursor: pointer; list-style: none; user-select: none; align-items: center; }
.look-fold > summary::-webkit-details-marker { display: none; }
.look-fold > summary .st-chev { margin-left: 4px; }
.look-fold:not(:has(.look-cur)) > summary .st-chev { margin-left: auto; }
.look-fold[open] .st-chev { transform: rotate(180deg); }
.tm-flag-search { width: 100%; max-width: 320px; margin-bottom: 12px; }

/* the team's name, labelled; its worms' names (8) in rows of four */
.team-view .tm-label { justify-self: center; margin-bottom: -10px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.look-fold > .worm-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .look-fold > .worm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the desktop app's downloads (#download): a card a system, its logo, the site's own button */
.dl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.dl-card { display: grid; gap: 14px; }
.dl-card.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dl-top { display: flex; align-items: center; gap: 12px; }
.dl-top h2 { font-size: var(--fs-section); font-weight: 600; }
.dl-top .sub { color: var(--muted); font-size: var(--fs-small); }
.dl-os { width: 36px; height: 36px; flex: none; fill: var(--text); }
.dl-mine { margin-left: auto; font-size: var(--fs-small); font-weight: 600; color: var(--accent); white-space: nowrap; }
.dl-btn { width: 100%; text-decoration: none; }
.dl-btn svg { width: 16px; height: 16px; fill: currentColor; }
.dl-btn[aria-disabled="true"] { background: var(--raised); color: var(--muted); pointer-events: none; }
.dl-steps summary { cursor: pointer; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.dl-steps ol { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-small); display: grid; gap: 4px; }
.dl-steps code { font-size: 11px; background: var(--raised); border-radius: 4px; padding: 1px 4px; word-break: break-all; }
.dl-note { margin-top: var(--gap); }
@media (max-width: 860px) { .dl-cards { grid-template-columns: minmax(0, 1fr); } }

/* the desktop app's sticker in the top bar, centred in the room between the search box and the
   right-hand items (in the bar's flow: it never sits over them): raised gold letters, a dark
   outline (text shadows all round: every browser), a 3D edge and a drop shadow, tilted a little */
.app-sticker { flex: none; margin: 0 auto; display: inline-block; transform: rotate(-3deg);
  font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 0.01em;
  white-space: nowrap; text-decoration: none; color: #ffd84a;
  text-shadow:
    -2px -2px 0 #2a1600, 2px -2px 0 #2a1600, -2px 2px 0 #2a1600, 2px 2px 0 #2a1600,
    0 -2px 0 #2a1600, 0 2px 0 #2a1600, -2px 0 0 #2a1600, 2px 0 0 #2a1600,
    0 3px 0 #a86b00, 0 4px 0 #2a1600, 0 5px 0 #2a1600,
    0 8px 10px rgba(0, 0, 0, 0.45);
  transition: transform var(--t-hover) ease; }
.app-sticker:hover { transform: translateY(-1px) rotate(-3deg) scale(1.06); }
.app-sticker:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
.app-sticker[hidden] { display: none; }
/* (shown: the room split evenly round it, the right-hand items' own auto margin off) */
@media (min-width: 1181px) { .app-sticker:not([hidden]) ~ .topbar-updates { margin-left: 0; } }
@media (max-width: 1180px) { .app-sticker { display: none; } }
/* the moment a translation loads (league/i18n.js) */
.i18n-wait body { visibility: hidden; }
.lang-picks .btn { padding: 6px 8px; }
.lang-picks img { display: block; width: 48px; height: 30px; image-rendering: pixelated; }