/* ============================================================
   Slokjes — "Bruin café na sluitingstijd"
   Flessengroen, crème en bierlabel-amber. Fraunces (display, met
   SOFT/WONK) + Gabarito (UI). Signatuur: het bierviltje en de
   kringvlekken van glazen op de tafel.
   ============================================================ */

:root {
  --groen-900: #0B1D15;
  --groen-800: #102820;
  --groen-700: #17352A;
  --groen-600: #1E4234;
  --room-bg:   #081611;
  --creme:     #F3E9D2;
  --creme-dim: #C9BFA8;
  --amber:     #E8A13C;
  --amber-deep:#C77E1F;
  --rood:      #D8452F;
  --rood-deep: #A93322;
  --go:        #4FAE6B;
  --messing:   #A98B4F;
  --kaart:     #F6EEDA;
  --ink:       #14261E;
  --hairline:  rgba(243, 233, 210, .14);
  --hairline-strong: rgba(243, 233, 210, .24);
  --stain:     rgba(243, 233, 210, .045);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --r-pill: 999px;
  --r-card: 26px;
  --r-in:   20px;
  --shadow-soft: 0 24px 70px -34px rgba(0, 0, 0, .75);
  --shadow-lift: 0 14px 40px -20px rgba(0, 0, 0, .7);
  --pad-x: clamp(1.1rem, 4vw, 2.5rem);
  --maxw: 1120px;
}

/* ---------- basis ---------- */

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--groen-900);
  color: var(--creme);
  font-family: "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.room-dark { background: var(--room-bg); }

img, svg { display: block; max-width: 100%; }

/* Het hidden-attribuut wint ALTIJD — ook van display:grid/flex op classes. */
[hidden] { display: none !important; }

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--creme); }

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  font-weight: 700;
  line-height: 1.06;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

::selection { background: var(--amber); color: var(--groen-900); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

button { font: inherit; color: inherit; }

/* ---------- kringvlekken (signatuur-textuur) ---------- */

.stains {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

main, .site-head, .site-foot, .roombar, .admin-shell { position: relative; z-index: 1; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .78rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform .45s var(--ease), background-color .45s var(--ease),
              border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
  will-change: transform;
}

.btn:active { transform: scale(.97) translateY(1px); }

.btn--primary {
  background: var(--amber);
  color: var(--groen-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--shadow-lift);
}
.btn--primary:hover { background: #F0B053; color: var(--groen-900); }

.btn--ghost {
  background: rgba(243, 233, 210, .05);
  border-color: var(--hairline-strong);
  color: var(--creme);
  box-shadow: inset 0 1px 0 rgba(243, 233, 210, .08);
}
.btn--ghost:hover { background: rgba(243, 233, 210, .11); color: var(--creme); }

.btn--danger { background: var(--rood); color: var(--kaart); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-lift); }
.btn--danger:hover { background: #E4573F; }

.btn--big { padding: 1rem 1.9rem; font-size: 1.1rem; }
.btn--small { padding: .5rem 1.05rem; font-size: .92rem; }
.btn--full { width: 100%; justify-content: center; }

.btn[disabled] { opacity: .45; pointer-events: none; }

/* knop-in-knop pijltje */
.btn__cap {
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-right: -.55em;
  border-radius: 50%;
  background: rgba(11, 29, 21, .16);
  font-size: .95em;
  transition: transform .45s var(--ease);
}
.btn--ghost .btn__cap { background: rgba(243, 233, 210, .12); }
.btn:hover .btn__cap { transform: translateX(3px); }

/* ---------- double-bezel kaartarchitectuur ---------- */

.bezel {
  background: rgba(243, 233, 210, .045);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 7px;
  box-shadow: var(--shadow-soft);
}

.bezel__in {
  background: var(--groen-800);
  border-radius: var(--r-in);
  box-shadow: inset 0 1px 0 rgba(243, 233, 210, .07);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: rgba(243, 233, 210, .05);
  font-size: .88rem;
  font-weight: 600;
  color: var(--creme-dim);
  white-space: nowrap;
}

.pitjes { color: var(--amber); letter-spacing: .12em; }

/* ---------- formulieren ---------- */

.field { display: block; margin-bottom: 1.1rem; }

.field__label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--creme-dim);
  margin-bottom: .45rem;
}

.field__input {
  width: 100%;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--groen-900);
  color: var(--creme);
  font: inherit;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(232, 161, 60, .18);
}
.field__input::placeholder { color: rgba(201, 191, 168, .5); }

.field__input--code {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  text-align: center;
}

.form-error {
  margin: .9rem 0 0;
  padding: .7rem 1rem;
  border-radius: 12px;
  background: rgba(216, 69, 47, .14);
  border: 1px solid rgba(216, 69, 47, .45);
  color: #F3B9AE;
  font-size: .95rem;
}

/* avatar-kiezer */
.avatars { display: grid; grid-template-columns: repeat(8, 1fr); gap: .45rem; }
.avatars label { position: relative; display: block; cursor: pointer; }
.avatars input { position: absolute; opacity: 0; inset: 0; }
.avatars span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 1.45rem;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--groen-900);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.avatars input:checked + span {
  border-color: var(--amber);
  background: rgba(232, 161, 60, .16);
  transform: scale(1.06);
}
.avatars input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- site header/footer ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad-x);
  max-width: calc(var(--maxw) + 2 * var(--pad-x));
  margin: 0 auto;
}

.brand {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 900;
  font-size: 1.55rem;
  color: var(--creme);
  text-decoration: none;
  letter-spacing: -.02em;
}
.brand__dot { color: var(--amber); }
.brand--foot { font-size: 1.35rem; }
.brand--admin em { font-family: "Gabarito", sans-serif; font-style: normal; font-weight: 500; font-size: .8rem; color: var(--creme-dim); margin-left: .4rem; }

.site-nav { display: flex; align-items: center; gap: .9rem; }
.site-nav__link { color: var(--creme-dim); text-decoration: none; font-weight: 600; }
.site-nav__link:hover { color: var(--creme); }

