/* The same number game, inside an illustrated golden arena. */
body[data-variant='v2'] { --bg: #071813; --gold: #f6d471; --gold-light: #ffe7a4; }
body[data-variant='v2'] .app { background: #071813; }
body[data-variant='v2'] .topbar { border-bottom-color: #cebc8030; }
body[data-variant='v2'] .brand-mark { filter: drop-shadow(0 2px 8px #ecc45420); }
body[data-variant='v2'] .stage { isolation: isolate; }
.arena-art { position: absolute; z-index: -2; inset: -18px -28px -14px; background: url('./assets/v2/golden-arena.webp') center 43% / cover no-repeat; opacity: .85; pointer-events: none; mask-image: linear-gradient(180deg,transparent,#000 9%,#000 81%,transparent); }
body[data-variant='v2'] .glow-backdrop { display: none; }
body[data-variant='v2'] .scoreboard { transition: opacity .25s, transform .25s; }
body[data-variant='v2'] .num-block { border-color: #d8ba6745; border-radius: 26px; background: linear-gradient(145deg,#173e30e8,#081d17ed); box-shadow: 0 16px 40px #020e0b70,inset 0 1px 0 #f4d89219; }
body[data-variant='v2'] .num-block.player { border-color: #e1c66c7a; }
body[data-variant='v2'] .num-label { color: #d5d7b8; }
body[data-variant='v2'] .num { text-shadow: 0 3px 0 #03120d; }
body[data-variant='v2'] .focus-label { color: #ede3bc; text-shadow: 0 2px 6px #03120d; }
body[data-variant='v2'] .focus-value { color: #ffe394; text-shadow: 0 5px 0 #584010,0 8px 0 #08110b,0 14px 36px #010a06b3; }
body[data-variant='v2'] .focus-row { padding-bottom: 48px; }
body[data-variant='v2'] .win-banner { background: #092619ed; border-color: #c5a45280; box-shadow: 0 6px 20px #04140f88; }
body[data-variant='v2'] .win-banner:not(.win-small) .return-label { color: #f9dc84; }
body[data-variant='v2'] .distance-label { color: #d8d9b9; text-shadow: 0 2px 5px #000; }
body[data-variant='v2'] .picker-area { border-radius: 20px; background: linear-gradient(180deg,#08191120,#071813d9); }
body[data-variant='v2'] .pick-step { background: #123126d9; border-color: #71836955; border-radius: 50%; }
body[data-variant='v2'] .controls { background: linear-gradient(150deg,#1a372c,#10271f); border-color: #bcb3764a; box-shadow: 0 20px 60px #0008,inset 0 1px 0 #fff5c012; }
body[data-variant='v2'] .amount-stepper, body[data-variant='v2'] .pick-stepper { background: #091f18; border-color: #617f614d; }
body[data-variant='v2'] .play { background: linear-gradient(180deg,#ffe6a0,#f0c452 88%); border-radius: 18px; box-shadow: inset 0 1px 0 #fff3c7,0 4px 0 #725919,0 6px 22px #010c0860; }
body[data-variant='v2'] .play:hover:enabled { background: linear-gradient(180deg,#ffedbb,#f7d470); }
body[data-variant='v2'] .menu-panel { background: #102b22; border-color: #bcb37655; }

@media (max-width: 760px) {
  .arena-art { inset: -8px -12px 0; background-size: auto 87%; background-position: center top; opacity: .75; }
  body[data-variant='v2'] .focus-row { padding-bottom: 38px; }
  body[data-variant='v2'] .num-block { border-radius: 20px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  body[data-variant='v2'] .focus-row { padding-bottom: 27px; }
  body[data-variant='v2'] .num-block { border-radius: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .arena-art { background-size: cover; background-position: center 42%; opacity: .64; }
  body[data-variant='v2'] .focus-row { padding-bottom: 26px; }
}