@font-face {
  font-family: Oswald;
  src: url("../assets/reference/Oswald-VariableFont_wght-CsAV2wvh.ttf") format("truetype");
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Oswald, Arial, sans-serif;
  user-select: none;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible {
  outline: 2px solid #f2d27b;
  outline-offset: 3px;
}
button:disabled {
  cursor: default;
  filter: grayscale(1);
  opacity: 0.45;
}
button[hidden],
[hidden] {
  display: none !important;
}
#game {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090909 url("../assets/reference/backimage-DdC5Dxft.jpg") center/100% 100%;
}
#music-player {
  position: absolute;
  z-index: 15;
  top: 0;
  left: 0;
  width: 44vh;
  height: 4.8vh;
  border-radius: 0 0 4vh 0;
  border: 1px solid #7778;
  background: #2b2b2bb0;
  display: flex;
  gap: 0.8vh;
  align-items: center;
  padding: 0.4vh 1.5vh 0.4vh 0.5vh;
  color: #edb513;
  font-size: 2vh;
}
#music-player button {
  padding: 0;
  border: 0;
  background: none;
  color: #111;
  text-shadow: 0 0 2px white;
  font-size: 2vh;
  line-height: 1;
}
#music-player button:hover {
  color: #00bfff;
}
#music-player .record {
  height: 3vh;
  width: 3vh;
  border-radius: 50%;
  background: center/contain no-repeat url("../assets/reference/vinyl-zOSboO2O.png");
  animation: turn 3s linear infinite;
  flex-shrink: 0;
}
#track-name {
  flex: 1;
  text-align: center;
}
#track-time {
  margin-left: auto;
  min-width: 6vh;
  text-align: center;
}
#music-player .record {
  animation: none;
  position: relative;
  background: none;
}
#music-player .record::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: center/contain no-repeat url("../assets/reference/vinyl-zOSboO2O.png");
  animation: turn 3s linear infinite;
  pointer-events: none;
}
#wheel-table {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
  width: 106vh;
  height: 45vh;
  background: url("../assets/reference/blackTable-BjYuDdJb.png") center -8vh/100% 174% no-repeat;
  filter: drop-shadow(0 0 1vh silver);
}
#wheel-shell {
  width: 65vh;
  height: 49vh;
  margin: auto;
  position: relative;
  bottom: 10%;
  background: #000 url("../assets/reference/roulette4-DccfIo2L.png") center 1.2vh/98% 96%;
  border-radius: 50%;
  box-shadow: inset 0 9vh 12vh #000;
}
#wheel-hub-bed {
  position: absolute;
  left: 50%;
  top: 24.8%;
  transform: translateX(-50%);
  width: 24vh;
  height: 21.4vh;
  background: center/100% 100% url("../assets/reference/roulette2-DwQ-ieg6.png");
  z-index: 4;
}
#wheel-hub {
  position: absolute;
  left: calc(50% - 9.5vh);
  top: 14%;
  width: 19vh;
  height: 19vh;
  background: center/100% 100% url("../assets/reference/wheel-BY5brURX.png");
  transform: rotateX(47deg);
  z-index: 7;
  filter: drop-shadow(0 0 1vh black);
}
#wheel-front {
  position: absolute;
  top: -2%;
  width: 65vh;
  height: 50vh;
  background: center/100% 100% url("../assets/reference/roulette1-Bhl1HvDU.png");
  z-index: 8;
  pointer-events: none;
}
#wheel-shine {
  position: absolute;
  inset: 2% 0 auto;
  width: 65vh;
  height: 45vh;
  background: center/103% 100% url("../assets/reference/roulette3-CDUchLr-.png");
  z-index: 6;
  pointer-events: none;
}
#ball-track {
  position: absolute;
  width: 41vh;
  height: 41vh;
  right: 18.5%;
  bottom: 6.8%;
  background: center/100% 100% url("../assets/reference/spinner-7VObErlX.png");
  border-radius: 50%;
  transform: rotateX(-45.2deg);
  box-shadow: inset 0 0 5vh 0.5vh black;
  z-index: 5;
}
#ball-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
#ball {
  display: none;
  position: absolute;
  left: calc(50% - 1vh);
  top: 1.8vh;
  width: 2.15vh;
  height: 2.15vh;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #f5f5f5 18%, #c7c7c7 50%, #454545);
  box-shadow:
    0.2vh 0.3vh 0.5vh #000,
    inset -0.2vh -0.3vh 0.4vh #0009;
}
#board-bed {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 58%;
}
#table-frame {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98%;
  height: 75vh;
  background: url("../assets/reference/table-BfHDEYTY.png") center/100% 100%;
  pointer-events: none;
}
#table {
  position: relative;
  margin: 1vh auto 0;
  width: 84%;
  height: 63%;
  background: url("../assets/reference/rouletteSection-DuBoBo9c.png") center/100% 100%;
  transform: perspective(6.4vh) rotateX(1deg);
  opacity: 0.7;
  clip-path: polygon(
    13.2% 0%,
    86.9% 0%,
    92.9% 24.3%,
    100% 24.5%,
    100% 75.4%,
    94.1% 100%,
    12.77% 100%,
    6% 75.6%,
    2% 75.5%,
    0 50%,
    2% 24.4%,
    7.2% 24%
  );
}
#table.spinning {
  cursor: wait;
}
.bet {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  color: transparent;
  transition: background 0.15s;
  touch-action: manipulation;
}
.bet:hover,
.bet.related {
  background: #bbbbbb55;
}
.bet:focus-visible {
  outline-offset: -2px;
}
.bet.win {
  animation: winning 0.6s ease-in-out infinite;
  background: #ffdb5680;
  box-shadow: inset 0 0 2vh #fff;
}
.hotspot {
  z-index: 5;
  border-radius: 50%;
}
.hotspot:hover {
  box-shadow: 0 0 1vh #fff;
}
.placed-chip {
  position: absolute;
  z-index: 10;
  width: 4.7vh;
  height: 4.7vh;
  transform: translate(-50%, -50%);
  background: center/contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0.3vh 0.3vh 0.3vh #000);
  animation: chip-in 0.18s ease-out;
}
.placed-chip span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #111c;
  border-radius: 1vh;
  color: #fff;
  padding: 0 0.5vh;
  min-width: 2vh;
  text-align: center;
  font-size: 1.7vh;
  line-height: 1.6;
}
#controls {
  position: absolute;
  bottom: calc(5% + env(safe-area-inset-bottom, 0px));
  width: 100%;
  height: 17%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #000000a8;
  gap: 1vh;
}
.control-bank {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-shrink: 0;
  height: 6.93vh;
  border: 0.45vh solid #777;
  border-radius: 4vh;
  background: linear-gradient(#cacaca, #888 50%, #b4b4b4);
  box-shadow: inset 0 0 0.8vh #111;
}
#left-controls {
  width: 34vh;
  position: absolute;
  left: 2.43%;
}
#right-controls {
  width: 34vh;
  position: absolute;
  right: 2.43%;
}
.round-control {
  border: 0;
  border-radius: 50%;
  height: 5vh;
  width: 5vh;
  padding: 0;
  background-color: #ffffff7a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 110%;
  box-shadow: 0 0 0.5vh 0.1vh #000;
  flex-shrink: 0;
}
.round-control:hover {
  background-color: #00c700;
}
.round-control:active {
  box-shadow: inset 0 0 1vh #000;
}
#sound,
#history,
#fullscreen {
  background-size: 60%;
}
#double {
  background-size: 50%;
}
#undo {
  background-size: 85%;
}
#clear {
  background-size: 50%;
}
#rebet {
  background-size: 90%;
}
#spin {
  height: 5.6vh;
  width: 6vh;
  background: transparent;
  border: 0;
  color: #000;
  filter: drop-shadow(0 0 1px white);
  font-size: 3.7vh;
  padding: 0;
}
#spin:hover,
#spin.spinning {
  color: #00eaff;
  text-shadow: 0 0 1vh aqua;
}
#chips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 84vh;
  height: 100%;
  padding: 0 3vh;
  gap: 1.36vh;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.chip {
  width: 7.45vh;
  height: 7.45vh;
  flex-shrink: 0;
  background: transparent center/contain no-repeat;
  border: 0;
  padding: 0;
  transition:
    transform 0.15s,
    filter 0.15s;
}
.chip.selected {
  transform: scale(1.12);
}
.chip:hover {
  transform: scale(1.12);
}
.chip:disabled {
  filter: grayscale(1);
  opacity: 0.5;
}
.round-control:disabled {
  background-color: #464646;
  box-shadow: none;
  opacity: 1;
  filter: none;
}
#stats {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90vh;
  height: 5.6%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  font-size: 2vh;
  text-shadow: 1px 1px #000;
  white-space: nowrap;
}
#result {
  position: absolute;
  z-index: 12;
  top: 4%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 27.5vh;
  height: 27.5vh;
  background: #000 url("../assets/reference/star-DbckUQZ1.png") center/90% no-repeat;
  border-radius: 50%;
  color: #f4d06f;
  text-align: center;
  transition: transform 0.4s;
  pointer-events: none;
  filter: drop-shadow(0 0 1vh #000);
}
#result::before {
  content: "";
  position: absolute;
  inset: -1.2vh;
  background: center/100% no-repeat url("../assets/reference/winBorder-UgwYSL-V.png");
  z-index: -1;
}
#result.visible {
  transform: translateX(-50%) scale(1);
}
#result-label {
  display: block;
  font-size: 2.8vh;
  line-height: 1.05;
  margin: 4vh 2vh 1vh;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#result-number {
  display: block;
  font-size: 10vh;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-shadow: 0 0.2vh #4b1b0c;
}
#result-money {
  font-size: 2vh;
  display: block;
}
#toast {
  position: absolute;
  z-index: 50;
  left: 50%;
  top: 39%;
  transform: translateX(-50%);
  padding: 1vh 3vh;
  border: 1px solid #d0b277;
  border-radius: 1vh;
  background: #000e;
  color: #e8cb8a;
  font-size: 2.3vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