.site-foot {
  margin-top: clamp(4rem, 10vw, 7rem);
  border-top: 1px solid var(--hairline);
  padding: clamp(2.2rem, 6vw, 3.6rem) var(--pad-x) 2rem;
}
.site-foot__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}
.site-foot__tag { color: var(--creme-dim); max-width: 34ch; margin-top: .6rem; }
.site-foot__nav { display: grid; gap: .5rem; align-content: start; }
.site-foot__nav a { color: var(--creme-dim); text-decoration: none; }
.site-foot__nav a:hover { color: var(--creme); }
.site-foot__nix p { color: var(--creme-dim); font-size: .92rem; margin: .6rem 0 0; }

.nix {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: .02em;
  padding: .2rem .7rem;
  border: 2px solid var(--creme);
  border-radius: 10px;
  transform: rotate(-2deg);
}
.nix b { color: var(--amber); }

.site-foot__base {
  max-width: var(--maxw);
  margin: 2.4rem auto 0;
  color: rgba(201, 191, 168, .6);
  font-size: .9rem;
  border-top: 1px dashed var(--hairline);
  padding-top: 1.3rem;
}

/* ---------- age gate ---------- */

.agegate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(6, 15, 11, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.agegate__card { max-width: 460px; width: 100%; }
.agegate__in { text-align: center; }
.agegate__mark {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--amber);
}
.agegate__q { font-size: 1.7rem; margin: .5rem 0 .3rem; }
.agegate__sub { color: var(--creme-dim); font-size: .98rem; }
.agegate__actions { display: grid; gap: .7rem; margin: 1.3rem 0 1rem; }
.agegate__nix { font-size: .88rem; color: var(--creme-dim); margin: 0; }
.agegate__blocked { margin-top: 1rem; color: var(--creme); font-weight: 600; }

/* ---------- hero ---------- */

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.5rem) var(--pad-x) clamp(3.5rem, 9vw, 7rem);
  position: relative;
}

.hero__eyebrow {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 1.1rem;
}

.hero__title {
  font-size: clamp(2.7rem, 7.2vw, 5.4rem);
  font-weight: 800;
  max-width: 15ch;
  margin-bottom: 1rem;
}

.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--creme-dim);
  max-width: 52ch;
  margin-bottom: 1.8rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__coaster {
  position: absolute;
  right: var(--pad-x);
  top: clamp(2.5rem, 7vw, 5.5rem);
  width: min(300px, 26vw);
  aspect-ratio: 1;
}

/* ---------- het bierviltje ---------- */

.coaster {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5), transparent 42%),
    var(--kaart);
  color: var(--ink);
  display: grid;
  place-content: center;
  gap: .15rem;
  text-align: center;
  transform: rotate(-5deg);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, .12),
    0 26px 60px -24px rgba(0, 0, 0, .8);
}
.coaster::after { /* karton-randje */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(20, 38, 30, .16);
  pointer-events: none;
}
.coaster__ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 2.5px dashed rgba(20, 38, 30, .5);
  pointer-events: none;
}
.coaster__label {
  font-size: clamp(.62rem, 1.4vw, .78rem);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(20, 38, 30, .62);
}
.coaster__code {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 4.2rem);
  letter-spacing: .08em;
  line-height: 1;
  color: var(--ink);
}
.coaster__foot {
  font-size: clamp(.6rem, 1.3vw, .74rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--rood);
}
.coaster--hero { animation: coasterIn 1.1s var(--ease) both .15s; }
.coaster--lost { width: min(240px, 60vw); margin: 0 auto 1.6rem; }

@keyframes coasterIn {
  from { opacity: 0; transform: rotate(-14deg) translateY(26px) scale(.94); }
  to   { opacity: 1; transform: rotate(-5deg) translateY(0) scale(1); }
}

.chip--float {
  position: absolute;
  background: var(--groen-800);
  border-color: var(--hairline-strong);
  color: var(--creme);
  box-shadow: var(--shadow-lift);
  animation: floatIn .9s var(--ease) both;
}
.chip--f1 { right: -6%; top: -4%; transform: rotate(4deg); animation-delay: .45s; }
.chip--f2 { left: -16%; bottom: 16%; transform: rotate(-6deg); animation-delay: .6s; }
.chip--f3 { right: 4%; bottom: -6%; transform: rotate(2deg); animation-delay: .75s; }

@keyframes floatIn {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- secties ---------- */

.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.steps, .cats, .rail, .zero, .start {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 5rem) var(--pad-x);
}

.steps__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

.step {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  background: rgba(243, 233, 210, .03);
}
.step__n {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--kaart);
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.15rem;
  margin-bottom: .8rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  transform: rotate(-4deg);
}
.step h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.step p { color: var(--creme-dim); font-size: .98rem; margin: 0; }

/* start-kaart */
.start__card { max-width: 560px; margin: 0 auto; }
.start__title { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.start__sub { color: var(--creme-dim); margin-bottom: 1.4rem; }

/* categorieën */
.cats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.cat {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.4rem 1.3rem;
  border-radius: var(--r-in);
  border: 1px solid var(--hairline);
  background: var(--groen-800);
  text-decoration: none;
  color: var(--creme);
  transition: transform .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
}
.cat:hover { transform: translateY(-4px); border-color: var(--messing); color: var(--creme); background: var(--groen-700); }
.cat--1, .cat--2, .cat--3, .cat--4, .cat--5, .cat--6 { grid-column: span 2; }
.cat--7 { grid-column: span 6; flex-direction: row; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cat--7 .cat__blurb { flex: 1; }
.cat__name { font-size: 1.3rem; margin: 0; }
.cat__blurb { color: var(--creme-dim); font-size: .95rem; margin: 0; flex: 1; }
.cat__count { color: var(--amber); font-weight: 700; font-size: .88rem; }

/* spellenrail */
.rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rail__all { font-weight: 700; text-decoration: none; }
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 270px);
  gap: 1rem;
  overflow-x: auto;
  padding: .3rem .2rem 1.1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--messing) transparent;
}
.rail__track::-webkit-scrollbar { height: 6px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--messing); border-radius: 99px; }

.gamecard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.35rem 1.25rem 1.2rem;
  border-radius: var(--r-in);
  border: 1px solid var(--hairline);
  background: var(--groen-800);
  color: var(--creme);
  text-decoration: none;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.gamecard:hover { transform: translateY(-4px); border-color: var(--amber); color: var(--creme); }
