@font-face{font-family:"Lobster";src:url("../interface-assets/fonts/Lobster-Regular.woff2") format("woff2");font-display:block}
@font-face{font-family:"Anton";src:url("../interface-assets/fonts/Anton-Regular.woff2") format("woff2");font-display:block}
@font-face{font-family:"Yellowtail";src:url("../interface-assets/fonts/yellowtail-latin-400-normal.woff2") format("woff2");font-display:block}
@font-face{font-family:"Kalam";font-weight:700;src:url("../interface-assets/fonts/kalam-latin-700-normal.woff2") format("woff2");font-display:block}
@font-face{font-family:"Lobster Two";font-style:italic;font-weight:700;src:url("../interface-assets/fonts/LobsterTwo-BoldItalic.woff2") format("woff2");font-display:block}

html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0b12; }

#stage {
  --neon: #FFF6DE; /* neonkleur (A2): titel, privacy-link, tijdlijn en labels */
  --neon-glow: 0 0 4px #FFF6DE, 0 0 10px rgba(255,235,190,.85), 0 0 22px rgba(255,214,140,.55), 0 0 42px rgba(255,190,100,.35);
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden;
  background: url("../interface-assets/scene/jukebox-scene-1920x1080.png") 0 0 / 1920px 1080px no-repeat;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}
#stage > * { position: absolute; box-sizing: border-box; }

/* laag 1 */
/* Neon-titel (A3.1): main.js verkleint de letter in stappen van 2 px tot de tekst hooguit 860 px breed is. */
#neon-title { z-index: 1; font: 400 132px/157px "Yellowtail", cursive; text-align: center; white-space: nowrap; color: var(--neon); text-shadow: var(--neon-glow); pointer-events: none; }
#timeline-neon { z-index: 1; } /* neon-tijdlijn (A3.5); staat in de DOM voor #timeline, dus achter de kaarten */
#timeline { z-index: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#timeline::-webkit-scrollbar { display: none; }
.timeline-content { position: relative; height: 100%; }
.timeline-slot { position: absolute; box-sizing: border-box; border: 3px dashed rgba(255, 255, 255, .75); border-radius: 8px; background: rgba(255, 255, 255, .08); }
.timeline-scrollbar { z-index: 1; background: rgba(0, 0, 0, .25); border-radius: 2px; pointer-events: none; }
.timeline-thumb { position: absolute; top: 0; height: 100%; background: rgba(255, 255, 255, .6); border-radius: 2px; }
.poster { z-index: 1; }
#poster-behind { z-index: 0; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(0, 4, 30, .55)) drop-shadow(0 16px 22px rgba(0, 4, 30, .7)); }
.poster-label, .poster-value {
  position: absolute; left: 0; right: 0; text-align: center; font-weight: 800; white-space: nowrap;
}
.poster-label { top: 27%; transform: translateY(-50%); font-size: 26px; line-height: 1; color: #3a2416; }
.poster-value { top: 58%; transform: translateY(-50%); font-size: 72px; line-height: 1; color: #a32012; }

#poster-timer .poster-label { top: 24%; }
#poster-timer .poster-value { top: 51%; }

/* laag 3 */
/* PLAY pulseert zolang hij ingedrukt kan worden (A3.6, besluit D4); onder knop en label */
.play-pulse{position:absolute;left:1104px;top:674px;width:186px;height:165px;border-radius:50%;
  box-shadow:0 0 0 6px rgba(229,55,43,.55),0 0 28px 12px rgba(229,55,43,.75);
  opacity:0;pointer-events:none}
.play-pulse.on{animation:playPulse 1.2s ease-in-out infinite}
@keyframes playPulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.18);opacity:1}}
@media (prefers-reduced-motion:reduce){.play-pulse.on{animation:playPulseRM 2.4s ease-in-out infinite}
  @keyframes playPulseRM{0%,100%{opacity:.35}50%{opacity:1}}}
.play-pulse { z-index: 3; }
.chrome-button {
  z-index: 3; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chrome-button img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chrome-button .down { opacity: 0; }
.chrome-button.is-down .down { opacity: 1; }
.chrome-button .label {
  /* boven de knop, op het oranje paneel: op het chroom was de tekst niet te lezen */
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap;
  font-weight: 800; font-size: 22px; line-height: 26px; letter-spacing: .08em; color: var(--neon);
  text-shadow: 1px 2px 0 #062A5E; pointer-events: none;
}
/* kaartklok in het PLAY-label (A3.4) */
#btn-play .label.is-count { font-size: 34px; line-height: 40px; letter-spacing: 0; }
#btn-play .label.is-last { color: #FF5A4D; }
#btn-play .label.is-notice { width: 200px; white-space: normal; text-align: center; font-size: 16px; line-height: 19px; letter-spacing: 0; }

#play-disabled {
  z-index: 3; border-radius: 50%; cursor: not-allowed;
  background: repeating-linear-gradient(45deg, rgba(40, 40, 48, .55) 0 6px, rgba(170, 170, 180, .35) 6px 12px);
  -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1);
}

