/* swurank.cz v5 – "rank".
   Deep void, a quiet grid of empty insignia squares behind the top of every page (rank.js) where rank plaques
   light up now and then, and a promotion wave runs on every route change. Glass panels float over it.
   Twin suns of Tatooine as the only warm light: sand for rank/points, ember as its sunset edge.
   Archivo Expanded Black for titles, Archivo for text, Plex Mono for every number.
   Event types keep the flat SWU aspect colours, the way they appear on the cards. */
:root {
  --bg: #06070b;
  --panel: rgb(16 19 27 / .78);
  --panel-solid: #10131b;
  --panel-2: rgb(30 35 48 / .7);
  --line: rgb(255 255 255 / .075);
  --line-strong: rgb(255 255 255 / .14);
  --text: #f3f1ec;
  --muted: #979fb0;
  --faint: #7d8696;
  --sand: #f2c879;
  --ember: #ef8f55;
  --sand-ink: #1a1306;
  --silver: #c9d3e6;
  --copper: #d79a6b;
  --ion: #a9c8ff;
  --link: var(--ion);
  --win: #74d197;
  --loss: #f08378;
  /* SWU aspects */
  --vigilance: #4a86d8;
  --command: #4fa36a;
  --aggression: #d4493f;
  --cunning: #e2b23c;
  --wide: "Archivo", system-ui, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; min-height: 100vh; }
/* film grain over everything, so the void reads as a material, not a hex value */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--link); }
::selection { background: var(--sand); color: var(--sand-ink); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 1; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }
:focus-visible { outline: 2px solid var(--ion); outline-offset: 2px; border-radius: 6px; }

/* ---------- rank grid backdrop ---------- */
.sky { position: absolute; inset: 0 0 auto; height: min(880px, 110vh); z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
.sky::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 40% at 78% 18%, rgb(242 200 121 / .09), transparent 70%),
    radial-gradient(50% 50% at 10% 0%, rgb(169 200 255 / .08), transparent 70%); }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky { -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%); }

/* view transitions: content settles in */
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.02); filter: blur(6px); } }

/* ---------- header: floating glass bar ---------- */
.top { position: sticky; top: 0; z-index: 20; padding: 12px 0 0; }
.top .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 58px; padding: 0 10px 0 18px; max-width: 1064px;
  background: rgb(12 14 20 / .62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 40px -10px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .06); }
@media (max-width: 1120px) { .top .bar { margin: 0 16px; } }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo:hover { color: var(--text); }
.wm { font: 900 16px/1 var(--wide); font-stretch: 125%; letter-spacing: .04em; text-transform: uppercase; }
.wm i { font: 500 14px/1 var(--mono); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--sand); margin-left: 1px; }
/* rank plaque: hovering the logo earns the missing square */
.logo .mark { width: 30px; height: 30px; flex: none; overflow: visible; }
.mark .plq { fill: var(--panel-solid); stroke: rgb(255 255 255 / .2); }
.mark .top-row rect { fill: var(--sand); }
.mark .low-row rect { fill: var(--ion); }
.mark .low-row .next { fill: transparent; stroke: rgb(169 200 255 / .55); stroke-width: 1.2; transition: fill .35s var(--ease), stroke .35s; }
.logo:hover .mark .next, .logo:focus-visible .mark .next { fill: var(--ion); stroke: var(--ion); }
.logo:hover .mark .top-row rect { animation: blink .5s steps(2) 1; }
.mark .top-row rect:nth-child(2) { animation-delay: .06s; } .mark .top-row rect:nth-child(3) { animation-delay: .12s; }
@keyframes blink { 50% { opacity: .35; } }
nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
nav a { position: relative; padding: 8px 13px; color: var(--muted); font-weight: 500; font-size: 14.5px; white-space: nowrap; border-radius: 999px; transition: color .15s, background .15s; }
nav a:hover { color: var(--text); background: rgb(255 255 255 / .05); }
nav a.on, nav a.on:hover { color: var(--sand-ink); background: var(--sand); font-weight: 600; box-shadow: 0 0 24px -4px rgb(242 200 121 / .55); }