.gamecard__cat {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--messing);
}
.gamecard__name { font-size: 1.35rem; margin: 0; }
.gamecard__tag { color: var(--creme-dim); font-size: .95rem; margin: 0; flex: 1; }
.gamecard__meta { font-size: .85rem; color: var(--creme-dim); }
.gamecard--wide { scroll-snap-align: unset; }

/* zero / afsluiters */
.zero__inner {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-card);
  padding: clamp(1.8rem, 5vw, 3rem);
  background: rgba(243, 233, 210, .03);
}
.zero h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.zero p { color: var(--creme-dim); max-width: 62ch; }
.zero .btn { margin-top: .6rem; }

/* ---------- subpagina's ---------- */

.pagehead {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.6rem, 7vw, 5rem) var(--pad-x) clamp(1.4rem, 3vw, 2.4rem);
}
.pagehead__title { font-size: clamp(2.3rem, 5.5vw, 4rem); max-width: 16ch; }
.pagehead__sub { color: var(--creme-dim); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 56ch; }
.crumb { font-size: .9rem; color: var(--creme-dim); margin-bottom: .6rem; }
.crumb a { color: var(--messing); text-decoration: none; }
.meta-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.1rem 0 0; }

.catblock { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.6rem, 4vw, 3rem) var(--pad-x); }
.catblock__name { font-size: clamp(1.55rem, 3vw, 2.2rem); margin-bottom: .2rem; }
.catblock__blurb { color: var(--creme-dim); margin-bottom: 1.2rem; }
.catblock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.speldetail__body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(1rem, 3vw, 2rem);
}
.speldetail__desc { font-size: 1.12rem; }
.speldetail__body h2 { font-size: 1.5rem; margin-top: 2rem; }

.howto { counter-reset: stap; list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.howto li {
  counter-increment: stap;
  position: relative;
  padding: .85rem 1rem .85rem 3.4rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(243, 233, 210, .03);
}
.howto li::before {
  content: counter(stap);
  position: absolute;
  left: .85rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kaart);
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-weight: 900;
  transform: rotate(-4deg);
}

.tip { margin: 2.2rem 0 0; }
.tip__in { padding: 1.2rem 1.4rem; }
.tip__label {
  display: inline-block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .3rem;
}
.tip p { margin: 0; }

.speldetail__cta {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.4rem) var(--pad-x) 0;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}
.speldetail__note { width: 100%; color: var(--creme-dim); font-size: .92rem; margin: .4rem 0 0; }

.tekst { max-width: 720px; margin: 0 auto; padding: 0 var(--pad-x) 2rem; }
.tekst h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.tekst p { color: var(--creme-dim); }
.tekst strong { color: var(--creme); }

.joinpage { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.6rem, 8vw, 6rem) var(--pad-x); }
.joinpage__alt { margin: 1.2rem 0 0; color: var(--creme-dim); font-size: .95rem; }

.lostpage { max-width: 560px; margin: 0 auto; padding: clamp(3rem, 10vw, 7rem) var(--pad-x); text-align: center; }
.lostpage h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.lostpage p { color: var(--creme-dim); }
.lostpage .hero__actions { justify-content: center; margin-top: 1.4rem; }

/* ============================================================
   DE KAMER — kroeg-modus
   ============================================================ */

.roombar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem var(--pad-x);
  background: rgba(8, 22, 17, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.roombar__brand {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--creme);
  text-decoration: none;
}
.roombar__brand span { color: var(--amber); }
.roombar__code {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .22em;
  padding: .3rem .8rem .3rem .95rem;
  border-radius: 10px;
  background: var(--kaart);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.roombar__right { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.roombar__status { font-size: .85rem; color: var(--creme-dim); }
.roombar__leave {
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  color: var(--creme-dim);
  padding: .4rem .9rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.roombar__leave:hover { color: var(--creme); border-color: var(--creme-dim); }

.roomapp {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.2rem var(--pad-x) calc(2.2rem + env(safe-area-inset-bottom));
  min-height: calc(100dvh - 60px);
}

.roomapp__boot { display: grid; place-items: center; gap: 1.2rem; padding-top: 14vh; color: var(--creme-dim); }
.coaster--boot { width: min(200px, 55vw); animation: bootPulse 1.6s var(--ease) infinite alternate; }
@keyframes bootPulse { from { transform: rotate(-5deg) scale(1); } to { transform: rotate(-3deg) scale(1.03); } }

.noscript {
  margin: 2rem auto;
  max-width: 480px;
  padding: 1.2rem;
  border: 1px solid var(--rood);
  border-radius: 14px;
  text-align: center;
}

/* -- lobby -- */

.lobby { display: grid; gap: 1.3rem; }

.lobby__coasterwrap { display: grid; place-items: center; padding: .6rem 0 .2rem; }
.coaster--lobby { width: min(320px, 82vw); transform: rotate(-4deg); }
.coaster--lobby .coaster__code { font-size: clamp(2.8rem, 13vw, 4rem); }
.coaster__qr { display: grid; place-items: center; margin-top: .55rem; }
.coaster__qr img, .coaster__qr canvas { border-radius: 6px; }

.lobby__share { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }

.panel {
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  background: var(--groen-800);
  padding: 1.15rem 1.15rem 1.2rem;
}
.panel__title {
  font-family: "Gabarito", sans-serif;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 .8rem;
}

.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.player {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--groen-900);
  animation: floatIn .5s var(--ease) both;
}
.player__avatar { font-size: 1.5rem; line-height: 1; }
.player__name { font-weight: 700; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__sub { display: block; font-size: .74rem; color: var(--creme-dim); font-weight: 600; }
.player--off { opacity: .45; }
.player--you .player__name { color: var(--amber); }
.player__kick {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--creme-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 8px;
}
.player__kick:hover { color: var(--rood); background: rgba(216, 69, 47, .12); }

.gamepick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 190px); gap: .6rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.gamepick__item { position: relative; scroll-snap-align: start; }
.gamepick__item input { position: absolute; opacity: 0; inset: 0; }
.gamepick__card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  height: 100%;
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--groen-900);
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.gamepick__item input:checked + .gamepick__card {
  border-color: var(--amber);
  background: rgba(232, 161, 60, .12);
  transform: translateY(-2px);
}
.gamepick__item input:focus-visible + .gamepick__card { outline: 2px solid var(--amber); outline-offset: 2px; }
.gamepick__name { font-family: "Fraunces", serif; font-weight: 800; font-size: 1.05rem; }
.gamepick__meta { font-size: .78rem; color: var(--creme-dim); }

.switches { display: grid; gap: .7rem; }
.switch { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch__track {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 99px;
  background: var(--groen-900);
  border: 1px solid var(--hairline-strong);
  position: relative;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--creme-dim);
  transition: translate .3s var(--ease), background-color .3s var(--ease);
}
.switch input:checked + .switch__track { background: rgba(232, 161, 60, .3); border-color: var(--amber); }
.switch input:checked + .switch__track::after { translate: 20px 0; background: var(--amber); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--amber); outline-offset: 2px; }
.switch__label { font-weight: 700; }
.switch__hint { display: block; font-size: .82rem; font-weight: 500; color: var(--creme-dim); }

