/* Groot scherm (tv). Alles schaalt mee met de schermhoogte. */
body.tv { overflow: hidden; height: 100vh; cursor: default; }
body.tv.idle { cursor: none; }

.tv-wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr minmax(260px, 25vw);
  gap: 2.4vh; height: 100vh; padding: 2.6vh 2.6vh 2.6vh 3.4vh;
}

/* ---------- Podium links ---------- */
.stage { position: relative; display: flex; flex-direction: column; min-width: 0; }
.stage-head { text-align: left; }
.stage-head h1 {
  font-family: var(--display); font-weight: 400; margin: 0; line-height: 1;
  font-size: 7vh; color: var(--pumpkin); letter-spacing: .3vh;
  text-shadow: 0 0 3vh rgba(255, 122, 26, .6), 0 .6vh 0 #6b1d00;
  animation: titleFlicker 7s infinite;
}
@keyframes titleFlicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
.stage-head p { margin: .8vh 0 0; color: var(--mist); font-size: 2.6vh; font-weight: 700; }

.scene {
  position: absolute; inset: 12vh 0 3vh 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.scene.on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
/* Stand en collage houden onderaan ruimte vrij voor de pompoenen */
#scene-ranking, #scene-secret { bottom: 9vh; }

.progress { position: absolute; left: 0; right: 0; bottom: 0; height: .6vh; border-radius: 1vh; background: rgba(255, 255, 255, .06); overflow: hidden; }
.progress div { height: 100%; width: 0; background: linear-gradient(90deg, var(--pumpkin-deep), var(--ember)); box-shadow: 0 0 1.4vh var(--pumpkin); }

/* Stand */
.ranking { display: flex; flex-direction: column; gap: 1.2vh; }
.rank {
  display: grid; grid-template-columns: 7vh 9vh 1fr auto; align-items: center; gap: 2vh;
  padding: 1vh 2.4vh 1vh 1vh; border-radius: 2vh;
  background: var(--card); border: 1px solid var(--card-edge);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateX(-6vh);
}
.scene.on .rank { animation: slideIn .6s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes slideIn { to { opacity: 1; transform: none; } }
.rank .bar { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(255, 122, 26, .32), rgba(255, 122, 26, .04)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1) .3s; }
.rank > *:not(.bar) { position: relative; }
.rank .pos { font-family: var(--display); font-size: 5vh; text-align: center; color: var(--mist); }
.rank img { width: 9vh; height: 9vh; object-fit: cover; border-radius: 1.4vh; }
.rank .nm { font-size: 3.2vh; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .vt { font-size: 3.2vh; font-weight: 800; color: var(--ember); white-space: nowrap; }
.rank.first { grid-template-columns: 7vh 13vh 1fr auto; border-color: var(--pumpkin); box-shadow: 0 0 0 .25vh var(--pumpkin), 0 0 4vh rgba(255, 122, 26, .45); }
.rank.first img { width: 13vh; height: 13vh; }
.rank.first .nm { font-size: 4.4vh; }
.rank.first .vt { font-size: 4vh; }
.more { color: var(--mist); font-size: 2.4vh; margin: 1.6vh 0 0; text-align: center; }

/* Geheime stand: collage */
.collage { display: flex; flex-wrap: wrap; gap: 1.6vh; align-content: center; height: 100%; overflow: hidden; }
.collage { justify-content: center; margin: 0 auto; }
.collage figure { margin: 0; width: var(--card, 19vh); background: var(--card); border: 1px solid var(--card-edge); border-radius: 1.8vh; overflow: hidden; opacity: 0; transform: scale(.8) rotate(-3deg); }
.scene.on .collage figure { animation: popIn .5s cubic-bezier(.2, .9, .3, 1.4) forwards; }
.collage figure:nth-child(even) { --r: 3deg; }
@keyframes popIn { to { opacity: 1; transform: rotate(var(--r, -1.5deg)); } }
.collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.collage figcaption { padding: .8vh 1.2vh; font-weight: 800; font-size: clamp(12px, calc(var(--card, 19vh) / 10), 4vh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grote foto */
.spot { display: flex; align-items: center; justify-content: center; border-radius: 3vh; overflow: hidden; }
.spot-bg { position: absolute; inset: -5%; background-size: cover; background-position: center; filter: blur(4vh) brightness(.45) saturate(1.3); }
.spot-fig { position: relative; margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; }
.spot-fig img {
  max-height: calc(100% - 13vh); max-width: 100%; border-radius: 2.4vh;
  box-shadow: 0 0 0 .4vh rgba(255, 122, 26, .7), 0 0 8vh rgba(255, 122, 26, .45), 0 3vh 6vh rgba(0, 0, 0, .6);
}
.scene.on .spot-fig img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(.92) rotate(-1deg); } to { transform: scale(1.02) rotate(.5deg); } }
.spot-fig figcaption { text-align: center; }
.spot-fig figcaption span { display: block; font-family: var(--display); font-size: 7vh; line-height: 1; color: var(--bone); text-shadow: 0 0 2vh rgba(255, 122, 26, .8), 0 .5vh 0 #000; }
.spot-fig figcaption small { display: block; margin-top: .8vh; font-size: 2.8vh; font-weight: 800; color: var(--ember); }
.spot-tag { position: absolute; top: 2vh; left: 50%; transform: translateX(-50%) rotate(-3deg); z-index: 2; padding: .8vh 2.4vh; border-radius: 99px; background: var(--slime); color: #10300a; font-weight: 800; font-size: 2.6vh; box-shadow: 0 0 3vh rgba(155, 229, 100, .6); }
.spot-tag:empty { display: none; }

.empty-tv { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 4vh; color: var(--mist); }
.empty-tv .ghosty { font-size: 16vh; animation: float 3s ease-in-out infinite; }

/* Onthulling */
.drumroll { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.drumroll p { font-family: var(--display); font-size: 10vh; margin: 0; color: var(--pumpkin); text-shadow: 0 0 4vh rgba(255, 122, 26, .8); animation: pulse .5s ease-in-out infinite alternate; }
.drums { font-size: 14vh; animation: drum .12s linear infinite alternate; }
@keyframes pulse { to { transform: scale(1.06); } }
@keyframes drum { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-1vh); } }
.winner { display: flex; flex-direction: column; align-items: center; }
.winner-title { font-family: var(--display); font-size: 9vh; margin: 0 0 2vh; color: #ffd34d; text-shadow: 0 0 4vh rgba(255, 211, 77, .9), 0 .6vh 0 #6b4a00; animation: pulse 1s ease-in-out infinite alternate; }
.winners { flex: 1; min-height: 0; display: flex; gap: 3vh; justify-content: center; align-items: flex-start; width: 100%; }
.winners figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.winners img { max-height: calc(100% - 10vh); max-width: 100%; border-radius: 2.4vh; box-shadow: 0 0 0 .5vh #ffd34d, 0 0 10vh rgba(255, 211, 77, .6); }
.scene.on .winners img { animation: winnerIn 1.2s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes winnerIn { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.winners figcaption { font-family: var(--display); font-size: 6vh; margin-top: 1.4vh; text-align: center; color: var(--bone); text-shadow: 0 0 2vh rgba(255, 211, 77, .7); }
.winners figcaption small { display: block; font-family: var(--body); font-weight: 800; font-size: 2.6vh; color: #ffd34d; }

/* ---------- Zijbalk rechts ---------- */
.side {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(23, 17, 42, .85); border: 1px solid var(--card-edge); border-radius: 3vh;
  padding: 2.6vh 2vh; backdrop-filter: blur(6px); min-height: 0; overflow: hidden;
}
.side h2 { font-family: var(--display); font-weight: 400; color: var(--pumpkin); font-size: 5vh; margin: 0 0 1.6vh; text-shadow: 0 0 2vh rgba(255, 122, 26, .5); }
.qr { background: var(--bone); padding: 1.6vh; border-radius: 2vh; box-shadow: 0 0 4vh rgba(255, 122, 26, .35); animation: qrGlow 3s ease-in-out infinite alternate; }
@keyframes qrGlow { to { box-shadow: 0 0 6vh rgba(255, 122, 26, .65); } }
.qr img, .qr canvas { display: block; width: min(28vh, 20vw) !important; height: min(28vh, 20vw) !important; }
.url { margin: 1.4vh 0 0; color: var(--bone); font-weight: 800; font-size: 2.2vh; word-break: break-all; }
.stats { margin-top: 1vh; font-size: 2.2vh; font-weight: 700; color: var(--mist); }
.stats span { color: var(--ember); font-weight: 800; }
.top3 { width: 100%; margin-top: 2.4vh; display: flex; flex-direction: column; gap: 1vh; }
.top3 h3 { margin: 0 0 .4vh; font-size: 2vh; color: var(--mist); text-transform: uppercase; letter-spacing: .3vh; }
.mini { display: grid; grid-template-columns: 4vh 6vh 1fr auto; gap: 1.2vh; align-items: center; text-align: left; background: var(--card); border-radius: 1.4vh; padding: .6vh 1.2vh .6vh .6vh; }
.mini b { font-size: 3vh; text-align: center; }
.mini img { width: 6vh; height: 6vh; object-fit: cover; border-radius: 1vh; }
.mini span { font-weight: 800; font-size: 2vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini em { font-style: normal; font-weight: 800; color: var(--ember); font-size: 2vh; }

/* ---------- Pompoenen ---------- */
.pumpkin { position: absolute; z-index: 3; pointer-events: none; overflow: visible; }
.pumpkin .rib { fill: #e2620d; stroke: #8a3300; stroke-width: 1.5; }
.pumpkin .rib.mid { fill: #f47a1c; }
.pumpkin .stem { fill: #4d6b1e; }
.pumpkin .face { fill: #ffd25a; fill-rule: evenodd; filter: drop-shadow(0 0 4px #ffb400) drop-shadow(0 0 10px #ff7a00); animation: flicker 2.3s infinite; }
.pumpkin { filter: drop-shadow(0 0 2.4vh rgba(255, 120, 0, .55)); animation: pumpkinGlow 2.3s infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; fill: #ffd25a; } 8% { opacity: .75; } 12% { opacity: 1; } 30% { fill: #ffbf3a; }
  47% { opacity: .85; } 50% { opacity: 1; fill: #ffe27a; } 72% { opacity: .7; } 76% { opacity: 1; }
}
@keyframes pumpkinGlow { 0%, 100% { filter: drop-shadow(0 0 2.4vh rgba(255, 120, 0, .55)); } 50% { filter: drop-shadow(0 0 4vh rgba(255, 150, 0, .8)); } 72% { filter: drop-shadow(0 0 1.6vh rgba(255, 120, 0, .4)); } }
.p-left { left: -3vh; bottom: -4.2vh; width: 12.5vh; transform: rotate(-8deg); }
.p-right { right: -2.6vh; bottom: -4vh; width: 10vh; transform: rotate(9deg); animation-delay: -1.1s; }
.p-right .face { animation-delay: -1.1s; }
.side .pumpkin { position: relative; width: 12vh; margin-top: auto; flex: none; }
.p-side .face { animation-delay: -.6s; }

/* ---------- Mist ---------- */
.fog { position: fixed; inset: auto 0 0 0; height: 45vh; z-index: 1; pointer-events: none; overflow: hidden; }
.fog div { position: absolute; bottom: -10vh; width: 200%; height: 100%; background: radial-gradient(ellipse at 20% 80%, rgba(190, 170, 230, .16), transparent 55%), radial-gradient(ellipse at 60% 90%, rgba(190, 170, 230, .12), transparent 50%), radial-gradient(ellipse at 90% 85%, rgba(190, 170, 230, .14), transparent 55%); animation: fog 40s linear infinite; }
.fog div + div { animation-duration: 65s; animation-direction: reverse; opacity: .7; bottom: -16vh; }
@keyframes fog { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Onweer ---------- */
.flash { position: fixed; inset: 0; z-index: 30; background: #e9e6ff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.flash.go { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 4% { opacity: .85; } 10% { opacity: .1; } 16% { opacity: .7; } 30% { opacity: 0; } 42% { opacity: .25; } 60%, 100% { opacity: 0; } }
.bolt { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 31; pointer-events: none; opacity: 0; }
.bolt.go { animation: bolt 1.1s ease-out; }
@keyframes bolt { 0% { opacity: 0; } 4% { opacity: 1; } 10% { opacity: .2; } 16% { opacity: 1; } 34%, 100% { opacity: 0; } }
.bolt path { fill: none; stroke: #fff; stroke-linejoin: bevel; filter: drop-shadow(0 0 6px #b9a7ff) drop-shadow(0 0 20px #8f7bff); }
.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translate(-.3vh, .1vh); } 20%, 80% { transform: translate(.6vh, -.2vh); } 30%, 50%, 70% { transform: translate(-1vh, .3vh); } 40%, 60% { transform: translate(1vh, -.3vh); } }

/* ---------- Spin en spook ---------- */
.spider { position: fixed; top: 0; left: 62vw; z-index: 6; pointer-events: none; transform: translateY(-100%); }
.spider .thread { width: 2px; height: 30vh; margin: 0 auto; background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .5)); }
.spider .body { font-size: 6vh; margin-top: -1vh; filter: drop-shadow(0 0 1vh #000); animation: wiggle .4s ease-in-out infinite alternate; }
.spider.go { animation: drop 9s ease-in-out forwards; }
@keyframes drop { 0% { transform: translateY(-100%); } 25%, 70% { transform: translateY(0); } 40% { transform: translateY(-6vh); } 55% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes wiggle { to { transform: rotate(12deg); } }
.floaty { position: fixed; z-index: 6; top: 30vh; left: -15vh; font-size: 12vh; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 3vh rgba(255, 255, 255, .5)); }
.floaty.go { animation: ghostFly 12s ease-in-out forwards; }
@keyframes ghostFly {
  0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .85; }
  30% { transform: translate(35vw, -10vh) rotate(8deg); } 55% { transform: translate(60vw, 8vh) rotate(-6deg); }
  85% { opacity: .85; } 100% { opacity: 0; transform: translate(115vw, -6vh); }
}

/* ---------- Confetti ---------- */
.confetti { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -10vh; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(120vh) rotate(var(--spin)); } }

/* ---------- Nieuw kostuum ---------- */
.camflash { position: fixed; inset: 0; z-index: 45; background: #fff; opacity: 0; pointer-events: none; }
.camflash.go { animation: camflash .7s ease-out; }
@keyframes camflash { 0% { opacity: 0; } 8% { opacity: .95; } 100% { opacity: 0; } }
.new-alert { position: fixed; inset: 0; z-index: 44; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, rgba(255, 122, 26, .35), rgba(13, 10, 23, .92) 60%); }
.new-alert .na-inner { text-align: center; }
.new-alert.go .na-inner { animation: naPop 1.8s cubic-bezier(.2, .9, .3, 1.3) forwards; }
.na-cam { display: inline-block; font-size: 20vh; line-height: 1; filter: drop-shadow(0 0 4vh rgba(255, 255, 255, .6)); }
.new-alert.go .na-cam { animation: naShake .25s ease-in-out 3; }
.new-alert p { font-family: var(--display); font-size: 13vh; margin: 2vh 0 0; line-height: 1; color: var(--pumpkin); text-shadow: 0 0 4vh rgba(255, 122, 26, .9), 0 .8vh 0 #6b1d00; }
.new-alert small { display: block; margin-top: 2vh; font-size: 3.4vh; font-weight: 800; color: var(--bone); }
@keyframes naPop { 0% { transform: scale(.3); opacity: 0; } 20% { transform: scale(1.08); opacity: 1; } 30% { transform: scale(1); } 85% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes naShake { 50% { transform: rotate(-10deg) scale(1.1); } }

/* ---------- Schrikmoment ---------- */
.scare { position: fixed; inset: 0; z-index: 70; background: #000; overflow: hidden; }
.scare-eyes { position: absolute; top: 42%; left: 50%; display: flex; gap: 9vh; transform: translate(-50%, -50%); opacity: 0; }
.scare-eyes span { width: 3.4vh; height: 2.2vh; border-radius: 50%; background: #ff2010; box-shadow: 0 0 2vh #ff2010, 0 0 6vh #ff0000; }
.scare.eyes .scare-eyes { animation: eyes 1.8s ease-in forwards; }
@keyframes eyes { 0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: 1; transform: translate(-50%, -50%) scaleY(1); } 60% { transform: translate(-50%, -50%) scaleY(.1); } 65% { transform: translate(-50%, -50%) scaleY(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } }
.ghoul { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.scare.lunge { background: radial-gradient(ellipse at 50% 45%, #4a0707 0%, #160202 45%, #000 80%); }
.scare.lunge .scare-eyes { display: none; }
.scare.lunge .ghoul { animation: lunge 1.6s cubic-bezier(.1, .9, .2, 1) forwards, jitter .08s steps(2) infinite; }
@keyframes lunge { 0% { opacity: 0; transform: scale(.55); } 6% { opacity: 1; } 16% { transform: scale(1.3); } 100% { opacity: 1; transform: scale(1.55); } }
@keyframes jitter { 0% { translate: -1vh .5vh; } 50% { translate: 1vh -.5vh; } 100% { translate: 0 0; } }
.scare.lunge::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 0, 0, .08) 0 2px, transparent 2px 4px); animation: redPulse .15s steps(2) infinite; pointer-events: none; }
@keyframes redPulse { 50% { background-color: rgba(120, 0, 0, .25); } }

/* ---------- Bediening (verdwijnt na een paar seconden) ---------- */
.controls { position: fixed; z-index: 60; right: 2vh; bottom: 2vh; display: flex; gap: 1vh; transition: opacity .5s; }
.controls button { font: inherit; font-weight: 800; font-size: 14px; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--card-edge); background: rgba(13, 10, 23, .85); color: var(--bone); cursor: pointer; }
.controls button.needed { background: var(--pumpkin); color: #2a0d00; border-color: transparent; animation: pulse .8s ease-in-out infinite alternate; }
body.idle .controls { opacity: 0; pointer-events: none; }

/* Kleine schermen (bijv. op je telefoon even kijken) */
@media (max-width: 800px), (max-aspect-ratio: 1/1) {
  body.tv { overflow: auto; height: auto; }
  .tv-wrap { grid-template-columns: 1fr; height: auto; padding: 16px; }
  .stage { height: 90vh; }
  .side .pumpkin, .p-left, .p-right { display: none; }
  .qr img, .qr canvas { width: 200px !important; height: 200px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .flash.go, .bolt.go, .shake, .spider.go, .floaty.go, .scare .ghoul { animation: none !important; }
}