/* =============================================================
   arcade15.css — "SUNSET FLOOR" 1.5D skin
   Loaded last. Flat 2D mechanics, warm depth presentation.
   Motion is transform/opacity only; nothing animates paint here.
   ============================================================= */

/* ---------- 1. warm palette (overrides the neon set) ---------- */
html.av2 {
  --w-void: #0a0509;
  --w-deep: #140a12;
  --w-plum: #1e0e18;
  --w-rose: #2b141d;
  --w-line: rgba(255, 190, 140, .14);
  --w-line2: rgba(255, 190, 140, .26);
  --w-amber: #ffb347;
  --w-ember: #ff7a3d;
  --w-coral: #ff5f6d;
  --w-cream: #fff3e4;
  --w-muted: #d3ac97;

  --av2-bg: #0a0509;
  --av2-bg2: #140a12;
  --av2-panel: rgba(34, 16, 24, .92);
  --av2-panel2: rgba(44, 21, 30, .96);
  --av2-line: rgba(255, 190, 140, .13);
  --av2-line2: rgba(255, 190, 140, .24);
  --av2-text: #fff3e4;
  --av2-muted: #cba792;
  --av2-dim: #8f6b5b;
  --av2-lime: #ffc44d;
  --av2-cyan: #ffb26b;
  --av2-pink: #ff6b6b;
  --av2-violet: #d97a9b;
  --av2-gold: #ffcb5e;
  --av2-green: #7ee08a;
  --av2-red: #ff5f6d;
}

html.av2 body {
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(255, 150, 80, .22), transparent 62%),
    radial-gradient(900px 520px at 88% 8%, rgba(255, 95, 109, .14), transparent 64%),
    radial-gradient(1000px 640px at 12% 104%, rgba(255, 196, 77, .12), transparent 62%),
    linear-gradient(180deg, #150a12 0%, #0d060b 46%, #0a0509 100%);
  color: var(--av2-text);
}

/* ---------- 2. perf: drop every blurred backdrop ---------- */
html.av2 .panel,
html.av2 .tile,
html.av2 #top,
html.av2 #ticker,
html.av2 #taskbar,
html.av2 .aside,
html.av2 header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- 3. the 1.5D floor ---------- */
html.av2 #main {
  perspective: 1500px;
  perspective-origin: 50% -18%;
}

html.av2 .grid {
  transform: rotateX(5deg) translateZ(0);
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  margin-bottom: 26px;
}

