/* ══════════════════════════════════════════════════════════
   SONG GUESSER — dark audio-lab
   ══════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --bg:#060608;
  --bg-2:#0a0b0e;
  /* Het vinkje wordt als masker gebruikt, niet als plaatje: zo neemt
     het de accentkleur over in plaats van zwart te blijven. */
  --camera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h3l1.5-2h7L17 8.5h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1Z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E");
  --vink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
  --panel:rgba(255,255,255,.032);
  --panel-2:rgba(255,255,255,.055);
  --stroke:rgba(255,255,255,.075);
  --stroke-2:rgba(255,255,255,.14);

  /* ink */
  --ink:#F4F5F7;
  --ink-2:#A8AEB8;
  --ink-3:#6A7079;

  /* accents
     De hoofdkleur staat als losse rgb-waarden, zodat elke gloed
     `rgb(var(--accent-rgb) / .4)` kan schrijven. Eén variabele omzetten
     kleurt daarmee de hele site — dat is wat de themaknop doet.
     --on-accent is de tekstkleur óp die kleur; die rekent app.js uit
     op basis van helderheid, anders wordt geel met wit onleesbaar. */
  --accent-rgb:154 88 254;          /* #9A58FE */
  --accent:rgb(var(--accent-rgb));
  --on-accent:#ffffff;

  --pink:#FF3D71;
  --cyan:#3DE3FF;
  --amber:#FFB23D;


  /* type */
  --display:'Unbounded', system-ui, sans-serif;
  --body:'DM Sans', system-ui, sans-serif;
  /* Was JetBrains Mono. In kleine, gespatieerde hoofdletters las dat
     slecht, en dat is precies waar dit lettertype voor gebruikt wordt:
     labels, chips, tijdlijnen. Nu dezelfde schreefloze als de lopende
     tekst; de spatiëring houdt het onderscheid met gewone tekst.
     Waar cijfers veranderen staat font-variant-numeric:tabular-nums,
     zodat ze niet gaan verspringen nu de breedte niet meer vast is. */
  --ui:'DM Sans', system-ui, sans-serif;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --snap:cubic-bezier(.34,1.56,.64,1);

  --radius:18px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

/* Een eigen `display` in de stylesheet wint van het hidden-attribuut,
   dus zonder deze regel blijven verborgen chips gewoon staan. */
[hidden]{display:none!important}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100dvh;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
b,strong{font-weight:700}
::selection{background:var(--accent);color:#0a0a0a}

/* ── scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgb(var(--accent-rgb) / .35)}

/* ══ ATMOSPHERE ═══════════════════════════════════════════ */
.aurora{position:fixed;inset:-20vmax;z-index:-4;pointer-events:none;filter:blur(90px) saturate(140%)}
.blob{position:absolute;display:block;border-radius:50%;opacity:.5;mix-blend-mode:screen}
.blob--accent{
  width:58vmax;height:58vmax;left:-8vmax;top:-6vmax;
  background:radial-gradient(circle at 40% 40%,rgb(var(--accent-rgb) / .5),rgba(143,212,0,.14) 45%,transparent 70%);
  animation:drift-a 26s var(--ease-io) infinite alternate;
}
.blob--cyan{
  width:50vmax;height:50vmax;right:-6vmax;top:6vmax;
  background:radial-gradient(circle at 60% 40%,rgba(61,227,255,.42),rgba(61,227,255,.1) 45%,transparent 70%);
  animation:drift-b 32s var(--ease-io) infinite alternate;
}
.blob--pink{
  width:46vmax;height:46vmax;left:28vmax;bottom:-16vmax;
  background:radial-gradient(circle at 50% 50%,rgba(255,61,113,.36),rgba(255,61,113,.08) 48%,transparent 72%);
  animation:drift-c 24s var(--ease-io) infinite alternate;
}
@keyframes drift-a{to{transform:translate3d(16vmax,10vmax,0) scale(1.18)}}
@keyframes drift-b{to{transform:translate3d(-14vmax,14vmax,0) scale(.86)}}
@keyframes drift-c{to{transform:translate3d(-18vmax,-10vmax,0) scale(1.12)}}

/* dark vignette + base wash sits above aurora */
.spotlight{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%,transparent 0%,rgba(6,6,8,.55) 45%,var(--bg) 78%),
    radial-gradient(90% 60% at 50% 110%,rgba(6,6,8,.9),transparent 60%);
}
.grid-veil{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 30%,#000 0%,transparent 75%);
}
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 7s steps(6) infinite;
}
@keyframes grain-shift{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6%,3%)}
  40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,-4%)}
  80%{transform:translate(5%,4%)}
}

/* ══ NAV ══════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,4vw,44px);
}
/* De vervaging zit op een laag eráchter. Zat het mask op .nav zelf,
   dan knipt het ook alles weg wat eronder uitklapt — zoals de
   themapopover. */
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  mask-image:linear-gradient(#000 60%,transparent);
  -webkit-mask-image:linear-gradient(#000 60%,transparent);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand__eq{display:flex;align-items:flex-end;gap:2.5px;height:17px}
.brand__eq i{
  width:2.5px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 8px rgb(var(--accent-rgb) / .75);
  animation:eq 1.05s var(--ease-io) infinite alternate;
}
.brand__eq i:nth-child(1){height:38%;animation-delay:-.1s}
.brand__eq i:nth-child(2){height:100%;animation-delay:-.45s}
.brand__eq i:nth-child(3){height:58%;animation-delay:-.72s}
.brand__eq i:nth-child(4){height:82%;animation-delay:-.3s}
@keyframes eq{from{height:22%}to{height:100%}}
.brand__name{
  font-family:var(--display);font-weight:800;font-size:14px;
  letter-spacing:.2em;white-space:nowrap;
}
.nav__right{display:flex;align-items:center;gap:10px;min-width:0}

/* "SONG GUESSER" is een stuk breder dan een kort merk, dus op smalle
   schermen krimpt de naam en gaat de streak eruit — anders duwt de
   balk de volumeknop van het scherm af. */
@media (max-width:620px){
  .nav{gap:10px}
  .brand{gap:8px}
  .brand__name{font-size:10.5px;letter-spacing:.1em}
  .nav__right{gap:6px}
  #account{
    display:block;max-width:104px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

/* ══ PRIMITIVES ═══════════════════════════════════════════ */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
  padding:7px 12px;border-radius:99px;
  border:1px solid var(--stroke);background:var(--panel);
  backdrop-filter:blur(10px);
}
.chip b{color:var(--ink);font-family:var(--ui)}
.chip .sep{opacity:.4;margin:0 1px}
.chip--accent{color:var(--on-accent);background:var(--accent);border-color:transparent;box-shadow:0 4px 24px -6px rgb(var(--accent-rgb) / .6)}
.chip--accent b{color:var(--on-accent)}
.chip--mute{opacity:.75}

.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:12px;border:1px solid var(--stroke);background:var(--panel);
  color:var(--ink-2);
  transition:.35s var(--ease);
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{color:var(--ink);border-color:var(--stroke-2);background:var(--panel-2);transform:translateY(-1px)}
.icon-btn.is-off{color:var(--ink-3)}
.icon-btn.is-off::after{
  content:'';position:absolute;left:50%;top:50%;width:22px;height:1.5px;
  background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.icon-btn{position:relative}

/* ── themakiezer ────────────────────────────────────────── */
.theme{position:relative}
.theme__btn{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:12px;border:1px solid var(--stroke);background:var(--panel);
  color:var(--ink-2);backdrop-filter:blur(10px);
  transition:.35s var(--ease);
}
.theme__btn svg{width:18px;height:18px}
.theme__btn:hover{color:var(--accent);border-color:rgb(var(--accent-rgb) / .45);background:rgb(var(--accent-rgb) / .07)}
.theme.is-open .theme__btn{color:var(--accent);border-color:rgb(var(--accent-rgb) / .55)}

.theme__pop{
  position:absolute;top:calc(100% + 10px);right:0;
  width:214px;padding:14px;border-radius:16px;
  border:1px solid var(--stroke-2);background:rgba(9,10,13,.97);
  backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.95);
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;
  transition:.28s var(--ease);
  z-index:45;
}
.theme.is-open .theme__pop{opacity:1;transform:none;pointer-events:auto}
.theme__label{
  margin:0 0 10px;font-family:var(--ui);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.theme__swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.theme__swatches button{
  aspect-ratio:1;border-radius:50%;border:2px solid transparent;
  position:relative;transition:transform .3s var(--snap), border-color .3s;
}
.theme__swatches button::after{
  content:'';position:absolute;inset:2px;border-radius:50%;background:var(--c);
  box-shadow:0 2px 10px -2px var(--c);
}
.theme__swatches button:hover{transform:scale(1.14)}
.theme__swatches button.is-on{border-color:#fff}
.theme__custom{
  display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--stroke);
  font-size:12px;color:var(--ink-2);cursor:pointer;
}
.theme__custom input{
  width:26px;height:26px;padding:0;border:1px solid var(--stroke-2);
  border-radius:8px;background:none;cursor:pointer;
}
.theme__custom input::-webkit-color-swatch-wrapper{padding:2px}
.theme__custom input::-webkit-color-swatch{border:none;border-radius:5px}

/* ── taal ───────────────────────────────────────────────── */
.lang{position:relative}
.lang__btn{
  height:38px;min-width:44px;padding:0 12px;
  display:grid;place-items:center;
  border-radius:12px;border:1px solid var(--stroke);background:var(--panel);
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--ink-2);backdrop-filter:blur(10px);
  transition:.35s var(--ease);
}
.lang__btn:hover{color:var(--accent);border-color:rgb(var(--accent-rgb) / .45)}
.lang.is-open .lang__btn{color:var(--accent);border-color:rgb(var(--accent-rgb) / .55)}
.lang__pop{
  position:absolute;top:calc(100% + 10px);right:0;width:150px;padding:6px;
  border-radius:14px;border:1px solid var(--stroke-2);background:rgba(9,10,13,.97);
  backdrop-filter:blur(24px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.95);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:.26s var(--ease);z-index:45;
}
.lang.is-open .lang__pop{opacity:1;transform:none;pointer-events:auto}
.lang__pop button{
  display:block;width:100%;text-align:left;
  padding:9px 12px;border-radius:9px;font-size:13.5px;color:var(--ink-2);
  transition:background .2s, color .2s;
}
.lang__pop button:hover{background:rgb(var(--accent-rgb) / .1);color:var(--ink)}
.lang__pop button.is-on{color:var(--accent)}

/* ── accountknop en -venster ────────────────────────────── */
/* #btn-account is niet langer een chip in de balk maar de kop van het
   uitklapmenu. De oude vulling maakte de hele regel paars en liet de
   letter erin verdwijnen; de opmaak staat nu bij .acct__ik. */
#btn-account{cursor:pointer}

.authbox{
  position:relative;width:100%;max-width:400px;
  padding:30px 28px 26px;border-radius:24px;
  border:1px solid var(--stroke-2);
  background:linear-gradient(180deg,rgba(24,26,31,.97),rgba(11,12,15,.97));
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  transform:translateY(22px) scale(.96);opacity:0;
  transition:.5s var(--snap);
}
.overlay.is-open .authbox{transform:none;opacity:1}
.authbox__x{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:9px;color:var(--ink-3);
  transition:.25s var(--ease);
}
.authbox__x svg{width:15px;height:15px}
.authbox__x:hover{color:var(--ink);background:var(--panel-2)}



















/* ── volume ─────────────────────────────────────────────── */
.volume{
  --v:80%;
  display:flex;align-items:center;gap:4px;
  padding:4px 6px 4px 4px;border-radius:99px;
  border:1px solid var(--stroke);background:var(--panel);
  backdrop-filter:blur(10px);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.volume:hover,.volume:focus-within{border-color:var(--stroke-2);background:var(--panel-2)}
.volume__btn{
  width:30px;height:30px;flex:none;display:grid;place-items:center;position:relative;
  border-radius:50%;color:var(--ink-2);transition:color .3s;
}
.volume__btn:hover{color:var(--ink)}
.vol-ic{width:17px;height:17px;position:absolute;transition:.3s var(--snap)}
.vol-ic--off{opacity:0;transform:scale(.6)}
.volume.is-muted .volume__btn{color:var(--ink-3)}
.volume.is-muted .vol-ic--on{opacity:0;transform:scale(.6)}
.volume.is-muted .vol-ic--off{opacity:1;transform:none}
/* de golfjes verdwijnen netjes als je zachter zet */
.volume[data-level="0"] .wave,
.volume[data-level="1"] .wave--1,
.volume[data-level="1"] .wave--2,
.volume[data-level="2"] .wave--2{opacity:0}
.wave{transition:opacity .3s var(--ease)}

.volume__slider{
  -webkit-appearance:none;appearance:none;
  width:84px;height:18px;background:none;cursor:pointer;
  margin:0;
}
.volume__slider::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent) var(--v),rgba(255,255,255,.13) var(--v));
  box-shadow:0 0 10px -2px rgb(var(--accent-rgb) / .6);
}
.volume__slider::-moz-range-track{
  height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent) var(--v),rgba(255,255,255,.13) var(--v));
}
.volume__slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin-top:-3.5px;border-radius:50%;
  background:#fff;border:0;
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .16), 0 1px 6px rgba(0,0,0,.6);
  transition:transform .25s var(--snap), box-shadow .25s var(--ease);
}
.volume__slider::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .16), 0 1px 6px rgba(0,0,0,.6);
}
.volume__slider:hover::-webkit-slider-thumb,
.volume__slider:focus-visible::-webkit-slider-thumb{
  transform:scale(1.25);
  box-shadow:0 0 0 5px rgb(var(--accent-rgb) / .22), 0 0 14px rgb(var(--accent-rgb) / .7);
}
.volume__slider:focus{outline:none}
.volume.is-muted .volume__slider::-webkit-slider-runnable-track{
  background:rgba(255,255,255,.13);box-shadow:none;
}
.volume.is-muted .volume__slider::-moz-range-track{background:rgba(255,255,255,.13)}
@media (max-width:560px){ .volume__slider{width:56px} }

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:14px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;
  border:1px solid var(--stroke-2);
  transition:transform .3s var(--snap), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
  overflow:hidden;
}
.btn svg{width:17px;height:17px;transition:transform .35s var(--ease)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn--primary{
  background:var(--accent);color:var(--on-accent);border-color:transparent;
  box-shadow:0 10px 34px -12px rgb(var(--accent-rgb) / .85), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.7) 45%,transparent 65%);
  transform:translateX(-130%);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px -12px rgb(var(--accent-rgb) / .95), inset 0 1px 0 rgba(255,255,255,.5)}
.btn--primary:hover::after{animation:sheen .85s var(--ease-io)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--primary:active{transform:translateY(0) scale(.985)}
@keyframes sheen{to{transform:translateX(130%)}}

.btn--ghost{
  background:var(--panel);color:var(--ink-2);border-color:var(--stroke);
}
.btn--ghost span{font-family:var(--ui);font-size:11px;color:var(--accent);opacity:.9}
.btn--ghost:hover{color:var(--ink);background:var(--panel-2);border-color:var(--stroke-2);transform:translateY(-2px)}
.btn--ghost:active{transform:translateY(0) scale(.985)}
.btn--xl{padding:18px 30px;font-size:15px;border-radius:16px}

kbd{
  font-family:var(--ui);font-size:10px;padding:3px 6px;border-radius:6px;
  border:1px solid var(--stroke-2);background:var(--panel);color:var(--ink-2);
}

/* ══ STAGE / SCREENS ══════════════════════════════════════ */
.stage{position:relative;min-height:100dvh;display:grid}
.screen{
  grid-area:1/1;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  min-height:100dvh;
  padding:104px clamp(18px,4vw,44px) 48px;
}
.screen.is-active{display:flex}
.screen.is-leaving{animation:screen-out .3s var(--ease-io) forwards}
@keyframes screen-out{to{opacity:0;transform:translateY(-14px) scale(.985);filter:blur(6px)}}

.rise{opacity:0;animation:rise .85s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{
  from{opacity:0;transform:translateY(26px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}

/* ══ HOME ═════════════════════════════════════════════════ */
.home{width:100%;max-width:1080px;text-align:center;display:flex;flex-direction:column;align-items:center}


.hero{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(40px,10.4vw,146px);   /* 7 letters, dus kleiner dan een kort woord */
  line-height:.82;
  letter-spacing:-.045em;
  display:flex;flex-direction:column;
}
.hero__row{display:block;position:relative}
.hero__row:first-child{
  background:linear-gradient(180deg,#fff 20%,#9aa0aa 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* text-shadow en geen filter: een filter op een element met
     background-clip:text laat de browser het hele achtergrondvlak
     rasteren, en dan zie je een rechthoek gloeien in plaats van de
     letters. text-shadow werkt wel op de vorm van de letters zelf. */
  text-shadow:0 12px 44px rgba(255,255,255,.16);
}
.hero__row--ghost{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.34);
  padding-left:.09em;
  position:relative;
}
.hero__row--ghost::before{
  content:'GUESSER';
  position:absolute;inset:0;padding-left:.09em;
  -webkit-text-stroke:0;

  /* Lime met één lichtere band erin. Die band staat normaal buiten
     beeld en trekt er af en toe traag doorheen — het woord blijft
     dus leven zonder dat er iets beweegt. */
  background:linear-gradient(105deg,
    var(--accent) 0%, var(--accent) 43%,
    #F4FFCB 50%,
    var(--accent) 57%, var(--accent) 100%);
  background-size:280% 100%;
  background-position:130% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;

  clip-path:inset(0 100% 0 0);
  /* de gloed staat in variabelen, want op een telefoon is het woord
     een derde zo groot en loopt een gloed van 34px de letters in */
  --g1:30px; --g2:54px;
  text-shadow:0 0 var(--g1) rgb(var(--accent-rgb) / .5);
  animation:
    wipe    1.5s var(--ease)     .7s forwards,
    shine   9s   ease-in-out    2.6s infinite,
    breathe 6.5s var(--ease-io) 2.6s infinite;
}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}

/* lange pauze, korte veeg — anders wordt het een discolamp */
@keyframes shine{
  0%, 18%  {background-position:130% 0}
  62%, 100%{background-position:-40% 0}
}
@keyframes breathe{
  0%, 100%{text-shadow:0 0 var(--g1) rgb(var(--accent-rgb) / .45)}
  50%     {text-shadow:0 0 var(--g2) rgb(var(--accent-rgb) / .68)}
}
.hero__word{position:relative;display:inline-block}

.lede{
  margin:30px 0 0;max-width:47ch;
  font-size:clamp(15px,1.6vw,18.5px);color:var(--ink-2);line-height:1.65;
}
.lede b{color:var(--ink);font-weight:700}

/* ── mode cards ─────────────────────────────────────────── */
.modes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  width:100%;max-width:900px;margin:46px 0 0;text-align:left;
}
.mode{
  position:relative;overflow:hidden;
  text-align:left;
  padding:22px 22px 18px;border-radius:var(--radius);
  border:1px solid var(--stroke);background:var(--panel);
  backdrop-filter:blur(14px);
  transition:transform .45s var(--ease), border-color .4s, background .4s;
}
.mode h3{
  margin:0 0 7px;font-family:var(--display);font-weight:800;
  font-size:19px;letter-spacing:-.01em;
}
.mode p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.5;min-height:40px}
.mode__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--stroke);
  font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.mode__foot > i{font-style:normal;transition:transform .35s var(--ease)}