/* lagen 4-7 */
#layer-flying { z-index: 4; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#end-dim { z-index: 5; left: 0; top: 0; width: 1920px; height: 1080px; background: #000; opacity: 0; }
#end-panel {
  z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #FFF1D2; color: #031659; border: 6px solid #031659; border-radius: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); opacity: 0;
}
#end-label { font-weight: 800; font-size: 34px; letter-spacing: .12em; }
#end-score { font: 400 190px/1.1 "Anton", Impact, "Arial Narrow Bold", sans-serif; color: #a32012; }
#end-score.is-negative::before { content: ""; display: inline-block; width: .33em; height: .105em; margin-right: .06em; vertical-align: .25em; background: currentColor; }
#end-hint { font-weight: 800; font-size: 40px; letter-spacing: .04em; }
#reset-ring { z-index: 6; border: 8px solid #FF6600; border-radius: 50%; pointer-events: none; }
#stage.is-ended #btn-reset { z-index: 6; }
#confetti { z-index: 7; left: 0; top: 0; pointer-events: none; }
/* laag 8: privacy-link (A3.2), boven dim en eindpaneel. Hover: eerste twee schaduwstralen +30 % (geen filter). */
.neon-privacy {
  z-index: 8; font: 400 72px/90px "Yellowtail", cursive; text-align: center; white-space: nowrap; text-decoration: none;
  color: var(--neon); text-shadow: var(--neon-glow); cursor: pointer;
}
.neon-privacy:hover { text-shadow: 0 0 5.2px #FFF6DE, 0 0 13px rgba(255,235,190,.85), 0 0 22px rgba(255,214,140,.55), 0 0 42px rgba(255,190,100,.35); }
.neon-privacy:focus-visible { outline: 3px dashed #FFF6DE; outline-offset: 6px; }
[hidden] { display: none !important; }

/* kaarten (spec 7); maten komen uit CARD in config.js */
.card { position: absolute; font-synthesis: none; text-align: center; user-select: none; -webkit-user-drag: none; }
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.card-back, .card-front {
  position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.card-artist, .card-year, .card-title {
  position: absolute; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: #FFF1D2;
}
.card-artist {
  top: 21%; font: 400 40px/0.9 "Lobster", "Brush Script MT", "Segoe Script", cursive;
  text-shadow: 1.5px 2px 0 #062A5E;
}
.card-year {
  top: 52%; width: 82%; font: 400 64px/0.82 "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: -0.025em;
}
.card-title {
  top: 80%; font: italic 700 25px/0.92 "Lobster Two", "Lobster", "Brush Script MT", cursive;
  text-shadow: 1px 1.5px 0 #062A5E;
}
/* Goed/fout (A3.7): voorkant -> tint en rand -> kruis -> tekst. Het jaartal krijgt dan een navy rand voor het contrast. */
.card-mark { position: absolute; inset: 0; box-sizing: border-box; border-radius: 8px; }
.card-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-mark path { fill: none; stroke-linecap: butt; }
.card.is-marked .card-year { text-shadow: 0 0 2px #062A5E, 0 0 2px #062A5E, 0 0 3px #062A5E; }
.card.is-grabbable { pointer-events: auto; cursor: grab; touch-action: none; }
.card.is-dragging { cursor: grabbing; }

/* Toestemmingsdialoog (A3.9): buiten het toneel, boven alles. */
#consent { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); padding: 16px; box-sizing: border-box; }
#consent .consent-panel { box-sizing: border-box; width: 720px; max-width: 100%; max-height: 100%; overflow: auto; padding: 36px; background: #031659; border: 3px solid #FFF6DE; border-radius: 12px; color: #FFF6DE; font: 20px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#consent h2 { margin: 0 0 16px; font: 400 40px/1.1 "Lobster", cursive; color: #FFF6DE; }
#consent p { margin: 0 0 28px; }
#consent a { color: #FFF6DE; }
#consent .consent-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
#consent button { font: 700 20px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 14px 28px; border-radius: 8px; cursor: pointer; }
#consent .consent-agree { background: #FF6600; color: #031659; border: 3px solid #FF6600; }
#consent .consent-decline { background: transparent; color: #FFF6DE; border: 3px solid #FFF6DE; }
#consent a:focus-visible, #consent button:focus-visible { outline: 3px solid #FFF6DE; outline-offset: 3px; }

/* Buiten het toneel (A3.3.1, A3.8, A3.11): speler en plaatje op laag 50, melding op laag 100.
   Geen filter, opacity, transform, mask, clip-path, blend of pointer-events op #screen-wrap en de iframe (A3.3.6). */
#screen-wrap { position: fixed; z-index: 50; background: #000; font-size: 0; line-height: 0; visibility: hidden; }
#noise { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#yt-plate {
  position: fixed; z-index: 50; box-sizing: border-box; padding: 6px 10px; border-radius: 6px;
  background: rgba(3, 22, 89, .88); color: #FFF6DE; text-align: center;
  font: 12px/14px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#yt-plate { min-width: max-content; }
#yt-plate .yt-links { white-space: nowrap; }
#yt-plate img { display: block; margin: 0 auto; }
#yt-plate a { color: #FFF6DE; }
#too-small {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: #0b0b12; color: #FFF6DE; font: 700 32px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: center; padding: 16px;
}