html.av2 .tile {
  position: relative;
  overflow: visible;
  border-radius: 16px;
  border: 1px solid var(--w-line2);
  background:
    linear-gradient(168deg, rgba(64, 30, 38, .96) 0%, rgba(38, 18, 26, .97) 52%, rgba(24, 11, 17, .98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 186, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 #401a1e,
    0 3px 0 -1px #34141a,
    0 5px 0 -2px #240e12,
    0 14px 26px -10px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 150, 80, .10);
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s linear, border-color .16s linear;
  will-change: transform;
}
html.av2 .tile[data-game="pvp"] { --w-aura: #ff6b6b; }
html.av2 .tile[data-game="bj"],
html.av2 .tile[data-game="baccarat"] { --w-aura: #ffcb5e; }
html.av2 .tile[data-game="roulette"] { --w-aura: #ff5f6d; }
html.av2 .tile[data-game="mines"],
html.av2 .tile[data-game="towers"] { --w-aura: #ffb347; }
html.av2 .tile[data-game="limbo"] { --w-aura: #ff9f7a; }
html.av2 .tile[data-game="crash"] { --w-aura: #ff7a3d; }
html.av2 .tile { --w-aura: #ffb347; }

html.av2 .tile:hover {
  transform: translateY(-3px) translateZ(20px);
  border-color: rgba(255, 179, 71, .55);
  border-color: color-mix(in srgb, var(--w-aura) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 200, .3),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 #4a1e22,
    0 4px 0 -1px #3a161c,
    0 7px 0 -3px #260f14,
    0 22px 38px -14px rgba(0, 0, 0, .85),
    0 0 22px -4px color-mix(in srgb, var(--w-aura) 55%, transparent);
}
html.av2 .tile:active {
  transform: translateY(1px) translateZ(4px) scale(.995);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 186, .18),
    0 1px 0 #331318,
    0 2px 0 -1px #240e12,
    0 6px 14px -8px rgba(0, 0, 0, .8);
}

/* injected: breathing aura behind each tile */
html.av2 .v15-aura {
  position: absolute;
  inset: -14px;
  z-index: 0;
  border-radius: 26px;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 12%, rgba(255, 179, 71, .42), transparent 70%);
  background: radial-gradient(60% 60% at 50% 12%, color-mix(in srgb, var(--w-aura) 46%, transparent), transparent 70%);
  opacity: .16;
  will-change: opacity;
  animation: v15Breathe 5.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.62s);
}
@keyframes v15Breathe {
  0%, 100% { opacity: .12; }
  50% { opacity: .34; }
}

/* icons stand up out of the floor plane */
html.av2 .tile .ico {
  position: relative;
  z-index: 2;
  transform: translateZ(22px) rotateX(-5deg);
  border-radius: 12px;
  border: 1px solid rgba(255, 200, 150, .22);
  border-color: color-mix(in srgb, var(--w-aura) 26%, rgba(255, 224, 190, .16));
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255, 232, 200, .16), rgba(0, 0, 0, .28) 68%),
    linear-gradient(170deg, #38202a, #1c0d14);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 200, .3),
    0 2px 0 #2a1116,
    0 5px 12px -4px rgba(0, 0, 0, .8);
  color: var(--w-aura);
  transition: transform .16s ease, box-shadow .16s linear;
}
html.av2 .tile > div:last-child {
  position: relative;
  z-index: 2;
  transform: translateZ(12px);
}
html.av2 .tile .nm {
  color: var(--w-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
html.av2 .tile .sub { color: var(--w-muted); }
html.av2 .tile:hover .ico {
  transform: translateZ(32px) rotateX(-3deg) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 200, .38),
    0 2px 0 #2a1116,
    0 8px 18px -6px rgba(0, 0, 0, .85),
    0 0 18px -2px color-mix(in srgb, var(--w-aura) 60%, transparent);
}
html.av2 .tile:hover .nm { color: #fff8ee; }

/* ---------- 4. hero: horizon + sun + floor grid ---------- */
html.av2 .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--w-line2);
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(255, 160, 90, .5), transparent 62%),
    linear-gradient(180deg, #3a1620 0%, #23101a 44%, #150a12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 200, .26),
    inset 0 -30px 60px -30px rgba(0, 0, 0, .9),
    0 2px 0 #3d1a1e,
    0 5px 0 -2px #28100f,
    0 18px 34px -16px rgba(0, 0, 0, .85);
  --px: 0;
  --py: 0;
}
html.av2 .hero .hlog {
  position: relative;
  z-index: 3;
  color: #fff4e2;
  text-shadow:
    0 1px 0 #7a3a1c,
    0 2px 0 #5c2a14,
    0 3px 0 #40190d,
    0 10px 20px rgba(0, 0, 0, .55),
    0 0 26px rgba(255, 170, 90, .45);
}
html.av2 .hero .hsub {
  position: relative;
  z-index: 3;
  color: #ffd9b3;
  text-shadow: 0 1px 0 rgba(60, 20, 8, .7);
}
html.av2 .hero .hrow { position: relative; z-index: 3; }

html.av2 .v15-horizon {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
html.av2 .v15-sun {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 148px;
  height: 148px;
  margin-left: -74px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #ffe6ac 0%, #ffb347 44%, #ff7a3d 72%, rgba(255, 95, 109, .0) 100%);
  opacity: .55;
  transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 6px), 0);
  will-change: transform;
}
html.av2 .v15-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(26, 8, 12, .55) 9px 13px);
  opacity: .55;
}
html.av2 .v15-floor {
  position: absolute;
  left: -28%;
  right: -28%;
  bottom: -12%;
  height: 62%;
  transform-origin: 50% 100%;
  transform: perspective(420px) rotateX(66deg) translate3d(calc(var(--px) * -14px), 0, 0);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 176, 110, .30) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255, 176, 110, .26) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
  opacity: .85;
  will-change: transform;
}