.mode__glow{
  position:absolute;inset:-40% -10% auto;height:150px;
  background:radial-gradient(50% 100% at 50% 0,rgb(var(--m) / .3),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.mode__foot em{font-style:normal;color:var(--ink-2);font-weight:600}
.mode:hover{transform:translateY(-6px);border-color:rgb(var(--m) / .45);background:rgb(var(--m) / .05)}
.mode:hover .mode__glow{opacity:1}
.mode:hover .mode__foot > i{transform:translateX(5px)}

/* Elke moeilijkheid krijgt zijn eigen kleur. Drie identiek paarse
   kaarten zeggen niets; groen-amber-rood lees je zonder na te denken.
   De rest van de site blijft de themakleur volgen. */
.mode{--m:var(--accent-rgb)}
.mode[data-mode="easy"]  {--m:52 211 153}
.mode[data-mode="normal"]{--m:255 178 61}
.mode[data-mode="hard"]  {--m:255 93 108}


.mode__level{display:inline-flex;align-items:center;gap:4px}
.mode__level i{
  width:15px;height:4px;border-radius:2px;
  background:var(--stroke-2);transition:background .4s var(--ease);
}
.mode[data-mode="easy"]   .mode__level i:nth-child(-n+1),
.mode[data-mode="normal"] .mode__level i:nth-child(-n+2),
.mode[data-mode="hard"]   .mode__level i:nth-child(-n+3){background:rgb(var(--m) / .9)}

.mode.is-picked{
  border-color:rgb(var(--m));background:rgb(var(--m) / .07);
  box-shadow:0 0 0 1px rgb(var(--m) / .45), 0 20px 60px -22px rgb(var(--m) / .55);
}
.mode.is-picked .mode__glow{opacity:1}
.mode.is-picked .mode__foot{color:rgb(var(--m))}

/* ── categoriekiezer ────────────────────────────────────── */
.picker{width:100%;max-width:900px;margin:26px 0 0;text-align:center}
.picker__label{
  margin:0 0 12px;
  font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);
}
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.cat{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 11px;border-radius:99px;
  border:1px solid var(--stroke);background:var(--panel);
  font-family:var(--ui);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  backdrop-filter:blur(10px);
  transition:transform .3s var(--snap), color .3s, border-color .3s, background .3s, box-shadow .35s var(--ease);
}
/* het icoon zit in een eigen rondje, zodat de rij ook op afstand
   leesbaar blijft als een reeks symbolen in plaats van tekst */
.cat__ico{
  width:22px;height:22px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.07);
  transition:background .3s var(--ease);
}
.cat__ico svg{width:13px;height:13px}
.cat__yr{
  font-family:var(--ui);font-style:normal;font-size:8.5px;
  font-weight:800;letter-spacing:0;line-height:1;
}
.cat.is-on .cat__ico{background:rgba(0,0,0,.16)}
.cat:hover .cat__ico{background:rgba(255,255,255,.13)}
.cat.is-on:hover .cat__ico{background:rgba(0,0,0,.2)}
.cat__name{white-space:nowrap}
.cat em{font-style:normal;opacity:.45;font-size:9.5px}
.cat:hover{color:var(--ink);border-color:var(--stroke-2);background:var(--panel-2);transform:translateY(-2px)}
.cat.is-on{
  color:var(--on-accent);background:var(--accent);border-color:transparent;
  box-shadow:0 8px 26px -10px rgb(var(--accent-rgb) / .9);
}
.cat.is-on em{opacity:.55;color:var(--on-accent)}
.cat.is-empty{opacity:.3;pointer-events:none}
.cat::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 100% at 50% 120%,rgb(var(--accent-rgb) / .35),transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);
}
.cat:hover::after{opacity:1}
.cat.is-on::after{display:none}

/* ── melding (Spotify-setup, Premium, fouten) ───────────────── */
.notice{
  display:none;width:100%;max-width:560px;margin:26px 0 0;text-align:left;
  padding:18px 20px;border-radius:16px;
  border:1px solid rgba(255,178,61,.32);
  background:rgba(255,178,61,.07);
  backdrop-filter:blur(12px);
  animation:rise .6s var(--ease);
}
.notice.is-on{display:block}
.notice h4{
  margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--amber);letter-spacing:-.01em;
}
.notice p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.notice code{
  font-family:var(--ui);font-size:12px;
  padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.08);color:var(--ink);
}

#account{cursor:pointer;transition:.3s var(--ease)}
#account:hover{border-color:var(--stroke-2);color:var(--ink)}

.btn.is-busy{pointer-events:none;opacity:.7}
.btn.is-busy span::after{
  content:'';display:inline-block;width:11px;height:11px;margin-left:9px;
  vertical-align:-1px;border-radius:50%;
  border:2px solid rgba(0,0,0,.25);border-top-color:rgba(0,0,0,.75);
  animation:spin .7s linear infinite;
}

.cta{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta__hint{margin:0;font-size:12px;color:var(--ink-3);letter-spacing:.02em}

/* ── ticker ─────────────────────────────────────────────── */
/* De ticker stond vastgeplakt aan de onderkant van het scherm. Nu de
   voettekst eronder komt, loopt hij gewoon mee in de pagina. */
.ticker{
  width:100vw;margin-left:calc(50% - 50vw);
  padding:11px 0;overflow:hidden;margin-top:26px;
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.02));
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker__track{display:flex;gap:34px;width:max-content;animation:marquee 46s linear infinite}
.ticker__track span{
  font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:34px;white-space:nowrap;
}
.ticker__track span::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.5}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── voettekst ──────────────────────────────────────────────
   Het homescherm centreert zijn inhoud verticaal. Zonder deze twee
   regels duwt de voettekst die inhoud omhoog; nu neemt .home de
   resterende ruimte en zakt de voet naar de onderkant. */
/* Onder de footer stond 48px en erboven 16px, dus hij hing scheef en
   at onderaan ruimte op. Nu even veel aan beide kanten. */
.screen--home{justify-content:flex-start;padding-top:88px;padding-bottom:20px}
.screen--home .home{margin:auto 0}

/* Het gaat erom dat de startknop zonder scrollen te zien is. Op een
   laag scherm knijpen we daarom de verticale ruimte in plaats van
   iets weg te laten. */
.screen--home .hero{font-size:clamp(42px,min(10.4vw,13.5vh),146px)}

.screen--home .lede{margin-top:20px}
.screen--home .modes{margin-top:26px}
.screen--home .mode{padding:18px 20px 15px}
.screen--home .mode h3{margin:10px 0 5px}
.screen--home .mode p{min-height:0}
.screen--home .mode__foot{margin-top:13px;padding-top:11px}
.screen--home .picker{margin-top:18px}
.screen--home .picker__label{margin-bottom:8px}
.screen--home .cta{margin-top:22px;gap:11px}

.sitefoot{
  width:100%;padding:12px 0;margin-top:20px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 14px;text-align:center;
}
.sitefoot__by{margin:0;font-size:12px;color:var(--ink-3)}
.sitefoot__by b{color:var(--ink-2);font-weight:600}
.sitefoot__links{display:flex;gap:2px;align-items:center}
.sitefoot__links a{
  font-family:var(--ui);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;
  padding:6px 12px;border-radius:99px;border:1px solid transparent;
  transition:.3s var(--ease);
}
.sitefoot__links a:hover{
  color:var(--accent);border-color:rgb(var(--accent-rgb) / .35);
  background:rgb(var(--accent-rgb) / .07);
}
/* De koffielink hoort bij de andere voetlinks en gedraagt zich er ook
   zo: rustig grijs, met alleen een warme ondertoon in het kopje. Pas
   als je er met de muis heen gaat wordt het warm en komt de stoom op
   gang. Wie het zoekt vindt het; het hoeft niemand aan te spreken.
   De selectors staan met .sitefoot__links ervoor, anders wint de
   paarse hover van de gewone voetlinks op specificiteit. */
.sitefoot__links a.sitefoot__coffee{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sitefoot__coffee svg{
  width:14px;height:14px;
  color:rgba(255,178,61,.55);
  transition:color .35s var(--ease);
}
.sitefoot__coffee .steam{
  opacity:0;
  transform-box:fill-box;transform-origin:center bottom;
  transition:opacity .3s var(--ease);
}
.sitefoot__links a.sitefoot__coffee:hover{
  color:var(--amber);
  border-color:rgba(255,178,61,.34);
  background:rgba(255,178,61,.07);
}
.sitefoot__coffee:hover svg{color:var(--amber)}
.sitefoot__coffee:hover .steam{animation:stoom 2.4s var(--ease-io) infinite}

/* het kopje damp: even opkomen, oplossen, opnieuw */
@keyframes stoom{
  0%  {opacity:0;  transform:translateY(1.5px) scaleY(.65)}
  35% {opacity:.9; transform:translateY(0)     scaleY(1)}
  100%{opacity:0;  transform:translateY(-3px)  scaleY(1.2)}
}
@media (prefers-reduced-motion:reduce){
  .sitefoot__coffee:hover .steam{animation:none;opacity:.9}
}
/* de bronvermelding hoort erbij maar hoeft niet te schreeuwen */
.sitefoot__note{
  flex-basis:100%;margin:0;font-size:10.5px;line-height:1.5;
  color:var(--ink-3);opacity:.6;
}
@media (max-width:520px){ .sitefoot__note{display:none} }

/* Vier links plus de makersregel breken op een telefoon over twee
   regels en maken de pagina onnodig lang. De muziekpagina is een
   werkoverzicht (en staat op noindex), dus die mag daar weg. */
@media (max-width:560px){ .sitefoot__links a[href="songs.html"]{display:none} }

/* ══ LOSSE PAGINA'S (voorwaarden, privacy) ════════════════ */
.doc-body{min-height:100dvh}
.doc{
  max-width:680px;margin:0 auto;
  padding:120px clamp(20px,5vw,32px) 90px;
}
.doc__kicker{
  margin:0 0 10px;font-family:var(--ui);font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}
.doc h1{
  margin:0 0 8px;font-family:var(--display);font-weight:900;
  font-size:clamp(30px,5vw,44px);line-height:1.06;letter-spacing:-.03em;
}
.doc__meta{
  margin:0 0 30px;font-family:var(--ui);font-size:10.5px;
  letter-spacing:.1em;color:var(--ink-3);
}
.doc__lead{
  margin:0 0 34px;padding:18px 20px;border-radius:16px;
  border:1px solid rgb(var(--accent-rgb) / .26);
  background:rgb(var(--accent-rgb) / .06);
  font-size:15.5px;line-height:1.65;color:var(--ink-2);
}
.doc h2{
  margin:34px 0 12px;font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:-.01em;color:var(--ink);
}
.doc p, .doc li{font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{margin-bottom:8px}
.doc li::marker{color:rgb(var(--accent-rgb) / .6)}
.doc b{color:var(--ink);font-weight:600}
.doc code{
  font-family:var(--ui);font-size:12.5px;
  padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.07);color:var(--ink);
}
.doc a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgb(var(--accent-rgb) / .35)}
.doc a:hover{border-bottom-color:var(--accent)}
.doc__back{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--stroke);
}
.doc__back a{font-family:var(--ui);font-size:11.5px;letter-spacing:.1em;border:0}

/* ══ GAME BOARD ═══════════════════════════════════════════ */
.board{width:100%;max-width:640px;display:flex;flex-direction:column;gap:20px}
.screen--game.is-active .board>*{opacity:0;animation:rise .7s var(--ease) forwards}
.screen--game.is-active .board>*:nth-child(1){animation-delay:.02s}
.screen--game.is-active .board>*:nth-child(2){animation-delay:.08s}
.screen--game.is-active .board>*:nth-child(3){animation-delay:.14s}
.screen--game.is-active .board>*:nth-child(4){animation-delay:.2s}

.board__top{display:flex;align-items:center;gap:12px}
.board__chips{display:flex;gap:8px;flex-wrap:wrap;flex:1}

/* ── de score ───────────────────────────────────────────────
   Dit is het getal waar het om draait, dus het staat groot en in het
   midden in plaats van klein in een hoek. Bij punten erbij springt hij
   op, gloeit de achtergrond en vliegt de winst omhoog. */
.hud{position:relative;text-align:center;padding:2px 0 0;user-select:none}
.hud__label{
  display:block;margin-left:.42em;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink-3);
}
.hud__score{
  font-variant-numeric:tabular-nums;
  display:block;position:relative;z-index:1;
  font-family:var(--display);font-weight:900;
  font-size:clamp(40px,9vw,58px);line-height:1.02;letter-spacing:-.035em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.hud.is-gain .hud__score{
  color:var(--accent);
  animation:hud-pop .75s var(--snap);
}
@keyframes hud-pop{
  0%{transform:scale(1)}
  28%{transform:scale(1.14)}
  100%{transform:scale(1)}
}

.hud__glow{
  position:absolute;left:50%;top:56%;width:230px;height:96px;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgb(var(--accent-rgb) / .4),transparent);
  filter:blur(8px);opacity:0;pointer-events:none;
}
.hud.is-gain .hud__glow{animation:hud-glow 1s var(--ease)}
@keyframes hud-glow{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.55)}
  22% {opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
}

/* Start onder het cijfer en vliegt er langs omhoog — begon hij op de
   baseline, dan viel hij over de score heen en werd het een prut. */
.hud__gain{
  position:absolute;left:50%;bottom:-34px;z-index:2;
  font-family:var(--display);font-weight:800;font-size:21px;
  color:var(--accent);opacity:0;pointer-events:none;white-space:nowrap;
  text-shadow:0 0 24px rgb(var(--accent-rgb) / .8);
}
.hud__gain.is-on{animation:gain-fly 1.2s var(--ease)}
@keyframes gain-fly{
  0%  {opacity:0;transform:translate(-50%,14px) scale(.7)}
  18% {opacity:1;transform:translate(-50%,0)    scale(1.08)}
  32% {opacity:1;transform:translate(-50%,-6px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-52px) scale(.96)}
}

/* ── naar de streamingdienst ────────────────────────────── */
/* Klein en grijs, tot je erheen gaat: dan krijgt elk merk zijn eigen
   kleur. Zo staan ze er wel, maar trekken ze de aandacht niet weg van
   het nummer zelf. */
.result__links{
  display:flex;justify-content:center;gap:9px;
  margin:13px 0 0;
}
.result__link{
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--stroke);
  color:var(--ink-3);background:var(--panel);
  transition:.32s var(--ease);
}
.result__link svg{width:16px;height:16px}
.result__link:hover{transform:translateY(-2px)}
.result__link--apple:hover{
  color:#fff;border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.09);
}
.result__link--spotify:hover{
  color:#1ed760;border-color:rgba(30,215,96,.5);
  background:rgba(30,215,96,.1);
}

/* ── koffiemoment ───────────────────────────────────────── */
.coffee{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:min(310px,calc(100vw - 40px));
  padding:20px 20px 14px;
  border-radius:var(--radius);
  border:1px solid rgba(255,178,61,.24);
  background:linear-gradient(180deg,rgba(31,24,14,.97),rgba(12,11,14,.97));
  backdrop-filter:blur(16px);
  box-shadow:0 26px 70px -20px rgba(0,0,0,.85), 0 0 44px -22px rgba(255,178,61,.5);
  text-align:left;
  opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .4s var(--ease), transform .45s var(--snap);
}
.coffee.is-open{opacity:1;transform:none}

.coffee__cup{display:block;color:var(--amber)}
.coffee__cup svg{width:30px;height:30px}
.coffee__cup .steam{
  transform-box:fill-box;transform-origin:center bottom;
  animation:stoom 2.6s var(--ease-io) infinite;
}

.coffee__title{
  margin:12px 0 0;font-family:var(--display);font-weight:800;
  font-size:17px;letter-spacing:-.01em;color:var(--ink);
}
.coffee__text{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}

.coffee__actions{display:flex;align-items:center;gap:9px;margin:15px 0 0}
.coffee__yes{
  flex:1;text-align:center;text-decoration:none;
  padding:10px 14px;border-radius:99px;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#20160a;background:var(--amber);
  transition:.3s var(--ease);
}
.coffee__yes:hover{filter:brightness(1.1);transform:translateY(-1px)}
.coffee__later{
  padding:10px 14px;border-radius:99px;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--stroke);
  transition:.3s var(--ease);
}
.coffee__later:hover{color:var(--ink-2);border-color:var(--stroke-2)}

/* Zonder deze uitweg wordt het op den duur toch zeuren. */
.coffee__never{
  display:block;margin:11px auto 0;padding:3px;
  font-size:10.5px;color:var(--ink-3);opacity:.55;
  text-decoration:underline;text-underline-offset:3px;
  transition:opacity .3s var(--ease);
}
.coffee__never:hover{opacity:.9}

.coffee__x{
  position:absolute;top:9px;right:9px;
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;color:var(--ink-3);
  transition:.3s var(--ease);
}
.coffee__x svg{width:14px;height:14px}
.coffee__x:hover{color:var(--ink);background:rgba(255,255,255,.07)}

@media (max-width:520px){
  .coffee{right:12px;left:12px;bottom:12px;width:auto;padding:18px 18px 12px}
  /* raakvlakken groot genoeg voor een duim */
  .coffee__x{width:34px;height:34px;top:7px;right:7px}
  .coffee__yes,.coffee__later{padding:13px 16px}
  .coffee__never{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .coffee{transition:opacity .2s linear}
  .coffee__cup .steam{animation:none}
}

/* ── spoelknoppen op het onthullingsscherm ──────────────── */
/* Ze staan naast de volumeregelaar in plaats van op de hoes: daar
   dekken ze niets af en vormen ze samen één rij bediening. */
.result__controls{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:14px 0 0;
}
.result__controls .volume--result{margin:0}
.result__seek{
  width:37px;height:37px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--stroke);
  background:var(--panel);color:var(--ink-3);
  transition:.3s var(--ease);
}
.result__seek svg{width:22px;height:22px}
.result__seek text{font-family:var(--ui);letter-spacing:-.5px}
.result__seek:hover{
  color:var(--ink);border-color:rgb(var(--accent-rgb) / .45);
  background:rgb(var(--accent-rgb) / .08);
}
.result__seek:active{transform:scale(.92)}

/* ── reeks ──────────────────────────────────────────────── */
/* Naast de score in plaats van in de balk bovenin: het is spelstand,
   geen navigatie. Boven de vouw op de startpagina stond hij alleen maar
   nul te zijn. */
.streak{
  position:absolute;right:0;top:50%;transform:translateY(-38%);
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px 5px 8px;border-radius:99px;
  border:1px solid rgba(255,138,61,.4);
  background:linear-gradient(180deg,rgba(255,138,61,.18),rgba(255,138,61,.06));
  color:#ff9d52;
  animation:streakIn .45s var(--snap);
}
.streak svg{width:14px;height:14px;filter:drop-shadow(0 0 6px rgba(255,138,61,.8))}
.streak b{font-family:var(--ui);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.streak.is-up{animation:streakUp .5s var(--snap)}

@keyframes streakIn{
  from{opacity:0;transform:translateY(-38%) scale(.7)}
  to  {opacity:1;transform:translateY(-38%) scale(1)}
}
@keyframes streakUp{
  0%  {transform:translateY(-38%) scale(1)}
  40% {transform:translateY(-38%) scale(1.22)}
  100%{transform:translateY(-38%) scale(1)}
}

@media (max-width:560px){
  .streak{padding:4px 9px 4px 7px}
  .streak svg{width:12px;height:12px}
  .streak b{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .streak,.streak.is-up{animation:none}
}

/* ── reeks: einde ───────────────────────────────────────── */

/* ── rondeteller ────────────────────────────────────────── */
/* Geen eigen marge: .board geeft al 20px tussen zijn kinderen. Met die
   15px erbovenop kwam de score los te staan van de rest. */
.rounds{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:0;
}
.rounds i{
  width:14px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.12);
  transition:width .5s var(--snap), background .4s var(--ease), box-shadow .4s var(--ease);
}
.rounds i.is-won{
  background:var(--accent);
  box-shadow:0 0 12px rgb(var(--accent-rgb) / .55);
}
.rounds i.is-lost{background:rgba(255,93,108,.5)}
.rounds i.is-now{
  width:28px;
  animation:rondePuls 1.8s var(--ease-io) infinite;
}
.rounds i.pop{animation:rondePop .46s var(--snap)}

@keyframes rondePuls{
  0%,100%{background:rgba(255,255,255,.3); box-shadow:0 0 0 rgb(var(--accent-rgb) / 0)}
  50%    {background:rgba(255,255,255,.72);box-shadow:0 0 14px rgb(var(--accent-rgb) / .45)}
}
@keyframes rondePop{
  0%  {transform:scaleY(1)}
  40% {transform:scaleY(2.6)}
  100%{transform:scaleY(1)}
}
.rounds__n{
  margin-left:9px;font-family:var(--ui);font-size:10px;
  letter-spacing:.14em;color:var(--ink-3);
}
.rounds__n b{color:var(--ink-2);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .rounds i.is-now,.rounds i.pop{animation:none}
  .rounds i.is-now{background:rgba(255,255,255,.6)}
}

/* ── trappenstrip ───────────────────────────────────────────
   Zeven volle regels onder elkaar was een muur, en het herhaalde
   precies wat de tijdlijn al laat zien. Nu is het één rij tegels:
   je ziet in één blik waar je bent en wat je nog hebt. */
.steps{
  list-style:none;margin:0;padding:0;
  display:flex;gap:6px;
}
.steps li{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  height:62px;border-radius:13px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.022);
  transition:transform .45s var(--snap), border-color .4s, background .4s, box-shadow .4s;
}
.steps .t{
  font-family:var(--ui);font-size:10px;letter-spacing:.04em;
  color:var(--ink-3);transition:color .4s;
}
.steps .m{
  width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:var(--ink-3);
  transition:.4s var(--snap);
}
.steps .m svg{width:10px;height:10px}
.steps .m:empty{background:rgba(255,255,255,.05)}

