/* =============================================================================
   VELVET VENDETTA — GambleCrew visual language
   Black · deep purple / magenta · premium gold · selective neon
   ========================================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --ink: #06020b; --v950: #0d0617; --v900: #160a26; --v800: #22103a; --v700: #34185a;
  --violet: #8e2bd6; --neon: #c86bff; --mag: #ff4fd8; --mag-deep: #b02fe0;
  --gold: #d4a843; --gold-hi: #f3d98b; --gold-lo: #7a5212; --parch: #f1e8d6; --muted: rgba(241,232,214,.62);
  --cyan: #7fe3ff;
  --line: rgba(243,217,139,.28);
  --glass: linear-gradient(180deg, rgba(52,24,90,.55), rgba(13,6,23,.72));
  --display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --ui: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cell: 90px;
  --frame: clamp(7px, calc(var(--cell) * .12), 14px);
  --ring1: var(--gold-hi); --ring2: var(--mag); --ring-speed: 9s;
  --gold-text: linear-gradient(180deg, #fffbe9 0%, #f3d98b 35%, #c9953a 62%, #f7e3a4 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--parch); font-family: var(--ui); overflow: hidden; overflow: clip;
  overscroll-behavior: none; touch-action: manipulation; position: fixed; inset: 0; width: 100%;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ background --- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(130% 85% at 50% -12%, #3d1470 0%, #1a0a2e 42%, var(--ink) 78%); }
.bg > * { position: absolute; pointer-events: none; }
.bg-curtain { inset: -4% -6%; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 18px, rgba(142,43,214,.13) 34px, rgba(255,79,216,.05) 42px, rgba(0,0,0,.45) 58px);
  -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 55%, transparent 100%); mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 55%, transparent 100%);
  animation: sway 19s ease-in-out infinite alternate; }
.bg-glow { width: 70vmax; height: 70vmax; left: -18vmax; top: -22vmax; border-radius: 50%; filter: blur(40px);
  background: radial-gradient(circle, rgba(255,79,216,.22), rgba(142,43,214,.08) 45%, transparent 70%); animation: drift 28s ease-in-out infinite alternate; }
.bg-glow.b2 { left: auto; right: -22vmax; top: auto; bottom: -26vmax; animation-duration: 34s; animation-direction: alternate-reverse;
  background: radial-gradient(circle, rgba(142,43,214,.28), rgba(60,20,120,.1) 45%, transparent 70%); }
.bg-shafts { inset: 0; mix-blend-mode: screen; animation: flicker 9s steps(1) infinite;
  background: linear-gradient(104deg, transparent 38%, rgba(255,226,170,.06) 44%, transparent 51%),
              linear-gradient(96deg, transparent 58%, rgba(200,107,255,.07) 63%, transparent 70%); }
.bg-fog { left: -50%; right: -50%; bottom: -5%; height: 60%; opacity: .55;
  background: radial-gradient(40% 55% at 20% 70%, rgba(200,150,255,.10), transparent 70%),
              radial-gradient(35% 45% at 70% 80%, rgba(255,120,220,.07), transparent 70%);
  animation: fog 70s linear infinite; }
.bg-fog.f2 { bottom: 20%; height: 50%; opacity: .35; animation-duration: 110s; animation-direction: reverse; }
.bg-dust { inset: 0; width: 100%; height: 100%; }
.bg-theme { inset: 0; opacity: 0; transition: opacity 1.1s ease, background 1.1s ease; }
.bg-vignette { inset: 0; background: radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(0,0,0,.78) 100%); }
body:has(.theme-heist) .bg-theme { opacity: 1; background: radial-gradient(60% 50% at 78% 12%, rgba(127,227,255,.20), transparent 70%), linear-gradient(180deg, rgba(10,20,60,.55), rgba(5,4,20,.35)); }
body:has(.theme-crossfire) .bg-theme { opacity: 1; background: radial-gradient(70% 60% at 50% 45%, rgba(255,79,216,.18), transparent 70%), linear-gradient(180deg, rgba(60,6,60,.35), rgba(20,2,30,.3)); animation: pulseTint 2.8s ease-in-out infinite; }
body:has(.theme-ante) .bg-theme { opacity: 1; background: radial-gradient(70% 55% at 50% 40%, rgba(243,217,139,.16), transparent 70%), linear-gradient(180deg, rgba(40,14,60,.45), rgba(10,4,16,.4)); }
body:has(.theme-final) .bg-theme { background: radial-gradient(75% 60% at 50% 45%, rgba(243,217,139,.24), rgba(255,79,216,.08) 50%, transparent 75%), linear-gradient(180deg, rgba(40,14,60,.45), rgba(10,4,16,.4)); }

/* --------------------------------------------------------------- loading --- */
.loading { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px;
  background: radial-gradient(90% 70% at 50% 40%, #2a0e4a, var(--ink) 75%); transition: opacity .6s ease, visibility .6s; }
.loading.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.load-logo { width: min(560px, 88vw); }
.load-track { width: min(320px, 70vw); height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.load-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--mag-deep), var(--gold-hi)); box-shadow: 0 0 12px var(--mag); transition: width .2s ease; }
.load-status { color: var(--muted); font-size: 15px; letter-spacing: .06em; }
.load-fine { color: rgba(241,232,214,.45); font-size: 13px; text-align: center; max-width: 480px; }

/* ---------------------------------------------------------------- layout --- */
/* 100svh statt 100dvh: die Hoehe aendert sich nicht, wenn die mobile Adressleiste ein-/ausblendet –
   damit gibt es waehrend eines Spins kein Re-Layout des Boards. */
.app { position: relative; height: 100svh; max-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)); }
.topbar { width: 100%; max-width: 980px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px; }
.logo { width: clamp(150px, 34vw, 290px); line-height: 0; }
.logo-svg { width: 100%; height: auto; overflow: visible; }
.logo-velvet { font: 600 26px var(--display); }
.logo-main { font: 900 100px var(--display); letter-spacing: 3px; }
.logo-sub { font: 600 15px var(--display); }
.top-actions { display: flex; gap: 6px; }
.play { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.msg { min-height: 22px; font-size: clamp(14px, 1.9vmin, 17px); letter-spacing: .04em; color: var(--muted); text-align: center; padding: 0 12px; text-shadow: 0 2px 6px #000; }

/* Landscape: ONE centred composition.
   wide:   LOGO | BOARD | ACTIONS+CONTROLS  (equal side columns => board exactly centred, clusters hug the board)
   medium: BOARD | LOGO/ACTIONS/CONTROLS stacked, the pair centred in the viewport */
body.landscape .app { --gap: clamp(26px, 3vw, 64px); display: grid; column-gap: var(--gap); row-gap: 14px; padding: 16px clamp(16px, 2vw, 36px);
  /* WICHTIG: Spielspalte muss ueber alle Zeilen strecken, sonst kollabiert ihre Hoehe und das Board laeuft oben heraus. */
  align-items: stretch; justify-items: center; }
body.landscape:not(.wide) .app { align-items: stretch; }
body.landscape:not(.wide) .play { align-self: stretch; min-height: 0; }
body.landscape:not(.wide) .logo, body.landscape:not(.wide) .top-actions, body.landscape:not(.wide) .controls { align-self: center; }
body.landscape .topbar { display: contents; }
body.landscape .play { grid-column: 2; grid-row: 1 / -1; }
body.landscape .controls { width: clamp(250px, 24vw, 310px); padding: 0; }
body.landscape .top-actions { justify-content: center; }
/* Ab 900px Querformat besitzt der spaetere Block "Desktop composition polish" das Layout –
   hier bewusst KEINE konkurrierenden .wide-Regeln (Ursache des Board-Ueberlaufs bei 1024x768/1366/1920). */
body.landscape:not(.wide) .app { grid-template-columns: auto auto; justify-content: center; grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr); }
body.landscape:not(.wide) .play { grid-column: 1; }
body.landscape:not(.wide) .logo { grid-column: 2; grid-row: 2; width: clamp(170px, 22vw, 260px); }
body.landscape:not(.wide) .top-actions { grid-column: 2; grid-row: 3; }
body.landscape:not(.wide) .controls { grid-column: 2; grid-row: 4; }

/* ------------------------------------------------------------ icon btns --- */
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass);
  color: var(--gold-hi); font-size: 19px; backdrop-filter: blur(6px); transition: transform .18s ease, box-shadow .25s ease, border-color .25s; }
@media (hover: hover) { .icon-btn:hover { transform: translateY(-2px); border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(255,79,216,.35); } }
.icon-btn:active { transform: scale(.92); }

/* ------------------------------------------------------------ feature HUD --- */
.feature-bar { display: flex; align-items: center; gap: 16px; padding: 6px 18px; border-radius: 999px; width: min(560px, 96vw);
  background: linear-gradient(90deg, transparent, rgba(34,16,58,.85) 12%, rgba(34,16,58,.85) 88%, transparent);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); animation: hudIn .5s cubic-bezier(.2,.9,.3,1.2); }