/* jackpot ticker gets a slow golden breath */
html.av2 .hero .jpticker {
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 77, .34);
  background: linear-gradient(180deg, rgba(255, 196, 77, .14), rgba(255, 95, 109, .08));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .3), 0 1px 0 rgba(90, 36, 12, .6);
}
html.av2 .hero .jpticker span {
  color: #ffe6b0;
  text-shadow: 0 0 14px rgba(255, 190, 90, .6);
  animation: v15Gold 3.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes v15Gold {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* ---------- 5. panels: arcade bezel ---------- */
html.av2 .panel {
  border-radius: 16px;
  border: 1px solid var(--w-line2);
  background: linear-gradient(170deg, rgba(48, 22, 30, .95), rgba(26, 12, 18, .97));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 200, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 1px 0 #38161c,
    0 3px 0 -1px #2a1015,
    0 12px 26px -14px rgba(0, 0, 0, .85);
}
html.av2 .panel .ph {
  color: #ffd7b0;
  letter-spacing: .2em;
}
html.av2 .panel .ph span:last-child { color: var(--av2-dim); }

/* win flash the JS adds to a panel when the big-win list changes */
html.av2 .v15-flash { animation: v15Flash .62s ease-out 1; }
@keyframes v15Flash {
  0% { transform: translateZ(0) scale(1); box-shadow: inset 0 0 0 1px rgba(255, 196, 77, .9), 0 12px 26px -14px rgba(0, 0, 0, .85); }
  38% { transform: translateZ(14px) scale(1.012); box-shadow: inset 0 0 0 1px rgba(255, 226, 160, 1), 0 0 26px -4px rgba(255, 176, 90, .8); }
  100% { transform: translateZ(0) scale(1); box-shadow: inset 0 1px 0 rgba(255, 232, 200, .14), 0 12px 26px -14px rgba(0, 0, 0, .85); }
}

/* a changed balance / jackpot number pops */
html.av2 .v15-bump { animation: v15Bump .46s cubic-bezier(.2, .9, .2, 1) 1; will-change: transform; }
@keyframes v15Bump {
  0% { transform: scale(1); }
  34% { transform: scale(1.16); }
  62% { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* ---------- 6. controls: chunky 1.5D press ---------- */
html.av2 .btn,
html.av2 .mini,
html.av2 .hero .hbtn {
  border-radius: 12px;
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 222, .34),
    inset 0 -2px 0 rgba(0, 0, 0, .26),
    0 2px 0 rgba(0, 0, 0, .45),
    0 6px 14px -8px rgba(0, 0, 0, .9);
  transition: transform .1s linear, box-shadow .1s linear, filter .1s linear;
}
html.av2 .btn:active,
html.av2 .mini:active,
html.av2 .hero .hbtn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 244, 222, .2), 0 1px 0 rgba(0, 0, 0, .4);
}
html.av2 .btn.gold,
html.av2 .mini.gold { color: #2a1200 !important; }
html.av2 .btn.green { color: #04240f !important; }
html.av2 .btn.blue { color: #2a1000 !important; }
html.av2 .hero .hbtn {
  background: linear-gradient(180deg, #ffd98a, #ff9f45 62%, #e8762c);
  border-color: rgba(120, 48, 8, .85);
  color: #3a1500 !important;
  text-shadow: 0 1px 0 rgba(255, 236, 200, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 232, .9),
    inset 0 -2px 0 rgba(140, 60, 10, .55),
    0 2px 0 rgba(90, 36, 8, .85),
    0 8px 18px -8px rgba(255, 150, 70, .7);
}

/* ---------- 7. top bar ---------- */
html.av2 #top {
  border-bottom: 1px solid rgba(255, 190, 140, .16);
  background: linear-gradient(180deg, rgba(52, 20, 28, .92), rgba(16, 8, 13, .92));
}
html.av2 #top .balance {
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 77, .3);
  background: linear-gradient(180deg, rgba(255, 196, 77, .16), rgba(255, 95, 109, .08));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .3);
}
html.av2 #top .balance .coin { animation: v15CoinSpin 7s linear infinite; will-change: transform; }
@keyframes v15CoinSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* ---------- 8. ticker ---------- */
html.av2 #ticker {
  border-color: rgba(255, 190, 140, .2);
  background: linear-gradient(90deg, rgba(255, 122, 61, .1), rgba(255, 196, 77, .1), rgba(255, 95, 109, .1));
  box-shadow: none;
}
html.av2 #ticker span {
  color: #ffd9a8 !important;
  text-shadow: 0 0 12px rgba(255, 170, 90, .45);
}

