:root {
  --ink: #07060a;
  --ink-2: #0f0c14;
  --velvet: #3a1470;
  --velvet-deep: #150726;
  --blood: #6d28c9;
  --blood-hi: #9b4dff;
  --gold: #b8bec9;
  --gold-hi: #f4f6fb;
  --gold-lo: #5d6370;
  --bone: #e9e6ef;
  --mist: #a49fb3;
  --cell: clamp(76px, 21vw, 108px);
  --serif: "Cormorant Garamond", Georgia, serif;
  --caps: "Cinzel", Georgia, serif;
  --black: "UnifrakturMaguntia", "Cinzel", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 0%, #1a0c2e 0%, var(--ink) 55%) fixed, var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- atmosphere ---------- */
.atmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.atmos::before { /* damask-ish pattern */
  content: ""; position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(196,202,214,.05) 0 2px, transparent 3px) 0 0/38px 38px,
    radial-gradient(circle at 50% 50%, rgba(122,47,209,.06) 0 1px, transparent 2px) 19px 19px/38px 38px;
}
.atmos::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.85) 100%); }
.candle { position: absolute; bottom: -10vh; width: 60vmin; height: 60vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,80,220,.16), transparent 60%); filter: blur(10px); animation: flicker 3.2s infinite alternate; }
.candle.c1 { left: -20vmin; }
.candle.c2 { right: -20vmin; animation-delay: -1.3s; }
.fog { position: absolute; inset: auto -20% -10% -20%; height: 45vh;
  background: radial-gradient(ellipse at 30% 100%, rgba(80,30,150,.25), transparent 60%), radial-gradient(ellipse at 70% 100%, rgba(50,15,90,.25), transparent 60%);
  animation: drift 18s ease-in-out infinite alternate; }
@keyframes flicker { 0%{opacity:.7;transform:scale(1)} 30%{opacity:1} 55%{opacity:.8;transform:scale(1.05)} 100%{opacity:1;transform:scale(.97)} }
@keyframes drift { to { transform: translateX(6%); } }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- type ---------- */
.brand { font-family: var(--black); font-weight: 400; margin: 0; letter-spacing: .02em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(196,202,214,.15); }
.brand { font-size: clamp(44px, 12vw, 72px); line-height: 1; }
.brand.small { font-size: clamp(28px, 7vw, 38px); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 0; border-radius: 999px; padding: .75em 1.6em; font-family: var(--caps); font-weight: 700; letter-spacing: .08em;
  text-transform: lowercase; text-decoration: none; transition: transform .12s, filter .2s, box-shadow .2s; }
