@font-face{font-family:"Freckle";src:url("fonts/Freckle_Face/FreckleFace-Regular.ttf")}
@font-face{font-family:"Bitcount";src:url("fonts/Bitcount/static/Bitcount-Regular.ttf")}
:root{--neon:#ff2bd6;--cyan:#27e8ff;--amber:#ffb800;--bg:#0b0010;--cell:min(23vw,120px,calc((100vh - 430px) / 4))}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 0,#2a003a,var(--bg) 75%);color:#fff;font-family:"Freckle","Courier New",monospace;overflow:hidden;touch-action:manipulation}

/* Gehäuse: gebürstetes Metall mit Schraubenköpfen und Lichtkante */
#machine{height:100%;max-width:480px;margin:0 auto;padding:8px 18px;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;
  background:
    linear-gradient(rgba(0,0,10,.5),rgba(0,0,10,.5)),
    radial-gradient(ellipse at 50% 45%,rgba(255,240,200,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.07),transparent 18%,rgba(0,0,0,.25)),
    repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px),
    url("images/South-Park-Tribute-Art-Print-mockup-low-res.webp") center/cover no-repeat,
    #262633;
  border-left:4px solid #3b3b4a;border-right:4px solid #3b3b4a;
  box-shadow:0 0 0 1px #000,inset 0 0 40px #000,inset 6px 0 14px -6px var(--neon),inset -6px 0 14px -6px var(--neon)}

