/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ─── Base ───────────────────────────────────────────────────── */
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #100820;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ─── Screens ────────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.screen.active { display: flex; }

/* ─── Lock screen background ─────────────────────────────────── */
#screen-lock {
  background:
    radial-gradient(ellipse at 20% 50%, #2d1060 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, #0d2b3e 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, #1a0535 0%, #100820 100%);
}

/* ─── Animated background eyes ───────────────────────────────── */
.bg-eyes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.eye {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,0.9) 8%,
      transparent 12%),
    radial-gradient(circle at 50% 50%, #ffe000 22%, #ff8c00 50%, #1a0535 70%);
  opacity: 0.12;
  animation: eyeBlink 5s ease-in-out infinite;
}

.e1 { width: 130px; height: 130px; top:  8%; left:  3%; animation-delay: 0s;   }
.e2 { width:  70px; height:  70px; top: 65%; left:  1%; animation-delay: 2.1s; }
.e3 { width: 110px; height: 110px; top:  6%; right: 3%; animation-delay: 1.0s; }
.e4 { width:  55px; height:  55px; top: 70%; right: 2%; animation-delay: 3.5s; }

@keyframes eyeBlink {
  0%,42%,58%,100% { transform: scaleY(1); }
  50%             { transform: scaleY(0.06); }
}

/* ─── Lock card ──────────────────────────────────────────────── */
.lock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 18px);
  padding: clamp(18px, 3vh, 32px) clamp(24px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ─── Card header ────────────────────────────────────────────── */
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lock-emoji { font-size: clamp(22px, 4vw, 38px); }

h1 {
  font-size: clamp(18px, 3.5vw, 34px);
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(120deg, #ff6b35 0%, #ffd700 45%, #4ecdc4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hint {
  color: rgba(255,255,255,0.65);
  font-size: clamp(12px, 1.8vw, 17px);
  margin-top: -4px;
}

/* ─── Wheels row ─────────────────────────────────────────────── */
.wheels-row {
  display: flex;
  gap: clamp(8px, 1.4vw, 16px);
  align-items: center;
}

/* ─── Drum picker wheel ──────────────────────────────────────── */
/*
   Aufbau pro Rad:
     .wheel-wrap   — farbiger Hintergrund, overflow:hidden, Cursor grab
       .wheel-stage  — alle 10 Items übereinander (position absolute)
         .wheel-item — einzelne Ziffer, per JS verschoben & skaliert
       .wheel-sel  — halbtransparentes Mittelband (aktive Ziffer)
       .wheel-fade — Gradient-Blende oben/unten (Wölbungseffekt)
*/

.wheel-wrap {
  position: relative;
  width:  clamp(68px, 8.5vw, 96px);
  height: clamp(172px, 26vh, 218px);
  border-radius: 18px;
  overflow: hidden;        /* clips Items außerhalb sicher (kein CSS-3D hier) */
  cursor: grab;
  touch-action: none;      /* Browser soll kein Scrollen übernehmen */
  user-select: none;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,255,255,0.22);
  outline: none;
  transition: box-shadow 0.2s;
}
.wheel-wrap:active  { cursor: grabbing; }
.wheel-wrap:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 8px 22px rgba(0,0,0,0.45);
}

/* Farbthemen */
.wc-0 { background: linear-gradient(165deg, #ff8750, #d93500); }
.wc-1 { background: linear-gradient(165deg, #30ece4, #0898a0); }
.wc-2 { background: linear-gradient(165deg, #c570ff, #7a18ee); }
.wc-3 { background: linear-gradient(165deg, #ff5252, #bb0008); }
.wc-4 { background: linear-gradient(165deg, #ffe040, #dc8a00); }

/* Bühne: Items werden hierauf per JS platziert */
.wheel-stage {
  position: absolute;
  inset: 0;
}

/* Einzelne Ziffer — alle am gleichen Ort, JS bewegt sie */
.wheel-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  will-change: transform, opacity;
  pointer-events: none;
}

/* Mittelband: markiert die aktive Ziffer */
.wheel-sel {
  position: absolute;
  left: 0; right: 0;
  top:  50%;
  /* Höhe ≈ ITEM_H: passt zum JS-Barrel-Radius */
  height: 58px;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.14);
  border-top:    1px solid rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  pointer-events: none;
  z-index: 1;
}

/* Gradient-Blende: lässt Rand ausblenden und simuliert Wölbung */
.wheel-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* Fades from the wheel's own colour (transparent layer) */
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.05) 28%,
    rgba(0,0,0,0)    50%,
    rgba(0,0,0,0.05) 72%,
    rgba(0,0,0,0.55) 100%
  );
}

/* ─── Richtig / Falsch Zustände ──────────────────────────────── */
.wheel-wrap.wc-correct {
  background: linear-gradient(165deg, #30e87a, #16a34a) !important;
  animation: wheelCorrect 0.42s ease-out;
  box-shadow: 0 0 0 3px #22c55e, 0 8px 22px rgba(0,0,0,0.45);
}
@keyframes wheelCorrect {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.wheel-wrap.wc-wrong {
  background: linear-gradient(165deg, #ff4444, #9b0000) !important;
  box-shadow: 0 0 0 3px #ef4444, 0 8px 22px rgba(0,0,0,0.45);
}

/* Card shake on wrong code */
.lock-card.shake { animation: cardShake 0.45s ease; }
@keyframes cardShake {
  0%,100% { transform: translateX(0); }
  18%     { transform: translateX(-14px); }
  36%     { transform: translateX(14px); }
  54%     { transform: translateX(-9px); }
  72%     { transform: translateX(9px); }
}

/* ─── Open button ─────────────────────────────────────────────── */
.btn-open {
  margin-top: 4px;
  padding: clamp(10px, 1.8vh, 18px) clamp(28px, 5.5vw, 60px);
  font-size: clamp(16px, 2.6vw, 26px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(135deg, #ff6b35 0%, #d93800 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 5px 22px rgba(255, 90, 30, 0.55);
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-open:active  { transform: scale(0.94); box-shadow: 0 2px 10px rgba(255,90,30,0.4); }
.btn-open:disabled { opacity: 0.6; cursor: default; }

/* ─── Error message ──────────────────────────────────────────── */
.error-msg {
  height: 20px;
  font-size: clamp(12px, 1.7vw, 16px);
  font-weight: 600;
  color: #ff7a7a;
  opacity: 0;
  transition: opacity 0.25s;
}
.error-msg.visible { opacity: 1; }

/* ─── Video screen ───────────────────────────────────────────── */
#screen-video { background: #000; }

#video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.btn-back {
  position: fixed;
  top: 20px; left: 20px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}
.btn-back:hover { background: rgba(255,255,255,0.28); }
.btn-back.show  { display: flex; }

/* Tap-to-dismiss overlay after video ends */
.video-end-hint {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  pointer-events: none;
  display: none;
}
.video-end-hint.show { display: block; }

/* ─── Fade overlay (screen transition) ──────────────────────── */
.fade-overlay {
  position: fixed; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity 0.45s ease;
}
.fade-overlay.in  { opacity: 1;  pointer-events: all; }
.fade-overlay.out { opacity: 0;  pointer-events: none; }