/* Supplied scene artwork with the original jackpot boxes and play controls. */
:root { --font-ui: 'Rajdhani', Arial, sans-serif; --gold: #ffe789; --panel-dark: linear-gradient(145deg, #202022c7, #070708c7 55%, #171415c7); }
body { display: grid; place-items: center; background: #09080b; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.app {
  width: min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1672 / 941));
  height: auto; aspect-ratio: 1672 / 941; margin: auto; padding: 0;
  display: block; position: relative; overflow: clip; container-type: inline-size;
}
.bg-art, .bg-art__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-art__img { object-fit: cover; object-position: center; filter: none; }
.dragon-art { position: absolute; left: 72.5%; top: 10.5%; width: 45%; height: 72%; object-fit: contain; object-position: left bottom; pointer-events: none; z-index: -1; }
.top, .status-bar, .dock { display: contents; }
.top .jackpots { position: absolute; left: 24.1%; top: 1.6%; width: 59.5%; height: 8.8%; padding: 0; margin: 0; z-index: 4; }
.jackpot-grid { display: grid; grid-template-columns: 1fr 1fr 1.08fr 1.44fr; grid-template-rows: 1fr; gap: .5cqw; width: 100%; height: 100%; }
.jackpot-tile {
  --prize-accent: #ce872f;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3px 6%; gap: .05cqw; min-width: 0; min-height: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  clip-path: polygon(6% 0,94% 0,100% 17%,100% 83%,94% 100%,6% 100%,0 83%,0 17%);
  overflow: visible; isolation: isolate; order: 0;
}
.jackpot-tile::before {
  content: ''; position: absolute; inset: 1px; width: auto; height: auto; opacity: 1;
  background: var(--panel-dark);
  clip-path: inherit; z-index: -1; box-shadow: inset 0 0 8px #000; pointer-events: none;
}
.jackpot-tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--prize-accent);
  clip-path: polygon(evenodd, 6% 0,94% 0,100% 17%,100% 83%,94% 100%,6% 100%,0 83%,0 17%,6% 0,
    6.5% 2%,1% 18%,1% 82%,6.5% 98%,93.5% 98%,99% 82%,99% 18%,93.5% 2%,6.5% 2%);
}
.jackpot-tile--flame { --prize-accent: #c5913d; }
.jackpot-tile--inferno { --prize-accent: #cf4c27; }
.jackpot-tile--dragon-crown { --prize-accent: #d9b454; }
.jackpot-tile__icon { display: none; }
.jackpot-tile__name { align-self: center; color: var(--prize-accent); font: 700 1.04cqw/1.15 Georgia, serif; letter-spacing: .045em; white-space: nowrap; text-shadow: 0 1px 1px #000; }
.jackpot-tile__val, .jackpot-tile--dragon-crown .jackpot-tile__val { display: block; max-width: 100%; color: #ffe18b; font: 600 1.68cqw/1.12 var(--font-ui); letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.jackpot-tile--dragon-crown .jackpot-tile__name { font-size: 1.02cqw; }

.stage { position: absolute; left: 20.3%; top: 16.3%; width: 52.6%; height: 67.5%; display: block; min-height: 0; padding: 0; z-index: 3; }
.stage__content, .grid-frame, .grid-shell { width: 100%; height: 100%; padding: 0; margin: 0; transform: none; }
.grid-frame, .grid-shell { position: relative; }
.grid-shell { border: 0; border-radius: 0; background: none; box-shadow: none; }
.grid-shell::before, .grid-shell::after, .grid-felt, .grid-bezel { display: none; }
.board-art {
  position: absolute; inset: 0; pointer-events: none; background-color: #050706;
  background-image: linear-gradient(90deg, #d5a64485 1px, transparent 1px), radial-gradient(ellipse at 50% 45%, #2d201725, transparent 75%);
  background-size: calc(100% / 7) 100%, 100% 100%; border-right: 1px solid #c9944380; box-shadow: 0 0 25px #0009;
}
.board-frame-art { position: absolute; left: -8.35%; top: -19.37%; width: 116.61%; height: 140.56%; object-fit: fill; pointer-events: none; z-index: 4; }
.grid { clip-path: inset(0); }
.symbol, .reel__cell { border: 0; border-radius: 0; background: none; box-shadow: none; }
.symbol img.supplied-symbol, .reel__cell img.supplied-symbol { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112%; height: 112%; object-fit: contain; filter: none; max-width: none; }
/* The stone letter tiles have wider transparent margins than the high symbols. */
.symbol img[data-symbol^='L'], .reel__cell img[data-symbol^='L'] { width: 140%; height: 140%; }
.guide-symbol[data-guide-symbol^='L'] img { transform: scale(1.25); }
.symbol img[data-symbol='H4'], .reel__cell img[data-symbol='H4'] { width: 104%; height: 104%; }
.scatter-art { display: block; position: absolute; inset: 0; background-position: center; background-size: 112% 112%; background-repeat: no-repeat; }
.fc-plate { width: min(100%, var(--cell-h)); aspect-ratio: 1; }
.fc-val { left: 50%; top: 50%; color: #fff1a6; font: 700 calc(min(var(--cell), var(--cell-h)) * .53)/1 Georgia, serif; letter-spacing: -.055em; text-shadow: 0 2px 1px #5c1800, 0 0 6px #b02500; -webkit-text-stroke: 1px #572000; paint-order: stroke fill; }
.fc-val.is-long { font-size: calc(min(var(--cell), var(--cell-h)) * .34); }
.forge-banner {
  position: absolute; left: 28%; top: -9.9%; width: 49%; height: 9.5%; z-index: 6;
  display: flex; justify-content: center; align-items: center; gap: 1cqw;
  background: url('../assets/forge/jackpot_panel_blank.png') 50% 44.25% / 108.49% 165.68% no-repeat; color: #fff0a5; text-shadow: 0 1px 2px #000; white-space: nowrap;
}
.forge-banner > span { font: 1.34cqw/1 Georgia, serif; letter-spacing: .04em; }
.forge-banner > strong { display: block; color: #fff279; font: 700 2.7cqw/1 Georgia, serif; text-shadow: 0 0 4px #ffb100, 0 0 9px #ff3500, 0 0 16px #e20a00; }
.forge-banner > strong.is-long { font-size: 2cqw; }
.forge-banner > strong.is-changing { animation: forge-flare .65s ease-out; }
@keyframes forge-flare { 35% { transform: scale(1.18); color: #fff; } }

/* Restore the original gold-bordered controls at the current HUD positions. */
.dock::before { content: none; }
.status-balance, .bet-control, .win-control { position: absolute; top: 88.2%; height: 7.8%; z-index: 6; border: 0; border-radius: 0; box-shadow: none; background: transparent; transform: none; padding: 0; color: var(--gold); }
.status-balance, .win-control, .bet-control__amount { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28cqw; min-width: 0; text-align: center; }
.status-balance, .bet-control { border: 1px solid #d7ac52; border-radius: 8px; background: var(--panel-dark); color: #e5bd62; }
.status-balance { left: 11%; width: 23.2%; }
.bet-control { left: 35.6%; width: 21.5%; display: grid; grid-template-columns: 22% minmax(0,1fr) 22%; align-items: stretch; overflow: hidden; }
.win-control { left: 59.3%; width: 20.5%; padding-inline: 1%; background: url('../assets/forge/jackpot_panel_blank.png') 50% 44.25% / 108.49% 165.68% no-repeat; }
.status-balance > span, .bet-control__amount > span, .win-control > span { color: #fff0b0; font: 1.13cqw/1 Georgia, serif; letter-spacing: .09em; }
.status-balance > strong, .bet-control__amount > strong, .win-control > strong { color: var(--gold); font: 700 2.03cqw/1.1 Georgia, serif; text-shadow: 0 2px 2px #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-balance > span, .bet-control__amount > span { color: #e5bd62; font-family: var(--font-ui); }
.status-balance > strong, .bet-control__amount > strong { color: #fff; font-family: var(--font-ui); font-weight: 600; }
.win-control > strong { display: block; width: 100%; text-align: center; }
.win-control__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1);
  width: 82%; height: 80%; object-fit: contain; pointer-events: none;
  opacity: 1; visibility: visible;
  transition: opacity .32s ease, transform .4s ease, visibility 0s;
  transition-delay: .08s, .08s, 0s;
}
.win-control > span, .win-control > strong {
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .32s ease, transform .4s ease, visibility 0s linear .4s;
}
.win-control.has-win > span, .win-control.has-win > strong {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: .08s, .08s, 0s;
}
.win-control.has-win .win-control__logo {
  opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.97);
  transition-delay: 0s, 0s, .4s;
}
.chip, .menu-button, .icon-button {
  display: grid; place-items: center; flex-shrink: 0; padding: 0; min-height: 0; border: 0; border-radius: 50%; color: #ffe0a0; cursor: pointer;
  background: url('../assets/forge/small_button_blank.png') 49.83% 49.39% / 187.8% 186.25% no-repeat;
  box-shadow: 0 3px 6px #0008; text-shadow: 0 2px 2px #000; line-height: 1; transition: transform .16s ease, filter .16s ease;
}
.chip { width: 100%; height: 100%; border-radius: 0; background: transparent; box-shadow: none; color: #e5bd62; font: 2.2cqw/1 Arial, sans-serif; justify-self: center; }
#betMinus { border-right: 1px solid #d7ac5240; }
#betPlus { border-left: 1px solid #d7ac5240; }
.menu-button { position: absolute; width: 4.1cqw; height: 4.1cqw; top: 88.25%; z-index: 7; }
.menu-button { left: 3.8%; }
.menu-button svg, .icon-button svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
#settingsOpen { position: absolute; left: 8.2%; top: 89.2%; z-index: 7; width: 3cqw; height: 3cqw; background: none; box-shadow: none; color: #d8b580; }
#settingsOpen svg { width: 75%; height: 75%; stroke-width: 1.7; }
#settingsOpen.is-autospin { color: #ffc94c; filter: drop-shadow(0 0 4px #ff6b00); }
.spin { position: absolute; left: 79.3%; top: 79.4%; width: 12.5%; height: 20%; margin: 0; padding: 0; z-index: 8; border: 0; border-radius: 50%; background: transparent; box-shadow: none; aspect-ratio: auto; filter: none; }
.spin::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, #070708c7 55%, #202022c7 87%, transparent 88%); }
.spin img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.spin [hidden] { display: none; }
.spin.is-busy:not(.is-stop) img { animation: none; }
.spin:disabled, .spin.is-stopping { opacity: .4; cursor: default; }
.mute--dock, .turbo--dock { display: none; }
.bonus-textbox { position: absolute; left: 2%; top: 72%; width: 14%; z-index: 7; text-align: center; color: #ffe295; text-shadow: 0 2px 5px #000; pointer-events: none; }
.bonus-textbox > strong { font: 700 1.5cqw/1.35 Georgia, serif; }
.bonus-textbox[hidden] { display: none; }
.test-notice { position: absolute; left: 1.5%; top: 13%; width: 16%; margin: 0; z-index: 8; padding: 5px; border: 1px solid #b07c45; border-radius: 4px; background: #170d09dd; color: #ffdf9b; font: 12px/1.4 var(--font-ui); text-align: center; pointer-events: none; }
.test-notice[hidden] { display: none; }

/* Portrait: hero, two-by-two jackpots, reels, WIN, then balance/bet/spin. */
@media (orientation: portrait) {
  .app { width: 100%; height: 100%; aspect-ratio: auto; --portrait-unit: min(1cqw, .5628dvh); --portrait-lift: 10%; }
  .dragon-art { left: 59%; top: .2%; width: 86%; height: 36%; object-position: left top; }
  .menu-button { top: 1.1%; width: 8.3cqw; height: 8.3cqw; }
  .menu-button { left: 3%; }
  #settingsOpen { left: 3.3%; top: 7%; width: calc(var(--portrait-unit) * 7.5); height: calc(var(--portrait-unit) * 7.5); }
  .top .jackpots { left: 2.5%; top: calc(22.5% - var(--portrait-lift)); width: 65%; height: 11.8%; }
  .jackpot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(2, minmax(0,1fr)); gap: 1.25cqw; }
  .jackpot-tile { gap: calc(var(--portrait-unit) * .2); padding: 3px 6%; }
  .jackpot-tile__name { font-size: calc(var(--portrait-unit) * 2.3); letter-spacing: .035em; }
  .jackpot-tile--dragon-crown .jackpot-tile__name { font-size: calc(var(--portrait-unit) * 2.12); letter-spacing: 0; }
  .jackpot-tile__val, .jackpot-tile--dragon-crown .jackpot-tile__val { font-size: calc(var(--portrait-unit) * 3.35); }
  .stage { left: 5.2%; top: calc(38.4% - var(--portrait-lift)); width: 89.6%; height: 42%; }
  .board-frame-art { left: -6.25%; width: 112.5%; top: -19.37%; height: 140.56%; }
  .forge-banner { left: 23%; top: -8.2%; width: 54%; height: 8.5%; gap: 1.1cqw; }
  .forge-banner > span { font-size: calc(var(--portrait-unit) * 2.7); letter-spacing: .015em; }
  .forge-banner > strong { font-size: calc(var(--portrait-unit) * 5.5); }
  .forge-banner > strong.is-long { font-size: calc(var(--portrait-unit) * 4.2); }
  .status-balance, .bet-control { top: calc(90.2% - var(--portrait-lift)); height: 5.3%; }
  .status-balance { left: 7%; width: 31%; gap: .55cqw; }
  .status-balance > span, .bet-control__amount > span, .win-control > span { font-size: calc(var(--portrait-unit) * 2.6); }
  .status-balance > strong, .bet-control__amount > strong { font-size: calc(var(--portrait-unit) * 4.55); }
  .bet-control { left: 62%; width: 32%; grid-template-columns: 22% minmax(0,1fr) 22%; }
  .bet-control__amount { gap: .55cqw; }
  .chip { font-size: calc(var(--portrait-unit) * 6); }
  .win-control { left: 20%; top: calc(81.3% - var(--portrait-lift)); width: 60%; height: 6.6%; border: 0; padding: 0 7%; gap: calc(var(--portrait-unit) * .2); background: url('../assets/forge/jackpot_panel_blank.png') 50% 44.25% / 108.49% 165.68% no-repeat; }
  .win-control > span { font-size: calc(var(--portrait-unit) * 2.3); }
  .win-control > strong { font-size: calc(var(--portrait-unit) * 4.4); }
  .spin { left: 38%; top: calc(86.7% - var(--portrait-lift)); width: 24%; height: 12.5%; }
  .bonus-textbox { left: 2.5%; top: calc(19.7% - var(--portrait-lift)); width: 65%; }
  .bonus-textbox > strong { font-size: 2.7cqw; }
  .test-notice { left: 13%; top: calc(16.5% - var(--portrait-lift)); width: 45%; padding: 3px; font-size: clamp(9px, 2.5cqw, 14px); }
}

/* Game sheets and celebrations remain available in both layouts. */
.sheet--menu, .settings-sheet { position: absolute; inset: 5% auto; left: 50%; transform: translateX(-50%); width: min(580px, 92%); z-index: 25; padding: 26px 22px; border: 1px solid #a8783e; border-radius: 12px; background: #141110fa; color: #eee0ca; overflow-y: auto; box-shadow: 0 10px 80px #000; display: block; }
.sheet--menu { padding: 0; overflow: hidden; }
.sheet--menu.is-open { display: flex; }
.sheet--menu[hidden], .settings-sheet[hidden] { display: none !important; }
.sheet-close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; font: 28px/1 Arial, sans-serif; }
.sheet--menu h2, .settings-sheet h2 { display: block; font: 24px Georgia, serif; color: #ffcf83; margin: 6px 0 26px; }
.sheet--menu > h2 { margin: 0; }
.settings-sheet p, .menu-note { font-size: 17px; line-height: 1.5; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 18px; }
.settings-row strong { display: block; font-weight: 600; color: #f2d48f; }
.settings-row small { display: block; font-size: 13px; color: #cdbca8; margin-top: 4px; }
.setting-switch { position: relative; display: block; width: 58px; height: 32px; flex-shrink: 0; }
.setting-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.setting-switch > span { position: absolute; inset: 0; border: 1px solid #a68c64; border-radius: 20px; background: #261e18; pointer-events: none; }
.setting-switch > span::before { content: ''; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #c7b9a3; transition: transform .15s; }
.setting-switch > span::after { content: 'OFF'; position: absolute; right: 5px; top: 8px; font: 10px Arial, sans-serif; color: #d0c6b7; }
.setting-switch input:checked + span { background: #86431a; border-color: #e5bd62; }
.setting-switch input:checked + span::before { transform: translateX(26px); background: #f3d084; }
.setting-switch input:checked + span::after { content: 'ON'; left: 6px; right: auto; color: #fff1cc; }
.setting-switch input:focus-visible + span { outline: 2px solid #ffce8b; outline-offset: 3px; }
.autospin-settings { border-top: 1px solid #d7ac5240; margin-top: 16px; padding-top: 22px; }
.autospin-settings h3 { color: #f2d48f; font: 20px Georgia, serif; margin: 0; }
.settings-sheet .settings-hint { font-size: 14px; color: #cdbca8; margin: 2px 0 20px; }
.settings-action { width: 100%; min-height: 44px; border: 1px solid #d7ac52; border-radius: 9px; background: #67371e; color: #ffe1a1; font: 600 17px var(--font-ui); cursor: pointer; }
.settings-action:disabled { opacity: .5; cursor: default; }
.settings-sheet .settings-status { font-size: 14px; min-height: 21px; color: #e5dfc8; }
.settings-rules { border-top: 1px solid #d7ac5240; padding-top: 18px; margin-top: 20px; }
.settings-rules summary { color: #d7bb7f; cursor: pointer; }
.settings-sheet .settings-rules p { font-size: 14px; color: #cdbca8; }
.sheet--menu .turbo { display: flex; position: static; margin: 16px 0; }
.sheet--menu .test { position: static; display: block; margin-top: 24px; }
.sheet--menu .test__toggle { display: block; }
.sheet--menu .test__body { display: none; }
.sheet--menu .test.is-open .test__body { display: grid; }
body.is-tab-menu .stage, body.is-tab-menu .dock { visibility: visible; }
.overlay.is-bonus-popup { position: absolute; inset: 0; padding: 5%; background: #0009; }
.popup--bonus-art { width: min(75%, 480px); height: auto; max-height: 90%; aspect-ratio: auto; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.popup--bonus-art .popup__artwork { width: 100%; height: auto; max-height: 65dvh; object-fit: contain; }
.bonus-continue { display: block; margin-top: 16px; color: #ffe18b; font: 600 13px/1.4 Arial, sans-serif; letter-spacing: .15em; }
.bonus-gold-count, .bonus-gold-title { display: block; color: #ffd35a; font-family: Georgia, serif; font-weight: 700; line-height: .95; text-shadow: 0 2px 1px #875000; }
.bonus-gold-count { font-size: clamp(60px, 18cqw, 180px); }
.bonus-gold-title { font-size: clamp(24px, 5cqw, 60px); }
button:focus-visible { outline: 2px solid #ffdf8c; outline-offset: 3px; }
@media (hover: hover) {
  .menu-button:hover, .icon-button:hover { background: url('../assets/forge/small_button_blank.png') 49.83% 49.39% / 187.8% 186.25% no-repeat; filter: brightness(1.17); transform: scale(1.05); }
  .chip:hover:not(:disabled) { background: #d7ac521a; }
  #settingsOpen:hover { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .forge-banner > strong.is-changing, .spin.is-busy:not(.is-stop) img { animation: none; }
  .chip, .menu-button, .icon-button, .spin,
  .win-control__logo, .win-control > span, .win-control > strong { transition: none; }
}