/* ---------- 9. coin rain (JS spawns, pooled) ---------- */
html.av2 .v15-coins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
html.av2 .v15-coin {
  position: absolute;
  bottom: -18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff6d0, #ffc44d 48%, #c1791b 78%, #7d4708);
  box-shadow: 0 0 10px rgba(255, 190, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .8);
  opacity: 0;
  will-change: transform, opacity;
  animation: v15Rise var(--dur, 2.4s) cubic-bezier(.3, .1, .4, 1) forwards;
}
@keyframes v15Rise {
  0% { transform: translate3d(0, 0, 0) scale(.6) rotateZ(0deg); opacity: 0; }
  18% { opacity: .95; }
  100% { transform: translate3d(var(--drift, 0px), -190px, 0) scale(1) rotateZ(220deg); opacity: 0; }
}

/* ---------- 10. phones ---------- */
@media (max-width: 430px) {
  html.av2 .grid { transform: rotateX(4deg); margin-bottom: 20px; }
  html.av2 .tile { padding: 12px; gap: 9px; border-radius: 14px; }
  html.av2 .tile .ico { width: 42px; height: 42px; transform: translateZ(16px) rotateX(-4deg); }
  html.av2 .tile > div:last-child { transform: translateZ(9px); }
  html.av2 .tile .nm { font-size: 13px; }
  html.av2 .hero { border-radius: 16px; }
  html.av2 .v15-sun { width: 118px; height: 118px; margin-left: -59px; }
  html.av2 .v15-floor { height: 56%; }
}

/* ---------- 11. respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.av2 .v15-aura,
  html.av2 .v15-coin,
  html.av2 #top .balance .coin,
  html.av2 .hero .jpticker span,
  html.av2 .v15-flash,
  html.av2 .v15-bump { animation: none !important; }
  html.av2 .grid { transform: none; }
  html.av2 .tile:hover { transform: translateY(-2px); }
  html.av2 .v15-floor,
  html.av2 .v15-sun { transform: none !important; }
}

/* ---------- 12. low-power guard: no idle animation while scrolling ---------- */
html.av2.v15-busy .v15-aura { animation-play-state: paused; }

/* =============================================================
   13. per-game 1.5D stages
   Each game keeps its flat 2D rules; the board is drawn as a slab
   standing in a warm room. Transform/opacity only.
   ============================================================= */

/* ---- shared stage frame ---- */
html.av2 #view-bj .panel,
html.av2 #view-baccarat .panel,
html.av2 #view-roulette .panel,
html.av2 #view-mines .panel,
html.av2 #view-limbo .panel,
html.av2 #view-crash .panel,
html.av2 #view-towers .panel {
  perspective: 1100px;
  perspective-origin: 50% -30%;
}

html.av2 .wheelwrap { perspective: 900px; perspective-origin: 50% 22%; }
html.av2 .wheelwrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 74%;
  height: 18px;
  margin-left: -37%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}
html.av2 .wheel {
  transform: rotateX(16deg) translateZ(0);
  transform-style: preserve-3d;
  box-shadow:
    0 0 0 2px #ffd98a,
    inset 0 0 24px rgba(0, 0, 0, .5),
    0 4px 0 #4a2c00,
    0 10px 26px rgba(0, 0, 0, .6),
    0 0 30px rgba(255, 170, 80, .28) !important;
}
html.av2 .wheel .hub,
html.av2 #wheel-hub {
  transform: translateZ(20px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff3cf, #ffbf4d 46%, #b87510 100%);
  color: #3d2200;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 3px 8px rgba(0, 0, 0, .6);
}
html.av2 .wheel .pointer,
html.av2 .pointer {
  transform: translateZ(26px);
  filter: none;
  border-top-color: #ffd98a;
}

/* ---- roulette table: raised cells ---- */
html.av2 .rtable { transform: rotateX(12deg); transform-origin: 50% 0%; transform-style: preserve-3d; }
html.av2 .rtable .rcell {
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, .22),
    inset 0 -2px 0 rgba(0, 0, 0, .4),
    0 2px 0 rgba(0, 0, 0, .5);
  transition: transform .12s linear, box-shadow .12s linear;
  will-change: transform;
}
html.av2 .rtable .rcell:active {
  transform: translateY(2px) translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .16), 0 0 0 rgba(0, 0, 0, 0);
}
html.av2 .rtable .rcell:hover { box-shadow: inset 0 1px 0 rgba(255, 236, 200, .34), 0 2px 0 rgba(0, 0, 0, .5), 0 0 14px -2px rgba(255, 190, 90, .6); }

