/* ============================================================
   MEEPLE MAP — Design tokens
   Anchor: Quizlet (styles.refero.design) — tokens copied literally
   ============================================================ */
:root{
  /* Surfaces — two-level hierarchy over a cool canvas */
  --canvas:      #f6f7fb;
  --surface:     #ffffff;
  --tinted:      #edefff;
  --border:      #d9dde8;   /* hairline ONLY — never a fill */

  /* One saturated accent. That's the whole system. */
  --accent:      #4255ff;
  --accent-ink:  #2f3fd6;

  /* Text — four levels, never pure black */
  --ink:         #282e3e;
  --ink-2:       #2e3856;
  --muted:       #586380;
  --faint:       #939bb4;

  /* Category tints — Quizlet's 4 pastel feature cards, extended to 5 */
  --cat-family:   #d7f2f7;
  --cat-party:    #ffe4f0;
  --cat-strategy: #dbdfff;
  --cat-thematic: #ffe8d6;
  --cat-abstract: #e6f0e4;

  /* …and their vivid versions — Quizlet's four feature cards at full
     strength. Every one clears 5:1 against --ink, so text sits on them. */
  --c-family:   #4fd1e8;
  --c-party:    #ff7aa8;
  --c-strategy: #8b97ff;
  --c-thematic: #ffa45c;
  --c-abstract: #5fd08e;
  --c-survival: #a8d65a;   /* ARK in the quiz — abstract's green pushed toward lime */
  --c-pitch:    #b98cff;   /* FIFA in the quiz — a violet none of the five families use */
  --sun:        #ffcd1f;   /* Quizlet's yellow: highlighter only */
  --band:       #1d2466;   /* deep indigo from --accent, for The 20 */

  /* Type scale — Major Second from 16px */
  --t-display:  clamp(2rem, 1.4rem + 2.6vw, 2.75rem);  /* →44px */
  --t-heading:  clamp(1.5rem, 1.2rem + 1.3vw, 2rem);   /* →32px */
  --t-h-sm:     1.5rem;   /* 24 */
  --t-sub:      1.25rem;  /* 20 */
  --t-body:     1rem;     /* 16 */
  --t-sm:       .875rem;  /* 14 */
  --t-caption:  .75rem;   /* 12 */

  /* Spacing — base 8 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --rail: 1200px;
  --nav-h: 64px;

  /* Radius — pill on primary buttons is the signature */
  --r-input: 4px; --r-card: 8px; --r-feature: 24px; --r-pill: 200px;

  /* One shadow. Never stacked. */
  --shadow:    rgba(40,46,62,.1) 0 4px 16px 0;
  --shadow-sm: rgba(40,46,62,.1) 0 2px 4px 0;

  --ease: cubic-bezier(.2,.8,.3,1);
  /* A real damped spring sampled into linear(): damping 0.7, response 0.45s,
     settles in ~740ms, 4.6% overshoot. Only for things that arrive with momentum. */
  --spring: linear(0, 0.057, 0.189, 0.352, 0.517, 0.667, 0.791, 0.887, 0.956, 1.002, 1.029, 1.042, 1.046, 1.043, 1.037, 1.03, 1.022, 1.015, 1.01, 1.005, 1.002, 1, 0.999, 0.998, 0.998, 0.998, 0.998, 0.999, 1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:var(--t-body); font-weight:400; line-height:1.63;
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.25; font-weight:600; letter-spacing:-.015em}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-input)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.rail{max-width:var(--rail); margin-inline:auto; padding-inline:var(--s3)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s1);
  border:1px solid transparent; border-radius:var(--r-pill);
  padding:11px 24px; font-size:var(--t-body); font-weight:600;
  line-height:1.2; transition:transform .14s var(--ease), background .14s var(--ease);
}
.btn--primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--accent-ink); text-decoration:none}
.btn--ghost{background:transparent; border-color:var(--accent); color:var(--accent)}
.btn--ghost:hover{background:var(--tinted); text-decoration:none}
.btn--sm{padding:8px 18px; font-size:var(--t-sm)}
.btn:disabled{background:var(--border); color:var(--faint); box-shadow:none; cursor:not-allowed; transform:none}
.link-btn{
  background:none; border:0; padding:0; color:var(--accent);
  font-size:var(--t-body); font-weight:400;
}
.link-btn:hover{text-decoration:underline}

