:root{--bg:#fffdf8;--panel:#ffffff;--panel2:#fffdf8;--line:#29303d;--soft:#e6e0d6;--text:#29303d;--muted:#6b6459;--accent:#f2705f;--accent-soft:#fff0ec;--accent2:#2ec4b6;--good:#3ec98c;--bad:#e04c3f}
*{box-sizing:border-box}
/* Owner report: on some desktop window widths the page grew a horizontal
   scrollbar and the whole hero read as "too zoomed in" — a few of the
   decorative absolutely-positioned layers (.heroStage among them, plus the
   parallax transform heroParallax() applies to it) round out to a handful of
   px wider than the viewport at certain widths, since they stretch to their
   containing block via left:0;right:0 rather than a hard vw cap. Chasing
   every such layer's exact box isn't worth it when the real requirement is
   simpler: this page never needs to scroll sideways, full stop — clip it at
   the root so no decorative layer can ever force one open again. */
/* overflow-x:hidden alone still leaves a residual sideways nudge on trackpads
   (macOS's elastic rubber-band bounce on a horizontal swipe is a separate
   browser behavior, not scroll — overflow doesn't touch it). overscroll-
   behavior-x:none turns that off too, so there's truly nothing left to move
   sideways, not just a hidden scrollbar. */
html{overflow-x:hidden;overscroll-behavior-x:none}
body{margin:0;min-height:100vh;overflow-x:hidden;overscroll-behavior-x:none;font-family:'Nunito',system-ui,sans-serif;color:var(--text);display:flex;flex-direction:column;align-items:center;padding:72px 16px 72px;
  /* Base atmosphere (mobile included, not just the >=900px desktop wash
     further down): a bolder tri-tone gradient mesh behind the hero, pushed to
     real saturation (was a barely-there .12-.14 alpha pastel wash that read as
     "flat cream page with a tint") so the extra colour actually registers as
     designed atmosphere, richer still at the desktop breakpoint. */
  background:
    radial-gradient(640px 480px at 18% -8%, rgba(242,112,95,.32), transparent 60%),
    radial-gradient(560px 440px at 100% -6%, rgba(46,196,182,.28), transparent 58%),
    radial-gradient(760px 520px at 50% 4%, rgba(255,194,51,.16), transparent 64%),
    var(--bg);
}
button{font-family:inherit;cursor:pointer}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:26px;margin:8px 0 4px;font-family:'Baloo 2',cursive}
.brand .dot{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--line)}
.brand .brandDot{color:var(--accent);-webkit-text-stroke:1px var(--line);paint-order:stroke fill}
.tagline{color:var(--muted);margin-bottom:28px;text-align:center;max-width:520px;font-weight:600}
/* Wow-factor pass: the actual dominant hero statement, sitting above the
   (translated) .tagline sentence rather than replacing it. Deliberately
   short, fixed copy — NOT run through data-i18n, on purpose: TopoI18N.apply()
   replaces an element's textContent wholesale on every language switch (see
   i18n.js), which would silently wipe the inline colour spans below every
   time someone switches language. Same call already made for the small
   GuessThe/Dot split in .brand just above. The real localized description
   is untouched, right underneath. */
h1.heroHeadline{margin:2px 0 18px;font-family:'Baloo 2',cursive;font-weight:800;color:var(--text);font-size:clamp(2.5rem,11vw,3.4rem);line-height:1.02;letter-spacing:-.02em;text-align:center}
/* Wow-factor pass #2: the accent words now carry their own soft colour glow
   (a blurred, same-hue text-shadow) instead of just a flat colour swap, so the
   headline reads as lit/alive rather than a static print headline.
   Round 3: that glow now breathes (slow, gentle, offset by .6s so the two
   words don't pulse in lockstep) instead of sitting static, the same "alive,
   not printed" idea taken one step further.
   Round 4 (owner review): the ambient background (.cornerglow/.heroStage) sits
   in these same coral/teal hues, so on some viewports the word and the glow
   behind it blurred into one another instead of reading as separate layers.
   A thin dark outline (-webkit-text-stroke, widely supported outside old
   Firefox — paint-order keeps the stroke from covering the fill in Firefox)
   pins the letterform down regardless of what's glowing behind it, same ink
   colour as the rest of the headline so it reads as one consistent style. */
.heroHeadline .hlCoral{color:var(--accent);-webkit-text-stroke:1.5px var(--line);paint-order:stroke fill;text-shadow:0 8px 28px rgba(242,112,95,.4);animation:hlGlowCoral 3.6s ease-in-out infinite}
.heroHeadline .hlTeal{color:var(--accent2);-webkit-text-stroke:1.5px var(--line);paint-order:stroke fill;text-shadow:0 8px 28px rgba(46,196,182,.4);animation:hlGlowTeal 3.6s ease-in-out infinite;animation-delay:.6s}
@keyframes hlGlowCoral{0%,100%{text-shadow:0 8px 28px rgba(242,112,95,.4)}50%{text-shadow:0 10px 42px rgba(242,112,95,.7)}}
@keyframes hlGlowTeal{0%,100%{text-shadow:0 8px 28px rgba(46,196,182,.4)}50%{text-shadow:0 10px 42px rgba(46,196,182,.7)}}
@media (prefers-reduced-motion:reduce){ .heroHeadline .hlCoral,.heroHeadline .hlTeal{animation:none} }
/* Spacing/sizing pass: cards and buttons were reading as undersized and
   packed tightly, so both grew a notch here (padding, gap-to-next-card) —
   a consistent baseline rhythm the rest of the page's spacing keys off of. */
