/* =========================================================================
   ARCADE GAMES (2026-10-06) -- Dice, Crash, Plinko, Roulette, Slots,
   Blackjack, Coinflip, Chain Dig, Crate Drop. Loaded after style.css on those
   pages only (served as /css/arcade.css). Built on the same .game-shell
   layout as Mines/Dig; colours come from the theme tokens (--gold is the
   seasonal accent, --wt2..--wt24 the seasonal tier colours), so every game
   follows the seasonal skins with no extra rules.
   ========================================================================= */

html.rr-gate-wait body { visibility: hidden; }

.arcade-title { display: flex; align-items: center; gap: 10px; }
.arcade-title .ico { width: 26px; height: 26px; }
.arcade-betrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.arcade-betrow small { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.arcade-label {
  display: block; margin: 10px 0 4px;
  color: var(--text-dim); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}

/* Manual / Auto switch at the top of the controls: Auto swaps the main
   button for the autobet panel (which drives that same button). */
.arcade-mode { margin: 0 0 14px; }
.game-controls:not(.mode-auto) #autobet-root { display: none; }
.game-controls.mode-auto .game-actions,
.game-controls.mode-auto .game-mult { display: none; }
.game-controls.mode-auto #autobet-root .autobet-panel { margin-top: 6px; }

/* segmented control */
.arcade-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 4px; margin: 6px 0 12px;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.arcade-seg button {
  appearance: none; border: 0; background: transparent; color: var(--text-dim);
  font: 700 12px var(--display-font); letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 6px; border-radius: 7px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.arcade-seg button:hover:not(:disabled):not(.active) { color: var(--text); background: rgba(255,255,255,.05); }
.arcade-seg button.active { background: var(--gold); color: #fff; box-shadow: 0 2px 12px var(--accent-glow); }
.arcade-seg button:disabled { opacity: .5; cursor: not-allowed; }
.arcade-seg button small { display: block; font: 600 10px var(--body-font); letter-spacing: 0; text-transform: none; opacity: .8; margin-top: 2px; }

/* stage */
.arcade-stage { position: relative; justify-content: flex-start; gap: 18px; min-height: 470px; overflow: hidden; }
.arcade-history {
  display: flex; gap: 6px; overflow: hidden; min-height: 28px; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.arcade-chip {
  flex: 0 0 auto; font: 700 12px var(--display-font); letter-spacing: .03em;
  padding: 5px 10px; border-radius: 999px; border: 1px solid transparent;
  background: rgba(255,255,255,.06); color: var(--text-dim);
}
.arcade-chip.win { background: rgba(53,208,127,.14); color: var(--good); border-color: rgba(53,208,127,.28); }
.arcade-chip.loss { background: rgba(255,92,92,.09); color: #ff8b8b; border-color: rgba(255,92,92,.18); }
.arcade-chip.gold { background: rgba(var(--tile-rgb, 245,197,24), .18); color: #ffd25e; border-color: rgba(255,210,94,.35); }
.arcade-chip.new { animation: arcadeChipIn .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes arcadeChipIn { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.arcade-chip-empty { color: var(--text-dim); font-size: 12px; }

/* stat boxes under a board (multiplier / target / chance ...) */
.arcade-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.arcade-stat {
  background: linear-gradient(180deg, var(--bg-panel-3), var(--bg-panel-2));
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.arcade-stat label { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.arcade-stat-input { display: flex; align-items: baseline; gap: 4px; }
.arcade-stat input {
  width: 100%; min-width: 0; padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none;
  font: 700 20px var(--display-font); color: var(--text);
}
.arcade-stat input:focus { outline: none; }
.arcade-stat:focus-within { border-color: var(--gold); box-shadow: var(--ring); }
.arcade-stat-input span { color: var(--text-dim); font: 700 14px var(--display-font); }

.arcade-up { color: var(--good); }
.arcade-down { color: var(--bad); }
.session-log-empty { color: var(--text-dim); font-size: 13px; margin: 0; }
.session-log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.session-log-head h3 { margin: 0; font-size: 15px; }
.session-log-head #session-totals { color: var(--text-dim); font-size: 12px; }

/* "How it works" panel under each game */
.arcade-rules { max-width: 1080px; margin: 16px auto 0; }
.arcade-rules h3 { margin: 0 0 12px; font-size: 15px; }
.arcade-rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.arcade-rule { background: var(--bg-panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.arcade-rule strong { display: block; color: var(--text); font-family: var(--display-font); letter-spacing: .04em; text-transform: uppercase; font-size: 12px; margin-bottom: 4px; }
@media (max-width: 900px) {
  .arcade-rules-grid { grid-template-columns: 1fr; }
  .arcade-stage { min-height: 0; }
}
@media (max-width: 560px) {
  .arcade-stats { grid-template-columns: 1fr 1fr; }
  .arcade-stats .arcade-stat:first-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- DICE -- */
.dice-readout { text-align: center; margin-top: 18px; }
.dice-roll {
  font: 800 92px/1 var(--display-font); letter-spacing: .02em; color: var(--text);
  font-variant-numeric: tabular-nums; transition: color .2s, text-shadow .2s;
}
.dice-roll.win { color: var(--good); text-shadow: 0 0 34px rgba(53,208,127,.35); }
.dice-roll.loss { color: var(--bad); text-shadow: 0 0 34px rgba(255,92,92,.25); }
.dice-roll.rolling { color: var(--text-dim); }
.dice-roll-sub { margin-top: 8px; color: var(--text-dim); font-size: 14px; }
.dice-roll-sub b { color: var(--text); }

.dice-track-wrap { padding: 44px 14px 0; }
.dice-track {
  --t: 50%;
  position: relative; height: 16px; border-radius: 999px;
  background: linear-gradient(90deg, var(--good) 0 var(--t), var(--bad) var(--t) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 6px var(--bg-panel-2), 0 0 0 7px var(--border);
}
.dice-track.over { background: linear-gradient(90deg, var(--bad) 0 var(--t), var(--good) var(--t) 100%); }
.dice-slider {
  position: absolute; inset: -12px 0; width: 100%; height: 40px; margin: 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; border: 0; box-shadow: none;
}
.dice-slider:focus { outline: none; }
.dice-slider::-webkit-slider-runnable-track { background: transparent; height: 40px; }
.dice-slider::-moz-range-track { background: transparent; height: 40px; }
.dice-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: 5px; border-radius: 8px; cursor: grab;
  background: linear-gradient(180deg, #fff, #d9dee8) padding-box; border: 3px solid var(--gold);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 0 4px var(--accent-wash);
}
.dice-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 8px; cursor: grab;
  background: linear-gradient(180deg, #fff, #d9dee8); border: 3px solid var(--gold);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.dice-slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
.dice-slider:disabled { cursor: not-allowed; }
.dice-marker {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  transition: left .6s cubic-bezier(.2,.9,.3,1.12);
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font: 800 15px var(--display-font); letter-spacing: .03em; color: #fff;
  background: var(--bg-panel-3); border: 1px solid var(--border); box-shadow: var(--elev-1);
}
.dice-marker::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--bg-panel-3);
}
.dice-marker.win { background: var(--good); border-color: var(--good); color: #062512; }
.dice-marker.win::after { border-top-color: var(--good); }
.dice-marker.loss { background: var(--bad); border-color: var(--bad); }
.dice-marker.loss::after { border-top-color: var(--bad); }
.dice-scale { display: flex; justify-content: space-between; margin-top: 16px; color: var(--text-dim); font: 700 12px var(--display-font); }
.dice-stage-foot { margin-top: auto; }
@media (max-width: 560px) { .dice-roll { font-size: 64px; } }

/* inputs with a unit, quick-pick rows */
.arcade-suffix { position: relative; }
.arcade-suffix input { width: 100%; padding-right: 30px; }
.arcade-suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-weight: 700; pointer-events: none; }
.arcade-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 2px; }
.arcade-quick .btn { padding: 7px 0; font-size: 12px; }

/* --------------------------------------------------------------- CRASH -- */
.crash-board {
  position: relative; flex: 1; min-height: 360px; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 15% 100%, var(--accent-wash), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
  border: 1px solid var(--border-soft);
}
.crash-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-readout { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 90%; }
.crash-mult {
  font: 800 78px/1 var(--display-font); letter-spacing: .02em; color: var(--text);
  font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0,0,0,.55);
}
.crash-board.cashed .crash-mult { color: var(--good); text-shadow: 0 0 34px rgba(53,208,127,.35); }
.crash-board.crashed .crash-mult { color: var(--bad); animation: crashShake .5s; }
.crash-sub { margin-top: 10px; color: var(--text-dim); font-size: 14px; }
.crash-sub b { color: var(--text); }
.crash-heli {
  position: absolute; left: 0; top: 0; width: 84px; height: 44px; pointer-events: none;
  transform-origin: 70% 60%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); transition: opacity .25s;
}
.crash-heli svg { display: block; }
.crash-heli .crash-stripe { fill: var(--gold); }
.crash-rotor { transform-box: fill-box; transform-origin: center; animation: crashRotor .12s linear infinite; }
.crash-tailrotor { transform-box: fill-box; transform-origin: center; animation: crashTail .2s linear infinite; }
.crash-board:not(.flying) .crash-rotor { animation-duration: .9s; }
.crash-board.crashed .crash-heli { opacity: 0 !important; }
@keyframes crashRotor { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } }
@keyframes crashTail { to { transform: rotate(360deg); } }
.crash-boom { position: absolute; width: 0; height: 0; pointer-events: none; }
.crash-boom i {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff6c4 0 30%, #ff9a2e 55%, rgba(255,80,30,0) 72%);
}
.crash-boom.go i { animation: crashBoom .75s ease-out forwards; }
.crash-boom.go::before {
  content: ''; position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,190,.95), rgba(255,130,40,.65) 40%, rgba(255,60,20,0) 70%);
  animation: crashFlash .65s ease-out forwards;
}
.crash-boom i:nth-child(1) { --dx: 70px; --dy: 0px; }
.crash-boom i:nth-child(2) { --dx: 50px; --dy: -50px; }
.crash-boom i:nth-child(3) { --dx: 0px; --dy: -70px; }
.crash-boom i:nth-child(4) { --dx: -50px; --dy: -50px; }
.crash-boom i:nth-child(5) { --dx: -70px; --dy: 0px; }
.crash-boom i:nth-child(6) { --dx: -50px; --dy: 50px; }
.crash-boom i:nth-child(7) { --dx: 0px; --dy: 70px; }
.crash-boom i:nth-child(8) { --dx: 50px; --dy: 50px; }
@keyframes crashBoom { 0% { opacity: 1; transform: translate(0, 0) scale(1.6); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
@keyframes crashFlash { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes crashShake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.crash-btn.cashout { background: linear-gradient(180deg, #3fe394, #1fb267); color: #052a16; box-shadow: 0 4px 18px rgba(53,208,127,.35); border-color: transparent; }
@media (max-width: 560px) { .crash-mult { font-size: 54px; } .crash-board { min-height: 300px; } }
.crash-board.went-down .crash-heli { opacity: 0 !important; }

/* -------------------------------------------------- PLINKO / CRATE DROP -- */
.plinko-wrap { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 4px 6px; }
.plinko-canvas { width: 100%; height: 400px; display: block; }
.plinko-buckets {
  width: calc(100% * 13 / 14.4); margin: 2px auto 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px;
}
.plinko-bucket {
  --bc: var(--gold);
  display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px;
  background: color-mix(in srgb, var(--bc) 22%, var(--bg-panel-2));
  border-bottom: 3px solid var(--bc);
  font: 800 11px var(--display-font); letter-spacing: .02em; color: #fff; overflow: hidden; white-space: nowrap;
  transition: transform .15s;
}
.plinko-bucket.low { color: var(--text-dim); background: var(--bg-panel-2); border-bottom-color: color-mix(in srgb, var(--bc) 45%, var(--bg-panel-3)); }
.plinko-bucket.hit { animation: plinkoHit .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes plinkoHit {
  0% { transform: translateY(0); filter: brightness(1); }
  35% { transform: translateY(6px); filter: brightness(1.8); box-shadow: 0 0 18px var(--bc); }
  100% { transform: translateY(0); filter: brightness(1); }
}
@media (max-width: 560px) { .plinko-canvas { height: 300px; } .plinko-bucket { height: 28px; font-size: 9px; } }
.crate-slot { flex-direction: column; gap: 1px; height: 42px; line-height: 1; }
.crate-slot b { font: 700 8.5px var(--body-font); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.crate-slot.r-common { --bc: var(--common); }
.crate-slot.r-uncommon { --bc: var(--uncommon); }
.crate-slot.r-rare { --bc: var(--rare); }
.crate-slot.r-epic { --bc: var(--epic); }
.crate-slot.r-legendary { --bc: var(--legendary); box-shadow: 0 0 14px color-mix(in srgb, var(--legendary) 40%, transparent); }
.crate-slot.r-common { color: var(--text-dim); }
@media (max-width: 560px) { .crate-slot b { display: none; } .crate-slot { height: 30px; } }

/* ------------------------------------------------------------ ROULETTE -- */
.arcade-stage { --rg: #2fbf71; --rr: #e5484d; --ro: #f2b53a; }
.game-controls { --rg: #2fbf71; --rr: #e5484d; --ro: #f2b53a; }
.roul-picks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0 4px; }
.roul-pick {
  appearance: none; cursor: pointer; border-radius: 10px; padding: 10px 6px 8px;
  border: 1px solid var(--border); background: var(--bg-panel-2); color: var(--text);
  font: 800 13px var(--display-font); letter-spacing: .05em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .12s, box-shadow .15s, border-color .15s;
}
.roul-pick small { font: 700 11px var(--display-font); opacity: .8; }
.roul-pick.green { background: linear-gradient(180deg, color-mix(in srgb, var(--rg) 32%, var(--bg-panel-2)), var(--bg-panel-2)); }
.roul-pick.red { background: linear-gradient(180deg, color-mix(in srgb, var(--rr) 32%, var(--bg-panel-2)), var(--bg-panel-2)); }
.roul-pick.gold { background: linear-gradient(180deg, color-mix(in srgb, var(--ro) 32%, var(--bg-panel-2)), var(--bg-panel-2)); }
.roul-pick:hover:not(:disabled) { transform: translateY(-1px); }
.roul-pick.active.green { border-color: var(--rg); box-shadow: 0 0 0 2px var(--rg), 0 6px 18px color-mix(in srgb, var(--rg) 35%, transparent); }
.roul-pick.active.red { border-color: var(--rr); box-shadow: 0 0 0 2px var(--rr), 0 6px 18px color-mix(in srgb, var(--rr) 35%, transparent); }
.roul-pick.active.gold { border-color: var(--ro); box-shadow: 0 0 0 2px var(--ro), 0 6px 18px color-mix(in srgb, var(--ro) 35%, transparent); }
.roul-pick:disabled, .roul-num:disabled { opacity: .55; cursor: not-allowed; }
.roul-numbers { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 6px 0 2px; }
.roul-num {
  appearance: none; cursor: pointer; border-radius: 6px; padding: 6px 0; border: 1px solid transparent;
  font: 700 12px var(--display-font); color: #fff; transition: transform .1s, box-shadow .15s;
}
.roul-num.green { background: color-mix(in srgb, var(--rg) 55%, var(--bg-panel-3)); }
.roul-num.red { background: color-mix(in srgb, var(--rr) 55%, var(--bg-panel-3)); }
.roul-num.gold { background: color-mix(in srgb, var(--ro) 70%, var(--bg-panel-3)); color: #2a1a00; }
.roul-num.active { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.35); transform: scale(1.06); }

.roul-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.roul-window {
  position: relative; height: 112px; overflow: hidden; border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 10px 30px rgba(0,0,0,.4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.roul-strip { position: absolute; left: 0; top: 12px; display: flex; gap: 6px; will-change: transform; }
.roul-tile {
  flex: 0 0 78px; height: 88px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font: 800 30px var(--display-font); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.roul-tile.green { background: linear-gradient(180deg, color-mix(in srgb, var(--rg) 85%, #fff), var(--rg) 55%, color-mix(in srgb, var(--rg) 70%, #000)); }
.roul-tile.red { background: linear-gradient(180deg, color-mix(in srgb, var(--rr) 85%, #fff), var(--rr) 55%, color-mix(in srgb, var(--rr) 70%, #000)); }
.roul-tile.gold { background: linear-gradient(180deg, #ffe59a, var(--ro) 55%, #b9770e); color: #3a2400; text-shadow: none; }
.roul-tile.hit { outline: 3px solid #fff; outline-offset: -3px; animation: roulHit 1s ease-out 2; }
@keyframes roulHit { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.45); } }
.roul-pointer { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; transform: translateX(-50%); pointer-events: none; }
.roul-pointer::before {
  content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), #fff 50%, var(--gold)); box-shadow: 0 0 14px var(--accent-glow);
}
.roul-pointer::after {
  content: ''; position: absolute; left: -11px; top: -2px; border: 11px solid transparent; border-top-color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.roul-result { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 64px; }
.roul-result-tile {
  width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font: 800 28px var(--display-font); color: var(--text-dim); background: var(--bg-panel-2); border: 1px solid var(--border);
}
.roul-result-tile.green { background: var(--rg); color: #fff; border-color: transparent; }
.roul-result-tile.red { background: var(--rr); color: #fff; border-color: transparent; }
.roul-result-tile.gold { background: linear-gradient(180deg, #ffe59a, var(--ro)); color: #3a2400; border-color: transparent; }
.roul-result.win .roul-result-tile, .roul-result.loss .roul-result-tile { animation: arcadeChipIn .45s cubic-bezier(.2,1.5,.4,1); }
.roul-result-text { font-size: 16px; color: var(--text-dim); }
.roul-result-text b { color: var(--good); }
.roul-result.loss .roul-result-text { color: var(--text-dim); }
.roul-counts { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-dim); font: 700 12px var(--display-font); min-height: 18px; }
.roul-counts span { margin-right: 6px; text-transform: uppercase; letter-spacing: .08em; }
.roul-counts i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.roul-counts i.green { background: var(--rg); } .roul-counts i.red { background: var(--rr); } .roul-counts i.gold { background: var(--ro); }
.arcade-chip.tile-green { background: color-mix(in srgb, #2fbf71 30%, transparent); color: #9ff0c4; border-color: color-mix(in srgb, #2fbf71 45%, transparent); }
.arcade-chip.tile-red { background: color-mix(in srgb, #e5484d 28%, transparent); color: #ffb3b5; border-color: color-mix(in srgb, #e5484d 45%, transparent); }
.arcade-chip.tile-gold { background: color-mix(in srgb, #f2b53a 32%, transparent); color: #ffe39a; border-color: color-mix(in srgb, #f2b53a 55%, transparent); }
@media (max-width: 560px) { .roul-tile { flex-basis: 62px; height: 76px; font-size: 24px; } .roul-window { height: 100px; } }

/* --------------------------------------------------------------- SLOTS -- */
.slots-cabinet {
  --cell: 104px;
  position: relative; margin: 6px auto 0; padding: 16px 18px 14px; border-radius: 18px; width: fit-content; max-width: 100%;
  background: linear-gradient(180deg, var(--bg-panel-3), var(--bg-panel-2));
  border: 2px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  box-shadow: 0 0 0 4px var(--bg-panel-2), 0 0 0 5px var(--border), 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.slots-cabinet[data-reels="5"] { --cell: 86px; }
.slots-marquee { text-align: center; margin: -4px 0 12px; }
.slots-marquee span {
  display: inline-block; padding: 4px 16px; border-radius: 999px; font: 800 13px var(--display-font); letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: linear-gradient(90deg, var(--orange), var(--gold), var(--orange)); box-shadow: 0 0 18px var(--accent-glow);
}
.slots-window { position: relative; border-radius: 12px; overflow: hidden; background: #07090e; padding: 0 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 14px 24px rgba(0,0,0,.8), inset 0 -14px 24px rgba(0,0,0,.8); }
.slots-reels { display: flex; gap: 6px; }
.slots-reel { position: relative; width: var(--cell); height: calc(var(--cell) * 3); overflow: hidden; }
.slots-reel + .slots-reel::before { content: ''; position: absolute; left: -4px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.04); }
.slots-strip { will-change: transform; }
.slots-reel.spinning .slots-strip { filter: blur(1.6px) saturate(.8); }
.slots-cell { width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; padding: 14%; box-sizing: border-box; }
.slots-cell svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.slots-cell.win { animation: slotsWin 1s ease-in-out 3; border-radius: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 35%, transparent), transparent 70%); }
@keyframes slotsWin { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.slots-line { position: absolute; left: 0; right: 0; top: 50%; height: var(--cell); transform: translateY(-50%); pointer-events: none;
  border-top: 2px solid color-mix(in srgb, var(--gold) 60%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 15%, transparent 85%, color-mix(in srgb, var(--gold) 10%, transparent)); }
.slots-line::before, .slots-line::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border: 9px solid transparent; }
.slots-line::before { left: 0; border-left-color: var(--gold); }
.slots-line::after { right: 0; border-right-color: var(--gold); }
.slots-win { margin-top: 12px; text-align: center; font: 800 20px var(--display-font); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); min-height: 28px; }
.slots-win small { font-size: 14px; opacity: .8; margin-left: 4px; }
.slots-win.up { color: var(--good); text-shadow: 0 0 20px rgba(53,208,127,.4); animation: arcadeChipIn .45s cubic-bezier(.2,1.5,.4,1); }
.slots-win.even { color: var(--text); }
.slots-cabinet.big-win { animation: slotsBig 1.2s ease-in-out 3; }
@keyframes slotsBig { 0%, 100% { box-shadow: 0 0 0 4px var(--bg-panel-2), 0 0 0 5px var(--border), 0 18px 40px rgba(0,0,0,.45); } 50% { box-shadow: 0 0 0 4px var(--bg-panel-2), 0 0 0 5px var(--gold), 0 0 60px var(--accent-glow); } }
.slots-paytable { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--bg-panel-2); border: 1px solid var(--border-soft); }
.slots-pay-head { display: grid; grid-template-columns: 1fr 52px 52px 52px; gap: 6px; font: 700 11px var(--display-font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.slots-pay-head span:not(:first-child) { text-align: right; }
.slots-pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.slots-pay { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slots-pay i { display: flex; gap: 2px; }
.slots-pay i svg, .slots-pay5 i svg { width: 22px; height: 22px; }
.slots-pay b, .slots-pay5 b { font: 800 14px var(--display-font); color: var(--text); }
.slots-pay-note { margin: 10px 0 0; color: var(--text-dim); font-size: 12px; }
.slots-pay-list { display: grid; gap: 6px; }
.slots-pay5 { display: grid; grid-template-columns: 1fr 52px 52px 52px; gap: 6px; align-items: center; }
.slots-pay5 b { text-align: right; }
.slots-pay5 i { display: flex; align-items: center; gap: 8px; font-style: normal; }
.slots-pay5 em { font-style: normal; color: var(--text-dim); font-size: 12px; }
@media (max-width: 560px) {
  .slots-cabinet { --cell: 76px; padding: 12px; } .slots-cabinet[data-reels="5"] { --cell: 54px; }
  .slots-pay-grid { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------- BLACKJACK -- */
.bj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -4px 0 12px; }
.bj-act { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px; }
.bj-act small { font: 700 10px var(--body-font); opacity: .6; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.bj-table {
  --felt: #0f3d32; --felt-2: #0a2a23;
  position: relative; flex: 1; min-height: 420px; border-radius: 22px; padding: 22px 18px 18px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  background: radial-gradient(ellipse 85% 75% at 50% 35%, var(--felt), var(--felt-2) 75%);
  border: 6px solid color-mix(in srgb, var(--gold) 35%, #3a2414);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), inset 0 20px 60px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.4);
}
.bj-table::before { /* felt grain */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 5px);
}
.bj-shoe {
  position: absolute; right: 16px; top: 14px; width: 54px; height: 40px; border-radius: 6px;
  background: linear-gradient(180deg, #2a1b10, #1b120a); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -12px 0 rgba(0,0,0,.25);
}
.bj-shoe::after { content: ''; position: absolute; left: 7px; right: 7px; top: 6px; height: 20px; border-radius: 3px; background: repeating-linear-gradient(90deg, #f3f3f3 0 2px, #cfcfcf 2px 3px); opacity: .7; }
.bj-zone { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bj-label { font: 700 12px var(--display-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px; }
.bj-total { font: 800 13px var(--display-font); letter-spacing: .04em; color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px 10px; }
.bj-cards { display: flex; justify-content: center; min-height: 112px; }
.bj-card { position: relative; width: 78px; height: 112px; margin-left: -26px; perspective: 800px; }
.bj-card:first-child { margin-left: 0; }
/* each card is a two-sided flipper: face up front, back rotated behind it */
.bj-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.bj-card.down .bj-flip { transform: rotateY(180deg); }
.bj-face, .bj-back {
  position: absolute; inset: 0; border-radius: 9px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.25);
}
.bj-face { background: linear-gradient(160deg, #ffffff, #eef0f4); color: #1a1d24; }
.bj-card.red .bj-face { color: #c8202d; }
.bj-corner { position: absolute; left: 7px; top: 6px; font: 800 19px/1 var(--display-font); display: flex; flex-direction: column; align-items: center; }
.bj-corner i { font-style: normal; font-size: 15px; margin-top: 1px; }
.bj-corner-b { left: auto; top: auto; right: 7px; bottom: 6px; transform: rotate(180deg); }
.bj-pip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 40px; line-height: 1; }
.bj-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 3px, transparent 3px 8px),
    linear-gradient(160deg, var(--gold), var(--rust));
  border: 4px solid #f4f4f4;
}

/* dealt: flies out of the shoe face down (--fx/--fy = shoe offset, set by
   blackjack.js) and turns face up as it lands */
.bj-card.deal { z-index: 3; animation: bjFly 460ms cubic-bezier(.25,.65,.3,1) var(--d, 0ms) both; }
.bj-card.deal:not(.down) .bj-flip { animation: bjTurn 460ms ease-in-out var(--d, 0ms) both; }
@keyframes bjFly {
  0% { transform: translate(var(--fx), var(--fy)) rotate(-12deg) scale(.8); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}
@keyframes bjTurn { 0%, 30% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } }
/* hole card turned over, lifting off the felt mid-turn */
.bj-card.reveal { z-index: 2; }
.bj-card.reveal .bj-flip { animation: bjReveal 520ms cubic-bezier(.3,.7,.3,1) both; }
@keyframes bjReveal {
  0% { transform: rotateY(180deg); }
  45% { transform: translateY(-14px) rotateY(90deg) scale(1.08); }
  100% { transform: rotateY(0deg); }
}
/* cards already on the table slide to make room (FLIP: --fx/--fy = old offset) */
.bj-card.move { animation: bjMove 320ms cubic-bezier(.25,.8,.25,1) var(--d, 0ms) both; }
@keyframes bjMove { from { transform: translate(var(--fx), var(--fy)); } to { transform: none; } }
/* swept off to the discard corner before the next deal */
.bj-card.collect { animation: bjCollect 300ms cubic-bezier(.5,0,.75,.3) var(--d, 0ms) both; }
@keyframes bjCollect { from { transform: none; opacity: 1; } to { transform: translate(var(--cx), var(--cy)) rotate(-24deg) scale(.7); opacity: 0; } }
.bj-shoe.kick { animation: bjKick .2s ease; }
@keyframes bjKick { 50% { transform: translateX(-4px) rotate(-2deg); } }

.bj-felt-rules { position: relative; z-index: 1; text-align: center; color: rgba(255,255,255,.4); font-size: 11px; letter-spacing: .06em; line-height: 1.7; text-transform: uppercase; }
.bj-felt-rules b { display: block; font: 800 15px var(--display-font); letter-spacing: .22em; color: rgba(255,226,140,.6); }
.bj-hands { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; min-height: 150px; align-items: flex-end; }
.bj-empty { color: rgba(255,255,255,.35); font: 700 14px var(--display-font); letter-spacing: .12em; text-transform: uppercase; align-self: center; }
.bj-hand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 8px; border-radius: 14px; border: 2px solid transparent; transition: border-color .25s, background .25s, box-shadow .25s; }
.bj-hand.active { border-color: color-mix(in srgb, var(--gold) 80%, #fff); background: rgba(0,0,0,.18); box-shadow: 0 0 22px var(--accent-glow); }
.bj-hand-foot { display: flex; align-items: center; gap: 8px; }
.bj-chip { font: 700 12px var(--display-font); color: #fff; background: rgba(0,0,0,.4); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; }
.bj-chip b { color: #ffd25e; }
.bj-chip .frag-icon { width: 13px; height: 13px; }
.bj-chip.pop, .bj-total.bump { animation: bjBump .34s cubic-bezier(.2,1.6,.4,1); }
@keyframes bjBump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.bj-total.bust { background: rgba(229,72,77,.9); border-color: transparent; }
.bj-total.bj21 { background: linear-gradient(180deg, #ffe08a, #e0a520); border-color: transparent; color: #2a1a00; }

/* results: stamped on once the dealer is done */
.bj-outcome {
  position: absolute; left: 50%; top: 40px; z-index: 4; opacity: 0;
  font: 800 16px var(--display-font); letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.4); white-space: nowrap; pointer-events: none;
  transform: translateX(-50%) rotate(-6deg);
}
.bj-outcome.show { animation: bjStamp .45s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes bjStamp { from { opacity: 0; transform: translateX(-50%) rotate(-14deg) scale(1.9); } to { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1); } }
.bj-outcome.win { background: var(--good); color: #052a16; }
.bj-outcome.lose { background: var(--bad); color: #fff; }
.bj-outcome.push { background: #d7dce6; color: #1a1d24; }
.bj-hand.won { border-color: rgba(53,208,127,.7); background: rgba(53,208,127,.08); animation: bjWin 1.2s ease-out; }
@keyframes bjWin { from { box-shadow: 0 0 0 0 rgba(53,208,127,.6); } to { box-shadow: 0 0 0 24px rgba(53,208,127,0); } }
.bj-hand.lost .bj-cards { filter: grayscale(.5) brightness(.72); transform: translateY(4px); transition: filter .45s, transform .45s; }
.bj-hand.pushed .bj-cards { filter: saturate(.7); transition: filter .45s; }
.bj-hand.busted .bj-cards, #bj-dealer.busted { animation: bjShake .45s ease; }
@keyframes bjShake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px) rotate(-1.5deg); } 45% { transform: translateX(6px) rotate(1deg); } 70% { transform: translateX(-3px); } }
.bj-hand.natural .bj-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,226,120,.8) 50%, transparent 68%) no-repeat;
  background-size: 260% 100%; animation: bjShine 1.3s ease-out .1s both;
}
@keyframes bjShine { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.bj-float {
  position: absolute; left: 50%; top: -18px; z-index: 5; pointer-events: none; white-space: nowrap;
  font: 800 19px var(--display-font); color: #7dffb0; text-shadow: 0 2px 8px rgba(0,0,0,.7);
  animation: bjFloat 1.7s ease-out forwards;
}
@keyframes bjFloat { 0% { opacity: 0; transform: translate(-50%, 12px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -52px); } }
@media (prefers-reduced-motion: reduce) {
  .bj-card.deal, .bj-card.deal .bj-flip, .bj-card.reveal .bj-flip, .bj-card.move, .bj-card.collect, .bj-outcome.show,
  .bj-hand.won, .bj-hand.busted .bj-cards, #bj-dealer.busted, .bj-shoe.kick { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}
@media (max-width: 560px) { .bj-card { width: 60px; height: 88px; margin-left: -22px; } .bj-pip { font-size: 30px; } .bj-corner { font-size: 15px; } .bj-table { min-height: 380px; } }

/* ------------------------------------------------------- RAID DUEL (coinflip) -- */
.flip-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.flip-vs { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.flip-player { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; font: 700 13px var(--display-font); }
.flip-player small { font: 700 10px var(--display-font); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.flip-player.heads small { background: rgba(255,120,60,.18); color: #ffad7a; }
.flip-player.tails small { background: rgba(120,170,255,.18); color: #a8c7ff; }
.flip-vs-x { font: 800 14px var(--display-font); color: var(--text-dim); letter-spacing: .12em; text-transform: uppercase; }
.flip-ava {
  width: 36px; height: 36px; border-radius: 9px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-panel-3); color: var(--text); font: 800 15px var(--display-font); border: 1px solid var(--border); flex: 0 0 auto;
}
.flip-ava.house { background: var(--gold); color: #fff; border-color: transparent; }
.flip-toss { position: relative; width: 200px; height: 230px; display: flex; align-items: center; justify-content: center; perspective: 900px; }
.flip-coin { position: relative; width: 170px; height: 170px; transform-style: preserve-3d; }
.flip-face {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.18), inset 0 0 0 12px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.45);
}
.flip-face svg { width: 112px; height: 112px; margin-top: -6px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.flip-face span { font: 800 13px var(--display-font); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.flip-heads { background: radial-gradient(circle at 35% 30%, #ff9b5c, #c9481c 60%, #7a2a10); }
.flip-tails { background: radial-gradient(circle at 35% 30%, #a9c8ff, #3d6fc4 60%, #1d3a6e); transform: rotateY(180deg); }
.flip-shadow { position: absolute; bottom: 4px; left: 50%; width: 120px; height: 16px; margin-left: -60px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); }
.flip-toss.tossing .flip-coin { animation: flipToss 2.1s cubic-bezier(.3,.7,.4,1); }
.flip-toss.tossing .flip-shadow { animation: flipShadow 2.1s cubic-bezier(.3,.7,.4,1); }
@keyframes flipToss { 0% { translate: 0 0; scale: 1; } 35% { translate: 0 -70px; scale: 1.18; } 75% { translate: 0 0; scale: 1; } 85% { translate: 0 -12px; } 100% { translate: 0 0; scale: 1; } }
@keyframes flipShadow { 0%, 100% { transform: scale(1); opacity: 1; } 35% { transform: scale(.55); opacity: .4; } 75% { transform: scale(1); opacity: 1; } }
.flip-result { font-size: 16px; color: var(--text-dim); text-align: center; min-height: 24px; }
.flip-result b { color: var(--text); }
.flip-result.win { color: var(--good); }
.flip-result.win b { color: var(--good); }
.flip-waiting { width: 100%; max-width: 460px; display: grid; gap: 6px; }
.flip-wait-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--bg-panel-2); border: 1px dashed var(--border); font-size: 13px; color: var(--text-dim); }
.flip-wait-row .btn { margin-left: auto; padding: 6px 12px; font-size: 12px; }
.flip-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 var(--accent-glow); animation: flipPulse 1.4s ease-out infinite; }
@keyframes flipPulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 10px transparent; } }
.flip-lobby { max-width: 1080px; margin: 16px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.flip-lobby > .panel { margin: 0; }
.flip-list { display: grid; gap: 6px; max-height: 330px; overflow-y: auto; }
.flip-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-panel-2); border: 1px solid var(--border-soft); font-size: 13px; }
.flip-item.recent { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto; color: var(--text-dim); }
.flip-item .btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.flip-who { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.flip-who .flip-ava { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.flip-side { font: 700 10px var(--display-font); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.flip-side.heads { background: rgba(255,120,60,.18); color: #ffad7a; }
.flip-side.tails { background: rgba(120,170,255,.18); color: #a8c7ff; }
.flip-bet { font: 700 13px var(--display-font); white-space: nowrap; }
.flip-winner { color: var(--good); font-weight: 700; }
@media (max-width: 900px) { .flip-lobby { grid-template-columns: 1fr; } }

/* ---------- RTP / MAX WIN CHIPS (under every title; same look as Jackpot's
   and Rockets' rule chips) ---------- */
.arcade-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.arcade-facts span {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--text-dim);
  background: var(--bg-panel-2); border: 1px solid var(--border);
}
.arcade-facts b { color: var(--text); }
.arcade-facts .frag-icon { height: 1.15em; margin: 0 1px 0 2px; }
.game-controls:not(.mode-auto) .arcade-auto-only { display: none; }

/* ---------- CHAIN DIG ---------- */
.cd-scene {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 250px; padding-top: 52px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background:
    radial-gradient(1.2px 1.2px at 14% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 31% 9%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 52% 22%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 68% 11%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 43% 34%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.2px 1.2px at 7% 38%, rgba(255,255,255,.35), transparent),
    radial-gradient(130px 130px at 86% 16%, rgba(255,236,190,.17), transparent 70%),
    linear-gradient(180deg, #0c161e 0%, #11212a 50%, #162a24 100%);
}
.cd-scene::before, .cd-scene::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 40px; pointer-events: none;
  background-repeat: repeat-x; background-position: left bottom;
}
.cd-scene::before {
  height: 90px; background-size: 180px 90px; opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 90'%3E%3Cpath fill='%23173431' d='M0 90L0 64 9 40 18 64 26 30 35 64 44 44 53 64 62 26 71 64 80 46 89 64 98 34 107 64 116 42 125 64 134 28 143 64 152 46 161 64 170 36 180 64 180 90Z'/%3E%3C/svg%3E");
}
.cd-scene::after {
  height: 60px; background-size: 130px 60px; background-position: 40px bottom;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 60'%3E%3Cpath fill='%23112620' d='M0 60L0 44 10 18 20 44 28 28 36 44 47 10 58 44 66 30 74 44 85 16 96 44 104 26 112 44 121 20 130 44 130 60Z'/%3E%3C/svg%3E");
}
.cd-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 0;
  background: linear-gradient(180deg, #4b6b32 0, #3b5528 3px, #33261a 3px, #241a11 100%);
}
.cd-caption {
  position: absolute; left: 14px; right: 14px; top: 14px; z-index: 2; text-align: center;
  font: 700 13px var(--display-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.cd-caption.win { color: var(--good); }
.cd-caption.loss { color: #ff8b8b; }

.cd-forest-wrap { position: relative; z-index: 1; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; scrollbar-width: none; }
.cd-forest-wrap::-webkit-scrollbar { display: none; }
.cd-forest {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(44px, 1fr)); gap: 4px;
  min-width: 640px; padding: 0 14px 0 60px;
}
.cd-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cd-plot { position: relative; width: 100%; height: 150px; }
.cd-tree, .cd-stump { position: absolute; left: 50%; bottom: 0; pointer-events: none; }
.cd-tree svg, .cd-stump svg { display: block; width: 100%; }
.cd-tree {
  width: 60px; margin-left: -30px; transform-origin: 50% calc(100% - 12px);
  transform: rotate(0deg) scale(var(--s, 1));
  transition: transform .62s cubic-bezier(.55,.06,.68,.19), opacity .22s ease .5s, filter .2s;
}
.cd-stump { width: 44px; margin-left: -22px; bottom: -5px; opacity: 0; transition: opacity .15s ease .3s; }
.cd-col.cut .cd-tree { transform: rotate(84deg) scale(var(--s, 1)); opacity: 0; }
.cd-col.cut .cd-stump { opacity: 1; }
.cd-col.regrow .cd-tree { animation: cdGrow .5s cubic-bezier(.2,1.35,.4,1) both; animation-delay: calc(var(--i) * 32ms); }
@keyframes cdGrow { from { transform: rotate(0deg) scale(0); opacity: 0; } to { transform: rotate(0deg) scale(var(--s, 1)); opacity: 1; } }
.cd-col.instant .cd-tree, .cd-col.instant .cd-stump { transition: none !important; animation: none !important; }
.cd-col.next .cd-tree { filter: drop-shadow(0 0 7px rgba(255,210,94,.4)); }
.cd-col.bust .cd-tree { animation: cdShake .45s ease; filter: drop-shadow(0 0 10px rgba(255,92,92,.8)); }
@keyframes cdShake {
  0%, 100% { transform: rotate(0deg) scale(var(--s, 1)); }
  20% { transform: rotate(-4deg) scale(var(--s, 1)); }
  45% { transform: rotate(3deg) scale(var(--s, 1)); }
  70% { transform: rotate(-1.5deg) scale(var(--s, 1)); }
}
.cd-col.dim .cd-tree, .cd-col.dim .cd-tag { opacity: .38; }

.cd-tag {
  position: relative; z-index: 1; margin-top: 8px; width: 100%; max-width: 50px; padding: 3px 2px; border-radius: 6px; text-align: center;
  font: 700 11px var(--display-font); letter-spacing: .02em; color: var(--text-dim); white-space: nowrap;
  background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.09);
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.cd-col.capped:not(.cut) .cd-tag { color: rgba(255,210,94,.5); }
.cd-col.next .cd-tag { color: #ffd25e; background: rgba(245,197,24,.14); border-color: rgba(255,210,94,.6); box-shadow: 0 0 12px rgba(245,197,24,.3); }
.cd-col.cut .cd-tag { color: var(--good); background: rgba(53,208,127,.13); border-color: rgba(53,208,127,.38); }
.cd-col.bust .cd-tag { color: #ff8b8b; background: rgba(255,92,92,.15); border-color: rgba(255,92,92,.5); text-decoration: line-through; }
.cd-col.would .cd-tag { color: #ff8b8b; border-style: dashed; border-color: rgba(255,92,92,.55); }
.cd-col.clear .cd-tag { border-style: dashed; border-color: rgba(53,208,127,.5); }

.cd-mark {
  position: absolute; left: 50%; top: -2px; z-index: 2; transform: translateX(-50%); display: none;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
  font: 700 9.5px var(--display-font); letter-spacing: .06em; text-transform: uppercase;
}
.cd-col.bust .cd-mark { display: block; background: var(--bad); color: #fff; }
.cd-col.would .cd-mark { display: block; background: rgba(40,10,10,.75); color: #ff8b8b; border: 1px dashed rgba(255,92,92,.6); }

.cd-saw {
  position: absolute; left: 0; bottom: 25px; z-index: 3; width: 74px; pointer-events: none;
  transition: transform .4s cubic-bezier(.3,.7,.3,1);
}
.cd-saw svg { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)); transition: filter .3s, transform .3s; }
.cd-saw.running svg { animation: cdIdle .11s linear infinite alternate; }
.cd-saw.cutting svg { animation: cdBuzz .05s linear infinite alternate; }
.cd-saw.running .cd-chain, .cd-saw.cutting .cd-chain { animation: cdChain .3s linear infinite; }
.cd-saw.cutting .cd-chain { animation-duration: .12s; }
.cd-saw.dead svg { filter: grayscale(.85) brightness(.7) drop-shadow(0 3px 4px rgba(0,0,0,.55)); transform: rotate(9deg) translateY(4px); }
@keyframes cdIdle { from { transform: translateY(0); } to { transform: translateY(-.7px); } }
@keyframes cdBuzz { from { transform: translate(-1px, .6px) rotate(-1.2deg); } to { transform: translate(1.6px, -.6px) rotate(1deg); } }
@keyframes cdChain { to { stroke-dashoffset: -8; } }
.cd-smoke { position: absolute; left: 10px; top: 2px; width: 12px; height: 12px; }
.cd-smoke i { position: absolute; left: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: rgba(170,178,188,.6); opacity: 0; }
.cd-saw.dead .cd-smoke i { animation: cdSmoke 1.5s ease-out 3; }
.cd-saw.dead .cd-smoke i:nth-child(2) { left: 7px; animation-delay: .45s; }
.cd-saw.dead .cd-smoke i:nth-child(3) { left: -4px; animation-delay: .9s; }
@keyframes cdSmoke { 0% { transform: translate(0, 0) scale(.5); opacity: .75; } 100% { transform: translate(-7px, -36px) scale(2.3); opacity: 0; } }
.cd-dust {
  position: absolute; left: 50%; bottom: 15px; z-index: 3; width: 4px; height: 3px; border-radius: 1px;
  background: #e4ba7c; opacity: 0; animation: cdDust .75s ease-out forwards;
}
@keyframes cdDust { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(220deg); opacity: 0; } }

.cd-stats .cd-val { font: 700 20px var(--display-font); color: var(--text); line-height: 1.15; }
.cd-stats .cd-sub { margin-top: 2px; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-actions [hidden] { display: none !important; }
.cd-actions .cd-cash b { margin-left: 5px; font-family: var(--display-font); }
.cd-auto-input input { padding-right: 56px; }

.cd-cap-box { max-width: 440px; text-align: center; }
.cd-cap-box h3 { margin: 0 0 8px; }
.cd-cap-box p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.cd-cap-box p b { color: var(--text); }
.cd-cap-ack { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0; font-size: 13px; color: var(--text); cursor: pointer; }
.cd-cap-actions { display: flex; justify-content: center; gap: 10px; }

@media (max-width: 560px) {
  .cd-forest { grid-template-columns: repeat(12, 46px); min-width: 0; }
  .cd-stats .cd-val { font-size: 17px; }
  .cd-caption { font-size: 12px; }
}