.steps li.is-current{
  border-color:rgb(var(--accent-rgb) / .5);
  background:rgb(var(--accent-rgb) / .07);
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .22), 0 10px 30px -16px rgb(var(--accent-rgb) / 1);
}
.steps li.is-current .t{color:var(--accent)}
.steps li.is-current .m{
  background:var(--accent);color:var(--on-accent);
  animation:step-pulse 2s var(--ease-io) infinite;
}
@keyframes step-pulse{
  0%,100%{box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .5)}
  70%    {box-shadow:0 0 0 8px rgb(var(--accent-rgb) / 0)}
}

.steps li.is-wrong{border-color:rgba(255,61,113,.3);background:rgba(255,61,113,.07)}
.steps li.is-wrong .t{color:rgba(255,61,113,.85)}
.steps li.is-wrong .m{background:rgba(255,61,113,.2);color:var(--pink)}

/* Goede artiest, verkeerd nummer: geen misser maar een aanwijzing.
   Amber leest als "warm" tussen het rood en het accent in. */
.steps li.is-artist{border-color:rgba(255,178,61,.4);background:rgba(255,178,61,.09)}
.steps li.is-artist .t{color:var(--amber)}
.steps li.is-artist .m{background:rgba(255,178,61,.22);color:var(--amber)}

.steps li.is-skip{background:rgba(255,255,255,.05)}
.steps li.is-skip .t{color:var(--ink-2)}
.steps li.is-skip .m{background:rgba(255,255,255,.1);color:var(--ink-2)}

.steps li.is-correct{
  border-color:var(--accent);background:rgb(var(--accent-rgb) / .15);
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .4), 0 12px 36px -14px rgb(var(--accent-rgb) / 1);
  animation:pop .6s var(--snap);
}
.steps li.is-correct .t{color:var(--accent)}
.steps li.is-correct .m{background:var(--accent);color:var(--on-accent)}

.steps.is-won li:not(.is-correct){opacity:.35;filter:saturate(.3);transition:.5s var(--ease)}

/* ── afgevallen antwoorden ──────────────────────────────────
   Alleen fout geraden namen. Doorgestreept, want dat is precies wat
   ze zijn: uitgesloten. Skips staan er niet in — die zie je al aan
   de strip erboven, en een regel "overgeslagen" zegt niets. */
.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.history:empty{display:none}
.history li{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;border-radius:12px;
  border:1px solid rgba(255,61,113,.22);
  background:rgba(255,61,113,.045);
  font-size:13.5px;color:var(--ink-2);
  animation:rise .5s var(--ease);
}
.history .m{
  width:19px;height:19px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,61,113,.18);color:var(--pink);
}
.history .m svg{width:10px;height:10px}
.history .txt{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-decoration:line-through;
  text-decoration-color:rgba(255,61,113,.5);
}
.history .at{font-family:var(--ui);font-size:10px;color:var(--ink-3);flex:none}

/* dezelfde aanwijzing in de lijst: amber, niet doorgestreept, want
   dit antwoord bracht je juist dichterbij */
.history li.is-artist{
  border-color:rgba(255,178,61,.3);
  background:rgba(255,178,61,.06);
}
.history li.is-artist .m{background:rgba(255,178,61,.2);color:var(--amber)}
.history li.is-artist .txt{text-decoration:none;color:var(--ink)}
.history .hint{
  flex:none;font-family:var(--ui);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);
  padding:3px 8px;border-radius:99px;background:rgba(255,178,61,.14);
}

@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-5px)}
}

/* ── player ─────────────────────────────────────────────── */
.player{
  position:relative;
  padding:26px 24px 58px;border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(18px);
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;
}
.player::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 50% 100%,rgb(var(--accent-rgb) / .09),transparent 65%);
  opacity:0;transition:opacity .6s var(--ease);
}
.player.is-playing::before{opacity:1}

/* visualizer */
.viz{
  position:absolute;inset:auto 0 0;height:64px;z-index:0;
  display:flex;align-items:flex-end;justify-content:center;gap:3px;
  padding:0 10px;opacity:.22;pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  transition:opacity .5s var(--ease);
}
.viz i{
  flex:1;max-width:5px;height:6%;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,rgb(var(--accent-rgb) / .35),rgb(var(--accent-rgb) / .9) 55%,rgb(var(--accent-rgb) / .15));
  transition:height .07s linear;
}
.player.is-playing .viz{opacity:.5}
/* de inhoud van de speler blijft boven de staafjes leesbaar */
.play,.track,.track__labels,.player__meta{position:relative;z-index:2}

/* skip links, play in het midden, volume rechts — de drie dingen die
   met afspelen te maken hebben staan nu bij elkaar. De 1fr-kolommen
   houden de playknop exact gecentreerd, wat de zijkanten ook doen. */
.player__controls{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.player__controls .volume{justify-self:end}

.skip{
  justify-self:start;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 16px;border-radius:13px;
  border:1px solid var(--stroke);background:var(--panel);
  color:var(--ink-2);
  transition:transform .3s var(--snap), color .3s, border-color .3s, background .3s;
}
.skip__label{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.02em}
.skip__meta{font-family:var(--ui);font-size:10px;color:var(--accent);opacity:.85}
.skip:hover{
  color:var(--ink);border-color:rgb(var(--accent-rgb) / .42);
  background:rgb(var(--accent-rgb) / .06);transform:translateY(-2px);
}
.skip:active{transform:translateY(0) scale(.97)}

/* play button */
.play{
  position:relative;width:96px;height:96px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#1b1d22,#0c0d10);
  border:1px solid var(--stroke-2);
  color:var(--accent);
  transition:transform .4s var(--snap), border-color .4s;
  z-index:2;
}
.play:hover{transform:scale(1.045);border-color:rgb(var(--accent-rgb) / .5)}
.play:active{transform:scale(.97)}
.play__icon{width:32px;height:32px;position:absolute;transition:.35s var(--snap);filter:drop-shadow(0 0 14px rgb(var(--accent-rgb) / .7))}
/* Het driehoekje wordt op zijn zwaartepunt gecentreerd, niet op zijn
   omhullende rechthoek. Dat zwaartepunt ligt al op het midden van de
   viewBox, dus er hoeft nog maar een haar bij. */
.play__icon--play{margin-left:1px}
/* tijdens het spelen wordt de knop een replay: het fragment start
   altijd opnieuw vanaf het begin, er valt niets te pauzeren */
.play__icon--replay{opacity:0;transform:scale(.6) rotate(-90deg);width:29px;height:29px}
.player.is-playing .play__icon--play{opacity:0;transform:scale(.6)}
.player.is-playing .play__icon--replay{opacity:1;transform:none}
.play:hover .play__icon--replay{transform:rotate(-150deg)}
.play__ring{
  position:absolute;inset:-7px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p,0) * 1turn), rgba(255,255,255,.07) 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  filter:drop-shadow(0 0 10px rgb(var(--accent-rgb) / .55));
}
.play__halo{
  position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgb(var(--accent-rgb) / .5);opacity:0;
}
/* laadstand terwijl de preview binnenkomt */
.play.is-loading{pointer-events:none}
.play.is-loading .play__icon{opacity:.12}
.play.is-loading .play__ring{
  background:conic-gradient(from 0turn,transparent 0 .58turn,var(--accent) .92turn,transparent 1turn);
  animation:spin 1s linear infinite;
}
.player.is-playing .play__halo{animation:halo 1.4s var(--ease-io) infinite}
@keyframes halo{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:0;transform:scale(1.55)}
}

/* ── puntwaarde per trede ───────────────────────────────── */
/* De hele curve staat nu op tafel: je ziet wat elke trede oplevert en
   dus wat een stap je kost. De tegel waar je staat toont geen
   tabelwaarde maar wat het op dít moment waard is — die zakt zichtbaar
   zodra je mis gokt. */
.steps li{height:70px;gap:3px}
.steps .p{
  font-variant-numeric:tabular-nums;
  font-family:var(--ui);font-weight:800;font-size:13.5px;
  letter-spacing:-.02em;color:var(--ink-2);
  transition:color .4s, transform .45s var(--snap);
}
/* de p mag meelezen maar niet meeschreeuwen */
.steps .p i{font-style:normal;font-size:.68em;opacity:.5;margin-left:1px}
.steps li.is-current .p{
  color:var(--accent);font-size:16px;
  text-shadow:0 0 16px rgb(var(--accent-rgb) / .5);
}
/* al gespeeld: de waarde is verleden tijd */
.steps li.is-skip .p,
.steps li.is-wrong .p,
.steps li.is-artist .p{opacity:.3;text-decoration:line-through}
.steps li.is-correct .p{color:var(--ok, #34d399)}

/* ── de boete ───────────────────────────────────────────── */
.stepswrap{position:relative}
.steps__pen{
  position:absolute;left:50%;top:-6px;transform:translate(-50%,0);
  font-family:var(--ui);font-weight:800;font-size:15px;
  color:#ff5d6c;text-shadow:0 0 18px rgba(255,93,108,.6);
  opacity:0;pointer-events:none;z-index:3;
}
.steps__pen.is-on{animation:boete 1.1s var(--ease) forwards}
@keyframes boete{
  0%  {opacity:0;transform:translate(-50%,6px) scale(.8)}
  22% {opacity:1;transform:translate(-50%,-6px) scale(1.12)}
  70% {opacity:1;transform:translate(-50%,-16px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-30px) scale(.95)}
}

/* ── prijskaartjes op de knoppen ────────────────────────── */
/* Skip en gok dragen allebei hun prijs, zodat de afweging zichtbaar is
   op het moment dat je hem maakt. */
.skip__meta{display:flex;align-items:center;gap:6px}
.skip__meta i{
  font-style:normal;font-family:var(--ui);font-size:10px;
  color:var(--ink-3);
}
.skip:hover .skip__meta i{color:#ff9aa4}

.btn__cost{
  font-style:normal;font-family:var(--ui);font-size:10px;font-weight:700;
  letter-spacing:.06em;
  padding:2px 6px;border-radius:6px;
  background:rgba(0,0,0,.18);color:inherit;opacity:.72;
}

@media (max-width:560px){
  .steps li{height:64px;gap:2px}
  .steps .p{font-size:12px}
  .steps li.is-current .p{font-size:14px}
  .steps__pen{font-size:13px}
}


/* timeline */
.track{
  position:relative;width:100%;height:9px;margin:26px 0 0;
  border-radius:99px;background:rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.track__unlocked{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(90deg,rgb(var(--accent-rgb) / .35),rgb(var(--accent-rgb) / .75));
  border-radius:99px;
  transition:width .75s var(--ease);
  box-shadow:0 0 18px rgb(var(--accent-rgb) / .45);
}
.track__head{
  position:absolute;top:-3px;bottom:-3px;left:0;width:2px;
  background:#fff;border-radius:2px;opacity:0;
  box-shadow:0 0 14px 2px rgba(255,255,255,.85);
}
.player.is-playing .track__head{opacity:1}
.track__ticks{position:absolute;inset:0}
.track__ticks i{position:absolute;top:0;bottom:0;width:1px;background:rgba(6,6,8,.85)}
.track__labels{
  position:relative;width:100%;height:16px;margin-top:8px;
}
.track__labels span{
  font-variant-numeric:tabular-nums;
  position:absolute;transform:translateX(-50%);
  font-family:var(--ui);font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);
  transition:color .4s,text-shadow .4s;
}
.track__labels span:first-child{transform:none}
.track__labels span:last-child{transform:translateX(-100%)}
.track__labels span.is-on{color:var(--accent);text-shadow:0 0 12px rgb(var(--accent-rgb) / .6)}

/* Dit is een zin en geen label, dus geen hoofdletters en geen brede
   spatiëring: dat maakt lopende tekst juist slechter leesbaar. */
.player__meta{
  margin:16px 0 0;font-family:var(--ui);font-size:12.5px;letter-spacing:.01em;
  color:var(--ink-3);
}
.player__meta b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}

/* ── guess bar ──────────────────────────────────────────── */
/* op desktop staat Gok náást het zoekveld: typen en bevestigen
   horen bij elkaar, en het scheelt een regel hoogte */
.guessbar{display:flex;gap:10px;align-items:stretch}
.field{position:relative;flex:1;min-width:0}
#btn-guess{flex:none;height:56px;padding-inline:36px}
@media (max-width:560px){
  .guessbar{flex-direction:column}
  #btn-guess{width:100%;height:52px}
}
.field__icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-3);pointer-events:none;transition:color .3s;
}
.field input{
  width:100%;height:56px;padding:0 46px 0 44px;
  border-radius:14px;border:1px solid var(--stroke);
  background:var(--panel);color:var(--ink);
  font-size:15px;
  outline:none;
  transition:.35s var(--ease);
  backdrop-filter:blur(14px);
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{
  border-color:rgb(var(--accent-rgb) / .55);background:rgb(var(--accent-rgb) / .045);
  box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .09),0 10px 40px -20px rgb(var(--accent-rgb) / .9);
}
.field:focus-within .field__icon{color:var(--accent)}
.field__clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%) scale(.7);
  width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
  color:var(--ink-3);opacity:0;pointer-events:none;transition:.25s var(--ease);
}
.field__clear svg{width:14px;height:14px}
.field.has-text .field__clear{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}
.field__clear:hover{color:var(--ink);background:var(--panel-2)}