/* ---------- type ---------- */
h1 { font: 900 clamp(34px, 6.4vw, 68px)/.95 var(--wide); font-stretch: 125%; letter-spacing: -.015em; text-transform: uppercase; margin: 64px 0 14px; text-wrap: balance; }
h1 .season, h2.sec .season, .sname { background: linear-gradient(100deg, var(--sand) 10%, var(--ember) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font: 800 15px/1.3 var(--wide); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; margin: 56px 0 16px; }
h2.sec { font: 900 clamp(26px, 4vw, 40px)/1 var(--wide); font-stretch: 125%; letter-spacing: -.01em; margin: 72px 0 12px; }
h3 { margin: 0; }
.meta { color: var(--muted); font-size: 14.5px; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.meta .sn { font: 800 13px/1.55 var(--wide); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; color: var(--sand); }
.meta b { color: var(--text); font-weight: 500; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lead { color: var(--muted); max-width: 640px; margin: 0 0 28px; font-size: 18px; line-height: 1.5; }
.muted { color: var(--muted); }
.tiny { font-size: 13px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--sand); flex: none; }

/* ---------- home hero ---------- */
.hero { position: relative; padding: clamp(48px, 9vh, 104px) 0 8px; container-type: inline-size; }
.live { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: rgb(12 14 20 / .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 12.5px var(--mono); color: var(--muted); letter-spacing: .02em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 0 rgb(116 209 151 / .6); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgb(116 209 151 / 0); } 100% { box-shadow: 0 0 0 0 rgb(116 209 151 / 0); } }
.hero-title { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hero-title .kicker { font: 500 clamp(12px, 1.5vw, 14px)/1.3 var(--mono); letter-spacing: .2em; color: var(--text); opacity: .75; }
.hero-title .sname { font-size: min(150px, calc(100cqi / (var(--n, 10) * 1.02))); line-height: .88; letter-spacing: -.035em; padding-bottom: .04em; filter: drop-shadow(0 0 40px rgb(239 143 85 / .18)); }
.hero-lead { max-width: 520px; margin: 24px 0 0; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; color: rgb(243 241 236 / .78); }
.hero-stats { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px 44px; margin: 36px 0 0; }
.hero-stats div { display: flex; flex-direction: column; gap: 6px; }
.hero-stats b { font: 500 clamp(28px, 3.6vw, 40px)/1 var(--mono); letter-spacing: -.03em; }
.hero-stats span { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.leaders { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin: 56px 0 0; }
.lc { --c: var(--silver); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px; min-height: 196px; padding: 20px 22px 18px; border-radius: 18px;
  background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .015) 55%), rgb(12 14 20 / .6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 30px 60px -30px rgb(0 0 0 / .8); transition: transform .35s var(--ease), border-color .25s; min-width: 0; }
.lc::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--c), transparent); opacity: .9; }
.lc::after { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); }
.lc:hover { color: inherit; transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.lc1 { --c: var(--sand); border-color: rgb(242 200 121 / .3); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 0 60px -20px rgb(242 200 121 / .45), 0 30px 60px -30px rgb(0 0 0 / .8); }
.lc3 { --c: var(--copper); }
.lc .lc-rank { position: absolute; right: 14px; bottom: -28px; z-index: -1; font: 700 150px/1 var(--mono); letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--c) 35%, transparent); }
.lc-tag { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.lc-name { margin-top: 10px; font: 800 22px/1.15 var(--wide); font-stretch: 112%; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc1 .lc-name { font-size: 27px; }
.lc-shop { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-foot { align-self: end; display: flex; align-items: baseline; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 13px; }
.lc-foot b { font: 500 30px/1 var(--mono); color: var(--text); letter-spacing: -.03em; }
.lc1 .lc-foot b { color: var(--sand); }
.lc-rec { margin-left: auto; font-size: 13px; }

/* rank insignia on the leader cards: 1st = full plaque, 2nd one square short, 3rd two */
.ins { width: 34px; height: 24px; flex: none; }
.ins .plq { fill: rgb(255 255 255 / .04); stroke: rgb(255 255 255 / .16); }
.ins rect.s { fill: var(--sand); } .ins rect.i { fill: var(--ion); }
.ins rect.x { fill: none; stroke: rgb(169 200 255 / .45); stroke-width: 1.2; }
.lc-tag { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* first paint choreography */
.hero.intro > * { animation: rise .9s var(--ease) both; }
.hero.intro > :nth-child(2) { animation-delay: .08s; } .hero.intro > :nth-child(3) { animation-delay: .16s; }
.hero.intro > :nth-child(4) { animation-delay: .22s; } .hero.intro > .leaders { animation: none; }
.hero.intro .lc { animation: rise .9s var(--ease) both; animation-delay: calc(.32s + var(--i) * .09s); }
.hero.intro .sname { animation: warp 1.1s var(--ease) both .05s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes warp { from { opacity: 0; letter-spacing: .25em; filter: blur(12px); } }

@media (max-width: 760px) {
  .hero { padding-top: 44px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .leaders { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
  .lc { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 14px; padding: 16px 18px; }
  .lc-tag, .lc-name, .lc-shop { grid-column: 1; }
  .lc-name { margin-top: 6px; font-size: 19px; } .lc1 .lc-name { font-size: 22px; }
  .lc-foot { grid-column: 2; grid-row: 1 / 4; flex-direction: column; align-items: flex-end; justify-content: center; margin: 0; gap: 4px; }
  .lc-foot b { font-size: 26px; }
  .lc-rec { margin: 0; }
  .lc .lc-rank { font-size: 110px; right: auto; left: 46%; bottom: -24px; }
}

/* ---------- surfaces: one glass recipe for every panel ---------- */
.tbl-wrap, .card, .tile, .result, .round, .side-card, .mecard, .partner, .map-wrap, .charts figure, .formula, .snippet, details.map, .stats, .tiersum, .steps, .evlist, .feed, .podium, .vs, .feat {
  background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .012)), var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
}

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .02); }
.tabs button { border: 0; background: none; font: 500 14px var(--sans); color: var(--muted); padding: 7px 14px; cursor: pointer; white-space: nowrap; border-radius: 999px; transition: color .15s, background .15s; }
.tabs button:hover { color: var(--text); background: rgb(255 255 255 / .05); }
.tabs button.on { color: var(--text); background: rgb(255 255 255 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .02); }
.seg button { border: 0; background: none; font: 600 13px var(--sans); letter-spacing: .02em; color: var(--muted); padding: 8px 18px; cursor: pointer; border-radius: 999px; transition: color .15s, background .2s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--text); color: var(--bg); }
select, input[type=search] { font: 400 15px var(--sans); color: var(--text); background: rgb(255 255 255 / .03); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 14px; min-width: 0; transition: border-color .15s, background .15s; }
select:hover, input[type=search]:hover { border-color: rgb(255 255 255 / .22); }
select:focus, input[type=search]:focus { outline: none; border-color: rgb(169 200 255 / .5); background: rgb(169 200 255 / .04); box-shadow: 0 0 0 4px rgb(169 200 255 / .08); }
select option { background: var(--panel-solid); }
input[type=search]::placeholder { color: var(--faint); }
input[type=search] { flex: 1 1 200px; }
.grow { flex: 1; }

/* ---------- season picker: one row of set logos ---------- */
#app { overflow-anchor: none; }
.season-row { flex-basis: 100%; flex-wrap: wrap; overflow: visible; border-radius: 18px; align-items: center; }
.season-row button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 5px 10px; }
.season-row img { display: block; height: 30px; width: auto; max-width: 92px; object-fit: contain; opacity: .6; transition: opacity .15s; }
.season-row button:hover img { opacity: .9; }
.season-row button.on img { opacity: 1; }
.season-row .set-txt { font: 800 11px/1.05 var(--wide); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; max-width: 9em; white-space: normal; text-align: left; }
.season-row .since { font-size: 10.5px; color: var(--faint); letter-spacing: .04em; }
#cohort { flex: 0 1 auto; }
@media (max-width: 520px) { .season-row { flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; } }

/* ---------- podium (closed seasons only) ---------- */
.podium { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--line); overflow: hidden; margin: 0 0 18px; }
.pod { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--panel-solid); min-width: 0; transition: background .2s; }
.pod:hover { background: #151924; color: inherit; }
.pod .place { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pod.p1 .place { color: var(--sand); } .pod.p2 .place { color: var(--silver); } .pod.p3 .place { color: var(--copper); }
.pod .who { font: 800 20px/1.25 var(--wide); font-stretch: 112%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; }
.pod.p1 .who { font-size: 24px; }
.pod .where { font-size: 13.5px; color: var(--muted); }
.pod .pp { font: 500 18px var(--mono); margin-top: 8px; }
.pod.p1 .pp { color: var(--sand); }

/* ---------- table ---------- */
.tbl-wrap { overflow-x: auto; padding: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font: 500 11px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .14em; padding-top: 16px; padding-bottom: 14px; background: rgb(255 255 255 / .015); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgb(255 255 255 / .035); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--sand); }
td.r, th.r { text-align: right; }
td.city-cell { font: 800 11.5px var(--wide); font-stretch: 125%; letter-spacing: .07em; text-transform: uppercase; }
td.name { font-weight: 600; white-space: normal; min-width: 140px; }
td.pos { width: 56px; color: var(--muted); font-family: var(--mono); }
tr.top1 td.pos, tr.top1 td.name { color: var(--sand); }
tr.top2 td.pos { color: var(--silver); } tr.top3 td.pos { color: var(--copper); }
tr.top1 td.pos, tr.top2 td.pos, tr.top3 td.pos { font-weight: 600; }
tr.top1 { background: linear-gradient(90deg, rgb(242 200 121 / .09), transparent 60%); }
tr.top1 td.name a:hover { color: var(--text); }
tr.top1 .pts { color: var(--sand); }
tr.dim td { color: var(--faint); }
tr.dim td.name { font-weight: 400; }
.pts { font-weight: 600; font-size: 15.5px; }
.W { color: var(--win); } .L { color: var(--loss); } .D { color: var(--muted); }
.more { display: block; width: 100%; margin-top: 12px; padding: 14px; border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); font: 500 15px var(--sans); border-radius: var(--r); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.more:hover { color: var(--text); border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .02); }

