/* ==========================================================================
   PartyTracks - design system
   Mobiel eerst. Alle maten schalen mee met de viewport; tikdoelen zijn
   minimaal 44px zodat de stemknoppen ook met een biertje in de hand werken.
   ========================================================================== */

:root {
  /* Kleur */
  --bg:          #0b0d0f;
  --bg-elevated: #101315;
  --surface:     #16191d;
  --surface-2:   #1e2329;
  --surface-3:   #272d34;
  --line:        #2b3138;
  --line-strong: #3a424b;

  --text:        #f3f6f8;
  --text-muted:  #98a4b1;
  --text-faint:  #6b7681;

  --brand:       #1ed760;
  --brand-dim:   #17b34f;
  --brand-ink:   #04170b;

  --up:          #34d17a;
  --down:        #f4536b;
  --amber:       #ffcb47;
  --danger:      #ff5f6d;

  /* Vorm */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Ruimte */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Diepte */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 24px rgba(0,0,0,.45);
  --shadow-3: 0 18px 48px rgba(0,0,0,.55);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tap: 44px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* Losse links in tekst: groen in plaats van het blauw en paars van de
   browser, en bezocht ziet er hetzelfde uit als onbezocht. Knoppen, chips en
   menubalken zetten hun eigen kleur en trekken zich hier niets van aan. */
/* :where() houdt de specificiteit op nul, zodat elke klasse (knop, chip,
   menubalk) er zonder gedoe overheen gaat; a:visited won anders van .pt-btn
   en kleurde de tekst op een groene knop groen. */
:where(a) { color: var(--brand); text-decoration: underline; text-decoration-color: rgba(30, 215, 96, .35); text-underline-offset: 2px; }
:where(a:hover) { text-decoration-color: currentColor; }
:where(a:visited) { color: var(--brand); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- structuur */

.pt-shell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  padding-left: max(var(--s-4), env(safe-area-inset-left));
  padding-right: max(var(--s-4), env(safe-area-inset-right));
}

.pt-shell--wide { max-width: 1180px; }

.pt-centered {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--s-4);
}

.pt-stack > * + * { margin-top: var(--s-4); }
.pt-stack-sm > * + * { margin-top: var(--s-2); }

/* ---------------------------------------------------------------- header */

.pt-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11,13,15,.86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

.pt-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-2) 0;
}

.pt-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.pt-brand__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand);
  flex: 0 0 auto;
}

.pt-topbar__spacer { flex: 1 1 auto; min-width: 0; }

/* Op een smal scherm is er geen ruimte voor de merknaam naast de knoppen. */
@media (max-width: 520px) {
  .pt-brand { font-size: 0; gap: 0; }
  .pt-brand__dot { width: 12px; height: 12px; }
  .pt-topbar__inner { gap: var(--s-2); }
  .pt-topbar__inner .pt-btn { padding: 0 var(--s-3); }
  .pt-code-pill { font-size: .9rem; letter-spacing: .12em; padding: 5px 9px; }
}

/* --------------------------------------------------------------- tekst */

.pt-h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; margin: 0; }
.pt-h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin: 0; }
.pt-h3 { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }

.pt-muted { color: var(--text-muted); margin: 0; }
.pt-faint { color: var(--text-faint); }
.pt-small { font-size: .875rem; }
.pt-tabular { font-variant-numeric: tabular-nums; }

.pt-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
}

/* ---------------------------------------------------------------- kaart */

.pt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.pt-card--narrow { max-width: 420px; padding: var(--s-5); text-align: center; }
.pt-card__body { padding: var(--s-4); }
.pt-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------- knoppen */

.pt-btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.pt-btn:hover:not(:disabled) { background: var(--surface-3); }
.pt-btn:active:not(:disabled) { transform: scale(.97); }
.pt-btn:disabled { opacity: .45; cursor: not-allowed; }

.pt-btn--primary { --btn-bg: var(--brand); --btn-fg: var(--brand-ink); --btn-bd: transparent; }
.pt-btn--primary:hover:not(:disabled) { background: var(--brand-dim); }

.pt-btn--ghost { --btn-bg: transparent; --btn-bd: var(--line); }
.pt-btn--danger { --btn-bg: transparent; --btn-fg: var(--danger); --btn-bd: rgba(255,95,109,.4); }
.pt-btn--danger:hover:not(:disabled) { background: rgba(255,95,109,.12); }

/* Iconen in knoppen hebben een eigen maat nodig; een SVG zonder afmeting
   rekt anders op tot de knop. */
.pt-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.pt-btn--sm svg { width: 17px; height: 17px; }

.pt-btn--sm { min-height: 36px; padding: 0 var(--s-3); font-size: .875rem; }
.pt-btn--block { width: 100%; }
.pt-btn--icon { padding: 0; width: var(--tap); flex: 0 0 auto; }
.pt-btn--sm.pt-btn--icon { width: 36px; }

/* Rij met bedieningsknoppen die op mobiel netjes doorloopt */
.pt-btnrow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pt-btn__icoon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ----------------------------------------------------------------- input */

.pt-field { display: flex; flex-direction: column; gap: var(--s-2); }
.pt-label { font-size: .875rem; font-weight: 600; color: var(--text-muted); }

.pt-input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color .15s ease, background-color .15s ease;
  /* 16px voorkomt dat iOS bij focus inzoomt */
  font-size: 16px;
}

.pt-input::placeholder { color: var(--text-faint); }
.pt-input:focus { border-color: var(--brand); outline: none; background: var(--surface); }

.pt-searchbar { display: flex; gap: var(--s-2); }
.pt-searchbar .pt-input { flex: 1 1 auto; min-width: 0; }

.pt-code-input {
  text-align: center;
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-left: .3em; /* compenseert de letter-spacing rechts */
}

/* ----------------------------------------------------------------- chips */

.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .75rem;
  font-weight: 650;
  color: var(--text-muted);
  white-space: nowrap;
}

.pt-chip--brand { background: rgba(30,215,96,.14); border-color: rgba(30,215,96,.35); color: var(--brand); }
.pt-chip--amber { background: rgba(255,203,71,.14); border-color: rgba(255,203,71,.35); color: var(--amber); }
.pt-chip--live  { background: rgba(244,83,107,.14); border-color: rgba(244,83,107,.35); color: var(--down); }
.pt-chip--mine  { background: rgba(255,203,71,.16); border-color: rgba(255,203,71,.4); color: var(--amber); }

.pt-code-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}

/* ---------------------------------------------------------------- tracks */

.pt-tracks { list-style: none; margin: 0; padding: 0; }

.pt-track {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--line);
}

.pt-track:last-child { border-bottom: 0; }
.pt-track--played { opacity: .45; }

.pt-track__cover {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-3);
  flex: 0 0 auto;
}

.pt-track__meta { min-width: 0; }

.pt-track__title {
  font-weight: 650;
  overflow: hidden;
  /* Twee regels is genoeg voor vrijwel elke titel; daarna afkappen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.pt-track__sub {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: .85rem;
  margin-top: 2px;
}

.pt-track__artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pt-track__actions { display: flex; align-items: center; gap: var(--s-2); }

/* Stemblok: twee knoppen met het saldo ertussen */
.pt-vote {
  display: grid;
  grid-template-columns: var(--vote-btn) auto var(--vote-btn);
  align-items: center;
  gap: 1px;
  --vote-btn: 40px;
}

@media (min-width: 400px) { .pt-vote { --vote-btn: var(--tap); } }

.pt-vote__btn {
  width: var(--vote-btn);
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform .1s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pt-vote__btn svg { width: 20px; height: 20px; }
.pt-vote__btn:active { transform: scale(.9); }

.pt-vote__btn[aria-pressed="true"].is-up {
  background: rgba(52,209,122,.18);
  border-color: var(--up);
  color: var(--up);
}

.pt-vote__btn[aria-pressed="true"].is-down {
  background: rgba(244,83,107,.18);
  border-color: var(--down);
  color: var(--down);
}

.pt-vote__score {
  min-width: 2.2ch;
  text-align: center;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

.pt-vote__score.is-positive { color: var(--up); }
.pt-vote__score.is-negative { color: var(--down); }

/* Kort oplichten als het saldo verandert */

.pt-rank {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: .8rem;
  font-weight: 750;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.pt-rank--1 { background: var(--amber); color: #2a1d00; }

/* Op smalle schermen is er geen ruimte voor het rangnummer. */
@media (max-width: 719px) {
  .pt-rank { display: none; }
}

/* --------------------------------------------------------- nu aan het spelen */

.pt-now {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  background: linear-gradient(140deg, rgba(30,215,96,.13), rgba(30,215,96,0) 62%), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.pt-now__cover {
  width: 72px; height: 72px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-3);
  box-shadow: var(--shadow-2);
}

.pt-now__label {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

.pt-now__title { font-size: 1.05rem; font-weight: 750; margin-top: 2px; }
.pt-now__title, .pt-now__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-now__artist { color: var(--text-muted); font-size: .9rem; }

/* Pulserend bolletje als er iets speelt */
.pt-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  animation: pt-pulse 1.8s ease-in-out infinite;
}
@keyframes pt-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(30,215,96,.6); }
  50%      { opacity: .65; box-shadow: 0 0 0 6px rgba(30,215,96,0); }
}

.pt-progress {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  margin-top: var(--s-3);
}

.pt-progress__bar {
  height: 100%;
  background: var(--brand);
  border-radius: inherit;
  transition: width 1s linear;
}

/* De bulkbalk boven de wachtrij, tijdens het selecteren. */
.pt-kiesbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.pt-track__kies {
  width: 22px; height: 22px;
  margin: 0 auto;
  accent-color: var(--brand);
  cursor: pointer;
}
.pt-track.is-gekozen { background: rgba(29, 185, 84, .08); }

/* ------------------------------------------------------- zoekresultaten */

.pt-results { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.pt-result {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
}

.pt-result + .pt-result { margin-top: var(--s-1); }
/* De sponsorregel op de tv: klein, onder de uitslag. */
.pt-tv__sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: calc(clamp(8px, 1.2vh, 16px) * var(--maat, 1));
  font-size: calc(clamp(.8rem, 1.1vw, 1.1rem) * var(--maat, 1));
  color: var(--text-muted);
}
.pt-tv__sponsor img { height: calc(clamp(22px, 3vh, 44px) * var(--maat, 1)); border-radius: 6px; }

/* De balk bovenaan bij onderhoud of op de testomgeving. */
.pt-omgevingsbalk {
  padding: 6px 14px;
  text-align: center;
  font-size: .85rem;
  font-weight: 650;
  background: rgba(255, 193, 7, .16);
  color: var(--amber);
  border-bottom: 1px solid rgba(255, 193, 7, .3);
}
.pt-omgevingsbalk--test { background: rgba(88, 101, 242, .18); color: #aab6ff; border-bottom-color: rgba(88,101,242,.35); }

/* Muziekroulette: de vakjes waar je fiches op zet. */
.pt-roulette__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }
.pt-roulette__vak {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.pt-roulette__vak.is-gezet { border-color: var(--brand); background: rgba(29,185,84,.14); position: relative; }
.pt-roulette__label { font-weight: 650; }
.pt-roulette__inzet { font-size: .75rem; color: var(--text-muted); }
/* Kruisje om je fiches hier weg te halen zolang het bord open is. */
.pt-roulette__terug {
  position: absolute; top: 4px; right: 6px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .85rem; line-height: 1;
}
.pt-roulette__terug:hover, .pt-roulette__terug:focus-visible { color: var(--down); border-color: var(--down); }

/* Het bord op de tv. */
.pt-tv__roulette { display: grid; gap: calc(clamp(6px, .8vh, 12px) * var(--maat, 1)); }
.pt-tv__roul-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: calc(clamp(6px, .8vw, 12px) * var(--maat, 1)); }
.pt-tv__roul-vak {
  padding: calc(clamp(6px, .9vh, 14px) * var(--maat, 1));
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: center;
  font-size: calc(clamp(.8rem, 1.1vw, 1.2rem) * var(--maat, 1));
}
.pt-tv__roul-vak.is-winnend { border-color: var(--brand); background: rgba(29,185,84,.2); }
.pt-tv__roul-vak b { display: block; font-size: calc(clamp(.9rem, 1.3vw, 1.5rem) * var(--maat, 1)); }

/* Een ingesproken felicitatie op de tv. */
.pt-roep--fel .pt-roep__kop { font-size: calc(clamp(1.4rem, 3vw, 3rem) * var(--maat, 1)); }
.pt-fel__foto { width: calc(clamp(80px, 12vw, 200px) * var(--maat, 1)); height: calc(clamp(80px, 12vw, 200px) * var(--maat, 1)); border-radius: 50%; object-fit: cover; margin: 0 auto var(--s-3); display: block; }

/* De fotomuur op de telefoon: je eigen foto's als kleine tegels. */
.pt-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.pt-foto { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.pt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-foto--wacht img { opacity: .55; }
.pt-foto__stand { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: .68rem; background: rgba(0,0,0,.6); color: #fff; }
.pt-foto__weg { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 24px; cursor: pointer; }
.pt-btn--uit { opacity: .5; pointer-events: none; }

/* De fotomuur op de tv: een polaroid die af en toe over de plaat schuift. */
.pt-tv__foto {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  z-index: 40;
  width: min(60vw, calc(70vh * 1.2));
  padding: 14px 14px 44px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: pt-foto-in .5s ease-out;
}
.pt-tv__foto img { width: 100%; max-height: 60vh; object-fit: contain; display: block; background: #111; }
.pt-tv__foto-naam { position: absolute; left: 14px; right: 14px; bottom: 12px; text-align: center; color: #222; font-weight: 700; font-size: calc(clamp(.9rem, 1.4vw, 1.3rem) * var(--maat, 1)); font-family: "Marker Felt", "Comic Sans MS", cursive; }
@keyframes pt-foto-in { from { opacity: 0; transform: translate(-50%, -40%) rotate(4deg) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1); } }
/* De collage aan het eind. */
.pt-tv__collage { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; max-height: 40vh; overflow: hidden; }
.pt-tv__collage img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }

/* Nazorg: de lijsten met de nummers van de avond. */
.pt-nazorg__lijst { margin: var(--s-2) 0 0; padding-left: 1.4em; line-height: 1.7; }
.pt-nazorg__lijst li { padding: 2px 0; }

/* De regel bovenin een paneel dat bij Plus hoort. */
.pt-plus-note { margin: var(--s-2) 0 var(--s-3); }
/* Een clip van het quizblok die al geweest is. */
.pt-result.is-gespeeld { opacity: .55; }
.pt-result:hover { background: var(--surface-2); }
.pt-result__cover { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--surface-3); }

/* ------------------------------------------------------------ meldingen */

.pt-empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-muted);
}

.pt-empty__icon { font-size: 2rem; margin-bottom: var(--s-2); }

.pt-note {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .9rem;
}

.pt-note--warn  { border-color: rgba(255,203,71,.4); background: rgba(255,203,71,.1); color: #ffe6a8; }
.pt-note--error { border-color: rgba(255,95,109,.4); background: rgba(255,95,109,.1); color: #ffc2c8; }
.pt-note--ok    { border-color: rgba(30,215,96,.4);  background: rgba(30,215,96,.1);  color: #b9f5cf; }

/* Toast: zweeft boven alles, ook op mobiel binnen de veilige zone */
.pt-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(92vw, 420px);
  pointer-events: none;
}

.pt-toast {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3);
  font-size: .9rem;
  animation: pt-toast-in .22s ease;
}

.pt-toast--error { border-color: rgba(255,95,109,.5); background: #2a1417; color: #ffc2c8; }
.pt-toast--ok    { border-color: rgba(30,215,96,.5);  background: #0e2417; color: #b9f5cf; }

@keyframes pt-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------- laden */

.pt-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: pt-shimmer 1.3s ease infinite;
  border-radius: var(--r-sm);
}

@keyframes pt-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

.pt-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: pt-spin .7s linear infinite;
}

@keyframes pt-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ hulpklassen */

.pt-hidden { display: none !important; }
.pt-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pt-row { display: flex; align-items: center; gap: var(--s-3); }
.pt-row--between { justify-content: space-between; }
.pt-wrap { flex-wrap: wrap; }
.pt-grow { flex: 1 1 auto; min-width: 0; }

/* Ruimte onderaan zodat de laatste rij niet onder een vaste balk valt */
.pt-bottom-space { height: calc(var(--s-7) + env(safe-area-inset-bottom)); }

/* Als de Hitster-vraag onderaan plakt, moet de laatste rij eronderuit kunnen. */
body.pt-has-hitster .pt-bottom-space { height: calc(260px + env(safe-area-inset-bottom)); }

/* ============================ Grotere schermen ============================ */

@media (min-width: 720px) {
  .pt-track { grid-template-columns: 26px 56px minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3) var(--s-5); }
  .pt-track__cover { width: 56px; height: 56px; }
  .pt-track__title { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; }
  .pt-now { grid-template-columns: 96px minmax(0, 1fr); padding: var(--s-5); }
  .pt-now__cover { width: 96px; height: 96px; }
  .pt-now__title { font-size: 1.25rem; }
  .pt-card__body { padding: var(--s-5); }
  .pt-card__head { padding: var(--s-4) var(--s-5); }
}

/* Twee kolommen voor het DJ-scherm */
@media (min-width: 1000px) {
  .pt-split {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    gap: var(--s-5);
    align-items: start;
  }
  .pt-split__side { position: sticky; top: 84px; }
}

/* Kaartraster voor het dashboard */
.pt-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .pt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pt-grid { grid-template-columns: repeat(3, 1fr); } }

/* ======================= DJ-console ======================= */

/* Bedieningsbalk: op mobiel vast onderaan, op desktop gewoon in de kaart. */
.pt-transport {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 999px) {
  .pt-transport--docked {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    background: rgba(16,19,21,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: var(--s-3) var(--s-4);
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(0,0,0,.4);
    flex-wrap: nowrap;
  }
  .pt-transport--docked .pt-transport__meta { display: none; }
}

.pt-transport__btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .08s ease, background-color .15s ease;
}

.pt-transport__btn:active:not(:disabled) { transform: scale(.92); }
.pt-transport__btn:disabled { opacity: .4; cursor: not-allowed; }
.pt-transport__btn svg { width: 22px; height: 22px; }

.pt-transport__btn--main {
  width: 60px; height: 60px;
  background: var(--brand);
  color: var(--brand-ink);
  border-color: transparent;
}
.pt-transport__btn--main svg { width: 26px; height: 26px; }
.pt-transport__btn--main:hover:not(:disabled) { background: var(--brand-dim); }

/* Instellingen */
.pt-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.pt-switch:last-child { border-bottom: 0; }
.pt-switch__label { font-size: .95rem; }
.pt-switch__hint { display: block; font-size: .8rem; color: var(--text-faint); margin-top: 2px; }

.pt-switch__track {
  position: relative;
  width: 46px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  flex: 0 0 auto;
  transition: background-color .18s ease, border-color .18s ease;
}

.pt-switch__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .18s ease, background-color .18s ease;
}