.fb-title { flex: 1; font: 800 clamp(14px, 2.2vmin, 18px) var(--display); letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fb-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.fb-stat .k, .pot-box .k, .stat .k, .bet-val .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fb-stat .v { font: 700 clamp(16px, 2.4vmin, 21px) var(--ui); color: var(--parch); font-variant-numeric: tabular-nums; }
.theme-heist .feature-bar { border-color: rgba(127,227,255,.45); box-shadow: 0 0 24px rgba(127,227,255,.12); }
.theme-crossfire .feature-bar { border-color: rgba(255,79,216,.5); box-shadow: 0 0 24px rgba(255,79,216,.15); }
.pot { display: flex; align-items: center; gap: 18px; padding: 4px 16px; animation: hudIn .5s ease; }
.pot-box { display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.pot-box .v { font: 800 clamp(22px, 3.6vmin, 32px) var(--display); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(243,217,139,.35)); display: inline-block; }
.pot-box .v.capped::after { content: ' MAX'; font: 700 11px var(--ui); color: var(--mag); -webkit-text-fill-color: var(--mag); }
.pot-pips { display: flex; gap: 6px; }
.pot-pips i { width: 12px; height: 26px; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.1); border: 1px solid rgba(243,217,139,.25); transition: all .3s; }
.pot-pips i.on { background: linear-gradient(180deg, #fff1b8, var(--gold) 60%, var(--gold-lo)); box-shadow: 0 0 10px rgba(243,217,139,.6); }
.pot-pips.reset i.on { animation: pipReset .5s ease; }
.pot.final .pot-pips { display: none; }
.bump { animation: bump .45s cubic-bezier(.3,1.6,.5,1); }

/* ----------------------------------------------------------------- board --- */
.board { position: relative; padding: var(--frame); border-radius: calc(var(--frame) * 2.2); isolation: isolate;
  background: linear-gradient(180deg, rgba(40,16,70,.9), rgba(10,4,18,.95));
  box-shadow: 0 30px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(243,217,139,.35), inset 0 0 0 1px rgba(255,255,255,.05), 0 0 60px rgba(142,43,214,.25);
  transition: box-shadow .5s ease; }
.board::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--ang), var(--gold-lo), var(--ring1) 8%, transparent 18%, var(--gold-lo) 30%, var(--ring2) 40%, transparent 52%,
    var(--gold-lo) 64%, var(--ring1) 74%, transparent 86%, var(--gold-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ring var(--ring-speed) linear infinite; }
.board::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .35;
  box-shadow: 0 0 34px 4px var(--ring2); transition: opacity .5s, box-shadow .5s; }