/* ---------- event types: SWU aspect pips ---------- */
.chip { --c: var(--faint); display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--text); white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); flex: none; }
.chip.pq { --c: var(--aggression); }
.chip.showdown { --c: var(--vigilance); }
.chip.prerelease { --c: var(--command); }
.chip.weekly { --c: var(--cunning); }
.chip.w-galactic { --c: var(--sand); } .chip.w-regional { --c: var(--aggression); } .chip.w-sq { --c: var(--vigilance); }
.chip.w-open { --c: var(--command); } .chip.w-pq { --c: #c2615a; } .chip.w-showdown { --c: #6f9ad8; }
.chip.casual { --c: #8a8f9c; color: var(--muted); }
.qp-ok { color: var(--sand); font-weight: 600; }

/* ---------- Ve světě: qualified for Worlds ---------- */
.wq-sec { margin-bottom: 8px; }
.wq-sec h2.sec { margin-top: 48px; }
.wq-lead { max-width: 640px; margin: 0 0 22px; } .wq-lead b { color: var(--text); }
.wq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.wq { --c: var(--sand); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; min-height: 200px; padding: 18px 20px 16px; border-radius: 18px; color: inherit;
  background: linear-gradient(160deg, rgb(242 200 121 / .13), rgb(242 200 121 / .02) 55%), rgb(12 14 20 / .7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgb(242 200 121 / .28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 0 50px -24px rgb(242 200 121 / .5), 0 30px 60px -30px rgb(0 0 0 / .8);
  transition: transform .35s var(--ease), border-color .25s, box-shadow .25s; animation: rise .8s var(--ease) both; animation-delay: calc(var(--i) * .07s); min-width: 0; }
.wq::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--sand), var(--ember), transparent); }
.wq::after { content: ""; position: absolute; z-index: -1; inset: -40% -60% auto auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(242 200 121 / .22), transparent 70%); }
.wq:hover { color: inherit; transform: translateY(-4px); border-color: rgb(242 200 121 / .6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 0 70px -18px rgb(242 200 121 / .7), 0 30px 60px -30px rgb(0 0 0 / .8); }
.wq1 { grid-column: span 2; background: linear-gradient(150deg, rgb(242 200 121 / .22), rgb(239 143 85 / .06) 50%, rgb(242 200 121 / .02)), rgb(12 14 20 / .7); }
.wq-tag { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.wq-name { margin-top: 12px; font: 800 20px/1.15 var(--wide); font-stretch: 108%; overflow-wrap: anywhere; }
.wq1 .wq-name { font-size: clamp(26px, 3.4vw, 34px); background: linear-gradient(100deg, var(--sand) 10%, var(--ember) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wq-how { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.wq-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; color: var(--muted); font: 500 12px var(--mono); letter-spacing: .14em; }
.wq-foot b { font: 500 34px/1 var(--mono); letter-spacing: -.03em; color: var(--sand); }
.wq1 .wq-foot b { font-size: 46px; }
.wq-chase { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.wq-row { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .012)), var(--panel); min-width: 0; }
.wq-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wq-rn { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-top .num { font-size: 13px; color: var(--muted); white-space: nowrap; } .wq-top .num b { color: var(--text); font-size: 15px; }
.wq-bar { position: relative; height: 6px; margin: 10px 0; border-radius: 999px; background: rgb(255 255 255 / .06); overflow: hidden; }
.wq-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--ion), var(--sand)); box-shadow: 0 0 12px rgb(242 200 121 / .5); }
.wq-rs { display: flex; flex-direction: column; gap: 4px; }
.wq-res { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.wq-res .chip { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wq-res b { color: var(--text); } .wq-plus { margin-left: auto; color: var(--sand) !important; }
.wq-rules { margin-top: 14px; } .wq-rules p { padding: 0 20px 16px; margin: 0; }
@media (max-width: 760px) {
  .wq-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wq { min-height: 0; padding: 14px 14px 12px; }
  .wq1 { grid-column: 1 / -1; }
  .wq-name { font-size: 15px; font-stretch: 100%; margin-top: 8px; } .wq1 .wq-name { font-stretch: 112%; }
  .wq-tag { font-size: 10px; letter-spacing: .1em; } .wq:not(.wq1) .ins { display: none; }
  .wq-how { font-size: 12px; }
  .wq-foot b { font-size: 26px; } .wq1 .wq-foot b { font-size: 36px; }
  .wq-chase { grid-template-columns: 1fr; }
}
.chip.casual::before { box-shadow: none; }
.chip.none { color: var(--faint); }
.chip.none::before { background: transparent; border: 1.5px solid var(--faint); width: 7px; height: 7px; box-shadow: none; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.card { padding: 20px; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s, transform .3s var(--ease), background .2s; }
.card h3 { margin: 2px 0 0; font: 800 19px/1.25 var(--wide); font-stretch: 108%; }
.card .city { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.card .nums { display: flex; gap: 18px; margin-top: 12px; font-size: 14px; color: var(--muted); align-items: baseline; }
.card .nums b { color: var(--text); font: 500 15px var(--mono); }
.card.add { border-style: dashed; justify-content: center; color: var(--muted); background: transparent; box-shadow: none; }
.card.add:hover { color: var(--text); border-color: var(--line-strong); }

/* ---------- shops by city ---------- */
.city-block { margin-top: 44px; }
.city-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 20px; margin-bottom: 14px; }
.city-head h2 { margin: 0; font: 900 26px/1 var(--wide); font-stretch: 125%; letter-spacing: -.005em; }
.city-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--muted); justify-content: flex-end; }
.city-stats b { color: var(--text); font: 500 16px var(--mono); }
.city-bar { grid-column: 1 / -1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.city-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--sand)); border-radius: 2px; box-shadow: 0 0 12px rgb(242 200 121 / .6); }
.city-block.quiet .city-head h2 { color: var(--muted); }
.card.shop:hover { border-color: var(--line-strong); color: inherit; transform: translateY(-2px); }
.card.quiet { opacity: .55; }
@media (max-width: 560px) { .city-head { grid-template-columns: 1fr; } .city-stats { justify-content: flex-start; } }