#toast.visible {
  opacity: 1;
}
#bet-tooltip {
  position: fixed;
  z-index: 50;
  display: none;
  background: #000c;
  color: #fff;
  padding: 1vh 1.5vh;
  border-radius: 1vh;
  pointer-events: none;
  font-size: 1.8vh;
}
#cursor-chip {
  position: fixed;
  z-index: 40;
  width: 3vh;
  height: 3vh;
  background: center/contain no-repeat;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0.4vh 0.4vh 0.4vh #000);
}
#quick-menu {
  position: fixed;
  z-index: 60;
  padding: 1vh;
  background: #171717f5;
  border: 1px solid #aaa;
  border-radius: 2vh;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vh;
  max-width: 40vh;
  box-shadow: 0 1vh 3vh #000;
}
#quick-menu button {
  width: 5vh;
  height: 5vh;
  border: 0;
  border-radius: 50%;
  background: center/contain no-repeat transparent;
}
#quick-menu .remove-quick {
  background: #aaa;
  font-size: 3vh;
}
.screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080808 url("../assets/reference/loadingBack-BBOVKvb3.png") center/cover;
}
.language-card {
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 3px #000;
}
.language-card h1 {
  font-size: 5vh;
}
.language-card > div {
  display: flex;
  gap: 3vh;
}
.language-card button {
  font-size: 4vh;
  width: 18vh;
  height: 10vh;
  border-radius: 1.5vh;
  border: 1px solid #aaa;
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 4px #000;
  background: linear-gradient(#fff 33%, #224c9b 33%, #224c9b 66%, #b12d30 66%);
  box-shadow: 0 0.6vh 0 #222;
}
.language-card button[data-language="en"] {
  background: #193667 url("../assets/reference/en-CZTz8AUY.png") center/cover;
}
.language-card button[data-language="fr"] {
  background: linear-gradient(90deg, #234991 33%, #fff 33%, #fff 66%, #bf2335 66%);
}
#load-status {
  font-size: 2vh;
  min-height: 3vh;
}
dialog {
  color: #eee;
  background: #070707f5;
  border: 1px solid #8c8c8c;
  border-radius: 3vh;
  padding: 3vh;
  width: 84vh;
  max-width: 94vw;
  max-height: 88vh;
  box-shadow: 0 0 4vh #000;
  font-size: 2.1vh;
}
dialog::backdrop {
  background: #0008;
  backdrop-filter: blur(1vh);
}
dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
  border-bottom: 1px solid #777;
  padding-bottom: 1vh;
  margin-bottom: 2vh;
}
dialog h2 {
  margin: 0;
  font-size: 3vh;
  font-weight: 500;
}
#dialog-close {
  width: 4vh;
  height: 4vh;
  font-size: 3.5vh;
  line-height: 1;
  color: #ddd;
  background: #444;
  border: 0;
  border-radius: 50%;
  padding: 0;
}
#dialog-content {
  overflow: auto;
  max-height: 64vh;
}
#dialog-content table {
  width: 100%;
  border-collapse: collapse;
}
#dialog-content th,
#dialog-content td {
  padding: 1vh;
  text-align: left;
  border-bottom: 1px solid #555;
}
#dialog-content label {
  display: flex;
  gap: 3vh;
  align-items: center;
  justify-content: space-between;
  padding: 3vh 0;
}
#dialog-content input {
  width: 40vh;
  accent-color: #4caf50;
}
.history-round {
  border: 1px solid #555;
  border-radius: 1vh;
  margin: 1vh 0;
  padding: 1.5vh;
}
.history-round p {
  margin: 0 0 1vh;
}
.history-bet {
  display: inline-block;
  border: 1px solid #444;
  padding: 0.5vh 1vh;
  margin: 0.3vh;
  border-radius: 0.6vh;
  font-size: 1.8vh;
}
.gold {
  color: #efce70;
}
.red {
  color: #ff4b4b;
}
.green {
  color: #43df63;
}
.restart-button {
  display: block;
  margin: 3vh auto 0;
  padding: 1vh 4vh;
  background: linear-gradient(#dedede, #888);
  border: 1px solid #bbb;
  border-radius: 2vh;
  font-size: 2.5vh;
}
#rotate-mobile {
  display: none;
}
@media (orientation: portrait) {
  #rotate-mobile {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 3vh;
  }
  #rotate-mobile p {
    font-size: 4.2vh;
    font-weight: 700;
    line-height: 1.1;
  }
  #rotate-mobile small {
    display: block;
    font-size: 2.1vh;
    font-weight: 400;
    margin-top: 1.6vh;
  }
}
@media (hover: none), (pointer: coarse) {
  #cursor-chip,
  #bet-tooltip {
    display: none !important;
  }
}
@media (max-aspect-ratio: 3/2) and (orientation: landscape) {
  #chips {
    padding: 0 1vh;
    width: 70vh;
    gap: 0.5vh;
  }
  .chip {
    width: 6.8vh;
    height: 6.8vh;
  }
  #left-controls {
    width: 30vh;
  }
  #right-controls {
    width: 32vh;
  }
}
@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes winning {
  50% {
    filter: brightness(1.7);
  }
}
@keyframes chip-in {
  from {
    opacity: 0.3;
    transform: translate(-50%, -120%) scale(1.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chip,
  .bet,
  #result {
    transition: none;
  }
  .record,
  .bet.win {
    animation: none;
  }
}

/* Reference-style floating controls and overlays. */
#quick-menu {
  width:22vh;height:22vh;max-width:none;padding:0;border:0;border-radius:50%;
  background:transparent;box-shadow:none;display:block;
}
#quick-menu button {position:absolute;transform:translate(-50%,-50%);transition:filter .15s}
#quick-menu button:hover {filter:brightness(1.4)}
#quick-menu .remove-quick {left:50%;top:50%;background:#b10000;color:#111;box-shadow:0 0 1vh #000}
dialog {margin:0;position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);padding:4vh;background:linear-gradient(#0008,#000);border:.3vh solid gray;border-radius:2.3vh;color:silver;box-shadow:none}
dialog header {border:0;margin:0;padding:0}
dialog h2 {font-size:2vh;text-align:center;width:100%;margin:0 0 2vh}
#dialog-close {position:absolute;right:0;top:0;background:#b10000;color:#111;opacity:.6;border-radius:0 2vh 0 1vh;font-size:3vh}
#dialog-close:hover {opacity:1}
dialog[data-kind="sound"] {width:34.4vh}
dialog[data-kind="sound"] h2 {display:none}
dialog[data-kind="sound"] label {flex-direction:column;gap:1vh;height:10vh;padding:0;justify-content:center}
dialog[data-kind="sound"] input {width:26.4vh}
dialog[data-kind="history"] {width:78vh}
dialog[data-kind="rules"] {width:98vh}
dialog[data-kind="rules"] h2 {display:none}