/* suggestions */
.suggest{
  position:absolute;left:0;right:0;bottom:calc(100% + 10px);
  max-height:294px;overflow-y:auto;overscroll-behavior:contain;
  border-radius:16px;border:1px solid var(--stroke-2);
  background:rgba(9,10,13,.985);
  backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03);
  padding:6px;
  opacity:0;transform:translateY(8px) scale(.985);pointer-events:none;
  transition:.28s var(--ease);
  z-index:20;
}
.suggest.is-open{opacity:1;transform:none;pointer-events:auto}
.suggest__item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 10px;border-radius:11px;text-align:left;
  transition:background .2s;
  opacity:0;animation:sug-in .35s var(--ease) forwards;
}
@keyframes sug-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.suggest__item .cover{
  width:38px;height:38px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:13px;color:rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.suggest__item .meta{min-width:0;flex:1}
.suggest__item .t{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest__item .a{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest__item .yr{font-family:var(--ui);font-size:10px;color:var(--ink-3);flex:none}
.suggest__item mark{background:none;color:var(--accent);font-weight:700}
.suggest__item:hover,.suggest__item.is-active{background:rgb(var(--accent-rgb) / .1)}
.suggest__item.is-active .t{color:var(--accent)}
.suggest__empty{padding:16px;text-align:center;color:var(--ink-3);font-size:13px}


/* ══ RESULT OVERLAY ═══════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.overlay.is-open{opacity:1;pointer-events:auto}
.overlay__scrim{position:absolute;inset:0;background:rgba(4,4,6,.78);backdrop-filter:blur(14px)}
.result{
  position:relative;width:100%;max-width:420px;text-align:center;
  padding:34px 30px 30px;border-radius:26px;
  border:1px solid var(--stroke-2);
  background:linear-gradient(180deg,rgba(24,26,31,.96),rgba(11,12,15,.96));
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  transform:translateY(22px) scale(.95);opacity:0;
  transition:.55s var(--snap);
}
.overlay.is-open .result{transform:none;opacity:1}
.result__player{margin:0 auto 22px;width:150px}
.result__toggle{
  position:absolute;inset:0;border-radius:inherit;
  display:grid;place-items:center;
  background:rgba(4,5,7,.42);
  color:#fff;
  opacity:0;transition:opacity .3s var(--ease);
  backdrop-filter:blur(2px);
}
.result__toggle .ic{width:30px;height:30px;position:absolute;transition:.3s var(--snap);filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.result__toggle .ic--play{margin-left:3px;opacity:0;transform:scale(.6)}
/* zichtbaar zolang er niets speelt — op touch is er geen hover */
.result__art:not(.is-playing) .result__toggle{opacity:1}
.result__art.is-playing:hover .result__toggle{opacity:1}
.result__art.is-paused .ic--pause{opacity:0;transform:scale(.6)}
.result__art.is-paused .ic--play{opacity:1;transform:none}
.result__art:not(.is-playing):not(.is-paused) .ic--pause{opacity:0;transform:scale(.6)}
.result__art:not(.is-playing):not(.is-paused) .ic--play{opacity:1;transform:none}

.result__bar{
  height:3px;margin:12px 4px 0;border-radius:99px;
  background:rgba(255,255,255,.09);overflow:hidden;
}
.result__bar i{
  display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,rgb(var(--accent-rgb) / .5),var(--accent));
  box-shadow:0 0 12px rgb(var(--accent-rgb) / .65);
}
.result.is-fail .result__bar i{
  background:linear-gradient(90deg,rgba(255,61,113,.5),var(--pink));
  box-shadow:0 0 12px rgba(255,61,113,.6);
}

.result__art{
  width:150px;height:150px;margin:0 auto;border-radius:20px;cursor:pointer;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(140deg,var(--c1,#333),var(--c2,#111));
  box-shadow:0 24px 60px -18px var(--c1,#000), inset 0 0 0 1px rgba(255,255,255,.16);
  animation:art-in .8s var(--snap);
}
@keyframes art-in{from{transform:scale(.6) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.result__art.has-art{background-size:cover!important;background-position:center}
.result__art.has-art .result__disc{display:none}
.result__art::after{
  content:'';position:absolute;inset:-6px;border-radius:25px;
  border:1px solid rgb(var(--accent-rgb) / .55);opacity:0;pointer-events:none;
}
.result__art.is-playing::after{animation:halo 1.9s var(--ease-io) infinite}
.result.is-fail .result__art::after{border-color:rgba(255,61,113,.5)}
.result__disc{
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.85) 22%,rgba(255,255,255,.22) 23%,rgba(0,0,0,.55) 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  animation:spin 5.5s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.result__verdict{
  margin:0;font-family:var(--ui);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);
}
.result.is-fail .result__verdict{color:var(--pink)}
.result__title{
  margin:10px 0 4px;font-family:var(--display);font-weight:800;font-size:23px;
  line-height:1.2;letter-spacing:-.02em;
}
.result__artist{margin:0;color:var(--ink-2);font-size:14px}
/* Drie tegels in plaats van kolommen tussen twee streepjes. De punten
   zijn de beloning van de ronde, dus die tegel licht op — bij verlies
   in roze, want dan valt er niets te vieren. */
.result__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:22px 0;
}
.result__stats div{
  padding:13px 8px 11px;border-radius:13px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  opacity:0;animation:rise .5s var(--ease) forwards;
}
.result__stats div:nth-child(1){animation-delay:.14s}
.result__stats div:nth-child(2){animation-delay:.21s}
.result__stats div:nth-child(3){animation-delay:.28s}

.result__stats b{
  display:block;font-family:var(--ui);font-size:18px;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.result__stats span{
  font-family:var(--ui);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}

.result__stats div:last-child{
  border-color:rgb(var(--accent-rgb) / .42);
  background:rgb(var(--accent-rgb) / .09);
  box-shadow:inset 0 0 26px -14px rgb(var(--accent-rgb) / 1);
}
.result__stats div:last-child b{
  color:var(--accent);
  text-shadow:0 0 24px rgb(var(--accent-rgb) / .55);
}
.result.is-fail .result__stats div:last-child{
  border-color:rgba(255,61,113,.3);
  background:rgba(255,61,113,.07);
  box-shadow:none;
}
.result.is-fail .result__stats div:last-child b{color:var(--pink);text-shadow:none}
.result .btn{width:100%}

/* ══ PROFIEL & SCOREBORD ══════════════════════════════════ */
/* De pagina komt op in twee stappen: eerst wie je bent, dan je cijfers.
   Verder niets — je komt hier om iets op te zoeken, niet om naar een
   opkomst te kijken. */
.screen--profile.is-active .pf__kop{opacity:0;animation:rise .5s var(--ease) forwards}
.screen--profile.is-active #prof-me{opacity:0;animation:rise .5s var(--ease) .08s forwards}

/* .profile__top, .profile__who en .profile__tabs bestaan niet meer:
   de accountpagina is opnieuw opgebouwd rond .pf__. Wat hier stond zette
   de instellingenknop op smalle schermen op volle breedte, en die knop
   is inmiddels een icoontje — dat duwde de naam uit beeld. */
#btn-prof-settings{flex:none;cursor:pointer}
#btn-prof-settings:hover{color:var(--ink);border-color:var(--stroke-2)}

.cats--filter{justify-content:flex-start;margin-bottom:14px}
.cats--filter .cat{padding:7px 12px;font-size:10px}

.board-list li .rank{
  width:26px;flex:none;text-align:center;
  font-family:var(--ui);font-size:12px;color:var(--ink-3);
}
/* top drie krijgen een tint mee, zodat het bord in één blik leest */
.board-list li:nth-child(1) .rank{color:#FFD75E}
.board-list li:nth-child(2) .rank{color:#D6DCE6}
.board-list li:nth-child(3) .rank{color:#E0A268}

@media (max-width:520px){
  .board-list .meta{display:none}
}


/* Het scorebord is waar mensen voor terugkomen, dus die knop mag als
   enige in de balk kleur hebben. De rest blijft grijs, anders vecht
   alles om aandacht en valt er niets meer op. */
.chip--board{
  gap:7px;
  color:var(--accent);
  border-color:rgb(var(--accent-rgb) / .42);
  background:rgb(var(--accent-rgb) / .1);
  transition:.3s var(--ease);
}
.chip--board svg{width:15px;height:15px}
/* Op een telefoon past merk + tekstknop + taal + thema + account niet
   naast elkaar; het themaknopje viel er 11px buiten. Daar blijft alleen
   de trofee over, nog steeds als enige in kleur. */
@media (max-width:620px){
  .chip--board{padding:0;width:34px;height:34px;justify-content:center;gap:0}
  .chip--board span{display:none}
  .chip--board svg{width:16px;height:16px}
}

.chip--board:hover{
  color:var(--ink);
  border-color:rgb(var(--accent-rgb) / .7);
  background:rgb(var(--accent-rgb) / .18);
  transform:translateY(-1px);
}


/* de knoppen om je keuze te herzien, op de privacypagina */
.doc__consent{
  margin:0 0 20px;padding:16px 18px;
  border-radius:14px;border:1px solid var(--stroke);
  background:var(--panel);
}
.doc__consent:empty{display:none}

/* ══ AANRAKEN ═════════════════════════════════════════════
   Twee dingen die een website als een app laten voelen: geen
   dubbeltik-zoom, en zichtbaar indrukken van wat je aantikt. */

html{
  /* Haalt de dubbeltik-zoom weg én de 300ms vertraging die browsers
     anders aanhouden om op die tweede tik te wachten. Knijpen om in te
     zoomen blijft gewoon werken; alleen de dubbeltik verdwijnt. */
  touch-action:manipulation;
}

*{
  /* geen grijsblauwe flits en geen menu bij lang indrukken */
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}

/* Een vinger die sleept hoort te scrollen, niet tekst te selecteren.
   In velden en in de losse pagina's wil je juist wél kunnen selecteren. */
body{-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable="true"],.doc,.result__title,.result__artist{
  -webkit-user-select:text;user-select:text;
}
img{-webkit-user-drag:none;user-drag:none}

/* ── indrukken ──────────────────────────────────────────────
   Alleen op aanraakschermen. Op de desktop bestaat hover al en zou een
   schaalregel daarmee vechten (de modekaarten schuiven bijvoorbeeld
   omhoog bij hover). */
@media (hover:none){
  .btn,.chip,.skip,.icon-btn,.volpop,.volume__btn,.field__clear,
  .result__seek,.result__link,.result__toggle,
  .lb__tabs button,.authbox__tabs button,.profile__tabs button,
  .coffee__yes,.coffee__later,.coffee__x,.coffee__never,
  .consent__knoppen button,
  .theme__btn,.lang__btn,.lang__pop button,
  .sitefoot__links a,.suggest li{
    transition:transform .1s var(--ease);
  }
  .btn:active,.chip:active,.skip:active,.icon-btn:active,.volpop:active,
  .volume__btn:active,.field__clear:active,
  .result__seek:active,.result__link:active,.result__toggle:active,
  .lb__tabs button:active,.authbox__tabs button:active,.profile__tabs button:active,
  .coffee__yes:active,.coffee__later:active,.coffee__x:active,.coffee__never:active,
  .consent__knoppen button:active,
  .theme__btn:active,.lang__btn:active,.lang__pop button:active,
  .sitefoot__links a:active,.suggest li:active{
    transform:scale(.94);
  }

  /* grote vlakken mogen maar een tikje krimpen, anders wiebelt het */
  .mode,.cat{transition:transform .1s var(--ease), border-color .4s, background .4s}
  .mode:active{transform:scale(.985)}
  .cat:active {transform:scale(.96)}

  /* de playknop heeft zijn eigen, iets diepere indruk */
  .play:active{transform:scale(.93)}
}

/* ══ TOESTEMMING ══════════════════════════════════════════ */
/* Een balk onderin en geen scherm-vullend blok: de site is een spel,
   geen formulier. Weigeren staat links en even groot als accepteren —
   een weigerknop die je moet zoeken is geen echte keuze. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:16px clamp(16px,4vw,30px);
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  border-top:1px solid var(--stroke-2);
  background:rgba(10,10,13,.96);
  backdrop-filter:blur(18px);
  box-shadow:0 -18px 50px -24px rgba(0,0,0,.9);
  transform:translateY(105%);
  transition:transform .45s var(--snap);
}
.consent.is-open{transform:none}

.consent__tekst{max-width:620px}
.consent__tekst b{
  display:block;font-family:var(--display);font-weight:800;font-size:14px;
  color:var(--ink);margin-bottom:3px;
}
.consent__tekst p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.consent__tekst a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.consent__knoppen{display:flex;gap:9px;flex:none}
.consent__knoppen button{
  padding:11px 20px;border-radius:99px;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
  transition:.3s var(--ease);
}
.consent__nee{
  color:var(--ink-2);border:1px solid var(--stroke-2);background:transparent;
}
.consent__nee:hover{color:var(--ink);border-color:var(--ink-3)}
.consent__ja{
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);
}
.consent__ja:hover{filter:brightness(1.08);transform:translateY(-1px)}
.consent__knoppen button:disabled{opacity:.4;pointer-events:none}

.consent__status{margin:0 0 10px;font-size:13px;color:var(--ink-2)}

@media (max-width:620px){
  .consent{gap:12px;padding:14px 16px}
  .consent__knoppen{width:100%}
  .consent__knoppen button{flex:1;padding:12px 10px}
}
@media (prefers-reduced-motion:reduce){
  .consent{transition:none}
}

/* ══ SONGSTATISTIEKEN ═════════════════════════════════════ */
.doc--wide{max-width:840px}

.stat__kern{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:0 0 34px;
}
.stat__kern div{
  padding:18px 14px;border-radius:16px;
  border:1px solid var(--stroke);background:var(--panel);
  text-align:center;
}
.stat__kern b{
  display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(24px,5vw,34px);color:var(--accent);letter-spacing:-.02em;
}
.stat__kern span{
  display:block;margin-top:3px;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}

.stat__blok{margin:0 0 34px}
.stat__blok h2{
  margin:0 0 6px;font-family:var(--display);font-weight:800;
  font-size:17px;letter-spacing:-.01em;
}
.stat__uitleg{margin:0 0 14px;font-size:13px;color:var(--ink-3);line-height:1.5}

/* brede tabellen mogen schuiven, de pagina niet */
.stat__scroll{overflow-x:auto}
.stat__tabel{width:100%;border-collapse:collapse;font-size:13px}
.stat__tabel th{
  text-align:left;font-weight:600;color:var(--ink-2);
  padding:8px 12px 8px 0;white-space:nowrap;
}
.stat__tabel thead td{
  font-family:var(--ui);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:6px;
}
.stat__tabel tbody tr{border-top:1px solid var(--stroke)}
.stat__n{
  font-variant-numeric:tabular-nums;
  font-family:var(--ui);font-size:12px;color:var(--ink-3);
  text-align:right;padding:8px 10px;white-space:nowrap;
}
.stat__n--tot{color:var(--ink);font-weight:700}
.stat__mix{
  font-family:var(--ui);font-size:10.5px;color:var(--ink-3);
  padding:8px 0 8px 14px;white-space:nowrap;
}

/* het balkje laat de verhouding zien zonder dat je hoeft te rekenen */
.stat__balk{width:42%;padding:8px 0 8px 14px}
.stat__bar{
  display:flex;height:9px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.05);min-width:2px;
}
.stat__deel{display:block;height:100%}
.stat__deel--p1,.stat__bar--p1{background:rgb(var(--accent-rgb) / .95)}
.stat__deel--p2,.stat__bar--p2{background:rgb(var(--accent-rgb) / .55)}
.stat__deel--p3,.stat__bar--p3{background:rgb(var(--accent-rgb) / .26)}
.stat__bar--p1,.stat__bar--p2,.stat__bar--p3{display:block}

@media (max-width:560px){
  .stat__kern{gap:7px}
  .stat__kern div{padding:13px 8px}
  .stat__balk{display:none}
  .stat__n{padding:8px 7px}
}

/* het gastlabel: leesbaar, maar duidelijk minder dan een echte naam */
.gast{
  font-style:normal;font-family:var(--ui);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 5px;border-radius:5px;
  border:1px solid var(--stroke-2);color:var(--ink-3);
  vertical-align:middle;margin-left:5px;
}
.pod__name .gast{display:inline-block;margin-top:2px}

/* ── categorierij op het scorebord ──────────────────────── */
.lb__cats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px;
  margin:-4px 0 0;
}
.lb__cats .cat{padding:0 10px;height:30px;font-size:9px}
.lb__cats .cat__ico{width:18px;height:18px}
.lb__cats .cat__ico svg{width:10px;height:10px}

/* het gat naar de plek boven je: een concreet doel in plaats van
   alleen een rangnummer */
.lb__gap{
  margin:8px 0 0;text-align:center;
  font-family:var(--ui);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}

@media (max-width:560px){
  .lb__cats{gap:4px}
  .lb__cats .cat{padding:0 8px;height:28px;font-size:8.5px;gap:4px}
}

/* ── scorebord ──
/* ══ SCOREBORD ════════════════════════════════════════════
   Het podium is de kern: drie kaarten, de winnaar in het midden en
   hoger. Goud, zilver en brons zijn geen platte kleuren maar een
   verloop met een lichtstreep erdoorheen — daardoor leest het als
   metaal in plaats van als een gekleurd vlak. */

.lb{width:100%;max-width:600px;display:flex;flex-direction:column;gap:18px}
.screen--board.is-active .lb>*{opacity:0;animation:rise .7s var(--ease) forwards}
.screen--board.is-active .lb>*:nth-child(1){animation-delay:.04s}
.screen--board.is-active .lb>*:nth-child(2){animation-delay:.12s}
.screen--board.is-active .lb>*:nth-child(3){animation-delay:.18s}
.screen--board.is-active .lb>*:nth-child(4){animation-delay:.24s}
.screen--board.is-active .lb>*:nth-child(5){animation-delay:.32s}

.lb__top{display:flex;align-items:center;gap:14px}
.lb__title{
  margin:0;font-family:var(--display);font-weight:900;
  font-size:clamp(21px,4.4vw,28px);letter-spacing:-.02em;
}

/* ── tabbladen ──────────────────────────────────────────── */
.lb__tabs{
  display:flex;gap:4px;padding:4px;
  border-radius:99px;border:1px solid var(--stroke);background:var(--panel);
}
.lb__tabs button{
  flex:1;padding:9px 6px;border-radius:99px;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
  transition:.3s var(--ease);
}
.lb__tabs button:hover{color:var(--ink-2)}
.lb__tabs button.is-on{
  background:rgb(var(--accent-rgb) / .16);color:var(--accent);
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .3);
}
.lb__note{
  margin:-6px 0 0;text-align:center;
  font-size:12.5px;color:var(--ink-3);
}

/* ── podium ─────────────────────────────────────────────── */
.lb__podium{
  display:grid;grid-template-columns:1fr 1.16fr 1fr;
  align-items:end;gap:10px;
}
.lb__podium:empty{display:none}

.pod{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:16px 10px 14px;border-radius:18px;
  border:1px solid var(--rand);
  background:
    linear-gradient(180deg, rgb(var(--eer) / .16), rgb(var(--eer) / .04)),
    var(--panel);
  text-align:center;
  animation:podIn .6s var(--snap) backwards;
}
/* de lichtstreep die er metaal van maakt */
.pod::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%, rgb(var(--eer) / .3) 46%, rgb(255 255 255 / .22) 50%,
    rgb(var(--eer) / .3) 54%, transparent 70%);
  background-size:280% 100%;background-position:130% 0;
  animation:podGlans 6s ease-in-out 1.2s infinite;
}
@keyframes podGlans{
  0%, 20%  {background-position:130% 0}
  55%, 100%{background-position:-60% 0}
}
@keyframes podIn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to  {opacity:1;transform:none}
}

.pod__medal{
  position:relative;z-index:1;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;
  font-family:var(--ui);font-weight:800;font-size:14px;
  color:#1a1508;
  background:linear-gradient(160deg, rgb(var(--eer)), rgb(var(--eer2)));
  box-shadow:0 6px 22px -8px rgb(var(--eer) / .9), inset 0 1px 0 rgba(255,255,255,.5);
}
.pod__name{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:800;font-size:14px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);
}
.pod__score{
  font-variant-numeric:tabular-nums;
  position:relative;z-index:1;
  font-family:var(--ui);font-weight:800;font-size:17px;
  color:rgb(var(--eer));
  text-shadow:0 0 18px rgb(var(--eer) / .5);
}
.pod__score i{font-style:normal;font-size:.62em;opacity:.6;margin-left:1px}
.pod__games{
  position:relative;z-index:1;
  font-family:var(--ui);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}

/* goud staat hoger en straalt verder — dat is het hele punt */
.pod--1{--eer:255 206 92;  --eer2:198 141 34; --rand:rgba(255,206,92,.5);  padding:34px 10px 22px}
.pod--2{--eer:228 238 250; --eer2:148 166 186;--rand:rgba(228,238,250,.4)}
.pod--3{--eer:240 174 116; --eer2:162 98 54;  --rand:rgba(240,174,116,.38)}
.pod--1{box-shadow:0 26px 70px -26px rgb(255 206 92 / .85)}

/* het kroontje zweeft boven de medaille */
.pod__crown{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:19px;height:19px;z-index:1;
  color:rgb(var(--eer));
  filter:drop-shadow(0 0 10px rgb(var(--eer) / .8));
  animation:kroon 3.4s var(--ease-io) infinite;
}
@keyframes kroon{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){ .pod__crown{animation:none} }
.pod--1 .pod__medal{width:40px;height:40px;font-size:16px}
.pod--1 .pod__score{font-size:21px}
.pod--1 .pod__name{font-size:15.5px}

.pod--1{animation-delay:.1s}
.pod--2{animation-delay:.02s}
.pod--3{animation-delay:.18s}

/* ── de rest van de lijst ───────────────────────────────── */
.lb__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.lb__list li{
  /* rang, foto, naam, potjes, punten */
  display:grid;grid-template-columns:30px 28px 1fr auto auto;
  align-items:center;gap:12px;
  padding:11px 14px;border-radius:13px;
  border:1px solid var(--stroke);background:var(--panel);
  transition:border-color .3s, background .3s;
}
.lb__list li:hover{border-color:var(--stroke-2);background:var(--panel-2)}
.lb__rank{
  font-variant-numeric:tabular-nums;
  font-family:var(--ui);font-size:11px;color:var(--ink-3);
  text-align:center;
}
.lb__who{
  font-family:var(--display);font-weight:600;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb__games{font-family:var(--ui);font-size:9.5px;letter-spacing:.1em;color:var(--ink-3)}
.lb__pts{
  font-variant-numeric:tabular-nums;
  font-family:var(--ui);font-weight:800;font-size:14px;color:var(--ink);
}
.lb__pts i{font-style:normal;font-size:.66em;opacity:.5;margin-left:1px}

/* jouw eigen regel springt eruit, waar hij ook staat */
.lb__list li.is-you,
.lb__me .lb__list li{
  border-color:rgb(var(--accent-rgb) / .5);
  background:rgb(var(--accent-rgb) / .08);
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .2);
}
.lb__list li.is-you .lb__rank,
.lb__list li.is-you .lb__pts{color:var(--accent)}

.lb__list__empty,
.lb__empty{
  margin:0;padding:26px 0;text-align:center;
  font-size:13px;color:var(--ink-3);
}

/* ── jouw plek als je buiten de lijst valt ──────────────── */
.lb__me{display:flex;flex-direction:column;gap:7px}
.lb__me__label{
  margin:0;font-family:var(--ui);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
}

@media (max-width:560px){
  .lb{gap:14px}
  .lb__tabs button{font-size:8.5px;letter-spacing:.08em;padding:9px 3px}
  .lb__podium{gap:6px}
  .pod{padding:13px 6px 11px;border-radius:15px}
  .pod--1{padding-top:18px;padding-bottom:15px}
  .pod__name{font-size:12px}
  .pod--1 .pod__name{font-size:13px}
  .pod__score{font-size:15px}
  .pod--1 .pod__score{font-size:18px}
  .pod__games{display:none}
  /* rang, foto, naam, punten. Het aantal potjes valt hier weg, maar de
     foto blijft: die is juist op een klein scherm het snelste manier om
     jezelf terug te vinden. Vergeet je hier de kolom voor de foto, dan
     valt de laatste cel naar een tweede regel en staat de naam rechts
     naast een bolletje met de punten eronder. */
  .lb__list li{grid-template-columns:24px 26px 1fr auto;gap:9px;padding:10px 12px}
  .av--rij{width:26px;height:26px;font-size:11px}
  .lb__games{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pod::before{animation:none;opacity:0}
}

/* ══ EINDSTAND ════════════════════════════════════════════ */
.scoreboard{width:100%;max-width:520px;display:flex;flex-direction:column;gap:18px}
.screen--score.is-active .scoreboard>*{opacity:0;animation:rise .7s var(--ease) forwards}
.screen--score.is-active .scoreboard>*:nth-child(1){animation-delay:.05s}
.screen--score.is-active .scoreboard>*:nth-child(2){animation-delay:.16s}
.screen--score.is-active .scoreboard>*:nth-child(3){animation-delay:.24s}
.screen--score.is-active .scoreboard>*:nth-child(4){animation-delay:.32s}
.screen--score.is-active .scoreboard>*:nth-child(5){animation-delay:.4s}

.scoreboard__hero{
  position:relative;overflow:hidden;
  text-align:center;padding:34px 24px 30px;border-radius:24px;
  border:1px solid rgb(var(--accent-rgb) / .3);
  background:linear-gradient(180deg,rgb(var(--accent-rgb) / .1),rgba(255,255,255,.015));
  backdrop-filter:blur(18px);
}
/* trage lichtveeg over het paneel, net als op de hero */
.scoreboard__hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgb(var(--accent-rgb) / .14) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:board-sweep 5s var(--ease-io) 1s infinite;
}
@keyframes board-sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

.scoreboard__eyebrow{
  margin:0;font-family:var(--ui);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);
}
.scoreboard__total{
  margin:10px 0 4px;display:flex;align-items:baseline;justify-content:center;gap:10px;
}
.scoreboard__total b{
  font-family:var(--display);font-weight:900;
  font-size:clamp(52px,12vw,78px);line-height:1;letter-spacing:-.04em;
  color:var(--accent);
  filter:drop-shadow(0 0 40px rgb(var(--accent-rgb) / .5));
  font-variant-numeric:tabular-nums;
}
.scoreboard__total small{
  font-family:var(--ui);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.scoreboard__sub{margin:0;font-size:14px;color:var(--ink-2)}

.scoreboard__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.scoreboard__stats div{
  padding:15px 10px;border-radius:14px;text-align:center;
  border:1px solid var(--stroke);background:rgba(255,255,255,.025);
}
.scoreboard__stats b{
  display:block;font-family:var(--ui);font-size:19px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* alleen de directe span is het label — die binnen de <b> hoort bij
   het getal en moet niet krimpen naar labelformaat */
.scoreboard__stats div > span{
  font-family:var(--ui);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.scoreboard__stats b span{font-size:.62em;color:var(--ink-3);letter-spacing:0}

.scoreboard__label{
  margin:0 0 10px;font-family:var(--ui);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.scoreboard__save{
  padding:16px 18px;border-radius:16px;
  border:1px solid rgb(var(--accent-rgb) / .3);
  background:rgb(var(--accent-rgb) / .06);
}
.scoreboard__row{display:flex;gap:9px}
.scoreboard__row input{
  flex:1;min-width:0;height:46px;padding:0 15px;
  border-radius:12px;border:1px solid var(--stroke);
  background:var(--panel);color:var(--ink);font-size:15px;outline:none;
  transition:.3s var(--ease);
}
.scoreboard__row input:focus{
  border-color:rgb(var(--accent-rgb) / .55);
  box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .1);
}
.scoreboard__row .btn{flex:none;height:46px}

.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.board-list li{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:11px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.022);
  font-size:13.5px;color:var(--ink-2);
}
.board-list .pos{
  font-family:var(--ui);font-size:11px;color:var(--ink-3);
  width:22px;flex:none;
}
.board-list .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.board-list .meta{font-family:var(--ui);font-size:10px;color:var(--ink-3);flex:none}
.board-list .pts{
  font-family:var(--ui);font-size:14px;color:var(--ink);flex:none;
  font-variant-numeric:tabular-nums;
}
.board-list li.is-you{
  border-color:rgb(var(--accent-rgb) / .5);
  background:rgb(var(--accent-rgb) / .1);
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .25);
}
.board-list li.is-you .pos,.board-list li.is-you .pts{color:var(--accent)}
.board-list__empty{padding:14px;text-align:center;font-size:13px;color:var(--ink-3)}

.scoreboard__actions{display:flex;gap:10px}
.scoreboard__actions .btn{flex:1;height:52px}
@media (max-width:520px){
  .scoreboard__actions{flex-direction:column-reverse}
}

/* volume in de onthulling: het hele nummer speelt daar door */
.volume--result{margin:14px auto 0;width:max-content}

/* ══ WIN FX ═══════════════════════════════════════════════ */
.confetti{
  position:fixed;inset:0;z-index:58;pointer-events:none;
  width:100%;height:100%;
}
.flash{
  position:fixed;inset:0;z-index:57;pointer-events:none;opacity:0;
  mix-blend-mode:screen;
}
.flash.is-on{animation:flash .75s var(--ease) forwards}
@keyframes flash{
  0%{opacity:0}
  12%{opacity:1}
  100%{opacity:0}
}
.shockwave{
  position:fixed;z-index:56;pointer-events:none;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid rgb(var(--accent-rgb) / .85);
  animation:shock .85s var(--ease) forwards;
}
@keyframes shock{
  0%{transform:scale(1);opacity:.9;border-width:3px}
  100%{transform:scale(34);opacity:0;border-width:.5px}
}

/* de goede regel: pop + lichtsweep */
.guesses li.is-correct{position:relative;overflow:hidden;animation:pop .6s var(--snap)}
@keyframes pop{
  0%{transform:scale(1)}
  35%{transform:scale(1.035)}
  100%{transform:scale(1)}
}
.guesses li.is-correct::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.55) 48%,transparent 70%);
  transform:translateX(-120%);
  animation:row-sweep .95s var(--ease-io) .12s;
}
@keyframes row-sweep{to{transform:translateX(120%)}}
/* de andere regels stappen even terug */
.guesses.is-won li:not(.is-correct){opacity:.4;filter:saturate(.4);transition:.5s var(--ease)}