.lobby__start { position: sticky; bottom: calc(.8rem + env(safe-area-inset-bottom)); z-index: 5; }
.lobby__waiting { text-align: center; color: var(--creme-dim); padding: .6rem 0 0; }


/* uitleg-kaart in de lobby */
.uitleg h3 { font-size: 1.55rem; margin: .1rem 0 .2rem; }
.uitleg__tag { color: var(--creme-dim); margin-bottom: .9rem; }
.uitleg .howto { margin-top: 1rem; }
.uitleg .tip { margin-top: 1rem; }
.uitleg__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .2rem; }

/* spellen die (nog) niet passen bij de groepsgrootte */
.gamepick__item input:disabled + .gamepick__card { opacity: .4; cursor: not-allowed; }
.gamepick__lock { font-size: .74rem; font-weight: 700; color: var(--rood); }

.lobby__left, .lobby__right { display: grid; gap: 1.3rem; align-content: start; }

@media (min-width: 1080px) {
  .roomapp { max-width: 1240px; }
  .roomapp--lobby .gamepick { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; }
  .roomapp--lobby .lobby { grid-template-columns: 420px 1fr; align-items: start; gap: 1.6rem; }
  .lobby__left { position: sticky; top: 78px; }
  .coaster--lobby { width: min(360px, 100%); }
}

/* -- gedeelde spel-UI -- */

.gamehead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .4rem 0 1rem; }
.gamehead__name { font-size: 1.35rem; margin: 0; }
.gamehead__round { font-size: .88rem; font-weight: 700; color: var(--messing); letter-spacing: .06em; }

.prompt {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 90, "WONK" 1;
  font-size: clamp(1.45rem, 4.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  margin: .2rem 0 1.2rem;
  text-wrap: balance;
}
.prompt--center { text-align: center; }

.timebar { height: 6px; border-radius: 99px; background: rgba(243, 233, 210, .12); overflow: hidden; margin-bottom: 1.1rem; }
.timebar__fill { height: 100%; background: var(--amber); border-radius: 99px; transform-origin: left; }
.timebar--urgent .timebar__fill { background: var(--rood); }

.choices { display: grid; gap: .7rem; }
.choices--2 { grid-template-columns: 1fr 1fr; }
.choice {
  padding: 1.05rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--hairline-strong);
  background: var(--groen-800);
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  text-align: center;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
  touch-action: manipulation;
}
.choice:hover { border-color: var(--creme-dim); }
.choice:active { transform: scale(.97); }
.choice--picked { border-color: var(--amber); background: rgba(232, 161, 60, .16); }
.choice--good { border-color: var(--go); background: rgba(79, 174, 107, .18); }
.choice--bad { border-color: var(--rood); background: rgba(216, 69, 47, .16); }
.choice[disabled] { opacity: .55; cursor: default; }
.choice--picked[disabled], .choice--good[disabled], .choice--bad[disabled] { opacity: 1; }

.votegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.votegrid .choice { display: flex; align-items: center; gap: .55rem; text-align: left; }
.votegrid .choice .player__avatar { font-size: 1.35rem; }

.waitline { text-align: center; color: var(--creme-dim); font-size: .95rem; margin-top: 1rem; }
.waitline b { color: var(--creme); }

.revealbars { display: grid; gap: .55rem; margin-top: .4rem; }
.rbar { display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; align-items: center; gap: .7rem; }
.rbar__name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar__track { height: 22px; border-radius: 8px; background: rgba(243, 233, 210, .08); overflow: hidden; }
.rbar__fill { height: 100%; background: var(--messing); border-radius: 8px; transition: width .8s var(--ease); }
.rbar--top .rbar__fill { background: var(--amber); }
.rbar__n { font-weight: 800; font-variant-numeric: tabular-nums; }

.verdict {
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--amber);
  background: rgba(232, 161, 60, .1);
  font-weight: 700;
  text-align: center;
}
.verdict--rood { border-color: var(--rood); background: rgba(216, 69, 47, .12); }
.verdict small { display: block; font-weight: 500; color: var(--creme-dim); margin-top: .25rem; }

.namelists { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .6rem; }
.namelist { border: 1px solid var(--hairline); border-radius: 14px; padding: .8rem .9rem; background: var(--groen-800); }
.namelist h4 { font-family: "Gabarito", sans-serif; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--messing); margin: 0 0 .5rem; }
.namelist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.namelist--rood h4 { color: var(--rood); }

.hostbar { margin-top: 1.2rem; display: grid; gap: .6rem; }

.podium { display: grid; gap: .55rem; margin-top: .6rem; }
.podium__row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem .95rem;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--groen-800);
}
.podium__row--1 { border-color: var(--amber); background: rgba(232, 161, 60, .13); }
.podium__pos {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.2rem;
  width: 1.6rem;
  color: var(--messing);
}
.podium__row--1 .podium__pos { color: var(--amber); }
.podium__name { font-weight: 700; flex: 1; }
.podium__val { font-weight: 800; font-variant-numeric: tabular-nums; }

/* -- speelkaart -- */

