/* Kok CinemaxX Pauzeverloting - Styles */

html,body { 
  height:100%; 
  background:#1a1e25; 
  font-family:'Ubuntu', Arial, sans-serif; 
}

.ambient {
  position: fixed; 
  inset: 0; 
  z-index: -1;
  background:
    radial-gradient(60vw 60vw at 10% 20%, rgba(234,93,136,.10), transparent 60%),
    radial-gradient(50vw 50vw at 90% 80%, rgba(180,138,25,.10), transparent 60%),
    radial-gradient(40vw 40vw at 70% 20%, rgba(224,32,32,.08), transparent 60%),
    #1a1e25;
  filter: saturate(105%);
}

.reel-label{ 
  font-weight:800; 
  letter-spacing:.06em; 
  color:#ffffffcc; 
}

/* Roulette ruiten met subtiele 'show' gloed */
.roulette-window{
  width:100%; 
  height:96px; 
  overflow:hidden; 
  position:relative;
  border-radius:16px; 
  background:#0d1117;
  border: 2px solid #ea5d88;
  box-shadow:
    0 12px 24px rgba(0,0,0,.35);
}

.roulette-window::before{
  content:""; 
  position:absolute; 
  inset:-8px; 
  border-radius:20px;
  background: radial-gradient(closest-side, rgba(234,93,136,.32), rgba(234,93,136,0) 70%);
  filter: blur(10px);
  opacity:.85;
  animation: marqueePulse 2.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes marqueePulse{
  0%,100%{ opacity:.5; transform:scale(.995); }
  50%{ opacity:.9; transform:scale(1.01); }
}

/* Verwijder alle indicator elementen - vervangen door border */

.spinner-item{
  height:96px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  font-size:42px; 
  font-weight:800; 
  letter-spacing:.5px;
  background:#2a2a2a; 
  color:#fff; 
  border-bottom:2px solid #404040; 
  user-select:none;
}

.confetti { 
  position:fixed; 
  pointer-events:none; 
  inset:0; 
  z-index:99999; 
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

/* Onderbalk: vaste media-hoogte zonder letterbox (cover) */
:root { --mini-h: 150px; } /* verlaagd voor compactere weergave */
.mini-media { 
  /* height:var(--mini-h); */ /* Verwijderd om dynamische hoogte mogelijk te maken */
  border-radius:12px; 
  overflow:hidden; 
}

.mini-media img { 
  width:100%; 
  height:auto; /* Aangepast om de hoogte van de afbeelding te laten bepalen door de aspectratio */
  object-fit:contain; 
  object-position:center; 
  display:block; 
}

/* Poster specifiek hoger maken */
.poster-tall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content; /* Container past zich aan aan de poster */
  margin: 0 auto; /* Centreren */
}

.poster-tall img {
  max-height: 300px; /* Poster verkleind voor compactere weergave */
  width: auto; /* Breedte past zich aan */
}

/* Still overlapt poster aan de rechterkant - alleen voor aangewezen element */
.still-overlap {
  margin-right: -20px; /* Still overlapt poster met 20px */
  max-width: 280px; /* Still 2x zo groot gemaakt */
  opacity: 0.8; /* Subtiele transparantie */
}

/* QR-box strak in de grid, nooit buiten container */
.qr-wrap { 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}

.qr-box {
  width:100px; 
  height:100px;           /* kleiner gemaakt */
  background:#fff; 
  border-radius:12px;
  display:flex; 
  align-items:center; 
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.qr-canvas, .qr-img { 
  width:88px; 
  height:88px; 
  display:block; 
}

@media (max-width: 860px){
  :root { --mini-h: 180px; }            /* op kleinere schermen ook hoger */
  .qr-box{ width:90px; height:90px; }
  .qr-canvas, .qr-img { width:78px; height:78px; }
}

/* Countdown blowout animaties */
.countdown-number {
  animation: countdownBlowout 1s ease-out;
  display: inline-block;
  transform-origin: center;
}

.countdown-go {
  animation: countdownGo 0.5s ease-out;
  display: inline-block;
  transform-origin: center;
  text-shadow: 0 0 20px rgba(234, 93, 136, 0.8);
}

@keyframes countdownBlowout {
  0% {
    transform: scale(0.3);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes countdownGo {
  0% {
    transform: scale(0.1) rotate(-10deg);
    opacity: 0;
    filter: blur(20px);
  }
  30% {
    transform: scale(1.5) rotate(5deg);
    opacity: 1;
    filter: blur(0px);
  }
  60% {
    transform: scale(1.2) rotate(-2deg);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce){
  .spinner-item, .roulette-window, #spinnerRowWrapper, #spinnerSeatWrapper, 
  .countdown-number, .countdown-go { 
    transition:none !important; 
    animation:none !important; 
  }
}