/* Crown Coins — strict visual copy pass (2026-11-06): benchmark is Playson
   "Coin Strike: Hold and Win" (dossier ~/workspace/1win-reviews/crown-coins).
   Deep blue electric scene, steel frame, ribbon tiers, orange SPIN.
   Layout contract unchanged: 360x640, no page scroll, SPIN on first screen. */
:root {
  --navy0: #04061a;
  --navy1: #081238;
  --navy2: #0d1e5e;
  --cell: #0a1440;
  --steel: #7d9cc4;
  --steel-dk: #2c4a7c;
  --cyan: #3fd2ff;
  --gold: #f6c84e;
  --gold-hi: #ffe98a;
  --gold-lo: #c47f0a;
  --gold-dark: #7a4d02;
  --yellow: #ffe93d;
  --ink: #ffffff;
  --ink-dim: #aebfff;
  --panel: rgba(10, 24, 64, 0.72);
  --cellh: clamp(60px, 10.6dvh, 76px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(90% 42% at 50% -4%, rgba(63, 140, 255, 0.5) 0%, rgba(63, 140, 255, 0) 60%),
    radial-gradient(120% 55% at 50% 108%, rgba(38, 84, 190, 0.35) 0%, rgba(38, 84, 190, 0) 55%),
    linear-gradient(180deg, var(--navy2) 0%, var(--navy1) 45%, var(--navy0) 100%);
  overflow: hidden;
}
.layout {
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: 5px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- top bar (platform chrome, steel-blue dress) ---- */
.topbar { display: flex; align-items: center; gap: 5px; min-height: 24px; }
.pill {
  background: var(--panel);
  border: 1px solid rgba(111, 168, 255, 0.45);
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.net-pill { font-size: 11px; color: #9ae6b4; flex: none; }
.balance-pill { font-weight: 700; color: var(--gold-hi); margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lang-toggle { margin-left: 0; cursor: pointer; font: inherit; }

/* ---- header lockup: ribbon tiers flanking the logo (benchmark portrait
   arrangement: two stacked left, two stacked right, coin + logo centre) ---- */
.lockup { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; gap: 6px; align-items: center; }
.ribbons-col { display: flex; flex-direction: column; gap: 4px; }
.logo-lock { text-align: center; position: relative; min-width: 0; }
.logo-coin {
  width: 38px; height: 38px; margin-bottom: -6px; position: relative; z-index: 1;
  filter: drop-shadow(0 0 9px rgba(53, 196, 255, .55)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
}
.logo-lock h1 {
  margin: 0; font-size: 21px; line-height: 1.02; font-weight: 900; letter-spacing: .5px; white-space: nowrap;
}
.logo-lock h1 .lg-gold {
  background: linear-gradient(180deg, #fff3c4 15%, var(--gold) 58%, #e09c0a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(6, 10, 34, .9));
}
.logo-lock h1 .lg-blue {
  background: linear-gradient(180deg, #cfeeff 10%, #3fa9f5 55%, #1663c7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(6, 10, 34, .9));
}
.logo-tag {
  grid-column: 1 / -1; justify-self: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.3px; color: #ffe9a8;
  background: linear-gradient(180deg, #e0342c, #a30d1c);
  border-radius: 3px; padding: 1px 9px; margin-top: 1px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
  max-width: 320px; text-align: center; line-height: 1.3;
}
/* Tier badges — DETAIL SWEEP (2026-11-06): the benchmark's badges are
   chunky BEVELLED PLAQUES in a silver winged frame, VALUE-LED: the tier
   name small on top, the big value beneath, in a matching ink register
   (GRAND yellow/red, MINOR yellow/blue, MAJOR yellow-green/green,
   MINI white/purple). They carry our renamed tiers at OUR values
   (x14/x6/x10/x4 x current bet) — design copied, maths ours. */
.tier {
  position: relative;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  padding: 2px 9px 3px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  box-shadow: inset 0 0 0 2px #c7cfdd, inset 0 0 0 3.5px #454e61, inset 0 3px 5px rgba(255, 255, 255, .35), inset 0 -4px 7px rgba(0, 0, 0, .45);
  color: #fff; text-align: center;
}
.tier.grand { background: linear-gradient(180deg, #e8433c, #c01419 55%, #8f0a12); --ink-name: #ffe14d; --ink-val: #ffe14d; }
.tier.minor { background: linear-gradient(180deg, #3f8fe0, #1663c7 55%, #0d3f8a); --ink-name: #ffe14d; --ink-val: #ffe14d; }
.tier.major { background: linear-gradient(180deg, #2ecc71, #0f9e44 55%, #076e2c); --ink-name: #c8ff3d; --ink-val: #ffe14d; }
.tier.mini  { background: linear-gradient(180deg, #b45ce8, #7d3cdb 55%, #4d1d96); --ink-name: #ffffff; --ink-val: #ffffff; }
.tier-name { font-size: 8.5px; font-weight: 900; white-space: nowrap; letter-spacing: 1.2px; line-height: 1.1; color: var(--ink-name, #fff); text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 2px 3px rgba(0, 0, 0, .5); }
.tier strong { font-size: 13.5px; line-height: 1.08; font-weight: 900; white-space: nowrap; color: var(--ink-val, #ffe14d); text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 2px 3px rgba(0, 0, 0, .5); letter-spacing: .3px; }

/* ---- cabinet: steel-blue frame, navy cells ---- */
.cabinet {
  position: relative;
  border-radius: 16px;
  padding: 5px 17px 5px;
  background: linear-gradient(180deg, #3a5a94 0%, #223c6e 30%, #12244d 100%);
  border: 2.5px solid var(--steel);
  box-shadow: 0 0 0 2px rgba(8, 16, 44, .85), 0 0 22px rgba(53, 140, 255, .35), 0 10px 24px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 8px rgba(0, 0, 0, .5);
}
.cabinet::before {
  content: ""; position: absolute; inset: 4px; z-index: 3; pointer-events: none; border-radius: 12px;
  background-image:
    radial-gradient(circle, #eaf3ff 0 2.2px, #7d9cc4 3px, #2c4a7c 4.4px, transparent 5.4px),
    radial-gradient(circle, #eaf3ff 0 2.2px, #7d9cc4 3px, #2c4a7c 4.4px, transparent 5.4px),
    radial-gradient(circle, #eaf3ff 0 2.2px, #7d9cc4 3px, #2c4a7c 4.4px, transparent 5.4px),
    radial-gradient(circle, #eaf3ff 0 2.2px, #7d9cc4 3px, #2c4a7c 4.4px, transparent 5.4px);
  background-size: 15px 15px; background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}
.crown-rail {
  display: flex; justify-content: center; align-items: center;
  background: linear-gradient(180deg, #0d1e4a, #081233);
  border: 1px solid rgba(125, 156, 196, .6);
  border-radius: 10px;
  padding: 3px 8px;
  margin-bottom: 3px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.coin-pile-wrap { display: flex; align-items: center; gap: 10px; width: 100%; }
/* The tray: a recessed slot in the steel rail that physically holds the coins */
.coin-pile {
  position: relative; width: 96px; height: 34px; flex: none;
  border-radius: 9px;
  background: linear-gradient(180deg, #050b26, #0a1740 70%, #0d1e4a);
  border: 2px solid #546f96;
  box-shadow: inset 0 4px 9px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(63, 210, 255, .35), 0 1px 0 rgba(255, 255, 255, .06);
}
.coin-pile.armed { animation: trayPulse .7s ease-in-out infinite alternate; }
@keyframes trayPulse {
  from { box-shadow: inset 0 4px 9px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(63, 210, 255, .35), 0 0 2px rgba(63, 210, 255, .2); }
  to   { box-shadow: inset 0 4px 9px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(63, 210, 255, .35), 0 0 15px rgba(63, 210, 255, .9); }
}
.pile-coin {
  position: absolute; width: 27px; height: 27px; border-radius: 50%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
}
.pile-extra {
  position: absolute; right: 3px; bottom: 1px; z-index: 5;
  font-size: 9px; font-weight: 800; color: var(--gold-hi);
  text-shadow: 0 1px 2px #000;
}
/* The meter plate: brushed steel with white engraved type; progress is coin pips */
.coin-meter {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: #fff;
  background: linear-gradient(180deg, #7d9cc4, #42598a);
  border: 1px solid var(--steel-dk); border-radius: 6px; padding: 4px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 40, .65);
  white-space: nowrap;
}
.coin-meter strong { display: inline-flex; gap: 4px; align-items: center; }
.pip {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid rgba(8, 18, 48, .65);
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.pip.on {
  background: radial-gradient(circle at 35% 30%, #ffe98a, #f6c84e 55%, #c8890a);
  border-color: #7a5200;
  box-shadow: 0 0 6px rgba(63, 210, 255, .85), inset 0 1px 1px rgba(255, 255, 255, .7);
}
.slot-frame { position: relative; border-radius: 10px; }
.lines-tab {
  position: absolute; top: 50%; z-index: 2;
  width: 13px; padding: 7px 0;
  writing-mode: vertical-rl; text-align: center;
  font-size: 8px; font-weight: 800; letter-spacing: 1.6px; color: #dceaff;
  background: linear-gradient(90deg, #42598a, #2c4a7c);
  border: 1px solid var(--steel); border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}
.lines-tab.left { left: -15px; transform: translateY(-50%); }
.lines-tab.right { right: -15px; transform: translateY(-50%) rotate(180deg); }
.reels-wrap {
  position: relative; overflow: hidden; border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 30%, #16297a, #0a1440 78%);
  border: 2px solid rgba(6, 10, 30, .9);
  box-shadow: inset 0 0 0 2px rgba(125, 156, 196, .5), inset 0 8px 18px rgba(0, 0, 0, .65);
}
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
.reel-col { overflow: hidden; border-radius: 7px; background: linear-gradient(180deg, #0d1c52, #081233); height: calc(var(--cellh) * 3); }
.reel-strip { will-change: transform; }
/* No blur on the spinning strip: removing the class at the stop snapped
   the blur off in one frame — a second visible twitch at every landing. */
.cell {
  height: var(--cellh);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(125, 156, 196, .16);
}
.cell img { width: min(88px, 10.9dvh); height: min(88px, 10.9dvh); pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.cell.win { background: radial-gradient(circle at 50% 50%, rgba(63, 210, 255, .38), rgba(63, 210, 255, 0) 72%); box-shadow: inset 0 0 0 2px rgba(140, 230, 255, .95), inset 0 0 18px rgba(63, 210, 255, .4); border-radius: 6px; }
.cell.win img { filter: drop-shadow(0 0 8px rgba(63, 210, 255, .95)); }
.cell.near img, .cell.anticipate img { filter: drop-shadow(0 0 9px rgba(63, 210, 255, 1)); animation: coinPulse .5s ease-in-out infinite alternate; }
@keyframes coinPulse { from { transform: scale(1); } to { transform: scale(1.1); } }
/* The benchmark draws glowing cyan lines across each winning line. */
.win-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.win-lines line { stroke: #54e0ff; stroke-width: 5; stroke-linecap: round; opacity: .92; filter: drop-shadow(0 0 6px rgba(63, 210, 255, .95)); }
.frame-light {
  height: 5px; margin-top: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #54e0ff 18%, #c8f6ff 50%, #54e0ff 82%, transparent);
  box-shadow: 0 0 12px rgba(63, 210, 255, .8);
}
/* LAST WIN — benchmark dress: small grey-caps label OVER a big white
   value, centred, directly above the cluster. */
.win-line { display: flex; flex-direction: column; align-items: center; gap: 0; }
.win-line span { font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; color: #8d97ad; text-transform: uppercase; }
.win-line strong { font-size: 20px; line-height: 1.12; font-weight: 900; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 30, .7); }
.win-banner, .near-banner {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #12306e, #0a1c48);
  color: var(--yellow); font-weight: 900; letter-spacing: 1px;
  padding: 10px 18px; border-radius: 999px; border: 2px solid #54e0ff;
  box-shadow: 0 0 18px rgba(63, 210, 255, .5), 0 8px 22px rgba(0, 0, 0, .5); font-size: 16px; white-space: nowrap; z-index: 5;
}
.near-banner { color: #bfe9ff; border-color: #3f8fe0; font-size: 12px; max-width: 92%; white-space: normal; text-align: center; }

/* ---- controls: the benchmark's cluster — plain white-ring side
   buttons flanking the orange HOLD FOR TURBO disc ---- */
.controls { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 0; }
.round-btn {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: transparent; border: none; padding: 0;
  color: var(--ink); cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.round-btn .rb-svg { width: 48px; height: 48px; display: block; }
.round-btn .rb-ring { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 3.4; }
.round-btn .rb-glyph { fill: #ffffff; }
.round-btn .rb-glyph.dim { fill: rgba(255, 255, 255, .55); }
.round-btn .rb-arrow { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 3.2; stroke-linecap: round; }
.round-btn .rb-head { fill: rgba(255, 255, 255, .95); }
.round-btn .rb-a { font-family: inherit; font-size: 19px; font-weight: 900; fill: #93a5c4; }
.round-btn #autoCount { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f2760a; color: #fff; font-size: 10px; font-weight: 900; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.round-btn #autoCount.on { display: flex; }
.round-btn:active { transform: scale(.94); }
/* Turbo ON: the ring takes the benchmark-orange (our platform's turbo
   indicator — the benchmark shows no persistent state either way). */
.round-btn.active .rb-ring { stroke: #ff8a1d; }
.round-btn.active .rb-glyph { fill: #ffb14d; }
.round-btn.active .rb-glyph.dim { fill: rgba(255, 177, 77, .55); }
.spin {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  border: 3px solid #a33e00;
  background: radial-gradient(circle at 35% 28%, #ffc46b 0%, #ff8a1e 48%, #e85d00 100%);
  color: #fff; cursor: pointer; position: relative;
  text-shadow: 0 2px 3px rgba(120, 40, 0, .55);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 138, 30, .35), inset 0 2px 3px rgba(255, 255, 255, .65), inset 0 -5px 10px rgba(160, 50, 0, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.spin .spin-face { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.spin .spin-face svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.spin .arr { fill: none; stroke: #ffffff; stroke-width: 9.5; stroke-linecap: round; }
.spin .arr-head, .spin .arr-glyph-w { fill: #ffffff; }
.spin .spin-face-hold { display: flex; }
.spin .spin-hold-text { position: relative; font-size: 10.5px; font-weight: 900; letter-spacing: .8px; line-height: 1.25; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(120, 40, 0, .55); }
.spin.face-arrow .spin-face-hold, .spin.face-skip .spin-face-hold, .spin.face-stop .spin-face-hold { display: none; }
.spin.face-arrow .spin-face-arrow, .spin.face-skip .spin-face-skip, .spin.face-stop .spin-face-stop { display: flex; }
.spin.turbo-on { box-shadow: 0 0 0 3px rgba(255, 170, 60, .85), 0 0 22px rgba(255, 140, 30, .75), 0 6px 16px rgba(0, 0, 0, .55), inset 0 2px 3px rgba(255, 255, 255, .65), inset 0 -5px 10px rgba(160, 50, 0, .45); }
.spin:active { transform: scale(.96); }
.spin.spinning { filter: saturate(.8) brightness(.95); }
/* HOLD charge: the ring fills (sweep) while the press is held toward
   the 600ms turbo threshold. */
.spin .spin-face-hold::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: conic-gradient(rgba(255, 255, 255, .5) var(--charge, 0%), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  opacity: 0; pointer-events: none;
}
.spin.charging .spin-face-hold::before { opacity: 1; animation: chargeFill .6s linear forwards; }
@keyframes chargeFill { from { --charge: 0%; } to { --charge: 100%; } }
@property --charge { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
body.perf-lite .spin.charging .spin-face-hold::before { animation: none; opacity: 0; }

/* ---- bet row: the benchmark's bottom-bar language — a near-black
   translucent bar, plain white −/+ glyphs flanking a centred BET label
   over the value; REBET kept as a platform feature on the bar's right
   end in the same plain dress (no pill chrome). ---- */
.bet-row { display: flex; align-items: center; gap: 4px; background: rgba(2, 6, 24, .72); border-radius: 12px; padding: 2px 8px; }
.step-btn {
  width: 38px; height: 34px; border: none; background: transparent; font-size: 25px; font-weight: 900;
  color: #fff; cursor: pointer; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.step-btn:active { transform: scale(.9); }
.bet-box {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 1px 0 2px;
}
.bet-box label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; color: #8d97ad; }
.bet-box select {
  background: transparent; border: 0; color: #fff;
  font-size: 17px; font-weight: 800; line-height: 1.15; text-align: center; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.bet-box select option { color: #222; }
.bet-box select:disabled, .step-btn:disabled { opacity: .45; }
.alt {
  border: none; background: transparent; padding: 0 6px; height: 34px;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.alt.active { color: #ffb03a; }
.alt:disabled { opacity: .45; cursor: default; }
/* Bet chips retired in the strict-copy pass: the benchmark has no chip
   row; the select + steppers carry the ladder. Code path stays live. */
.bet-chips { display: none; }
.bet-chips.retired { display: none; }
.chip {
  flex: 1 1 0; min-width: 0; padding: 4px 1px; border-radius: 999px; font-size: 10px; letter-spacing: 0; font-weight: 700;
  background: rgba(10, 24, 64, .6); color: #dbe7ff; border: 1px solid rgba(125, 156, 196, .4); cursor: pointer; white-space: nowrap;
}
.chip.active { background: linear-gradient(180deg, #ffb03a, #e85d00); color: #fff; border-color: #ffd9a0; }

/* ---- bottom strip: benchmark arrangement (identity left, icon cluster right) ---- */
.bottom-strip { margin-top: auto; display: flex; align-items: center; gap: 6px; min-height: 27px; }
.player-chip { font-size: 11px; color: #cfe4ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34%; }
.tap-hint { font-size: 10px; color: #8fa8d8; flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  position: relative;
  width: 30px; height: 30px; border-radius: 50%; flex: none; padding: 0;
  background: rgba(10, 24, 64, .6); border: 1.5px solid rgba(220, 234, 255, .75);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.info-i { font-weight: 900; font-style: italic; font-size: 15px; font-family: Georgia, 'Times New Roman', serif; }
#soundBtn.muted { opacity: .6; }
#soundBtn.muted .sw { display: none; }
#soundBtn.muted::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px;
  background: #ff5a4d; transform: rotate(-38deg); border-radius: 2px;
}

/* ---- lightning overlay (bonus-trigger eruption, Coin Strike language) ---- */
.bolt-fx { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; }
.bolt-fx svg { width: 100%; height: 100%; display: block; }
.bolt-fx path { fill: none; stroke: #b8f4ff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 7px #35c4ff) drop-shadow(0 0 2px #ffffff); }
.bolt-fx.show { animation: boltFlash .62s ease-out forwards; }
@keyframes boltFlash { 0% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: .25; } 34% { opacity: .95; } 55% { opacity: .35; } 100% { opacity: 0; } }

/* ---- info overlay ---- */
.info-panel {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: rgba(2, 5, 20, .8); padding: 14px 10px;
}
.info-panel.open { display: block; }
.info-card {
  max-width: 430px; margin: 0 auto; max-height: 100%; overflow-y: auto;
  background: linear-gradient(180deg, #10245c, #081233);
  border: 2px solid #42598a; border-radius: 14px; padding: 14px 14px 18px; position: relative;
}
.info-card h2 { margin: 0 24px 4px 0; font-size: 19px; letter-spacing: 1.5px; color: var(--gold-hi); }
.info-close {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff; border: 1px solid rgba(125, 156, 196, .55); cursor: pointer; font-size: 14px;
}
.coin-rule { font-size: 12px; color: #dbe7ff; margin: 4px 0 10px; }
.panel { background: rgba(0, 0, 0, .28); border: 1px solid rgba(125, 156, 196, .35); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.panel h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: 1.2px; color: var(--gold-hi); }
.panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel th { text-align: left; color: var(--ink-dim); font-weight: 600; padding: 3px 0; }
.panel td { padding: 3px 0; border-top: 1px solid rgba(125, 156, 196, .18); }
.panel ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.55; }
.pay-symbol { display: inline-flex; align-items: center; gap: 8px; }
.pay-symbol img { width: 26px; height: 26px; }
.recent-wins, .recent-results { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.social-win, .result-chip { font-size: 11px; background: rgba(63, 140, 255, .16); border: 1px solid rgba(125, 156, 196, .35); padding: 3px 8px; border-radius: 999px; }
.social-win.mine { background: rgba(47, 191, 113, .25); }
.result-chip.win { background: rgba(47, 191, 113, .25); }
.result-chip.bonus { background: rgba(224, 72, 94, .3); }

/* ---- modals: benchmark splash composition — chunky yellow title,
   gold-framed blue panel with lightning-watermark cells, big centre
   coin, blue "click to continue" collect pill ---- */
.bonus-modal {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; background: rgba(2, 5, 20, .84); padding: 18px;
  pointer-events: none; /* celebrations never block the BET button */
}
.bonus-modal.open { display: flex; }
.bonus-card {
  pointer-events: auto;
  text-align: center; max-width: 330px; width: 100%;
  position: relative;
}
.bonus-card.splash { background: none; border: none; box-shadow: none; padding: 4px; overflow: visible; }
.bonus-card h2 {
  margin: 0 0 10px; font-size: 27px; font-weight: 900; letter-spacing: 1px; line-height: 1.08;
  color: var(--yellow); text-shadow: 0 3px 0 #b35c00, 0 7px 16px rgba(0, 0, 0, .65);
}
.splash-panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  border: 3px solid #d99a16; border-radius: 12px;
  background: linear-gradient(180deg, #12306e, #081c44);
  box-shadow: 0 0 0 2px rgba(255, 233, 138, .4), 0 0 26px rgba(63, 140, 255, .35), 0 14px 30px rgba(0, 0, 0, .6);
  padding: 16px 12px 14px;
}
.splash-cells { position: absolute; inset: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; opacity: .55; }
.splash-cells span {
  border-radius: 7px; position: relative;
  background: radial-gradient(circle at 50% 40%, rgba(38, 84, 190, .85), rgba(8, 20, 56, .92) 78%);
  box-shadow: inset 0 0 0 1px rgba(125, 156, 196, .35);
}
.splash-cells span::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M55 4 L26 56 L43 56 L36 96 L70 40 L52 40 Z' fill='%2335c4ff' fill-opacity='.20'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 44%;
}
.splash-coin {
  position: relative; width: 118px; height: 118px; margin-top: 2px;
  filter: drop-shadow(0 0 16px rgba(246, 200, 78, .45)) drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}
/* The tier name rides ON the coin in the benchmark's chunky yellow
   caps with green outline (the old red pill is retired). Absolutely
   positioned over the big splash coin, which sits directly above it
   inside the column-flex splash panel. */
.bonus-tier {
  position: relative; z-index: 2; display: block; margin-top: -66px; height: 0;
  overflow: visible; white-space: nowrap; text-align: center; pointer-events: none;
  color: #ffe14d; font-size: 21px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  text-shadow: -1.5px -1.5px 0 #1e8a3c, 1.5px -1.5px 0 #1e8a3c, -1.5px 1.5px 0 #1e8a3c, 1.5px 1.5px 0 #1e8a3c, 0 -2.5px 0 #1e8a3c, 0 2.5px 0 #1e8a3c, -2.5px 0 0 #1e8a3c, 2.5px 0 0 #1e8a3c, 0 4px 8px rgba(0, 0, 0, .55);
}
.bonus-tier:empty { display: none; }
.bonus-amount { margin-top: 76px !important; }
.bonus-amount {
  position: relative; font-size: 37px; font-weight: 900; color: var(--yellow);
  margin: 8px 0 2px; text-shadow: 0 3px 0 #b35c00, 0 0 20px rgba(246, 200, 78, .5);
}
.collect-btn {
  margin-top: 14px; padding: 11px 34px; border-radius: 999px;
  border: 2px solid #54e0ff; background: linear-gradient(180deg, #1663c7, #0d3f8a);
  color: #dff6ff; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 0 14px rgba(63, 210, 255, .45), 0 6px 14px rgba(0, 0, 0, .5);
}
.collect-btn:active { transform: scale(.97); }

.coin-fly { position: fixed; width: 40px; height: 40px; z-index: 30; pointer-events: none; }
.spark { position: fixed; width: 9px; height: 9px; z-index: 31; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #fff8d6 0 1.6px, rgba(246, 200, 78, .9) 2.6px, transparent 4.4px); }

/* ---- perf-lite ---- */
body.perf-lite .reel-strip.spinning { filter: none; }
body.perf-lite .cabinet { box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
body.perf-lite .cell.win img { filter: none; }
body.perf-lite .cell.near img, body.perf-lite .cell.anticipate img { animation: none; filter: none; }
body.perf-lite .coin-pile.armed { animation: none; box-shadow: inset 0 4px 9px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(63, 210, 255, .35), 0 0 12px rgba(63, 210, 255, .8); }
body.perf-lite .cell img { filter: none; }
body.perf-lite .cabinet::before { display: none; }
body.perf-lite .bolt-fx { display: none; }
body.perf-lite .win-lines line { filter: none; }