/* ---------- weekly play ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 12px 0 2px; }
.week span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 4px; border-radius: 7px; font: 500 10.5px var(--mono); color: var(--faint); background: rgb(255 255 255 / .025); }
.week span.today { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.week span.on { color: var(--sand-ink); background: var(--sand); font-weight: 600; }
.week span b { font: 500 9.5px var(--mono); letter-spacing: -.02em; }
.weekboard { margin-top: 8px; }
.weekboard h2 { margin-top: 40px; margin-bottom: 6px; }
.wb { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.wb-day { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-width: 0; background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .012)), var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.wb-day.today { border-color: rgb(242 200 121 / .45); box-shadow: 0 0 30px -14px rgb(242 200 121 / .6); }
.wb-name { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.wb-day.today .wb-name { color: var(--sand); }
.wb-day a { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
.wb-day a b { font-size: 12px; color: var(--sand); grid-row: span 2; }
.wb-day a span { font-weight: 600; font-size: 13.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.wb-day a small { font-size: 11.5px; color: var(--muted); }
@media (max-width: 980px) { .wb { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .wb { grid-template-columns: 1fr; gap: 6px; }
  .wb-day { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 14px; padding: 10px 12px; }
  .wb-name { flex-basis: 100%; }
  .wb-day a { border-top: 0; padding: 2px 0; }
}

/* ---------- static SEO pages (kde-hrat, mesto, obchod) ---------- */
.crumbs { margin: 44px 0 0; font: 500 11.5px var(--mono); letter-spacing: .08em; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.crumbs + h1 { margin-top: 18px; }
.seo .lead b { color: var(--text); }
.seo .lead a, .seo .prose a { color: var(--ion); }
.seo > .week { max-width: 460px; margin: 0 0 6px; }
a.btn { display: inline-block; }
a.btn:hover { color: var(--bg); }
a.btn.pin:hover { color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.foot .where a { white-space: nowrap; }

/* ---------- rules ---------- */
.prose { max-width: 740px; }
.prose li { margin-bottom: 8px; }
.prose code { font-family: var(--mono); font-size: 13.5px; background: rgb(255 255 255 / .06); padding: 2px 6px; border-radius: 5px; }
.formula { font-family: var(--mono); font-size: 15px; padding: 18px 20px; overflow-x: auto; border-left: 2px solid var(--sand); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; overflow: hidden; }
.steps li { counter-increment: s; position: relative; padding: 16px 20px 16px 60px; margin: 0; }
.steps li + li { border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 22px; top: 16px; font: 500 15px/1.55 var(--mono); color: var(--sand); }
.tiersum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); overflow: hidden; margin: 14px 0; }
.tiersum div { background: var(--panel-solid); padding: 16px 18px; }
.tiersum b { display: block; font: 500 28px/1.2 var(--mono); margin-top: 8px; letter-spacing: -.02em; }
details.map { margin-bottom: 8px; overflow: hidden; }
details.map summary { cursor: pointer; padding: 15px 20px; display: flex; align-items: center; gap: 12px; list-style: none; transition: background .15s; }
details.map summary:hover { background: rgb(255 255 255 / .03); }
details.map summary::-webkit-details-marker { display: none; }
details.map summary::after { content: "+"; margin-left: auto; color: var(--muted); font: 400 20px var(--mono); transition: transform .25s var(--ease); }
details.map[open] summary::after { transform: rotate(45deg); }
details.map table { border-top: 1px solid var(--line); }
details.map td { white-space: normal; font-size: 14.5px; }

