:root{
  --bg: #0e0f12;
  --panel: #151821;
  --accent: #9ef0ff;
  --accent-2: #ffd166;
  --win: #7cf29c;
  --muted: #99a1b3;
  --cell: 80px;   /* Symbolhöhe */
  --reel-w: 96px; /* Spaltenbreite */
  --radius: 18px;
  --shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  --speed-0: 900ms;
  --speed-1: 1100ms;
  --speed-2: 1300ms;
  --speed-3: 1500ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(1100px 600px at 50% -10%, #1d2230, #0c0d11 60%, #06070a);
  color:#eef2f7; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  display:grid; place-items:center; padding:24px;
}

.slotmachine{
  width:min(98vw, 680px);
  background: linear-gradient(180deg, #181b25, #12141b 30% 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 22px;
  border: 1px solid rgba(255,255,255,.06);
}

.slot-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px;
}
.slot-title{
  font-size: clamp(18px, 3.2vw, 22px); margin:0; letter-spacing:.5px; color: var(--accent);
  text-shadow: 0 0 14px rgba(158,240,255,.25);
}

.slot-stage{
  display:grid; grid-template-columns: repeat(4, var(--reel-w)); gap: 14px;
  background: linear-gradient(180deg, #0f1117, #0b0d12);
  border-radius: calc(var(--radius) - 6px);
  padding: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  justify-content:center; align-items:center;
}

.reel{
  width: var(--reel-w);
  height: var(--cell);
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg,#0f131a,#0c0f15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.4);
  position: relative;
}

.strip{
  will-change: transform;
  transform: translateY(0);
}

.symbol{
  display:grid; place-items:center;
  width: 100%; height: var(--cell);
  font-size: 40px; line-height:1;
  user-select:none;
  /* Emojis sauber rendern */
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
}

.slot-controls{ display:flex; justify-content:center; margin-top: 16px; gap:12px; }

.slot-btn{
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg,#1f2330,#141824);
  color:#e5ecf5; padding: 10px 16px; border-radius: 12px; cursor: pointer;
  font-weight:600; letter-spacing:.2px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.slot-btn:hover{ transform: translateY(-1px); }
.slot-btn:active{ transform: translateY(0); }
.slot-btn.primary{
  background: linear-gradient(180deg, #2c3650, #1c2233);
  border-color: rgba(158,240,255,.25);
  text-shadow: 0 0 12px rgba(158,240,255,.2);
}
.slot-btn.ghost{
  background: transparent; border-color: rgba(255,255,255,.12); color: var(--muted);
}

.slotmachine.win .slot-stage{
  box-shadow: inset 0 0 0 2px rgba(124,242,156,.3), 0 0 30px rgba(124,242,156,.15);
}
.slotmachine.win .slot-title{ color: var(--win); text-shadow: 0 0 18px rgba(124,242,156,.35); }

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Reduced motion: keine Transitionen nötig – JS setzt direkt um */
@media (prefers-reduced-motion: reduce){
  .strip{ transition: none !important; }
}