/* winnende speler gloeit na */
.player.is-won{
  border-color:rgb(var(--accent-rgb) / .45);
  animation:won-glow 1.1s var(--ease) ;
}
@keyframes won-glow{
  0%{box-shadow:0 0 0 0 rgb(var(--accent-rgb) / .55)}
  100%{box-shadow:0 0 0 26px rgb(var(--accent-rgb) / 0)}
}

/* letter-voor-letter onthulling van het oordeel */
.result__verdict span{
  display:inline-block;opacity:0;
  animation:letter .5s var(--ease) forwards;
}
@keyframes letter{
  from{opacity:0;transform:translateY(9px) rotate(6deg);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}

/* ══ TOAST ════════════════════════════════════════════════ */
.toast{
  position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);
  padding:12px 20px;border-radius:12px;
  border:1px solid var(--stroke-2);background:rgba(14,15,19,.95);
  backdrop-filter:blur(16px);
  font-family:var(--ui);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);
  opacity:0;pointer-events:none;transition:.4s var(--ease);
  z-index:70;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
/* ── voettekst onder het spel ───────────────────────────── */
/* Absoluut onderin, anders duwt hij het bord uit het midden. */
.screen--game{position:relative}
.screen--game .sitefoot{
  position:absolute;left:0;right:0;bottom:10px;
  width:auto;margin:0;padding:0;
}
.screen--game .sitefoot__note{display:none}

@media (max-width:560px){
  /* op een telefoon is de hoogte op; alleen de links dus */
  .screen--game .sitefoot__by{display:none}
  .screen--game .sitefoot{bottom:max(6px, env(safe-area-inset-bottom))}
}

/* ── voettekst onder het spel: einde ────────────────────── */

/* ══════════════════════════════════════════════════════════
   TELEFOON

   Op een smal scherm is verticale ruimte het schaarse goed. De
   startknop stond 600px onder de vouw: je moest langs drie hoge
   kaarten scrollen voor je kon beginnen. Hieronder wordt alles wat
   op de desktop lucht geeft ingedikt, zonder dat het krap wordt.
   ══════════════════════════════════════════════════════════ */
@media (max-width:560px){

  /* ── hero ────────────────────────────────────────────── */
  /* De letters zelf overlappen niet (36px inkt in een regel van 44),
     maar de gloed wel: SONG had een witte schaduw met 44px blur die
     precies op GUESSER viel. Op een derde van de desktopmaat moet die
     mee krimpen, anders wordt het één paarse vlek. */
  .hero__row--ghost::before{--g1:10px; --g2:18px}
  .hero__row:first-child{text-shadow:0 5px 16px rgba(255,255,255,.14)}
  .screen--home .hero{font-size:clamp(38px,12.5vw,60px);line-height:.95}

  /* De tweede regel legt uit wat de eerste al suggereert. Op een
     telefoon kost dat drie regels tekst die niemand leest. */
  .screen--home .lede{margin-top:14px;font-size:14px;line-height:1.5}
  .screen--home #lede-2{display:none}

  /* ── moeilijkheidskaarten ────────────────────────────── */
  /* Van drie blokken van 186px naar drie regels van ongeveer 66px.
     Titel en meter op één lijn, omschrijving eronder. */
  .screen--home .modes{margin-top:16px;gap:7px;max-width:none}
  .screen--home .mode{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"titel meter" "tekst tekst";
    align-items:center;
    gap:1px 11px;
    padding:12px 15px;
  }
  .screen--home .mode h3{grid-area:titel;margin:0;font-size:15px}
  .screen--home .mode p{
    grid-area:tekst;margin:0;font-size:11.5px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .screen--home .mode__foot{
    grid-area:meter;align-self:center;
    margin:0;padding:0;border-top:0;
  }
  /* het hele vlak is al aan te tikken, dus de pijl voegt niets toe */
  .screen--home .mode__foot > i{display:none}
  .mode__glow{display:none}

  /* ── categorieën ─────────────────────────────────────── */
  .screen--home .picker{margin-top:12px}
  .cats{gap:5px}
  .cat{padding:0 10px;height:32px;font-size:9.5px;gap:5px}
  .cat__ico{width:19px;height:19px}
  .cat__ico svg{width:11px;height:11px}

  /* ── startknop ───────────────────────────────────────── */
  .screen--home .cta{margin-top:18px;width:100%}
  .btn--xl{width:100%;font-size:14px}
  .hint{font-size:9.5px}

  /* Toetsenbordtips slaan nergens op zonder toetsenbord. */
  .cta__hint{display:none}
}

/* Korte toestellen (oudere iPhones, veel Androids) hebben zo weinig
   hoogte dat de startknop er anders onderuit valt. De uitleg mag daar
   weg: de drie kaarten eronder zeggen hetzelfde, korter. */
@media (max-width:560px) and (max-height:700px){
  .screen--home .lede{display:none}
  .screen--home .hero{font-size:clamp(34px,11vw,52px)}
  .screen--home .modes{margin-top:14px}
  .screen--home .mode{padding:10px 14px}
  .screen--home .picker{margin-top:10px}
}

/* Op een kort scherm is het bord hoger dan het venster. De voettekst
   staat dan niet meer onderin maar midden over het invoerveld heen, dus
   daar hoort hij gewoon in de stroom mee te lopen. */
@media (max-height:720px){
  .screen--game .sitefoot{position:static;margin-top:14px}
}
@media (max-width:560px) and (max-height:700px){
  .board{gap:13px}
  .player{padding:14px 12px 12px}
  .hud__score{font-size:clamp(34px,8.5vw,44px)}
  .steps li{padding:5px 0}
  .play{width:70px;height:70px}
}

/* ── volumeknopje op een telefoon ───────────────────────── */
/* Op de desktop bestaat dit knopje niet: daar staat de regelaar
   gewoon uitgeklapt naast de playknop. */
.volpop{display:none}

@media (max-width:560px){
  .player__controls{position:relative}

  .volpop{
    display:grid;place-items:center;justify-self:end;position:relative;
    width:40px;height:40px;border-radius:50%;
    border:1px solid var(--stroke);background:var(--panel);
    color:var(--ink-2);
    transition:.3s var(--ease);
  }
  .volpop svg{width:19px;height:19px}
  .volpop .vol-ic--off{display:none}
  .volpop.is-muted .vol-ic--on{display:none}
  .volpop.is-muted .vol-ic--off{display:block}
  .volpop.is-muted{color:var(--ink-3)}
  .volpop[aria-expanded="true"]{
    color:var(--accent);border-color:rgb(var(--accent-rgb) / .5);
    background:rgb(var(--accent-rgb) / .08);
  }

  /* De regelaar zweeft over de tijdlijn en duwt niets opzij. Naar
     bóven openen kan niet: .player heeft overflow:hidden voor de
     visualizer, dus daar wordt hij afgeknipt. */
  .player__controls #volume{
    position:absolute;right:0;top:calc(100% + 10px);z-index:6;
    padding:5px 12px 5px 5px;
    box-shadow:0 16px 40px -14px rgba(0,0,0,.9);
    opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96);
    transform-origin:top right;
    transition:opacity .24s var(--ease), transform .28s var(--snap), visibility .24s;
  }
  .player__controls #volume.is-open{opacity:1;visibility:visible;transform:none}
  .player__controls #volume .volume__slider{width:132px}
  .volume__btn{width:34px;height:34px}
}

/* ── het spel op een telefoon ────────────────────────────── */
@media (max-width:560px){
  .board__top{gap:8px}
  .steps{gap:4px}
  .steps li{padding:7px 0}
  .steps .t{font-size:9px}
  .steps .m{width:7px;height:7px}

  .player{padding:18px 14px 14px}
  .player__controls{gap:10px}
  .play__icon{width:29px;height:29px}

  /* Duimen zijn breder dan muisaanwijzers. */
  .skip{min-height:46px}
  .volume__btn{width:38px;height:38px}

  /* De tijdlijn is logaritmisch, dus 0,1 / 0,5 / 1 kruipen op elkaar zodra
     de balk smal wordt. Twee labels weglaten is genoeg; de trappenstrip
     erboven noemt alle zeven tijden al. */
  .track__labels span:nth-child(2),
  .track__labels span:nth-child(4){display:none}

  .rounds{gap:4px}
  .rounds i{width:11px}
  .rounds i.is-now{width:22px}

  /* Onder de 16px zoomt iOS bij het focussen in op het veld, en daarna
     staat de pagina scheef zonder dat de bezoeker dat terug kan zetten.
     Geldt voor élk invoerveld, dus ook het inlogvenster. */
  input:not([type=range]), textarea, select{font-size:16px}
  .field input{height:52px}
}

/* ── onthulling en eindstand ─────────────────────────────── */
@media (max-width:560px){
  .result{padding:22px 18px 18px}
  .result__art{width:132px;height:132px}
  .result__title{font-size:22px}
  .result__stats{gap:8px}
  .result__stats b{font-size:17px}
  .result__controls{gap:8px}
  .result__seek{width:40px;height:40px}
  /* een duim is breder dan een muisaanwijzer */
  .result__links{gap:12px}
  .result__link{width:40px;height:40px}
  .result__link svg{width:18px;height:18px}

  .scoreboard__hero{padding:26px 18px 22px}
}

/* Op telefoons met een streep of ronding onderaan zou de knop anders
   deels onder de systeembalk vallen. */
@supports (padding:max(0px)){
  @media (max-width:560px){
    .screen--home{padding-bottom:max(20px, env(safe-area-inset-bottom))}
    .screen--game{padding-bottom:max(24px, env(safe-area-inset-bottom))}
    .coffee{bottom:max(12px, env(safe-area-inset-bottom))}
  }
}

@media (max-width:820px){
  .modes{grid-template-columns:1fr;max-width:420px;gap:10px}
  .mode p{min-height:0}
  .ticker{position:static;display:none}
  .screen{padding-top:92px}
}
@media (max-width:560px){
  .screen{padding-top:74px}
}
@media (max-width:520px){


  .play{width:84px;height:84px}
  .board__top .score{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.05s!important}
  .rise{opacity:1}
}

/* ══════════════════════════════════════════════════════════
   TELEFOON: WAT ER NIET HOEFT

   Sfeer is op een desktop gratis en op een telefoon niet. De aurora
   is een vlak groter dan het scherm met blur(90px) erover en drie
   eeuwig bewegende blobs eronder: dat moet elk beeldje opnieuw
   berekend worden. De korrellaag ligt full-screen met een blendmodus
   over alles heen. En backdrop-filter staat er twintig keer in; elk
   daarvan dwingt de browser eerst te lezen wat eronder ligt.

   Wat blijft is alles waar je tijdens het spelen iets aan hebt: de
   confetti bij goed, de score die optelt, het indrukken van knoppen,
   de gloed om de playknop. Dat ís het spel. De rest is behang, en
   behang mag wijken voor soepel draaien.
   ══════════════════════════════════════════════════════════ */
