/* SKYWARD BUST — steampunk balloon crash game. Portrait first; a centred column (max 480px) on wide screens.
   All artwork comes from the SKYWARD BUST packs in ../img (panels use border-image so their brass corners stay sharp). */
:root {
  --gold: #f7d28a; --cream: #fff1cc; --dim: #d3e0ef; --mute: #b7cce2;
  --profit: #78f39b; --danger: #ff8a6a; --ink: #0b1629;
  --ui: "Rajdhani", "Barlow Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --W: min(100vw, 480px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #050a10; color: #fff; font-family: var(--ui); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
img { -webkit-user-drag: none; user-select: none; }
a { color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-fit] { display: block; white-space: nowrap; overflow: hidden; min-width: 0; font-variant-numeric: tabular-nums; }
.age { display: inline-block; font-weight: 800; font-size: .85em; padding: 0 4px; border: 1.5px solid currentColor; border-radius: 4px; }

.app { position: relative; height: 100vh; height: 100dvh; width: var(--W); margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: #0b1629; box-shadow: 0 0 0 1px #1f3550, 0 20px 80px #000; overflow: hidden; }

/* ---------- header ---------- */
.top { position: relative; z-index: 3; padding: calc(4px + var(--safe-t)) 8px 6px;
  border: 10px solid transparent; border-image: url("../img/header-panel.webp?v=9") 18 fill / 10px stretch; margin: 0; }
.top-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; margin: -6px -4px 0; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #0e1b2e; box-shadow: inset 0 0 0 2px #c79b5c; }
.icon-btn img { width: 26px; height: 26px; }
.icon-btn.muted { box-shadow: inset 0 0 0 2px var(--danger); background: #3a1a1a; }
.logo { display: block; min-width: 0; justify-self: center; }
.logo img { display: block; height: 50px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px #000a); }
.top-right { display: flex; gap: 6px; align-items: center; justify-self: end; }
.players { display: flex; gap: 4px; align-items: center; height: 40px; padding: 0 9px; border-radius: 12px; background: #0e1b2e; box-shadow: inset 0 0 0 2px #c79b5c; font-weight: 800; font-size: 17px; }
.players img { width: 22px; height: 22px; }
.wallet { margin-top: 4px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 2px 8px;
  border: 8px solid transparent; border-image: url("../img/balance-panel.webp?v=9") 18 fill / 8px stretch; }
.w-ico { width: 24px; height: 24px; }
.wallet span { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet b { font-size: 17px; }
.w-bal, .w-profit { min-width: 0; }
.w-profit { text-align: right; }
.w-profit b { color: var(--profit); } .w-profit b.neg { color: var(--mute); }
.plus { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #80ed93, #1e8c4c); box-shadow: 0 0 0 2px #0d2137, 0 0 0 3px #c79b5c; }
.plus img { width: 18px; height: 18px; }

/* ---------- sky ---------- */
.sky { position: relative; overflow: hidden; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; background: #4f8fd0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* altimeter: the slim brass tube (0-10,000 m); the cyan fill is clipped to the altitude and the marker rides its top */
.altimeter { position: absolute; left: 10px; top: 44px; bottom: 18px; width: 9px; pointer-events: none; --f: 0; }
.altimeter img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.alt-tube { filter: drop-shadow(0 1px 3px #000b); }
.alt-fill { clip-path: inset(calc((1 - var(--f)) * 100%) 0 0 0); transition: clip-path .12s linear; filter: drop-shadow(0 0 3px #3dd8c8aa); }
.altimeter .alt-marker { top: calc((1 - var(--f)) * 100%); left: -3px; width: 15px; height: 5px; transform: translateY(-50%); transition: top .12s linear; filter: drop-shadow(0 0 3px #fff3c4); }
.altimeter span { position: absolute; left: 12px; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; line-height: 1; }
.alt-top { top: -2px; } .alt-zero { bottom: -2px; }
.history { position: absolute; top: 6px; left: 34px; right: 6px; margin: 0; padding: 0; list-style: none; display: flex; gap: 4px; overflow: hidden; pointer-events: none; }
.history li { flex: none; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 8px; background: #0b1629cc; box-shadow: inset 0 0 0 1px #c79b5c88; color: var(--mute); }
.history li.hi { color: var(--profit); } .history li.mid { color: #8bd9f6; } .history li.lo { color: #ff9b86; }
.hud { position: absolute; top: 28px; left: 34px; right: 6px; display: flex; justify-content: center; align-items: center; gap: 6px; pointer-events: none; }
.mult { width: min(46%, 190px); aspect-ratio: 640 / 224; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 16px;
  background: url("../img/multiplier-frame.webp?v=9") center / 100% 100% no-repeat; filter: drop-shadow(0 3px 6px #0009); }
.mult b { width: 100%; text-align: center; font-size: 30px; line-height: 1; font-weight: 800; color: var(--profit); text-shadow: 0 0 12px #78f39b88, 0 2px 0 #0a3a1c; }
.mult span { width: 100%; text-align: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 1px; }
.mult.wait b { color: #fff; text-shadow: 0 0 10px #8bd9f688; font-size: 24px; }
.mult.crash b { color: var(--danger); text-shadow: 0 0 12px #fa684c99; }
.alt-badge { width: min(30%, 120px); aspect-ratio: 384 / 128; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 13px;
  background: url("../img/altitude-badge.webp?v=9") center / 100% 100% no-repeat; filter: drop-shadow(0 3px 6px #0009); }
.alt-badge span { font-size: 9px; letter-spacing: .12em; color: var(--dim); line-height: 1; }
.alt-badge b { width: 100%; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.1; }
.hull { position: absolute; top: 96px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none; }
.hull span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; }
.hull i { display: block; width: 58px; height: 8px; border-radius: 4px; background: #0009; box-shadow: inset 0 0 0 1px #c79b5c; overflow: hidden; }
.hull em { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #38c46d, #80ed93); transition: width .25s; }
.hull.low em { background: linear-gradient(90deg, #9f1e24, #fa684c); }
.banner { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); padding: 5px 12px; border-radius: 10px; font-weight: 800; font-size: 13px; white-space: nowrap; pointer-events: none;
  background: #9f1e24e6; box-shadow: 0 0 0 2px #fa684c, 0 0 16px #fa684c88; animation: pulse .5s ease-in-out infinite alternate; }
.banner.storm { background: #3a1f55ee; box-shadow: 0 0 0 2px #c9b8ff, 0 0 16px #c9b8ff88; }
@keyframes pulse { to { transform: translateX(-50%) scale(1.04); } }
.bonus { position: absolute; right: 8px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.bonus button { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .04em;
  background: linear-gradient(#3a2a12, #1d1408); box-shadow: inset 0 0 0 2px #f2c46b, 0 0 14px #f2c46b88; animation: glow 1.2s ease-in-out infinite alternate; min-height: 40px; }
.bonus img { width: 22px; height: 22px; }
@keyframes glow { to { box-shadow: inset 0 0 0 2px #ffe39b, 0 0 22px #ffd36b; } }
.feed { position: absolute; left: 34px; bottom: 8px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; pointer-events: none; max-width: 55%; }
.feed li { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: #0b1629d0; box-shadow: inset 0 0 0 1px #38c46d66; animation: feedIn .3s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed li b { color: var(--profit); }
.feed li i { font-style: normal; font-size: 9px; color: var(--mute); border: 1px solid #ffffff44; border-radius: 4px; padding: 0 3px; margin-left: 4px; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-12px); } }
.netnote { position: absolute; left: 8px; right: 8px; top: 132px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px;
  background: #0b1629ee; box-shadow: inset 0 0 0 2px #c79b5c; color: #f4ead6; font-size: 12px; line-height: 1.35; }
.netnote.offline { box-shadow: inset 0 0 0 2px #8bd9f6; } .netnote.warn { box-shadow: inset 0 0 0 2px #fa684c; }
.netnote span { flex: 1; } .netnote button { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: #ffffff1a; color: inherit; font-size: 18px; cursor: pointer; }
.toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, 8px); padding: 7px 16px; border-radius: 12px; background: #0b1629ee; box-shadow: inset 0 0 0 2px #c79b5c;
  font-weight: 800; font-size: 16px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { color: var(--profit); box-shadow: inset 0 0 0 2px #38c46d; } .toast.bad { color: #ffb3a3; box-shadow: inset 0 0 0 2px #fa684c; }

/* ---------- control deck (iron plate with a brass rail) ---------- */
.deck { position: relative; z-index: 3; padding: 10px 3% 8px; display: grid; gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none;
  background: url("../img/tex-iron.webp?v=9") 0 0 / 160px repeat; box-shadow: inset 0 10px 18px #0009, 0 -4px 14px #0008; }
.deck::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: url("../img/tex-brass.webp?v=9") 0 0 / 120px repeat; box-shadow: 0 1px 0 #3a2410, 0 2px 6px #000a; }
.row { height: calc(var(--W) * .29); display: grid; align-items: center; }
.controls { grid-template-columns: 1fr 1.2fr 1fr; }
.app.betting .controls, .app:not(.betting) .bets { display: none; }
.ctl { position: relative; justify-self: center; width: calc(var(--W) * .29); height: calc(var(--W) * .29); border-radius: 50%; background: center / 100% 100% no-repeat; touch-action: none; }
.ctl::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; }
.burner { background-image: url("../img/burner-normal.webp?v=9"); }
.vent { background-image: url("../img/vent-normal.webp?v=9"); }
.burner.on { background-image: url("../img/burner-pressed.webp?v=9"); filter: drop-shadow(0 0 14px #ff7a2a); }
.vent.on { background-image: url("../img/vent-pressed.webp?v=9"); filter: drop-shadow(0 0 14px #5fd0ff); }
/* hover art only for a real mouse (set from JS): touch screens that report hover kept it stuck after a tap */
.burner.hov:not(.on):not(:disabled) { background-image: url("../img/burner-hover.webp?v=9"); } .vent.hov:not(.on):not(:disabled) { background-image: url("../img/vent-hover.webp?v=9"); }
.burner:disabled { background-image: url("../img/burner-disabled.webp?v=9"); }
.vent:disabled { background-image: url("../img/vent-disabled.webp?v=9"); }
.app.swap .burner { order: 3; } .app.swap .gauge { order: 2; } .app.swap .vent { order: 1; }
.heat { position: absolute; inset: 7%; border-radius: 50%; border: 3px solid #ffcf69; opacity: .9; filter: drop-shadow(0 0 4px #ff9a3c); pointer-events: none;
  -webkit-mask: conic-gradient(#000 calc(var(--heat, 0) * 1turn), #0000 0); mask: conic-gradient(#000 calc(var(--heat, 0) * 1turn), #0000 0); }
.gauge { position: relative; justify-self: center; width: 100%; max-width: calc(var(--W) * .36); aspect-ratio: 384 / 240; }
.gauge img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gauge .needle { transform-origin: var(--px, 50%) var(--py, 76%); transition: transform .1s linear; }
#vs { position: absolute; left: 25%; right: 25%; top: 50%; text-align: center; font-size: 15px; font-weight: 800; color: #79f38e; text-shadow: 0 0 6px #79f38e88, 0 1px 0 #000; }
#vs.down { color: #8bd9f6; text-shadow: 0 0 6px #8bd9f688, 0 1px 0 #000; }
/* Bet and auto cash-out: half the height of the burner row, one line each, so the sky gets the space. */
.row.bets { height: calc(var(--W) * .145); grid-template-columns: 1fr 1fr; gap: 8px; }
.bets .stepper { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 6px; padding: 4px 8px; border-radius: 12px; }
.bets .stepper > span { font-size: 10px; line-height: 1.15; letter-spacing: .06em; max-width: 4.6em; text-align: left; }
.bets .stepper > div { grid-template-columns: 32px minmax(0, 1fr) 32px; }
.bets .stepper b { font-size: 17px; }
.bets .stepper button { width: 32px; height: 32px; }
.bets .stepper button img { width: 16px; height: 16px; }
.stepper { height: 100%; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 6px; min-width: 0; border-radius: 14px;
  background: url("../img/tex-leather.webp?v=9") 0 0 / 160px repeat; box-shadow: inset 0 0 0 2px #c88d42, inset 0 0 0 4px #3a2410, 0 4px 10px #0009; }
.stepper > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.stepper > div { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; width: 100%; gap: 2px; }
.stepper b { text-align: center; font-size: 20px; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #3a5878, #12233b); box-shadow: 0 0 0 2px #c88d42; }
.stepper button img { width: 20px; height: 20px; }
.stepper button:disabled { opacity: .35; }

/* ---------- action buttons: the plain pill art (5 colours x normal/hover/focused/pressed/disabled) with live text ---------- */
.main-btn, .art-btn { position: relative; display: grid; grid-template-columns: 18% minmax(0, 1fr) 8%; align-items: center; width: 100%; aspect-ratio: 576 / 144;
  background: var(--n) center / 100% 100% no-repeat; touch-action: manipulation; }
.main-btn:focus-visible, .art-btn:focus-visible { outline: none; background-image: var(--f); }
@media (hover: hover) { .main-btn:hover:not(.down):not([aria-disabled="true"]), .art-btn:hover:not(:active) { background-image: var(--h); } }
.main-btn.down:not([aria-disabled="true"]), .art-btn:active { background-image: var(--p); }
.main-btn.down .mb-txt, .main-btn.down .mb-ico { transform: translateY(2px); }
[data-color="green"] { --n: url("../img/btn-green-normal.webp?v=9"); --h: url("../img/btn-green-hover.webp?v=9"); --p: url("../img/btn-green-pressed.webp?v=9"); --f: url("../img/btn-green-focused.webp?v=9"); }
[data-color="red"] { --n: url("../img/btn-red-normal.webp?v=9"); --h: url("../img/btn-red-hover.webp?v=9"); --p: url("../img/btn-red-pressed.webp?v=9"); --f: url("../img/btn-red-focused.webp?v=9"); }
[data-color="orange"] { --n: url("../img/btn-orange-normal.webp?v=9"); --h: url("../img/btn-orange-hover.webp?v=9"); --p: url("../img/btn-orange-pressed.webp?v=9"); --f: url("../img/btn-orange-focused.webp?v=9"); }
[data-color="purple"] { --n: url("../img/btn-purple-normal.webp?v=9"); --h: url("../img/btn-purple-hover.webp?v=9"); --p: url("../img/btn-purple-pressed.webp?v=9"); --f: url("../img/btn-purple-focused.webp?v=9"); }
[data-color="grey"] { --n: url("../img/btn-grey-normal.webp?v=9"); --h: url("../img/btn-grey-hover.webp?v=9"); --p: url("../img/btn-grey-pressed.webp?v=9"); --f: url("../img/btn-grey-focused.webp?v=9"); }
.main-btn[aria-disabled="true"] { cursor: default; }
.main-btn.flying { filter: drop-shadow(0 0 calc(3px + var(--glow, 0) * 12px) #fa684c); }
.main-btn.idle { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(1.12); } }
.main-btn.shake { animation: shake .3s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.mb-ico { width: 46%; height: auto; justify-self: end; margin-right: 10%; filter: drop-shadow(0 2px 0 #0008); }
.mb-txt { text-align: center; line-height: 1.05; min-width: 0; }
.mb-txt b { font-size: calc(var(--W) * .058); font-weight: 800; letter-spacing: .03em; text-shadow: 0 2px 0 #0009; }
.mb-txt small { font-size: calc(var(--W) * .036); font-weight: 700; color: var(--cream); margin-top: 1px; text-shadow: 0 1px 0 #0009; }
.foot { padding: 3px 10px calc(4px + var(--safe-b)); text-align: center; font-size: 11px; color: var(--mute); background: #0a0806; }
.foot a { color: var(--mute); }

/* ---------- loading / start screen (the loading art has its progress bar painted in; the live bar sits on it) ---------- */
.splash { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden;
  background: #0b1629 url("../img/loading.webp?v=9") center / cover no-repeat; }
.splash::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(14px) brightness(.7); -webkit-backdrop-filter: blur(14px) brightness(.7); }
.splash-art { position: relative; height: min(100dvh, calc(100vw * 16 / 9)); aspect-ratio: 9 / 16; max-width: 100vw; }
.splash-img { display: block; width: 100%; height: 100%; }
.loadbar { position: absolute; left: var(--lx, 16.9%); top: var(--ly, 81.6%); width: var(--lw, 66.2%); height: var(--lh, 1.6%); border-radius: 999px; background: #0b1528; overflow: hidden; }
.loadbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #f6e3a6, #e6b35a); box-shadow: inset 0 1px 0 #fff8; transition: width .2s; }
.splash { transition: opacity .55s ease; }
.splash.out { opacity: 0; pointer-events: none; }
.art-btn { width: 86%; margin: 0 auto; display: grid; place-items: center; font-size: 22px; font-weight: 800; letter-spacing: .06em; text-shadow: 0 2px 0 #0009; }
.art-btn span { grid-column: 1 / -1; }
.art-btn:disabled { opacity: .6; }
/* the painted "18+ · PLAY RESPONSIBLY" line is a link to the responsible-gambling page */
.splash-rg { position: absolute; left: 30%; width: 40%; top: 92.4%; height: 3.4%; border-radius: 8px; }
.splash-rg:focus-visible { outline: 2px solid var(--gold); }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: #000b; }
.modal-card { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c79b5c #0b1629; padding: 14px 12px 12px;
  border: 22px solid transparent; border-image: url("../img/modal-panel.webp?v=9") 40 fill / 22px stretch; }
.modal-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; }
.modal-x img { width: 22px; height: 22px; }
.modal-x:focus { outline: none; } .modal-x:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; border-radius: 12px; }
button:focus-visible:not(.main-btn):not(.art-btn):not(.modal-x) { outline: 2px solid var(--gold); outline-offset: 2px; }
.modal h2 { margin: 0 34px 10px 0; color: var(--gold); font-size: 24px; letter-spacing: .03em; }
.modal h3 { margin: 14px 0 6px; color: var(--gold); font-size: 17px; }
.modal p, .modal li { font-size: 15px; line-height: 1.45; color: var(--dim); }
.modal ul { padding-left: 20px; }
.modal .wordmark { display: block; width: 70%; margin: -6px auto 6px; }
.menu-list { display: grid; gap: 7px; margin-top: 6px; }
.menu-list button, .menu-list a { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; background: #12233bcc; box-shadow: inset 0 0 0 1px #c79b5c88;
  text-decoration: none; color: #fff; font-size: 16px; font-weight: 600; text-align: left; }
.menu-list img { width: 22px; height: 22px; flex: none; }
.menu-list .val { margin-left: auto; color: var(--gold); font-weight: 700; }
.menu-list button:disabled { opacity: .45; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.kv dt { color: var(--mute); } .kv dd { margin: 0; word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.modal .rounds { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.rounds li { padding: 10px; border-radius: 10px; background: #12233b; }
.rounds .ok { color: var(--profit); font-weight: 700; } .rounds .bad { color: var(--danger); font-weight: 700; }
.modal .art-btn { margin-top: 12px; }

/* ---------- mini-games ---------- */
.mg { text-align: center; }
.mg-stage { position: relative; margin: 6px auto 4px; }
.wheel-stage { margin-top: 34px; width: min(78vw, 320px, 100%); aspect-ratio: 1; background: url("../img/tex-cloud.webp?v=9") center / 200px repeat; border-radius: 50%; }
.wheel-stage .wheel { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.wheel-stage .pointer { position: absolute; left: 50%; top: -6%; width: 12%; transform: translateX(-50%); filter: drop-shadow(0 3px 4px #000a); }
.timing-stage { width: calc(100% - 24px); aspect-ratio: 768 / 128; margin: 18px auto 0; }
.timing-stage .track { position: absolute; inset: 0; width: 100%; height: 100%; }
.timing-stage .cursor { position: absolute; top: -22%; height: 144%; width: auto; transform: translateX(-50%); left: 50%; filter: drop-shadow(0 2px 3px #000a); }
.mg-result { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--gold); }
.mg-result img { width: 56px; height: 56px; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.mg-hint { font-size: 14px; color: var(--mute); margin: 4px 0; }

@media (max-height: 640px) { .row { height: calc(var(--W) * .25); } .row.bets { height: calc(var(--W) * .125); } .ctl { width: calc(var(--W) * .25); height: calc(var(--W) * .25); } .logo img { height: 42px; } }
@media (prefers-reduced-motion: reduce) { .main-btn.idle, .banner, .bonus button { animation: none; } }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: #0b1629; margin: 0; z-index: 99; }

/* Operator sessions: the casino holds the balance (no demo refill). */
body.operator #btn-refill, body.operator [data-act="refill"] { display: none !important; }
body.real-money .demo-only { display: none !important; }