/* ---- cards: a dealt hand stands up off the felt ---- */
html.av2 .cards { perspective: 800px; perspective-origin: 50% 0%; transform-style: preserve-3d; }
html.av2 .cards .card {
  transform-origin: 50% 100%;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 2px 0 #6c7f9c,
    0 6px 14px -6px rgba(0, 0, 0, .8);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}
html.av2 .cards .card:nth-child(1) { transform: rotateX(10deg) translateZ(2px) rotate(-3deg); }
html.av2 .cards .card:nth-child(2) { transform: rotateX(9deg) translateZ(10px) rotate(1deg); }
html.av2 .cards .card:nth-child(3) { transform: rotateX(8deg) translateZ(18px) rotate(4deg); }
html.av2 .cards .card:nth-child(4) { transform: rotateX(7deg) translateZ(26px) rotate(7deg); }
html.av2 .cards .card:nth-child(n+5) { transform: rotateX(6deg) translateZ(30px) rotate(9deg); }
html.av2 .cards .card.dealt { animation: v15Deal .34s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes v15Deal {
  0% { opacity: 0; transform: rotateX(46deg) translateZ(-40px) translateY(-18px) scale(.9); }
  100% { opacity: 1; }
}
html.av2 .card.back {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 2px 0 #061f4a,
    0 6px 14px -6px rgba(0, 0, 0, .85),
    0 0 18px -4px rgba(120, 190, 255, .55);
}

/* ---- mines: extruded tiles ---- */
html.av2 .minesgrid { perspective: 700px; perspective-origin: 50% -20%; transform-style: preserve-3d; }
html.av2 .minesgrid button,
html.av2 .minesgrid > * {
  border-radius: 10px;
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, .2),
    inset 0 -2px 0 rgba(0, 0, 0, .42),
    0 1px 0 #2a1015,
    0 3px 0 -1px #1d0b0f,
    0 7px 12px -6px rgba(0, 0, 0, .85);
  transform: translateZ(0);
  transition: transform .12s cubic-bezier(.2, .8, .3, 1), box-shadow .12s linear, background .12s linear;
  will-change: transform;
}
html.av2 .minesgrid button:hover {
  transform: translateY(-2px) translateZ(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, .32),
    0 1px 0 #2a1015,
    0 4px 0 -1px #1d0b0f,
    0 12px 20px -10px rgba(0, 0, 0, .9),
    0 0 16px -2px rgba(255, 179, 71, .5);
}
html.av2 .minesgrid button:active { transform: translateY(2px) translateZ(0); }
html.av2 .minesgrid button.open {
  background: linear-gradient(180deg, #b6ffcd, #2fbd6b 58%, #106b34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(0, 40, 18, .5),
    0 2px 0 #06401f,
    0 0 22px -2px rgba(126, 224, 138, .8);
  transform: translateZ(8px);
}
html.av2 .minesgrid button.bomb {
  background: linear-gradient(180deg, #ffb3a4, #d81e2c 58%, #6f0a12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 2px 0 #4d060c,
    0 0 24px -2px rgba(255, 95, 109, .85);
}

/* ---- towers: a stack of floors going up ---- */
html.av2 .towers {
  perspective: 900px;
  perspective-origin: 50% 120%;
  transform-style: preserve-3d;
  gap: 5px;
}
html.av2 .towers > * {
  border-radius: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, .18),
    inset 0 -2px 0 rgba(0, 0, 0, .4),
    0 2px 0 #2a1015,
    0 6px 10px -6px rgba(0, 0, 0, .85);
  transform: translateZ(0);
  transition: transform .14s ease, box-shadow .14s linear;
  will-change: transform;
}
html.av2 .towers > *:hover {
  transform: translateZ(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, .3),
    0 2px 0 #2a1015,
    0 10px 20px -8px rgba(0, 0, 0, .9),
    0 0 18px -3px rgba(255, 179, 71, .55);
}

/* ---- limbo / crash multiplier: chunky arcade numeral ---- */
html.av2 .bigmult {
  color: #ffe1a6;
  text-shadow:
    0 1px 0 #b1741a,
    0 2px 0 #9a5f10,
    0 3px 0 #7d4a0a,
    0 4px 0 #5f3606,
    0 5px 0 #432403,
    0 9px 18px rgba(0, 0, 0, .6),
    0 0 28px rgba(255, 180, 90, .5);
  transform: translateZ(0);
  will-change: transform;
}
html.av2 .bigmult.v15-hot {
  color: #fff6df;
  text-shadow:
    0 1px 0 #d98a20,
    0 2px 0 #c07414,
    0 3px 0 #9c5a0a,
    0 4px 0 #7a4406,
    0 10px 22px rgba(0, 0, 0, .62),
    0 0 40px rgba(255, 140, 70, .8);
}

/* ---- crash graph: inset bezel ---- */
html.av2 .graphbox {
  border-radius: 12px;
  border-color: var(--w-line2);
  background: linear-gradient(180deg, #1a0d14, #0a0510);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 200, 150, .1),
    0 1px 0 #3a161c,
    0 3px 0 -1px #2a1015,
    0 10px 20px -12px rgba(0, 0, 0, .9);
}

/* ---- bead plate: domed dominoes ---- */
html.av2 .bead span {
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 0 rgba(0, 0, 0, .35),
    0 1px 0 rgba(0, 0, 0, .6),
    0 3px 6px -2px rgba(0, 0, 0, .8);
}

/* ---- history pills ---- */
html.av2 .history span {
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 1px 0 rgba(0, 0, 0, .5),
    0 4px 8px -4px rgba(0, 0, 0, .8);
}

/* ---- chips: domed, readable, warm ---- */
html.av2 .chipsrow .chip,
html.av2 .chipbtn,
html.av2 .chipsrow > button {
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(0, 0, 0, .3),
    0 2px 0 rgba(0, 0, 0, .55),
    0 6px 12px -6px rgba(0, 0, 0, .9);
  transition: transform .1s linear, box-shadow .1s linear;
}
html.av2 .chipbtn:active,
html.av2 .chipsrow > button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 rgba(0, 0, 0, 0);
}
html.av2 .chipbtn.on,
html.av2 .chipsrow > button.on {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1px rgba(255, 210, 140, .7),
    0 0 18px -2px rgba(255, 180, 90, .8);
}

/* ---- bet stepper: pressable keys ---- */
html.av2 .betadj {
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, .3),
    inset 0 -2px 0 rgba(0, 0, 0, .35),
    0 2px 0 rgba(0, 0, 0, .55),
    0 6px 12px -8px rgba(0, 0, 0, .9);
  transition: transform .1s linear, box-shadow .1s linear;
}
html.av2 .betadj:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .2), 0 0 0 rgba(0, 0, 0, 0); }
html.av2 .betval b {
  color: #ffe1a6;
  text-shadow: 0 1px 0 #7a4a0a, 0 2px 0 #5a3506, 0 6px 14px rgba(0, 0, 0, .6);
}

