:root {
  color-scheme: dark;
  --ink: #fff1ce;
  --gold: #ffdb81;
  font-family: system-ui, sans-serif;
  background: #140e09;
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100svh;
  background: linear-gradient(90deg, #19160f76, #140e09e5 50%, #19160f76), url(fortune-assets/landscape.webp) center 60% / cover fixed;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid #ffed94; outline-offset: 4px; }
.game {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(100%, 510px);
  min-height: 100svh;
  margin-inline: auto;
  padding: max(12px, env(safe-area-inset-top)) clamp(8px, 3vw, 18px) max(9px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: linear-gradient(#18223940, #47241910 53%, #2a150bed 94%), url(fortune-assets/landscape.webp) center / cover;
  box-shadow: 0 0 85px #0009, inset 0 0 65px #120d0675;
}
.game[data-bonus] {
  background: radial-gradient(ellipse at 50% 31%, #ffcf777d, transparent 65%), linear-gradient(#9c67196e, #79462c62 48%, #321d4cdf 76%, #19132f 98%), url(fortune-assets/landscape.webp) center / cover;
}
.top { display: flex; align-items: center; justify-content: flex-end; z-index: 2; }
.top-controls { display: flex; gap: 7px; }
.icon-button {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid #deb66b88; border-radius: 50%;
  background: #1b150ed9; color: var(--gold); font: 800 20px/1 system-ui, sans-serif;
}
.icon-button:disabled { opacity: .55; }
.icon-button svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#sound[aria-pressed="false"] .sound-on, #sound[aria-pressed="true"] .sound-off { display: none; }
.branding { z-index: 1; margin: clamp(4px, 1.5vh, 15px) auto 0; width: 91%; text-align: center; }
.branding h1 { margin: 0; line-height: 0; }
.branding img { display: block; width: 100%; height: auto; margin: auto; filter: drop-shadow(0 5px 4px #1c0d05d9); }
.max-tag {
  display: inline-block; margin-top: 3px; color: #ffe778;
  font: 950 clamp(22px, 5.8vw, 34px)/1 system-ui, sans-serif; letter-spacing: .055em;
  text-shadow: 0 2px #9c4b11, 0 4px #351904, 0 0 16px #f2a618bc;
}
.playfield { position: relative; display: grid; flex: 1 0 auto; place-items: center; width: 100%; }
.main-stage { position: relative; width: 100%; margin: 6px auto 12px; padding-top: clamp(97px, 19vh, 170px); }
.wild-hero {
  position: absolute; inset: 0 0 auto; margin-inline: auto; width: clamp(121px, 23vh, 184px); height: auto;
  filter: drop-shadow(0 0 20px #fff07c) drop-shadow(0 5px 8px #4c1c04);
  animation: hover-gem 3.4s ease-in-out infinite;
}
@keyframes hover-gem { 50% { transform: translateY(-6px) scale(1.03); } }
.cabinet {
  position: relative; padding: 27px 8px 12px; border: 3px solid #a46c24; border-radius: 15px;
  background: linear-gradient(#9c623a65,#2b160ae8), url(fortune-assets/foreground.webp) center / cover;
  box-shadow: inset 0 0 0 1px #ffdda2, 0 5px 0 #492608, 0 0 24px #fbd176ab, 0 12px 23px #211004a0;
}
.lintel {
  position: absolute; top: 3px; inset-inline: 10px; height: 20px; display: grid; place-items: center;
  background: #3d230dc9; border: 1px solid #cf9d57; border-radius: 4px;
  color: #ffe6a6; font-size: 11px; font-weight: 900; letter-spacing: .15em;
}
.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.reel {
  position: relative; overflow: hidden; min-width: 0; min-height: 0;
  aspect-ratio: 1; border: 1px solid #a86b23; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 30%, #bd8951, #61402b 64%, #3f2315);
  box-shadow: inset 0 0 10px #180b06a6;
}
.reel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 3px #fff3b899, inset 0 -4px 7px #1d0a0670;
}
.reel img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reel-face { position: absolute; inset: 0; padding: 5%; filter: drop-shadow(0 3px 2px #251202a9); }
.reel-strip { display: none; position: absolute; inset: 0; }
.reel-strip img { height: 100%; padding: 5%; }
.reel.rolling .reel-face { visibility: hidden; }
.reel.rolling .reel-strip { display: block; animation: roll .57s linear infinite; filter: blur(1.4px) saturate(1.2); }
.reel.landed .reel-face { animation: land .23s ease-out; }
.reel.hit { box-shadow: inset 0 0 16px #fff2a3, 0 0 10px #ffb843; border-color: #ffdf78; }
.reel.hit .reel-face { animation: gleam .63s ease-out; }
.reel.miss { border-color: #ff8664; box-shadow: inset 0 0 16px #d5253366; }
@keyframes roll { to { transform: translateY(-300%); } }
@keyframes land { 35% { transform: translateY(8%); } }
@keyframes gleam { 45% { filter: brightness(1.65) drop-shadow(0 0 7px #ffbf45); } }
.bonus-stage { width: 100%; max-width: min(100%, clamp(254px, 69svh, 445px)); align-self: center; padding: 8px 0 11px; }
.bonus-heading {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  color: #ffe695; font-size: clamp(10px, 2.8vw, 15px); font-weight: 950; letter-spacing: .08em;
  text-shadow: 0 2px 4px #2c1008; margin: 0 0 7px;
}
.bonus-heading span { padding: 3px 6px; border: 1px solid #ffdb8880; border-radius: 5px; background: #402361e0; font-size: .74em; }
.bonus-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(3px, .75vh, 7px); }
.mini {
  position: relative; display: grid; grid-column: span 2; grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: 3.05; gap: 1px; padding: 2px; border: 1px solid #ffc65a; border-radius: 7px;
  background: linear-gradient(#c3873d, #5c2c12);
  box-shadow: 0 0 6px #ffbf64a8, 0 3px 4px #2a1538c9;
}
.mini:first-child { grid-column: 2 / span 2; }
.mini .reel { border: 0; border-radius: 3px; aspect-ratio: auto; }
.mini[data-hit] { box-shadow: 0 0 9px #ffe69d, inset 0 0 4px #fffcba; border-color: #ffe595; }
.mini[data-hit] .reel-face { animation: gleam .65s ease-out; }
.mini-prize {
  position: absolute; z-index: 1; right: 1px; bottom: -2px; padding: 0 3px; border-radius: 4px;
  background: #301940f5; color: #fff19d; font-size: clamp(8px, 2vw, 11px); line-height: 1.35; font-weight: 900;
}
.console { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; width: 100%; padding-top: 4px; }
.message {
  min-height: 22px; margin: 0; text-align: center; color: #fff1d0;
  font-size: clamp(12px, 3.3vw, 15px); font-weight: 800; text-shadow: 0 2px 4px #180800;
}
.action-wrap { position: relative; }
.action {
  display: inline-grid; place-items: center; min-width: 128px; min-height: 46px; padding: 5px 20px;
  border: 2px solid #f2c36b; border-radius: 999px;
  background: linear-gradient(#277f69, #15584a 48%, #123f38 52%, #0e2b28);
  color: #ffe480; font-size: clamp(21px, 5.4vw, 29px); font-weight: 1000; text-transform: uppercase; letter-spacing: .055em;
  text-shadow: 0 2px #301c09, 0 0 5px #261c13;
  box-shadow: inset 0 0 0 2px #794815, 0 0 0 2px #66360d, 0 4px 0 #3b1f0a, 0 0 18px #ffbd5770;
}
.action:not(:disabled):active { transform: translateY(2px); }
.action:disabled { opacity: .67; }
#claim { text-decoration: none; touch-action: manipulation; }
#claim[aria-disabled="true"] { opacity: .67; cursor: default; }
.hand {
  position: absolute; right: -25px; bottom: -20px; pointer-events: none;
  color: #fff8dc; font: 43px/1 'Segoe UI Symbol', sans-serif;
  text-shadow: 1px 2px 3px #30140a; transform-origin: 30% 15%; animation: point 1s ease-in-out infinite;
}
.game[data-phase="main-reveal"] .hand, .game[data-phase="bonus-settle"] .hand,
.game[data-phase="counting"] .hand, .game[data-phase="final"] .hand { display: none; }
@keyframes point { 50% { transform: translate(-6px, -6px) rotate(-9deg); } }
.readouts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 6px 0 0;
}
.readouts div {
  min-width: 0; padding: 4px 2px; text-align: center; border: 1px solid #ad7741; border-radius: 8px;
  background: linear-gradient(#3d2418ef, #1d120df5);
}
.readouts dt { color: #e4bd81; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.readouts dd { margin: 1px 0 0; color: #fff5d6; font-size: clamp(13px, 3.7vw, 21px); line-height: 1.16; font-weight: 850; font-variant-numeric: tabular-nums; }
#win { color: var(--gold); }
footer { margin-top: 8px; text-align: center; color: #e2cda9; font-size: 9px; }
.win-panel {
  position: absolute; z-index: 2; top: 57%; inset-inline: 4%; transform: translateY(-50%); padding: clamp(10px, 2vh, 23px);
  display: grid; gap: 4px; text-align: center; border: 2px solid #e8bc6c; border-radius: 15px;
  background: linear-gradient(#31214ce8, #1a1032f5); box-shadow: inset 0 0 24px #9256a751, 0 0 26px #f0a94179;
  animation: reveal .4s ease-out;
}
@keyframes reveal { from { opacity: 0; transform: translateY(-50%) scale(.87); } }
#win-title { color: #ffefb5; font: 950 clamp(17px, 5vw, 30px)/1.1 system-ui, sans-serif; text-shadow: 0 2px #6a3a24; }
#win-multiplier, .offer-amount {
  color: #ffdc65; font: 1000 clamp(39px, 13vw, 72px)/1.08 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px #b65b11, 0 4px #6e291b, 0 0 14px #edb94691;
}
#win-amount { font-weight: 900; }
#particles { position: absolute; z-index: 3; inset: 0; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute; top: -34px; width: var(--size); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 29%, #fff6a8, #ffcb38 42%, #b46518 82%);
  box-shadow: inset 0 0 0 2px #f9d070, 0 2px 6px #512509;
  animation: fall var(--duration) linear forwards;
}
.particle.gem { border-radius: 8px; background: radial-gradient(circle at 32% 25%, #fff, var(--gem) 33%, #421a3d 100%); }
@keyframes fall { to { transform: translate(var(--drift), 115vh) rotate(510deg) scaleX(.55); } }
dialog {
  max-width: calc(100% - 20px); max-height: calc(100% - 20px); padding: 0;
  color: var(--ink); border: 1px solid #d3a55a; border-radius: 17px;
  background: #2a180f; box-shadow: 0 10px 50px #000b, inset 0 0 28px #b67d2c34;
}
dialog::backdrop { background: #140b1bd9; }
.offer-dialog { width: 425px; text-align: center; background: radial-gradient(ellipse at 50% 18%, #554079, #231639 76%); border: 2px solid #ffcf73; }
.offer-inner { padding: clamp(15px, 4vh, 28px) 15px 14px; }
.offer-max {
  color: #ffd668; font: 1000 clamp(35px, 10vw, 59px)/1 system-ui, sans-serif; letter-spacing: -.02em;
  text-shadow: 0 3px #9b4716, 0 5px #48210f, 0 0 18px #f5a83eb5;
}
.offer-inner h2 { margin: 15px 0 3px; font-size: clamp(20px, 6vw, 29px); text-transform: uppercase; }
.offer-label { margin: 0 0 4px; color: #eddcfd; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.offer-amount { display: block; font-size: clamp(33px, 11vw, 58px); white-space: nowrap; }
.offer-extra { margin: 13px 0; font-size: 14px; }
.offer-extra b { color: #ffe594; }
.offer-clock { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 auto 17px; color: #f2d8fc; font-size: 11px; font-weight: 750; }
.offer-clock time { padding: 3px 7px; border: 1px solid #b75983; border-radius: 5px; background: #491d46; color: #ffc5ce; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.text-button { display: block; margin: 13px auto 0; padding: 4px; border: 0; background: none; color: #f5d797; text-decoration: underline; font-size: 13px; }
.rules-dialog { width: 400px; padding: 20px; }
.rules-dialog h2 { margin: 0 42px 12px 0; }
.rules-dialog p { margin-block: 10px; }
.rules-dialog .close { position: absolute; right: 9px; top: 9px; }
.rules-dialog .action { font-size: 16px; }
@media (max-height: 630px) {
  .branding { width: min(79%, 335px); }
  .main-stage { max-width: min(100%, 360px); margin: 4px auto 7px; padding-top: 88px; }
  .wild-hero { width: 109px; }
  .bonus-stage { max-width: min(100%, clamp(245px, 62svh, 365px)); padding-block: 5px 7px; }
  .bonus-heading { margin-bottom: 5px; }
  .console { gap: 3px; }
  .action { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.bonus-gate {
  position: absolute; z-index: 2; inset: 0; display: grid; place-items: center;
  background: #1e102487; border-radius: 12px;
}
.bonus-gate .action { min-width: 147px; box-shadow: inset 0 0 0 2px #794815, 0 3px 0 #3b1f0a, 0 0 25px #f9c859ab; }
.game[data-phase="bonus-ready"] .console .hand { display: none; }
.claim-note { color: #ffe594; margin: 12px 0; font-weight: 750; font-size: 13px; }
.game[data-phase="main-reveal"] .reel.hit .reel-face { animation: gleam .5s ease-out 2; }
.game[data-phase="counting"] .max-tag { animation: max-pulse .65s ease-out; }
@keyframes max-pulse { 40% { transform: scale(1.22); } }