/* ============================================================
   "Hat Daniel bereits sein neues Rufzeichen?" – Stylesheet
   ============================================================ */

:root {
  --gold: #ffd24a;
  --gold-deep: #b8860b;
  --red: #d92121;
  --red-deep: #7a0a0a;
  --orange: #ff7a00;
  --orange-deep: #c44400;
  --cream: #fff4c4;
  --shadow: rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", Roboto, sans-serif;
  background: #1b0a0a;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;
}
.screen.active { display: block; }

/* ============================================================
   INTRO SCREEN
   ============================================================ */

.intro-screen {
  background: radial-gradient(circle at 50% 50%, #ffcc33 0%, #ff7a00 35%, #d92121 70%, #5a0d0d 100%);
}

.sunburst {
  position: absolute;
  inset: -20%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.rays {
  position: absolute;
  width: 180vmax;
  height: 180vmax;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 230, 80, 0.95) 0deg 6deg,
      rgba(255, 122, 0, 0.85) 6deg 12deg,
      rgba(255, 90, 0, 0.85) 12deg 18deg,
      rgba(255, 200, 50, 0.9) 18deg 24deg
    );
  border-radius: 50%;
  animation: spin-slow 60s linear infinite;
  filter: saturate(1.2);
}

.rays-2 {
  width: 220vmax;
  height: 220vmax;
  opacity: 0.45;
  background:
    repeating-conic-gradient(
      from 11deg,
      rgba(255, 255, 255, 0.18) 0deg 2deg,
      transparent 2deg 14deg
    );
  animation: spin-slow-reverse 90s linear infinite;
}

.halo {
  position: absolute;
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 240, 180, 0.95) 0%, rgba(255, 200, 80, 0.6) 35%, transparent 70%);
  box-shadow: 0 0 90px 40px rgba(255, 200, 80, 0.4);
  animation: pulse-halo 4s ease-in-out infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin-slow-reverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
@keyframes pulse-halo {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.intro-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(95vw, 1200px);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6em 1em;
  pointer-events: none;
  z-index: 2;
}

.intro-word {
  display: inline-block;
  font-family: "Impact", "Arial Black", "Trebuchet MS", sans-serif;
  font-size: clamp(2.6rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  color: #fff8d4;
  letter-spacing: 0.02em;
  text-shadow:
    0  2px 0 #c44400,
    0  4px 0 #b03300,
    0  6px 0 #7a0a0a,
    0  8px 0 #5a0808,
    0 10px 0 #3d0505,
    0 14px 22px rgba(0,0,0,0.75),
    0  0   30px rgba(255, 220, 100, 0.9);
  -webkit-text-stroke: 2px #7a0a0a;
  transform: scale(0) rotate(-8deg);
  opacity: 0;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5));
}

.intro-word.pop {
  animation: word-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes word-pop {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.35) rotate(4deg); opacity: 1; }
  80%  { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.start-button {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 16px 32px;
  font-size: 1.2rem;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: 0.04em;
  border: 3px solid #fff4c4;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5a00 0%, #d92121 100%);
  color: #fff8d4;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  box-shadow:
    0 6px 0 #5a0808,
    0 12px 24px rgba(0,0,0,0.45),
    inset 0 2px 0 rgba(255,255,255,0.4);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.start-button:hover  { transform: translateX(-50%) translateY(-2px); }
.start-button:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 3px 0 #5a0808, 0 6px 12px rgba(0,0,0,0.5); }
.start-button.hidden { opacity: 0; pointer-events: none; transition: opacity 400ms ease; }

/* ============================================================
   GAME SCREEN
   ============================================================ */

.game-screen {
  background: radial-gradient(ellipse at center top, #2a0f1a 0%, #110509 70%, #000 100%);
}

.emoji-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.rain-emoji {
  position: absolute;
  top: -10vh;
  font-size: 2rem;
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  will-change: transform;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  100% { transform: translate3d(0, 115vh, 0) rotate(360deg); }
}

.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 20px;
}

/* ---------- Slot machine ---------- */

.slot-machine {
  position: relative;
  width: min(560px, 92vw);
  padding: 28px 32px 36px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, #ff5a00 0%, #b8860b 50%, #7a0a0a 100%);
  border: 4px solid #ffd24a;
  box-shadow:
    inset 0 0 0 4px #5a0808,
    inset 0 0 40px rgba(0,0,0,0.5),
    0 30px 60px rgba(0,0,0,0.6),
    0 0 80px rgba(255, 122, 0, 0.35);
}

.slot-top {
  margin-bottom: 18px;
}
.marquee {
  position: relative;
  text-align: center;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffd24a 0%, #b8860b 100%);
  border: 3px solid #5a0808;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
}
.marquee-text {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #7a0a0a;
  text-shadow:
    0 2px 0 #ffd24a,
    0 -1px 0 #5a0808;
  -webkit-text-stroke: 1px #5a0808;
}
.bulbs {
  position: absolute;
  inset: 6px 10px auto 10px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.bulbs span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #ffd24a 40%, #b8860b 100%);
  box-shadow: 0 0 6px #ffd24a, 0 0 12px #ff7a00;
  animation: bulb-blink 0.9s ease-in-out infinite;
}
.bulbs span:nth-child(2n) { animation-delay: 0.45s; }
.bulbs span:nth-child(3n) { animation-delay: 0.2s; }
@keyframes bulb-blink {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.85); }
}