/* ---- round result pop: the number swells then settles ---- */
html.av2 .v15-pop { animation: v15Pop .52s cubic-bezier(.2, .9, .2, 1) 1; will-change: transform, opacity; }
@keyframes v15Pop {
  0% { opacity: .2; transform: scale(.7) translateZ(0); }
  46% { opacity: 1; transform: scale(1.13) translateZ(0); }
  70% { transform: scale(.98); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- losing / winning tint on a stage ---- */
html.av2 .v15-hit { animation: v15Hit .5s ease-out 1; }
@keyframes v15Hit {
  0% { box-shadow: inset 0 0 0 2px rgba(255, 95, 109, .9), inset 0 0 40px rgba(255, 95, 109, .35); }
  100% { box-shadow: inset 0 0 0 2px rgba(255, 95, 109, 0), inset 0 0 40px rgba(255, 95, 109, 0); }
}

/* ---- phone tuning for the game stages ---- */
@media (max-width: 430px) {
  html.av2 .rtable { transform: rotateX(9deg); }
  html.av2 .wheel { transform: rotateX(13deg); }
  html.av2 .wheel .hub,
  html.av2 #wheel-hub { transform: translateZ(14px); }
  html.av2 .minesgrid button:hover { transform: translateZ(8px); }
  html.av2 .bigmult { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html.av2 .cards .card,
  html.av2 .rtable,
  html.av2 .wheel,
  html.av2 .minesgrid,
  html.av2 .towers { transform: none !important; }
  html.av2 .cards .card.dealt,
  html.av2 .v15-pop,
  html.av2 .v15-hit { animation: none !important; }
  html.av2 .minesgrid button:hover,
  html.av2 .towers > *:hover,
  html.av2 .tile:hover .ico { transform: none !important; }
}

/* =============================================================
   16. READY MONEY — animated $ badge + USD tag
   Reads as cash, not tokens. Transform-only motion.
   ============================================================= */
html.av2 #top .balance .usd {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: none;
  border-radius: 50%;
  font: 800 13px/1 "Lucida Console", "Courier New", monospace;
  color: #3d2600;
  background: radial-gradient(circle at 34% 26%, #fffbe8, #ffd75e 46%, #e0a000 76%, #9a6600);
  border: 1px solid #7a5200;
  box-shadow: inset 0 1px 0 #fff8c9, 0 1px 0 #5a3c00, 0 0 12px rgba(255, 190, 80, .55);
  transform-style: preserve-3d;
  will-change: transform;
  animation: v15UsdFlip 6s cubic-bezier(.55, .06, .36, .98) infinite;
}
html.av2 #top .balance .usd::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 34%, rgba(255, 255, 255, .8) 48%, transparent 62%);
  opacity: 0;
  animation: v15UsdSheen 6s linear infinite;
}
@keyframes v15UsdFlip {
  0%, 66% { transform: rotateY(0deg) scale(1); }
  76% { transform: rotateY(180deg) scale(1.14); }
  86% { transform: rotateY(360deg) scale(1); }
  100% { transform: rotateY(360deg) scale(1); }
}
@keyframes v15UsdSheen {
  0%, 66% { opacity: 0; transform: translateX(-60%); }
  72% { opacity: .95; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(60%); }
}

html.av2 #top .balance .usd-tag {
  font: 800 8px/1 Tahoma, "Segoe UI", sans-serif;
  letter-spacing: .14em;
  color: #ffd9a8;
  padding: 2px 4px 2px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 196, 77, .45);
  background: linear-gradient(180deg, rgba(255, 196, 77, .22), rgba(255, 122, 61, .14));
  text-shadow: 0 0 8px rgba(255, 170, 90, .5);
  flex: none;
}
html.av2 #top .balance b { font-variant-numeric: tabular-nums; }

