/* Country flags: Windows has no flag emoji (it prints "PL", "US"), so the boards draw them with the
   Twemoji Country Flags font (only the regional-indicator letters, 78 KB, loaded on first use).
   Flag art: Twemoji, CC BY 4.0 (credited in the board footer and on /privacy#leaderboards). */
@font-face { font-family:"Twemoji Country Flags"; src:url("/assets/fonts/twemoji-country-flags.woff2") format("woff2"); unicode-range:U+1F1E6-1F1FF; font-display:swap; }
:root { --flag-font:"Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
/* "Where was the battle?" map game. Builds on play.css (load that first). */
.play.geo { padding:28px 24px 26px; }
.geo-q { text-align:center; margin:.4rem 0 1rem; }
.geo-when { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); }
.geo-name { font-family:var(--font-display); font-size:clamp(1.45rem,4.8vw,2.1rem); color:#fff6e2; line-height:1.15; margin:.3rem 0 .35rem; }
.geo-place { color:var(--muted); font-size:.95rem; }
.geo-mapwrap { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--gold-line); box-shadow:0 24px 50px -30px #000; background:#14222c; }
.geo-map { display:block; width:100%; height:min(58vh,520px); min-height:300px; touch-action:none; cursor:crosshair; outline:none; }
.geo-map.dragging { cursor:grabbing; }
.geo-map:focus-visible { box-shadow:inset 0 0 0 2px var(--gold); }
.geo-sum .geo-map { height:min(42vh,340px); min-height:220px; cursor:default; touch-action:auto; }
.geo-zoom { position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:6px; }
.geo-zoom button { width:44px; height:44px; border-radius:10px; border:1px solid var(--gold-line); background:rgba(10,8,6,.78); color:var(--gold-bright); font-size:1.25rem; line-height:1; cursor:pointer; display:grid; place-items:center; }
.geo-zoom button:hover { border-color:var(--gold); }
.geo-zoom svg { width:18px; height:18px; fill:currentColor; }
/* keyboard aim: Enter drops the pin where the cross is (the centre); shown only while the map has keyboard focus */
.geo-cross { position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; pointer-events:none; opacity:0; transition:opacity .15s; }
.geo-cross::before, .geo-cross::after { content:""; position:absolute; background:var(--gold-bright); box-shadow:0 0 0 1px rgba(10,8,6,.85); }
.geo-cross::before { left:12px; top:0; width:2px; height:26px; }
.geo-cross::after { top:12px; left:0; height:2px; width:26px; }
.geo-map:focus-visible ~ .geo-cross { opacity:.95; }
/* "click the map to zoom": a wheel over an idle map scrolls the page instead */
.geo-wheel { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:.45rem .8rem; border-radius:10px; background:rgba(10,8,6,.86); color:var(--text); font-size:.85rem; pointer-events:none; opacity:0; transition:opacity .2s; white-space:normal; text-align:center; width:max-content; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; }
.geo-wheel.show { opacity:1; }
.geo-name:focus { outline:none; }
.geo-credit { position:absolute; left:8px; bottom:6px; font-size:10px; color:rgba(232,226,212,.55); pointer-events:none; }
.geo-hintrow { display:flex; justify-content:center; margin:.8rem 0 .2rem; min-height:2.4rem; align-items:center; }
.geo-hintrow .pl-hintnote { color:var(--gold-bright); font-size:.95rem; text-align:center; }
#geo-confirm[disabled] { opacity:.55; cursor:not-allowed; }

/* slide-out story panel */
.geo-panel { margin:1.1rem auto 0; max-width:640px; border:1px solid var(--gold-line); border-radius:18px; overflow:hidden; background:linear-gradient(180deg,var(--card-2),var(--card));
  transform:translateY(28px); opacity:0; transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
.geo-panel.open { transform:none; opacity:1; }
.geo-res { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--gold-line); }
.geo-res .geo-resnext { margin-left:auto; padding:.7rem 1.3rem; min-height:44px; }
.geo-dist { font-family:var(--font-display); font-size:1.15rem; color:var(--text); min-width:0; overflow-wrap:break-word; }
.geo-pts { font-family:var(--font-mono); font-size:1rem; font-weight:700; }
.geo-res.ok .geo-pts { color:var(--ok); } .geo-res.mid .geo-pts { color:var(--mid); } .geo-res.no .geo-pts { color:var(--no); }
/* map rounds: one colour scale with the marks (common.js geoTier/geoBand): gold, bronze, sepia, iron */
.geo-res.geo-t4 .geo-pts, .pl-recap li.geo-t4 b { color:var(--ok); }
.geo-res.geo-t3 .geo-pts, .pl-recap li.geo-t3 b { color:var(--mid); }
.geo-res.geo-t2 .geo-pts, .pl-recap li.geo-t2 b { color:var(--sepia); }
.geo-res.geo-t1 .geo-pts, .pl-recap li.geo-t1 b { color:var(--muted); }
.geo-fig { margin:0; aspect-ratio:16/8; overflow:hidden; background:#0d0d0f; }
.geo-fig img { width:100%; height:100%; object-fit:cover; display:block; }
.geo-body { padding:1rem 1.15rem 1.15rem; min-width:0; overflow-wrap:break-word; }
.geo-h { font-family:var(--font-display); font-size:1.35rem; color:var(--text); margin:.25rem 0 .5rem; }
.geo-desc { color:var(--muted); line-height:1.65; margin:0 0 .9rem; }
.geo-sh { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.geo-tw { max-width:100%; }
.geo-stats table { width:100%; border-collapse:collapse; font-size:.88rem; }
.geo-stats th, .geo-stats td { padding:.45rem .55rem; border-bottom:1px solid var(--gold-line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.geo-stats thead th { font-weight:600; color:var(--gold-bright); font-size:.78rem; }
.geo-stats th:first-child { width:28%; color:var(--text); }
.geo-stats td { line-height:1.45; }
.geo-stats tbody th { font-weight:500; }
.geo-body .pl-fbrow { justify-content:space-between; margin-top:1rem; }
.geo-sum { margin:1rem auto 1.1rem; max-width:640px; }
.pl-recap .geo-rd { margin-left:auto; color:var(--muted); font-family:var(--font-mono); font-size:.78rem; }
.pl-recap li a { flex:1; min-width:0; }
.pl-recap li { min-width:0; }
@media (max-width:560px) {
  .play.geo { padding:22px 12px 20px; }
  .geo-map { height:min(56vh,460px); }
  .geo-body .pl-fbrow { flex-direction:column-reverse; align-items:stretch; text-align:center; }
}
/* 200% zoom on a phone (188px): give the result card and its stats table the width */
@media (max-width:300px) {
  .play.geo, .play.hl { padding:18px 6px 16px; }
  .geo-body { padding:.85rem .7rem 1rem; }
  .geo-res { padding:.75rem .7rem; }
  .geo-stats th, .geo-stats td { padding:.4rem .3rem; }
  .pl-recap li { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { .geo-panel { transition:none; transform:none; } }
.geo-h a { color:inherit; text-decoration:none; }
.geo-h a:hover { color:var(--gold-bright); }
.geo-desc a.xlink { color:var(--gold-bright); text-decoration:underline; text-decoration-color:rgba(230,201,119,.4); text-underline-offset:2px; }
.geo-fig a { display:block; width:100%; height:100%; }

body.dx .dx-col > #play-geo { order: 0; }
#play-geo { margin-top: 1.4rem; }
/* friend challenge + nicknames */
.pl-nick { text-align:center; color:var(--muted); font-size:.95rem; margin:.9rem 0 .2rem; }
.pl-nick b { color:var(--gold-bright); font-weight:600; }
.pl-linkbtn { background:none; border:0; padding:.2rem .3rem; min-height:44px; color:var(--gold); font:inherit; font-size:.85rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.pl-linkbtn:hover { color:var(--gold-bright); }
.pl-fresh { margin-top:.7rem; } .pl-fresh a { color:var(--muted); font-size:.9rem; } .pl-fresh a:hover { color:var(--gold); }
.geo-rival { font-family:var(--font-mono); font-size:.8rem; color:var(--muted); }
.pl-recap .geo-rv { font-family:var(--font-mono); font-size:.78rem; color:var(--muted); min-width:3.2em; text-align:right; }
.pl-duel { max-width:460px; margin:0 auto 1.4rem; border:1px solid var(--gold-line); border-radius:16px; padding:1rem 1.1rem; text-align:center; background:rgba(212,175,95,.06); }
.pl-duel-row { display:flex; align-items:center; justify-content:center; gap:1rem; }
.pl-duel-row span { display:flex; flex-direction:column; align-items:center; min-width:0; flex:1; }
.pl-duel-row i { font-style:normal; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.25; overflow-wrap:anywhere; max-width:100%; }
.pl-duel-row b { font-family:var(--font-display); font-size:1.9rem; color:var(--text); }
.pl-duel-row em { font-style:normal; font-size:1.6rem; color:var(--gold); }
.pl-duel-v { margin-top:.4rem; font-family:var(--font-display); font-size:1.15rem; }
.pl-duel.win .pl-duel-v { color:var(--ok); } .pl-duel.lose .pl-duel-v { color:var(--no); } .pl-duel.draw .pl-duel-v { color:var(--mid); }
/* daily leaderboard (shared with the app) */
.geo-lb { max-width:520px; margin:1.4rem auto .4rem; border:1px solid var(--gold-line); border-radius:16px; padding:1rem 1.1rem; background:rgba(0,0,0,.18); text-align:left; }
.geo-lb-h { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.geo-lb-h span { color:var(--muted); }
.geo-lb-me { font-family:var(--font-display); font-size:1.15rem; color:var(--text); margin:.35rem 0 .2rem; }
.geo-lb-note, .geo-lb-foot { color:var(--muted); font-size:.85rem; margin:.3rem 0; }
.geo-lb-foot { margin-top:.7rem; font-size:.78rem; }
.geo-lb-tabs { display:flex; gap:.4rem; margin:.7rem 0 .5rem; }
.geo-lb-tabs button { flex:1; min-height:44px; background:none; border:1px solid var(--gold-line); border-radius:999px; padding:.4rem .6rem; color:var(--muted); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.geo-lb-tabs button[aria-selected="true"] { color:var(--on-gold); background:var(--gold); border-color:var(--gold); }
.geo-lb-list { list-style:none; margin:0; padding:0; counter-reset:lb; }
.geo-lb-list li { counter-increment:lb; display:flex; align-items:baseline; gap:.6rem; padding:.42rem 0; border-bottom:1px solid var(--gold-line); font-size:.95rem; }
.geo-lb-list li::before { content:counter(lb); font-family:var(--font-mono); font-size:.78rem; color:var(--gold); min-width:1.4em; }
.geo-lb-list li.me { color:var(--gold-bright); }
.geo-lb-n { flex:1; min-width:0; line-height:1.3; overflow-wrap:anywhere; }
.geo-lb-n em { font-style:normal; font-size:.8rem; color:var(--gold); }
.geo-lb-d { font-family:var(--font-mono); font-size:.75rem; color:var(--muted); }
.geo-lb-list b { font-family:var(--font-mono); font-size:.9rem; min-width:3.4em; text-align:right; }

/* narrow phones: the Battle of the Day board row lets the clue marks drop under the name */
@media (max-width:359px) { #botd-lb .geo-lb-list li { flex-wrap:wrap; } #botd-lb .geo-lb-d { order:3; flex-basis:100%; } }
.geo-lb-sub { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:.9rem 0 .2rem; }
.geo-lb-sub:first-child, .geo-lb-tabs + .geo-lb-sub { margin-top:.2rem; }
/* boards v2: scope chips, flags, the pirate note (common.js lbBoard) */
.geo-lb-scopes { display:flex; flex-wrap:wrap; gap:.35rem; margin:.1rem 0 .6rem; }
.geo-lb-scopes button, .geo-lb-scopes select { min-height:36px; background:none; border:1px solid var(--gold-line); border-radius:999px; padding:.25rem .7rem; color:var(--muted); font:inherit; font-size:.8rem; cursor:pointer; }
.geo-lb-scopes select { background:var(--bg, #0b0d10); color:var(--text); max-width:12rem; }
.geo-lb-scopes button[aria-pressed="true"] { color:var(--text); border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.geo-lb-f { font-family:var(--flag-font); font-size:1.05rem; line-height:1; min-width:1.3em; text-align:center; }
.geo-lb-few li::before { content:"\2022"; }
.geo-lb-you { color:var(--text); font-size:.9rem; margin:.2rem 0 .1rem; }
.geo-lb-why { margin:.8rem 0 .2rem; border:1px dashed var(--gold-line); border-radius:12px; padding:.5rem .8rem; }
.geo-lb-why summary { cursor:pointer; color:var(--gold); font-size:.85rem; min-height:32px; display:flex; align-items:center; gap:.35rem; }
.geo-lb-why p { color:var(--muted); font-size:.85rem; line-height:1.55; margin:.4rem 0 .2rem; }
/* daily challenge card on the start screen (geo.js d5Card) */
.geo-d5 { max-width:520px; margin:1.6rem auto .4rem; border:1px solid var(--gold-line); border-radius:16px; padding:1rem 1.1rem 1.1rem; background:linear-gradient(180deg, rgba(201,162,74,.08), rgba(0,0,0,.18)); text-align:center; }
.geo-d5-h { font-family:var(--font-display); font-size:1.25rem; color:var(--text); margin:.3rem 0 .2rem; }
.geo-d5 .pl-sub { margin:.2rem 0 .6rem; }
.geo-d5-msg { color:var(--muted); font-size:.85rem; min-height:1.1em; margin:.4rem 0 0; }
/* ===== leaderboard (common.js lbHtml, redesign 2026-10-23) ===== */
.geo-lb { max-width:560px; padding:1.05rem 1rem 1rem; background:linear-gradient(180deg, var(--card-2, #14110a), var(--card, #100e08)); box-shadow:0 18px 48px rgba(0,0,0,.45); }
.lb-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem .6rem; margin-bottom:.75rem; }
.lb-retry { text-align:center; margin:-.2rem 0 .8rem; }
.lb-kick { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.lb-kick span { color:var(--muted); }
.lb-count { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--muted); border:1px solid var(--gold-line); border-radius:999px; padding:.18rem .6rem; white-space:nowrap; }
/* standing card */
.lb-hero { display:flex; align-items:center; gap:.9rem; padding:.85rem .9rem; border-radius:14px; border:1px solid var(--gold-line); background:radial-gradient(120% 140% at 0% 0%, rgba(201,168,76,.16), rgba(201,168,76,.03) 60%, transparent); margin-bottom:.85rem; }
.lb-hero-sm, .lb-hero-wait { padding:.7rem .9rem; }
.lb-hero-rk { display:flex; flex-direction:column; align-items:center; min-width:4.4rem; padding-right:.85rem; border-right:1px solid var(--gold-line); line-height:1; }
.lb-hero-rk small { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.lb-hero-rk b { font-family:var(--font-display); font-size:2.5rem; color:var(--gold-bright); margin:.2rem 0 .15rem; font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(230,201,119,.35); }
.lb-hero-rk b::before { content:"#"; font-size:.55em; vertical-align:.55em; margin-right:.05em; color:var(--gold); }
.lb-hero-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:.28rem; }
.lb-hero-n { display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-size:1.05rem; color:var(--text); overflow-wrap:anywhere; }
.lb-hero-from, .lb-hero-l { font-size:.82rem; color:var(--muted); }
.lb-hero-gap { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--gold-bright); }
.lb-pct { position:relative; height:6px; border-radius:999px; background:rgba(201,168,76,.14); overflow:hidden; }
.lb-pct i { position:absolute; inset:0 auto 0 0; border-radius:999px; background:linear-gradient(90deg, var(--gold-deep, #9c8236), var(--gold-bright)); transition:width .8s var(--ease, ease); }
/* period: one segmented control */
.lb-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px; padding:3px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid var(--gold-line); margin-bottom:.6rem; }
.lb-seg button { min-height:44px; border:0; border-radius:999px; background:none; color:var(--muted); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.lb-seg button[aria-selected="true"] { background:var(--gold); color:var(--on-gold, #14110a); font-weight:600; box-shadow:0 2px 10px rgba(201,168,76,.35); }
.lb-seg button:focus-visible, .lb-chip:focus-visible, .lb-chip-sel:focus-within { outline:2px solid var(--gold-bright); outline-offset:2px; }
/* scope: one scrolling row of chips */
.lb-chips { display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; margin:0 0 .7rem; padding:.1rem .1rem .25rem; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 1.8rem), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 1.8rem), transparent); }
.lb-chips::-webkit-scrollbar { display:none; }
.lb-chip { flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:.25rem .8rem; border:1px solid var(--gold-line); border-radius:999px; background:rgba(0,0,0,.2); color:var(--muted); font:inherit; font-size:.82rem; white-space:nowrap; cursor:pointer; }
.lb-chip[aria-pressed="true"], .lb-chip-sel.on { color:var(--text); border-color:var(--gold); background:rgba(201,168,76,.14); }
.lb-chip-sel select { appearance:none; -webkit-appearance:none; background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; max-width:11rem; min-height:44px; }
.lb-chip-sel select option { background:var(--bg, #080808); color:var(--text); }
/* avatars */
.lb-av { position:relative; flex:0 0 auto; display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--av, #7f6a3a); color:#fff6df; font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.02em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.lb-av-lg { width:3.1rem; height:3.1rem; font-size:.95rem; }
.lb-av-pir { background:#2a2620; font-size:1rem; }
.lb-av-lg.lb-av-pir { font-size:1.4rem; }
/* a country avatar: the flag fills the circle, cropped at the sides */
.lb-av-c { overflow:hidden; background:#1a1712; }
/* the glyph is wider than the circle; the flag art sits at 39% of the line box, so centre on that */
.lb-av-c i { position:absolute; left:50%; top:50%; transform:translate(-50%, -39%); font-style:normal; font-family:var(--flag-font); font-size:3.6rem; line-height:1; }
.lb-av-lg.lb-av-c i { font-size:5.2rem; }
.lb-pod-1 .lb-av-lg.lb-av-c i { font-size:6rem; }
/* painted (common.js paintFlags): the flag cropped to its pixels covers the circle exactly */
.lb-av-p { background-size:cover; background-position:center; background-repeat:no-repeat; }
.lb-av-p i { visibility:hidden; }
.lb-av-w { background-size:62% auto; }
/* podium */
.lb-podium { list-style:none; margin:.2rem 0 .6rem; padding:0; display:grid; grid-template-columns:1fr 1.12fr 1fr; align-items:end; gap:.45rem; }
.lb-pod { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25rem; padding:.7rem .35rem 0; min-width:0; }
.lb-pod-n { max-width:100%; font-size:.84rem; line-height:1.25; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.lb-pod-s { font-family:var(--font-mono); font-size:.95rem; color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.lb-pod-sub { font-size:.72rem; color:var(--muted); min-height:1em; }
.lb-step { width:100%; margin-top:.35rem; border-radius:10px 10px 0 0; border:1px solid var(--gold-line); border-bottom:0; background:linear-gradient(180deg, rgba(201,168,76,.18), rgba(201,168,76,.02)); }
.lb-pod-1 .lb-step { height:3.6rem; background:linear-gradient(180deg, rgba(230,201,119,.32), rgba(201,168,76,.03)); border-color:rgba(230,201,119,.55); }
.lb-pod-2 .lb-step { height:2.6rem; }
.lb-pod-3 .lb-step { height:1.9rem; }
.lb-medal { position:absolute; top:0; left:50%; transform:translate(-50%,-30%); z-index:1; display:grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:50%; font-family:var(--font-mono); font-size:.68rem; font-weight:700; color:#1a1408; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.lb-pod-1 .lb-medal { background:linear-gradient(135deg, #fbe7a6, #c9a84c); width:1.6rem; height:1.6rem; }
.lb-pod-2 .lb-medal { background:linear-gradient(135deg, #f0f0ef, #a7a9ad); }
.lb-pod-3 .lb-medal { background:linear-gradient(135deg, #f0c39a, #b06d3b); }
.lb-pod-1 .lb-av-lg { width:3.6rem; height:3.6rem; box-shadow:0 0 0 2px #e6c977, 0 0 22px rgba(230,201,119,.45); }
.lb-pod-2 .lb-av-lg { box-shadow:0 0 0 2px #c5c7ca; }
.lb-pod-3 .lb-av-lg { box-shadow:0 0 0 2px #c98a57; }
.lb-pod.me .lb-pod-n { color:var(--gold-bright); }
.lb-pod .lb-name { white-space:normal; overflow:visible; font-size:inherit; }
/* rows */
.lb-rows { list-style:none; margin:0; padding:0; }
.lb-row, .lb-nat { display:flex; align-items:center; gap:.65rem; padding:.55rem .55rem; border-radius:12px; }
.lb-row + .lb-row, .lb-nat + .lb-nat { margin-top:2px; }
.lb-row:nth-child(odd), .lb-nat:nth-child(odd) { background:rgba(255,255,255,.018); }
.lb-row.me, .lb-nat.me { background:linear-gradient(90deg, rgba(201,168,76,.2), rgba(201,168,76,.06)); box-shadow:inset 0 0 0 1px rgba(230,201,119,.5); }
.lb-rk { flex:0 0 1.7rem; text-align:center; font-family:var(--font-mono); font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.lb-row.me .lb-rk, .lb-nat.me .lb-rk { color:var(--gold-bright); }
.lb-who { flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.lb-name { font-size:.95rem; line-height:1.25; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-you { font-style:normal; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#1a1408; background:var(--gold); border-radius:4px; padding:.05rem .3rem; margin-left:.25rem; vertical-align:.12em; }
.lb-sub { font-family:var(--font-mono); font-size:.68rem; color:var(--muted); line-height:1.3; }
.lb-sc { flex:0 0 auto; font-family:var(--font-mono); font-size:.98rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; text-align:right; min-width:3.6em; }
.lb-row.me .lb-sc { color:var(--gold-bright); }
.lb-gap { text-align:center; color:var(--muted); letter-spacing:.3em; margin:.2rem 0; }
.lb-cap { font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:.5rem .2rem .45rem; }
.lb-empty { padding:1.1rem .8rem; border:1px dashed var(--gold-line); border-radius:12px; text-align:center; color:var(--muted); font-size:.9rem; }
/* nations */
.lb-nat-f { font-family:var(--flag-font); flex:0 0 auto; font-size:1.35rem; line-height:1; }
.lb-bar { display:block; height:5px; margin-top:.25rem; border-radius:999px; background:rgba(201,168,76,.1); overflow:hidden; }
.lb-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--gold-deep, #9c8236), var(--gold)); transition:width .8s var(--ease, ease); }
.lb-nat.me .lb-bar i { background:linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.lb-nat.few { opacity:.75; }
/* loading */
.lb-skel .lb-av, .lb-skel .lb-who i, .lb-skel .lb-sc, .lb-skel .lb-rk { background:linear-gradient(90deg, rgba(201,168,76,.07), rgba(201,168,76,.16), rgba(201,168,76,.07)); background-size:200% 100%; animation:lb-sh 1.3s linear infinite; border-radius:6px; box-shadow:none; }
.lb-skel .lb-rk { height:.8rem; }
.lb-skel .lb-who i { display:block; height:.7rem; width:70%; }
.lb-skel .lb-who i + i { width:40%; height:.55rem; margin-top:.3rem; }
.lb-skel .lb-sc { height:.9rem; }
@keyframes lb-sh { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .lb-skel .lb-av, .lb-skel .lb-who i, .lb-skel .lb-sc, .lb-skel .lb-rk { animation:none; } .lb-pct i, .lb-bar i { transition:none; } }
@media (max-width:360px) { .lb-hero-rk { min-width:3.6rem; padding-right:.6rem; } .lb-hero-rk b { font-size:2rem; } .lb-podium { gap:.25rem; } .lb-pod-n { font-size:.76rem; } }
/* 200% zoom on a phone (~195 px, QA 2026-10-31): the board stacks instead of squeezing names to nothing */
@media (max-width:300px) {
  .geo-lb { padding:.8rem .5rem; }
  .lb-hero { flex-wrap:wrap; gap:.5rem; }
  .lb-hero-rk { flex-direction:row; align-items:baseline; gap:.35rem; min-width:0; padding:0; border-right:0; }
  .lb-hero-t { flex:1 1 100%; }
  .lb-seg button { font-size:.56rem; letter-spacing:0; padding:0; overflow-wrap:anywhere; }
  .lb-hero-n { flex-wrap:wrap; font-size:.9rem; }
  .lb-podium { grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .lb-pod-1 { order:-1; }
  .lb-step { display:none; }
  .lb-row, .lb-nat { flex-wrap:wrap; gap:.35rem .5rem; }
  .lb-row .lb-who, .lb-nat .lb-who { order:3; flex:1 1 100%; }
  .lb-row .lb-sc, .lb-nat .lb-sc { margin-left:auto; }
  .lb-name { white-space:normal; overflow-wrap:anywhere; }
  .lb-legend { flex-wrap:wrap; }
}
.geo-lb .geo-lb-mk { white-space:nowrap; }
/* text that mixes a flag with words (chips, "Playing from"): the flag font covers only the flag letters */
.lb-chip, .lb-chip-sel select, .lb-hero-from { font-family:"Twemoji Country Flags", var(--font-body); }
/* score squares under a board name (common.js fillMarks): one square per pin or point, filled from the
   bottom by the share of the most it could score, in the map tier colours */
.lb-fill { display:inline-flex; flex-wrap:wrap; max-width:100%; gap:.22em; vertical-align:-.2em; font-size:1rem; margin:.15rem 0 .05rem; }
.lb-fill i { --fc:var(--ok, #e6c977); display:inline-block; width:1em; height:1em; border:1px solid rgba(201,168,76,.6); border-radius:3px; background:linear-gradient(to top, var(--fc) var(--f), rgba(0,0,0,.35) var(--f)); }
.lb-fill i.lb-fill-t3 { --fc:var(--mid, #c98a57); }
.lb-fill i.lb-fill-t2 { --fc:var(--sepia, #9a7a52); }
.lb-fill i.lb-fill-t1 { --fc:#8f8574; }
.lb-pod-sub .lb-fill { font-size:1.05rem; }
.lb-legend { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.8rem; line-height:1.35; margin:.6rem 0 .2rem; }
.lb-legend .lb-fill { flex:0 0 auto; font-size:.9rem; }