:root { color-scheme: dark; font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: #08050d; color: white; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, summary:focus-visible { outline: 2px solid #ffe66d; outline-offset: 3px; }
[hidden] { display: none !important; }
.game { position: relative; width: min(100vw, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: #180b22; }
#scene { width: 100%; height: 100%; display: block; }
.loading {
  position: absolute; z-index: 5; inset: 0; display: grid; align-content: center;
  justify-items: center; gap: clamp(10px, 2.7cqw, 24px); padding: 16px;
  background: #000; text-align: center;
}
.loading-brand {
  position: relative; display: flex; align-items: baseline; gap: .12em;
  font-size: clamp(12px, 2.35cqw, 28px); font-weight: 700; letter-spacing: -.055em;
}
.loading-brand span { position: relative; padding: 0 .13em; }
.loading-brand span::before {
  content: ''; position: absolute; width: 2.55em; height: 2.55em;
  left: 48%; top: 47%; transform: translate(-50%, -50%);
  border: .12em solid #f9a029; border-radius: 50%;
}
.loading-brand span::after {
  content: ''; position: absolute; width: 1.18em; height: .97em; left: -.26em; top: -1.68em;
  background: #f9a029; clip-path: polygon(0 27%, 35% 56%, 31% 0, 60% 47%, 87% 12%, 77% 84%, 42% 100%);
}
.loading progress {
  width: clamp(94px, 20cqw, 238px); height: 4px; padding: 0; border: 0;
  border-radius: 99px; appearance: none; overflow: hidden; background: #292929; accent-color: #ffa32a;
}
.loading progress::-webkit-progress-bar { border-radius: inherit; background: #292929; }
.loading progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #ffb547, #eb8e14); }
.loading progress::-moz-progress-bar { border-radius: inherit; background: #ffa32a; }
.loading p { margin: 0; font-size: clamp(12px, 1.5cqw, 16px); }
.loading:has(#loading-retry[hidden]) p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.loading button { border: 1px solid #f5a326; border-radius: 5px; padding: 7px 13px; background: #291807; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.console { position: absolute; inset: 0; pointer-events: none; }
.console button { pointer-events: auto; }
.round {
  position: absolute; display: grid; place-items: center; aspect-ratio: 1;
  border: max(1px, .14cqw) solid #fff; border-radius: 50%;
  background: #160b068f; padding: 0; line-height: 1; text-shadow: 0 1px 2px black;
}
.round:enabled:hover, .auto:enabled:hover { background-color: #684118c4; }
.round:disabled, .auto:disabled { opacity: .55; }
.menu { width: 1.9%; left: 10.1%; top: 89.4%; font-size: 1cqw; }
.sound { width: 1.8%; left: 10.2%; top: 94.5%; }
.sound svg { width: 82%; }
.sound-muted, .sound[aria-pressed="false"] .sound-waves { display: none; }
.sound[aria-pressed="false"] .sound-muted { display: block; }
.sound-panel {
  position: absolute; z-index: 4; left: 9.8%; bottom: 14%;
  display: grid; grid-template-columns: 2.1cqw minmax(0, 1fr) 3.5cqw; align-items: center;
  gap: .85cqw; width: 21.5cqw; height: 3.2cqw; padding: 0 .65cqw;
  border-radius: .28cqw; background: #080808e8; color: white;
}
.sound-panel button { display: grid; place-items: center; border: 0; padding: 0; background: transparent; }
.sound-panel svg { width: 70%; }
.sound-panel input { width: 100%; margin: 0; accent-color: #bd151d; cursor: pointer; }
.sound-panel output { text-align: center; font-size: 1.9cqw; font-weight: 900; font-variant-numeric: tabular-nums; }
.info { width: 3.55%; left: 12.55%; top: 90.35%; font: bold italic 2.25cqw Georgia, serif; }
.minus, .plus { top: 87.15%; width: 3.85%; font-size: 2.7cqw; }
.minus { left: 67.7%; }
.plus { left: 83.05%; }
.spin { width: 9.4%; left: 72.45%; top: 82.2%; }
.spin-arrows { width: 87%; }
.spin-stop { display: none; width: 50%; color: #cc3c79; pointer-events: none; }
.spin.is-spinning .spin-stop { display: block; }
.spin.is-spinning .spin-arrows { display: none; }
.spin.original-stop svg.spin-stop, .spin.original-crown svg.spin-crown { display: none; }
.spin-crown {
  position: absolute; width: 28%; height: auto; left: -9%; top: -10%;
  filter: drop-shadow(0 1px 3px #ffda75); pointer-events: none;
}
.console .spin, .console .spin:enabled:hover { background: #09070a90; }
.original-icon .console .spin, .original-icon .console .spin:enabled:hover { background: transparent; }
.original-icon .spin-arrows { visibility: hidden; }
.auto-controls {
  position: absolute; bottom: .2%; left: 72.05%; width: 10.55%; height: 3.95%;
  display: flex; border: 1px solid #fff; border-radius: 999px; background: #09070ad9;
  pointer-events: auto;
}
.auto-controls button { border: 0; padding: 0; background: transparent; line-height: 1; }
.auto-controls .speed {
  display: grid; place-items: center; width: 21%; flex: none;
  border-right: 1px solid #fff; border-radius: 999px 36% 36% 999px;
}
.speed svg { width: 73%; }
.speed:not([data-speed="turbo"]) path:nth-child(3),
.speed[data-speed="normal"] path:nth-child(2) { opacity: .42; }
.speed:disabled { opacity: .5; }
.game.autoplay .auto-controls { z-index: 3; }
.auto-controls .auto { flex: 1; min-width: 0; border-radius: 0 999px 999px 0; font-size: 1.05cqw; white-space: nowrap; }
.speed-notice {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-content: center; gap: .75cqw; width: 26cqw; min-height: 10.7cqw;
  padding: 1cqw; border-radius: .8cqw; background: #141414c4;
  color: white; text-align: center; font-size: 1.2cqw; pointer-events: none;
}
.speed-notice strong { font-size: 3.3cqw; line-height: 1; }
.game:has(dialog[open]) .speed-notice { visibility: hidden; }
.meters { position: absolute; left: 16.85%; top: 90.25%; display: grid; gap: .03cqw; font-size: 1.53cqw; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.meters div { display: grid; grid-template-columns: 6.5cqw auto; }
.meters span { color: #ffcb55; font-weight: 400; }
.meters strong { font: 950 1.6cqw Arial, sans-serif; }
.status, .win { position: absolute; left: 32%; width: 36%; margin: 0; text-align: center; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
.status { top: 88.5%; min-height: 2.8cqw; display: grid; place-items: center; font-size: 1.2cqw; line-height: 1.05; white-space: pre-line; }
.game:has(.spin.is-spinning) .status { top: 88.1%; font-size: 2.15cqw; }
.win { top: 87.9%; color: #ffc34e; }
.win-total { font-size: 3.1cqw; line-height: 1; white-space: nowrap; }
.win-total strong { color: white; font-weight: 900; }
.win-line {
  display: flex; justify-content: center; align-items: center; gap: .35cqw;
  min-height: 2.2cqw; margin-top: .24cqw; color: white; font-size: 1.34cqw;
}
.win-line canvas { width: 5.7cqw; height: 1.9cqw; }
.bonus-spin {
  position: absolute; top: 42%; left: 41.85%; width: 16.3%; aspect-ratio: 1;
  border: 0; border-radius: 50%; background: transparent; font-size: 1.76cqw;
  font-weight: 950; text-shadow: 0 2px 3px #441200, 0 0 5px #2d0802;
}
.bonus-spin:hover { filter: brightness(1.18); }
.bonus-spin span { pointer-events: none; white-space: nowrap; font-size: 1.58cqw; }
.bonus-overlay { position: absolute; inset: 0; width: 100%; border: 0; display: grid; align-content: center; justify-items: center; gap: 1cqw; padding-top: 10cqw; background: #21060049; text-shadow: 0 3px 2px #4c1300, 0 0 12px #b84901; }
.bonus-overlay strong { color: #ffd359; font: italic 900 5.5cqw Georgia, serif; }
.bonus-overlay span { font-size: 3.5cqw; font-weight: 950; white-space: pre-line; }
.bonus-overlay small { color: #fff1c2; font-size: 1.45cqw; }
.bonus-overlay.is-intro {
  align-content: end;
  gap: .35cqw;
  padding: 0 8px .85cqw;
  background: linear-gradient(to top, #170807e6, transparent 16%);
}
.bonus-overlay.is-intro strong { display: none; }
.bonus-overlay.is-intro span { color: #ffe28e; font-size: max(12px, 2.25cqw); line-height: 1; }
.bonus-overlay.is-intro small { font-size: max(8px, 1.18cqw); line-height: 1.12; }
.game.bonus .console :is(.spin, .minus, .plus, .menu, .info, .speed) { visibility: hidden; }
.game.bonus:not(.autoplay) .auto-controls { visibility: hidden; }
.game.bonus .status { top: 85%; font-size: 1.6cqw; }
dialog { max-width: min(90%, 540px); max-height: 86%; overflow: auto; border: 2px solid #e5a83a; border-radius: 12px; padding: 18px 22px; background: #211214; box-shadow: 0 0 24px #230800; }
dialog::backdrop { background: #0b0319b0; }
dialog h1 { margin: 0 35px 12px 0; font-size: 1.35rem; color: #ffce62; }
dialog p { line-height: 1.45; }
dialog button { border: 1px solid #d99b3b; border-radius: 6px; padding: 6px 10px; background: #432a18; }
dialog .close { float: right; font-size: 1.2rem; padding: 1px 8px; }
dialog button[aria-pressed="true"] { background: #8b561d; }
#settings {
  width: 69.2cqw; height: 41cqw; max-width: calc(100vw - 12px); max-height: 90svh;
  padding: 2.9cqw 8.8cqw 2.5cqw; border: 0; border-radius: .9cqw;
  background: #070707ed; box-shadow: 0 .4cqw .8cqw #0005;
  color: #fff; transform: translateY(-2.3cqw);
  font-size: 1.32cqw; line-height: 1.15;
}
#settings::backdrop { background: transparent; }
#settings h1 {
  margin: 0; color: #ffbc27; text-align: center; text-transform: uppercase;
  font-size: 1.55cqw; font-weight: 400;
}
#settings .settings-close, #autoplay-settings .settings-close {
  position: absolute; top: 1.35cqw; right: 1.25cqw; width: 2.8cqw; height: 2.8cqw;
  min-width: 24px; min-height: 24px; padding: 0; border: 0; background: transparent;
}
.settings-close::before, .settings-close::after {
  content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background: #ddd; transform: rotate(48deg);
}
.settings-close::after { transform: rotate(-48deg); }
.settings-content {
  display: grid; grid-template-columns: 1.06fr 1fr; gap: 6cqw;
  align-items: start; margin-top: 8.5cqw;
}
.settings-bet { min-width: 0; padding-top: 1.3cqw; }
#settings .settings-history {
  display: flex; justify-content: space-between; width: 100%; padding: 1.45cqw .4cqw;
  border: 0; border-block: 1px solid #ffffff35; border-radius: 0;
  background: transparent; color: #888; font-size: 1.35cqw; text-transform: uppercase;
}
.settings-bet-label {
  margin: 1.45cqw 0; text-align: center; text-transform: uppercase;
}
.settings-bet-controls {
  display: grid; grid-template-columns: 4.7cqw minmax(0, 1fr) 4.7cqw;
  gap: 1.4cqw; align-items: center;
}
#settings .settings-bet-controls button {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0;
  border: 0; border-radius: 50%; background: #eee; color: #222;
  font-size: 3.15cqw; line-height: 1;
}
#settings .settings-bet-controls #settings-plus { background: #00b965; color: #fff; }
#settings .settings-bet-controls button:disabled { opacity: .42; }
.settings-bet-controls output {
  display: grid; place-items: center; min-height: 4.55cqw;
  border: 1px solid #ffffff48; border-radius: .65cqw; background: #1e1e1e;
  font-size: 1.64cqw; font-weight: 800; font-variant-numeric: tabular-nums;
}
.settings-options { display: grid; gap: .68cqw; }
.settings-option {
  display: grid; grid-template-columns: minmax(0, 1fr) 6.1cqw; align-items: start;
  gap: 1cqw; min-height: 4.38cqw; text-transform: uppercase;
}
.settings-option small {
  display: block; margin-top: .35cqw; color: #ccc; font-size: .92cqw; line-height: 1;
}
.settings-option input {
  appearance: none; position: relative; margin: 0; width: 6.1cqw; height: 3.05cqw;
  border-radius: .55cqw; background: #404040; cursor: pointer;
}
.settings-option input::before {
  content: 'Ⅲ'; position: absolute; display: grid; place-items: center; inset: 0 auto 0 0;
  width: 50%; border-radius: inherit; background: #fff; color: #aaa; font-size: 1.1cqw;
}
.settings-option input:checked { background: #007342; }
.settings-option input:checked::before { left: 50%; background: #00b965; color: white; }
.settings-option input:disabled { opacity: .42; cursor: default; }
.settings-option input:focus-visible { outline: 2px solid #ffe66d; outline-offset: 2px; }
#autoplay-settings {
  width: 37.8cqw; height: 34.25cqw; max-width: 92vw; max-height: 90svh;
  padding: 2.9cqw 1.8cqw 5.4cqw; border: 0; border-radius: .85cqw;
  background: #080808f0; color: #fff; transform: translateY(-2.9cqw);
  text-align: center; font-size: 1.25cqw;
}
#autoplay-settings::backdrop { background: transparent; }
#autoplay-settings h1 {
  margin: 0 2.5cqw; color: #ffbc27; font-size: 1.46cqw;
  font-weight: 400; text-transform: uppercase;
}
#autoplay-settings .settings-close { top: 1.8cqw; right: 1.6cqw; }
.autoplay-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .85cqw;
  margin: 5.4cqw 0 2.9cqw; text-align: left;
}
.autoplay-options label { display: flex; align-items: center; gap: 1.15cqw; font-size: .92cqw; text-transform: uppercase; }
.autoplay-options label:not(:last-child) span { white-space: nowrap; }
.autoplay-options label:last-child { font-size: .75cqw; }
.autoplay-options input {
  appearance: none; display: grid; place-items: center; width: 3.15cqw; aspect-ratio: 1;
  flex: none; margin: 0; border: 1px solid #ddd; border-radius: .5cqw; cursor: pointer;
}
.autoplay-options input:checked { background: #00b963; border-color: #00b963; }
.autoplay-options input:checked::before {
  content: ''; width: 53%; height: 25%; transform: translateY(-12%) rotate(-45deg);
  border: solid white; border-width: 0 0 3px 3px;
}
.autoplay-count-label { display: block; text-transform: uppercase; }
.autoplay-count {
  display: grid; grid-template-columns: minmax(0, 1fr) 5.4cqw; align-items: center;
  gap: 2cqw; margin: 2.5cqw 1.55cqw 0;
}
.autoplay-count output { font-size: 2cqw; font-weight: 900; font-variant-numeric: tabular-nums; }
#auto-count { appearance: none; width: 100%; height: 3.1cqw; margin: 0; background: transparent; cursor: pointer; }
#auto-count::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(to right, #00a564 var(--auto-fill, 71.4%), #444 var(--auto-fill, 71.4%));
}
#auto-count::-moz-range-track { height: 2px; background: #444; }
#auto-count::-moz-range-progress { height: 2px; background: #00a564; }
#auto-count::-webkit-slider-thumb {
  appearance: none; width: 3.1cqw; height: 3.1cqw; margin-top: calc(1px - 1.55cqw);
  border: 1px solid #006c42; border-radius: .5cqw;
  background: repeating-linear-gradient(to right, #fff 0 2px, transparent 2px 4px) center / 10px 10px no-repeat #00b963;
}
#auto-count::-moz-range-thumb { width: 3.1cqw; height: 3.1cqw; border: 1px solid #006c42; border-radius: .5cqw; background: #00b963; }
#autoplay-settings input:focus-visible { outline: 2px solid #ffe66d; outline-offset: 3px; }
#autoplay-settings #auto-start {
  position: absolute; left: .55cqw; right: .55cqw; bottom: .55cqw; min-height: 4.6cqw;
  border: 0; border-radius: 0 0 .55cqw .55cqw; background: #00b963; color: white; text-transform: uppercase;
}
#auto-start strong { font-size: 1.9cqw; }
@media (max-width: 600px) {
  .console .round { min-width: 24px; min-height: 24px; }
  .menu, .info { top: auto; bottom: 2%; }
  .menu { left: 2%; }
  .sound { left: 27%; top: auto; bottom: 2%; }
  .info { left: 9.5%; }
  .meters { left: 18%; }
  .minus, .plus { top: auto; bottom: 6%; }
  .minus { left: 64%; }
  .plus { left: 87%; }
  .auto-controls { width: 14%; height: max(13px, 3.8%); left: 70.1%; bottom: 0; }
  .auto-controls .auto { font-size: max(7px, 1.25cqw); }
  #settings {
    width: 88cqw; height: auto; max-height: min(51cqw, 92svh); padding: 3cqw 5cqw;
    transform: none; font-size: max(10px, 1.32cqw);
  }
  #settings h1 { font-size: max(11px, 1.55cqw); }
  .settings-content { gap: 4cqw; margin-top: 3cqw; }
  .settings-option { grid-template-columns: minmax(0, 1fr) max(27px, 6.1cqw); }
  .settings-option small { font-size: max(8px, .92cqw); }
  .settings-option input { width: max(27px, 6.1cqw); height: max(16px, 3.05cqw); }
  .settings-bet-controls { grid-template-columns: 24px minmax(0, 1fr) 24px; }
  .settings-bet-controls output { min-height: 24px; font-size: max(11px, 1.64cqw); }
  #settings .settings-history { font-size: max(10px, 1.2cqw); }
}
@media (max-width: 760px) and (orientation: portrait) {
  .sound-panel {
    left: 50%; bottom: 66px; width: min(88%, 300px); height: 46px;
    grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 7px;
    padding: 0 6px; border-radius: 6px; transform: translateX(-50%);
  }
  .sound-panel button, .sound-panel input { min-height: 44px; }
  .sound-panel svg { width: 22px; }
  .sound-panel output { font-size: 1rem; }
}