.btn:active { transform: translateY(2px); }
.btn-blood { color: #f6f0ff; background: linear-gradient(180deg, var(--blood-hi), var(--blood) 50%, #3d1275);
  box-shadow: 0 5px 0 #1c0733, 0 10px 30px rgba(122,47,209,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-blood:hover { filter: brightness(1.1); }
.btn-gold { color: #15121c; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #8a909c);
  box-shadow: 0 4px 0 #34343c, inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost { color: var(--gold-hi); background: rgba(0,0,0,.35); border: 1px solid rgba(196,202,214,.45); padding: .6em 1em; font-size: 14px; }
.btn-ghost:hover { background: rgba(196,202,214,.12); }
.btn-ghost.on { background: var(--gold); color: #15121c; }
.btn.sm { padding: .45em 1em; font-size: 14px; }
.btn.wide { width: 100%; margin-top: 14px; font-size: 18px; }
.link { background: none; border: 0; color: var(--mist); text-decoration: underline; text-underline-offset: 3px; font-size: 16px; padding: 6px; }
.link:hover { color: var(--gold-hi); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(196,202,214,.4); background: rgba(0,0,0,.4); color: var(--gold-hi); font-size: 18px; }
.icon-btn.off { opacity: .45; text-decoration: line-through; }

/* ---------- gate ---------- */
.gate { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.gate-card { max-width: 520px; text-align: center; padding: 40px 28px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(24,10,44,.85), rgba(7,6,10,.92)); border: 1px solid rgba(196,202,214,.35);
  box-shadow: 0 0 0 6px rgba(0,0,0,.4), 0 0 0 7px rgba(196,202,214,.18), 0 30px 80px rgba(0,0,0,.7); }
.sigil { font-size: 40px; color: var(--blood-hi); text-shadow: 0 0 20px rgba(170,100,255,.6); }
.age { font-family: var(--caps); letter-spacing: .3em; color: var(--blood-hi); margin: 10px 0 18px; font-size: 14px; }
.lede { font-size: 20px; margin: 0 0 14px; }
.fine { color: var(--mist); font-size: 16px; margin: 0 0 26px; }
.fine b { color: var(--bone); }
.gate .btn { font-size: 20px; padding: .85em 2em; }
.gate .link { display: block; margin: 16px auto 0; }

/* ---------- app ---------- */
.app { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; padding: 12px 16px 40px; }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.top-actions { display: flex; gap: 8px; }

.machine-wrap { position: relative; padding-right: 34px; }
.machine { position: relative; border-radius: 40px 40px 26px 26px; padding: 0 18px 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 12%, transparent 88%, rgba(255,255,255,.05)),
    linear-gradient(180deg, #121018, #08070b 70%, #100c16);
  border: 3px solid var(--gold);
  box-shadow:
    inset 0 0 0 6px #07060a, inset 0 0 0 8px rgba(196,202,214,.5), inset 0 0 60px rgba(60,20,110,.6),
    0 0 0 2px #2a2a33, 0 40px 90px rgba(0,0,0,.8), 0 0 80px rgba(122,47,209,.15);
}
.machine.shake { animation: shake .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-8px) rotate(-.5deg)} 40%,60%{transform:translateX(8px) rotate(.5deg)} }

/* marquee */
.marquee { position: relative; margin: 0 -18px; padding: 22px 18px 12px; border-radius: 37px 37px 0 0; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #4a1a8a, var(--velvet-deep) 70%); border-bottom: 3px solid var(--gold);
  box-shadow: inset 0 -10px 30px rgba(0,0,0,.6); overflow: hidden; }
.marquee::before { content: ""; position: absolute; inset: 0; opacity: .25;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.35) 6px 7px); }
.bulbs { position: absolute; left: 14px; right: 14px; top: 7px; display: flex; justify-content: space-between; }
.bulbs i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a44; box-shadow: inset 0 -1px 2px rgba(0,0,0,.6); transition: background .15s, box-shadow .15s; }
.bulbs i.lit { background: #f4f6ff; box-shadow: 0 0 8px 2px rgba(220,225,255,.9), 0 0 18px rgba(200,200,230,.6); }
.marquee-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; }
.marquee-title { font-family: var(--caps); font-weight: 900; font-size: clamp(38px, 11vw, 60px); letter-spacing: .18em; padding-left: .18em;
  background: linear-gradient(180deg, #ffffff 0%, var(--gold-hi) 30%, var(--gold) 60%, var(--gold-lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #1c0833) drop-shadow(0 0 14px rgba(210,215,235,.35)); }
.flourish { color: var(--gold); font-size: clamp(22px, 6vw, 32px); filter: drop-shadow(0 0 8px rgba(196,202,214,.6)); }
.marquee-sub { position: relative; font-style: italic; color: #d9c8f0; font-size: 17px; margin-top: 2px; }

/* meters */
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.meter { border-radius: 14px; padding: 8px 12px 10px; background: linear-gradient(180deg, #040306, #0d0a12);
  border: 1px solid rgba(196,202,214,.45); box-shadow: inset 0 2px 10px rgba(0,0,0,.9); text-align: center; }
.meter-label { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; color: var(--mist); text-transform: uppercase; }
.meter-val { font-family: var(--caps); font-weight: 700; font-size: clamp(22px, 6.4vw, 32px); font-variant-numeric: tabular-nums;
  color: #eef1f8; text-shadow: 0 0 12px rgba(225,230,245,.55); line-height: 1.15; }
.meter.taken .meter-val { color: #c58bff; text-shadow: 0 0 14px rgba(170,100,255,.7); }
.meter-val.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.12); } }

/* modes */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mode { border-radius: 12px; padding: 7px 4px 6px; text-align: center; border: 1px solid rgba(196,202,214,.35);
  background: linear-gradient(180deg, #17121f, #0a080e); color: var(--mist); transition: all .2s; }
.mode b { display: block; font-family: var(--caps); font-size: 14px; letter-spacing: .1em; color: var(--bone); }
.mode small { display: block; font-size: 12px; line-height: 1.2; }
.mode .skulls { color: var(--blood-hi); font-size: 11px; letter-spacing: 2px; }
.mode[aria-checked="true"] { background: linear-gradient(180deg, #5b22a8, #240b45); border-color: var(--gold-hi);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(170,100,255,.45), inset 0 1px 0 rgba(255,255,255,.2); color: #ebe0ff; }
.mode[aria-checked="true"] .skulls { color: var(--gold-hi); }
.mode:disabled { opacity: .6; cursor: not-allowed; }

/* reels */
.reel-frame { position: relative; padding: 10px; border-radius: 18px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 30%, var(--gold-lo) 70%, var(--gold));
  box-shadow: 0 8px 20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.4); }
.reel-window { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px;
  height: calc(var(--cell) * 3); overflow: hidden; border-radius: 10px; background: linear-gradient(90deg, #8a909c, #e9ecf3 50%, #8a909c); box-shadow: inset 0 0 0 2px #15121c; }
.reel { position: relative; overflow: hidden; border-radius: 6px;
  background:
    radial-gradient(ellipse 80% 45% at 50% 50%, rgba(140,80,230,.28), transparent 70%),
    linear-gradient(90deg, #050408 0%, #15111f 16%, #221b31 50%, #15111f 84%, #050408 100%);
  box-shadow: inset 0 0 0 1px rgba(196,202,214,.18), inset 0 0 18px rgba(0,0,0,.9); }
.strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.cell { height: var(--cell); display: grid; place-items: center; }
.cell { position: relative; }
.cell::before { content: ""; position: absolute; width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(circle, rgba(180,130,255,.22), transparent 70%); }
.cell svg { position: relative; width: 72%; height: 72%; filter: drop-shadow(0 0 1.5px rgba(235,235,255,.75)) drop-shadow(0 0 8px rgba(190,150,255,.4)) drop-shadow(0 4px 3px rgba(0,0,0,.7)); transition: transform .3s; }
.cell.hit svg { animation: hit 0.9s ease-in-out infinite; }
@keyframes hit { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(205,175,255,0)); } 50% { transform: scale(1.14); filter: drop-shadow(0 0 12px rgba(190,140,255,.95)); } }
.payline { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(122,47,209,.7) 8%, rgba(122,47,209,.7) 92%, transparent); }
.payline::before, .payline::after { content: ""; position: absolute; top: -7px; border: 8px solid transparent; }
.payline::before { left: -2px; border-left-color: var(--blood-hi); }
.payline::after { right: -2px; border-right-color: var(--blood-hi); }
.reel-window.win .payline { background: linear-gradient(90deg, transparent, #d7b8ff 8%, #f3eaff 50%, #d7b8ff 92%, transparent); box-shadow: 0 0 14px #b98cff; height: 3px; }
.glass { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 22%, transparent 34%, transparent 66%, rgba(0,0,0,.25) 78%, rgba(0,0,0,.85) 100%),
    linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 38%, transparent 46%); }
.side-gems { position: absolute; left: -6px; right: -6px; top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.side-gems i { display: none; }
.empty-veil { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; z-index: 3;
  background: radial-gradient(ellipse, rgba(30,10,55,.92), rgba(4,3,6,.96)); animation: fadein .5s; }
.veil-title { font-family: var(--black); font-size: 54px; color: var(--blood-hi); line-height: 1; text-shadow: 0 0 20px rgba(170,100,255,.6); }
.veil-sub { font-style: italic; color: var(--mist); margin-bottom: 8px; }
@keyframes fadein { from { opacity: 0; } }

.message { min-height: 1.6em; margin: 12px 0 6px; text-align: center; font-style: italic; font-size: 20px; color: #d9c8f0; transition: color .2s; }
.message.big { color: var(--gold-hi); font-style: normal; font-family: var(--caps); font-weight: 700; letter-spacing: .05em; }

/* deck */
.deck { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 6px; }
.deck .btn-ghost { justify-self: stretch; }
.spin-btn { width: 108px; height: 108px; border-radius: 50%; border: 0; position: relative;
  background: radial-gradient(circle at 50% 35%, #b57aff, var(--blood) 45%, #2e0c5c 80%);
  box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px #2a2a33, 0 9px 0 8px #15121c, 0 18px 40px rgba(122,47,209,.55), inset 0 -8px 16px rgba(0,0,0,.4), inset 0 6px 10px rgba(255,255,255,.35);
  transition: transform .1s, box-shadow .1s, filter .2s; }
.spin-btn span { font-family: var(--caps); font-weight: 900; font-size: 22px; letter-spacing: .12em; color: #f6f0ff; text-shadow: 0 2px 0 #22093f; padding-left: .12em; }
.spin-btn:hover { filter: brightness(1.12); }
.spin-btn:active, .spin-btn.pressed { transform: translateY(6px); box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px #2a2a33, 0 3px 0 8px #15121c, 0 8px 20px rgba(122,47,209,.45), inset 0 -4px 12px rgba(0,0,0,.4), inset 0 6px 10px rgba(255,255,255,.3); }
.spin-btn:disabled { filter: grayscale(.6) brightness(.7); cursor: wait; }
.spin-btn.idle { animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { filter: brightness(1.18); } }

.history { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 18px; min-height: 26px; }
.history span { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(196,202,214,.22); color: var(--mist); font-family: var(--caps); }
.history span.t { color: #c9a3ff; border-color: rgba(170,100,255,.45); }
.history span.all { color: #15121c; background: var(--gold); }
.cabinet-foot { text-align: center; color: var(--gold); margin-top: 10px; opacity: .7; }

/* lever */
.lever { position: absolute; right: -4px; top: 36%; width: 40px; height: 190px; cursor: grab; touch-action: none; outline: none; }
.lever-base { position: absolute; left: 0; top: 70px; width: 26px; height: 64px; border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 40%, var(--gold) 70%, var(--gold-lo)); box-shadow: 0 6px 14px rgba(0,0,0,.6); }
.lever-arm { position: absolute; left: 14px; bottom: 88px; width: 8px; height: 120px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, #6d6d73, #f2f2f5 45%, #8b8b92); border-radius: 4px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.lever-arm.pulled { transform: scaleY(-1); transition: transform .18s ease-in; }
.lever-ball { position: absolute; left: 50%; top: -18px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c38bff, var(--blood) 45%, #1c0733 90%); box-shadow: 0 6px 12px rgba(0,0,0,.6); }
.lever:focus-visible .lever-ball { box-shadow: 0 0 0 3px var(--gold-hi); }

/* code bar */
.codebar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; color: var(--mist); font-size: 15px; }
.code-chip { font-family: var(--caps); font-weight: 700; letter-spacing: .12em; padding: 4px 12px; border-radius: 8px; border: 1px dashed var(--gold); background: rgba(196,202,214,.08); color: var(--gold-hi); }
.footer-fine { text-align: center; color: #6b6578; font-size: 13px; margin-top: 10px; }

/* modals */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4,2,8,.75); backdrop-filter: blur(4px); animation: fadein .2s; overflow-y: auto; }
.modal-card { position: relative; width: 100%; max-width: 460px; padding: 28px 24px 22px; border-radius: 22px;
  background: linear-gradient(180deg, #1b0d2c, #0d0a12); border: 1px solid rgba(196,202,214,.45);
  box-shadow: 0 30px 80px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); animation: rise .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes rise { from { transform: translateY(20px) scale(.97); opacity: 0; } }
.modal h2 { font-family: var(--black); font-weight: 400; font-size: 40px; margin: 0 0 6px; text-align: center; color: var(--gold-hi); }
.modal .intro { text-align: center; color: #d6d0e2; margin: 0 0 16px; font-size: 17px; }
.modal b { color: #c9a3ff; }
.x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 30px; color: var(--mist); line-height: 1; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 14px; }
.steps li { counter-increment: s; position: relative; padding-left: 42px; margin-bottom: 14px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--caps); font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--blood-hi), #4c1890); box-shadow: 0 0 0 2px var(--gold); }
.copy-row { display: flex; gap: 8px; margin: 6px 0; }
.copy-row code { flex: 1; font-family: var(--caps); font-weight: 700; letter-spacing: .15em; font-size: 18px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px dashed var(--gold); color: var(--gold-hi); }
.hint { color: var(--mist); font-size: 15px; }
.hint.center { text-align: center; }
.field { display: block; margin-top: 8px; }
.field span { display: block; font-family: var(--caps); font-size: 13px; letter-spacing: .08em; margin-bottom: 6px; }
.field em { font-family: var(--serif); color: var(--mist); letter-spacing: 0; }
.field input { width: 100%; font: inherit; font-size: 17px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(196,202,214,.4); background: rgba(0,0,0,.5); color: var(--bone); outline: none; }
.field input:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(196,202,214,.2); }
.or { text-align: center; color: var(--mist); margin: 10px 0 0; font-style: italic; }
.error { color: #c58bff; text-align: center; margin: 10px 0 0; }
.waiting span { animation: blink 1.4s infinite both; }
.waiting span:nth-child(2) { animation-delay: .2s; } .waiting span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: 0; } 40% { opacity: 1; } }

.paytable { width: 100%; border-collapse: collapse; font-family: var(--caps); }
.paytable th { font-size: 12px; letter-spacing: .15em; color: var(--mist); font-weight: 500; padding: 4px; }
.paytable td { padding: 6px 4px; text-align: center; border-top: 1px solid rgba(196,202,214,.15); font-weight: 700; color: var(--gold-hi); }
.paytable td.sym { display: flex; gap: 2px; justify-content: center; }
.paytable td.sym svg { width: 30px; height: 30px; }
.paytable td.all { color: var(--blood-hi); text-shadow: 0 0 10px rgba(170,100,255,.6); }

/* toast + banner */
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 70; padding: 12px 22px; border-radius: 999px;
  font-family: var(--caps); font-weight: 700; color: #15121c; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 30px rgba(196,202,214,.5);
  animation: toast 3.6s forwards; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.banner { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(122,47,209,.35), rgba(0,0,0,.6)); animation: bannerbg 3.4s forwards; }
.banner-inner { text-align: center; animation: slam 3.4s cubic-bezier(.2,1.4,.4,1) forwards; }
.banner-crown { font-size: 110px; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 40px rgba(205,175,255,.9); }
.banner-text { font-family: var(--caps); font-weight: 900; font-size: clamp(22px, 7.4vw, 64px); letter-spacing: .06em; color: #fff; white-space: nowrap;
  text-shadow: 0 0 20px var(--blood-hi), 0 0 50px var(--blood), 0 4px 0 #22093f; padding: 0 16px; }
@keyframes slam { 0% { transform: scale(3); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(.95); } }
@keyframes bannerbg { 0% { opacity: 0; } 8% { opacity: 1; background-color: rgba(150,70,255,.4); } 20% { background-color: transparent; } 85% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 480px) {
  body { font-size: 17px; }
  .machine-wrap { padding-right: 22px; }
  .machine { padding: 0 12px 14px; border-radius: 32px 32px 22px 22px; }
  .marquee { margin: 0 -12px; border-radius: 29px 29px 0 0; }
  .lever { right: -12px; transform: scale(.78); transform-origin: left top; }
  .spin-btn { width: 92px; height: 92px; }
  .spin-btn span { font-size: 19px; }
  .deck .btn-ghost { font-size: 12px; padding: .6em .4em; }
  .mode small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .candle, .fog, .spin-btn.idle, .cell.hit svg, .machine.shake { animation: none !important; }
}