.pcard {
  width: var(--cw, 74px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  background: var(--kaart);
  color: var(--ink);
  position: relative;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .22), 0 12px 26px -14px rgba(0, 0, 0, .8);
  font-family: "Fraunces", serif;
  flex: none;
}
.pcard--red { color: var(--rood); }
.pcard__corner {
  position: absolute;
  top: 6px;
  left: 7px;
  font-size: calc(var(--cw, 74px) * .2);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.pcard__corner--b { top: auto; left: auto; bottom: 6px; right: 7px; transform: rotate(180deg); }
.pcard__suit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--cw, 74px) * .5);
}
.pcard--back {
  background:
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(243, 233, 210, .2) 34.5%, rgba(243, 233, 210, .2) 37%, transparent 37.5%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(243, 233, 210, .14) 52.5%, rgba(243, 233, 210, .14) 55%, transparent 55.5%),
    var(--groen-700);
  border: 1px solid var(--hairline-strong);
}
.pcard--flip { animation: cardFlip .5s var(--ease); }
@keyframes cardFlip {
  0% { transform: rotateY(88deg) scale(.94); opacity: .4; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
.pcard--big { --cw: min(150px, 38vw); border-radius: 14px; }

.cardrow { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }

/* -- paardenrace: de echte baan -- */

.race { display: grid; gap: 1rem; }

.race__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  min-height: 132px;
}
.race__stage .pcard { --cw: min(96px, 24vw); border-radius: 12px; }
.race__commentary {
  text-align: center;
  color: var(--creme-dim);
  font-style: italic;
  min-height: 1.5em;
  margin: -0.4rem 0 0;
}

.rlanes { display: grid; gap: .6rem; }
.rlane {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .65rem;
}
.rlane__badge { font-size: 1.35rem; font-weight: 800; text-align: center; }
.rlane__badge--red { color: var(--rood); }

.rtrack {
  position: relative;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(243, 233, 210, .05) 46px 47px),
    linear-gradient(rgba(243, 233, 210, .05), rgba(243, 233, 210, .015));
}
.rtrack::before { /* startlijn */
  content: "";
  position: absolute;
  left: 4%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(243, 233, 210, .28);
}
.rfinish {
  position: absolute;
  right: 6px;
  top: 5px;
  bottom: 5px;
  width: 18px;
  border-radius: 5px;
  background: repeating-conic-gradient(var(--kaart) 0 25%, var(--ink) 0 50%) 0 0 / 9px 9px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}

.rhorse {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  left: 4%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--kaart);
  color: var(--ink);
  font-size: 1.5rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  transition: left .9s var(--ease);
  z-index: 2;
}
.rhorse--red { color: var(--rood); }
.rhorse--run { animation: gallop .5s ease-in-out infinite; }
.rhorse--stumble { animation: stumble .8s var(--ease) 1; }
.rhorse--win {
  box-shadow: 0 0 0 3px var(--amber), 0 6px 18px -4px rgba(232, 161, 60, .55), 0 3px 0 rgba(0, 0, 0, .3);
}

@keyframes gallop {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg) translateY(-3px); }
}
@keyframes stumble {
  0% { transform: rotate(0); }
  25% { transform: rotate(-16deg) translateY(2px); }
  55% { transform: rotate(11deg); }
  100% { transform: rotate(0); }
}

.rlane--hurdles { align-items: start; }
.rlane--hurdles .rlane__badge { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--messing); padding-top: .9rem; }
.rhurdles { position: relative; height: 66px; }
.rhurdle {
  position: absolute;
  top: 0;
  translate: -50% 0;
}
.rhurdle .pcard { --cw: 42px; border-radius: 7px; }
.rhurdle .pcard__corner { font-size: .55rem; top: 2px; left: 3px; }
.rhurdle .pcard__corner--b { display: none; }
.rhurdle .pcard__suit { font-size: 1rem; }

.flash {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 80;
  pointer-events: none;
  animation: flashout .55s ease-out forwards;
}
@keyframes flashout { from { opacity: .85; } to { opacity: 0; } }

.betrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1rem; }
.betrow .choice { font-size: 1.7rem; padding: .9rem .4rem; }
.sipsrow { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.sipsrow__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--groen-800);
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
}
.sipsrow__n { font-family: "Fraunces", serif; font-weight: 900; font-size: 2.2rem; min-width: 2.2ch; text-align: center; }

.drawbtn { width: 100%; padding: 1.2rem; font-size: 1.15rem; }
.drawnfeed { display: flex; gap: .4rem; align-items: center; overflow: hidden; margin-top: .2rem; justify-content: center; }
.drawnfeed .pcard { --cw: 44px; }


/* -- spectakel-motor: derby, knikkerbaan, arena -- */

.spect { display: grid; gap: 1rem; position: relative; }

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 6;
  pointer-events: none;
}
.countdown span {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 900;
  font-size: clamp(4rem, 18vw, 8rem);
  color: var(--amber);
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}

.dlane {
  display: grid;
  grid-template-columns: minmax(88px, 116px) 1fr;
  align-items: center;
  gap: .65rem;
}
.dlane__who { display: grid; line-height: 1.05; }
.dlane__avatar { font-size: 1.2rem; }
.dlane__name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--creme-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dhorse { font-size: 1.3rem; background: var(--kaart); }

.svgstage { display: grid; place-items: center; }
.svgstage svg { width: min(430px, 100%); height: auto; }