.board-corner { position: absolute; width: calc(var(--frame) * 1.6); height: calc(var(--frame) * 1.6); z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, #fff6d2, var(--gold) 55%, var(--gold-lo)); transform: rotate(45deg); box-shadow: 0 0 10px rgba(243,217,139,.6); }
.board-corner.tl { left: calc(var(--frame) * -.5); top: calc(var(--frame) * -.5); }
.board-corner.tr { right: calc(var(--frame) * -.5); top: calc(var(--frame) * -.5); }
.board-corner.bl { left: calc(var(--frame) * -.5); bottom: calc(var(--frame) * -.5); }
.board-corner.br { right: calc(var(--frame) * -.5); bottom: calc(var(--frame) * -.5); }
.board.is-spinning { --ring-speed: 2.2s; }
.board.is-spinning::after { opacity: .55; }
.board.is-anticipating { --ring1: #fff; --ring2: var(--mag); --ring-speed: 1.1s; }
.board.is-anticipating::after { opacity: 1; animation: glowPulse .6s ease-in-out infinite alternate; }
.board.is-trigger { --ring1: #fff; --ring2: var(--gold-hi); --ring-speed: .9s; }
.board.is-trigger::after { opacity: 1; box-shadow: 0 0 60px 10px var(--mag); animation: glowPulse .45s ease-in-out infinite alternate; }
.board.is-win { --ring1: #fff6d2; --ring2: var(--gold-hi); }
.board.is-win::after { opacity: .8; box-shadow: 0 0 44px 6px rgba(243,217,139,.55); }
.board.is-bigwin::after { opacity: 1; box-shadow: 0 0 80px 14px rgba(255,79,216,.55); animation: glowPulse .5s ease-in-out infinite alternate; }
.board.is-standoff { --ring1: var(--mag); --ring2: #fff; --ring-speed: 1.4s; }
.theme-heist .board { --ring1: var(--cyan); --ring2: #8aa8ff; }
.theme-crossfire .board { --ring1: var(--mag); --ring2: var(--gold-hi); --ring-speed: 4s; }
.theme-ante .board { --ring1: var(--gold-hi); --ring2: var(--neon); }
.theme-final .board { --ring1: #fff6d2; --ring2: var(--mag); --ring-speed: 3s; }
.board.shake { animation: shake .32s ease; }
.board.shake-hard { animation: shakeHard .45s ease; }

.board-inner { position: relative; width: calc(var(--cell) * 5); height: calc(var(--cell) * 5); border-radius: calc(var(--frame) * 1.2); overflow: hidden; overflow: clip;
  background: radial-gradient(120% 80% at 50% 0%, rgba(90,34,150,.35), transparent 60%), linear-gradient(180deg, #120622, #07030d); }
.theme-heist .board-inner { background: radial-gradient(120% 80% at 70% 0%, rgba(127,227,255,.16), transparent 60%), linear-gradient(180deg, #0a0c26, #04030d); }
.theme-crossfire .board-inner { background: radial-gradient(120% 80% at 50% 50%, rgba(255,79,216,.14), transparent 65%), linear-gradient(180deg, #1a0626, #07020d); }
.theme-ante .board-inner { background: radial-gradient(120% 80% at 50% 0%, rgba(243,217,139,.14), transparent 60%), linear-gradient(180deg, #170a24, #07030d); }
.reels { position: absolute; inset: 0; display: flex; }
.reel { position: relative; width: var(--cell); height: 100%; overflow: hidden; overflow: clip; transition: filter .25s ease;
  contain: paint; transform: translateZ(0); backface-visibility: hidden; }
.reel + .reel { box-shadow: inset 1px 0 0 rgba(243,217,139,.09); }
.reel::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 22%, transparent 78%, rgba(0,0,0,.25)); }
.reel::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 3px; z-index: 2; opacity: 0; pointer-events: none; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); box-shadow: 0 0 12px var(--gold-hi); }
.reel.landed::after { animation: landFlash .38s ease-out; }
/* Motion-Blur bewusst OHNE SVG-Filter: der Filter wurde pro Frame neu gerastert und erzeugte auf
   Mobilgeraeten Flackern/Fragmente. Ein guenstiger CSS-Blur bleibt auf der GPU-Ebene. */
.reel.fast .sym { filter: blur(.7px) brightness(.94); }
.reel.anticipate { box-shadow: inset 0 0 0 2px rgba(255,79,216,.7), inset 0 0 34px rgba(255,79,216,.55); animation: antic .5s ease-in-out infinite alternate; }
.sym { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); padding: 5%; z-index: 1; will-change: transform;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: filter .3s ease, opacity .3s ease; image-rendering: auto; }
.sym[data-sym="MOON"], .sym[data-sym="CROSS"], .sym[data-sym="ANTE"] { animation: scatterIdle 2.2s ease-in-out infinite; }
.sym[data-sym="MOON"] { --sc: rgba(127,227,255,.75); } .sym[data-sym="CROSS"] { --sc: rgba(255,79,216,.8); } .sym[data-sym="ANTE"] { --sc: rgba(243,217,139,.8); }
.sym[data-sym="WILD"] { filter: drop-shadow(0 0 calc(var(--cell) * .06) rgba(255,79,216,.55)); }
.board-inner.dimmed .sym:not(.pop) { filter: brightness(.36) saturate(.5); }
.board-inner.spotlight .reel { filter: brightness(.42) saturate(.6); }
.sym.pop { z-index: 3; animation: symPop 1s cubic-bezier(.3,1.5,.5,1) both, symGlow 1.2s ease-in-out .3s infinite alternate; }

/* --------------------------------------------------------- cell effects --- */
.cells, .panels { position: absolute; inset: 0; pointer-events: none; }
.cells { z-index: 4; } .panels { z-index: 5; }
.cell { position: absolute; left: calc(var(--r) * var(--cell)); top: calc(var(--w) * var(--cell)); width: var(--cell); height: var(--cell); }
.cell::before, .cell::after { content: ''; position: absolute; inset: 4%; border-radius: 18%; opacity: 0; pointer-events: none; }
.cell.hit::before { opacity: 1; border: 2px solid rgba(255,246,210,.9); box-shadow: 0 0 14px rgba(243,217,139,.8), inset 0 0 14px rgba(243,217,139,.35); animation: hitPulse 1s ease-in-out infinite alternate; }
.cell.call::before { opacity: 1; border: 2px solid var(--mag); box-shadow: 0 0 18px var(--mag); animation: hitPulse .45s ease-in-out infinite alternate; }
.cell.scatter-hit::after { inset: -8%; border-radius: 50%; border: 3px solid var(--gold-hi); animation: ring1 .7s ease-out forwards; }
.cell.scatter-hit[data-level="2"]::after { border-color: var(--mag); border-width: 4px; animation-duration: .8s; }
.cell.scatter-hit[data-level="3"]::after { border-color: #fff; border-width: 5px; animation: ring3 .95s ease-out forwards; box-shadow: 0 0 30px var(--mag); }
.cell.token-hit::before { opacity: 1; inset: -2%; border-radius: 50%; background: radial-gradient(circle, rgba(255,79,216,.35), transparent 70%);
  box-shadow: 0 0 30px rgba(255,79,216,.8), 0 0 60px rgba(243,217,139,.5); animation: hitPulse .5s ease-in-out infinite alternate; }
.cell.wild-land::after { inset: 0; border-radius: 22%; background: radial-gradient(circle, rgba(255,79,216,.55), transparent 70%); animation: flashOut .6s ease-out forwards; }
.sticky, .stamp { position: absolute; inset: 3%; z-index: 2; }
.sticky img, .stamp img { width: 100%; height: 100%; display: block; }
.sticky { border-radius: 22%; box-shadow: 0 0 0 2px rgba(127,227,255,.65), 0 0 18px rgba(127,227,255,.55); animation: stickyGlow 2.4s ease-in-out infinite alternate; }
.sticky::after { content: ''; position: absolute; right: -3%; top: -3%; width: 26%; height: 26%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--cyan) 45%, #2c3f9e); box-shadow: 0 0 8px var(--cyan); }
.sticky.lock-in { animation: lockIn .5s cubic-bezier(.2,1.6,.4,1), stickyGlow 2.4s ease-in-out .5s infinite alternate; }
.stamp { animation: stamp .34s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 8px rgba(255,79,216,.7)); }

/* ------------------------------------------------------- reel panels --- */
.panel { position: absolute; top: 0; left: calc(var(--r) * var(--cell)); width: var(--cell); height: 100%; }
.panel:empty { display: none; }
.panel.duel { overflow: hidden; border-radius: 10px; clip-path: inset(46% 0 46% 0 round 10px); opacity: 0;
  background: linear-gradient(180deg, #3a0f5e, #0d0418 50%, #3a0f5e); box-shadow: inset 0 0 0 2px var(--gold-hi), 0 0 30px rgba(255,79,216,.6);
  transition: clip-path .38s cubic-bezier(.2,.9,.3,1), opacity .2s; }
.panel.duel.open { clip-path: inset(0 0 0 0 round 10px); opacity: 1; }
.duel-half { position: absolute; left: 0; right: 0; height: 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  transition: transform .45s cubic-bezier(.5,0,.8,.4), opacity .45s, filter .3s; }
.duel-half.top { top: 2%; } .duel-half.bottom { bottom: 2%; }
.duel-half img { width: 82%; height: auto; max-height: 58%; object-fit: contain; filter: drop-shadow(0 4px 10px #000); }
.duel-name { max-width: 94%; overflow: hidden; text-overflow: ellipsis; font: 700 clamp(7px, calc(var(--cell) * .1), 12px) var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.duel-val { font: 900 calc(var(--cell) * .3) var(--display); line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(243,217,139,.5)); }
.duel-val.settle { animation: settle .35s cubic-bezier(.3,1.8,.5,1); }
.duel-band { position: absolute; left: -10%; right: -10%; top: 46%; height: 8%; display: grid; place-items: center; transform: rotate(-6deg);
  background: linear-gradient(90deg, transparent, var(--mag-deep) 20%, var(--mag) 50%, var(--mag-deep) 80%, transparent); box-shadow: 0 0 20px var(--mag); }
.duel-band span { font: 800 clamp(8px, calc(var(--cell) * .12), 14px) var(--display); letter-spacing: .2em; color: #fff; text-transform: uppercase; }
.panel.duel.aim .duel-half { filter: brightness(.8) contrast(1.1); animation: tremble .12s linear infinite; }
.panel.duel.aim .duel-band { animation: bandPulse .3s ease-in-out infinite alternate; }
.duel-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff, rgba(255,246,210,.6) 40%, transparent 75%); opacity: 0; pointer-events: none; }
.panel.duel.shot .duel-flash { animation: flashOut .45s ease-out; }
.panel.duel.shot .duel-half { animation: none; }
.panel.duel.loser-top .duel-half.top, .panel.duel.loser-bottom .duel-half.bottom { transform: translateY(18%) rotate(-10deg) scale(.9); opacity: 0; filter: grayscale(1) brightness(.4); }
.panel.duel.loser-bottom .duel-half.bottom { transform: translateY(18%) rotate(10deg) scale(.9); }
.duel-slam { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(2.6); text-align: center; opacity: 0;
  font: 900 calc(var(--cell) * .5) var(--display); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px var(--mag)) drop-shadow(0 4px 8px #000); }
.panel.duel.slam .duel-slam { animation: slam .45s cubic-bezier(.2,1.4,.4,1) forwards; }
.panel.duel.slam .duel-band, .panel.duel.slam .duel-half { opacity: .15; }
.panel.wildreel { overflow: hidden; border-radius: 10px; box-shadow: 0 0 26px rgba(255,79,216,.55), 0 0 0 1px rgba(243,217,139,.6); animation: reelBreath 2.6s ease-in-out infinite alternate; }
.panel.wildreel img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.panel.wildreel.morph { animation: morph .6s cubic-bezier(.2,1.2,.4,1), reelBreath 2.6s ease-in-out .6s infinite alternate; }
.reel-sheen { position: absolute; inset: -20% 0; background: linear-gradient(180deg, transparent 35%, rgba(255,255,255,.28) 48%, rgba(255,79,216,.18) 52%, transparent 65%);
  animation: sheen 2.8s ease-in-out infinite; mix-blend-mode: screen; }
.reel-mult { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); min-width: 78%; padding: 3% 8%; border-radius: 999px; text-align: center;
  background: linear-gradient(180deg, #fff6d2, var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 0 2px #2a0a47, 0 0 22px var(--mag), 0 6px 14px rgba(0,0,0,.6);
  animation: multIn .5s cubic-bezier(.2,1.6,.4,1) both; }
.reel-mult span { font: 900 calc(var(--cell) * .3) var(--display); color: #2a0a47; line-height: 1.1; }

/* ---------------------------------------------------------- lines & pop --- */
.lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.lines .pl { fill: none; stroke: #fff2c2; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: .85;
  filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 8px var(--mag)); animation: lineIn .35s ease-out; }
.lines .pl.em { stroke-width: 4.5; opacity: 1; }
.board-pop { position: absolute; left: 50%; top: 50%; z-index: 7; width: 100%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; text-align: center; transition: opacity .2s; }
.board-pop.show { opacity: 1; animation: popIn .45s cubic-bezier(.2,1.6,.4,1) forwards; }
.pop-amt { font: 900 calc(var(--cell) * .52) var(--display); line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2a0a47) drop-shadow(0 0 16px rgba(0,0,0,.9)); white-space: nowrap; }
.pop-amt.small { font-size: calc(var(--cell) * .4); }
.board-pop.tier-medium .pop-amt { font-size: calc(var(--cell) * .64); filter: drop-shadow(0 3px 0 #2a0a47) drop-shadow(0 0 18px rgba(255,79,216,.8)); }
.board-pop.tier-large .pop-amt { font-size: calc(var(--cell) * .8); filter: drop-shadow(0 4px 0 #2a0a47) drop-shadow(0 0 26px var(--mag)); animation: amtPulse .6s ease-in-out infinite alternate; }
.pop-mult, .pop-line { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px; font: 700 clamp(11px, calc(var(--cell) * .17), 17px) var(--ui); letter-spacing: .06em;
  color: #fff; background: linear-gradient(90deg, rgba(176,47,224,.9), rgba(255,79,216,.9)); box-shadow: 0 0 16px rgba(255,79,216,.6); white-space: nowrap; }
.pop-line { background: rgba(13,6,23,.85); box-shadow: 0 0 0 1px var(--line); display: block; margin: 0 auto 4px; width: max-content; }

/* -------------------------------------------------------------- controls --- */
.controls { width: min(100%, 640px); display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 4px; }
.ctrl-row { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 14px); }
.btn-buy, .btn-side, .round-btn, .btn-spin, .gold-btn, .ghost-btn, .cine-btn, .chip { position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .25s ease, filter .25s ease, border-color .25s; }
.btn-buy::after, .btn-side::after, .btn-spin::after, .gold-btn::after, .cine-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 62%); transform: translateX(-120%); }
@media (hover: hover) {
  .btn-buy:not(:disabled):hover::after, .btn-side:not(:disabled):hover::after, .btn-spin:not(:disabled):hover::after, .gold-btn:not(:disabled):hover::after, .cine-btn:hover::after { animation: sweep .7s ease; }
  .btn-buy:not(:disabled):hover { transform: translateY(-2px) rotate(-4deg); box-shadow: 0 0 26px rgba(243,217,139,.6), 0 0 0 2px var(--gold-hi); }
  .btn-side:not(:disabled):hover, .round-btn:not(:disabled):hover { transform: translateY(-2px); border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(255,79,216,.45); }
  .btn-spin:not(:disabled):hover { transform: scale(1.05); box-shadow: 0 0 44px rgba(255,79,216,.75), 0 0 0 3px rgba(243,217,139,.9), inset 0 0 26px rgba(255,255,255,.18); }
  .gold-btn:not(:disabled):hover, .cine-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(243,217,139,.55); }
  .chip:hover { border-color: var(--gold-hi); }
}
.btn-buy:not(:disabled):active, .btn-side:not(:disabled):active, .round-btn:not(:disabled):active, .gold-btn:not(:disabled):active, .cine-btn:active, .chip:active { transform: scale(.93); }
.btn-spin:not(:disabled):active { transform: scale(.92); }
.btn-buy { width: clamp(56px, 15vw, 70px); height: clamp(56px, 15vw, 70px); flex: none; border-radius: 50%; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: radial-gradient(circle at 40% 30%, #fff6d2, var(--gold) 45%, var(--gold-lo) 90%); color: #2a0a47; box-shadow: 0 0 0 3px #2a0a47, 0 0 0 5px rgba(243,217,139,.6), 0 6px 18px rgba(0,0,0,.6); }
/* (vorher: animation ring – animierte nur --ang, das hier nicht verwendet wird: optisch wirkungslos, aber Style-Arbeit je Frame) */
.btn-buy::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed rgba(42,10,71,.55); }
.btn-buy span { font: 700 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.btn-buy b { font: 900 17px var(--display); letter-spacing: .04em; }
.bet-ctl { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.round-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(52,24,90,.6); color: var(--gold-hi); font-size: 18px; }
.bet-val { display: flex; flex-direction: column; align-items: center; min-width: 56px; line-height: 1.1; }
.bet-val #betVal { font: 700 18px var(--ui); font-variant-numeric: tabular-nums; }
.btn-spin { width: clamp(72px, 20vw, 92px); height: clamp(72px, 20vw, 92px); flex: none; border-radius: 50%; border: none; display: grid; place-items: center; font-size: clamp(30px, 8vw, 40px); color: #fff;
  background: radial-gradient(circle at 50% 35%, #c86bff, var(--violet) 45%, #3a0f6b 80%);
  box-shadow: 0 0 0 3px rgba(243,217,139,.85), 0 0 30px rgba(255,79,216,.45), 0 10px 26px rgba(0,0,0,.6), inset 0 -8px 18px rgba(0,0,0,.35), inset 0 6px 14px rgba(255,255,255,.25);
  animation: spinIdle 3s ease-in-out infinite; }
.btn-spin::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent, var(--gold-hi) 20%, transparent 40%, var(--mag) 60%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  /* kreisrundes Element: Drehen des Elements == Drehen des Conic-Gradients (optisch identisch), aber per transform auf dem
     Compositor statt --ang-Animation (Style-Recalc + Repaint des maskierten Gradients in jedem Frame). */
  animation: ringSpin 4s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.btn-spin svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); transition: transform .3s; }
.btn-spin.busy { animation: none; }
.btn-spin.busy svg { animation: spinIcon .6s linear infinite; }
.btn-spin.busy::before { animation-duration: .9s; }
.btn-spin.auto { background: radial-gradient(circle at 50% 35%, #ff9cf0, var(--mag-deep) 50%, #4a0a57 85%); font-size: 26px; }
.btn-spin.auto svg { animation: none; }
.spin-count { position: absolute; bottom: 14%; font: 700 13px var(--ui); letter-spacing: .06em; }
.btn-side { width: clamp(48px, 13vw, 58px); height: clamp(48px, 13vw, 58px); flex: none; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); color: var(--gold-hi);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 20px; backdrop-filter: blur(6px); }
.btn-side span { font: 700 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--parch); }
.btn-side.on { border-color: var(--mag); box-shadow: 0 0 16px rgba(255,79,216,.55), inset 0 0 12px rgba(255,79,216,.25); color: #fff; }
.btn-buy:disabled, .btn-side:disabled, .round-btn:disabled { filter: grayscale(.85) brightness(.55); box-shadow: none; }
.btn-buy:disabled::before { animation: none; }
.stats { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 6px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 5px 6px; border-radius: 12px; background: var(--glass); border: 1px solid rgba(243,217,139,.16); line-height: 1.15; }
.stat .v { font: 700 clamp(15px, 4vw, 19px) var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat.win .v { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.landscape .ctrl-row { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "buy spin auto" "bet bet speed"; justify-items: center; row-gap: 12px; }
body.landscape #buyBtn { grid-area: buy; } body.landscape #spinBtn { grid-area: spin; width: 104px; height: 104px; font-size: 44px; }
body.landscape #autoBtn { grid-area: auto; } body.landscape .bet-ctl { grid-area: bet; } body.landscape #speedBtn { grid-area: speed; }
body.landscape .stats { grid-template-columns: 1fr; }

/* ------------------------------------------------- cinematic screens --- */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: hidden; overflow: clip;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.cine { --c1: var(--gold-hi); --c2: var(--mag); opacity: 0; transition: opacity .35s ease; }
.cine.show { opacity: 1; } .cine.leaving { opacity: 0; transition-duration: .25s; }
.cine-heist { --c1: #7fe3ff; --c2: #6f7dff; } .cine-crossfire { --c1: #ff4fd8; --c2: #c86bff; } .cine-ante { --c1: #f3d98b; --c2: #c86bff; }
.cine-win { --c1: #f3d98b; --c2: #ff4fd8; } .cine.tier-mega { --c2: #ff4fd8; } .cine.tier-max { --c1: #fff6d2; --c2: #ff4fd8; }
.cine-bg { position: absolute; inset: 0; backdrop-filter: blur(4px) saturate(1.2);
  background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--c2) 30%, transparent), rgba(10,3,18,.82) 62%, rgba(4,1,8,.96) 100%); }
.cine-rays { position: absolute; left: 50%; top: 46%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%); opacity: .55; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 22%, transparent) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 18%, transparent 40%); mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 18%, transparent 40%);
  animation: rays 50s linear infinite; }
.cine.tier-mega .cine-rays, .cine.tier-epic .cine-rays { animation-duration: 22s; opacity: .8; }
.cine.tier-max .cine-rays { animation-duration: 14s; opacity: 1; }
.cine-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(6px, 1.6vmin, 14px);
  width: min(760px, 100%); transform-origin: 50% 50%; }
.cine-kicker { font: 700 clamp(11px, min(3vw, 1.9vh), 15px) var(--ui); letter-spacing: .34em; text-transform: uppercase; color: var(--c1);
  text-shadow: 0 0 12px var(--c2); animation: rise .6s ease both; }
.cine-token { height: clamp(72px, min(30vw, 21vh), 190px); width: auto; filter: drop-shadow(0 0 28px var(--c2)) drop-shadow(0 10px 18px rgba(0,0,0,.7));
  animation: tokenIn .8s cubic-bezier(.2,1.4,.4,1) both, float 3.4s ease-in-out .8s infinite alternate; }
.cine-gc { height: clamp(70px, min(30vw, 17vh), 160px); width: auto; filter: drop-shadow(0 0 30px var(--mag)); animation: tokenIn .8s cubic-bezier(.2,1.4,.4,1) both, float 3s ease-in-out .8s infinite alternate; }
.cine-title { margin: 0; font: 900 clamp(30px, min(11vw, 8.6vh), 92px) var(--display); line-height: .95; letter-spacing: .02em; text-transform: uppercase; }
.cine-title span { display: inline-block; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #1a0630) drop-shadow(0 0 22px color-mix(in srgb, var(--c2) 70%, transparent));
  animation: wordIn .7s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(.15s + var(--i) * .12s); }
.cine-rule { width: min(420px, 70%); height: 2px; position: relative; background: linear-gradient(90deg, transparent, var(--c1), transparent); animation: grow .8s ease .3s both; }
.cine-rule i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; background: var(--c2); border: 2px solid var(--gold-hi); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 12px var(--c2); }
.cine-text { margin: 0; max-width: 34em; font-size: clamp(14px, min(4.1vw, 2.3vh), 19px); line-height: 1.4; color: rgba(241,232,214,.88); animation: rise .6s ease .35s both; }
.cine-facts { list-style: none; margin: 2px 0; padding: 0; width: min(100%, 560px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; animation: rise .6s ease .45s both; }
.cine-facts li { display: flex; flex-direction: column; align-items: center; padding: 2px clamp(6px, 2vw, 22px); text-align: center; }
.cine-facts li + li { border-left: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); }
.cine-facts b { font: 900 clamp(20px, min(7vw, 4.4vh), 38px) var(--display); color: var(--c1); text-shadow: 0 0 16px var(--c2); line-height: 1.05; }
.cine-facts span { font-size: clamp(10px, min(2.8vw, 1.6vh), 13px); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cine-btn { margin-top: clamp(4px, 1.4vmin, 12px); min-width: min(300px, 80vw); padding: clamp(11px, 1.8vmin, 16px) 34px; border: none; border-radius: 999px;
  font: 800 clamp(15px, 2.3vmin, 20px) var(--display); letter-spacing: .14em; text-transform: uppercase; color: #2a0a47;
  background: linear-gradient(180deg, #fffbe9, var(--gold-hi) 38%, var(--gold) 72%, #9a6d1f);
  box-shadow: 0 0 0 2px rgba(42,10,71,.9), 0 0 0 4px rgba(243,217,139,.55), 0 0 34px color-mix(in srgb, var(--c2) 70%, transparent), 0 10px 24px rgba(0,0,0,.6);
  animation: rise .6s ease .55s both, ctaPulse 1.8s ease-in-out 1.2s infinite; }
.cine-auto, .cine-hint { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); animation: blink 1.6s ease-in-out infinite; }
.cine-tier { font: 900 clamp(38px, min(15vw, 11vh), 128px) var(--display); line-height: .95; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; max-width: 100%;
  background: linear-gradient(100deg, #b8862b 0%, #fffbe9 20%, var(--gold-hi) 35%, var(--c2) 50%, var(--gold-hi) 65%, #fffbe9 80%, #b8862b 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 #1a0630) drop-shadow(0 0 30px color-mix(in srgb, var(--c2) 70%, transparent));
  animation: tierIn .8s cubic-bezier(.2,1.5,.4,1) both, shimmer 3s linear .8s infinite; }
.cine.tier-total .cine-tier { font-size: clamp(30px, min(11vw, 8vh), 84px); }
.cine-amount { font: 900 clamp(34px, min(13vw, 9.5vh), 104px) var(--display); line-height: 1; white-space: nowrap; max-width: 100%; font-variant-numeric: tabular-nums; background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #1a0630) drop-shadow(0 0 20px rgba(243,217,139,.55)); animation: rise .5s ease .2s both; }
.cine-detail { font-size: clamp(13px, 2vmin, 17px); letter-spacing: .08em; color: rgba(241,232,214,.85); animation: rise .5s ease .35s both; }
.cine-pot { display: flex; align-items: center; gap: clamp(12px, 4vmin, 34px); animation: rise .6s ease .3s both; }
.cine-pot div { display: flex; flex-direction: column; align-items: center; }
.cine-pot b { font: 900 clamp(34px, min(13vw, 9vh), 88px) var(--display); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; filter: drop-shadow(0 0 16px var(--c2)); }
.cine-pot span { font-size: clamp(11px, 1.7vmin, 14px); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cine-pot i { font: 400 clamp(26px, 6vmin, 56px) var(--display); font-style: normal; color: var(--c2); text-shadow: 0 0 16px var(--c2); }
.cine.band .cine-bg { background: linear-gradient(180deg, rgba(4,1,8,.55), rgba(20,6,34,.93) 30%, rgba(20,6,34,.93) 70%, rgba(4,1,8,.55)); }
.cine.band .cine-rays { opacity: .35; }

/* ------------------------------------------------------------- modals --- */
.modal-root { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 12px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4,1,8,.72); backdrop-filter: blur(5px); }
.modal { position: relative; width: min(460px, 96vw); max-height: min(90dvh, 900px); display: flex; flex-direction: column; border-radius: 22px;
  background: linear-gradient(180deg, rgba(46,18,80,.96), rgba(12,5,22,.98)); box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.8), 0 0 50px rgba(142,43,214,.3);
  animation: modalIn .32s cubic-bezier(.2,1.2,.4,1); }
.modal.modal-wide { width: min(780px, 96vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 20px; border-bottom: 1px solid rgba(243,217,139,.18); }
.modal-head h3 { margin: 0; font: 800 21px var(--display); letter-spacing: .06em; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-body { padding: 14px 20px 20px; overflow-y: auto; font-size: 15px; line-height: 1.45; user-select: text; }
.modal-body h4 { display: flex; align-items: center; gap: 8px; font: 800 16px var(--display); color: var(--gold-hi); margin: 16px 0 4px; }
.modal-body p { margin: 4px 0 8px; }
.h-ico { width: 30px; height: 30px; }
.lead { color: rgba(241,232,214,.85); }
.fine { font-size: 12.5px; color: rgba(241,232,214,.5); margin-top: 10px; }
.gold-btn, .ghost-btn { min-height: 42px; padding: 8px 18px; border-radius: 999px; font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.gold-btn { border: none; color: #2a0a47; background: linear-gradient(180deg, #fffbe9, var(--gold-hi) 38%, var(--gold) 72%, #9a6d1f); box-shadow: 0 0 0 1px rgba(42,10,71,.8), 0 4px 16px rgba(243,217,139,.3); }
.gold-btn:disabled { filter: grayscale(.8) brightness(.55); box-shadow: none; font: 700 12px var(--ui); letter-spacing: .04em; }
.ghost-btn { border: 1px solid var(--gold); color: var(--gold-hi); background: transparent; }
.gold-btn.wide { width: 100%; margin-top: 12px; }
.buy-bet { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; text-align: center; }
.buy-bet .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .buy-bet .v { font: 700 22px var(--ui); }
.buy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.buy-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 12px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(142,43,214,.35), rgba(13,6,23,.4) 70%); box-shadow: inset 0 0 0 1px rgba(243,217,139,.22); transition: transform .2s, box-shadow .3s; }
@media (hover: hover) { .buy-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 30px rgba(255,79,216,.3); } .buy-card:hover img { transform: scale(1.08) rotate(-4deg); } }
.buy-card img { width: 96px; height: 96px; filter: drop-shadow(0 0 16px rgba(255,79,216,.5)); transition: transform .35s cubic-bezier(.2,1.5,.4,1); }
.buy-name { font: 800 17px var(--display); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buy-text { font-size: 14px; color: rgba(241,232,214,.8); flex: 1; }
.buy-vol { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mag); }
.buy-price { font: 900 24px var(--display); color: var(--parch); }
.buy-card .gold-btn { width: 100%; }
.buy-confirm { margin-top: 14px; padding: 14px; border-radius: 16px; text-align: center; background: rgba(255,79,216,.08); box-shadow: inset 0 0 0 1px rgba(255,79,216,.45); animation: modalIn .25s ease; }
.buy-confirm .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { min-width: 52px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(243,217,139,.35); background: rgba(34,16,58,.8); color: var(--parch); font: 600 15px var(--ui); }
.chip.on { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2a0a47; border-color: #fff2c2; box-shadow: 0 0 14px rgba(243,217,139,.45); }
.field { margin: 12px 0; } .field .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input[type=range] { width: 100%; accent-color: var(--mag); }
.switch { display: flex; align-items: center; gap: 10px; margin: 12px 0; cursor: pointer; font-size: 15px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { position: relative; width: 44px; height: 24px; flex: none; border-radius: 999px; background: #3a2a52; border: 1px solid rgba(243,217,139,.35); transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--parch); transition: transform .2s; }
.switch input:checked + span { background: linear-gradient(90deg, var(--mag-deep), var(--mag)); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.dev-switch { color: #ffb3e8; } .dev-switch em { color: var(--mag); font-style: normal; font-weight: 700; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.pay { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: rgba(34,16,58,.55); box-shadow: inset 0 0 0 1px rgba(243,217,139,.15); }
.pay img { width: 56px; height: 56px; }
.pay-v { font-size: 14px; line-height: 1.35; } .pay-v b { color: var(--gold-hi); display: inline-block; width: 14px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.pl-mini { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.3); }
.pl-mini i { aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.08); } .pl-mini i.on { background: var(--gold-hi); box-shadow: 0 0 5px var(--gold); }
.pl-mini span { position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: var(--muted); }
.table-wrap { overflow-x: auto; } .hist { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
.hist th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.hist td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05); } .hist tr.pos td { color: var(--gold-hi); } .hist td.rid { font-size: 11px; opacity: .55; }
.dev-tag { color: var(--mag); font-style: normal; font-weight: 700; font-size: 11px; }

/* ----------------------------------------------------------- misc layers --- */
.toast { position: fixed; left: 50%; top: 14px; z-index: 80; transform: translate(-50%, calc(-100% - 28px)); visibility: hidden; opacity: 0; padding: 9px 18px; border-radius: 999px; font-size: 14px;
  background: rgba(22,10,38,.95); box-shadow: 0 0 0 1px var(--line), 0 8px 30px rgba(0,0,0,.6); transition: transform .35s cubic-bezier(.2,1.3,.4,1), opacity .25s ease, visibility .35s; pointer-events: none; max-width: 92vw; text-align: center; }
.toast.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.fx { position: fixed; inset: 0; z-index: 59; pointer-events: none; width: 100%; height: 100%; }
.flyer { position: fixed; z-index: 66; pointer-events: none; filter: drop-shadow(0 0 12px var(--mag)); }
.devtools { position: fixed; left: 0; top: 38%; z-index: 75; font-family: var(--ui); }
.dev-tab { writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 5px; border-radius: 0 8px 8px 0; border: 1px solid var(--mag); border-left: none;
  background: #3a0a4e; color: #fff; font-weight: 800; letter-spacing: .12em; font-size: 11px; }
.dev-panel { position: fixed; left: 34px; top: 8dvh; width: min(340px, 88vw); max-height: 84dvh; overflow-y: auto; padding: 10px; border-radius: 14px;
  background: rgba(16,4,22,.97); border: 2px dashed var(--mag); box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.dev-head { font-weight: 800; color: var(--mag); letter-spacing: .12em; margin-bottom: 8px; } .dev-head small { display: block; font-weight: 500; letter-spacing: 0; color: rgba(255,200,240,.7); font-size: 12px; }
.dev-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.dev-list button { text-align: left; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,79,216,.4); background: rgba(255,79,216,.08); color: #ffe; font-size: 14px; }
.dev-list button:hover { background: rgba(255,79,216,.2); }
.dev-seed { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #fcd; margin-bottom: 8px; }
.dev-seed input { flex: 1; min-width: 120px; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255,79,216,.5); background: #200a2c; color: #fff; }
.dev-seed button { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--mag); background: transparent; color: #fff; }
.btn-gold.enter { padding: 13px 36px; border: none; border-radius: 999px; font: 800 17px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #2a0a47;
  background: linear-gradient(180deg, #fffbe9, var(--gold-hi) 38%, var(--gold) 72%, #9a6d1f); box-shadow: 0 0 0 2px rgba(42,10,71,.9), 0 0 34px rgba(255,79,216,.5);
  animation: ctaPulse 1.8s ease-in-out infinite; }

/* ------------------------------------------------------------ keyframes --- */
@keyframes ring { to { --ang: 360deg; } }
@keyframes sway { to { transform: translateX(-2%) skewX(.6deg); } }
@keyframes drift { to { transform: translate(12vmax, 8vmax) scale(1.15); } }
@keyframes fog { to { transform: translateX(50%); } }
@keyframes flicker { 0%, 100% { opacity: .8; } 12% { opacity: .55; } 13% { opacity: .9; } 47% { opacity: .65; } 48% { opacity: 1; } 73% { opacity: .7; } }
@keyframes pulseTint { 50% { filter: brightness(1.25); } }
@keyframes glowPulse { to { opacity: .6; } }
@keyframes shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 2px); } 80% { transform: translate(2px, -1px); } }
@keyframes shakeHard { 10% { transform: translate(-6px, 3px) rotate(-.4deg); } 25% { transform: translate(6px, -4px) rotate(.4deg); } 40% { transform: translate(-5px, 3px); } 60% { transform: translate(4px, -2px); } 80% { transform: translate(-2px, 1px); } }
@keyframes landFlash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes antic { to { box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), inset 0 0 50px rgba(255,79,216,.8); } }
@keyframes scatterIdle { 0%, 100% { filter: drop-shadow(0 0 3px var(--sc)); scale: 1; } 50% { filter: drop-shadow(0 0 calc(var(--cell) * .12) var(--sc)); scale: 1.04; } }
@keyframes symPop { 0% { scale: 1; } 45% { scale: 1.18; } 100% { scale: 1.06; } }
@keyframes symGlow { from { filter: drop-shadow(0 0 4px rgba(243,217,139,.6)); } to { filter: drop-shadow(0 0 calc(var(--cell) * .13) rgba(255,79,216,.85)) brightness(1.12); } }
@keyframes hitPulse { from { opacity: .65; } to { opacity: 1; } }
@keyframes ring1 { 0% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes ring3 { 0% { opacity: 1; transform: scale(.4); } 60% { opacity: .9; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes flashOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stickyGlow { from { box-shadow: 0 0 0 2px rgba(127,227,255,.55), 0 0 12px rgba(127,227,255,.4); } to { box-shadow: 0 0 0 2px rgba(255,79,216,.7), 0 0 22px rgba(255,79,216,.55); } }
@keyframes lockIn { 0% { transform: scale(1.7); opacity: 0; filter: brightness(3); } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); filter: none; } }
@keyframes stamp { 0% { transform: scale(2.2) rotate(-12deg); opacity: 0; } 70% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@keyframes settle { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes tremble { 0% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }
@keyframes bandPulse { to { filter: brightness(1.5); } }
@keyframes slam { 0% { opacity: 0; transform: translateY(-50%) scale(2.6); } 60% { opacity: 1; transform: translateY(-50%) scale(.9); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes reelBreath { from { box-shadow: 0 0 18px rgba(255,79,216,.45), 0 0 0 1px rgba(243,217,139,.55); } to { box-shadow: 0 0 34px rgba(255,79,216,.8), 0 0 0 1px rgba(243,217,139,.9); } }
@keyframes morph { 0% { transform: scaleY(.2); filter: brightness(3); opacity: 0; } 60% { transform: scaleY(1.04); opacity: 1; } 100% { transform: scaleY(1); filter: none; } }
@keyframes sheen { 0% { transform: translateY(-60%); } 60%, 100% { transform: translateY(60%); } }
@keyframes multIn { 0% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes lineIn { from { opacity: 0; } }
@keyframes popIn { 0% { transform: translate(-50%, -50%) scale(.4); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes amtPulse { to { transform: scale(1.06); } }
@keyframes sweep { to { transform: translateX(120%); } }
@keyframes spinIdle { 0%, 100% { box-shadow: 0 0 0 3px rgba(243,217,139,.85), 0 0 26px rgba(255,79,216,.35), 0 10px 26px rgba(0,0,0,.6), inset 0 -8px 18px rgba(0,0,0,.35), inset 0 6px 14px rgba(255,255,255,.25); }
  50% { box-shadow: 0 0 0 3px rgba(243,217,139,1), 0 0 40px rgba(255,79,216,.6), 0 10px 26px rgba(0,0,0,.6), inset 0 -8px 18px rgba(0,0,0,.35), inset 0 6px 14px rgba(255,255,255,.3); } }
@keyframes spinIcon { to { transform: rotate(360deg); } }
@keyframes hudIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes pipReset { 0% { transform: scale(1.5); filter: brightness(2); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes tokenIn { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes float { to { transform: translateY(-8px); } }
@keyframes wordIn { 0% { opacity: 0; transform: translateY(40%) scale(1.3); letter-spacing: .3em; } 100% { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes ctaPulse { 50% { box-shadow: 0 0 0 2px rgba(42,10,71,.9), 0 0 0 5px rgba(243,217,139,.75), 0 0 48px color-mix(in srgb, var(--c2, #ff4fd8) 90%, transparent), 0 10px 24px rgba(0,0,0,.6); } }
@keyframes blink { 50% { opacity: .45; } }
@keyframes tierIn { 0% { opacity: 0; transform: scale(2.2); filter: blur(8px); } 70% { opacity: 1; transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes shimmer { to { background-position: -250% 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }

@media (prefers-reduced-motion: reduce) {
  .bg > *, .board::before, .btn-spin, .btn-spin::before, .btn-buy::before, .cine-rays, .reel-sheen, .panel.wildreel, .sym, .cine-token, .cine-gc, .cine-btn { animation: none !important; }
  .board.shake, .board.shake-hard { animation: none !important; }
}
@media (max-height: 560px) and (orientation: landscape) { body.landscape .logo { width: 160px; } }

/* narrow phones: keep the whole control row on screen */
@media (max-width: 440px) {
  /* Zwei saubere Reihen statt gequetschter Einzelreihe (seit Extra Chance sechs Bedienelemente). */
  .ctrl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "buy bet spin" "extra auto speed";
    align-items: center; justify-items: center; gap: 8px 6px; }
  #buyBtn { grid-area: buy; } .bet-ctl { grid-area: bet; width: 100%; justify-content: center; }
  #spinBtn { grid-area: spin; } #extraBtn { grid-area: extra; } #autoBtn { grid-area: auto; } #speedBtn { grid-area: speed; }
  .btn-buy { width: 52px; height: 52px; } .btn-buy b { font-size: 14px; } .btn-buy span { font-size: 9px; }
  .bet-ctl { gap: 2px; padding: 3px; } .round-btn { width: 30px; height: 30px; font-size: 15px; }
  .bet-val { min-width: 44px; } .bet-val #betVal { font-size: 16px; }
  .btn-spin { width: 70px; height: 70px; font-size: 30px; }
  .btn-side { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; } .btn-side span { font-size: 8.5px; letter-spacing: .08em; }
  .stat .k { font-size: 10px; }
}
@media (max-width: 365px) { .ctrl-row { gap: 3px; } .btn-spin { width: 64px; height: 64px; } .btn-buy { width: 48px; height: 48px; } }

/* --------------------------------------------------------------------------
   Desktop composition polish — 2026-09-23
   Position-only pass: keep the reel board centered in the viewport, pull the
   control cluster inward, and give the brand/actions comfortable edge space.
   Mobile/portrait behavior is intentionally unchanged.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 900px) {
  body.landscape .app {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    grid-template-rows: 1fr;
    column-gap: clamp(22px, 2.5vw, 52px);
    padding: clamp(12px, 1.6vh, 22px) clamp(28px, 3.2vw, 64px);
    align-items: center;
  }

  body.landscape .topbar {
    position: absolute;
    z-index: 12;
    top: clamp(18px, 2.8vh, 34px);
    left: clamp(28px, 3.2vw, 64px);
    right: clamp(28px, 3.2vw, 64px);
    width: auto;
    max-width: none;
    padding: 0;
    pointer-events: none;
    display: flex;
  }

  body.landscape .topbar > * { pointer-events: auto; }
  body.landscape .logo { width: clamp(180px, 15vw, 275px); }

  body.landscape .play {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: auto;
    max-height: 100%;
  }

  body.landscape .controls {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    width: clamp(250px, 18vw, 310px);
    margin-left: 0;
  }
}

/* On shorter desktop/laptop landscapes keep the centered composition while
   leaving enough clearance for the floating top bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 760px) {
  body.landscape .app { padding-top: 10px; padding-bottom: 10px; }
  body.landscape .topbar { top: 12px; }
  body.landscape .logo { width: clamp(150px, 13vw, 215px); }
}

/* ---------------- Extra Chance (feature bet) ---------------- */
.btn-side.extra b { font: 800 13px var(--ui); letter-spacing: .02em; line-height: 1; }
.btn-side.extra.on { border-color: var(--mag); color: #fff; background: linear-gradient(180deg, rgba(255,79,216,.35), rgba(52,24,90,.75));
  box-shadow: 0 0 18px rgba(255,79,216,.6), inset 0 0 14px rgba(255,79,216,.35); }
.btn-side.extra.on::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--mag); animation: glowPulse 1.4s ease-in-out infinite alternate; }

/* ---------------- Retrigger banner ---------------- */
.retrigger { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; text-align: center;
  animation: rtIn .42s cubic-bezier(.2,1.5,.4,1) both; }
.retrigger.out { animation: rtOut .22s ease forwards; }
.rt-title { font: 800 clamp(13px, calc(var(--cell) * .2), 24px) var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--c1, var(--gold-hi));
  text-shadow: 0 0 16px var(--mag); }
.rt-spins { font: 900 clamp(46px, calc(var(--cell) * .95), 130px) var(--display); line-height: .95; background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #1a0630) drop-shadow(0 0 26px var(--mag)); }
.rt-sub { font: 700 clamp(11px, calc(var(--cell) * .16), 18px) var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--parch); }
@keyframes rtIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes rtOut { to { opacity: 0; transform: translate(-50%, -62%) scale(.92); } }
/* fourth win tier */
.cine.tier-sensational { --c1: #fff6d2; --c2: #ff4fd8; }
.cine.tier-sensational .cine-rays { animation-duration: 16s; opacity: .95; }
@media (prefers-reduced-motion: reduce) { .retrigger { animation: none !important; } }

/* ---------------- Win-Stufen: klar steigende Intensitaet (Big < Mega < Epic < Sensationell) ---------------- */
.cine.tier-big .cine-tier { letter-spacing: .01em; }
.cine.tier-mega .cine-stage { animation: tierBreath 1.6s ease-in-out infinite alternate; }
.cine.tier-mega .cine-amount { filter: drop-shadow(0 4px 0 #1a0630) drop-shadow(0 0 26px var(--c2)); }
.cine.tier-epic .cine-stage { animation: tierBreath 1.1s ease-in-out infinite alternate; }
.cine.tier-epic .cine-bg { animation: tierFlash 2.4s ease-in-out infinite; }
.cine.tier-epic .cine-amount { filter: drop-shadow(0 5px 0 #1a0630) drop-shadow(0 0 34px var(--c2)) drop-shadow(0 0 60px rgba(243,217,139,.5)); }
.cine.tier-sensational .cine-stage { animation: tierBreath .85s ease-in-out infinite alternate; }
.cine.tier-sensational .cine-bg { animation: tierFlash 1.4s ease-in-out infinite; }
.cine.tier-sensational .cine-tier { animation: tierIn .8s cubic-bezier(.2,1.5,.4,1) both, shimmer 1.6s linear .8s infinite, sensPulse 1.2s ease-in-out infinite alternate; }
.cine.tier-sensational .cine-amount { filter: drop-shadow(0 6px 0 #1a0630) drop-shadow(0 0 44px var(--c2)) drop-shadow(0 0 80px rgba(243,217,139,.6)); }
@keyframes tierBreath { from { transform: scale(1); } to { transform: scale(1.028); } }
@keyframes tierFlash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }
@keyframes sensPulse { from { letter-spacing: .02em; } to { letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) {
  .cine .cine-stage, .cine .cine-bg, .cine .cine-tier { animation-name: none !important; }
}

/* ---- PHASE C: Geschwindigkeits-Auswahl (Popover statt Durchschalten) ---- */
.speed-wrap { position: relative; display: inline-flex; }
.speed-menu { position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 40; min-width: 190px; display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border-radius: 14px; background: linear-gradient(180deg, rgba(46,18,80,.98), rgba(12,5,22,.99));
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(0,0,0,.7); animation: modalIn .18s ease; }
.speed-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--parch); text-align: left; cursor: pointer; }
.speed-menu button:hover, .speed-menu button:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.speed-menu button.on { background: linear-gradient(90deg, rgba(176,47,224,.35), rgba(255,79,216,.22)); border-color: rgba(255,79,216,.55); }
.speed-menu button.on .sm-label::after { content: ' ✓'; color: var(--gold-hi); }
.sm-label { font: 700 14px var(--ui); letter-spacing: .04em; }
.sm-hint { font-size: 11.5px; color: var(--muted); }
/* Auf schmalen Geraeten haengt das Popover nicht am Button (es wuerde seitlich aus dem Bild ragen),
   sondern sitzt fest ueber der Steuerleiste und ist immer vollstaendig sichtbar. */
@media (max-width: 440px) {
  .speed-menu { position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); top: auto; min-width: 0; transform: none; }
  .speed-menu button { padding: 11px 14px; }
}

/* ---- PHASE B: bewusste Desktop-/Tablet-Komposition der Steuerung ----
   Reihe 1: Bonus Buy | SPIN (dominant) | Platzhalter (Symmetrie)
   Reihe 2: Bet +/-
   Reihe 3: Extra Chance | Geschwindigkeit | Autoplay als eine gleichwertige Gruppe */
@media (min-width: 900px) and (orientation: landscape) {
  body.landscape .ctrl-row { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "buy spin spacer" "bet bet bet" "sec sec sec";
    align-items: center; justify-items: center; row-gap: 14px; column-gap: 12px; }
  body.landscape #buyBtn { grid-area: buy; justify-self: start; }
  body.landscape #spinBtn { grid-area: spin; }
  body.landscape .bet-ctl { grid-area: bet; }
  body.landscape .speed-wrap { grid-area: sec; }
  body.landscape #extraBtn, body.landscape #autoBtn { grid-area: sec; }
  /* die drei Sekundaer-Controls teilen sich eine Zeile mit gleicher Breite */
  body.landscape .ctrl-row > #extraBtn { justify-self: start; }
  body.landscape .ctrl-row > .speed-wrap { justify-self: center; }
  body.landscape .ctrl-row > #autoBtn { justify-self: end; }
  body.landscape #extraBtn, body.landscape #autoBtn, body.landscape #speedBtn { width: 100%; max-width: 92px; height: 54px; }
  body.landscape .speed-wrap { width: 100%; max-width: 92px; }
}

/* PHASE E: Bestaetigung in der Karte */
.buy-card.dim { opacity: .45; filter: saturate(.6); }
.card-confirm { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px;
  background: rgba(255,79,216,.1); box-shadow: inset 0 0 0 1px rgba(255,79,216,.5); animation: modalIn .18s ease; }
.cc-q { font-size: 13.5px; line-height: 1.35; text-align: center; }
.cc-row { display: flex; gap: 8px; }
.cc-row .ghost-btn, .cc-row .gold-btn { flex: 1; padding: 10px 8px; font-size: 12.5px; min-height: 44px; }

/* Teaser statt Betrag, solange die Stufenpraesentation den Gewinn noch enthuellt */
.pop-teaser { font: 900 calc(var(--cell) * .42) var(--display); letter-spacing: .04em; text-transform: uppercase;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2a0a47) drop-shadow(0 0 18px var(--mag)); white-space: nowrap; animation: amtPulse .5s ease-in-out infinite alternate; }

/* ---------------------------------------------------------------------------
   MOBILE-KOMPOSITOR (Belege: Video 2026-09-25 20:26, Velvet auf echtem Geraet)
   Im Video flackert es rund um die Vollbild-Cinematic: der Hintergrund zeigt eine
   geblurrte Kopie des Boards, Texte erscheinen mal leer/mal doppelt, und beim
   Ausblenden bleibt kurz eine Geisterkopie stehen. Genau diese Ebenen sind auf
   Mobile-GPUs die teuersten und bekannt fuer stale/tiled Composites:
     1. backdrop-filter ueber die ganze Flaeche (.cine-bg, .modal-backdrop)
     2. .cine-rays: 220vmax grosser, maskierter, rotierender conic-gradient
        (bei 390x844 und DPR 3 rechnerisch ~5.500 px Texturkante -> ueber dem
        Limit vieler mobiler GPUs, daher Kachelung/Korruption)
     3. dauerhaft animierte, grossflaechig geblurrte Glow-Ebenen
     4. per-Symbol-Blur waehrend des Spins (30 gefilterte Layer pro Frame)
   Desktop bleibt unveraendert; mobil wird derselbe Look statisch/guenstiger erzeugt.
   --------------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
  /* 1) keine Backdrop-Filter auf Vollbild-Ebenen */
  .cine-bg { backdrop-filter: none; -webkit-backdrop-filter: none;
    background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--c2) 26%, transparent), rgba(10,3,18,.94) 62%, rgba(4,1,8,.99) 100%); }
  .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4,1,8,.9); }
  /* 2) Strahlenkranz ohne Maske/Rotation und in moderater Groesse statt 220vmax */
  .cine-rays { width: 150vmax; height: 150vmax; -webkit-mask: none; mask: none; animation: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--c1) 26%, transparent) 0%, color-mix(in srgb, var(--c2) 14%, transparent) 28%, transparent 58%); opacity: .8; }
  /* 3) grossflaechige Glow-Ebenen statisch (kein animierter 40px-Blur ueber 70vmax) */
  .bg-glow, .bg-glow.b2 { animation: none; filter: none; opacity: .7; }
  .board::after { animation: none !important; }
  .board.is-anticipating::after, .board.is-trigger::after, .board.is-bigwin::after { animation: none !important; }
  /* 4) Walzen-Blur waehrend des Spins weglassen – Bewegungsunschaerfe ist hier reine Kosmetik */
  .reel.fast .sym { filter: none; }
  .reel-sheen { mix-blend-mode: normal; opacity: .5; }
}
}

/* ===========================================================================
   MOBILE SAFE RENDERING PATH (1.4.3)  —  body.lowfx
   Gesetzt von main.ts fuer Touch-/Schmalgeraete; mit ?fx=full / ?fx=safe testbar.
   Ziel: stabile Komposition vor teurer Dekoration. Jede Regel adressiert einen
   konkreten, im Geraetevideo sichtbaren Kompositor-Risikofaktor:
     - Geisterbild/geblurrte Board-Kopie  -> alle backdrop-filter
     - doppelter/leerer Text              -> background-clip:text + Filter + Opacity-Transition
     - stehengebliebene Vollbild-Ebenen   -> Opacity-Transitionen grosser Layer
     - Kachelung/Korruption               -> uebergrosse animierte/maskierte Flaechen
     - Repaint-Instabilitaet              -> animierte Filter/box-shadows, Dauer-Animationen
     - unnoetige Layer-Promotion          -> will-change / translateZ / backface auf vielen Knoten
   Desktop bleibt vollstaendig unveraendert (keine dieser Regeln greift ohne .lowfx).
   =========================================================================== */
body.lowfx .cine-bg,
body.lowfx .modal-backdrop,
body.lowfx .icon-btn,
body.lowfx .btn-side,
body.lowfx .bet-ctl,
body.lowfx .feature-bar,
body.lowfx .pot { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lowfx .cine-bg { background: radial-gradient(62% 56% at 50% 45%, color-mix(in srgb, var(--c2) 24%, transparent), rgba(10,3,18,.95) 60%, rgba(4,1,8,.99) 100%); }
body.lowfx .modal-backdrop { background: rgba(4,1,8,.92); }

/* keine uebergrossen, animierten oder maskierten Dekor-Flaechen */
body.lowfx .cine-rays { display: none !important; }
body.lowfx .bg-glow, body.lowfx .bg-glow.b2, body.lowfx .bg-fog, body.lowfx .bg-fog.f2,
body.lowfx .bg-shafts, body.lowfx .bg-curtain { animation: none !important; filter: none !important; }
body.lowfx .bg-shafts { mix-blend-mode: normal; opacity: .35; }
body.lowfx .bg-glow, body.lowfx .bg-glow.b2 { opacity: .55; }
body.lowfx #ambient { display: none !important; }

/* keine animierten Schatten/Ringe am Board (grosse Flaeche, Repaint pro Frame) */
body.lowfx .board::before, body.lowfx .board::after { animation: none !important; }
body.lowfx .board.is-spinning::after, body.lowfx .board.is-anticipating::after,
body.lowfx .board.is-trigger::after, body.lowfx .board.is-win::after,
body.lowfx .board.is-bigwin::after, body.lowfx .board.is-standoff::after { animation: none !important; }
body.lowfx .reel-sheen { mix-blend-mode: normal; opacity: .4; animation: none; }

/* Walzen/Symbole: keine Filter waehrend der Bewegung, keine unnoetige Layer-Promotion.
   (Mehr GPU-Promotion ist auf Mobile NICHT automatisch besser – viele kleine promoted
   Layer mit Filtern sind eine bekannte Quelle fuer Kompositor-Instabilitaet.) */
body.lowfx .reel.fast .sym { filter: none !important; }
body.lowfx .sym { will-change: auto; backface-visibility: visible; -webkit-backface-visibility: visible; }
body.lowfx .sym[data-sym="MOON"], body.lowfx .sym[data-sym="CROSS"], body.lowfx .sym[data-sym="ANTE"] {
  animation: none !important; filter: drop-shadow(0 0 5px var(--sc)); }

/* Cinematic-Text: kein background-clip:text mit mehrfachen drop-shadows in einer
   Opacity-Transition (im Video als doppelter/leerer Text sichtbar), keine Dauer-Shimmer. */
body.lowfx .cine-tier, body.lowfx .cine-amount, body.lowfx .rt-spins {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--gold-hi) !important; filter: none !important; animation-name: none !important;
  text-shadow: 0 2px 0 #1a0630, 0 0 18px rgba(255,79,216,.45); }
body.lowfx .cine-stage, body.lowfx .cine { animation-duration: .01ms !important; }
body.lowfx .cine { transition: none !important; }          /* keine Opacity-Transition auf Vollbildebene */
body.lowfx .cine.leaving { opacity: 0; }

/* Crossfire-Theme: pulseTint animiert filter:brightness auf einer VOLLFLAECHIGEN Ebene -> Repaint des ganzen Viewports
   in jedem Frame, das gesamte Feature lang (gemessen: Crossfire-Feature ~30 fps bei 4x CPU-Drosselung). Gleicher Puls-Takt
   ueber opacity (vom Compositor ohne Repaint abspielbar). */
body.lowfx:has(.theme-crossfire) .bg-theme { animation: pulseTintLow 2.8s ease-in-out infinite; }
@keyframes pulseTintLow { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* Dauerhaft sichtbare Feature-Elemente animierten box-shadow -> Repaint in JEDEM Frame, das ganze Feature lang
   (Heist: bis zu 15+ Sticky Wilds; Crossfire: gesperrte Wild-Reels in voller Walzenhoehe, auch unter dem Total-Win-Overlay).
   Sticky Wilds: gleicher Puls (cyan -> magenta), aber als opacity eines Pseudo-Elements (Compositor, kein Repaint).
   (::before – ::after ist das Schloss-Badge der Sticky Wilds und bleibt unveraendert.)
   Wild-Reels: overflow:hidden wuerde einen Pseudo-Glow abschneiden -> statischer Glow auf mittlerer Intensitaet. */
body.lowfx .sticky { animation: none; box-shadow: 0 0 0 2px rgba(127,227,255,.55), 0 0 12px rgba(127,227,255,.4); }
body.lowfx .sticky.lock-in { animation: lockIn .5s cubic-bezier(.2,1.6,.4,1); }
body.lowfx .sticky::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,79,216,.7), 0 0 22px rgba(255,79,216,.55); opacity: 0; animation: glowFadeLow 2.4s ease-in-out infinite alternate; }
@keyframes glowFadeLow { to { opacity: 1; } }
body.lowfx .panel.wildreel { animation: none; box-shadow: 0 0 26px rgba(255,79,216,.62), 0 0 0 1px rgba(243,217,139,.72); }
body.lowfx .panel.wildreel.morph { animation: morph .6s cubic-bezier(.2,1.2,.4,1); }

/* Spin-Button: spinIdle animiert einen fuenffachen box-shadow -> Repaint in JEDEM Frame, auch im Leerlauf und waehrend
   Features. Gemessen (5 s Leerlauf, 4x CPU-Drosselung): ohne Puls 154 statt 675 Paints, 77 statt 538 ms Raster.
   Mobile: statischer Glow auf mittlerer Intensitaet; der rotierende Ring bleibt. */
body.lowfx .btn-spin { animation: none; box-shadow: 0 0 0 3px rgba(243,217,139,.92), 0 0 33px rgba(255,79,216,.48), 0 10px 26px rgba(0,0,0,.6), inset 0 -8px 18px rgba(0,0,0,.35), inset 0 6px 14px rgba(255,255,255,.27); }

/* Overlay/Backdrop nicht per Opacity ausblenden lassen, sondern hart entfernen */
body.lowfx .overlay { transition: none !important; }

/* Gepufferter manueller Spin: dezenter Hinweis, dass der naechste Spin bereits vorgemerkt ist */
.spin-btn.queued::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,79,216,.75), 0 0 18px rgba(255,79,216,.55); animation: glowPulse .9s ease-in-out infinite alternate; }

/* TASK 2 (1.5.2): Auf Telefonen muss auch der laengste Stufentitel ("SENSATIONAL", 11 Zeichen)
   komplett in den Viewport passen – einzeilig, zentriert, mit Sicherheitsrand. Die Obergrenze
   ist auf die Wortbreite gerechnet (rund 8 em inkl. Laufweite): 88vw / 8em ~ 10.5vw.
   Zusaetzlich misst presenter.fitTier() den tatsaechlich gerenderten Text und verkleinert bei Bedarf.
   Desktop (>900px) bleibt unveraendert. */
@media (max-width: 900px) {
  .cine-tier { font-size: min(clamp(26px, 10.5vw, 128px), 11vh); letter-spacing: .01em; }
}
@media (max-width: 360px) {
  .cine-tier { font-size: min(clamp(22px, 10vw, 128px), 11vh); }
}