/* ==========================================================================
   NEXT-GEN GRAFIK-UPGRADE – Look & Feel echter Online-Slots
   (wird nach slot.css/effects.css und vor mobile.css geladen)
   ========================================================================== */

/* ---------- Synthwave-Hintergrund: Horizont-Sonne + bewegtes Gitter ---------- */
.bg-synthwave {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-sun {
  position: absolute;
  left: 50%;
  bottom: 30%;
  width: min(70vw, 620px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 58%, rgba(8, 6, 15, 0.9) 58% 61%, transparent 61% 66%),
    linear-gradient(180deg, #ffd700 0%, #ff6a00 40%, #ff00ea 85%);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%);
  mask: linear-gradient(180deg, #000 55%, transparent 100%);
  opacity: 0.18;
  filter: blur(1px);
}
.bg-grid {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 42%;
  background-image:
    linear-gradient(rgba(255, 0, 234, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.28) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: center top;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 45%);
  mask: linear-gradient(180deg, transparent 0%, #000 45%);
  animation: grid-scroll 3s linear infinite;
  opacity: 0.55;
}
@keyframes grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 60px, 0 0; }
}
.app-header, .main-wrapper, .app-footer { position: relative; z-index: 5; }

/* ---------- Gehäuse: dunkles Gehäuse + rotierender Neon-Rand (nur im Rahmen) ---------- */
.slot-chassis {
  border: 3px solid transparent;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(121, 40, 202, 0.28), transparent 60%) padding-box,
    linear-gradient(180deg, #1b1438 0%, #0c0819 100%) padding-box,
    conic-gradient(from var(--chassis-angle, 0deg), #00f0ff, #ff00ea, #ffd700, #00ff88, #00f0ff) border-box;
  animation: chassis-spin 6s linear infinite;
}
.slot-chassis::before { content: none; }
.slot-chassis::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: conic-gradient(from var(--chassis-angle, 0deg), #00f0ff, #ff00ea, #ffd700, #00ff88, #00f0ff);
  filter: blur(20px);
  opacity: 0.3;
  z-index: -1;
  animation: chassis-spin 6s linear infinite;
  pointer-events: none;
}
@property --chassis-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes chassis-spin { to { --chassis-angle: 360deg; } }

/* ---------- Lauflichter (Marquee-Glühbirnen) ---------- */
.marquee-lights {
  height: 10px;
  margin: 0 6px;
  border-radius: 6px;
  background-image:
    radial-gradient(circle, #fff 0 1.5px, var(--bulb-a, #ffd700) 2.5px, transparent 4.5px);
  background-size: 18px 10px;
  background-repeat: repeat-x;
  background-position: 0 center;
  filter: drop-shadow(0 0 4px var(--bulb-a, #ffd700));
  animation: bulbs-chase 0.9s steps(2) infinite;
  opacity: 0.95;
}
.marquee-top { margin-bottom: 10px; }
.marquee-bottom { margin-top: 12px; --bulb-a: #00f0ff; animation-delay: -0.45s; }
@keyframes bulbs-chase {
  0%   { background-position: 0 center; }
  100% { background-position: 18px center; }
}
/* Bei Gewinn: schneller & golden */
.slot-chassis.chassis-win .marquee-lights {
  --bulb-a: #ffd700;
  animation-duration: 0.25s;
}
.slot-chassis.chassis-win, .slot-chassis.chassis-win::after { animation-duration: 1.2s; }

/* ---------- Walzenfenster ---------- */
.reels-viewport {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(10, 6, 24, 0.6) 20%, rgba(10, 6, 24, 0.6) 80%, rgba(0, 0, 0, 0.85)),
    #06040d;
  border: 2px solid rgba(255, 215, 0, 0.35);
  box-shadow:
    0 0 0 4px #0a0716,
    0 0 0 6px rgba(0, 240, 255, 0.25),
    inset 0 18px 30px rgba(0, 0, 0, 0.95),
    inset 0 -18px 30px rgba(0, 0, 0, 0.95);
}

/* Einzelne Walze mit Metall-Trennern */
.slot-reel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 15%, transparent 85%, rgba(255, 255, 255, 0.05)),
    radial-gradient(120% 70% at 50% 50%, rgba(40, 28, 80, 0.75), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85);
}

/* Symbole werden per JS absolut positioniert */
.slot-reel .slot-symbol {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Gestochen scharfe Symbole beim Drehen (Blur deaktiviert) */
.slot-reel.is-blurred .symbol-svg {
  filter: none;
  transform: none;
}

/* Lichtblitz beim Einrasten der Walze */
.slot-reel.reel-landed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 35%);
  animation: reel-flash 0.3s ease-out forwards;
  pointer-events: none;
}
@keyframes reel-flash { from { opacity: 1; } to { opacity: 0; } }

/* Anticipation (Spannung): pulsierender Magenta-Rahmen + Energiestreifen */
.slot-reel.anticipation-active {
  border-color: var(--magenta-neon);
  box-shadow: 0 0 22px var(--magenta-neon), inset 0 0 26px rgba(255, 0, 234, 0.55);
  animation: anticipation-pulse 0.35s infinite alternate;
}
.slot-reel.anticipation-active::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 0, 234, 0.25) 14px 16px);
  animation: energy-scroll 0.4s linear infinite;
  pointer-events: none;
}
@keyframes energy-scroll { to { background-position: 0 16px; } }