/* light mode: cash-register green on white */
html.av2[data-mode="light"] #top .balance .usd {
  border-radius: 2px;
  color: #003300;
  background: linear-gradient(180deg, #ffffff, #d8f0d8 62%, #a8d8a8);
  border: 1px solid #4a6a4a;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #7a9a7a, 0 0 0 1px #00000010;
  animation: none;
}
html.av2[data-mode="light"] #top .balance .usd::after { display: none; }
html.av2[data-mode="light"] #top .balance .usd-tag {
  color: #003300;
  border: 1px solid #808080;
  background: #dfdfdf;
  text-shadow: none;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #a0a0a0;
}

/* =============================================================
   17. WINDOW TABS — MDI tab strip under the titlebar
   Dark and light both get the period frame.
   ============================================================= */
html.av2 #wintabs {
  flex: none;
  padding: 3px 6px 0;
  background: linear-gradient(180deg, rgba(24, 11, 17, .99), rgba(38, 18, 26, .97));
  border-bottom: 1px solid rgba(255, 190, 140, .18);
  box-shadow: inset 0 1px 0 rgba(255, 224, 186, .1);
}
html.av2 #wintabs .wt-scroll {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
html.av2 #wintabs .wt-scroll::-webkit-scrollbar { display: none; }

html.av2 #wintabs .wt {
  flex: none;
  font: 700 8.5px/1 Tahoma, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  color: #cba792;
  padding: 5px 8px 6px;
  border: 1px solid rgba(255, 190, 140, .2);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(58, 28, 36, .96), rgba(30, 14, 20, .96));
  box-shadow: inset 0 1px 0 rgba(255, 224, 186, .14);
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
  transform: translateZ(0);
  transition: transform .14s ease, color .14s ease, background .14s ease;
}
html.av2 #wintabs .wt:hover { color: #fff3e4; transform: translateY(-1px); }
html.av2 #wintabs .wt:active { transform: translateY(1px); }
html.av2 #wintabs .wt.on {
  position: relative;
  color: #2a0d0a;
  background: linear-gradient(180deg, #ffe0b4, #ffb347 60%, #ef8a2a);
  border-color: #ffce8a;
  box-shadow: inset 0 1px 0 #fff3d8, 0 -2px 10px -2px rgba(255, 170, 90, .8);
}
html.av2 #wintabs .wt.on::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 1px;
  height: 1px;
  background: rgba(255, 255, 255, .75);
}

