/* hub.css — the home page's own layout in Aurora Glass (DESIGN-D.md §10).
   Shared furniture (glass, buttons, chips, badges, switches, game cards,
   header, Skip) lives in base.css; this file only arranges the page.

   Mobile first. The sky is base.css's two fixed layers, so nothing here
   paints a big gradient. No backdrop-filter at all: on a page this long it
   forces everything after it into extra layers, so frost is faked once. Motion is transform and opacity
   only, and Calm mode / reduced motion stills it. */

/* ---------------------------------------------------------------- the sky
   The hub paints its own sky (body.no-sky). It is a long page, and a sky
   that covers every inch of it (the shared one is two full-screen fixed
   layers) is too much to paint whole: a full-page capture never finished.
   So the page itself is one flat night colour, which costs nothing, and the
   whole sky lives in ONE layer across the hero: the aurora curtain with its
   rays and a scatter of pre-drawn stars, masked into one soft ellipse. It drifts on the
   compositor (transform only), pauses when the hero is out of sight and is
   still under Calm mode or reduced motion. The band is clipped to the hero
   and kept in the hero's own stacking context, so its layer never makes the
   content below it composite too. */
html{background:#0A1233}
body.no-sky{background:transparent}
.hero{isolation:isolate}
.hero__sky{position:absolute;left:0;right:0;top:-90px;bottom:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero__sky::before{
  content:"";position:absolute;left:-5%;right:-5%;top:-110px;height:calc(clamp(640px,100vh,860px) + 110px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='331' height='900'%3E%3Ccircle cx='147.9' cy='0.0' r='0.47' fill='%23fff' opacity='0.82'/%3E%3Ccircle cx='154.7' cy='327.6' r='0.59' fill='%23fff' opacity='0.30'/%3E%3Ccircle cx='125.9' cy='46.4' r='0.86' fill='%23D6ECFF' opacity='0.51'/%3E%3Ccircle cx='243.4' cy='89.3' r='0.73' fill='%23D6ECFF' opacity='0.54'/%3E%3Ccircle cx='263.5' cy='150.3' r='1.20' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='127.2' cy='1.4' r='0.71' fill='%23fff' opacity='0.36'/%3E%3Ccircle cx='106.1' cy='826.5' r='0.46' fill='%23fff' opacity='0.18'/%3E%3Ccircle cx='95.0' cy='813.9' r='0.85' fill='%23fff' opacity='0.23'/%3E%3Ccircle cx='265.0' cy='879.7' r='0.58' fill='%23D6ECFF' opacity='0.13'/%3E%3Ccircle cx='275.3' cy='817.3' r='0.89' fill='%23fff' opacity='0.08'/%3E%3Ccircle cx='182.0' cy='816.4' r='0.70' fill='%23fff' opacity='0.21'/%3E%3Ccircle cx='330.4' cy='786.2' r='0.86' fill='%23D6ECFF' opacity='0.17'/%3E%3Ccircle cx='17.2' cy='9.2' r='0.50' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='156.3' cy='203.4' r='1.29' fill='%23fff' opacity='0.33'/%3E%3Ccircle cx='306.2' cy='359.6' r='1.59' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='122.3' cy='373.9' r='0.77' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='84.9' cy='342.3' r='0.73' fill='%23D6ECFF' opacity='0.58'/%3E%3Ccircle cx='318.3' cy='56.0' r='0.59' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='160.0' cy='725.1' r='0.57' fill='%23fff' opacity='0.12'/%3E%3Ccircle cx='86.9' cy='718.2' r='0.62' fill='%23fff' opacity='0.28'/%3E%3Ccircle cx='6.8' cy='0.0' r='1.38' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='211.5' cy='157.0' r='0.70' fill='%23D6ECFF' opacity='0.65'/%3E%3Ccircle cx='163.8' cy='465.1' r='0.58' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='99.7' cy='273.7' r='0.70' fill='%23fff' opacity='0.28'/%3E%3Ccircle cx='164.3' cy='649.1' r='0.56' fill='%23fff' opacity='0.31'/%3E%3Ccircle cx='189.3' cy='29.7' r='0.55' fill='%23fff' opacity='0.59'/%3E%3C/svg%3E") 0 0/331px 900px,
    repeating-linear-gradient(90deg,rgba(214,255,240,0) 0 5px,rgba(214,255,240,.10) 5px 6.5px,rgba(214,255,240,0) 6.5px 11px),
    repeating-linear-gradient(90deg,rgba(190,255,232,0) 0 15px,rgba(190,255,232,.08) 15px 18px,rgba(190,255,232,0) 18px 29px),
    radial-gradient(40% 24% at 63% 60%,rgba(206,255,234,.42),rgba(92,242,176,.30) 38%,rgba(92,242,176,0) 74%),
    radial-gradient(30% 22% at 84% 44%,rgba(155,140,255,.42),rgba(155,140,255,0) 70%),
    radial-gradient(36% 22% at 30% 66%,rgba(79,216,240,.26),rgba(79,216,240,0) 72%),
    radial-gradient(64% 30% at 56% 56%,rgba(92,242,176,.14),rgba(92,242,176,0) 76%);
  /* ONE mask image: a second (mask-composite), or a broader one, costs a
     whole extra mask surface and tipped a full-page paint over its budget */
  -webkit-mask-image:radial-gradient(62% 34% at 58% 58%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);
          mask-image:radial-gradient(62% 34% at 58% 58%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);
  transform:skewY(-4deg);will-change:transform;
  animation:heroDrift var(--t-drift) ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:skewY(-5deg) translate3d(-2%,0,0)}to{transform:skewY(-3deg) translate3d(2%,-1.5%,0)}}
.hero.is-away .hero__sky::before{animation-play-state:paused}
:root[data-calm] .hero__sky::before{animation:none}
@media (prefers-reduced-motion:reduce){.hero__sky::before{animation:none}}

html{scroll-behavior:smooth}
:root[data-calm]{scroll-behavior:auto}
#picks-sec,#start-sec,#switches{scroll-margin-top:84px}

.skiplink{position:absolute;left:12px;top:-64px;z-index:calc(var(--z-header) + 1);padding:12px 18px;border-radius:var(--r-pill);background:var(--mint);color:var(--on-mint);font:800 15px/1 var(--font-body);text-decoration:none;transition:top 160ms}
.skiplink:focus{top:12px}

main{display:block}
.sec{position:relative;padding:28px 0 44px}
@media (min-width:980px){.sec{padding:36px 0 64px}}

.eyebrow__aside{color:var(--dim);letter-spacing:.1em}

/* ===================================================================== hero */

.hero{position:relative;padding:20px 0 40px}
.hero__grid{display:grid;gap:28px;align-items:center}
.hero__copy{min-width:0}
.hero__kicker{margin:0}
.hero__h1{
  margin:20px 0 16px;
  font:700 min(11.4vw,max(46px,6.4vw),84px)/.98 var(--font-display);letter-spacing:-.045em;
}
.hero__glow{
  display:block;padding-bottom:.06em;
  background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(79,216,240,.25));
}
.hero__sub{max-width:520px;margin:0;font:500 17px/1.6 var(--font-body);color:var(--mist)}
.hero__sub strong{color:var(--snow);font-weight:700}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__ctas .btn{flex:1 1 auto}
@media (max-width:640px){.hero__ctas .btn--lg{min-height:56px;font-size:17px}}

.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  max-width:600px;margin:34px 0 0;padding:22px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.08);
}
.stat b{display:block;font:600 24px/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--snow)}
.stat span{display:block;margin-top:7px;font:700 12px/1.3 var(--font-body);color:var(--dim)}
.stat--zero button{display:block;padding:0;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.stat--zero button:focus-visible{outline-offset:6px}
.stat--zero b{display:block;width:max-content;min-width:.7em;background:linear-gradient(90deg,var(--mint),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat--zero b.is-landed{animation:landed .42s var(--ease-spring)}
@keyframes landed{0%{transform:scale(1.35)}100%{transform:none}}
@media (hover:hover){.stat--zero button:hover b{opacity:.85}}

/* the Settings card, with Skip perched on its corner */
.hero__art{position:relative;width:100%;padding-top:100px;min-width:0}
/* Skip's idle bob is a running transform animation, and the browser assumes
   a moving layer could overlap anything painted after it. Clipping him to
   his own box keeps that assumption to his own box, instead of turning every
   card below into a layer of its own. */
.hero__skip{
  position:absolute;right:0;top:-26px;z-index:3;width:150px;height:150px;padding:0;border:0;border-radius:24px;overflow:clip;
  background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.hero__skip .skip{width:100%;height:100%}
.hero__bubble{
  position:absolute;right:150px;top:30px;z-index:4;max-width:calc(100% - 158px);margin:0;padding:10px 14px;
  border-radius:16px 16px 4px 16px;background:var(--snow);color:var(--ink);font:700 12.5px/1.3 var(--font-body);
  box-shadow:0 16px 30px -12px rgba(1,4,16,.7);transform-origin:100% 100%;text-wrap:balance;
}
.hero__bubble.is-pop{animation:bubblePop .36s var(--ease-spring)}
@keyframes bubblePop{from{opacity:0;transform:scale(.82)}}

.settings{
  position:relative;z-index:1;padding:18px 16px 10px;border-radius:30px;
  /* tint, not frost: a darker base so the words hold up over the aurora */
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035)),rgba(10,17,46,.62);
}
.settings__head{display:flex;align-items:baseline;gap:10px;padding:0 4px 12px}
.settings__title{margin:0;font:600 17px/1.2 var(--font-display);letter-spacing:-.01em}
.settings__head small{margin-left:auto;font:700 12px/1 var(--font-body);color:var(--dim)}
.settings__rows{margin:0;padding:0;list-style:none}
.srow{display:flex;align-items:center;gap:12px;padding:6px 0 6px 4px;border-top:1px solid rgba(255,255,255,.07)}
.srow__icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:var(--mist);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.srow__icon svg,.srow__lock svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srow__text{flex:1;min-width:0}
.srow__text b{display:block;font:700 15px/1.25 var(--font-body)}
.srow__text span{display:block;margin-top:2px;font:600 12.5px/1.3 var(--font-body);color:var(--mist)}
.srow__lock{display:inline-flex;align-items:center;gap:4px;font:800 10.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.srow__lock svg{width:14px;height:14px}
.srow__lock span{display:none}
.srow--fun{margin-top:6px;border-top:1px dashed rgba(255,255,255,.14)}
.srow--fun .srow__icon{color:var(--on-mint);background:linear-gradient(160deg,#8BF8CC,#4FD8F0);box-shadow:0 0 22px rgba(92,242,176,.35)}

/* the toggles: a 56×44 target around a 48×28 track */
.tg{position:relative;flex:none;width:56px;height:44px;padding:0;border:0;border-radius:16px;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tg::before{
  content:"";position:absolute;left:4px;right:4px;top:8px;bottom:8px;border-radius:99px;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 2px 5px rgba(0,0,0,.4);
}
.tg::after{
  content:"";position:absolute;left:7px;top:11px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#DCE5FA 60%,#B8C6EA);box-shadow:0 2px 5px rgba(0,0,0,.45);
}
.tg[aria-checked="true"]::before{background:linear-gradient(90deg,#3FE0B8,#5CF2B0);box-shadow:inset 0 0 0 1px rgba(92,242,176,.6),0 0 18px rgba(92,242,176,.45)}
.tg[aria-checked="true"]::after{transform:translateX(20px);background:#fff}
.tg.is-nope::after{animation:tgNope .8s var(--ease-out)}
.tg[aria-checked="true"].is-nope::after{animation:tgNopeOn .8s var(--ease-out)}
@keyframes tgNopeOn{0%,100%{transform:translateX(20px)}25%{transform:translateX(10px)}45%{transform:translateX(22px)}65%{transform:translateX(17px)}}
.tg:focus-visible{outline-offset:-2px}

@media (min-width:420px){.srow__lock span{display:inline}}
@media (min-width:641px){
  .hero{padding:36px 0 56px}
  .hero__sub{font-size:19px}
  .hero__ctas .btn{flex:0 0 auto}
  .stats{gap:28px;grid-template-columns:repeat(4,auto);justify-content:start}
  .stat b{font-size:30px}
  .stat span{font-size:13px;white-space:nowrap}
  .hero__grid{gap:40px}
  .hero__art{max-width:460px;padding-top:110px;justify-self:center}
  .hero__skip{width:190px;height:190px;right:6px;top:-50px}
  .hero__bubble{right:198px;top:14px;max-width:220px;font-size:13.5px}
  .settings{padding:22px 22px 14px}
  .srow{gap:14px;padding:7px 0 7px 6px}
  .srow__icon{width:38px;height:38px}
  .srow__text b{font-size:15.5px}
}
@media (min-width:980px){
  .hero{padding:56px 0 80px}
  .hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px}
  .hero__art{justify-self:end;max-width:440px}
}

/* the first view of a session: the hero glides in */
@keyframes heroRise{from{opacity:0;transform:translateY(14px)}}
:root.is-intro:not([data-calm]) .hero__kicker{animation:heroRise .52s var(--ease-out) both}
:root.is-intro:not([data-calm]) .hero__h1{animation:heroRise .52s var(--ease-out) 60ms both}
:root.is-intro:not([data-calm]) .hero__sub{animation:heroRise .52s var(--ease-out) 120ms both}
:root.is-intro:not([data-calm]) .hero__ctas{animation:heroRise .52s var(--ease-out) 180ms both}
:root.is-intro:not([data-calm]) .stats{animation:heroRise .52s var(--ease-out) 240ms both}
:root.is-intro:not([data-calm]) .hero__art{animation:heroRise .6s var(--ease-out) 160ms both}

/* ========================================================= tonight's puzzle */

.feature{display:grid;gap:14px}
.fphoto{
  position:relative;isolation:isolate;min-height:420px;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(70% 60% at 50% 40%,rgba(92,242,176,.22),transparent 70%),linear-gradient(160deg,#164D6B,#0E1E4A);
  box-shadow:0 40px 80px -36px rgba(1,4,16,.9),0 0 0 1px rgba(255,255,255,.1);
}
.fphoto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-out)}
.fphoto.is-loaded .fphoto__img{opacity:1}
.fphoto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,13,31,0) 38%,rgba(7,13,31,.74) 100%),linear-gradient(90deg,rgba(7,13,31,.3),transparent 50%)}
.fphoto__art{position:absolute;left:50%;top:40%;width:min(42%,200px);aspect-ratio:1;border-radius:24%;overflow:hidden;transform:translate(-50%,-50%) rotate(-5deg);box-shadow:0 22px 34px -14px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.22)}
.fphoto__art svg{display:block;width:100%;height:100%}
.fphoto__tags{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.ftag{
  display:inline-flex;align-items:center;gap:7px;min-height:32px;max-width:100%;padding:0 12px;border-radius:var(--r-pill);
  font:700 13px/1 var(--font-body);color:var(--snow);white-space:nowrap;
  background:rgba(7,13,31,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.ftag svg{width:14px;height:14px;flex:none}
.ftag--mode i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(79,216,240,.2),0 0 8px var(--cyan)}
/* The caption bar is frosted glass without backdrop-filter (which would
   force everything painted after it into a layer of its own): behind the
   words sits a blurred copy of the photo's thumbnail, lined up with the
   photo (hub.js sets --fw/--fh) and blurred once, never animated. */
.fphoto{--fx:12px}
.fphoto__info{
  position:absolute;left:var(--fx);right:var(--fx);bottom:var(--fx);z-index:2;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:22px;background:rgba(12,22,52,.55);
}
.fphoto__info::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05)),rgba(7,13,31,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.2);
}
.fphoto__frost{
  position:absolute;left:calc(-1 * var(--fx));bottom:calc(-1 * var(--fx));z-index:-1;width:var(--fw,0px);height:var(--fh,0px);max-width:none;
  object-fit:cover;filter:blur(14px) saturate(1.4);pointer-events:none;
}
.fphoto__words{min-width:0}
.fphoto__title{margin:0;font:600 25px/1.05 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.fphoto__words p{margin:8px 0 0;font:600 14.5px/1.35 var(--font-body);color:#D3DDF0}
.fphoto__info .btn{width:100%}

.fside{display:flex;flex-direction:column;gap:16px;padding:18px;min-width:0}
.fside__title{margin:0;font:600 20px/1.2 var(--font-display);letter-spacing:-.02em}
.fside__lead{margin:4px 0 0;font:600 14px/1.45 var(--font-body);color:var(--mist)}
.fside__rule{height:1px;background:rgba(255,255,255,.08)}
.fside__label{display:flex;justify-content:space-between;gap:10px;font:800 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

.pace{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.pace li{display:flex;min-width:0}
.pace__opt{
  position:relative;flex:1;display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 12px;border-radius:16px;min-width:0;
  color:var(--mist);text-decoration:none;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background-color .2s,color .2s,transform .3s var(--ease-spring);
}
.pace__opt .ring{width:34px;height:34px;flex:none}
.pace__words{min-width:0}
.pace__words b{display:block;font:600 15px/1.1 var(--font-display);letter-spacing:-.01em;color:var(--snow)}
.pace__words span{display:block;margin-top:3px;font:700 12.5px/1.25 var(--font-body);color:var(--mist);font-variant-numeric:tabular-nums}
.pace__opt.is-usual{background:rgba(92,242,176,.1);box-shadow:inset 0 0 0 1.5px rgba(92,242,176,.75),0 10px 26px -14px rgba(92,242,176,.7)}
.pace__opt.is-usual .pace__words span{color:var(--mint)}
.pace__opt:focus-visible,.pace__opt.is-go{color:var(--m)}
.pace__opt.is-go{transform:scale(.97);background:rgba(255,255,255,.08)}
@media (hover:hover){.pace__opt:hover{color:var(--m);background:rgba(255,255,255,.07);transform:translateY(-1px)}}

.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.packs li{min-width:0}
.pk{
  position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;background:#18205A;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 22px -10px rgba(0,0,0,.85);transition:transform .4s var(--ease-spring);
}
.pk img{display:block;width:100%;height:100%;object-fit:cover}
.pk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,10,28,.8))}
.pk span{position:absolute;left:8px;right:6px;bottom:6px;z-index:1;font:700 11.5px/1.15 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk--more{display:grid;place-content:center;text-align:center;color:var(--snow);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pk--more::after{display:none}
.pk--more b{font:600 20px/1.1 var(--font-display)}
.pk--more small{display:block;margin-top:3px;font:700 11.5px/1.2 var(--font-body);color:var(--mist)}
@media (hover:hover){.pk:hover{transform:translateY(-2px) scale(1.02)}}

.progress{display:grid;gap:10px}
.meter{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:0;padding:0;list-style:none}
.meter li{height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.meter li.is-lit{background:var(--c);box-shadow:0 0 10px -1px var(--c)}
.progress__line{margin:0;font:700 13.5px/1.35 var(--font-body);color:var(--snow)}
.progress.is-full .progress__line{background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.progress__best{margin:0;font:600 13px/1.4 var(--font-body);color:var(--mist)}

@media (min-width:641px){
  .fphoto{min-height:440px}
  .fphoto__tags{top:18px;left:18px;right:18px}
  .fphoto{--fx:18px}
  .fphoto__info{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px 22px}
  .fphoto__title{font-size:30px}
  .fphoto__info .btn{width:auto;flex:none}
  .fside{padding:24px;gap:18px}
  .packs{gap:10px}
  .pace__opt{gap:12px;padding:12px}
}
@media (min-width:980px){.feature{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:20px}}

/* ================================================================ all games */

.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters .chip svg{width:15px;height:15px}
@media (max-width:640px){
  .filters{
    flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;
    scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  }
  .filters::-webkit-scrollbar{display:none}
  .filters.is-end{-webkit-mask-image:none;mask-image:none}
  .filters .chip{flex:none}
}

.games{margin:0;padding:0;list-style:none;grid-auto-flow:row}
.games__slot{position:relative;display:flex;min-width:0}
.games__slot>.gcard{flex:1;min-width:0;transition:transform .45s var(--ease-spring),opacity .2s}
.games__slot.is-dim>.gcard{opacity:.35;filter:grayscale(.6)}
.games__empty{margin:0 0 16px;font-weight:600;color:var(--mist)}
.games__noscript{margin:0 0 16px}
.games__noscript a{color:var(--cyan)}
.gcard__meta .chip--sm{min-width:0}
.gcard__meta .chip--sm>span:last-child{overflow:hidden;text-overflow:ellipsis}

/* the Jigsaw is the one wide card: today's photo behind its icon. It spans
   two columns on phones and from 1100px, where 15 cards then fill whole rows */
.gcard__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease-out);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.gcard.has-photo .gcard__photo{opacity:.5}
.gcard__today{
  position:absolute;left:10px;bottom:10px;z-index:2;display:none;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:5px 12px 5px 5px;border-radius:var(--r-pill);
  font:700 12.5px/1.2 var(--font-body);color:var(--snow);background:rgba(7,13,31,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.gcard__today small{flex:none;padding:4px 8px;border-radius:var(--r-pill);font:800 10px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-mint);background:var(--mint)}
.gcard__today span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.games__slot--wide{grid-column:span 2}
.games__slot--wide .gcard__stage{aspect-ratio:auto;flex:1 1 auto;min-height:168px}
.games__slot--wide .gcard__body{flex:none}
.games__slot--wide .gcard__icon{width:auto;height:66%;max-height:150px;aspect-ratio:1}
.games__slot--wide .gcard__today{display:inline-flex}
.games__slot--wide .gcard__meta .chip--sm~.chip--sm{display:inline-flex}
.games__slot.is-dim .gcard__today{display:none}
@media (min-width:800px) and (max-width:1099px){
  .games__slot--wide{grid-column:auto}
  .games__slot--wide .gcard__stage{aspect-ratio:5/4;flex:none;min-height:0}
  .games__slot--wide .gcard__body{flex:1}
  .games__slot--wide .gcard__icon{width:54%;height:auto;max-height:none}
  .games__slot--wide .gcard__today{display:none}
}
@media (max-width:799px){.games__slot--wide .gcard__stage{min-height:190px}.games__slot--wide .gcard__icon{height:58%}}
@media (min-width:1100px){.games__slot--wide .gcard__icon{max-height:none;height:62%}}

/* cards rise into place the first time the grid is seen */
.games.will-rise .games__slot{opacity:0;transform:translateY(12px)}
.games.will-rise.is-risen .games__slot{opacity:1;transform:none;transition:opacity .32s var(--ease-out) var(--d),transform .32s var(--ease-out) var(--d)}

/* coming soon: two mystery tiles and the note about playing together */
.soon{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:16px;padding:14px;border-radius:22px}
.soon__tiles{display:flex;flex-wrap:wrap;gap:10px}
.soon__tile{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 16px 6px 6px;border:1px dashed rgba(167,182,211,.4);border-radius:16px;
  color:var(--snow);text-align:left;background:rgba(255,255,255,.025);cursor:pointer;touch-action:manipulation;
  transition:background-color .2s,transform .3s var(--ease-spring);
}
.soon__icon{flex:none;width:40px;height:40px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.soon__icon svg{display:block;width:100%;height:100%}
.soon__words b{display:block;font:600 14px/1.15 var(--font-display);letter-spacing:-.01em}
.soon__words span{display:block;margin-top:2px;font:600 12px/1.3 var(--font-body);color:var(--mist)}
.soon__tile.is-peek .soon__icon{animation:peek .5s var(--ease-spring)}
@keyframes peek{30%{transform:rotate(-8deg) scale(1.08)}60%{transform:rotate(5deg)}}
.soon__text{flex:1 1 300px;margin:0;font:600 13.5px/1.55 var(--font-body);color:var(--mist)}
.soon__text b{color:var(--snow)}
@media (hover:hover){.soon__tile:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}}
@media (min-width:800px){.soon{margin-top:22px;padding:14px 22px 14px 14px}}

/* =========================================================== would you rather */

.wyr{
  display:grid;gap:22px;padding:22px 18px;border-radius:30px;
  background:radial-gradient(70% 90% at 100% 0%,rgba(155,140,255,.16),transparent 70%),radial-gradient(60% 80% at 0% 100%,rgba(255,203,107,.06),transparent 70%),var(--glass-fill);
}
.wyr__intro{min-width:0}
.wyr__icon{position:relative;display:block;width:76px;height:76px;margin:0 0 18px;border-radius:24%;overflow:hidden;transform:rotate(-6deg);
  box-shadow:0 18px 30px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.22),0 0 40px -6px rgba(255,203,107,.4)}
.wyr__icon svg{display:block;width:100%;height:100%}
.wyr__icon::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(155deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.06) 34%,transparent 52%)}
.wyr__sub{max-width:440px;margin:0 0 22px;font:500 16.5px/1.6 var(--font-body);color:var(--mist)}
.wyr__play{min-width:0}
.wyr__lead{margin:0 0 14px;font:600 24px/1.15 var(--font-display);letter-spacing:-.02em}
.wyr__lead span{color:var(--mist)}
.wyr__choices{position:relative;display:grid;grid-auto-rows:1fr;gap:12px;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.wyr__play.is-out .wyr__choices{opacity:0;transform:translateY(6px)}
.wyr__choice{
  --tone:var(--mint);
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:104px;padding:16px 18px 18px;border:0;border-radius:24px;
  color:var(--snow);text-align:left;font:700 17px/1.35 var(--font-body);cursor:pointer;touch-action:manipulation;
  background:linear-gradient(180deg,rgba(92,242,176,.15),rgba(92,242,176,.05));box-shadow:inset 0 0 0 1px rgba(92,242,176,.35);
  transition:transform .35s var(--ease-spring),opacity .25s,background-color .2s;
}
.wyr__choice--b{--tone:var(--violet);background:linear-gradient(180deg,rgba(155,140,255,.17),rgba(155,140,255,.06));box-shadow:inset 0 0 0 1px rgba(155,140,255,.4)}
.wyr__key{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;font:700 15px/1 var(--font-display);color:var(--on-mint);background:var(--mint)}
.wyr__choice--b .wyr__key{color:var(--on-violet);background:var(--violet)}
.wyr__text{display:block;padding-right:10px}
.wyr__picked{position:absolute;top:20px;right:18px;font:800 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--tone);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .3s var(--ease-spring)}
.wyr__choice.is-picked{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--tone),0 14px 34px -14px var(--tone)}
.wyr__choice.is-picked .wyr__picked{opacity:1;transform:none}
.wyr__choice.is-other{opacity:.55}
@media (hover:hover){.wyr__play:not(.has-pick) .wyr__choice:hover{transform:translateY(-2px)}}
.wyr__or{
  position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;
  font:800 13px/1 var(--font-display);color:var(--ink);background:radial-gradient(circle at 35% 30%,#fff,#E6EDFB 60%,#C3D0EE);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.7),0 0 0 5px rgba(16,22,64,.85);
}
.wyr__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.wyr__note{margin:0;font:600 14px/1.4 var(--font-body);color:var(--mist)}
.wyr__next.is-ready{color:var(--on-mint);background:var(--mint);box-shadow:0 8px 20px -8px rgba(92,242,176,.8),inset 0 1px 0 rgba(255,255,255,.5)}
@media (min-width:641px){.wyr{padding:30px}.wyr__lead{font-size:27px}.wyr__icon{width:88px;height:88px}}
@media (min-width:768px){.wyr__choices{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:16px}.wyr__choice{min-height:150px}.wyr__choice--a{padding-right:34px}.wyr__choice--b{padding-left:36px}}
@media (min-width:1024px){.wyr{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center;padding:40px}}

/* ============================================ Sound switch, home-screen card */

.switches{display:flex;flex-wrap:wrap;gap:6px 32px;margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.switch__note{display:block;margin-top:2px;max-width:36ch;font:600 12.5px/1.35 var(--font-body);color:var(--mist)}
.switch>span:last-child{padding:6px 0}

.home{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:24px 20px;
  background:radial-gradient(80% 60% at 0% 0%,rgba(79,216,240,.12),transparent 70%),var(--glass-fill);
}
.home__art{position:relative;margin:0 0 8px}
.home__icon{display:block;width:96px;height:96px;border-radius:24px;box-shadow:0 20px 34px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.2),0 0 40px -8px rgba(79,216,240,.5)}
.home__skip{position:absolute;left:70px;bottom:-14px;width:64px;height:64px;overflow:clip}
.home__skip .skip{width:100%;height:100%}
.home__title{margin:0;font:600 22px/1.15 var(--font-display);letter-spacing:-.02em}
.home__body{margin:0;font:500 15.5px/1.55 var(--font-body);color:var(--mist)}
.home__actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:4px}
.home__hint{margin:0;font:600 13.5px/1.45 var(--font-body);color:var(--mist)}
.home .share-glyph{width:18px;height:18px;vertical-align:-3px}

@media (min-width:641px){.home{padding:28px}}
@media (min-width:820px){.home{display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:10px;align-items:center}.home__art{grid-row:1/4;margin:0 40px 0 0}.home__title,.home__body,.home__actions{grid-column:2}}

/* ================================================================= footer */

.foot{margin-top:16px;padding:40px 0 calc(36px + var(--sab));border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(7,13,31,0),rgba(7,13,31,.55))}
.foot__grid{display:grid;gap:24px}
.foot__logo{font-size:20px}
.foot__brand p{max-width:42ch;margin:12px 0 0;font:600 14px/1.55 var(--font-body);color:var(--mist)}
.foot__links{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 0 0 -8px;padding:0;list-style:none}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:10px;font:700 14.5px/1 var(--font-body);color:var(--snow);text-decoration:none;transition:color .2s}
@media (hover:hover){.foot__links a:hover{color:var(--mint)}}
.foot__switches{flex-direction:column;gap:2px;margin:0;padding:0;border:0}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06)}
.foot__base p{margin:0;font:700 13px/1.4 var(--font-body);color:var(--dim)}
@media (min-width:900px){
  .foot__grid{grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr);gap:48px;align-items:start}
  .foot__links{flex-direction:column;margin:-10px 0 0 -8px}
}