/* ---------- Nav ---------- */
.nav{background:var(--surface); box-shadow:var(--shadow); position:sticky; top:0; z-index:50}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .nav{background:rgba(255,255,255,.74); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
       box-shadow:rgba(40,46,62,.08) 0 1px 0, rgba(40,46,62,.06) 0 6px 18px}
}
@media (prefers-reduced-transparency: reduce){ .nav{background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none} }
.nav__in{display:flex; align-items:center; gap:var(--s3); height:var(--nav-h)}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:var(--t-sub); color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.logo:hover{text-decoration:none}
.logo__mark{width:26px; height:26px; flex:none}
.search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:var(--s1);
  background:var(--canvas); border:1px solid transparent; border-radius:var(--r-pill); padding:9px 16px;
  transition:border-color .14s var(--ease);
}
.search:focus-within{border-color:var(--accent)}
.search input{border:0; background:none; outline:0; width:100%; font:inherit; font-size:var(--t-sm); color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search input::-webkit-search-cancel-button{cursor:pointer}
.nav__right{margin-left:auto; display:flex; align-items:center; gap:var(--s2)}
.nav__link{font-size:var(--t-sm); font-weight:600; color:var(--muted); white-space:nowrap}
.nav__link:hover{color:var(--ink); text-decoration:none}

/* EN / ES switch — a two-segment pill, same language as the chips */
.lang{display:inline-flex; background:var(--canvas); border-radius:var(--r-pill); padding:3px; gap:2px}
.lang button{
  border:0; background:none; border-radius:var(--r-pill); padding:5px 10px;
  font-size:var(--t-caption); font-weight:700; letter-spacing:.06em; color:var(--muted);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm)}
.cta-short{display:none}

/* ---------- Hero ----------
   Squared-paper texture + a soft lilac wash. Both drawn from existing
   tokens — the "study desk" surface the whole system is built on. */
.hero-wrap{position:relative; overflow:hidden}
.hero-wrap::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 20%, transparent 78%);
}
.hero-wrap::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(760px,86vw); aspect-ratio:1.5; left:50%; top:-14%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, var(--tinted) 0%, transparent 68%);
}
.hero{position:relative; z-index:1; padding-block:var(--s10) var(--s8); text-align:center}   /* block only: keep .rail side padding */
.hero h1{font-size:var(--t-display); font-weight:700; line-height:1.12; letter-spacing:-.025em; max-width:15ch; margin-inline:auto}
.hero h1:lang(es){max-width:18ch}   /* Spanish runs ~20% longer: keep it to three lines */
.hero h1 .mark{
  background:linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 90%, transparent 90%);
  padding-inline:.08em; margin-inline:-.08em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero__sub{
  font-size:var(--t-sub); color:var(--muted); font-weight:400;
  max-width:52ch; margin:var(--s3) auto 0; line-height:1.45;
}

/* ---------- The quiz ---------- */
.quiz{margin-top:var(--s8); min-height:300px}
.quiz__top{display:flex; align-items:center; justify-content:center; gap:var(--s2); min-height:24px}
.quiz__label{
  font-size:var(--t-caption); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}
.quiz__dots{display:flex; gap:6px}
.quiz__dots i{width:18px; height:4px; border-radius:2px; background:var(--border); transition:background .2s var(--ease)}
.quiz__dots i.on{background:var(--accent)}
.quiz__back{
  position:absolute; left:0; background:none; border:0; padding:4px 0;
  font-size:var(--t-sm); font-weight:600; color:var(--muted);
}
.quiz__back:hover{color:var(--accent)}
.quiz__head{position:relative}
.quiz__q{font-size:var(--t-h-sm); font-weight:700; margin-top:var(--s1)}
.quiz__hint{font-size:var(--t-sm); color:var(--muted); margin-top:4px}
.quiz__head{max-width:var(--w,980px); margin-inline:auto}
.quiz__grid{
  display:grid; grid-template-columns:repeat(var(--n,6),1fr);
  gap:var(--s2); margin-top:var(--s3); max-width:var(--w,980px); margin-inline:auto;
}
.quiz__step{animation:stepIn .22s var(--ease) both}
/* Eight video games: two rows of four at every width, so names like "Counter-Strike" never break */
.quiz__grid--a{grid-template-columns:repeat(4,1fr); max-width:800px}
@keyframes stepIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.opt{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-feature);
  padding:var(--s3) var(--s2); text-align:center;
  display:flex; flex-direction:column; align-items:stretch;  /* buttons centre by default */
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.opt__mark{
  height:64px; border-radius:var(--r-card); display:grid; place-items:center;
  margin-bottom:var(--s2); background:var(--c, var(--tinted)); color:var(--ink);
  font-size:var(--t-h-sm); font-weight:700; letter-spacing:-.02em;
  transition:transform .18s var(--ease);
}
.opt__mark .weight__bars i{background:rgba(40,46,62,.18)}
.opt__mark .weight__bars i.on{background:var(--ink)}
.opt__name{font-size:var(--t-sm); font-weight:600; display:block; margin-top:auto; line-height:1.3}
.opt__kind{font-size:var(--t-caption); color:var(--faint); line-height:1.4; margin-top:2px}
.quiz__skip{margin-top:var(--s3); display:inline-block}
.quiz__done{
  max-width:560px; margin:var(--s3) auto 0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-feature); padding:var(--s4) var(--s3);
}
.quiz__done h2{font-size:var(--t-h-sm); font-weight:700}
.quiz__done p{color:var(--muted); margin-top:var(--s1)}
.quiz__done .btns{display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; margin-top:var(--s3)}

