:root {
  color-scheme: dark;
  --ink: #060b20;
  --cream: #fff2d4;
  --muted: #a0b3cf;
  --teal: #70fff0;
  --amber: #ffd369;
  --violet: #b78aff;
  --font: 'Avenir Next', 'PingFang SC', system-ui, sans-serif;
  --display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
  --cell-height: clamp(66px, calc((100svh - 400px) / 4), 106px);
  --cabinet-width: 680px;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; overflow-x: clip; color: var(--cream); background: #050b20; font-family: var(--font); }
button, input { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .42; cursor: default; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #b7fff5; outline-offset: 4px; }
button { transition: transform .16s, color .16s, background .16s; }
button:not(:disabled):active { transform: translateY(2px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.space-scene { position: fixed; inset: 0; z-index: -4; pointer-events: none; background: linear-gradient(180deg, #0608192b, #0712250a 40%, #050a20e6 100%), url('./assets/scene.webp') center 46% / cover no-repeat, radial-gradient(ellipse at 80% 35%, #235865, #091e32 65%); }
.stars { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(ellipse at 48% 48%, #050b2088 5%, transparent 47%), linear-gradient(90deg, #030a242b, transparent 80%); }
.scene-fx { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.nebula { position: absolute; width: 55vw; height: 55vw; border-radius: 50%; opacity: .25; animation: nebulaBreathe 13s ease-in-out infinite alternate; }
.nebula-cyan { left: -32%; top: 17%; background: radial-gradient(ellipse, #08e6ff80, transparent 68%); }
.nebula-violet { right: -30%; top: -10%; background: radial-gradient(ellipse, #8a36ff99, transparent 68%); animation-delay: -7s; }
.dust-field { position: absolute; inset: -8%; opacity: .35; background: radial-gradient(circle at 8% 31%, #c9ffff 0 1px, transparent 2px), radial-gradient(circle at 32% 13%, #f9dc9e 0 1px, transparent 2px), radial-gradient(circle at 58% 72%, #90d6ff 0 1px, transparent 2px), radial-gradient(circle at 81% 35%, #fff3c5 0 1px, transparent 2px); background-size: 293px 293px, 389px 389px, 437px 437px, 521px 521px; animation: spaceDrift 34s linear infinite alternate; }
.orbit-trail { position: absolute; width: 180px; height: 1px; left: -220px; top: 12%; transform: rotate(-25deg); background: linear-gradient(90deg, transparent, #a1fff1); opacity: 0; animation: orbitalPass 19s linear infinite; }
.trail-two { top: 37%; animation-delay: -11s; animation-duration: 27s; background: linear-gradient(90deg, transparent, #caa4ff); }
.app-shell { max-width: 1600px; margin: auto; padding: 0 40px; }
.topbar { height: 70px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #9bdfff17; }
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; font: 850 17px/1 var(--display); letter-spacing: 4px; }
.wordmark-art { width: 37px; height: 37px; filter: drop-shadow(0 0 8px #ffd88d4d); }
.wordmark-cargo { display: block; font-size: 10px; font-weight: 600; letter-spacing: 8.5px; margin-top: 6px; }
.topbar-right { display: flex; align-items: center; gap: 21px; }
.mode-tag { font-size: 9px; letter-spacing: 1.4px; border: 1px solid #9ddcca59; padding: 7px 10px; border-radius: 4px; color: #d9fff0; background: #0b233bba; }
.language-button { background: transparent; padding: 10px 0; font-size: 11px; letter-spacing: .5px; }
.language-button span { color: #a0b1cd; }
.icon-button { width: 34px; height: 34px; border: 1px solid #8bb6cc5e; border-radius: 50%; display: grid; place-items: center; background: #102039d9; }
.icon-button svg, .utility-button svg, .feature-button svg, .showcase-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mission-heading { text-align: center; padding: 13px 0 12px; }
.eyebrow { font-size: 8px; letter-spacing: 3px; font-weight: 700; color: var(--teal); }
h1 { font: italic 900 clamp(22px, 2.5vw, 35px)/1.1 var(--display); letter-spacing: -.8px; margin: 7px 0 4px; color: #fff4d2; text-shadow: 0 2px 0 #705c3d, 0 5px 18px #000b; }
p { line-height: 1.6; }
.mission-heading p { font-size: 10px; color: #bed1e0; margin: 0; }
.game-stage { position: relative; display: flex; justify-content: center; align-items: center; }
.game-stage::before { content: ''; position: absolute; inset: 15% 13% 8%; border-radius: 50%; background: radial-gradient(ellipse, #1ee7f522, #6e20de18 53%, transparent 72%); filter: blur(20px); pointer-events: none; }
.cabinet-wrap { width: min(var(--cabinet-width), 100%); position: relative; z-index: 2; }
.reward-tiers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 0 24px 12px; }
.tier { --tier-light: #74f7ff; --tier-dark: #0c4668; position: relative; min-height: 66px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 7px 9px; isolation: isolate; border: 1px solid var(--tier-light); border-radius: 13px 13px 7px 7px; background: linear-gradient(180deg, #71849b33, transparent 40%), linear-gradient(155deg, var(--tier-dark), #07152e 70%); box-shadow: inset 0 0 0 3px #050a206e, inset 0 0 20px #d5e4ff12, 0 3px 0 #020817, 0 0 17px color-mix(in srgb, var(--tier-light) 16%, transparent); }
.tier::before { content: ''; position: absolute; top: -3px; left: 25%; right: 25%; height: 3px; background: var(--tier-light); border-radius: 3px; box-shadow: 0 0 11px var(--tier-light); }
.tier-mega { --tier-light: #a3e9ef; --tier-dark: #164354; }
.tier-super { --tier-light: #ffe198; --tier-dark: #765023; }
.tier-art { width: 33px; height: 33px; flex-shrink: 0; fill: var(--tier-dark); stroke: var(--tier-light); stroke-width: 1.5; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tier-light) 45%, transparent)); }

.tier > div { text-align: center; min-width: 0; }
.tier span { display: block; font: 850 9px/1.2 var(--display); letter-spacing: 1.1px; color: var(--tier-light); }
.tier strong { display: block; font: italic 950 32px/.95 var(--display); letter-spacing: -1.5px; margin-top: 4px; color: #fff7e2; text-shadow: 0 2px 0 #050b20; }
.tier strong small { font-size: 17px; margin-left: 2px; vertical-align: top; }
.tiers-note { grid-column: 1 / -1; margin: -2px 0 0; color: #bdd0dc; text-align: center; font-size: 7px; line-height: 1.3; letter-spacing: 1.1px; }
.cabinet-top { display: flex; justify-content: space-between; align-items: center; padding: 0 22px 8px; font-size: 8px; letter-spacing: 1.5px; color: #c6f2eb; }
.signal { display: flex; align-items: center; gap: 7px; }
.signal i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.line-badge { color: #ffe39b; font-size: 8px; }
.cabinet { position: relative; padding: 18px 23px 0; border: 2px solid #e0c27d; border-radius: 31px; background: linear-gradient(135deg, #fff5c7 0%, #b6974c 1%, #2c3e60 3%, #0b152d 14%, #1b3150 48%, #15172c 70%, #816a40 96%, #ffe8a1 100%); box-shadow: 0 0 0 3px #050919, 0 0 0 4px #558f9a, inset 0 0 0 4px #cfe4e52b, inset 0 1px 2px #fff, -9px 0 26px #19cce53d, 9px 0 30px #995cf045, 0 21px 44px #000a; }
.cabinet::before { content: ''; position: absolute; top: -3px; left: 18%; right: 18%; height: 5px; background: linear-gradient(90deg, transparent, #ffeec4, #ffe7ae, transparent); box-shadow: 0 0 20px #ffdc93a6; pointer-events: none; }
.cabinet::after { content: ''; position: absolute; bottom: -4px; left: 17%; right: 17%; height: 3px; background: linear-gradient(90deg, #59f3f4, #a487ff); box-shadow: 0 0 14px #7dcbffb3; border-radius: 8px; pointer-events: none; }
.cabinet-rail { position: absolute; top: 20%; bottom: 17%; width: 5px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.rail-left { left: 7px; color: #8afff6; }
.rail-right { right: 7px; color: #f1d99c; }
.cabinet-rail i { height: 24%; width: 100%; border-radius: 3px; background: currentColor; box-shadow: 0 0 8px currentColor, 0 0 14px currentColor; opacity: .85; }
.reel-inset { position: relative; border: 1px solid #99dbd7; border-radius: 16px; padding: 9px 12px; overflow: hidden; background: radial-gradient(ellipse at 25% 0%, #0b4a63 0, transparent 48%), radial-gradient(ellipse at 90% 100%, #372355, transparent 60%), #070f29; box-shadow: inset 0 0 26px 8px #0008, 0 0 0 4px #061122, 0 0 0 5px #e9cf8f66, 0 0 19px #44ffda14; }
.reel-inset::before { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, #01051980, transparent 10%, transparent 90%, #01051980), linear-gradient(115deg, #d8ffff0b, transparent 38%); border-radius: inherit; }
.reels { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: center; min-height: calc(var(--cell-height) * 4 + 18px); }
.reel { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.reel:not(:last-child)::after { content: ''; position: absolute; right: -7px; top: -9px; bottom: -9px; width: 1px; background: linear-gradient(transparent, #62d4eb77 30%, #bf95e977 70%, transparent); box-shadow: 0 0 8px #7bfff34d; }
.cell { position: relative; height: var(--cell-height); display: grid; place-items: center; isolation: isolate; border: 1px solid transparent; border-radius: 12px; transition: box-shadow .2s, background .2s; }
.cell::before { content: ''; position: absolute; inset: 0 5%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #b8ecff13, transparent 70%); }
.symbol-art { width: calc(var(--cell-height) + 13px); height: calc(var(--cell-height) + 13px); max-width: 100%; overflow: visible; filter: drop-shadow(0 4px 3px #0007); }
.cell[data-symbol='wild']::before { background: radial-gradient(ellipse, #ffcc6633, transparent 65%); }
.cell[data-symbol='wild']::after { content: none; }
.cell[data-symbol='prize']::before { background: radial-gradient(ellipse, #ffcf633b, transparent 70%); }
.prize-value { position: absolute; z-index: 2; bottom: -1px; left: 50%; transform: translateX(-50%); min-width: 40px; padding: 2px 8px; border: 1px solid #fff0af; border-radius: 5px; background: linear-gradient(#4a3d1b, #171b2b); color: #fff4c6; font: 900 12px/1.1 var(--display); white-space: nowrap; text-align: center; box-shadow: 0 2px 0 #050a1b, 0 0 9px #ffd37140; }
.cell:has(.symbol-prize[data-cargo-grade='charged'])::before { background: radial-gradient(ellipse, #ffbf444d, transparent 72%); }
.cell:has(.symbol-prize[data-cargo-grade='cosmic'])::before { background: radial-gradient(ellipse, #f6cf6a33, transparent 72%); }
.cell:has(.symbol-prize[data-cargo-grade='cosmic']) .prize-value { border-color: #fff0bb; color: #fff0bf; background: linear-gradient(#675023, #172432); box-shadow: 0 0 8px #eac66a33; }
.cell.is-winning { border-color: #ffe18c; background: radial-gradient(ellipse, #9d793c73, #84622018); box-shadow: inset 0 0 19px #ffda6d44, 0 0 15px #ffe18c55; animation: winPulse 1.4s ease-in-out infinite; }
.cell.is-winning .symbol-art { animation: floatSymbol 1.4s ease-in-out infinite; }
.cabinet-bottom { height: 27px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #c2d5d9; font-size: 7px; letter-spacing: 3px; }
.tiny-bars { font-size: 7px; color: #91dfde; letter-spacing: 1px; }
.screw { position: absolute; width: 7px; height: 7px; border: 1px solid #ffe7aa; transform: rotate(45deg); background: linear-gradient(135deg, #ffe6a2, #7d6842); box-shadow: 0 1px 3px #000; }
.s1 { top: 10px; left: 10px; }.s2 { top: 10px; right: 10px; }.s3 { bottom: 10px; left: 10px; }.s4 { bottom: 10px; right: 10px; }
.status-strip { min-height: 35px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 4px; }
.status-strip p { margin: 0; font-size: 10px; text-align: center; color: #d5e7e5; line-height: 1.4; }
.status-spark { color: #f2ce88; font-size: 17px; }
.side-note { position: absolute; left: 2%; top: 37%; width: 155px; display: flex; align-items: flex-start; flex-direction: column; gap: 12px; text-shadow: 0 2px 12px #000; }
.orbit-icon { color: #ffe3a1; font-size: 35px; }
.side-note > span:nth-child(2) { color: #e3c793; font-size: 9px; letter-spacing: 2px; }
.side-note i { width: 40px; height: 1px; background: #e7cc9199; }
.side-note strong { font: 600 9px/1.7 var(--display); letter-spacing: 1.5px; color: #c3d7e1; }
.captain-caption { position: absolute; right: 1%; bottom: 50px; max-width: 180px; text-align: center; padding: 10px 12px; border-top: 1px solid #d7d8dd55; background: #08152f99; backdrop-filter: blur(4px); }
.captain-caption span { color: #ffe3a3; font: 700 9px var(--display); letter-spacing: 2px; }
.captain-caption small { display: block; margin-top: 6px; font-size: 9px; color: #c2d6df; }
.controls { position: relative; max-width: 770px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 130px 1.1fr; align-items: center; gap: 12px; padding: 12px 20px; border: 1px solid #668697; border-bottom-color: #d7b56d; border-radius: 15px 15px 24px 24px; background: linear-gradient(180deg, #334e6966, transparent 38%), linear-gradient(130deg, #0d1a32ee, #0c182df5); box-shadow: 0 4px 0 #020716, 0 5px 0 #f2d08a36, 0 12px 30px #0006, inset 0 1px 0 #e0f5ff30; }
.stat, .bet-control { min-width: 0; text-align: center; }
.stat > span, .bet-control > span { font: 650 9px var(--display); letter-spacing: 1.5px; color: #a9c4d9; }
.stat strong { display: block; margin: 4px 0 0; font: 750 clamp(17px, 2vw, 25px)/1.1 var(--display); letter-spacing: -.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat small, .bet-control small { color: #8ea9c1; font-size: 8px; }
.win strong { color: #ffe7a0; text-shadow: 0 0 12px #e6bd4933; }
.balance { border-right: 1px solid #a1cbdf29; padding-right: 10px; }.win { border-left: 1px solid #a1cbdf29; padding-left: 10px; }
.bet-stepper { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 4px; }
.bet-stepper strong { min-width: 48px; font: 750 22px/1 var(--display); }
.bet-stepper button { flex: 0 0 28px; width: 28px; height: 32px; border: 1px solid #7899b070; border-radius: 8px; background: #142840; font: 500 20px/1 var(--display); }
.spin-button { position: relative; height: 72px; border: 2px solid #fff2b7; border-radius: 42px; background: radial-gradient(ellipse at 50% 0%, #fff9d9, transparent 65%), linear-gradient(#ffe3a0, #ffc24d 55%, #d18c23); color: #493013; box-shadow: 0 4px 0 #785021, 0 6px 0 #050a1c, 0 0 22px #ffbd4744, inset 0 -3px 0 #b9781d55, inset 0 2px 1px #fff4c6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-shadow: 0 1px 0 #ffedae; }
.spin-button svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spin-button span { font: 900 12px var(--display); letter-spacing: 2px; }
.spin-button:not(:disabled):hover { background: radial-gradient(ellipse at 50% 0%, #fffdeb, transparent 65%), linear-gradient(#ffeabf, #ffd16c 55%, #e9a433); }
.spin-button:disabled { opacity: .65; }
.utility-bar { max-width: 770px; margin: 12px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.utility-group { display: flex; align-items: center; gap: 15px; min-width: 0; }
.utility-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 5px 0; font-size: 10px; color: #afc5dd; background: transparent; }
.utility-button svg { width: 18px; height: 18px; }
.utility-button[aria-pressed='true'] { color: #92fff0; }
.utility-button:hover { color: #fff1ca; }
.audio-controls { display: flex; align-items: center; gap: 8px; }
.feature-button, .showcase-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 9px; border: 1px solid #80beb164; border-radius: 7px; background: #123c3bba; font-size: 10px; color: #d5f1d0; }
.feature-button:hover { background: #25554a; }
.showcase-button { border-color: #ad86d98c; background: #302342cc; color: #e9cfff; }
.showcase-button:hover { background: #513365; }
.showcase-button svg, .feature-button svg { width: 17px; height: 17px; }
.feature-pill { font: 800 10px var(--display); color: #18332e; background: #e3dfa3; padding: 1px 5px; border-radius: 3px; }
.error-banner { max-width: 770px; margin: 14px auto; padding: 12px 15px; border: 1px solid #e59c7d88; border-radius: 9px; background: #692f36ee; color: #ffe4cf; font-size: 12px; line-height: 1.5; }
.error-banner button { background: #f4d1a0; color: #472c28; border-radius: 4px; min-height: 32px; padding: 5px 10px; float: right; margin-left: 10px; }
footer { max-width: 770px; margin: 14px auto 0; padding-bottom: 14px; display: flex; justify-content: space-between; color: #8ba1ba; font-size: 7px; line-height: 1.5; letter-spacing: 1px; }
.footer-mark { margin-left: 12px; color: #bac6b5; white-space: nowrap; }
.win-overlay { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse, #0f2047e6, transparent 75%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.win-overlay.show { opacity: 1; }
.win-overlay span { color: #ffe8aa; font: 800 11px var(--display); letter-spacing: 3px; text-shadow: 0 2px 8px #000; }
.win-overlay strong { color: #ffe9ab; font: 950 64px var(--display); letter-spacing: -3px; text-shadow: 0 3px 0 #8f561c, 0 0 40px #eab555; }
.is-spinning .cell .symbol-art { animation: spinSymbols .21s linear infinite; opacity: .65; filter: blur(1px) drop-shadow(0 2px 4px #0006); }
.is-spinning .reel:nth-child(2) .symbol-art { animation-delay: -.09s; }.is-spinning .reel:nth-child(3) .symbol-art { animation-delay: -.15s; }
.is-spinning .spin-button svg { animation: turn 1s linear infinite; }
.reel.is-landing .cell { animation: land .4s cubic-bezier(.18,.7,.2,1) both; animation-delay: var(--land-delay); }
body.bonus-mode { --teal: #ffe294; }
.bonus-mode .cabinet { border-color: #fff0b6; background: linear-gradient(135deg, #fff8c7, #b88736 2%, #4d3b46 8%, #2f234b 45%, #4f263b 75%, #c38c3d 98%, #ffe7ab); box-shadow: 0 0 0 3px #1b1228, 0 0 0 4px #cfb182, inset 0 0 0 4px #ffea981f, -10px 0 35px #ffc84944, 10px 0 35px #d355e955, 0 20px 44px #000a; }
.bonus-mode .reel-inset { background: radial-gradient(ellipse at top, #68451f73, transparent 55%), radial-gradient(ellipse at bottom, #68336f66, transparent 70%), #17142e; border-color: #ffdd91; }
.bonus-mode .rail-left { color: #ffe8a3; }.bonus-mode .rail-right { color: #e4a1ff; }
.bonus-mode .signal i { background: #ffe59d; box-shadow: 0 0 10px #ffe59d; }.bonus-mode .status-strip p { color: #ffdf97; }
.bonus-mode .nebula-violet { opacity: .45; }.bonus-mode .nebula-cyan { background: radial-gradient(ellipse, #e8ab3e80, transparent 68%); }
/* Dialog surfaces retain all original business controls. */
dialog { width: min(650px, calc(100vw - 24px)); max-height: 86svh; margin: auto; padding: 23px 27px; border: 1px solid #92a9b7; border-radius: 20px; color: var(--cream); background: radial-gradient(ellipse at top right, #5c337c45, transparent 65%), linear-gradient(145deg, #16344b, #0a142b); box-shadow: 0 25px 100px #000b, inset 0 1px 0 #fff5c333; overflow: auto; }
dialog::backdrop { background: #020817d6; backdrop-filter: blur(7px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; }
dialog h2 { margin: 16px 0; font: 850 28px/1.15 var(--display); letter-spacing: -.6px; }
dialog h3 { margin: 25px 0 12px; color: #f3d28c; font: 750 10px var(--display); letter-spacing: 2px; }
dialog p { color: #c0d1de; font-size: 12px; }
dialog .prototype-note { border-left: 2px solid #b5a0d5; border-radius: 0 5px 5px 0; padding: 12px 14px; background: #30405966; font-size: 11px; }
.paytable { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.paytable-item { display: flex; flex-direction: column; align-items: center; padding: 9px 4px; border: 1px solid #9ac0ac40; border-radius: 10px; background: #0a1939a6; }
.paytable-item svg { width: 65px; height: 65px; }.paytable-item span { color: #c6d7df; font-size: 10px; text-align: center; }.paytable-item strong { margin-top: 5px; color: #ffe29a; font: 850 18px var(--display); }
.paylines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.payline { text-align: center; padding: 5px; border: 1px solid #a6c0a333; border-radius: 6px; background: #061c2d77; }.payline svg { width: 100%; height: 58px; }.payline span { font-size: 9px; color: #b3c5d2; }
.history-table { width: 100%; border-collapse: collapse; font-size: 11px; }.history-table th { text-align: left; color: #9eb5cd; font-weight: 600; padding: 10px 5px; border-bottom: 1px solid #99b6a64d; }.history-table td { padding: 11px 5px; color: #d0e1dd; border-bottom: 1px solid #99b6a61c; font-variant-numeric: tabular-nums; }.history-table td:last-child { text-align: right; color: #ffe09b; }.history-table th:last-child { text-align: right; }
.auto-options, .showcase-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.auto-options button, [data-showcase] { position: relative; min-width: 0; min-height: 66px; padding: 16px 9px; border: 1px solid #a4b79c88; border-radius: 10px; color: #ffe3a6; background: linear-gradient(140deg, #32494d, #14263b); font: 750 13px/1.4 var(--display); }
.auto-options button:hover { background: #426054; }
[data-showcase] { display: inline-flex; justify-content: center; align-items: center; border-color: #7bdde2aa; color: #bafaff; background: linear-gradient(140deg, #1d4963, #111f3c); }
[data-showcase='mega'] { border-color: #cba1eaaa; color: #ead0ff; background: linear-gradient(140deg, #543568, #1f193b); }
[data-showcase='super'] { border-color: #ffe19caa; color: #ffe8a6; background: linear-gradient(140deg, #6b4d28, #241d30); }
[data-showcase='feature'] { border-color: #9ae7c5aa; color: #c0ffe7; background: linear-gradient(140deg, #25564d, #142638); }
[data-showcase]:hover { filter: brightness(1.2); }
.dialog-cancel { width: 100%; min-height: 40px; padding: 11px; border-radius: 7px; background: #2c435d; font-size: 12px; }
.spinning-dot::after { content: '…'; }
@keyframes nebulaBreathe { to { transform: translate3d(5%, -3%, 0) scale(1.12); opacity: .4; } }
@keyframes spaceDrift { to { transform: translate3d(22px, 28px, 0); } }
@keyframes orbitalPass { 0%, 65% { transform: translate3d(0, 0, 0) rotate(-25deg); opacity: 0; } 68% { opacity: .7; } 77%, 100% { transform: translate3d(120vw, 42vh, 0) rotate(-25deg); opacity: 0; } }
@keyframes spinSymbols { 0% { transform: translateY(-20px) scale(.94); } 100% { transform: translateY(20px) scale(.94); } }
@keyframes land { 0% { transform: translateY(-22px); opacity: .4; } 65% { transform: translateY(5px); opacity: 1; } 100% { transform: translateY(0); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes winPulse { 50% { box-shadow: inset 0 0 25px #ffde694d, 0 0 23px #ffe18c66; } }
@keyframes floatSymbol { 50% { transform: translateY(-3px) scale(1.07); } }
@media (min-width: 1500px) { :root { --cabinet-width: 730px; }.side-note { left: 6%; }.captain-caption { right: 3%; }.space-scene { background-position: center 45%; } }
@media (max-width: 1150px) { .app-shell { padding: 0 24px; }.side-note { display: none; }.captain-caption { right: 0; max-width: 135px; }.captain-caption small { font-size: 8px; }:root { --cabinet-width: 640px; } }
@media (max-width: 950px) { .captain-caption { display: none; }.space-scene { background-position: 60% center; }.utility-bar { gap: 10px; }.utility-group { gap: 11px; } }
@media (min-width: 601px) and (max-height: 780px) { :root { --cell-height: clamp(56px, calc((100svh - 384px) / 4), 94px); --cabinet-width: 640px; }.topbar { height: 56px; }.mission-heading { padding: 8px 0 9px; }.mission-heading h1 { font-size: 25px; margin: 5px 0 2px; }.mission-heading p { display: none; }.reward-tiers { margin-bottom: 9px; gap: 8px; }.tier { min-height: 57px; padding: 5px 8px; }.tier strong { font-size: 28px; }.tier-art { width: 29px; height: 29px; }.cabinet { padding-top: 14px; }.cabinet-bottom { height: 24px; }.spin-button { height: 64px; }.controls { padding-top: 9px; padding-bottom: 9px; }.utility-bar { margin-top: 9px; }footer { margin-top: 9px; padding-bottom: 9px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .orbit-trail { display: none; }.dust-field { transform: none; }.is-spinning .cell .symbol-art { opacity: .45; filter: none; }
}
.bonus-hud { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6px 20px; margin: 0 22px 11px; padding: 9px 14px 8px; border: 1px solid #f4d08b; border-radius: 10px; background: linear-gradient(125deg, #6c472d99, #36274ed9 55%, #1b2440e6); box-shadow: inset 0 1px 0 #fff0ba44, 0 0 18px #d5aa4e22; }
.bonus-hud-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }.bonus-hud-stat > span { font: 750 8px/1.3 var(--display); letter-spacing: 1px; color: #f7d697; }.bonus-hud-stat strong { font: 900 24px/1 var(--display); font-variant-numeric: tabular-nums; color: #fff0b7; }.bonus-hud-total { border-left: 1px solid #ffd98a55; padding-left: 18px; }.bonus-hud-total strong { font-size: 19px; overflow-wrap: anywhere; }
.bonus-progress { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }.bonus-progress > * { height: 4px; border-radius: 3px; border: 1px solid #bda7ca4d; background: #101a32; }.bonus-progress > :is(.is-complete,.is-done,.filled,[data-complete='true']) { background: #ffdd88; border-color: #fff0ae; box-shadow: 0 0 5px #ffd67066; }.bonus-progress > :is(.is-active,.active,[data-active='true']) { background: #a0ffeb; border-color: #c5fff4; box-shadow: 0 0 7px #85ffeccc; }

/* Keep the playable cabinet and character ahead of the marketing headline. */
.mission-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root { --cell-height: clamp(65px, calc((100svh - 630px) / 4), 106px); }
@media (min-width: 601px) and (max-height: 780px) { :root { --cell-height: clamp(58px, calc((100svh - 545px) / 4), 82px); --captain-height: 136px; }.topbar { height: 52px; }.reward-tiers { gap: 6px; }.tier { min-height: 46px; }.tier strong { font-size: 23px; }.tier span { font-size: 8px; }.tier-art { width: 25px; height: 25px; }.spin-button { height: 61px; }.status-strip { min-height: 31px; } }

/* AI art system: original colour and alpha are preserved. Illustration is never
   recreated with CSS; these rules frame and size the approved image assets. */
:root { --captain-height: 174px; --art-shadow: 0 4px 3px #0007; }
.wordmark-art, .tier-art, .orbit-icon { display: block; object-fit: contain; flex-shrink: 0; }
.wordmark-art { width: 37px; height: 37px; filter: drop-shadow(0 2px 3px #0005); }
.tier-art { width: 40px; height: 40px; padding: 0; filter: drop-shadow(0 3px 3px #0005); }
.orbit-icon { width: 40px; height: 40px; }
.symbol-art { display: block; object-fit: contain; object-position: center; flex-shrink: 0; user-select: none; -webkit-user-drag: none; }
.cell > .ai-symbol { width: min(100%, calc(var(--cell-height) - 2px)); height: calc(var(--cell-height) - 2px); filter: drop-shadow(var(--art-shadow)); }
.cell::before { opacity: .55; }
/* The multiplier has its own lower shelf; it never covers the cargo lock. */
.cell[data-symbol='prize'] { padding-bottom: 16px; }
.cell[data-symbol='prize'] > .ai-symbol { width: min(100%, calc(var(--cell-height) + 7px)); height: calc(var(--cell-height) - 16px); }
.prize-value { bottom: 0; min-width: 35px; padding: 1px 7px; font-size: 11px; line-height: 1.15; border-radius: 4px; border-color: #d5b977; background: #102736f2; box-shadow: 0 1px 2px #0009; }
.cell:has(.symbol-prize[data-cargo-grade='charged']) .prize-value { color: #fff0bc; border-color: #f0d191; }
.cell[data-symbol='wild']::after { content: none; }
.ai-wild { position: relative; display: block; width: calc(var(--cell-height) - 6px); height: calc(var(--cell-height) - 2px); max-width: 100%; overflow: hidden; border: 2px solid #e0c17a; border-radius: 38% 38% 18% 18%; background: #092436; box-shadow: inset 0 0 0 2px #273c50, 0 3px 5px #0008; filter: none; }
.ai-wild > img { position: absolute; width: 220%; max-width: none; height: auto; left: 50%; top: -3%; transform: translateX(-50%); object-fit: contain; pointer-events: none; }
.ai-wild > b { position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 2px 1px; text-align: center; color: #fff2be; font: 950 11px/1.1 var(--display); letter-spacing: .7px; background: linear-gradient(#243b45f2, #071b2bf5); border-top: 1px solid #e3c785a6; text-shadow: 0 1px 2px #000; }
.wild-label-zh { display: none; }
html[lang='zh-CN'] .wild-label-en { display: none; }
html[lang='zh-CN'] .wild-label-zh { display: inline; }
.paytable-item .symbol-art { width: 64px; height: 64px; max-width: 100%; object-fit: contain; }
/* The exact same source and crop are used for the still and motion planes. */
.captain-mascot { position: relative; width: 100%; height: var(--captain-height); margin: 8px auto 13px; isolation: isolate; pointer-events: none; }
.captain-cinema { position: absolute; width: min(calc(var(--captain-height) * 1.777778), 100%); height: 100%; left: 0; right: 0; margin-inline: auto; top: 0; overflow: hidden; border: 1px solid #c5ab72; border-radius: 22px 22px 12px 12px; background: #082738; box-shadow: 0 0 0 3px #09182b, 0 0 0 4px #6e8f945c, 0 9px 22px #0007; }
.captain-cinema::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border-top: 1px solid #f4e2b6a6; box-shadow: inset 0 -22px 16px -18px #061222cc; pointer-events: none; }
.captain-still, .captain-film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: #082738; }
.captain-still { z-index: 0; }
/* Hold the final film frame above the aligned idle poster during the return. */
.captain-film { z-index: 1; opacity: 0; transition: opacity .42s cubic-bezier(.22, 1, .36, 1); }
.captain-cinema.is-playing .captain-film { opacity: 1; }
.captain-aura { position: absolute; z-index: -1; inset: -12% 20% -10%; border-radius: 50%; background: radial-gradient(ellipse, #6fe1dd22, #b8954512 55%, transparent 75%); pointer-events: none; }
.captain-cargo-readout { position: absolute; z-index: 2; left: 50%; bottom: -7px; display: flex; align-items: center; justify-content: center; min-width: 116px; max-width: 75%; min-height: 23px; padding: 4px 13px; transform: translateX(-50%); border: 1px solid #d6bb80; border-radius: 5px; background: linear-gradient(#1e3b49, #0b2033); box-shadow: 0 2px 5px #0008; }
.captain-cue { display: none; color: #e8edcf; font: 850 9px/1.2 var(--display); letter-spacing: 1px; text-align: center; }
.cue-idle { display: block; }
body.is-spinning .captain-cue, body[data-captain='spin'] .captain-cue { display: none; }
body.is-spinning .cue-spin, body[data-captain='spin'] .cue-spin { display: block; color: #befff2; }
body:is([data-captain='collect'],[data-captain='big'],[data-captain='mega'],[data-captain='super'],[data-captain='feature']) .captain-cue { display: none; }
body[data-captain='collect'] .cue-collect, body[data-captain='big'] .cue-big, body[data-captain='mega'] .cue-mega, body[data-captain='super'] .cue-super, body[data-captain='feature'] .cue-feature { display: block; }
body:is([data-captain='big'],[data-captain='mega'],[data-captain='super'],[data-captain='feature']) .captain-cargo-readout { border-color: #ffe3a3; background: linear-gradient(#574625, #182a37); }
body:is([data-captain='big'],[data-captain='mega'],[data-captain='super'],[data-captain='feature']) .captain-cue { color: #fff1ba; }
body:is([data-captain='super'],[data-captain='feature']) .captain-aura { background: radial-gradient(ellipse, #f5d0783d, #5bc5c422 55%, transparent 75%); }
body[data-captain='big'] .tier-big, body[data-captain='mega'] .tier-mega, body[data-captain='super'] .tier-super { border-color: #fff1bc; box-shadow: inset 0 0 16px #f3d99226, 0 0 15px #edce8033; }
/* Narrow screens keep a legible face without taking height from the reels. */
@media (min-width: 601px) and (max-height: 780px) { :root { --captain-height: 136px; }.captain-mascot { margin-top: 6px; margin-bottom: 12px; }.tier-art { width: 29px; height: 29px; }.captain-cargo-readout { min-height: 21px; padding-top: 3px; padding-bottom: 3px; }.captain-cue { font-size: 8px; } }

@media (prefers-reduced-motion: reduce) { .captain-film { opacity: 0 !important; transition: none; }.captain-still { opacity: 1; }.captain-mascot *, .captain-mascot *::before, .captain-mascot *::after { animation: none !important; transition: none !important; } }
/* Readability pass: information and touch targets take priority over decorative
   density. Keep these rules last so compact layouts cannot shrink the labels. */
body { text-rendering: optimizeLegibility; }
.mode-tag { font-size: 12px; font-weight: 650; letter-spacing: .4px; color: #d9fff0; }
.language-button { font-size: 14px; min-height: 44px; }
.topbar .icon-button { width: 40px; height: 44px; }
.eyebrow { font-size: 12px; letter-spacing: 1.4px; }
.mission-heading p { font-size: 14px; }
.tier span { font-size: 13px; line-height: 1.25; letter-spacing: .4px; }
.tier strong { font-size: 32px; }
.tiers-note { font-size: 12px; line-height: 1.4; letter-spacing: .2px; color: #c9dae6; }
.cabinet-top, .line-badge { font-size: 12px; line-height: 1.35; letter-spacing: .3px; }
.cabinet-bottom { font-size: 11px; letter-spacing: 1px; }
.status-strip { min-height: 44px; }
.status-strip p { font-size: 14px; line-height: 1.5; color: #e0eeeb; }
.stat > span, .bet-control > span { font-size: 13px; font-weight: 650; letter-spacing: .4px; color: #c9dce9; }
.stat strong { font-size: 27px; line-height: 1.15; }
.stat small, .bet-control small { font-size: 12px; line-height: 1.3; color: #c1d2df; }
.bet-stepper strong { font-size: 24px; }
.bet-stepper button { flex-basis: 36px; width: 36px; height: 44px; font-size: 23px; }
.spin-button span { font-size: 16px; letter-spacing: .7px; line-height: 1.2; }
.utility-bar { flex-wrap: wrap; }
.utility-group { flex-wrap: wrap; }
.utility-button { font-size: 14px; line-height: 1.25; min-height: 44px; color: #cbdde9; }
.feature-button, .showcase-button { font-size: 14px; line-height: 1.3; min-height: 44px; }
.feature-pill { font-size: 12px; }
.error-banner { font-size: 14px; }.error-banner button { min-height: 44px; font-size: 14px; }
.prize-value { font-size: 12px; line-height: 1.2; min-width: 38px; padding: 1px 6px; }
.cell[data-symbol='prize'] { padding-bottom: 20px; }
.cell[data-symbol='prize'] > .ai-symbol { height: calc(var(--cell-height) - 20px); }
.ai-wild > b { font-size: 12px; line-height: 1.2; }
.captain-cargo-readout { min-width: 150px; min-height: 29px; padding: 5px 10px; }
.captain-cue { font-size: 12px; line-height: 1.25; letter-spacing: .3px; }
.bonus-hud-stat > span { font-size: 12px; line-height: 1.3; letter-spacing: .2px; }
.bonus-hud-stat strong { font-size: 26px; }.bonus-hud-total strong { font-size: 23px; }
.side-note > span:nth-child(2), .side-note strong, .captain-caption span, .captain-caption small { font-size: 12px; line-height: 1.4; letter-spacing: .4px; }
footer { font-size: 12px; line-height: 1.45; letter-spacing: .2px; color: #b9ccd9; }.footer-mark { font-size: 12px; }
dialog h2 { font-size: 28px; }dialog h3 { font-size: 15px; letter-spacing: .6px; }
dialog p { font-size: 15px; line-height: 1.65; color: #d7e4ed; }
dialog .prototype-note { font-size: 14px; }
.paytable-item span { font-size: 12px; line-height: 1.35; }.paytable-item strong { font-size: 21px; }
.payline span { font-size: 12px; }
.history-table { font-size: 13px; line-height: 1.45; }.history-table td { overflow-wrap: anywhere; }
.auto-options button, [data-showcase] { font-size: 15px; min-height: 64px; }
.dialog-cancel { font-size: 15px; min-height: 44px; }

.language-button { min-width: 44px; }
.icon-button, .topbar .icon-button { width: 44px; height: 44px; }
.wordmark { min-height: 44px; }
.bet-stepper button { flex-basis: 44px; width: 44px; height: 44px; }

.mode-tag, .cabinet-bottom, footer, .footer-mark { font-size: 12px; }
.wordmark-cargo { font-size: 12px; letter-spacing: 3px; }
/* Empty positions are truly empty: no fallback symbol, halo or value badge. */
.symbol-blank { background: none; border: 0; box-shadow: none; filter: none; }
.cell[data-symbol='blank'] { background: transparent; border-color: transparent; box-shadow: none; }
.cell[data-symbol='blank']::before, .cell[data-symbol='blank']::after { content: none; }
.cell[data-symbol='blank'] .prize-value { display: none; }
.bonus-match { grid-column: 1 / -1; margin: 0; color: #fff0c5; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
/* Horizontal slot dividers sit halfway inside the existing 6px row gaps.
   Each reel keeps its own 3 / 4 / 3 geometry; dividers also remain at blanks. */
.reel > .cell + .cell::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -4px;
  bottom: auto;
  left: 8%;
  right: 8%;
  height: 1px;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, #71cfc34d 14%, #d7c6978c 50%, #71cfc34d 86%, transparent);
  box-shadow: 0 1px 0 #020a1a99, 0 0 5px #8edbd118;
  pointer-events: none;
}
.bonus-mode .reel > .cell + .cell::after {
  background: linear-gradient(90deg, transparent, #a6c9b54d 14%, #e8cf978c 50%, #a6c9b54d 86%, transparent);
}

/* Clear numerals share one font treatment, independent of ornamental labels. */
.stat strong, .bet-stepper strong, .bonus-hud-stat strong, .tier strong,
.paytable-item strong, .win-overlay strong, .prize-value {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: normal;
  text-shadow: none;
  -webkit-text-stroke: 0;
  filter: none;
}
.win strong, .win-overlay strong { color: #fff2cf; }
/* Rolling balance: colour only, so the digits stay crisp while they change. */
#balance { transition: color .25s ease-out; }
#balance.is-rolling-up { color: #8dffc8; }
#balance.is-rolling-down { color: #ffc2a8; }
#reels .cell .prize-value {
  left: 0; right: 0; width: max-content; max-width: 100%; margin-inline: auto;
  transform: none; color: #fff7de; background: #102736; box-shadow: none;
}
.topbar #history-button { min-width: 44px; min-height: 44px; }
.topbar #history-button span { display: none; }
.utility-group.debug-group { display: none; }
.developer-tools .utility-group.debug-group { display: flex; }

/* One phone layout. Remaining viewport height belongs to the reels; minimum
   sizes preserve readable art and 44px controls on short screens via scrolling. */
@media (max-width: 600px) {
  body { --captain-height: 90px; --cabinet-width: 100%; }
  .app-shell {
    min-height: 100svh; min-height: 100dvh;
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .topbar { position: relative; flex: 0 0 48px; height: 48px; gap: 6px; }
  .wordmark { gap: 5px; font-size: 12px; letter-spacing: 2px; }
  .wordmark-art { width: 25px; height: 25px; }
  .wordmark-cargo { font-size: 12px; letter-spacing: 3px; margin-top: 4px; visibility: hidden; }
  .topbar-right { gap: 4px; }
  .mode-tag { display: block; position: absolute; left: 30px; bottom: 7px; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
  .language-button { font-size: 12px; }
  .topbar .icon-button, .topbar #history-button { width: 44px; height: 44px; padding: 0; flex: 0 0 44px; }
  .topbar .icon-button svg { width: 20px; height: 20px; }
  main { flex: 1 0 auto; display: flex; flex-direction: column; }
  .reward-tiers, .cabinet-top, .cabinet-bottom, .side-note, .captain-caption, footer { display: none; }
  .game-stage { flex: 1 0 auto; align-items: stretch; }
  .cabinet-wrap { display: flex; flex: 1 0 auto; flex-direction: column; }
  .captain-mascot { flex: 0 0 90px; height: 90px; margin: 4px auto 12px; }
  .captain-cinema { width: 160px; border-radius: 13px 13px 8px 8px; }
  .captain-cargo-readout { min-height: 24px; min-width: 144px; padding: 3px 8px; bottom: -8px; }
  .captain-cue { font-size: 12px; line-height: 1.2; letter-spacing: 0; }
  .cabinet { display: flex; flex: 1 0 auto; padding: 6px 12px; border-width: 1px; border-radius: 23px; }
  .cabinet-rail { width: 3px; }.rail-left { left: 4px; }.rail-right { right: 4px; }
  .reel-inset { display: flex; flex: 1 0 auto; padding: 6px 5px; border-radius: 12px; min-width: 0; }
  .reels { flex: 1 0 auto; gap: 7px; min-height: 234px; container-type: size; }
  .reel { --cell-height: calc((100cqh - 18px) / 4); align-self: stretch; }
  .reel:not(:last-child)::after { right: -4px; }
  .cell { flex: 0 0 var(--cell-height); border-radius: 8px; }
  .cell > .ai-symbol { width: min(100%, 106px, calc(var(--cell-height) - 2px)); height: min(106px, calc(var(--cell-height) - 2px)); }
  .cell[data-symbol='prize'] > .ai-symbol { width: min(100%, 106px, calc(var(--cell-height) - 20px)); height: min(106px, calc(var(--cell-height) - 20px)); }
  .ai-wild { width: min(100%, 102px, calc(var(--cell-height) - 6px)); height: min(106px, calc(var(--cell-height) - 2px)); border-width: 1px; }
  .ai-wild > b { font-size: 12px; letter-spacing: .2px; }
  .reel > .cell + .cell::after { left: 6%; right: 6%; }
  .screw { width: 5px; height: 5px; }.s1 { top: 8px; left: 7px; }.s2 { top: 8px; right: 7px; }.s3 { bottom: 8px; left: 7px; }.s4 { bottom: 8px; right: 7px; }
  .status-strip { flex: 0 0 auto; min-height: 32px; padding: 4px 0; }
  .status-strip p { font-size: 12px; line-height: 1.35; }.status-spark { display: none; }
  .controls { flex: 0 0 auto; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 8px; padding: 8px; border-radius: 12px 12px 18px 18px; }
  .stat, .bet-control { font-size: 12px; line-height: 1.2; }
  .stat > span, .bet-control > span { display: block; font-size: 12px; line-height: 1.2; letter-spacing: .1px; }
  .stat strong { font-size: 22px; line-height: 1; margin-top: 2px; }
  .stat small, .bet-control small { display: none; }
  .balance { order: 0; border-right: 0; padding: 0; }
  .win { order: 1; padding-left: 8px; }
  .bet-control { order: 2; align-self: center; }
  .bet-stepper { gap: 3px; margin-top: 2px; }
  .bet-stepper strong { min-width: 38px; font-size: 22px; line-height: 1; }
  .bet-stepper button { width: 44px; height: 44px; flex-basis: 44px; font-size: 24px; }
  .spin-button { order: 3; height: 64px; min-height: 64px; align-self: center; border-radius: 13px; gap: 0; }
  .spin-button svg { width: 27px; height: 27px; }
  .spin-button span { font-size: 16px; line-height: 1.2; letter-spacing: .3px; }
  .utility-bar { flex: 0 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 6px; }
  .utility-button, .feature-button, .showcase-button { min-height: 44px; height: 44px; padding: 4px; font-size: 12px; line-height: 1.15; flex-direction: row; gap: 4px; }
  .utility-button svg { width: 17px; height: 17px; }
  .developer-tools .utility-group.debug-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .feature-button svg, .showcase-button svg, .feature-pill { display: none; }
  .bonus-hud { flex: 0 0 auto; position: relative; grid-template-columns: .8fr 1.2fr; gap: 2px 8px; padding: 4px 8px 6px; margin: 0 4px 4px; }
  .bonus-hud-stat { align-items: center; justify-content: space-between; gap: 5px; }
  .bonus-hud-stat > span { font-size: 12px; line-height: 1.15; letter-spacing: .2px; }
  .bonus-hud-stat strong, .bonus-hud-total strong { font-size: 22px; line-height: 1; }
  .bonus-hud-total { padding-left: 8px; }
  .bonus-match { font-size: 12px; line-height: 1.35; }
  .bonus-progress { position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px; }
  .bonus-progress > * { height: 2px; }
  .bonus-mode .captain-mascot { margin-bottom: 4px; }
  .bonus-mode .captain-cargo-readout { display: none; }
  .bonus-mode .status-strip { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .win-overlay strong { font-size: 44px; }.win-overlay span { font-size: 12px; letter-spacing: 1px; }
  .space-scene { background-position: left top; background-size: auto 115svh; }
  .stars { background: linear-gradient(#050d1e55,#07152766 45%,#050b20ef 95%); }
  dialog { padding: 18px 15px; }dialog h2 { font-size: 26px; }
  .paytable { gap: 5px; }.paytable-item .symbol-art { width: 50px; height: 50px; }
  .paytable-item strong { font-size: 20px; }.history-table { font-size: 13px; }
  .history-table td, .history-table th { padding-left: 3px; padding-right: 3px; }
  .auto-options, .showcase-options { gap: 8px; }.auto-options button, [data-showcase] { font-size: 14px; }
}

/* Control dock: Auto, Sound and Turbo share one chip style with unmistakable
   on/off states. Scoped to .control-dock so the top-bar utility buttons keep theirs. */
.control-dock { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: 10px; width: min(100%, 540px); margin-inline: auto; }
.control-dock .dock-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  height: 46px; min-height: 46px; padding: 0 14px; border: 1px solid #86a9b947; border-radius: 13px;
  background: linear-gradient(180deg, #1b3550e6, #0f2134e6); box-shadow: inset 0 1px 0 #ffffff17, 0 6px 16px #0006;
  color: #d3e3ee; font: 650 14px/1 var(--font); letter-spacing: .2px; white-space: nowrap;
  transition: border-color .2s ease-out, background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out; }
.control-dock button.dock-button:not(:disabled):hover { border-color: #b4dde4a0; color: #fff4d8; }
.control-dock button.dock-button:not(:disabled):active { transform: translateY(1px); }
.control-dock button:focus-visible, .control-dock #volume:focus-visible { outline: 2px solid #8ff3e6; outline-offset: 2px; }
.control-dock .dock-button:disabled { opacity: .45; }
.control-dock svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Auto: amber while running; the badge counts the remaining spins. */
#autoplay .icon-stop, #autoplay[aria-pressed='true'] .icon-play { display: none; }
#autoplay[aria-pressed='true'] .icon-stop { display: block; fill: currentColor; stroke: none; }
#autoplay[aria-pressed='true'] { border-color: #f2d28f; color: #fff2cc;
  background: linear-gradient(180deg, #6d532b, #45341c); box-shadow: 0 0 16px #f1c36a42, inset 0 1px 0 #ffffff2b; }
.dock-badge { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; background: #ffd77a; color: #2b1d05;
  font: 800 12px/22px system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; text-align: center; }

/* Sound: the icon follows the real state; the slider fills to the current volume. */
.control-dock .audio-controls { gap: 6px; padding: 0 14px 0 6px; }
.control-dock #audio { height: 44px; min-height: 44px; padding: 0 8px; gap: 7px; border: 0; border-radius: 10px; background: none; color: #9fb3c6; font: inherit; }
.control-dock #audio[aria-pressed='true'] { color: #9ff5e8; }
#audio .icon-sound-on, #audio[aria-pressed='true'] .icon-sound-off { display: none; }
#audio[aria-pressed='true'] .icon-sound-on { display: block; }
.control-dock #volume { --volume: 55%; flex: 1 1 70px; min-width: 44px; max-width: 120px; height: 44px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; transition: opacity .2s; }
.control-dock #volume::-webkit-slider-runnable-track { height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #78e3d6 var(--volume), #ffffff2b var(--volume)); }
.control-dock #volume::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  background: #effffc; border: 2px solid #78e3d6; box-shadow: 0 1px 4px #0009; }
.control-dock #volume::-moz-range-track { height: 5px; border-radius: 3px; background: #ffffff2b; }
.control-dock #volume::-moz-range-progress { height: 5px; border-radius: 3px; background: #78e3d6; }
.control-dock #volume::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #effffc; border: 2px solid #78e3d6; }
.control-dock #audio[aria-pressed='false'] ~ #volume { opacity: .38; }

/* Turbo: an indicator lamp lights and the chip fills teal when on. */
.dock-led { width: 8px; height: 8px; border-radius: 50%; background: #34495b; box-shadow: inset 0 0 0 1px #ffffff26; transition: background-color .2s, box-shadow .2s; }
#turbo[aria-pressed='true'] { border-color: #7fe9dc; color: #d2fff8;
  background: linear-gradient(180deg, #17575a, #0d3a3f); box-shadow: 0 0 16px #5fe0d03d, inset 0 1px 0 #ffffff24; }
#turbo[aria-pressed='true'] .dock-led { background: #9cfff3; box-shadow: 0 0 8px #8dfff0; }

@media (max-width: 600px) {
  .control-dock { width: 100%; gap: 6px; grid-template-columns: 1fr 1.35fr 1fr; }
  .control-dock .dock-button { height: 44px; min-height: 44px; padding: 0 8px; gap: 6px; border-radius: 11px; font-size: 13px; box-shadow: inset 0 1px 0 #ffffff17; }
  .control-dock .audio-controls { gap: 2px; padding: 0 10px 0 0; }
  /* On phones the speaker icon carries the meaning; the word stays for screen readers. */
  .control-dock #audio { padding: 0 6px 0 8px; }
  .control-dock #audio span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .control-dock #volume { min-width: 40px; }
  .dock-badge { min-width: 22px; height: 20px; padding: 0 5px; font-size: 11px; line-height: 20px; }
}

/* Cabinet energy: the rails chase while the reels move, flash on wins and run
   gold/violet through cargo runs; the reel window charges up during a spin and
   the star field brightens. Purely decorative and switched off for reduced motion. */
.cabinet-rail i { transition: opacity .2s; }
body.is-spinning .cabinet-rail i, .bonus-mode .cabinet-rail i { animation: railChase .6s linear infinite; }
body.is-spinning .cabinet-rail i:nth-child(2), .bonus-mode .cabinet-rail i:nth-child(2) { animation-delay: .2s; }
body.is-spinning .cabinet-rail i:nth-child(3), .bonus-mode .cabinet-rail i:nth-child(3) { animation-delay: .4s; }
body.is-spinning .rail-right i { animation-direction: reverse; }
.bonus-mode:not(.is-spinning) .cabinet-rail i { animation-duration: 1.4s; }
body[data-captain='collect'] .cabinet-rail i, body[data-captain='big'] .cabinet-rail i,
body[data-captain='mega'] .cabinet-rail i, body[data-captain='super'] .cabinet-rail i { color: #ffe39a; animation: railWin .32s steps(2, jump-none) 4; }
/* The window's charge glow and sweep only change opacity/translate: painting a box-shadow or
   background-position on .reel-inset every frame would repaint every symbol inside it. */
.reel-inset::after { content: ''; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 60%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, #bffcff2e 42%, #fff6d633 50%, transparent); }
body.is-spinning .reel-inset::after { animation: insetSweep 1.1s ease-in-out infinite; }
.reels::after { content: ''; position: absolute; inset: 0; z-index: 13; border-radius: 12px; pointer-events: none; opacity: 0; box-shadow: inset 0 0 26px #6ff0e033, 0 0 18px #6ff0e044; }
body.is-spinning .reels::after { animation: insetCharge .9s ease-in-out infinite alternate; }
body[data-captain='big'] .cabinet, body[data-captain='mega'] .cabinet, body[data-captain='super'] .cabinet { animation: cabinetGlow .9s ease-in-out 3; }
.dust-field, .nebula { transition: opacity .6s ease-out; }
body.is-spinning .dust-field { opacity: .6; }
body.is-spinning .nebula { opacity: .36; }

/* Spin button: a soft attract ring while it waits, and a real press. */
.spin-button::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; pointer-events: none; }
body:not(.is-spinning) .spin-button:not(:disabled)::after { animation: spinAttract 2.6s ease-out infinite; }
.spin-button:not(:disabled):active { transform: translateY(2px) scale(.97); box-shadow: inset 0 3px 10px #7a4a0b66; }
.spin-button { transition: transform .08s ease-out, box-shadow .12s ease-out; }

@keyframes railChase { 0%, 100% { opacity: .2; } 30% { opacity: 1; } 60% { opacity: .35; } }
@keyframes railWin { from { opacity: .25; } to { opacity: 1; } }
@keyframes insetCharge { from { opacity: 0; } to { opacity: 1; } }
@keyframes insetSweep { 0% { opacity: 0; translate: -100% 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: 170% 0; } }
@keyframes cabinetGlow { 50% { box-shadow: 0 0 0 3px #ffe7a466, 0 0 46px #ffd06a8c, 0 0 120px #ffb54a40; } }
@keyframes spinAttract { 0% { box-shadow: 0 0 0 0 #ffd77a8c; } 70%, 100% { box-shadow: 0 0 0 14px #ffd77a00; } }
@media (prefers-reduced-motion: reduce) {
  body.is-spinning .cabinet-rail i, .bonus-mode .cabinet-rail i, body[data-captain] .cabinet-rail i, body.is-spinning .reels::after,
  body.is-spinning .reel-inset::after, body[data-captain] .cabinet, body:not(.is-spinning) .spin-button:not(:disabled)::after { animation: none; }
  .spin-button:not(:disabled):active { transform: none; }
}
/* Cargo-run crates: an empty open crate with a separate value plate across its mouth.
   The cell is the size container, so wide desktop cells get a wider plate; the amount's
   box is measured from the plate art (percent of the 560 x 246 image). */
.cell[data-symbol='prize'].is-open-crate { padding-bottom: 0; container-type: inline-size; }
.cell > .open-crate { position: relative; display: block; width: min(100%, calc(var(--cell-height) + 22px)); height: auto; aspect-ratio: 1; margin-block: -11px; filter: drop-shadow(var(--art-shadow, 0 4px 3px #0007)); }
.open-crate > .crate-body, .crate-plate > img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.open-crate { --amount-fill: linear-gradient(#fff 30%, #b4f1ff 70%, #62d8ff); --amount-edge: #021131; --amount-glow: #4fd8ff8c; --plate-glow: #0000; }
.open-crate[data-cargo-grade='charged'] { --amount-fill: linear-gradient(#fffdf0 25%, #ffe07a 60%, #f6a524); --amount-edge: #331700; --amount-glow: #ffc94d99; --plate-glow: #ffc94d88; }
.open-crate[data-cargo-grade='cosmic'] { --amount-fill: linear-gradient(#fff8d6 20%, #ffd348 55%, #ff8a1f); --amount-edge: #1f0640; --amount-glow: #c690ffcc; --plate-glow: #b07cffb0; }
.crate-plate { --plate-w: min(98cqw, calc((var(--cell-height) + 22px) * 1.3)); position: absolute; left: 50%; top: max(2%, calc(40% - var(--plate-w) / 4.552)); width: var(--plate-w); aspect-ratio: 560 / 246; translate: -50% 0; container-type: inline-size;
  filter: drop-shadow(0 3px 4px #000a) drop-shadow(0 0 6px var(--plate-glow)); }
.crate-card-amount { position: absolute; left: 10.5%; width: 79%; top: 49.3%; translate: 0 -50%; display: block; text-align: center; overflow: visible;
  font: 900 min(18cqw, calc(118cqw / var(--len, 5)))/1.05 var(--display); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: transparent; background: var(--amount-fill); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 .6px var(--amount-edge)) drop-shadow(0 1px 0 var(--amount-edge)) drop-shadow(0 0 5px var(--amount-glow)); }
/* Legend plates get a light sweep across the digits. */
.open-crate[data-cargo-grade='cosmic'] .crate-card-amount { background: linear-gradient(100deg, #fff0 42%, #fffef4 50%, #fff0 58%) 0 0 / 300% 100% no-repeat, var(--amount-fill); -webkit-background-clip: text; background-clip: text; animation: plateShine 2.6s ease-in-out infinite; }
@keyframes plateShine { 0%, 35% { background-position: 100% 0, 0 0; } 100% { background-position: 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .open-crate[data-cargo-grade='cosmic'] .crate-card-amount { animation: none; } }
.cell.is-winning .open-crate { animation: floatSymbol 1.4s ease-in-out infinite; }
/* Themed round spin button: the cargo-hatch art is the face, icon and label sit on its gold core.
   States are CSS only. The glow ring (::before) and attract pulse (::after) change transform and
   opacity alone, and the button itself has no filter while they run, so it never repaints while
   the reels move. Press and disabled only switch a static filter. */
.spin-button { --spin-size: 104px; --ring: #ffe08a; width: var(--spin-size); height: var(--spin-size); min-height: 0; justify-self: center; align-self: center; margin-block: -24px -8px; padding: 0 0 2px; border: 0; border-radius: 50%; gap: 0;
  background: url('./assets/spin-button.webp') center / contain no-repeat; color: #493013; text-shadow: 0 1px 0 #ffe9a8; box-shadow: 0 6px 12px #000a, 0 2px 3px #0008; filter: none;
  transition: transform .08s ease-out; }
.spin-button:not(:disabled):hover { background: url('./assets/spin-button.webp') center / contain no-repeat; filter: brightness(1.06); }
.spin-button:not(:disabled):active { transform: translateY(3px); filter: brightness(.86); box-shadow: 0 3px 5px #000a; }
.spin-button:disabled { opacity: 1; filter: grayscale(.75) brightness(.62); }
.spin-button:focus-visible { outline: 3px solid #8ff3ff; outline-offset: 3px; }
.spin-button svg { position: relative; z-index: 1; width: 26px; height: 26px; }
.spin-button span { position: relative; z-index: 1; max-width: 62%; font: 900 12px/1.05 var(--display); letter-spacing: .6px; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.spin-button::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--ring) 80%, #fff 86%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); transition: opacity .25s; }
.spin-button::after { inset: 4px; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 3px #ffd77acc, 0 0 16px #ffd77a99; }
body:not(.is-spinning) .spin-button:not(:disabled)::after { animation: spinPulse 2.6s ease-out infinite; }
body.is-spinning .spin-button::before { opacity: 1; animation: spinRing 1.1s linear infinite; }
.spin-button.is-auto { --ring: #fff8d8; }
.spin-button.is-auto::before { opacity: 1; animation: spinRing .75s linear infinite; }
.bonus-mode .spin-button { --ring: #5ff3ff; }
.bonus-mode .spin-button::before { opacity: .55; }
.bonus-mode .spin-button::after { box-shadow: 0 0 0 3px #5ff3ffcc, 0 0 16px #5ff3ff99; }
.bonus-mode.is-spinning .spin-button::before, .bonus-mode .spin-button.is-auto::before { opacity: 1; }
.spin-button:disabled::before { opacity: 0; }
@keyframes spinRing { to { rotate: 360deg; } }
@keyframes spinPulse { 0% { opacity: .8; scale: 1; } 70%, 100% { opacity: 0; scale: 1.22; } }
@media (min-width: 601px) and (max-height: 780px) { .spin-button { --spin-size: 92px; margin-block: -20px -8px; } }
@media (max-width: 600px) { .spin-button { --spin-size: 84px; margin-block: 0 -10px; border-radius: 50%; }.spin-button svg { width: 22px; height: 22px; }.spin-button span { font-size: 11px; line-height: 1.05; letter-spacing: .3px; } }
@media (prefers-reduced-motion: reduce) { body.is-spinning .spin-button::before, .spin-button.is-auto::before { animation: none; } body:not(.is-spinning) .spin-button:not(:disabled)::after { animation: none; } .spin-button:not(:disabled):active { transform: none; } }
/* Captain reactions: a short speech bubble beside the cinema (never over the reels). */
.captain-bubble { position: absolute; z-index: 3; top: 16%; left: calc(50% + min(var(--captain-height) * .888889, 50%) + 10px); max-width: min(170px, calc(50% - var(--captain-height) * .888889 - 18px));
  padding: 6px 10px; border: 1px solid #e6c47a; border-radius: 12px 12px 12px 3px; background: linear-gradient(#24425c, #0e2236); box-shadow: 0 3px 10px #0008;
  color: #fff1c4; font: 800 12px/1.3 var(--display); letter-spacing: .2px; white-space: normal; pointer-events: none;
  opacity: 0; translate: -6px 4px; scale: .9; transform-origin: 0 100%; transition: opacity .2s ease-out, translate .25s ease-out, scale .25s ease-out; }
.captain-bubble.is-showing { opacity: 1; translate: 0 0; scale: 1; }
.captain-bubble[data-react='sigh'] { color: #d9e6ee; border-color: #8fb3c4; }
.captain-bubble[data-react='cheer'] { color: #fff6d2; background: linear-gradient(#6a4c17, #2a2414); }
@media (max-width: 600px) { .captain-bubble { top: 8%; left: calc(50% + 88px); max-width: calc(50% - 96px); padding: 5px 7px; font-size: 11px; } }
/* Insufficient credits dialog: Captain Nova, the two figures, then Top up / Lower bet / Close. */
.low-credits { display: grid; gap: 14px; }
.low-captain { justify-self: center; width: min(220px, 70%); aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid #e6c47a; border-radius: 14px; box-shadow: 0 0 22px #ffc24a44, 0 6px 16px #0008; }
.low-captain img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.low-credits p { margin: 0; text-align: center; }
.low-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.low-figures div { padding: 10px 12px; border: 1px solid #5f7f93; border-radius: 12px; background: #0b1d33cc; text-align: center; }
.low-figures dt { color: #b9cad6; font: 700 11px/1.3 var(--display); letter-spacing: .6px; }
.low-figures dd { margin: 4px 0 0; color: #fff1c4; font: 850 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.low-figures div + div dd { color: #ffb487; }
.low-actions { display: grid; gap: 8px; }
.low-topup, .low-lower { min-height: 48px; padding: 12px; border-radius: 10px; font: 850 15px/1.2 var(--display); letter-spacing: .4px; cursor: pointer; }
.low-topup { color: #493013; border: 1px solid #fff2b7; background: linear-gradient(#ffe3a0, #ffc24d 55%, #d18c23); box-shadow: 0 3px 0 #785021, 0 0 18px #ffbd4755; }
.low-lower { color: #e9fbff; border: 1px solid #7fd8e6; background: linear-gradient(#22506a, #12324a); }
.low-topup:focus-visible, .low-lower:focus-visible { outline: 3px solid #8ff3ff; outline-offset: 2px; }
@media (max-width: 600px) { .low-figures dd { font-size: 20px; } .low-captain { width: min(180px, 60%); } }
.low-note { color: #ffcf9a !important; font-weight: 700; }

/* ---------- first-screen loading layer ----------
   The portrait art is 2:3. Narrower screens (phones) cover with it; wider ones fit it to the height,
   centred, and each side continues that art edge's own colour, sampled every 10% of its height. The title sits in the art's
   empty top 20%, the bar in its empty bottom 28%; the frame is the art's visible width. */
.loading { position: fixed; inset: 0; z-index: 2000; overflow: hidden; background: linear-gradient(#0E2758 0%, #112A5B 10%, #133261 20%, #143B6A 30%, #154571 40%, #18567D 50%, #1A6484 60%, #1C6B87 70%, #176582 80%, #1A6D88 90%, #1B7C92 100%) left / 50.5% 100% no-repeat, linear-gradient(#0D2656 0%, #112B5B 10%, #133060 20%, #153C6C 30%, #184573 40%, #185079 50%, #1A5D81 60%, #1C6E8A 70%, #1A6C87 80%, #1B778E 90%, #1C8095 100%) right / 50.5% 100% no-repeat, #154571; color: #fff6dc; transition: opacity .4s ease; }
.loading.is-done { opacity: 0; pointer-events: none; }
.loading-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; pointer-events: none; user-select: none; }
.loading-frame { position: absolute; inset: 0; margin-inline: auto; width: 100%; }
@media (min-aspect-ratio: 2/3) {
  .loading-art { left: 50%; right: auto; width: auto; aspect-ratio: 2 / 3; translate: -50% 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); }
  .loading-frame { width: calc(100vh * 2 / 3); width: calc(100dvh * 2 / 3); }
}
.loading-title { position: absolute; inset: max(5.5%, env(safe-area-inset-top)) 0 auto; margin: 0; display: grid; justify-items: center; gap: .3em; font: 900 clamp(22px, min(5.6vh, 8vw), 54px)/1 var(--font); font-size: clamp(22px, min(5.6dvh, 8vw), 54px); letter-spacing: .06em; text-align: center; text-shadow: 0 2px 0 #0b1a3f, 0 0 22px #4fe6ff66; }
.loading-word { display: flex; justify-content: center; column-gap: .28em; white-space: nowrap; }
.loading-cargo { color: #ffd36e; text-shadow: 0 2px 0 #4a2a06, 0 0 20px #ffc24a77; }
.loading-title small { font-size: .42em; font-weight: 800; letter-spacing: .5em; padding-left: .5em; color: #bff6ff; text-shadow: 0 1px 0 #0b1a3f; }
.loading-meter { position: absolute; inset: auto 0 max(9%, calc(env(safe-area-inset-bottom) + 24px)); display: grid; justify-items: center; gap: 10px; }
.loading-bar { position: relative; width: min(64%, 300px); height: 12px; border-radius: 99px; overflow: hidden; border: 1px solid #ffe6a466; background: #0a2240b3; box-shadow: 0 2px 10px #0006, inset 0 1px 3px #0008; }
.loading-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fe6ff, #ffd36e 70%, #fff3c4); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .3s ease-out; }
.loading-percent { margin: 0; font: 800 15px/1 var(--font); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #e9fbff; text-shadow: 0 1px 2px #0009; }
@media (prefers-reduced-motion: reduce) { .loading-bar i { transition: none; } }