/* ======================================================= egg: Ad Attack */

.gad{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;border-radius:26px;
  text-align:center;color:#4E5564;background:repeating-linear-gradient(135deg,#C9CED8 0 10px,#C1C6D1 10px 20px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  animation:adIn .28s var(--ease-spring) both;
}
.gad__tag{position:absolute;top:10px;left:10px;padding:4px 6px;border-radius:5px;font:800 10px/1 var(--font-body);letter-spacing:.1em;color:#E6E9EE;background:#8E95A3}
.gad b{font:800 16px/1.15 var(--font-body);letter-spacing:.02em}
.gad__skip{position:absolute;right:10px;bottom:10px;padding:7px 10px;border-radius:6px;font:700 11.5px/1 var(--font-body);color:#E6E9EE;background:rgba(40,45,58,.78)}
.ad-fade .gad{opacity:0;transition:opacity .16s}
@keyframes adIn{from{opacity:0;transform:scale(.9)}}
.runner{position:fixed;left:0;bottom:calc(10px + var(--sab));z-index:var(--z-fx);pointer-events:none}
.runner .skip{width:96px;height:96px}

/* ================================================== Calm mode / less motion */

:root[data-calm] .hero__bubble.is-pop{animation:fadeIn 150ms both}
:root[data-calm] .stat--zero b.is-landed,:root[data-calm] .soon__tile.is-peek .soon__icon,:root[data-calm] .gad{animation:none}
:root[data-calm] .pace__opt,:root[data-calm] .pk,:root[data-calm] .soon__tile,:root[data-calm] .wyr__choice,:root[data-calm] .wyr__choices,:root[data-calm] .games__slot>.gcard{transition-duration:0s}
:root[data-calm] .pace__opt:hover,:root[data-calm] .pk:hover,:root[data-calm] .soon__tile:hover,:root[data-calm] .wyr__choice,:root[data-calm] .wyr__choice:hover{transform:none}
:root[data-calm] .tg.is-nope::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .hero__bubble.is-pop{animation:fadeIn 150ms both}
  .stat--zero b.is-landed,.soon__tile.is-peek .soon__icon,.gad,.tg.is-nope::after{animation:none}
  .pace__opt,.pk,.soon__tile,.wyr__choice,.wyr__choices,.games__slot>.gcard,.fphoto__img,.gcard__photo{transition-duration:0s}
  .pace__opt:hover,.pk:hover,.soon__tile:hover,.wyr__choice,.wyr__choice:hover{transform:none}
}

/* ---- who makes this ---- */
.story{display:grid;gap:22px;align-items:center;padding:clamp(16px,3vw,28px)}
@media (min-width:760px){.story{grid-template-columns:minmax(220px,.75fr) 1.25fr;gap:clamp(24px,4vw,48px)}}
.story__photo{margin:0;padding:8px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),var(--shadow-md);transform:rotate(-1.6deg);max-width:400px;justify-self:center;width:100%}
.story__photo img{display:block;width:100%;height:auto;border-radius:17px;background:var(--fjord)}
.story .section-title{margin:0 0 14px}
.story__dad{color:var(--mist);font-weight:700}
.story__body{max-width:58ch;margin:0 0 12px;font:500 16.5px/1.65 var(--font-body);color:#C9D5EA}
.story .btn{margin-top:10px}

/* ===================================================== the switches */
.switchbay{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.switchbay{grid-template-columns:1fr minmax(320px,440px);gap:56px}}
.switchbay .section-title{margin:0}
.switchbay__lead{max-width:48ch;margin:12px 0 24px;font:500 16.5px/1.6 var(--font-body);color:var(--mist)}

/* ---- the shelves: a heading row before each category's games ---- */
.games__head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:22px 0 0;padding:0 2px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.games__head:first-child{margin-top:4px}
.games__head[hidden],.games__slot[hidden]{display:none}
.games__cat{margin:0;font:800 clamp(20px,2.2vw,24px)/1.2 var(--font-display);letter-spacing:-.01em}
.games__line{margin:0;flex:1 1 220px;font:600 14.5px/1.4 var(--font-body);color:var(--mist)}
.games__count{font:800 11.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ================================================== welcome: the kids say hi */
.welcome{padding:clamp(10px,3vw,36px) 0 clamp(18px,4vw,40px)}
.welcome__h1{margin:12px 0 14px;font:800 clamp(34px,5.2vw,60px)/1.05 var(--font-display);letter-spacing:-.025em;text-wrap:balance}
.welcome__sub{max-width:52ch;margin:0;font:500 clamp(16.5px,1.6vw,19px)/1.6 var(--font-body);color:var(--mist)}

/* ================================================================ top picks */
.picks{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:719px){.picks{grid-template-columns:1fr 1fr}.picks .games__slot:nth-child(3){display:none}}

/* ================================================================== shelves */
.shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.shelf{display:grid;gap:6px;padding:18px;border-radius:var(--r-lg);color:inherit;text-decoration:none;transition:transform .35s var(--ease-spring),box-shadow .2s}
@media (hover:hover){.shelf:hover{transform:translateY(-3px)}}
.shelf:active{transform:scale(.985)}
.shelf__icons{display:flex;gap:6px;margin-bottom:6px}
.shelf__icon{display:block;width:44px;height:44px;border-radius:13px;overflow:hidden;background:var(--ib);box-shadow:0 8px 16px -10px rgba(1,4,16,.9),inset 0 0 0 1px rgba(255,255,255,.14)}
.shelf__icon svg{display:block;width:100%;height:100%}
.shelf__name{font:800 21px/1.15 var(--font-display)}
.shelf__line{font:600 14.5px/1.45 var(--font-body);color:var(--mist)}
.shelf__count{display:flex;align-items:center;gap:6px;margin-top:4px;font:800 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.shelf__count svg{width:15px;height:15px}

/* ============================================ the welcome: film, shelves, why */
.welcome__col{display:grid;gap:18px;max-width:1000px}
.welcome .welcome__h1{margin:4px 0 0;font-size:clamp(30px,4.6vw,54px)}
.welcome .welcome__sub{margin:0;font-size:clamp(15.5px,1.5vw,18px)}
.welcome .welcome__col{gap:6px}
.welcome{padding-top:clamp(4px,2vw,28px)}
#picks-sec{padding-top:14px}
#picks-sec .section-head{margin-bottom:12px}
.picks__more{display:flex;justify-content:center;margin-top:14px}
.welcome{padding-bottom:0}
#start-sec{padding-top:8px}
.promo{position:relative;border-radius:22px;overflow:hidden;background:#070D1F;aspect-ratio:16/9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -24px rgba(0,0,0,.9),0 0 80px -30px rgba(92,242,176,.5)}
.promo__video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.promo__sound{
  position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;
  font:800 15px/1 var(--font-body);color:var(--ink);background:var(--mint);box-shadow:0 10px 24px -8px rgba(0,0,0,.8);cursor:pointer;
  animation:soundPulse 2.4s ease-in-out infinite
}
.promo__sound svg{width:20px;height:20px}
@keyframes soundPulse{50%{transform:scale(1.06)}}
:root[data-calm] .promo__sound{animation:none}
@media (prefers-reduced-motion:reduce){.promo__sound{animation:none}}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:720px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat{
  display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px 8px 8px;border-radius:18px;color:var(--snow);text-decoration:none;
  background:color-mix(in srgb,var(--c) 10%,rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent);
  transition:transform .3s var(--ease-spring),background-color .2s
}
@media (hover:hover){.cat:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--c) 18%,rgba(255,255,255,.04))}}
.cat:active{transform:scale(.97)}
.cat__icon{flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--ib)}
.cat__icon svg{display:block;width:100%;height:100%}
.cat__name{flex:1;min-width:0;font:800 15.5px/1.2 var(--font-display)}
.cat__n{flex:none;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;font:800 13px/1 var(--font-body);color:var(--ink);background:var(--c)}
@media (max-width:640px){.promo__sound{left:8px;bottom:8px;min-height:36px;padding:0 12px;font-size:13.5px}.promo__sound svg{width:17px;height:17px}.cat{gap:8px;min-height:56px;padding:6px 10px 6px 6px}.cat__icon{width:38px;height:38px;border-radius:10px}.cat__name{font-size:14px}.cat__n{min-width:24px;height:24px;font-size:12px}}
.cats__all{display:flex;justify-content:flex-end;margin-top:-6px}
.why{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 12px;border-radius:22px;color:var(--snow);text-decoration:none;transition:transform .3s var(--ease-spring)}
@media (hover:hover){.why:hover{transform:translateY(-2px)}}
.why__photo{flex:none;width:clamp(112px,26vw,200px);aspect-ratio:3/2;border-radius:16px;overflow:hidden;transform:rotate(-2deg);box-shadow:0 0 0 3px var(--mint),0 12px 24px -10px rgba(1,4,16,.9)}
.why__photo img{display:block;width:100%;height:100%;object-fit:cover}
.why__text{display:grid;gap:6px;min-width:0}
.why__text b{font:800 20px/1.15 var(--font-display)}
.why__text>span{font:600 14.5px/1.5 var(--font-body);color:var(--mist)}
.why__text .why__more{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--mint)}
.why__more svg{width:18px;height:18px}
@media (max-width:480px){.why{align-items:flex-start}.why__text>span:not(.why__more){font-size:13.5px}}

/* high scores teaser: a plain link to /scores/ */
.scores-teaser{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:clamp(20px,3vw,32px);border-radius:var(--r-lg)}
.scores-teaser__cup{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;color:var(--gold);background:rgba(255,203,107,.12);box-shadow:inset 0 0 0 1px rgba(255,203,107,.3)}
.scores-teaser__cup svg{width:34px;height:34px}
.scores-teaser__copy{flex:1 1 300px}
.scores-teaser__copy .section-title{margin:4px 0 6px}
.scores-teaser__copy p:last-child{margin:0;color:var(--mist);line-height:1.5}