.pt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pt-switch input:checked + .pt-switch__track { background: rgba(30,215,96,.28); border-color: var(--brand); }
.pt-switch input:checked + .pt-switch__track::after { transform: translateX(18px); background: var(--brand); }
.pt-switch input:focus-visible + .pt-switch__track { outline: 2px solid var(--brand); outline-offset: 2px; }

.pt-range { width: 100%; accent-color: var(--brand); height: var(--tap); }

/* Genre-keuze */
.pt-genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  max-height: 190px;
  overflow-y: auto;
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
}

.pt-genre {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: .8rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pt-genre[aria-pressed="true"] {
  background: rgba(244,83,107,.18);
  border-color: var(--down);
  color: var(--down);
  text-decoration: line-through;
}

/* Uitklapbaar blok */
.pt-details summary {
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  font-weight: 650;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
}

.pt-details summary::-webkit-details-marker { display: none; }
.pt-details summary::after { content: '⌄'; color: var(--text-faint); font-size: 1.2rem; line-height: 1; }
.pt-details[open] summary::after { content: '⌃'; }

/* ======================= TV-scherm ======================= */

.pt-tv {
  /* Een tv scrollt niet: alles moet binnen het scherm passen. */
  height: 100dvh;
  overflow: hidden;
  display: grid;
  /* Kop, inhoud, en onderaan de lichtkrant. Die laatste rij is nul hoog
     zolang er niets te melden valt. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(clamp(12px, 2.4vh, 32px) * var(--maat, 1));
  /* De rand staat apart zodat de lichtkrant hem kan opheffen en van hoek
     tot hoek kan lopen. */
  --tv-rand: calc(clamp(16px, 2.4vw, 44px) * var(--maat, 1));
  padding: var(--tv-rand);
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(30,215,96,.16), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(88,101,242,.14), transparent 60%),
    var(--bg);
}

.pt-tv__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }

/* De linkerkant (titel, koplopers) mag krimpen en de koplopers mogen
   omvallen; de kaart met de code blijft altijd rechts staan. Anders duwt een
   rij lange namen de kaart onder de titel en zakt de hele tv een verdieping. */
.pt-tv__head > div:first-child { flex: 1 1 0; min-width: 0; }
.pt-tv__join { flex: 0 0 auto; }
.pt-tv__title { font-size: calc(clamp(1.4rem, 2.6vw, 2.4rem) * var(--maat, 1)); font-weight: 800; letter-spacing: -.02em; }

.pt-tv__join {
  display: flex;
  align-items: center;
  gap: calc(clamp(12px, 1.5vw, 24px) * var(--maat, 1));
  padding: calc(clamp(10px, 1.2vw, 18px) * var(--maat, 1)) calc(clamp(14px, 1.6vw, 26px) * var(--maat, 1));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  /* Nooit breder dan de helft van de kop, anders drukt een lang eigen adres
     de kaart onder de titel en zakt de hele tv een verdieping. */
  max-width: min(52vw, 640px);
  min-width: 0;
}

.pt-tv__join > div:last-child { min-width: 0; }

.pt-tv__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(clamp(1.6rem, 3.4vw, 3rem) * var(--maat, 1));
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--brand);
  line-height: 1;
}

.pt-tv__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(clamp(16px, 2.6vw, 44px) * var(--maat, 1));
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

/* De hoes krimpt mee zodat titel en artiest altijd zichtbaar blijven. */
.pt-tv__now {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Groeit mee met de beschikbare hoogte, zodat de hoes ruimte krijgt. */
  flex: 1 1 auto;
}

@media (min-width: 900px) and (orientation: landscape) {
  .pt-tv__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.pt-tv__cover {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  background: var(--surface-2);
  align-self: center;
}

/* Een staand scherm (tablet rechtop): alles onder elkaar, en de plaat
   krijgt een vaste maat in plaats van de hele hoogte, anders rekt hij uit
   tot een ei en blijft de rest van het scherm leeg. */
@media (orientation: portrait) {
  .pt-tv__body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .pt-tv__now { flex: 0 0 auto; }
  .pt-tv__cover { flex: 0 0 auto; width: min(100%, 26vh); height: auto; }
}

/* YouTube: de speler op de tv. Neemt de plek van de plaat; de titel en de
   voortgang staan eronder zoals altijd. Zichtbaar, want dat eist YouTube. */
.pt-tv__video {
  position: relative;
  /* Het beeld houdt zijn verhouding en pakt de ruimte die er is: is de kolom
     laag, dan wordt hij smaller in plaats van platgedrukt. Eerst stond hier
     alleen een maximumhoogte, en dan werd het een brede streep. */
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  align-self: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-3);
}
.pt-tv__video > div:first-child,
.pt-tv__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Overvloeien: twee lagen over elkaar, de actieve is zichtbaar. De tijd zet
   het script erin, zodat hij gelijk loopt met het geluid. */
.pt-tv__laag { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.pt-tv__laag.is-actief { opacity: 1; }

/* Bij een YouTube-party krijgt het beeld de ruimte: de wachtrij ernaast mag
   smaller, en de plaat eronder is toch al verborgen. */
.pt-tv--video .pt-tv__body { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
/* Staat er beeld, dan mag de kop ook kleiner: de code blijft groot genoeg om
   te scannen, maar de kaart eromheen hoeft geen dertig procent van het scherm
   te pakken. Alles wat de kop niet gebruikt gaat naar de clip. */
.pt-tv--video .pt-tv__join { padding: calc(clamp(6px, .7vw, 12px) * var(--maat, 1)) calc(clamp(10px, 1vw, 18px) * var(--maat, 1)); }
.pt-tv--video .pt-tv__join > div:first-child svg { width: calc(clamp(84px, 8vw, 150px) * var(--maat, 1)); height: auto; }
.pt-tv--video .pt-tv__title { font-size: calc(clamp(1.1rem, 2vw, 1.9rem) * var(--maat, 1)); }
.pt-tv--video .pt-tv__dj-foto { width: calc(clamp(34px, 3vw, 54px) * var(--maat, 1)); height: calc(clamp(34px, 3vw, 54px) * var(--maat, 1)); }

/* Staat er beeld, dan houden we de regels eronder klein: elke pixel die de
   titel niet gebruikt, gaat naar de clip. */
.pt-tv--video #tv-now { gap: 2px; flex: 0 0 auto; }
.pt-tv--video .pt-tv__now-title { font-size: calc(clamp(1.2rem, 2.6vw, 2.6rem) * var(--maat, 1)); line-height: 1.1; }
.pt-tv--video .pt-tv__now-artist { font-size: calc(clamp(.9rem, 1.5vw, 1.5rem) * var(--maat, 1)); }
.pt-tv--video .pt-weetje { padding: 8px 12px; font-size: calc(clamp(.75rem, 1vw, 1rem) * var(--maat, 1)); }
.pt-tv--video .pt-tv__balk { margin-top: 6px; }

/* 'Speler zo groot mogelijk': de wachtrij gaat weg en het beeld vult alles
   wat er onder de kop over is. */
.pt-tv--videogroot .pt-tv__side { display: none; }
.pt-tv--videogroot .pt-tv__body { grid-template-columns: 1fr; }
.pt-tv--videogroot .pt-tv__video { width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; }
.pt-tv--videogroot #tv-now { gap: 2px; }
.pt-tv--videogroot .pt-tv__now-title { font-size: calc(clamp(1.1rem, 2.2vw, 2rem) * var(--maat, 1)); }
.pt-tv--videogroot .pt-tv__now-artist { font-size: calc(clamp(.9rem, 1.4vw, 1.3rem) * var(--maat, 1)); }
.pt-tv__video-wacht {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-4);
  background: rgba(0, 0, 0, .62);
}
.pt-tv__video-fout {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 3;
  max-width: 90%;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .75);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: calc(clamp(.85rem, 1.2vw, 1.1rem) * var(--maat, 1));
}
.pt-tv--video .pt-tv__now .pt-tv__cover,
.pt-tv--video .pt-tv__now .pt-tv__wachtplaat { display: none; }
.pt-tv--video #tv-now { flex: 0 0 auto; }
@media (orientation: portrait) {
  .pt-tv__video { flex: 0 0 auto; width: 100%; }
}

/* Eigen muziek: de mapkeuze boven de plaat. Klein zodra de map gekozen is. */
.pt-tv__map {
  flex: 0 0 auto;
  text-align: center;
  padding: calc(clamp(12px, 1.6vw, 24px) * var(--maat, 1));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: calc(clamp(10px, 1.4vh, 18px) * var(--maat, 1));
}
.pt-tv__map.is-klaar { padding: 6px 12px; background: transparent; border-color: transparent; }
/* In een mix of bij een blok is eigen muziek maar een van de bronnen: dan is
   de mapkeuze een regeltje onderin beeld, niet een kaart in het midden. */
/* De mapkeuze is er voor de DJ, niet voor de zaal. Hij blijft weg tot er
   iemand aan het scherm staat (muis of toets), en verdwijnt daarna weer. */
.pt-tv__map--klein {
  padding: 6px 12px; background: transparent; border-color: transparent;
  display: none;
}
.pt-tv__map--klein.is-zichtbaar { display: block; opacity: .8; }
.pt-tv__map--klein.is-zichtbaar:hover, .pt-tv__map--klein.is-zichtbaar:focus-within { opacity: 1; }
.pt-tv__map-regel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); }

