/* Het Rad: pagina-specifieke stijl (basis staat in /css/basis.css) */

.geluid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  color: var(--creme);
  background: transparent;
  border: 2px solid rgba(243, 230, 200, .3);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.geluid:hover { border-color: var(--creme); }
.geluid:focus-visible { border-radius: 999px; }
.geluid svg { width: 22px; height: 22px; flex: none; }
.geluid .icoon-uit { display: none; }
.geluid[aria-pressed="false"] .icoon-aan { display: none; }
.geluid[aria-pressed="false"] .icoon-uit { display: block; }
.geluid[aria-pressed="false"] { opacity: .75; }

.rad-main {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--rand) 24px;
  text-align: center;
}

.rad-kop { margin-bottom: 14px; }
.rad-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--ijs-licht);
}
.rad-titel {
  margin: 0;
  font-family: var(--font-schaduw);
  font-weight: 400;
  font-size: clamp(2.6rem, 14vw, 4.2rem);
  line-height: 1;
  text-shadow: 0 5px 0 rgba(200, 50, 43, .55);
}
.rad-uitleg {
  margin: 8px 0 0;
  font-size: .95rem;
  color: rgba(243, 230, 200, .72);
}

/* ---------- het rad ---------- */

.podium {
  position: relative;
  width: min(100%, 480px, 58svh);
  min-width: min(100%, 300px);
  margin: 0 auto;
}
.podium::before {
  /* zachte gloed achter het rad */
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  box-shadow: 0 0 70px 10px rgba(47, 111, 134, .45), 0 24px 40px rgba(0, 0, 0, .55);
}
.rad-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rad-wrap.sleept { cursor: grabbing; }
.rad-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rad-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
}
.rad-draaier {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: rotate(0deg);
}
.rad-boven { overflow: visible; pointer-events: none; }
#rad text { pointer-events: none; }

.lamp { fill: #f3e6c8; }
.lamp.b { fill: #c8322b; }
.draait .lamp.a { animation: knipper .36s steps(1) infinite; }
.draait .lamp.b { animation: knipper .36s steps(1) infinite reverse; animation-delay: .18s; }
.winnaar-glans { animation: glans 1s ease-in-out 3; }

@keyframes knipper { 50% { opacity: .25; } }
@keyframes glans { 50% { opacity: 0; } }

.naaf { transition: transform .15s; transform-origin: 0 0; transform-box: view-box; }
.rad-wrap:active .naaf { transform: scale(.92); }

/* ---------- uitkomst onder het rad ---------- */

.live {
  min-height: 3.2em;
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
.live-leeg { color: rgba(243, 230, 200, .6); font-weight: 500; }
.live b {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--creme);
  letter-spacing: .02em;
}
.live .live-label { color: var(--ijs-licht); margin-right: 6px; }

.knop-draai {
  min-width: min(100%, 260px);
  min-height: 66px;
  margin: 6px 0 0;
  font-size: 1.7rem;
  letter-spacing: .06em;
}

/* ---------- beheer ---------- */

.beheer {
  margin-top: 40px;
  padding: 22px 16px 20px;
  background: rgba(27, 37, 47, .92);
  border: 2px solid rgba(243, 230, 200, .12);
  border-radius: 26px;
  text-align: left;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}
.beheer-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.beheer h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
}
.teller {
  flex: none;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ijs-licht);
}
.beheer-velden { border: 0; margin: 0; padding: 0; min-width: 0; }
.beheer-velden:disabled { opacity: .6; }

.toevoegen { display: flex; gap: 10px; }
.beheer input[type=text] {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px; /* voorkomt inzoomen op iOS */
  color: var(--creme);
  background: var(--nacht);
  border: 2px solid var(--ijs);
  border-radius: 14px;
}
.beheer input[type=text]::placeholder { color: rgba(243, 230, 200, .45); }
.beheer input[type=text]:focus-visible { outline: 3px solid var(--creme); outline-offset: 1px; border-radius: 14px; }
.knop-plus {
  flex: none;
  width: 56px;
  min-height: 52px;
  padding: 0;
  font-size: 1.8rem;
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--nacht);
}
.knop-plus:active { box-shadow: 0 1px 0 var(--nacht); transform: translateY(3px); }

.lijst { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: item; }
.lijst li {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.lijst .stip {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(243, 230, 200, .5);
}
.beheer .lijst input[type=text] {
  min-height: 48px;
  padding: 8px 12px;
  border-color: transparent;
  background: rgba(20, 27, 34, .9);
}
.beheer .lijst input[type=text]:focus { border-color: var(--ijs); }
.weg {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--creme);
  background: transparent;
  border: 2px solid rgba(243, 230, 200, .22);
  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.weg svg { width: 18px; height: 18px; }
.weg:hover { border-color: var(--rood); color: #ff8a80; }
.weg:focus-visible { outline: 3px solid var(--creme); outline-offset: 2px; border-radius: 14px; }

.melding {
  min-height: 1.5em;
  margin: 6px 0 0;
  text-align: center;
  font-weight: 700;
  color: var(--creme);
}
.acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}
.acties .knop { flex: 1 1 200px; font-size: 1rem; }
.hint {
  margin: 14px 0 0;
  font-size: .86rem;
  text-align: center;
  color: rgba(243, 230, 200, .62);
}

/* ---------- uitkomst-dialoog ---------- */

.uitkomst {
  width: min(calc(100% - 32px), 440px);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nacht);
  overflow: visible;
}
.uitkomst::backdrop { background: rgba(10, 14, 18, .72); }
.uitkomst[open] .uitkomst-kaart { animation: pop .45s cubic-bezier(.2, 1.5, .4, 1); }
.uitkomst-kaart {
  position: relative;
  padding: 30px 22px 24px;
  background: var(--creme);
  border: 4px solid var(--nacht);
  border-radius: 28px;
  box-shadow: 8px 8px 0 var(--rood), 0 30px 60px rgba(0, 0, 0, .55);
  text-align: center;
}
.uitkomst-kaart::before {
  /* stempelrand binnenin, net een ticket */
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(20, 27, 34, .2);
  border-radius: 20px;
  pointer-events: none;
}
.uitkomst-klein {
  margin: 0;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .14em;
  color: var(--ijs);
}
.uitkomst-tekst {
  margin: 12px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  line-height: 1.12;
  color: var(--rood);
  /* nooit midden in een woord breken; rad.js verkleint de tekst tot hij past */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}
.uitkomst-acties { position: relative; display: flex; flex-direction: column; gap: 10px; }
.knop-donker { color: var(--nacht); border-color: rgba(20, 27, 34, .35); }
.knop-donker:focus-visible { outline-color: var(--nacht); }

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

@keyframes pop {
  from { transform: scale(.55) rotate(-6deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@media (min-width: 720px) {
  .rad-main { max-width: 620px; }
  .beheer { padding: 26px 24px 22px; }
}