@media (max-width:820px){

  /* De blobs zijn al zachte radiale verlopen; die 90px blur eroverheen
     voegt weinig toe en kost het meest van alles. Kleur blijft, het
     bewegen stopt. */
  .aurora{filter:saturate(130%);opacity:.7}
  .blob{opacity:.42}
  .blob--accent,.blob--cyan,.blob--pink{animation:none}

  /* Korrel over het volle scherm mét mix-blend-mode: de duurste laag
     in het pakket, en op een telefoonscherm zie je hem toch amper. */
  .grain{display:none}

  /* De panelen hebben een achtergrond van 3% wit. Wat daar doorheen
     vervaagd wordt is een stilstaand verloop — het verschil is met
     het blote oog niet te zien, de rekentijd wel te merken. */
  .nav::before,.chip,.theme__btn,.theme__pop,.lang__btn,.lang__pop,
  .volume,.mode,.cat,.notice,.coffee,.player,.field input,.suggest,
  .result__toggle,.consent,.scoreboard__hero,.toast,.overlay__scrim{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* Het scherm na elk nummer vervaagde het hele venster. Dat is de
     duurste van allemaal, en hij komt elke ronde langs. Iets donkerder
     doet hetzelfde werk. */
  .overlay__scrim{background:rgba(4,4,6,.93)}
  /* Deze laag wás alleen maar vervaging. Zonder vervanging zou de nav
     over de tekst eronder heen vallen, dus komt er een verloop voor
     in de plaats — even leesbaar, en gratis. */
  .nav::before{background:linear-gradient(rgba(6,6,8,.92),rgba(6,6,8,0))}
  /* De uitklappers stonden op 97% dekking en leunden op de vervaging
     voor de laatste 3%. Die maken we nu gewoon dicht. */
  .theme__pop,.lang__pop,.suggest{background:#0b0c0f}

  /* De balkjes krijgen elk beeldje een nieuwe hoogte. Bij 52 balkjes
     zijn dat ruim drieduizend stijlwijzigingen per seconde. */
  .viz{opacity:.16}
}

/* Wie in zijn instellingen aangeeft geen beweging te willen, hoort
   ook geen drijvende blobs te krijgen — ongeacht de schermbreedte. */
@media (prefers-reduced-motion:reduce){
  .blob--accent,.blob--cyan,.blob--pink{animation:none}
  .grain{display:none}
}

/* ══════════════════════════════════════════════════════════
   ACCOUNTKNOP MET UITKLAP (alleen telefoon)

   Op een breed scherm bestaan .acct en .acct__pop niet: met
   display:contents leggen hun kinderen zich neer alsof de omhulling
   er niet is, en blijft de balk exact zoals hij was. Pas onder de
   820px worden het echte dozen en klapt alles achter één knop.
   ══════════════════════════════════════════════════════════ */
.acct,.acct__pop{display:contents}
.acct__btn{display:none}

@media (max-width:820px){
  .acct{display:block;position:relative}
  .acct__btn{
    display:grid;place-items:center;
    width:38px;height:38px;padding:0;gap:0;border-radius:12px;
  }
  .acct__btn svg{width:17px;height:17px}
  .acct.is-open .acct__btn{color:var(--accent);border-color:rgb(var(--accent-rgb) / .55)}
  /* Ingelogd kleurt de knop mee, zodat je zonder uitklappen ziet dat
     je gekoppeld bent. */
  .acct.is-in .acct__btn{
    color:var(--on-accent);background:var(--accent);border-color:transparent;
    box-shadow:0 4px 22px -6px rgb(var(--accent-rgb) / .65);
  }

  .acct__pop{
    display:block;
    position:absolute;top:calc(100% + 10px);right:0;
    width:min(248px,calc(100vw - 32px));
    padding:10px;border-radius:16px;
    border:1px solid var(--stroke-2);background:#0b0c0f;
    box-shadow:0 24px 60px -18px rgba(0,0,0,.95);
    opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;
    /* pointer-events:none op het paneel is niet genoeg: een kind mag
       zichzelf weer aanklikbaar maken, en dat doen het taalmenu en de
       kleurbolletjes hieronder ook. Dan hangt er een onzichtbaar vlak
       van 241 bij 326 pixels onder de balk waar je op het scorebord
       dwars doorheen probeert te tikken. visibility:hidden haalt het
       hele paneel én alles erin uit de tikdetectie, wat een kind niet
       kan terugdraaien. */
    visibility:hidden;
    transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
    z-index:45;
  }
  .acct.is-open .acct__pop{opacity:1;transform:none;pointer-events:auto;visibility:visible}

  /* Een uitklapper in een uitklapper is op een telefoonscherm niet te
     doen. Binnen het paneel staan taal en thema daarom gewoon open, en
     verdwijnen hun eigen knopjes. */
  .acct__pop .lang__btn,.acct__pop .theme__btn{display:none}
  .acct__pop .lang,.acct__pop .theme{position:static}
  /* en voor de zekerheid ook alleen aanklikbaar als het paneel open
     staat, zodat dit niet nog eens misgaat */
  .acct__pop .lang__pop,.acct__pop .theme__pop{
    position:static;width:auto;padding:0;
    border:0;background:none;box-shadow:none;
    opacity:1;transform:none;pointer-events:none;
  }
  .acct.is-open .acct__pop .lang__pop,
  .acct.is-open .acct__pop .theme__pop{pointer-events:auto}
  .acct__pop .theme__pop{padding:12px 4px 4px;border-top:1px solid var(--stroke);margin-top:8px}
  .acct__pop .lang__pop button{font-size:14px;padding:11px 12px}

  /* De twee accountknoppen worden volle regels onderin. */
  .acct__pop #account{
    display:flex;width:100%;justify-content:center;
    margin-top:8px;padding:11px 14px;max-width:none;
  }
  .acct__pop #account[hidden]{display:none}
}

/* ══════════════════════════════════════════════════════════
   KORTE SCHERMEN: DE STARTKNOP MOET GEWOON ZICHTBAAR ZIJN

   Gemeten op een venster van 547px hoog — een iPhone SE in Safari met
   de adresbalk erbij — stond de startknop op 560px: precies buiten
   beeld. Mensen dachten dat de pagina nog aan het laden was.

   De grootste slokop daar zijn de dertien categorieën: die vielen over
   vier regels uiteen en aten 143px. Als één schuivende rij kosten ze
   32px, en dat scheelt genoeg om de knop binnen te halen. Op een hoge
   telefoon blijft alles gewoon uitgeklapt staan, want daar past het.
   ══════════════════════════════════════════════════════════ */
@media (max-width:560px) and (max-height:740px){
  .screen--home .cats{
    flex-wrap:nowrap;
    /* De rij stond gecentreerd. Zodra de inhoud breder is dan de doos
       schuift centreren het begin naar links buiten beeld, en daar kom
       je met scrollen niet meer bij: Gemengd en Pop waren onbereikbaar. */
    justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* ruimte aan de randen zodat de eerste en laatste niet tegen de
       schermrand plakken, plus een vervaging die laat zien dat er meer
       naast staat */
    padding:2px clamp(18px,4vw,44px);
    margin:0 calc(clamp(18px,4vw,44px) * -1);
    max-width:100vw;
    mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  }
  .screen--home .cats::-webkit-scrollbar{display:none}
  .screen--home .cat{flex:0 0 auto;scroll-snap-align:center}

  /* De aanloop mocht op de desktop rustig anderhalve seconde duren.
     Op een telefoon leest dat als traagheid, zeker als het laatste wat
     verschijnt de knop is waar je op wacht. */
  .rise{animation-duration:.45s;animation-delay:calc(var(--d,0s) * .45)}
}

/* Dit kopje hoort alleen in het uitklappaneel op de telefoon; boven
   een eigen uitklapper met twee talen erin zegt het niets. */
.lang__label{display:none}
@media (max-width:820px){
  .acct__pop .lang__label{
    display:block;margin:0 0 6px;padding:0 4px;
    font-family:var(--ui);font-size:9.5px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  }
}

/* ══════════════════════════════════════════════════════════
   INSTALLEREN ALS APP

   Dezelfde vorm als de koffiekaart, want mensen hebben die al eens
   gezien en herkennen wat er gaat gebeuren. Op een telefoon komt hij
   als blad van onderaf omhoog: dat is waar je duim toch al is, en het
   dekt de spelknoppen niet af zolang je hem niet leest.
   ══════════════════════════════════════════════════════════ */
.pwa{
  position:fixed;left:50%;bottom:0;z-index:75;
  width:min(430px, 100vw);
  transform:translate(-50%, 110%);
  padding:22px 22px 16px;
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;
  border:1px solid rgb(var(--accent-rgb) / .3);
  border-bottom:0;
  /* Twee lagen: de accentzweem bovenop, en daaronder een dekkende
     ondergrond. Met alleen dat verloop is de bovenkant van de kaart
     bijna doorzichtig en schijnt de startknop eronder er dwars
     doorheen. */
  background:linear-gradient(180deg, rgb(var(--accent-rgb) / .14), rgba(10,10,13,0) 52%), #0a0a0d;
  box-shadow:0 -26px 70px -20px rgba(0,0,0,.9), 0 0 44px -22px rgb(var(--accent-rgb) / .55);
  text-align:left;
  transition:transform .5s var(--snap);
}
.pwa.is-open{transform:translate(-50%, 0)}

@media (min-width:560px){
  .pwa{
    left:auto;right:20px;bottom:20px;transform:translateY(140%);
    width:min(360px, calc(100vw - 40px));
    border-radius:var(--radius);border-bottom:1px solid rgb(var(--accent-rgb) / .3);
  }
  .pwa.is-open{transform:none}
}

.pwa__kop{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pwa__kop h3{
  margin:0;font-family:var(--display);font-weight:800;font-size:15px;
  letter-spacing:.02em;color:var(--ink);
}
/* hetzelfde tekentje als linksboven in de balk, zodat meteen duidelijk
   is wélke app je op je scherm zet */
.pwa__merk{display:flex;align-items:center;gap:3px;height:22px;flex:0 0 auto}
.pwa__merk i{
  width:3px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 10px rgb(var(--accent-rgb) / .8);
}
.pwa__merk i:nth-child(1){height:38%}
.pwa__merk i:nth-child(2){height:100%}
.pwa__merk i:nth-child(3){height:58%}
.pwa__merk i:nth-child(4){height:82%}

.pwa p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.pwa p b{color:var(--ink);font-weight:600}

/* het deelicoontje van iOS midden in de zin, op tekstgrootte */
.pwa__deel{
  width:15px;height:15px;vertical-align:-3px;margin:0 2px;
  color:var(--accent);
}

.pwa__knoppen{display:flex;gap:9px}
.pwa__knoppen .btn{flex:1;padding:12px 14px;font-size:13px}

.pwa__x{
  position:absolute;top:12px;right:12px;
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:9px;color:var(--ink-3);
  transition:color .25s, background .25s;
}
.pwa__x svg{width:14px;height:14px}
.pwa__x:hover{color:var(--ink);background:var(--panel-2)}

/* Bewust klein en grijs. Wie er klaar mee is moet hem kunnen vinden,
   maar het is niet de keuze die we voorstellen. */
.pwa__nooit{
  display:block;margin:12px auto 0;padding:4px 8px;
  font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);transition:color .25s;
}
.pwa__nooit:hover{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .pwa{transition:opacity .2s}
}

/* ── "App installeren" in het accountmenu ────────────────── */
/* Alleen zichtbaar op een telefoon, want daar bestaat het paneel. Op
   een desktop staat de knop van de browser toch al in de adresbalk. */
.acct__installeer{display:none}
@media (max-width:820px){
  .acct__pop .acct__installeer{
    display:flex;align-items:center;gap:10px;width:100%;
    margin-bottom:8px;padding:11px 12px;
    border-radius:11px;
    border:1px solid rgb(var(--accent-rgb) / .4);
    background:rgb(var(--accent-rgb) / .12);
    color:var(--accent);
    font-size:14px;text-align:left;
    transition:background .25s, border-color .25s;
  }
  .acct__pop .acct__installeer[hidden]{display:none}
  .acct__pop .acct__installeer svg{width:17px;height:17px;flex:0 0 auto}
  .acct__pop .acct__installeer:active{background:rgb(var(--accent-rgb) / .2)}
}

/* ══════════════════════════════════════════════════════════
   RUIMTE VOOR DE KLOK VAN DE IPHONE

   Start de app vanaf het beginscherm, dan staat er geen adresbalk meer
   boven de pagina. Met status-bar-style op black-translucent loopt de
   app door tot achter de statusbalk — mooi, want zo is het scherm van
   rand tot rand van jou, maar de balk met het logo zou anders precies
   onder de klok en het batterijpictogram verdwijnen.

   env(safe-area-inset-top) is nul zolang je gewoon in de browser zit;
   deze regels doen daar dus niets. Pas als de app losstaand draait
   levert iOS de echte hoogte van die strook aan en schuift alles mee.

   De getallen zijn precies die van hierboven overgenomen, per
   breekpunt. Elk breekpunt staat in zijn eigen media query — deze
   regels komen achteraan in het bestand, en zonder die grenzen zou een
   regel voor brede schermen hier de smalle versies overschrijven.
   ══════════════════════════════════════════════════════════ */
.nav{padding-top:max(20px, calc(env(safe-area-inset-top) + 6px))}

@media (min-width:821px){
  .screen{padding-top:calc(104px + env(safe-area-inset-top))}
  .screen--home{padding-top:calc(88px + env(safe-area-inset-top))}
}
@media (max-width:820px){
  .screen{padding-top:calc(92px + env(safe-area-inset-top))}
}
@media (max-width:560px){
  .screen{padding-top:calc(74px + env(safe-area-inset-top))}
}

/* ══════════════════════════════════════════════════════════
   TYPEN OP EEN TELEFOON

   Het toetsenbord neemt de onderste helft van het scherm. De browser
   probeert het invoerveld dan in beeld te schuiven, maar de pagina is
   hoger dan wat er nog zichtbaar is, dus schiet hij door: je ziet een
   randje van het veld en de bovenste regel van de suggesties.

   Vastzetten met position:fixed lijkt de oplossing, maar dat gedraagt
   zich op iOS per versie anders. Wat wél overal werkt: de pagina
   precies zo hoog maken als wat het toetsenbord overlaat. Dan valt er
   niets meer te schuiven, en met de inhoud onderaan uitgelijnd staat
   de gokbalk vanzelf strak boven het toetsenbord — met alle ruimte
   erboven voor de suggestielijst.

   --zicht wordt door app.js bijgehouden uit visualViewport.
   ══════════════════════════════════════════════════════════ */
@media (max-width:820px){
  body.typt .stage{min-height:0}
  body.typt .screen--game{
    min-height:0;
    height:var(--zicht, 100dvh);
    justify-content:flex-end;
    padding-top:10px;
    padding-bottom:8px;
    overflow:hidden;
  }

  /* Wat je tijdens het typen niet nodig hebt, mag de ruimte afstaan.
     De voettekst helpt niet bij het raden, en de tijdlijn heb je net
     bekeken voor je begon te typen. */
  body.typt .screen--game .sitefoot{display:none}
  /* De balk bovenin staat vast en zou over de bovenste suggesties heen
     vallen. Tijdens het typen kijk je toch naar beneden. */
  body.typt .nav{display:none}
  body.typt .track__labels,
  body.typt .player__meta{display:none}

  /* De gokknop is tijdens het typen overbodig: een suggestie aantikken
     gokt al meteen, en de returntoets van het toetsenbord verstuurt het
     formulier. Weg ermee, dan is er weer een regel meer voor de
     suggesties. */
  body.typt .guessbar .btn--primary{display:none}

  /* Meer suggesties in beeld: dat is waar je tijdens het typen naar
     kijkt. */
  body.typt .suggest{max-height:min(340px, calc(var(--zicht, 100dvh) - 150px))}
}

/* ══════════════════════════════════════════════════════════
   JOUW ACCOUNT

   Bewust géén rij identieke tegels. Elk blok heeft de vorm die bij
   zijn inhoud past: balken voor herkenning per categorie, een rooster
   voor speeldagen, een tabel voor de moeilijkheden, een lijst voor je
   laatste potjes. Zo lees je de pagina als antwoorden op vragen in
   plaats van als een dashboard.

   De accentkleur draagt hier betekenis en is geen versiering: hij
   staat op wat je hebt gedaan (gevulde balken, speeldagen, je beste
   score) en nergens anders.
   ══════════════════════════════════════════════════════════ */
.pf{width:100%;max-width:660px;display:flex;flex-direction:column;gap:26px}
/* De blokken worden door app.js in #prof-body gezet; zonder deze
   regel staan ze tegen elkaar aan en loopt elke kop tegen het blok
   erboven. */
#prof-body{display:flex;flex-direction:column;gap:30px}

/* ── kop ─────────────────────────────────────────────────── */
.pf__kop{display:flex;align-items:center;gap:14px}
.pf__ik{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.pf__letter{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:14px;
  background:rgb(var(--accent-rgb) / .16);
  border:1px solid rgb(var(--accent-rgb) / .35);
  color:var(--accent);
  font-family:var(--display);font-weight:800;font-size:19px;line-height:1;
}
.pf__naam{min-width:0}
.pf__naam b{
  display:block;font-family:var(--display);font-weight:800;font-size:19px;
  color:var(--ink);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf__naam span{
  display:block;margin-top:2px;
  font-family:var(--ui);font-size:11.5px;color:var(--ink-3);
}

/* ── 1. waar sta je ──────────────────────────────────────── */
/* Eén groot getal, met de betekenis er direct naast in plaats van op
   een losse regel eronder. Daaronder vier cijfers op een lijn, zonder
   eigen randjes: anders is het toch weer een dashboard. */
.pf__stand{
  padding:24px 22px 20px;border-radius:22px;
  border:1px solid rgb(var(--accent-rgb) / .22);
  background:
    radial-gradient(120% 130% at 0% 0%, rgb(var(--accent-rgb) / .1), transparent 62%),
    var(--panel);
}
.pf__totaal{
  margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.pf__totaal b{
  font-family:var(--display);font-weight:900;
  font-size:clamp(38px,9vw,52px);line-height:.95;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.pf__totaal span{
  font-family:var(--ui);font-size:12.5px;letter-spacing:.03em;color:var(--ink-2);
}
.pf__rang{
  margin:8px 0 0;font-family:var(--ui);font-size:12.5px;
  color:var(--accent);font-variant-numeric:tabular-nums;
}

.pf__kerncijfers{
  margin:20px 0 0;padding:16px 0 0;
  border-top:1px solid var(--stroke);
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;
}
.pf__kerncijfers div{min-width:0}
.pf__kerncijfers dt{
  font-family:var(--ui);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.pf__kerncijfers dd{
  margin:5px 0 0;font-family:var(--display);font-weight:700;font-size:17px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}

/* ── gedeelde vakken ─────────────────────────────────────── */
.pf__vak{display:flex;flex-direction:column;gap:12px}
.pf__titel{
  margin:0;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.06em;color:var(--ink);
}
.pf__onder{
  margin:0;font-family:var(--ui);font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.pf__onder b{color:var(--accent);font-weight:600}
.pf__inzicht{
  margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  max-width:62ch;
}

/* ── 2. wat ken je ───────────────────────────────────────── */
.pf__balken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pf__balken li{
  display:grid;
  grid-template-columns:minmax(88px,1.1fr) 3fr auto auto;
  align-items:center;gap:12px;
}
.pf__balk-naam{
  font-family:var(--ui);font-size:12px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf__balk-spoor{
  height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;
}
.pf__balk-vul{
  display:block;height:100%;border-radius:99px;
  background:var(--accent);
  box-shadow:0 0 12px -2px rgb(var(--accent-rgb) / .6);
  transition:width .5s var(--ease);
}
.pf__balk-pct{
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right;
}
.pf__balk-pct em{font-style:normal;font-size:10px;color:var(--ink-3);margin-left:1px}
.pf__balk-n{
  font-family:var(--ui);font-size:10.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right;
}
/* Te weinig gespeeld om iets te betekenen: wel tonen, maar niet als
   uitspraak. Een percentage over vier nummers is toeval. */
.pf__balken li.is-dun{opacity:.42}
.pf__balken li.is-dun .pf__balk-vul{background:var(--ink-3);box-shadow:none}

/* ── 3. wanneer speel je ─────────────────────────────────── */
/* Kolommen van zeven: elke kolom een week, van boven naar beneden
   maandag tot en met zondag. */
.pf__rooster{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);
  gap:3px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;
}
.pf__rooster::-webkit-scrollbar{display:none}
.pf__rooster i{
  width:12px;height:12px;border-radius:3px;
  background:rgba(255,255,255,.05);
}
.pf__rooster i[data-trap="1"]{background:rgb(var(--accent-rgb) / .28)}
.pf__rooster i[data-trap="2"]{background:rgb(var(--accent-rgb) / .5)}
.pf__rooster i[data-trap="3"]{background:rgb(var(--accent-rgb) / .74)}
.pf__rooster i[data-trap="4"]{background:var(--accent);box-shadow:0 0 8px -1px rgb(var(--accent-rgb) / .7)}

/* ── 4. per moeilijkheid ─────────────────────────────────── */
.pf__tabel{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pf__tabel th{
  padding:0 0 8px;text-align:right;
  font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.pf__tabel th:first-child,
.pf__tabel td:first-child{text-align:left}
.pf__tabel td{
  padding:11px 0;text-align:right;
  font-family:var(--ui);font-size:13px;color:var(--ink-2);
  border-top:1px solid var(--stroke);
}
.pf__tabel td b{font-family:var(--display);font-weight:700;color:var(--ink)}
.pf__stip{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:8px;vertical-align:1px;background:var(--ink-3);
}
/* dezelfde drie kleuren als op de startknoppen, zodat "moeilijk" hier
   hetzelfde ding is als daar */
.pf__stip[data-mode="easy"]{background:#3ddc97}
.pf__stip[data-mode="normal"]{background:#ffb23d}
.pf__stip[data-mode="hard"]{background:#ff3d71}

/* ── 5. gaat het vooruit ─────────────────────────────────── */
.pf__weken{
  display:flex;align-items:flex-end;gap:6px;height:96px;
  padding-top:4px;
}
.pf__week{
  flex:1;min-width:0;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;
}
.pf__week i{
  display:block;width:100%;border-radius:5px 5px 2px 2px;
  background:rgb(var(--accent-rgb) / .42);
  transition:height .5s var(--ease), background .3s;
}
.pf__week:last-child i{background:var(--accent);box-shadow:0 0 14px -3px rgb(var(--accent-rgb) / .7)}
.pf__week em{
  font-style:normal;font-family:var(--ui);font-size:9.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* ── 6. je laatste potjes ────────────────────────────────── */
.pf__potjes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pf__potjes li{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:12px 0;border-top:1px solid var(--stroke);
}
.pf__potjes li:first-child{border-top:0}
.pf__potje-wat{min-width:0}
.pf__potje-wat b{
  display:block;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf__potje-wat em{
  display:block;margin-top:2px;font-style:normal;
  font-family:var(--ui);font-size:10.5px;color:var(--ink-3);
}
.pf__potje-goed{
  font-family:var(--ui);font-size:13px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.pf__potje-goed i{font-style:normal;color:var(--ink-3)}
.pf__potje-pt{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:62px;text-align:right;
}
.pf__potje-pt i{font-style:normal;font-size:10px;color:var(--ink-3);margin-left:1px}

/* ── leeg, laden, stuk ───────────────────────────────────── */
.pf__leeg{
  padding:40px 24px;border-radius:22px;border:1px dashed var(--stroke-2);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.pf__leeg h3{
  margin:0;font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);
}
.pf__leeg p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:44ch}
.pf__leeg .btn{margin-top:6px}
.pf__melding{
  margin:0;padding:30px;text-align:center;
  font-size:13px;color:var(--ink-3);
}

/* Een skelet in plaats van een draaiend wieltje: je ziet waar de
   cijfers komen, en het scherm springt straks niet op. */
.pf__skelet{display:flex;flex-direction:column;gap:22px}
.pf__skelet > *{
  border-radius:18px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.035) 25%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.035) 75%);
  background-size:220% 100%;
  animation:pf-veeg 1.4s linear infinite;
}
.pf__sk-groot{height:148px}
.pf__sk-blok{height:104px}
.pf__sk-rij{height:44px;background:none;animation:none;display:flex;gap:9px}
.pf__sk-rij i{
  flex:1;border-radius:10px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.035) 25%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.035) 75%);
  background-size:220% 100%;
  animation:pf-veeg 1.4s linear infinite;
}
@keyframes pf-veeg{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .pf__skelet > *,.pf__sk-rij i{animation:none}
}

/* ── smal scherm ─────────────────────────────────────────── */
@media (max-width:560px){
  .pf{gap:22px}
  .pf__stand{padding:20px 18px 18px}
  .pf__kerncijfers{grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .pf__balken li{
    grid-template-columns:1fr auto;
    grid-template-areas:"naam pct" "spoor spoor";
    gap:5px 10px;
  }
  .pf__balk-naam{grid-area:naam}
  .pf__balk-pct{grid-area:pct}
  .pf__balk-spoor{grid-area:spoor}
  .pf__balk-n{display:none}
  .pf__tabel th:nth-child(4),
  .pf__tabel td:nth-child(4){display:none}
  .pf__rooster i{width:10px;height:10px}
}

/* ══════════════════════════════════════════════════════════
   INLOGGEN EN REGISTREREN

   Het venster begon met de kop "Account" en daarna meteen drie velden.
   Dat is een drempel zonder reden: nergens stond wat het je oplevert.
   Nu komt eerst het waarom, in drie regels, en pas daarna het
   formulier. Dat is geen versiering maar het verschil tussen een
   verplichting en een aanbod.
   ══════════════════════════════════════════════════════════ */
.authbox__kop{display:flex;align-items:center;gap:12px;margin-bottom:16px}

/* hetzelfde tekentje als linksboven in de balk */
.authbox__merk{display:flex;align-items:center;gap:3px;height:24px;flex:0 0 auto}
.authbox__merk i{
  width:3px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 10px rgb(var(--accent-rgb) / .8);
}
.authbox__merk i:nth-child(1){height:38%}
.authbox__merk i:nth-child(2){height:100%}
.authbox__merk i:nth-child(3){height:58%}
.authbox__merk i:nth-child(4){height:82%}

.authbox__title{
  margin:0;font-family:var(--display);font-weight:800;font-size:19px;
  letter-spacing:-.01em;color:var(--ink);
}

.authbox__letter{
  width:40px;height:40px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:13px;
  background:rgb(var(--accent-rgb) / .16);
  border:1px solid rgb(var(--accent-rgb) / .35);
  color:var(--accent);
  font-family:var(--display);font-weight:800;font-size:17px;line-height:1;
}

/* ── waarom ──────────────────────────────────────────────── */
.authbox__waarom{
  list-style:none;margin:0 0 20px;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.authbox__waarom li{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;line-height:1.4;color:var(--ink-2);
}
.authbox__waarom svg{
  width:15px;height:15px;flex:0 0 auto;color:var(--accent);
}

/* ── tabbladen ───────────────────────────────────────────── */
/* Eén keuze met twee standen, dus schuift de markering mee in plaats
   van van vlak te wisselen. */
.authbox__tabs{
  --glij:0;
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  padding:4px;border-radius:12px;background:rgba(255,255,255,.04);
  margin-bottom:18px;
}
.authbox__glij{
  position:absolute;top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);border-radius:9px;
  background:rgb(var(--accent-rgb) / .16);
  border:1px solid rgb(var(--accent-rgb) / .3);
  transform:translateX(calc(var(--glij) * 100%));
  transition:transform .24s var(--ease);
  pointer-events:none;
}
.authbox__tabs button{
  position:relative;z-index:1;
  padding:9px;border-radius:9px;
  font-family:var(--ui);font-size:13px;font-weight:600;
  color:var(--ink-3);background:none;
  transition:color .24s var(--ease);
}
.authbox__tabs button.is-on{background:none;color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .authbox__glij{transition:none}
}

/* ── velden ──────────────────────────────────────────────── */
.authbox__veld{display:block;margin-bottom:14px;position:relative}
.authbox__veld > span{
  display:block;margin-bottom:6px;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.authbox__veld input{
  width:100%;height:46px;padding:0 15px;
  border-radius:12px;border:1px solid var(--stroke);
  background:var(--panel);color:var(--ink);font-size:15px;outline:none;
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.authbox__veld input:hover{border-color:var(--stroke-2)}
.authbox__veld input:focus{
  border-color:rgb(var(--accent-rgb) / .55);
  box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .1);
}
.authbox__veld input:disabled{opacity:.5;cursor:not-allowed}
.authbox__veld em{
  display:block;margin-top:6px;font-style:normal;
  font-size:11.5px;color:var(--ink-3);
}

/* het oogje in het wachtwoordveld */
.authbox__veld--pass input{padding-right:48px}
.authbox__oog{
  position:absolute;right:6px;top:25px;
  width:38px;height:46px;display:grid;place-items:center;
  color:var(--ink-3);border-radius:10px;
  transition:color .24s var(--ease);
}
.authbox__oog:hover{color:var(--ink-2)}
.authbox__oog svg{width:18px;height:18px}
.authbox__oog .oog--open{display:none}
.authbox__oog[aria-pressed="true"] .oog--dicht{display:none}
.authbox__oog[aria-pressed="true"] .oog--open{display:block}
.authbox__oog[aria-pressed="true"]{color:var(--accent)}

/* ── naam wijzigen ───────────────────────────────────────── */
.authbox__rij{display:flex;gap:8px}
.authbox__rij input{flex:1;min-width:0}
.authbox__rij .btn{flex:none;height:46px;padding-inline:16px}

/* ── fout, knop, kleine letter ───────────────────────────── */
.authbox__err{
  margin:0 0 14px;padding:11px 14px;border-radius:11px;
  border:1px solid rgba(255,61,113,.3);background:rgba(255,61,113,.08);
  font-size:13px;color:#FF8FAE;
}
.authbox__wide{width:100%;height:48px}

/* Bezig: de knop blijft staan waar hij staat, maar zegt niets meer en
   is niet meer aan te klikken. Verspringen tijdens het wachten is het
   ergste wat een formulier kan doen. */
.authbox__wide.is-busy{pointer-events:none;color:transparent;position:relative}
.authbox__wide.is-busy::after{
  content:'';position:absolute;top:50%;left:50%;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:auth-draai .7s linear infinite;
}
@keyframes auth-draai{to{transform:rotate(360deg)}}

.authbox__klein{
  margin:14px 0 0;text-align:center;
  font-size:11px;line-height:1.5;color:var(--ink-3);
}

.authbox__hello{margin:0;font-size:15px;color:var(--ink)}
.authbox__hello b{color:var(--accent)}
.authbox__in .authbox__veld{margin-bottom:18px}

@media (max-width:420px){
  .authbox{padding:26px 20px 22px}
  .authbox__waarom li{font-size:12px}
}

/* ══════════════════════════════════════════════════════════
   HET UITKLAPMENU

   Jezelf bovenaan, want dat is waar je naar zoekt als je op een
   poppetje tikt. Daaronder pas de instellingen, met een streep ertussen
   zodat het twee dingen zijn en geen lijstje van vijf gelijke regels.
   ══════════════════════════════════════════════════════════ */
.acct__ik{display:none}

@media (max-width:820px){
  .acct__pop{padding:8px}

  .acct__ik{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:11px;width:100%;
    padding:11px 10px;border-radius:13px;
    text-align:left;
    transition:background .2s var(--ease);
  }
  .acct__ik:active{background:rgba(255,255,255,.05)}

  .acct__letter{
    width:38px;height:38px;flex:0 0 auto;
    display:grid;place-items:center;border-radius:12px;
    border:1px solid var(--stroke-2);
    color:var(--ink-3);
    font-family:var(--display);font-weight:800;font-size:15px;line-height:1;
    transition:.25s var(--ease);
  }
  .acct__letter svg{width:18px;height:18px}
  .acct__letter.is-in{
    border-color:rgb(var(--accent-rgb) / .4);
    background:rgb(var(--accent-rgb) / .16);
    color:var(--accent);
  }

  .acct__wie{min-width:0}
  .acct__wie b{
    display:block;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .acct__wie em{
    display:block;margin-top:2px;font-style:normal;
    font-family:var(--ui);font-size:10.5px;line-height:1.35;color:var(--ink-3);
  }
  .acct__pijl{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto}

  .acct__streep{
    height:1px;border:0;background:var(--stroke);
    margin:8px 2px;
  }

  /* De instellingen eronder wat rustiger, zodat de kop het zwaartepunt
     blijft. */
  .acct__pop .lang__label,
  .acct__pop .theme__label{margin-left:2px}
  .acct__pop .lang__pop button{border-radius:10px}
}

/* ══════════════════════════════════════════════════════════
   HET UITKLAPMENU, TWEEDE POGING

   Wat er stond waren de desktop-popovers, plat neergelegd. Dat zag je
   ook: kale tekstregels zonder te zien wat er aan staat, kleurbollen
   zo groot als knikkers, en een paneel dat het halve scherm vulde.

   Een menu op een telefoon hoort te bestaan uit regels van gelijke
   hoogte die je met je duim raakt, met links een pictogram, rechts de
   huidige stand, en een streep tussen groepen die echt verschillend
   zijn. Dat is hieronder gebouwd. De desktopversie blijft ongemoeid:
   alles hier staat binnen de mediaquery.
   ══════════════════════════════════════════════════════════ */
@media (max-width:820px){

  .acct__pop{
    width:min(272px, calc(100vw - 28px));
    padding:6px;
  }

  /* ── de kop ───────────────────────────────────────────── */
  .acct__ik{padding:10px 10px 11px}
  .acct__ik[hidden]{display:none}
  .acct__streep[hidden]{display:none}
  .acct__streep{margin:5px 8px}

  /* ── groepskopjes ─────────────────────────────────────── */
  /* Klein, rustig, en met wat lucht erboven. Ze scheiden groepen; ze
     hoeven niet mee te schreeuwen. */
  .acct__pop .lang__label,
  .acct__pop .theme__label{
    margin:12px 0 5px;padding:0 10px;
    font-family:var(--ui);font-size:9px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  }
  .acct__pop .lang__pop{margin-bottom:2px}

  /* ── regels ───────────────────────────────────────────── */
  /* Eén maat voor alles wat je aan kunt tikken. */
  .acct__pop .acct__installeer,
  .acct__pop .lang__pop button{
    min-height:42px;
    display:flex;align-items:center;gap:11px;
    width:100%;padding:0 10px;border-radius:11px;
    font-family:var(--ui);font-size:14px;font-weight:500;
    text-align:left;color:var(--ink-2);
    background:none;border:0;
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .acct__pop .lang__pop button:active,
  .acct__pop .acct__installeer:active{background:rgba(255,255,255,.06)}

  /* De taal die aan staat krijgt een vinkje in plaats van alleen een
     kleurtje: kleur alleen is op een klein scherm te makkelijk te
     missen, en zegt niet wát er aan de hand is. */
  .acct__pop .lang__pop button{position:relative;padding-right:34px}
  .acct__pop .lang__pop button.is-on{color:var(--ink);font-weight:600}
  .acct__pop .lang__pop button.is-on::after{
    content:'';position:absolute;right:10px;top:50%;
    width:15px;height:15px;margin-top:-7px;
    background:var(--accent);
    -webkit-mask:var(--vink) center/contain no-repeat;
    mask:var(--vink) center/contain no-repeat;
  }

  /* App installeren is het enige aanbod hier, dus die mag kleur
     hebben. De rest niet: dan valt dit niet meer op. */
  .acct__pop .acct__installeer{
    margin:0 0 2px;border:0;background:none;color:var(--accent);font-weight:600;
  }
  .acct__pop .acct__installeer svg{width:17px;height:17px;flex:0 0 auto}
  .acct__pop .acct__installeer:active{background:rgb(var(--accent-rgb) / .12)}

  /* ── kleuren ──────────────────────────────────────────── */
  /* Acht stippen op één regel in plaats van een raster van knikkers.
     Je kiest hier een tint, je koopt geen verf. */
  .acct__pop .theme__pop{
    padding:0;margin:0;border:0;border-top:1px solid var(--stroke);
    padding-top:2px;margin-top:8px;
  }
  .acct__pop .theme__swatches{
    display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px;
    grid-template-columns:none;
    padding:2px 10px 4px;
  }
  /* flex:1 1 0 rekte ze in de breedte op terwijl de hoogte 22 bleef,
     dus werden het ovalen. Vaste maat, en de ruimte ertussen verdeelt
     zich met space-between. */
  .acct__pop .theme__swatches button{
    width:24px;height:24px;flex:0 0 auto;
    aspect-ratio:1;
    border-width:2px;
  }
  .acct__pop .theme__swatches button::after{inset:1px}
  .acct__pop .theme__swatches button:hover{transform:none}
  .acct__pop .theme__swatches button.is-on{
    border-color:var(--ink);
    box-shadow:0 0 0 1px rgba(0,0,0,.6);
  }

  /* eigen kleur als gewone regel, met het invoervakje als stip links */
  .acct__pop .theme__custom{
    min-height:40px;margin:4px 0 0;padding:0 10px;
    border-top:0;
    display:flex;align-items:center;gap:11px;
    border-radius:11px;
    font-family:var(--ui);font-size:13px;color:var(--ink-3);
  }
  .acct__pop .theme__custom input{width:22px;height:22px;border-radius:50%;flex:0 0 auto}
  .acct__pop .theme__custom input::-webkit-color-swatch{border-radius:50%}
  .acct__pop .theme__custom:active{background:rgba(255,255,255,.06)}
}

/* ══════════════════════════════════════════════════════════
   DE ACCOUNTKNOP OP EEN BREED SCHERM

   Op een telefoon is dit de kop van het uitklapmenu: rond icoontje,
   naam, ondertitel, pijltje. Op een breed scherm bestaat dat menu niet
   (het paneel staat daar op display:contents) en hoort hetzelfde
   element gewoon de knop in de balk te zijn die er altijd stond.

   Eén element, twee gedaanten. Zonder dit blok staat hij op een
   desktop op display:none en is er helemaal geen accountknop meer.
   ══════════════════════════════════════════════════════════ */
@media (min-width:821px){
  .acct__ik{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 12px;border-radius:99px;
    border:1px solid var(--stroke);background:var(--panel);
    color:var(--ink-2);cursor:pointer;
    transition:.3s var(--ease);
  }
  .acct__ik:hover{color:var(--ink);border-color:var(--stroke-2)}
  .acct__ik[hidden]{display:none}

  /* het rondje krimpt tot een pictogram op tekstgrootte */
  .acct__ik .acct__letter{
    width:auto;height:auto;
    border:0;background:none;border-radius:0;
    color:inherit;font-size:11px;
  }
  .acct__ik .acct__letter svg{width:14px;height:14px;display:block}

  .acct__ik .acct__wie b{
    font-family:var(--ui);font-size:10.5px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:inherit;
    max-width:140px;
  }
  /* ondertitel en pijltje horen bij het menu, niet bij een chip */
  .acct__ik .acct__wie em,
  .acct__ik .acct__pijl{display:none}

  /* ingelogd vult hij zich met de themakleur, net als voorheen */
  .acct__ik.is-in{
    color:var(--on-accent);background:var(--accent);border-color:transparent;
    box-shadow:0 4px 22px -6px rgb(var(--accent-rgb) / .65);
  }
  .acct__ik.is-in:hover{color:var(--on-accent);border-color:transparent}

  /* de streep eronder is alleen in het menu een scheiding */
  .acct__streep{display:none}
}

/* ══════════════════════════════════════════════════════════
   PROFIELFOTO'S

   De letter zit in het element zelf (data-letter) en de foto ligt er
   als plaatje overheen. Is er geen foto, of gaat het plaatje stuk, dan
   staat de letter er gewoon nog. Geen kapotte plaatjes, geen tweede
   element dat je moet bijhouden.
   ══════════════════════════════════════════════════════════ */
.av{
  position:relative;flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;
  width:34px;height:34px;border-radius:50%;
  background:rgb(var(--accent-rgb) / .16);
  border:1px solid rgb(var(--accent-rgb) / .3);
  color:var(--accent);
  font-family:var(--display);font-weight:800;font-size:14px;line-height:1;
  user-select:none;
}
.av::before{content:attr(data-letter)}
.av img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* op het scorebord: kleiner, en rustiger van kleur zodat de rij niet
   uit acht gekleurde bolletjes bestaat */
.av--rij{
  width:28px;height:28px;font-size:11.5px;
  background:var(--panel-2);border-color:var(--stroke);color:var(--ink-3);
}
li.is-you .av--rij{
  background:rgb(var(--accent-rgb) / .16);
  border-color:rgb(var(--accent-rgb) / .35);color:var(--accent);
}

/* op het podium groter, want daar is de foto het punt */
.av--pod{width:46px;height:46px;font-size:18px;margin:0 auto 6px}

/* de drie vaste plekken dragen hun eigen maat al; het plaatje moet daar
   alleen even de hoek en de vulling overnemen */
.pf__letter img,.acct__letter img,.authbox__letter img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.pf__letter,.acct__letter,.authbox__letter{position:relative;overflow:hidden}

/* ── meer treffers dan getoond ───────────────────────────── */
.suggest__meer{
  margin:2px 0 0;padding:10px 12px;
  border-top:1px solid var(--stroke);
  font-family:var(--ui);font-size:11px;color:var(--ink-3);text-align:center;
}
/* Er passen er nu tot tweehonderd in de lijst, dus mag hij wat hoger
   worden. Vijf regels was te weinig om in te zoeken. */
.suggest{max-height:min(56vh, 420px)}

/* ══════════════════════════════════════════════════════════
   FOTO BIJSNIJDEN

   Het ronde masker is één element met een enorme box-shadow naar
   binnen toe: alles buiten de cirkel wordt daarmee verduisterd, zonder
   dat we het beeld hoeven te knippen. Zo zie je nog wel wát er buiten
   de uitsnede valt, en dat helpt bij het goed zetten.
   ══════════════════════════════════════════════════════════ */
.snij{
  position:relative;width:100%;max-width:380px;
  padding:26px 24px 20px;border-radius:24px;
  border:1px solid var(--stroke-2);
  background:linear-gradient(180deg,rgba(24,26,31,.98),rgba(11,12,15,.98));
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  transform:translateY(22px) scale(.96);opacity:0;
  transition:.5s var(--snap);
}
.overlay.is-open .snij{transform:none;opacity:1}

.snij__titel{
  margin:0 0 16px;font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--ink);
}

.snij__vlak{
  position:relative;width:100%;aspect-ratio:1;
  border-radius:16px;overflow:hidden;
  background:#0a0a0d;
  /* de browser mag hier niet zelf gaan scrollen of zoomen: dat is wat
     wij met dezelfde gebaren doen */
  touch-action:none;
  cursor:grab;
}
.snij__vlak:active{cursor:grabbing}
.snij__vlak canvas{width:100%;height:100%;display:block}

.snij__masker{
  position:absolute;inset:0;pointer-events:none;
  border-radius:16px;
}
.snij__masker::before{
  content:'';position:absolute;left:50%;top:50%;
  width:100%;height:100%;transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:0 0 0 9999px rgba(6,6,8,.72);
  outline:1px solid rgb(var(--accent-rgb) / .5);
}

.snij__leeg{
  position:absolute;inset:0;margin:0;
  display:grid;place-items:center;
  font-family:var(--ui);font-size:12.5px;color:var(--ink-3);
  pointer-events:none;
}

/* ── zoomen ──────────────────────────────────────────────── */
.snij__zoom{display:flex;align-items:center;gap:11px;margin-top:14px}
.snij__zoom svg{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto}
.snij__zoom input{
  flex:1;min-width:0;height:22px;
  -webkit-appearance:none;appearance:none;background:none;cursor:pointer;
}
.snij__zoom input::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;background:rgba(255,255,255,.1);
}
.snij__zoom input::-moz-range-track{
  height:4px;border-radius:99px;background:rgba(255,255,255,.1);
}
.snij__zoom input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-6px;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:0;
  box-shadow:0 0 12px -2px rgb(var(--accent-rgb) / .8);
}
.snij__zoom input::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:0;
  background:var(--accent);
}

.snij__uitleg{
  margin:10px 0 0;text-align:center;
  font-size:11px;line-height:1.5;color:var(--ink-3);
}

.snij__knoppen{display:flex;gap:9px;margin-top:16px}
.snij__knoppen .btn{flex:1;height:46px;padding:0 14px;font-size:13px}
.snij__knoppen .btn:disabled{opacity:.4;pointer-events:none}

/* dezelfde draaiende stip als op de inlogknop */
.snij__knoppen .btn.is-busy{pointer-events:none;color:transparent;position:relative}
.snij__knoppen .btn.is-busy::after{
  content:'';position:absolute;top:50%;left:50%;
  width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:auth-draai .7s linear infinite;
}

/* ── de avatar op de accountpagina is aanklikbaar ────────── */
.pf__letter{cursor:pointer}
.pf__letter::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(6,6,8,.55) var(--camera) center/16px no-repeat;
  opacity:0;transition:opacity .2s var(--ease);
}
.pf__letter:hover::after,
.pf__letter:focus-visible::after{opacity:1}
/* Op een telefoon bestaat zweven niet, dus daar staat het schuin
   onderin altijd aan: anders weet niemand dat je erop kunt tikken. */
@media (hover:none){
  .pf__letter::after{opacity:1;background-color:rgba(6,6,8,.4)}
}

@media (max-width:420px){
  .snij{padding:22px 18px 18px}
}

/* ══════════════════════════════════════════════════════════
   WEET JE HET ZEKER

   Klein, gecentreerd, en met de veilige keuze als grote knop. Wie hier
   per ongeluk belandt en zonder te lezen op de opvallendste knop drukt,
   blijft dus gewoon doorspelen. Stoppen kan ook, maar dat moet je even
   willen.
   ══════════════════════════════════════════════════════════ */
.vraag{
  position:relative;width:100%;max-width:340px;
  padding:28px 24px 22px;border-radius:22px;
  border:1px solid var(--stroke-2);
  background:linear-gradient(180deg,rgba(24,26,31,.98),rgba(11,12,15,.98));
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  text-align:center;
  transform:translateY(18px) scale(.96);opacity:0;
  transition:.42s var(--snap);
}
.overlay.is-open .vraag{transform:none;opacity:1}

.vraag__teken{
  display:grid;place-items:center;margin:0 auto 14px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,178,61,.14);
  border:1px solid rgba(255,178,61,.32);
  color:#FFB23D;
}
.vraag__teken svg{width:22px;height:22px}

.vraag__titel{
  margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--ink);
}
.vraag__body{
  margin:0 0 20px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
}
.vraag__knoppen{display:flex;flex-direction:column;gap:8px}
.vraag__knoppen .btn{width:100%;height:46px;font-size:13.5px}

/* ══════════════════════════════════════════════════════════
   JE FOTO IN DE BALK

   Rechtsboven zie je jezelf. Op een telefoon is dat de knop die het
   menu opent, op een breed scherm staat hij naast je naam. In beide
   gevallen is het hetzelfde ding: foto als je er een hebt, anders je
   eerste letter, en het poppetje zolang je niet bent ingelogd.
   ══════════════════════════════════════════════════════════ */
.acct__mini{
  position:relative;display:grid;place-items:center;
  width:22px;height:22px;flex:0 0 auto;
  border-radius:50%;overflow:hidden;
  font-family:var(--display);font-weight:800;font-size:10px;line-height:1;
}
.acct__mini svg{width:17px;height:17px}
.acct__mini.is-in{
  background:rgb(var(--accent-rgb) / .18);
  color:var(--accent);
  box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .4);
}
.acct__mini.is-in::before{content:attr(data-letter)}
.acct__mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Op een breed scherm zit de foto in de chip naast je naam. Daar krimpt
   het rondje mee met de tekst. */
@media (min-width:821px){
  .acct__ik .acct__letter:has(img){
    width:20px;height:20px;border-radius:50%;overflow:hidden;
    box-shadow:0 0 0 1px rgba(255,255,255,.25);
  }
}

/* ── foto wijzigen op de accountpagina ───────────────────── */
/* Het camera-icoontje óp de foto is een hint. Deze regel zegt het. */
.pf__fotoknop{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;padding:4px 8px 4px 0;
  font-family:var(--ui);font-size:11.5px;font-weight:500;
  color:var(--accent);
  transition:opacity .2s var(--ease);
}
.pf__fotoknop svg{width:13px;height:13px}
.pf__fotoknop:hover{opacity:.75}
.pf__fotoknop[hidden]{display:none}

/* ── podium: cijfer boven, dan de foto, dan de naam ──────── */
.av--pod{margin:2px auto 7px}

/* ══════════════════════════════════════════════════════════
   HET NIEUWS NA EEN POTJE

   Eén regel, met een teken ernaast. Geen tweede grote score, geen
   tweede knop: die staan er al. Dit vertelt alleen wat er zojuist is
   veranderd, en het schuift van onder in beeld zodat je het ziet
   gebeuren in plaats van dat het er ineens staat.

   Het podium krijgt goud, de rest de themakleur. Zou alles goud zijn,
   dan is goud niets meer.
   ══════════════════════════════════════════════════════════ */
.nieuws{
  display:flex;align-items:center;gap:14px;
  margin-top:16px;padding:15px 18px;
  border-radius:16px;
  border:1px solid rgb(var(--accent-rgb) / .34);
  background:
    linear-gradient(100deg, rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / .04) 60%),
    var(--panel);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .5s var(--ease), transform .6s var(--snap);
}
.nieuws.is-op{opacity:1;transform:none}
.nieuws[hidden]{display:none}

.nieuws__teken{
  display:grid;place-items:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;
  background:rgb(var(--accent-rgb) / .18);
  color:var(--accent);
}
.nieuws__teken svg{width:20px;height:20px}

.nieuws__tekst{min-width:0}
.nieuws__tekst b{
  display:block;font-family:var(--display);font-weight:800;font-size:14.5px;
  letter-spacing:.01em;color:var(--ink);
}
.nieuws__tekst span{
  display:block;margin-top:3px;
  font-family:var(--ui);font-size:12px;line-height:1.45;color:var(--ink-2);
}

/* Bij de beste drie: goud, en een trage glans eroverheen. Dit is het
   enige bericht dat zichzelf zo mag aankondigen. */
.nieuws[data-soort="podium"]{
  position:relative;overflow:hidden;
  border-color:rgba(255,215,94,.45);
  background:linear-gradient(100deg, rgba(255,215,94,.16), rgba(255,215,94,.04) 60%), var(--panel);
}
.nieuws[data-soort="podium"] .nieuws__teken{
  background:rgba(255,215,94,.2);color:#FFD75E;
}
.nieuws[data-soort="podium"]::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform:translateX(-100%);
  animation:nieuws-glans 2.6s var(--ease-io) 1.1s 2;
}
@keyframes nieuws-glans{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  .nieuws{transition:opacity .2s}
  .nieuws[data-soort="podium"]::after{animation:none}
}

@media (max-width:560px){
  .nieuws{padding:13px 15px;gap:12px}
  .nieuws__teken{width:34px;height:34px}
  .nieuws__teken svg{width:18px;height:18px}
  .nieuws__tekst b{font-size:13.5px}
}

/* ══════════════════════════════════════════════════════════
   DE DAGELIJKSE REEKS

   Warm oranje in plaats van de themakleur. Dat is met opzet: de reeks
   gaat niet over dit potje maar over volhouden, en dat verdient een
   eigen kleur die niet meebeweegt met wat je verder hebt ingesteld.
   ══════════════════════════════════════════════════════════ */
.vlam{
  --gloed:255 149 61;
  position:relative;width:100%;max-width:340px;
  padding:30px 24px 22px;border-radius:24px;
  border:1px solid rgb(var(--gloed) / .3);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(var(--gloed) / .16), transparent 62%),
    linear-gradient(180deg,rgba(24,20,16,.98),rgba(11,11,14,.98));
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  text-align:center;
  transform:translateY(20px) scale(.96);opacity:0;
  transition:.5s var(--snap);
}
.overlay.is-open .vlam{transform:none;opacity:1}

/* ── de vlam met het getal erin ──────────────────────────── */
.vlam__teken{
  position:relative;display:grid;place-items:center;
  width:96px;height:96px;margin:0 auto 16px;
}
.vlam__teken svg{
  position:absolute;inset:0;width:100%;height:100%;
  color:rgb(var(--gloed));
  filter:drop-shadow(0 0 26px rgb(var(--gloed) / .55));
}
.vlam__teken b{
  position:relative;z-index:1;margin-top:14px;
  font-family:var(--display);font-weight:900;font-size:30px;line-height:1;
  color:#1a1206;
  font-variant-numeric:tabular-nums;
}
/* de vlam ademt; langzaam, anders wordt het onrustig */
@keyframes vlam-adem{
  from{transform:scale(1)}
  to{transform:scale(1.05)}
}
.overlay.is-open .vlam__teken svg{animation:vlam-adem 1.8s var(--ease-io) infinite alternate}

.vlam__kop{
  margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:19px;
  color:var(--ink);
}
.vlam__body{
  margin:0 0 20px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
}

/* ── de week ─────────────────────────────────────────────── */
.vlam__week{
  list-style:none;margin:0 0 16px;padding:0;
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
}
.vlam__week li{display:flex;flex-direction:column;align-items:center;gap:5px}
.vlam__week i{
  width:100%;height:26px;border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid transparent;
}
.vlam__week li.is-aan i{
  background:rgb(var(--gloed) / .28);
  border-color:rgb(var(--gloed) / .4);
}
.vlam__week li.is-nu i{
  background:rgb(var(--gloed));
  box-shadow:0 0 16px -2px rgb(var(--gloed) / .8);
}
.vlam__week span{
  font-family:var(--ui);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.vlam__week li.is-aan span{color:var(--ink-2)}

.vlam__voet{
  margin:0 0 18px;font-family:var(--ui);font-size:11.5px;color:var(--ink-3);
}
/* De knop hoort bij deze kaart, niet bij de themakleur. Paars in een
   oranje kaart leest als een knop die er per ongeluk in is beland. */
.vlam__ok{
  width:100%;height:46px;
  background:rgb(var(--gloed));color:#241505;border-color:transparent;
  box-shadow:0 6px 26px -8px rgb(var(--gloed) / .8);
}
.vlam__ok:hover{background:rgb(var(--gloed));filter:brightness(1.08)}

/* Een gebroken reeks krijgt geen feestkleur. Dat zou spotten zijn. */
.overlay[data-soort="opnieuw"] .vlam{--gloed:150 150 160}
.overlay[data-soort="opnieuw"] .vlam__teken svg{animation:none}

@media (prefers-reduced-motion:reduce){
  .overlay.is-open .vlam__teken svg{animation:none}
}

/* ══ de regel op het startscherm ══════════════════════════ */
.thuisreeks{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:7px 14px 7px 8px;
  border-radius:99px;
  border:1px solid rgba(255,149,61,.28);
  background:rgba(255,149,61,.08);
  font-family:var(--ui);font-size:11.5px;color:var(--ink-2);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.thuisreeks[hidden]{display:none}
.thuisreeks:hover{border-color:rgba(255,149,61,.5);background:rgba(255,149,61,.14)}
.thuisreeks__vlam{
  position:relative;display:grid;place-items:center;
  width:26px;height:26px;flex:0 0 auto;
}
.thuisreeks__vlam svg{
  position:absolute;inset:0;width:100%;height:100%;color:#FF953D;
}
/* het getal staat in de tekst ernaast; in het vlammetje zelf was het
   op deze maat niet te lezen */
/* Vandaag nog niet gespeeld: dan mag hij even zwaaien. */
.thuisreeks.is-open-vandaag .thuisreeks__vlam svg{
  animation:vlam-adem 1.6s var(--ease-io) infinite alternate;
}
@media (prefers-reduced-motion:reduce){
  .thuisreeks.is-open-vandaag .thuisreeks__vlam svg{animation:none}
}

/* ══════════════════════════════════════════════════════════
   SCOREBORD: DE KEUZES

   Er stonden zeventien knoppen boven de lijst: vier tabbladen en
   dertien categorieën, twee rijen die er hetzelfde uitzagen terwijl ze
   iets heel anders doen. En nergens stond het belangrijkste: dat bij
   "aller tijden" alles wordt opgeteld en op de andere lijsten alleen je
   beste losse potje telt.

   Nu: vier tabbladen met een schuivende markering, en daaronder één
   regel die zegt wat je bekijkt met één knop om de categorie te
   wisselen. De dertien categorieën komen pas als je erom vraagt.
   ══════════════════════════════════════════════════════════ */
.lb__tabs{
  --glij:0;
  position:relative;
}
/* de markering schuift in plaats van te verspringen: zo lees je het als
   één keuze met vier standen */
.lb__tabs::after{
  content:'';position:absolute;top:4px;bottom:4px;left:4px;
  width:calc(25% - 4px);border-radius:10px;
  background:rgb(var(--accent-rgb) / .16);
  border:1px solid rgb(var(--accent-rgb) / .32);
  transform:translateX(calc(var(--glij) * 100%));
  transition:transform .26s var(--ease);
  pointer-events:none;
}
.lb__tabs button{position:relative;z-index:1}
.lb__tabs button.is-on{background:none}
@media (prefers-reduced-motion:reduce){
  .lb__tabs::after{transition:none}
}

/* ── de regel eronder ────────────────────────────────────── */
.lb__regel{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 0 4px;
}
.lb__regel-wat{
  margin:0;font-family:var(--ui);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}

.lb__filter{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:7px 10px 7px 13px;border-radius:99px;
  border:1px solid var(--stroke);background:var(--panel);
  font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-2);
  transition:.25s var(--ease);
}
.lb__filter svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.lb__filter:hover{border-color:var(--stroke-2);color:var(--ink)}
.lb__filter.is-open svg{transform:rotate(180deg)}
/* Staat er een categorie aan, dan mag je dat zien zonder te lezen. */
.lb__filter.is-aan{
  border-color:rgb(var(--accent-rgb) / .45);
  background:rgb(var(--accent-rgb) / .1);
  color:var(--accent);
}

/* ── de lade met categorieën ─────────────────────────────── */
.lb__lade{
  margin:2px 0 4px;padding:10px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.02);
}
.lb__lade[hidden]{display:none}
.lb__lade .lb__cats{margin:0}

@media (max-width:560px){
  .lb__regel{margin:12px 0 4px}
  .lb__regel-wat{font-size:9px;letter-spacing:.14em}
}

/* ══════════════════════════════════════════════════════════
   EEN ANDERE SPELER BEKIJKEN

   Klein en compact: dit is nieuwsgierigheid, geen dossier. Genoeg om
   een idee van iemand te krijgen, niet meer.
   ══════════════════════════════════════════════════════════ */
.lb__list li.is-klikbaar,
.pod.is-klikbaar{cursor:pointer}
.lb__list li.is-klikbaar:active{transform:scale(.995)}

.sp{
  position:relative;width:100%;max-width:340px;
  padding:26px 24px 22px;border-radius:24px;
  border:1px solid var(--stroke-2);
  background:
    radial-gradient(120% 100% at 0% 0%, rgb(var(--accent-rgb) / .1), transparent 60%),
    linear-gradient(180deg,rgba(24,26,31,.98),rgba(11,12,15,.98));
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  transform:translateY(20px) scale(.96);opacity:0;
  transition:.45s var(--snap);
}
.overlay.is-open .sp{transform:none;opacity:1}

.sp__kop{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.av--sp{width:52px;height:52px;font-size:21px}
.sp__wie{min-width:0}
.sp__wie b{
  display:block;font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sp__wie span{
  display:block;margin-top:3px;
  font-family:var(--ui);font-size:11px;color:var(--ink-3);
}

.sp__plek{
  margin:0 0 16px;padding:11px 14px;border-radius:13px;
  border:1px solid rgb(var(--accent-rgb) / .3);
  background:rgb(var(--accent-rgb) / .1);
  font-family:var(--ui);font-size:12.5px;color:var(--ink-2);
}
.sp__plek b{
  font-family:var(--display);font-weight:800;font-size:17px;color:var(--accent);
  margin-right:6px;font-variant-numeric:tabular-nums;
}

.sp__cijfers{
  margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px;
  padding-bottom:4px;
}
.sp__cijfers dt{
  font-family:var(--ui);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.sp__cijfers dd{
  margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}

.sp__label{
  margin:18px 0 8px;font-family:var(--ui);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.sp__cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sp__cats li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;border-radius:11px;
  background:rgba(255,255,255,.03);
  font-family:var(--ui);font-size:12.5px;color:var(--ink-2);
}
.sp__cats b{font-family:var(--display);font-weight:700;color:var(--ink)}
.sp__cats em{font-style:normal;font-size:9.5px;color:var(--ink-3);margin-left:1px}

.sp__reeks{
  margin:16px 0 0;text-align:center;
  font-family:var(--ui);font-size:11.5px;color:#FF953D;
}

/* ══════════════════════════════════════════════════════════
   DOORLADEN OP HET SCOREBORD

   Het bord is onbeperkt, maar wordt per vijftig opgehaald. Onderaan de
   lijst staat een puntje dat de volgende lading in gang zet zodra het
   in beeld komt; zolang dat bezig is zie je drie stipjes. Voor wie
   kijkt is er geen verschil met één doorlopende lijst.
   ══════════════════════════════════════════════════════════ */
.lb__meer{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:22px 0;list-style:none;
}
.lb__meer i{
  width:6px;height:6px;border-radius:50%;
  background:rgb(var(--accent-rgb) / .5);
  animation:lb-stip 1.1s var(--ease-io) infinite;
}
.lb__meer i:nth-child(2){animation-delay:.16s}
.lb__meer i:nth-child(3){animation-delay:.32s}
@keyframes lb-stip{
  0%,100%{opacity:.25;transform:translateY(0)}
  50%    {opacity:1;transform:translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){
  .lb__meer i{animation:none;opacity:.6}
}

/* het einde van de lijst, zodat je weet dat je alles hebt gezien */
.lb__voet{
  padding:22px 0 8px;list-style:none;text-align:center;
  font-family:var(--ui);font-size:11px;color:var(--ink-3);
}