/* ---------- Section shell ---------- */
.section{padding-block:var(--s10)}
.section--tinted{background:var(--tinted)}
.section__head{margin-bottom:var(--s5)}
.section__head h2{font-size:var(--t-heading)}
.section__head p{color:var(--muted); margin-top:var(--s1); max-width:60ch}
.eyebrow{
  font-size:var(--t-caption); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px;
}

/* ---------- Category cards ---------- */
.cats{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2)}
.cat{
  border-radius:var(--r-feature); padding:var(--s3); min-height:190px; border:0; text-align:left;
  display:flex; flex-direction:column; justify-content:space-between; color:var(--ink);
  transition:transform .18s var(--ease);
}
.cat__title{font-size:var(--t-sub); font-weight:700}
.cat__desc{font-size:var(--t-sm); color:var(--ink); margin-top:6px; line-height:1.45}
.cat__panel{
  background:var(--surface); border-radius:var(--r-card); padding:10px 14px;
  font-size:var(--t-caption); color:var(--muted); font-weight:600; margin-top:var(--s3);
  display:flex; justify-content:space-between; align-items:center;
}
.cat__panel span:last-child{color:var(--accent)}
.cat--family{background:var(--c-family)}
.cat--party{background:var(--c-party)}
.cat--strategy{background:var(--c-strategy)}
.cat--thematic{background:var(--c-thematic)}
.cat--abstract{background:var(--c-abstract)}

/* ---------- Finder: filters + results ---------- */
.finder{display:grid; grid-template-columns:264px 1fr; gap:var(--s5); align-items:start}
.filters{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--s3); position:sticky; top:calc(var(--nav-h) + 24px);
  max-height:calc(100vh - var(--nav-h) - 48px); overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.filters__top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s3)}
.filters__top h3{font-size:var(--t-body); font-weight:600}
.filters__clear{background:none; border:0; padding:0; font-size:var(--t-caption); color:var(--accent); font-weight:600}
.filters__clear:disabled{color:var(--faint); cursor:default}
.fgroup{padding-block:var(--s2); border-top:1px solid var(--border)}
.fgroup:first-of-type{border-top:0; padding-top:0}
.fgroup__label{
  font-size:var(--t-caption); font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px;
}
.chips{display:flex; flex-wrap:wrap; gap:var(--s1)}
.chip{
  background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:6px 14px; font-size:var(--t-sm); font-weight:500; color:var(--ink-2);
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.chip:disabled{color:var(--faint); background:var(--surface); border-style:dashed; cursor:not-allowed}
.chip:disabled:hover{border-color:var(--border); color:var(--faint)}
.chip--family{background:var(--cat-family)} .chip--party{background:var(--cat-party)}
.chip--strategy{background:var(--cat-strategy)} .chip--thematic{background:var(--cat-thematic)}
.chip--abstract{background:var(--cat-abstract)}
.chip--family[aria-pressed="true"]{background:var(--c-family); border-color:var(--c-family); color:var(--ink)}
.chip--party[aria-pressed="true"]{background:var(--c-party); border-color:var(--c-party); color:var(--ink)}
.chip--strategy[aria-pressed="true"]{background:var(--c-strategy); border-color:var(--c-strategy); color:var(--ink)}
.chip--thematic[aria-pressed="true"]{background:var(--c-thematic); border-color:var(--c-thematic); color:var(--ink)}
.chip--abstract[aria-pressed="true"]{background:var(--c-abstract); border-color:var(--c-abstract); color:var(--ink)}
.chip--x{display:inline-flex; align-items:center; gap:6px; background:var(--tinted); border-color:transparent; color:var(--ink-2)}
.chip--x::after{content:"×"; font-size:15px; line-height:1; color:var(--muted)}
.chip--x:hover::after{color:var(--accent)}

.results__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  flex-wrap:wrap; margin-bottom:var(--s2);
}
.results__count{font-size:var(--t-sm); color:var(--muted)}
.results__count b{color:var(--ink); font-weight:600}
.results__tools{display:flex; align-items:center; gap:var(--s1)}
.select{
  appearance:none; -webkit-appearance:none;
  background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23586380' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--border); border-radius:var(--r-pill);
  padding:6px 34px 6px 14px; font:inherit; font-size:var(--t-sm); font-weight:500; color:var(--ink-2); cursor:pointer;
}
.select:hover{border-color:var(--accent)}
.filters-toggle{display:none; white-space:nowrap}
.active{display:flex; flex-wrap:wrap; gap:var(--s1); margin-bottom:var(--s3)}
.active:empty{display:none}