/* Nog niets aan het draaien: een stilstaande plaat met ons label erop. */
.pt-tv__wacht { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.pt-tv__wachtplaat {
  width: min(34vh, 34vw, 320px);
  margin: 0 auto var(--s-4);
  transform: translateX(-6%);
}

.pt-tv__now-title {
  flex: 0 0 auto;
  font-size: calc(clamp(1.5rem, 3.4vw, 3.2rem) * var(--maat, 1));
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-top: calc(clamp(10px, 1.6vh, 24px) * var(--maat, 1));
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pt-tv__now-artist {
  flex: 0 0 auto;
  font-size: calc(clamp(1rem, 1.9vw, 1.7rem) * var(--maat, 1));
  color: var(--text-muted);
  margin-top: .25em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* De lijst mag afgekapt worden; de Hitster-vraag eronder nooit. */
.pt-tv__list {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 0; min-height: 0; overflow: hidden;
  /* Laat een afgekapte regel uitvloeien in plaats van hem doormidden te snijden. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
}
/* Compacte variant van een invoerveld, voor krappe rijen. */
.pt-input--sm {
  padding: 6px 10px;
  font-size: .9rem;
  min-height: 34px;
}

/* Jouw eigen cijfers, bovenaan het scorebord. */
.pt-mijncijfers {
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.pt-mijncijfers__kop {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

.pt-cijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.pt-cijfer {
  text-align: center;
  padding: var(--s-3) 6px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.pt-cijfer__getal {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.pt-cijfer__label {
  margin-top: 2px;
  font-size: .7rem;
  color: var(--text-muted);
  line-height: 1.25;
}

/* Antwoordknoppen bij een meerkeuzevraag. Elk vlak zijn eigen kleur en
   vorm, zodat je ze van een afstand uit elkaar houdt. */
.pt-keuzes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.pt-keuzes--twee { grid-template-columns: 1fr; }

.pt-keuze {
  display: flex;
  align-items: center;
  /* Krap gehouden: op een telefoon staan er twee naast elkaar, en een titel
     als 'Superstition' moet op een regel passen zonder afgebroken te worden. */
  gap: .4em;
  min-height: 60px;
  padding: var(--s-3) 10px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform .1s ease, filter .15s ease;
}

.pt-keuze:active:not(:disabled) { transform: scale(.97); }
.pt-keuze:disabled { cursor: default; }

.pt-keuze--0 { background: linear-gradient(160deg, #d94a4a, #a92f2f); }
.pt-keuze--1 { background: linear-gradient(160deg, #3a7bd5, #2a5aa0); }
.pt-keuze--2 { background: linear-gradient(160deg, #d9a13a, #a97a20); }
.pt-keuze--3 { background: linear-gradient(160deg, #3fae5a, #2b8040); }

.pt-keuze__vorm { font-size: .9em; line-height: 1; flex: 0 0 auto; opacity: .9; }
/* break-word in plaats van anywhere: een woord dat op zijn eigen regel past
   blijft heel. Met 'anywhere' werd 'Superstition' vrolijk 'Superstiti-on'. */
.pt-keuze__tekst {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.2;
}

@media (max-width: 420px) {
  .pt-keuze { font-size: .92rem; }
}

/* Jouw keuze krijgt een rand, zodat je hem terugvindt. */
.pt-keuze.is-gekozen { outline: 3px solid #fff; outline-offset: -3px; }

/* Na afloop: het goede antwoord blijft, de rest dooft. */
.pt-keuze.is-fout { filter: grayscale(.85) brightness(.6); }
.pt-keuze.is-goed { filter: none; box-shadow: 0 0 0 3px rgba(30, 215, 96, .8); }

/* Op tv alleen tonen, niet aanraken: groter en zonder knopgevoel. */
.pt-tv .pt-keuzes { gap: calc(clamp(8px, 1.2vw, 16px) * var(--maat, 1)); margin-top: calc(clamp(10px, 1.6vh, 20px) * var(--maat, 1)); }
.pt-tv .pt-keuze {
  min-height: calc(clamp(40px, 5vh, 70px) * var(--maat, 1));
  font-size: calc(clamp(.9rem, 1.3vw, 1.35rem) * var(--maat, 1));
  padding: calc(clamp(6px, .9vh, 12px) * var(--maat, 1)) calc(clamp(8px, .8vw, 14px) * var(--maat, 1));
}

/* Een titel als '4 Minutes (feat. Justin Timberlake & Timbaland)' mag hoogstens
   drie regels beslaan; anders duwt hij de hele kaart van het scherm. */
.pt-tv .pt-keuze__tekst {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lijsten die lang kunnen worden krijgen hun eigen schuifbalk, zodat de
   module niet eindeloos uitrekt. */
.pt-scrollvak {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* De superkrachten als kaarten: icoon, naam, uitleg en de schuif; wie aan
   staat licht groen op, wie uit staat is gedimd. De instellingen (geluid,
   tekst, gewicht) zitten in de kaart zelf. */
.pt-krachten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.pt-kracht {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.pt-kracht:not(.is-aan) { opacity: .7; }
.pt-kracht.is-aan { border-color: rgba(30, 215, 96, .5); background: linear-gradient(180deg, rgba(30, 215, 96, .08), transparent 60%), var(--surface-2); }
.pt-kracht__kop { border-bottom: 0; padding: 0; gap: var(--s-3); }
.pt-kracht__kop .pt-switch__label { flex: 1 1 auto; min-width: 0; }
.pt-kracht__icoon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  font-size: 1.5rem; line-height: 1;
}
.pt-kracht.is-aan .pt-kracht__icoon { background: rgba(30, 215, 96, .16); }
.pt-kracht__opties {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.pt-kracht__opties .pt-label { margin-top: var(--s-2); }

/* Een bestandskiezer die eruitziet als een knop. */
.pt-upload { cursor: pointer; display: inline-flex; align-items: center; }

/* Zolang de foto onderweg is: het voorbeeld dooft en er draait een molentje
   overheen, zodat duidelijk is dat er iets gebeurt. */
.pt-avatar-bezig { position: relative; display: inline-block; }
.pt-avatar-bezig > * { opacity: .35; filter: grayscale(1); }

.pt-avatar-bezig::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: pt-spin .7s linear infinite;
}

/* De balk onderin bij de gast: vijf onderdelen, altijd bereikbaar.
   De pagina was een lange rol geworden; zo hoef je nergens naartoe te
   scrollen om bij je krachten of het scorebord te komen. */
.pt-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  /* Flex en geen raster met een vast aantal kolommen: het bingotabblad komt
     erbij en gaat weer weg, en de rest schuift dan gewoon mee. */
  display: flex;
  background: rgba(11, 13, 15, .94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .35);
}

.pt-tabbar__knop {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 10px 2px;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
}

.pt-tabbar__knop[aria-current="true"] { color: var(--brand); }

/* Het quiztabblad heeft twee icoontjes in een svg, waarvan er een aanstaat.
   Het hidden-attribuut doet op svg-elementen niets uit zichzelf; vandaar. */
.pt-tabbar__icon g[hidden] { display: none; }

/* Wat 'hidden' heeft is weg, ook als het element zelf display: flex of grid
   heeft. Zonder dit wint die eigen regel van de browserstandaard en blijft
   bijvoorbeeld een uitgeschakelde schakelaar gewoon staan. */
[hidden] { display: none !important; }
.pt-tabbar__knop[aria-current="true"] .pt-tabbar__icon { transform: scale(1.12); stroke-width: 2.2; }

/* Getekende icoontjes zonder tekst: de vormen spreken voor zich en de balk
   blijft rustig. De naam staat in aria-label en title. */
.pt-tabbar__icon {
  width: 25px; height: 25px;
  transition: transform .15s ease;
}

.pt-tabbar__teller {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 5px;
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

/* Ruimte onder de inhoud, zodat de balk nooit iets afdekt. Het
   Hitster-paneel plakt daar net boven. */
.pt-page-vote .pt-bottom-space { height: calc(72px + env(safe-area-inset-bottom)); }
/* Meldingen boven de balk, anders dekken ze hem af. */
.pt-page-vote .pt-toasts { bottom: calc(68px + env(safe-area-inset-bottom)); }
/* Het quizpaneel hangt net boven de balk, nooit erachter.
   Bewust vast en niet plakkend: bij de uitslag staat er ook een podium in,
   en dan is het paneel hoger dan de ruimte eronder. Een plakkend blok kan
   dat niet vasthouden en schuift dan half achter de balk. Wordt het te
   hoog, dan krijgt het paneel zijn eigen schuifbalk. */
.pt-hitster-dok {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(54px + env(safe-area-inset-bottom));
  z-index: 60;
  max-height: calc(100dvh - 150px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-3);
}

/* Teller in de balk bovenaan: als een postvakje met een aantal erbij. */
.pt-krachtbel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 203, 71, .45);
  background: rgba(255, 203, 71, .14);
  color: #ffe6a8;
  font-weight: 800;
  cursor: pointer;
  animation: pt-krachtbel-pop .35s ease;
}
.pt-krachtbel.is-open { background: rgba(255, 203, 71, .3); }
.pt-krachtbel__bliksem { font-size: 1.05rem; line-height: 1; }
.pt-krachtbel__aantal {
  min-width: 1.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@keyframes pt-krachtbel-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Het moment dat je er een krijgt: even alles opzij. */
.pt-krachtlaag {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(6, 8, 10, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pt-fade-in .2s ease;
}

.pt-krachtmelding {
  width: min(24rem, 100%);
  text-align: center;
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 203, 71, .5);
  background: linear-gradient(180deg, rgba(255, 203, 71, .16), rgba(255, 203, 71, .05)), var(--surface);
  box-shadow: var(--shadow-3);
  animation: pt-krachtmelding-in .35s cubic-bezier(.2, .9, .3, 1.2);
}

.pt-krachtmelding__icon { font-size: 3.2rem; line-height: 1; }
.pt-krachtmelding__kop {
  margin-top: var(--s-3);
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
}
.pt-krachtmelding__naam {
  margin-top: 4px;
  font-size: 1.05rem; font-weight: 700; color: #ffe6a8;
}
.pt-krachtmelding__hint { margin-top: 6px; color: var(--text-muted); font-size: .92rem; }

@keyframes pt-krachtmelding-in {
  from { transform: translateY(14px) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes pt-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pt-krachtbel, .pt-krachtmelding, .pt-krachtlaag { animation: none; }
}

/* Superkrachten per soort, bij de gast. */
.pt-power__soort {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.pt-power__soort-kop { display: flex; align-items: flex-start; gap: var(--s-3); }
.pt-power__soort-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.pt-power__soort-naam { font-weight: 700; }

/* Wat een gast bezit, in de DJ-console. */
.pt-gastrij { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.pt-krachtjes { display: flex; gap: 3px; flex: 0 0 auto; }
.pt-krachtje {
  font-size: 1.05rem; line-height: 1;
  padding: 3px 5px;
  border-radius: var(--r-sm);
  background: rgba(255, 203, 71, .12);
  border: 1px solid rgba(255, 203, 71, .35);
}
.pt-krachtkeuze { flex: 1 1 auto; min-width: 0; }

/* ======================= De DJ-tafel =======================
   De bediening zat eerst in één hoge kolom rechts. Nu ligt hij als
   losse modules over de breedte, zoals de vlakken op een echte tafel. */

.pt-desk__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-top: var(--s-4);
}

.pt-led {
  width: 12px; height: 12px; border-radius: 50%;
  flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.pt-led--aan {
  background: var(--brand);
  border-color: transparent;
  box-shadow: 0 0 10px rgba(30,215,96,.75);
}

.pt-deck {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

@media (min-width: 1000px) {
  .pt-deck { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
}

/* Het paneelvlak: donker, met een lichte rand bovenaan alsof het licht
   erop valt. Gebruikt voor zowel het deck als de modules eronder. */
.pt-deck__panel,
.pt-module {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 42%), var(--surface);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.06);
  padding: var(--s-4);
  min-width: 0;
}

.pt-deck__panel { display: flex; flex-direction: column; gap: var(--s-3); }

.pt-deck__legend,
.pt-module__kop {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pt-deck__transport { justify-content: center; align-items: center; }
.pt-deck__transport .pt-transport { margin: auto 0; }
.pt-transport--deck { gap: var(--s-3); }

.pt-deck__device { display: flex; gap: var(--s-2); align-items: center; }
.pt-deck__device .pt-input { flex: 1 1 auto; min-width: 0; }

/* Volume als schuif met een grijpbare knop, niet als dun streepje. */
.pt-fader { margin-top: var(--s-2); }
.pt-fader__label {
  display: block;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 2px;
}

.pt-range--fader { -webkit-appearance: none; appearance: none; background: transparent; }
.pt-range--fader::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.pt-range--fader::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 30px; margin-top: -12px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f2f4f5, #b9c0c4);
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  cursor: grab;
}
.pt-range--fader::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.pt-range--fader::-moz-range-thumb {
  width: 20px; height: 30px; border-radius: 5px;
  background: linear-gradient(180deg, #f2f4f5, #b9c0c4);
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  cursor: grab;
}

/* ===========================================================================
   De knoppenbank onder in beeld

   Een DJ kijkt naar de draaitafel en de wachtrij; al het andere hoort onder
   handbereik maar niet in beeld. Alles zit daarom in een lade achter een
   balk die eruitziet als het front van een echt paneel: geborsteld metaal,
   een groef eronder en per knop een lampje dat aangaat als die lade openstaat.
   =========================================================================== */

:root { --djbar-h: 62px; }

.pt-djbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: rgba(14, 16, 19, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.pt-djbar__rek {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 720px;
  margin: 0 auto;
  padding: 6px var(--s-3);
}

.pt-djbar__knop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text-faint);
  font: inherit;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.pt-djbar__knop:hover { color: var(--text); }
.pt-djbar__knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pt-djbar__knop.is-aan { color: var(--brand); }

.pt-djbar__icoon {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Wie aan de deur staat: een rood rondje met het aantal, rechtsboven. */
.pt-djbar__knop { position: relative; }
.pt-djbar__teller {
  position: absolute;
  top: -5px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* De deur in het Deelnemers-paneel. */
.pt-deur {
  border: 1px solid rgba(255, 203, 71, .35);
  background: rgba(255, 203, 71, .06);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.pt-deur__rij { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.pt-deur__rij + .pt-deur__rij { border-top: 1px solid var(--line); }
.pt-gastrij.is-buiten .pt-avatar,
.pt-gastrij.is-buiten .pt-grow { opacity: .4; }

.pt-djbar__naam {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Het Meer-menu: een lijst met icoon, naam, een regel uitleg en een pijl. */
.pt-menu { display: flex; flex-direction: column; }
.pt-menu__groep {
  margin: var(--s-4) 0 var(--s-2);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.pt-menu__groep:first-child { margin-top: 0; }
.pt-menu__rij {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text); font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pt-menu__rij + .pt-menu__rij { margin-top: var(--s-2); }
a.pt-menu__rij, a.pt-menu__rij:visited { color: var(--text); text-decoration: none; }
.pt-menu__rij:hover { border-color: rgba(30, 215, 96, .5); background: var(--surface-3); }
.pt-menu__icoon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(30, 215, 96, .12);
}
.pt-menu__icoon svg { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pt-menu__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pt-menu__tekst strong { font-size: .95rem; }
.pt-menu__tekst span { font-size: .82rem; color: var(--text-muted); }
.pt-menu__pijl { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Teller op een rij in het menu: die staat gewoon in de rij, voor de pijl.
   De teller op de balk hangt in een hoekje en is daarom absoluut geplaatst;
   hier zou dat hem uit de rij trekken. */
/* Een origineel in de bloklijst: hij hoort bij de cover erboven, dus hij
   staat een stukje ingesprongen en wat rustiger. */
.pt-blok__clip--origineel { margin-left: var(--s-4); opacity: .85; }
.pt-blok__clip--origineel .pt-blok__pijlen { justify-content: center; color: var(--text-faint); font-size: 1.2rem; }

.pt-menu__teller {
  flex: 0 0 auto;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center;
}

.pt-lade__terug {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  display: grid; place-items: center;
}
.pt-lade__terug svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-lade__terug:hover { color: var(--text); }

/* ------------------------------------------------------------------ de lade */

.pt-lade {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--djbar-h);
  z-index: 78;
  max-height: min(60vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 90px), var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -18px 44px rgba(0,0,0,.6);
  animation: pt-lade-op .18s ease-out;
}

@keyframes pt-lade-op {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pt-lade__kop {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(20,23,25,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.pt-lade__titel {
  flex: 1 1 auto;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
}

.pt-lade__dicht {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.pt-lade__dicht:hover { color: var(--text); }

.pt-lade__vak {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-5);
}

/* In de lade is het paneel geen kaartje meer; de lade zelf is het vlak. */
.pt-lade .pt-module {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

/* De titel staat al in de kop van de lade. */
.pt-lade .pt-module > .pt-module__kop { display: none; }

/* Ruimte onder de pagina, zodat de laatste regel niet onder de balk valt. */
.pt-page-admin main { padding-bottom: calc(var(--djbar-h) + var(--s-5)); }

@media (max-width: 999px) {
  :root { --djbar-h: 62px; }

  /* De transportbalk schuift een etage omhoog en staat op de knoppenbank. */
  .pt-transport--docked { bottom: var(--djbar-h); }
  .pt-page-admin main { padding-bottom: calc(var(--djbar-h) + 96px); }

  .pt-lade { max-height: 74vh; }
  .pt-lade__vak { padding: var(--s-4) var(--s-3) var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .pt-lade { animation: none; }
}

.pt-module > .pt-field,
.pt-module > .pt-switch { margin-top: var(--s-3); }
.pt-module > .pt-module__kop + * { margin-top: var(--s-3); }

@media (max-width: 999px) {
  /* Op mobiel blijft de transportbalk onderaan het scherm plakken; het
     paneel eromheen moet dan geen leeg vlak achterlaten. */
  .pt-deck__transport {
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  .pt-deck__transport .pt-deck__legend,
  .pt-deck__transport .pt-transport__meta { display: none; }
}

/* Een deelnemer die iets niet meer mag. Niet doorstrepen: hij doet nog steeds
   mee, alleen niet met alles. Een gedempte naam zegt dat genoeg. */
.pt-gastrij.is-stil .pt-avatar,
.pt-gastrij.is-stil .pt-grow { opacity: .55; }

/* Wat een deelnemer mag: vijf schakelaartjes op een rij. Aan is de rustige
   toestand en dus onopvallend; uit is rood, want dat is wat je wilt zien als
   je de lijst langsloopt. */
.pt-rechten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-2);
}

.pt-recht {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.pt-recht:hover { border-color: var(--line-strong); color: var(--text); }
.pt-recht:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pt-recht__icoon { font-size: .85em; line-height: 1; }

.pt-recht.is-uit {
  border-color: rgba(255, 95, 109, .55);
  background: rgba(255, 95, 109, .12);
  color: var(--danger);
}

/* Doorgestreept: dan hoef je de kleur niet te kennen om het te zien. */
.pt-recht.is-uit .pt-recht__naam { text-decoration: line-through; }

/* Een gekleurde emoji blijft anders vrolijk staan naast een rood vakje. */
.pt-recht.is-uit .pt-recht__icoon { filter: grayscale(1) opacity(.6); }

/* Een aanmelding die al is afgehandeld blijft staan, maar hoeft niet meer op
   te vallen: je zoekt in die lijst naar wie nog wacht. */
.pt-aanmelding.is-af { opacity: .6; }
.pt-aanmelding.is-af:hover { opacity: 1; }

/* De stappen om een eigen Spotify-app aan te maken. */
.pt-stappen {
  margin: var(--s-3) 0 0;
  padding-left: 20px;
  color: var(--text);
}

.pt-stappen li { margin-bottom: var(--s-3); }
.pt-stappen ul { margin: var(--s-2) 0; padding-left: 18px; }
.pt-stappen ul li { margin-bottom: var(--s-1); }

/* Een adres dat letterlijk overgenomen moet worden, met een knop ernaast.
   Overtypen gaat een keer mis en dan is de foutmelding van Spotify niet te
   plaatsen. */
.pt-kopieerbaar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-2) 0 4px;
}

.pt-kopieerbaar code {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: .85rem;
  word-break: break-all;
}

/* Een inklapbaar blok binnen een paneel: geen eigen kaart, alleen een lijn
   erboven en een kopje dat je kunt openklappen. */
.pt-details--vlak {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

.pt-details--vlak > summary {
  padding: var(--s-3) 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

.pt-details--vlak > summary:hover { color: var(--text); }
.pt-details--vlak[open] > summary { color: var(--text); }

/* De handleiding: gewone leestekst met wat lucht, en kopjes die je van een
   afstand terugvindt. */
.pt-uitleg p, .pt-uitleg li, .pt-uitleg dd { line-height: 1.6; }
.pt-uitleg p { margin: var(--s-3) 0 0; }
.pt-uitleg h2 { margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.pt-uitleg h3.pt-uitleg__sub { margin: var(--s-5) 0 var(--s-2); font-size: 1rem; }
.pt-uitleg ul, .pt-uitleg ol { margin: var(--s-3) 0 0; padding-left: 22px; }
.pt-uitleg li { margin-bottom: var(--s-2); }
.pt-uitleg li ul { margin-top: var(--s-2); }
.pt-uitleg .pt-note { margin-top: var(--s-4); }
.pt-uitleg__stappen > li { margin-bottom: var(--s-4); }
.pt-uitleg__stappen strong { color: var(--text); }

.pt-uitleg__inhoud { display: flex; flex-direction: column; gap: 6px; }
.pt-uitleg__inhoud a { color: var(--text); text-decoration: none; }
.pt-uitleg__inhoud a:hover { color: var(--brand); }
.pt-uitleg__inhoud-sub { padding-left: 18px; color: var(--text-muted) !important; font-size: .9em; }

.pt-uitleg__vragen dt { margin-top: var(--s-4); font-weight: 700; }
.pt-uitleg__vragen dd { margin: var(--s-1) 0 0; color: var(--text-muted); }

/* Het eigen adres van een DJ op de tv, op de plek van de code. Iets kleiner
   dan de code, want het is langer, maar wel in dezelfde toon. */
.pt-tv__adres {
  font-size: calc(clamp(1rem, 1.9vw, 1.8rem) * var(--maat, 1));
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--brand);
  /* Afbreekpunten staan in de html (na punt en streepje); daarbuiten heel laten. */
  word-break: normal;
  overflow-wrap: normal;
}

/* ====================================================== Muziekbingo */

.pt-bingo {
  display: grid;
  gap: 6px;
  margin-top: var(--s-3);
}

.pt-bingo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-bingo--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Een vakje: vierkant, met titel en artiest erin. Klein lettertype, want er
   moeten er negen of zestien naast elkaar op een telefoon. */
.pt-bingo__vak {
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 5px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease;
  overflow: hidden;
}

.pt-bingo__vak:active:not(:disabled) { transform: scale(.95); }

.pt-bingo__titel {
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-bingo--4 .pt-bingo__titel { font-size: .62rem; -webkit-line-clamp: 2; }

.pt-bingo__artiest {
  font-size: .62rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-bingo--4 .pt-bingo__artiest { font-size: .55rem; }

/* Afgestreept: groen, met een vinkje eroverheen. */
.pt-bingo__vak.is-af {
  background: rgba(29, 185, 84, .22);
  border-color: var(--brand);
  color: var(--text);
  position: relative;
}

.pt-bingo__vak.is-af::after {
  content: '\2713';
  position: absolute;
  right: 4px; top: 2px;
  font-size: .9rem;
  color: var(--brand);
}

/* Geschrapt door een veto en niets om mee te vervangen. */
.pt-bingo__vak.is-dood {
  opacity: .35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* De bingo-roep over het hele scherm, op telefoon en tv. */
.pt-roep {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgba(8, 10, 12, .92);
  text-align: center;
  animation: pt-fade-in .25s ease both;
}
.pt-roep__vak { max-width: 560px; }
.pt-roep__icoon { font-size: clamp(3rem, 12vw, 6rem); line-height: 1; }
.pt-roep__kop { font-size: clamp(1.8rem, 7vw, 3.6rem); font-weight: 900; letter-spacing: -.02em; margin-top: var(--s-3); }
.pt-roep__naam { font-size: clamp(1.1rem, 4vw, 1.8rem); color: var(--text-muted); margin-top: var(--s-2); }
.pt-roep--ok .pt-roep__kop { color: var(--brand); }
/* Kaping: de tekst zelf is de kop, dus wat kleiner en met afbreken. */
.pt-roep--kaping .pt-kaping__tekst { font-size: calc(clamp(1.6rem, 4vw, 4rem) * var(--maat, 1)); line-height: 1.2; overflow-wrap: anywhere; }
.pt-tv__opdracht {
  margin-top: calc(clamp(8px, 1.2vh, 16px) * var(--maat, 1));
  font-size: calc(clamp(1rem, 1.6vw, 1.5rem) * var(--maat, 1));
  color: var(--brand);
  font-weight: 700;
}
.pt-roep--vals .pt-roep__kop { color: var(--down); }
.pt-roep--roep .pt-roep__icoon { animation: pt-roep-bel .6s ease-in-out infinite alternate; }
@keyframes pt-roep-bel { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.pt-roep--vals .pt-roep__icoon { animation: pt-roep-schud .5s ease both; }
.pt-roep--jury .pt-roep__icoon { animation: pt-roep-kijk 1.2s ease-in-out infinite; }
@keyframes pt-roep-kijk { 0%, 100% { transform: translateX(-8px) rotate(-4deg); } 50% { transform: translateX(8px) rotate(4deg); } }
.pt-roep__puntjes::after { content: ''; animation: pt-roep-puntjes 1.2s steps(4, end) infinite; }
@keyframes pt-roep-puntjes { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.pt-roep__balk {
  width: min(320px, 70vw);
  height: 8px;
  margin: var(--s-4) auto 0;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.pt-roep__balk-vul { height: 100%; width: 0; background: var(--amber); animation: pt-roep-vul linear forwards; }
@keyframes pt-roep-vul { from { width: 0; } to { width: 100%; } }
.pt-roep__beeld img {
  display: block;
  margin: 0 auto;
  max-width: min(90vw, 560px);
  max-height: 38vh;
  border-radius: 14px;
  object-fit: contain;
}
.pt-roep__straf {
  display: inline-block;
  margin-top: var(--s-4);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 203, 71, .16);
  border: 1px solid rgba(255, 203, 71, .5);
  color: var(--amber);
  font-weight: 700;
  font-size: clamp(1rem, 3.5vw, 1.4rem);
}
@keyframes pt-roep-schud {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* Dubbel of niets bij strafpunten. */
.pt-inzet {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--s-2);
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(255, 203, 71, .5);
  color: var(--amber);
  font-weight: 650;
  cursor: pointer;
}
.pt-inzet__vink { width: 20px; height: 20px; accent-color: var(--amber); }

/* Geheime DJ: de deelnemerslijst om uit te kiezen. De lijst scrollt in
   zichzelf; de knop Inzenden blijft eronder staan. */
.pt-spelers {
  max-height: min(42vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: var(--s-2);
}
.pt-speler {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 10px var(--s-3);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pt-speler:last-child { border-bottom: 0; }
.pt-speler__naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-speler__vink { color: var(--brand); font-weight: 800; opacity: 0; }
.pt-speler.is-gekozen { background: rgba(29, 185, 84, .14); }
.pt-speler.is-gekozen .pt-speler__vink { opacity: 1; }
.pt-spelerkeuze__voet { padding-top: var(--s-3); }

/* De onthulling: de inzender met foto en toelichting. */
.pt-onthulling {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: rgba(29, 185, 84, .1);
  border: 1px solid rgba(29, 185, 84, .35);
}

/* Op de tv: de deelnemers als rij gezichten, en de onthulling groot. */
.pt-tv__spelers { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: calc(clamp(8px, 1.2vh, 16px) * var(--maat, 1)); }
.pt-tv__speler {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: calc(clamp(.8rem, 1.2vw, 1.05rem) * var(--maat, 1));
}
.pt-tv__speler.is-klaar { border-color: var(--brand); background: rgba(29, 185, 84, .12); }
.pt-tv__speler.is-uit { opacity: .45; text-decoration: line-through; }
.pt-tv__gedraaid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.pt-tv__prijs {
  display: flex; align-items: center; gap: calc(clamp(10px, 1.4vw, 20px) * var(--maat, 1));
  margin-top: calc(clamp(8px, 1.2vh, 16px) * var(--maat, 1));
  padding: calc(clamp(8px, 1vh, 14px) * var(--maat, 1));
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 203, 71, .4);
  background: rgba(255, 203, 71, .08);
}
.pt-tv__prijs-foto { height: calc(clamp(48px, 9vh, 110px) * var(--maat, 1)); max-width: 40%; border-radius: 8px; object-fit: cover; }
.pt-onthulling--tv { margin-top: clamp(8px, 1.2vh, 16px); padding: clamp(10px, 1.4vh, 18px); gap: clamp(12px, 1.6vw, 24px); }

/* Geen stemmen (Geheime DJ): de pijltjes gaan weg, de lijst blijft. */
body.pt-geen-stemmen .pt-vote { display: none !important; }

/* Een verborgen nummer bij echte bingo: alleen een draaiende plaat. */
.pt-geheim__nu { display: flex; align-items: center; gap: var(--s-3); }
.pt-geheim__plaat { width: 72px; flex: 0 0 auto; }
.pt-bingo__knop { margin-top: var(--s-3); font-size: 1.15rem; font-weight: 900; letter-spacing: .06em; }
.pt-bingo--uit .pt-bingo__vak { opacity: .45; }

.pt-bingo__splash {
  text-align: center;
  padding: var(--s-3) 0 var(--s-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}

.pt-bingo__roep {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--amber);
  animation: pt-bingo-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes pt-bingo-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Op de tv: groot en midden in beeld, kort. */
.pt-tv .pt-bingo__splash {
  border: 0;
  padding: calc(clamp(10px, 2vh, 24px) * var(--maat, 1)) 0;
}

.pt-tv .pt-bingo__roep { font-size: calc(clamp(2.4rem, 6vw, 5.5rem) * var(--maat, 1)); }

/* De knop om geluid op de tv aan te zetten: groot genoeg om met een muis of
   afstandsbediening te raken, en weg zodra erop geklikt is. */
.pt-tv__geluid {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(60px, 10vh, 120px) * var(--maat, 1));
  transform: translateX(-50%);
  z-index: 50;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(29, 185, 84, .6);
  background: rgba(29, 185, 84, .18);
  color: var(--text);
  font: inherit;
  font-size: calc(clamp(1rem, 1.6vw, 1.5rem) * var(--maat, 1));
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

/* Het blok kan vanzelf beginnen; deze knop is alleen nog een vangnet voor een
   browser die geen geluid toelaat. Klein in de hoek tot hij echt nodig is. */
.pt-tv__geluid--klein {
  left: auto;
  right: calc(clamp(16px, 2vw, 32px) * var(--maat, 1));
  bottom: calc(clamp(16px, 2.5vh, 32px) * var(--maat, 1));
  transform: none;
  padding: 7px 14px;
  font-size: calc(clamp(.8rem, .9vw, 1rem) * var(--maat, 1));
  font-weight: 600;
  opacity: .7;
  box-shadow: none;
}
.pt-tv__geluid--klein:hover, .pt-tv__geluid--klein:focus-visible { opacity: 1; }
/* De andere hoek, zodat twee kleine knoppen elkaar niet in de weg zitten. */
.pt-tv__geluid--links { right: auto; left: calc(clamp(16px, 2vw, 32px) * var(--maat, 1)); }
/* Zolang er nog niet op geklikt is, ademt hij rustig: anders zie je hem niet
   staan in een donkere zaal. Na de klik is hij weg. */
.pt-tv__geluid--wenkt { animation: pt-wenk 2.6s ease-in-out infinite; }
@keyframes pt-wenk {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; box-shadow: 0 0 0 4px rgba(29, 185, 84, .18); }
}
@media (prefers-reduced-motion: reduce) { .pt-tv__geluid--wenkt { animation: none; opacity: .9; } }

/* Bronvermelding bij Spotify-content: waar titels, artiesten en hoezen staan,
   hoort te staan waar ze vandaan komen. Ingetogen, maar wel leesbaar en
   aanklikbaar. Het merkteken houdt zijn eigen kleur. */
.pt-bron {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: .78rem;
  text-decoration: none;
}

.pt-bron:hover { color: var(--text); }
.pt-bron__merk { flex: 0 0 auto; }

/* De weg terug naar het nummer op Spotify, bij wat er nu draait. */
.pt-now__spotify {
  display: inline-block;
  margin-top: 4px;
  color: var(--brand);
  font-size: .78rem;
  text-decoration: none;
}

.pt-now__spotify:hover { text-decoration: underline; }

/* Op de tv leest niemand kleine letters, maar hij moet er wel staan. */
.pt-bron--tv {
  margin-top: clamp(6px, 1vh, 12px);
  font-size: clamp(.7rem, .85vw, .95rem);
}

.pt-bron--tv .pt-bron__merk { width: 16px; height: 16px; }

/* De melding dat een party op slot staat. Amber en niet rood: er is niets
   stuk, er moet alleen iets geregeld worden.

   Niet pt-slot noemen: die naam is al van de vakjes op de quiztijdlijn, en
   dat vocht om dezelfde regels. */
.pt-vergrendeld {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 203, 71, .45);
  background: rgba(255, 203, 71, .10);
}

.pt-vergrendeld > div { flex: 1 1 260px; min-width: 0; }

.pt-vergrendeld__kop { color: var(--amber); }

/* De vraag die bij het antwoord in beeld blijft. Bewust bescheiden: het
   antwoord is de kop, de vraag geeft er alleen de context bij. Hij mag ook
   nooit meer dan twee regels worden, want op de tv gaat elke extra regel af
   van de ruimte voor de wachtrij. */
.pt-vraagterug {
  margin-bottom: var(--s-2);
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Op de telefoon staat het kruisje om de kaart weg te klikken rechtsboven;
   een lange vraag mag daar niet onderdoor lopen. */
.pt-hitster-dok .pt-vraagterug { padding-right: 34px; }

.pt-tv .pt-vraagterug {
  margin-bottom: calc(clamp(4px, .8vh, 10px) * var(--maat, 1));
  font-size: calc(clamp(.9rem, 1.4vw, 1.5rem) * var(--maat, 1));
}

/* Weetje bij het nummer, onder de titel op de tv. */
.pt-weetje {
  margin-top: clamp(10px, 1.6vh, 20px);
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.2vw, 18px);
  border-left: 3px solid var(--brand);
  background: rgba(255, 255, 255, .04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: clamp(.85rem, 1.25vw, 1.15rem);
  line-height: 1.4;
  color: var(--text);
  /* Hoeveel regels erin passen rekent tv.js uit; drie was een gok en liep bij
     een lange titel onder de onderrand door. Dit is de terugval voor het geval
     javascript er nog niet aan toe is. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-weetje__kop {
  display: block;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 2px;
}

.pt-weetje__bron {
  font-size: .78em;
  color: var(--text-muted);
  margin-left: .5em;
}

/* De lichtkrant onderaan de tv. Twee keer dezelfde inhoud achter elkaar,
   zodat het schuiven naadloos rond kan lopen. */
.pt-ticker {
  overflow: hidden;
  /* Buiten de rand van de tv om: een lichtkrant hoort van hoek tot hoek te
     lopen, niet als een regeltje binnen de marge te blijven staan. */
  margin: 0 calc(-1 * var(--tv-rand)) calc(-1 * var(--tv-rand));
  padding: clamp(8px, 1.2vh, 16px) 0;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .38);
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}

.pt-ticker__spoor {
  display: flex;
  white-space: nowrap;
  /* Zo breed als de inhoud, niet als het scherm: de animatie schuift -50%,
     en dat moet precies een van de twee blokken zijn. Anders sluit de
     herhaling niet aan en verspringt de regel. */
  width: max-content;
  will-change: transform;
  /* Duur staat hier expliciet: de verkorte schrijfwijze zet hem anders op 0s,
     en dan is een ronde meteen 'voorbij' voordat javascript de echte duur
     heeft berekend. De tv zet hem daarna op maat. */
  animation: pt-ticker-loop 40s linear infinite;
}

.pt-ticker__blok { display: flex; flex: 0 0 auto; }

/* Lege ruimte achter de reeks, zodat de balk gevuld blijft zonder dat een
   bericht twee keer in beeld staat. */
.pt-ticker__ruimte { flex: 0 0 auto; }

.pt-ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  padding: 0 clamp(18px, 2.4vw, 40px);
  font-size: clamp(1rem, 1.7vw, 1.7rem);
  line-height: 1.3;
}

.pt-ticker__naam { color: var(--brand); font-weight: 800; }
.pt-ticker__tekst { color: var(--text); }

/* Een draaiend plaatje tussen twee berichten, in plaats van een streepje.
   Alles met verlopen: dat is een element per scheiding in plaats van vijf,
   en er staan er zomaar tachtig in de balk.

   De glans is een kegelverloop en dus niet rondsymmetrisch; zonder dat zou
   je van het draaien niets zien. */
.pt-ticker__plaat {
  flex: 0 0 auto;
  align-self: center;
  width: clamp(16px, 1.5vw, 26px);
  height: clamp(16px, 1.5vw, 26px);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--brand) 0 16%, transparent 17%),
    conic-gradient(from 0deg,
      rgba(255,255,255,.18) 0 9%,
      transparent 9% 46%,
      rgba(255,255,255,.11) 46% 55%,
      transparent 55%),
    repeating-radial-gradient(circle, #2c2f32 0 2px, #16181a 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  animation: pt-spin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pt-ticker__plaat { animation: none; }
}

@keyframes pt-ticker-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pt-ticker__spoor { animation: none; }
}

/* Berichtje sturen, bij de gast. */
.pt-zeg { display: flex; flex-direction: column; gap: var(--s-2); }
.pt-zeg .pt-input { min-width: 0; }
.pt-zeg__veld { resize: vertical; min-height: 84px; line-height: 1.4; font-size: 1.05rem; }
#zeg-teller.is-vol { color: var(--amber); }

/* Berichtenbeheer in de console. */
.pt-bericht {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.pt-bericht--weg { opacity: .45; }
.pt-bericht__wie { font-weight: 700; font-size: .85rem; }
.pt-bericht__tekst { font-size: .9rem; overflow-wrap: anywhere; }

/* Tussenstand tussen twee sets: podium plus de superkracht. */
.pt-tussen { text-align: center; }

.pt-tussen__kop {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em;
}
.pt-tussen__trofee { font-size: 1.4em; }

.pt-tussen__podium {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(10px, 3vw, 28px);
  margin-top: var(--s-4);
}

.pt-tussen__speler { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pt-tussen__plek { font-size: 1.5em; line-height: 1; }
.pt-tussen__avatar { width: 54px; height: 54px; }
.pt-tussen__naam {
  font-weight: 700; font-size: .95rem; max-width: 8em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-tussen__score { font-size: .8rem; color: var(--text-muted); }

.pt-tussen__kracht {
  display: inline-flex; align-items: center; gap: .55em;
  margin-top: var(--s-4);
  padding: .5em .95em;
  border-radius: 999px;
  background: rgba(255, 203, 71, .12);
  border: 1px solid rgba(255, 203, 71, .4);
  color: #ffe6a8;
  font-weight: 700;
}
.pt-tussen__bliksem { font-size: 1.2em; }
.pt-tussen__kracht-avatar { width: 26px; height: 26px; }

.pt-tussen__voet { margin-top: var(--s-4); font-size: .85rem; color: var(--text-muted); }

.pt-tussen__balk {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); margin-top: 6px;
}
.pt-tussen__balk-vul {
  height: 100%; width: 100%; background: var(--brand);
  animation-name: pt-tussen-krimp;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes pt-tussen-krimp { from { width: 100%; } to { width: 0%; } }

/* Op tv mag het allemaal wat groter. */
.pt-tussen--groot .pt-tussen__kop { font-size: clamp(1.4rem, 2.6vw, 2.4rem); }
.pt-tussen--groot .pt-tussen__avatar { width: clamp(64px, 7vw, 108px); height: clamp(64px, 7vw, 108px); }
.pt-tussen--groot .pt-tussen__naam { font-size: clamp(1rem, 1.6vw, 1.5rem); max-width: 10em; }
.pt-tussen--groot .pt-tussen__score { font-size: clamp(.85rem, 1.2vw, 1.15rem); }
.pt-tussen--groot .pt-tussen__kracht { font-size: clamp(1rem, 1.6vw, 1.5rem); }
.pt-tussen--groot .pt-tussen__kracht-avatar { width: clamp(30px, 2.6vw, 44px); height: clamp(30px, 2.6vw, 44px); }
.pt-tussen--groot .pt-tussen__voet { font-size: clamp(.9rem, 1.3vw, 1.2rem); }

@media (prefers-reduced-motion: reduce) {
  .pt-tussen__balk-vul { animation: none; width: 100%; }
}

/* Aftelklok bij een stilgevallen party. */
.pt-idle {
  margin-top: .9em;
  padding: .55em .9em;
  border-radius: var(--r-md);
  background: rgba(255, 203, 71, .1);
  border: 1px solid rgba(255, 203, 71, .4);
  color: #ffe6a8;
  font-size: .95em;
  font-weight: 600;
  line-height: 1.35;
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}

/* Blijft er nauwelijks hoogte over, dan liever smalle regels dan geen
   regels: hoes kleiner, artiest weg, minder lucht eromheen. */
.pt-tv__list--compact .pt-tv__item {
  grid-template-columns: auto calc(clamp(28px, 2.2vw, 38px) * var(--maat, 1)) minmax(0, 1fr) auto;
  gap: calc(clamp(6px, .8vw, 12px) * var(--maat, 1));
  padding: calc(clamp(3px, .4vh, 6px) * var(--maat, 1)) 0;
  font-size: calc(clamp(.85rem, 1.2vw, 1.15rem) * var(--maat, 1));
}
.pt-tv__list--compact .pt-tv__a { display: none; }

/* Staat er een samenvattingsregel, dan mag die niet zelf wegvagen. */
.pt-tv__list--meer {
  -webkit-mask-image: none;
  mask-image: none;
}

.pt-tv__meer {
  list-style: none;
  padding: calc(clamp(6px, .8vh, 10px) * var(--maat, 1)) 0 0;
  font-size: calc(clamp(.9rem, 1.3vw, 1.15rem) * var(--maat, 1));
  font-weight: 600;
  color: var(--text-muted);
}

.pt-tv__side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pt-tv__side > h2 { flex: 0 0 auto; }
/* De vraagkaart mag krimpen als het moet; wat niet past wordt afgesneden en
   dat is op een tv niet terug te scrollen. De wachtlijst erboven geeft eerst
   ruimte op, daarna pas deze. */
#tv-hitster { flex: 0 1 auto; min-height: 0; overflow: hidden; }

.pt-tv__item {
  display: grid;
  grid-template-columns: auto calc(clamp(48px, 4vw, 68px) * var(--maat, 1)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(clamp(10px, 1.2vw, 20px) * var(--maat, 1));
  padding: calc(clamp(8px, 1vh, 14px) * var(--maat, 1)) 0;
  border-bottom: 1px solid var(--line);
  font-size: calc(clamp(1rem, 1.6vw, 1.5rem) * var(--maat, 1));
}

.pt-tv__item img { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.pt-tv__item .pt-tv__t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tv__item .pt-tv__a { color: var(--text-muted); font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tv__votes { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand); }

.pt-tv__rank {
  display: grid; place-items: center;
  width: calc(clamp(30px, 2.6vw, 44px) * var(--maat, 1)); height: calc(clamp(30px, 2.6vw, 44px) * var(--maat, 1));
  border-radius: 50%;
  background: var(--surface-2);
  font-size: .72em; font-weight: 800; color: var(--text-muted);
}

.pt-tv__rank--1 { background: var(--amber); color: #2a1d00; }

/* Aan de deur: de rest van de pagina blijft dicht tot de DJ je binnenlaat. */
body.pt-buiten .pt-tab,
body.pt-buiten .pt-tabbar,
body.pt-buiten #hitster,
body.pt-buiten .pt-krachtbel { display: none !important; }

.pt-deur__wacht {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--brand);
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 6px;
  animation: pt-spin-disc 1s linear infinite;
}

/* ======================= Draaitafel ======================= */

/* De plaat op de voorpagina: het beeldmerk als label, draait vanzelf. Iets
   naar links, zodat de arm die rechts uitsteekt het geheel niet scheef trekt. */
.pt-home-plaat {
  width: min(58vw, 230px);
  margin: var(--s-5) auto 0;
  transform: translateX(-6%);
}
/* Het label mag hier wat groter: het is het beeldmerk, niet een hoes. */
.pt-home-plaat .pt-vinyl__label { width: 46%; height: 46%; }

.pt-vinyl {
  position: relative;
  aspect-ratio: 1 / 1;
  background: none;
  box-shadow: none;
  border-radius: 50%;
}

/* De plaat zelf.
   Drie lagen over elkaar: de fijne groeven, een paar bredere scheidingen
   tussen de nummers, en een gladde rand aan de buitenkant met een gladde ring
   rond het label. Een enkele streeppatroon leest als stof; echt vinyl heeft
   juist die overgangen. */
.pt-vinyl__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Gladde buitenrand en de vlakke ring rond het label. */
    radial-gradient(circle at 50% 50%,
      transparent 0 36%,
      rgba(0,0,0,.55) 36% 37.5%,
      transparent 37.5% 95%,
      rgba(255,255,255,.05) 95% 96%,
      transparent 96%),
    /* Bredere scheidingen: waar het ene nummer overgaat in het volgende. */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 26px),
    /* De groeven zelf: fijn en met weinig contrast, anders wordt het corduroy. */
    repeating-radial-gradient(circle at 50% 50%,
      #101013 0 1px,
      #191920 1px 2.2px),
    #0b0b0d;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .55),
    /* Dikke rand: de zijkant van de plaat vangt licht. */
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 0 22px rgba(0, 0, 0, .8);
  animation: pt-spin-disc 3.4s linear infinite;
}

/* Glans over de plaat, staat stil terwijl de plaat draait.
   Twee tegenoverliggende vegen in plaats van een egale ring: zo ziet vinyl
   eruit onder een lamp, en je ziet er ook de draaiing beter door. */
.pt-vinyl::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 200deg,
      rgba(255,255,255,.13), rgba(255,255,255,0) 14%,
      rgba(255,255,255,0) 36%, rgba(255,255,255,.07) 50%,
      rgba(255,255,255,0) 64%, rgba(255,255,255,0) 86%,
      rgba(255,255,255,.13)),
    /* Licht van linksboven op de bolling van de plaat. */
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.07), transparent 55%);
}

.pt-vinyl[data-paused="true"] .pt-vinyl__disc { animation-play-state: paused; }

.pt-vinyl__label {
  position: absolute;
  left: 50%; top: 50%;
  width: 38%; height: 38%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .7),
    0 0 14px rgba(0, 0, 0, .5),
    /* Het papieren label ligt iets verzonken in het vinyl. */
    inset 0 0 10px rgba(0, 0, 0, .35);
}

.pt-vinyl__hole {
  position: absolute;
  left: 50%; top: 50%;
  width: 3.4%; height: 3.4%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--bg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    inset 0 2px 3px rgba(0, 0, 0, .9);
}

@keyframes pt-spin-disc { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- de toonarm

   Draaipunt rechtsboven buiten de plaat, naald op de groef. De arm bestaat
   uit een buis, een draaipunt met tegengewicht, een kop die schuin staat en
   een naald die de plaat raakt. */
.pt-vinyl__arm {
  position: absolute;
  /* Draaipunt rechts, ongeveer op de hoogte van het midden - zoals bij een
     echte pick-up. De naald staat daardoor tussen 1 en 3 uur op de plaat. */
  top: 44%;
  right: -14%;
  width: 48%;
  height: 2.4%;
  min-height: 5px;
  transform-origin: 96% center;
  /* Negatief kantelt de arm naar beneden, de plaat op. De hoek loopt mee met
     de voortgang: hoe verder in het nummer, hoe dichter bij het midden. */
  transform: rotate(var(--arm-angle, 42deg));
  transition: transform 1.1s linear;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .6));
}

/* De buis. Rond gepolijst metaal: fel randje bovenaan, donkere onderkant,
   en naar de kop toe iets smaller. */
.pt-vinyl__arm-bar {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg,
    #f4f7fa 0%, #dfe5ea 16%, #b3bbc3 44%, #7c848c 74%, #4e555c 100%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35);
}

.pt-vinyl__arm::before {           /* draaipunt met tegengewicht */
  content: '';
  position: absolute;
  right: -16%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #79828c 0 18%, #3a4046 62%, #1b1f23 100%);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .65),
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    inset 0 -2px 4px rgba(0, 0, 0, .6);
}

/* Het ronde blokje op het draaipunt: de as waar de arm omheen draait. */
.pt-vinyl__arm::after {
  content: '';
  position: absolute;
  right: -2%;
  top: 50%;
  width: 11%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfd6dd, #6d757d 70%, #3b4147);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* De kop staat altijd schuin op de arm; dat is precies wat een pick-up
   herkenbaar maakt. Smal en langwerpig, niet vierkant: een blokje leest als
   een blokje en niet als een houder waar een element in zit. */
.pt-vinyl__arm-kop {
  position: absolute;
  /* Breedte telt van de armlengte, hoogte van de armdikte: vandaar de
     ogenschijnlijk vreemde verhouding. Uitgerekend wordt het een smal,
     langwerpig kopje. */
  left: -5%;
  top: 50%;
  width: 4.5%;
  height: 260%;
  transform: translateY(-34%) rotate(-22deg);
  transform-origin: 60% 20%;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(150deg, #f4f7fa 0%, #cfd6dd 45%, #8b939b 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255,255,255,.45);
}

/* Het element: het zwarte blokje onder de kop waar de naald in zit. Steekt
   bewust aan weerszijden een beetje uit, zoals een echte cartridge. */
.pt-vinyl__arm-element {
  position: absolute;
  left: -22%;
  bottom: -34%;
  width: 144%;
  height: 40%;
  border-radius: 1px;
  background: linear-gradient(180deg, #3a4046 0 38%, #191d21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 4px rgba(0, 0, 0, .6);
}

/* De naald: een haartje dat de groef raakt, met een lichtpuntje op het
   contact. Zonder dat puntje zweeft de arm boven de plaat. */
.pt-vinyl__arm-naald {
  position: absolute;
  left: 42%;
  bottom: -58%;
  width: 16%;
  min-width: 1px;
  height: 26%;
  background: linear-gradient(180deg, #eef2f6, #8d959d);
}

.pt-vinyl__arm-naald::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
}

/* Op kleine formaten (DJ-console) laten we de arm weg. */
.pt-vinyl--small .pt-vinyl__arm { display: none; }
.pt-vinyl--small .pt-vinyl__label { width: 42%; height: 42%; }

/* Plaatwissel: de oude plaat schuift van de draaitafel, de nieuwe zakt erop. */
.pt-vinyl--out {
  animation: pt-vinyl-out .42s cubic-bezier(.4, 0, .8, .4) forwards;
  pointer-events: none;
}

.pt-vinyl--in {
  animation: pt-vinyl-in .62s cubic-bezier(.2, .8, .3, 1) both;
}

/* Tijdens de wissel vervaagt de arm even; de hoek zelf blijft van de
   voortgang, anders bleef hij na een trackwissel op één plek hangen. */
.pt-vinyl--out .pt-vinyl__arm { opacity: .35; transition: opacity .3s ease; }

@keyframes pt-vinyl-out {
  from { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
  to   { transform: translate(16%, 16%) scale(.8) rotate(-9deg); opacity: 0; }
}

@keyframes pt-vinyl-in {
  from { transform: translate(-12%, -24%) scale(.85) rotate(7deg); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
}

/* De titel komt mee met de nieuwe plaat. */
.pt-fade-in { animation: pt-fade-in .5s ease .12s both; }

@keyframes pt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Het nummer dat als volgende klaarstaat, springt eruit. */
.pt-track--next {
  background: linear-gradient(90deg, rgba(30, 215, 96, .10), rgba(30, 215, 96, 0) 55%);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Stemknoppen die op slot zitten. */
.pt-vote--locked {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-faint);
}

.pt-vote--locked svg { width: 16px; height: 16px; }

/* ======================= Profiel en scorebord ======================= */

.pt-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 750;
  color: var(--text-muted);
  overflow: hidden;
}

.pt-avatar--lg { width: 56px; height: 56px; font-size: 1rem; }
.pt-avatar--xl { width: clamp(64px, 9vh, 110px); height: clamp(64px, 9vh, 110px); font-size: 1.6rem; }
.pt-avatar--sm { width: 26px; height: 26px; font-size: .65rem; }

.pt-profile-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.pt-profile-bar:hover { background: var(--surface-2); }

/* Een flexrij en geen raster: de naam moet alle ruimte krijgen die overblijft,
   en met vaste kolommen kreeg de puntenkolom er veel te veel. */
.pt-score {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--line);
}

.pt-score > .pt-rank { flex: 0 0 26px; }
.pt-score > .pt-avatar { flex: 0 0 auto; }
.pt-score > .pt-grow { flex: 1 1 auto; min-width: 0; }
/* De punten nemen alleen de ruimte die ze nodig hebben. */
.pt-score > :last-child { flex: 0 0 auto; }

.pt-score:last-child { border-bottom: 0; }
.pt-score--me { background: rgba(255, 203, 71, .10); box-shadow: inset 3px 0 0 var(--amber); }
.pt-score__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pt-score__pts { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand); }

/* ======================= Uitslagmoment ======================= */

.pt-moment {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-4) 0 var(--s-2);
  text-align: center;
}

.pt-moment__icon { font-size: 2.6rem; line-height: 1; }
.pt-moment__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.pt-moment__sub { color: var(--text-muted); font-size: .9rem; }

.pt-moment--good .pt-moment__icon { animation: pt-cheer .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.pt-moment--good .pt-moment__title { color: var(--brand); }

.pt-moment--bad .pt-moment__icon { animation: pt-shake .55s ease both; }
.pt-moment--bad .pt-moment__title { color: var(--amber); }

@keyframes pt-cheer {
  0%   { transform: scale(.4) rotate(-18deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes pt-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-7px) rotate(-7deg); }
  45% { transform: translateX(6px) rotate(6deg); }
  70% { transform: translateX(-4px) rotate(-4deg); }
}

/* Confetti: losse deeltjes, geen bibliotheek. */
.pt-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  overflow: hidden;
}

.pt-confetti i {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: pt-fall var(--dur, 1.8s) linear var(--delay, 0s) forwards;
}

@keyframes pt-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(105vh) rotate(720deg); }
}

/* ======================= Koploper op tv ======================= */

.pt-tv__leaders {
  display: flex;
  align-items: center;
  gap: calc(clamp(10px, 1.4vw, 20px) * var(--maat, 1));
  flex-wrap: wrap;
  margin-top: calc(clamp(8px, 1.2vh, 16px) * var(--maat, 1));
  font-size: calc(clamp(.85rem, 1.3vw, 1.15rem) * var(--maat, 1));
}

.pt-tv__leader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  max-width: 100%;
}

/* Een lange naam wordt afgekapt; de score blijft altijd leesbaar. */
.pt-tv__leader > span {
  max-width: 14ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-tv__leader--1 { border-color: var(--amber); background: rgba(255, 203, 71, .12); }
.pt-tv__leader b { font-variant-numeric: tabular-nums; color: var(--brand); }

/* ======================= Aftelklokje ======================= */

.pt-ring {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  transform: rotate(-90deg);   /* begin bovenaan */
}

.pt-ring__track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 9;
}

.pt-ring__bar {
  fill: none;
  stroke: var(--brand);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .16s linear, stroke .4s ease;
}

.pt-ring--warn   .pt-ring__bar { stroke: var(--amber); }
.pt-ring--danger .pt-ring__bar { stroke: var(--down); }

.pt-ring__label {
  fill: var(--text);
  font-size: 34px;
  font-weight: 800;
  font-family: var(--font);
  transform: rotate(90deg);    /* tekst weer rechtop */
  transform-origin: 50px 50px;
}

.pt-ring--warn   .pt-ring__label { fill: var(--amber); }
.pt-ring--danger .pt-ring__label { fill: var(--down); }

/* De laatste seconden tikt het klokje mee. */
.pt-ring--danger .pt-ring__label { animation: pt-tick 1s ease-in-out infinite; }

@keyframes pt-tick {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Tijd om: trillen als een wekker, met een flits over het hele paneel. */
.pt-ring--alarm { animation: pt-alarm 1.1s ease-in-out; }

.pt-alarm-flash {
  animation: pt-alarm-flash 1.1s ease-in-out;
}

@keyframes pt-alarm-flash {
  0%, 100% { border-color: var(--line-strong); box-shadow: var(--shadow-3); }
  15%, 45% {
    border-color: var(--down);
    box-shadow: 0 0 0 3px rgba(244, 83, 107, .25), var(--shadow-3);
  }
  30%, 60% { border-color: var(--line-strong); box-shadow: var(--shadow-3); }
}

@keyframes pt-alarm {
  0%, 100% { transform: rotate(-90deg) scale(1); }
  8%  { transform: rotate(-78deg) scale(1.14); }
  16% { transform: rotate(-102deg) scale(1.14); }
  24% { transform: rotate(-80deg) scale(1.11); }
  32% { transform: rotate(-100deg) scale(1.11); }
  40% { transform: rotate(-82deg) scale(1.08); }
  48% { transform: rotate(-98deg) scale(1.08); }
  56% { transform: rotate(-85deg) scale(1.05); }
  64% { transform: rotate(-95deg) scale(1.05); }
  74% { transform: rotate(-88deg) scale(1.02); }
  84% { transform: rotate(-92deg) scale(1.02); }
}

/* ======================= Podium ======================= */

.pt-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2) 0;
}

.pt-podium__spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 0;
  min-width: 0;
  max-width: 140px;
}

.pt-podium__who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.pt-podium__name {
  font-size: .82rem;
  font-weight: 650;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-podium__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
}

.pt-podium__rank { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.pt-podium__score { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Hoogte en kleur per plek: goud, zilver, brons. */
.pt-podium__spot--1 .pt-podium__block {
  height: 92px;
  background: linear-gradient(180deg, rgba(255,203,71,.30), rgba(255,203,71,.10));
  border-color: var(--amber);
}
.pt-podium__spot--1 .pt-podium__rank { color: var(--amber); }
.pt-podium__spot--1 .pt-avatar { box-shadow: 0 0 0 3px var(--amber); }

.pt-podium__spot--2 .pt-podium__block {
  height: 68px;
  background: linear-gradient(180deg, rgba(206,214,222,.24), rgba(206,214,222,.08));
  border-color: #ced6de;
}
.pt-podium__spot--2 .pt-podium__rank { color: #ced6de; }
.pt-podium__spot--2 .pt-avatar { box-shadow: 0 0 0 3px #ced6de; }

.pt-podium__spot--3 .pt-podium__block {
  height: 50px;
  background: linear-gradient(180deg, rgba(205,127,80,.26), rgba(205,127,80,.08));
  border-color: #cd7f50;
}
.pt-podium__spot--3 .pt-podium__rank { color: #cd7f50; }
.pt-podium__spot--3 .pt-avatar { box-shadow: 0 0 0 3px #cd7f50; }

/* Op tv schaalt het podium mee met de schermhoogte: groot op een echte tv,
   maar het moet ook op een kort venster binnen beeld blijven. */
.pt-tv .pt-podium { padding-top: var(--s-2); }
.pt-tv .pt-podium__spot { max-width: 190px; }
.pt-tv .pt-podium__name { font-size: calc(clamp(.75rem, 1.2vw, 1.1rem) * var(--maat, 1)); }
.pt-tv .pt-avatar--lg { width: calc(clamp(32px, 5vh, 56px) * var(--maat, 1)); height: calc(clamp(32px, 5vh, 56px) * var(--maat, 1)); }
.pt-tv .pt-podium__rank { font-size: calc(clamp(1rem, 2.4vh, 1.6rem) * var(--maat, 1)); }
.pt-tv .pt-podium__spot--1 .pt-podium__block { height: calc(clamp(44px, 10vh, 120px) * var(--maat, 1)); }
.pt-tv .pt-podium__spot--2 .pt-podium__block { height: calc(clamp(32px, 7.5vh, 90px) * var(--maat, 1)); }
.pt-tv .pt-podium__spot--3 .pt-podium__block { height: calc(clamp(24px, 5.5vh, 68px) * var(--maat, 1)); }

/* ======================= Volgorde aanpassen (DJ) ======================= */

.pt-move {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 28px;
  flex: 0 0 auto;
}

.pt-move__btn {
  width: 26px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  font-size: .7rem;
  padding: 0;
}

.pt-move__btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.pt-move__btn:disabled { opacity: .3; cursor: not-allowed; }

.pt-move__rank {
  font-size: .7rem;
  font-weight: 750;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* De DJ-wachtrij heeft een eigen kolom voor de verplaatsknoppen. */
.pt-page-admin .pt-track { grid-template-columns: 28px 48px minmax(0, 1fr) auto; }

@media (min-width: 720px) {
  .pt-page-admin .pt-track { grid-template-columns: 30px 56px minmax(0, 1fr) auto; }
}

/* Op een telefoon is er naast alle knoppen geen ruimte voor de titel. Dan
   staan titel en artiest bovenaan over de hele breedte, met de hoes ervoor,
   en komen de knoppen op een tweede regel eronder. */
@media (max-width: 599px) {
  .pt-page-admin .pt-track {
    grid-template-columns: 28px 44px minmax(0, 1fr);
    grid-template-areas:
      "rang hoes meta"
      "rang acties acties";
    row-gap: var(--s-2);
  }
  .pt-page-admin .pt-track > .pt-move,
  .pt-page-admin .pt-track > .pt-rank,
  .pt-page-admin .pt-track > .pt-track__kies { grid-area: rang; align-self: center; }
  .pt-page-admin .pt-track > .pt-track__cover { grid-area: hoes; width: 44px; height: 44px; }
  .pt-page-admin .pt-track > .pt-track__meta { grid-area: meta; }
  .pt-page-admin .pt-track > .pt-track__actions { grid-area: acties; justify-content: flex-start; flex-wrap: wrap; }
  .pt-page-admin .pt-track__title { -webkit-line-clamp: 2; }
}

/* Het rangnummer blijft in de DJ-console ook op mobiel zichtbaar. */
.pt-page-admin .pt-move { display: flex; }

/* Sluitknop op het quizpaneel, zodat de gast zijn stemlijst weer ziet. */
.pt-hitster { position: relative; }

.pt-hitster__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

.pt-hitster__close:hover { background: var(--surface-3); color: var(--text); }

/* Ruimte houden zodat de tekst niet onder de knop loopt. */
.pt-hitster .pt-card__body { padding-right: 44px; }

/* Onderregel op het podium met de ruwe score. */
.pt-podium__sub { font-size: .68rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Getekende avatar: figuurtje op een gekleurde bol. */
.pt-avatar--drawn {
  font-size: 1.05rem;
  line-height: 1;
  color: #06140b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.pt-avatar--drawn.pt-avatar--sm { font-size: .8rem; }
.pt-avatar--drawn.pt-avatar--lg { font-size: 1.7rem; }

/* Fotokiezer met een voorbeeld van je huidige avatar ernaast. */
.pt-avatar-picker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pt-avatar-picker .pt-avatar { width: 56px; height: 56px; }
.pt-avatar-picker .pt-avatar--drawn { font-size: 1.7rem; }

/* ======================= Superkracht ======================= */

.pt-power {
  border: 1px solid var(--amber);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255, 203, 71, .16), rgba(255, 203, 71, .04));
  padding: var(--s-4);
  box-shadow: 0 0 0 1px rgba(255, 203, 71, .15), var(--shadow-2);
}

.pt-power__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 800;
  color: var(--amber);
}

.pt-power__title span:first-child { font-size: 1.35rem; }

.pt-power--armed {
  border-color: var(--brand);
  background: linear-gradient(135deg, rgba(30, 215, 96, .16), rgba(30, 215, 96, .04));
}

.pt-power--armed .pt-power__title { color: var(--brand); }

/* De stemknoppen springen eruit zodra een superstem klaarstaat. */
/* Een kracht staat scherp: laat zien waar je moet tikken.
   Bij een superstem zijn dat de pijltjes, want daar kies je ook een richting. */
body.pt-super-armed .pt-vote__btn {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(30, 215, 96, .3);
  animation: pt-wijs 1.4s ease-in-out infinite;
}

@keyframes pt-wijs {
  0%, 100% { box-shadow: 0 0 0 2px rgba(30, 215, 96, .3); }
  50%      { box-shadow: 0 0 0 5px rgba(30, 215, 96, .12); }
}

/* Bij voorkruiper en veto wijs je een heel nummer aan; dan is de hele regel
   de knop. */
.pt-track--kiesbaar {
  cursor: pointer;
  outline: 2px dashed rgba(30, 215, 96, .55);
  outline-offset: -4px;
  border-radius: var(--r-md);
}

.pt-track--kiesbaar:active { transform: scale(.99); }

@media (prefers-reduced-motion: reduce) {
  body.pt-super-armed .pt-vote__btn { animation: none; }
}

/* Crashmelding op tv. */
.pt-crash {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  padding: clamp(10px, 1.4vh, 18px) clamp(14px, 1.6vw, 24px);
  border-radius: var(--r-lg);
  border: 1px solid var(--down);
  background: rgba(244, 83, 107, .16);
  animation: pt-crash-in .4s ease both;
}

.pt-crash__icon { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.pt-crash__text { font-weight: 800; font-size: clamp(1rem, 1.8vw, 1.6rem); }

@keyframes pt-crash-in {
  from { opacity: 0; transform: translateY(-12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Op tv mogen de podiumavatars flink groter; dat leest van een afstand
   beter en is bovendien leuker om naar te kijken. */
.pt-tv .pt-avatar--lg {
  width: calc(clamp(52px, 9vh, 104px) * var(--maat, 1));
  height: calc(clamp(52px, 9vh, 104px) * var(--maat, 1));
}

.pt-tv .pt-avatar--drawn.pt-avatar--lg { font-size: calc(clamp(1.8rem, 4.6vh, 3.4rem) * var(--maat, 1)); }
.pt-tv .pt-podium__spot { max-width: 230px; }

/* Teller op de superkrachtkaart: het aantal moet meteen opvallen. */
.pt-power__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pt-power__badge {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe28a, #ffb524);
  box-shadow: 0 0 0 3px rgba(255, 203, 71, .28), 0 6px 16px rgba(0, 0, 0, .45);
}

.pt-power__count {
  font-size: 1.6rem;
  font-weight: 800;
  color: #3a2500;
  line-height: 1;
}

.pt-power__bolt {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 1.05rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* Stemknoppen voor de DJ in de wachtrij. */
.pt-djvote {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pt-djvote__btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .08s ease;
}

.pt-djvote__btn:hover { background: var(--surface-3); color: var(--text); }
.pt-djvote__btn:active { transform: scale(.9); }
.pt-djvote .pt-vote__score { min-width: 2.4ch; font-size: .95rem; }

/* ======================= Tijdlijn (Hitster) ======================= */

.pt-timeline {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  padding: var(--s-2) 2px var(--s-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Rechterrand vervaagt, zodat zichtbaar is dat er meer kaarten staan. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

/* Past alles binnen het scherm, dan is de vervaging onnodig. */
.pt-timeline--past {
  -webkit-mask-image: none;
  mask-image: none;
  justify-content: center;
}

.pt-tl-card {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  text-align: center;
}

.pt-tl-card__year {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}

.pt-tl-card__who {
  font-size: .65rem;
  color: var(--text-faint);
  max-width: 92px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* De plekken ertussen: smal, maar met een fatsoenlijk tikdoel. */
.pt-slot {
  flex: 0 0 auto;
  width: 34px;
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-faint);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Zolang je nog kunt kiezen: breder, groen gestippeld en zachtjes ademend,
   met een woordje eronder. Dit zijn de knoppen; de kaarten niet. */
.pt-slot--kies {
  width: 58px;
  min-height: 64px;
  border: 1.5px dashed rgba(30, 215, 96, .7);
  color: var(--brand);
  background: rgba(30, 215, 96, .07);
  animation: pt-slot-adem 1.6s ease-in-out infinite;
}
.pt-slot__teken { font-size: 1.25rem; line-height: 1; font-weight: 700; }
.pt-slot__woord { font-size: .55rem; letter-spacing: .02em; text-transform: uppercase; opacity: .85; }
.pt-slot--kies.pt-slot--gekozen { animation: none; background: rgba(30, 215, 96, .2); border-style: solid; }
@keyframes pt-slot-adem {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 215, 96, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(30, 215, 96, .18); }
}
@media (prefers-reduced-motion: reduce) { .pt-slot--kies { animation: none; } }

/* Het regeltje onder een tijdlijn die niet in beeld past. */
.pt-timeline__hint {
  text-align: center;
  font-size: .72rem;
  color: var(--text-faint);
  margin-top: -6px;
  transition: opacity .3s ease;
}
.pt-timeline__hint::before { content: '\2190\00a0'; }
.pt-timeline__hint::after  { content: '\00a0\2192'; }
.pt-timeline__hint--weg { opacity: 0; }

.pt-slot:hover:not(:disabled) {
  background: rgba(30, 215, 96, .12);
  border-color: var(--brand);
  color: var(--brand);
}

.pt-slot:active:not(:disabled) { transform: scale(.94); }
.pt-slot:disabled { opacity: .35; cursor: not-allowed; }

.pt-slot--gekozen {
  background: rgba(30, 215, 96, .2);
  border-style: solid;
  border-color: var(--brand);
  color: var(--brand);
}

/* Het antwoord van deze ronde: schuift van boven op zijn plek en licht op. */
.pt-tl-card--antwoord {
  border: 1.5px solid var(--brand);
  background: rgba(30, 215, 96, .16);
  box-shadow: 0 0 0 3px rgba(30, 215, 96, .18), 0 8px 20px rgba(0, 0, 0, .35);
  animation: pt-tl-schuif .7s cubic-bezier(.2, .9, .3, 1.15) both;
}
.pt-tl-card--antwoord .pt-tl-card__year { color: var(--brand); }
@keyframes pt-tl-schuif {
  from { transform: translateY(-140%) scale(.9); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

/* De kaart die zojuist geplaatst is, licht op. */
.pt-tl-card--nieuw {
  border-color: var(--brand);
  background: rgba(30, 215, 96, .14);
  animation: pt-cheer .5s ease both;
}

.pt-tl-card--fout {
  border-color: var(--down);
  background: rgba(244, 83, 107, .14);
}

/* Op tv mag alles ruimer. */
.pt-tv .pt-tl-card { min-width: calc(clamp(84px, 8vw, 130px) * var(--maat, 1)); }
.pt-tv .pt-tl-card__year { font-size: calc(clamp(1.1rem, 1.9vw, 1.7rem) * var(--maat, 1)); }
.pt-tv .pt-tl-card__who { font-size: calc(clamp(.6rem, .9vw, .8rem) * var(--maat, 1)); max-width: 120px; }
.pt-tv .pt-slot { width: calc(clamp(28px, 3vw, 48px) * var(--maat, 1)); min-height: calc(clamp(52px, 6vw, 78px) * var(--maat, 1)); }

/* Tijdlijn die zich naar de beschikbare ruimte voegt (tv-scherm). */
.pt-timeline--fit {
  overflow: hidden;
  justify-content: center;
  flex-wrap: nowrap;
  -webkit-mask-image: none;
  mask-image: none;
}

.pt-timeline--fit .pt-tl-card {
  min-width: 0;
  width: var(--tl-card, 96px);
  padding-left: 4px;
  padding-right: 4px;
}

.pt-timeline--fit .pt-slot {
  width: var(--tl-slot, 34px);
  min-height: 0;
}
.pt-timeline--fit .pt-slot__teken { font-size: var(--tl-font, 1.2rem); }
.pt-timeline--fit .pt-slot__woord { font-size: var(--tl-sub, .6rem); }
.pt-timeline--zonderwoord .pt-slot__woord { display: none; }

.pt-timeline--fit .pt-tl-card__year {
  font-size: var(--tl-font, 1.2rem);
}

.pt-timeline--fit .pt-tl-card__who {
  font-size: var(--tl-sub, .6rem);
  max-width: 100%;
}

/* Past de tijdlijn niet op één rij, dan mag hij omvallen. */
.pt-timeline--fit.pt-timeline--wrap {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* ------------------------------------------------------ party crashers */

.pt-chip--uit { opacity: .5; text-decoration: line-through; }

.pt-crash-rol {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}
.pt-crash-rol__icoon { font-size: 2.4rem; line-height: 1; }
.pt-crash-rol--crasher { border-color: rgba(244, 83, 107, .5); background: rgba(244, 83, 107, .1); }
.pt-crash-rol--shazam  { border-color: rgba(255, 203, 71, .5); background: rgba(255, 203, 71, .1); }
.pt-crash-rol--feest   { border-color: rgba(30, 215, 96, .4); background: rgba(30, 215, 96, .08); }

.pt-crash-lijst { display: grid; gap: var(--s-1); }
.pt-crash-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.pt-crash-item:disabled { cursor: default; opacity: .7; }
.pt-crash-item.is-mijn { border-color: var(--down); background: rgba(244, 83, 107, .12); }
.pt-crash-item .pt-chip { justify-self: end; }
.pt-crash-item .pt-chip + .pt-chip { margin-left: 4px; }

.pt-crash-spelers { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-crash-speler {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pt-crash-speler.is-mijn { border-color: var(--down); background: rgba(244, 83, 107, .14); }

.pt-crash-nacht {
  margin-top: var(--s-4);
  padding: var(--s-5) var(--s-3);
  border-radius: var(--r-md);
  background: #0b0d14;
  border: 1px solid #1c2033;
  text-align: center;
}
.pt-crash-nacht__maan { font-size: 3rem; line-height: 1; margin-bottom: var(--s-2); }

.pt-crash-weg .pt-track__title { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--down); }
.pt-crash-weg { opacity: .8; }

/* De tv: de playlist als rij chips, zodat hij ook met twaalf nummers in de dok past. */
.pt-tv__crash-lijst {
  display: flex; flex-wrap: wrap;
  gap: calc(clamp(4px, .5vw, 8px) * var(--maat, 1));
  margin-top: calc(clamp(6px, 1vh, 12px) * var(--maat, 1));
}
.pt-tv__crash-item {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(clamp(220px, 24vw, 420px) * var(--maat, 1));
  padding: 3px 8px 3px 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  font-size: calc(clamp(.7rem, .95vw, .95rem) * var(--maat, 1));
}
.pt-tv__crash-item img, .pt-tv__crash-item .pt-tv__crash-hoes { width: calc(clamp(20px, 1.8vw, 30px) * var(--maat, 1)); height: calc(clamp(20px, 1.8vw, 30px) * var(--maat, 1)); border-radius: 50%; flex: none; background: var(--surface-2, #222); object-fit: cover; }
.pt-tv__crash-item .pt-tv__crash-tekst { min-width: 0; display: flex; gap: 4px; white-space: nowrap; overflow: hidden; }
.pt-tv__crash-item .pt-tv__crash-titel { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.pt-tv__crash-item .pt-tv__crash-artiest { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 12ch; }
.pt-tv__crash-item .pt-tv__crash-artiest::before { content: '· '; }
.pt-tv__crash-item.is-uit { opacity: .4; }
.pt-tv__crash-item.is-uit .pt-tv__crash-titel { text-decoration: line-through; }
.pt-tv__crash-item.is-crasher { border-color: var(--down); }
.pt-tv__crash-stem {
  margin-left: auto; flex: none;
  min-width: 1.8em; padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--down); color: #fff;
  font-weight: 800; text-align: center;
}
.pt-tv__speler .pt-tv__crash-stem { margin-left: 4px; }
.pt-tv__speler.is-crasher { border-color: var(--down); }

.pt-roep--nacht { background: radial-gradient(ellipse at 50% 30%, #101528 0%, #05060b 70%); }
.pt-roep--nacht .pt-roep__icoon { animation: pt-crash-zweef 3s ease-in-out infinite alternate; }
@keyframes pt-crash-zweef { from { transform: translateY(0); } to { transform: translateY(-12px); } }
.pt-roep__weg {
  display: inline-block; margin-top: var(--s-3);
  font-size: clamp(1.2rem, 4vw, 2.2rem); font-weight: 800;
  text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: var(--down);
}
.pt-roep__rollen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--s-4); }

.pt-crash-regels { display: grid; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.pt-crash-regel { display: flex; gap: var(--s-3); align-items: flex-start; }
.pt-crash-regel__icoon { font-size: 1.4rem; line-height: 1.2; flex: none; width: 1.6em; text-align: center; }
.pt-crash-regel__kop { font-weight: 650; margin-bottom: 2px; }
.pt-tv__crash-regels { display: grid; gap: calc(clamp(2px, .5vh, 6px) * var(--maat, 1)); margin-top: calc(clamp(6px, 1vh, 12px) * var(--maat, 1)); color: var(--text-muted); font-size: calc(clamp(.8rem, 1.15vw, 1.05rem) * var(--maat, 1)); }
.pt-tv__crash-regel { display: flex; gap: 8px; align-items: baseline; }
.pt-gastrij.is-weg { opacity: .6; }

/* Geheime DJ: het gezicht van de inzender op het label, ook zonder foto. */
.pt-vinyl__label--gezicht.pt-avatar { flex: none; display: grid; place-items: center; width: 38%; height: 38%; }
.pt-vinyl--small .pt-vinyl__label--gezicht.pt-avatar { width: 42%; height: 42%; }
.pt-vinyl__label--gezicht.pt-avatar--drawn { font-size: clamp(1.6rem, 7vh, 4.5rem); }
.pt-vinyl--small .pt-vinyl__label--gezicht.pt-avatar--drawn { font-size: 1.6rem; }

/* De DJ linksboven op de tv, naast de partynaam. */
.pt-tv__links { display: flex; align-items: center; gap: calc(clamp(12px, 1.6vw, 26px) * var(--maat, 1)); min-width: 0; }
.pt-tv__dj { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pt-tv__dj-foto {
  width: calc(clamp(64px, 9vh, 110px) * var(--maat, 1)); height: calc(clamp(64px, 9vh, 110px) * var(--maat, 1));
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--brand);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  background: var(--surface-2);
}
.pt-tv__dj-foto--leeg { display: grid; place-items: center; font-size: calc(clamp(1.6rem, 4vh, 3rem) * var(--maat, 1)); }
.pt-tv__dj-naam { font-size: calc(clamp(.7rem, 1vw, .95rem) * var(--maat, 1)); font-weight: 700; color: var(--brand); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; max-width: calc(clamp(80px, 11vh, 140px) * var(--maat, 1)); overflow: hidden; text-overflow: ellipsis; }
.pt-tv__leader--rest { padding: 6px 12px; color: var(--text-muted); font-weight: 600; }

/* Grote groepen op de tv: kleinere chips, anders past de dok niet. */
.pt-tv__spelers--compact { gap: 4px 6px; }
.pt-tv__spelers--compact .pt-tv__speler { font-size: calc(clamp(.65rem, .9vw, .85rem) * var(--maat, 1)); padding: 2px 8px 2px 2px; gap: 5px; }
.pt-tv__spelers--compact .pt-avatar--sm { width: 20px; height: 20px; font-size: .55rem; }
.pt-tv__crash-lijst--compact { gap: 3px 4px; }
.pt-tv__crash-lijst--compact .pt-tv__crash-item { font-size: calc(clamp(.6rem, .8vw, .8rem) * var(--maat, 1)); padding: 2px 6px 2px 2px; max-width: calc(clamp(160px, 18vw, 300px) * var(--maat, 1)); }
.pt-tv__crash-lijst--compact .pt-tv__crash-item img, .pt-tv__crash-lijst--compact .pt-tv__crash-hoes { width: 18px; height: 18px; }

/* Deelnemers in de console: compact, twee regels per persoon. */
.pt-gastrij { padding: var(--s-2) 0; }
.pt-gastrij__onder { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: 6px; flex-wrap: wrap; }
.pt-gastrij__onder .pt-rechten { margin-top: 0; gap: 4px; flex: 1 1 auto; }
.pt-gastrij__onder .pt-recht { padding: 2px 7px; font-size: .72rem; gap: 4px; }
.pt-gastrij__geef { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pt-gastrij__geef .pt-krachtkeuze { flex: 0 1 auto; width: auto; max-width: 150px; padding-top: 4px; padding-bottom: 4px; font-size: .8rem; }
.pt-gastrij__geef .pt-btn--icon { min-width: 30px; height: 30px; padding: 0; }

/* ------------------------------------------------------------- beheertabel */

.pt-tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pt-tabel th, .pt-tabel td { padding: 10px var(--s-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pt-tabel th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; white-space: nowrap; }
.pt-tabel__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.pt-tabel__pijl { color: var(--text-faint); text-align: right !important; width: 1%; }
.pt-tabel__rij { cursor: pointer; }
.pt-tabel__rij:hover { background: var(--surface-2); }
.pt-tabel__rij.is-open { background: var(--surface-2); }
.pt-tabel__rij.is-open td { border-bottom-color: transparent; }
.pt-tabel__detail td { background: var(--surface-2); padding: var(--s-2) var(--s-4) var(--s-4); }
.pt-tabel tbody tr:last-child td { border-bottom: 0; }
.pt-tabel__rij--stil { cursor: default; }
.pt-tabel__rij--stil:hover { background: transparent; }
.pt-tabel__sort {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.pt-tabel__sort:hover { color: var(--text); }
.pt-tabel__sort.is-op::after { content: ' \2191'; color: var(--brand); }
.pt-tabel__sort.is-af::after { content: ' \2193'; color: var(--brand); }
.pt-tabel__voet {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------- dj-login */

.pt-login { width: min(100%, 440px); display: flex; flex-direction: column; gap: var(--s-4); text-align: center; }
.pt-login__kop { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.pt-login__kop .pt-muted { max-width: 30ch; }
.pt-login__icoon {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(30, 215, 96, .35), rgba(30, 215, 96, .08) 70%);
  border: 1px solid rgba(30, 215, 96, .35);
  box-shadow: 0 0 40px rgba(30, 215, 96, .18);
}
.pt-login__icoon svg { width: 34px; height: 34px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pt-btn--lg { min-height: 56px; font-size: 1.05rem; gap: 10px; }
.pt-btn__spotify { width: 22px; height: 22px; fill: #0b1210; }
.pt-btn__spotify circle { fill: #0b1210; }
.pt-btn__spotify path { stroke: var(--brand); }

.pt-login__form { text-align: left; margin-top: var(--s-2); }
.pt-login__form .pt-field { text-align: left; }

/* Koppelen: dezelfde kop als de login, daaronder genummerde stappen. */
.pt-koppel { padding-top: var(--s-6); }
.pt-koppel__stap { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-3); }
.pt-koppel__nr {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #0b1210; font-weight: 800; font-size: .9rem;
}
.pt-login__voetnoot { text-align: center; margin: var(--s-2) 0 0; font-size: .64rem; line-height: 1.4; color: var(--text-faint); opacity: .8; }
.pt-login__voetnoot a, .pt-login__voetnoot a:visited { white-space: nowrap; color: var(--text-faint); text-decoration-color: rgba(255,255,255,.25); }
.pt-login__akkoord {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 var(--s-3);
  font-size: .82rem; color: var(--text-muted); line-height: 1.4; text-align: left;
  cursor: pointer;
}
.pt-login__akkoord input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); flex: 0 0 auto; }
.pt-login__akkoord a { color: var(--text); }
.pt-login__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: calc(-1 * var(--s-2)); }

.pt-login__scheiding {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-2);
  color: var(--text-faint); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.pt-login__scheiding::before, .pt-login__scheiding::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.pt-wegen { display: grid; gap: var(--s-2); }
.pt-weg {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text); text-decoration: none; text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.pt-weg:hover { border-color: rgba(30, 215, 96, .5); background: var(--surface-2); text-decoration: none; }
.pt-weg:active { transform: scale(.985); }
.pt-weg__icoon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  background: rgba(30, 215, 96, .12);
}
.pt-weg__icoon svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pt-weg__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pt-weg__tekst strong { font-size: .98rem; }
.pt-weg__tekst span { font-size: .84rem; color: var(--text-muted); line-height: 1.35; }
.pt-weg__pijl { flex: 0 0 auto; }
.pt-weg__pijl svg { width: 20px; height: 20px; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-weg:hover .pt-weg__pijl svg { stroke: var(--brand); }

/* ------------------------------------------------------------- startpagina */

/* Ruimte onderaan voor de menubalk, ook op een telefoon met een rand. */
.pt-met-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
/* De login staat in het midden van het scherm; zonder dit zakt hij achter de balk. */
.pt-met-tabbar .pt-centered { min-height: calc(100dvh - 64px - env(safe-area-inset-bottom)); }
.pt-home__top { min-height: calc(100dvh - 64px - env(safe-area-inset-bottom)); padding-bottom: var(--s-5); }
/* Op een telefoon moet de teaser boven de balk uitkomen: de plaat en de
   tussenruimtes wat kleiner, zodat alles in een scherm past. */
@media (max-height: 820px) {
  .pt-home__top .pt-home-plaat { width: min(46vw, 190px); margin-top: var(--s-3); }
  .pt-home__top .pt-stack > * + * { margin-top: var(--s-3); }
  .pt-home__top .pt-h1 { margin-top: var(--s-3) !important; }
}
@media (max-height: 700px) {
  .pt-home__top .pt-home-plaat { width: min(36vw, 150px); }
}
.pt-home__meer {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: var(--s-2);
  font-size: .85rem; color: var(--text-muted); text-decoration: none;
}
.pt-home__meer:hover { color: var(--text); text-decoration: none; }
.pt-home__meer-knop {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  animation: pt-home-wenk 1.8s ease-in-out infinite;
}
.pt-home__meer-knop svg { width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pt-home__meer:hover .pt-home__meer-knop { border-color: var(--brand); }
@keyframes pt-home-wenk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.pt-home__promo { padding: var(--s-6) var(--s-4) var(--s-7); border-top: 1px solid var(--line); }
.pt-home__kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.pt-home__kaart {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.pt-home__kaart strong { font-size: 1rem; }
.pt-home__kaart > span:last-child { font-size: .9rem; color: var(--text-muted); line-height: 1.5; }
.pt-home__icoon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(30, 215, 96, .14);
  font-size: 1.3rem; line-height: 1;
  margin-bottom: 4px;
}

/* Rustige menubalk onderaan: vier icoontjes met een woord eronder. */
.pt-menubalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  background: rgba(14, 16, 19, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.pt-menubalk__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px;
  color: var(--text-faint); text-decoration: none;
  font-size: .68rem; letter-spacing: .01em;
}
.pt-menubalk__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pt-menubalk__item:hover, .pt-menubalk__item:focus-visible { color: var(--text); text-decoration: none; }
.pt-menubalk__item.is-actief { color: var(--brand); }
.pt-menubalk { grid-template-columns: repeat(5, 1fr); }

/* --------------------------------------------- deelnemerstabel in de console */

.pt-tabel--gasten th, .pt-tabel--gasten td { padding: 8px var(--s-2); vertical-align: middle; }
.pt-tabel--gasten td:first-child { max-width: 220px; }
.pt-rechten--tabel { margin-top: 0; flex-wrap: nowrap; gap: 4px; }
.pt-rechten--tabel .pt-recht { padding: 3px 7px; }
.pt-tabel__rij.is-weg td:first-child, .pt-tabel__rij.is-buiten td:first-child { opacity: .6; }
/* De lade met de deelnemers mag breder zijn dan de andere panelen. */
.pt-lade--breed .pt-lade__vak { max-width: 1400px; }

/* Onder een breed scherm laten we het woord bij een recht weg; het plaatje
   met de rode streep zegt dan genoeg, en de tabel blijft in beeld. Op een
   telefoon schuift hij zijwaarts. */
@media (max-width: 1499px) {
  .pt-rechten--tabel .pt-recht__naam { display: none; }
  .pt-rechten--tabel .pt-recht { padding: 4px 7px; }
  .pt-rechten--tabel .pt-recht.is-uit { background: rgba(229, 72, 77, .18); border-color: rgba(229, 72, 77, .6); }
}
.pt-tabel--gasten .pt-krachtkeuze { width: 118px; }
.pt-tabel--gasten td:first-child { max-width: 200px; }

/* ------------------------------------------------------- tv op een telefoon */

/* Een tv-pagina op een telefoon (de DJ die even meekijkt, of een gast die
   het scherm niet kan zien): dan mag hij wel scrollen. Alles onder elkaar,
   de kop compact, de QR kleiner, en de lijsten helemaal in plaats van
   afgesneden op schermhoogte. */
@media (max-width: 700px) {
  .pt-tv { height: auto; min-height: 100dvh; overflow: visible; grid-template-rows: auto auto auto; gap: var(--s-4); }
  .pt-tv__head { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .pt-tv__head > div:first-child { flex: none; }
  .pt-tv__links { gap: var(--s-3); }
  .pt-tv__dj-foto { width: 56px; height: 56px; }
  .pt-tv__title { font-size: 1.35rem; }
  .pt-tv__join { max-width: none; width: 100%; padding: var(--s-3); gap: var(--s-3); }
  .pt-tv__join > div:first-child svg { width: 88px; height: 88px; }
  .pt-tv__code { font-size: 1.6rem; letter-spacing: .1em; }
  .pt-tv__body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: visible; }
  .pt-tv__now { flex: none; }
  .pt-tv__cover { flex: none; width: min(100%, 220px); height: auto; }
  .pt-tv__now-title { font-size: 1.4rem; }
  .pt-tv__now-artist { font-size: 1rem; }
  .pt-tv__side { overflow: visible; }
  .pt-tv__list { flex: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .pt-tv__item { font-size: 1rem; grid-template-columns: auto 44px minmax(0, 1fr) auto; }
  #tv-hitster { flex: none; overflow: visible; }
}

/* ------------------------------------------------- snelstart in de console */

.pt-snelstart {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(30, 215, 96, .35);
  background: linear-gradient(180deg, rgba(30, 215, 96, .10), rgba(30, 215, 96, .03));
}
.pt-snelstart__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pt-snelstart__stappen { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 900px) { .pt-snelstart__stappen { grid-template-columns: repeat(3, 1fr); } }
.pt-snelstart__stap {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text); font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pt-snelstart__stap:hover { border-color: var(--brand); background: var(--surface-2); text-decoration: none; }
.pt-snelstart__stap > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-snelstart__stap > span:last-child > span { font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
.pt-snelstart__stap a { color: var(--brand); }
.pt-snelstart__nr {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #0b1210; font-weight: 800; font-size: .85rem;
}

/* ------------------------------------------------ spelkeuze als kaarten */

.pt-spelkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.pt-spelkaart {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text); font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pt-spelkaart:hover { border-color: var(--line-strong); background: var(--surface-3); }
.pt-spelkaart.is-uit { opacity: .45; cursor: not-allowed; }
.pt-spelkaart.is-uit:hover { border-color: var(--line); background: var(--surface-2); }
.pt-spelkaart.is-gekozen {
  border-color: var(--brand);
  background: rgba(30, 215, 96, .10);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.pt-spelkaart__icoon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  font-size: 1.3rem; line-height: 1;
}
.pt-spelkaart.is-gekozen .pt-spelkaart__icoon { background: rgba(30, 215, 96, .18); }
/* Gekozen, maar op deze bron niet mogelijk: oranje in plaats van groen, zodat
   niemand denkt dat dit spel straks draait. */
.pt-spelkaart.is-onmogelijk {
  opacity: 1;
  border-color: rgba(255, 203, 71, .55);
  background: rgba(255, 203, 71, .08);
  cursor: not-allowed;
}
.pt-spelkaart.is-onmogelijk .pt-spelkaart__icoon { background: rgba(255, 203, 71, .16); }
.pt-spelkaart.is-onmogelijk .pt-spelkaart__tekst span { color: var(--amber); }
.pt-spelkaart__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-spelkaart__tekst strong { font-size: .95rem; }
.pt-spelkaart__tekst span { font-size: .8rem; color: var(--text-muted); line-height: 1.35; }

/* --------------------------------------------------- partytabel dashboard */

.pt-tabel--partys td { vertical-align: middle; }
.pt-tabel__naam { color: var(--text); font-weight: 700; text-decoration: none; }
.pt-tabel__naam:hover { color: var(--brand); text-decoration: none; }
.pt-code-pill--klein { font-size: .85rem; padding: 4px 8px; letter-spacing: .12em; }
.pt-tabel__mobiel { display: none; }
@media (max-width: 700px) {
  /* Op een telefoon: naam met de cijfers eronder, status, en de knoppen; de
     losse kolommen vallen weg zodat de console-knop in beeld blijft. */
  .pt-tabel--partys th:nth-child(2), .pt-tabel--partys td:nth-child(2),
  .pt-tabel--partys th:nth-child(4), .pt-tabel--partys td:nth-child(4),
  .pt-tabel--partys th:nth-child(5), .pt-tabel--partys td:nth-child(5),
  .pt-tabel--partys th:nth-child(6), .pt-tabel--partys td:nth-child(6) { display: none; }
  .pt-tabel__mobiel { display: block; margin-top: 2px; }
  /* Elke rij wordt een kaartje: naam en status op de eerste regel, de
     knoppen eronder over de volle breedte. */
  .pt-tabel--partys thead { display: none; }
  .pt-tabel--partys tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--line); }
  .pt-tabel--partys td { display: block; padding: 0; border: 0; }
  .pt-tabel--partys td:first-child { flex: 1 1 0; min-width: 0; }
  .pt-tabel--partys td:nth-child(3) { flex: 0 0 auto; }
  .pt-tabel--partys td:last-child { flex: 0 0 100%; text-align: left !important; white-space: normal !important; }
  .pt-tabel--partys td:last-child .pt-btnrow { flex-wrap: wrap; justify-content: flex-start !important; }
}

/* ------------------------------------------------- bronkeuze bij nieuwe party */

.pt-bronnen { display: grid; gap: var(--s-2); }
.pt-bron {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
}
.pt-bron:has(input:checked) { border-color: var(--brand); background: rgba(30, 215, 96, .08); }
.pt-bron.is-uit { opacity: .5; cursor: not-allowed; }
.pt-bron input { margin-top: 3px; accent-color: var(--brand); }
.pt-bron__tekst { display: flex; flex-direction: column; gap: 2px; }
.pt-bron__tekst span { font-size: .82rem; color: var(--text-muted); line-height: 1.4; }

/* --------------------------------------------------------------- het blok
   De lijst van het blok: pijlen om de volgorde te schuiven, en een jaartal
   dat je kunt aanklikken om het zelf in te vullen. */
.pt-blok__vak {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.pt-blok__vak + .pt-blok__vak { margin-top: var(--s-2); }
/* Dezelfde regel als elders, maar met een kolom voor de pijltjes ervoor. */
.pt-blok__clip { grid-template-columns: 30px 44px minmax(0, 1fr) auto; gap: var(--s-2); }
.pt-blok__pijlen { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.pt-blok__pijlen .pt-btn { width: 28px; min-height: 22px; padding: 0; }
.pt-blok__pijlen .pt-btn svg { width: 13px; height: 13px; }
.pt-blok__pijlen .pt-btn[disabled] { opacity: .25; cursor: default; }
.pt-chip--knop { cursor: pointer; font-family: inherit; }
.pt-chip--knop:hover, .pt-chip--knop:focus-visible { border-color: var(--brand); color: var(--text); }
.pt-blok__jaar { width: 96px; }
.pt-mapkeuze { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }

/* ------------------------------------------------------------- de oproep
   Een spel dat nog moet beginnen vraagt iets van de zaal. Dat mag groot en
   vrolijk in beeld: een badge, een regel waar je meteen naar handelt, en een
   balk die vult naarmate er meer mensen klaar zijn. */
.pt-oproep {
  border-color: rgba(29, 185, 84, .45);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(29, 185, 84, .18), transparent 60%),
    var(--surface);
}
.pt-oproep.is-klaar { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(29,185,84,.35), 0 10px 40px rgba(29,185,84,.15); }
.pt-oproep__kop { display: flex; align-items: center; gap: calc(clamp(10px, 1.2vw, 18px) * var(--maat, 1)); }
.pt-oproep__badge {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: calc(clamp(44px, 4.4vw, 74px) * var(--maat, 1));
  height: calc(clamp(44px, 4.4vw, 74px) * var(--maat, 1));
  border-radius: 50%;
  background: rgba(29, 185, 84, .16);
  border: 1px solid rgba(29, 185, 84, .4);
  font-size: calc(clamp(1.3rem, 2.2vw, 2.2rem) * var(--maat, 1));
  line-height: 1;
}
.pt-oproep__titel {
  font-size: calc(clamp(1.3rem, 2.4vw, 2.4rem) * var(--maat, 1));
  font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
}
.pt-oproep__actie {
  margin-top: 2px;
  font-size: calc(clamp(.95rem, 1.5vw, 1.5rem) * var(--maat, 1));
  font-weight: 700; color: var(--brand);
}
.pt-oproep__tekst {
  margin-top: calc(clamp(6px, 1vh, 14px) * var(--maat, 1));
  color: var(--text-muted);
  font-size: calc(clamp(.85rem, 1.25vw, 1.25rem) * var(--maat, 1));
  line-height: 1.45;
}
.pt-oproep__tekst--klein { font-size: calc(clamp(.72rem, 1vw, 1rem) * var(--maat, 1)); color: var(--text-faint); }
.pt-oproep__stand { margin-top: calc(clamp(8px, 1.2vh, 16px) * var(--maat, 1)); }
.pt-oproep__cijfer {
  display: inline-block;
  font-size: calc(clamp(1rem, 1.6vw, 1.6rem) * var(--maat, 1));
  font-weight: 800;
}
.pt-oproep.is-klaar .pt-oproep__cijfer { color: var(--brand); }
.pt-oproep__balk {
  margin-top: 6px; height: calc(8px * var(--maat, 1));
  border-radius: 999px; background: var(--surface-2); overflow: hidden;
}
.pt-oproep__balk span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(29,185,84,.7), var(--brand));
  transition: width .6s ease;
}

/* Dezelfde oproep op de telefoon, maar dan op telefoonmaat: het scherm is
   klein en de kaart staat naast knoppen en fiches. */
.pt-page-vote .pt-oproep__badge { width: 38px; height: 38px; font-size: 1.15rem; }
.pt-page-vote .pt-oproep__titel { font-size: 1.1rem; }
.pt-page-vote .pt-oproep__actie { font-size: .92rem; }
.pt-page-vote .pt-oproep__tekst { font-size: .88rem; margin-top: var(--s-2); }
.pt-page-vote .pt-oproep__tekst--klein { font-size: .8rem; }
.pt-page-vote .pt-oproep__kop { gap: var(--s-2); }
.pt-roulette__mijn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s-2); }
.pt-roulette__weg { cursor: pointer; opacity: .7; padding: 0 2px; }
.pt-roulette__weg:hover, .pt-roulette__weg:focus-visible { opacity: 1; color: var(--down); }

/* De balk boven de wachtrij: het blok loopt, of begint zo. Hier kijkt de DJ
   de hele avond naar, dus stoppen kan hier ook. */
.pt-blokbalk {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 203, 71, .45);
  background: rgba(255, 203, 71, .08);
}
.pt-blokbalk.is-loopt { border-color: rgba(29, 185, 84, .5); background: rgba(29, 185, 84, .1); }
/* Niets aan de hand: dan is het gewoon een regel, geen waarschuwing. */
.pt-blokbalk.is-rust { border-color: var(--line); background: var(--surface-2); }
.pt-blokbalk.is-rust .pt-blokbalk__punt { background: var(--text-faint); }
.pt-blokbalk__punt {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber); flex: 0 0 auto;
}
.pt-blokbalk.is-loopt .pt-blokbalk__punt { background: var(--brand); animation: pt-pulse 1.8s ease-in-out infinite; }

#motor-acties { white-space: pre-line; }

/* ------------------------------------------------------------ sfeerlicht
   De schermen in de zaal doen mee: het tv-scherm en de telefoons kleuren een
   paar tellen mee met wat er gebeurt. Bewust rustig: geen snelle flikkering,
   dat is naar voor de ogen en kost batterij. */
.pt-licht {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, background-color .5s ease;
  mix-blend-mode: screen;
}
/* De DJ kiest hoe hard het licht meedoet; die sterkte staat in een variabele
   en rekent door in alles wat hieronder zichtbaar wordt. */
.pt-licht { --licht-sterkte: .75; }
.pt-licht.is-aan { opacity: var(--licht-sterkte); }
.pt-licht[data-kleur="groen"]     { background: radial-gradient(circle at 50% 50%, rgba(29,185,84,.55), rgba(29,185,84,.12) 70%); }
.pt-licht[data-kleur="rood"]      { background: radial-gradient(circle at 50% 50%, rgba(244,83,107,.55), rgba(244,83,107,.12) 70%); }
.pt-licht[data-kleur="warm"]      { background: radial-gradient(circle at 50% 50%, rgba(255,170,64,.5), rgba(255,120,32,.12) 70%); }
.pt-licht[data-kleur="koel"]      { background: radial-gradient(circle at 50% 50%, rgba(80,160,255,.5), rgba(40,90,255,.12) 70%); }
.pt-licht[data-kleur="roze"]      { background: radial-gradient(circle at 50% 50%, rgba(255,105,180,.5), rgba(200,60,180,.12) 70%); }
.pt-licht[data-kleur="regenboog"] {
  background: linear-gradient(120deg, rgba(255,80,80,.45), rgba(255,200,60,.45), rgba(60,220,120,.45), rgba(80,160,255,.45), rgba(200,100,255,.45));
  background-size: 300% 300%;
  animation: pt-licht-schuif 6s ease-in-out infinite;
}
@keyframes pt-licht-schuif {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* De flits is een korte, zachte opdoffer: twee keer aan en weer weg. */
.pt-licht[data-kleur="flits"] {
  background: rgba(255, 255, 255, .75);
  animation: pt-licht-flits 1.4s ease-in-out 2;
}
@keyframes pt-licht-flits {
  0%, 100% { opacity: 0; }
  20%      { opacity: var(--licht-sterkte); }
  60%      { opacity: calc(var(--licht-sterkte) * .25); }
}
/* Feeststand: tussen de pulsen door ademt het scherm zachtjes mee. */
/* Tussen de pulsen door ademt het scherm zachtjes mee, een slag rustiger dan
   een puls zelf. */
.pt-licht.is-adem { animation: pt-licht-adem 7s ease-in-out infinite; }
@keyframes pt-licht-adem {
  0%, 100% { opacity: calc(var(--licht-sterkte) * .16); }
  50%      { opacity: calc(var(--licht-sterkte) * .38); }
}
/* Meebewegen op de maat: bij elke tel zwelt de gloed even op en zakt daarna
   weer weg. De duur is de tijd tussen twee tellen; die zet het script. */
.pt-licht.is-tel { animation: pt-licht-tel var(--licht-tel, 500ms) ease-out 1 both; }
/* 'both' houdt de eindstand vast, zodat het tussen twee tellen niet
   even terugspringt naar volle sterkte als de klok iets uitloopt. */
@keyframes pt-licht-tel {
  0%   { opacity: calc(var(--licht-sterkte) * .62); }
  100% { opacity: calc(var(--licht-sterkte) * .14); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-licht { transition: none; animation: none !important; }
}

/* Een uitlegvakje met een informatierondje ervoor: dit is geen waarschuwing,
   het legt alleen iets uit. */
.pt-note--info { display: flex; gap: var(--s-3); align-items: flex-start; }
.pt-note__icoon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--brand); }