.cohort-note { flex-basis: 100%; margin: 4px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 2px solid var(--command); background: rgb(79 163 106 / .06); border-radius: 0 12px 12px 0; font-size: 14px; color: var(--muted); }
.cohort-note b { color: var(--text); }
td.pos .sub { font-size: 11px; color: var(--faint); }


/* ---------- home strip ---------- */
.strip-wrap { margin-top: 64px; }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.strip-head h2 { margin: 0 0 14px; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; transition: border-color .2s, transform .3s var(--ease); }
.tile:hover { border-color: var(--line-strong); color: inherit; transform: translateY(-2px); }
.tile-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.tile-top b { font: 800 12px var(--wide); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; }
.tile-shop { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .ev-win { font-size: 15px; overflow: hidden; margin-top: 2px; }
.tile .you-res { font-size: 13px; }
@media (max-width: 760px) {
  .strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .tile { flex: 0 0 74%; scroll-snap-align: start; }
}

/* ---------- home / event lists ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.home h1 { margin-top: 32px; }
h2.day { margin: 32px 0 12px; font-size: 13px; }
h2.day .muted { font: 400 13px var(--mono); letter-spacing: 0; text-transform: none; margin-left: 8px; }
.evlist { display: grid; gap: 1px; background: var(--line); overflow: hidden; }
.ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "where win" "name win" "meta win"; gap: 4px 16px; padding: 15px 18px; background: var(--panel-solid); align-items: center; transition: background .15s; }
.ev:hover { background: #151924; color: inherit; }
.ev-where { grid-area: where; font-size: 13px; color: var(--muted); }
.ev-where b { color: var(--text); font: 800 12px var(--wide); font-stretch: 125%; text-transform: uppercase; letter-spacing: .07em; }
.ev-name { grid-area: name; font-weight: 600; line-height: 1.35; }
.ev-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13.5px; color: var(--muted); }
.ev-meta b { color: var(--text); font-weight: 500; }
.ev-win { grid-area: win; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sand); white-space: nowrap; }
.you-res { color: var(--sand); }
.side { position: sticky; top: 92px; display: grid; gap: 12px; margin-top: 32px; }
.side-card { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.side-card .eyebrow { margin: 0; }
.side-title { font-weight: 600; line-height: 1.35; }
.side-link { color: var(--ion); font-size: 14px; margin-top: 4px; }
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.mini li:last-child { border-bottom: 0; }
.mini li a { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini li .pos { width: 18px; color: var(--faint); font-size: 13px; }
.mini li:first-child .pos, .mini li:first-child a { color: var(--sand); }
.mini li.mine a { color: var(--sand); }
@media (max-width: 860px) {
  .home { grid-template-columns: 1fr; gap: 0; }
  .side { position: static; }
}
@media (max-width: 520px) {
  .ev { grid-template-columns: 1fr; grid-template-areas: "where" "name" "meta" "win"; }
}

/* ---------- me / movement / feed ---------- */
.mv { font: 500 11.5px var(--mono); margin-left: 6px; white-space: nowrap; }
.mv.up { color: var(--win); } .mv.down { color: var(--loss); } .mv.new { color: var(--faint); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.you { font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--sand-ink); background: var(--sand); border-radius: 999px; padding: 3px 7px; margin-left: 6px; vertical-align: 2px; }
tr.mine { background: linear-gradient(90deg, rgb(242 200 121 / .12), rgb(242 200 121 / .03)); }
tr.mine td:first-child { box-shadow: inset 2px 0 0 var(--sand); }
.finder { margin: 40px 0 0; padding: 20px 22px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: rgb(12 14 20 / .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.finder label { display: block; font: 800 15px var(--wide); font-stretch: 112%; margin-bottom: 12px; }
.finder-row { display: flex; gap: 8px; flex-wrap: wrap; }
.finder-row input { flex: 1 1 220px; font: 400 15px var(--sans); color: var(--text); background: rgb(255 255 255 / .03); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 14px; }
.finder-row input:focus { outline: none; border-color: rgb(169 200 255 / .5); box-shadow: 0 0 0 4px rgb(169 200 255 / .08); }
.mecard { position: relative; overflow: hidden; margin: 40px 0 0; padding: 20px 22px; display: grid; gap: 16px; }
.mecard, .vs { border-color: rgb(242 200 121 / .22); }
.mecard::before, .vs::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, var(--sand), var(--ember)); }
.me-who { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.me-who .eyebrow { margin: 0; flex-basis: 100%; }
.me-name { font: 800 22px var(--wide); font-stretch: 112%; }
.me-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 24px; }
.me-stats b { display: block; font: 500 28px/1.15 var(--mono); letter-spacing: -.03em; }
.me-stats div:first-child b { color: var(--sand); }
.me-stats span { font-size: 13px; color: var(--muted); }
.mecard .linkish { color: var(--faint); font-size: 13px; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); overflow: hidden; }
.feed-item { display: flex; flex-direction: column; gap: 6px; padding: 15px 18px; background: var(--panel-solid); }
.feed-item:hover { background: #151924; color: inherit; }
.feed-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; align-items: center; }
.feed-name { font-weight: 600; line-height: 1.35; }
.feed-win { font-size: 14px; color: var(--muted); }
.feed-win b { color: var(--text); }