/* "Because you like…" banner — the quiz talking back */
.because{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--s2) var(--s3); margin-bottom:var(--s3);
}
.because__txt{flex:1; min-width:220px; font-size:var(--t-sm); color:var(--ink-2)}
.because__txt b{font-weight:600; color:var(--ink)}
.because__loose{display:block; margin-top:2px; font-size:var(--t-caption); color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--s3)}

/* ---------- Game card — the atom that matters ---------- */
.game{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--s2); display:flex; flex-direction:column; gap:10px; position:relative;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
/* No entrance and no lift: the grid re-renders on every filter, and a lift on
   75 cards flickers as the mouse sweeps across them. Shadow + border only. */

/* Square tile + contain: boxes range from square (Azul) to wide (Nemesis).
   multiply melts the white backgrounds retailers bake into their photos
   into the canvas tint, so every box sits on the same ground. */
.cover{
  aspect-ratio:1/1; border-radius:var(--r-card); background:var(--canvas);
  display:grid; place-items:center; overflow:hidden; padding:12px; position:relative;
}
.cover img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
/* The tile's single grid track must not grow to the image's natural height: without this,
   very tall boxes (Boss Monster, Munchkin) overflowed the square and lost their bottom edge. */
.cover, .rec__cover, .dlg__cover{grid-template:minmax(0,1fr) / minmax(0,1fr)}
.cover--family{background:var(--cat-family)}   .cover--party{background:var(--cat-party)}
.cover--strategy{background:var(--cat-strategy)} .cover--thematic{background:var(--cat-thematic)}
.cover--abstract{background:var(--cat-abstract)}
.game__open{position:absolute; inset:0; border:0; background:none; border-radius:var(--r-card); z-index:1}
.game__open:focus-visible{outline-offset:-2px}
.game__title{font-size:var(--t-body); font-weight:600; line-height:1.3}
.game__meta{font-size:var(--t-caption); color:var(--faint); margin-top:2px}
.game__tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{
  font-size:11px; font-weight:600; line-height:1.4; letter-spacing:.02em;
  border-radius:var(--r-pill); padding:2px 9px; color:var(--ink-2);
}
.tag--family{background:var(--cat-family)}
.tag--party{background:var(--cat-party)}
.tag--strategy{background:var(--cat-strategy)}
.tag--thematic{background:var(--cat-thematic)}
.tag--abstract{background:var(--cat-abstract)}
.tag--feels{border:1px solid var(--accent); color:var(--accent); background:var(--surface)}

/* The analogy — highlight zone inside a white card */
.like{
  background:var(--tinted); border-radius:var(--r-card); padding:10px 12px;
  font-size:var(--t-sm); color:var(--ink-2); line-height:1.45;
}
.like b{font-weight:600; color:var(--accent)}
.like__ref{
  position:relative; z-index:2; background:none; border:0; padding:0; font:inherit;
  font-weight:600; color:var(--accent); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.like__ref:hover{color:var(--accent-ink)}

.facts{display:flex; flex-wrap:wrap; gap:6px 12px; font-size:var(--t-caption); color:var(--muted)}
.game__foot{
  margin-top:auto; padding-top:10px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s1);
}
.bgg{font-size:var(--t-caption); font-weight:600; position:relative; z-index:2}

/* Complexity — 5 bars, accent fill. No new hue. */
.weight{display:flex; align-items:center; gap:6px}
.weight__bars{display:flex; gap:2px}
.weight__bars i{width:5px; height:11px; border-radius:1px; background:var(--border)}   /* not .weight i: the quiz uses the bars without the wrapper */
.weight__bars i.on{background:var(--accent)}
.weight__txt{font-size:var(--t-caption); color:var(--muted)}

/* Cross-reference mark. Applied only when a game is genuinely one of the 20. */
.tag-played{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); color:#fff; border-radius:var(--r-pill);
  padding:3px 10px; font-size:var(--t-caption); font-weight:600; line-height:1.4;
}
.tag-played::before{content:"◆"; font-size:8px; opacity:.85}
.game .marks{position:absolute; top:24px; left:24px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px}

/* A friend's seal of approval — a rubber stamp, deliberately a little crooked. */
.tag-luchi{
  display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
  background:var(--c-party); color:var(--ink); border-radius:var(--r-pill);
  padding:3px 10px; font-size:var(--t-caption); font-weight:700; line-height:1.4;
  transform:rotate(-3deg);
}
.tag-luchi::before{content:"✓"; font-size:11px; font-weight:800}