/* ---------- Reels ---------- */

.slot-body {
  --symbol-height: clamp(64px, 9vw, 84px);
  --reel-height: calc(var(--symbol-height) * 3);
  position: relative;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2a1308 0%, #0e0303 100%);
  border: 3px solid #5a0808;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.7),
    inset 0 0 0 2px rgba(255, 215, 100, 0.25);
}

.reels-window {
  position: relative;
  padding: 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 100%);
  border: 3px solid #ffd24a;
  box-shadow: inset 0 0 25px rgba(0,0,0,0.8);
}

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.reel {
  position: relative;
  height: var(--reel-height);
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6e6c0 0%, #fff8d4 50%, #f6e6c0 100%);
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,0.4),
    inset 0 -6px 14px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.3);
}
.reel::before,
.reel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  z-index: 3;
  pointer-events: none;
}
.reel::before { top: 0;    background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent); }
.reel::after  { bottom: 0; background: linear-gradient(0deg,   rgba(0,0,0,0.6), transparent); }

.reel-strip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  will-change: transform;
  transform: translateY(0);
}
.reel-symbol {
  flex: 0 0 var(--symbol-height);
  height: var(--symbol-height);
  display: grid;
  place-items: center;
  width: 100%;
  font-size: calc(var(--symbol-height) * 0.7);
  line-height: 1;
  user-select: none;
}

.payline {
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 4px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #ff2a2a, transparent);
  box-shadow: 0 0 12px #ff2a2a;
  pointer-events: none;
  z-index: 4;
  opacity: 0.7;
}

.coin-tray {
  margin-top: 14px;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a1308 0%, #000 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.8);
}

/* ---------- Base ---------- */

.slot-base {
  margin-top: 18px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 14px;
  background: linear-gradient(180deg, #5a0808 0%, #2a0404 100%);
  border: 2px solid #ffd24a;
}
.coin-slot {
  width: 80px;
  height: 10px;
  border-radius: 6px;
  background: #000;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1);
}
.brand {
  font-family: "Impact", "Arial Black", sans-serif;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #ffd24a;
  text-shadow: 0 1px 0 #5a0808, 0 0 8px rgba(255, 210, 74, 0.6);
  font-size: clamp(0.8rem, 2vw, 1.1rem);
}

/* ---------- Lever ---------- */

.lever {
  position: absolute;
  top: 28%;
  right: -64px;
  width: 80px;
  height: 200px;
  cursor: grab;
  z-index: 5;
  touch-action: none;
  perspective: 600px;
  perspective-origin: 50% 100%;
}
.lever:active { cursor: grabbing; }

.lever-base {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #888 0%, #444 60%, #111 100%);
  border: 3px solid #222;
  box-shadow: 0 6px 10px rgba(0,0,0,0.6), inset 0 -4px 8px rgba(0,0,0,0.6);
  z-index: 2;
}

.lever-arm {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 20px;
  height: 160px;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lever-arm.pulled { transform: rotateX(-78deg); transition: transform 300ms cubic-bezier(0.4, 0, 1, 0.6); }

.lever-shaft {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 150px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #d4d4d4 0%, #808080 60%, #404040 100%);
  border-radius: 8px;
  box-shadow: inset -3px 0 6px rgba(0,0,0,0.4), inset 3px 0 6px rgba(255,255,255,0.2);
}
.lever-knob {
  position: absolute;
  left: 50%;
  top: -20px;
  width: 56px;
  height: 56px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffeb6d 0%, #ff5a00 50%, #7a0a0a 100%);
  border: 3px solid #5a0808;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.6),
    inset 0 -4px 8px rgba(0,0,0,0.4),
    inset 0 4px 8px rgba(255,255,255,0.4);
}

.prompt-group {
  position: absolute;
  top: -8px;
  left: 100%;
  padding-left: 14px;
  display: flex;
  align-items: center;
  gap: 22px;
  z-index: 6;
  pointer-events: none;
}
.lever.first-pulled .prompt-group { display: none; }

.tap-hand {
  font-size: 5.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8));
  transform-origin: 50% 50%;
  animation: tap-bounce 1.3s ease-in-out infinite;
}

