:root {
  color-scheme: dark;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, Arial, sans-serif;
  --gold: #ffca28;
  --wood-dark: #351200;
  --wood-mid: #6b2c00;
  --footer-height: min(51.8vw, 212px);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050200; }
button { border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; }

.launch-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  transition: opacity .55s ease, visibility .55s ease;
}
.launch-screen::before,
.launch-screen::after {
  content: "";
  position: absolute;
  width: min(130vw, 720px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #f7bd24, #fff2a6, #f7bd24, transparent);
  box-shadow: 0 0 20px #e6a300;
}
.launch-screen::before { top: 21%; transform: rotate(-4deg); }
.launch-screen::after { bottom: 21%; transform: rotate(4deg); }
.launch-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.launch-screen[hidden] { display: none; }
.launch-glow {
  position: absolute;
  width: min(85vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,177,21,.16), transparent 67%);
  animation: launchPulse 1.6s ease-in-out infinite;
}
.launch-content { position: relative; width: min(88vw, 420px); padding: 30px 22px; text-align: center; }
.launch-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.launch-rule { width: 64%; height: 1px; margin: 12px auto 19px; background: linear-gradient(90deg, transparent, #f7c132, transparent); }
.launch-game-logo { width: min(64vw, 288px); filter: drop-shadow(0 5px 8px #000); }
.launch-content p { margin: 16px 0 18px; color: #e5ae26; font-size: 11px; font-weight: 900; letter-spacing: .28em; }
.launch-content small { display: block; margin-top: 10px; color: #776c58; font: 10px Arial, sans-serif; letter-spacing: .08em; }
.loading-track { width: 78%; height: 5px; margin: auto; overflow: hidden; border-radius: 9px; background: #17130d; box-shadow: inset 0 1px 4px #000; }
.loading-track span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #9e6200, #ffd85f, #fff1ae); box-shadow: 0 0 12px #ffc124; animation: loadProgress 1.65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes loadProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes launchPulse { 50% { transform: scale(1.12); opacity: .7; } }

.game-shell {
  position: relative;
  width: min(100vw, 450px);
  height: 100dvh;
  min-height: 650px;
  margin: 0 auto;
  overflow: hidden;
  color: #fff;
  background: #5c2900 url('/assets/game/wood-bg.webp') center / cover no-repeat;
  box-shadow: 0 0 80px #000;
  isolation: isolate;
}
.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,204,71,.14), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 15%, transparent 85%, rgba(0,0,0,.22));
}

.game-header { position: relative; height: min(21.3vw, 96px); min-height: 76px; }
.game-logo { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: min(68.8vw, 310px); height: auto; filter: drop-shadow(0 5px 5px rgba(0,0,0,.65)); }
.brand-chip { position: absolute; z-index: 2; left: 7px; top: 10px; width: min(18vw, 72px); height: min(7vw, 27px); overflow: hidden; border: 1px solid rgba(247,193,50,.8); border-radius: 3px; background: #000; box-shadow: 0 3px 7px rgba(0,0,0,.7); }
.brand-chip img { width: 100%; height: 100%; object-fit: cover; }
.menu-button { position: absolute; z-index: 3; right: 12px; top: min(5.3vw, 24px); width: 31px; height: 31px; display: grid; align-content: center; gap: 5px; background: transparent; }
.menu-button span { display: block; width: 25px; height: 2px; margin-left: auto; background: #fff; box-shadow: 0 1px 2px #321300; }
.environment-toggle { position:absolute; z-index:9; left:7px; top:min(19.2vw,86px); height:25px; display:flex; align-items:center; gap:6px; padding:0 9px; border:1px solid rgba(237,195,80,.58); border-radius:13px; color:#e9d9aa; background:rgba(35,11,0,.82); box-shadow:0 3px 8px rgba(0,0,0,.45); font:800 min(2.65vw,11px)/1 Arial,sans-serif; letter-spacing:.04em; }
.environment-toggle i { width:7px; height:7px; border-radius:50%; background:#68df8f; box-shadow:0 0 7px #68df8f; }
.environment-toggle.demo { color:#eadcff; border-color:#a77bf1; background:rgba(40,17,70,.9); }
.environment-toggle.demo i { background:#bd92ff; box-shadow:0 0 8px #bd92ff; }
.environment-toggle:disabled { display:none; }
.demo-watermark { position:absolute; z-index:2; left:50%; top:min(20vw,90px); transform:translateX(-50%); visibility:hidden; opacity:0; color:rgba(236,219,255,.72); font:900 min(2.3vw,10px)/1 Arial,sans-serif; letter-spacing:.12em; transition:.25s; white-space:nowrap; }
.game-shell.demo-mode .demo-watermark { visibility:visible; opacity:1; }
.fairness-badge { position:absolute; z-index:9; right:7px; top:min(19.2vw,86px); padding:6px 9px; border:1px solid rgba(87,226,142,.45); border-radius:12px; color:#91efb5; background:rgba(6,36,20,.8); font:800 min(2.15vw,9px)/1 Arial,sans-serif; letter-spacing:.04em; box-shadow:0 3px 8px rgba(0,0,0,.38); }
.game-shell.demo-mode::after { content:""; position:absolute; z-index:18; inset:0; pointer-events:none; border:2px solid rgba(173,118,255,.58); box-shadow:inset 0 0 22px rgba(159,86,255,.16); }

.player-board {
  position: absolute;
  z-index: 6;
  left: -1px;
  top: min(27.6vw, 124px);
  width: min(18.2vw, 82px);
  height: min(17.35vw, 78px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 15px 12px 1px;
  color: #fff;
  background: url('/assets/game/player-board.png') center / 100% 100% no-repeat;
  font-size: min(2.8vw, 12px);
  font-family: Arial, sans-serif;
  text-shadow: 0 1px 2px #3f1800;
}
.player-board b { line-height: 1; }
.player-board strong { color: #ffd536; font-size: min(3vw, 13px); }

.mode-switch {
  position: absolute;
  z-index: 7;
  right: -1px;
  top: min(47.7vw, 215px);
  width: min(25.2vw, 113px);
  height: min(18.8vw, 84px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: min(1.2vw,5px);
  padding: min(2vw,8px) min(2.6vw,11px) min(2vw,8px) min(3vw,12px);
  overflow: hidden;
  border: 2px solid #c3801c;
  border-right: 0;
  border-radius: 42px 0 0 42px;
  color: #fff2bd;
  background: linear-gradient(145deg,#1c0900,#6f2d02 58%,#321000);
  box-shadow: inset 0 0 0 1px rgba(255,213,102,.22), 0 5px 7px rgba(0,0,0,.6);
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.6));
  transition: transform .15s ease;
}
.mode-switch:active { transform: scale(.94); }
.mode-switch:focus { outline: none; }
.mode-switch-icon { flex:0 0 min(8.6vw,38px); width:min(8.6vw,38px); aspect-ratio:1; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:2px solid #f2bc43; border-radius:50%; transform:rotate(45deg); box-shadow:0 0 7px rgba(255,195,62,.45); }
.mode-switch-icon i { display:block; background:#822ee5; }
.mode-switch-icon i:nth-child(2) { background:#d42545; }
.mode-switch-icon i:nth-child(3) { background:#e89019; }
.mode-switch-icon i:nth-child(4) { background:#4278db; }
.mode-switch-icon.icon-2 i:nth-child(1), .mode-switch-icon.icon-2 i:nth-child(3) { background:#822ee5; }
.mode-switch-icon.icon-2 i:nth-child(2), .mode-switch-icon.icon-2 i:nth-child(4) { background:#d42545; }
.mode-switch-copy { min-width:0; display:flex; flex-direction:column; align-items:center; font-family:Arial,sans-serif; line-height:.88; }
.mode-switch-copy strong { color:#ffd456; font-size:min(6vw,26px); font-weight:1000; text-shadow:0 2px #4b1700; }
.mode-switch-copy small { max-width:44px; overflow:hidden; font-size:min(2.2vw,9px); font-weight:900; letter-spacing:.06em; text-overflow:ellipsis; white-space:nowrap; }
.mode-switch-arrow { color:#ffe29a; font:900 min(7vw,30px)/1 Georgia,serif; }

.wheel-stage {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: clamp(178px, 30dvh, 254px);
  width: min(86.667vw, 390px);
  height: min(86.667vw, 390px);
  transform: translateX(-50%);
}
.wheel-rim {
  width: 100%;
  height: 100%;
  padding: min(1.1vw, 5px);
  border-radius: 50%;
  background: linear-gradient(145deg, #f4a516 0%, #7b3500 19%, #ffcb67 37%, #6f2e00 57%, #ea8c16 79%, #592100 100%);
  box-shadow: 0 min(6.1vw,27px) min(5.6vw,25px) rgba(0,0,0,.58), 0 0 13px rgba(255,194,74,.35);
}
.wheel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: min(6.65vw,30px);
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle, #8e3f04 0 60%, #6d2b00 75%, #a85b0a 100%);
  box-shadow: inset 0 0 0 min(2.5vw,11px) rgba(92,36,0,.54), inset 0 0 18px #2d0c00;
}
.wheel-inner::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: min(1.8vw,8px) solid rgba(255,181,57,.22);
  box-shadow: inset 0 0 18px rgba(255,224,140,.32);
  pointer-events: none;
}
.ring-light { position: absolute; z-index: 1; left: 50%; top: 50%; width: 96%; height: 96%; transform: translate(-50%,-50%); animation: ringRotate 18s linear infinite; opacity: .88; }
.round-panel { position:absolute; z-index:2; left:50%; top:50%; width:83%; height:83%; display:grid; transform:translate(-50%,-50%); overflow:hidden; border-radius:50%; color:#fff; background:#4a150c; box-shadow:0 0 0 min(1.7vw,7px) #2b1408,0 0 10px rgba(0,0,0,.9),inset 0 0 32px rgba(0,0,0,.34); font-family:Arial,sans-serif; }
.panel-segment { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; text-shadow:0 2px 3px rgba(0,0,0,.65); box-shadow:inset 0 0 24px rgba(0,0,0,.23); }
.panel-segment b { position:relative; z-index:1; max-width:86%; overflow:hidden; font-weight:1000; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.panel-mode-2 { grid-template-columns:1fr 1fr; }
.panel-mode-2 .panel-segment { font-size:clamp(11px,4.3vw,19px); }
.panel-mode-2 .panel-segment:first-child { justify-content:flex-start; padding-left:14%; border-right:2px solid rgba(255,255,255,.8); }
.panel-mode-2 .panel-segment:last-child { justify-content:flex-end; padding-right:14%; }
[lang="es"] .panel-mode-2 .panel-segment { font-size:clamp(9px,3.1vw,14px); }
.panel-mode-4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.panel-mode-4 .panel-segment { font-size:clamp(10px,4vw,18px); }
.panel-mode-4 .panel-segment:nth-child(1), .panel-mode-4 .panel-segment:nth-child(2) { padding-top:15%; border-bottom:2px solid rgba(255,255,255,.8); }
.panel-mode-4 .panel-segment:nth-child(3), .panel-mode-4 .panel-segment:nth-child(4) { padding-bottom:15%; }
.panel-mode-4 .panel-segment:nth-child(odd) { justify-content:flex-start; padding-left:11%; border-right:2px solid rgba(255,255,255,.8); }
.panel-mode-4 .panel-segment:nth-child(even) { justify-content:flex-end; padding-right:11%; }
[lang="es"] .panel-mode-4 .panel-segment { font-size:clamp(9px,3.1vw,14px); }
.segment-left,.segment-purple { background:radial-gradient(circle at 70% 50%,#a74cff,#5c199d 75%); }
.segment-right,.segment-red { background:radial-gradient(circle at 30% 50%,#f24d65,#9e152b 75%); }
.segment-yellow { background:radial-gradient(circle at 70% 30%,#ffb734,#cb6214 75%); }
.segment-blue { background:radial-gradient(circle at 30% 30%,#6d9eff,#2d4eaf 75%); }
.bottle-wrap { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(13.867vw,62px); height: min(42.667vw,192px); transform: translate(-50%,-50%) rotate(0deg); transform-origin: center; filter: drop-shadow(2px 7px 5px rgba(0,0,0,.72)); }
.bottle { display: block; width: 100%; height: 100%; object-fit: fill; }
.bottle-brand { position: absolute; left: 50%; top: 55%; width: 29%; height: 57%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(90deg,#0b7d3e,#2ebd61,#08703a); font: 900 min(2.35vw,10px)/1 Arial, sans-serif; letter-spacing: .03em; writing-mode: vertical-rl; text-orientation: mixed; text-shadow: 0 1px 1px #004820; }
@keyframes ringRotate { to { transform: translate(-50%,-50%) rotate(360deg); } }

.round-message {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(var(--footer-height) + min(1.3vw, 6px));
  transform: translateX(-50%);
  max-width: 64%;
  padding: 5px 13px;
  overflow: hidden;
  border-radius: 18px;
  color: #ffe5a3;
  background: rgba(55,17,0,.78);
  box-shadow: inset 0 0 0 1px rgba(255,178,54,.35), 0 3px 8px rgba(0,0,0,.45);
  font-size: min(3.2vw,13px);
  font-weight: 900;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.round-message.win { color: #fff6b8; background: rgba(22,114,36,.9); box-shadow: 0 0 14px rgba(92,255,91,.48); }
.round-message.loss { color: #ffd0d3; background: rgba(109,12,24,.88); }
.auto-button {
  position: absolute;
  z-index: 8;
  right: min(5.3vw,24px);
  bottom: min(53.33vw,240px);
  width: min(12.8vw,58px);
  height: min(13.33vw,60px);
  min-width: 48px;
  min-height: 50px;
  border: min(1.1vw,5px) solid #ffd27a;
  border-radius: 50%;
  color: white;
  background: radial-gradient(circle at 38% 30%, #ffb953, #f06c0b 62%, #a93b00);
  box-shadow: 0 3px 0 #6d2900, 0 4px 11px #2f1000;
  font-size: min(3.4vw,15px);
  font-weight: 900;
  text-shadow: 0 1px 2px #7c2500;
}
.auto-button.active { color: #2b1500; background: radial-gradient(circle at 38% 30%, #fff5a4, #ffca2a 64%, #c76b00); box-shadow: 0 0 16px #ffd54b; }

.game-footer { position: absolute; z-index: 10; left: 0; bottom: 0; width: 100%; height: var(--footer-height); color: white; background: linear-gradient(180deg, rgba(71,25,0,.93), #2b0c00 41%, #180600); box-shadow: 0 -3px 13px rgba(0,0,0,.44); }
.wallet-strip { height: min(11.8vw,53px); display: grid; grid-template-columns: 1fr 1fr; gap: min(2.4vw,11px); padding: min(2.35vw,10px) min(4.3vw,19px); background: rgba(79,31,0,.85); }
.wallet, .last-win { height: min(7.1vw,32px); display: flex; align-items: center; gap: 5px; padding: 0 min(3vw,13px); background: rgba(20,5,0,.73); border: 1px solid rgba(140,65,0,.35); font: min(3.6vw,16px) Arial, sans-serif; white-space: nowrap; }
.wallet strong, .last-win strong { color: #ffd22a; overflow: hidden; text-overflow: ellipsis; }
.wallet-icon { color: #fff; transform: rotate(90deg); }
.chip-rail { height: min(17vw,76px); display: grid; grid-template-columns: min(9vw,40px) 1fr min(9vw,40px); align-items: center; border-top: 2px solid #e7a334; border-radius: min(17vw,76px) min(17vw,76px) 0 0; background: linear-gradient(180deg,#6e2d00,#431600); box-shadow: inset 0 2px #ffca55; }
.chip-arrow { height: 100%; color: white; background: transparent; font: 900 min(11vw,48px)/1 Georgia, serif; text-shadow: 0 2px 3px #2f0b00; }
.chip-list { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; }
.chip-list::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: 0 0 min(12.7vw,57px); width: min(12.7vw,57px); height: min(12.7vw,57px); margin-left: -1px; color: #111; background: center bottom / min(11.2vw,50px) no-repeat; font: 900 min(3.35vw,15px)/1 Arial, sans-serif; text-shadow: 0 1px rgba(255,255,255,.65); transition: transform .14s ease, filter .14s ease; }
.chip span { display: grid; place-items: center; width: 100%; height: 100%; }
.chip.active { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 6px #fff3a2); }
.chip.active::after { content: ""; position: absolute; inset: 2px; border: 2px solid #fff6a0; border-radius: 50%; box-shadow: 0 0 6px #fff274; }
.chip.color-red { background-image:url('/assets/game/chip-red-32639165.png'); }
.chip.color-green { background-image:url('/assets/game/chip-green-b43c9ecc.png'); }
.chip.color-skyblue { background-image:url('/assets/game/chip-skyblue-131bcfd2.png'); }
.chip.color-black { background-image:url('/assets/game/chip-black-d5b6fe03.png'); color:#fff; text-shadow:0 1px #000; }
.chip.color-blue { background-image:url('/assets/game/chip-blue-b444e76e.png'); }
.chip.color-orange { background-image:url('/assets/game/chip-orange-d7c08eee.png'); }
.chip.color-khaki { background-image:url('/assets/game/chip-khaki-1dfa29ba.png'); }
.chip.color-yellow { background-image:url('/assets/game/chip-yellow-81ad9551.png'); }

.bet-options { display: flex; align-items: stretch; justify-content: center; gap: min(2.7vw,12px); height: min(16vw,72px); padding: 0 min(2.7vw,12px) min(2vw,9px); background: linear-gradient(#461500,#210700); }
.bet-button { position: relative; flex: 1; min-width: 0; height: min(14.3vw,64px); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: min(2.1vw,10px); box-shadow: inset 0 -5px rgba(0,0,0,.18), 0 4px 6px rgba(0,0,0,.48); font-size: min(4.7vw,21px); font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.45); transition: transform .12s, filter .12s; }
.bet-button small { font-size: .88em; line-height: .9; }
.bet-button:active { transform: translateY(3px); }
.bet-button.selected { outline: min(1.25vw,5px) solid #fff5a4; outline-offset: -2px; filter: brightness(1.12); }
.bet-button.winner { animation: winnerPulse .55s ease-in-out 2; }
.bet-button.purple { background: linear-gradient(#a43cf7,#6c23d5); }
.bet-button.red { background: linear-gradient(#e44568,#ad092d); }
.bet-button.yellow { background: linear-gradient(#ff9a22,#c85200); }
.bet-button.blue { background: linear-gradient(#55a5f2,#3342cc); }
.bet-button.middle { color: #111; background: linear-gradient(#fff,#bfc1c4); text-shadow: 0 1px white; }
.bet-options.mode-4 { gap: min(1.35vw,6px); padding-left: min(1.4vw,6px); padding-right: min(1.4vw,6px); }
.bet-options.mode-4 .bet-button { font-size: min(3.5vw,15px); }
@keyframes winnerPulse { 50% { filter: brightness(1.55); transform: scale(1.04); box-shadow: 0 0 18px #fff5aa; } }

.menu-backdrop { position: absolute; z-index: 19; inset: 0; visibility: hidden; opacity: 0; background: rgba(0,0,0,.68); transition: .25s ease; }
.side-menu { position: absolute; z-index: 20; top: 0; right: 0; width: min(78vw,330px); height: 100%; padding: 68px 22px 22px; transform: translateX(105%); background: linear-gradient(180deg,#1b0800,#080200); border-left: 2px solid #b97012; box-shadow: -14px 0 35px rgba(0,0,0,.65); transition: transform .3s ease; }
.menu-backdrop.open { visibility: visible; opacity: 1; }
.side-menu.open { transform: translateX(0); }
.menu-close { position: absolute; top: 14px; right: 17px; width: 36px; height: 36px; color: white; background: transparent; font: 300 36px/1 Arial, sans-serif; }
.menu-logo { width: 100%; height: auto; display: block; margin: 0 auto 8px; }
.menu-version { margin: 0 0 22px; color: #b68a31; text-align: center; font: 10px Arial,sans-serif; letter-spacing: .12em; }
.language-picker { width:100%; height:46px; margin-bottom:10px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #6d3b0c; border-radius:7px; color:#fff; background:linear-gradient(#5e2700,#311000); font:700 14px Arial,sans-serif; }
.language-picker select { min-width:112px; padding:7px 25px 7px 9px; border:1px solid #8b581c; border-radius:5px; color:#ffe9b0; background:#1d0800; font:700 13px Arial,sans-serif; }
.side-menu > button:not(.menu-close) { width: 100%; height: 46px; margin-bottom: 10px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #6d3b0c; border-radius: 7px; color: #fff; background: linear-gradient(#5e2700,#311000); font: 700 14px Arial,sans-serif; }
.menu-info { margin-bottom:10px; padding:12px 14px; border:1px solid #593413; border-radius:7px; background:#160600; font:11px Arial,sans-serif; }
.menu-info span { display:block; color:#816b55; }
.menu-info strong { display:block; margin-top:5px; color:#e6bd61; }
.menu-history { margin-top: 22px; padding-top: 15px; border-top: 1px solid #5d370f; }
.menu-history h2 { margin: 0 0 12px; color: #dba63b; font: 800 11px Arial,sans-serif; letter-spacing: .13em; }
.jackpot-overlay { position:absolute; z-index:40; inset:0; display:grid; place-items:center; visibility:hidden; opacity:0; overflow:hidden; background:rgba(8,1,16,.82); transition:.35s ease; }
.jackpot-overlay.show { visibility:visible; opacity:1; }
.jackpot-rays { position:absolute; width:175%; aspect-ratio:1; background:repeating-conic-gradient(from 0deg,rgba(255,211,83,.32) 0 7deg,transparent 7deg 17deg); animation:jackpotRotate 8s linear infinite; }
.jackpot-card { position:relative; width:min(83vw,350px); padding:30px 24px 27px; text-align:center; border:2px solid #ffd45f; border-radius:22px; background:linear-gradient(160deg,#3d1368,#130621 58%,#2e0d4c); box-shadow:0 0 35px rgba(255,207,74,.55),inset 0 0 40px rgba(174,87,255,.25); animation:jackpotPop .55s cubic-bezier(.17,.89,.32,1.35); }
.jackpot-card img { width:80%; display:block; margin:auto; }
.jackpot-card p { margin:17px 0 0; color:#ffd55f; font:900 min(5vw,22px)/1 Arial,sans-serif; letter-spacing:.1em; }
.jackpot-card strong { display:block; margin:8px 0 0; color:white; font:italic 900 min(19vw,82px)/1 Arial,sans-serif; text-shadow:0 0 22px #b868ff,0 4px #5d198b; }
.jackpot-card span { display:block; margin-top:9px; color:#fff0a8; font:900 min(5vw,22px)/1 Arial,sans-serif; }
.jackpot-card small { display:block; margin-top:16px; color:#b9a3ce; font:800 min(2.5vw,11px)/1 Arial,sans-serif; letter-spacing:.12em; }
@keyframes jackpotRotate { to { transform:rotate(360deg); } }
@keyframes jackpotPop { from { transform:scale(.45); opacity:0; } to { transform:scale(1); opacity:1; } }

@media (max-height: 740px) {
  :root { --footer-height: min(47vw, 188px); }
  .wheel-stage { top: 154px; width: min(72vw,324px); height: min(72vw,324px); }
  .mode-switch { top: 152px; }
  .round-message { bottom: calc(var(--footer-height) + 3px); }
  .auto-button { bottom: calc(var(--footer-height) + 7px); }
  .wallet-strip { height: 43px; padding-top: 6px; padding-bottom: 6px; }
  .chip-rail { height: 66px; }
  .bet-options { height: 61px; }
  .bet-button { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .ring-light, .launch-glow { animation: none; }
  .loading-track span { animation-duration: .1s; }
}

/* V0.9: original Bottle Spin composition (450px reference canvas). */
:root {
  --bottle-unit: min(1vw, 4.5px);
  --footer-height: calc(var(--bottle-unit) * 51.467);
}

.game-shell {
  width: min(100vw, 450px);
  height: 100dvh;
  min-height: 0;
  background: #5c2900 url('/assets/game/wood-bg.webp') center / cover no-repeat;
}
.game-shell::before {
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 12%, transparent 88%, rgba(0,0,0,.12));
}

/* The original game has no masthead. Keep an invisible 44px menu hit target. */
.game-header {
  position: absolute;
  z-index: 12;
  inset: 0 auto auto 0;
  width: calc(var(--bottle-unit) * 9.778);
  height: calc(var(--bottle-unit) * 9.778);
  min-height: 0;
  pointer-events: none;
}
.game-header .brand-chip,
.game-header .game-logo { display: none; }
.menu-button {
  left: 0;
  right: auto;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: auto;
}
.environment-toggle,
.demo-watermark,
.player-board { display: none; }

.capsule-box {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--bottle-unit) * 43.734);
  height: calc(var(--bottle-unit) * 16.267);
}
.capsule-box .mode-switch {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  flex: 0 0 calc(var(--bottle-unit) * 21.867);
  width: calc(var(--bottle-unit) * 21.867);
  height: calc(var(--bottle-unit) * 16.267);
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 calc(var(--bottle-unit) * .8) calc(var(--bottle-unit) * 1.1) rgba(0,0,0,.48));
}
.capsule-box .mode-switch.show-mode-2 { background-image: url('/assets/game/mode-2x.webp'); }
.capsule-box .mode-switch.show-mode-4 { background-image: url('/assets/game/mode-4x.webp'); }
.mode-switch-icon,
.mode-switch-copy,
.mode-switch-arrow { display: none; }
.capsule-box .mode-switch:active { transform: none; }

.wheel-stage {
  top: calc(var(--bottle-unit) * 15.02);
  width: calc(var(--bottle-unit) * 86.667);
  height: calc(var(--bottle-unit) * 86.667);
}
.wheel-rim {
  padding: calc(var(--bottle-unit) * 1.067);
  background: linear-gradient(180deg,#dd7800,#e9af48,#a25d00,#d98729);
  box-shadow: 0 calc(var(--bottle-unit) * 5.9) calc(var(--bottle-unit) * 5.5) rgba(0,0,0,.56);
}
.wheel-inner {
  padding: calc(var(--bottle-unit) * 6.667);
  background: #894005;
  box-shadow: none;
}
.wheel-inner::after { display: none; }
.ring-light {
  width: calc(var(--bottle-unit) * 82.667);
  height: calc(var(--bottle-unit) * 82.667);
  opacity: 1;
}
.round-panel {
  width: calc(var(--bottle-unit) * 72);
  height: calc(var(--bottle-unit) * 72);
  display: block;
  border-radius: 50%;
  background: center / 100% 100% no-repeat;
  box-shadow: none;
}
.round-panel.panel-mode-2 { background-image: url('/assets/game/panel-2x.png'); }
.round-panel.panel-mode-4 { background-image: url('/assets/game/panel-4x.png'); }
.round-panel .panel-segment { display: none; }
.bottle-wrap {
  width: calc(var(--bottle-unit) * 18.912);
  height: calc(var(--bottle-unit) * 42.667);
}
.bottle { object-fit: contain; }

.auto-button {
  right: calc(var(--bottle-unit) * 5.333);
  bottom: calc(var(--bottle-unit) * 53.333);
  width: calc(var(--bottle-unit) * 12.8);
  height: calc(var(--bottle-unit) * 13.333);
  min-width: 0;
  min-height: 0;
  border-width: calc(var(--bottle-unit) * 1.067);
  font-size: calc(var(--bottle-unit) * 3.333);
}
.round-message {
  bottom: calc(var(--footer-height) + calc(var(--bottle-unit) * 1.333));
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.round-message.win,
.round-message.loss { opacity: 1; }

/* The reference game does not show a per-round status toast above the wheel. */
.round-message,
.round-message.win,
.round-message.loss {
  display: none !important;
}

.game-footer {
  height: var(--footer-height);
  overflow: visible;
  background: linear-gradient(180deg, rgba(81,35,0,.94) 0 23%, #381500 23% 56%, #200800 56% 100%);
  box-shadow: 0 calc(var(--bottle-unit) * -.7) calc(var(--bottle-unit) * 2.8) rgba(0,0,0,.45);
}
.wallet-strip {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--bottle-unit) * 11.733);
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--bottle-unit) * 2.4);
  padding: calc(var(--bottle-unit) * 2.4) calc(var(--bottle-unit) * 4.267);
  background: #512300;
}
.wallet,
.last-win {
  height: calc(var(--bottle-unit) * 6.933);
  padding: 0 calc(var(--bottle-unit) * 2.889);
  border: 1px solid rgba(140,65,0,.35);
  background: #341300;
  font-size: calc(var(--bottle-unit) * 3.556);
}
.wallet-icon {
  position: relative;
  width: calc(var(--bottle-unit) * 3.733);
  height: calc(var(--bottle-unit) * 3.733);
  flex: 0 0 calc(var(--bottle-unit) * 3.733);
  border: calc(var(--bottle-unit) * .4) solid #f4aa00;
  border-radius: 50%;
  color: transparent;
  background: radial-gradient(circle at 35% 28%,#fff5a8 0 12%,#ffd739 30%,#ef9c00 72%,#9a4c00 100%);
  box-shadow: inset 0 0 0 calc(var(--bottle-unit) * .267) rgba(255,247,143,.55),0 calc(var(--bottle-unit) * .267) calc(var(--bottle-unit) * .533) rgba(0,0,0,.5);
  transform: none;
}
.wallet-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: calc(var(--bottle-unit) * .4);
  height: 64%;
  border-radius: 99px;
  background: rgba(168,91,0,.48);
  transform: translateX(-50%);
}
.chip-rail {
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(var(--bottle-unit) * 11.733);
  width: 100%;
  height: calc(var(--bottle-unit) * 17.067);
  grid-template-columns: calc(var(--bottle-unit) * 8.533) 1fr calc(var(--bottle-unit) * 8.533);
  border-top: calc(var(--bottle-unit) * .444) solid #a75d00;
  border-radius: calc(var(--bottle-unit) * 8) calc(var(--bottle-unit) * 8) 0 0;
  background: linear-gradient(180deg,#592700,#381900);
  box-shadow: inset 0 calc(var(--bottle-unit) * .444) #e1a242;
}
.chip-arrow {
  width: calc(var(--bottle-unit) * 7.467);
  height: calc(var(--bottle-unit) * 7.467);
  align-self: center;
  justify-self: center;
  font-size: calc(var(--bottle-unit) * 10.667);
}
.chip-list { height: 100%; }
.chip {
  flex-basis: calc(var(--bottle-unit) * 12.8);
  width: calc(var(--bottle-unit) * 12.8);
  height: calc(var(--bottle-unit) * 12.8);
  background-size: calc(var(--bottle-unit) * 11.2);
  font-size: calc(var(--bottle-unit) * 3.333);
}
.chip.active {
  transform: none;
  filter: none;
}
.chip.active::after {
  inset: auto;
  left: 0;
  top: calc(var(--bottle-unit) * .267);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #fffa9d;
  border-radius: 100%;
  box-shadow: 0 0 calc(var(--bottle-unit) * 1.6) #fffa9d;
}
.bet-result {
  position: absolute;
  z-index: 3;
  left: calc(var(--bottle-unit) * 3.333);
  top: calc(var(--bottle-unit) * 14.667);
  width: calc(var(--bottle-unit) * 93.333);
  height: calc(var(--bottle-unit) * 12.267);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: calc(var(--bottle-unit) * .667) solid #b86a00;
  border-radius: calc(var(--bottle-unit) * 6.4) calc(var(--bottle-unit) * 6.4) 0 0;
  color: #fff;
  background: #050505;
  font: 700 calc(var(--bottle-unit) * 4.267)/normal Roboto,Arial,sans-serif;
}
.bet-result-choose {
  flex: 0 0 calc(var(--bottle-unit) * 20);
  width: calc(var(--bottle-unit) * 20);
  margin-left: calc(var(--bottle-unit) * 5.333);
  text-align: left;
}
.result-bottle {
  position: relative;
  flex: 0 0 calc(var(--bottle-unit) * 26.667);
  width: calc(var(--bottle-unit) * 26.667);
  height: calc(var(--bottle-unit) * 9.333);
}
.result-bottle-body,
.result-bottle-neck,
.result-bottle-head { position: absolute; display: block; }
.result-bottle-body {
  z-index: 2;
  left: 0;
  top: 50%;
  width: calc(var(--bottle-unit) * 21.333);
  height: calc(var(--bottle-unit) * 6.933);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--bottle-unit) * 1.867) 0 calc(var(--bottle-unit) * 1.333);
  transform: translateY(-50%);
  border-radius: calc(var(--bottle-unit) * 2.133);
  font: 700 calc(var(--bottle-unit) * 3.2)/normal Roboto,Arial,sans-serif;
}
.result-bottle-body b { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: clip; white-space: nowrap; }
.result-bottle-body b:last-child { flex: 0 0 auto; }
.result-bottle-neck {
  left: calc(var(--bottle-unit) * 21.333);
  top: 50%;
  width: calc(var(--bottle-unit) * 4);
  height: calc(var(--bottle-unit) * 9.333);
  margin-left: calc(var(--bottle-unit) * 1.333);
  transform: translateY(-50%) rotate(90deg);
  clip-path: polygon(25% 0,75% 0,100% 100%,0 100%);
}
.result-bottle-head {
  left: calc(var(--bottle-unit) * 28.8);
  top: 50%;
  width: calc(var(--bottle-unit) * .533);
  height: calc(var(--bottle-unit) * 2.933);
  transform: translateY(-50%);
  border-radius: calc(var(--bottle-unit) * .267);
}
.result-purple .result-bottle-body,
.result-purple .result-bottle-neck,
.result-purple .result-bottle-head { background: linear-gradient(#9635ef,#7733dd); }
.result-red .result-bottle-body,
.result-red .result-bottle-neck,
.result-red .result-bottle-head { background: linear-gradient(#db3b5e,#ac082a); }
.result-yellow .result-bottle-body,
.result-yellow .result-bottle-neck,
.result-yellow .result-bottle-head { background: linear-gradient(#f27a1c,#c15400); }
.result-blue .result-bottle-body,
.result-blue .result-bottle-neck,
.result-blue .result-bottle-head { background: linear-gradient(#4b94e7,#3344cf); }
.result-middle .result-bottle-body,
.result-middle .result-bottle-neck,
.result-middle .result-bottle-head { color:#000; background: linear-gradient(#fff,#c1c1c1); }
.bet-result em {
  flex: 0 0 calc(var(--bottle-unit) * 26.667);
  width: calc(var(--bottle-unit) * 26.667);
  color: #ffe52f;
  font-style: normal;
  white-space: nowrap;
}
.game-footer.round-complete .chip-rail,
.game-footer.bet-placed .chip-rail { display: none; }
.game-footer.round-complete .bet-result,
.game-footer.bet-placed .bet-result { display: flex; }

.bet-options {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: calc(var(--bottle-unit) * 2.667);
  width: 100%;
  height: calc(var(--bottle-unit) * 16);
  gap: calc(var(--bottle-unit) * 3.6);
  padding: 0 calc(var(--bottle-unit) * 1.333);
  background: transparent;
}
.bet-button {
  flex: 0 0 calc(var(--bottle-unit) * 29.333);
  height: calc(var(--bottle-unit) * 16);
  padding: 0 calc(var(--bottle-unit) * 2.667);
  overflow: visible;
  border: 0;
  border-radius: calc(var(--bottle-unit) * 2.133);
  box-shadow: none;
  font: 700 calc(var(--bottle-unit) * 4.8)/normal Roboto,Arial,sans-serif;
  text-shadow: none;
}
.bet-button::before {
  display: none;
}
.bet-button small { font-size: 1em; line-height: normal; }
.bet-button:active { transform: none; }
.bet-button.selected { outline: 0; filter: none; }
.bet-button.purple { background: linear-gradient(#9635ef,#7733dd); }
.bet-button.red { background: linear-gradient(#db3b5e,#ac082a); }
.bet-button.yellow { background: linear-gradient(#f27a1c,#c15400); }
.bet-button.blue { background: linear-gradient(#4b94e7,#3344cf); }
.bet-button.middle { color:#111; background: linear-gradient(#fff,#c1c1c1); text-shadow:none; }
.bet-options.mode-4 {
  gap: calc(var(--bottle-unit) * 2.133);
  padding: 0 calc(var(--bottle-unit) * 1.333);
}
.bet-options.mode-4 .bet-button {
  flex-basis: calc(var(--bottle-unit) * 17.333);
  font-size: calc(var(--bottle-unit) * 3.733);
}
.bet-options.round-actions {
  gap: calc(var(--bottle-unit) * 3.6);
  padding: 0 calc(var(--bottle-unit) * 1.333);
}
.bet-options.round-actions .bet-button {
  flex-basis: calc(var(--bottle-unit) * 29.333);
  font-size: calc(var(--bottle-unit) * 4.8);
  line-height: normal;
  box-shadow: 0 0 0 calc(var(--bottle-unit) * 1.067) rgba(0,0,0,.2);
}
.bet-options.round-actions .action-rebet,
.bet-options.round-actions .action-double { background: linear-gradient(#51c751,#0c840c); }
.bet-options.round-actions .action-new {
  background: linear-gradient(#f27a1c,#c15400);
  font-size: calc(var(--bottle-unit) * 4.267);
}
.bet-options.round-actions .bet-button:disabled {
  opacity: .42;
  filter: grayscale(.35);
}
.bet-hint {
  position: absolute;
  z-index: 4;
  left: calc(var(--bottle-unit) * 21.333);
  right: auto;
  bottom: calc(var(--bottle-unit) * -6.667);
  width: calc(var(--bottle-unit) * 13.333);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--bottle-unit) * 1.1) calc(var(--bottle-unit) * 1.2) rgba(0,0,0,.55));
  transition: left .3s cubic-bezier(.12,.78,.53,.92), opacity .2s ease, visibility .2s ease;
}
.bet-hint.is-hidden { visibility: hidden; opacity: 0; }

.round-outcome-overlay {
  position: absolute;
  z-index: 35;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  background: rgba(0,0,0,.1);
  pointer-events: none;
}
.round-outcome-overlay.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: outcomeFadeIn .35s ease both;
}
.round-outcome-overlay.is-closing {
  animation: none;
}
.win-outcome,
.lose-outcome { display: none; }
.round-outcome-overlay.is-win .win-outcome {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--bottle-unit) * 100);
  height: calc(var(--bottle-unit) * 115.733);
  display: block;
  transform: translate(-50%,-50%);
  animation: outcomeBounceWin .8s both;
}
.win-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--bottle-unit) * 125.067);
  height: calc(var(--bottle-unit) * 122.667);
  transform: translate(-50%,-50%);
  animation: outcomeLight 3s linear infinite;
}
.win-coins {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: calc(var(--bottle-unit) * 100);
  height: calc(var(--bottle-unit) * 87.2);
  transform: translate(-50%,-50%);
  background: url('/assets/game/coins-frames.png') 0 0 / cover no-repeat;
  animation: outcomeCoins 1.5s steps(20) infinite;
}
.win-congrats {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--bottle-unit) * 8);
  width: calc(var(--bottle-unit) * 93.867);
  height: calc(var(--bottle-unit) * 56.533);
  transform: translateX(-50%);
}
.win-bonus-card {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--bottle-unit) * 45.6);
  width: calc(var(--bottle-unit) * 69.333);
  height: calc(var(--bottle-unit) * 35.733);
  transform: translateX(-50%);
  border-radius: calc(var(--bottle-unit) * 2.133);
  color: #ffe138;
  background: linear-gradient(180deg,#7b40ff,#3d265a);
  text-align: center;
  font-family: Arial,sans-serif;
}
.win-bonus-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--bottle-unit) * -2.667) calc(var(--bottle-unit) * -2.133);
  border-radius: calc(var(--bottle-unit) * 4.8);
  background: linear-gradient(180deg,#8a27f1,#5a23bf);
  box-shadow: 0 calc(var(--bottle-unit) * 3.2) calc(var(--bottle-unit) * 2.667) rgba(0,0,0,.5);
}
.win-bonus-card span {
  display: block;
  padding-top: calc(var(--bottle-unit) * 8.8);
  font-size: calc(var(--bottle-unit) * 6.133);
  font-weight: 700;
  line-height: calc(var(--bottle-unit) * 7.467);
  letter-spacing: calc(var(--bottle-unit) * .267);
  text-shadow: 0 calc(var(--bottle-unit) * .533) calc(var(--bottle-unit) * 1.067) rgba(0,0,0,.5);
}
.win-bonus-card strong {
  display: block;
  margin-top: calc(var(--bottle-unit) * -1.6);
  overflow: hidden;
  font-size: calc(var(--bottle-unit) * 9.6);
  line-height: calc(var(--bottle-unit) * 16.267);
  text-overflow: ellipsis;
  text-shadow: 0 calc(var(--bottle-unit) * .533) calc(var(--bottle-unit) * 1.067) rgba(0,0,0,.5);
  white-space: nowrap;
}
.round-outcome-overlay.is-lose .lose-outcome {
  position: absolute;
  left: 50%;
  top: calc(var(--bottle-unit) * 45.333);
  width: calc(var(--bottle-unit) * 61.867);
  height: calc(var(--bottle-unit) * 13.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  color: #fff;
  background: url('/assets/game/lose-banner.png') center / 100% 100% no-repeat;
  font: 900 calc(var(--bottle-unit) * 4.267)/1 Arial,sans-serif;
  text-shadow: 0 2px 3px rgba(31,0,79,.65);
  animation: outcomeBounceLose .8s both;
}
.round-outcome-overlay.show.is-closing .win-outcome { animation: outcomeZoomOutWin .8s ease both; }
.round-outcome-overlay.show.is-closing .lose-outcome { animation: outcomeZoomOutLose .8s ease both; }
@keyframes outcomeFadeIn { from { opacity:0; } }
@keyframes outcomeBounceWin {
  0%,60%,75%,90%,to { animation-timing-function:cubic-bezier(.215,.61,.355,1); }
  0% { opacity:0; transform:translate(-50%,calc(-50% - 100vh)) scaleY(3); }
  60% { opacity:1; transform:translate(-50%,calc(-50% + calc(var(--bottle-unit) * 6.667))) scaleY(.9); }
  75% { transform:translate(-50%,calc(-50% - calc(var(--bottle-unit) * 2.667))) scaleY(.95); }
  90% { transform:translate(-50%,calc(-50% + calc(var(--bottle-unit) * 1.333))) scaleY(.985); }
  to { opacity:1; transform:translate(-50%,-50%); }
}
@keyframes outcomeBounceLose {
  0%,60%,75%,90%,to { animation-timing-function:cubic-bezier(.215,.61,.355,1); }
  0% { opacity:0; transform:translate(-50%,-100vh) scaleY(3); }
  60% { opacity:1; transform:translate(-50%,calc(var(--bottle-unit) * 6.667)) scaleY(.9); }
  75% { transform:translate(-50%,calc(var(--bottle-unit) * -2.667)) scaleY(.95); }
  90% { transform:translate(-50%,calc(var(--bottle-unit) * 1.333)) scaleY(.985); }
  to { opacity:1; transform:translateX(-50%); }
}
@keyframes outcomeZoomOutWin {
  0% { opacity:1; transform:translate(-50%,-50%); }
  50%,to { opacity:0; transform:translate(-50%,-50%) scale3d(.3,.3,.3); }
}
@keyframes outcomeZoomOutLose {
  0% { opacity:1; transform:translateX(-50%); }
  50%,to { opacity:0; transform:translateX(-50%) scale3d(.3,.3,.3); }
}
@keyframes outcomeLight { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes outcomeCoins { to { background-position:100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ring-light,
  .bet-hint,
  .win-light,
  .win-coins,
  .launch-glow { animation: none; }
}

/* V0.12: complete original scroll composition (header, ticker and live-player rail). */
.game-shell {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.game-shell::-webkit-scrollbar { display: none; }

.game-header {
  position: relative;
  z-index: 12;
  inset: auto;
  width: 100%;
  height: calc(var(--bottle-unit) * 18.133);
  min-height: 0;
  pointer-events: auto;
}
.game-header .game-logo {
  display: block;
  width: calc(var(--bottle-unit) * 68.8);
  height: calc(var(--bottle-unit) * 18.133);
  margin: 0 auto;
  object-fit: contain;
}
.menu-button {
  left: auto;
  right: calc(var(--bottle-unit) * 2.667);
  top: calc(var(--bottle-unit) * 5.333);
  width: calc(var(--bottle-unit) * 6.933);
  height: calc(var(--bottle-unit) * 6.933);
  opacity: 1;
  background: url('/assets/game/menu-icon.png') center / 100% 100% no-repeat;
}
.menu-button span { display: none; }

.notice-list {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(var(--bottle-unit) * 5.333);
  min-height: 0;
  margin-top: calc(var(--bottle-unit) * 1.333);
  overflow: hidden;
  color: rgba(255,255,255,.8);
  font: 400 calc(var(--bottle-unit) * 3.2)/calc(var(--bottle-unit) * 4.267) Arial,sans-serif;
  white-space: nowrap;
}
.notice-track {
  position: absolute;
  display: flex;
  width: max-content;
  animation: winnerTicker 26s linear infinite;
}
.notice-track span { margin-right: calc(var(--bottle-unit) * 16); }
.notice-track b { color: #ffd22e; font-weight: 400; }
@keyframes winnerTicker { to { transform: translateX(-50%); } }

.player-board {
  position: relative;
  z-index: 2;
  left: auto;
  top: auto;
  width: 100%;
  height: calc(var(--bottle-unit) * 17.333);
  margin-top: calc(var(--bottle-unit) * 4);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  font-family: Arial,sans-serif;
}
.game-player-nums {
  flex: 0 0 calc(var(--bottle-unit) * 18.133);
  height: calc(var(--bottle-unit) * 17.333);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--bottle-unit) * .8) calc(var(--bottle-unit) * 2.667) calc(var(--bottle-unit) * 2.933) 0;
  background: url('/assets/game/player-board.png') center / cover no-repeat;
  font-size: calc(var(--bottle-unit) * 2.933);
}
.game-player-nums b { line-height: 1; font-weight: 900; }
.game-player-nums strong { color: #ffd536; font-size: calc(var(--bottle-unit) * 2.933); line-height: 1; }
.other-list {
  flex: 1;
  height: 100%;
  display: flex;
  margin: 0 0 0 calc(var(--bottle-unit) * 1.333);
  padding: 0 0 calc(var(--bottle-unit) * 2.133);
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.other-list.is-dragging { cursor: grabbing; }
.other-list::-webkit-scrollbar { display: none; }
.other-user-box {
  position: relative;
  flex: 0 0 calc(var(--bottle-unit) * 14.133);
  width: calc(var(--bottle-unit) * 14.133);
  height: 100%;
  margin-right: calc(var(--bottle-unit) * 2.667);
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-name {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: calc(var(--bottle-unit) * 13.867);
  height: calc(var(--bottle-unit) * 3.467);
  padding: 0 calc(var(--bottle-unit) * .267);
  overflow: hidden;
  color: rgba(255,255,255,.72);
  background: linear-gradient(90deg,transparent,#7a3901 18%,#7c3b03 85%,transparent);
  font-size: calc(var(--bottle-unit) * 1.8);
  letter-spacing: -.025em;
  line-height: calc(var(--bottle-unit) * 3.467);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-name::before,
.user-name::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,transparent,#ff7c00,transparent);
}
.user-name::before { top: 0; }
.user-name::after { bottom: 0; }
.avatar {
  width: calc(var(--bottle-unit) * 12.8);
  height: calc(var(--bottle-unit) * 12.8);
  padding: calc(var(--bottle-unit) * 1.067);
  overflow: hidden;
  border-radius: 50%;
  background: url('/assets/game/avatar-bg.png') center / cover no-repeat;
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.user-bet {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: calc(var(--bottle-unit) * 14.667);
  height: calc(var(--bottle-unit) * 3.467);
  display: grid;
  place-items: center;
  border-radius: calc(var(--bottle-unit) * 1.867);
  color: #ffd338;
  background: #944a04;
  box-shadow: 0 calc(var(--bottle-unit) * 2.133) calc(var(--bottle-unit) * 1.067) rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.5);
  font-size: calc(var(--bottle-unit) * 2.667);
  line-height: 1;
}
.rank {
  position: absolute;
  z-index: 4;
  top: calc(var(--bottle-unit) * 2.667);
  right: 0;
  width: calc(var(--bottle-unit) * 4.267);
  height: calc(var(--bottle-unit) * 4.8);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.rank-1 { background-image: url('/assets/game/rank-1.png'); }
.rank-2 { background-image: url('/assets/game/rank-2.png'); }
.rank-3 { background-image: url('/assets/game/rank-3.png'); }
.rank-normal {
  width: calc(var(--bottle-unit) * 3.733);
  height: calc(var(--bottle-unit) * 3.733);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #644cf5;
  font: 700 calc(var(--bottle-unit) * 2.933)/1 Arial,sans-serif;
}

.panel-index {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 200%;
  box-sizing: content-box;
  padding-top: calc(var(--bottle-unit) * 18.667);
  padding-bottom: calc(var(--bottle-unit) * 53.333);
  transition: transform .3s ease-in-out;
}
.panel-index .capsule-box {
  top: calc(var(--bottle-unit) * 5.333);
  left: calc(50% - calc(var(--bottle-unit) * 21.867));
  right: auto;
}
.panel-index .wheel-stage {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 50%;
  width: 50%;
  height: calc(var(--bottle-unit) * 86.667);
  transform: none;
}
.panel-index .wheel-rim {
  width: calc(var(--bottle-unit) * 86.667);
  height: calc(var(--bottle-unit) * 86.667);
  margin: 0 auto;
}
.auto-button {
  position: fixed;
  z-index: 14;
  left: calc(50% + calc(var(--bottle-unit) * 32));
  right: auto;
  bottom: calc(var(--bottle-unit) * 53.333);
  border: 0;
  border-radius: 0;
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: url('/assets/game/auto-button.png') center / 100% 100% no-repeat;
  box-shadow: none;
  font-family: Roboto,Arial,sans-serif;
  font-size: calc(var(--bottle-unit) * 3.733);
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.auto-button > span {
  display: block;
  margin-top: calc(var(--bottle-unit) * -1.333);
}
.auto-button.active {
  color: #fff;
  background: url('/assets/game/auto-button.png') center / 100% 100% no-repeat;
  box-shadow: none;
  filter: none;
}
.auto-highlight {
  position: fixed;
  z-index: 13;
  left: calc(50% + calc(var(--bottle-unit) * 38.4));
  bottom: calc(var(--bottle-unit) * 60);
  width: calc(var(--bottle-unit) * 18.667);
  height: calc(var(--bottle-unit) * 18.667);
  display: none;
  pointer-events: none;
  background-image: url('data:image/png;base64,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');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate(-50%,50%);
}
.auto-button.active + .auto-highlight {
  display: block;
  animation: autoRoundHighlight 2s linear infinite;
}
@keyframes autoRoundHighlight {
  from { transform: translate(-50%,50%) rotate(0deg); }
  to { transform: translate(-50%,50%) rotate(360deg); }
}

.game-footer {
  position: fixed;
  left: calc(50% - min(50vw,225px));
  bottom: 0;
  width: min(100vw,450px);
  height: calc(var(--bottle-unit) * 42.667);
  background: url('/assets/game/footer-bg.png') center / cover no-repeat;
  box-shadow: none;
}
.wallet-strip {
  position: fixed;
  z-index: 9;
  left: calc(50% - min(50vw,225px));
  top: auto;
  bottom: calc(var(--bottle-unit) * 29.333);
  width: min(100vw,450px);
  height: calc(var(--bottle-unit) * 22.133);
  padding: calc(var(--bottle-unit) * 2.4) calc(var(--bottle-unit) * 4.267);
  background: #512300;
}
.chip-rail {
  top: calc(var(--bottle-unit) * 5.867);
  height: calc(var(--bottle-unit) * 13.333);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bet-options {
  bottom: calc(var(--bottle-unit) * 2.667);
  height: calc(var(--bottle-unit) * 18.133);
  align-items: center;
}
.bet-result { top: calc(var(--bottle-unit) * 5.867); }
.bet-hint {
  position: fixed;
  left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 21.333));
}
.bet-hint.mode-2.guide-0 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 21.333)); }
.bet-hint.mode-2.guide-1 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 53.333)); }
.bet-hint.mode-2.guide-2 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 85.333)); }
.bet-hint.mode-4.guide-0 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 13.333)); }
.bet-hint.mode-4.guide-1 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 32)); }
.bet-hint.mode-4.guide-2 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 50.667)); }
.bet-hint.mode-4.guide-3 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 69.333)); }
.bet-hint.mode-4.guide-4 { left: calc(50% - min(50vw,225px) + calc(var(--bottle-unit) * 88)); }

.menu-backdrop,
.side-menu,
.round-outcome-overlay,
.jackpot-overlay { position: fixed; }
.menu-backdrop,
.round-outcome-overlay,
.jackpot-overlay {
  left: calc(50% - min(50vw,225px));
  right: auto;
  width: min(100vw,450px);
}
.side-menu {
  right: calc(50% - min(50vw,225px));
  visibility: hidden;
}
.side-menu.open { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .notice-track { animation: none; }
}

/* Original compact drop menu. */
.menu-backdrop { display: none !important; }
.side-menu {
  position: absolute;
  z-index: 99;
  top: calc(var(--bottle-unit) * 14.667);
  right: calc(var(--bottle-unit) * 5.333);
  width: calc(var(--bottle-unit) * 42.667);
  height: auto;
  padding: calc(var(--bottle-unit) * 2.667) 0;
  visibility: hidden;
  overflow: visible;
  border: 0;
  border-radius: calc(var(--bottle-unit) * 2.133);
  background: linear-gradient(180deg,#bd7317,#a7630d);
  box-shadow: none;
  transform: scale(.92);
  transform-origin: top right;
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.side-menu.open {
  visibility: visible;
  transform: scale(1);
  opacity: 1;
}
.menu-close,
.side-menu .language-picker,
.side-menu .menu-info,
.side-menu #reset-button,
.side-menu > [data-sound-state] { display: none !important; }
.side-menu > button:not(.menu-close) {
  width: 86%;
  height: calc(var(--bottle-unit) * 8.533);
  margin: calc(var(--bottle-unit) * 2.667) auto 0;
  padding: 0;
  display: block;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: calc(var(--bottle-unit) * 2.133);
  color: #fff;
  background: transparent;
  font: 500 calc(var(--bottle-unit) * 3.733)/calc(var(--bottle-unit) * 8.533) Arial,sans-serif;
  text-align: center;
}
.side-menu > button:not(.menu-close):active { background: #8d5109; }

/* Original Sound control opens as a separate modal. */
.sound-dialog {
  position: fixed;
  z-index: 110;
  left: calc(50% - min(50vw,225px));
  top: 0;
  width: min(100vw,450px);
  height: 100dvh;
  display: none;
  align-items: center;
  justify-content: center;
}
.sound-dialog.open { display: flex; }
.sound-dialog-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,.7);
}
.sound-dialog-card {
  position: relative;
  width: calc(var(--bottle-unit) * 80.8);
  min-height: calc(var(--bottle-unit) * 41.6);
  overflow: hidden;
  border-radius: calc(var(--bottle-unit) * 2.133);
  color: #fff;
  background: linear-gradient(180deg,#bd7317,#a7630d);
  font-family: Arial,sans-serif;
  animation: soundDialogIn .6s cubic-bezier(.215,.61,.355,1) both;
}
.sound-dialog-card h2 {
  margin: 0;
  padding: calc(var(--bottle-unit) * 4.8) calc(var(--bottle-unit) * 6.4) calc(var(--bottle-unit) * 3.2);
  font-size: calc(var(--bottle-unit) * 4.267);
  line-height: calc(var(--bottle-unit) * 6.4);
  text-align: center;
}
.sound-dialog-close {
  position: absolute;
  z-index: 2;
  top: calc(var(--bottle-unit) * 3.2);
  right: calc(var(--bottle-unit) * 3.2);
  width: calc(var(--bottle-unit) * 6.4);
  height: calc(var(--bottle-unit) * 6.4);
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font: 300 calc(var(--bottle-unit) * 7)/1 Arial,sans-serif;
}
.sound-setting-row {
  height: calc(var(--bottle-unit) * 24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--bottle-unit) * 8.533);
  font-size: calc(var(--bottle-unit) * 4.267);
  font-weight: 700;
}
.sound-switch {
  position: relative;
  width: calc(var(--bottle-unit) * 15.467);
  height: calc(var(--bottle-unit) * 7.467);
  padding: 0;
  border: 0;
  border-radius: calc(var(--bottle-unit) * 4);
  background: #796e66;
  transition: background .2s ease;
}
.sound-switch i {
  position: absolute;
  left: calc(var(--bottle-unit) * .8);
  top: calc(var(--bottle-unit) * .533);
  width: calc(var(--bottle-unit) * 6.4);
  height: calc(var(--bottle-unit) * 6.4);
  border-radius: 50%;
  background: #6658ef;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.sound-switch.on { background: #2fd1aa; }
.sound-switch.on i { transform: translateX(calc(var(--bottle-unit) * 7.467)); }
@keyframes soundDialogIn {
  from { opacity: 0; transform: translate3d(0,calc(var(--bottle-unit) * -45),0) scaleY(1.2); }
  70% { opacity: 1; transform: translate3d(0,calc(var(--bottle-unit) * 1.333),0) scaleY(.98); }
  to { transform: translateZ(0); }
}

/* Original 10/20/50/100/infinite Auto selector. */
.auto-picker {
  position: fixed;
  z-index: 13;
  left: calc(50% - min(50vw,225px));
  top: 0;
  width: min(100vw,450px);
  height: 100dvh;
  display: none;
}
.auto-picker.open { display: block; }
.auto-picker ul {
  position: absolute;
  right: calc(var(--bottle-unit) * 5.333);
  bottom: calc(var(--bottle-unit) * 69.333);
  width: calc(var(--bottle-unit) * 22.4);
  margin: 0;
  padding: calc(var(--bottle-unit) * 1.333) 0;
  overflow: visible;
  border-radius: calc(var(--bottle-unit) * 2.667);
  background: #f29b2d;
  list-style: none;
}
.auto-picker li { height: calc(var(--bottle-unit) * 8); }
.auto-picker button {
  width: 100%;
  height: 100%;
  color: #fff;
  background: transparent;
  font: 900 calc(var(--bottle-unit) * 3.733)/1 Arial,sans-serif;
}
.auto-picker li:active { background: #b66b0d; }
.auto-picker li:last-child button { font-size: calc(var(--bottle-unit) * 6.4); }

/* Rules use the centered source-game modal geometry. */
.common-dialog {
  position: fixed;
  z-index: 60;
  left: calc(50% - min(50vw,225px));
  top: 0;
  width: min(100vw,450px);
  height: 100dvh;
  display: none;
  padding-top: calc(var(--bottle-unit) * 13.333);
  background: rgba(0,0,0,.68);
}
.common-dialog.open { display: block; }
.common-dialog-content {
  position: relative;
  width: calc(var(--bottle-unit) * 89.333);
  max-height: calc(100dvh - calc(var(--bottle-unit) * 18.667));
  margin: 0 auto;
  padding: calc(var(--bottle-unit) * 4.8) calc(var(--bottle-unit) * 2.667) calc(var(--bottle-unit) * 5.333);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: calc(var(--bottle-unit) * 2.667);
  color: #fff;
  background: linear-gradient(180deg,#7b430d,#341300);
  box-shadow: 0 calc(var(--bottle-unit) * 2.667) calc(var(--bottle-unit) * 6.667) rgba(0,0,0,.65);
}
.common-dialog h2 {
  margin: calc(var(--bottle-unit) * 2.667) 0 calc(var(--bottle-unit) * 1.067);
  text-align: center;
  font: 900 calc(var(--bottle-unit) * 4.267)/1 Arial,sans-serif;
}
.dialog-close {
  position: absolute;
  z-index: 2;
  right: calc(var(--bottle-unit) * 3.2);
  top: calc(var(--bottle-unit) * 2.133);
  width: calc(var(--bottle-unit) * 6.4);
  height: calc(var(--bottle-unit) * 6.4);
  color: #fff;
  background: transparent;
  font: 300 calc(var(--bottle-unit) * 7)/1 Arial,sans-serif;
}
.rules-content {
  max-height: 65dvh;
  overflow: auto;
  text-align: left;
}
.rules-content p {
  margin: 0;
  padding: 0 calc(var(--bottle-unit) * 2.667) calc(var(--bottle-unit) * 2.667);
  color: rgba(255,255,255,.8);
  font: 400 calc(var(--bottle-unit) * 3.733)/calc(var(--bottle-unit) * 5.6) Arial,sans-serif;
}
.rules-content p b { color: #fff; }
#history-dialog {
  padding-top: calc(var(--bottle-unit) * 7.467);
}
#history-dialog .history-dialog-card {
  width: calc(var(--bottle-unit) * 85.333);
  height: min(calc(var(--bottle-unit) * 130.667), calc(100dvh - calc(var(--bottle-unit) * 13.333)));
  max-height: none;
  padding: 0 calc(var(--bottle-unit) * 2.667) calc(var(--bottle-unit) * 2.667);
  border: 0;
  border-radius: 0 0 calc(var(--bottle-unit) * 2.133) calc(var(--bottle-unit) * 2.133);
  background: #c5740b;
  box-shadow: none;
}
#history-dialog .history-dialog-card h2 {
  height: calc(var(--bottle-unit) * 12.8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #fff;
  font: 700 calc(var(--bottle-unit) * 4.267)/1 Roboto,Arial,sans-serif;
}
#history-dialog .dialog-close {
  right: calc(var(--bottle-unit) * 2.667);
  top: calc(var(--bottle-unit) * 2.133);
  width: calc(var(--bottle-unit) * 5.333);
  height: calc(var(--bottle-unit) * 5.333);
  font: 300 calc(var(--bottle-unit) * 6.4)/1 Arial,sans-serif;
}
#history-dialog .menu-history {
  height: calc(100% - calc(var(--bottle-unit) * 12.8));
  margin: 0;
  padding: 0;
  border: 0;
}
.history-table {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: Roboto,Arial,sans-serif;
}
.history-table-head,
.history-row {
  display: grid;
  grid-template-columns: .9fr 1.05fr 1.85fr .85fr;
  align-items: center;
}
.history-table-head {
  flex: 0 0 calc(var(--bottle-unit) * 8.533);
  border-bottom: 1px solid rgba(255,194,76,.68);
  color: rgba(255,255,255,.72);
  font: 400 calc(var(--bottle-unit) * 3.2)/1.1 Roboto,Arial,sans-serif;
}
.history-table-head span,
.history-row > span {
  min-width: 0;
  text-align: center;
}
.history-table-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.history-table-body::-webkit-scrollbar { display: none; }
.history-row {
  min-height: calc(var(--bottle-unit) * 10.667);
  border-bottom: 1px solid rgba(255,194,76,.26);
  font: 700 calc(var(--bottle-unit) * 3.2)/1.1 Roboto,Arial,sans-serif;
}
.history-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--bottle-unit) * .267);
}
.history-time b { font: inherit; }
.history-row .history-outcome { color: #fff; }
.history-row.win .history-outcome { color: #ffe12d; }
.history-empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.78);
  font: 700 calc(var(--bottle-unit) * 3.2)/1 Roboto,Arial,sans-serif;
}