/* ---------- Empty state ---------- */
.empty{
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--r-card);
  padding:var(--s8) var(--s3); text-align:center;
}
.empty h3{font-size:var(--t-sub); font-weight:700}
.empty p{color:var(--muted); margin:var(--s1) auto var(--s3); max-width:44ch}
.empty .chips{justify-content:center; margin-bottom:var(--s3)}

/* ---------- Loading skeleton ---------- */
.skel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--s2)}
.skel i{display:block; border-radius:var(--r-card); background:var(--canvas); position:relative; overflow:hidden}
.skel i::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--tinted),transparent);
  transform:translateX(-100%); animation:shimmer 1.2s linear infinite}   /* transform: composited, no repaint per frame */
.skel i:first-child{aspect-ratio:1/1}
.skel i + i{height:14px; margin-top:12px; width:70%}
.skel i + i + i{width:45%}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- The 20 ---------- */
.byline{display:flex; align-items:center; gap:14px; margin-bottom:var(--s3)}
.byline__av{
  width:48px; height:48px; flex:none; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-size:var(--t-sub); font-weight:700;
}
.byline__name{font-size:var(--t-body); font-weight:600; line-height:1.3}
.byline__role{font-size:var(--t-sm); color:var(--muted)}
.thesis{font-size:var(--t-sub); color:var(--ink-2); line-height:1.5; max-width:64ch; font-weight:400}
.thesis em{
  font-style:normal; color:var(--ink); font-weight:500;
  background:var(--tinted); box-shadow:0 0 0 4px var(--tinted); border-radius:2px;
}
.legend{
  margin-top:var(--s3); font-size:var(--t-sm); color:var(--muted);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:64ch;
}
.twenty{margin-top:var(--s6); display:grid; gap:var(--s2)}
.rec{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--s3); display:grid; grid-template-columns:44px 76px 1fr; gap:var(--s3);
  align-items:start; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.rec:hover{border-color:var(--faint); box-shadow:var(--shadow)}
.rec__n{font-size:var(--t-heading); font-weight:700; color:var(--border); font-variant-numeric:tabular-nums; line-height:1}
.rec__cover{
  aspect-ratio:3/4; border-radius:var(--r-input); background:var(--canvas);
  border:1px dashed var(--border); display:grid; place-items:center; overflow:hidden;
  font-size:10px; color:var(--faint); text-align:center; padding:4px;
}
.rec__cover img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.rec__title{font-size:var(--t-sub); font-weight:700; line-height:1.25}
/* The whole card opens the game on BGG: the title link stretches over the card */
.rec{position:relative}
.rec__link{color:inherit}
.rec__link::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:1}
.rec__link:hover{text-decoration:none}
.rec__link:focus-visible{outline:none}
.rec:has(.rec__link:focus-visible){outline:2px solid var(--accent); outline-offset:3px}
.rec__bgg{color:var(--accent); font-weight:600}
@media (hover: hover) and (pointer: fine){ .rec:has(.rec__link):hover .rec__title{color:var(--accent)} }
.rec__meta{font-size:var(--t-caption); color:var(--faint); margin-top:2px}
.rec__tags{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.standout{
  display:inline-block; border:1px solid var(--accent); color:var(--accent);
  border-radius:var(--r-pill); padding:4px 14px; font-size:var(--t-caption); font-weight:600;
}
.rec__note{font-size:var(--t-body); color:var(--ink-2); line-height:1.6; margin-top:12px; max-width:62ch}
.rec__note--empty{
  color:var(--faint); border:1px dashed var(--border); border-radius:var(--r-card);
  padding:14px 16px; font-size:var(--t-sm); line-height:1.5;
}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:var(--s1); margin-top:var(--s2)}
.slot{
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--r-card);
  padding:14px var(--s2); display:flex; align-items:center; gap:14px;
}
.slot__n{font-size:var(--t-sm); font-weight:700; color:var(--border); font-variant-numeric:tabular-nums; width:24px; flex:none}
.slot__txt{font-size:var(--t-sm); color:var(--faint)}