/* light mode: sunken grey tab well, Win9x bevels */
html.av2[data-mode="light"] #wintabs {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  box-shadow: inset 0 1px 0 #ffffff;
  padding: 3px 5px 0;
}
html.av2[data-mode="light"] #wintabs .wt {
  letter-spacing: .04em;
  color: #000;
  padding: 5px 7px 6px;
  border: 1px solid #0a0a0a;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px 0 0 #808080;
  transform: none;
}
html.av2[data-mode="light"] #wintabs .wt:hover { background: #d4d0c8; transform: none; }
html.av2[data-mode="light"] #wintabs .wt.on {
  background: #dfdfdf;
  color: #000080;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px 0 0 #808080;
}
html.av2[data-mode="light"] #wintabs .wt.on::after { display: none; }

@media (max-width: 380px) {
  html.av2 #wintabs .wt { font-size: 8px; padding: 5px 6px 6px; letter-spacing: .04em; }
}

/* =============================================================
   18. TABLE REALISM — felt, rails, stacked chips, wheel ball
   ============================================================= */
html.av2 .cards {
  border-radius: 12px;
  background-image:
    repeating-linear-gradient(48deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-48deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 4px),
    radial-gradient(130% 96% at 50% -6%, rgba(122, 36, 46, .62), rgba(46, 15, 22, .93) 64%, rgba(20, 8, 13, .97));
  background-blend-mode: overlay, overlay, normal;
  box-shadow:
    inset 0 2px 16px rgba(0, 0, 0, .66),
    inset 0 -1px 0 rgba(255, 190, 140, .14),
    0 12px 22px -16px #000;
  padding: 8px 6px 10px;
  margin: -2px -2px 4px;
}

html.av2 .rtable {
  border-radius: 14px;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% -4%, rgba(124, 42, 34, .62), rgba(44, 17, 18, .94) 62%, rgba(18, 7, 9, .98));
  background-blend-mode: overlay, overlay, normal;
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(255, 196, 120, .22),
    0 16px 26px -18px #000;
}

/* bet chips read as stacks, not flat buttons */
html.av2 .chipsrow button {
  position: relative;
  border-radius: 7px;
  box-shadow:
    0 1px 0 #8a3d16,
    0 2px 0 #6d2f10,
    0 3px 0 #55240c,
    0 4px 0 #3f1a08,
    0 7px 12px -6px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 240, 214, .55);
  will-change: transform;
  transition: transform .12s ease, box-shadow .12s ease;
}
html.av2 .chipsrow button:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 #8a3d16,
    0 2px 0 #55240c,
    0 3px 8px -6px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 240, 214, .4);
}
html.av2 .chipsrow button.on { transform: translateY(-2px); }

/* the ball, orbiting the rim (element injected by arcade15.js) */
html.av2 .v15-ball {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
  animation: v15Orbit 3.6s linear infinite;
}
html.av2 .v15-ball::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff, #ffeccd 44%, #b98a5a 82%, #6a4322);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 8px rgba(255, 235, 200, .6);
}
html.av2 .wheelwrap.spinning .v15-ball { animation-duration: 1.05s; }
@keyframes v15Orbit { to { transform: rotate(360deg); } }

html.av2[data-mode="light"] .cards,
html.av2[data-mode="light"] .rtable {
  background-image:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% -4%, #2f7a4a, #1d5a36 62%, #12402a);
  background-blend-mode: normal;
}
html.av2[data-mode="light"] .chipsrow button {
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 0 2px 0 #808080;
}

@media (prefers-reduced-motion: reduce) {
  html.av2 #top .balance .usd,
  html.av2 #top .balance .usd::after,
  html.av2 .v15-ball { animation: none !important; }
  html.av2 #wintabs .wt:hover { transform: none !important; }
}
/* narrow phones: the badge and tag share the top bar with the brand */
@media (max-width: 390px) {
  html.av2 #top .balance { gap: 5px; padding: 4px 9px 4px 5px; }
  html.av2 #top .balance .usd { width: 18px; height: 18px; font-size: 11px; }
  html.av2 #top .balance .usd-tag { padding: 2px 3px; letter-spacing: .08em; }
}