*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #07040a;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}

/* FULL SCREEN BACKGROUND */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* MAIN PORTRAIT STAGE */
.stage {
  --ss: 400px;

  position: relative;
  width: min(100vw, calc(100dvh * 840 / 1456));
  aspect-ratio: 840 / 1456;
  z-index: 1;
  overflow: visible;
}

/* WHEEL */
.wheel-wrap {
  position: absolute;
  left: 24.5%;
  top: 9.5%;
  width: 51%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  pointer-events: none;
}

.wheel-spin-layer,
.ball-orbit {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.roulette-wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.wheel-number-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ball-orbit {
  z-index: 4;
}

.roulette-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ss) * 0.022);
  height: calc(var(--ss) * 0.022);
  margin-left: calc(var(--ss) * -0.011);
  margin-top: calc(var(--ss) * -0.011);
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    #ffffff,
    #e1e1e1 50%,
    #999999 100%
  );
  box-shadow:
    0 0 calc(var(--ss) * 0.012) rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(0);
}

/* BETTING TABLE */
.table-wrap {
  position: absolute;
  left: 11.25%;
  top: 40%;
  width: 77.5%;
  aspect-ratio: 1694 / 928;
  z-index: 5;
}

.table {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
  pointer-events: none;
}

.zones {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

.zone {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  border-radius: calc(var(--ss) * 0.004);
  transition:
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.zone:active {
  background: rgba(255, 255, 255, 0.18);
}

.zone.bet-selected {
  background: rgba(255, 210, 74, 0.14);
  box-shadow:
    inset 0 0 0 2px #ffd24a,
    0 0 calc(var(--ss) * 0.016) rgba(255, 210, 74, 0.7);
  z-index: 3;
}

/* UI OVERLAY */
.ui-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

/* DYNAMIC VALUE TEXT */
.values {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.val {
  position: absolute;
  top: 70.2%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 800;
  font-size: calc(var(--ss) * 0.047);
  color: #f4ecd6;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 8px rgba(255, 210, 74, 0.25);
}

.val-balance {
  left: 18%;
}

.val-win {
  left: 49.3%;
  color: #36e07a;
  font-size: calc(var(--ss) * 0.05);
}

.val-total {
  left: 78.6%;
}

.val-color {
  display: none;
}

/* CHIP HOTSPOTS */
.chip-hotspots {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.chip-zone {
  position: absolute;
  top: 73.6%;
  width: 13%;
  height: 7.2%;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.chip-zone.selected {
  box-shadow:
    0 0 0 2px rgba(255, 210, 74, 0.9),
    0 0 16px rgba(255, 210, 74, 0.7);
}

/* CONTROL HOTSPOTS */
.ctrl-hotspot,
.spin-hotspot,
.lobby-hotspot {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 7;
}

.ctrl-hotspot {
  top: 83%;
  height: 9%;
  border-radius: calc(var(--ss) * 0.02);
}

.ctrl-hotspot:active {
  box-shadow: inset 0 0 0 2px rgba(255, 210, 74, 0.55);
}

.spin-hotspot {
  left: 37%;
  width: 23.5%;
  top: 80.8%;
  height: 15%;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
}

.spin-hotspot:active {
  box-shadow:
    0 0 0 3px rgba(255, 210, 74, 0.65),
    0 0 22px rgba(255, 210, 74, 0.55);
}

.spin-hotspot:disabled {
  cursor: default;
  opacity: 1;
}

/* HAMBURGER / LOBBY BUTTON */
.lobby-hotspot {
  left: 3%;
  top: 2%;
  width: 10%;
  height: 5.5%;
  border-radius: 50%;
}

/* BET CHIP MARKER */
.chip-marker-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.bet-chip-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(var(--ss) * 0.085);
  height: calc(var(--ss) * 0.085);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
}

/* TOAST */
.toast {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  transform: translate(-50%, 8px);
  max-width: 86%;
  z-index: 9;
  padding: calc(var(--ss) * 0.018) calc(var(--ss) * 0.04);
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: calc(var(--ss) * 0.034);
  font-weight: 700;
  color: #f6efdd;
  text-align: center;
  background: rgba(20, 10, 28, 0.88);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(238, 205, 120, 0.45);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* DEBUG MODE:
   Add class="debug" to body in HTML to see all hotspots.
*/
body.debug .chip-zone,
body.debug .ctrl-hotspot,
body.debug .spin-hotspot,
body.debug .lobby-hotspot {
  background: rgba(255, 0, 120, 0.28);
  outline: 1px solid #ff2d8e;
}

body.debug .zone {
  background: rgba(0, 200, 255, 0.22);
  outline: 1px solid #00e5ff;
}

body.debug .table-wrap {
  outline: 1px dashed #00e5ff;
}

body.debug .wheel-wrap {
  outline: 1px dashed #ffd24a;
}

/* ACCESSIBILITY */
.zone:focus-visible,
.chip-zone:focus-visible,
.ctrl-hotspot:focus-visible,
.spin-hotspot:focus-visible,
.lobby-hotspot:focus-visible {
  outline: 2px solid #ffd24a;
  outline-offset: -2px;
}

/* SMALL PHONE TUNING */
@media (max-height: 720px) {
  .stage {
    width: min(100vw, calc(100dvh * 840 / 1456));
  }

  .toast {
    bottom: 1%;
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .wheel-spin-layer,
  .ball-orbit {
    transition: none !important;
  }

  .toast {
    transition: none !important;
  }
}
.wheel-number-svg {
  display: none;
}
/* STEP 2 — shrink money display numbers */
.val {
  top: 70.4%;
  font-size: calc(var(--ss) * 0.036);
  letter-spacing: -0.5px;
}

.val-balance {
  left: 17.8%;
  font-size: calc(var(--ss) * 0.031);
}

.val-win {
  left: 49.3%;
  font-size: calc(var(--ss) * 0.038);
}

.val-total {
  left: 78.4%;
  font-size: calc(var(--ss) * 0.031);
}

/* FINAL MONEY SIZE FIX */
.val {
  top: 70.45%;
  letter-spacing: -0.8px;
}

.val-balance {
  left: 18.3%;
  font-size: calc(var(--ss) * 0.025);
}

.val-win {
  left: 49.3%;
  font-size: calc(var(--ss) * 0.034);
}

.val-total {
  left: 78.2%;
  font-size: calc(var(--ss) * 0.029);
}

#wheelNumberSvg,
.wheel-number-svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Smaller chips placed on table */
.bet-chip-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(var(--ss) * 0.052);
  height: calc(var(--ss) * 0.052);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 20;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
}