/* ---------- Editorial picks — horizontal carousel, Quizlet-style ---------- */
.carousel{position:relative}
.picks{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,340px); gap:var(--s3);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--s3);
  padding:4px var(--s3) var(--s3); margin-inline:calc(var(--s3) * -1);
  scrollbar-width:none;
}
.picks::-webkit-scrollbar{display:none}
.pick{background:var(--surface); border-radius:var(--r-card); padding:var(--s3); box-shadow:var(--shadow); scroll-snap-align:start}
.pick h3{font-size:var(--t-sub); font-weight:700}
.pick__note{font-size:var(--t-sm); color:var(--muted); margin-top:6px}
.pick__list{list-style:none; margin:var(--s2) 0 0; padding:0}
.pick__item{border-top:1px solid var(--border)}
.pick__item:first-child{border-top:0}
.pick__row{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 0;
  background:none; border:0; text-align:left; border-radius:var(--r-input);
}
.pick__row:hover .pick__name{color:var(--accent)}
.pick__n{width:22px; flex:none; font-size:var(--t-caption); font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums}
.pick__thumb{width:44px; height:44px; flex:none; border-radius:var(--r-input); background:var(--canvas); padding:3px}
.pick__thumb img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.pick__name{font-size:var(--t-sm); font-weight:600; line-height:1.3; transition:color .14s var(--ease)}
.pick__sub{font-size:var(--t-caption); color:var(--faint)}
.nw{white-space:nowrap}   /* never "30–" / "60 min", never "Coup" / ":" */
.pick__all{margin-top:var(--s2); font-size:var(--t-sm)}
.arrow{
  position:absolute; top:calc(50% - 32px); z-index:2; width:40px; height:40px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); display:grid; place-items:center;
  color:var(--ink); box-shadow:var(--shadow-sm); transition:border-color .14s var(--ease), opacity .2s var(--ease);
}
.arrow:hover{border-color:var(--accent); color:var(--accent)}
.arrow:disabled{opacity:0; pointer-events:none}
.arrow--l{left:-20px} .arrow--r{right:-20px}

/* ---------- Game dialog ---------- */
.dlg{
  border:0; padding:0; border-radius:var(--r-feature); width:min(760px,calc(100vw - 32px));
  max-height:calc(100vh - 48px); background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
}
/* Enters and leaves the same way. Transitions, not keyframes, so the close
   animates too: allow-discrete keeps the dialog in the top layer and
   displayed until the fade ends. Exit is quicker than entry. Browsers without
   @starting-style/allow-discrete (Firefox today) just open and close instantly. */
.dlg{
  opacity:0; transform:translateY(8px) scale(.98);
  transition:opacity 160ms var(--ease), transform 160ms var(--ease),
             overlay 160ms var(--ease) allow-discrete, display 160ms var(--ease) allow-discrete;
}
.dlg[open]{opacity:1; transform:none; transition-duration:200ms}
@starting-style{ .dlg[open]{opacity:0; transform:translateY(12px) scale(.98)} }
.dlg::backdrop{
  background:rgba(40,46,62,0);
  transition:background 160ms var(--ease),
             overlay 160ms var(--ease) allow-discrete, display 160ms var(--ease) allow-discrete;
}
.dlg[open]::backdrop{background:rgba(40,46,62,.42); backdrop-filter:blur(2px); transition-duration:200ms}
@starting-style{ .dlg[open]::backdrop{background:rgba(40,46,62,0)} }
.dlg__in{display:grid; grid-template-columns:280px 1fr; gap:var(--s4); padding:var(--s4)}
.dlg__cover{aspect-ratio:1/1; background:var(--canvas); border-radius:var(--r-card); padding:var(--s2); display:grid; place-items:center}
.dlg__cover img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.dlg h2{font-size:var(--t-h-sm); font-weight:700; padding-right:var(--s5)}
.dlg__meta{font-size:var(--t-sm); color:var(--muted); margin-top:4px}
.dlg .like{font-size:var(--t-body); padding:14px 16px; margin-top:var(--s3)}
.dlg__facts{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s3)}
.fact dt{font-size:var(--t-caption); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--faint)}
.fact dd{margin:2px 0 0; font-size:var(--t-sm); font-weight:600; color:var(--ink-2)}
.dlg__cta{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s4)}
.dlg__x{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; color:var(--muted);
}
.dlg__x:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- Disclosure ---------- */
.note{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--s3); font-size:var(--t-sm); color:var(--muted); max-width:74ch;
}
.note b{color:var(--ink); font-weight:600}

/* ---------- Footer ---------- */
.foot{background:var(--canvas); border-top:1px solid var(--border); padding-block:var(--s6) var(--s5)}
.foot__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s4)}
.foot h4{font-size:var(--t-sm); font-weight:600; margin-bottom:12px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s1)}
.foot a, .foot .link-btn{font-size:var(--t-sm); color:var(--muted); font-weight:400; text-align:left}
.foot a:hover, .foot .link-btn:hover{color:var(--accent)}
.foot__base{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--border);
  font-size:var(--t-caption); color:var(--faint); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); justify-content:space-between;
}

/* ---------- The board: meeples and dice on the hero grid ----------
   The graph paper is a game board, so pieces stand on its intersections
   (32px steps, same as the grid). Pure decoration: aria-hidden. */