@keyframes tap-bounce {
  0%, 100% { transform: translateX(0)    scaleX(-1) rotate(90deg) scale(1); }
  35%      { transform: translateX(-30px) scaleX(-1) rotate(90deg) scale(0.95); }
  50%      { transform: translateX(-50px) scaleX(-1) rotate(90deg) scale(0.88); }
  65%      { transform: translateX(-30px) scaleX(-1) rotate(90deg) scale(0.95); }
}

.hint {
  white-space: nowrap;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffd24a;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 16px rgba(255, 210, 74, 0.5);
  animation: hint-fade 2.4s ease-in-out infinite;
}
.hint.hidden { opacity: 0; animation: none; }
@keyframes hint-fade {
  0%, 100% { opacity: 0.1; }
  25%, 75% { opacity: 1; }
}

/* ---------- Reel animations ---------- */

.reel.spinning .reel-strip {
  animation: spin-reel 0.55s linear infinite;
  filter: blur(1px);
}
@keyframes spin-reel {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--symbol-height) * -10)); }
}

/* ---------- Result overlay ---------- */

.result-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 250ms ease;
}
.result-overlay.shown { opacity: 1; }

.result-text {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  transform: scale(0) rotate(-8deg);
  opacity: 0;
}
.result-overlay.shown .result-text { animation: result-pop 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

.result-text.win {
  color: #fff8d4;
  -webkit-text-stroke: 3px #7a0a0a;
  text-shadow:
    0  3px 0 #c44400,
    0  6px 0 #b03300,
    0  9px 0 #7a0a0a,
    0 12px 0 #5a0808,
    0 18px 30px rgba(0,0,0,0.85),
    0  0   60px rgba(255, 220, 100, 1);
  filter: drop-shadow(0 0 30px rgba(255, 220, 100, 0.9));
  animation-name: result-pop, result-wobble;
  animation-duration: 900ms, 1.6s;
  animation-delay: 0s, 900ms;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
}

.result-text.lose {
  color: #ddd;
  -webkit-text-stroke: 2px #222;
  text-shadow:
    0 3px 0 #444,
    0 6px 0 #222,
    0 10px 18px rgba(0,0,0,0.85);
  font-size: clamp(2.6rem, 9vw, 7rem);
  filter: grayscale(0.4);
}

@keyframes result-pop {
  0%   { transform: scale(0)    rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(4deg);   opacity: 1; }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
}
@keyframes result-wobble {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  25%      { transform: scale(1.05) rotate(2deg); }
  50%      { transform: scale(1)    rotate(0deg); }
  75%      { transform: scale(1.05) rotate(-2deg); }
}

.confetti-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

/* ---------- BNetzA result modal ---------- */

.bnetza-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 20;
  padding: 2vmin;
  opacity: 0;
  transition: opacity 350ms ease;
}
.bnetza-modal.shown {
  display: flex;
  opacity: 1;
}
.bnetza-modal-inner {
  position: relative;
  width: min(960px, 96vw);
  height: min(680px, 90vh);
  background: #fff;
  border-radius: 14px;
  border: 4px solid #ffd24a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 220, 100, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bnetza-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, #ff5a00 0%, #d92121 100%);
  color: #fff8d4;
  font-family: "Impact", "Arial Black", sans-serif;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.bnetza-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff8d4;
  background: rgba(0, 0, 0, 0.25);
  color: #fff8d4;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background 120ms ease;
}
.bnetza-modal-close:hover { transform: scale(1.08); background: rgba(0, 0, 0, 0.45); }
#bnetza-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

/* ---------- Win highlight ---------- */

.slot-machine.winning {
  animation: machine-shake 0.5s ease-in-out infinite alternate;
  box-shadow:
    inset 0 0 0 4px #5a0808,
    inset 0 0 40px rgba(0,0,0,0.5),
    0 30px 60px rgba(0,0,0,0.6),
    0 0 120px 20px rgba(255, 220, 100, 0.8);
}
@keyframes machine-shake {
  from { transform: translate(-2px, 0) rotate(-0.4deg); }
  to   { transform: translate(2px, 0)  rotate(0.4deg); }
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .lever {
    right: -50px;
    top: 30%;
    transform: scale(0.85);
  }
  .slot-machine { padding: 20px 22px 28px; }
}