/* Titel: bedruckte Folie auf hinterleuchtetem Milchglas, keine Leuchtschrift */
.marquee{width:100%;text-align:center;padding:4px 0 6px;font-weight:bold;letter-spacing:.2em;font-size:clamp(14px,4.5vw,22px);color:#fff1c4;
  text-shadow:0 2px 3px #000,0 0 8px rgba(0,0,0,.7)}
.marquee b{display:inline-block;vertical-align:baseline}
.marquee .w1{font-size:1.15em}.marquee .w2{font-size:.9em}.marquee .w3{font-size:1.3em}
.marquee span{display:block}
@keyframes blink{50%{opacity:.8}}
@keyframes ledflick{0%,100%{filter:brightness(1)}25%{filter:brightness(1.7)}50%{filter:brightness(.55)}75%{filter:brightness(1.4)}}

/* Punktmatrix-Anzeige hinter Glas */
.display{position:relative;width:100%;padding:7px;border-radius:9px;background:linear-gradient(#050505,#1a1a1a);border:2px solid #444;
  box-shadow:inset 0 0 0 2px #000,inset 0 3px 8px #000,0 1px 0 #ffffff33,0 5px 10px #000b}
.display canvas{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 0 14px rgba(255,150,0,.25);filter:saturate(1.1)}
.display::after{content:"";position:absolute;inset:7px;border-radius:4px;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.20) 0,rgba(255,255,255,.06) 32%,transparent 33%),
    linear-gradient(rgba(255,255,255,.07),transparent 30%,rgba(0,0,0,.35));
  box-shadow:inset 0 0 12px rgba(0,0,0,.8)}

/* LED-Linsen */
.bonus-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;padding:4px 8px;background:#0a0a10;border-radius:20px;border:2px solid #333;box-shadow:inset 0 2px 5px #000,0 1px 0 #ffffff22}
.led{font-size:10px;min-width:26px;height:20px;line-height:17px;text-align:center;border-radius:50%;color:#554;border:2px solid #222;
  background:radial-gradient(circle at 35% 28%,#666 0,#2a2a2a 38%,#111 100%);box-shadow:inset 0 -2px 3px #000}
.led.on{color:#2a1800;border-color:#6b4a00;background:radial-gradient(circle at 35% 28%,#fff6c4 0,#ffc020 35%,#a85f00 100%);
  box-shadow:0 0 8px var(--amber),0 0 18px #ff9a0088;animation:ledflick .7s steps(1) infinite}
.led.won{color:#000;border-color:#064;background:radial-gradient(circle at 35% 28%,#a8e8c0 0,#00a040 38%,#004a22 100%);box-shadow:0 0 10px #0a5,0 0 22px #0a58}

/* Walzen: Metallrahmen, Glasscheibe, Symbolband auf rotierender Walze, LED-Beleuchtung von oben */
.slots{display:flex;gap:9px;padding:10px;border-radius:14px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),linear-gradient(#5a5a68,#24242e 40%,#14141a);
  border:2px solid #777;box-shadow:inset 0 2px 0 #ffffff55,inset 0 -3px 8px #000,0 6px 14px #000c,0 0 22px rgba(39,232,255,.35)}
.slot{position:relative;width:var(--cell);height:var(--cell);border-radius:10px;padding:7px;
  background:linear-gradient(#0a0a10,#2a2a35);border:2px solid #111;box-shadow:inset 0 3px 8px #000,0 1px 0 #ffffff44}
.slot::before{content:"";position:absolute;top:2px;left:18%;right:18%;height:4px;border-radius:3px;z-index:5;
  background:#2a2e34;box-shadow:inset 0 1px 2px #000;transition:background .15s,box-shadow .15s}
.slot.empty{opacity:.7}
.slot.try::before{background:#fff8d8;box-shadow:0 0 6px #fff,0 0 14px var(--amber),0 0 26px var(--amber),0 5px 20px 5px rgba(255,184,0,.75)}
.slot.err::before{animation:errblink 1s steps(1) 1;background:#ffd8d8;background:#ff5a5a;box-shadow:0 0 6px #f22,0 0 14px #f00,0 0 26px #d00,0 5px 20px 5px rgba(255,20,20,.7)}
.slot.err{box-shadow:inset 0 3px 8px #000,0 0 14px #f22}
.slot.try{box-shadow:inset 0 3px 8px #000,0 0 14px var(--amber)}
.window{--win:calc(var(--cell) - 18px);position:relative;width:100%;height:100%;overflow:hidden;border-radius:7px;background:#e9edf2;
  box-shadow:inset 0 0 8px #000,0 0 0 1px #000}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.face{height:var(--win);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#c9ced8,#f7f9fc 30%,#f7f9fc 70%,#bfc5d0);border-bottom:1px solid #8a90a0;box-shadow:inset 0 -2px 3px rgba(0,0,0,.12)}
.window.moving .strip{filter:blur(1.4px)}
/* Walzenrundung (dunkle Ränder oben/unten), Lichtkegel der LED */
.window::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% -10%,rgba(190,245,255,.55),transparent 62%),
    linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.10) 26%,rgba(255,255,255,.10) 50%,rgba(0,0,0,.10) 74%,rgba(0,0,0,.82))}
/* Glasscheibe: Reflexion und Kantenlicht */
.window::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:7px;
  background:linear-gradient(118deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.12) 24%,transparent 25%,transparent 62%,rgba(255,255,255,.14) 63%,transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 10px rgba(0,0,0,.55)}

/* Kunststoffkappen: Taster mit LED dahinter, die Kappe und Umgebung ausleuchtet */
.btn-well{padding:7px;border-radius:50px;background:radial-gradient(#000,#15151c);box-shadow:inset 0 3px 7px #000,0 1px 0 #ffffff55,0 0 0 3px #3a3a46,0 0 0 4px #000}
.spin{--led:#ff2a2a;display:block;position:relative;font:bold clamp(16px,5vw,22px) "Freckle","Courier New",monospace;color:#fff;cursor:pointer;
  padding:9px 38px 12px;border-radius:40px;border:0;
  background:
    radial-gradient(ellipse at 50% 120%,var(--led),transparent 70%),
    linear-gradient(#ff8a8a,#d81818 35%,#8a0000);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.55),inset 0 -8px 12px rgba(60,0,0,.65),inset 0 0 24px rgba(255,80,80,.55),
    0 5px 0 #4a0000,0 9px 10px #000,0 0 26px var(--led),0 0 60px rgba(255,40,40,.45);
  text-shadow:0 0 8px #fff,0 1px 2px #600;transition:transform .06s,box-shadow .06s}
.spin::before{content:"";position:absolute;left:12%;right:12%;top:3px;height:42%;border-radius:40px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.05))}
.spin:active{transform:translateY(4px);box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -6px 10px rgba(60,0,0,.6),inset 0 0 30px rgba(255,120,120,.8),
    0 1px 0 #4a0000,0 3px 6px #000,0 0 34px var(--led),0 0 70px rgba(255,40,40,.6)}

/* Spielfeld: Platte mit Nieten; die Kappen leuchten auf sie ab */
.board{display:grid;grid-template-columns:repeat(3,var(--cell));gap:9px;padding:26px;border-radius:14px;position:relative;
  background:
    radial-gradient(circle at 6px 6px,#bbb 0 2px,#333 3px,transparent 4px) top left/auto no-repeat,
    radial-gradient(circle at calc(100% - 6px) 6px,#bbb 0 2px,#333 3px,transparent 4px) no-repeat,
    radial-gradient(circle at 6px calc(100% - 6px),#bbb 0 2px,#333 3px,transparent 4px) no-repeat,
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px),#bbb 0 2px,#333 3px,transparent 4px) no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),
    linear-gradient(#1e1830,#0d0916);
  border:2px solid #666;box-shadow:inset 0 2px 10px #000,inset 0 1px 0 #ffffff33,0 6px 14px #000c}
.cell{--led:var(--cyan);position:relative;width:var(--cell);height:var(--cell);border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 100%,var(--led),transparent 75%),
    linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 40%,rgba(0,0,0,.25));
  background-color:#20202c;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.5),inset 0 -8px 14px rgba(0,0,0,.55),inset 0 0 22px color-mix(in srgb,var(--led) 55%,transparent),
    0 5px 0 #05050a,0 8px 8px #000,0 0 18px color-mix(in srgb,var(--led) 70%,transparent),0 0 40px color-mix(in srgb,var(--led) 35%,transparent);
  transition:transform .06s,box-shadow .06s}
.cell::before{content:"";position:absolute;left:10%;right:10%;top:4px;height:34%;border-radius:12px 12px 40px 40px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.04))}
.cell:active{transform:translateY(4px);box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -6px 10px rgba(0,0,0,.5),inset 0 0 28px var(--led),
    0 1px 0 #05050a,0 3px 5px #000,0 0 26px var(--led),0 0 50px color-mix(in srgb,var(--led) 45%,transparent)}
.cell.sel{--led:var(--amber);filter:brightness(1.25) saturate(1.2);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.5),inset 0 -8px 14px rgba(0,0,0,.45),inset 0 0 32px var(--led),
    0 5px 0 #05050a,0 8px 8px #000,0 0 26px var(--led),0 0 60px color-mix(in srgb,var(--led) 60%,transparent)}
.cell.done{--led:#22ff44;cursor:default;filter:brightness(1.35) saturate(1.3);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.6),inset 0 -8px 14px rgba(0,0,0,.4),inset 0 0 36px var(--led),
    0 5px 0 #05050a,0 8px 8px #000,0 0 28px var(--led),0 0 64px color-mix(in srgb,var(--led) 65%,transparent),0 0 100px color-mix(in srgb,var(--led) 30%,transparent)}
.cell.bad{--led:#ff2a2a;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.sym{width:70%;height:70%;position:relative;display:flex;align-items:center;justify-content:center}
.sym{z-index:1}
.sym svg{width:100%;height:100%;filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* Symbol = freigestelltes Motiv mit 5px-Farbrand: .ol ist die Randmaske in Symbolfarbe, .img das Motiv in Originalfarben */
.sym .img,.sym .ol{position:absolute;inset:-3%;background-repeat:no-repeat}
.sym .img{background:url("images/symbols.webp") var(--p)/700% 100% no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.sym .ol{background:url("images/symbols-outline.webp") var(--o)/700% 700% no-repeat}
.sym .num{position:absolute;right:4%;bottom:0;font-weight:bold;font-size:calc(var(--cell)*.26);line-height:1;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 4px #000}

.mute{--led:var(--cyan);position:absolute;top:10px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid #ffffff55;color:#fff;font-size:15px;cursor:pointer;
  background:radial-gradient(ellipse at 50% 110%,var(--led),transparent 70%),linear-gradient(#6a8a9a,#1e3040);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.6),inset 0 -4px 6px rgba(0,0,0,.5),0 3px 0 #000,0 0 12px var(--led)}
.mute.fx{right:54px;font-size:11px;font-weight:bold}
.mute:active{transform:translateY(2px)}
.mute.off{--led:#333;color:#777;text-decoration:line-through}

@media (max-height:560px){:root{--cell:60px}}

/* Bonus-Inserts: bündig eingelassene, farbige Kunststoff-Inserts mit Lampe darunter; Schrift ist schwarz aufgedruckt, Licht strahlt aufs Spielfeld */
.gizmo{--g:#ffb800;--gd:#5a3a00;position:absolute;min-width:30px;height:22px;padding:0;transform:translate(-50%,-50%);border-radius:11px;z-index:2;pointer-events:none;
  background:#000;box-shadow:0 0 0 2px #1a1a20,0 0 0 3px #555,0 1px 0 3px #ffffff30,inset 0 2px 3px #000}
.gizmo i{position:absolute;inset:2px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:bold;font-size:12px;letter-spacing:.03em;overflow:hidden;
  color:#000;text-shadow:0 1px 0 rgba(255,255,255,.18);
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--g) 38%,#000),var(--gd) 90%);
  box-shadow:inset 0 2px 4px #000,inset 0 -1px 2px rgba(255,255,255,.12);transition:background .15s,box-shadow .15s}
.gizmo i::after{content:"";position:absolute;left:4px;right:4px;top:1px;height:30%;border-radius:6px;background:linear-gradient(rgba(255,255,255,.28),transparent)}
.gizmo::before{content:"";position:absolute;inset:-14px -16px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .15s;
  background:radial-gradient(closest-side,var(--g),transparent);mix-blend-mode:screen}
.gizmo[data-b^=row]{--g:#ffb800;--gd:#4a2e00}
.gizmo[data-b^=col]{--g:#27e8ff;--gd:#00404a}
.gizmo[data-b^=d]{--g:#ff2bd6;--gd:#4a0040}
.gizmo[data-b=mid]{--g:#ffe040;--gd:#4a4000}
.gizmo.on i{background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--g) 70%,#fff) 0,var(--g) 45%,var(--gd) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 8px var(--g)}
@keyframes gizpulse{
  0%,100%{filter:brightness(1.15);box-shadow:inset 0 0 5px #fffa,0 0 12px var(--g),0 0 26px var(--g)}
  50%{filter:brightness(1.6);box-shadow:inset 0 0 8px #fff,0 0 18px var(--g),0 0 40px var(--g),0 0 60px var(--g)}}
@keyframes gizhalo{0%,100%{opacity:.6}50%{opacity:.95}}
.gizmo.on::before{opacity:.8;animation:gizhalo 1.2s ease-in-out infinite}
.gizmo.on i{background:radial-gradient(ellipse at 50% 55%,#fff 0,#fff 25%,color-mix(in srgb,var(--g) 45%,#fff) 55%,var(--g) 100%);animation:gizpulse 1.2s ease-in-out infinite}
@keyframes gizblink{50%{background:radial-gradient(ellipse at 50% 55%,#fff 0,color-mix(in srgb,var(--g) 60%,#fff) 40%,var(--g) 100%);box-shadow:inset 0 0 4px #fff8,0 0 12px var(--g),0 0 26px var(--g)}}
.gizmo.on.flash i,.gizmo.hit i{background:radial-gradient(ellipse at 50% 55%,#fff 0,color-mix(in srgb,var(--g) 60%,#fff) 40%,var(--g) 100%);box-shadow:inset 0 0 4px #fff8,0 0 12px var(--g),0 0 26px var(--g)}
.gizmo.on.flash::before,.gizmo.hit::before{opacity:.55}
.gizmo.won{--g:#00a844;--gd:#003a14}
.gizmo.won i{animation:none;background:radial-gradient(ellipse at 50% 55%,#a8e8c0 0,#00a040 50%,#004a22 100%);box-shadow:inset 0 0 4px #fff8,0 0 10px #0a5,0 0 24px #0a58}
.gizmo.won::before{opacity:.4}
.gizmo.party i{animation:gizblink .45s steps(1) infinite;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--g) 70%,#fff) 0,var(--g) 45%,var(--gd) 100%)}
.gizmo.party::before{opacity:.45}
.gizmo.won.party i{animation:gizblink .45s steps(1) infinite}
/* Extra-Insert links neben dem SLOT-Taster: leuchtet nur, wenn der nächste Spin gratis ist */
.btn-row{position:relative;display:flex;justify-content:center;align-items:center}
.gizmo.extra{--g:#00a844;--gd:#003a14;position:absolute;right:calc(50% + 78px);top:50%;transform:translateY(-50%);min-width:54px}
.gizmo.extra i{font-size:13px;padding:0 6px;position:absolute}
.gizmo.extra.on i{animation:extrablink .28s linear infinite;transition:none}
@keyframes extrablink{
  0%,49.9%{background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--g) 70%,#fff) 0,var(--g) 45%,var(--gd) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 8px var(--g)}
  50%,100%{background:radial-gradient(ellipse at 50% 55%,#fff 0,color-mix(in srgb,var(--g) 60%,#fff) 40%,var(--g) 100%);box-shadow:inset 0 0 4px #fff8,0 0 12px var(--g),0 0 26px var(--g)}}
.gizmo[data-b=row0]{left:15px;top:calc(26px + 0*(var(--cell) + 9px) + var(--cell)/2)}
.gizmo[data-b=col0]{top:13px;left:calc(26px + 0*(var(--cell) + 9px) + var(--cell)/2)}
.gizmo[data-b=row1]{left:15px;top:calc(26px + 1*(var(--cell) + 9px) + var(--cell)/2)}
.gizmo[data-b=col1]{top:13px;left:calc(26px + 1*(var(--cell) + 9px) + var(--cell)/2)}
.gizmo[data-b=row2]{left:15px;top:calc(26px + 2*(var(--cell) + 9px) + var(--cell)/2)}
.gizmo[data-b=col2]{top:13px;left:calc(26px + 2*(var(--cell) + 9px) + var(--cell)/2)}
.gizmo[data-b=d1]{left:15px;top:13px}
.gizmo[data-b=d2]{right:15px;left:auto;top:13px;transform:translate(50%,-50%)}
.gizmo[data-b=mid]{left:50%;bottom:13px;top:auto;transform:translate(-50%,50%);min-width:40px}

/* Bilderfolien im Stil der 60er/70er: Streifen mit Blumenmuster an den Seiten, Zierstreifen unter dem Marquee */
#machine::before,#machine::after{content:"";position:absolute;top:0;bottom:0;width:14px;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,#ffd23a 0 1.6px,#fff6d8 1.8px 2.8px,#f58220 3px 5px,#d9541e 5.3px 6px,transparent 6.3px) 0 0/14px 38px,
    linear-gradient(90deg,#4a2a10 0 1px,#e8a317 1px 3px,#6d7a1f 3px 11px,#e8a317 11px 13px,#4a2a10 13px);
  box-shadow:inset 0 0 0 1px #0006,inset 0 0 6px #000a}
#machine::before{left:0;border-right:1px solid #000}
#machine::after{right:0;border-left:1px solid #000}
#machine>*{z-index:1}
.foil{width:100%;height:10px;flex:none;border-radius:2px;
  background:linear-gradient(#e8a317 0 2px,#f58220 2px 5px,#4a2a10 5px 6px,#6d7a1f 6px 8px,#ffd23a 8px 10px);
  box-shadow:0 1px 0 #000,inset 0 1px 0 #fff6,inset 0 -2px 2px #0004}

/* Seitliche LED-Leisten: liegen über dem Gehäuse im Randbereich, werden von Spielfeld und Walzen nie überdeckt */
.rail{--c:var(--neon);position:absolute;top:10px;bottom:10px;width:10px;padding:4px 0;display:flex;flex-direction:column;justify-content:space-between;z-index:6;pointer-events:none;
  border-radius:6px;background:linear-gradient(90deg,#020204,#14141c 50%,#020204);box-shadow:inset 0 0 3px #000,0 0 0 1px #50505c,0 0 0 2px #000}
.rail.l{left:4px}.rail.r{right:4px}
.rail i{display:block;width:7px;height:7px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff 0,var(--c) 45%,color-mix(in srgb,var(--c) 40%,#000) 100%);
  box-shadow:0 0 4px #fff8,0 0 8px var(--c),0 0 18px var(--c),0 0 30px var(--c);animation:railidle 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.09s)}
@keyframes railidle{0%,100%{opacity:.25;filter:brightness(.7)}50%{opacity:1;filter:brightness(1.5)}}
@keyframes railchase{0%,100%{opacity:.3;transform:scale(.8)}15%{opacity:1;transform:scale(1.3);filter:brightness(1.6)}}
@keyframes railflash{50%{opacity:.1}}
.rail.chase{--c:var(--cyan)}.rail.gold{--c:#ffb800}.rail.win{--c:#00a850}.rail.bad{--c:#ff2020}
.rail.chase i{animation:railchase .55s linear infinite;animation-delay:calc(var(--i)*-.04s)}
.rail.flash i{animation:railflash .2s steps(1) 6}

/* Hinterleuchtung der Bilderfolien (Seitenstreifen, Zierstreifen): Lampe hinter dem Motiv, je nach Spielsituation */
#machine::before,#machine::after,.foil{transition:filter .2s}
@keyframes backlit{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.9) saturate(1.5) drop-shadow(0 0 6px var(--bc))}}
@keyframes backflick{0%,100%{filter:brightness(1)}20%{filter:brightness(2.1) drop-shadow(0 0 6px var(--bc))}35%{filter:brightness(.8)}55%{filter:brightness(1.8) drop-shadow(0 0 6px var(--bc))}}
#machine.bl-win{--bc:#ffe27a}
#machine.bl-bonus{--bc:#7af0ff}
#machine.bl-gold{--bc:#ffc040}
#machine.bl-bad{--bc:#ff4040}
#machine.bl-win::before,#machine.bl-win::after,#machine.bl-win .foil{animation:backlit .9s ease-in-out infinite}
#machine.bl-bonus::before,#machine.bl-bonus::after,#machine.bl-bonus .foil,
#machine.bl-gold::before,#machine.bl-gold::after,#machine.bl-gold .foil{animation:backlit .6s ease-in-out 2}
#machine.bl-bad::before,#machine.bl-bad::after,#machine.bl-bad .foil{animation:backflick .5s steps(1) 3}


/* Mehr Geblinke im Spiel: Taster pulsieren, Bonus-Linsen flackern versetzt */
@keyframes btnpulse{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.35)}}
.spin.free{animation:btnpulse 1.1s ease-in-out infinite}
/* Ohne Freispiel ist der Taster dunkel (Drehen kostet Punkte) */
.spin:not(.free){--led:#300;filter:brightness(.55) saturate(.6);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.25),inset 0 -8px 12px rgba(40,0,0,.7),0 5px 0 #2a0000,0 9px 10px #000;text-shadow:0 1px 2px #300}
.led.on:nth-child(even){animation-duration:.45s}
.led.won{animation:ledflick .5s steps(1) infinite}

@keyframes errblink{0%{opacity:1}12%{opacity:.08}25%{opacity:1}37%{opacity:.08}50%{opacity:1}62%{opacity:.08}75%{opacity:1}87%{opacity:.08}100%{opacity:1}}

/* Levelübergang: alles blinkt wild */
@keyframes frenzyA{0%,100%{filter:brightness(2.2) saturate(2) hue-rotate(0)}50%{filter:brightness(.5) hue-rotate(90deg)}}
@keyframes frenzyB{0%,100%{filter:brightness(.5)}50%{filter:brightness(2.4) saturate(2) hue-rotate(-60deg)}}
#machine.frenzy .marquee,#machine.frenzy .display,#machine.frenzy .btn-well{animation:frenzyA .22s steps(1) infinite}
#machine.frenzy .slot,#machine.frenzy .cell,#machine.frenzy .mute{animation:frenzyB .18s steps(1) infinite}
#machine.frenzy .cell:nth-child(even),#machine.frenzy .slot:nth-child(even){animation-duration:.26s}
#machine.frenzy .gizmo{animation:frenzyA .15s steps(1) infinite}

/* Walzensymbole leuchten, solange die zugehörige Meldung unten läuft */
@keyframes symglow{0%,100%{filter:drop-shadow(0 0 4px #ffb800) brightness(1.1)}50%{filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 22px #ffb800) brightness(1.5)}}
.slots[data-glow=cherry] .window:not(.moving) .sym.cherry,.slots[data-glow=bomb] .window:not(.moving) .sym.bomb{animation:symglow .5s ease-in-out infinite}
/* Linienbonus: Felder der Linie blinken, solange die Erklärung läuft */
@keyframes linepulse{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.7)}}
.cell.lineblink{--led:#fff;animation:linepulse 1s ease-in-out infinite}
/* Levelende: Schlange läuft über alle Felder nach unten */
.cell.snake{--led:#fff;filter:brightness(2.2)}
.cell.snake-tail{--led:var(--amber);filter:brightness(1.5)}

.cell .cwin{position:absolute;inset:0;overflow:hidden;border-radius:14px}
.cell .cstrip{position:absolute;left:0;top:0;height:100%;display:flex;will-change:transform;filter:blur(.8px)}
.cell .cface{flex:0 0 var(--cell);height:100%;display:flex;align-items:center;justify-content:center}

/* Titelbild: bleibt, bis Sounds und Bilder geladen sind und "Spielen" gedrückt wird */
.title{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12vh 24px 9vh;text-align:center;
  background:radial-gradient(circle at 50% 30%,#2a003a,var(--bg) 75%);transition:opacity .5s}
.title.gone{opacity:0;pointer-events:none}
.title-logo{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;animation:titlebob 2.4s ease-in-out infinite}
.title-logo .sym{width:100%;height:100%;filter:drop-shadow(0 0 18px var(--neon))}
.title-logo .num{display:none}
.title h1{margin:0;font-size:clamp(26px,9vw,48px);letter-spacing:.2em;color:#fff1c4;text-shadow:0 0 12px var(--neon),0 0 28px var(--neon)}
.title h1 b{display:block}
.title h1 .w1{font-size:1.1em}
.title h1 .w2{font-size:.65em;letter-spacing:.45em}
.title h1 .w3{font-size:1.6em}
/* Spielen-Taste = SLOT-Taster (.spin), nur mit größerer, leuchtender Schrift */
.play{font-size:clamp(22px,7vw,30px);letter-spacing:.3em;padding:12px 44px 15px;text-shadow:none}
.play:disabled{cursor:default}
.play span{color:#fff;text-shadow:none;filter:none}
@keyframes titlebob{50%{transform:translateY(-10px) scale(1.04)}}