.board{position:absolute; inset:0; z-index:0; pointer-events:none}
.piece{
  --s:34px;
  position:absolute; width:var(--s); height:var(--s); pointer-events:none;
  /* centre on an intersection: x is an offset from the middle, snapped to the 32px grid */
  left:calc(50% + var(--x)); left:round(nearest, calc(50% + var(--x)), 32px);
  top:calc(var(--y) * 32px); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform:rotate(var(--r, 0deg));
  /* Placed on the board once, then still. Apple advises against slow endless
     oscillation — eight pieces bobbing at ~0.3 Hz forever can make people queasy. */
  animation:land 740ms var(--spring) both; animation-delay:calc(var(--d, 0s) * .25 + 150ms);
  filter:drop-shadow(0 4px 6px rgba(40,46,62,.18));
}
.piece svg{width:100%; height:100%; display:block}
.piece--lg{--s:44px}
.piece--die{--s:36px}
@keyframes land{
  from{opacity:0; transform:translateY(-40px) rotate(calc(var(--r, 0deg) - 18deg))}
  to{opacity:1; transform:translateY(0) rotate(var(--r, 0deg))}
}

/* ---------- The 20 on a deep band — the one section in my own voice ---------- */
.section--band{background:var(--band); color:#fff}
.section--band .eyebrow{color:var(--sun)}
.section--band .section__head h2{color:#fff}
.section--band .thesis{color:rgba(255,255,255,.86)}
.section--band .thesis em{background:var(--sun); box-shadow:0 0 0 4px var(--sun); color:var(--ink)}
.section--band .legend{color:rgba(255,255,255,.7); margin-top:var(--s4)}
.section--band .tag-played{background:var(--sun); color:var(--ink)}
.section--band .byline__av{background:var(--sun); color:var(--ink)}
.section--band .byline__name{color:#fff}
.section--band .byline__role{color:rgba(255,255,255,.7)}
.section--band .rec{border-color:transparent; color:var(--ink)}   /* the band's white text must not leak into white cards */
.section--band .slot{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.22)}
.section--band .slot__n{color:rgba(255,255,255,.35)}
.section--band .slot__txt{color:rgba(255,255,255,.55)}

/* ---------- Picks: vivid outer card, white inner panel (Quizlet feature card) ---------- */
.pick{padding:var(--s3) var(--s2) var(--s2); box-shadow:none; border-radius:var(--r-feature); display:flex; flex-direction:column}
.pick h3, .pick .pick__note{padding-inline:var(--s1)}
.pick .pick__note{color:var(--ink-2); font-weight:600}
.pick__panel{background:var(--surface); border-radius:var(--r-card); padding:4px var(--s2) var(--s2); margin-top:var(--s2);
  flex:1; display:flex; flex-direction:column}          /* equal panels whatever the list length */
.pick__panel .pick__all{margin-top:auto; padding-top:var(--s2); align-self:flex-start}
.pick__panel .pick__list{margin-top:0}
.pick--family{background:var(--c-family)} .pick--party{background:var(--c-party)}
.pick--strategy{background:var(--c-strategy)} .pick--thematic{background:var(--c-thematic)}
.pick--abstract{background:var(--c-abstract)}

/* ---------- Response: feedback on press, not on release ----------
   Everything pressable sinks slightly the instant it's touched. The press-in
   is quick (90ms); letting go eases back on the element's own transition. */
.chip, .pick__row, .lang button{transition-property:background, border-color, color, transform; transition-duration:.14s; transition-timing-function:var(--ease)}
.btn:active, .chip:active:not(:disabled), .lang button:active{transform:scale(.96); transition-duration:90ms}
.opt:active, .cat:active{transform:scale(.97); transition-duration:90ms}
.game:has(> .game__open:active){transform:scale(.985); transition-duration:90ms}
.pick__row:active{transform:scale(.98); transition-duration:90ms}

/* Hover is for a mouse: on touch it would stick after the tap, so it only exists here. */
@media (hover: hover) and (pointer: fine){
  .btn--primary:hover{transform:translateY(-1px)}
  .btn--primary:active{transform:scale(.96)}   /* this block comes after the press rules: re-assert the press */
  .opt:hover{transform:translateY(-3px); border-color:var(--c, var(--accent)); box-shadow:var(--shadow)}
  .opt:hover .opt__mark{transform:scale(1.04) rotate(-2deg)}
  .opt:active{transform:translateY(-1px) scale(.97)}
  .cat:hover{transform:translateY(-4px) rotate(-.6deg)}
  .cat:active{transform:translateY(-1px) scale(.97)}
  .game:hover{box-shadow:var(--shadow); border-color:var(--faint)}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .cats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1000px){
  .quiz__grid{grid-template-columns:repeat(min(var(--n),3),1fr); max-width:min(var(--w),560px)}
  .quiz__head{max-width:min(var(--w),560px)}
  .quiz__grid--a{grid-template-columns:repeat(4,1fr); max-width:640px}   /* seven games: 4 + 3, not 3 + 3 + 1 */
}
@media (min-width:561px) and (max-width:1000px){
  /* Four answers sit in one row, not 3 + 1 */
  .quiz__step[data-n="4"] .quiz__grid, .quiz__step[data-n="4"] .quiz__head{max-width:640px}
  .quiz__step[data-n="4"] .quiz__grid{grid-template-columns:repeat(4,1fr)}
}
/* Landscape phones: a stacked dialog puts the cover on the whole screen. Side by side instead. */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .dlg .dlg__in{grid-template-columns:200px 1fr; gap:var(--s3)}   /* .dlg: outranks the ≤900px stack below */
  .dlg .dlg__cover{max-width:none}
}
@media (max-width:900px){
  .finder{grid-template-columns:1fr}
  .filters{position:static; max-height:none}
  .filters-toggle{display:inline-flex}
  .search{display:none}
  .arrow{display:none}
  .dlg__in{grid-template-columns:1fr; gap:var(--s3); padding:var(--s3)}
  .dlg__cover{max-width:260px}
}
@media (max-width:760px){
  :root{--nav-h:56px}
  .nav__in{gap:var(--s2)}
  .nav__link{display:none}            /* every link also lives in the footer */
  .logo{font-size:var(--t-body)}
  .logo__mark{width:22px; height:22px}
  .nav__right .btn{padding:8px 16px; white-space:nowrap}
  .nav__right{gap:var(--s1)}
  .cta-long{display:none} .cta-short{display:inline}   /* "Encontrar mi juego" doesn't fit next to the switch */
  .cats{grid-template-columns:repeat(2,1fr)}
  .rec{grid-template-columns:32px 60px 1fr; gap:var(--s2); padding:var(--s2)}
  .rec__n{font-size:var(--t-sub)}
}
/* Narrower than this, side pieces would sit on the subhead or off-screen:
   keep three small ones on the top row, above the headline. */
@media (max-width:1100px){
  .piece{display:none}
  .piece--m{
    display:block; --s:24px;
    left:calc(50% + var(--xm)); left:round(nearest, calc(50% + var(--xm)), 32px);
    top:calc(var(--ym) * 32px);
  }
}
@media (max-width:560px){
  .quiz__grid{grid-template-columns:repeat(2,1fr); max-width:360px}
  .quiz__grid .opt:last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 8px)}   /* 7 games, 3 brain levels */
  .quiz__head{max-width:360px}
  .quiz__back{position:static; display:block; margin:0 auto 8px}
  .section{padding-block:var(--s6)}
  .hero{padding-block-start:var(--s6)}
  /* Horizontal card: at 375px two columns squeeze the analogy into seven lines. */
  .grid{grid-template-columns:1fr; gap:12px}
  .game{
    display:grid; grid-template-columns:88px 1fr; column-gap:14px; row-gap:10px; padding:14px;
    grid-template-areas:"c h" "c t" "l l" "f f" "o o";
  }
  .game .cover{grid-area:c; padding:6px; align-self:start}
  .game__head{grid-area:h}
  .game .game__tags{grid-area:t; align-self:start}
  .game .like{grid-area:l}
  .game .facts{grid-area:f}
  .game .game__foot{grid-area:o}
  /* The 20: cover + title side by side, then the tags and the note at full width.
     Three columns left the note about 12 characters wide at 360px. */
  .rec{grid-template-columns:56px 1fr; grid-template-areas:"c n" "c t" "c m" "g g" "x x"; column-gap:14px; row-gap:0}
  .rec__body{display:contents}
  .rec__n{grid-area:n; font-size:var(--t-caption); font-weight:600; color:var(--faint); line-height:1.4}
  .rec__cover{grid-area:c; align-self:start}
  .rec__title{grid-area:t} .rec__meta{grid-area:m}
  .rec__tags{grid-area:g} .rec__note{grid-area:x}
  .game .marks{top:8px; left:8px; gap:4px}
  .game .marks > span{font-size:10px; padding:2px 7px}
  .cats{grid-template-columns:1fr}
  .cat{min-height:0}
  .dlg__facts{grid-template-columns:1fr 1fr}
}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation:none !important; scroll-behavior:auto !important;
    transition-property:opacity, color, background-color, border-color, box-shadow !important;
    transition-duration:150ms !important;
  }
  .quiz__step{animation:fade .2s ease both !important}
  .opt:hover, .opt:active, .opt:hover .opt__mark, .cat:hover, .cat:active, .game:hover,
  .btn:hover, .btn:active, .chip:active, .pick__row:active, .lang button:active,
  .game:has(> .game__open:active){transform:none !important}
  .piece{transform:rotate(var(--r, 0deg)) !important}
}
/* Reduced motion keeps the dialog's fade (gentler, not zero) and drops the movement. */
@media (prefers-reduced-motion:reduce){
  .dlg{transform:none !important; transition-property:opacity, overlay, display !important;
       transition-duration:150ms !important; transition-behavior:allow-discrete !important}
}