.knikrail { fill: none; stroke: rgba(243, 233, 210, .16); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.knikrail--in { stroke: var(--groen-900); stroke-width: 11; }
.bumper { fill: var(--messing); }
.cup { fill: none; stroke: var(--kaart); stroke-width: 3; stroke-linecap: round; }
.marble text { font-size: 11px; pointer-events: none; }

.finishlist, .outlist {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  min-height: 2rem;
}

.arena-ring { fill: none; stroke: rgba(243, 233, 210, .22); stroke-width: 6; }
.arena-ring--dash {
  stroke: rgba(232, 161, 60, .4);
  stroke-dasharray: 11 15;
  animation: spinArena 14s linear infinite;
  transform-origin: center;
}
@keyframes spinArena { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .arena-ring--dash { animation: none; }
}


/* -- kwaliteitskit: pinnen, buckets, water, effecten -- */

.knikrail--hl { stroke: rgba(243, 233, 210, .10); stroke-width: 3; }
.knikrail { stroke: url(#railGrad); }

.bumper { transform-box: fill-box; transform-origin: center; transition: transform .22s var(--ease); }
.bumper--hit { transform: scale(1.45); }

.cup--line { fill: none; stroke: var(--kaart); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.bucket { transform-box: fill-box; transform-origin: center bottom; transition: transform .3s var(--ease); }
.bucket--hit { transform: scale(1.14); }
.bucket__big { font-size: 17px; font-weight: 800; fill: var(--creme); font-family: "Fraunces", serif; }
.bucket__big--hot { fill: #E88C7A; }
.bucket__big--goud { fill: var(--amber); }
.bucket__small { font-size: 7px; font-weight: 800; fill: var(--creme-dim); letter-spacing: .06em; text-transform: uppercase; }
.bucket--hit .bucket__small { fill: var(--amber); }

.marble--ball text { font-size: 9px; }

.knockring {
  fill: none;
  stroke: var(--amber);
  stroke-width: 3;
  animation: knock .65s ease-out forwards;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes knock { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(3); } }

.wave { fill: none; stroke: rgba(243, 233, 210, .12); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26 34; animation: waveflow 7s linear infinite; }
.wave--2 { animation-duration: 9s; animation-direction: reverse; opacity: .8; }
.wave--3 { animation-duration: 11s; }
@keyframes waveflow { to { stroke-dashoffset: -120; } }

.ducklabel { font-size: 9px; font-weight: 800; fill: rgba(243, 233, 210, .75); paint-order: stroke; stroke: rgba(8, 22, 17, .8); stroke-width: 2.5px; }

.eddyring {
  fill: none;
  stroke: rgba(126, 216, 199, .6);
  stroke-width: 2.5;
  stroke-dasharray: 6 7;
  animation: eddyspin 1.2s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes eddyspin { to { transform: rotate(360deg) scale(.55); opacity: .2; } }



.tok { transform-box: fill-box; transform-origin: center; }
.tok--boing { animation: boing .15s ease-out; }
@keyframes boing { 40% { transform: scale(1.22, .8); } 100% { transform: scale(1); } }
.tok--panic circle:first-child { animation: panic .18s steps(2) infinite; }
@keyframes panic { 50% { fill: var(--rood); } }

.spect .svgstage svg { width: 100%; }
.spect[data-slug="eendjes"] .svgstage svg { max-width: 780px; }
.spect[data-slug="knikkerbaan"] .svgstage svg { max-width: 520px; }
.spect[data-slug="plinko"] .svgstage svg { max-width: 470px; }
.spect[data-slug="arena"] .svgstage svg { max-width: 560px; }

.lelie ellipse { fill: #1E4A3A; stroke: rgba(243,233,210,.18); stroke-width: 1.2; }
.lelie path { stroke: #10303B; stroke-width: 3; fill: none; }
.riet path { stroke: rgba(169, 139, 79, .55); stroke-width: 2.2; fill: none; stroke-linecap: round; }

.standings { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; min-height: 1.9rem; }
.chip--lead { border-color: var(--amber); color: var(--amber); }

.dlane__rank {
  font-size: .68rem;
  font-weight: 800;
  color: var(--amber);
  min-height: .9em;
}

.rhorse::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -9px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .wave, .eddyring { animation: none; }
}


/* -- biertrein -- */
.btstop { text-align: center; color: var(--messing); font-weight: 700; letter-spacing: .04em; margin: 0 0 .5rem; }
.twiel { fill: #14261E; stroke: rgba(243,233,210,.4); stroke-width: 1.5; }
.btrain--moving .twiel { animation: wielspin .5s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wielspin { to { transform: rotate(360deg); } }
.puff { fill: rgba(243,233,210,.16); opacity: 0; }
.btrain--moving .puff { animation: puffup 1.3s ease-out infinite; }
.puff--2 { animation-delay: .4s !important; }
.puff--3 { animation-delay: .8s !important; }
@keyframes puffup { 0% { opacity: .7; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-26px) scale(1.5); } }
.spect[data-slug="biertrein"] .svgstage svg { max-width: 720px; }
.btlog { display: grid; gap: .4rem; margin: .4rem 0 1rem; }
.btlog__row { display: flex; align-items: baseline; gap: .6rem; padding: .55rem .8rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--groen-800); font-size: .92rem; }
.btlog__title { font-weight: 700; }
.btlog__keuze { margin-left: auto; color: var(--creme-dim); font-size: .84rem; text-align: right; }

/* -- bomdoorgeven -- */
.bomring { position: relative; width: min(340px, 88vw); aspect-ratio: 1; margin: .4rem auto; }
.bomspeler { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: .1rem; width: 64px; }
.bomspeler__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--groen-800); border: 2px solid var(--hairline-strong); font-size: 1.35rem; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.bomspeler__naam { font-size: .68rem; font-weight: 700; color: var(--creme-dim); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bomspeler--houder .bomspeler__avatar { border-color: var(--rood); box-shadow: 0 0 0 4px rgba(216,69,47,.25); }
.bomspeler--lef .bomspeler__avatar { border-color: var(--amber); }
.bomb { position: absolute; translate: -50% -130%; font-size: 2rem; z-index: 3; transition: left .55s var(--ease), top .55s var(--ease); filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.bomb--tik { animation: bombtik .18s ease-out; }
@keyframes bombtik { 40% { transform: scale(1.18) rotate(-6deg); } }
.bomb__vonk { position: absolute; top: -4px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: vonk .5s steps(2) infinite; }
@keyframes vonk { 50% { background: #fff; transform: scale(1.5); } }
.bomhud { display: grid; gap: .7rem; }
.bomhud__alarm { text-align: center; font-family: "Fraunces", serif; font-weight: 900; font-size: 1.5rem; color: var(--rood); margin: 0; animation: alarm 1s steps(2) infinite; }
@keyframes alarm { 50% { opacity: .45; } }
.bomhold { position: relative; overflow: hidden; }
.bomhold .bomhold__ring { position: absolute; inset: 0; background: rgba(255,255,255,.22); transform: scaleX(0); transform-origin: left; }
.bomhold.is-holding .bomhold__ring { animation: lefvullen 1s linear infinite; }
@keyframes lefvullen { to { transform: scaleX(1); } }
.boomkaart { text-align: center; padding: 1.4rem 1rem; border: 2px solid var(--rood); border-radius: var(--r-card); background: rgba(216,69,47,.12); }
.boomkaart__boem { font-family: "Fraunces", serif; font-weight: 900; font-size: clamp(2rem, 9vw, 3rem); color: var(--rood); display: block; }
.boomkaart__wie { font-weight: 700; font-size: 1.1rem; margin: .5rem 0 0; }
.boomkaart__lef { color: var(--amber); font-weight: 700; margin: .6rem 0 0; }


/* -- rondje van de zaak -- */
.rcard {
  position: relative;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  background: var(--groen-800);
  padding: 1.5rem 1.4rem 1.6rem 1.7rem;
  margin: .3rem 0 1rem;
  animation: kaartval .35s var(--ease);
}
.rcard::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--accent, var(--amber));
}
.rcard__label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent, var(--amber));
  margin-bottom: .55rem;
}
.rcard__text {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 60;
  font-weight: 640;
  font-size: clamp(1.25rem, 4.6vw, 1.6rem);
  line-height: 1.35;
  margin: 0;
}
@keyframes kaartval {
  from { opacity: 0; transform: translateY(10px) rotate(-.6deg); }
  to { opacity: 1; transform: none; }
}
.rrules { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.rrule { border-color: var(--amber); font-size: .78rem; white-space: normal; text-align: left; line-height: 1.3; }


/* -- uitleg-sheet & start-vraag -- */
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(4, 12, 8, .72); backdrop-filter: blur(2px); }
.sheet__card {
  position: relative;
  width: min(580px, 100%);
  max-height: min(86vh, 100%);
  margin: 0 .6rem;
  animation: sheetup .32s var(--ease);
}
.sheet__in {
  max-height: calc(86vh - 22px);
  overflow-y: auto;
  padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
}
.sheet__in h3 { font-size: 1.5rem; margin: .1rem 2rem .2rem 0; }
.sheet__in--ask { display: grid; gap: .7rem; }
.sheet__in--ask h3 { margin-right: 0; }
.sheet__x {
  position: absolute;
  top: .7rem; right: .8rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--groen-800);
  color: var(--creme);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 2;
}
.sheet .howto { margin-top: .9rem; }
.sheet .tip { margin: 1rem 0; }
@keyframes sheetup { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (min-width: 720px) {
  .sheet { place-items: center; }
  .sheet__card { margin: 0 1rem; }
}

/* -- rad -- */

.wheelwrap { display: grid; place-items: center; padding: .6rem 0 1rem; }
.wheel {
  position: relative;
  width: min(320px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid var(--kaart);
  box-shadow: 0 3px 0 rgba(0,0,0,.3), var(--shadow-soft), inset 0 0 0 2px rgba(20,38,30,.35);
  overflow: hidden;
  transition: transform 3.6s cubic-bezier(.12, .68, .09, .99);
}
.wheel__seg {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 50%, 50% 0%, 82.4% 0%);
  transform-origin: 50% 50%;
  display: grid;
}
.wheel__seg span {
  justify-self: center;
  margin-top: 9%;
  transform: rotate(18deg);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--creme);
  max-width: 74px;
  text-align: center;
  line-height: 1.15;
}
.wheel__seg:nth-child(odd) { background: var(--groen-700); }
.wheel__seg:nth-child(even) { background: var(--groen-800); }
.wheel__seg--hot { background: var(--rood-deep) !important; }
.wheel__seg--gold { background: var(--amber-deep) !important; }
.wheel__seg--gold span { color: var(--groen-900); }
.wheel__hub {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--kaart);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: .95rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  z-index: 2;
}
.wheel__needle {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 26px solid var(--rood);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
  z-index: 3;
}
.wheel__needle--tik { animation: naaldtik .12s ease-out; transform-origin: 50% 0; }
@keyframes naaldtik { 40% { transform: rotate(14deg); } }

.wheelwrap { position: relative; }

/* -- reactie -- */

.reactpad {
  display: grid;
  place-content: center;
  gap: .4rem;
  text-align: center;
  min-height: min(58vh, 460px);
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: var(--rood-deep);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color .12s linear;
}
.reactpad--go { background: var(--go); }
.reactpad--done { background: var(--groen-800); cursor: default; }
.reactpad--false { background: #5c1811; cursor: default; }
.reactpad__big {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 3.4rem);
  color: var(--kaart);
}
.reactpad__sub { color: rgba(246, 238, 218, .85); font-weight: 600; padding: 0 1.4rem; }
.reactpad__ms { font-variant-numeric: tabular-nums; }

/* -- quiz -- */

.quizopts { display: grid; gap: .7rem; }
.quizopts .choice { display: flex; align-items: center; gap: .8rem; text-align: left; font-size: 1rem; }
.quizopts .choice__key {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kaart);
  color: var(--ink);
  font-family: "Fraunces", serif;
  font-weight: 900;
}
.quizscore { display: flex; justify-content: space-between; font-size: .9rem; color: var(--creme-dim); margin-bottom: .5rem; }

/* -- meme -- */

.memewrite textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--groen-900);
  color: var(--creme);
  font: inherit;
}
.memewrite textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232,161,60,.18); }
.memewrite__count { text-align: right; font-size: .82rem; color: var(--creme-dim); margin-top: .3rem; }
.entry {
  padding: .95rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--groen-800);
  font-size: 1.02rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.entry:active { transform: scale(.98); }