/* ---------- global search ---------- */
.search-btn { display: inline-flex; align-items: center; gap: 8px; background: rgb(255 255 255 / .04); border: 1px solid var(--line-strong); color: var(--muted); border-radius: 999px; padding: 8px 12px 8px 14px; font: 500 14px var(--sans); cursor: pointer; flex: none; transition: color .15s, border-color .15s; }
.search-btn:hover { color: var(--text); border-color: rgb(255 255 255 / .25); }
.search-btn kbd { font: 500 11px var(--mono); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px; }
.bar-right { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; justify-content: flex-end; }
dialog.search { width: min(600px, calc(100vw - 32px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 20px; background: rgb(14 16 23 / .86); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: var(--text);
  box-shadow: 0 40px 120px -20px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .08); }
dialog.search[open] { animation: pop .28s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
dialog.search::backdrop { background: rgb(3 4 8 / .6); backdrop-filter: blur(4px); }
dialog.search input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: 400 20px var(--sans); padding: 20px 22px; outline: none; border-radius: 0; }
dialog.search input:focus { box-shadow: none; background: transparent; border-color: var(--line); }
dialog.search ul { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow-y: auto; }
dialog.search li a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; }
dialog.search li a.sel, dialog.search li a:hover { background: rgb(255 255 255 / .07); color: var(--text); }
dialog.search li a.sel { box-shadow: inset 2px 0 0 var(--sand); }
dialog.search li .muted { font: 400 12.5px var(--mono); }
dialog.search .empty { padding: 14px 18px; color: var(--muted); }