.card{background:var(--panel);border:2px solid var(--line);border-radius:16px 7px 16px 7px;width:min(460px,94vw);padding:24px 26px;box-shadow:5px 5px 0 #ffe3ad;margin:0 auto 22px}
h2{margin:0 0 12px;font-size:19px;font-family:'Baloo 2',cursive;font-weight:800}
label{display:block;font-size:13.5px;font-weight:800;margin:12px 0 6px}
input,select{width:100%;background:var(--panel2);color:var(--text);border:2px solid var(--line);border-radius:10px 5px 10px 5px;padding:11px;font-size:14px;font-family:inherit;font-weight:600}
input::placeholder{color:#b8b2a7}
/* Checkbox + wrapping label on one row. The generic input rule above is
   width:100% with 11px padding, which a flex row happily applies to a
   checkbox too: on a phone that blew the box up, then shrank it back to a
   sliver and left the text in a column two characters wide. Every such row
   uses this class rather than repeating the overrides inline. */
/* Onboarding owns the page: nothing of the hub or the landing copy below it. */
body.onboarding #hub,body.onboarding #playModeWrap,body.onboarding #mpWrap,
body.onboarding #authCard,body.onboarding .heroHeadline,body.onboarding .tagline{display:none!important}
.ctrySel{position:relative;display:block}
#obCountries,#countryListCard{display:none!important}   /* source lists for the dropdowns only */
#hubLbCard,#hubStatsCard{min-width:0}   /* charts must not widen their grid column */
#hubLbBody{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}   /* height: sizeHubLb() in index.js */
.hubSelLabel{display:block;margin:0 0 6px;font-weight:800;font-size:13px}
/* hub stats: the same look as account.html, in half the width */
#hubStatsCard .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
@media(max-width:520px){#hubStatsCard .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
#hubStatsCard .tile{background:#fff;border:2px solid var(--line);border-radius:14px 6px 14px 6px;padding:10px 12px;box-shadow:3px 3px 0 #ffe3ad;min-width:0}
#hubStatsCard .tile .k{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:800;line-height:1.25;min-height:2.5em}
#hubStatsCard .tile .v{font-size:22px;font-weight:800;font-family:'Baloo 2',cursive;line-height:1.1;margin-top:3px;white-space:nowrap}
#hubStatsCard .tile .u{font-size:12px;color:var(--muted);font-weight:700}
.hubPanel{background:#fff;border:2px solid var(--line);border-radius:14px 6px 14px 6px;box-shadow:3px 3px 0 #ffe3ad;padding:14px 16px;min-width:0;display:flex;flex-direction:column}
.hubPanel h3{margin:0 0 2px;font-size:15px}
.hubPanel .csub{margin:0 0 10px;font-size:12px;color:var(--muted);font-weight:600;line-height:1.35}
.hubCharts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media(max-width:520px){.hubCharts{grid-template-columns:minmax(0,1fr)}}
.hubPanel .chartBox{position:relative;height:180px;margin-top:auto}
#hubRegionMap{height:300px;border:2px solid var(--line);border-radius:12px 5px 12px 5px;overflow:hidden;position:relative}
.regionMap canvas.heathue-canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:650}
.heatLegend{height:12px;border-radius:999px;border:1.5px solid var(--line);margin-top:12px;
  background:linear-gradient(to right,hsl(140,62%,46%),hsl(80,62%,46%),hsl(40,70%,50%),hsl(0,68%,52%))}
.heatLabels{display:flex;justify-content:space-between;gap:14px;margin-top:6px;font-size:12px;font-weight:700;color:var(--muted)}
.obCheckRow{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-weight:600;font-size:13.5px;line-height:1.4;text-align:left}
.obCheckRow input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;min-width:20px;padding:0;margin:1px 0 0;accent-color:var(--accent)}
.obCheckRow>span{flex:1 1 auto;min-width:0}
.btn{border:2px solid var(--line);border-radius:12px 5px 12px 5px;padding:15px 20px;font-size:16px;font-weight:800;margin-top:16px;box-shadow:4px 4px 0 var(--line);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
.btn.primary{background:var(--accent);color:#fff}
.btn.alt{background:#fff;color:var(--text)}
.btn.google{background:#fff;color:var(--text);display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:4px 4px 0 var(--soft)}
.btn.google:hover{box-shadow:2px 2px 0 var(--soft)}
.row{display:flex;gap:10px}.row>*{flex:1}
.muted{color:var(--muted);font-size:13px;font-weight:600}
.link{background:none;border:none;color:var(--accent);cursor:pointer;text-decoration:underline;font-size:13px;padding:0;font-weight:800}
.msg{margin-top:10px;font-size:13px;min-height:18px;font-weight:700}.msg.err{color:var(--bad)}.msg.ok{color:var(--good)}
.hidden{display:none}
.consent-err{color:var(--bad)}
.consent-err #agreeLabel a{color:var(--bad)}
.consent-err input[type=checkbox]{accent-color:var(--bad);outline:2px solid var(--bad);outline-offset:2px}
.topright{position:fixed;top:14px;right:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 32px)}
@media (max-width:480px){
  /* logged-in users get up to 5 chips (lang, coins, level, pools, name),
     which wrap onto 2-3 rows here — a fixed reserved padding-top can't
     account for that, so the chips flow inline above the brand instead
     of floating over it. */
  .topright{position:static;width:100%;max-width:none;margin-bottom:14px}
  body{padding-top:24px}
}
.chip{background:#fff;border:2px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:800;color:var(--text)}
/* Login/FAQ/account chips in the fixed corner nav: a notch smaller than a
   plain .chip elsewhere (leaderboard badges etc. keep full size), so this
   nav reads as quiet utility, not a second call to action next to the hero. */
.topright .chip{padding:5px 11px;font-size:12.5px}
/* Place-type picker for the multiplayer/class room form — same chip-row
   pattern solo.html uses for its own place-kind picker (there: .chip/.chip.on),
   kept as its own class here since .chip above is also used as a plain
   non-interactive badge (e.g. the PRO tag) that should never pick up hover/on
   styling. */
.catChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.catChip{user-select:none;padding:9px 14px;border-radius:999px;border:2px solid var(--soft);background:#fff;font-size:13px;font-weight:800;color:var(--muted);cursor:pointer}
.catChip:hover{border-color:var(--line)}
.catChip.on{background:#ffc233;color:var(--text);border-color:var(--line);box-shadow:2px 2px 0 var(--line)}
.avatarWrap{position:relative;display:inline-flex;flex:0 0 auto}
.avatarWrap{position:relative;display:inline-flex;flex:0 0 auto}
.avatarWrap .customSkinBadge{position:absolute;top:-4px;right:-4px;font-size:12px;line-height:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
.pool{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel2);border:2px solid var(--line);border-radius:11px 5px 11px 5px;padding:10px 12px;margin-top:8px;font-weight:700}
.pool .j{background:#ffc233;color:var(--text);border:2px solid var(--line);border-radius:999px;padding:6px 13px;font-weight:800;font-size:13px}
.warn{background:#fff1cf;border:2px solid var(--line);color:var(--text);border-radius:12px 5px 12px 5px;padding:12px;font-size:13px;font-weight:600}
.countries{display:flex;flex-wrap:wrap;gap:10px}
.country{flex:1;min-width:130px;background:#fff;border:2px solid var(--soft);color:var(--muted);border-radius:12px 5px 12px 5px;padding:14px;font-size:14.5px;font-weight:800}
.country.on{background:#ffc233;color:var(--text);border-color:var(--line);box-shadow:3px 3px 0 var(--line)}
.country:disabled{opacity:.6;cursor:not-allowed;border-style:dashed}
.continent{flex:1 1 100%;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.continent:first-child{margin-top:0}
.country-search{flex:1 1 100%;padding:10px 12px;border:2px solid var(--line);border-radius:12px 5px 12px 5px;font-family:inherit;font-size:14px;font-weight:700;background:#fff;color:var(--text)}
.country-search:focus{outline:none;border-color:var(--primary);box-shadow:2px 2px 0 var(--line)}
.no-countries{flex:1 1 100%;font-size:13px;font-weight:700;color:var(--muted);padding:8px 4px}
.modes{display:flex;flex-direction:column;gap:14px}
.mode{text-align:left;background:#fff;border:2px solid var(--line);color:var(--text);border-radius:16px 7px 16px 7px;padding:18px 20px;box-shadow:4px 4px 0 var(--line);transition:transform .12s,box-shadow .12s,background .15s}
.mode:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
/* .pick = one of a pair you choose between (Singleplayer/Multiplayer, Practice/Ranked):
   starts as a soft coral-tinted outline, and the one you clicked fills solid teal so
   the choice is obvious at a glance without both options shouting in solid colour */
.mode.pick{position:relative;background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.mode.pick .md{color:var(--muted)}
.mode.pick.picked{background:var(--accent2);border-color:var(--line);color:#fff}
.mode.pick.picked .md{color:rgba(255,255,255,.92)}
/* Decorative looping demo under the mode picker — see demoLoop() in the script. */
/* the demo plays as a full-bleed background layer behind the mode card's own
   content (see #modeCard/.mode.pick below) rather than its own boxed-off area.
   A slow teal pulse on the card's own shadow (echoing the "correct" colour the
   dots flash) is what actually catches the eye — the animation underneath is
   too subtle through the buttons to do that on its own. */
/* NB: the clipping lives on .demoMap, not here — #modeCard must stay
   un-clipped so the country popover can hang past the card's edge */
#modeCard{position:relative;background:transparent;border:none;box-shadow:none;padding:0;margin:0 auto 40px;animation:none}
/* Secondary hub cards (avatar/customize, daily challenge, quests, leaderboard,
   country list) keep the same cut-corner shape and border as every other
   card, but a much quieter shadow than the mode-picker hero above them, so
   they read as "also here" rather than an equal alternative to Play. Also
   pulled back to a smaller padding than the base .card now uses, so growing
   the baseline card size (above) to feel more substantial didn't just make
   every secondary card an equally large block next to the hero. */
#avatarCard,#dailyCard,#questCard,#hubLbCard,#hubStatsCard{box-shadow:3px 3px 0 var(--soft)}
#avatarCard{padding:18px 20px}
#questCard{padding:20px 22px}
/* Issue 5 (owner review pass): authCard (the login form) and aboutCard (the
   "What is GuessTheDot?" text) were the two cards this whole hierarchy-polish
   effort never touched — every other card here got a deliberate size pass
   (bigger hero, pulled-back secondary cards above, wider desktop panels for
   playModeWrap/mpWrap/aboutCard below), these two just inherited the plain
   base .card padding/margin, which is exactly why they read as a plain,
   dense leftover next to the rest of the page. Scoped to these two cards
   only — not the shared .card/label/input/.btn rules every other form and
   card on the page also relies on. */
#authCard{padding:32px 32px;margin:32px auto 32px}
#authCard label{margin-top:18px}
#authCard input,#authCard select{padding:13px 12px}
#authCard .btn{padding:17px 20px;font-size:16px}
#authCard .msg{margin:12px 0}
/* Hierarchy pass: the hub used to unroll avatar/daily/quest/leaderboard/the
   full 190-country grid directly under the hero, one after another, so the
   page never read as "one big thing to click" — especially on phones, where
   that's thousands of pixels of scroll before anything felt decided. This
   used to live collapsed under a native <details>/<summary> toggle, but the
   owner asked for it always expanded instead (issue 1, review pass) — the
   markup is now a plain always-visible div/label pair, no click-to-toggle,
   no chevron. The label keeps the exact "quiet section header" look the
   disclosure's OPEN state used to have (flush to .hubSecondaryInner below,
   no shadow/cursor of its own) since that's the only state that exists now —
   still cut-corner/bordered so it reads as "part of this family", just not a
   button pretending to still be clickable. */
.hubSecondary{margin-top:26px}
.hubSecondarySummary{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--soft);border-bottom:none;border-radius:14px 6px 0 0;padding:15px 20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;color:var(--muted)}
.hubSecondarySummaryLead{display:flex;align-items:center;gap:8px}
.hubSecondarySummaryLead [data-icon]{color:var(--accent2);flex:0 0 auto}
/* Opened, the whole group sits behind a hairline frame so it still reads as
   "one collapsible thing", just no longer collapsed — rather than the cards
   spilling straight onto the page the instant you tap the summary. */
.hubSecondaryInner{padding:24px 16px 4px;border:2px solid var(--soft);border-top:none;border-radius:0 0 14px 6px;background:rgba(255,255,255,.5)}
/* The base .card width formula (min(460px,94vw)) sizes against the VIEWPORT,
   which is correct for cards sitting directly in the page's own padding — but
   these cards sit one level deeper, inside this box's own 16px+2px
   padding/border on each side. Without this override that extra ~36px was
   never subtracted, so each card demanded more width than the box actually
   had and pushed #hubSecondary (and #hub above it) past the viewport edge —
   a real horizontal-scroll bug on phones, only caught above 900px where a
   matching width:100% override already existed for the desktop grid. */
.hubSecondaryInner>.card{width:100%}
/* The daily CTA shares the same primary/alt toggle classes as every other
   .btn.primary (see setDailyUI() swapping them once you've played today), so
   it stays coral like the real primary buttons by default — override it to
   the card's own gold identity instead, so it reads as "this card's action"
   rather than a second Play button competing with the hero above it. */
#dailyBtn.primary{background:#ffc233;color:#29303d;box-shadow:3px 3px 0 #c8890a}
#dailyBtn.primary:hover{box-shadow:1px 1px 0 #c8890a}
@keyframes modeGlow{0%,100%{box-shadow:5px 5px 0 #ffe3ad}50%{box-shadow:5px 5px 0 #ffe3ad,0 0 22px 3px rgba(46,196,182,.35)}}
/* Own dedicated preview panel at the top of the mode card (was a faint full-bleed
   background behind the buttons) — bigger surface, real border, dots clearly on top. */
.demoMap{position:relative;height:200px;overflow:hidden;border-radius:14px 6px 14px 6px;border:2px solid var(--line);box-shadow:3px 3px 0 var(--line),0 16px 34px -12px rgba(20,26,34,.4);margin-bottom:28px;z-index:1;background:linear-gradient(160deg,#f2f1e8 0%,#e7e5da 100%)}
/* Idle "scanning" shimmer so the demo map has a bit of motion even between
   rounds, not just at the reveal moment — a soft diagonal band of light
   drifting across the board on a loop. Sits above the coastline art but the
   dots/cursor/prompt (all z-index:1/2, see below) still paint on top of it. */
.demoMap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 47%,rgba(46,196,182,.16) 50%,rgba(255,255,255,.55) 53%,transparent 68%);
  background-size:260% 260%;animation:demoSweep 6s linear infinite}
@keyframes demoSweep{0%{background-position:130% 0}100%{background-position:-50% 0}}
/* Honesty pass: the demo used to paint an invented satellite-style landscape
   (patchwork fields, a forest pattern, a river, a rooftop cluster) — nothing
   like that exists in the real game, which just shows CARTO's pale
   "light_nolabels" basemap under the dots (see game.html's L.tileLayer call).
   .demoMapArt now paints a plain, muted, neutral map-like backdrop instead —
   a flat pale fill plus a faint graticule for texture, nothing pretending to
   be real terrain. Sits behind the dots/cursor/prompt purely by DOM order
   (first child), no z-index needed inside .demoMap's own stacking context. */
.demoMapArt{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Round 5 "live signal" HUD: a pulsing "someone is guessing right now"
   badge plus a real per-round countdown ring (ticks 3-2-1 in sync with
   demoStep() before the cursor lands — see the script), so a viewer sees
   an actual game clock instead of a paused diagram. Mirrors .demoPrompt's
   own pill treatment (top-left instead of top-right) so the two HUD
   elements read as one consistent overlay language. */
.demoHud{position:absolute;top:14px;left:16px;z-index:2;display:flex;align-items:center;gap:8px}
.demoLive{display:inline-flex;align-items:center;gap:6px;font-family:'Nunito',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.02em;color:#c8402f;background:rgba(255,255,255,.88);padding:6px 11px 6px 8px;border-radius:999px;box-shadow:0 2px 4px rgba(0,0,0,.12);white-space:nowrap}
.demoLiveDot{width:7px;height:7px;border-radius:50%;background:#f2705f;flex:0 0 auto;animation:demoLivePulse 1.4s ease-in-out infinite}
@keyframes demoLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(242,112,95,.55)}50%{box-shadow:0 0 0 6px rgba(242,112,95,0)}}
.demoTimerRing{position:relative;width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,.2);background:conic-gradient(#f2705f 100%, rgba(255,255,255,.4) 0)}
.demoTimerRing::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#fffdf8}
.demoTimerRing span{position:relative;z-index:1;font-family:'Baloo 2',cursive;font-weight:800;font-size:11.5px;color:#29303d}
.demoTimerRing.go{animation:demoRingGo .5s ease-out}
.demoTimerRing.go span{color:#1f8c81;font-size:9.5px}
@keyframes demoRingGo{0%{transform:scale(1)}45%{transform:scale(1.38)}100%{transform:scale(1)}}
/* above the mode buttons (unlike the dots/cursor, which stay behind them) so
   the place name is always fully legible, not muddied by the button's own
   translucent fill sitting on top of it */
.demoPrompt{position:absolute;top:14px;right:16px;z-index:2;font-family:'Baloo 2',cursive;font-weight:800;font-size:22px;display:flex;align-items:center;gap:7px;white-space:nowrap;background:rgba(255,255,255,.88);padding:5px 14px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
/* Honesty pass: styled like the real game's L.circleMarker dots (game.html:
   radius:5, weight:1.3, color:'#29303d', fillColor:TopoTheme.c('dot')) — a
   small solid coral circle with a thin dark border, not a glowing orb. Quick
   pop-in when a round starts, then a soft, toned-down idle pulse so the
   board still feels alive without reading as a fantasy glow. */
.demoDot{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--accent);border:1.3px solid var(--line);box-shadow:0 2px 4px rgba(20,20,20,.3);transform:translate(-50%,-50%);
  animation:demoDotIn .32s cubic-bezier(.34,1.56,.64,1) backwards,demoDotPulse 2.4s ease-in-out infinite}
@keyframes demoDotIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes demoDotPulse{0%,100%{box-shadow:0 2px 4px rgba(20,20,20,.3),0 0 0 0 rgba(242,112,95,.35)}60%{box-shadow:0 2px 4px rgba(20,20,20,.3),0 0 0 7px rgba(242,112,95,0)}}
/* The correct dot, the instant it's found: switches to the theme's "good"
   teal (--accent2), same as the real game's revealed-target style, plus a
   permanent name-tag pill underneath it — the honest stand-in for the real
   game's bindTooltip(...,{permanent:true}) label on the found place. Styled
   like the existing "Paris" pill above (.demoPrompt) so the two read as one
   family. demoStep() sets data-name on this dot to the round's place name. */
.demoDot.hit{background:var(--accent2);border-color:#1f8c81;box-shadow:0 3px 7px rgba(15,60,50,.35),0 0 0 5px rgba(46,196,182,.28);transition:background .15s,box-shadow .25s;animation:demoHitPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes demoHitPop{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.5)}100%{transform:translate(-50%,-50%) scale(1)}}
.demoDot.hit::after{content:attr(data-name);position:absolute;left:50%;top:100%;transform:translate(-50%,7px);white-space:nowrap;font-family:'Baloo 2',cursive;font-weight:800;font-size:10px;color:var(--text);background:rgba(255,255,255,.92);padding:2px 9px;border-radius:999px;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.demoCursor{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(46,196,182,.28);border:2px solid #2ec4b6;transform:translate(-50%,-50%) scale(0);opacity:0;transition:left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1),opacity .2s,transform .2s}
.demoCursor.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* expanding ring at the moment of the hit — the "flashy" confirmation beat,
   separate from .demoCursor so the ripple can finish and disappear on its own
   timer instead of fighting the cursor's persistent show/hide state */
.demoRipple{position:absolute;width:24px;height:24px;border-radius:50%;border:2px solid #2ec4b6;transform:translate(-50%,-50%) scale(1);opacity:.9;pointer-events:none;animation:demoRipple .55s ease-out forwards}
@keyframes demoRipple{to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
.demoFeedback{position:absolute;font-family:'Baloo 2',cursive;font-weight:800;font-size:14px;color:#1f8c81;opacity:0;transform:translate(-50%,-6px) scale(.7);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;text-shadow:0 1px 0 #fff}
.demoFeedback.show{opacity:1;transform:translate(-50%,-26px) scale(1)}
/* Small crossfade when the place name cycles (see demoStep() adding/removing
   this class), instead of the text just snapping to the next city. */
#demoPlaceName{display:inline-block;transition:opacity .18s ease,transform .18s ease}
#demoPlaceName.swap{opacity:0;transform:translateY(4px)}
@media (prefers-reduced-motion: reduce){ #modeCard{animation:none} .demoCursor,.demoFeedback,.demoDot.hit,.demoRipple{transition:none;animation:none} .demoDot{animation:none} .demoMap::before{animation:none;opacity:0} #demoPlaceName{transition:none} .demoLiveDot{animation:none} .demoTimerRing.go{animation:none} }
/* Neutral "frosted glass" skin for just these two buttons — the shared coral
   .mode.pick outline (meant for stand-alone pairs like Practice/Ranked) fought
   with the demo running behind it, and coral-on-coral (cursor + border) read
   as noise rather than two separate things. Dark outline + icon carries the
   pair-choice instead; picked still fills solid teal like every other .pick. */
#modeCard .mode.pick{position:relative;z-index:1;background:rgba(255,255,255,.82);border-color:var(--line);backdrop-filter:blur(2px)}
#modeCard .mode.pick .mtRow{display:flex;align-items:center;gap:8px}
#modeCard .mode.pick .mtRow>[data-icon]{color:#2ec4b6}
#modeCard .mode.pick.picked .mtRow>[data-icon]{color:#fff}
#modeCard .mode.pick:hover{background:rgba(255,255,255,.92)}
#modeCard .mode.pick.picked{background:rgba(46,196,182,.92);border-color:var(--line)}
/* ROUND 5 (owner review pass): back to Singleplayer/Multiplayer as two
   equal-size tiles side by side in .modeChoiceRow, per direct owner feedback
   that the previous round's one-dominant-button/shrunk-pill pairing wasn't
   what they wanted. The country picker moved to its own row below both
   tiles instead of sitting in a row with Multiplayer. No ids/classes were
   removed or renamed anywhere in this section — #spBtn/#mpBtn/
   #modeCountryPick keep the exact onclick/markPicked/buildModeCountryList
   wiring the script already gives them, this only restyles and repositions
   what's already there (see the HTML for the matching markup change). */
/* ROUND (owner review pass): this used to be pulled up -22px over the demo
   map's own 12px bottom margin so the two panels actually overlapped by
   ~10px — the same "overlap for depth" idea already found and removed from
   the desktop horizontal seam (see the CTA-dominance history on this file).
   On mobile it rendered the same way: a broken-looking clipped seam between
   the demo map and this panel, not a stylish effect. Sits with normal
   spacing below the demo map now, same as its desktop counterpart. */
.modeSelect{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;margin-top:0;background:linear-gradient(135deg,var(--accent-soft) 0%,#fff 55%,rgba(46,196,182,.10) 100%);border:2px solid var(--line);border-radius:20px 8px 20px 8px;box-shadow:5px 5px 0 var(--line),0 20px 34px -14px rgba(20,20,30,.28);padding:28px 18px 20px}
.modeGrid{display:flex;flex-direction:column;gap:22px}
/* Singleplayer and Multiplayer stay equal in size (owner: "put them in equal
   size"), stacked now so each has room for its row of mode icons. Their tile
   styling is .hubTile, next to the game-select tiles at the end of this file. */
.modeChoiceRow{display:flex;flex-direction:column;gap:16px;align-items:stretch}
/* The country picker sits alone under the twin tiles now — it used to have a
   separate "Playing: <country>" caption glued above a second, plainer copy
   of this same picker, which the owner flagged as the country showing
   twice. The picker's own label is "Playing: <flag + name>" now (see
   paintModeCountryBtn()), so there is exactly one country control; sizing/
   centering for it lives on .cpick.cpickMid below (the modePlayingPick class
   on it is just a hook, kept in case this needs its own rule later). */
/* ROUND 5: this picker now sits alone, centered under the twin mode tiles
   (see .modeChoiceRow above), not squeezed next to Multiplayer — so it gets
   room to show its full "Playing: <flag + name>" label instead of the old
   truncated-to-150px flag-and-name-only version. */
.cpick.cpickMid{max-width:none;flex:0 0 auto;align-self:center}
.cpick.cpickMid .cpickBtn{background:transparent;backdrop-filter:none;border:none;box-shadow:none;color:var(--text);font-weight:800;padding:10px 16px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border-radius:10px}
.cpick.cpickMid .cpickBtn:hover,.cpick.cpickMid .cpickBtn:focus-visible{background:rgba(41,48,61,.07);transform:none;box-shadow:none;color:var(--text)}
.cpickLead{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
/* Custom searchable country popover (a native <select> can't have a search
   box). Sits above the mode buttons' own z-index:1 so the open list is never
   clipped behind them. */
.cpick{position:relative;flex:0 0 152px;max-width:45%}
.cpickBtn{width:100%;height:100%;text-align:left;font-family:inherit;font-size:13.5px;font-weight:800;background:rgba(255,255,255,.68);color:var(--text);border:2px solid var(--line);border-radius:12px 5px 12px 5px;padding:10px 12px;cursor:pointer;backdrop-filter:blur(2px);box-shadow:4px 4px 0 var(--line);line-height:1.35;transition:transform .12s,box-shadow .12s,background .15s}
.cpickBtn:hover{background:rgba(255,255,255,.85);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
.cpickBtn::after{content:"▾";float:right;opacity:.5;margin-left:4px}
.cpickPop{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:min(260px,78vw);background:#fff;border:2px solid var(--line);border-radius:14px 6px 14px 6px;box-shadow:5px 5px 0 rgba(41,48,61,.18);padding:8px;display:flex;flex-direction:column;gap:6px}
/* .hidden is defined earlier in this file, so with equal specificity the
   display:flex above would win — this puts the closed state back in charge */
.cpickPop.hidden{display:none}
.cpickSearch{font-family:inherit;font-size:13px;font-weight:700;padding:8px 10px;border:2px solid var(--line);border-radius:10px 4px 10px 4px;background:#fff;color:var(--text)}
.cpickSearch:focus{outline:none;box-shadow:2px 2px 0 var(--line)}
.cpickList{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.cpickOpt{flex:0 0 auto;text-align:left;font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.5;background:none;border:none;color:var(--text);padding:7px 9px;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpickOpt:hover{background:var(--accent-soft)}
.cpickOpt.on{background:var(--accent2);color:#fff}
.cpickEmpty{font-size:12.5px;font-weight:700;color:var(--muted);padding:6px 9px}
@media(max-width:420px){ .modeChoiceRow{gap:8px} .cpickBtn{height:auto} .cpickPop{right:auto;left:0} }
/* Local topography is the main event of this merged list (see #localTopoRow
   in index.html) — bigger padding/type than the special-mode tiles below its
   divider, so it reads as the headline choice rather than a fifth equal tile. */
.mode.pick.local{padding:24px 26px}
.mode.pick.local .mt{font-size:22px}
.mode.pick.local .md{font-size:14.5px}
.modesDivider{border:none;border-top:2px solid var(--line);opacity:.25;margin:22px 0 20px}
/* World Tour is a special mode, not a leaderboard track like Practice/Ranked — its own colour and extra gap say "different kind of thing" */
.mode.pick.worldtour{background:#f3edff;border-color:#8b5cf6}
.mode.pick.worldtour .md{color:var(--muted)}
.mode.pick.worldtour.picked{background:#8b5cf6;border-color:var(--line);color:#fff}
.mode.pick.worldtour.picked .md{color:rgba(255,255,255,.92)}
.mode.pick.worldtour::after{animation-name:btnedgeviolet}
@keyframes btnedgeviolet{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}50%{box-shadow:0 0 6px 2px rgba(139,92,246,.6)}}
/* Country Hunt is World Tour's sibling special mode — own colour again so the two
   don't blend into one, same extra gap logic as worldtour above */
.mode.pick.countryhunt{background:#e8f1ff;border-color:#3b82f6}
.mode.pick.countryhunt .md{color:var(--muted)}
.mode.pick.countryhunt.picked{background:#3b82f6;border-color:var(--line);color:#fff}
.mode.pick.countryhunt.picked .md{color:rgba(255,255,255,.92)}
.mode.pick.countryhunt::after{animation-name:btnedgeblue}
@keyframes btnedgeblue{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}50%{box-shadow:0 0 6px 2px rgba(59,130,246,.6)}}
/* World Wonders: third special mode in the same family, own colour again */
.mode.pick.wonders{background:#fdf3dc;border-color:#c8890a}
.mode.pick.wonders .md{color:var(--muted)}
.mode.pick.wonders.picked{background:#c8890a;border-color:var(--line);color:#fff}
.mode.pick.wonders.picked .md{color:rgba(255,255,255,.92)}
.mode.pick.wonders::after{animation-name:btnedgegold}
@keyframes btnedgegold{0%,100%{box-shadow:0 0 0 0 rgba(200,137,10,0)}50%{box-shadow:0 0 6px 2px rgba(200,137,10,.6)}}
/* Vacation mode: fourth card in the same family, teal so it reads as related
   but not as another round of the same shape. It is the one card here that
   opens a page instead of starting a game (see the markup comment), which is
   also why its description says what you get rather than what to find. */
.mode.pick.travelmode{background:#f1fbfa;border-color:#2ec4b6}
.mode.pick.travelmode .md{color:var(--muted)}
/* Every other .mode is a <button>; this one is an <a> so the whole card is a
   real link (middle-click, open in new tab, crawlable). That means undoing the
   two things a browser does to anchors and buttons do not share. There is no
   .picked variant on purpose: it navigates away, it is never a selected state. */
a.mode.pick.travelmode{text-decoration:none;color:var(--text)}
a.mode.pick.travelmode .mt,a.mode.pick.travelmode .md{text-decoration:none}

/* World Wonders disclaimer bubble: only 7 of the set are the "original"
   Ancient/New7Wonders list, the rest are well-known landmarks — the (i) sits
   as a sibling of the mode button (see HTML comment there for why) and is
   pinned over its corner instead. */
.modeInfoWrap{position:relative}
.modeInfoWrap>.mode{display:block;width:100%}
.modeInfoWrap>.modeInfoBtn{position:absolute;top:14px;inset-inline-end:14px;z-index:2;background:rgba(255,255,255,.88)}
/* Population Challenge: fourth special mode, Pro-only — own colour, plus a
   locked state (greyed out, no hover lift, no glow) for non-Pro players */
.mode.pick.popchallenge{background:#e7fbf3;border-color:#1c9d6f}
.mode.pick.popchallenge .md{color:var(--muted)}
.mode.pick.popchallenge::after{animation-name:btnedgegreen}
@keyframes btnedgegreen{0%,100%{box-shadow:0 0 0 0 rgba(28,157,111,0)}50%{box-shadow:0 0 6px 2px rgba(28,157,111,.6)}}
.mode.pick.popchallenge.locked{background:#f2f0ea;border-color:#c9c2b4;cursor:pointer}
.mode.pick.popchallenge.locked:hover{transform:none;box-shadow:4px 4px 0 var(--line)}
.mode.pick.popchallenge.locked::after{animation:none;box-shadow:none}
.mode.pick.popchallenge.locked .mt,.mode.pick.popchallenge.locked .md{color:var(--muted)}
.popChallengeLockNote{display:none;margin-top:10px;align-items:center;gap:10px;background:#fff1cf;border:2px solid var(--line);border-radius:12px 5px 12px 5px;padding:10px 12px}
.popChallengeLockNote.show{display:flex}
/* World Tour / Country Hunt / World Wonders grouped in their own titled box —
   deliberately NOT another white card (see the HTML comment above its markup):
   it sits directly on the page's own background, no panel behind it, so it
   reads as its own area rather than a continuation of the Practice/Ranked card.
   A light trail continuously runs along the border, left to right, to read as
   "something special" on top of that. Built as a 1px padding around the box
   filled with a moving gradient, masked to only the border by the transparent
   inner layer — the classic animated-border trick, cheaper than animating an
   SVG stroke and works at any box size. */
/* Sits well clear of the Practice/Ranked card above (margin-top) so it never
   reads as a continuation of the primary choice, and pulled back to smaller
   type/padding below (.specialModes .mode) than an ordinary .mode button —
   a deliberate step down in visual weight: primary card > this box. */
.specialModes{position:relative;margin-top:32px;margin-bottom:36px;padding:2px;border-radius:18px 8px 18px 8px;background:none}
/* bottom padding is bigger than the other sides on purpose: the pulsing glow
   on each mode card (.mode.pick::after, box-shadow blur ~8px) needs room to
   actually show below the LAST card too, not just get cut close by the box edge */
.specialModesInner{position:relative;background:transparent;border-radius:16px 6px 16px 6px;padding:16px 6px 20px}
.specialModesTitle{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;color:var(--text);margin-bottom:12px;padding-left:12px}
.specialModes .mode{padding:14px 16px}
.specialModes .mode .mt{font-size:17px}
.specialModes .mode .md{font-size:12.5px}
/* pulsing glow that traces the button's own outline (border-radius:inherit keeps
   it on the same cut-corner shape) instead of floating blobs at the corners */
.mode.pick::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgba(242,112,95,0);animation:btnedge 2.4s ease-in-out infinite}
.mode.pick.picked::after{animation-name:btnedgeteal}
@keyframes btnedge{0%,100%{box-shadow:0 0 0 0 rgba(242,112,95,0)}50%{box-shadow:0 0 6px 2px rgba(242,112,95,.6)}}
@keyframes btnedgeteal{0%,100%{box-shadow:0 0 0 0 rgba(46,196,182,0)}50%{box-shadow:0 0 6px 2px rgba(46,196,182,.6)}}
@media (prefers-reduced-motion:reduce){.mode.pick::after{animation:none;box-shadow:0 0 4px 1px rgba(242,112,95,.35)}.mode.pick.picked::after{box-shadow:0 0 4px 1px rgba(46,196,182,.35)}}
.mode .mt{font-size:19px;font-weight:800;font-family:'Baloo 2',cursive}
.mode .md{font-size:13.5px;color:var(--muted);margin-top:3px;font-weight:600}
body>*{position:relative;z-index:1}
.livedot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3ec98c;border:1px solid #1c7d54;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(62,201,140,.6);animation:livep 1.6s infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(62,201,140,.6)}70%{box-shadow:0 0 0 7px rgba(62,201,140,0)}100%{box-shadow:0 0 0 0 rgba(62,201,140,0)}}
/* Ambient corner glow — soft, blurred, slow. Not a spotlight on any one button, just
   a bit of life behind the page so the Mode card (the thing we want people to click)
   sits in a slightly warmer, breathing frame instead of a flat page. Staggered
   delays so the four corners don't pulse in lockstep. */
.cornerglow{position:fixed;width:26vmax;height:26vmax;max-width:340px;max-height:340px;border-radius:50%;pointer-events:none;z-index:0;filter:blur(50px);opacity:.28;animation:cornerpulse 9s ease-in-out infinite}
.cornerglow.tl{top:-11vmax;left:-11vmax;background:radial-gradient(circle,var(--accent) 0%,transparent 72%)}
.cornerglow.tr{top:-12vmax;right:-12vmax;background:radial-gradient(circle,#ffc233 0%,transparent 72%);animation-delay:2.2s}
.cornerglow.bl{bottom:-12vmax;left:-13vmax;background:radial-gradient(circle,var(--accent2) 0%,transparent 72%);animation-delay:4.4s}
.cornerglow.br{bottom:-11vmax;right:-11vmax;background:radial-gradient(circle,var(--accent) 0%,transparent 72%);animation-delay:6.6s}
@keyframes cornerpulse{0%,100%{opacity:.18;transform:scale(1)}50%{opacity:.36;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.cornerglow{animation:none;opacity:.16}}
/* Round 4 wow-factor pass. The prior critique was specific: floating glow
   dots + a gradient still reads as a pretty colour wash, not an active game.
   This layer is that missing scene — an actual ambient game board (the same
   terrain/graticule language as the real .demoMap below, just bigger and
   dialled back) with its own little "rounds" playing out on a loop: a dot
   pulses, a scan-cursor drifts near it, then it flashes teal like a correct
   guess, forever, at a different spot each time because every pin/cursor
   runs its own untied duration+delay. Painted BEFORE .heroDots in the DOM
   (same z-index:0 group as cornerglow/heroDots/dotgrid — see body>* above),
   so stacking is four real depth layers behind the headline: page dot
   texture -> this board -> the foreground glow dots -> the h1 on top. Faded
   to nothing at the edges with a mask so it reads as atmosphere the page
   bleeds into, not a hard rectangle parked behind the text. Desktop-only
   mouse parallax (heroParallax() in the script, guarded for touch/reduced-
   motion) nudges this whole layer and .heroDots by different amounts for
   real parallax depth, not just layered opacity. */
.heroStage{position:absolute;top:-10px;left:0;right:0;height:640px;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 34%, #000 45%, transparent 84%);
  mask-image:radial-gradient(62% 58% at 50% 34%, #000 45%, transparent 84%)}
/* The board itself: a warm-to-teal gradient patch (kept far less saturated
   than the real demo board's vivid grass green — this one has to sit quietly
   behind body text, not compete with it) plus a graticule grid, which is the
   cheapest, clearest "this is a map" signal there is. Elliptical, like a
   globe viewed face-on, rather than a hard-edged rectangle. */
.heroStageArt{position:absolute;top:50%;left:50%;width:min(1180px,150vw);height:560px;transform:translate(-50%,-50%);border-radius:50%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.32) 0 1px, transparent 1px 74px),
    radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(160deg, #fff3e2 0%, #dcebce 40%, #bfe6df 70%, #a7d8e8 100%);
  opacity:.66}
/* Slow diagonal sheen drifting across the board — same idea as the real demo
   board's ::before shimmer (see .demoMap::before), just slower and quieter,
   so the board never sits fully still even between pin "rounds". */
.heroStageArt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 47%,rgba(46,196,182,.14) 50%,rgba(255,255,255,.5) 53%,transparent 68%);
  background-size:260% 260%;animation:heroStageSweep 10s linear infinite}
@keyframes heroStageSweep{0%{background-position:130% 0}100%{background-position:-50% 0}}
/* One "round" of the ambient game, in CSS only: the dot pulses gently at
   rest (heroPinPulse, forever) while its own ring flashes outward once per
   cycle (heroPinFound) as if a guess just landed on it — teal, the same
   "correct" colour as everywhere else on the page (.good/.demoDot.hit),
   regardless of the pin's own idle colour. Every pin below runs a different
   duration+delay so there is always at least one mid-flash somewhere on the
   board, never all six idling in lockstep. */
.heroPin{position:absolute;border-radius:50%;transform:translate(-50%,-50%);animation:heroPinPulse 3.4s ease-in-out infinite}
.heroPin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ring,#2ec4b6);opacity:0;animation:heroPinFound 6s ease-out infinite}
@keyframes heroPinPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}
@keyframes heroPinFound{0%,80%{transform:translate(-50%,-50%) scale(1);opacity:0}86%{opacity:.85}100%{transform:translate(-50%,-50%) scale(2.7);opacity:0}}
.heroPin.p1{left:15%;top:44%;width:15px;height:15px;background:radial-gradient(circle at 32% 26%,#fff 0%,#ffe3ec 40%,var(--accent) 100%);box-shadow:0 0 0 3px rgba(242,112,95,.24),0 0 14px 4px rgba(242,112,95,.42);--ring:#f2705f;animation-duration:6.1s}
.heroPin.p1::after{animation-duration:6.4s}
.heroPin.p2{left:85%;top:38%;width:11px;height:11px;background:radial-gradient(circle at 32% 26%,#fff 0%,#e6fbf8 40%,var(--accent2) 100%);box-shadow:0 0 0 3px rgba(46,196,182,.24),0 0 12px 4px rgba(46,196,182,.4);--ring:#2ec4b6;animation-duration:7.3s;animation-delay:.7s}
.heroPin.p2::after{animation-duration:5.6s;animation-delay:1.4s}
.heroPin.p3{left:9%;top:75%;width:13px;height:13px;background:radial-gradient(circle at 32% 26%,#fff 0%,#fff6de 40%,#ffc233 100%);box-shadow:0 0 0 3px rgba(255,194,51,.24),0 0 13px 4px rgba(255,194,51,.4);--ring:#ffc233;animation-duration:5.6s;animation-delay:1.6s}
.heroPin.p3::after{animation-duration:7s;animation-delay:.4s}
.heroPin.p4{left:91%;top:70%;width:9px;height:9px;background:radial-gradient(circle at 32% 26%,#fff 0%,#e6fbf8 40%,var(--accent2) 100%);box-shadow:0 0 0 3px rgba(46,196,182,.22),0 0 11px 3px rgba(46,196,182,.38);--ring:#2ec4b6;animation-duration:6.8s;animation-delay:2.3s}
.heroPin.p4::after{animation-duration:6.2s;animation-delay:2.9s}
.heroPin.p5{left:50%;top:9%;width:10px;height:10px;background:radial-gradient(circle at 32% 26%,#fff 0%,#ffe3ec 40%,var(--accent) 100%);box-shadow:0 0 0 3px rgba(242,112,95,.22),0 0 11px 3px rgba(242,112,95,.38);--ring:#f2705f;animation-duration:7.6s;animation-delay:3.1s}
.heroPin.p5::after{animation-duration:5.9s;animation-delay:.9s}
/* A soft scan-cursor ghosting slowly across the board on a loop, the same
   "someone is actually looking for the dot" cue the real demo's cursor
   gives, just ambient instead of tied to a specific guess. */
.heroCursor{position:absolute;width:32px;height:32px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.heroCursor.c1{border:2px solid rgba(46,196,182,.55);background:rgba(46,196,182,.14);animation:heroCursorDrift1 14s ease-in-out infinite}
.heroCursor.c2{width:24px;height:24px;border:2px solid rgba(242,112,95,.5);background:rgba(242,112,95,.12);animation:heroCursorDrift2 11s ease-in-out infinite;animation-delay:1.5s}
@keyframes heroCursorDrift1{0%{left:24%;top:26%;opacity:.5}25%{left:64%;top:16%;opacity:.7}50%{left:72%;top:60%;opacity:.5}75%{left:32%;top:64%;opacity:.7}100%{left:24%;top:26%;opacity:.5}}
@keyframes heroCursorDrift2{0%{left:78%;top:52%;opacity:.55}33%{left:40%;top:72%;opacity:.4}66%{left:18%;top:36%;opacity:.6}100%{left:78%;top:52%;opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .heroStageArt::after{animation:none;opacity:0}
  .heroPin{animation:none}
  .heroPin::after{animation:none;opacity:0}
  .heroCursor{animation:none;opacity:0}
}
/* Small floating "dot" motif behind the hero headline — a handful of soft,
   blurred dots in the three brand accent colours, gently drifting, echoing
   the game's own dots rather than a generic decorative blob. Scrolls away
   with the page (position:absolute against the document, not the viewport)
   since it only belongs behind the hero, not fixed everywhere like the
   corner glow above. */
.heroDots{position:absolute;top:0;left:0;right:0;height:620px;overflow:hidden;pointer-events:none;z-index:0}
/* Soft, saturated glow sitting directly behind the headline block — the
   "depth-layered, not a flat illustration" cue the hero needed. A blurred
   radial blob, no markup of its own (a pseudo-element on the floating-dots
   layer the hero already has), positioned low enough in that 620px band to
   land behind the h1/tagline text rather than up in the empty space above
   the brand mark. */
.heroDots::before{content:"";position:absolute;top:70px;left:50%;transform:translateX(-50%);width:min(900px,115vw);height:400px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(242,112,95,.30), rgba(46,196,182,.20) 55%, transparent 78%);
  filter:blur(38px)}
/* Round 3: each floating dot now carries its own colour-matched glow halo
   (box-shadow, not just a blur filter on the solid disc) — without it these
   read as exactly the "flat scattered circles" the critique called out, the
   same fix as the demo dots above. */
.heroDots .hDot{position:absolute;border-radius:50%;filter:blur(.5px);opacity:.7;animation:hDotFloat 7s ease-in-out infinite}
.heroDots .hDot.d1{width:16px;height:16px;top:14%;left:9%;background:var(--accent);box-shadow:0 0 18px 5px rgba(242,112,95,.45);animation-duration:6.5s}
.heroDots .hDot.d2{width:11px;height:11px;top:28%;left:91%;background:var(--accent2);box-shadow:0 0 16px 5px rgba(46,196,182,.45);animation-duration:7.6s;animation-delay:.6s}
.heroDots .hDot.d3{width:20px;height:20px;top:5%;left:80%;background:#ffc233;box-shadow:0 0 22px 6px rgba(255,194,51,.42);animation-duration:8.4s;animation-delay:1.4s}
.heroDots .hDot.d4{width:9px;height:9px;top:60%;left:15%;background:var(--accent2);box-shadow:0 0 14px 4px rgba(46,196,182,.42);animation-duration:6s;animation-delay:.9s}
.heroDots .hDot.d5{width:13px;height:13px;top:3%;left:42%;background:var(--accent);box-shadow:0 0 16px 5px rgba(242,112,95,.4);animation-duration:7.9s;animation-delay:2s}
.heroDots .hDot.d6{width:8px;height:8px;top:20%;left:64%;background:#ffc233;box-shadow:0 0 14px 4px rgba(255,194,51,.38);animation-duration:6.8s;animation-delay:2.6s}
@keyframes hDotFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.heroDots .hDot{animation:none}}
/* Replaces the earlier hand-drawn contour-line doodle behind the whole page:
   a crisp tiled dot grid instead, echoing the game's own "dot" identity
   rather than a cutesy illustration, and reading as a deliberate premium
   texture layered under the gradient mesh instead of decoration for its own
   sake. Static (no animation needed) — the motion budget is spent on the
   headline glow, corner blobs and demo map instead. */
.dotgrid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(41,48,61,.16) 1.6px, transparent 1.6px);
  background-size:26px 26px;
  opacity:.4}
@media (min-width:900px){ .dotgrid{ background-size:30px 30px; opacity:.34 } }
/* iOS/Safari zooms the whole page in whenever you focus a form control whose
   font-size is under 16px, and that zoom persists across navigation — so
   tapping a search/code field and then moving to the next page left you
   stuck zoomed in until you pinched out by hand. 16px on phones avoids the
   auto-zoom entirely, without blocking deliberate pinch-zoom the way
   user-scalable=no would. !important because some fields carry inline or
   JS-injected sizes. */
@media(max-width:760px){input,select,textarea{font-size:16px!important}}
/* ---- Desktop full-bleed landing layout ----
   Below 900px everything below is inert and the page stays exactly as it
   was: a single narrow phone-width column. At and above 900px the homepage
   stops behaving like a stretched phone layout and becomes an actual desktop
   landing page, in three parts:
   1. A soft two-tone gradient wash (coral upper-left, teal upper-right)
      joins the existing contour-line/corner-glow background, so the extra
      width reads as a designed full-bleed backdrop rather than a wide slab
      of plain off-white around a narrow column.
   2. #hub itself barely needs to be a grid any more: the mode card and the
      collapsed #hubSecondary disclosure both span the full width, one above
      the other, so the only thing the outer grid actually arranges side by
      side is a rival/challenge/teacher banner if one happens to be showing.
      It stays a grid anyway (an explicit width, since a bare grid container
      still shrink-wraps to content otherwise) purely so that plumbing keeps
      working. The real two-column arrangement now lives one level down,
      inside #hubSecondary's own .hubSecondaryInner: avatar/daily side by
      side, then leaderboard/country-list side by side, once someone actually
      opens it. Its card children need width:100% there too, same reason as
      always — the base .card rule caps at 460px for the mobile column.
   3. #modeCard itself — the primary "start playing" action — always spans
      both grid columns, and internally splits into two columns of its own:
      the looping map preview on the left, the big Singleplayer/Multiplayer
      tiles on the right. That's "the map/dot preview alongside the play
      tiles" the brief asks for, and it reads as one wide hero band the eye
      lands on first, not just another card in the stack. */
@media (min-width:900px){
  body{
    padding:48px clamp(24px,5vw,64px) 84px;
    background:
      radial-gradient(1100px 760px at 10% -12%, rgba(242,112,95,.34), transparent 60%),
      radial-gradient(1000px 680px at 104% -10%, rgba(46,196,182,.30), transparent 58%),
      radial-gradient(1200px 760px at 50% 4%, rgba(255,194,51,.17), transparent 62%),
      var(--bg);
  }
  .brand{ font-size:36px; gap:14px; margin:6px 0 8px; }
  .brand svg{ width:40px; height:40px; }
  /* The actual "wow" lever: a genuinely oversized display headline (was
     capped at 5.2rem/~83px, tops out over 7rem/~115px now) with tighter
     line-height so the extra size reads as confident, not just stretched. */
  h1.heroHeadline{ font-size:clamp(3.6rem,5.6vw + 1rem,7.2rem); line-height:.96; margin:4px 0 26px; }
  .tagline{ font-size:19px; max-width:680px; margin-bottom:32px; }

  /* Same spacing-rhythm pass as the mobile layout above, scaled up: bigger
     gap between hub cards, and buttons/secondary-flow cards get extra
     padding now that the wider column actually has room for it. */
  .btn{ padding:16px 24px; font-size:16.5px; }
  .mode{ padding:20px 22px; }

  #hub{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px 42px;
    width:min(1480px,96vw);
    margin:16px 0 0;
  }
  /* #hub{display:grid} above is an id selector, which outranks the plain
     .hidden{display:none} class rule no matter what order they're written in
     — so without this, toggling .hidden on #hub (see showPlayMode()/
     showMpWrap() in the script) silently failed at this breakpoint and left
     the entire hub stacked above whatever screen you navigated to. This is
     exactly the hierarchy this round is about, so it needed fixing here: one
     more id+class rule to actually win that specificity fight. */
  #hub.hidden{ display:none; }
  #hub>.card{ width:100%; margin:0; }
  #rivalBanner,#challengeBanner,#teacherFunnelBanner,#modeCard,#hubSecondary{ grid-column:1 / -1; }

  /* The disclosure bar itself: same quiet treatment as the mobile version,
     just with room to breathe now there's a whole desktop row to itself.
     Sits flush under #modeCard's own 64px margin-bottom below, rather than
     adding a second margin on top of that gap. */
  .hubSecondary{ margin-top:0; }
  .hubSecondarySummary{ padding:20px 32px; font-size:15px; }
  .hubSecondaryInner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px 42px;
    padding:36px 34px 14px;
    border-radius:0 0 20px 8px;
  }
  .hubSecondaryInner>.card{ width:100%; margin:0; }
  .hubSecondaryInner>#questCard,
  .hubSecondaryInner>div:last-child{ grid-column:1 / -1; }

  #playModeWrap .card, #mpWrap .card, #authCard{ width:min(680px,88vw); padding:32px 36px; }
  .specialModes{ margin-top:40px; margin-bottom:44px; }
  .specialModesInner{ padding:20px 10px 26px; }

  /* The hero: board on the left, a matching solid panel (same cut-corner/
     dark-border/offset-shadow language as every other card) on the right so
     the two halves carry equal visual weight — floating icons on bare
     background used to read as "empty" next to the map's solid box even
     though the column itself was full width. CTA-dominance pass: thicker
     borders and a deeper offset shadow than any other card on the page, plus
     a wide margin below so nothing else sits close enough to compete. */
  #modeCard{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; gap:40px; }
  #hub>#modeCard{ margin-bottom:64px; }
  .demoMap{ height:460px; margin-bottom:0; border-width:3px; box-shadow:4px 4px 0 var(--line),0 24px 46px -14px rgba(20,26,34,.45); }
  .demoPrompt{ font-size:26px; padding:8px 18px; top:18px; right:20px; }
  /* The board itself grew 2.3x for desktop (200px -> 460px tall) but the
     dots/cursor/ripple/feedback stayed phone-sized until now — small marks
     scattered across a much bigger surface read as sparse, not "richly
     rendered". */
  .demoDot{ width:22px; height:22px; }
  .demoDot.hit::after{ font-size:13px; padding:3px 12px; transform:translate(-50%,9px); }
  .demoCursor{ width:44px; height:44px; }
  .demoRipple{ width:34px; height:34px; }
  .demoFeedback{ font-size:19px; }
  .demoHud{ top:18px; left:20px; gap:11px; }
  .demoLive{ font-size:14px; padding:8px 15px 8px 11px; gap:8px; }
  .demoLiveDot{ width:9px; height:9px; }
  .demoTimerRing{ width:38px; height:38px; }
  .demoTimerRing span{ font-size:15px; }
  .demoTimerRing.go span{ font-size:12.5px; }
  /* Previously pulled -54px left to overlap the board's own right edge by
     ~14px on the theory that overlapping cards read as more dynamic than two
     side by side — in practice it rendered as a broken-looking clipped seam
     (the board's rounded corner bleeding raggedly over this panel's corner),
     not a stylish effect. Removed: the two panels now sit cleanly side by
     side using #modeCard's own grid-template-columns/gap for separation.
     margin-top:0 is redundant with the base rule now (that had its own
     overlap trick, also removed) but kept explicit since this block still
     needs to override the base rule's other properties regardless. */
  .modeSelect{
    gap:26px;
    justify-content:center;
    min-height:460px;
    margin-top:0;
    background:linear-gradient(135deg, var(--accent-soft) 0%, #fff 55%, rgba(46,196,182,.10) 100%);
    border:3px solid var(--line);
    border-radius:24px 10px 24px 10px;
    box-shadow:9px 9px 0 var(--line), 0 30px 50px -18px rgba(20,20,30,.35);
    padding:38px 34px;
  }
  .modeGrid{ gap:32px; }
  .cpick.cpickMid .cpickBtn{ font-size:18px; padding:11px 18px; }
  .cornerglow{ max-width:460px; max-height:460px; }
}

/* ------------------------------------------------------------------------
   Game-select screen (#playModeWrap): after Singleplayer/Multiplayer the
   screen reads like a game's mode menu instead of a stack of form rows.
   The hero copy steps aside so the tiles start near the top, the local
   ranked mode is one wide featured tile, and the special modes are equal
   tiles with an art panel: two across on a phone, three on a tablet, one
   row of five on desktop.
   ------------------------------------------------------------------------ */
body:has(#playModeWrap:not(.hidden)) .heroHeadline,
body:has(#playModeWrap:not(.hidden)) .tagline,
body:has(#playModeWrap:not(.hidden)) .heroStage,
body:has(#playModeWrap:not(.hidden)) .heroDots{display:none}
#playModeWrap{width:min(1120px,100%);position:relative;z-index:1;margin-top:10px}

.pickHead{display:flex;align-items:center;gap:14px;margin:0 0 18px;flex-wrap:wrap}
.pickBack{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--text);text-decoration:none;border:2px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13.5px;box-shadow:2px 2px 0 var(--line);transition:transform .12s,box-shadow .12s}
.pickBack:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--line)}
.pickTitle{margin:0;font-family:'Baloo 2',cursive;font-weight:800;font-size:clamp(24px,5vw,34px);line-height:1.1}

#playModeWrap .specialModes{margin:0 0 28px}
#playModeWrap .specialModesInner{padding:0}
#playModeWrap .modesDivider{border:none;margin:26px 0 0}
#playModeWrap .specialModesTitle{font-family:'Baloo 2',cursive;font-size:clamp(19px,3.4vw,23px);padding-left:2px;margin-bottom:14px}

/* the tile itself: white body, art panel on top, per-mode colour in --tc */
.gameTile{--tc:var(--accent);--tcSoft:#ffe6df}
.gameTile.worldtour{--tc:#8b5cf6;--tcSoft:#ece4ff}
.gameTile.countryhunt{--tc:#3b82f6;--tcSoft:#e0ecff}
.gameTile.wonders{--tc:#d4940d;--tcSoft:#fcedc8}
.gameTile.travelmode{--tc:#2ec4b6;--tcSoft:#d9f5f1}
.gameTile.popchallenge{--tc:#1c9d6f;--tcSoft:#d8f4e8}
.gameTile.popchallenge.locked{--tc:#a39b8d;--tcSoft:#ede9e1}
.mode.pick.gameTile{display:flex;flex-direction:column;align-items:stretch;width:100%;height:100%;padding:0;text-align:start;background:#fff;color:var(--text);border:2.5px solid var(--line);border-radius:18px 8px 18px 8px;box-shadow:4px 4px 0 var(--line);cursor:pointer;font:inherit;transition:transform .14s ease,box-shadow .14s ease}
.mode.pick.gameTile:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--line);background:#fff}
.mode.pick.gameTile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.mode.pick.gameTile:focus-visible{outline:3px solid var(--tc);outline-offset:3px}
.mode.pick.gameTile.picked{background:var(--tcSoft);border-color:var(--line);color:var(--text)}
.mode.pick.gameTile.picked .md,.mode.pick.gameTile .md{color:var(--muted)}
.mode.pick.gameTile::after{border-radius:16px 6px 16px 6px}

.tileArt{position:relative;display:block;aspect-ratio:16/9;border-radius:15.5px 5.5px 0 0;border-bottom:2.5px solid var(--line);
  background:radial-gradient(circle,rgba(41,48,61,.13) 1.2px,transparent 1.6px) 0 0/14px 14px,linear-gradient(160deg,var(--tcSoft),#fff 130%)}
.tileArt svg{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;transition:transform .3s ease}
.gameTile:hover .tileArt svg{transform:scale(1.05)}
.tileArt .dotC{fill:#f2705f;stroke:#29303d;stroke-width:1.5}
.tileArt .dotHit{fill:var(--tc);stroke:#29303d;stroke-width:1.5}
.tileArt .shapeHit{fill:var(--tc);fill-opacity:.85;stroke:#29303d;stroke-width:1.5;stroke-linejoin:round}
.tileArt .ring{fill:none;stroke:var(--tc);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:tileRing 2.2s ease-out infinite}
@keyframes tileRing{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.35);opacity:0}}
.tileIcon{position:absolute;left:14px;bottom:-22px;display:grid;place-items:center;width:46px;height:46px;background:#fff;border:2.5px solid var(--line);border-radius:14px 6px 14px 6px;box-shadow:2px 2px 0 var(--line);color:var(--tc);transition:transform .2s ease}
[dir=rtl] .tileIcon{left:auto;right:14px}
.gameTile:hover .tileIcon{transform:translateY(-3px) rotate(-5deg)}
.tileBadge{position:absolute;top:10px;inset-inline-end:10px;background:#ffc233;border:2px solid var(--line);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:800;color:var(--text)}

.tileBody{display:flex;flex-direction:column;gap:4px;flex:1;padding:30px 16px 14px}
.gameTile .mt{font-family:'Baloo 2',cursive;font-weight:800;font-size:18px;line-height:1.15}
.gameTile .md{font-size:13px;line-height:1.4;margin:0;font-weight:600}
.gameTile .tileBody>.md:not(.tileNote){flex:1}
.tilePlay{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 13px 5px 14px;border-radius:999px;background:var(--line);color:#fff;font-family:'Baloo 2',cursive;font-weight:800;font-size:14px;line-height:1.3;transition:background .15s,transform .15s}
.gameTile:hover .tilePlay{background:var(--tc);transform:translateX(2px)}
.gameTile.popchallenge.locked .tilePlay{background:#a39b8d}

.modes.gameTiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:16px 14px}
.gameTiles>.modeInfoWrap>.mode{display:flex;height:100%}
.gameTiles>.modeInfoWrap>.modeInfoBtn{top:10px}
.gameTiles>.popChallengeLockNote{grid-column:1 / -1;margin-top:0}
@media (max-width:420px){
  .modes.gameTiles{gap:14px 10px}
  .tileBody{padding:28px 12px 12px}
  .gameTile .mt{font-size:16px}
  .gameTile .md{font-size:12.5px}
  .tileIcon{width:40px;height:40px;left:10px;bottom:-19px}
  .tileIcon img,.tileIcon svg{width:26px;height:26px}
}
@media (max-width:599px){
  .gameTiles>.tileWide{grid-column:1 / -1}
  .mode.pick.gameTile.tileWide,.tileWide>.mode.pick.gameTile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .gameTile.tileWide .tileArt,.tileWide>.gameTile .tileArt{aspect-ratio:auto;min-height:150px;border-bottom:none;border-inline-end:2.5px solid var(--line);border-radius:15.5px 0 0 5.5px}
  [dir=rtl] .gameTile.tileWide .tileArt,[dir=rtl] .tileWide>.gameTile .tileArt{border-radius:0 5.5px 15.5px 0}
  .gameTile.tileWide .tileBody,.tileWide>.gameTile .tileBody{padding:14px 14px 14px}
  .gameTile.tileWide .tileIcon,.tileWide>.gameTile .tileIcon{bottom:10px}
}
@media (min-width:600px) and (max-width:999px){
  .modes.gameTiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px}
}
@media (min-width:1000px){
  /* auto-fill, not auto-fit: multiplayer's three tiles keep the solo tile
     size instead of stretching to a third of the row each */
  .modes.gameTiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px 18px}
  .gameTile .mt{font-size:19px}
}

/* The featured local-topography tile: art beside the text from tablet up,
   stacked on a phone. Coral like the hub's Singleplayer button. */
.mode.pick.gameTile.featured{--tc:var(--accent);--tcSoft:#ffe3db}
.gameTile.featured .tileArt{aspect-ratio:16/7}
.gameTile.featured .tileBody{padding:18px 20px 20px;gap:6px}
.mode.pick.gameTile.featured .mt{display:flex;align-items:center;gap:8px;font-size:clamp(23px,4.6vw,30px)}
.mode.pick.gameTile.featured .md{font-size:14.5px}
.tileEyebrow{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#b4483a}
.tileCountry{align-self:flex-start;display:inline-flex;align-items:center;background:#fff;border:2px solid var(--line);border-radius:999px;padding:2px 12px;font-weight:800;font-size:13.5px}
.tileCountry:empty{display:none}
.gameTile .tileNote{display:flex;align-items:flex-start;gap:6px;font-weight:800;color:var(--text);font-size:13px;background:rgba(255,255,255,.7);border:2px dashed rgba(41,48,61,.25);border-radius:10px 4px 10px 4px;padding:7px 10px;margin-top:4px}
.gameTile.featured .tilePlay{font-size:17px;padding:8px 20px 8px 22px;margin-top:12px;background:var(--accent);border:2.5px solid var(--line);box-shadow:3px 3px 0 var(--line)}
.gameTile.featured:hover .tilePlay{background:#e85a48;transform:translateX(3px)}
/* The pulse is a ring on its own layer (::before), not a scale on the
   button: scaling the button re-rasterised its text every frame and fought
   the hover translate on the same transform, which made it stutter. The ring
   only animates transform and opacity, so it stays on the compositor. */
.gameTile.featured .tilePlay,#spBtn.hubTile .tilePlay{position:relative;isolation:isolate}
.gameTile.featured .tilePlay::before,#spBtn.hubTile .tilePlay::before{content:"";position:absolute;inset:-2.5px;border-radius:inherit;border:3px solid var(--accent);z-index:-1;pointer-events:none;will-change:transform,opacity;animation:tilePlayRing 2.2s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes tilePlayRing{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.28,1.6);opacity:0}}
.gameTile.featured .tilePlay,.gameTile.featured:hover .tilePlay,#spBtn.hubTile .tilePlay,#spBtn.hubTile:hover .tilePlay{transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
@media (min-width:640px){
  .mode.pick.gameTile.featured{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .gameTile.featured .tileArt{aspect-ratio:auto;min-height:230px;border-bottom:none;border-inline-end:2.5px solid var(--line);border-radius:15.5px 0 0 5.5px}
  [dir=rtl] .gameTile.featured .tileArt{border-radius:0 5.5px 15.5px 0}
  .gameTile.featured .tileBody{justify-content:center;padding:24px 28px}
}

/* the challenge / size pickers that open under a tile */
#playModeWrap #rankedPick,#playModeWrap #popChallengePick{margin-top:16px;background:#fff;border:2.5px solid var(--line);border-radius:16px 7px 16px 7px;box-shadow:4px 4px 0 var(--soft);padding:16px}
#rankedPick .modes,#popChallengePick .modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
#rankedPick .modes>.catDivider,#rankedPick .modes>.catHint,#popChallengePick .modes>.catDivider,#popChallengePick .modes>.catHint{grid-column:1 / -1}
#rankedPick .mode,#popChallengePick .mode{padding:12px 14px}
#rankedPick .mode .mt,#popChallengePick .mode .mt{font-size:16px}

@media (prefers-reduced-motion:reduce){
  .tileArt .ring,.gameTile.featured .tilePlay::before,#spBtn.hubTile .tilePlay::before{animation:none;opacity:0}
  .mode.pick.gameTile,.tileArt svg,.tileIcon,.tilePlay{transition:none}
}

/* Hub: Singleplayer / Multiplayer in the same tile language as the mode
   screen. The row of small mode icons says what is inside each button, which
   replaced the separate special-modes row that used to repeat the modes here. */
#modeCard .modeSelect{background:none;border:none;box-shadow:none;padding:0;justify-content:center}
#modeCard .mode.pick.hubTile{--tc:var(--accent2);--tcSoft:#d9f5f1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;padding:18px 20px;text-align:start;color:var(--text);background:#fff;backdrop-filter:none;border:2.5px solid var(--line);border-radius:18px 8px 18px 8px;box-shadow:4px 4px 0 var(--line);transition:transform .14s ease,box-shadow .14s ease}
#modeCard #spBtn.hubTile{--tc:var(--accent);--tcSoft:#ffe3db;background:linear-gradient(120deg,#fff 45%,#ffe9e2)}
#modeCard .mode.pick.hubTile:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--line)}
#modeCard .mode.pick.hubTile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
#modeCard .mode.pick.hubTile:focus-visible{outline:3px solid var(--tc);outline-offset:3px}
#modeCard .mode.pick.hubTile.picked{background:var(--tcSoft);border-color:var(--line)}
#modeCard .mode.pick.hubTile::after{content:none}
.hubTileIcon{display:grid;place-items:center;width:60px;height:60px;background:var(--tcSoft);border:2.5px solid var(--line);border-radius:16px 7px 16px 7px;box-shadow:2px 2px 0 var(--line);transition:transform .2s ease}
.hubTile:hover .hubTileIcon{transform:translateY(-3px) rotate(-5deg)}
.hubTileText{display:flex;flex-direction:column;gap:8px;min-width:0}
.hubTile .mt{font-family:'Baloo 2',cursive;font-weight:800;font-size:clamp(22px,5.4vw,28px);line-height:1.05}
.hubTileModes{display:flex;flex-wrap:wrap;gap:5px}
.hubTileModes .hm{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--hmc,#fff)}
.hm.local{--hmc:#ffe3db}.hm.worldtour{--hmc:#ece4ff}.hm.countryhunt{--hmc:#e0ecff}
.hm.wonders{--hmc:#fcedc8}.hm.travelmode{--hmc:#d9f5f1}.hm.popchallenge{--hmc:#d8f4e8}
.hubTile .tilePlay{margin-top:0;align-self:center}
.hubTile:hover .tilePlay{background:var(--tc);transform:translateX(2px)}
#spBtn.hubTile .tilePlay{font-size:17px;padding:8px 18px 8px 20px;background:var(--accent);border:2.5px solid var(--line);box-shadow:3px 3px 0 var(--line)}
#spBtn.hubTile:hover .tilePlay{background:#e85a48}
@media (max-width:420px){
  #modeCard .mode.pick.hubTile{gap:12px;padding:14px 14px}
  .hubTileIcon{width:50px;height:50px}
  .hubTileModes{gap:4px}
  .hubTileModes .hm{width:24px;height:24px}
  .hubTileModes .hm img,.hubTileModes .hm svg{width:14px;height:14px}
  .hubTile .tilePlay{padding:5px 11px 5px 12px}
  #spBtn.hubTile .tilePlay{font-size:15px;padding:6px 13px 6px 15px}
}
@media (min-width:900px){
  #modeCard .modeSelect{min-height:0}
  #modeCard .mode.pick.hubTile{gap:22px;padding:26px 26px}
  .hubTileIcon{width:74px;height:74px}
  .hubTile .mt{font-size:32px}
  .hubTileModes .hm{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){ #modeCard .mode.pick.hubTile,.hubTileIcon{transition:none} }
/* The country control: what you play is the first choice on this card, so
   it sits above the two tiles as a full-width bar (flex order), with the flag
   in its own badge, "Playing" as a small label and a caret that opens the
   list. paintModeCountryBtn() writes the three parts. */
#modeCard #modeCountryPick{order:-1;align-self:stretch;width:100%}
#modeCard .cpick.cpickMid .cpickBtn{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;height:auto;padding:10px 12px 10px 10px;text-align:start;white-space:normal;background:linear-gradient(120deg,#dff6f2,#fff 75%);border:2.5px solid var(--line);border-radius:18px 8px 18px 8px;box-shadow:4px 4px 0 var(--line);transition:transform .14s ease,box-shadow .14s ease}
#modeCard .cpick.cpickMid .cpickBtn:hover,#modeCard .cpick.cpickMid .cpickBtn:focus-visible{background:linear-gradient(120deg,#cff1eb,#fff 75%);transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--line)}
.cpFlag{flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;border:2.5px solid var(--line);font-size:28px;line-height:1}
.cpText{display:flex;flex-direction:column;min-width:0;flex:1}
.cpLabel{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1f8c81}
.cpName{font-family:'Baloo 2',cursive;font-weight:800;font-size:22px;line-height:1.15;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpCaret{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--line);color:#fff;transition:transform .2s ease}
#modeCountryBtn[aria-expanded="true"] .cpCaret{transform:rotate(180deg)}
#modeCard #modeCountryPop{left:0;right:0;width:auto}
@media (min-width:900px){
  #modeCard .cpick.cpickMid .cpickBtn{padding:12px 16px 12px 12px;gap:16px}
  .cpFlag{width:58px;height:58px;font-size:32px}
  .cpName{font-size:27px}
}

/* Round 2 on the mode screen: bigger Play buttons and mode icons, quieter
   illustrations. The art sits back at reduced strength and only comes up to
   full colour under the pointer, so the icon and name lead, not the picture. */
.tileArt{aspect-ratio:2/1}
.tileArt svg{opacity:.5;filter:saturate(.65);transition:opacity .25s ease,filter .25s ease,transform .3s ease}
.gameTile:hover .tileArt svg,.gameTile:focus-visible .tileArt svg{opacity:.9;filter:none;transform:scale(1.02)}
.tileArt .ring{animation:none;opacity:.6}
.gameTile:hover .tileArt .ring{animation:tileRing 2.2s ease-out infinite}
.tileIcon{width:62px;height:62px;bottom:-30px;border-radius:17px 7px 17px 7px}
.tileBody{padding-top:40px}
.gameTiles .tilePlay{font-size:16.5px;padding:8px 18px 8px 20px;margin-top:14px;gap:8px}
.gameTiles .tilePlay svg{width:12px;height:14px}
.featIcon{display:inline-grid;place-items:center;width:52px;height:52px;flex:0 0 auto;background:#ffe3db;border:2.5px solid var(--line);border-radius:15px 6px 15px 6px;box-shadow:2px 2px 0 var(--line)}
.mode.pick.gameTile.featured .mt{gap:12px}
.gameTile.featured .tilePlay{font-size:21px;padding:11px 28px 11px 30px;gap:10px;margin-top:16px}
.gameTile.featured .tilePlay svg{width:14px;height:16px}
.gameTile.featured .tileArt{aspect-ratio:2/1}
@media (min-width:640px){ .gameTile.featured .tileArt{aspect-ratio:auto;min-height:210px} }
@media (max-width:420px){
  .tileIcon{width:52px;height:52px;left:10px;bottom:-25px}
  .tileIcon img,.tileIcon svg{width:34px;height:34px}
  .tileBody{padding-top:34px}
  .gameTiles .tilePlay{font-size:15px;padding:7px 14px 7px 16px}
  .featIcon{width:44px;height:44px}
  .featIcon img,.featIcon svg{width:28px;height:28px}
  .gameTile.featured .tilePlay{font-size:19px;padding:10px 24px 10px 26px}
}
@media (max-width:599px){ .gameTile.tileWide .tileIcon,.tileWide>.gameTile .tileIcon{bottom:10px} }
@media (prefers-reduced-motion:reduce){ .gameTile:hover .tileArt .ring{animation:none} .tileArt svg{transition:none} }
/* the bar draws its own caret (.cpCaret); drop the generic one */
#modeCard .cpick.cpickMid .cpickBtn::after{content:none}
/* hub Play pills at the same size as the mode-screen tiles */
.hubTile .tilePlay{font-size:16.5px;padding:8px 18px 8px 20px;gap:8px}
#spBtn.hubTile .tilePlay{font-size:19px;padding:10px 22px 10px 24px}
@media (max-width:420px){
  .hubTile .tilePlay{font-size:15px;padding:7px 13px 7px 15px}
  #spBtn.hubTile .tilePlay{font-size:16px;padding:8px 14px 8px 16px}
}

/* Round 3: Local topography floats. No card, no art background, the map in
   full colour at full size beside a short text block: title, country, Play.
   The ranked description is dropped here (the eyebrow says ranked already)
   and the login/trial note is a quiet line instead of a boxed callout. */
.mode.pick.gameTile.featured,.mode.pick.gameTile.featured:hover,.mode.pick.gameTile.featured.picked,.mode.pick.gameTile.featured:active{background:none;border:none;box-shadow:none;transform:none}
.mode.pick.gameTile.featured::after{content:none}
.gameTile.featured .tileArt,.gameTile.featured .tileArt{background:none;border:none;border-radius:0;aspect-ratio:16/9}
.gameTile.featured .tileArt svg,.gameTile.featured:hover .tileArt svg{opacity:1;filter:none;border-radius:0}
.gameTile.featured:hover .tileArt svg{transform:scale(1.03)}
.gameTile.featured .tileArt .ring{animation:tileRing 2.2s ease-out infinite;opacity:1}
.gameTile.featured .tileBody{padding:6px 4px 8px;gap:10px}
.gameTile.featured .tileBody>.md:not(.tileNote){display:none}
.gameTile.featured .tileNote{background:none;border:none;padding:0;margin:0;font-size:12.5px;font-weight:700;color:var(--muted)}
.mode.pick.gameTile.featured .mt{font-size:clamp(28px,7vw,44px);line-height:1.05}
.gameTile.featured .tileCountry{font-size:14.5px;padding:4px 14px;box-shadow:2px 2px 0 var(--line)}
.gameTile.featured .tilePlay{margin-top:6px}
.gameTile.featured:hover .tilePlay{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--line)}
.gameTile.featured:active .tilePlay{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.gameTile.featured:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:18px 8px 18px 8px}
@media (min-width:640px){
  .mode.pick.gameTile.featured{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center}
  .gameTile.featured .tileArt{aspect-ratio:16/10;min-height:0;border:none}
  .gameTile.featured .tileBody{padding:0}
}
#playModeWrap #localTopoRow{margin-bottom:8px}
.gameTile.featured .tileNote.tileChip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#fff6d6;border:2px solid var(--line);border-radius:999px;padding:3px 12px 3px 10px;font-size:13px;font-weight:800;color:var(--text)}

/* ------------------------------------------------------------------------
   Fluid scale for the game-select screen, the hub tiles and the about text.
   The column grows with the window (up to 1640px) and every size in it is a
   clamp() on the viewport width, so a 2000px+ monitor gets proportionally
   bigger tiles, type, icons and Play buttons instead of a 1120px island.
   Play-pill padding is in em so it follows its own font size.
   ------------------------------------------------------------------------ */
#playModeWrap{width:min(1640px,100%)}
@media (min-width:900px){ #playModeWrap{width:min(1640px,92vw)} }
.pickHead{gap:clamp(12px,1.2vw,24px);margin-bottom:clamp(18px,2vw,40px)}
.pickTitle{font-size:clamp(26px,2.6vw,54px)}
.pickBack{font-size:clamp(13.5px,.95vw,19px);padding:.6em 1.1em}
#playModeWrap .specialModesTitle{font-size:clamp(20px,1.8vw,38px);margin-bottom:clamp(14px,1.3vw,26px)}
#playModeWrap .modesDivider{margin-top:clamp(26px,3vw,60px)}

/* featured */
.mode.pick.gameTile.featured .mt{font-size:clamp(30px,3.7vw,78px);gap:clamp(10px,1vw,20px)}
.featIcon{width:clamp(46px,4.2vw,88px);height:clamp(46px,4.2vw,88px)}
.featIcon img,.featIcon svg{width:62%;height:62%}
.tileEyebrow{font-size:clamp(11.5px,.85vw,17px)}
.gameTile.featured .tileCountry{font-size:clamp(14px,1.05vw,22px);padding:.25em .95em}
.gameTile.featured .tileNote.tileChip{font-size:clamp(13px,.95vw,20px);padding:.2em .9em .2em .75em}
.gameTile.featured .tileNote{font-size:clamp(12.5px,.9vw,18px)}
.gameTile.featured .tileBody{gap:clamp(10px,1vw,20px)}
.gameTile.featured .tilePlay{font-size:clamp(20px,1.75vw,36px);padding:.5em 1.3em .5em 1.4em;gap:.45em}
.gameTile.featured .tilePlay svg{width:.62em;height:.72em}
@media (min-width:640px){
  .mode.pick.gameTile.featured{gap:clamp(24px,3vw,64px)}
}

/* special-mode tiles */
.modes.gameTiles{gap:clamp(14px,1.4vw,28px) clamp(10px,1.3vw,26px)}
.tileIcon{width:clamp(52px,4.4vw,92px);height:clamp(52px,4.4vw,92px);bottom:calc(clamp(52px,4.4vw,92px) / -2);left:clamp(10px,1vw,20px)}
[dir=rtl] .tileIcon{left:auto;right:clamp(10px,1vw,20px)}
.tileIcon img,.tileIcon svg{width:64%;height:64%}
.tileBody{padding:calc(clamp(52px,4.4vw,92px) / 2 + clamp(10px,.9vw,18px)) clamp(12px,1.2vw,24px) clamp(12px,1.1vw,22px)}
.mode.pick.gameTile .mt{font-size:clamp(16px,1.4vw,30px)}
.mode.pick.gameTile .md{font-size:clamp(12.5px,.95vw,19px)}
.gameTiles .tilePlay{font-size:clamp(15px,1.15vw,24px);padding:.45em 1.05em .45em 1.15em;gap:.45em;margin-top:clamp(12px,1vw,20px)}
.gameTiles .tilePlay svg{width:.62em;height:.72em}
.tileBadge{font-size:clamp(11px,.8vw,16px)}
@media (max-width:599px){
  .gameTile.tileWide .tileBody,.tileWide>.gameTile .tileBody{padding:14px}
  .gameTile.tileWide .tileIcon,.tileWide>.gameTile .tileIcon{bottom:10px}
}

/* pickers that open under a tile */
#rankedPick .mode .mt,#popChallengePick .mode .mt{font-size:clamp(16px,1.15vw,24px)}
#rankedPick .modes,#popChallengePick .modes{grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(200px,15vw,320px)),1fr));gap:clamp(10px,.9vw,18px)}

/* hub tiles and country bar follow the same scale from desktop up */
@media (min-width:900px){
  #modeCard .mode.pick.hubTile{padding:clamp(22px,1.8vw,40px);gap:clamp(18px,1.6vw,34px)}
  .hubTileIcon{width:clamp(70px,5.4vw,116px);height:clamp(70px,5.4vw,116px)}
  .hubTileIcon img,.hubTileIcon svg{width:58%;height:58%}
  .hubTile .mt{font-size:clamp(30px,2.5vw,54px)}
  .hubTileModes{gap:clamp(5px,.45vw,10px)}
  .hubTileModes .hm{width:clamp(30px,2.3vw,50px);height:clamp(30px,2.3vw,50px)}
  .hubTileModes .hm img,.hubTileModes .hm svg{width:58%;height:58%}
  .hubTile .tilePlay{font-size:clamp(16px,1.2vw,26px);padding:.5em 1.1em .5em 1.2em}
  #spBtn.hubTile .tilePlay{font-size:clamp(19px,1.5vw,32px)}
  .cpFlag{width:clamp(56px,4.2vw,90px);height:clamp(56px,4.2vw,90px);font-size:clamp(30px,2.3vw,50px)}
  .cpLabel{font-size:clamp(11.5px,.85vw,17px)}
  .cpName{font-size:clamp(26px,2.1vw,46px)}
  .cpCaret{width:clamp(38px,2.7vw,58px);height:clamp(38px,2.7vw,58px)}
  #modeCard .cpick.cpickMid .cpickBtn{padding:clamp(12px,.9vw,20px) clamp(16px,1.3vw,28px) clamp(12px,.9vw,20px) clamp(12px,.9vw,20px)}
}

/* "What is GuessTheDot?": plain text on the page, no card, same width as
   the column above it and scaling with it */

/* columns: three up to 1099px, then five that grow with the window (the
   minimum is a share of the viewport, so a wide screen gets wider tiles,
   not more empty columns); multiplayer's three keep the same tile size */
@media (min-width:600px) and (max-width:1099px){ .modes.gameTiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .modes.gameTiles{grid-template-columns:repeat(auto-fill,minmax(max(170px,15.5vw),1fr))} }
/* hub: the mode icons stay on one row and shrink a little before wrapping */
.hubTileModes{flex-wrap:nowrap}
.hubTileModes .hm{flex:0 1 auto;min-width:0;aspect-ratio:1}
@media (min-width:900px){
  #modeCard{grid-template-columns:1fr 1fr}
  .hubTileIcon{width:clamp(66px,4.6vw,100px);height:clamp(66px,4.6vw,100px)}
  .hubTileModes .hm{width:clamp(28px,2vw,42px);height:auto}
}
@media (min-width:1100px){ .modes.gameTiles{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:900px){ #playModeWrap{width:min(2100px,90vw)} }

/* Round 5: fit, not just scale.
   Hub: the map and the right-hand column are one row of equal height. The
   map stretches to the row (its dots are placed in %), the column is a flex
   stack whose two tiles share the height left under the country bar, and
   the sizes inside are tuned so the column is never taller than the map.
   Mode screen: the column is capped at 1600px, and the Local topography
   block is sized on the viewport height as well as the width, so on a wide
   but short window it still fits with room above the special modes. */
@media (min-width:900px){
  #modeCard{align-items:stretch}
  #modeCard .demoMap{height:auto;min-height:clamp(420px,min(30vw,54vh),600px);align-self:stretch}
  #modeCard .modeSelect{display:flex;flex-direction:column;min-height:0;height:100%}
  #modeCard .modeGrid{flex:1;display:flex;flex-direction:column;gap:clamp(14px,1.1vw,22px)}
  #modeCard .modeChoiceRow{flex:1;display:flex;flex-direction:column;gap:clamp(14px,1.1vw,22px)}
  #modeCard .modeChoiceRow>.hubTile{flex:1}
  #modeCard .mode.pick.hubTile{padding:clamp(16px,1.3vw,28px) clamp(18px,1.5vw,32px);gap:clamp(14px,1.3vw,26px)}
  .hubTileIcon{width:clamp(58px,min(4vw,7.5vh),88px);height:clamp(58px,min(4vw,7.5vh),88px)}
  .hubTile .mt{font-size:clamp(24px,min(2vw,3.8vh),42px)}
  .hubTileText{gap:clamp(6px,.6vw,12px)}
  .hubTileModes .hm{width:clamp(26px,min(1.8vw,3.4vh),38px)}
  .hubTile .tilePlay{font-size:clamp(15px,min(1.05vw,2vh),21px)}
  #spBtn.hubTile .tilePlay{font-size:clamp(17px,min(1.25vw,2.4vh),25px)}
  .cpFlag{width:clamp(48px,min(3.4vw,6.4vh),74px);height:clamp(48px,min(3.4vw,6.4vh),74px);font-size:clamp(26px,min(1.9vw,3.6vh),40px)}
  .cpName{font-size:clamp(22px,min(1.7vw,3.2vh),36px)}
  .cpLabel{font-size:clamp(11px,.75vw,15px)}
  .cpCaret{width:clamp(34px,2.3vw,48px);height:clamp(34px,2.3vw,48px)}
  #modeCard .cpick.cpickMid .cpickBtn{padding:clamp(10px,.75vw,16px) clamp(14px,1.1vw,24px) clamp(10px,.75vw,16px) clamp(10px,.75vw,16px)}

  #playModeWrap{width:min(1600px,90vw)}
}

/* featured: the map has a height tied to the viewport height and takes the
   width that gives it; it starts at the column's left edge, in line with the
   tiles below, and the text sits right next to it */
@media (min-width:640px){
  .mode.pick.gameTile.featured{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,2.6vw,56px)}
  .gameTile.featured .tileArt{height:clamp(190px,34vh,400px);width:auto;aspect-ratio:16/10;min-height:0}
  .gameTile.featured .tileArt svg{inset:0}
}
.mode.pick.gameTile.featured .mt{font-size:clamp(28px,min(3.2vw,6vh),64px)}
.featIcon{width:clamp(44px,min(3.6vw,7vh),76px);height:clamp(44px,min(3.6vw,7vh),76px)}
.gameTile.featured .tilePlay{font-size:clamp(19px,min(1.5vw,2.8vh),30px)}
.gameTile.featured .tileCountry{font-size:clamp(14px,min(.95vw,1.9vh),19px)}
.gameTile.featured .tileNote.tileChip{font-size:clamp(13px,min(.85vw,1.7vh),17px)}
.pickHead{margin-bottom:clamp(14px,min(1.6vw,2.6vh),32px)}
.pickTitle{font-size:clamp(26px,min(2.3vw,4.4vh),46px)}
#playModeWrap .modesDivider{margin-top:clamp(22px,min(2.4vw,4vh),48px)}
/* the drawing's viewBox is cropped to the blob itself, so its left edge is
   the tile column's left edge */
.gameTile.featured .tileArt{aspect-ratio:3/2}
@media (min-width:640px){ .gameTile.featured .tileArt{aspect-ratio:3/2} }
.gameTile.featured .tileNote.tileChip{font-size:clamp(14px,min(.95vw,1.9vh),19px);padding:.25em .95em .25em .8em}

/* Icon centring in every badge (hub tile icon, hub mode dots, mode-tile
   icon, featured icon). The [data-icon] span icons.js fills is inline, and
   an image sized in % of that span made the span resolve to the badge's full
   width with the image left in it (13px off centre) and on the text baseline.
   The span is now a flex box covering the badge, the image is centred in it
   and sized in % of the badge; the hub mode dots get an equal fixed width and
   height instead of aspect-ratio, which rounded them to 23x24. */
.hubTileIcon>[data-icon],.hubTileModes .hm>[data-icon],.tileIcon>[data-icon],.featIcon>[data-icon]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:0}
.hubTileIcon>[data-icon]>*,.hubTileModes .hm>[data-icon]>*,.tileIcon>[data-icon]>*,.featIcon>[data-icon]>*{display:block;flex:0 0 auto}
.hubTileIcon img,.hubTileIcon svg{width:58%;height:58%}
.hubTileModes .hm img,.hubTileModes .hm svg{width:60%;height:60%}
.tileIcon img,.tileIcon svg{width:64%;height:64%}
.featIcon img,.featIcon svg{width:62%;height:62%}
.hubTileModes .hm{--hm:28px;width:var(--hm);height:var(--hm);flex:0 0 auto;aspect-ratio:auto;box-sizing:border-box}
@media (max-width:420px){ .hubTileModes .hm{--hm:24px} .tileIcon img,.tileIcon svg{width:64%;height:64%} }
@media (min-width:900px){ .hubTileModes .hm{--hm:clamp(26px,min(1.8vw,3.4vh),38px)} }

/* ------------------------------------------------------------------------
   Airier mode screen: fewer boxes, a play button that looks like one.
   The special-mode tiles lose their card (border, white fill, offset
   shadow): the soft illustration panel is the only shape, with the icon,
   name and line underneath on the page itself. Every "Play" pill became a
   round play button (a triangle, or a lock while the mode is locked), sat
   on the corner of its illustration; Local topography gets a big one. The
   country and free-games labels are plain text instead of boxed chips.
   ------------------------------------------------------------------------ */
.mode.pick.gameTile:not(.featured),.mode.pick.gameTile:not(.featured):hover,.mode.pick.gameTile:not(.featured):active,.mode.pick.gameTile:not(.featured).picked{background:none;border:none;box-shadow:none;transform:none;border-radius:0}
.mode.pick.gameTile::after{content:none}
.gameTile:not(.featured) .tileArt{border:none;border-radius:20px 9px 20px 9px;aspect-ratio:16/9;transition:transform .2s ease,box-shadow .2s ease}
.gameTile:not(.featured):hover .tileArt,.gameTile:not(.featured):focus-visible .tileArt{transform:translateY(-4px);box-shadow:0 16px 28px -18px rgba(41,48,61,.55)}
.gameTile:not(.featured) .tileArt svg{opacity:.72;filter:saturate(.8);border-radius:inherit}
.gameTile:not(.featured):hover .tileArt svg{opacity:1;filter:none;transform:none}
.mode.pick.gameTile:not(.featured):focus-visible{outline:none}
.mode.pick.gameTile:not(.featured):focus-visible .tileArt{outline:3px solid var(--tc);outline-offset:3px}
.gameTile.popchallenge.locked .tileArt{filter:grayscale(.35)}

#playModeWrap .gameTile:not(.featured) .tileBody{padding:clamp(14px,1.1vw,20px) 2px 0;gap:6px}
.tileHead{display:flex;align-items:center;gap:clamp(8px,.7vw,12px);min-width:0}
.tileHead .mt{min-width:0}
#playModeWrap .gameTile .tileIcon{position:static;flex:0 0 auto;width:clamp(32px,2.3vw,46px);height:clamp(32px,2.3vw,46px);background:none;border:none;box-shadow:none;border-radius:0;transform:none}
#playModeWrap .gameTile .tileIcon img,#playModeWrap .gameTile .tileIcon svg{width:100%;height:100%}
.gameTile:hover .tileIcon{transform:rotate(-6deg)}
#playModeWrap .mode.pick.gameTile:not(.featured) .mt{font-size:clamp(17px,1.35vw,28px);line-height:1.15}

/* the round play button */
#playModeWrap .tilePlay,#modeCard .tilePlay{--pb:clamp(46px,3.2vw,60px);position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:var(--pb);height:var(--pb);margin:0;padding:0;border-radius:50%;background:var(--tc);color:#fff;border:2.5px solid var(--line);box-shadow:3px 3px 0 var(--line);font-size:0;transform:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.gameTile .tileBody{--pb:clamp(46px,3.2vw,60px)}
#playModeWrap .tilePlay svg,#modeCard .tilePlay svg{width:48%;height:48%;display:block}
.tilePlay .icLock{display:none}
.gameTile.locked .tilePlay .icPlay,.gameTile.isLocked .tilePlay .icPlay{display:none}
.gameTile.locked .tilePlay .icLock,.gameTile.isLocked .tilePlay .icLock{display:block}
#playModeWrap .gameTile.locked .tilePlay,#playModeWrap .gameTile.isLocked .tilePlay{background:#a39b8d}
#playModeWrap .gameTile:hover .tilePlay,#playModeWrap .gameTile:focus-visible .tilePlay,#modeCard .hubTile:hover .tilePlay{transform:scale(1.08);box-shadow:4px 5px 0 var(--line);background:var(--tc)}
#playModeWrap .gameTile.locked:hover .tilePlay,#playModeWrap .gameTile.isLocked:hover .tilePlay{background:#948b7c}
#playModeWrap .gameTile:active .tilePlay,#modeCard .hubTile:active .tilePlay{transform:scale(.96);box-shadow:1px 1px 0 var(--line)}
[dir=rtl] #playModeWrap .tilePlay{right:auto;left:10px}
[dir=rtl] .tilePlay .icPlay{transform:scaleX(-1)}
.tileBadge{inset-inline-end:10px;top:10px}

/* phone: an odd last tile spans the row as art | text; its button stays on the art */
@media (max-width:599px){
  .gameTile.tileWide .tileArt,.tileWide>.gameTile .tileArt{border-radius:20px 9px 20px 9px}
  #playModeWrap .gameTile.tileWide .tilePlay,#playModeWrap .tileWide>.gameTile .tilePlay{bottom:10px}
  #playModeWrap .gameTile.tileWide .tileBody,#playModeWrap .tileWide>.gameTile .tileBody{padding:4px 4px 4px 14px;justify-content:center}
  #playModeWrap .gameTile.tileWide .tileArt,#playModeWrap .tileWide>.gameTile .tileArt{aspect-ratio:auto;width:100%;height:100%;min-height:130px}
}

/* featured: frameless icon, plain-text labels, one big round play button */
#playModeWrap .featIcon{background:none;border:none;box-shadow:none;border-radius:0}
#playModeWrap .featIcon img,#playModeWrap .featIcon svg{width:100%;height:100%}
#playModeWrap .gameTile.featured .tileCountry,#playModeWrap .gameTile.featured .tileNote.tileChip{background:none;border:none;box-shadow:none;padding:0;border-radius:0;font-weight:800;color:var(--muted)}
#playModeWrap .gameTile.featured .tileCountry{color:var(--text)}
#playModeWrap .gameTile.featured .tilePlay{--pb:clamp(66px,min(5.2vw,9.5vh),104px);position:relative;right:auto;bottom:auto;margin-top:clamp(8px,1vw,18px);background:var(--accent);border-width:3px;box-shadow:4px 4px 0 var(--line)}
#playModeWrap .gameTile.featured .tilePlay::before{border-radius:50%;animation-name:tilePlayRingRound}
@keyframes tilePlayRingRound{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.45);opacity:0}}
#playModeWrap .gameTile.featured:hover .tilePlay{transform:scale(1.07);box-shadow:5px 6px 0 var(--line);background:#e85a48}
#playModeWrap .gameTile.featured.isLocked .tilePlay{background:#a39b8d}
#playModeWrap .gameTile.featured.isLocked .tilePlay::before{content:none}

/* hub: the same round button on Singleplayer / Multiplayer */
#modeCard .hubTile .tilePlay{--pb:clamp(48px,min(3.4vw,6.4vh),70px);position:relative;right:auto;bottom:auto;align-self:center}
#modeCard #mpBtn .tilePlay{background:var(--line)}
#modeCard #mpBtn:hover .tilePlay{background:var(--accent2)}
#modeCard #spBtn .tilePlay{background:var(--accent);--pb:clamp(54px,min(3.9vw,7.2vh),80px)}
#modeCard #spBtn:hover .tilePlay{background:#e85a48}
#modeCard #spBtn .tilePlay::before{border-radius:50%;animation-name:tilePlayRingRound}
@media (prefers-reduced-motion:reduce){ #playModeWrap .tilePlay,#modeCard .tilePlay,.gameTile:not(.featured) .tileArt{transition:none} }
/* one glyph at a time: play, or lock while locked */
#playModeWrap .tilePlay .icLock,#modeCard .tilePlay .icLock{display:none}
#playModeWrap .gameTile.locked .tilePlay .icPlay,#playModeWrap .gameTile.isLocked .tilePlay .icPlay{display:none}
#playModeWrap .gameTile.locked .tilePlay .icLock,#playModeWrap .gameTile.isLocked .tilePlay .icLock{display:block}
@media (max-width:420px){
  #playModeWrap .gameTile .tileIcon{width:26px;height:26px}
  #playModeWrap .mode.pick.gameTile:not(.featured) .mt{font-size:15.5px}
  .tileHead{gap:7px}
}
/* the play glyph lives inside .tileArt, so undo the illustration's svg rules.
   The triangle path is drawn with its centroid on the centre, no extra nudge. */
#playModeWrap .tileArt .tilePlay svg{position:static;inset:auto;border-radius:0;opacity:1;filter:none;transform:none;transition:none}
[dir=rtl] #playModeWrap .tileArt .tilePlay .icPlay{transform:scaleX(-1)}
#playModeWrap .tileArt .tilePlay .icLock{display:none}
#playModeWrap .gameTile.locked .tileArt .tilePlay .icPlay{display:none}
#playModeWrap .gameTile.locked .tileArt .tilePlay .icLock{display:block}
/* older #spBtn.hubTile pill rules gave this one padding, squeezing the glyph */
#modeCard #spBtn .tilePlay,#modeCard #mpBtn .tilePlay{padding:0;gap:0;font-size:0}

/* ------------------------------------------------------------------------
   Hover: the button dissolves and only your Dot is left — the same reveal
   solo.js already uses when a guessed dot becomes your Dot mid-round
   (onPick(): the plain dot fades out, an L.divIcon holding nothing but
   avatarSVG() pops up in its place — see .av-marker/@keyframes avpop in
   solo.css). No colour, no border, no triangle behind it: just the Dot,
   popping up with the same scale-with-overshoot. .tilePlayDot is filled
   once at load (paintTilePlayDots() in index.js) with the player's own Dot
   in 'cheer' mood.
   .tilePlay already carries several background/border/shadow rules at
   different specificities (its mode colour, the locked-grey state, each
   hub button's own hover colour) — !important says plainly "none of that
   applies while hovering", the same idiom already used above for the
   onboarding and date-input overrides.
   ------------------------------------------------------------------------ */
.tilePlayDot{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.3);pointer-events:none;transition:opacity .12s ease;filter:drop-shadow(2px 3px 0 rgba(41,48,61,.28))}
#playModeWrap .tilePlayDot svg,#modeCard .tilePlayDot svg{width:100%;height:auto;display:block}
#playModeWrap .tilePlay .icPlay,#playModeWrap .tilePlay .icLock,#modeCard .tilePlay .icPlay,#modeCard .tilePlay .icLock{transition:opacity .1s ease}
/* The reveal only on a real hover. On a touch screen the first tap counts as
   a hover, and because that tap makes the Dot appear, iOS treats it as
   "show the hover content" and swallows the click: you had to tap twice. */
#playModeWrap .gameTile:focus-visible .tilePlay,#modeCard .hubTile:focus-visible .tilePlay{background:none!important;border-color:transparent!important;box-shadow:none!important;transform:none!important}
#playModeWrap .gameTile:focus-visible .tilePlay .icPlay,#playModeWrap .gameTile:focus-visible .tilePlay .icLock,#modeCard .hubTile:focus-visible .tilePlay .icPlay,#modeCard .hubTile:focus-visible .tilePlay .icLock{opacity:0}
#playModeWrap .gameTile:focus-visible .tilePlayDot,#modeCard .hubTile:focus-visible .tilePlayDot{opacity:1;transform:scale(1);animation:tilePlayDotPop .4s ease-out}
@media (hover:hover){
  #playModeWrap .gameTile:hover .tilePlay,#modeCard .hubTile:hover .tilePlay{background:none!important;border-color:transparent!important;box-shadow:none!important;transform:none!important}
  #playModeWrap .gameTile:hover .tilePlay .icPlay,#playModeWrap .gameTile:hover .tilePlay .icLock,#modeCard .hubTile:hover .tilePlay .icPlay,#modeCard .hubTile:hover .tilePlay .icLock{opacity:0}
  #playModeWrap .gameTile:hover .tilePlayDot,#modeCard .hubTile:hover .tilePlayDot{opacity:1;transform:scale(1);animation:tilePlayDotPop .4s ease-out}
}
@keyframes tilePlayDotPop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .tilePlayDot,#playModeWrap .tilePlay .icPlay,#playModeWrap .tilePlay .icLock,#modeCard .tilePlay .icPlay,#modeCard .tilePlay .icLock{transition:none}
  #playModeWrap .gameTile:hover .tilePlayDot,#playModeWrap .gameTile:focus-visible .tilePlayDot,
  #modeCard .hubTile:hover .tilePlayDot,#modeCard .hubTile:focus-visible .tilePlayDot{animation:none}
}

/* Hub tiles, lighter: no white card, just the tint fading in from the right,
   a thinner line and a softer shadow. Singleplayer coral, Multiplayer teal,
   Explore yellow, Competitive lilac. */
#modeCard .mode.pick.hubTile{background:linear-gradient(120deg,transparent 38%,var(--tg,#dff5f1));border-color:transparent;box-shadow:none}
#modeCard #spBtn.hubTile{--tg:#ffe4dc;background:linear-gradient(120deg,transparent 38%,var(--tg))}
#modeCard #mpBtn.hubTile{--tg:#d9f3ee}
#modeCard #exBtn.hubTile{--tc:#e0a400;--tcSoft:#fff0c4;--tg:#fff0c4}
#modeCard #cpBtn.hubTile{--tc:#8a6bd8;--tcSoft:#ece4ff;--tg:#ece4ff}
#modeCard .mode.pick.hubTile:hover,#modeCard .mode.pick.hubTile:active{box-shadow:none;border-color:transparent}
#modeCard .mode.pick.hubTile.picked{border-color:transparent}
#modeCard .mode.pick.hubTile.picked{background:linear-gradient(120deg,var(--tcSoft) 30%,var(--tg))}
.hubTileIcon{box-shadow:none;border-width:2px}
/* Pro: Explore + Competitive first; Competitive opens Single and Multi */
#modeCard .modeGrid .proRow,#modeCard .hubBack{display:none}
#modeCard .modeGrid.proHub .proRow{display:flex}
#modeCard .modeGrid.proHub:not(.compOpen) .proRow~.modeChoiceRow{display:none}
#modeCard .modeGrid.proHub.compOpen .proRow{display:none}
#modeCard .modeGrid.proHub.compOpen .hubBack:not(.hidden){display:inline-flex}
.proRow{flex-direction:column;gap:inherit}
.hubPro{display:inline-block;vertical-align:.35em;margin-left:8px;background:#29303d;color:#ffc233;border-radius:6px;padding:2px 7px 1px;font:900 11px/1.3 'Nunito',sans-serif;letter-spacing:.08em}
.hubTileSub{font-weight:800;font-size:14px;color:#6b6459;line-height:1.3}
/* back to the four modes: a real button, saying where it goes */
.hubBack{align-items:center;gap:6px;align-self:flex-start;margin:2px 0 4px;background:#fff;border:2px solid var(--line);border-radius:999px;padding:7px 16px 7px 10px;font:800 14.5px/1.2 'Nunito',sans-serif;color:var(--text);cursor:pointer;box-shadow:2px 2px 0 var(--line);transition:transform .12s ease,box-shadow .12s ease}
.hubBack:hover{transform:translateX(-2px);box-shadow:3px 3px 0 var(--line)}
.hubBack:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--line)}
.hubBack:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.hubBackArrow{width:18px;height:18px;flex:none}
[dir=rtl] .hubBackArrow{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.hubBack{transition:none}.hubBack:hover{transform:none}}
.exWhere{margin:-4px 0 2px;padding:12px 14px;border:2px dashed #d9cba8;border-radius:14px;background:#fffaf0}
.exWhere p{margin:0 0 8px;font-weight:800;font-size:13.5px;color:#6b6459}
.exWhere>div{display:flex;flex-wrap:wrap;gap:6px}
.exWhereC{display:inline-block;padding:7px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font-weight:900;font-size:13.5px;color:var(--text);text-decoration:none;box-shadow:2px 2px 0 var(--line)}
.exWhereC:hover{background:#fff0c4}
/* the secondary block as open space too: no frame, no fill, just its heading
   and the cards inside it */
.hubSecondarySummary,.hubSecondaryInner{background:none;border:0;border-radius:0}
.hubSecondarySummary{padding-left:4px;padding-right:4px}
.hubSecondaryInner{padding-left:0;padding-right:0}
/* no strip on the left (the gradient repeated into the transparent border),
   and a bit more pop: a richer tint, a soft glow in the tile's own colour and
   a small lift on hover */
#modeCard .mode.pick.hubTile{border:0;padding:20px 22px;background-repeat:no-repeat;background-origin:border-box;
 background-image:linear-gradient(115deg,rgba(255,255,255,.35) 22%,var(--tg,#c9efe8) 100%);box-shadow:0 10px 26px -12px var(--glow,#2ec4b666);transition:transform .18s ease,box-shadow .18s ease}
#modeCard #spBtn.hubTile{--tg:#ffd3c6;--glow:#f2705f88;background-image:linear-gradient(115deg,rgba(255,255,255,.35) 22%,var(--tg) 100%)}
#modeCard #mpBtn.hubTile{--tg:#bfeee5;--glow:#2ec4b688}
#modeCard #exBtn.hubTile{--tg:#ffe39a;--glow:#ffc233aa}
#modeCard #cpBtn.hubTile{--tg:#ddd0ff;--glow:#8a6bd888}
#modeCard .mode.pick.hubTile:hover,#modeCard .mode.pick.hubTile:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px -12px var(--glow,#2ec4b666)}
#modeCard .mode.pick.hubTile:active{transform:translateY(1px);box-shadow:0 6px 16px -10px var(--glow,#2ec4b666)}
#modeCard .mode.pick.hubTile.picked{background-image:linear-gradient(115deg,var(--tcSoft) 10%,var(--tg) 100%)}
#modeCard .mode.pick.hubTile .hubTileIcon{background:#fff;box-shadow:0 4px 0 var(--line)}
#modeCard .mode.pick.hubTile:hover .hubTileIcon{box-shadow:0 6px 0 var(--line)}
@media (max-width:420px){ #modeCard .mode.pick.hubTile{padding:16px 16px} }
@media (prefers-reduced-motion:reduce){ #modeCard .mode.pick.hubTile{transition:none} #modeCard .mode.pick.hubTile:hover{transform:none} }
/* Hub tiles, round two: even corners instead of the long 18/8 ones, the glow
   only on the right so the colour flows on past the tile, and bigger words.
   Still the full width of the column. */
#modeCard .mode.pick.hubTile{position:relative;isolation:isolate;border-radius:22px;box-shadow:none;
 background-image:linear-gradient(90deg,rgba(255,255,255,.3) 18%,var(--tg,#c9efe8) 100%)}
#modeCard #spBtn.hubTile{background-image:linear-gradient(90deg,rgba(255,255,255,.3) 18%,var(--tg) 100%)}
#modeCard .mode.pick.hubTile::before{content:"";position:absolute;top:10%;bottom:10%;right:-14px;width:46%;border-radius:50%;
 background:radial-gradient(ellipse at 100% 50%,var(--glow,#2ec4b688) 0,transparent 70%);filter:blur(16px);z-index:-1;pointer-events:none;transition:opacity .18s ease,transform .18s ease;opacity:.85}
#modeCard .mode.pick.hubTile:hover,#modeCard .mode.pick.hubTile:focus-visible,#modeCard .mode.pick.hubTile:active{box-shadow:none}
#modeCard .mode.pick.hubTile:hover::before{opacity:1;transform:translateX(6px) scale(1.05)}
#modeCard .hubTileIcon{border-radius:16px}
#modeCard .hubTile .mt{font-size:clamp(25px,6.6vw,33px)}
#modeCard .hubTileSub{font-size:15.5px}
@media (min-width:900px){ #modeCard .hubTile .mt{font-size:clamp(28px,min(2.3vw,4.3vh),48px)} #modeCard .hubTileSub{font-size:clamp(15px,1.1vw,19px)} }
/* The play button a bit bigger, and centred in the open space between the
   words and the tile's edge. The tiles of one row share their columns
   (subgrid), so the words column is as wide as the longest text in the row
   and the buttons under each other stay in one line. Phones keep the button
   at the side: there is no open space there. */
@media (min-width:700px){
 #modeCard .hubTile .tilePlay{--pb:clamp(56px,min(4vw,7.6vh),84px);justify-self:center;margin-inline:-16px -22px}
 #modeCard #spBtn .tilePlay{--pb:clamp(62px,min(4.6vw,8.6vh),94px)}
 @supports (grid-template-columns:subgrid){
  #modeCard .modeChoiceRow:not(.proRow),#modeCard .modeGrid.proHub:not(.compOpen) .proRow{display:grid;grid-template-columns:auto minmax(0,max-content) 1fr;align-content:stretch}
  #modeCard .modeChoiceRow>*{grid-column:1/-1}
  #modeCard .modeChoiceRow>.mode.pick.hubTile{grid-template-columns:subgrid;column-gap:16px}
 }
}