@font-face{font-family:"Lobster";src:url("../fonts/Lobster-Regular.woff2") format("woff2");font-display:block}
@font-face{font-family:"Anton";src:url("../fonts/Anton-Regular.woff2") format("woff2");font-display:block}
@font-face{font-family:"Lobster Two";font-style:italic;font-weight:700;src:url("../fonts/LobsterTwo-BoldItalic.woff2") format("woff2");font-display:block}

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

#stage {
  --neon: #FFF6DE; /* kleur van de neon-titel; tijdbalk en labels gebruiken dezelfde */
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden;
  background: url("../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-title { z-index: 1; object-fit: fill; filter: drop-shadow(0 0 10px rgba(255, 235, 190, .5)); pointer-events: none; }
#timeline-line { z-index: 1; background: var(--neon); box-shadow: 0 0 10px rgba(255, 235, 190, .5); }
#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; }
.timeline-label { z-index: 1; color: var(--neon); text-shadow: 0 0 10px rgba(255, 235, 190, .5); font-weight: 700; font-size: 20px; line-height: 26px; }
#label-stoneage { text-align: left; }
#label-today { text-align: right; }
.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 */
#screen { z-index: 3; background: #000; overflow: hidden; }
#screen canvas, #screen iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; } /* hoogte en top van de iframe zet screen.js uit SCREEN */
#screen iframe { filter: grayscale(1); pointer-events: none; opacity: 0; }
#screen.is-playing iframe { opacity: 1; }
#card-timer { z-index: 3; color: #fff; font-weight: 800; font-size: 44px; text-align: center; }
.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;
}

#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; }
[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;
}
.card-mark { position: absolute; inset: 0; box-sizing: border-box; border-radius: 8px; }
.card-mark svg { position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; }
.card-mark path { fill: none; stroke-width: 14; stroke-linecap: round; }
.card.is-grabbable { pointer-events: auto; cursor: grab; touch-action: none; }
.card.is-dragging { cursor: grabbing; }