.entry--picked { border-color: var(--amber); background: rgba(232, 161, 60, .14); }
.entry--mine { opacity: .55; cursor: default; }
.entry__by { display: block; margin-top: .4rem; font-size: .82rem; font-weight: 700; color: var(--messing); }
.entry__votes { float: right; font-weight: 800; color: var(--amber); }
.entrylist { display: grid; gap: .6rem; }

/* -- kings & bus -- */

.kingsrow { display: flex; align-items: center; justify-content: center; gap: 1.4rem; padding: .6rem 0 1rem; }
.kingsmeta { display: grid; gap: .3rem; font-size: .92rem; color: var(--creme-dim); }
.kingsmeta b { color: var(--creme); }
.rolechips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.rolechips .chip { background: rgba(232, 161, 60, .12); border-color: var(--amber); color: var(--creme); }
.rulecard { text-align: center; margin-top: .4rem; }
.rulecard__title { font-size: 1.5rem; margin: .6rem 0 .2rem; }
.rulecard__text { color: var(--creme-dim); max-width: 44ch; margin: 0 auto; }
.kingcups { display: flex; gap: .35rem; justify-content: center; margin-top: .7rem; font-size: 1.2rem; }
.kingcups span { opacity: .28; }
.kingcups span.on { opacity: 1; }