/* ---------- event page ---------- */
.h1-event { text-transform: none; font-stretch: 108%; font-size: clamp(30px, 5vw, 52px); letter-spacing: -.02em; line-height: 1.02; }
.rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.round { padding: 14px 16px; }
.round h3 { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.pair a { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair a:last-child { text-align: right; }
.pair a.won { color: var(--text); font-weight: 600; }
.pair .score { color: var(--faint); font-size: 13px; }
.pair.mine { background: rgb(242 200 121 / .08); margin: 0 -16px; padding: 7px 16px; }

/* ---------- player page ---------- */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.ph h1 { margin-bottom: 8px; overflow-wrap: anywhere; }
.ph .meta { margin-bottom: 0; }
.vs { position: relative; overflow: hidden; margin: 24px 0 0; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.vs .eyebrow { margin: 0; flex-basis: 100%; }
.vs b { font: 500 30px var(--mono); letter-spacing: -.03em; }
.trophies { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.trophies div { display: flex; align-items: baseline; gap: 8px; padding: 9px 16px; border: 1px solid rgb(242 200 121 / .3); border-radius: 999px; background: linear-gradient(180deg, rgb(242 200 121 / .08), transparent); box-shadow: 0 0 24px -12px rgb(242 200 121 / .6); }
.trophies b { font: 600 16px var(--mono); color: var(--sand); }
.trophies span { font-size: 14px; }
.show-sm { display: none; }
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.feat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; transition: border-color .2s, transform .3s var(--ease); }
.feat:hover { border-color: var(--line-strong); color: inherit; transform: translateY(-2px); }
.feat.gold { border-color: rgb(242 200 121 / .4); background: linear-gradient(160deg, rgb(242 200 121 / .1), transparent 60%), var(--panel); box-shadow: inset 0 1px 0 rgb(242 200 121 / .2), 0 0 40px -18px rgb(242 200 121 / .55); }
.feat-place { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.feat.gold .feat-place { color: var(--sand); }
.feat-name { font-weight: 600; line-height: 1.35; }
td .sub { font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* ---------- leaderboard modes, charts ---------- */
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; cursor: pointer; }
.check input { accent-color: var(--sand); width: 16px; height: 16px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); overflow: hidden; margin: 22px 0 0; }
.stat { background: var(--panel-solid); padding: 16px 18px; }
.stat b { display: block; font: 500 28px/1.15 var(--mono); letter-spacing: -.03em; }
.stat span { font-size: 13px; color: var(--muted); }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.charts figure { margin: 0; padding: 16px 16px 10px; }
.charts figcaption { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--faint); font: 400 11px var(--mono); }
.chart .line { fill: none; stroke: var(--sand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(242 200 121 / .45)); }
.chart .xhair { stroke: var(--line-strong); stroke-width: 1; }
.chart .dot { fill: var(--sand); stroke: var(--bg); stroke-width: 2; }
.chart .tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: rgb(20 23 32 / .92); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.4; white-space: nowrap; pointer-events: none; color: var(--muted); }
.chart .tip b { color: var(--text); }

/* ---------- store page & widget snippet ---------- */
.snippet { font: 400 13px/1.5 var(--mono); padding: 16px 18px; white-space: pre-wrap; word-break: break-all; color: var(--muted); }
.btn { font: 600 14px var(--sans); background: var(--text); color: var(--bg); border: 1px solid var(--text); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgb(243 241 236 / .4); }
.btn.pin { margin: 0 0 6px; background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn.pin.on { border-color: var(--sand); color: var(--sand); }
.widget-preview { border: 1px solid var(--line); border-radius: var(--r); width: 100%; max-width: 380px; height: 520px; background: var(--bg); }

/* ---------- showdown & PQ results ---------- */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.result { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; }
.result:hover { border-color: var(--line-strong); }
.r-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; }
.r-name { font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.r-win { display: flex; align-items: center; gap: 10px; font: 800 21px var(--wide); font-stretch: 108%; color: var(--sand); }
.r-win a:hover { color: var(--text); }
.r-cut { font-size: 14px; color: var(--muted); line-height: 1.65; }
.r-cut a { color: var(--text); }
.r-cut .lab { display: inline-block; min-width: 72px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.place-tag { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--sand); border: 1px solid rgb(242 200 121 / .4); border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }

/* ---------- map ---------- */
.map-wrap { padding: 14px; margin-bottom: 8px; }
.map { display: block; width: 100%; height: auto; overflow: visible; }
.kraj { fill: color-mix(in srgb, var(--vigilance) calc(var(--heat) * 100%), #161a24); stroke: var(--bg); stroke-width: 2; stroke-linejoin: round; transition: fill .2s; }
.map.kraje .kraj[data-area]:not([data-area=""]) { cursor: pointer; }
.map.kraje .kraj[data-area]:not([data-area=""]):hover { fill: color-mix(in srgb, var(--vigilance) calc(var(--heat) * 100% + 12%), #161a24); }
.kraj.sel { fill: color-mix(in srgb, var(--sand) 35%, #161a24); }
.city.on { cursor: pointer; }
.city .halo { fill: transparent; }
.city .dot { fill: var(--sand); stroke: var(--bg); stroke-width: 3; filter: drop-shadow(0 0 5px rgb(242 200 121 / .7)); }
.city:not(.on) .dot { fill: var(--faint); filter: none; }
.city.on:hover .dot, .city.sel .dot { fill: #fff; }
.cname { font: 800 13px var(--wide); font-stretch: 125%; letter-spacing: .06em; fill: var(--muted); paint-order: stroke; stroke: #161a24; stroke-width: 5px; stroke-linejoin: round; }
.king { font: 700 17px var(--sans); fill: var(--text); paint-order: stroke; stroke: #161a24; stroke-width: 5px; stroke-linejoin: round; }
.klabel { cursor: pointer; }
.klabel:hover .king, .klabel.sel .king { fill: var(--sand); }
.city:focus, .klabel:focus { outline: none; }
.city:focus-visible .dot { stroke: var(--ion); }
.kings .card.sel { border-color: var(--sand); box-shadow: 0 0 30px -12px rgb(242 200 121 / .6); }
.throne { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 6px; font: 800 20px var(--wide); font-stretch: 108%; }
.throne a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.throne .num { color: var(--sand); font-size: 15px; font-weight: 500; }
.crown { width: 18px; height: 12px; fill: var(--sand); flex: none; align-self: center; filter: drop-shadow(0 0 4px rgb(242 200 121 / .6)); }
.court { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.court li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; color: var(--muted); }
.court li .num:first-child { width: 22px; font-size: 13px; color: var(--faint); }
.court li a { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkish { margin-left: auto; background: none; border: 0; padding: 0; color: var(--ion); font: 500 14px var(--sans); cursor: pointer; }

/* ---------- footer / partners ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; margin-top: 36px; color: var(--muted); font-size: 15px; }
.foot { margin-top: 120px; padding-top: 40px; padding-bottom: 64px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.foot::before { content: ""; position: absolute; top: -1px; left: 16px; width: 120px; height: 1px; background: linear-gradient(90deg, var(--sand), transparent); }
@media (min-width: 700px) { .foot::before { left: 28px; } }
.foot p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.foot p a:hover { text-decoration-color: currentColor; }
.partners { margin-bottom: 36px; }
.partner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.partner { display: flex; align-items: center; gap: 14px; padding: 16px; color: var(--text); transition: border-color .2s, transform .3s var(--ease); }
a.partner:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-2px); }
.partner b { display: block; font: 800 16px var(--wide); font-stretch: 108%; }
.partner small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.partner small a { text-decoration: underline; text-underline-offset: 2px; }
.partner-logo { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #000; }
.partner-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-logo.light-bg { background: #fff; padding: 5px; }
.partner-logo.light-bg img { object-fit: contain; }

@media (max-width: 1020px) {
  .top { padding-top: 10px; }
  .top .bar { height: auto; padding: 10px 8px 8px 16px; flex-wrap: wrap; border-radius: 22px; gap: 6px 12px; }
  .bar-right { display: contents; }
  nav { order: 3; flex-basis: 100%; margin-left: -8px; flex-wrap: wrap; overflow: visible; row-gap: 2px; }
}
@media (max-width: 680px) {
  .top .bar { margin: 0 8px; padding: 8px 8px 6px 14px; }
  nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -8px 0 -14px; padding: 0 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); }
  nav a { padding: 6px 12px; font-size: 14px; }
  .live { font-size: 12px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hide-sm { display: none; }
  .show-sm { display: inline !important; }
  .search-btn { padding: 8px 10px; }
  th, td { padding: 11px 10px; }
  h1 { margin-top: 44px; }
  .podium { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hide-xs { display: none; }
  h1 { font-size: 30px; }
  td.name { min-width: 0; }
  th, td { padding: 10px 8px; }
  td.pos { width: 34px; }
  .tabs button { padding: 7px 11px; font-size: 13.5px; }
  .seg button { padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- from the data/scoring session ---------- */
.abroad { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ion); border: 1px solid rgb(169 200 255 / .3); border-radius: 999px; padding: 2px 7px; margin-left: 4px; }