/* ---------- Gewinn: Verlierer abdunkeln, Gewinner hervorheben ---------- */
#reels-container.has-win .slot-symbol:not(.winner-symbol) {
  opacity: 0.28;
  filter: grayscale(0.7) brightness(0.55);
}
.slot-symbol.winner-symbol::after { content: none; }
.slot-symbol.winner-symbol {
  z-index: 3;
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.25), transparent 65%);
}
.slot-symbol.winner-symbol .symbol-svg {
  animation: winner-dance 0.75s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}
@keyframes winner-dance {
  0%   { transform: scale(1.04) rotate(-2deg); filter: drop-shadow(0 0 6px #ffd700) brightness(1.05); }
  100% { transform: scale(1.2) rotate(2deg);   filter: drop-shadow(0 0 22px #ffd700) brightness(1.35); }
}

/* Scatter-Landung */
.slot-symbol.scatter-highlight .symbol-svg {
  animation: scatter-land 1.4s ease-out;
}
@keyframes scatter-land {
  0%   { transform: scale(0.8) rotate(0deg); filter: drop-shadow(0 0 0 #ff00ea); }
  30%  { transform: scale(1.35) rotate(180deg); filter: drop-shadow(0 0 28px #ff00ea) brightness(1.6); }
  100% { transform: scale(1) rotate(360deg); filter: drop-shadow(0 0 8px #ff00ea); }
}

/* ---------- Schwebender Gewinnbetrag ---------- */
#win-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 7vw, 54px);
  letter-spacing: 1px;
  white-space: nowrap;
  background: linear-gradient(180deg, #fffbe0 0%, #ffd700 45%, #ff8a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(80, 30, 0, 0.6);
  filter: drop-shadow(0 4px 0 #7a3b00) drop-shadow(0 0 18px rgba(255, 200, 0, 0.8));
}
#win-popup.show { animation: win-popup 1.9s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
#win-popup.tier-nice { font-size: clamp(32px, 9vw, 66px); }
@keyframes win-popup {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.9); }
}

/* ---------- LED-Nachrichtenleiste ---------- */
.slot-message {
  margin-top: 10px;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(11px, 2.8vw, 15px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffb84d;
  text-shadow: 0 0 8px rgba(255, 160, 40, 0.9);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 0.8px, transparent 1.2px) 0 0 / 4px 4px,
    linear-gradient(180deg, #050309, #120a1e);
  border: 1px solid rgba(255, 184, 77, 0.25);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-message strong { color: #ffe680; font-weight: 900; }
.slot-message.msg-idle { animation: msg-fade 0.4s ease; }
.slot-message.msg-spin { color: #7df9ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.9); border-color: rgba(0, 240, 255, 0.3); }
.slot-message.msg-win {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.6);
  text-shadow: 0 0 10px rgba(255, 215, 0, 1);
  animation: msg-win-glow 0.8s ease-in-out infinite alternate;
}
.slot-message.msg-anticipation {
  color: #ff6bf5;
  border-color: rgba(255, 0, 234, 0.6);
  text-shadow: 0 0 10px rgba(255, 0, 234, 1);
  animation: msg-blink 0.35s steps(2) infinite;
}
.msg-line {
  padding: 1px 8px;
  border-radius: 6px;
  color: #08060f;
  text-shadow: none;
  background: var(--lc, #00f0ff);
  box-shadow: 0 0 10px var(--lc, #00f0ff);
}
@keyframes msg-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes msg-win-glow { from { box-shadow: inset 0 0 14px rgba(0,0,0,.9), 0 0 4px rgba(255,215,0,.3); } to { box-shadow: inset 0 0 14px rgba(0,0,0,.9), 0 0 18px rgba(255,215,0,.6); } }
@keyframes msg-blink { 50% { opacity: 0.55; } }

/* ---------- Anzeigen ---------- */
.meter-card { position: relative; overflow: hidden; }
.meter-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-20deg);
  animation: meter-shine 6s ease-in-out infinite;
}
@keyframes meter-shine { 0%, 80% { left: -60%; } 100% { left: 130%; } }
.meter-win.meter-counting { border-color: var(--green-neon); box-shadow: 0 0 16px rgba(0, 255, 136, 0.45), inset 0 2px 6px rgba(0,0,0,.6); }
.meter-win.meter-pop .meter-value { animation: meter-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes meter-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- Dreh-Button: rotierender Ring + Symbol ---------- */
.btn-spin-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  isolation: isolate;
  overflow: visible;
}
.btn-spin-main::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from var(--spin-angle, 0deg), #00f0ff, transparent 30%, #ff00ea 50%, transparent 80%, #00f0ff);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  mask: radial-gradient(circle, transparent 62%, #000 64%);
  animation: spin-ring 3s linear infinite;
  z-index: -1;
}
@property --spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes spin-ring { to { --spin-angle: 360deg; } }
.btn-spin-main .spin-icon {
  font-size: 1.9em;
  line-height: 1;
  font-family: system-ui, sans-serif;
  text-shadow: 0 0 10px #fff;
  transition: transform 0.4s ease;
}
.btn-spin-main .spin-label { font-size: 0.72em; letter-spacing: 1.5px; margin-top: 1px; }
.btn-spin-main:not(:disabled):hover .spin-icon { transform: rotate(90deg); }
.btn-spin-main:disabled { filter: saturate(0.6) brightness(0.85); cursor: default; }
.btn-spin-main:disabled::before { animation-duration: 0.6s; }
.btn-spin-main:disabled .spin-icon { animation: spin-icon 0.6s linear infinite; }
.btn-spin-main:not(:disabled) { animation: spin-breathe 2.2s ease-in-out infinite; }
@keyframes spin-icon { to { transform: rotate(360deg); } }
@keyframes spin-breathe {
  0%, 100% { box-shadow: 0 0 22px rgba(0, 240, 255, 0.6), inset 0 3px 6px rgba(255,255,255,.5), inset 0 -4px 8px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 40px rgba(0, 240, 255, 0.95), inset 0 3px 6px rgba(255,255,255,.5), inset 0 -4px 8px rgba(0,0,0,.5); }
}
.btn-spin-main:active:not(:disabled) { transform: scale(0.94); }

/* ---------- Big-Win: Lichtstrahlen, Stufen-Farben, Zähler ---------- */
#bigwin-modal {
  overflow: hidden;
  isolation: isolate;
}
.bigwin-rays {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 260%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 0, 0.22) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%);
  mask: radial-gradient(circle, #000 10%, transparent 60%);
  animation: rays-rotate 12s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes rays-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
#bigwin-modal[data-tier="mega"] .bigwin-rays { background: repeating-conic-gradient(rgba(255, 0, 234, 0.25) 0deg 8deg, transparent 8deg 22deg); animation-duration: 7s; }
#bigwin-modal[data-tier="epic"] .bigwin-rays { background: repeating-conic-gradient(rgba(0, 240, 255, 0.28) 0deg 6deg, rgba(255, 215, 0, 0.2) 6deg 12deg, transparent 12deg 20deg); animation-duration: 4s; }
#bigwin-modal[data-tier="mega"] { border-color: var(--magenta-neon); box-shadow: 0 0 60px rgba(255, 0, 234, 0.6); }
#bigwin-modal[data-tier="epic"] { border-color: var(--cyan-neon); box-shadow: 0 0 80px rgba(0, 240, 255, 0.7), 0 0 140px rgba(255, 215, 0, 0.35); }

#bigwin-title.tier-bump { animation: tier-bump 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tier-bump {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}
#bigwin-modal[data-tier="mega"] #bigwin-title { background: linear-gradient(90deg, #ff00ea, #ffd700, #ff00ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
#bigwin-modal[data-tier="epic"] #bigwin-title { background: linear-gradient(90deg, #00f0ff, #ffffff, #ffd700, #00f0ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: epic-shimmer 1.2s linear infinite; }
@keyframes epic-shimmer { to { background-position: 200% 0; } }
#bigwin-amount {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fffbe0 0%, #ffd700 50%, #ff8a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #7a3b00) drop-shadow(0 0 20px rgba(255, 200, 0, 0.7));
  text-shadow: none;
}

/* Barrierefreiheit: weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .bg-grid, .marquee-lights, .slot-chassis, .slot-chassis::after,
  .btn-spin-main::before, .bigwin-rays, .meter-card::after { animation: none !important; }
}

/* Mobile Feinschliff */
@media (max-width: 640px) {
  .marquee-lights { height: 8px; background-size: 14px 8px; margin: 0 4px; }
  .marquee-top { margin-bottom: 6px; }
  .marquee-bottom { margin-top: 8px; }
  @keyframes bulbs-chase { to { background-position: 14px center; } }
  .slot-message { margin-top: 6px; min-height: 24px; padding: 3px 8px; letter-spacing: 0.8px; font-size: 11px; }
  .bg-grid { background-size: 40px 40px; }
  .btn-spin-main::before { inset: -5px; }
}