.busboard { display: grid; gap: .7rem; }
.busstep { display: flex; gap: .45rem; justify-content: center; }
.busstep .pcard { --cw: min(58px, 13vw); }

/* -- paranoia / waarheid -- */

.bigname {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 900;
  font-size: clamp(2.4rem, 11vw, 4.4rem);
  text-align: center;
  color: var(--amber);
  margin: 1rem 0 .4rem;
  line-height: 1;
}
.secretbox {
  border: 1px dashed var(--messing);
  border-radius: var(--r-in);
  padding: 1.2rem 1.3rem;
  background: rgba(169, 139, 79, .08);
  margin-bottom: 1rem;
}
.secretbox__label { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--messing); display: block; margin-bottom: .35rem; }

/* -- toast -- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 50;
  background: var(--kaart);
  color: var(--ink);
  font-weight: 700;
  padding: .75rem 1.3rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lift);
  max-width: min(92vw, 480px);
  text-align: center;
  animation: toastIn .4s var(--ease) both;
}
.toast--err { background: var(--rood); color: var(--kaart); }
@keyframes toastIn { from { opacity: 0; translate: -50% 12px; } to { opacity: 1; translate: -50% 0; } }

/* ============================================================
   ADMIN
   ============================================================ */

.admin-body { background: var(--groen-900); }
.admin-shell { max-width: 1080px; margin: 0 auto; padding: 1.2rem var(--pad-x) 3rem; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0 1.4rem; flex-wrap: wrap; }
.admin-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.admin-nav a { color: var(--creme-dim); text-decoration: none; font-weight: 600; }
.admin-nav a:hover { color: var(--creme); }
.admin-nav__out { color: var(--rood) !important; }

.admin-auth { display: grid; place-items: center; min-height: 72dvh; }
.admin-auth .bezel { width: min(420px, 100%); }
.admin-auth__in h1 { font-size: 1.8rem; }
.admin-auth__sub { color: var(--creme-dim); margin-bottom: 1.2rem; }

.admin-page h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.admin-count { font-family: "Gabarito", sans-serif; font-size: .85rem; font-weight: 600; color: var(--creme-dim); margin-left: .5rem; }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; margin: 1.2rem 0 1.8rem; }
.admin-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  background: var(--groen-800);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .15rem;
}
.admin-card__n { font-family: "Fraunces", serif; font-weight: 900; font-size: 2rem; color: var(--amber); }
.admin-card__l { font-size: .85rem; color: var(--creme-dim); }

.admin-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-chart {
  grid-column: 1 / -1;
  border: 1px solid var(--hairline);
  border-radius: var(--r-in);
  background: var(--groen-800);
  padding: 1.1rem 1.2rem 1.3rem;
}
.admin-chart--half { grid-column: span 1; }
.admin-chart h2 { font-size: 1.15rem; margin-bottom: .8rem; }

.admin-tablewrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-in); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--groen-800); font-size: .95rem; }
.admin-table th, .admin-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--hairline); }
.admin-table th { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--messing); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-code { font-family: "Fraunces", serif; font-weight: 800; letter-spacing: .12em; }
.admin-badge { padding: .18rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 700; border: 1px solid var(--hairline-strong); }
.admin-badge--playing { border-color: var(--go); color: #9fd8b0; }
.admin-badge--lobby { border-color: var(--amber); color: var(--amber); }
.admin-note, .admin-empty { color: var(--creme-dim); font-size: .9rem; margin-top: .9rem; }
.admin-flash { padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--go); background: rgba(79, 174, 107, .12); color: #C4E8CF; }
.admin-block { margin-top: 1.2rem; }
.admin-block__in h2 { font-size: 1.25rem; }
.admin-form { max-width: 460px; margin-top: .8rem; }
.admin-form--row { display: flex; align-items: end; gap: .8rem; flex-wrap: wrap; max-width: none; }
.admin-form--row .field { flex: 1 1 200px; margin-bottom: 0; }
.admin-qr { display: inline-block; padding: 12px; background: var(--kaart); border-radius: 14px; margin: .6rem 0; }
.admin-secret code { font-size: 1.05rem; letter-spacing: .06em; color: var(--amber); }
.admin-recovery { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.admin-recovery code { display: block; padding: .5rem .7rem; border: 1px dashed var(--messing); border-radius: 10px; text-align: center; letter-spacing: .08em; }

/* ============================================================
   MOTION & RESPONSIVE
   ============================================================ */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .steps__row { grid-template-columns: 1fr; }
  .cats__grid { grid-template-columns: 1fr 1fr; }
  .cat--1, .cat--2, .cat--3, .cat--4, .cat--5, .cat--6, .cat--7 { grid-column: span 1; }
  .cat--7 { flex-direction: column; }
  .catblock__grid { grid-template-columns: 1fr 1fr; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .hero__coaster { position: static; width: min(280px, 70vw); margin: 2.6rem auto 0; }
  .admin-charts { grid-template-columns: 1fr; }
  .admin-chart--half { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .site-nav__link { display: none; }
  .catblock__grid { grid-template-columns: 1fr; }
  .cats__grid { grid-template-columns: 1fr; }
  .site-foot__grid { grid-template-columns: 1fr; }
  .avatars { grid-template-columns: repeat(6, 1fr); }
  .namelists { grid-template-columns: 1fr; }
  .choices--2 { grid-template-columns: 1fr; }
  .betrow { grid-template-columns: repeat(4, 1fr); }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

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