/* Pick Verionex game rooms. Animations use transform and opacity only. */

.game-wrap { padding: 14px 0 36px; }
.crumbs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.84rem; color: var(--text-dim); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--text-soft); }

.game-shell { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-areas: "stage controls" "stage info"; grid-template-rows: auto 1fr; gap: 16px 22px; align-items: start; }
.stage { grid-area: stage; min-width: 0; }
.controls { grid-area: controls; position: sticky; top: 84px; z-index: 20; display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(20, 20, 30, 0.92), rgba(10, 10, 16, 0.94)); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); }
.info { grid-area: info; display: grid; gap: 10px; font-size: 0.94rem; }

.stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.stage-head img { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, 0.7); box-shadow: 0 0 22px rgba(167, 139, 250, 0.35); }
.stage-head .kicker { margin: 0 0 2px; font-size: 0.7rem; }
.stage-head .kicker::before { display: none; }
.stage-head h1 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); }
.stage-tags { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stage-tags li { padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; border: 1px solid var(--line); color: var(--text-soft); background: rgba(226, 232, 240, 0.03); }

/* ---------- cabinet ---------- */
.cabinet { position: relative; border-radius: 30px; padding: clamp(10px, 1.4vw, 18px); overflow: hidden; isolation: isolate; background: var(--ink-2); border: 1px solid rgba(167, 139, 250, 0.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(167, 139, 250, 0.08), var(--shadow-2), 0 0 90px rgba(139, 92, 246, 0.14); }
.cabinet::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; background: var(--spectrum); z-index: 2; border-radius: 2px; }
.cab-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.42; transform: scale(1.04); }
.cabinet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgba(8, 8, 12, 0.35), rgba(8, 8, 12, 0.85) 75%); }
.cab-frame { position: relative; display: grid; gap: 10px; }
.marquee { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; text-align: center; }
.marquee .chrome-text { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.9rem); letter-spacing: 0.08em; }
.marquee small { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.reel-window { position: relative; margin-inline: auto; width: 100%; border-radius: 20px; padding: clamp(6px, 0.8vw, 10px); background: linear-gradient(180deg, #1c1c24, #09090c 40%, #1a1a22); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.4), inset 0 0 30px rgba(0, 0, 0, 0.8), 0 10px 40px rgba(0, 0, 0, 0.5); }
.reels-canvas { width: 100%; aspect-ratio: 5 / 3; border-radius: 14px; background: #060608; touch-action: manipulation; }
.game-reels .reel-window { max-width: calc((100svh - 330px) * 5 / 3 + 20px); min-width: min(100%, 520px); }
.gem-canvas { width: 100%; aspect-ratio: 6 / 5; border-radius: 14px; background: #08070d; touch-action: manipulation; }
.game-cascade .reel-window { max-width: calc((100svh - 380px) * 6 / 5 + 20px); min-width: min(100%, 420px); }
.cab-foot { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }
.cab-foot strong { font-variant-numeric: tabular-nums; color: var(--chrome); font-size: 1rem; margin-left: 6px; letter-spacing: 0; }
.cab-foot .count { display: inline-block; min-width: 3ch; text-align: left; }

.win-banner { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; justify-items: center; gap: 2px; padding: 16px 34px; border-radius: 22px; text-align: center; background: radial-gradient(ellipse, rgba(8, 8, 12, 0.92), rgba(8, 8, 12, 0.75)); border: 1px solid rgba(167, 139, 250, 0.6); box-shadow: 0 0 60px rgba(139, 92, 246, 0.45); transform: translate(-50%, -50%) scale(0.7); opacity: 0; pointer-events: none; transition: opacity 260ms ease, transform 420ms var(--ease-spring); }
.win-banner.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.win-banner b { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.05; }
.win-banner span { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chrome); }

.result { margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(226, 232, 240, 0.04); border: 1px solid var(--line); font-weight: 500; color: var(--text); min-height: 3.1em; transition: border-color var(--t-med) ease, background var(--t-med) ease; }
.result.is-win { border-color: rgba(167, 139, 250, 0.6); background: rgba(167, 139, 250, 0.1); color: var(--chrome); }
.result.is-lose { border-color: rgba(52, 211, 153, 0.35); }

/* ---------- controls ---------- */
.ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ctrl-row.main { flex-wrap: nowrap; }
.ctrl-row.main .spin-btn { flex: 1 1 auto; }
.amount { display: grid; gap: 4px; flex: 0 0 auto; }
.amount-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.stepper { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(5, 7, 15, 0.5); }
.stepper .step { width: 44px; height: 44px; border: 0; background: none; color: var(--accent); font-size: 1.3rem; cursor: pointer; border-radius: 50%; touch-action: manipulation; transition: background var(--t-fast) ease, transform var(--t-fast) ease; }
.stepper .step:hover:not([disabled]) { background: rgba(167, 139, 250, 0.12); }
.stepper .step:active:not([disabled]) { transform: scale(0.9); }
.stepper .step[disabled] { opacity: 0.35; cursor: not-allowed; }
.stepper output { min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem; color: var(--chrome); }
.spin-btn { --h: 60px; padding-inline: 16px; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; min-width: 140px; }
.spin-btn.is-busy { opacity: 0.75; }
.feature-note { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 0.86rem; color: var(--text-soft); background: rgba(226, 232, 240, 0.03); border: 1px dashed var(--line); text-align: center; transition: background var(--t-med) ease, color var(--t-med) ease; }
.feature-note.is-live { color: #0b0614; background: var(--accent-grad); border-color: transparent; font-weight: 600; }
.last-line { margin: 0; font-size: 0.88rem; color: var(--text-dim); }
.last-line span { color: var(--chrome); }
.util { gap: 8px; }
.util .bal { font-size: 0.84rem; color: var(--text-dim); margin-right: auto; }
.util .bal strong { font-variant-numeric: tabular-nums; }
.stake-line { margin: 0; font-size: 0.86rem; color: var(--text-dim); flex: 0 0 auto; }
.stake-line strong { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ctrl-row.tools .btn, .ctrl-row.actions .btn { flex: 1 1 0; padding: 0 10px; }
.ctrl-row.actions .btn { --h: 50px; }

/* ---------- info ---------- */
.msg { margin: 0; font-size: 0.86rem; color: var(--text-dim); }
.info details { border-radius: 14px; border: 1px solid var(--line); background: rgba(226, 232, 240, 0.03); }
.info summary { cursor: pointer; padding: 11px 14px; font-weight: 600; color: var(--chrome); }
.info details > ul, .info details > ol { margin: 0; padding: 0 16px 14px 32px; color: var(--text-soft); }
.info details li { margin-bottom: 5px; }
.paytable { list-style: none; padding: 0 14px 14px !important; display: grid; gap: 8px; }
.paytable li { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 0.86rem; }
.paytable img { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto; }
.win-list { font-size: 0.88rem; }
.fine { font-size: 0.78rem; color: var(--text-dim); margin: 0; }

/* ---------- cascade trail ---------- */
.trail { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.trail li { min-width: 48px; padding: 4px 10px; border-radius: 999px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--text-dim); border: 1px solid var(--line); background: rgba(5, 7, 15, 0.5); transition: color var(--t-med) ease, background var(--t-med) ease, transform 360ms var(--ease-spring), box-shadow var(--t-med) ease; }
.trail li.is-on { color: #0b0614; background: var(--alt-grad); border-color: transparent; transform: scale(1.1); box-shadow: 0 0 22px rgba(52, 211, 153, 0.55); }
.trail li.is-past { color: var(--alt); border-color: rgba(52, 211, 153, 0.5); }

/* ---------- roulette ---------- */
.wheel-frame { grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.5fr); align-items: center; gap: clamp(12px, 2vw, 26px); }
.wheel-stage { position: relative; display: grid; place-items: center; perspective: 1000px; }
.wheel-tilt { width: min(100%, calc(100svh - 360px), 440px); transform: rotateX(34deg); transform-origin: 50% 55%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.6)); }
.wheel-canvas { width: 100%; aspect-ratio: 1; }
.wheel-readout { position: absolute; right: 4%; top: 2%; }
.pocket-badge { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--chrome); background: #18181f; border: 2px solid var(--accent); box-shadow: 0 0 24px rgba(167, 139, 250, 0.4); transition: transform 420ms var(--ease-spring); }
.pocket-badge.red { background: #a3162f; }
.pocket-badge.black { background: #141418; }
.pocket-badge.green { background: #0d7a53; }
.pocket-badge.is-pop { transform: scale(1.18); }
.board-zone { display: grid; gap: 10px; min-width: 0; }
.board { --cell: minmax(0, 1fr); display: grid; grid-template-columns: 1.1fr repeat(12, var(--cell)) 1.2fr; grid-template-rows: repeat(3, minmax(40px, 1fr)) minmax(38px, auto) minmax(38px, auto); gap: 3px; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, #0d2a22, #082018); border: 1px solid rgba(167, 139, 250, 0.45); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5); }
.cell { position: relative; display: grid; place-items: center; min-height: 40px; padding: 2px; border-radius: 6px; border: 1px solid rgba(226, 232, 240, 0.18); background: rgba(226, 232, 240, 0.03); color: var(--chrome); font-weight: 600; font-size: clamp(0.72rem, 1vw, 0.92rem); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease; }
.cell:hover { border-color: var(--accent); background: rgba(167, 139, 250, 0.12); }
.cell:active { transform: scale(0.96); }
.cell.red { background: linear-gradient(180deg, #b51f3a, #8d1229); }
.cell.black { background: linear-gradient(180deg, #26262e, #121216); }
.cell.green { background: linear-gradient(180deg, #13916a, #0a6849); }
.cell.num { grid-column: var(--hc); grid-row: var(--hr); }
.cell.zero { grid-column: 1; grid-row: 1 / span 3; }
.cell.col { grid-column: 14; grid-row: var(--hr); font-size: 0.74rem; }
.cell.dozen { grid-row: 4; grid-column: var(--hc) / span 4; }
.cell.even { grid-row: 5; grid-column: var(--hc) / span 2; font-size: 0.8rem; }
.cell.is-win { box-shadow: 0 0 0 2px var(--chrome), 0 0 20px rgba(221, 214, 254, 0.8); z-index: 1; animation: cell-win 900ms var(--ease-out) 2; }
@keyframes cell-win { 50% { transform: scale(1.08); } }
.marker { position: absolute; right: -4px; top: -6px; z-index: 2; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; color: #0b0614; background: var(--accent-grad); border: 2px dashed rgba(12, 8, 22, 0.45); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); animation: marker-in 260ms var(--ease-spring); pointer-events: none; }
@keyframes marker-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.recent-row { display: flex; align-items: center; gap: 10px; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); min-width: 0; }
.recent { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; overflow: hidden; }
.recent li { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; font-size: 0.8rem; font-weight: 700; letter-spacing: 0; color: #fff; animation: marker-in 300ms var(--ease-spring); }
.recent li.red { background: #a3162f; }
.recent li.black { background: #26262e; border: 1px solid var(--line); }
.recent li.green { background: #0d7a53; }
.chip-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; font-weight: 700; font-size: 0.86rem; color: #0b0614; background: radial-gradient(circle, var(--c1) 0 52%, transparent 53%), repeating-conic-gradient(var(--c1) 0 15deg, #f4f5f8 15deg 30deg); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.45); transition: transform 220ms var(--ease-spring), box-shadow var(--t-med) ease; touch-action: manipulation; }
.chip-10 { --c1: #e4e4e7; }
.chip-25 { --c1: #34d399; }
.chip-100 { --c1: #a78bfa; }
.chip-500 { --c1: #6ee7b7; }
.chip[aria-checked="true"] { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 3px var(--chrome), 0 0 24px rgba(167, 139, 250, 0.6), 0 8px 16px rgba(0, 0, 0, 0.5); }

/* ---------- blackjack ---------- */
.felt { position: relative; min-height: clamp(420px, calc(100svh - 300px), 620px); padding: 16px 12px 18px; border-radius: 22px; background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(40, 26, 72, 0.85), rgba(10, 13, 30, 0.95) 75%); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.4), inset 0 0 0 8px rgba(5, 7, 15, 0.4), inset 0 0 0 9px rgba(167, 139, 250, 0.25), inset 0 0 60px rgba(0, 0, 0, 0.6); grid-template-rows: auto auto 1fr; align-content: start; }
.felt-arc { margin: 4px auto; padding: 4px 18px; border-top: 1px solid rgba(167, 139, 250, 0.35); border-bottom: 1px solid rgba(167, 139, 250, 0.35); border-radius: 50%; font-family: var(--display); font-size: clamp(0.66rem, 1.2vw, 0.86rem); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(196, 181, 253, 0.75); text-align: center; }
.shoe { position: absolute; right: 16px; top: 14px; width: 54px; z-index: 1; }
.shoe img { width: 54px; height: 72px; border-radius: 6px; box-shadow: 3px 3px 0 #26203a, 6px 6px 0 #18142a, 0 10px 20px rgba(0, 0, 0, 0.5); }
.shoe span { display: block; margin-top: 10px; text-align: center; font-size: 0.7rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hand-zone { display: grid; justify-items: center; gap: 6px; }
.zone-label { margin: 0; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.zone-label span { color: var(--chrome); font-variant-numeric: tabular-nums; }
.cards { --cw: clamp(58px, 7.4vw, 96px); display: flex; min-height: calc(var(--cw) * 1.4); padding: 0 calc(var(--cw) * 0.2); perspective: 900px; }
.card { position: relative; width: var(--cw); aspect-ratio: 5 / 7; flex: 0 0 auto; transform-style: preserve-3d; transition: transform 560ms var(--ease-out); animation: deal-in 520ms var(--ease-out) both; }
.card + .card { margin-left: calc(var(--cw) * -0.38); }
.card.is-down { transform: rotateY(180deg); }
@keyframes deal-in { from { transform: translate(var(--fx, 300px), var(--fy, -200px)) rotate(-18deg) rotateY(180deg); opacity: 0; } 30% { opacity: 1; } }
.card.is-down { animation-name: deal-in-down; }
@keyframes deal-in-down { from { transform: translate(var(--fx, 300px), var(--fy, -200px)) rotate(-18deg) rotateY(180deg); opacity: 0; } 30% { opacity: 1; } to { transform: rotateY(180deg); } }
.card.is-dealt { animation: none; }
.card .face, .card .back { position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.09); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.card .face { background: linear-gradient(160deg, #fafafa, #e4e4e7); border: 1px solid #a1a1aa; color: #191c2e; }
.card .face.red { color: #b0213b; }
.card .back { transform: rotateY(180deg); background: #101015; overflow: hidden; border: 1px solid rgba(167, 139, 250, 0.6); }
.card .back img { width: 100%; height: 100%; object-fit: cover; }
.card .corner { position: absolute; left: 7%; top: 5%; display: grid; justify-items: center; line-height: 1; font-family: var(--display); font-weight: 700; font-size: calc(var(--cw) * 0.2); }
.card .corner small { font-size: 0.8em; font-family: var(--body); }
.card .corner.br { left: auto; top: auto; right: 7%; bottom: 5%; transform: rotate(180deg); }
.card .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * 0.46); }
.card .pip.court { font-family: var(--display); font-weight: 700; font-size: calc(var(--cw) * 0.36); }
.card .pip.court::before { content: ""; position: absolute; inset: 22% 18%; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.6); background: linear-gradient(160deg, rgba(167, 139, 250, 0.25), rgba(52, 211, 153, 0.18)); }
.hands { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; }
.hand { display: grid; justify-items: center; gap: 6px; padding: 8px 10px 10px; border-radius: 18px; border: 1px solid transparent; transition: border-color var(--t-med) ease, background var(--t-med) ease, opacity var(--t-med) ease; }
.hand.is-active { border-color: rgba(167, 139, 250, 0.7); background: rgba(167, 139, 250, 0.07); box-shadow: 0 0 30px rgba(167, 139, 250, 0.15); }
.hand.is-waiting { opacity: 0.7; }
.hand-tag { margin: 0; font-size: 0.8rem; color: var(--text-dim); text-align: center; }
.hand-tag b { color: var(--chrome); font-variant-numeric: tabular-nums; }
.hand-tag .out { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; animation: marker-in 300ms var(--ease-spring); }
.out.win, .out.blackjack { background: var(--accent-grad); color: #0b0614; }
.out.push { background: rgba(226, 232, 240, 0.18); color: var(--chrome); }
.out.lose, .out.bust { background: rgba(52, 211, 153, 0.2); color: #d1fae5; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .game-roulette .wheel-frame { grid-template-columns: minmax(0, 1fr); }
  .game-roulette .wheel-tilt { width: min(100%, 340px); }
  .game-roulette .wheel-readout { right: 10%; }
}
@media (max-width: 1100px) {
  .game-shell { grid-template-columns: minmax(0, 1fr) 290px; }
  .stage-tags { display: none; }
}
@media (max-width: 900px) {
  .game-shell { display: flex; flex-direction: column; gap: 14px; }
  .game-shell > * { min-width: 0; }
  .controls { position: sticky; top: auto; bottom: 0; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); gap: 8px; border-radius: 22px 22px 0 0; border-bottom: 0; background: rgba(8, 8, 12, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45); }
  .controls .feature-note { padding: 4px 10px; font-size: 0.78rem; }
  .controls .last-line { font-size: 0.8rem; }
  .util .btn { --h: 34px; padding: 0 12px; font-size: 0.8rem; }
  .util a[href="#rules"] { display: none; }
  .spin-btn { --h: 54px; }
  .game-reels .reel-window, .game-cascade .reel-window { max-width: none; min-width: 0; }
  .game-roulette .wheel-tilt { width: min(78vw, 320px); }
  .felt { min-height: 380px; }
}
@media (max-width: 700px) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(34px, auto); }
  .cell.num { grid-column: var(--vc); grid-row: var(--vr); }
  .cell.zero { grid-column: 1 / span 3; grid-row: 1; }
  .cell.col { grid-column: var(--vc); grid-row: 14; }
  .cell.dozen { grid-column: var(--vc); grid-row: 15; }
  .cell.even { grid-column: var(--vc); grid-row: var(--vr); }
  .cell { min-height: 34px; font-size: 0.86rem; }
  .cabinet { border-radius: 22px; padding: 8px; }
  .marquee small { display: none; }
  .stage-head img { width: 42px; height: 42px; }
  .cab-foot { gap: 4px 14px; font-size: 0.72rem; }
  .chip { width: 46px; height: 46px; font-size: 0.78rem; }
  .chip-picker { gap: 8px; }
}
@media (max-width: 430px) {
  .stepper .step { width: 40px; height: 44px; }
  .stepper output { min-width: 4.4ch; font-size: 0.98rem; }
  .spin-btn { min-width: 0; font-size: 1rem; }
  .ctrl-row.actions { gap: 6px; }
  .ctrl-row.actions .btn { --h: 46px; font-size: 0.9rem; }
  .ctrl-row.tools .btn { font-size: 0.8rem; }
  .result { font-size: 0.92rem; padding: 10px 12px; }
  .shoe { display: none; }
  .crumbs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card.is-down { animation: none; }
  .wheel-tilt { transform: rotateX(28deg); }
}

/* ---------- Pick Verionex room finish ---------- */
.cabinet { border-radius: 0; border-color: rgba(167, 139, 250, 0.45); background: var(--ink-1); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); box-shadow: none; }
.cabinet::after { background: radial-gradient(ellipse at 50% 40%, rgba(5, 5, 7, 0.45), rgba(5, 5, 7, 0.9) 75%); }
.cab-art { opacity: 0.34; }
.controls { border-radius: 0; background: var(--glass-strong); border-color: var(--line-strong); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.reel-window { border-radius: 6px; background: linear-gradient(180deg, #1c1c24, #09090c 40%, #1a1a22); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45), inset 0 0 30px rgba(0, 0, 0, 0.8), 0 10px 40px rgba(0, 0, 0, 0.5); }
.reels-canvas, .gem-canvas { border-radius: 4px; }
.marquee .chrome-text { font-family: var(--display); font-weight: 800; letter-spacing: 0.02em; }
.win-banner { border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.result, .feature-note, .info details { border-radius: 0; }
.feature-note.is-live, .trail li.is-on { color: #0b0614; }
.stage-head img { border-radius: 10px; border: 1px solid rgba(167, 139, 250, 0.6); object-fit: cover; }
.stepper { border-radius: 0; }
.stepper .step { border-radius: 0; color: var(--accent); }
.trail li { border-radius: 0; }
.board { border-radius: 4px; background: url("../assets/img/felt.webp?v=20261024-pvx") center / 420px, #0a0a10; border-color: rgba(167, 139, 250, 0.45); }
.cell { border-radius: 3px; }
.cell.green { background: linear-gradient(180deg, #13916a, #0a6849); }
.felt { border-radius: 4px; background: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(76, 52, 140, 0.35), rgba(5, 5, 7, 0.6) 75%), url("../assets/img/felt.webp?v=20261024-pvx") center / 520px, #0a0a10; }
.card .face { border-color: #a1a1aa; }
.card .pip.court::before { border-color: rgba(139, 92, 246, 0.5); background: linear-gradient(160deg, rgba(167, 139, 250, 0.22), rgba(52, 211, 153, 0.16)); }
.card .back { border-color: rgba(167, 139, 250, 0.6); }
.chip { color: #0b0614; }
.chip-10 { --c1: #e4e4e7; }
.chip-25 { --c1: #c4b5fd; }
.chip-100 { --c1: #6ee7b7; }
.chip-500 { --c1: #a78bfa; }
.pocket-badge { border-color: var(--accent); }
.hand { border-radius: 4px; }

@media (max-width: 900px) {
  .game-shell { align-items: stretch; }
  .controls { clip-path: none; margin: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
}