/* ===== Consolidated source: styles.css ===== */
:root {
  color-scheme: dark;
  --gold: #f3c66f;
  --gold-soft: #ffe9ad;
  --gold-deep: #9f5b2c;
  --ember: #ff6a2b;
  --text: #fff0d2;
  --muted: #d0b8a1;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; background: #16080f; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); font-family: var(--font-ui); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .45; filter: saturate(.65); }
button:not(:disabled) { transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease; }
button:not(:disabled):active { transform: translateY(1px) scale(.99); }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }


/* ===== Consolidated source: styles-release.css ===== */
/* PHOENIX SLOTS 1.8.0 — scene-first layout. The artwork is the cabinet; no extra dark cabinet panel. */
html, body { min-height: 100%; }
body {
  background-color: #16080f;
  background-image: linear-gradient(180deg, rgba(14, 4, 13, .16), rgba(13, 5, 12, .08) 38%, rgba(10, 3, 9, .34)), url("assets/backgrounds/main.webp");
  background-position: center 44%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .10; background: radial-gradient(ellipse at center, transparent 28%, rgba(8, 2, 8, .62) 100%); }
.embers { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .24; pointer-events: none; }
.ambient-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 2, 8, .08), transparent 24%, transparent 69%, rgba(8, 2, 7, .18)); }
.app-shell { position: relative; z-index: 1; width: min(100%, 1640px); min-height: 100vh; margin: 0 auto; padding: 0 clamp(12px, 2.5vw, 36px) 14px; display: flex; flex-direction: column; }
.topbar { min-height: 76px; display: flex; align-items: center; gap: clamp(10px, 1.7vw, 25px); position: relative; }
.brand { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; min-width: 0; }
.brand-logo { display: block; width: clamp(112px, 12vw, 166px); height: auto; max-height: 76px; object-fit: contain; filter: drop-shadow(0 4px 11px rgba(255, 83, 26, .28)); }
.brand-caption { align-self: flex-end; margin: 0 0 11px -9px; padding-left: 7px; color: #f3c778; font-size: 6px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 1px 10px #16060b; white-space: nowrap; }
.demo-badge { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: rgba(255, 236, 204, .82); font-size: 8px; line-height: 1.25; font-weight: 800; letter-spacing: .11em; white-space: nowrap; text-shadow: 0 1px 8px #18040b; }
.pulse-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #ffd079; box-shadow: 0 0 10px rgba(255, 178, 68, .72); }
.wallet-block { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; white-space: nowrap; padding-left: 15px; border-left: 1px solid rgba(255, 212, 125, .35); text-shadow: 0 2px 12px rgba(0, 0, 0, .65); }
.wallet-label { grid-column: 1 / -1; margin-bottom: 1px; color: #f3d19a; font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.wallet-block strong { color: #fff1bf; font-family: var(--font-display); font-size: clamp(18px, 1.9vw, 23px); font-variant-numeric: tabular-nums; }
.credit-unit { color: #ffd07b; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255, 205, 113, .4); border-radius: 11px; background: rgba(32, 9, 17, .30); color: #ffe2a0; font-size: 16px; line-height: 1; box-shadow: 0 3px 13px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 245, 208, .08); backdrop-filter: blur(5px); }
.icon-button:hover:not(:disabled) { border-color: rgba(255, 233, 165, .9); background: rgba(83, 28, 24, .52); }
.lang-button { width: auto; padding: 0 9px; display: flex; gap: 4px; align-items: center; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.lang-button span { opacity: .45; }
.rules-icon-button { font-family: var(--font-display); font-weight: 800; font-style: italic; }
.game-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(4px, 1vh, 12px) 0 0; }
.game-layout { width: 100%; display: flex; justify-content: center; align-items: center; }
.main-column { width: 100%; min-width: 0; display: flex; justify-content: center; }
.machine-shell { position: relative; width: 100%; max-width: 1160px; min-width: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.machine-shell::before, .machine-shell::after, .machine-top-ornament { display: none !important; }
.machine-header { position: absolute; top: -1px; right: 10.8%; z-index: 8; display: flex; justify-content: flex-end; align-items: center; min-height: 0; padding: 0; border: 0; pointer-events: none; }
.machine-caption { display: none; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(255, 205, 113, .30); border-radius: 99px; color: #ffe5ab; background: rgba(49, 16, 12, .32); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); backdrop-filter: blur(5px); white-space: nowrap; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.status-indicator { width: 5px; height: 5px; border-radius: 50%; background: #ffce72; box-shadow: 0 0 8px rgba(255, 180, 69, .72); }
.status-chip.is-busy { color: #ffe0a2; border-color: rgba(255, 190, 87, .58); background: rgba(54, 20, 8, .48); }
.status-chip.is-busy .status-indicator { background: #ff954f; box-shadow: 0 0 9px rgba(255, 122, 56, .75); animation: indicatorPulse .7s infinite alternate; }
@keyframes indicatorPulse { to { opacity: .4; } }
.reel-stage { position: relative; width: 100%; padding: 0; }
.stage-glow { position: absolute; z-index: 0; inset: 14% 11% 2%; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 97, 26, .18), rgba(173, 34, 37, .09) 40%, transparent 72%); filter: blur(28px); }
.reel-frame { position: relative; z-index: 1; width: 100%; max-width: 1160px; aspect-ratio: 662 / 316; margin: 0 auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; isolation: isolate; }
.reel-frame::before, .reel-frame-highlight, .reel-shine { display: none !important; }
.reel-frame-art { position: absolute; z-index: 5; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .34)); }
/* The grid is limited to the clear windows in the supplied winged frame. */
.slot-grid { position: absolute !important; z-index: 1; left: 12.2% !important; right: 8.2% !important; top: 18.8% !important; bottom: 14.2% !important; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 !important; padding: 0 !important; overflow: hidden; border-radius: 0 !important; background: linear-gradient(180deg, rgba(13, 4, 13, .72), rgba(16, 5, 15, .70)), url("assets/backgrounds/reel-interior.webp") center / cover no-repeat !important; box-shadow: inset 0 0 24px rgba(0, 0, 0, .44), inset 0 0 35px rgba(119, 21, 45, .12) !important; }
.reel { position: relative; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); min-width: 0; min-height: 0; overflow: hidden; gap: 0 !important; border-radius: 0; background: transparent; }
.reel::before, .reel::after { display: none !important; }
.tile { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; aspect-ratio: auto !important; overflow: hidden; border: 0; border-radius: 0; background: rgba(44, 11, 28, .15); box-shadow: inset 0 -1px 0 rgba(255, 183, 78, .10); transition: background .24s ease, filter .24s ease; }
.tile:nth-child(2) { background: rgba(57, 12, 29, .11); }
.tile::before { content: ""; position: absolute; inset: 3px; z-index: 1; border: 1px solid rgba(247, 193, 91, .045); pointer-events: none; }
.tile::after { content: ""; position: absolute; inset: -40% -65%; pointer-events: none; background: linear-gradient(110deg, transparent 42%, rgba(255, 235, 185, .05) 49%, transparent 56%); transform: translateX(-140%) rotate(9deg); }
.reel.is-spinning .tile::after { animation: reelSweep .44s linear infinite; }
@keyframes reelSweep { to { transform: translateX(140%) rotate(9deg); } }
.tile-phoenix { background: radial-gradient(ellipse at 50% 50%, rgba(255, 114, 22, .13), rgba(51, 7, 20, .18) 70%); }
.tile-wild { background: radial-gradient(ellipse at 50% 50%, rgba(255, 173, 47, .11), rgba(44, 8, 20, .15) 70%); }
.tile .symbol-art-container, .symbol-art-container { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 3px; overflow: visible; pointer-events: none; }
.tile .symbol-art, .symbol-art { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transform-origin: center; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .38)) drop-shadow(0 0 5px rgba(255, 135, 35, .12)); }
/* The fourth reel is optically centred to compensate for the sprite's transparent margins. */
.reel[data-col="3"] .symbol-art-container { transform: translateX(3.2%); }
.tile-phoenix .symbol-art { animation: phoenixIdle 4.2s ease-in-out infinite; }
@keyframes phoenixIdle { 0%, 100% { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .38)) drop-shadow(0 0 5px rgba(255, 135, 35, .12)); } 50% { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .32)) drop-shadow(0 0 10px rgba(255, 130, 35, .3)); } }
.tile.is-winning { z-index: 3; background: radial-gradient(ellipse at center, rgba(255, 186, 62, .23), rgba(63, 14, 19, .18)); box-shadow: inset 0 0 0 1px rgba(255, 228, 137, .7), inset 0 0 19px rgba(255, 130, 26, .2), 0 0 14px rgba(255, 111, 23, .16); animation: winningTile 1s ease-in-out infinite alternate; }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.04); filter: drop-shadow(0 0 8px rgba(255, 220, 113, .92)) drop-shadow(0 0 14px rgba(255, 88, 22, .50)); }
.tile.awakening { z-index: 4; box-shadow: inset 0 0 0 2px #fff0a6, 0 0 20px rgba(255, 120, 24, .5); animation: phoenixTileAwake .5s ease-in-out infinite alternate; }
@keyframes winningTile { from { filter: brightness(1); } to { filter: brightness(1.19); } }
@keyframes phoenixTileAwake { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.result-banner { min-height: 57px; display: flex; justify-content: center; align-items: center; margin: -1px auto 2px; padding: 5px 12px 7px; gap: 0; text-align: center; }
.result-copy { display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: min(100%, 520px); text-shadow: 0 2px 12px rgba(0, 0, 0, .72); }
.result-copy small { color: #f4c879; font-size: 7px; font-weight: 900; letter-spacing: .22em; }
.result-copy strong { color: #fff0bc; font-family: var(--font-display); font-size: clamp(18px, 2.1vw, 27px); line-height: 1; letter-spacing: .035em; text-shadow: 0 2px 14px rgba(255, 108, 25, .26), 0 2px 12px rgba(0, 0, 0, .7); }
.result-copy span { color: rgba(255, 235, 204, .83); font-size: 9px; }
.result-banner.is-win .result-copy strong, .result-banner.is-big-win .result-copy strong { color: #fff3a8; text-shadow: 0 0 22px rgba(255, 160, 34, .48); }
.result-banner.is-bonus .result-copy strong { color: #ffbb69; text-shadow: 0 0 24px rgba(255, 83, 22, .55); }
.result-banner.is-loss .result-copy strong { color: #f6d8b5; }
.controls-panel { position: relative; width: min(100%, 740px); margin: 0 auto; padding: 2px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.control-topline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .92fr); align-items: center; gap: clamp(14px, 3vw, 38px); }
.bet-control { min-width: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.control-caption { margin-bottom: 6px; color: #f0d09a; font-size: 8px; font-weight: 900; letter-spacing: .18em; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.bet-stepper { display: flex; align-items: center; justify-content: center; gap: 11px; }
.stepper-button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255, 211, 125, .48); border-radius: 50%; color: #ffe3a1; background: rgba(33, 9, 17, .30); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); font-size: 20px; line-height: 1; backdrop-filter: blur(4px); }
.stepper-button:hover:not(:disabled) { border-color: #ffe7a1; background: rgba(91, 32, 23, .54); }
.bet-amount-wrap { min-width: 76px; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.bet-amount-wrap strong { color: #fff0be; font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.bet-amount-wrap small { color: #f2c779; font-size: 8px; font-weight: 900; }
.bet-presets { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.bet-presets button { min-width: 35px; padding: 5px 8px; border: 1px solid rgba(255, 206, 112, .23); border-radius: 99px; color: rgba(255, 234, 193, .84); background: rgba(27, 7, 16, .25); font-size: 9px; font-weight: 800; }
.bet-presets button:hover:not(:disabled) { border-color: rgba(255, 225, 152, .75); color: #fff0be; }
.bet-presets button.selected { border-color: rgba(255, 217, 127, .85); color: #fff1bb; background: rgba(137, 47, 24, .50); box-shadow: 0 0 12px rgba(255, 106, 34, .12); }
.spin-control { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.spin-button { position: relative; isolation: isolate; min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; padding: 7px 17px; border: 1px solid rgba(255, 225, 146, .92); border-radius: 15px; color: #2b1009; background: linear-gradient(135deg, #ffe59b 0%, #f7ba4b 40%, #cf5b24 100%); box-shadow: 0 7px 22px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 230, .82), inset 0 -2px rgba(116, 37, 20, .28); }
.spin-button::before { content: ""; position: absolute; z-index: -1; inset: 3px; border: 1px solid rgba(255, 244, 193, .43); border-radius: 11px; pointer-events: none; }
.spin-button:hover:not(:disabled) { filter: brightness(1.09) saturate(1.05); box-shadow: 0 9px 28px rgba(255, 93, 27, .22), inset 0 1px rgba(255, 255, 230, .9); }
.spin-flare { position: absolute; z-index: -1; inset: -60% -20%; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 232, .24) 50%, transparent 63%); transform: translateX(-110%); }
.spin-button:hover:not(:disabled) .spin-flare { animation: buttonShine .8s ease; }
@keyframes buttonShine { to { transform: translateX(110%); } }
.spin-icon { width: 47px; height: 43px; flex: 0 0 47px; display: block; background: url("assets/ui/spin-button.png") center / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(90, 18, 12, .45)); }
.spin-icon svg { display: none; }
.spin-button-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.spin-button-copy strong { color: #2a1008; font-size: 12px; font-weight: 1000; letter-spacing: .12em; text-shadow: 0 1px rgba(255, 235, 168, .32); }
.spin-button-copy small { color: rgba(50, 18, 12, .77); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.spin-button.is-stopping { background: linear-gradient(135deg, #ffd1a0, #dc7137 70%, #a72e24); }
.secondary-action { min-height: 29px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 12px; border: 1px solid rgba(255, 205, 109, .28); border-radius: 9px; color: #ffdfa0; background: rgba(26, 7, 15, .25); font-size: 8px; font-weight: 900; letter-spacing: .1em; backdrop-filter: blur(4px); }
.secondary-action:hover:not(:disabled), .secondary-action.is-active { border-color: rgba(255, 224, 145, .8); background: rgba(93, 31, 21, .5); }
.auto-icon { font-size: 15px; line-height: .8; }
.control-bottomline { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 2.4vw, 28px); margin-top: 14px; }
.utility-button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 4px 4px; border: 0; border-bottom: 1px solid rgba(255, 211, 130, .24); border-radius: 0; color: rgba(255, 232, 191, .9); background: transparent; font-size: 8px; font-weight: 900; letter-spacing: .055em; white-space: nowrap; text-shadow: 0 2px 7px rgba(0, 0, 0, .75); }
.utility-button:hover:not(:disabled) { color: #fff4c6; border-bottom-color: #ffd888; }
.utility-button.is-on { color: #fff0ae; border-bottom-color: #ffd46f; }
.utility-icon { color: #ffd077; font-size: 13px; }
.utility-arrow { color: #ffbf65; font-size: 11px; }
.toggle-indicator { position: relative; width: 20px; height: 11px; display: inline-block; border: 1px solid rgba(255, 209, 122, .4); border-radius: 99px; background: rgba(20, 7, 14, .46); }
.toggle-indicator::after { content: ""; position: absolute; top: 2px; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: #c7ae8c; transition: transform .2s ease, background .2s ease; }
.utility-button.is-on .toggle-indicator::after { transform: translateX(9px); background: #ffe39b; }
.fairness-note { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 7px; padding-top: 0; color: rgba(255, 225, 191, .67); font-size: 6px; font-weight: 700; letter-spacing: .07em; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .72); }
.lock-icon { color: #ffce79; font-size: 9px; }
.page-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 13px; color: rgba(255, 231, 201, .58); font-size: 7px; letter-spacing: .08em; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.page-footer i { color: #f7c66d; font-style: normal; }
.page-footer > span:first-child { font-weight: 900; }
.page-footer > span:nth-child(2) { opacity: .85; }

/* Dialogs retain the same ember-and-gold visual language. */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 18px; background: rgba(8, 2, 9, .76); backdrop-filter: blur(9px); }
.modal-card { position: relative; width: min(720px, 100%); max-height: min(90vh, 900px); overflow: auto; padding: 28px clamp(17px, 3vw, 32px) 24px; border: 1px solid rgba(255, 202, 111, .56); border-radius: 21px; color: var(--text); background: linear-gradient(150deg, rgba(44, 12, 24, .97), rgba(12, 5, 13, .98)), url("assets/backgrounds/reel-interior.webp") center / cover; box-shadow: 0 26px 100px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 239, 190, .12); }
.modal-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 1px solid rgba(255, 211, 132, .27); border-radius: 50%; color: #ffdfa0; background: rgba(12, 4, 11, .45); font-size: 22px; }
.modal-eyebrow { color: #f3bd66; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.modal-title { margin: 8px 0 9px; color: #ffdfa0; font-family: var(--font-display); font-size: clamp(25px, 4vw, 33px); line-height: 1.1; }
.modal-lead { max-width: 590px; margin: 0 0 20px; color: #d1b8a7; font-size: 11px; line-height: 1.65; }
.payout-table { width: 100%; border-collapse: collapse; color: #f2dfc2; font-size: 10px; }
.payout-table th { padding: 10px 7px; color: #f5c975; border-bottom: 1px solid rgba(255, 200, 104, .3); font-size: 8px; letter-spacing: .07em; text-align: right; }
.payout-table th:first-child { text-align: left; }
.payout-table td { padding: 8px 7px; border-bottom: 1px solid rgba(255, 209, 125, .10); text-align: right; font-variant-numeric: tabular-nums; }
.payout-table td:first-child { text-align: left; }
.table-symbol { display: inline-flex; align-items: center; gap: 8px; }
.table-symbol .symbol-art-container { width: 36px; height: 36px; padding: 0; }
.table-symbol b { font-size: 9px; font-weight: 700; }
.modal-note { margin-top: 12px; padding: 10px 12px; border-left: 2px solid rgba(255, 192, 92, .5); color: #ceb5a4; background: rgba(12, 4, 12, .24); font-size: 10px; line-height: 1.65; }
.modal-note strong { color: #f4d28d; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.modal-action, .switch-button { min-height: 36px; padding: 8px 14px; border: 1px solid rgba(255, 202, 111, .4); border-radius: 9px; color: #ffe2a5; background: rgba(74, 26, 23, .56); font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.modal-action:hover:not(:disabled), .switch-button:hover:not(:disabled) { border-color: #ffe6a3; filter: brightness(1.12); }
.modal-action.danger, .switch-button.off { color: #ffc0a1; border-color: rgba(241, 117, 78, .35); background: rgba(86, 19, 24, .4); }
.rules-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.rule-card { padding: 13px; border: 1px solid rgba(255, 206, 116, .16); border-radius: 11px; background: rgba(11, 4, 12, .28); }
.rule-card strong { color: #f7d18a; font-size: 10px; }
.rule-card p { margin: 6px 0 0; color: #ceb5a5; font-size: 10px; line-height: 1.6; }
.settings-list { display: grid; gap: 7px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255, 208, 120, .12); }
.setting-row > span { display: flex; flex-direction: column; gap: 4px; }
.setting-row strong { color: #f7d99d; font-size: 11px; }
.setting-row small { color: #c3a99a; font-size: 9px; line-height: 1.4; }
.switch-button { flex: 0 0 auto; min-width: 64px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats-item { min-width: 0; padding: 12px; border: 1px solid rgba(255, 206, 116, .16); border-radius: 10px; background: rgba(11, 4, 12, .28); }
.stats-item span { display: block; margin-bottom: 7px; color: #ccb19e; font-size: 8px; line-height: 1.4; }
.stats-item strong { color: #ffe2a0; font-family: var(--font-display); font-size: 17px; overflow-wrap: anywhere; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 80; max-width: min(90vw, 520px); padding: 11px 16px; border: 1px solid rgba(255, 191, 74, .45); border-radius: 10px; color: #ffe5aa; background: rgba(24, 7, 17, .96); box-shadow: 0 12px 30px rgba(0, 0, 0, .48); font-size: 10px; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .22s ease, transform .22s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Bonus overlay: still part of the game mechanic, not a permanent side panel. */
.bonus-overlay { z-index: 60; }
.bonus-card { position: relative; isolation: isolate; width: min(500px, 100%); overflow: hidden; padding: 28px 26px 25px; border: 1px solid rgba(255, 184, 61, .85); border-radius: 22px; text-align: center; background: linear-gradient(180deg, rgba(16, 3, 12, .48), rgba(11, 4, 12, .96)), url("assets/backgrounds/bonus.webp") center / cover; box-shadow: 0 35px 120px rgba(0, 0, 0, .76), inset 0 0 0 5px rgba(255, 192, 74, .08); }
.bonus-card::before { content: ""; position: absolute; z-index: -1; inset: 7px; border: 1px solid rgba(255, 192, 74, .33); border-radius: 16px; }
.bonus-orbit { position: absolute; z-index: -1; top: 155px; left: 50%; width: 370px; height: 180px; border: 1px solid rgba(239, 179, 87, .1); border-radius: 50%; pointer-events: none; transform: translateX(-50%) rotate(-15deg); }
.bonus-orbit-two { width: 340px; border-color: rgba(246, 109, 53, .1); transform: translateX(-50%) rotate(15deg); }
.bonus-phoenix-art { position: relative; display: grid; place-items: center; height: 160px; margin-bottom: 5px; }
.bonus-phoenix-art::before { content: ""; position: absolute; width: 170px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 132, 59, .34), transparent 68%); filter: blur(8px); }
.phoenix-anim-frames { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.phoenix-pose { position: absolute; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255, 96, 19, .55)); animation: phoenixWingRise 2.3s ease-in-out infinite; }
.phoenix-pose-one { opacity: .10; transform: scale(.58); animation-delay: 0s; }
.phoenix-pose-two { opacity: .42; transform: scale(.78); animation-delay: .45s; }
.phoenix-pose-three { opacity: .98; transform: scale(.95); animation-delay: .9s; }
@keyframes phoenixWingRise { 0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 81, 15, .4)) brightness(.98); } 50% { filter: drop-shadow(0 0 28px rgba(255, 157, 36, .9)) brightness(1.18); } }
.bonus-overline { color: #f4c77d; font-size: 8px; font-weight: 900; letter-spacing: .22em; }
.bonus-card h2 { margin: 9px 0 11px; color: #ffdc87; font-family: var(--font-display); font-size: 30px; line-height: 1.02; letter-spacing: .1em; text-shadow: 0 0 24px rgba(255, 91, 24, .28); }
.bonus-card h2 em { color: #ffe9b0; font-style: italic; font-weight: 500; }
.bonus-card p { max-width: 370px; margin: 0 auto 17px; color: #d8bdad; font-size: 11px; line-height: 1.65; }
.bonus-reward { display: flex; align-items: center; justify-content: center; gap: 13px; width: max-content; margin: 0 auto 18px; padding: 10px 17px; border: 1px solid rgba(227, 188, 103, .24); border-radius: 12px; background: rgba(9, 9, 13, .26); text-align: left; }
.bonus-reward > strong { color: #ffd36d; font-family: var(--font-display); font-size: 43px; line-height: 1; }
.bonus-reward span { display: flex; flex-direction: column; gap: 5px; }
.bonus-reward b { color: #f1d5a0; font-size: 9px; letter-spacing: .12em; }
.bonus-reward small { color: #ec9e59; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.bonus-start { width: 100%; max-width: 330px; min-height: 62px; margin: 0 auto; }

@media (min-width: 1200px) {
  .app-shell { padding-bottom: 18px; }
  .machine-shell { max-width: 1130px; }
  .result-banner { min-height: 61px; }
  .controls-panel { width: min(100%, 760px); }
}
@media (max-width: 980px) {
  .app-shell { padding-left: 16px; padding-right: 16px; }
  .topbar { gap: 12px; }
  .brand-caption { font-size: 5px; letter-spacing: .12em; }
  .machine-shell { max-width: 100%; }
}
@media (max-width: 820px) {
  body { background-attachment: scroll; background-position: center 38%; }
  .app-shell { min-height: 100svh; padding: 0 10px 12px; }
  .topbar { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand wallet" "badge actions"; gap: 3px 8px; padding: 7px 0 4px; }
  .brand { grid-area: brand; min-height: 39px; }
  .brand-logo { width: clamp(95px, 29vw, 138px); max-height: 48px; }
  .brand-caption { display: none; }
  .demo-badge { grid-area: badge; justify-self: start; margin: 1px 0 0; font-size: 6px; letter-spacing: .06em; max-width: 100%; white-space: normal; }
  .wallet-block { grid-area: wallet; justify-self: end; padding-left: 0; border-left: 0; column-gap: 4px; }
  .wallet-label { font-size: 6px; letter-spacing: .14em; }
  .wallet-block strong { font-size: clamp(15px, 4vw, 20px); }
  .credit-unit { font-size: 7px; }
  .top-actions { grid-area: actions; justify-self: end; gap: 4px; }
  .icon-button { width: 29px; height: 29px; border-radius: 9px; font-size: 13px; }
  .lang-button { width: auto; padding: 0 6px; font-size: 8px; }
  .game-main { justify-content: flex-start; padding: clamp(8px, 2vh, 20px) 0 0; }
  .game-layout { display: block; }
  .main-column { display: block; }
  .machine-header { top: -3px; right: 10%; }
  .status-chip { padding: 4px 6px; font-size: 6px; gap: 4px; }
  .status-indicator { width: 4px; height: 4px; }
  .stage-glow { inset: 16% 7% 0; filter: blur(20px); }
  .reel-frame { width: 100%; max-width: none; }
  .slot-grid { left: 12.2% !important; right: 8.2% !important; top: 18.8% !important; bottom: 14.2% !important; }
  .tile::before { inset: 1px; }
  .tile .symbol-art-container { padding: 1px; }
  .reel[data-col="3"] .symbol-art-container { transform: translateX(3.6%); }
  .result-banner { min-height: 53px; padding: 4px 5px 5px; }
  .result-copy { gap: 2px; }
  .result-copy small { font-size: 6px; letter-spacing: .15em; }
  .result-copy strong { font-size: clamp(17px, 4.5vw, 22px); }
  .result-copy span { font-size: 8px; }
  .controls-panel { width: min(100%, 600px); padding-top: 1px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) minmax(125px, .82fr); gap: 9px; }
  .control-caption { font-size: 6px; letter-spacing: .12em; margin-bottom: 4px; }
  .bet-stepper { gap: 5px; }
  .stepper-button { width: 28px; height: 28px; font-size: 17px; }
  .bet-amount-wrap { min-width: 60px; gap: 4px; }
  .bet-amount-wrap strong { font-size: clamp(20px, 5vw, 24px); }
  .bet-presets { gap: 3px; margin-top: 6px; }
  .bet-presets button { min-width: 28px; padding: 5px 5px; font-size: 7px; }
  .spin-control { gap: 4px; }
  .spin-button { min-height: 59px; gap: 4px; padding: 5px 7px; border-radius: 12px; }
  .spin-button::before { inset: 2px; border-radius: 9px; }
  .spin-icon { width: clamp(31px, 8vw, 42px); height: 35px; flex-basis: clamp(31px, 8vw, 42px); }
  .spin-button-copy strong { font-size: clamp(9px, 2.5vw, 11px); letter-spacing: .06em; }
  .spin-button-copy small { font-size: 5px; letter-spacing: .015em; }
  .secondary-action { min-height: 25px; font-size: 7px; padding: 4px 8px; }
  .control-bottomline { gap: 13px; margin-top: 8px; }
  .utility-button { min-height: 27px; gap: 4px; font-size: 6px; letter-spacing: .02em; }
  .utility-icon { font-size: 11px; }
  .utility-arrow { display: none; }
  .toggle-indicator { width: 17px; height: 10px; }
  .toggle-indicator::after { width: 4px; height: 4px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(7px); }
  .fairness-note { margin-top: 4px; font-size: 5px; letter-spacing: 0; line-height: 1.35; }
  .page-footer { padding-top: 10px; gap: 6px 10px; font-size: 6px; }
}
@media (max-width: 520px) {
  .app-shell { padding-right: 7px; padding-left: 7px; }
  .topbar { column-gap: 5px; }
  .brand-logo { width: clamp(90px, 27vw, 115px); }
  .demo-badge { max-width: 145px; font-size: 5px; }
  .top-actions { gap: 3px; }
  .icon-button { width: 27px; height: 27px; font-size: 12px; }
  .lang-button { padding: 0 5px; font-size: 7px; }
  .game-main { padding-top: 14px; }
  .status-chip { position: relative; right: auto; top: auto; transform: translateY(-2px); }
  .machine-header { top: -5px; right: 8%; }
  .slot-grid { left: 12.2% !important; right: 8.2% !important; top: 18.8% !important; bottom: 14.2% !important; }
  .reel[data-col="3"] .symbol-art-container { transform: translateX(3.8%); }
  .result-banner { min-height: 48px; }
  .result-copy small { font-size: 5px; }
  .result-copy strong { font-size: 17px; }
  .result-copy span { font-size: 7px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) minmax(116px, .83fr); gap: 6px; }
  .bet-amount-wrap { min-width: 54px; }
  .stepper-button { width: 25px; height: 26px; }
  .bet-presets button { min-width: 24px; padding: 4px 3px; font-size: 6px; }
  .spin-button { min-height: 53px; gap: 2px; padding: 4px 5px; }
  .spin-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .spin-button-copy strong { font-size: 9px; }
  .spin-button-copy small { display: none; }
  .secondary-action { min-height: 24px; font-size: 6px; }
  .control-bottomline { gap: clamp(7px, 2.2vw, 12px); margin-top: 7px; }
  .utility-button { flex: 1 1 auto; gap: 3px; padding: 3px 1px; font-size: 5px; }
  .utility-icon { font-size: 10px; }
  .toggle-indicator { width: 15px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(5px); }
  .fairness-note { max-width: 100%; font-size: 4.5px; }
  .page-footer { gap: 5px; padding-top: 8px; font-size: 5px; line-height: 1.4; }
  .modal-card { padding: 25px 15px 17px; border-radius: 16px; }
  .modal-title { font-size: 25px; }
  .modal-lead { font-size: 10px; }
  .payout-table { font-size: 8px; }
  .payout-table th, .payout-table td { padding: 7px 3px; }
  .table-symbol { gap: 3px; }
  .table-symbol .symbol-art-container { width: 24px; height: 24px; }
  .table-symbol b { font-size: 7px; }
  .rules-section, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-card { padding: 10px; }
  .rule-card p { font-size: 9px; }
  .setting-row { gap: 8px; }
  .setting-row strong { font-size: 10px; }
  .setting-row small { font-size: 8px; }
  .switch-button { min-width: 52px; padding: 7px 8px; font-size: 8px; }
  .bonus-card { padding: 22px 15px 18px; border-radius: 17px; }
  .bonus-card h2 { font-size: 25px; }
  .bonus-card p { font-size: 10px; }
  .bonus-phoenix-art { height: 130px; }
  .bonus-reward { padding: 8px 12px; }
}
@media(max-width:420px){
  .demo-badge { max-width: 125px; font-size: 4.5px; }
  .wallet-block strong { font-size: 14px; }
  .icon-button { width: 25px; height: 25px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) minmax(105px, .8fr); gap: 4px; }
  .spin-button-copy strong { font-size: 8px; }
  .utility-button { font-size: 4.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* PHOENIX SLOTS 1.8.0 — aligned reel windows, compact provider-style control deck. */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.app-shell { width: min(100%, 1800px); padding-left: clamp(14px, 2.1vw, 34px); padding-right: clamp(14px, 2.1vw, 34px); }
.topbar { min-height: 70px; }
.game-main { justify-content: flex-start; padding-top: clamp(0px, .75vh, 9px); }
.game-layout, .main-column { width: 100%; }
.machine-shell { width: 100%; max-width: 1460px; }
.machine-header { top: 2px; right: 10.8%; }
.reel-frame { width: min(100%, 1240px); max-width: 1240px; }
/* Match each CSS reel to the supplied art's actual inner frame rails. */
.slot-grid { left: 12.2% !important; right: 8.2% !important; top: 18.8% !important; bottom: 17.5% !important; grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important; }
.tile { box-shadow: inset 0 -1px 0 rgba(255, 203, 111, .14); }
.tile::before { inset: 2px 1px; border-color: rgba(255, 206, 116, .055); }
.reel[data-col="3"] .symbol-art-container { transform: translateX(4.5%); }

.controls-panel { width: min(100%, 1080px); margin: -1px auto 0; padding: 0; }
.control-topline { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); align-items: center; gap: clamp(22px, 4vw, 58px); }
.bet-control { justify-self: start; min-width: 0; padding: 3px 0; text-shadow: 0 2px 8px rgba(13, 3, 10, .86); }
.control-caption { margin-bottom: 7px; color: #ffe3a5; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.bet-stepper { gap: 10px; }
.stepper-button { width: 43px; height: 43px; flex: 0 0 43px; border: 1px solid rgba(255, 214, 129, .72); border-radius: 50%; color: #fff0c8; background: linear-gradient(145deg, rgba(44, 11, 23, .84), rgba(91, 30, 26, .72)); box-shadow: 0 3px 9px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 242, 196, .12); font-size: 25px; }
.stepper-button:hover:not(:disabled) { background: rgba(111, 40, 26, .9); }
.bet-amount-wrap { min-width: 84px; gap: 5px; }
.bet-amount-wrap strong { color: #fff0ba; font-size: clamp(26px, 2.4vw, 34px); text-shadow: 0 2px 12px rgba(0, 0, 0, .58); }
.bet-amount-wrap small { color: #ffd17b; font-size: 10px; }
.bet-presets { gap: 6px; margin-top: 9px; }
.bet-presets button { min-width: 34px; padding: 6px 8px; border: 1px solid rgba(255, 215, 133, .48); border-radius: 999px; color: #ffedc6; background: rgba(27, 6, 16, .52); box-shadow: 0 2px 7px rgba(0, 0, 0, .16); font-size: 9px; font-weight: 800; }
.bet-presets button:hover:not(:disabled), .bet-presets button.selected { color: #2b1209; border-color: #ffdf9a; background: linear-gradient(180deg, #ffe8a5, #e9aa49); }

.spin-control { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 104px; }
#spinButton.spin-button { position: relative; isolation: isolate; display: grid; place-items: center; flex: 0 0 auto; width: 94px; height: 94px; min-height: 0; padding: 0; overflow: visible; border: 0; border-radius: 50%; color: #fff0c8; background: transparent; box-shadow: none; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .42)); }
#spinButton.spin-button::before, #spinButton.spin-button::after { display: none; }
#spinButton .spin-button-art { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 9px rgba(255, 118, 28, .23)); transition: transform .2s ease, filter .2s ease; }
#spinButton:hover:not(:disabled) { filter: drop-shadow(0 5px 14px rgba(255, 113, 26, .44)); }
#spinButton:hover:not(:disabled) .spin-button-art { transform: scale(1.045); filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 138, 34, .42)); }
#spinButton:active:not(:disabled) .spin-button-art { transform: scale(.96); }
#spinButton.is-stopping .spin-button-art { filter: hue-rotate(-15deg) brightness(1.18); }
.spin-button-label { display: block; color: #ffe1a0; font-size: 9px; font-weight: 1000; letter-spacing: .14em; text-align: center; text-shadow: 0 2px 7px rgba(0, 0, 0, .9); white-space: nowrap; }
#spinButton:disabled { opacity: .48; filter: grayscale(.25) drop-shadow(0 3px 7px rgba(0, 0, 0, .32)); }
.auto-control { justify-self: end; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; width: min(100%, 210px); }
.secondary-action { min-height: 42px; width: 100%; padding: 9px 13px; border: 1px solid rgba(255, 210, 121, .58); border-radius: 11px; color: #ffe6b0; background: linear-gradient(110deg, rgba(47, 10, 23, .76), rgba(99, 27, 25, .68)); box-shadow: 0 4px 12px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 244, 209, .08); font-size: 9px; font-weight: 950; letter-spacing: .12em; backdrop-filter: blur(5px); }
.secondary-action:hover:not(:disabled), .secondary-action.is-active { color: #fff1bc; border-color: #ffdf9a; background: linear-gradient(110deg, rgba(83, 21, 24, .88), rgba(137, 46, 26, .82)); }
.auto-icon { font-size: 17px; line-height: 1; }
.auto-help { color: rgba(255, 226, 170, .72); font-size: 7px; font-weight: 800; letter-spacing: .16em; text-align: center; text-shadow: 0 2px 7px rgba(0, 0, 0, .8); }

.control-bottomline { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 42px); margin-top: 11px; padding: 8px 2px 0; border-top: 1px solid rgba(255, 213, 135, .28); }
.utility-button { min-height: 34px; gap: 8px; padding: 6px 10px; border: 1px solid rgba(255, 210, 121, .24); border-radius: 8px; color: #ffedc8; background: rgba(25, 5, 15, .4); font-size: 8px; letter-spacing: .08em; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); backdrop-filter: blur(5px); }
.utility-button:hover:not(:disabled), .utility-button.is-on { border-color: rgba(255, 219, 145, .82); background: rgba(82, 24, 23, .72); }
.utility-icon { color: #ffd27e; font-size: 13px; }
.utility-arrow { color: #ffdf9c; opacity: .8; }
.toggle-indicator { width: 22px; height: 12px; border: 1px solid rgba(255, 216, 141, .55); border-radius: 999px; background: rgba(18, 5, 13, .8); }
.toggle-indicator::after { left: 2px; bottom: 2px; width: 6px; height: 6px; background: #b9a08d; }
.utility-button.is-on .toggle-indicator::after { transform: translateX(10px); background: #ffe39b; }

.provider-statusbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 8px; padding: 9px 3px; border-top: 1px solid rgba(255, 211, 126, .32); border-bottom: 1px solid rgba(255, 211, 126, .24); background: linear-gradient(90deg, rgba(26, 6, 17, .45), rgba(53, 14, 18, .34), rgba(26, 6, 17, .45)); box-shadow: 0 4px 12px rgba(0, 0, 0, .10); backdrop-filter: blur(5px); }
.status-value { position: relative; display: flex; justify-content: center; align-items: baseline; gap: 5px; min-width: 0; padding: 1px 8px; white-space: nowrap; }
.status-value + .status-value { border-left: 1px solid rgba(255, 211, 126, .25); }
.status-value > span { overflow: hidden; color: rgba(255, 219, 158, .77); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-overflow: ellipsis; }
.status-value strong { overflow: hidden; color: #fff0bd; font-family: var(--font-display); font-size: clamp(11px, 1.2vw, 15px); font-variant-numeric: tabular-nums; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0, 0, 0, .65); }
.status-value small { color: #edbd72; font-size: 7px; font-weight: 900; }
.fairness-note { margin-top: 7px; padding-top: 0; color: rgba(255, 226, 192, .76); font-size: 6px; letter-spacing: .075em; }
.result-banner { min-height: 45px; margin: 3px auto 0; padding: 4px 10px 3px; }
.result-copy { gap: 1px; }
.result-copy small { font-size: 6px; letter-spacing: .17em; }
.result-copy strong { font-size: clamp(16px, 1.9vw, 23px); }
.result-copy span { font-size: 8px; }
.page-footer { padding-top: 8px; gap: 7px 18px; font-size: 7px; }

@media (min-width: 821px) {
  .machine-shell { max-width: 1460px; }
  .reel-frame { width: min(100%, 1240px, calc((100svh - 330px) * 2.0949)); }
  .game-main { padding-bottom: 0; }
}
@media (min-width: 821px) and (max-width: 1199px) {
  .topbar { gap: 12px; }
  .brand-logo { width: clamp(100px, 12vw, 140px); }
  .demo-badge { font-size: 7px; letter-spacing: .07em; }
  .machine-shell { max-width: 1120px; }
  .reel-frame { width: min(100%, 1120px, calc((100svh - 335px) * 2.0949)); }
  .controls-panel { width: min(100%, 940px); }
  .control-topline { gap: clamp(14px, 2.6vw, 30px); }
}
@media (max-width: 820px) {
  .app-shell { padding: 0 10px 10px; }
  .topbar { min-height: 0; }
  .game-main { padding: 5px 0 0; justify-content: flex-start; }
  .machine-shell { max-width: none; }
  .machine-header { top: 0; right: 9.5%; }
  .status-chip { padding: 4px 7px; border-color: rgba(255, 209, 123, .44); background: rgba(35, 9, 16, .48); font-size: 6px; }
  .reel-frame { width: 100%; max-width: none; }
  .slot-grid { left: 12.2% !important; right: 8.2% !important; top: 18.8% !important; bottom: 17.5% !important; grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important; }
  .reel[data-col="3"] .symbol-art-container { transform: translateX(4.8%); }
  .tile::before { inset: 1px; }
  .controls-panel { width: min(100%, 660px); margin-top: 0; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 8px; align-items: center; }
  .control-caption { margin-bottom: 4px; font-size: 7px; letter-spacing: .1em; }
  .bet-control { padding: 0; }
  .bet-stepper { gap: 5px; }
  .stepper-button { width: 30px; height: 30px; flex-basis: 30px; font-size: 19px; }
  .bet-amount-wrap { min-width: 51px; gap: 3px; }
  .bet-amount-wrap strong { font-size: clamp(21px, 5vw, 28px); }
  .bet-amount-wrap small { font-size: 8px; }
  .bet-presets { flex-wrap: nowrap; gap: 3px; margin-top: 6px; }
  .bet-presets button { min-width: 23px; padding: 4px 4px; font-size: 7px; }
  .spin-control { width: 76px; gap: 0; }
  #spinButton.spin-button { width: clamp(62px, 17vw, 76px); height: clamp(62px, 17vw, 76px); }
  .spin-button-label { font-size: 7px; letter-spacing: .11em; }
  .auto-control { width: 100%; max-width: none; gap: 4px; }
  .secondary-action { min-height: 34px; padding: 6px 5px; gap: 4px; border-radius: 8px; font-size: 7px; letter-spacing: .045em; }
  .auto-icon { font-size: 14px; }
  .auto-help { font-size: 5px; letter-spacing: .1em; }
  .control-bottomline { gap: 6px; margin-top: 8px; padding: 6px 0 0; }
  .utility-button { min-height: 30px; flex: 1 1 0; justify-content: center; gap: 4px; padding: 5px 3px; border-radius: 7px; font-size: 6px; letter-spacing: .01em; }
  .utility-icon { font-size: 10px; }
  .utility-arrow { display: none; }
  .toggle-indicator { flex: 0 0 17px; width: 17px; height: 10px; }
  .toggle-indicator::after { width: 4px; height: 4px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(7px); }
  .provider-statusbar { margin-top: 7px; padding: 7px 0; }
  .status-value { gap: 3px; padding: 1px 4px; }
  .status-value > span { font-size: 6px; letter-spacing: .08em; }
  .status-value strong { font-size: clamp(10px, 2.6vw, 13px); }
  .status-value small { font-size: 6px; }
  .fairness-note { margin-top: 5px; font-size: 5px; letter-spacing: 0; line-height: 1.35; }
  .result-banner { min-height: 42px; margin-top: 2px; padding: 3px 2px; }
  .result-copy small { font-size: 5px; }
  .result-copy strong { font-size: clamp(16px, 4.5vw, 21px); }
  .result-copy span { font-size: 7px; }
  .page-footer { padding-top: 7px; gap: 5px 10px; font-size: 5.5px; line-height: 1.35; }
}
@media (max-width: 520px) {
  .app-shell { padding-left: 7px; padding-right: 7px; }
  .topbar { column-gap: 5px; }
  .brand-logo { width: clamp(90px, 27vw, 115px); }
  .demo-badge { max-width: 145px; font-size: 5px; }
  .game-main { padding-top: 4px; }
  .machine-header { right: 8%; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); gap: 5px; }
  .spin-control { width: 68px; }
  #spinButton.spin-button { width: clamp(60px, 16vw, 68px); height: clamp(60px, 16vw, 68px); }
  .stepper-button { width: 27px; height: 28px; flex-basis: 27px; }
  .bet-amount-wrap { min-width: 45px; }
  .bet-presets button { min-width: 20px; padding: 4px 3px; font-size: 6px; }
  .status-value > span { font-size: 5px; }
  .status-value strong { font-size: clamp(9px, 2.6vw, 11px); }
  .status-value small { font-size: 5px; }
  .control-bottomline { gap: 4px; }
  .utility-button { gap: 3px; padding: 4px 2px; font-size: 5px; }
  .utility-icon { font-size: 9px; }
  .toggle-indicator { flex-basis: 14px; width: 14px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(4px); }
  .fairness-note { max-width: 100%; font-size: 4.5px; }
  .page-footer { font-size: 5px; }
}
@media (max-width: 360px) {
  .control-topline { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 4px; }
  .spin-control { width: 60px; }
  #spinButton.spin-button { width: 58px; height: 58px; }
  .bet-amount-wrap { min-width: 40px; }
  .stepper-button { width: 24px; height: 25px; flex-basis: 24px; }
  .bet-presets { gap: 2px; }
  .bet-presets button { min-width: 18px; padding: 3px 2px; }
  .secondary-action { font-size: 6px; }
  .provider-statusbar { padding-left: 0; padding-right: 0; }
  .status-value { padding: 1px 2px; }
}

@media (max-width: 520px) {
  .control-caption { font-size: 7.5px; letter-spacing: .065em; }
  .utility-button { font-size: 6.5px; }
  .utility-icon { font-size: 10px; }
  .status-value > span { font-size: 6px; }
  .status-value strong { font-size: clamp(9.5px, 2.65vw, 11.5px); }
}


/* ===== Consolidated source: styles-final.css ===== */
/* PHOENIX SLOTS 1.8.0 — fixed provider-style control deck, clean scene, clearer bonus. */
:root {
  --dock-bg: rgba(19, 5, 13, .96);
  --dock-line: rgba(255, 205, 116, .66);
  --dock-text: #fff4d2;
  --dock-muted: #d8b985;
  --dock-gold: #ffcf76;
  --dock-ember: #ff7837;
}

html, body { min-height: 100%; }
html { min-height: 100svh; }
body {
  min-height: 100svh;
  overflow-x: hidden;
  background-position: center 43%;
  background-attachment: fixed;
}
.app-shell {
  width: 100%;
  max-width: 1880px;
  min-height: 100svh;
  padding: 0 clamp(12px, 2.2vw, 34px) 0;
}
.topbar {
  z-index: 3;
  flex: 0 0 auto;
  min-height: clamp(64px, 8vh, 82px);
  gap: clamp(10px, 1.8vw, 26px);
}
.brand-logo { width: clamp(110px, 11.5vw, 164px); }
.wallet-block { margin-left: auto; }
.game-main {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  padding: 0 0 214px;
}
.game-layout { width: 100%; min-height: 0; align-items: center; }
.main-column { width: 100%; align-items: center; }
.machine-shell {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.machine-header {
  top: 2px;
  right: max(4%, calc((100% - 1280px) / 2));
  z-index: 8;
}
.status-chip {
  min-height: 26px;
  padding: 5px 10px;
  border-color: rgba(255, 214, 131, .58);
  color: #fff0c6;
  background: rgba(30, 7, 14, .75);
  box-shadow: 0 3px 16px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 239, 191, .08);
  font-size: 8px;
  letter-spacing: .1em;
}
.reel-stage { width: 100%; flex: 0 0 auto; }
.reel-frame {
  width: min(100%, 1540px, calc((100svh - 350px) * 2.0949));
  max-width: none;
  filter: drop-shadow(0 8px 26px rgba(10, 2, 8, .18));
}
.slot-grid {
  left: 12.2% !important;
  right: 8.2% !important;
  top: 18.8% !important;
  bottom: 17.5% !important;
  grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important;
}
.tile { box-shadow: inset 0 -1px 0 rgba(255, 211, 130, .19); }
.tile::before { border-color: rgba(255, 220, 150, .07); }
.reel[data-col="3"] .symbol-art-container { transform: translateX(4.5%); }
.result-banner { display: none !important; }

/* Bonus instructions remain in the play area, distinct from the fixed control dock. */
.bonus-info-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(91%, 700px);
  min-height: 42px;
  margin: -2px auto 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 199, 104, .52);
  border-radius: 12px;
  color: var(--dock-text);
  background: linear-gradient(100deg, rgba(30, 6, 16, .86), rgba(65, 17, 16, .81) 55%, rgba(29, 5, 15, .88));
  box-shadow: 0 7px 22px rgba(8, 2, 7, .25), inset 0 1px rgba(255, 245, 211, .08);
  backdrop-filter: blur(10px);
}
.bonus-info-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 207, 118, .7);
  border-radius: 50%;
  color: #fff0b9;
  background: radial-gradient(circle at 35% 25%, #e9a447, #742819 72%);
  box-shadow: 0 0 12px rgba(255, 112, 38, .22);
  font-size: 13px;
}
.bonus-info-copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.bonus-info-copy strong { color: #ffdb92; font-size: 8px; font-weight: 950; letter-spacing: .13em; }
.bonus-info-copy span { color: #fff1d0; font-size: 10px; font-weight: 600; line-height: 1.35; }
.free-spin-counter {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(255, 213, 122, .76);
  border-radius: 999px;
  color: #32120a;
  background: linear-gradient(180deg, #ffe8a9, #f0ae4e);
  box-shadow: 0 2px 9px rgba(0, 0, 0, .18);
  font-size: 10px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The dock is independent of the reel layout and always stays at the screen bottom. */
.controls-panel {
  position: fixed !important;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px max(16px, calc((100vw - 1320px) / 2)) max(9px, env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--dock-line);
  border-radius: 17px 17px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 180, 81, .055), transparent 24px),
    linear-gradient(110deg, rgba(23, 5, 14, .985), rgba(38, 9, 16, .975) 54%, rgba(20, 4, 13, .99));
  box-shadow: 0 -14px 38px rgba(8, 2, 7, .47), inset 0 1px rgba(255, 242, 199, .09);
  backdrop-filter: blur(20px) saturate(1.12);
}
.controls-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: min(190px, 38vw);
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #ffe6a0, #ff863e, transparent);
  box-shadow: 0 0 16px rgba(255, 142, 57, .56);
  transform: translateX(-50%);
  pointer-events: none;
}
.provider-statusbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 3px 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 211, 126, .23);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.status-value {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
  padding: 0 12px;
  text-align: center;
  white-space: nowrap;
}
.status-value + .status-value { border-left: 1px solid rgba(255, 211, 126, .24); }
.status-value > span {
  grid-column: 1 / -1;
  overflow: visible;
  color: var(--dock-muted);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .16em;
  line-height: 1.15;
}
.status-value strong {
  max-width: 100%;
  color: #fff5d5;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.status-value small { color: var(--dock-gold); font-size: 8px; font-weight: 950; }
.control-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 70px);
  width: min(100%, 1140px);
  margin: 5px auto 0;
}
.bet-control { justify-self: start; min-width: 0; padding: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.control-caption { margin-bottom: 4px; color: #f9d79a; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.bet-stepper { gap: 8px; }
.stepper-button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(255, 217, 143, .8);
  border-radius: 50%;
  color: #fff5d5;
  background: linear-gradient(145deg, rgba(82, 24, 27, .94), rgba(38, 8, 18, .97));
  box-shadow: 0 3px 10px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 242, 196, .12);
  font-size: 22px;
}
.stepper-button:hover:not(:disabled) { color: #38140b; background: linear-gradient(180deg, #ffe7ab, #eeb04c); }
.bet-amount-wrap { min-width: 75px; gap: 4px; }
.bet-amount-wrap strong { color: #fff5ce; font-size: clamp(25px, 2.25vw, 33px); text-shadow: 0 2px 11px rgba(0, 0, 0, .55); }
.bet-amount-wrap small { color: #ffcf76; font-size: 9px; }
.bet-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; width: min(100%, 232px); margin-top: 6px; }
.bet-presets button {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(255, 215, 133, .55);
  border-radius: 999px;
  color: #ffefcb;
  background: rgba(65, 17, 25, .72);
  box-shadow: inset 0 1px rgba(255, 248, 220, .04);
  font-size: 9px;
  font-weight: 950;
}
.bet-presets button:hover:not(:disabled), .bet-presets button.selected {
  color: #341207;
  border-color: #fff0b6;
  background: linear-gradient(180deg, #fff0ba, #f1b954);
  box-shadow: 0 0 12px rgba(255, 183, 63, .16);
}
.spin-control { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 96px; }
#spinButton.spin-button {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .42));
}
#spinButton.spin-button::before, #spinButton.spin-button::after { display: none !important; }
#spinButton .spin-button-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 123, 32, .35));
  transition: transform .23s ease, filter .23s ease;
}
#spinButton:hover:not(:disabled) { filter: drop-shadow(0 4px 16px rgba(255, 112, 37, .5)); }
#spinButton:hover:not(:disabled) .spin-button-art { transform: scale(1.06); filter: brightness(1.1) drop-shadow(0 0 13px rgba(255, 143, 50, .55)); }
#spinButton:active:not(:disabled) .spin-button-art { transform: scale(.94); }
#spinButton:disabled { opacity: .53; }
.spin-button-label { display: block; color: #ffe5a2; font-size: 8px; font-weight: 1000; letter-spacing: .15em; text-align: center; text-shadow: 0 2px 8px #090207; white-space: nowrap; }
.auto-control { justify-self: end; display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: min(100%, 210px); gap: 4px; }
.secondary-action {
  min-height: 40px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 210, 121, .75);
  border-radius: 11px;
  color: #fff0c7;
  background: linear-gradient(115deg, rgba(78, 18, 23, .98), rgba(122, 36, 27, .96));
  box-shadow: 0 3px 12px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 244, 210, .12);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .09em;
}
.secondary-action:hover:not(:disabled), .secondary-action.is-active { color: #351306; border-color: #fff0b8; background: linear-gradient(180deg, #ffe7a4, #eea844); }
.auto-icon { margin-right: 4px; color: var(--dock-gold); font-size: 17px; }
.secondary-action.is-active .auto-icon { color: #7d2815; }
.control-bottomline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: min(100%, 1140px);
  margin: 7px auto 0;
  padding: 7px 0 0;
  border-top: 1px solid rgba(255, 211, 126, .18);
}
.utility-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 33px;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 209, 122, .39);
  border-radius: 9px;
  color: #fff0cb;
  background: linear-gradient(180deg, rgba(66, 16, 23, .84), rgba(34, 7, 17, .92));
  box-shadow: inset 0 1px rgba(255, 247, 222, .05);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
}
.utility-button:hover:not(:disabled), .utility-button.is-on { color: #331205; border-color: #ffedb1; background: linear-gradient(180deg, #ffe7a4, #eda647); text-shadow: none; }
.utility-icon { flex: 0 0 auto; color: #ffcf77; font-size: 14px; }
.utility-button:hover .utility-icon, .utility-button.is-on .utility-icon { color: #803018; }
.utility-arrow { display: none; }
.toggle-indicator { flex: 0 0 auto; width: 25px; height: 14px; border: 1px solid rgba(255, 221, 151, .75); border-radius: 999px; background: rgba(18, 4, 12, .7); }
.toggle-indicator::after { left: 2px; bottom: 2px; width: 8px; height: 8px; background: #c0aa8a; }
.utility-button.is-on .toggle-indicator { border-color: #51200f; background: rgba(86, 37, 18, .25); }
.utility-button.is-on .toggle-indicator::after { transform: translateX(11px); background: #58200e; }
.fairness-note, .page-footer, .demo-badge { display: none !important; }
.toast { bottom: 218px; }

/* Reel motion: longer runs, slower symbol changes, and a clear stop cadence. */
.reel.is-spinning .tile::after { animation-duration: .78s; }
.reel.is-spinning .symbol-art { filter: blur(.35px) brightness(1.06) drop-shadow(0 3px 4px rgba(0, 0, 0, .38)); }
.reel.is-stopped .tile { animation: reelStopSettle .22s ease-out both; }
@keyframes reelStopSettle {
  0% { filter: brightness(1.2); }
  62% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

@media (min-width: 821px) {
  .topbar { padding-top: 3px; }
  .game-main { padding-bottom: 222px; }
  .reel-frame { width: min(100%, 1540px, calc((100svh - 350px) * 2.0949)); }
  .bonus-info-strip { min-height: 43px; }
  .controls-panel { padding-top: 9px; }
}
@media (min-width: 821px) and (max-height: 760px) {
  .topbar { min-height: 58px; }
  .game-main { padding-bottom: 205px; }
  .controls-panel { padding-top: 6px; padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding-bottom: 5px; }
  .control-topline { margin-top: 3px; }
  #spinButton.spin-button { width: 63px; height: 63px; flex-basis: 63px; }
  .stepper-button { width: 32px; height: 32px; flex-basis: 32px; }
  .utility-button { min-height: 30px; }
}
@media (max-width: 820px) {
  .app-shell { padding: 0 10px; }
  .topbar {
    min-height: 67px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand wallet" "actions actions";
    gap: 2px 8px;
    align-content: center;
    padding: 5px 0 7px;
  }
  .brand { grid-area: brand; min-height: 34px; }
  .brand-logo { width: clamp(92px, 25vw, 130px); max-height: 44px; }
  .brand-caption { display: none; }
  .wallet-block { grid-area: wallet; justify-self: end; padding: 0; border: 0; column-gap: 4px; }
  .wallet-label { font-size: 7px; }
  .wallet-block strong { font-size: clamp(15px, 4.2vw, 20px); }
  .credit-unit { font-size: 8px; }
  .top-actions { grid-area: actions; justify-self: end; gap: 5px; }
  .icon-button { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
  .lang-button { padding: 0 7px; font-size: 8px; }
  .game-main { padding: 0 0 183px; }
  .game-layout { display: flex; align-items: center; }
  .machine-shell { width: 100%; }
  .machine-header { top: 0; right: 4%; }
  .status-chip { min-height: 22px; padding: 4px 7px; font-size: 6px; letter-spacing: .06em; }
  .stage-glow { inset: 16% 7% 0; filter: blur(22px); }
  .reel-frame { width: min(108vw, calc((100svh - 300px) * 2.0949)); max-width: none; }
  .slot-grid { left: 12.2% !important; right: 8.2% !important; top: 18.8% !important; bottom: 17.5% !important; grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important; }
  .reel[data-col="3"] .symbol-art-container { transform: translateX(4.8%); }
  .tile::before { inset: 1px; }
  .tile .symbol-art-container { padding: 1px; }
  .bonus-info-strip { width: min(94%, 560px); min-height: 37px; margin-top: -3px; padding: 6px 8px; gap: 7px; border-radius: 10px; }
  .bonus-info-symbol { flex-basis: 23px; width: 23px; height: 23px; font-size: 11px; }
  .bonus-info-copy { gap: 1px; }
  .bonus-info-copy strong { font-size: 7px; letter-spacing: .1em; }
  .bonus-info-copy span { font-size: 8px; line-height: 1.25; }
  .free-spin-counter { padding: 5px 7px; font-size: 8px; }

  .controls-panel {
    padding: 7px 12px max(9px, env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
  }
  .provider-statusbar { width: 100%; padding: 1px 0 6px; }
  .status-value { gap: 2px 4px; padding: 0 3px; }
  .status-value > span { font-size: 6px; letter-spacing: .12em; }
  .status-value strong { font-size: clamp(12px, 3.4vw, 15px); }
  .status-value small { font-size: 7px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 7px; width: 100%; margin-top: 5px; }
  .bet-control { justify-self: stretch; padding: 0; }
  .control-caption { margin-bottom: 4px; font-size: 6px; letter-spacing: .08em; white-space: nowrap; }
  .bet-stepper { justify-content: flex-start; gap: 3px; }
  .stepper-button { width: 27px; height: 29px; flex-basis: 27px; font-size: 18px; }
  .bet-amount-wrap { min-width: 0; flex: 1 1 auto; justify-content: center; gap: 2px; }
  .bet-amount-wrap strong { font-size: clamp(20px, 5.2vw, 25px); }
  .bet-amount-wrap small { font-size: 7px; }
  .bet-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 3px; margin-top: 5px; }
  .bet-presets button { padding: 4px 0; font-size: 7px; }
  .spin-control { width: 64px; gap: 0; }
  #spinButton.spin-button { width: clamp(55px, 16vw, 64px); height: clamp(55px, 16vw, 64px); flex-basis: clamp(55px, 16vw, 64px); }
  .spin-button-label { font-size: 7px; letter-spacing: .1em; }
  .auto-control { justify-self: stretch; width: 100%; gap: 3px; }
  .secondary-action { min-height: 36px; padding: 5px 3px; border-radius: 9px; font-size: 8px; letter-spacing: .03em; white-space: nowrap; }
  .auto-icon { margin-right: 2px; font-size: 14px; }
  .control-bottomline { width: 100%; gap: 5px; margin-top: 6px; padding-top: 6px; }
  .utility-button { min-height: 32px; gap: 4px; padding: 4px 3px; border-radius: 8px; font-size: 7px; letter-spacing: .025em; }
  .utility-icon { font-size: 12px; }
  .toggle-indicator { width: 19px; height: 11px; }
  .toggle-indicator::after { width: 5px; height: 5px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(7px); }
  .toast { bottom: calc(176px + env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
  .topbar { min-height: 63px; }
  .brand-logo { width: 91px; }
  .icon-button { width: 26px; height: 26px; }
  .controls-panel { padding-right: 8px; padding-left: 8px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 5px; }
  #spinButton.spin-button { width: 55px; height: 55px; flex-basis: 55px; }
  .spin-control { width: 58px; }
  .bet-stepper { gap: 2px; }
  .stepper-button { width: 24px; height: 27px; flex-basis: 24px; }
  .bet-amount-wrap strong { font-size: 19px; }
  .bet-presets button { font-size: 6px; }
  .secondary-action { font-size: 7px; }
  .utility-button { gap: 3px; font-size: 6.5px; }
  .utility-icon { font-size: 11px; }
  .toggle-indicator { width: 16px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(4px); }
  .bonus-info-copy span { font-size: 7px; }
}
@media (max-width: 350px) {
  .control-topline { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); gap: 4px; }
  .spin-control { width: 52px; }
  #spinButton.spin-button { width: 49px; height: 49px; flex-basis: 49px; }
  .bet-amount-wrap strong { font-size: 17px; }
  .bet-presets button { font-size: 5.5px; }
  .secondary-action { font-size: 6px; }
  .utility-button { font-size: 5.8px; }
  .bonus-info-copy strong { font-size: 6px; }
  .bonus-info-copy span { font-size: 6.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel.is-spinning .tile::after { animation-duration: 1.2s; }
  .reel.is-stopped .tile { animation: none; }
}


/* ===== Consolidated source: styles-polish.css ===== */
/* PHOENIX SLOTS 1.8.0 — responsive reel fit and balanced provider-style controls. */
:root {
  --dock-bg: rgba(18, 5, 13, .975);
  --dock-line: rgba(255, 205, 116, .7);
  --dock-text: #fff5dc;
  --dock-muted: #e0c49a;
  --dock-gold: #ffd37d;
  --dock-ember: #ff7b3a;
}

html,
body {
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
}

.app-shell {
  width: 100%;
  max-width: 2048px;
  min-height: 100svh;
  padding-inline: clamp(10px, 2.1vw, 38px);
  overflow-x: clip;
}

.game-main,
.game-layout,
.main-column,
.machine-shell,
.reel-stage {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.game-main {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 198px;
}

.game-layout { align-items: flex-start; }
.main-column { align-items: center; }
.machine-shell { align-items: center; }
.reel-stage { flex: 0 0 auto; }

/* Desktop uses the available height intelligently instead of leaving the reel undersized. */
.reel-frame {
  width: min(100%, 1660px, calc((100svh - 330px) * 2.0949));
  max-width: none;
  margin-inline: auto;
}

.bonus-info-strip {
  width: min(88%, 820px);
  min-height: 46px;
  margin-top: 0;
  border-color: rgba(255, 205, 116, .68);
  box-shadow: 0 8px 26px rgba(8, 2, 7, .28), inset 0 1px rgba(255, 245, 211, .11);
}

/* Control deck: defined columns, high contrast, and safe-area-aware bottom anchoring. */
.controls-panel {
  position: fixed !important;
  z-index: 50;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6px max(18px, calc((100vw - 1450px) / 2)) max(6px, env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--dock-line);
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 164, 64, .12), transparent 42%),
    linear-gradient(110deg, rgba(18, 4, 13, .99), rgba(42, 9, 17, .985) 52%, rgba(17, 4, 12, .995));
  box-shadow: 0 -16px 42px rgba(8, 2, 7, .45), inset 0 1px rgba(255, 242, 199, .1);
  backdrop-filter: blur(22px) saturate(1.14);
}

.controls-panel::before {
  width: min(220px, 38vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff0b0, #ff843e, transparent);
  box-shadow: 0 0 18px rgba(255, 142, 57, .62);
}

.provider-statusbar {
  width: min(100%, 1380px);
  margin: 0 auto;
  padding: 2px 0 4px;
  border-top: 0;
  border-bottom-color: rgba(255, 211, 126, .28);
  background: transparent;
}

.status-value { padding-inline: clamp(8px, 1.6vw, 24px); }
.status-value > span { color: #e4c393; font-size: 8px; letter-spacing: .17em; }
.status-value strong { color: #fff5d7; font-size: clamp(15px, 1.35vw, 20px); }
.status-value small { color: #ffcf76; font-size: 9px; }

.control-topline {
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: clamp(26px, 5vw, 84px);
  width: min(100%, 1280px);
  margin-top: 4px;
}

.bet-control { padding: 0; }
.control-caption { margin-bottom: 5px; color: #ffe2a2; font-size: 9px; letter-spacing: .16em; }
.bet-stepper { gap: 10px; }
.stepper-button {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-color: rgba(255, 222, 157, .9);
  color: #fff6dd;
  background: linear-gradient(145deg, rgba(95, 27, 28, .96), rgba(38, 7, 18, .99));
  box-shadow: 0 3px 12px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 242, 196, .16);
}
.bet-amount-wrap { min-width: 92px; }
.bet-amount-wrap strong { color: #fff7d9; font-size: clamp(28px, 2.4vw, 38px); }
.bet-amount-wrap small { color: #ffd37d; font-size: 11px; }
.bet-presets { width: min(100%, 282px); gap: 7px; margin-top: 7px; }
.bet-presets button { padding: 6px 8px; color: #fff3d4; border-color: rgba(255, 215, 133, .62); font-size: 10px; }

.spin-control { width: 120px; }
#spinButton.spin-button { width: 76px; height: 76px; flex-basis: 76px; }
.spin-button-label { margin-top: 1px; color: #ffe7ab; font-size: 9px; letter-spacing: .16em; }

.auto-control { width: min(100%, 230px); }
.secondary-action {
  min-height: 40px;
  border-color: rgba(255, 215, 133, .82);
  color: #fff2ce;
  background: linear-gradient(115deg, rgba(83, 19, 25, .98), rgba(132, 40, 27, .97));
  box-shadow: 0 4px 15px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 244, 210, .15);
  font-size: 10px;
}
.secondary-action:hover:not(:disabled),
.secondary-action.is-active {
  color: #341207;
  border-color: #fff0bd;
  background: linear-gradient(180deg, #ffedb0, #f0b24f);
}

.control-bottomline {
  width: min(100%, 1280px);
  gap: 10px;
  margin-top: 5px;
  padding-top: 5px;
  border-top-color: rgba(255, 211, 126, .23);
}
.utility-button {
  min-height: 32px;
  border-color: rgba(255, 209, 122, .47);
  color: #fff4d5;
  background: linear-gradient(180deg, rgba(75, 17, 24, .91), rgba(31, 6, 16, .97));
  font-size: 9px;
  letter-spacing: .055em;
}
.utility-icon { color: #ffd37d; font-size: 14px; }
.utility-button:hover:not(:disabled),
.utility-button.is-on {
  color: #361307;
  border-color: #fff0b8;
  background: linear-gradient(180deg, #ffebb0, #eda948);
  text-shadow: none;
}
.utility-button:hover .utility-icon,
.utility-button.is-on .utility-icon { color: #7e2c16; }

.toast { bottom: max(220px, calc(210px + env(safe-area-inset-bottom))); }

@media (min-width: 1200px) {
  .topbar { min-height: clamp(72px, 8vh, 92px); }
  .brand-logo { width: clamp(138px, 11.5vw, 190px); }
  .machine-shell { max-width: none; }
  .reel-frame { width: min(100%, 1660px, calc((100svh - 330px) * 2.0949)); }
  .bonus-info-strip { width: min(78%, 900px); min-height: 48px; }
  .controls-panel { padding-top: 6px; }
}

@media (min-width: 821px) and (max-height: 760px) {
  .topbar { min-height: 58px; }
  .brand-logo { width: clamp(116px, 9vw, 145px); }
  .game-main { padding-bottom: 176px; }
  .reel-frame { width: min(100%, 1600px, calc((100svh - 290px) * 2.0949)); }
  .bonus-info-strip { min-height: 38px; padding-block: 5px; }
  .bonus-info-symbol { width: 23px; height: 23px; flex-basis: 23px; }
  .bonus-info-copy strong { font-size: 7px; }
  .bonus-info-copy span { font-size: 9px; }
  .controls-panel { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding-bottom: 5px; }
  .status-value > span { font-size: 7px; }
  .status-value strong { font-size: 14px; }
  .control-topline { margin-top: 3px; }
  .stepper-button { width: 34px; height: 34px; flex-basis: 34px; }
  .bet-amount-wrap strong { font-size: 28px; }
  .bet-presets { margin-top: 5px; }
  .bet-presets button { padding-block: 4px; }
  #spinButton.spin-button { width: 67px; height: 67px; flex-basis: 67px; }
  .auto-control { width: min(100%, 210px); }
  .secondary-action { min-height: 36px; }
  .control-bottomline { margin-top: 5px; padding-top: 5px; }
  .utility-button { min-height: 29px; }
}

/* Phones: the reel can never exceed the content width, even on narrow Android browsers. */
@media (max-width: 820px) {
  .app-shell { padding-inline: 8px; }
  .topbar {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 7px;
    padding: 5px 0 6px;
  }
  .brand-logo { width: clamp(88px, 25vw, 126px); max-width: 100%; }
  .wallet-block { min-width: 0; }
  .top-actions { max-width: 100%; }
  .game-main { padding: 0 0 max(160px, calc(150px + env(safe-area-inset-bottom))); justify-content: center; }
  .game-layout { display: flex; align-items: flex-start; }
  .machine-shell { width: 100%; min-width: 0; }
  .reel-stage { width: 100%; min-width: 0; overflow: visible; }
  .reel-frame {
    display: block;
    width: min(100%, calc(100vw - 16px), calc((100svh - 300px) * 2.0949));
    max-width: 100%;
    margin-inline: auto;
  }
  .slot-grid { max-width: 100%; }
  .machine-header { right: 4%; }
  .status-chip { max-width: 46%; font-size: 6px; }
  .bonus-info-strip {
    width: min(96%, 620px);
    min-width: 0;
    min-height: 38px;
    margin-top: 0;
    padding: 6px 8px;
    gap: 7px;
  }
  .bonus-info-copy { min-width: 0; }
  .bonus-info-copy strong { font-size: 7px; }
  .bonus-info-copy span { font-size: 8px; }
  .controls-panel {
    padding: 7px 12px max(9px, env(safe-area-inset-bottom));
    border-radius: 15px 15px 0 0;
  }
  .provider-statusbar { width: 100%; padding: 1px 0 6px; }
  .status-value { min-width: 0; padding-inline: 3px; gap: 2px 4px; }
  .status-value > span { font-size: 6px; letter-spacing: .1em; }
  .status-value strong { font-size: clamp(11px, 3.5vw, 15px); }
  .status-value small { font-size: 7px; }
  .control-topline {
    grid-template-columns: minmax(0, 1fr) clamp(60px, 17vw, 72px) minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    margin-top: 5px;
  }
  .bet-control { justify-self: stretch; min-width: 0; }
  .control-caption { margin-bottom: 4px; font-size: 6.5px; letter-spacing: .075em; }
  .bet-stepper { justify-content: flex-start; gap: 3px; }
  .stepper-button { width: clamp(25px, 7vw, 30px); height: 29px; flex-basis: clamp(25px, 7vw, 30px); font-size: 18px; }
  .bet-amount-wrap { min-width: 0; flex: 1 1 auto; gap: 2px; }
  .bet-amount-wrap strong { font-size: clamp(19px, 5.2vw, 25px); }
  .bet-amount-wrap small { font-size: 7px; }
  .bet-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 3px; margin-top: 5px; }
  .bet-presets button { min-width: 0; padding: 4px 0; font-size: 7px; }
  .spin-control { width: clamp(60px, 17vw, 72px); gap: 0; }
  #spinButton.spin-button { width: clamp(58px, 16vw, 68px); height: clamp(58px, 16vw, 68px); flex-basis: clamp(58px, 16vw, 68px); }
  .spin-button-label { font-size: 7px; letter-spacing: .1em; }
  .auto-control { justify-self: stretch; width: 100%; min-width: 0; gap: 3px; }
  .secondary-action { min-height: 35px; padding: 5px 3px; font-size: clamp(7px, 1.9vw, 8px); letter-spacing: .015em; white-space: nowrap; }
  .auto-icon { font-size: 14px; }
  .control-bottomline { width: 100%; gap: 5px; margin-top: 6px; padding-top: 6px; }
  .utility-button { min-height: 32px; min-width: 0; gap: 4px; padding: 4px 3px; font-size: clamp(6px, 1.7vw, 7px); letter-spacing: .01em; }
  .utility-icon { font-size: 11px; }
  .toggle-indicator { width: 18px; height: 11px; }
  .toggle-indicator::after { width: 5px; height: 5px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(6px); }
  .toast { bottom: calc(180px + env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .app-shell { padding-inline: 6px; }
  .reel-frame { width: min(100%, calc(100vw - 12px), calc((100svh - 290px) * 2.0949)); }
  .controls-panel { padding-inline: 8px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 5px; }
  .spin-control { width: 56px; }
  #spinButton.spin-button { width: 53px; height: 53px; flex-basis: 53px; }
  .bet-stepper { gap: 2px; }
  .stepper-button { width: 24px; height: 27px; flex-basis: 24px; }
  .bet-amount-wrap strong { font-size: 18px; }
  .bet-presets { gap: 2px; }
  .bet-presets button { font-size: 6px; }
  .secondary-action { font-size: 6.8px; }
  .utility-button { gap: 3px; font-size: 6px; }
  .utility-icon { font-size: 10px; }
  .toggle-indicator { width: 15px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(4px); }
  .bonus-info-copy span { font-size: 7px; }
}

@media (max-width: 350px) {
  .control-topline { grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr); gap: 4px; }
  .spin-control { width: 50px; }
  #spinButton.spin-button { width: 47px; height: 47px; flex-basis: 47px; }
  .bet-amount-wrap strong { font-size: 16px; }
  .secondary-action { font-size: 6px; }
  .utility-button { font-size: 5.7px; }
}


@media (max-width: 820px) and (max-height: 520px) {
  .game-main { padding-bottom: max(125px, calc(115px + env(safe-area-inset-bottom))); }
  .reel-frame { width: min(100%, calc(100vw - 16px), calc((100svh - 255px) * 2.0949)); }
  .bonus-info-strip { min-height: 32px; padding-block: 4px; }
  .bonus-info-symbol { display: none; }
  .controls-panel { padding: 3px 8px max(4px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding: 0 0 3px; }
  .status-value > span { font-size: 5px; }
  .status-value strong { font-size: 10px; }
  .status-value small { font-size: 6px; }
  .control-topline { margin-top: 1px; gap: 6px; }
  .control-caption { margin-bottom: 2px; font-size: 6px; }
  .bet-presets { display: none; }
  .stepper-button { width: 25px; height: 25px; flex-basis: 25px; }
  .bet-amount-wrap strong { font-size: 18px; }
  .spin-control { width: 48px; }
  #spinButton.spin-button { width: 42px; height: 42px; flex-basis: 42px; }
  .spin-button-label { font-size: 5.5px; }
  .secondary-action { min-height: 27px; padding-block: 3px; font-size: 6.5px; }
  .control-bottomline { margin-top: 2px; padding-top: 2px; }
  .utility-button { min-height: 22px; font-size: 6px; }
  .utility-icon { font-size: 9px; }
  .toast { bottom: calc(115px + env(safe-area-inset-bottom)); }
}

/* Wide landscape displays keep the controls compact enough for the game to remain visible. */
@media (min-width: 821px) and (max-height: 560px) {
  .topbar { min-height: 47px; }
  .game-main { padding-bottom: 135px; }
  .brand-logo { width: 108px; }
  .reel-frame { width: min(100%, 1400px, calc((100svh - 235px) * 2.0949)); }
  .bonus-info-strip { min-height: 31px; padding-block: 3px; }
  .bonus-info-symbol { display: none; }
  .bonus-info-copy strong { font-size: 6px; }
  .bonus-info-copy span { font-size: 7px; }
  .controls-panel { padding: 3px 18px max(3px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding: 0 0 2px; }
  .status-value { gap: 1px 4px; }
  .status-value > span { font-size: 5px; letter-spacing: .08em; }
  .status-value strong { font-size: 10px; }
  .status-value small { font-size: 6px; }
  .control-topline { margin-top: 1px; }
  .control-caption { margin-bottom: 2px; font-size: 6px; }
  .bet-presets { display: none; }
  .stepper-button { width: 28px; height: 28px; flex-basis: 28px; font-size: 18px; }
  .bet-amount-wrap { min-width: 58px; }
  .bet-amount-wrap strong { font-size: 22px; }
  #spinButton.spin-button { width: 42px; height: 42px; flex-basis: 42px; }
  .spin-button-label { margin-top: 0; font-size: 5px; }
  .secondary-action { min-height: 27px; padding: 3px 8px; font-size: 8px; }
  .control-bottomline { margin-top: 2px; padding-top: 2px; }
  .utility-button { min-height: 22px; padding-block: 2px; font-size: 7px; }
  .utility-icon { font-size: 10px; }
  .toast { bottom: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .controls-panel::before { box-shadow: none; }
}


/* ===== Consolidated source: styles-premium.css ===== */
/* PHOENIX SLOTS 1.8.0 — premium responsive HUD, Phoenix Journey and result feedback. */
:root {
  --premium-gold: #ffd783;
  --premium-gold-hot: #ffb34d;
  --premium-ember: #ff693d;
  --premium-cream: #fff5dc;
  --premium-muted: #dbc29a;
  --premium-wine: rgba(20, 4, 13, .975);
}

html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { background-color: #170711; }
.app-shell { width: 100%; max-width: 2048px; margin-inline: auto; padding-inline: clamp(8px, 2.2vw, 38px); }
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  width: 100%;
  min-height: clamp(76px, 8vh, 104px);
  margin-inline: auto;
}
.brand { min-width: 0; }
.brand-logo { width: clamp(144px, 11vw, 194px); max-width: 100%; filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .45)); }
.brand-caption { display: block; margin-top: -7px; color: rgba(255, 222, 166, .78); font-size: 8px; font-weight: 900; letter-spacing: .29em; text-align: center; }
.wallet-block {
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 7px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 207, 118, .38);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(43, 9, 23, .82), rgba(25, 5, 15, .7));
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 244, 207, .08);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
.wallet-label { grid-column: 1 / -1; color: #e9c58b; font-size: 9px; font-weight: 950; letter-spacing: .19em; }
.wallet-block strong { color: #fff2ca; font-family: var(--font-display); font-size: clamp(23px, 1.9vw, 31px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.credit-unit { color: var(--premium-gold); font-size: 11px; font-weight: 950; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.icon-button { width: 40px; height: 40px; border: 1px solid rgba(255, 211, 123, .45); border-radius: 12px; background: linear-gradient(145deg, rgba(94, 34, 30, .74), rgba(32, 7, 19, .88)); box-shadow: 0 4px 13px rgba(0,0,0,.22), inset 0 1px rgba(255,240,190,.1); }
.icon-button:hover:not(:disabled) { border-color: #ffe8ad; color: #fff5d8; background: linear-gradient(145deg, rgba(141, 57, 35, .9), rgba(57, 12, 23, .95)); }
.lang-button { width: auto; min-width: 42px; padding-inline: 10px; color: #ffedc3; font-size: 10px; font-weight: 950; }

.game-main { width: 100%; padding: 0 0 270px; }
.game-layout, .main-column, .machine-shell { width: 100%; min-width: 0; max-width: none; }
.game-layout { display: block; }
.main-column { display: flex; align-items: center; }
.machine-shell { display: flex; flex-direction: column; align-items: center; }
.machine-header {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 1580px);
  min-height: 29px;
  margin: 0 auto 6px;
  padding: 0 clamp(5px, 1.2vw, 18px);
  pointer-events: auto;
}
.machine-caption { display: flex; align-items: center; gap: 8px; min-width: 0; color: rgba(255, 224, 173, .85); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-shadow: 0 2px 9px #14040d; white-space: nowrap; }
.mini-sun { color: #ffd77d; font-size: 13px; text-shadow: 0 0 9px rgba(255, 161, 53, .5); }
.machine-separator { color: rgba(255, 202, 114, .48); }
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  min-height: 28px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 211, 126, .58);
  border-radius: 999px;
  color: #fff1cb;
  background: linear-gradient(100deg, rgba(31, 6, 16, .84), rgba(81, 25, 20, .82));
  box-shadow: 0 4px 14px rgba(0,0,0,.2), inset 0 1px rgba(255,245,215,.08);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .09em;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}
.status-indicator { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #8af1a4; box-shadow: 0 0 10px rgba(91, 255, 137, .7); }
.status-chip.is-busy .status-indicator { background: #ffae55; box-shadow: 0 0 10px rgba(255, 125, 43, .9); }
.reel-stage { position: relative; isolation: isolate; width: 100%; min-width: 0; overflow: visible; }
.reel-frame { width: min(100%, 1540px, calc((100svh - 390px) * 2.0949)); max-width: none; margin-inline: auto; }
.stage-glow { pointer-events: none; }
.bonus-info-strip {
  display: grid;
  grid-template-columns: 31px minmax(190px, 1fr) minmax(290px, .82fr) auto;
  align-items: center;
  gap: 14px;
  width: min(94%, 1120px);
  min-height: 68px;
  margin: 4px auto 10px;
  padding: 10px 17px;
  border: 1px solid rgba(255, 204, 112, .6);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 0 50%, rgba(255, 126, 39, .12), transparent 34%),
    linear-gradient(105deg, rgba(25, 5, 17, .93), rgba(62, 15, 20, .9) 55%, rgba(24, 5, 16, .94));
  box-shadow: 0 9px 28px rgba(6, 1, 7, .28), inset 0 1px rgba(255, 241, 198, .09);
  backdrop-filter: blur(12px) saturate(1.15);
}
.bonus-info-symbol { width: 29px; height: 29px; flex-basis: 29px; border-color: rgba(255, 221, 146, .84); box-shadow: 0 0 17px rgba(255, 116, 39, .3); font-size: 15px; }
.bonus-info-copy { min-width: 0; gap: 4px; }
.bonus-info-copy strong { color: #ffe0a0; font-size: 10px; font-weight: 1000; letter-spacing: .15em; line-height: 1.2; }
.bonus-info-copy span { color: #fff2d9; font-size: 12px; font-weight: 650; line-height: 1.4; }
.phoenix-meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.phoenix-meter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #e5c48c; font-size: 8px; font-weight: 950; letter-spacing: .13em; }
.phoenix-meter-head strong { color: #fff1c7; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .07em; white-space: nowrap; }
.phoenix-meter-track { position: relative; height: 7px; overflow: hidden; border: 1px solid rgba(255, 205, 112, .35); border-radius: 999px; background: rgba(8, 2, 8, .68); box-shadow: inset 0 2px 4px rgba(0,0,0,.42); }
.phoenix-meter-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9c3c23, #ff8a38 55%, #ffe08e); box-shadow: 0 0 11px rgba(255, 133, 41, .68); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.phoenix-meter small { color: rgba(255, 225, 181, .78); font-size: 8px; line-height: 1.25; }
.free-spin-counter { padding: 8px 11px; border-color: rgba(255, 224, 151, .9); box-shadow: 0 3px 14px rgba(0,0,0,.25), 0 0 13px rgba(255, 162, 54, .15); font-size: 10px; }

/* The bottom dock becomes a real provider-style HUD on desktops rather than a tiny strip. */
.controls-panel {
  position: fixed !important;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 11px max(22px, calc((100vw - 1700px) / 2)) max(12px, env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid rgba(255, 209, 124, .72);
  border-radius: 23px 23px 0 0;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 151, 62, .16), transparent 46%),
    linear-gradient(105deg, rgba(16, 3, 12, .99), rgba(43, 9, 18, .985) 48%, rgba(17, 3, 12, .995));
  box-shadow: 0 -20px 52px rgba(8, 2, 7, .55), inset 0 1px rgba(255, 242, 199, .12);
  backdrop-filter: blur(24px) saturate(1.2);
}
.controls-panel::before { width: min(280px, 40vw); height: 2px; box-shadow: 0 0 20px rgba(255, 142, 57, .72); }
.provider-statusbar { width: min(100%, 1500px); margin-inline: auto; padding: 3px 0 10px; border-bottom-color: rgba(255, 211, 126, .34); }
.status-value { padding-inline: clamp(12px, 2.3vw, 32px); gap: 3px 8px; }
.status-value > span { color: #e8c999; font-size: 9px; letter-spacing: .18em; }
.status-value strong { color: #fff5d6; font-size: clamp(18px, 1.65vw, 25px); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.status-value small { color: #ffcf76; font-size: 10px; }
.control-topline { grid-template-columns: minmax(0, 1fr) clamp(92px, 8vw, 112px) minmax(0, 1fr); gap: clamp(38px, 7vw, 112px); width: min(100%, 1450px); margin-top: 8px; }
.bet-control { padding: 1px 0; }
.control-caption { margin-bottom: 7px; color: #ffe0a4; font-size: 10px; letter-spacing: .16em; }
.bet-stepper { gap: 12px; }
.stepper-button { width: 44px; height: 44px; flex-basis: 44px; border-color: rgba(255, 221, 153, .92); font-size: 25px; }
.bet-amount-wrap { min-width: 106px; }
.bet-amount-wrap strong { font-size: clamp(36px, 2.8vw, 48px); }
.bet-amount-wrap small { font-size: 12px; }
.bet-presets { width: min(100%, 340px); gap: 8px; margin-top: 9px; }
.bet-presets button { min-width: 44px; padding: 7px 11px; border-color: rgba(255, 215, 133, .63); font-size: 11px; }
.spin-control { width: clamp(92px, 8vw, 112px); gap: 1px; }
#spinButton.spin-button { width: clamp(84px, 7.4vw, 104px); height: clamp(84px, 7.4vw, 104px); flex-basis: clamp(84px, 7.4vw, 104px); }
#spinButton .spin-button-art { filter: drop-shadow(0 0 13px rgba(255, 123, 32, .42)); }
.spin-button-label { margin-top: 3px; color: #ffe9b8; font-size: 10px; letter-spacing: .17em; }
.auto-control { width: min(100%, 285px); }
.secondary-action { min-height: 49px; padding: 9px 16px; border-radius: 13px; font-size: 11px; letter-spacing: .1em; }
.auto-icon { font-size: 19px; }
.control-bottomline { width: min(100%, 1450px); gap: 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255, 211, 126, .28); }
.utility-button { flex: 1 1 0; min-height: 42px; padding: 6px 12px; gap: 8px; border: 1px solid rgba(255, 209, 122, .38); border-radius: 10px; color: #fff3d8; background: linear-gradient(180deg, rgba(75, 17, 24, .84), rgba(30, 5, 15, .91)); box-shadow: inset 0 1px rgba(255, 240, 194, .05); font-size: 10px; letter-spacing: .06em; }
.utility-icon { color: #ffd37d; font-size: 16px; }
.utility-arrow { color: #ffcf76; }
.utility-button:hover:not(:disabled), .utility-button.is-on { color: #311007; border-color: #fff0b8; background: linear-gradient(180deg, #ffebb0, #eda948); box-shadow: 0 0 18px rgba(255, 173, 62, .18); }
.utility-button:hover .utility-icon, .utility-button.is-on .utility-icon { color: #7e2c16; }
.toast { bottom: max(292px, calc(278px + env(safe-area-inset-bottom))); }

/* FX are tied to actual win/bonus state; no perpetual flashing or blocking hit targets. */
.celebration-layer { position: absolute; z-index: 9; inset: 0; overflow: visible; pointer-events: none; }
.celebration-spark { position: absolute; top: 50%; left: 50%; width: var(--spark-size); height: calc(var(--spark-size) * 1.8); border-radius: 2px; opacity: 0; background: linear-gradient(180deg, #fff4bd, #ff9b42 70%, rgba(255, 85, 31, .15)); box-shadow: 0 0 12px rgba(255, 187, 79, .7); transform-origin: center center; animation: phoenixSparkBurst 1.1s cubic-bezier(.12,.62,.18,1) var(--spark-delay) both; }
@keyframes phoenixSparkBurst { 0% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(0) scale(.2); } 16% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(calc(-1 * var(--spark-distance))) scale(.65) rotate(35deg); } }
.reel-stage::after { content: ""; position: absolute; z-index: 8; inset: 4% 7%; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255, 236, 160, .34), rgba(255, 122, 35, .16) 36%, transparent 72%); mix-blend-mode: screen; }
.reel-stage.feedback-win::after { animation: winPulse .95s ease-out both; }
.reel-stage.feedback-big-win::after { background: radial-gradient(ellipse at center, rgba(255, 247, 187, .62), rgba(255, 154, 36, .26) 38%, transparent 75%); animation: winPulse 1.3s ease-out both; }
.reel-stage.feedback-bonus::after, .reel-stage.feedback-meter::after { background: radial-gradient(ellipse at center, rgba(255, 237, 163, .52), rgba(255, 92, 35, .24) 42%, transparent 75%); animation: phoenixAwakenFlash 1.25s ease-out both; }
.reel-stage.feedback-loss::after { background: radial-gradient(ellipse at center, rgba(131, 68, 67, .18), transparent 70%); animation: lossFade .55s ease-out both; }
@keyframes winPulse { 0% { opacity: 0; transform: scale(.7); } 24% { opacity: .95; } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes phoenixAwakenFlash { 0% { opacity: 0; transform: scale(.55) rotate(-8deg); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.22) rotate(7deg); } }
@keyframes lossFade { 0% { opacity: 0; } 24% { opacity: .7; } 100% { opacity: 0; } }
.tile.is-winning { box-shadow: inset 0 0 0 1px rgba(255, 235, 159, .95), inset 0 0 24px rgba(255, 130, 26, .33), 0 0 19px rgba(255, 130, 26, .28); }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 232, 147, .98)) drop-shadow(0 0 18px rgba(255, 88, 22, .62)); }

@media (min-width: 821px) and (max-height: 760px) {
  .topbar { min-height: 59px; }
  .brand-logo { width: clamp(118px, 9vw, 155px); }
  .brand-caption { display: none; }
  .wallet-block { padding: 7px 14px; }
  .wallet-block strong { font-size: clamp(18px, 1.8vw, 23px); }
  .machine-header { min-height: 23px; margin-bottom: 2px; }
  .machine-caption { font-size: 7px; }
  .status-chip { min-height: 23px; padding: 4px 9px; font-size: 7px; }
  .reel-frame { width: min(100%, 1400px, calc((100svh - 340px) * 2.0949)); }
  .bonus-info-strip { min-height: 52px; margin-block: 2px 7px; padding: 7px 12px; }
  .bonus-info-copy strong { font-size: 8px; }
  .bonus-info-copy span { font-size: 10px; }
  .phoenix-meter small { font-size: 7px; }
  .controls-panel { padding-top: 7px; padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding-bottom: 6px; }
  .status-value > span { font-size: 7px; }
  .status-value strong { font-size: 16px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); gap: clamp(25px, 5vw, 78px); margin-top: 4px; }
  .control-caption { margin-bottom: 4px; font-size: 8px; }
  .stepper-button { width: 35px; height: 35px; flex-basis: 35px; }
  .bet-amount-wrap { min-width: 82px; }
  .bet-amount-wrap strong { font-size: 32px; }
  .bet-presets { margin-top: 6px; }
  .bet-presets button { min-width: 36px; padding: 5px 8px; font-size: 9px; }
  .spin-control { width: 78px; }
  #spinButton.spin-button { width: 72px; height: 72px; flex-basis: 72px; }
  .spin-button-label { font-size: 8px; }
  .auto-control { width: min(100%, 230px); }
  .secondary-action { min-height: 37px; padding: 6px 10px; font-size: 9px; }
  .control-bottomline { margin-top: 6px; padding-top: 6px; }
  .utility-button { min-height: 32px; padding: 4px 8px; font-size: 8px; }
  .toast { bottom: max(226px, calc(215px + env(safe-area-inset-bottom))); }
}

/* A compact but legible phone HUD: all buttons fit above the device safe area. */
@media (max-width: 820px) {
  .app-shell { padding-inline: 5px; }
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand wallet actions";
    align-items: center;
    gap: 5px;
    min-height: 0;
    padding: 5px 0 7px;
  }
  .brand { grid-area: brand; display: flex; align-items: center; }
  .brand-logo { width: clamp(64px, 20vw, 88px); max-height: 41px; object-fit: contain; }
  .brand-caption { display: none; }
  .wallet-block {
    grid-area: wallet;
    justify-self: center;
    min-width: 0;
    padding: 3px 5px;
    column-gap: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }
  .wallet-label { font-size: 6px; letter-spacing: .15em; }
  .wallet-block strong { font-size: clamp(12px, 3.6vw, 16px); }
  .credit-unit { font-size: 7px; }
  .top-actions { grid-area: actions; display: flex; justify-self: end; gap: 3px; }
  .icon-button { width: clamp(25px, 7.4vw, 30px); height: clamp(25px, 7.4vw, 30px); border-radius: 8px; font-size: 12px; }
  .lang-button { width: clamp(27px, 8vw, 32px); min-width: 0; padding-inline: 3px; font-size: 7px; }
  .game-main { padding: 0 0 max(205px, calc(196px + env(safe-area-inset-bottom))); }
  .machine-header { position: relative; inset: auto; display: flex; width: 100%; min-height: 24px; margin: 0 auto 2px; padding-inline: 5px; gap: 5px; }
  .machine-caption { gap: 4px; font-size: clamp(5px, 1.55vw, 7px); letter-spacing: .06em; }
  .mini-sun { font-size: 10px; }
  .status-chip { flex: 0 1 auto; max-width: 49%; min-height: 22px; padding: 4px 6px; gap: 4px; font-size: clamp(5px, 1.55vw, 7px); letter-spacing: .03em; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  .status-indicator { width: 5px; height: 5px; flex-basis: 5px; }
  .reel-stage { width: 100%; max-width: 100%; }
  .reel-frame { width: min(100%, calc(100vw - 8px), calc((100svh - 300px) * 2.0949)); max-width: 100%; }
  .slot-grid { max-width: 100%; }
  .bonus-info-strip {
    grid-template-columns: 23px minmax(0, 1fr) auto;
    grid-template-areas: "icon copy counter" "meter meter meter";
    width: min(100%, 720px);
    min-width: 0;
    min-height: 0;
    margin: 3px auto 7px;
    padding: 8px 9px 9px;
    gap: 6px 8px;
    border-radius: 12px;
  }
  .bonus-info-symbol { grid-area: icon; width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
  .bonus-info-copy { grid-area: copy; min-width: 0; gap: 2px; }
  .bonus-info-copy strong { font-size: clamp(7px, 1.9vw, 9px); letter-spacing: .08em; }
  .bonus-info-copy span { font-size: clamp(7px, 1.9vw, 9px); line-height: 1.28; }
  .phoenix-meter { grid-area: meter; gap: 4px; margin-top: 1px; }
  .phoenix-meter-head { font-size: 6px; letter-spacing: .1em; }
  .phoenix-meter-head strong { font-size: 8px; }
  .phoenix-meter-track { height: 5px; }
  .phoenix-meter small { font-size: 6.5px; }
  .free-spin-counter { grid-area: counter; align-self: center; padding: 5px 6px; font-size: 7px; }
  .controls-panel { padding: 7px 9px max(8px, env(safe-area-inset-bottom)); border-radius: 15px 15px 0 0; }
  .controls-panel::before { width: min(180px, 45vw); }
  .provider-statusbar { width: 100%; padding: 1px 0 6px; }
  .status-value { gap: 2px 3px; padding-inline: 3px; }
  .status-value > span { font-size: 6px; letter-spacing: .09em; }
  .status-value strong { font-size: clamp(11px, 3.3vw, 14px); }
  .status-value small { font-size: 7px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) clamp(56px, 16vw, 68px) minmax(0, 1fr); gap: 6px; width: 100%; margin-top: 4px; }
  .bet-control { justify-self: stretch; min-width: 0; }
  .control-caption { margin-bottom: 4px; font-size: clamp(6px, 1.7vw, 7px); letter-spacing: .04em; white-space: normal; }
  .bet-stepper { justify-content: center; gap: 3px; }
  .stepper-button { width: clamp(23px, 6.4vw, 28px); height: 28px; flex-basis: clamp(23px, 6.4vw, 28px); font-size: 17px; }
  .bet-amount-wrap { min-width: 0; flex: 1 1 auto; gap: 2px; }
  .bet-amount-wrap strong { font-size: clamp(18px, 5vw, 23px); }
  .bet-amount-wrap small { font-size: 7px; }
  .bet-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 3px; margin-top: 5px; }
  .bet-presets button { min-width: 0; padding: 4px 0; font-size: clamp(6px, 1.7vw, 7px); }
  .spin-control { width: clamp(56px, 16vw, 68px); gap: 0; }
  #spinButton.spin-button { width: clamp(54px, 15.5vw, 66px); height: clamp(54px, 15.5vw, 66px); flex-basis: clamp(54px, 15.5vw, 66px); }
  .spin-button-label { margin-top: 2px; font-size: clamp(6px, 1.6vw, 7px); letter-spacing: .08em; }
  .auto-control { justify-self: stretch; width: 100%; min-width: 0; }
  .secondary-action { min-height: 34px; padding: 4px 3px; border-radius: 9px; font-size: clamp(6px, 1.8vw, 8px); letter-spacing: 0; white-space: nowrap; }
  .auto-icon { font-size: 13px; }
  .control-bottomline { width: 100%; gap: 5px; margin-top: 6px; padding-top: 6px; }
  .utility-button { min-width: 0; min-height: 30px; gap: 4px; padding: 4px 2px; border-radius: 8px; font-size: clamp(5.5px, 1.7vw, 7px); letter-spacing: 0; white-space: normal; line-height: 1.15; }
  .utility-icon { font-size: 11px; }
  .utility-arrow { display: none; }
  .toggle-indicator { width: 17px; height: 10px; }
  .toggle-indicator::after { width: 4px; height: 4px; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(6px); }
  .toast { bottom: calc(215px + env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
  .app-shell { padding-inline: 4px; }
  .topbar { gap: 3px; }
  .brand-logo { width: clamp(61px, 19vw, 74px); }
  .wallet-block strong { font-size: clamp(11px, 3.5vw, 14px); }
  .wallet-label { font-size: 5.5px; }
  .top-actions { gap: 2px; }
  .icon-button { width: 25px; height: 25px; }
  .lang-button { width: 26px; }
  .machine-caption { gap: 3px; font-size: 5px; }
  .status-chip { max-width: 50%; padding-inline: 5px; font-size: 5px; }
  .reel-frame { width: min(100%, calc(100vw - 6px), calc((100svh - 286px) * 2.0949)); }
  .controls-panel { padding-inline: 7px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 4px; }
  .spin-control { width: 54px; }
  #spinButton.spin-button { width: 52px; height: 52px; flex-basis: 52px; }
  .bet-stepper { gap: 2px; }
  .stepper-button { width: 22px; height: 26px; flex-basis: 22px; }
  .bet-amount-wrap strong { font-size: 17px; }
  .bet-presets { gap: 2px; }
  .bet-presets button { padding-inline: 0; font-size: 6px; }
  .secondary-action { font-size: 6px; }
  .utility-button { font-size: 5.6px; gap: 3px; }
  .utility-icon { font-size: 10px; }
}
@media (max-width: 350px) {
  .wallet-block strong { font-size: 10px; }
  .credit-unit { font-size: 6px; }
  .top-actions { gap: 1px; }
  .icon-button { width: 23px; height: 24px; }
  .lang-button { width: 23px; }
  .machine-caption .machine-separator, .machine-caption [data-i18n="linesLabel"] { display: none; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 3px; }
  .spin-control { width: 48px; }
  #spinButton.spin-button { width: 46px; height: 46px; flex-basis: 46px; }
  .bet-amount-wrap strong { font-size: 15px; }
  .utility-button { font-size: 5.2px; }
}
@media (max-width: 820px) and (max-height: 520px) {
  .topbar { padding-block: 3px; }
  .brand-logo { max-height: 30px; }
  .wallet-block { padding-block: 0; }
  .game-main { padding-bottom: max(146px, calc(138px + env(safe-area-inset-bottom))); }
  .reel-frame { width: min(100%, calc(100vw - 8px), calc((100svh - 225px) * 2.0949)); }
  .bonus-info-strip { grid-template-columns: 20px minmax(0, 1fr) auto; margin-block: 2px 4px; padding: 5px 7px; }
  .phoenix-meter { grid-area: meter; }
  .phoenix-meter small { display: none; }
  .controls-panel { padding: 3px 7px max(3px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding-bottom: 3px; }
  .status-value > span { font-size: 5px; }
  .status-value strong { font-size: 10px; }
  .control-topline { margin-top: 1px; }
  .bet-presets { display: none; }
  .control-caption { margin-bottom: 1px; font-size: 5.5px; }
  .stepper-button { width: 24px; height: 24px; flex-basis: 24px; }
  .bet-amount-wrap strong { font-size: 17px; }
  #spinButton.spin-button { width: 42px; height: 42px; flex-basis: 42px; }
  .spin-button-label { font-size: 5px; }
  .secondary-action { min-height: 26px; font-size: 6px; }
  .control-bottomline { margin-top: 2px; padding-top: 2px; }
  .utility-button { min-height: 22px; font-size: 5.5px; }
  .toast { bottom: calc(135px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Polished in-reel result callouts; the older static result banner remains hidden. */
.outcome-callout {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: min(88%, 520px);
  padding: 13px clamp(18px, 3vw, 34px) 14px;
  border: 1px solid rgba(255, 224, 149, .92);
  border-radius: 16px;
  color: #fff3d3;
  background: linear-gradient(110deg, rgba(28, 5, 16, .95), rgba(87, 22, 21, .93) 52%, rgba(23, 4, 15, .97));
  box-shadow: 0 14px 45px rgba(3, 0, 4, .5), 0 0 28px rgba(255, 143, 40, .23), inset 0 1px rgba(255, 244, 209, .13);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -43%) scale(.88);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.85,.3,1);
  backdrop-filter: blur(10px);
}
.outcome-callout.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.outcome-callout > span { color: #ffd28a; font-size: 9px; font-weight: 950; letter-spacing: .2em; line-height: 1.3; }
.outcome-callout > strong { color: #fff4c6; font-family: var(--font-display); font-size: clamp(22px, 3.5vw, 42px); font-weight: 900; line-height: 1.06; text-shadow: 0 0 22px rgba(255, 164, 50, .48); }
.outcome-callout > small { color: rgba(255, 235, 202, .88); font-size: 10px; line-height: 1.35; }
.outcome-callout.outcome-big-win { border-color: #fff0af; box-shadow: 0 14px 55px rgba(3,0,4,.55), 0 0 42px rgba(255, 186, 48, .4), inset 0 1px rgba(255, 250, 225, .19); }
.outcome-callout.outcome-big-win > strong { color: #fff1a0; font-size: clamp(26px, 4.2vw, 50px); animation: bigWinTitleGlow 1.1s ease-in-out infinite alternate; }
.outcome-callout.outcome-loss { border-color: rgba(226, 178, 147, .7); background: linear-gradient(110deg, rgba(23, 7, 16, .95), rgba(61, 21, 28, .93), rgba(23, 4, 15, .97)); }
.outcome-callout.outcome-loss > span { color: #cfae9a; }
.outcome-callout.outcome-loss > strong { color: #f5ddc8; text-shadow: 0 0 16px rgba(167, 92, 77, .23); }
@keyframes bigWinTitleGlow { from { filter: brightness(1); text-shadow: 0 0 12px rgba(255, 164, 50, .32); } to { filter: brightness(1.18); text-shadow: 0 0 26px rgba(255, 197, 62, .82); } }

/* Explicit grid-item positioning avoids legacy absolute positioning from older stylesheets. */
.top-actions, .wallet-block { position: static; }
.wallet-block { justify-self: center; }

/* Keep the bottom deck generous, but reclaim enough height for the reel above it. */
@media (min-width: 821px) {
  .reel-frame { width: min(100%, 1760px, calc((100svh - 410px) * 2.0949)); }
  .controls-panel { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding-bottom: 5px; }
  .status-value strong { font-size: clamp(18px, 1.5vw, 22px); }
  .control-topline { grid-template-columns: minmax(0, 1fr) clamp(92px, 7vw, 100px) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); margin-top: 6px; }
  .stepper-button { width: 40px; height: 40px; flex-basis: 40px; }
  .bet-amount-wrap strong { font-size: clamp(35px, 2.6vw, 43px); }
  .bet-presets { margin-top: 7px; }
  .bet-presets button { padding-block: 6px; }
  .spin-control { width: clamp(92px, 7vw, 100px); }
  #spinButton.spin-button { width: clamp(82px, 6.2vw, 92px); height: clamp(82px, 6.2vw, 92px); flex-basis: clamp(82px, 6.2vw, 92px); }
  .spin-button-label { font-size: 9px; }
  .secondary-action { min-height: 43px; }
  .control-bottomline { margin-top: 7px; padding-top: 7px; }
  .utility-button { min-height: 38px; }
  .toast { bottom: max(252px, calc(238px + env(safe-area-inset-bottom))); }
}
@media (min-width: 821px) and (max-height: 760px) {
  .reel-frame { width: min(100%, 1540px, calc((100svh - 330px) * 2.0949)); }
}

@media (max-width: 820px) {
  .topbar { grid-template-areas: "brand wallet actions"; }
  .brand { justify-self: start; }
  .wallet-block { justify-self: center; }
  .top-actions { justify-self: end; align-self: center; }
  .outcome-callout { gap: 3px; max-width: 92%; padding: 9px 14px 10px; border-radius: 12px; }
  .outcome-callout > span { font-size: clamp(6px, 1.65vw, 8px); letter-spacing: .12em; }
  .outcome-callout > strong { font-size: clamp(18px, 5vw, 28px); }
  .outcome-callout.outcome-big-win > strong { font-size: clamp(21px, 5.7vw, 32px); }
  .outcome-callout > small { font-size: clamp(7px, 1.9vw, 9px); }
}
@media (max-width: 350px) {
  .outcome-callout { max-width: 94%; padding-inline: 9px; }
  .outcome-callout > strong { font-size: 17px; }
  .outcome-callout > small { font-size: 6.5px; }
}
@media (min-width: 821px) {
  .topbar { min-height: clamp(68px, 8vh, 92px); }
  .machine-header { min-height: 26px; margin-bottom: 4px; }
  .bonus-info-strip { min-height: 64px; margin-top: 2px; margin-bottom: 5px; }
  .reel-frame { width: min(100%, 1900px, calc((100svh - 410px) * 2.0949)); }
}
.bonus-info-strip.without-meter { grid-template-columns: 31px minmax(190px, 1fr) auto; }
@media (max-width: 820px) {
  .bonus-info-strip.without-meter { grid-template-columns: 23px minmax(0, 1fr) auto; }
}
@media (min-width: 821px) {
  .wallet-block { padding: 13px 24px; }
  .wallet-block strong { font-size: clamp(24px, 2vw, 31px); }
  .wallet-label { font-size: 10px; }
  .top-actions { gap: 9px; }
  .icon-button { width: 44px; height: 44px; font-size: 15px; }
  .lang-button { min-width: 46px; }
  .status-chip { min-height: 31px; padding: 7px 14px; font-size: clamp(7px, .65vw, 9px); }
  .reel-frame { width: min(100%, 1900px, calc((100svh - 442px) * 2.0949)); }
  .controls-panel { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .control-topline { grid-template-columns: minmax(0, 1fr) clamp(104px, 7.6vw, 116px) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); margin-top: 7px; }
  .stepper-button { width: 42px; height: 42px; flex-basis: 42px; }
  .spin-control { width: clamp(104px, 7.6vw, 116px); }
  #spinButton.spin-button { width: clamp(96px, 6.9vw, 104px); height: clamp(96px, 6.9vw, 104px); flex-basis: clamp(96px, 6.9vw, 104px); }
  .secondary-action { min-height: 46px; font-size: 11px; }
  .control-bottomline { margin-top: 8px; padding-top: 8px; }
  .utility-button { min-height: 40px; font-size: 10px; }
  .toast { bottom: max(268px, calc(254px + env(safe-area-inset-bottom))); }
}
/* Short desktop/laptop screens get a space-efficient deck so the result stage stays clear. */
@media (min-width: 821px) and (max-height: 880px) {
  .topbar { min-height: 59px; }
  .brand-logo { width: clamp(118px, 9vw, 155px); }
  .brand-caption { display: none; }
  .wallet-block { padding: 7px 14px; }
  .wallet-block strong { font-size: clamp(18px, 1.8vw, 23px); }
  .wallet-label { font-size: 8px; }
  .top-actions { gap: 7px; }
  .icon-button { width: 36px; height: 36px; font-size: 13px; }
  .lang-button { min-width: 40px; }
  .machine-header { min-height: 23px; margin-bottom: 2px; }
  .machine-caption { font-size: 7px; }
  .status-chip { min-height: 23px; padding: 4px 9px; font-size: 7px; }
  .reel-frame { width: min(100%, 1540px, calc((100svh - 330px) * 2.0949)); }
  .bonus-info-strip { min-height: 52px; margin-top: 2px; margin-bottom: 5px; padding: 7px 12px; }
  .bonus-info-copy strong { font-size: 8px; }
  .bonus-info-copy span { font-size: 10px; }
  .phoenix-meter small { font-size: 7px; }
  .controls-panel { padding-top: 7px; padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .provider-statusbar { padding-bottom: 5px; }
  .status-value > span { font-size: 7px; }
  .status-value strong { font-size: 16px; }
  .status-value small { font-size: 8px; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); gap: clamp(25px, 5vw, 78px); margin-top: 4px; }
  .control-caption { margin-bottom: 4px; font-size: 8px; }
  .stepper-button { width: 35px; height: 35px; flex-basis: 35px; }
  .bet-amount-wrap { min-width: 82px; }
  .bet-amount-wrap strong { font-size: 32px; }
  .bet-presets { margin-top: 6px; }
  .bet-presets button { min-width: 36px; padding: 5px 8px; font-size: 9px; }
  .spin-control { width: 78px; }
  #spinButton.spin-button { width: 72px; height: 72px; flex-basis: 72px; }
  .spin-button-label { font-size: 8px; }
  .auto-control { width: min(100%, 230px); }
  .secondary-action { min-height: 37px; padding: 6px 10px; font-size: 9px; }
  .control-bottomline { margin-top: 6px; padding-top: 6px; }
  .utility-button { min-height: 32px; padding: 4px 8px; font-size: 8px; }
  .toast { bottom: max(226px, calc(215px + env(safe-area-inset-bottom))); }
}


/* ===== Consolidated source: styles-ultimate.css ===== */
/* PHOENIX SLOTS v1.9.0 — finishing pass: bolder reel scale, illuminated header, flowing outcomes. */
:root {
  --phoenix-gold: #ffe3a0;
  --phoenix-hot: #ffb84f;
  --phoenix-flame: #ff6338;
  --phoenix-cyan: #88f2e1;
  --phoenix-wine: rgba(19, 4, 14, .97);
}

/* Stronger hierarchy: title and line count read as a proper machine header; READY is no longer floating over the art. */
.machine-header {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: min(100%, 1720px);
  min-height: 46px;
  margin: 2px auto 8px;
  padding: 7px clamp(12px, 1.5vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(255, 210, 124, .56);
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255, 132, 51, .19), transparent 48%),
    linear-gradient(100deg, rgba(19, 4, 15, .88), rgba(67, 16, 19, .79) 52%, rgba(20, 4, 14, .9));
  box-shadow: 0 7px 24px rgba(7, 1, 8, .24), inset 0 1px rgba(255, 246, 212, .11);
  backdrop-filter: blur(12px) saturate(1.18);
}
.machine-header::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -42%;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 230, 159, .09), transparent);
  transform: skewX(-18deg);
  animation: headerLightSweep 7.5s ease-in-out infinite;
}
.machine-caption {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  color: #ffdfa0;
  font-size: clamp(10px, .85vw, 14px) !important;
  font-weight: 1000;
  letter-spacing: .12em !important;
  line-height: 1.35;
  white-space: normal !important;
  text-shadow: 0 1px 10px rgba(255, 121, 38, .25), 0 2px 8px #11030c;
}
.mini-sun { color: #fff0b1; font-size: 17px !important; filter: drop-shadow(0 0 7px rgba(255, 174, 62, .85)); }
.machine-separator { display: inline-block; color: rgba(255, 191, 107, .62) !important; }
.status-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(100%, 260px);
  min-height: 31px;
  padding: 7px 13px;
  border: 1px solid rgba(142, 255, 201, .56);
  border-radius: 999px;
  color: #e4ffdf;
  background: linear-gradient(105deg, rgba(16, 66, 46, .73), rgba(25, 39, 25, .77));
  box-shadow: 0 0 18px rgba(86, 255, 157, .09), inset 0 1px rgba(246, 255, 220, .13);
  font-size: clamp(8px, .62vw, 10px);
  font-weight: 1000;
  letter-spacing: .1em;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.status-indicator { flex: 0 0 7px !important; width: 7px !important; height: 7px !important; background: #a9ff9c !important; box-shadow: 0 0 7px #5eff96, 0 0 15px rgba(94, 255, 150, .65) !important; }
.status-chip.is-busy {
  color: #fff1ca;
  border-color: rgba(255, 175, 76, .85);
  background: linear-gradient(110deg, rgba(99, 34, 16, .88), rgba(72, 13, 21, .88));
  box-shadow: 0 0 24px rgba(255, 108, 36, .18), inset 0 1px rgba(255, 233, 190, .12);
}
.status-chip.is-busy .status-indicator { background: #ffb04b !important; box-shadow: 0 0 8px #ff7b32, 0 0 18px rgba(255, 100, 28, .65) !important; }

/* Fill more of the desktop canvas while reserving a real, readable result/bonus region above the fixed dock. */
.reel-stage { width: 100%; }
.reel-frame {
  width: min(100%, 1780px, calc((100svh - 450px) * 2.0949)) !important;
  aspect-ratio: 662 / 330 !important;
  margin-inline: auto;
  filter: drop-shadow(0 12px 27px rgba(8, 1, 8, .34)) drop-shadow(0 0 16px rgba(255, 102, 32, .10));
  transform-origin: center;
  animation: cabinetHover 7.2s ease-in-out infinite;
}
.reel-frame-art { filter: drop-shadow(0 9px 18px rgba(0, 0, 0, .34)) drop-shadow(0 0 12px rgba(255, 119, 32, .17)) !important; }
.slot-grid {
  left: 12.2% !important;
  right: 8.2% !important;
  top: 18.8% !important;
  bottom: 17.5% !important;
  grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important;
}
.tile .symbol-art-container { padding: 0 !important; }
.tile .symbol-art {
  transform: scale(1.18);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px rgba(255, 148, 42, .22));
  will-change: transform, filter;
}
.tile-phoenix .symbol-art { transform: scale(1.12); }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.23) !important; }
.tile.is-winning { box-shadow: inset 0 0 0 2px rgba(255, 244, 173, .98), inset 0 0 26px rgba(255, 151, 28, .44), 0 0 22px rgba(255, 117, 30, .44) !important; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .symbol-art { transform: scale(1.24); filter: drop-shadow(0 0 12px rgba(255, 221, 128, .5)); }
}

/* Bonus card is widened and brighter so its purpose and progress are readable on a large monitor. */
.bonus-info-strip {
  position: relative;
  width: min(95%, 1600px) !important;
  min-height: 67px !important;
  margin: 7px auto 5px !important;
  padding: 10px clamp(14px, 1.8vw, 25px) !important;
  grid-template-columns: 36px minmax(230px, 1.05fr) minmax(330px, .9fr) auto !important;
  gap: clamp(10px, 1.5vw, 22px) !important;
  border-color: rgba(255, 205, 105, .76) !important;
  background:
    radial-gradient(ellipse at 5% 50%, rgba(255, 129, 33, .23), transparent 30%),
    radial-gradient(ellipse at 95% 0%, rgba(159, 58, 22, .20), transparent 35%),
    linear-gradient(105deg, rgba(23, 4, 15, .95), rgba(75, 17, 20, .92) 50%, rgba(23, 4, 15, .96)) !important;
  box-shadow: 0 8px 26px rgba(5, 1, 5, .3), 0 0 20px rgba(255, 104, 31, .07), inset 0 1px rgba(255, 244, 198, .14) !important;
}
.bonus-info-strip::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -28%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 229, 157, .12), transparent);
  transform: skewX(-18deg);
  animation: headerLightSweep 9s ease-in-out infinite 1.2s;
}
.bonus-info-symbol { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; font-size: 17px !important; box-shadow: 0 0 17px rgba(255, 126, 39, .35), inset 0 1px rgba(255, 242, 186, .2) !important; animation: phoenixTokenPulse 3s ease-in-out infinite; }
.bonus-info-copy strong { font-size: clamp(10px, .85vw, 13px) !important; letter-spacing: .16em !important; }
.bonus-info-copy span { color: #fff3dc !important; font-size: clamp(11px, .9vw, 14px) !important; line-height: 1.38 !important; }
.phoenix-meter { gap: 7px !important; }
.phoenix-meter-head { font-size: clamp(8px, .62vw, 10px) !important; }
.phoenix-meter-head strong { font-size: clamp(11px, .8vw, 13px) !important; }
.phoenix-meter-track { height: 9px !important; border-color: rgba(255, 218, 130, .55) !important; }
.phoenix-meter-track > span { position: relative; overflow: hidden; }
.phoenix-meter-track > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255,255,225,.7) 50%, transparent 75%); transform: translateX(-120%); animation: meterGleam 2.2s ease-in-out infinite; }
.phoenix-meter small { font-size: clamp(8px, .62vw, 10px) !important; }

/* Resolved outcome cards now flow directly beneath the Phoenix feature, never over the reels. */
.outcome-callout {
  position: relative !important;
  inset: auto !important;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: min(95%, 1100px);
  min-height: 0;
  margin: 5px auto 7px;
  padding: 10px clamp(18px, 2vw, 30px) 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 152, .8);
  border-radius: 14px;
  color: #fff7dc;
  background:
    radial-gradient(ellipse at 50% -35%, rgba(255, 195, 68, .28), transparent 65%),
    linear-gradient(105deg, rgba(29, 5, 17, .93), rgba(79, 20, 19, .94) 50%, rgba(25, 4, 16, .96));
  box-shadow: 0 7px 24px rgba(7, 1, 7, .28), 0 0 22px rgba(255, 148, 34, .13), inset 0 1px rgba(255, 245, 209, .15);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity .26s ease, transform .4s cubic-bezier(.18, .8, .22, 1);
  backdrop-filter: blur(12px) saturate(1.15);
  isolation: isolate;
}
.outcome-callout[hidden] { display: none !important; }
.outcome-callout::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .7;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 222, 143, .035) 23px 24px, transparent 25px 46px);
  animation: outcomeTextureDrift 8s linear infinite;
}
.outcome-callout::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 248, 213, .25), transparent);
  transform: skewX(-18deg);
}
.outcome-callout.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.outcome-callout.is-visible::after { animation: outcomeLightSweep 1.3s ease-out .1s both; }
.outcome-callout > span { color: #ffe0a0; font-size: clamp(8px, .72vw, 11px); font-weight: 1000; letter-spacing: .21em; line-height: 1.3; text-transform: uppercase; }
.outcome-callout > strong { color: #fff1bb; font-family: var(--font-display); font-size: clamp(23px, 2.1vw, 36px); font-weight: 1000; line-height: 1.04; text-shadow: 0 0 19px rgba(255, 166, 44, .46); }
.outcome-callout > small { color: rgba(255, 238, 210, .93); font-size: clamp(9px, .7vw, 12px); line-height: 1.4; }
.outcome-callout.outcome-win { border-color: rgba(152, 255, 194, .8); background: radial-gradient(ellipse at 50% -35%, rgba(80, 255, 170, .22), transparent 65%), linear-gradient(105deg, rgba(8, 35, 28, .96), rgba(20, 72, 51, .94), rgba(10, 28, 27, .96)); box-shadow: 0 8px 26px rgba(0,0,0,.28), 0 0 22px rgba(74,255,165,.16), inset 0 1px rgba(234,255,241,.18); }
.outcome-callout.outcome-win > span { color: #b9ffd9; }
.outcome-callout.outcome-win > strong { color: #effff0; text-shadow: 0 0 16px rgba(96, 255, 175, .44); }
.outcome-callout.outcome-big-win { border-color: #fff0a7; background: radial-gradient(ellipse at 50% -35%, rgba(255, 230, 86, .42), transparent 70%), linear-gradient(105deg, rgba(94, 31, 7, .97), rgba(109, 43, 8, .96) 48%, rgba(53, 10, 18, .97)); box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 30px rgba(255, 194, 41, .34), inset 0 1px rgba(255, 255, 224, .28); animation: bigOutcomeArrive .55s cubic-bezier(.12,.82,.24,1) both; }
.outcome-callout.outcome-big-win > span { color: #fff2b0; }
.outcome-callout.outcome-big-win > strong { color: #fff8c7; font-size: clamp(27px, 2.7vw, 45px); animation: bigWinTitleGlow .75s ease-in-out infinite alternate; }
.outcome-callout.outcome-loss { border-color: rgba(255, 163, 142, .68); background: radial-gradient(ellipse at 50% -35%, rgba(208, 64, 62, .18), transparent 65%), linear-gradient(105deg, rgba(27, 6, 16, .96), rgba(65, 14, 27, .96), rgba(25, 5, 17, .97)); box-shadow: 0 7px 22px rgba(5, 1, 6, .24), inset 0 1px rgba(255, 206, 188, .08); }
.outcome-callout.outcome-loss > span { color: #ffc3ad; }
.outcome-callout.outcome-loss > strong { color: #ffe0d1; font-size: clamp(20px, 1.8vw, 31px); text-shadow: 0 0 13px rgba(255, 105, 93, .24); }

/* The dock gets extra presence but remains short enough that the giant symbols are not covered. */
.controls-panel {
  padding: 7px clamp(14px, 2.7vw, 40px) max(7px, env(safe-area-inset-bottom)) !important;
  border-top-color: rgba(255, 214, 134, .82) !important;
  border-radius: 22px 22px 0 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 145, 49, .20), transparent 49%),
    linear-gradient(105deg, rgba(15, 3, 12, .99), rgba(51, 10, 19, .99) 48%, rgba(15, 3, 12, .995)) !important;
  box-shadow: 0 -13px 42px rgba(6, 1, 7, .59), 0 -1px 19px rgba(255, 112, 37, .10), inset 0 1px rgba(255, 245, 211, .16) !important;
}
.controls-panel::before { width: min(420px, 46vw) !important; height: 3px !important; top: -2px; box-shadow: 0 0 11px rgba(255, 184, 77, .82), 0 0 26px rgba(255, 100, 38, .35) !important; animation: dockGlow 3.2s ease-in-out infinite alternate; }
.provider-statusbar { padding: 3px 0 6px !important; border-bottom-color: rgba(255, 211, 126, .42) !important; }
.status-value > span { color: #f3d29a !important; font-size: clamp(8px, .68vw, 10px) !important; }
.status-value strong { color: #fff7d7 !important; font-size: clamp(18px, 1.55vw, 25px) !important; }
.status-value small { color: #ffd580 !important; font-size: 9px !important; }
.control-topline { margin-top: 4px !important; }
.control-caption { font-size: clamp(9px, .7vw, 11px) !important; margin-bottom: 5px !important; }
.stepper-button { width: 43px !important; height: 43px !important; flex-basis: 43px !important; color: #fff4d2 !important; border-color: rgba(255, 221, 145, .77) !important; background: linear-gradient(145deg, rgba(100, 35, 26, .86), rgba(34, 7, 18, .92)) !important; box-shadow: 0 4px 12px rgba(0,0,0,.22), inset 0 1px rgba(255,245,210,.1) !important; }
.stepper-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 18px rgba(255, 160, 47, .24) !important; }
.bet-amount-wrap strong { font-size: clamp(33px, 2.5vw, 44px) !important; }
.bet-presets { margin-top: 6px !important; }
.bet-presets button { border-color: rgba(255, 211, 128, .50) !important; background: rgba(255, 175, 61, .055) !important; }
.bet-presets button.selected { color: #351006 !important; border-color: #fff0b6 !important; background: linear-gradient(180deg, #ffe6a0, #f3a942) !important; box-shadow: 0 0 14px rgba(255, 173, 56, .25) !important; }
#spinButton.spin-button { filter: drop-shadow(0 4px 11px rgba(0,0,0,.4)) drop-shadow(0 0 9px rgba(255,126,29,.22)) !important; }
#spinButton:not(:disabled):not(.is-stopping) .spin-button-art { animation: spinRuneOrbit 10s linear infinite; }
#spinButton:hover:not(:disabled) .spin-button-art { animation-duration: 2.8s; }
.spin-button-label { color: #fff0bc !important; font-size: 10px !important; text-shadow: 0 2px 10px rgba(0,0,0,.92) !important; }
.secondary-action { min-height: 43px !important; border-color: rgba(255, 211, 124, .64) !important; background: linear-gradient(110deg, rgba(73, 17, 23, .92), rgba(104, 32, 20, .90)) !important; box-shadow: inset 0 1px rgba(255, 239, 199, .11), 0 4px 13px rgba(0,0,0,.18) !important; }
.secondary-action.is-active { color: #311005 !important; background: linear-gradient(100deg, #fff0b8, #efa84a) !important; }
.control-bottomline { margin-top: 6px !important; padding-top: 6px !important; }
.utility-button { min-height: 35px !important; border: 1px solid rgba(255, 211, 126, .40) !important; border-radius: 9px !important; background: linear-gradient(180deg, rgba(91, 25, 26, .68), rgba(30, 5, 15, .81)) !important; color: #fff1d0 !important; font-size: clamp(8px, .64vw, 10px) !important; }
.utility-button:hover:not(:disabled), .utility-button.is-on { color: #341107 !important; border-color: #fff1ba !important; background: linear-gradient(180deg, #ffedb1, #e99e3c) !important; box-shadow: 0 0 17px rgba(255, 181, 62, .2) !important; }
.utility-button:hover .utility-icon, .utility-button.is-on .utility-icon { color: #7d2c10 !important; }

/* The ambient scene feels alive without making the reels hard to follow. */
.reel-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 9% 14% 3%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 168, 48, .11), rgba(255, 84, 35, .045) 42%, transparent 73%);
  filter: blur(14px);
  animation: fireHaloPulse 5.4s ease-in-out infinite;
}
.reel-stage.feedback-win .reel-frame, .reel-stage.feedback-big-win .reel-frame { animation: cabinetWinPulse .75s ease-in-out 2; }
.reel-stage.feedback-bonus .reel-frame { animation: cabinetBonusWake 1.1s cubic-bezier(.14,.78,.18,1) both; }
.tile:nth-child(3n + 1)::after { animation: idleSymbolGlint 7s ease-in-out infinite; }
.tile:nth-child(4n + 2)::after { animation: idleSymbolGlint 8.5s ease-in-out infinite 2s; }
.tile.is-spinning::after, .reel.is-spinning .tile::after { animation: reelSweep .52s linear infinite !important; }

@keyframes headerLightSweep { 0%, 63% { left: -42%; opacity: 0; } 72% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@keyframes cabinetHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes phoenixTokenPulse { 0%, 100% { filter: brightness(1); box-shadow: 0 0 12px rgba(255,126,39,.24); } 50% { filter: brightness(1.2); box-shadow: 0 0 22px rgba(255,165,59,.52); } }
@keyframes meterGleam { 0%, 35% { transform: translateX(-120%); } 85%, 100% { transform: translateX(140%); } }
@keyframes outcomeTextureDrift { to { background-position: 46px 0; } }
@keyframes outcomeLightSweep { from { left: -30%; } to { left: 125%; } }
@keyframes bigOutcomeArrive { 0% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
@keyframes fireHaloPulse { 0%, 100% { opacity: .48; transform: scale(.96); } 50% { opacity: .95; transform: scale(1.04); } }
@keyframes cabinetWinPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) drop-shadow(0 0 18px rgba(255, 187, 59, .38)); } }
@keyframes cabinetBonusWake { 0% { filter: brightness(1); transform: translateY(0) scale(1); } 25% { filter: brightness(1.4); transform: translateY(-3px) scale(1.008); } 100% { filter: brightness(1); transform: translateY(0) scale(1); } }
@keyframes idleSymbolGlint { 0%, 84%, 100% { opacity: 0; transform: translateX(-140%) rotate(9deg); } 90% { opacity: .55; } 96% { opacity: 0; transform: translateX(140%) rotate(9deg); } }
@keyframes dockGlow { from { opacity: .5; filter: saturate(.85); } to { opacity: 1; filter: saturate(1.25); } }
@keyframes spinRuneOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Desktop: full use of screen width, no tiny central slot, and a carefully budgeted bottom dock. */
@media (min-width: 821px) {
  .topbar { min-height: clamp(66px, 7.5vh, 88px) !important; }
  .brand-logo { width: clamp(130px, 11.5vw, 186px) !important; }
  .wallet-block { padding: 11px clamp(18px, 1.9vw, 31px) !important; }
  .machine-header { min-height: 48px; margin-bottom: 7px; }
  .reel-frame { width: min(100%, 1780px, calc((100svh - 450px) * 2.0949)) !important; }
  .bonus-info-strip { min-height: 63px !important; }
  .controls-panel { padding-top: 6px !important; padding-bottom: max(6px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-top: 2px !important; padding-bottom: 5px !important; }
  .control-topline { margin-top: 3px !important; }
  .bet-control { padding-block: 0 !important; }
  .stepper-button { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .bet-amount-wrap { min-width: clamp(82px, 7.2vw, 125px) !important; }
  .bet-presets button { min-width: 42px !important; padding: 5px 9px !important; }
  .spin-control { width: clamp(96px, 7.2vw, 116px) !important; }
  #spinButton.spin-button { width: clamp(90px, 6.7vw, 108px) !important; height: clamp(90px, 6.7vw, 108px) !important; flex-basis: clamp(90px, 6.7vw, 108px) !important; }
  .secondary-action { min-height: 41px !important; }
  .control-bottomline { margin-top: 5px !important; padding-top: 5px !important; }
  .utility-button { min-height: 32px !important; }
  .outcome-callout { min-height: 57px; }
}
@media (min-width: 821px) and (max-height: 780px) {
  .topbar { min-height: 57px !important; }
  .brand-logo { width: clamp(112px, 9.5vw, 150px) !important; }
  .wallet-block { padding-block: 6px !important; }
  .wallet-block strong { font-size: clamp(18px, 1.6vw, 23px) !important; }
  .icon-button { width: 36px !important; height: 36px !important; }
  .machine-header { min-height: 39px; padding-block: 5px; margin-bottom: 4px; }
  .machine-caption { font-size: clamp(8px, .72vw, 11px) !important; }
  .status-chip { min-height: 27px; padding-block: 5px; }
  .reel-frame { width: min(100%, 1500px, calc((100svh - 415px) * 2.0949)) !important; }
  .bonus-info-strip { min-height: 52px !important; padding-block: 7px !important; margin-block: 3px 3px !important; }
  .bonus-info-copy strong { font-size: 9px !important; }
  .bonus-info-copy span { font-size: 10px !important; }
  .phoenix-meter-head { font-size: 7px !important; }
  .phoenix-meter small { font-size: 7px !important; }
  .outcome-callout { min-height: 47px; margin-block: 3px 4px; padding-block: 6px; }
  .outcome-callout > strong { font-size: clamp(19px, 1.8vw, 28px); }
  .controls-panel { padding-top: 4px !important; padding-bottom: max(4px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-top: 1px !important; padding-bottom: 3px !important; }
  .control-topline { margin-top: 2px !important; }
  .stepper-button { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .bet-amount-wrap strong { font-size: clamp(28px, 2.3vw, 35px) !important; }
  .bet-presets { margin-top: 4px !important; }
  .bet-presets button { padding-block: 4px !important; }
  #spinButton.spin-button { width: 78px !important; height: 78px !important; flex-basis: 78px !important; }
  .spin-control { width: 82px !important; }
  .control-bottomline { margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button { min-height: 27px !important; }
}

/* Phones keep a full-width machine and a compact two-line heading; no status text can escape the viewport. */
@media (max-width: 820px) {
  .app-shell { padding-inline: 5px !important; }
  .topbar { min-height: 0 !important; padding: 5px 0 6px !important; }
  .machine-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: min(100%, 720px);
    min-height: 38px;
    gap: 5px;
    margin: 2px auto 4px;
    padding: 5px 7px;
    border-radius: 10px;
  }
  .machine-caption { gap: 4px; max-width: 100%; font-size: clamp(6px, 1.9vw, 9px) !important; letter-spacing: .045em !important; line-height: 1.25; }
  .mini-sun { font-size: 10px !important; }
  .machine-separator { opacity: .62; }
  .status-chip { justify-self: end; max-width: min(46%, 155px); min-height: 25px; padding: 4px 7px; gap: 4px; font-size: clamp(5.5px, 1.65vw, 7.5px); letter-spacing: .025em; line-height: 1.2; }
  .reel-frame { width: min(100%, calc(100vw - 10px)) !important; max-width: 100%; aspect-ratio: 662 / 330 !important; }
  .tile .symbol-art { transform: scale(1.15); }
  .tile-phoenix .symbol-art { transform: scale(1.1); }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.2) !important; }
  .bonus-info-strip {
    width: min(98%, 740px) !important;
    min-height: 0 !important;
    grid-template-columns: 25px minmax(0, 1fr) auto !important;
    grid-template-areas: "icon copy counter" "meter meter meter" !important;
    gap: 7px 8px !important;
    margin: 4px auto 4px !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
  }
  .bonus-info-symbol { grid-area: icon; width: 24px !important; height: 24px !important; flex-basis: 24px !important; font-size: 12px !important; }
  .bonus-info-copy { grid-area: copy; min-width: 0; }
  .bonus-info-copy strong { font-size: clamp(8px, 2vw, 10px) !important; letter-spacing: .08em !important; }
  .bonus-info-copy span { font-size: clamp(8px, 2vw, 10px) !important; line-height: 1.3 !important; }
  .phoenix-meter { grid-area: meter; min-width: 0; gap: 4px !important; }
  .phoenix-meter-head { font-size: 6.5px !important; }
  .phoenix-meter-head strong { font-size: 8px !important; }
  .phoenix-meter-track { height: 6px !important; }
  .phoenix-meter small { font-size: 6.7px !important; }
  .free-spin-counter { grid-area: counter; max-width: 100%; padding: 5px 6px !important; font-size: 7px !important; }
  .outcome-callout { width: min(98%, 740px); min-height: 43px; gap: 2px; margin: 4px auto 6px; padding: 7px 9px 8px; border-radius: 10px; }
  .outcome-callout > span { font-size: clamp(6px, 1.75vw, 8px); letter-spacing: .12em; }
  .outcome-callout > strong { font-size: clamp(18px, 4.8vw, 25px); }
  .outcome-callout > small { font-size: clamp(7px, 1.9vw, 9px); }
  .outcome-callout.outcome-big-win > strong { font-size: clamp(21px, 5.5vw, 29px); }
  .controls-panel { padding: 6px 9px max(7px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding: 1px 0 5px !important; }
  .control-topline { margin-top: 3px !important; }
  .control-bottomline { margin-top: 5px !important; padding-top: 5px !important; }
  .utility-button { min-height: 29px !important; }
  .toast { bottom: calc(198px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 390px) {
  .machine-header { padding-inline: 5px; gap: 3px; }
  .machine-caption { max-width: 58%; font-size: 6px !important; }
  .machine-separator { display: none; }
  .machine-caption [data-i18n="linesLabel"] { display: inline; }
  .status-chip { max-width: 42%; padding-inline: 5px; font-size: 5.5px; }
  .reel-frame { width: min(100%, calc(100vw - 8px)) !important; }
  .outcome-callout { padding-inline: 7px; }
  .outcome-callout > strong { font-size: clamp(16px, 4.6vw, 21px); }
  .bonus-info-strip { grid-template-columns: 22px minmax(0, 1fr) auto !important; }
}
@media (max-width: 350px) {
  .machine-header { grid-template-columns: minmax(0, 1fr) !important; }
  .machine-caption { max-width: 100%; }
  .status-chip { justify-self: start; max-width: 100%; min-height: 20px; padding: 3px 7px; }
  .machine-caption [data-i18n="linesLabel"] { display: none; }
}
@media (max-width: 820px) and (max-height: 520px) {
  .reel-frame { width: min(100%, calc(100vw - 8px), calc((100svh - 256px) * 2.0949)) !important; }
  .bonus-info-strip { padding-block: 5px !important; }
  .phoenix-meter small { display: none; }
  .outcome-callout { min-height: 35px; padding-block: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .machine-header::after, .bonus-info-strip::after, .reel-frame, .bonus-info-symbol,
  .phoenix-meter-track > span::after, .outcome-callout::before, .outcome-callout.is-visible::after,
  .controls-panel::before, .reel-stage::before, .tile:nth-child(3n + 1)::after, .tile:nth-child(4n + 2)::after,
  #spinButton:not(:disabled):not(.is-stopping) .spin-button-art {
    animation: none !important;
  }
}


/* ===== Consolidated source: styles-responsive.css ===== */
/* PHOENIX SLOTS v1.9.2 — responsive art direction and compact, usable controls.
   This file intentionally sits last in index.html to resolve the previous CSS-layer collisions. */
:root {
  --ui-gold: #ffe6a1;
  --ui-amber: #ffb84f;
  --ui-fire: #ff6038;
  --ui-panel: rgba(22, 5, 15, .96);
}

html,
body {
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
}

body {
  background-position: center 42%;
  background-size: cover;
}

.app-shell {
  width: 100%;
  max-width: 2160px;
  min-height: 100svh;
  padding-inline: clamp(8px, 1.35vw, 26px);
}

.topbar {
  flex: 0 0 auto;
  min-width: 0;
  min-height: clamp(64px, 7vh, 86px) !important;
  gap: clamp(8px, 1.45vw, 24px);
}

.brand-logo {
  filter: drop-shadow(0 4px 13px rgba(0, 0, 0, .44)) drop-shadow(0 0 10px rgba(255, 90, 28, .22));
}

.wallet-block {
  flex: 0 0 auto;
  white-space: nowrap;
}

.icon-button {
  flex: 0 0 auto;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}

.icon-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* Start the game content immediately after the compact header instead of vertically centring it. */
.game-main {
  flex: 0 1 auto !important;
  min-height: 0;
  justify-content: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 205px !important;
}

.game-layout,
.main-column,
.machine-shell,
.reel-stage {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.game-layout { display: block; }
.main-column { display: flex; align-items: center; }
.machine-shell { display: flex; flex-direction: column; align-items: center; }

.machine-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  width: min(100%, 1880px) !important;
  min-height: 42px !important;
  margin: 2px auto 5px !important;
  padding: 6px clamp(10px, 1.15vw, 20px) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 213, 126, .6);
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 9% 0%, rgba(255, 125, 42, .23), transparent 48%),
    linear-gradient(100deg, rgba(20, 4, 15, .9), rgba(74, 16, 19, .83) 52%, rgba(20, 4, 14, .93));
  box-shadow: 0 6px 21px rgba(7, 1, 8, .24), inset 0 1px rgba(255, 247, 212, .13);
  backdrop-filter: blur(10px) saturate(1.15);
}

.machine-caption {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-width: 0;
  max-width: 100%;
  color: #ffe2a0;
  font-size: clamp(9px, .78vw, 13px) !important;
  letter-spacing: .075em !important;
  line-height: 1.3;
  overflow-wrap: normal;
}

.mini-sun { font-size: 15px !important; }
.machine-separator { opacity: .65; }

.status-chip {
  justify-self: end;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  min-height: 29px !important;
  padding: 6px 11px !important;
  font-size: clamp(8px, .62vw, 10px) !important;
  letter-spacing: .07em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.status-chip > span:last-child { overflow-wrap: normal; }
.status-indicator { flex: 0 0 7px !important; }

.reel-stage {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.stage-glow {
  inset: 12% 7% 0 !important;
  background: radial-gradient(ellipse at 50% 44%, rgba(255, 147, 35, .28), rgba(231, 49, 47, .12) 42%, transparent 73%) !important;
  filter: blur(25px) saturate(1.2) !important;
}

.reel-frame {
  width: min(100%, 1880px, calc((100svh - 370px) * 2.05)) !important;
  max-width: none !important;
  aspect-ratio: 662 / 330 !important;
  margin-inline: auto;
  filter: drop-shadow(0 14px 29px rgba(4, 0, 7, .47)) drop-shadow(0 0 21px rgba(255, 88, 30, .19)) !important;
  transform-origin: center;
}

.reel-frame-art {
  filter: saturate(1.13) drop-shadow(0 9px 18px rgba(0, 0, 0, .38)) drop-shadow(0 0 15px rgba(255, 111, 30, .24)) !important;
}

.slot-grid {
  left: 12.2% !important;
  right: 8.2% !important;
  top: 18.5% !important;
  bottom: 16.9% !important;
  grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, .53), inset 0 0 33px rgba(173, 25, 48, .2) !important;
}

.tile .symbol-art-container { padding: 0 !important; }
.tile .symbol-art {
  transform: scale(1.34) !important;
  filter: saturate(1.14) drop-shadow(0 3px 5px rgba(0, 0, 0, .5)) drop-shadow(0 0 9px rgba(255, 148, 42, .29)) !important;
}
.tile-phoenix .symbol-art { transform: scale(1.28) !important; }
.tile-wild .symbol-art { filter: saturate(1.2) drop-shadow(0 0 7px rgba(255, 187, 58, .34)) !important; }
.tile.is-winning .symbol-art-container .symbol-art {
  transform: scale(1.4) !important;
  filter: saturate(1.22) drop-shadow(0 0 11px rgba(255, 240, 153, .98)) drop-shadow(0 0 20px rgba(255, 79, 23, .65)) !important;
}
.tile.is-winning {
  box-shadow: inset 0 0 0 2px rgba(255, 244, 173, .98), inset 0 0 29px rgba(255, 151, 28, .5), 0 0 24px rgba(255, 93, 28, .48) !important;
}

.bonus-info-strip {
  width: min(96%, 1620px) !important;
  min-height: 58px !important;
  margin: 5px auto 5px !important;
  padding: 8px clamp(11px, 1.6vw, 23px) !important;
  grid-template-columns: 34px minmax(0, 1.05fr) minmax(250px, .9fr) auto !important;
  gap: clamp(9px, 1.3vw, 20px) !important;
  border-color: rgba(255, 214, 120, .82) !important;
  background:
    radial-gradient(ellipse at 5% 50%, rgba(255, 129, 33, .27), transparent 34%),
    radial-gradient(ellipse at 94% 0%, rgba(164, 41, 27, .24), transparent 37%),
    linear-gradient(105deg, rgba(23, 4, 15, .96), rgba(79, 15, 21, .93) 50%, rgba(23, 4, 15, .97)) !important;
  box-shadow: 0 8px 25px rgba(5, 1, 5, .31), 0 0 22px rgba(255, 104, 31, .09), inset 0 1px rgba(255, 244, 198, .16) !important;
}

.bonus-info-symbol {
  flex-basis: 32px !important;
  width: 32px !important;
  height: 32px !important;
  animation: phoenixTokenPulse 2.6s ease-in-out infinite;
}
.bonus-info-copy { min-width: 0; gap: 3px !important; }
.bonus-info-copy strong { font-size: clamp(9px, .8vw, 12px) !important; letter-spacing: .11em !important; }
.bonus-info-copy span { font-size: clamp(10px, .86vw, 13px) !important; line-height: 1.34 !important; }
.phoenix-meter { min-width: 0; gap: 5px !important; }
.phoenix-meter-head { font-size: clamp(8px, .62vw, 10px) !important; }
.phoenix-meter-head strong { font-size: clamp(10px, .78vw, 12px) !important; }
.phoenix-meter-track { height: 8px !important; }
.phoenix-meter small { font-size: clamp(8px, .62vw, 10px) !important; }

.controls-panel {
  padding: 5px max(16px, calc((100vw - 1660px) / 2)) max(5px, env(safe-area-inset-bottom)) !important;
  border-radius: 18px 18px 0 0 !important;
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 151, 62, .19), transparent 47%),
    linear-gradient(110deg, rgba(16, 3, 12, .99), rgba(46, 8, 18, .985) 49%, rgba(16, 3, 12, .995)) !important;
  box-shadow: 0 -17px 44px rgba(8, 2, 7, .48), inset 0 1px rgba(255, 242, 199, .13) !important;
}

.provider-statusbar {
  width: min(100%, 1540px) !important;
  padding: 1px 0 5px !important;
  border-bottom-color: rgba(255, 211, 126, .31) !important;
}
.status-value { gap: 2px 6px !important; padding-inline: clamp(6px, 1.5vw, 24px) !important; }
.status-value > span { font-size: clamp(7px, .58vw, 9px) !important; letter-spacing: .14em !important; }
.status-value strong { font-size: clamp(15px, 1.3vw, 21px) !important; line-height: 1.06 !important; }
.status-value small { font-size: clamp(8px, .65vw, 10px) !important; }

.control-topline {
  grid-template-columns: minmax(0, 1fr) clamp(70px, 6.6vw, 94px) minmax(0, 1fr) !important;
  align-items: center;
  gap: clamp(18px, 4.1vw, 66px) !important;
  width: min(100%, 1320px) !important;
  margin-top: 2px !important;
}
.bet-control { min-width: 0; }
.control-caption { margin-bottom: 4px !important; font-size: clamp(8px, .65vw, 10px) !important; letter-spacing: .12em !important; }
.bet-stepper { justify-content: flex-start; gap: clamp(4px, .7vw, 10px) !important; }
.stepper-button {
  width: 37px !important;
  height: 37px !important;
  flex-basis: 37px !important;
  font-size: 22px !important;
}
.bet-amount-wrap { min-width: clamp(60px, 6vw, 88px) !important; gap: 2px !important; }
.bet-amount-wrap strong { font-size: clamp(25px, 2vw, 34px) !important; }
.bet-amount-wrap small { font-size: 9px !important; }
.bet-presets { width: min(100%, 280px) !important; gap: 4px !important; margin-top: 5px !important; }
.bet-presets button { min-width: 0; padding: 4px 5px !important; font-size: clamp(8px, .62vw, 10px) !important; }
.spin-control { width: clamp(70px, 6.6vw, 94px) !important; gap: 0 !important; }
#spinButton.spin-button {
  width: clamp(64px, 6vw, 86px) !important;
  height: clamp(64px, 6vw, 86px) !important;
  flex-basis: clamp(64px, 6vw, 86px) !important;
}
.spin-button-label { margin-top: 1px !important; font-size: 9px !important; letter-spacing: .12em !important; }
.auto-control { width: min(100%, 245px) !important; }
.secondary-action { min-height: 42px !important; padding: 8px 10px !important; font-size: clamp(8px, .68vw, 10px) !important; letter-spacing: .06em !important; }
.control-bottomline {
  width: min(100%, 1320px) !important;
  gap: 8px !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
}
.utility-button {
  min-height: 31px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
  font-size: clamp(8px, .62vw, 10px) !important;
}
.utility-icon { font-size: 13px !important; }

/* The status is always horizontal and the whole control deck is one compact, thumb-friendly unit. */
@media (max-width: 820px) {
  body { background-attachment: scroll; }
  .app-shell { padding: 0 5px max(0px, env(safe-area-inset-bottom)); }
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(66px, .78fr) minmax(82px, 1fr) auto !important;
    grid-template-areas: "brand wallet actions" !important;
    align-items: center;
    gap: 4px !important;
    min-height: 58px !important;
    padding: 4px 0 5px !important;
  }
  .brand { grid-area: brand; min-width: 0; gap: 0; }
  .brand-logo { width: clamp(70px, 19vw, 100px) !important; max-height: 49px !important; }
  .brand-caption { display: none !important; }
  .wallet-block {
    grid-area: wallet;
    justify-self: center !important;
    min-width: 0;
    max-width: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    column-gap: 3px !important;
    row-gap: 0;
  }
  .wallet-label { font-size: 7px !important; letter-spacing: .13em !important; }
  .wallet-block strong { font-size: clamp(12px, 3.55vw, 16px) !important; line-height: 1.12 !important; }
  .credit-unit { font-size: 7px !important; }
  .top-actions { grid-area: actions; justify-self: end; gap: 3px !important; min-width: 0; }
  .icon-button { width: clamp(24px, 6.7vw, 29px) !important; height: clamp(24px, 6.7vw, 29px) !important; border-radius: 8px !important; font-size: 12px !important; }
  .lang-button { width: auto !important; min-width: 31px !important; padding-inline: 4px !important; font-size: 7px !important; gap: 2px !important; }

  .game-main { padding-bottom: 184px !important; }
  .machine-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-height: 34px !important;
    gap: 5px !important;
    margin: 1px auto 3px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
  }
  .machine-caption {
    gap: 3px 5px !important;
    max-width: 100% !important;
    font-size: clamp(7px, 2.1vw, 9px) !important;
    letter-spacing: .025em !important;
    line-height: 1.2 !important;
  }
  .mini-sun { font-size: 11px !important; }
  .machine-separator { display: inline-block !important; }
  .status-chip {
    justify-self: end !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 24px !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    font-size: clamp(6px, 1.65vw, 7px) !important;
    letter-spacing: 0 !important;
  }
  .status-indicator { width: 6px !important; height: 6px !important; flex-basis: 6px !important; }

  .reel-frame {
    width: min(100%, calc(100vw - 10px)) !important;
    max-width: 100% !important;
    aspect-ratio: 662 / 330 !important;
  }
  .stage-glow { inset: 13% 4% 0 !important; filter: blur(20px) !important; }
  .slot-grid { top: 18.5% !important; bottom: 16.9% !important; }
  .tile .symbol-art { transform: scale(1.29) !important; }
  .tile-phoenix .symbol-art { transform: scale(1.24) !important; }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.36) !important; }

  .bonus-info-strip {
    width: min(98%, 760px) !important;
    min-height: 0 !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    grid-template-areas: "icon copy counter" "meter meter meter" !important;
    gap: 6px 8px !important;
    margin: 4px auto 4px !important;
    padding: 7px 8px !important;
    border-radius: 11px !important;
  }
  .bonus-info-symbol { grid-area: icon; width: 25px !important; height: 25px !important; flex-basis: 25px !important; font-size: 12px !important; }
  .bonus-info-copy { grid-area: copy; min-width: 0; gap: 2px !important; }
  .bonus-info-copy strong { font-size: clamp(8px, 2.15vw, 10px) !important; letter-spacing: .07em !important; }
  .bonus-info-copy span { font-size: clamp(8px, 2.3vw, 10px) !important; line-height: 1.25 !important; }
  .phoenix-meter { grid-area: meter; min-width: 0; gap: 3px !important; }
  .phoenix-meter-head { font-size: 7px !important; }
  .phoenix-meter-head strong { font-size: 9px !important; }
  .phoenix-meter-track { height: 6px !important; }
  .phoenix-meter small { font-size: 7px !important; }
  .free-spin-counter { grid-area: counter; padding: 4px 6px !important; font-size: 7px !important; }

  .outcome-callout { width: min(98%, 760px) !important; margin: 3px auto 5px !important; padding: 7px 9px !important; }
  .outcome-callout > span { font-size: 7px !important; }
  .outcome-callout > strong { font-size: clamp(18px, 5vw, 24px) !important; }
  .outcome-callout > small { font-size: 8px !important; }

  .controls-panel {
    padding: 5px 8px max(5px, env(safe-area-inset-bottom)) !important;
    border-radius: 15px 15px 0 0 !important;
  }
  .controls-panel::before { width: min(180px, 48vw) !important; height: 2px !important; }
  .provider-statusbar { width: 100% !important; padding: 0 0 4px !important; }
  .status-value { display: grid; gap: 2px 3px !important; padding: 0 3px !important; }
  .status-value > span { font-size: clamp(6.5px, 1.65vw, 7.5px) !important; letter-spacing: .08em !important; }
  .status-value strong { font-size: clamp(13px, 3.8vw, 16px) !important; }
  .status-value small { font-size: 7px !important; }

  .control-topline {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }
  .bet-control { justify-self: stretch; min-width: 0; }
  .control-caption { margin-bottom: 3px !important; font-size: clamp(7px, 1.8vw, 8px) !important; letter-spacing: .07em !important; white-space: nowrap; }
  .bet-stepper { width: 100%; justify-content: center; gap: 3px !important; }
  .stepper-button { width: 32px !important; height: 32px !important; flex-basis: 32px !important; font-size: 20px !important; }
  .bet-amount-wrap { min-width: 48px !important; gap: 1px !important; }
  .bet-amount-wrap strong { font-size: clamp(22px, 6vw, 27px) !important; line-height: 1 !important; }
  .bet-amount-wrap small { font-size: 7px !important; }
  .bet-presets { width: 100% !important; gap: 3px !important; margin-top: 4px !important; }
  .bet-presets button { min-width: 0 !important; padding: 4px 1px !important; border-radius: 8px !important; font-size: clamp(7px, 1.8vw, 8px) !important; }
  .spin-control { width: 64px !important; gap: 0 !important; }
  #spinButton.spin-button { width: 58px !important; height: 58px !important; flex-basis: 58px !important; }
  .spin-button-label { margin-top: 1px !important; font-size: 7px !important; letter-spacing: .07em !important; }
  .auto-control { justify-self: stretch; width: 100% !important; }
  .secondary-action { min-height: 40px !important; padding: 6px 5px !important; border-radius: 10px !important; font-size: clamp(7px, 1.9vw, 8px) !important; letter-spacing: .025em !important; white-space: nowrap; }
  .auto-icon { margin-right: 2px !important; font-size: 13px !important; }

  .control-bottomline { width: 100% !important; gap: 5px !important; margin-top: 4px !important; padding-top: 4px !important; }
  .utility-button { min-height: 30px !important; padding: 4px 3px !important; gap: 3px !important; border-radius: 8px !important; font-size: clamp(6.5px, 1.75vw, 8px) !important; letter-spacing: 0 !important; white-space: nowrap; }
  .utility-icon { font-size: 11px !important; }
  .toggle-indicator { width: 18px !important; height: 10px !important; }
  .toggle-indicator::after { width: 5px !important; height: 5px !important; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(7px) !important; }
  .toast { bottom: calc(166px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 390px) {
  .app-shell { padding-inline: 4px; }
  .topbar { grid-template-columns: minmax(60px, .7fr) minmax(77px, .95fr) auto !important; gap: 2px !important; }
  .brand-logo { width: clamp(65px, 18vw, 78px) !important; }
  .top-actions { gap: 2px !important; }
  .icon-button { width: 24px !important; height: 25px !important; font-size: 11px !important; }
  .lang-button { min-width: 29px !important; font-size: 6.5px !important; }
  .wallet-block strong { font-size: clamp(11px, 3.4vw, 13px) !important; }
  .machine-header { padding-inline: 5px !important; gap: 3px !important; }
  .machine-caption { font-size: 7px !important; gap: 2px 4px !important; }
  .status-chip { padding-inline: 5px !important; font-size: 6px !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr) !important; gap: 4px !important; }
  .spin-control { width: 58px !important; }
  #spinButton.spin-button { width: 53px !important; height: 53px !important; flex-basis: 53px !important; }
  .stepper-button { width: 29px !important; height: 30px !important; flex-basis: 29px !important; }
  .bet-amount-wrap { min-width: 43px !important; }
  .bet-amount-wrap strong { font-size: 21px !important; }
  .secondary-action { font-size: 6.5px !important; }
  .utility-button { font-size: 6px !important; gap: 2px !important; }
  .toggle-indicator { width: 15px !important; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(4px) !important; }
}

@media (max-width: 350px) {
  .machine-header { grid-template-columns: minmax(0, 1fr) auto !important; }
  .machine-caption [data-i18n="linesLabel"] { display: none; }
  .status-chip { max-width: none !important; min-width: max-content !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important; gap: 3px !important; }
  .spin-control { width: 52px !important; }
  #spinButton.spin-button { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  .stepper-button { width: 26px !important; height: 28px !important; flex-basis: 26px !important; }
  .bet-amount-wrap { min-width: 39px !important; }
  .bet-amount-wrap strong { font-size: 18px !important; }
  .utility-icon { display: none; }
  .toggle-indicator { display: none; }
}

/* Short screens: keep the entire dock visible and prevent it from hiding the bonus meter. */
@media (max-height: 720px) and (min-width: 821px) {
  .topbar { min-height: 56px !important; }
  .machine-header { min-height: 36px !important; margin-bottom: 3px !important; padding-block: 4px !important; }
  .reel-frame { width: min(100%, 1720px, calc((100svh - 350px) * 2.03)) !important; }
  .bonus-info-strip { min-height: 48px !important; margin-block: 3px !important; padding-block: 6px !important; }
  .bonus-info-copy span { font-size: 10px !important; }
  .controls-panel { padding-top: 3px !important; padding-bottom: max(3px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 3px !important; }
  .stepper-button { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  #spinButton.spin-button { width: 58px !important; height: 58px !important; flex-basis: 58px !important; }
  .secondary-action { min-height: 36px !important; }
  .utility-button { min-height: 27px !important; }
}

@media (max-width: 820px) and (max-height: 720px) {
  .game-main { padding-bottom: 162px !important; }
  .reel-frame { width: min(100%, calc(100vw - 10px), calc((100svh - 320px) * 2.02)) !important; }
  .bonus-info-strip { padding-block: 5px !important; gap: 4px 7px !important; }
  .phoenix-meter small { display: none; }
  .controls-panel { padding-top: 3px !important; padding-bottom: max(3px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 2px !important; }
  .control-topline { margin-top: 1px !important; }
  .stepper-button { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
  #spinButton.spin-button { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  .spin-control { width: 54px !important; }
  .bet-presets { margin-top: 3px !important; }
  .bet-presets button { padding-block: 3px !important; }
  .secondary-action { min-height: 34px !important; }
  .control-bottomline { margin-top: 2px !important; padding-top: 2px !important; }
  .utility-button { min-height: 26px !important; }
  .toast { bottom: calc(145px + env(safe-area-inset-bottom)) !important; }
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover .symbol-art { transform: scale(1.39) !important; filter: saturate(1.18) drop-shadow(0 0 13px rgba(255, 221, 128, .58)) !important; }
  .icon-button:hover:not(:disabled), .utility-button:hover:not(:disabled), .secondary-action:hover:not(:disabled) { filter: brightness(1.15) saturate(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .machine-header::after,
  .bonus-info-strip::after,
  .reel-frame,
  .bonus-info-symbol,
  .phoenix-meter-track > span::after,
  .controls-panel::before,
  .reel-stage::before,
  .tile:nth-child(3n + 1)::after,
  .tile:nth-child(4n + 2)::after,
  #spinButton:not(:disabled):not(.is-stopping) .spin-button-art {
    animation: none !important;
  }
}


/* ===== Consolidated source: styles-layout-rework.css ===== */
/* PHOENIX SLOTS v1.9.2 — reel-first provider-style layout.
   This final layer deliberately centralizes geometry after the legacy visual layers. */
:root {
  --topbar-height: 66px;
  --machine-head-height: 27px;
  --dock-reserve: 183px;
  --feature-reserve: 58px;
  --panel-edge: rgba(255, 211, 126, .52);
  --panel-ink: rgba(15, 4, 12, .975);
  --gold-hot: #ffca69;
}

html, body {
  width: 100% !important;
  min-width: 320px !important;
  min-height: 100% !important;
  overflow-x: clip !important;
  background-color: #10070f !important;
}

body {
  min-height: 100svh !important;
  background-image:
    linear-gradient(180deg, rgba(9, 3, 12, .73) 0%, rgba(12, 4, 13, .62) 38%, rgba(7, 2, 9, .78) 100%),
    url("assets/backgrounds/main.webp") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body::before {
  opacity: .72 !important;
  background: radial-gradient(ellipse at 50% 43%, rgba(8, 2, 9, .04) 0%, rgba(8, 2, 9, .24) 45%, rgba(5, 1, 7, .76) 100%) !important;
}

.embers { opacity: .105 !important; }
.ambient-vignette {
  background: linear-gradient(180deg, rgba(7, 2, 8, .19), transparent 24%, rgba(7, 2, 8, .06) 56%, rgba(5, 1, 7, .38)) !important;
}

.app-shell {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Compact provider-like header. Balance is displayed once in the session strip below. */
.topbar {
  flex: 0 0 var(--topbar-height) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(10px, 1.7vw, 26px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--topbar-height) !important;
  height: var(--topbar-height) !important;
  padding: 3px clamp(12px, 2.25vw, 38px) !important;
  border-bottom: 1px solid rgba(255, 205, 119, .18) !important;
  background: linear-gradient(180deg, rgba(12, 4, 13, .70), rgba(13, 4, 13, .26)) !important;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .12) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
}

.brand { min-width: 0 !important; gap: 5px !important; }
.brand-logo {
  display: block !important;
  width: clamp(104px, 8.7vw, 152px) !important;
  max-width: 100% !important;
  max-height: calc(var(--topbar-height) - 7px) !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .72)) drop-shadow(0 0 7px rgba(255, 101, 33, .15)) !important;
}
.brand-caption {
  margin: 0 0 7px -7px !important;
  padding-left: 3px !important;
  font-size: 6px !important;
  letter-spacing: .15em !important;
  color: rgba(255, 218, 161, .66) !important;
}
.wallet-block { display: none !important; }
.top-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.icon-button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 37px !important;
  height: 37px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 211, 126, .42) !important;
  border-radius: 11px !important;
  color: #ffebbf !important;
  background: linear-gradient(145deg, rgba(66, 22, 25, .77), rgba(18, 5, 15, .86)) !important;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .21), inset 0 1px rgba(255, 244, 207, .08) !important;
  font-size: 14px !important;
}
.icon-button:hover:not(:disabled) {
  border-color: rgba(255, 235, 175, .9) !important;
  background: linear-gradient(145deg, rgba(105, 38, 26, .9), rgba(30, 6, 17, .94)) !important;
  filter: brightness(1.08) !important;
}
.lang-button {
  display: flex !important;
  width: auto !important;
  min-width: 39px !important;
  padding: 0 8px !important;
  gap: 3px !important;
  font-size: 9px !important;
}

/* Use the available play area rather than vertically centering a small machine on desktop. */
.game-main {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: calc(100svh - var(--topbar-height)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 calc(var(--dock-reserve) + var(--feature-reserve) + 7px) !important;
}
.game-layout {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.main-column {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.machine-shell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* The former giant burgundy header was competing with the reels; keep only a slim metadata row. */
.machine-header {
  position: relative !important;
  inset: auto !important;
  z-index: 8 !important;
  display: flex !important;
  flex: 0 0 var(--machine-head-height) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: min(97vw, 2200px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height)) * 2.0949367)) !important;
  height: var(--machine-head-height) !important;
  min-height: var(--machine-head-height) !important;
  max-height: var(--machine-head-height) !important;
  margin: 0 auto !important;
  padding: 0 clamp(2px, .5vw, 8px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
}
.machine-header::before,
.machine-header::after { display: none !important; content: none !important; }
.machine-caption {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 72% !important;
  color: rgba(255, 226, 177, .84) !important;
  font-size: clamp(8px, .7vw, 11px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: .085em !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .9) !important;
}
.mini-sun { color: #ffcf75 !important; font-size: 13px !important; }
.machine-separator { opacity: .45 !important; }
.status-chip {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 48% !important;
  min-height: 23px !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(115, 235, 149, .48) !important;
  border-radius: 999px !important;
  color: #d9ffdf !important;
  background: rgba(11, 48, 33, .68) !important;
  box-shadow: 0 0 12px rgba(84, 243, 142, .08), inset 0 1px rgba(244, 255, 227, .09) !important;
  font-size: clamp(7px, .58vw, 9px) !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}
.status-chip > span:last-child { overflow: visible !important; }
.status-indicator {
  flex: 0 0 6px !important;
  width: 6px !important;
  height: 6px !important;
  background: #8effa6 !important;
  box-shadow: 0 0 7px #5eff96, 0 0 13px rgba(94, 255, 150, .44) !important;
}
.status-chip.is-busy {
  color: #fff0c2 !important;
  border-color: rgba(255, 175, 76, .78) !important;
  background: rgba(77, 27, 13, .82) !important;
}
.status-chip.is-busy .status-indicator { background: #ffad4d !important; }

/* The reel cabinet is sized from the remaining viewport height. */
.reel-stage {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.stage-glow {
  inset: 8% 10% 5% !important;
  background: radial-gradient(ellipse at 50% 48%, rgba(255, 124, 31, .20), rgba(184, 31, 41, .08) 42%, transparent 72%) !important;
  filter: blur(24px) saturate(1.08) !important;
}
.reel-frame {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  width: min(97vw, 2200px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height)) * 2.0949367)) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 662 / 316 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .56)) drop-shadow(0 0 24px rgba(255, 90, 25, .23)) !important;
  transform-origin: center !important;
}
.reel-frame-art {
  position: absolute !important;
  z-index: 5 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  filter: saturate(1.12) contrast(1.04) drop-shadow(0 8px 14px rgba(0, 0, 0, .34)) !important;
}
.slot-grid {
  left: 12.2% !important;
  right: 8.2% !important;
  top: 18.8% !important;
  bottom: 17.5% !important;
  grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important;
  gap: 0 !important;
  background: linear-gradient(180deg, rgba(10, 3, 12, .45), rgba(12, 3, 12, .54)), url("assets/backgrounds/reel-interior.webp") center / cover no-repeat !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .54), inset 0 0 32px rgba(173, 25, 48, .12) !important;
}
.reel { background: transparent !important; }
.reel + .reel { border-left: 1px solid rgba(255, 211, 112, .19) !important; }
.tile {
  background-color: rgba(28, 7, 20, .15) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 205, 120, .15) !important;
}
.tile::before { inset: 1px !important; border-color: rgba(255, 220, 150, .07) !important; }
.tile .symbol-art-container { padding: 0 !important; }
.tile .symbol-art {
  transform: scale(1.49) !important;
  filter: saturate(1.18) contrast(1.04) drop-shadow(0 3px 5px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(255, 148, 42, .30)) !important;
}
.tile-phoenix .symbol-art { transform: scale(1.43) !important; }
.tile-wild .symbol-art { transform: scale(1.46) !important; filter: saturate(1.22) drop-shadow(0 0 8px rgba(255, 187, 58, .44)) !important; }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.54) !important; }
.tile.is-winning {
  box-shadow: inset 0 0 0 2px rgba(255, 245, 180, .98), inset 0 0 25px rgba(255, 151, 28, .48), 0 0 22px rgba(255, 93, 28, .47) !important;
}

/* Persistent feature progress sits just above the control dock instead of taking a large row under the reels. */
.bonus-info-strip {
  position: fixed !important;
  z-index: 36 !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--dock-reserve) + 7px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: 29px minmax(0, 1fr) minmax(165px, .58fr) auto !important;
  align-items: center !important;
  gap: 8px 12px !important;
  width: min(90vw, 1040px) !important;
  min-width: 0 !important;
  min-height: 52px !important;
  max-height: 59px !important;
  margin: 0 !important;
  padding: 6px 13px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 210, 122, .72) !important;
  border-radius: 13px !important;
  background: linear-gradient(105deg, rgba(19, 4, 14, .97), rgba(60, 12, 20, .96) 50%, rgba(17, 3, 13, .97)) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .39), 0 0 15px rgba(255, 100, 31, .11), inset 0 1px rgba(255, 244, 203, .12) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
}
.bonus-info-strip::after { opacity: .26 !important; }
.bonus-info-symbol {
  grid-column: 1 !important;
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
  font-size: 14px !important;
  animation: phoenixTokenPulse 3.1s ease-in-out infinite !important;
}
.bonus-info-copy {
  grid-column: 2 !important;
  min-width: 0 !important;
  gap: 2px !important;
}
.bonus-info-copy strong {
  display: block !important;
  overflow: hidden !important;
  color: #ffe0a0 !important;
  font-size: clamp(9px, .72vw, 11px) !important;
  line-height: 1.12 !important;
  letter-spacing: .10em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.bonus-info-copy span {
  display: block !important;
  overflow: hidden !important;
  color: #fff2dc !important;
  font-size: clamp(9px, .78vw, 12px) !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.phoenix-meter {
  grid-column: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.phoenix-meter-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  color: #e8c895 !important;
  font-size: 8px !important;
  letter-spacing: .09em !important;
}
.phoenix-meter-head strong { color: #fff2c9 !important; font-size: 10px !important; white-space: nowrap !important; }
.phoenix-meter-track { height: 6px !important; border-color: rgba(255, 205, 112, .4) !important; }
.phoenix-meter small { display: none !important; }
.free-spin-counter {
  grid-column: 4 !important;
  padding: 5px 7px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}
.bonus-info-strip.without-meter { grid-template-columns: 29px minmax(0, 1fr) auto !important; }
.bonus-info-strip.without-meter .phoenix-meter { display: none !important; }

/* Win/loss feedback floats over the playfield without pushing the reels around. */
.outcome-callout {
  position: fixed !important;
  z-index: 55 !important;
  top: 42% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: min(88vw, 680px) !important;
  margin: 0 !important;
  transform: translate(-50%, -48%) scale(.97) !important;
}
.outcome-callout.is-visible { transform: translate(-50%, -50%) scale(1) !important; }
.outcome-callout[hidden] { display: none !important; }
.result-banner { display: none !important; }

/* Provider-like dock: compact session figures, a clear centre spin control, bet and autoplay beside it. */
.controls-panel {
  position: fixed !important;
  z-index: 40 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7px max(18px, calc((100vw - 1460px) / 2)) max(7px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 211, 126, .72) !important;
  border-radius: 19px 19px 0 0 !important;
  background: linear-gradient(180deg, rgba(28, 7, 17, .985), rgba(10, 3, 11, .995)) !important;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 242, 199, .10) !important;
  backdrop-filter: blur(19px) saturate(1.1) !important;
}
.controls-panel::before {
  position: absolute !important;
  top: -2px !important;
  left: 50% !important;
  width: min(230px, 36vw) !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, transparent, #ffca69, #fff0b8, #ff8a39, transparent) !important;
  box-shadow: 0 0 10px rgba(255, 184, 77, .62) !important;
}
.provider-statusbar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: min(100%, 1080px) !important;
  margin: 0 auto !important;
  padding: 0 0 5px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 211, 126, .28) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.status-value {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 1px 5px !important;
  min-width: 0 !important;
  padding: 0 clamp(8px, 1.4vw, 22px) !important;
  white-space: nowrap !important;
}
.status-value + .status-value { border-left: 1px solid rgba(255, 211, 126, .25) !important; }
.status-value > span {
  grid-column: 1 / -1 !important;
  color: #d8b986 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1.05 !important;
  text-align: center !important;
}
.status-value strong {
  grid-column: 1 !important;
  min-width: 0 !important;
  color: #fff2cc !important;
  font-size: clamp(14px, 1.25vw, 20px) !important;
  line-height: 1.03 !important;
  text-align: right !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6) !important;
}
.status-value small {
  grid-column: 2 !important;
  color: #ffcf76 !important;
  font-size: 8px !important;
  line-height: 1 !important;
}
.control-topline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(16px, 4vw, 58px) !important;
  width: min(100%, 1140px) !important;
  min-width: 0 !important;
  margin: 4px auto 0 !important;
}
.bet-control {
  justify-self: stretch !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.control-caption {
  margin: 0 0 3px !important;
  color: #ffe0a4 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  line-height: 1.05 !important;
}
.bet-stepper { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; }
.stepper-button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 35px !important;
  width: 35px !important;
  height: 35px !important;
  border: 1px solid rgba(255, 219, 146, .77) !important;
  border-radius: 50% !important;
  color: #fff0c5 !important;
  background: linear-gradient(145deg, rgba(73, 20, 25, .94), rgba(24, 5, 16, .98)) !important;
  box-shadow: inset 0 1px rgba(255, 244, 207, .08), 0 2px 7px rgba(0, 0, 0, .18) !important;
  font-size: 21px !important;
  line-height: 1 !important;
}
.stepper-button:hover:not(:disabled) { background: linear-gradient(145deg, rgba(133, 48, 28, .96), rgba(40, 7, 17, .98)) !important; }
.bet-amount-wrap { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 3px !important; min-width: 66px !important; }
.bet-amount-wrap strong { color: #fff0bd !important; font-size: clamp(25px, 2.2vw, 34px) !important; line-height: .98 !important; }
.bet-amount-wrap small { color: #ffcd70 !important; font-size: 9px !important; font-weight: 900 !important; }
.bet-presets { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 4px !important; width: min(100%, 286px) !important; margin: 4px 0 0 !important; }
.bet-presets button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 22px !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(255, 209, 121, .38) !important;
  border-radius: 8px !important;
  color: #f7dfb4 !important;
  background: rgba(53, 13, 22, .69) !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
.bet-presets button.selected {
  color: #351008 !important;
  border-color: #ffe4a1 !important;
  background: linear-gradient(180deg, #ffe8a5, #eaa34c) !important;
  box-shadow: 0 0 11px rgba(255, 183, 64, .20) !important;
}
.spin-control { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: 82px !important; }
#spinButton.spin-button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .4)) !important;
}
#spinButton .spin-button-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 9px rgba(255, 115, 30, .44)) !important;
}
#spinButton:disabled .spin-button-art { filter: grayscale(.22) brightness(.72) !important; }
.spin-button-label {
  display: block !important;
  margin: 1px 0 0 !important;
  color: #ffe8ac !important;
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}
.auto-control { display: flex !important; align-items: stretch !important; justify-self: stretch !important; width: min(100%, 230px) !important; max-width: none !important; min-width: 0 !important; }
.secondary-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 39px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255, 210, 121, .54) !important;
  border-radius: 11px !important;
  color: #ffe7b5 !important;
  background: linear-gradient(110deg, rgba(60, 14, 23, .91), rgba(95, 27, 22, .86)) !important;
  box-shadow: inset 0 1px rgba(255, 244, 209, .08) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
.secondary-action.is-active { color: #2f0e07 !important; background: linear-gradient(100deg, #fff0b8, #efa84a) !important; }
.auto-icon { margin: 0 !important; font-size: 15px !important; line-height: 1 !important; }
.auto-help { display: none !important; }
.control-bottomline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: min(100%, 1140px) !important;
  margin: 4px auto 0 !important;
  padding: 4px 0 0 !important;
  border-top: 1px solid rgba(255, 211, 126, .19) !important;
}
.utility-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 31px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 209, 122, .27) !important;
  border-radius: 8px !important;
  color: #fce9c8 !important;
  background: rgba(42, 9, 19, .63) !important;
  box-shadow: none !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .035em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}
.utility-button:hover:not(:disabled), .utility-button.is-on {
  border-color: rgba(255, 222, 153, .78) !important;
  background: linear-gradient(180deg, rgba(106, 36, 26, .91), rgba(55, 11, 20, .94)) !important;
}
.utility-icon { color: #ffcf79 !important; font-size: 12px !important; }
.utility-arrow { display: none !important; }
.toggle-indicator { width: 18px !important; height: 10px !important; flex: 0 0 18px !important; }
.toggle-indicator::after { width: 5px !important; height: 5px !important; }
.utility-button.is-on .toggle-indicator::after { transform: translateX(7px) !important; }

.toast { bottom: calc(var(--dock-reserve) + var(--feature-reserve) + 10px + env(safe-area-inset-bottom)) !important; z-index: 70 !important; }

/* Tablet and phone: readable labels, restrained button targets, and an unbroken reel-first view. */
@media (max-width: 820px) {
  :root {
    --topbar-height: 51px;
    --machine-head-height: 23px;
    --dock-reserve: 150px;
    --feature-reserve: 52px;
  }
  body {
    background-attachment: scroll !important;
    background-position: center 44% !important;
    background-image:
      linear-gradient(180deg, rgba(8, 3, 11, .69), rgba(11, 3, 12, .59) 44%, rgba(5, 2, 8, .76)),
      url("assets/backgrounds/main.webp") !important;
  }
  .app-shell { padding: 0 !important; }
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 5px !important;
    padding: 2px 8px !important;
    min-height: var(--topbar-height) !important;
    height: var(--topbar-height) !important;
  }
  .brand { gap: 0 !important; }
  .brand-logo { width: clamp(69px, 18vw, 91px) !important; max-height: 46px !important; }
  .brand-caption { display: none !important; }
  .top-actions { gap: 4px !important; }
  .icon-button {
    width: 29px !important;
    height: 29px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
  .lang-button { min-width: 29px !important; padding: 0 4px !important; font-size: 8px !important; }
  .machine-header {
    gap: 4px !important;
    width: min(97vw, 2200px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height)) * 2.0949367)) !important;
    padding-inline: 0 !important;
  }
  .machine-caption {
    gap: 4px !important;
    max-width: 68% !important;
    font-size: clamp(7px, 2.05vw, 9px) !important;
    letter-spacing: .025em !important;
  }
  .mini-sun { font-size: 10px !important; }
  .status-chip {
    min-height: 19px !important;
    max-width: 44% !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    font-size: clamp(6px, 1.65vw, 7.5px) !important;
    letter-spacing: 0 !important;
  }
  .status-indicator { width: 5px !important; height: 5px !important; flex-basis: 5px !important; }
  .reel-frame {
    width: min(97vw, 2200px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height)) * 2.0949367)) !important;
    max-width: 100% !important;
    aspect-ratio: 662 / 316 !important;
  }
  .stage-glow { inset: 12% 5% 3% !important; filter: blur(18px) !important; }
  .tile .symbol-art { transform: scale(1.49) !important; }
  .tile-phoenix .symbol-art { transform: scale(1.43) !important; }
  .tile-wild .symbol-art { transform: scale(1.45) !important; }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.54) !important; }

  .bonus-info-strip {
    bottom: calc(var(--dock-reserve) + 7px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: 23px minmax(0, 1fr) minmax(76px, .48fr) auto !important;
    gap: 5px 7px !important;
    width: calc(100vw - 16px) !important;
    min-height: 47px !important;
    max-height: 51px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
  }
  .bonus-info-symbol { width: 22px !important; height: 22px !important; flex-basis: 22px !important; font-size: 11px !important; }
  .bonus-info-copy { gap: 2px !important; }
  .bonus-info-copy strong { font-size: clamp(7.5px, 2.05vw, 9px) !important; letter-spacing: .06em !important; }
  .bonus-info-copy span { font-size: clamp(7px, 1.95vw, 9px) !important; line-height: 1.12 !important; }
  .phoenix-meter { gap: 3px !important; }
  .phoenix-meter-head { gap: 3px !important; font-size: 6.5px !important; letter-spacing: .02em !important; }
  .phoenix-meter-head strong { font-size: 8px !important; }
  .phoenix-meter-track { height: 5px !important; }
  .free-spin-counter { padding: 3px 5px !important; font-size: 7px !important; }
  .bonus-info-strip.without-meter { grid-template-columns: 23px minmax(0, 1fr) auto !important; }

  .controls-panel {
    padding: 5px 9px max(5px, env(safe-area-inset-bottom)) !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .controls-panel::before { width: min(140px, 42vw) !important; height: 1.5px !important; }
  .provider-statusbar { padding: 0 0 4px !important; }
  .status-value { gap: 1px 3px !important; padding: 0 3px !important; }
  .status-value > span { font-size: clamp(6.5px, 1.8vw, 7.5px) !important; letter-spacing: .07em !important; }
  .status-value strong { font-size: clamp(12px, 3.5vw, 15px) !important; }
  .status-value small { font-size: 7px !important; }
  .control-topline {
    grid-template-columns: minmax(0, 1fr) 59px minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    margin-top: 3px !important;
  }
  .control-caption { margin-bottom: 3px !important; font-size: clamp(7px, 1.85vw, 8px) !important; letter-spacing: .045em !important; }
  .bet-stepper { justify-content: flex-start !important; gap: 3px !important; }
  .stepper-button { width: 28px !important; height: 29px !important; flex-basis: 28px !important; font-size: 18px !important; }
  .bet-amount-wrap { min-width: 43px !important; gap: 2px !important; }
  .bet-amount-wrap strong { font-size: clamp(20px, 5.4vw, 25px) !important; }
  .bet-amount-wrap small { font-size: 7px !important; }
  .bet-presets { gap: 3px !important; margin-top: 4px !important; }
  .bet-presets button { min-height: 19px !important; padding: 3px 1px !important; border-radius: 6px !important; font-size: clamp(7px, 1.8vw, 8px) !important; }
  .spin-control { width: 59px !important; }
  #spinButton.spin-button { width: 54px !important; height: 54px !important; flex-basis: 54px !important; }
  .spin-button-label { margin-top: 1px !important; font-size: 7px !important; letter-spacing: .06em !important; }
  .auto-control { width: 100% !important; min-width: 0 !important; }
  .secondary-action {
    min-height: 35px !important;
    padding: 5px 5px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    font-size: clamp(7px, 1.9vw, 8.5px) !important;
    letter-spacing: .005em !important;
  }
  .auto-icon { font-size: 12px !important; }
  .control-bottomline { gap: 4px !important; margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button {
    min-height: 27px !important;
    padding: 4px 3px !important;
    gap: 3px !important;
    border-radius: 7px !important;
    font-size: clamp(6.5px, 1.72vw, 8px) !important;
    letter-spacing: 0 !important;
  }
  .utility-icon { font-size: 10px !important; }
  .toggle-indicator { width: 15px !important; height: 9px !important; flex-basis: 15px !important; }
  .toggle-indicator::after { width: 4px !important; height: 4px !important; }
  .utility-button.is-on .toggle-indicator::after { transform: translateX(5px) !important; }
  .outcome-callout { top: 43% !important; max-width: calc(100vw - 24px) !important; padding: 9px 13px !important; }
  .outcome-callout > strong { font-size: clamp(19px, 5.7vw, 28px) !important; }
  .outcome-callout > small { font-size: 8px !important; }
  .toast { bottom: calc(var(--dock-reserve) + var(--feature-reserve) + 10px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 390px) {
  :root { --dock-reserve: 147px; --feature-reserve: 50px; }
  .topbar { padding-inline: 6px !important; gap: 3px !important; }
  .brand-logo { width: 67px !important; }
  .top-actions { gap: 3px !important; }
  .icon-button { width: 27px !important; height: 28px !important; font-size: 11px !important; }
  .lang-button { min-width: 27px !important; font-size: 7px !important; }
  .machine-caption { gap: 3px !important; font-size: 6.7px !important; }
  .status-chip { padding-inline: 5px !important; font-size: 6px !important; }
  .bonus-info-strip { grid-template-columns: 21px minmax(0, 1fr) minmax(64px, .42fr) auto !important; gap: 4px 5px !important; padding-inline: 6px !important; }
  .bonus-info-symbol { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }
  .bonus-info-copy strong { font-size: 7px !important; }
  .bonus-info-copy span { font-size: 7px !important; }
  .phoenix-meter-head { font-size: 6px !important; }
  .phoenix-meter-head strong { font-size: 7px !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 53px minmax(0, 1fr) !important; gap: 4px !important; }
  .spin-control { width: 53px !important; }
  #spinButton.spin-button { width: 49px !important; height: 49px !important; flex-basis: 49px !important; }
  .stepper-button { width: 25px !important; height: 27px !important; flex-basis: 25px !important; }
  .bet-amount-wrap { min-width: 38px !important; }
  .bet-amount-wrap strong { font-size: 19px !important; }
  .secondary-action { font-size: 6.7px !important; }
  .utility-button { font-size: 6.1px !important; gap: 2px !important; }
  .utility-icon { display: none !important; }
  .toggle-indicator { display: none !important; }
}

@media (max-width: 350px) {
  :root { --dock-reserve: 144px; --feature-reserve: 48px; }
  .status-value strong { font-size: 11px !important; }
  .machine-separator { display: none !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important; gap: 3px !important; }
  .spin-control { width: 48px !important; }
  #spinButton.spin-button { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
  .stepper-button { width: 23px !important; height: 25px !important; flex-basis: 23px !important; }
  .bet-amount-wrap { min-width: 34px !important; }
  .bet-amount-wrap strong { font-size: 17px !important; }
  .bet-presets { gap: 2px !important; }
  .bet-presets button { font-size: 6.5px !important; }
  .utility-button { font-size: 5.9px !important; }
}

/* Landscape phones and short desktop windows: reserve less space for the dock. */
@media (max-width: 820px) and (max-height: 520px) {
  :root { --topbar-height: 42px; --machine-head-height: 19px; --dock-reserve: 110px; --feature-reserve: 41px; }
  .brand-logo { width: 62px !important; max-height: 38px !important; }
  .icon-button { width: 25px !important; height: 25px !important; }
  .controls-panel { padding-top: 3px !important; padding-bottom: max(3px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 2px !important; }
  .control-topline { margin-top: 1px !important; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) !important; }
  .stepper-button { width: 22px !important; height: 23px !important; flex-basis: 22px !important; }
  .bet-amount-wrap strong { font-size: 17px !important; }
  #spinButton.spin-button { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .spin-control { width: 46px !important; }
  .spin-button-label { font-size: 6px !important; }
  .bet-presets { margin-top: 2px !important; }
  .bet-presets button { min-height: 16px !important; padding-block: 2px !important; }
  .secondary-action { min-height: 27px !important; }
  .control-bottomline { margin-top: 2px !important; padding-top: 2px !important; }
  .utility-button { min-height: 21px !important; padding-block: 2px !important; font-size: 6px !important; }
  .bonus-info-strip { min-height: 38px !important; max-height: 40px !important; padding-block: 3px !important; }
  .bonus-info-symbol { width: 18px !important; height: 18px !important; flex-basis: 18px !important; }
  .bonus-info-copy span { display: none !important; }
  .phoenix-meter-head { font-size: 6px !important; }
}

@media (min-width: 821px) and (max-height: 700px) {
  :root { --topbar-height: 54px; --machine-head-height: 22px; --dock-reserve: 154px; --feature-reserve: 48px; }
  .topbar { padding-block: 1px !important; }
  .brand-logo { width: 106px !important; max-height: 48px !important; }
  .icon-button { width: 31px !important; height: 31px !important; }
  .controls-panel { padding-top: 4px !important; padding-bottom: max(4px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 3px !important; }
  .control-topline { margin-top: 2px !important; }
  #spinButton.spin-button { width: 62px !important; height: 62px !important; flex-basis: 62px !important; }
  .spin-control { width: 68px !important; }
  .stepper-button { width: 29px !important; height: 29px !important; flex-basis: 29px !important; }
  .bet-amount-wrap strong { font-size: 26px !important; }
  .secondary-action { min-height: 34px !important; }
  .control-bottomline { margin-top: 2px !important; padding-top: 2px !important; }
  .utility-button { min-height: 27px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-frame, .bonus-info-symbol, .phoenix-meter-track > span::after,
  .controls-panel::before, .reel-stage::before,
  .tile:nth-child(3n + 1)::after, .tile:nth-child(4n + 2)::after,
  #spinButton:not(:disabled):not(.is-stopping) .spin-button-art { animation: none !important; }
}


/* ===== Consolidated source: styles-v1.9.3.css ===== */
/* PHOENIX SLOTS v1.9.3 — cabinet-led sizing, a dedicated result lane, and a wider desktop control dock.
   This layer intentionally comes after the legacy cascades to establish one final responsive geometry. */
:root {
  --topbar-height: 58px;
  --machine-head-height: 21px;
  --dock-reserve: 214px;
  --feature-reserve: 46px;
  --outcome-reserve: 54px;
}

/* The cabinet starts at the top of the play area; the background becomes supporting atmosphere. */
.machine-header {
  width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height)) * 2.16)) !important;
}
.reel-stage {
  flex: 1 1 auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.reel-frame {
  width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height)) * 2.16)) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 2.16 / 1 !important;
  margin: 0 auto !important;
}
.machine-shell.has-outcome .machine-header {
  width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height) - var(--outcome-reserve)) * 2.16)) !important;
}
.machine-shell.has-outcome .reel-frame {
  width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--machine-head-height) - var(--outcome-reserve)) * 2.16)) !important;
}

/* Win/loss cards occupy a dedicated space below the cabinet. Never cover the symbols. */
.outcome-callout {
  position: absolute !important;
  z-index: 16 !important;
  top: calc(100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 7px - var(--outcome-reserve)) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, max-content) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 10px !important;
  row-gap: 1px !important;
  width: min(calc(100vw - 32px), 940px) !important;
  min-height: 48px !important;
  max-height: 54px !important;
  margin: 0 !important;
  padding: 3px 16px 4px !important;
  border-radius: 12px !important;
  transform: translate(-50%, 9px) scale(.985) !important;
  opacity: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  pointer-events: none !important;
  transition: opacity .23s ease, transform .28s cubic-bezier(.18,.8,.22,1) !important;
}
.outcome-callout.is-visible {
  transform: translate(-50%, 0) scale(1) !important;
  opacity: 1 !important;
}
.outcome-callout[hidden] { display: none !important; }
.outcome-callout > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  font-size: clamp(7px, .58vw, 8px) !important;
  line-height: 1.05 !important;
  letter-spacing: .12em !important;
}
.outcome-callout > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  font-size: clamp(16px, 1.45vw, 21px) !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}
.outcome-callout > small {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(7px, .56vw, 8px) !important;
  line-height: 1.05 !important;
}

/* A roomier but still single-dock desktop control layout. Phone controls deliberately retain their established sizes. */
.controls-panel {
  padding: 10px max(24px, calc((100vw - 1660px) / 2)) max(9px, env(safe-area-inset-bottom)) !important;
}
.provider-statusbar { width: min(100%, 1360px) !important; padding-bottom: 7px !important; }
.status-value > span { font-size: 9px !important; }
.status-value strong { font-size: clamp(16px, 1.4vw, 22px) !important; }
.control-topline {
  grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr) !important;
  gap: clamp(22px, 4vw, 66px) !important;
  width: min(100%, 1420px) !important;
  margin-top: 6px !important;
}
.control-caption { font-size: 10px !important; margin-bottom: 4px !important; }
.stepper-button { width: 39px !important; height: 39px !important; flex-basis: 39px !important; }
.bet-amount-wrap { min-width: 76px !important; }
.bet-amount-wrap strong { font-size: clamp(28px, 2.25vw, 36px) !important; }
.bet-presets { width: min(100%, 310px) !important; gap: 5px !important; margin-top: 5px !important; }
.bet-presets button { min-height: 25px !important; font-size: 10px !important; }
.spin-control { width: 94px !important; }
#spinButton.spin-button { width: 86px !important; height: 86px !important; flex-basis: 86px !important; }
.spin-button-label { font-size: 10px !important; }
.auto-control { width: min(100%, 280px) !important; }
.secondary-action { min-height: 45px !important; padding: 8px 14px !important; font-size: 10px !important; }
.control-bottomline {
  width: min(100%, 1420px) !important;
  gap: 9px !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
}
.utility-button { min-height: 34px !important; font-size: 9px !important; padding: 5px 10px !important; }
.toast { bottom: calc(var(--dock-reserve) + var(--feature-reserve) + 10px + env(safe-area-inset-bottom)) !important; }

@media (max-width: 820px) {
  :root {
    --topbar-height: 51px;
    --machine-head-height: 23px;
    --dock-reserve: 150px;
    --feature-reserve: 52px;
    --outcome-reserve: 48px;
  }
  .machine-header {
    width: 100% !important;
    flex: 0 0 var(--machine-head-height) !important;
    height: var(--machine-head-height) !important;
    min-height: var(--machine-head-height) !important;
    max-height: var(--machine-head-height) !important;
  }
  .reel-stage {
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    height: min(57.647vw, calc(100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - 14px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .reel-frame {
    width: min(98vw, 2200px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - 14px) * 1.7)) !important;
    max-width: 100% !important;
    aspect-ratio: 1.7 / 1 !important;
    margin: 0 auto !important;
  }
  .machine-shell.has-outcome .reel-stage {
    height: min(57.647vw, calc(100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - var(--outcome-reserve) - 14px)) !important;
  }
  .machine-shell.has-outcome .reel-frame {
    width: min(98vw, 2200px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - var(--outcome-reserve) - 14px) * 1.7)) !important;
  }
  .outcome-callout {
    top: calc(var(--machine-head-height) + min(57.647vw, calc(100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - 14px)) + 5px) !important;
    grid-template-columns: auto minmax(0, max-content) !important;
    column-gap: 7px !important;
    width: calc(100vw - 20px) !important;
    min-height: 45px !important;
    max-height: 50px !important;
    padding: 3px 8px 4px !important;
    border-radius: 10px !important;
  }
  .machine-shell.has-outcome .outcome-callout {
    top: calc(var(--machine-head-height) + min(57.647vw, calc(100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - var(--outcome-reserve) - 14px)) + 5px) !important;
  }
  .outcome-callout > span { font-size: clamp(6.5px, 1.7vw, 7.5px) !important; letter-spacing: .08em !important; }
  .outcome-callout > strong { font-size: clamp(16px, 4.5vw, 19px) !important; }
  .outcome-callout > small { font-size: clamp(7px, 1.85vw, 8px) !important; }

  /* Keep the phone dock and tap targets at the sizes already tuned for one-hand play. */
  .controls-panel { padding: 5px 9px max(5px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { width: 100% !important; padding-bottom: 4px !important; }
  .control-topline { width: 100% !important; grid-template-columns: minmax(0, 1fr) 59px minmax(0, 1fr) !important; gap: 5px !important; margin-top: 3px !important; }
  .control-caption { font-size: clamp(7px, 1.85vw, 8px) !important; }
  .stepper-button { width: 28px !important; height: 29px !important; flex-basis: 28px !important; }
  .bet-amount-wrap { min-width: 43px !important; }
  .bet-amount-wrap strong { font-size: clamp(20px, 5.4vw, 25px) !important; }
  .bet-presets button { min-height: 19px !important; font-size: clamp(7px, 1.8vw, 8px) !important; }
  .spin-control { width: 59px !important; }
  #spinButton.spin-button { width: 54px !important; height: 54px !important; flex-basis: 54px !important; }
  .secondary-action { min-height: 35px !important; font-size: clamp(7px, 1.9vw, 8.5px) !important; }
  .control-bottomline { gap: 4px !important; margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button { min-height: 27px !important; font-size: clamp(6.5px, 1.72vw, 8px) !important; }
  .toast { bottom: calc(var(--dock-reserve) + var(--feature-reserve) + 10px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 390px) {
  :root { --dock-reserve: 147px; --feature-reserve: 50px; }
}
@media (max-width: 350px) {
  :root { --dock-reserve: 144px; --feature-reserve: 48px; }
}
@media (max-width: 820px) and (max-height: 520px) {
  :root { --topbar-height: 42px; --machine-head-height: 19px; --dock-reserve: 110px; --feature-reserve: 41px; --outcome-reserve: 42px; }
  .machine-header { height: var(--machine-head-height) !important; min-height: var(--machine-head-height) !important; max-height: var(--machine-head-height) !important; }
  .reel-stage { height: min(57.647vw, calc(100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - 14px)) !important; }
  .reel-frame { width: min(98vw, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - 14px) * 1.7)) !important; }
  .machine-shell.has-outcome .reel-stage { height: min(57.647vw, calc(100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - var(--outcome-reserve) - 14px)) !important; }
  .machine-shell.has-outcome .reel-frame { width: min(98vw, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--machine-head-height) - var(--outcome-reserve) - 14px) * 1.7)) !important; }
  .controls-panel { padding-top: 3px !important; padding-bottom: max(3px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 2px !important; }
  .control-topline { margin-top: 1px !important; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) !important; }
  .stepper-button { width: 22px !important; height: 23px !important; flex-basis: 22px !important; }
  .bet-amount-wrap strong { font-size: 17px !important; }
  #spinButton.spin-button { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .spin-control { width: 46px !important; }
  .spin-button-label { font-size: 6px !important; }
  .secondary-action { min-height: 27px !important; }
  .control-bottomline { margin-top: 2px !important; padding-top: 2px !important; }
  .utility-button { min-height: 21px !important; font-size: 6px !important; }
}

@media (min-width: 821px) and (max-height: 700px) {
  :root { --topbar-height: 54px; --machine-head-height: 22px; --dock-reserve: 196px; --feature-reserve: 44px; --outcome-reserve: 48px; }
  .controls-panel { padding-top: 6px !important; padding-bottom: max(6px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 4px !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr) !important; margin-top: 3px !important; }
  .stepper-button { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  .bet-amount-wrap strong { font-size: 27px !important; }
  #spinButton.spin-button { width: 68px !important; height: 68px !important; flex-basis: 68px !important; }
  .spin-control { width: 74px !important; }
  .secondary-action { min-height: 36px !important; }
  .control-bottomline { margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button { min-height: 29px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .outcome-callout, .outcome-callout::before, .outcome-callout::after { animation: none !important; transition: none !important; }
}


/* ===== Consolidated source: styles-v1.9.4.css ===== */
/* PHOENIX SLOTS v1.9.4 — portrait-taller cabinet, precise symbol fit, inline outcome lane, and wider desktop controls. */
:root {
  --topbar-height: 62px;
  --machine-head-height: 25px;
  --dock-reserve: 226px;
  --feature-reserve: 58px;
  --outcome-reserve: 56px;
}

/* Keep the playfield centered and size it from the actual space left above the fixed control dock. */
.machine-header {
  width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 12px - var(--machine-head-height)) * 2.12)) !important;
  flex: 0 0 var(--machine-head-height) !important;
  height: var(--machine-head-height) !important;
  min-height: var(--machine-head-height) !important;
  max-height: var(--machine-head-height) !important;
  margin: 0 auto !important;
}
.reel-stage {
  flex: 0 0 auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: visible !important;
}
.reel-frame {
  width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 12px - var(--machine-head-height)) * 2.12)) !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 2.12 / 1 !important;
  height: auto !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
}
.machine-shell.has-outcome .reel-frame,
.machine-shell.has-outcome .machine-header {
  width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--outcome-reserve) - 17px - var(--machine-head-height)) * 2.12)) !important;
}

/* Symbols are contained by their own grid cells. The cells—not a giant transform—make them larger. */
.slot-grid {
  left: 12.2% !important;
  right: 8.2% !important;
  top: 18.8% !important;
  bottom: 17.5% !important;
  grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important;
  gap: 0 !important;
}
.tile {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.tile .symbol-art-container {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 1px !important;
  overflow: hidden !important;
}
.tile .symbol-art {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.08) !important;
  transform-origin: center !important;
}
.tile-phoenix .symbol-art { transform: scale(1.04) !important; }
.tile-wild .symbol-art { transform: scale(1.06) !important; }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.12) !important; }

/* Win/loss feedback is a normal-flow sibling directly below the reel; it never overlays a tile. */
.outcome-callout {
  position: relative !important;
  inset: auto !important;
  z-index: 16 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px 12px !important;
  width: min(calc(100vw - 24px), 1180px) !important;
  min-height: 48px !important;
  max-height: none !important;
  margin: 4px auto 6px !important;
  padding: 7px 14px !important;
  border-radius: 12px !important;
  transform: translateY(8px) scale(.99) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  text-align: center !important;
  transition: opacity .22s ease, transform .28s cubic-bezier(.18,.8,.22,1) !important;
}
.outcome-callout.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
.outcome-callout[hidden] { display: none !important; }
.outcome-callout > span { font-size: clamp(7px, .7vw, 10px) !important; line-height: 1.15 !important; }
.outcome-callout > strong { font-size: clamp(18px, 1.6vw, 28px) !important; line-height: 1.08 !important; white-space: normal !important; }
.outcome-callout > small { flex-basis: 100% !important; max-width: 100% !important; font-size: clamp(8px, .68vw, 11px) !important; line-height: 1.25 !important; white-space: normal !important; }

/* Broaden the internal desktop dock so it belongs to the game, not to a tiny centered column. */
.controls-panel {
  padding-inline: max(20px, calc((100vw - 2180px) / 2)) !important;
}
.provider-statusbar { width: min(100%, 1900px) !important; }
.status-value > span { font-size: clamp(9px, .7vw, 12px) !important; }
.status-value strong { font-size: clamp(19px, 1.55vw, 27px) !important; }
.control-topline,
.control-bottomline { width: min(100%, 1960px) !important; }
.control-topline {
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 86px) !important;
}
.control-caption { font-size: clamp(10px, .72vw, 12px) !important; }
.stepper-button { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
.bet-amount-wrap { min-width: 88px !important; }
.bet-amount-wrap strong { font-size: clamp(29px, 2.2vw, 39px) !important; }
.bet-presets { width: min(100%, 390px) !important; gap: 7px !important; }
.bet-presets button { min-height: 28px !important; min-width: 0 !important; flex: 1 1 0 !important; font-size: 11px !important; }
.spin-control { width: 112px !important; }
#spinButton.spin-button { width: 104px !important; height: 104px !important; flex-basis: 104px !important; }
.spin-button-label { font-size: 12px !important; }
.auto-control { width: min(100%, 420px) !important; }
.secondary-action { min-height: 49px !important; font-size: 11px !important; }
.control-bottomline { gap: 12px !important; margin-top: 7px !important; padding-top: 7px !important; }
.utility-button { min-height: 39px !important; font-size: 10px !important; padding: 7px 12px !important; }
.bonus-info-strip { width: min(96vw, 1900px) !important; min-height: 62px !important; }

@media (min-width: 821px) {
  .machine-header,
  .reel-frame {
    width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - 12px - var(--machine-head-height)) * 2.12)) !important;
  }
  .reel-frame { aspect-ratio: 2.12 / 1 !important; }
  .machine-shell.has-outcome .reel-frame,
  .machine-shell.has-outcome .machine-header {
    width: min(98vw, 2440px, calc((100svh - var(--topbar-height) - var(--dock-reserve) - var(--feature-reserve) - var(--outcome-reserve) - 17px - var(--machine-head-height)) * 2.12)) !important;
  }
}

/* Phones in portrait: use more of the available height without enlarging tap targets or clipping symbols. */
@media (max-width: 820px) {
  :root {
    --topbar-height: 51px;
    --machine-head-height: 23px;
    --dock-reserve: 150px;
    --feature-reserve: 52px;
    --outcome-reserve: 48px;
  }
  .machine-header {
    width: 100% !important;
    flex: 0 0 var(--machine-head-height) !important;
    height: var(--machine-head-height) !important;
    min-height: var(--machine-head-height) !important;
    max-height: var(--machine-head-height) !important;
    margin: 0 auto !important;
  }
  .reel-stage {
    flex: 0 0 auto !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 0 !important;
  }
  .reel-frame {
    width: min(98vw, 65.12svh) !important;
    height: min(46svh, 71.6vw) !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .machine-shell.has-outcome .reel-frame {
    width: min(98vw, 65.12svh) !important;
    height: min(46svh, 71.6vw) !important;
  }
  .slot-grid {
    top: 18.8% !important;
    bottom: 17.5% !important;
  }
  .tile .symbol-art-container { padding: 1px !important; }
  .tile .symbol-art { transform: scale(1.06) !important; }
  .tile-phoenix .symbol-art { transform: scale(1.02) !important; }
  .tile-wild .symbol-art { transform: scale(1.04) !important; }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.1) !important; }

  .outcome-callout {
    width: calc(100vw - 18px) !important;
    min-height: 44px !important;
    margin: 4px auto 5px !important;
    padding: 5px 8px !important;
    gap: 2px 7px !important;
    border-radius: 10px !important;
  }
  .outcome-callout > span { font-size: clamp(6.5px, 1.7vw, 8px) !important; letter-spacing: .09em !important; }
  .outcome-callout > strong { font-size: clamp(17px, 4.7vw, 21px) !important; }
  .outcome-callout > small { font-size: clamp(7px, 1.9vw, 8.5px) !important; }

  /* Keep the mobile control geometry deliberately compact and easy to tap. */
  .controls-panel { padding: 5px 9px max(5px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { width: 100% !important; padding: 0 0 4px !important; }
  .control-topline { width: 100% !important; grid-template-columns: minmax(0, 1fr) 59px minmax(0, 1fr) !important; gap: 5px !important; margin-top: 3px !important; }
  .control-caption { font-size: clamp(7px, 1.85vw, 8px) !important; }
  .stepper-button { width: 28px !important; height: 29px !important; flex-basis: 28px !important; }
  .bet-amount-wrap { min-width: 43px !important; }
  .bet-amount-wrap strong { font-size: clamp(20px, 5.4vw, 25px) !important; }
  .bet-presets { width: 100% !important; gap: 3px !important; margin-top: 4px !important; }
  .bet-presets button { min-height: 19px !important; font-size: clamp(7px, 1.8vw, 8px) !important; padding: 3px 1px !important; }
  .spin-control { width: 59px !important; }
  #spinButton.spin-button { width: 54px !important; height: 54px !important; flex-basis: 54px !important; }
  .spin-button-label { font-size: 7px !important; margin-top: 1px !important; }
  .auto-control { width: 100% !important; min-width: 0 !important; }
  .secondary-action { min-height: 35px !important; font-size: clamp(7px, 1.9vw, 8.5px) !important; padding: 5px !important; }
  .control-bottomline { width: 100% !important; gap: 4px !important; margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button { min-height: 27px !important; padding: 4px 3px !important; font-size: clamp(6.5px, 1.72vw, 8px) !important; }
  .bonus-info-strip { width: calc(100vw - 16px) !important; min-height: 47px !important; max-height: 51px !important; padding: 5px 8px !important; }
}

@media (max-width: 390px) {
  .reel-frame { width: min(98vw, 62.16svh) !important; height: min(45svh, 71.6vw) !important; }
  .machine-shell.has-outcome .reel-frame { width: min(98vw, 62.16svh) !important; height: min(45svh, 71.6vw) !important; }
}

@media (max-width: 820px) and (max-height: 520px) {
  :root { --topbar-height: 42px; --machine-head-height: 19px; --dock-reserve: 110px; --feature-reserve: 41px; --outcome-reserve: 42px; }
  .reel-frame { width: min(98vw, 85.8svh) !important; height: min(52svh, 59.4vw) !important; }
  .machine-shell.has-outcome .reel-frame { width: min(98vw, 79.2svh) !important; height: min(48svh, 59.4vw) !important; }
  .controls-panel { padding-top: 3px !important; padding-bottom: max(3px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 2px !important; }
  .control-topline { margin-top: 1px !important; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) !important; }
  .stepper-button { width: 22px !important; height: 23px !important; flex-basis: 22px !important; }
  .bet-amount-wrap strong { font-size: 17px !important; }
  #spinButton.spin-button { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .spin-control { width: 46px !important; }
  .spin-button-label { font-size: 6px !important; }
  .secondary-action { min-height: 27px !important; }
  .control-bottomline { margin-top: 2px !important; padding-top: 2px !important; }
  .utility-button { min-height: 21px !important; font-size: 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .outcome-callout,
  .outcome-callout::before,
  .outcome-callout::after { animation: none !important; transition: none !important; }
}

/* Desktop chrome is deliberately more substantial; the phone layout keeps its smaller header. */
@media (min-width: 821px) {
  :root {
    --topbar-height: 68px;
    --machine-head-height: 28px;
  }
  .brand-logo {
    width: clamp(148px, 10.8vw, 214px) !important;
    max-height: calc(var(--topbar-height) - 6px) !important;
  }
  .brand-caption { font-size: 7px !important; }
  .top-actions { gap: 9px !important; }
  .icon-button { width: 45px !important; height: 45px !important; font-size: 16px !important; }
  .lang-button { min-width: 52px !important; padding-inline: 9px !important; font-size: 11px !important; }
  .machine-caption { font-size: clamp(10px, .82vw, 14px) !important; gap: 9px !important; }
  .status-chip { min-height: 29px !important; padding: 6px 12px !important; font-size: clamp(8px, .65vw, 11px) !important; }
  .status-indicator { width: 7px !important; height: 7px !important; flex-basis: 7px !important; }
  .provider-statusbar { width: min(100%, 2040px) !important; }
  .control-topline,
  .control-bottomline { width: min(100%, 2100px) !important; }
}

/* Override legacy mobile selectors that previously pinned the result card over the cabinet. */
.machine-shell.has-outcome .outcome-callout {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}


/* ===== Consolidated source: styles-v1.9.5.css ===== */
/* PHOENIX SLOTS v1.9.5 — reel-led composition, in-flow results, full-size desktop cabinet. */
:root {
  --phoenix-dock-space: 278px;
  --phoenix-machine-head: 30px;
  --phoenix-reel-ratio: 1.95;
}

/* Lower the background's visual priority; preserve the warm scene but frame the reels as the hero. */
body::before {
  opacity: .34 !important;
  background: radial-gradient(ellipse at 50% 43%, rgba(10, 3, 10, .10) 0%, rgba(10, 3, 10, .24) 54%, rgba(8, 2, 8, .64) 100%) !important;
}
.ambient-vignette {
  background: linear-gradient(180deg, rgba(9, 2, 10, .2), rgba(9, 2, 10, .03) 27%, rgba(9, 2, 10, .14) 62%, rgba(8, 2, 8, .48)) !important;
}
.app-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh !important;
  padding: 0 !important;
}
.topbar {
  min-height: clamp(68px, 7.8svh, 88px) !important;
  padding: 4px clamp(16px, 2.2vw, 42px) !important;
  gap: clamp(12px, 1.8vw, 30px) !important;
}
.brand-logo { width: clamp(128px, 10.8vw, 190px) !important; max-height: 76px !important; }
.brand-caption { font-size: 7px !important; }
.icon-button { width: clamp(38px, 3.15vw, 50px) !important; height: clamp(38px, 3.15vw, 50px) !important; }
.game-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  justify-content: center !important;
  padding: 0 0 calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom)) !important;
}
.game-layout,
.main-column { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; }
.machine-shell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.machine-header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 8 !important;
  display: flex !important;
  flex: 0 0 var(--phoenix-machine-head) !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(97vw, calc((100svh - 430px) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-machine-head) !important;
  min-height: var(--phoenix-machine-head) !important;
  max-height: var(--phoenix-machine-head) !important;
  margin: 0 auto !important;
  padding: 0 1.2% !important;
  gap: 10px !important;
}
.machine-caption { gap: clamp(6px, .6vw, 11px) !important; font-size: clamp(9px, .72vw, 13px) !important; }
.status-chip { min-height: 26px !important; padding: 5px 10px !important; font-size: clamp(7px, .6vw, 10px) !important; }
.reel-stage {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
.reel-frame {
  position: relative !important;
  width: min(97vw, calc((100svh - 430px) * var(--phoenix-reel-ratio))) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  aspect-ratio: var(--phoenix-reel-ratio) / 1 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  transform: none !important;
  filter: drop-shadow(0 14px 32px rgba(7, 1, 6, .42)) drop-shadow(0 0 17px rgba(255, 116, 35, .17)) !important;
}
.reel-frame-art { width: 100% !important; height: 100% !important; object-fit: fill !important; }
.slot-grid {
  left: 12.2% !important;
  right: 8.2% !important;
  top: 18.8% !important;
  bottom: 17.5% !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.tile { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
.tile .symbol-art-container {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.tile .symbol-art {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.12) !important;
  transform-origin: center !important;
}
.tile-phoenix .symbol-art { transform: scale(1.06) !important; }
.tile-wild .symbol-art { transform: scale(1.08) !important; }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.17) !important; }

/* Results are displayed in the normal flow directly under the reel, before the bonus strip. */
.outcome-callout {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 10 !important;
  flex: 0 0 auto !important;
  width: min(calc(97vw - 8px), calc((100svh - 485px) * var(--phoenix-reel-ratio))) !important;
  min-height: 49px !important;
  margin: 3px auto 4px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  gap: 3px 12px !important;
  overflow: hidden !important;
  text-align: center !important;
  transform: translateY(7px) scale(.99) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.outcome-callout.is-visible { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
.outcome-callout[hidden] { display: none !important; }
.outcome-callout > span { font-size: clamp(8px, .65vw, 11px) !important; line-height: 1.1 !important; }
.outcome-callout > strong { font-size: clamp(20px, 1.65vw, 31px) !important; line-height: 1.08 !important; }
.outcome-callout > small { font-size: clamp(9px, .68vw, 12px) !important; line-height: 1.2 !important; }
.bonus-info-strip {
  position: relative !important;
  flex: 0 0 auto !important;
  width: min(97vw, 1860px) !important;
  min-height: 62px !important;
  max-height: none !important;
  margin: 2px auto 0 !important;
  padding: 9px 16px !important;
  gap: 12px !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
}
.bonus-info-copy strong { font-size: clamp(9px, .7vw, 12px) !important; }
.bonus-info-copy span { font-size: clamp(10px, .76vw, 13px) !important; }
.phoenix-meter { min-width: min(27vw, 390px) !important; }
.free-spin-counter { font-size: clamp(11px, .82vw, 14px) !important; padding: 8px 12px !important; }

/* A broad provider-like control deck: readable credits, big primary spin, balanced bet/autoplay columns. */
.controls-panel {
  position: fixed !important;
  z-index: 40 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 12px clamp(18px, 3.2vw, 62px) max(13px, env(safe-area-inset-bottom)) !important;
  border-radius: 23px 23px 0 0 !important;
  background: linear-gradient(180deg, rgba(255, 180, 81, .075), transparent 34px), linear-gradient(110deg, rgba(20, 4, 13, .985), rgba(38, 8, 16, .982) 54%, rgba(18, 3, 12, .992)) !important;
  box-shadow: 0 -17px 44px rgba(5, 1, 5, .58), inset 0 1px rgba(255, 242, 199, .12) !important;
}
.provider-statusbar { width: min(100%, 1740px) !important; padding: 4px 0 10px !important; }
.status-value { padding-inline: clamp(8px, 1.4vw, 22px) !important; gap: 4px 7px !important; }
.status-value > span { font-size: clamp(10px, .73vw, 13px) !important; }
.status-value strong { font-size: clamp(23px, 1.8vw, 34px) !important; }
.status-value small { font-size: clamp(10px, .7vw, 13px) !important; }
.control-topline,
.control-bottomline { width: min(100%, 1800px) !important; }
.control-topline {
  grid-template-columns: minmax(0, 1fr) clamp(112px, 8vw, 138px) minmax(0, 1fr) !important;
  gap: clamp(24px, 4.5vw, 86px) !important;
  margin-top: 7px !important;
}
.control-caption { font-size: clamp(10px, .75vw, 13px) !important; margin-bottom: 6px !important; }
.stepper-button { width: clamp(46px, 3.4vw, 58px) !important; height: clamp(46px, 3.4vw, 58px) !important; flex-basis: clamp(46px, 3.4vw, 58px) !important; font-size: 28px !important; }
.bet-amount-wrap { min-width: 100px !important; }
.bet-amount-wrap strong { font-size: clamp(34px, 2.5vw, 46px) !important; }
.bet-presets { width: min(100%, 470px) !important; gap: 8px !important; margin-top: 7px !important; }
.bet-presets button { min-height: 34px !important; font-size: clamp(10px, .72vw, 13px) !important; padding: 6px 10px !important; }
.spin-control { width: clamp(112px, 8vw, 138px) !important; gap: 4px !important; }
#spinButton.spin-button { width: clamp(98px, 7.2vw, 124px) !important; height: clamp(98px, 7.2vw, 124px) !important; flex-basis: clamp(98px, 7.2vw, 124px) !important; }
.spin-button-label { font-size: clamp(12px, .85vw, 15px) !important; }
.auto-control { width: min(100%, 520px) !important; }
.secondary-action { min-height: 60px !important; font-size: clamp(11px, .75vw, 14px) !important; padding: 10px 18px !important; border-radius: 16px !important; }
.control-bottomline { gap: 14px !important; margin-top: 10px !important; padding-top: 9px !important; }
.utility-button { min-height: 47px !important; padding: 8px 14px !important; font-size: clamp(10px, .7vw, 13px) !important; border-radius: 12px !important; }
.spin-button.is-free-spin { filter: drop-shadow(0 0 16px rgba(89, 235, 149, .22)) !important; }
.spin-button.is-free-spin::after { content: ""; position: absolute; inset: -3px; border: 1px solid rgba(126, 245, 160, .45); border-radius: 50%; pointer-events: none; }

@media (min-width: 821px) {
  :root { --phoenix-dock-space: 278px; --phoenix-machine-head: 30px; --phoenix-reel-ratio: 1.95; }
  .game-layout { min-height: 0 !important; }
  .machine-shell.has-outcome .reel-frame { width: min(97vw, calc((100svh - 480px) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome .machine-header { width: min(97vw, calc((100svh - 480px) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome .outcome-callout { width: min(calc(97vw - 8px), calc((100svh - 480px) * var(--phoenix-reel-ratio))) !important; }
}

/* Phones: taller cells and a compact dock, without making buttons tiny or oversized. */
@media (max-width: 820px) {
  :root { --phoenix-dock-space: 166px; --phoenix-machine-head: 23px; --phoenix-reel-ratio: 1.28; }
  .app-shell { min-height: 100svh !important; padding: 0 !important; }
  .topbar { min-height: 51px !important; padding: 4px 10px !important; gap: 5px !important; }
  .brand-logo { width: clamp(88px, 26vw, 126px) !important; max-height: 47px !important; }
  .brand-caption { display: none !important; }
  .icon-button { width: 32px !important; height: 32px !important; font-size: 13px !important; border-radius: 10px !important; }
  .lang-button { width: auto !important; min-width: 34px !important; padding-inline: 5px !important; font-size: 8px !important; }
  .wallet-label { font-size: 6px !important; }
  .wallet-block strong { font-size: clamp(15px, 4vw, 20px) !important; }
  .game-main { padding: 0 0 calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom)) !important; justify-content: center !important; }
  .game-layout, .main-column { display: flex !important; width: 100% !important; }
  .machine-shell { width: 100% !important; gap: 0 !important; }
  .machine-header {
    width: min(98vw, calc((100svh - 340px) * var(--phoenix-reel-ratio))) !important;
    flex-basis: var(--phoenix-machine-head) !important;
    height: var(--phoenix-machine-head) !important;
    min-height: var(--phoenix-machine-head) !important;
    max-height: var(--phoenix-machine-head) !important;
    padding-inline: 1% !important;
    gap: 5px !important;
  }
  .machine-caption { gap: 4px !important; font-size: clamp(7px, 1.8vw, 9px) !important; letter-spacing: .02em !important; white-space: nowrap !important; }
  .status-chip { min-height: 21px !important; padding: 3px 6px !important; gap: 4px !important; font-size: clamp(6px, 1.55vw, 7.5px) !important; white-space: nowrap !important; }
  .status-indicator { width: 5px !important; height: 5px !important; flex-basis: 5px !important; }
  .reel-frame {
    width: min(98vw, calc((100svh - 340px) * var(--phoenix-reel-ratio))) !important;
    height: auto !important;
    aspect-ratio: 1.28 / 1 !important;
  }
  .machine-shell.has-outcome .reel-frame { width: min(98vw, calc((100svh - 340px) * var(--phoenix-reel-ratio))) !important; }
  .slot-grid { top: 18.8% !important; bottom: 17.5% !important; }
  .tile .symbol-art { transform: scale(1.09) !important; }
  .tile-phoenix .symbol-art { transform: scale(1.04) !important; }
  .tile-wild .symbol-art { transform: scale(1.05) !important; }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.13) !important; }
  .outcome-callout {
    width: calc(100vw - 14px) !important;
    min-height: 43px !important;
    margin: 2px auto 3px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    gap: 2px 7px !important;
  }
  .outcome-callout > span { font-size: clamp(7px, 1.8vw, 8px) !important; }
  .outcome-callout > strong { font-size: clamp(17px, 4.4vw, 21px) !important; }
  .outcome-callout > small { font-size: clamp(7px, 1.9vw, 9px) !important; }
  .bonus-info-strip {
    width: calc(100vw - 12px) !important;
    min-height: 48px !important;
    margin-top: 1px !important;
    padding: 5px 7px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }
  .bonus-info-symbol { width: 23px !important; height: 23px !important; flex-basis: 23px !important; font-size: 11px !important; }
  .bonus-info-copy { gap: 1px !important; }
  .bonus-info-copy strong { font-size: clamp(7px, 1.85vw, 8.5px) !important; letter-spacing: .06em !important; }
  .bonus-info-copy span { font-size: clamp(7px, 1.85vw, 9px) !important; line-height: 1.2 !important; }
  .phoenix-meter { min-width: 0 !important; width: 31% !important; flex: 0 0 31% !important; }
  .phoenix-meter-head { gap: 4px !important; font-size: clamp(6px, 1.55vw, 7.5px) !important; }
  .phoenix-meter-hint, #phoenixMeterHint { display: none !important; }
  .phoenix-meter-track { height: 5px !important; margin-top: 4px !important; }
  .free-spin-counter { padding: 5px 6px !important; font-size: clamp(8px, 2vw, 10px) !important; }
  .controls-panel {
    padding: 5px 9px max(6px, env(safe-area-inset-bottom)) !important;
    border-radius: 15px 15px 0 0 !important;
    box-shadow: 0 -10px 28px rgba(5, 1, 5, .5) !important;
  }
  .provider-statusbar { width: 100% !important; padding: 2px 0 5px !important; }
  .status-value { gap: 2px 4px !important; padding-inline: 3px !important; }
  .status-value > span { font-size: clamp(7px, 1.8vw, 8.5px) !important; letter-spacing: .08em !important; }
  .status-value strong { font-size: clamp(16px, 4.15vw, 20px) !important; }
  .status-value small { font-size: 7px !important; }
  .control-topline { width: 100% !important; grid-template-columns: minmax(0, 1fr) 61px minmax(0, 1fr) !important; gap: 5px !important; margin-top: 3px !important; }
  .control-caption { font-size: clamp(7px, 1.75vw, 8px) !important; margin-bottom: 4px !important; }
  .bet-stepper { gap: 3px !important; }
  .stepper-button { width: 29px !important; height: 29px !important; flex-basis: 29px !important; font-size: 18px !important; }
  .bet-amount-wrap { min-width: 42px !important; gap: 2px !important; }
  .bet-amount-wrap strong { font-size: clamp(19px, 5vw, 23px) !important; }
  .bet-amount-wrap small { font-size: 7px !important; }
  .bet-presets { width: 100% !important; gap: 3px !important; margin-top: 4px !important; }
  .bet-presets button { min-width: 0 !important; min-height: 21px !important; flex: 1 1 0 !important; padding: 3px 1px !important; font-size: clamp(7px, 1.75vw, 8px) !important; }
  .spin-control { width: 61px !important; gap: 1px !important; }
  #spinButton.spin-button { width: 55px !important; height: 55px !important; flex-basis: 55px !important; }
  .spin-button-label { font-size: 7px !important; margin-top: 1px !important; }
  .auto-control { width: 100% !important; min-width: 0 !important; }
  .secondary-action { min-height: 37px !important; padding: 5px 4px !important; font-size: clamp(7px, 1.75vw, 8.5px) !important; border-radius: 10px !important; }
  .control-bottomline { width: 100% !important; gap: 4px !important; margin-top: 4px !important; padding-top: 4px !important; }
  .utility-button { min-height: 27px !important; padding: 4px 3px !important; font-size: clamp(6px, 1.6vw, 7.5px) !important; gap: 3px !important; border-radius: 8px !important; }
  .utility-icon { font-size: 9px !important; }
  .utility-arrow { display: none !important; }
  .toast { bottom: calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom) + 8px) !important; }
}

@media (max-width: 380px) {
  :root { --phoenix-dock-space: 160px; }
  .machine-caption { font-size: 6.8px !important; }
  .status-chip { font-size: 5.8px !important; padding-inline: 4px !important; }
  .bonus-info-copy span { font-size: 6.8px !important; }
  .phoenix-meter { width: 28% !important; flex-basis: 28% !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important; }
  .spin-control { width: 54px !important; }
  #spinButton.spin-button { width: 49px !important; height: 49px !important; flex-basis: 49px !important; }
}

@media (max-width: 820px) and (max-height: 650px) {
  :root { --phoenix-dock-space: 132px; --phoenix-machine-head: 20px; }
  .topbar { min-height: 45px !important; }
  .reel-frame { width: min(98vw, calc((100svh - 285px) * 1.28)) !important; }
  .machine-header { width: min(98vw, calc((100svh - 285px) * 1.28)) !important; }
  .controls-panel { padding-top: 3px !important; }
  .provider-statusbar { padding-bottom: 3px !important; }
  .control-topline { margin-top: 1px !important; }
  .stepper-button { width: 25px !important; height: 25px !important; flex-basis: 25px !important; }
  #spinButton.spin-button { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
  .spin-control { width: 49px !important; }
  .secondary-action { min-height: 29px !important; }
  .control-bottomline { margin-top: 2px !important; padding-top: 2px !important; }
  .utility-button { min-height: 22px !important; }
}

@media (min-width: 821px) and (max-height: 900px) {
  :root { --phoenix-dock-space: 235px; }
  .reel-frame { width: min(97vw, calc((100svh - 375px) * var(--phoenix-reel-ratio))) !important; }
  .machine-header { width: min(97vw, calc((100svh - 375px) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome .reel-frame,
  .machine-shell.has-outcome .machine-header { width: min(97vw, calc((100svh - 420px) * var(--phoenix-reel-ratio))) !important; }
  .controls-panel { padding-top: 7px !important; padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding-bottom: 6px !important; }
  .stepper-button { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  #spinButton.spin-button { width: 88px !important; height: 88px !important; flex-basis: 88px !important; }
  .secondary-action { min-height: 48px !important; }
  .control-bottomline { margin-top: 5px !important; padding-top: 5px !important; }
  .utility-button { min-height: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .spin-button.is-free-spin { filter: none !important; }
  .reel-frame { scroll-behavior: auto !important; }
}


/* ===== Consolidated source: styles-v1.9.6.css ===== */
/* PHOENIX SLOTS v1.9.6 — game-first framing, close outcome/bonus stack and adaptive control deck. */
:root {
  --phoenix-dock-space: 272px;
  --phoenix-machine-head: 27px;
  --phoenix-reel-ratio: 2.05;
  --phoenix-topbar-space: 72px;
  --phoenix-bonus-space: 52px;
  --phoenix-outcome-space: 43px;
}

/* A steady header: logo and utility controls stay in a single, deliberate row. */
.topbar {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
}
.brand { flex: 0 0 auto !important; min-width: 0 !important; }
.top-actions { display: flex !important; align-items: center !important; margin-left: auto !important; flex: 0 0 auto !important; }

/* Fit the cabinet to the space left between header, bonus strip and control deck. */
body::before { opacity: .27 !important; }
.ambient-vignette {
  background: linear-gradient(180deg, rgba(8, 1, 9, .24), rgba(8, 1, 9, .09) 30%, rgba(8, 1, 9, .28) 65%, rgba(5, 1, 6, .58)) !important;
}
.game-main {
  min-height: 0 !important;
  padding: 0 0 calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom)) !important;
}
.game-layout, .main-column {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
}
.machine-shell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
.machine-header {
  position: relative !important;
  inset: auto !important;
  z-index: 8 !important;
  display: flex !important;
  flex: 0 0 var(--phoenix-machine-head) !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - 8px - var(--phoenix-outcome-space)) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-machine-head) !important;
  min-height: var(--phoenix-machine-head) !important;
  max-height: var(--phoenix-machine-head) !important;
  margin: 0 auto !important;
  padding: 0 1.2% !important;
  gap: 8px !important;
}
.machine-caption { white-space: nowrap !important; }
.reel-stage {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
.reel-frame {
  position: relative !important;
  flex: 0 0 auto !important;
  width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - 8px) * var(--phoenix-reel-ratio))) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: var(--phoenix-reel-ratio) / 1 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  transform: none !important;
  filter: drop-shadow(0 13px 30px rgba(7, 1, 6, .48)) drop-shadow(0 0 19px rgba(255, 116, 35, .2)) !important;
}
.reel-frame-art { width: 100% !important; height: 100% !important; object-fit: fill !important; }
.slot-grid {
  left: 12.2% !important;
  right: 8.2% !important;
  top: 18.8% !important;
  bottom: 17.5% !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.tile { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
.tile .symbol-art-container {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 1px !important;
  overflow: hidden !important;
}
.tile .symbol-art {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.07) !important;
  transform-origin: center !important;
}
.tile-phoenix .symbol-art { transform: scale(1.03) !important; }
.tile-wild .symbol-art { transform: scale(1.05) !important; }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.1) !important; }

/* Result stays directly below the reels; bonus strip follows with almost no gap. */
.outcome-callout {
  position: relative !important;
  inset: auto !important;
  z-index: 10 !important;
  flex: 0 0 auto !important;
  width: min(calc(98vw - 8px), calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - 8px - var(--phoenix-outcome-space)) * var(--phoenix-reel-ratio))) !important;
  min-height: var(--phoenix-outcome-space) !important;
  margin: 2px auto 2px !important;
  padding: 5px 12px !important;
  border-radius: 12px !important;
  gap: 2px 9px !important;
  overflow: hidden !important;
  text-align: center !important;
  transform: translateY(5px) scale(.99) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.outcome-callout.is-visible { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
.outcome-callout[hidden] { display: none !important; }
.outcome-callout > span { font-size: clamp(8px, .66vw, 11px) !important; line-height: 1.1 !important; }
.outcome-callout > strong { font-size: clamp(19px, 1.55vw, 30px) !important; line-height: 1.06 !important; }
.outcome-callout > small { font-size: clamp(9px, .67vw, 12px) !important; line-height: 1.15 !important; }
.bonus-info-strip {
  position: relative !important;
  flex: 0 0 auto !important;
  width: min(98vw, 1860px) !important;
  min-height: var(--phoenix-bonus-space) !important;
  max-height: none !important;
  margin: 1px auto 0 !important;
  padding: 8px 15px !important;
  gap: 10px !important;
  border-radius: 13px !important;
  backdrop-filter: blur(13px) saturate(1.15) !important;
}
.bonus-info-copy strong { font-size: clamp(9px, .72vw, 12px) !important; }
.bonus-info-copy span { font-size: clamp(10px, .76vw, 13px) !important; line-height: 1.25 !important; }
.phoenix-meter { min-width: min(27vw, 390px) !important; }
.free-spin-counter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 78px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255, 209, 126, .62) !important;
  border-radius: 999px !important;
  background: rgba(6, 3, 9, .42) !important;
  color: #fff0c7 !important;
  font-size: clamp(11px, .82vw, 14px) !important;
  font-variant-numeric: tabular-nums !important;
}
.free-spin-counter[hidden] { display: none !important; }

/* Control deck is wider and more readable on desktop without competing with the reels. */
.controls-panel {
  position: fixed !important;
  z-index: 40 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 10px clamp(18px, 3.2vw, 62px) max(10px, env(safe-area-inset-bottom)) !important;
  border-radius: 22px 22px 0 0 !important;
  background: linear-gradient(180deg, rgba(255, 180, 81, .075), transparent 34px), linear-gradient(110deg, rgba(20, 4, 13, .99), rgba(38, 8, 16, .985) 54%, rgba(18, 3, 12, .995)) !important;
  box-shadow: 0 -17px 44px rgba(5, 1, 5, .62), inset 0 1px rgba(255, 242, 199, .14) !important;
}
.provider-statusbar { width: min(100%, 1740px) !important; padding: 3px 0 8px !important; }
.status-value { padding-inline: clamp(8px, 1.4vw, 22px) !important; gap: 4px 7px !important; }
.status-value > span { font-size: clamp(10px, .73vw, 13px) !important; }
.status-value strong { font-size: clamp(23px, 1.8vw, 34px) !important; }
.status-value small { font-size: clamp(10px, .7vw, 13px) !important; }
.control-topline, .control-bottomline { width: min(100%, 1800px) !important; }
.control-topline {
  grid-template-columns: minmax(0, 1fr) clamp(112px, 8vw, 138px) minmax(0, 1fr) !important;
  gap: clamp(24px, 4.5vw, 86px) !important;
  margin-top: 5px !important;
}
.control-caption { font-size: clamp(10px, .75vw, 13px) !important; margin-bottom: 5px !important; }
.stepper-button { width: clamp(46px, 3.4vw, 58px) !important; height: clamp(46px, 3.4vw, 58px) !important; flex-basis: clamp(46px, 3.4vw, 58px) !important; font-size: 28px !important; }
.bet-amount-wrap { min-width: 100px !important; }
.bet-amount-wrap strong { font-size: clamp(34px, 2.5vw, 46px) !important; }
.bet-presets { width: min(100%, 470px) !important; gap: 8px !important; margin-top: 6px !important; }
.bet-presets button { min-height: 34px !important; font-size: clamp(10px, .72vw, 13px) !important; padding: 6px 10px !important; }
.spin-control { width: clamp(112px, 8vw, 138px) !important; gap: 3px !important; }
#spinButton.spin-button { width: clamp(98px, 7.2vw, 124px) !important; height: clamp(98px, 7.2vw, 124px) !important; flex-basis: clamp(98px, 7.2vw, 124px) !important; }
.spin-button-label { font-size: clamp(12px, .85vw, 15px) !important; }
.auto-control { width: min(100%, 520px) !important; }
.secondary-action { min-height: 56px !important; font-size: clamp(11px, .75vw, 14px) !important; padding: 10px 18px !important; border-radius: 15px !important; }
.control-bottomline { gap: 12px !important; margin-top: 8px !important; padding-top: 7px !important; }
.utility-button { min-height: 44px !important; padding: 8px 14px !important; font-size: clamp(10px, .7vw, 13px) !important; border-radius: 12px !important; }
.spin-button.is-free-spin { filter: drop-shadow(0 0 16px rgba(89, 235, 149, .26)) !important; }
.spin-button.is-free-spin::after { content: ""; position: absolute; inset: -3px; border: 1px solid rgba(126, 245, 160, .55); border-radius: 50%; pointer-events: none; }

@media (min-width: 821px) {
  :root { --phoenix-dock-space: 272px; --phoenix-machine-head: 27px; --phoenix-reel-ratio: 2.05; --phoenix-topbar-space: 72px; --phoenix-bonus-space: 52px; --phoenix-outcome-space: 43px; }
  .topbar { min-height: var(--phoenix-topbar-space) !important; padding-inline: clamp(18px, 2.2vw, 42px) !important; }
  .brand-logo { width: clamp(128px, 10.8vw, 190px) !important; max-height: 76px !important; }
  .icon-button { width: clamp(40px, 3.15vw, 52px) !important; height: clamp(40px, 3.15vw, 52px) !important; }
  .reel-frame { width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - 8px) * var(--phoenix-reel-ratio))) !important; }
  .machine-header { width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - 8px) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome .reel-frame, .machine-shell.has-outcome .machine-header {
    width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - var(--phoenix-outcome-space) - 8px) * var(--phoenix-reel-ratio))) !important;
  }
  .machine-shell.has-outcome .outcome-callout {
    width: min(calc(98vw - 8px), calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - var(--phoenix-outcome-space) - 8px) * var(--phoenix-reel-ratio))) !important;
  }
}

@media (max-width: 820px) {
  :root { --phoenix-dock-space: 166px; --phoenix-machine-head: 20px; --phoenix-reel-ratio: 1.15; --phoenix-topbar-space: 51px; --phoenix-bonus-space: 42px; --phoenix-outcome-space: 38px; }
  .topbar { min-height: var(--phoenix-topbar-space) !important; padding: 4px 10px !important; gap: 5px !important; }
  .brand-logo { width: clamp(82px, 23vw, 120px) !important; max-height: 44px !important; }
  .brand-caption { display: none !important; }
  .top-actions { gap: 4px !important; }
  .icon-button { width: 30px !important; height: 30px !important; font-size: 12px !important; border-radius: 9px !important; }
  .lang-button { width: auto !important; min-width: 31px !important; padding-inline: 4px !important; font-size: 7.5px !important; }
  .wallet-block { display: none !important; }
  .game-main { padding: 0 0 calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom)) !important; }
  .machine-header { width: min(98vw, calc((100svh - 280px) * var(--phoenix-reel-ratio))) !important; }
  .reel-frame { width: min(98vw, calc((100svh - 285px) * var(--phoenix-reel-ratio))) !important; aspect-ratio: 1.15 / 1 !important; }
  .machine-shell.has-outcome .reel-frame, .machine-shell.has-outcome .machine-header { width: min(98vw, calc((100svh - 323px) * var(--phoenix-reel-ratio))) !important; }
  .slot-grid { top: 18.8% !important; bottom: 17.5% !important; }
  .tile .symbol-art { transform: scale(1.04) !important; }
  .tile-phoenix .symbol-art { transform: scale(1.02) !important; }
  .tile-wild .symbol-art { transform: scale(1.03) !important; }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.08) !important; }
  .outcome-callout { width: calc(100vw - 12px) !important; min-height: var(--phoenix-outcome-space) !important; margin: 1px auto 1px !important; padding: 4px 7px !important; border-radius: 9px !important; gap: 1px 6px !important; }
  .outcome-callout > span { font-size: clamp(7px, 1.8vw, 8px) !important; }
  .outcome-callout > strong { font-size: clamp(16px, 4.25vw, 20px) !important; }
  .outcome-callout > small { font-size: clamp(7px, 1.8vw, 8.5px) !important; }
  .bonus-info-strip { width: calc(100vw - 10px) !important; min-height: var(--phoenix-bonus-space) !important; margin-top: 0 !important; padding: 4px 6px !important; gap: 5px !important; border-radius: 9px !important; }
  .bonus-info-symbol { width: 22px !important; height: 22px !important; flex-basis: 22px !important; font-size: 10px !important; }
  .bonus-info-copy { gap: 1px !important; }
  .bonus-info-copy strong { font-size: clamp(7px, 1.75vw, 8.5px) !important; }
  .bonus-info-copy span { font-size: clamp(6.8px, 1.75vw, 8.5px) !important; line-height: 1.15 !important; }
  .phoenix-meter { min-width: 0 !important; width: 28% !important; flex: 0 0 28% !important; }
  .phoenix-meter-head { gap: 3px !important; font-size: clamp(5.8px, 1.5vw, 7px) !important; }
  .phoenix-meter-hint, #phoenixMeterHint { display: none !important; }
  .phoenix-meter-track { height: 4px !important; margin-top: 3px !important; }
  .free-spin-counter { min-width: 50px !important; padding: 4px 5px !important; font-size: clamp(7px, 1.8vw, 9px) !important; }
  .controls-panel { padding: 4px 8px max(5px, env(safe-area-inset-bottom)) !important; border-radius: 14px 14px 0 0 !important; }
  .provider-statusbar { padding: 1px 0 4px !important; }
  .status-value { gap: 1px 3px !important; padding-inline: 2px !important; }
  .status-value > span { font-size: clamp(6.8px, 1.7vw, 8px) !important; }
  .status-value strong { font-size: clamp(15px, 3.9vw, 19px) !important; }
  .status-value small { font-size: 6.5px !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr) !important; gap: 4px !important; margin-top: 2px !important; }
  .control-caption { font-size: clamp(6.8px, 1.65vw, 7.8px) !important; margin-bottom: 3px !important; }
  .bet-stepper { gap: 3px !important; }
  .stepper-button { width: 28px !important; height: 28px !important; flex-basis: 28px !important; font-size: 18px !important; }
  .bet-amount-wrap { min-width: 38px !important; gap: 1px !important; }
  .bet-amount-wrap strong { font-size: clamp(18px, 4.7vw, 22px) !important; }
  .bet-amount-wrap small { font-size: 6.5px !important; }
  .bet-presets { width: 100% !important; gap: 3px !important; margin-top: 3px !important; }
  .bet-presets button { min-width: 0 !important; min-height: 20px !important; flex: 1 1 0 !important; padding: 2px 1px !important; font-size: clamp(6.5px, 1.6vw, 7.8px) !important; }
  .spin-control { width: 58px !important; gap: 1px !important; }
  #spinButton.spin-button { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
  .spin-button-label { font-size: 6.8px !important; margin-top: 1px !important; }
  .secondary-action { min-height: 34px !important; padding: 4px 3px !important; font-size: clamp(6.7px, 1.65vw, 8px) !important; border-radius: 9px !important; }
  .control-bottomline { gap: 3px !important; margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button { min-height: 25px !important; padding: 3px 2px !important; font-size: clamp(6px, 1.45vw, 7.1px) !important; gap: 2px !important; border-radius: 7px !important; }
  .utility-icon { font-size: 8px !important; }
  .utility-arrow { display: none !important; }
  .toast { bottom: calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom) + 6px) !important; }
}

@media (max-width: 380px) {
  :root { --phoenix-dock-space: 158px; }
  .brand-logo { width: 78px !important; }
  .icon-button { width: 27px !important; height: 27px !important; }
  .top-actions { gap: 3px !important; }
  .machine-caption { font-size: 6.4px !important; gap: 3px !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important; }
  .spin-control { width: 52px !important; }
  #spinButton.spin-button { width: 47px !important; height: 47px !important; flex-basis: 47px !important; }
  .free-spin-counter { min-width: 43px !important; font-size: 6.5px !important; }
}

@media (max-width: 820px) and (max-height: 650px) {
  :root { --phoenix-dock-space: 132px; --phoenix-machine-head: 19px; --phoenix-topbar-space: 45px; --phoenix-bonus-space: 40px; --phoenix-outcome-space: 36px; }
  .topbar { min-height: var(--phoenix-topbar-space) !important; }
  .reel-frame { width: min(98vw, calc((100svh - 243px) * var(--phoenix-reel-ratio))) !important; }
  .machine-header { width: min(98vw, calc((100svh - 243px) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome .reel-frame, .machine-shell.has-outcome .machine-header { width: min(98vw, calc((100svh - 279px) * var(--phoenix-reel-ratio))) !important; }
  .controls-panel { padding-top: 3px !important; }
  .provider-statusbar { padding-bottom: 2px !important; }
  .control-topline { margin-top: 1px !important; }
  .stepper-button { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
  #spinButton.spin-button { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .spin-control { width: 47px !important; }
  .secondary-action { min-height: 27px !important; }
  .control-bottomline { margin-top: 2px !important; padding-top: 2px !important; }
  .utility-button { min-height: 21px !important; }
}

@media (min-width: 821px) and (max-height: 900px) {
  :root { --phoenix-dock-space: 224px; --phoenix-machine-head: 22px; --phoenix-topbar-space: 58px; --phoenix-bonus-space: 45px; --phoenix-outcome-space: 39px; }
  .topbar { min-height: var(--phoenix-topbar-space) !important; padding-block: 3px !important; }
  .reel-frame { width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - 8px) * var(--phoenix-reel-ratio))) !important; }
  .machine-header { width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - 8px) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome .reel-frame, .machine-shell.has-outcome .machine-header { width: min(98vw, calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - var(--phoenix-outcome-space) - 8px) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome .outcome-callout { width: min(calc(98vw - 8px), calc((100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-bonus-space) - var(--phoenix-outcome-space) - 8px) * var(--phoenix-reel-ratio))) !important; }
  .controls-panel { padding: 6px 18px max(6px, env(safe-area-inset-bottom)) !important; }
  .provider-statusbar { padding: 1px 0 5px !important; }
  .status-value strong { font-size: clamp(21px, 2vw, 29px) !important; }
  .control-topline { gap: clamp(18px, 3vw, 55px) !important; margin-top: 3px !important; }
  .control-caption { margin-bottom: 4px !important; }
  .stepper-button { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .bet-amount-wrap strong { font-size: clamp(30px, 2.4vw, 38px) !important; }
  .bet-presets { margin-top: 4px !important; }
  .bet-presets button { min-height: 29px !important; }
  #spinButton.spin-button { width: 78px !important; height: 78px !important; flex-basis: 78px !important; }
  .spin-control { width: 91px !important; }
  .secondary-action { min-height: 43px !important; }
  .control-bottomline { margin-top: 5px !important; padding-top: 4px !important; }
  .utility-button { min-height: 36px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .spin-button.is-free-spin { filter: none !important; }
  .reel-frame { scroll-behavior: auto !important; }
}


/* ===== Consolidated source: styles-v1.9.7.css ===== */
/* PHOENIX SLOTS v1.9.7 — one authoritative layout layer. Explicit grid rows prevent result/bonus overlays. */
:root {
  --phoenix-topbar-space: 66px;
  --phoenix-dock-space: 220px;
  --phoenix-machine-head: 24px;
  --phoenix-outcome-space: 38px;
  --phoenix-bonus-space: 44px;
  --phoenix-reel-ratio: 2.095;
  --phoenix-stage-height: min(80svh, calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 9px));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { min-height: 100svh; background: #130710; }
body::before { opacity: .43 !important; background: radial-gradient(ellipse at 50% 38%, rgba(18, 4, 14, .18), rgba(8, 2, 9, .58) 82%, rgba(4, 1, 5, .78)) !important; }
.ambient-vignette { background: linear-gradient(180deg, rgba(8, 1, 9, .30), rgba(8, 1, 9, .20) 35%, rgba(8, 1, 9, .38) 68%, rgba(5, 1, 6, .70)) !important; }
.embers { opacity: .12 !important; }

.app-shell {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.topbar {
  position: relative !important;
  z-index: 20 !important;
  display: flex !important;
  flex: 0 0 var(--phoenix-topbar-space) !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(8px, 1.5vw, 24px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--phoenix-topbar-space) !important;
  height: var(--phoenix-topbar-space) !important;
  padding: 5px clamp(12px, 2.1vw, 38px) !important;
  border-bottom: 1px solid rgba(255, 197, 104, .18) !important;
  background: linear-gradient(90deg, rgba(16, 4, 13, .97), rgba(27, 6, 16, .93), rgba(15, 3, 12, .97)) !important;
}
.brand { display: flex !important; align-items: center !important; flex: 0 0 auto !important; min-width: 0 !important; gap: 9px !important; }
.brand-logo { width: clamp(106px, 10vw, 168px) !important; max-height: calc(var(--phoenix-topbar-space) - 10px) !important; object-fit: contain !important; }
.brand-caption { font-size: clamp(7px, .55vw, 10px) !important; letter-spacing: .18em !important; }
.wallet-block { display: flex !important; align-items: baseline !important; gap: 5px !important; margin-left: auto !important; margin-right: clamp(4px, 1.5vw, 24px) !important; white-space: nowrap !important; }
.wallet-label { font-size: 10px !important; letter-spacing: .14em !important; }
.wallet-block strong { font-size: clamp(17px, 1.5vw, 25px) !important; font-variant-numeric: tabular-nums !important; }
.top-actions { display: flex !important; flex: 0 0 auto !important; align-items: center !important; gap: clamp(5px, .7vw, 12px) !important; margin-left: 0 !important; }
.icon-button { width: clamp(34px, 3vw, 46px) !important; height: clamp(34px, 3vw, 46px) !important; min-width: 0 !important; border-radius: 12px !important; font-size: clamp(13px, .9vw, 18px) !important; }
.lang-button { min-width: clamp(38px, 3.2vw, 50px) !important; width: auto !important; padding-inline: 7px !important; }

.game-main {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}
.game-layout, .main-column {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.machine-shell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--phoenix-machine-head) var(--phoenix-stage-height) var(--phoenix-outcome-space) var(--phoenix-bonus-space) !important;
  align-content: center !important;
  align-items: stretch !important;
  justify-items: center !important;
  row-gap: 3px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.machine-shell::before, .machine-shell::after, .machine-top-ornament { display: none !important; }
.machine-shell > .machine-header,
.machine-shell > .reel-stage,
.machine-shell > .outcome-callout,
.machine-shell > .bonus-info-strip { grid-column: 1 !important; position: relative !important; inset: auto !important; margin-block: 0 !important; transform: none !important; }
.machine-header {
  grid-row: 1 !important;
  display: flex !important;
  flex: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(98vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-machine-head) !important;
  min-height: var(--phoenix-machine-head) !important;
  max-height: var(--phoenix-machine-head) !important;
  padding: 0 1.5% !important;
  gap: 10px !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.machine-caption { display: flex !important; align-items: center !important; gap: 7px !important; font-size: clamp(8px, .68vw, 12px) !important; white-space: nowrap !important; letter-spacing: .035em !important; }
.status-chip { min-height: 22px !important; padding: 4px 9px !important; font-size: clamp(7px, .58vw, 10px) !important; white-space: nowrap !important; }

.reel-stage {
  grid-row: 2 !important;
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--phoenix-stage-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.stage-glow { inset: 10% 10% 6% !important; opacity: .75 !important; filter: blur(22px) !important; }
.reel-frame {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: min(98vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-stage-height) !important;
  min-width: 0 !important;
  max-width: 98vw !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: drop-shadow(0 12px 26px rgba(5, 1, 6, .54)) drop-shadow(0 0 16px rgba(255, 103, 34, .18)) !important;
}
.reel-frame-art { position: absolute !important; inset: 0 !important; z-index: 5 !important; display: block !important; width: 100% !important; height: 100% !important; object-fit: fill !important; pointer-events: none !important; }
.slot-grid {
  position: absolute !important;
  z-index: 1 !important;
  left: 11.7% !important;
  right: 8.1% !important;
  top: 17.2% !important;
  bottom: 15.7% !important;
  display: grid !important;
  grid-template-columns: 20.15fr 19.39fr 23.38fr 18.82fr 18.26fr !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.tile { position: relative !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; }
.tile .symbol-art-container { display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 2px !important; overflow: hidden !important; }
.tile .symbol-art { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; transform: scale(1.025) !important; transform-origin: center !important; }
.tile-phoenix .symbol-art { transform: scale(1.01) !important; }
.tile-wild .symbol-art { transform: scale(1.02) !important; }
.tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.055) !important; }
.reel-shine { pointer-events: none !important; }

/* Always reserve a result row; it can never be positioned on top of the grid. */
.machine-shell > .outcome-callout {
  grid-row: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px 11px !important;
  width: min(96vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-outcome-space) !important;
  min-height: var(--phoenix-outcome-space) !important;
  max-height: var(--phoenix-outcome-space) !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity .18s ease !important;
  border-radius: 10px !important;
  text-align: center !important;
}
.machine-shell > .outcome-callout[hidden] { display: flex !important; visibility: hidden !important; opacity: 0 !important; }
.machine-shell > .outcome-callout:not([hidden]) { visibility: visible !important; }
.machine-shell > .outcome-callout.is-visible { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.outcome-callout > span { font-size: clamp(8px, .63vw, 10px) !important; line-height: 1.05 !important; }
.outcome-callout > strong { font-size: clamp(17px, 1.35vw, 26px) !important; line-height: 1.04 !important; }
.outcome-callout > small { flex: 0 1 auto !important; max-width: 100% !important; font-size: clamp(8px, .62vw, 11px) !important; line-height: 1.1 !important; }

.machine-shell > .bonus-info-strip {
  grid-row: 4 !important;
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) minmax(160px, 25%) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(96vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-bonus-space) !important;
  min-height: var(--phoenix-bonus-space) !important;
  max-height: var(--phoenix-bonus-space) !important;
  padding: 7px 13px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  transform: none !important;
  z-index: 8 !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
}
.bonus-info-symbol { width: 30px !important; height: 30px !important; flex-basis: 30px !important; display: grid !important; place-items: center !important; }
.bonus-info-copy { display: flex !important; flex-direction: column !important; min-width: 0 !important; gap: 3px !important; }
.bonus-info-copy strong { overflow: hidden !important; font-size: clamp(9px, .72vw, 12px) !important; line-height: 1.1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.bonus-info-copy span { overflow: hidden !important; font-size: clamp(9px, .7vw, 12px) !important; line-height: 1.15 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.phoenix-meter { display: flex !important; flex-direction: column !important; min-width: 0 !important; width: 100% !important; gap: 4px !important; }
.phoenix-meter-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 5px !important; font-size: clamp(7px, .6vw, 10px) !important; white-space: nowrap !important; }
.phoenix-meter-head strong { font-size: clamp(9px, .74vw, 12px) !important; font-variant-numeric: tabular-nums !important; }
.phoenix-meter-track { height: 5px !important; margin-top: 0 !important; }
#phoenixMeterHint { display: none !important; }
.free-spin-counter { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 72px !important; padding: 6px 8px !important; font-size: clamp(9px, .72vw, 12px) !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
.free-spin-counter[hidden] { display: none !important; }

/* One provider-style bottom control deck, with status, bet, spin/autoplay and utility actions. */
.machine-shell > .controls-panel {
  position: fixed !important;
  z-index: 40 !important;
  inset: auto 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom)) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 7px clamp(16px, 2.5vw, 44px) max(6px, env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(255, 202, 120, .24) !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background: linear-gradient(180deg, rgba(69, 27, 24, .98), rgba(28, 7, 18, .99) 22%, rgba(18, 3, 13, 1)) !important;
  box-shadow: 0 -12px 35px rgba(4, 1, 6, .48), inset 0 1px rgba(255, 239, 196, .17) !important;
  overflow: visible !important;
}
.controls-panel::before { top: -1px !important; width: min(380px, 35vw) !important; height: 2px !important; opacity: .72 !important; }
.provider-statusbar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: center !important; width: min(100%, 1700px) !important; min-height: 43px !important; margin: 0 !important; padding: 2px 0 5px !important; }
.status-value { display: grid !important; grid-template-columns: auto auto !important; align-content: center !important; justify-content: center !important; align-items: baseline !important; gap: 1px 5px !important; padding: 0 clamp(4px, .9vw, 18px) !important; }
.status-value > span { grid-column: 1 / -1 !important; font-size: clamp(8px, .68vw, 11px) !important; line-height: 1.05 !important; }
.status-value strong { font-size: clamp(19px, 1.7vw, 30px) !important; line-height: 1.02 !important; font-variant-numeric: tabular-nums !important; }
.status-value small { font-size: clamp(8px, .66vw, 11px) !important; }
.control-topline, .control-bottomline { width: min(100%, 1740px) !important; }
.control-topline { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(94px, 7.5vw, 112px) minmax(0, 1fr) !important; align-items: center !important; gap: clamp(18px, 4vw, 68px) !important; margin: 1px auto 0 !important; }
.bet-control { min-width: 0 !important; }
.control-caption { margin: 0 0 3px !important; font-size: clamp(9px, .7vw, 12px) !important; line-height: 1 !important; }
.bet-stepper { display: flex !important; align-items: center !important; gap: 7px !important; }
.stepper-button { width: clamp(34px, 3vw, 44px) !important; height: clamp(34px, 3vw, 44px) !important; flex: 0 0 clamp(34px, 3vw, 44px) !important; font-size: clamp(20px, 1.6vw, 26px) !important; }
.bet-amount-wrap { min-width: clamp(60px, 5.4vw, 86px) !important; gap: 3px !important; }
.bet-amount-wrap strong { font-size: clamp(25px, 2.25vw, 37px) !important; line-height: 1 !important; }
.bet-amount-wrap small { font-size: clamp(8px, .65vw, 11px) !important; }
.bet-presets { display: flex !important; width: min(100%, 390px) !important; gap: 5px !important; margin-top: 4px !important; }
.bet-presets button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 24px !important; padding: 3px 5px !important; font-size: clamp(8px, .65vw, 11px) !important; }
.spin-control { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 0 !important; }
#spinButton.spin-button { width: clamp(68px, 6vw, 86px) !important; height: clamp(68px, 6vw, 86px) !important; flex: 0 0 clamp(68px, 6vw, 86px) !important; }
.spin-button-label { margin-top: 1px !important; font-size: clamp(8px, .72vw, 11px) !important; line-height: 1.05 !important; }
.auto-control { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; min-width: 0 !important; }
.secondary-action { width: min(100%, 460px) !important; min-height: 43px !important; padding: 8px 12px !important; font-size: clamp(9px, .75vw, 12px) !important; }
.control-bottomline { display: flex !important; align-items: stretch !important; justify-content: center !important; gap: 8px !important; margin: 5px auto 0 !important; padding: 5px 0 0 !important; }
.utility-button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 32px !important; padding: 5px 10px !important; font-size: clamp(8px, .65vw, 11px) !important; }
.result-banner, #recentResults { display: none !important; }
.toast { bottom: calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom) + 8px) !important; z-index: 80 !important; }

@media (min-width: 821px) and (max-height: 780px) {
  :root {
    --phoenix-topbar-space: 56px;
    --phoenix-dock-space: 176px;
    --phoenix-machine-head: 20px;
    --phoenix-outcome-space: 34px;
    --phoenix-bonus-space: 40px;
    --phoenix-stage-height: min(72svh, calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 9px));
  }
  .provider-statusbar { min-height: 35px !important; padding: 0 0 3px !important; }
  .status-value strong { font-size: clamp(17px, 1.6vw, 25px) !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) !important; gap: clamp(14px, 3vw, 42px) !important; }
  #spinButton.spin-button { width: 66px !important; height: 66px !important; flex-basis: 66px !important; }
  .spin-control { width: 78px !important; }
  .stepper-button { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  .bet-presets button { min-height: 21px !important; }
  .secondary-action { min-height: 34px !important; }
  .control-bottomline { margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button { min-height: 26px !important; }
}

@media (max-width: 820px) {
  :root {
    --phoenix-topbar-space: 52px;
    --phoenix-dock-space: 174px;
    --phoenix-machine-head: 18px;
    --phoenix-outcome-space: 38px;
    --phoenix-bonus-space: 58px;
    --phoenix-reel-ratio: 1.25;
    --phoenix-stage-height: min(56svh, calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 6px), calc(98vw / var(--phoenix-reel-ratio)));
  }
  .topbar { gap: 4px !important; padding: 3px 9px !important; }
  .brand { gap: 0 !important; }
  .brand-logo { width: clamp(78px, 24vw, 112px) !important; max-height: 45px !important; }
  .brand-caption, .wallet-block { display: none !important; }
  .top-actions { gap: 4px !important; }
  .icon-button { width: 31px !important; height: 31px !important; flex-basis: 31px !important; border-radius: 9px !important; font-size: 12px !important; }
  .lang-button { min-width: 31px !important; width: auto !important; padding-inline: 4px !important; font-size: 8px !important; }
  .machine-header { width: min(98vw, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; padding-inline: 1% !important; gap: 4px !important; }
  .machine-caption { gap: 4px !important; font-size: clamp(6.5px, 1.75vw, 8px) !important; letter-spacing: 0 !important; }
  .mini-sun { font-size: 9px !important; }
  .status-chip { min-height: 18px !important; padding: 3px 5px !important; gap: 4px !important; font-size: clamp(5.8px, 1.45vw, 7px) !important; }
  .status-indicator { width: 5px !important; height: 5px !important; flex-basis: 5px !important; }
  .reel-frame { width: min(98vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; height: var(--phoenix-stage-height) !important; }
  .slot-grid { left: 11.5% !important; right: 7.8% !important; top: 16.8% !important; bottom: 14.6% !important; }
  .tile .symbol-art-container { padding: 1px !important; }
  .tile .symbol-art { transform: scale(1.025) !important; }
  .tile-phoenix .symbol-art, .tile-wild .symbol-art { transform: scale(1.01) !important; }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.045) !important; }
  .machine-shell > .outcome-callout { width: calc(100vw - 12px) !important; padding: 3px 7px !important; gap: 1px 6px !important; border-radius: 8px !important; }
  .outcome-callout > span { font-size: clamp(6.5px, 1.65vw, 8px) !important; letter-spacing: .06em !important; }
  .outcome-callout > strong { font-size: clamp(15px, 4.3vw, 20px) !important; }
  .outcome-callout > small { font-size: clamp(6.5px, 1.7vw, 8px) !important; }
  .machine-shell > .bonus-info-strip { grid-template-columns: 25px minmax(0, 1fr) minmax(76px, 27%) auto !important; gap: 5px !important; width: calc(100vw - 10px) !important; padding: 4px 6px !important; border-radius: 8px !important; }
  .bonus-info-symbol { width: 24px !important; height: 24px !important; flex-basis: 24px !important; font-size: 10px !important; }
  .bonus-info-copy { gap: 2px !important; }
  .bonus-info-copy strong { font-size: clamp(6.8px, 1.7vw, 8px) !important; letter-spacing: .03em !important; }
  .bonus-info-copy span { font-size: clamp(6.5px, 1.7vw, 8px) !important; line-height: 1.1 !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
  .phoenix-meter-head { gap: 3px !important; font-size: clamp(5.8px, 1.45vw, 7px) !important; }
  .phoenix-meter-head strong { font-size: clamp(7px, 1.65vw, 9px) !important; }
  .phoenix-meter-track { height: 4px !important; }
  .free-spin-counter { min-width: 44px !important; padding: 4px 5px !important; font-size: clamp(7px, 1.7vw, 9px) !important; }
  .machine-shell > .controls-panel { padding: 5px 8px max(5px, env(safe-area-inset-bottom)) !important; border-radius: 14px 14px 0 0 !important; }
  .provider-statusbar { min-height: 35px !important; padding: 1px 0 4px !important; }
  .status-value { gap: 1px 2px !important; padding-inline: 2px !important; }
  .status-value > span { font-size: clamp(6.5px, 1.7vw, 8px) !important; }
  .status-value strong { font-size: clamp(15px, 3.7vw, 19px) !important; }
  .status-value small { font-size: 6.5px !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr) !important; gap: 4px !important; margin-top: 1px !important; }
  .control-caption { font-size: clamp(6.6px, 1.65vw, 7.8px) !important; margin-bottom: 3px !important; }
  .bet-stepper { gap: 3px !important; }
  .stepper-button { width: 27px !important; height: 27px !important; flex-basis: 27px !important; font-size: 18px !important; }
  .bet-amount-wrap { min-width: 37px !important; gap: 1px !important; }
  .bet-amount-wrap strong { font-size: clamp(17px, 4.5vw, 21px) !important; }
  .bet-amount-wrap small { font-size: 6.2px !important; }
  .bet-presets { gap: 3px !important; margin-top: 3px !important; }
  .bet-presets button { min-height: 20px !important; padding: 2px 1px !important; font-size: clamp(6.3px, 1.55vw, 7.4px) !important; }
  .spin-control { width: 58px !important; }
  #spinButton.spin-button { width: 51px !important; height: 51px !important; flex-basis: 51px !important; }
  .spin-button-label { font-size: 6.5px !important; margin-top: 1px !important; }
  .secondary-action { min-height: 33px !important; padding: 4px 3px !important; font-size: clamp(6.5px, 1.6vw, 7.8px) !important; border-radius: 8px !important; }
  .control-bottomline { gap: 3px !important; margin-top: 3px !important; padding-top: 3px !important; }
  .utility-button { min-height: 24px !important; padding: 3px 2px !important; gap: 2px !important; font-size: clamp(5.8px, 1.45vw, 7px) !important; border-radius: 7px !important; }
  .utility-icon { font-size: 8px !important; }
  .utility-arrow { display: none !important; }
  .toast { bottom: calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom) + 6px) !important; }
}

@media (max-width: 380px) {
  :root { --phoenix-dock-space: 166px; --phoenix-topbar-space: 49px; }
  .brand-logo { width: 74px !important; }
  .icon-button { width: 28px !important; height: 29px !important; flex-basis: 28px !important; }
  .top-actions { gap: 3px !important; }
  .machine-caption { font-size: 6px !important; }
  .machine-shell > .bonus-info-strip { grid-template-columns: 22px minmax(0, 1fr) minmax(68px, 26%) auto !important; gap: 4px !important; padding-inline: 4px !important; }
  .bonus-info-symbol { width: 21px !important; height: 21px !important; flex-basis: 21px !important; }
  .control-topline { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important; }
  .spin-control { width: 52px !important; }
  #spinButton.spin-button { width: 46px !important; height: 46px !important; flex-basis: 46px !important; }
  .status-value strong { font-size: 14px !important; }
}

@media (max-width: 820px) and (max-height: 650px) {
  :root {
    --phoenix-topbar-space: 45px;
    --phoenix-dock-space: 136px;
    --phoenix-machine-head: 17px;
    --phoenix-outcome-space: 33px;
    --phoenix-bonus-space: 39px;
    --phoenix-stage-height: min(50svh, calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 6px), calc(98vw / var(--phoenix-reel-ratio)));
  }
  .brand-logo { max-height: 40px !important; }
  .provider-statusbar { min-height: 29px !important; }
  .status-value strong { font-size: clamp(12px, 3.5vw, 16px) !important; }
  .stepper-button { width: 23px !important; height: 23px !important; flex-basis: 23px !important; }
  .bet-amount-wrap strong { font-size: 16px !important; }
  #spinButton.spin-button { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .spin-control { width: 44px !important; }
  .secondary-action { min-height: 26px !important; }
  .utility-button { min-height: 19px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.is-winning .symbol-art-container .symbol-art { transform: none !important; }
  .spin-button.is-free-spin { filter: none !important; }
}


/* v1.9.7 hard guards: legacy !important rules from earlier releases must not resize or overlay the reels after a result. */
.machine-shell.has-outcome > .reel-stage { height: var(--phoenix-stage-height) !important; min-height: var(--phoenix-stage-height) !important; max-height: var(--phoenix-stage-height) !important; position: relative !important; inset: auto !important; transform: none !important; }
.machine-shell.has-outcome > .reel-stage > .reel-frame,
.machine-shell.has-outcome > .reel-stage .reel-frame { width: min(98vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; height: var(--phoenix-stage-height) !important; aspect-ratio: auto !important; position: relative !important; inset: auto !important; transform: none !important; margin: 0 auto !important; }
.machine-shell.has-outcome > .machine-header { width: min(98vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; height: var(--phoenix-machine-head) !important; min-height: var(--phoenix-machine-head) !important; position: relative !important; inset: auto !important; transform: none !important; }
.machine-shell.has-outcome > .outcome-callout { position: relative !important; grid-row: 3 !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; width: min(96vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; margin: 0 !important; }
.machine-shell.has-outcome > .bonus-info-strip { position: relative !important; grid-row: 4 !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 !important; }
.machine-shell.has-outcome > .outcome-callout[hidden] { display: flex !important; visibility: hidden !important; opacity: 0 !important; }
@media (max-width: 820px) {
  :root { --phoenix-reel-ratio: 1.25; --phoenix-stage-height: min(56svh, calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 6px), calc(98vw / var(--phoenix-reel-ratio))); }
  .machine-shell.has-outcome > .reel-stage > .reel-frame, .machine-shell.has-outcome > .reel-stage .reel-frame { width: min(98vw, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; height: var(--phoenix-stage-height) !important; }
  .machine-shell.has-outcome > .machine-header { width: min(98vw, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome > .outcome-callout { width: calc(100vw - 12px) !important; }
  .machine-shell.has-outcome > .bonus-info-strip { width: calc(100vw - 10px) !important; }
}


/* Release 1.9.7 final cascade reset: older layout revisions are intentionally superseded here. */
.machine-shell.has-outcome {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--phoenix-machine-head) var(--phoenix-stage-height) var(--phoenix-outcome-space) var(--phoenix-bonus-space) !important;
  row-gap: 3px !important;
  align-content: center !important;
  height: auto !important;
  max-height: none !important;
}
.machine-shell.has-outcome > .reel-stage,
.machine-shell.has-outcome > .reel-stage .reel-frame,
.machine-shell.has-outcome > .machine-header,
.machine-shell.has-outcome > .outcome-callout,
.machine-shell.has-outcome > .bonus-info-strip {
  flex: none !important;
  inset: auto !important;
  position: relative !important;
  transform: none !important;
  margin-block: 0 !important;
}
.machine-shell.has-outcome > .reel-stage .reel-frame {
  width: min(98vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-stage-height) !important;
  max-width: 98vw !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}
.machine-shell.has-outcome > .outcome-callout {
  grid-row: 3 !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  width: min(96vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-outcome-space) !important;
  min-height: var(--phoenix-outcome-space) !important;
  max-height: var(--phoenix-outcome-space) !important;
  padding: 4px 12px !important;
}
.machine-shell.has-outcome > .bonus-info-strip {
  grid-row: 4 !important;
  width: min(96vw, 1880px, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important;
  height: var(--phoenix-bonus-space) !important;
  min-height: var(--phoenix-bonus-space) !important;
  max-height: var(--phoenix-bonus-space) !important;
}
@media (min-width: 821px) and (min-height: 781px) {
  .provider-statusbar { min-height: 44px !important; }
  .status-value strong { font-size: clamp(22px, 1.8vw, 34px) !important; }
  .stepper-button { width: clamp(40px, 3.4vw, 50px) !important; height: clamp(40px, 3.4vw, 50px) !important; flex-basis: clamp(40px, 3.4vw, 50px) !important; }
  .bet-presets button { min-height: 28px !important; font-size: clamp(9px, .7vw, 12px) !important; }
  #spinButton.spin-button { width: clamp(88px, 7.5vw, 104px) !important; height: clamp(88px, 7.5vw, 104px) !important; flex-basis: clamp(88px, 7.5vw, 104px) !important; }
  .spin-control { width: clamp(104px, 8vw, 124px) !important; }
  .secondary-action { min-height: 50px !important; font-size: clamp(11px, .8vw, 14px) !important; }
  .utility-button { min-height: 36px !important; font-size: clamp(9px, .7vw, 12px) !important; }
}
@media (max-width: 820px) {
  .machine-shell.has-outcome { grid-template-rows: var(--phoenix-machine-head) var(--phoenix-stage-height) var(--phoenix-outcome-space) var(--phoenix-bonus-space) !important; }
  .machine-shell.has-outcome > .reel-stage { height: var(--phoenix-stage-height) !important; min-height: var(--phoenix-stage-height) !important; max-height: var(--phoenix-stage-height) !important; }
  .machine-shell.has-outcome > .reel-stage .reel-frame { width: min(98vw, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; height: var(--phoenix-stage-height) !important; }
  .machine-shell.has-outcome > .machine-header { width: min(98vw, calc(var(--phoenix-stage-height) * var(--phoenix-reel-ratio))) !important; }
  .machine-shell.has-outcome > .outcome-callout { width: calc(100vw - 12px) !important; }
  .machine-shell.has-outcome > .bonus-info-strip { width: calc(100vw - 10px) !important; }
  .tile .symbol-art { transform: scale(1.06) !important; }
  .tile-phoenix .symbol-art, .tile-wild .symbol-art { transform: scale(1.04) !important; }
  .tile.is-winning .symbol-art-container .symbol-art { transform: scale(1.075) !important; }
}

/* The result card may be as wide as the cabinet; never inherit legacy max-width caps. */
.machine-shell > .outcome-callout,
.machine-shell.has-outcome > .outcome-callout {
  max-width: none !important;
}


@media (max-width: 820px) and (min-height: 651px) {
  .machine-shell { position: relative !important; top: 22px !important; transform: none !important; }
  .machine-shell.has-outcome { position: relative !important; top: 22px !important; transform: none !important; }
  .machine-shell > .bonus-info-strip,
  .machine-shell.has-outcome > .bonus-info-strip {
    height: var(--phoenix-bonus-space) !important;
    min-height: var(--phoenix-bonus-space) !important;
    max-height: var(--phoenix-bonus-space) !important;
    grid-template-columns: 24px minmax(0, 1fr) minmax(76px, 25%) auto !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .machine-shell > .bonus-info-strip .phoenix-meter,
  .machine-shell.has-outcome > .bonus-info-strip .phoenix-meter {
    align-self: center !important;
    min-height: 20px !important;
    overflow: visible !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-copy,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-copy {
    min-height: 0 !important;
    align-self: center !important;
  }
}
@media (max-width: 820px) and (max-height: 650px) {
  .machine-shell, .machine-shell.has-outcome { top: 0 !important; transform: none !important; }
}

body::before { opacity: .34 !important; }
.ambient-vignette { background: linear-gradient(180deg, rgba(8, 1, 9, .44), rgba(8, 1, 9, .34) 35%, rgba(8, 1, 9, .52) 68%, rgba(5, 1, 6, .76)) !important; }


/* PHOENIX SLOTS 1.9.8 — responsive high-resolution reel frames and equal cell alignment. */
.reel-frame-picture {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.reel-frame-picture > .reel-frame-art {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  filter: drop-shadow(0 8px 16px rgba(5, 1, 6, .42)) drop-shadow(0 0 10px rgba(255, 112, 34, .15)) !important;
}
/* The wide supplied frame has one unbroken window; the two subtle dividers rebuild its exact 5 × 3 cell layout. */
.reel-row-guides {
  position: absolute !important;
  z-index: 4 !important;
  left: 10.8% !important;
  right: 10.8% !important;
  top: 17.1% !important;
  bottom: 23.3% !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.reel-row-guides::before,
.reel-row-guides::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(255, 184, 54, .18), rgba(255, 201, 89, .72) 6%, rgba(255, 178, 55, .67) 94%, rgba(255, 184, 54, .18)) !important;
  box-shadow: 0 1px 0 rgba(35, 8, 12, .86), 0 0 4px rgba(255, 163, 39, .2) !important;
}
.reel-row-guides::before { top: 33.3333% !important; }
.reel-row-guides::after { top: 66.6667% !important; }
/* Do not apply the legacy optical shifts: every reel and every row must have the same centre. */
.slot-grid {
  left: 10.8% !important;
  right: 10.8% !important;
  top: 17.1% !important;
  bottom: 23.3% !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.slot-grid > .reel {
  display: grid !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
}
.slot-grid > .reel + .reel { border-left: 0 !important; }
.slot-grid .tile {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
}
.slot-grid .tile .symbol-art-container {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}
.slot-grid .tile .symbol-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  transform: none !important;
  transform-origin: center center !important;
}
.slot-grid .tile-phoenix .symbol-art,
.slot-grid .tile-wild .symbol-art,
.slot-grid .tile.is-winning .symbol-art-container .symbol-art {
  transform: none !important;
}
.reel[data-col="3"] .symbol-art-container { transform: none !important; }

@media (max-width: 820px) {
  .reel-row-guides { display: none !important; }
  .slot-grid {
    left: 10.7% !important;
    right: 10.5% !important;
    top: 17% !important;
    bottom: 14% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .slot-grid > .reel { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
  .slot-grid .tile .symbol-art-container { padding: 0 !important; }
  .slot-grid .tile .symbol-art { transform: none !important; }
}
@media (max-width: 380px) {
  .slot-grid {
    left: 10.8% !important;
    right: 10.6% !important;
    top: 17.2% !important;
    bottom: 14.2% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reel-row-guides::before, .reel-row-guides::after { transition: none !important; }
}


/* PHOENIX SLOTS v1.9.9 — audio balance, fixed spin control, three-step provider-style speed selector. */
#spinButton:not(:disabled) .spin-button-art,
#spinButton:hover:not(:disabled) .spin-button-art,
#spinButton:not(:disabled):not(.is-stopping) .spin-button-art { animation: none !important; }
#spinButton .spin-button-art { transition: filter .18s ease !important; }
#spinButton:hover:not(:disabled) .spin-button-art { transform: none !important; filter: brightness(1.08) drop-shadow(0 0 12px rgba(255,138,34,.4)) !important; }
#spinButton:active:not(:disabled) .spin-button-art { transform: scale(.97) !important; }
.phoenix-top-button { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-width: 42px; min-height: 40px; padding: 0 11px !important; border: 1px solid rgba(255,190,91,.48) !important; border-radius: 12px !important; color: #ffe8b3 !important; background: linear-gradient(145deg,rgba(78,22,22,.82),rgba(25,7,17,.88)) !important; box-shadow: inset 0 1px rgba(255,242,203,.12), 0 4px 13px rgba(0,0,0,.24), 0 0 13px rgba(255,94,32,.055) !important; backdrop-filter: blur(8px); transition: border-color .18s, background .18s, box-shadow .18s; }
.phoenix-top-button:hover:not(:disabled) { border-color: rgba(255,220,136,.9) !important; background: linear-gradient(145deg,rgba(112,35,26,.9),rgba(42,9,20,.94)) !important; box-shadow: inset 0 1px rgba(255,242,203,.18), 0 4px 16px rgba(0,0,0,.3), 0 0 15px rgba(255,105,35,.14) !important; }
.top-button-symbol { display: inline-grid; place-items: center; min-width: 18px; font-size: 16px; font-weight: 900; line-height: 1; }
.top-button-caption { color: rgba(255,224,166,.88); font-size: 8px; font-weight: 900; letter-spacing: .09em; white-space: nowrap; }
.sound-state-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #ffb84f; box-shadow: 0 0 8px rgba(255,184,79,.8); }
.sound-state-dot.is-off { background: #8a6470; box-shadow: none; }
.phoenix-top-button.is-muted { border-color: rgba(164,102,116,.38) !important; color: #a98d96 !important; }
.speed-selector { gap: 9px !important; }
.speed-copy { display: grid; gap: 4px; text-align: left; }
.speed-title { color: #ffe2a1; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.speed-modes { display: flex; align-items: center; gap: 3px; }
.speed-modes i { display: grid; place-items: center; width: 19px; height: 9px; border: 1px solid rgba(255,206,119,.26); border-radius: 3px; color: rgba(255,218,151,.45); font-size: 6px; font-style: normal; line-height: 1; background: rgba(17,5,13,.6); }
.speed-modes i.active { border-color: #ffc15e; color: #fff0bd; background: linear-gradient(90deg,#a53a24,#f0a53e); box-shadow: 0 0 8px rgba(255,125,43,.24); }
.speed-current { display: grid; place-items: center; min-width: 28px; height: 28px; border: 1px solid rgba(255,202,106,.5); border-radius: 8px; color: #fff0bd; background: linear-gradient(145deg,rgba(128,44,27,.9),rgba(43,10,20,.95)); font-size: 11px; }
.utility-button.speed-selector[data-speed="slow"] .speed-current { color: #ffe2a0; }
.utility-button.speed-selector[data-speed="fast"] .speed-current { color: #ffb16d; border-color: rgba(255,118,54,.8); box-shadow: 0 0 10px rgba(255,87,36,.18); }
@media (min-width: 821px) {
  body { font-size: 14px; }
  .bonus-info-copy > strong, .control-caption, .status-value > span { font-size: 10px !important; }
  .bonus-info-copy > span, .phoenix-meter small, .status-value small { font-size: 11px !important; line-height: 1.45 !important; }
  .utility-button, .secondary-action, .stepper-button { font-size: 11px !important; }
  .machine-caption, .status-chip { font-size: 9px !important; }
  .top-button-caption { font-size: 9px; }
}
@media (max-width: 820px) {
  .phoenix-top-button { min-width: 34px; min-height: 34px; padding: 0 7px !important; gap: 4px; border-radius: 10px !important; }
  .top-button-caption { font-size: 6px; letter-spacing: .035em; }
  .top-button-symbol { font-size: 14px; min-width: 14px; }
  .lang-button { padding-inline: 7px !important; }
  .sound-state-dot { width: 5px; height: 5px; flex-basis: 5px; }
  .speed-selector { gap: 6px !important; padding: 7px !important; }
  .speed-title { font-size: 8px; }
  .speed-modes i { width: 15px; }
  .speed-current { min-width: 23px; height: 25px; font-size: 10px; }
}
@media (max-width: 390px) {
  .top-button-caption { display: none; }
  .phoenix-top-button { min-width: 32px; padding-inline: 7px !important; }
}


/* PHOENIX SLOTS v1.9.13 — responsive viewport lock, aligned frame guides and touch-first header controls. */
html {
  max-width: 100%;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
}
body {
  max-width: 100%;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  background-attachment: scroll;
}
img, picture, canvas, .reel-frame-art, .symbol-art {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.top-actions { flex-shrink: 0; }
.phoenix-top-button {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
}
.phoenix-top-button:focus-visible {
  outline: 2px solid #ffe9ad !important;
  outline-offset: 2px;
}
.phoenix-top-button[aria-pressed="false"] .sound-state-dot,
.phoenix-top-button.is-muted .sound-state-dot {
  background: #b17b82;
  box-shadow: inset 0 0 0 1px rgba(255,230,220,.18);
}
@media (max-width: 820px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 7px;
    padding: 8px 0 7px;
  }
  .top-actions { gap: 6px !important; }
  .phoenix-top-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,190,83,.13), transparent 65%),
      linear-gradient(155deg, rgba(64,18,26,.97), rgba(22,6,17,.98)) !important;
    box-shadow: inset 0 1px rgba(255,238,190,.17),
      inset 0 -2px rgba(0,0,0,.28), 0 3px 9px rgba(0,0,0,.28) !important;
  }
  .phoenix-top-button .top-button-caption { display: none !important; }
  .phoenix-top-button .top-button-symbol { font-size: 19px !important; min-width: 0 !important; }
  .phoenix-top-button .sound-state-dot {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .lang-button { gap: 0 !important; }
  .lang-button #langButtonText { display: none !important; }
  .lang-button .top-button-symbol { font-size: 21px !important; }
  .slot-grid {
    /* Preserve the mobile frame's original window proportions. */
    left: 10.7% !important;
    right: 10.5% !important;
    top: 17% !important;
    bottom: 14% !important;
  }
  .reel-row-guides {
    display: block !important;
    left: 10.7% !important;
    right: 10.5% !important;
    top: 17% !important;
    bottom: 14% !important;
  }
  .reel-row-guides::before, .reel-row-guides::after { height: 1px !important; }
  .bonus-info-copy > strong, .control-caption, .status-value > span { font-size: 9px !important; }
  .bonus-info-copy > span, .phoenix-meter small, .status-value small { font-size: 10px !important; line-height: 1.35 !important; }
}
@media (max-width: 390px) {
  .topbar { gap: 4px 5px; }
  .top-actions { gap: 4px !important; }
  .phoenix-top-button {
    width: 38px !important; min-width: 38px !important;
    height: 40px !important; min-height: 40px !important;
  }
  .brand-logo { width: clamp(88px, 26vw, 108px) !important; }
}
@media (min-width: 821px) {
  .bonus-panel, .bonus-info, .bonus-info-copy, .controls-panel { font-size: 1rem; }
  .bonus-info-copy > strong { font-size: 12px !important; }
  .bonus-info-copy > span { font-size: 12px !important; line-height: 1.5 !important; }
  .control-caption, .status-value > span { font-size: 11px !important; }
  .status-value small, .phoenix-meter small { font-size: 12px !important; }
}
/* Browsers may still expose browser-level accessibility zoom controls; app content itself has no pinch gesture. */

/* PHOENIX SLOTS 1.9.13 — release polish: native row dividers, touch-safe cabinet,
   mobile-first toolbar, and a more legible desktop control deck. */
html,
body {
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
  -webkit-text-size-adjust: 100%;
}
.app-shell {
  touch-action: pan-y !important;
  overscroll-behavior: none !important;
}
.overlay,
.modal-card {
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

/* Four consistent Phoenix-themed actions: language, sound, rules, settings. */
.phoenix-top-button {
  border: 1px solid rgba(255, 198, 102, .56) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 185, 72, .19), transparent 72%),
    linear-gradient(155deg, rgba(77, 20, 28, .98), rgba(26, 6, 17, .99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 202, .19),
    inset 0 -2px 0 rgba(0, 0, 0, .25),
    0 4px 12px rgba(0, 0, 0, .28) !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.phoenix-top-button:hover:not(:disabled) {
  border-color: rgba(255, 225, 151, .96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, .24),
    0 4px 13px rgba(0, 0, 0, .3),
    0 0 15px rgba(255, 121, 45, .17) !important;
}
.phoenix-top-button:active:not(:disabled) { transform: translateY(1px); }
.phoenix-top-button .top-button-symbol {
  color: #ffe8b0;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(255, 155, 53, .2);
}
.lang-button #langButtonText {
  color: #ffe4a8;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .05em;
}
.rules-icon-button .top-button-symbol {
  font-family: Georgia, serif;
  font-size: 19px;
}
.sound-button[aria-pressed="true"] .sound-state-dot {
  background: #8cf6a8 !important;
  box-shadow: 0 0 8px rgba(100, 255, 144, .75) !important;
}
.sound-button[aria-pressed="false"] .sound-state-dot {
  background: #9c7480 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 224, .16) !important;
}
.phoenix-top-button:focus-visible {
  outline: 2px solid #ffe8a7 !important;
  outline-offset: 3px !important;
}

/* The supplied mobile frame already contains its row bars. Never draw a second set
   over them. Unequal row heights follow the actual artwork openings, especially row 3. */
@media (max-width: 820px) {
  .reel-row-guides { display: none !important; }
  .slot-grid {
    left: 11.7% !important;
    right: 12% !important;
    top: 17% !important;
    bottom: 14% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .slot-grid > .reel {
    grid-template-rows: 34.65fr 35.65fr 29.7fr !important;
  }
  .slot-grid .tile { overflow: hidden !important; }
  .slot-grid .tile .symbol-art-container { padding: 0 !important; }
  .slot-grid .tile .symbol-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }
  .slot-grid .tile-phoenix .symbol-art,
  .slot-grid .tile-wild .symbol-art,
  .slot-grid .tile.is-winning .symbol-art-container .symbol-art { transform: none !important; }
}

/* Mobile toolbar: four equal touch targets, with a visible active language and sound state. */
@media (max-width: 820px) {
  .topbar {
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 4px 9px !important;
  }
  .brand { flex: 0 1 auto !important; min-width: 0 !important; }
  .brand-logo {
    width: clamp(82px, 24vw, 112px) !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }
  .top-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 40px) !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .phoenix-top-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }
  .phoenix-top-button .top-button-caption { display: none !important; }
  .phoenix-top-button .top-button-symbol { font-size: 19px !important; min-width: 0 !important; }
  .lang-button .top-button-symbol { display: none !important; }
  .lang-button #langButtonText {
    display: inline !important;
    min-width: 0 !important;
    font-size: 10px !important;
    letter-spacing: .03em !important;
  }
  .sound-state-dot {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;
  }
}
@media (max-width: 390px) {
  .topbar { gap: 4px !important; padding-inline: 7px !important; }
  .brand-logo { width: clamp(74px, 23vw, 89px) !important; }
  .top-actions {
    grid-template-columns: repeat(4, 35px) !important;
    gap: 4px !important;
  }
  .phoenix-top-button {
    width: 35px !important;
    min-width: 35px !important;
    height: 37px !important;
    min-height: 37px !important;
    border-radius: 10px !important;
  }
  .phoenix-top-button .top-button-symbol { font-size: 17px !important; }
  .lang-button #langButtonText { font-size: 9px !important; }
}

/* Desktop: slightly taller dock, larger secondary copy and an unclipped bonus explainer. */
@media (min-width: 821px) {
  :root {
    --phoenix-dock-space: 250px;
    --phoenix-machine-head: 25px;
    --phoenix-outcome-space: 42px;
    --phoenix-bonus-space: 56px;
    --phoenix-stage-height: min(78svh, calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 14px));
  }
  .machine-shell > .bonus-info-strip {
    height: var(--phoenix-bonus-space) !important;
    min-height: var(--phoenix-bonus-space) !important;
    max-height: var(--phoenix-bonus-space) !important;
    padding: 7px 15px !important;
    gap: 12px !important;
  }
  .bonus-info-copy > strong { font-size: 12px !important; letter-spacing: .1em !important; }
  .bonus-info-copy > span {
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    display: block !important;
  }
  .phoenix-meter { gap: 4px !important; }
  .phoenix-meter-head { font-size: 10px !important; }
  .phoenix-meter-head strong { font-size: 12px !important; }
  #phoenixMeterHint {
    display: block !important;
    margin: 0 !important;
    color: rgba(255, 225, 171, .7) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .provider-statusbar {
    min-height: 48px !important;
    padding: 3px 0 7px !important;
  }
  .status-value > span { font-size: 11px !important; line-height: 1.15 !important; }
  .status-value strong { font-size: clamp(22px, 1.8vw, 31px) !important; line-height: 1.06 !important; }
  .status-value small { font-size: 10px !important; }
  .control-caption { font-size: 12px !important; margin-bottom: 5px !important; }
  .stepper-button { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .bet-amount-wrap strong { font-size: clamp(29px, 2.2vw, 39px) !important; }
  .bet-amount-wrap small { font-size: 10px !important; }
  .bet-presets { margin-top: 6px !important; gap: 6px !important; }
  .bet-presets button { min-height: 29px !important; font-size: 10px !important; }
  #spinButton.spin-button { width: clamp(78px, 6.3vw, 92px) !important; height: clamp(78px, 6.3vw, 92px) !important; flex-basis: clamp(78px, 6.3vw, 92px) !important; }
  .spin-button-label { font-size: 10px !important; letter-spacing: .11em !important; }
  .secondary-action { min-height: 46px !important; font-size: 12px !important; border-radius: 12px !important; }
  .control-bottomline { margin-top: 8px !important; padding-top: 7px !important; gap: 10px !important; }
  .utility-button { min-height: 40px !important; padding: 8px 12px !important; font-size: 12px !important; border-radius: 10px !important; }
  .utility-icon { font-size: 15px !important; }
  .speed-title { font-size: 10px !important; }
  .speed-modes i { width: 22px !important; height: 12px !important; font-size: 8px !important; }
  .speed-current { min-width: 30px !important; height: 30px !important; font-size: 12px !important; }
}
@media (min-width: 821px) and (max-height: 780px) {
  :root {
    --phoenix-dock-space: 210px;
    --phoenix-machine-head: 20px;
    --phoenix-outcome-space: 36px;
    --phoenix-bonus-space: 44px;
    --phoenix-stage-height: min(68svh, calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 10px));
  }
  .provider-statusbar { min-height: 39px !important; padding-bottom: 4px !important; }
  .status-value strong { font-size: clamp(19px, 1.6vw, 26px) !important; }
  .control-caption { font-size: 11px !important; }
  .stepper-button { width: 35px !important; height: 35px !important; flex-basis: 35px !important; }
  .bet-amount-wrap strong { font-size: clamp(25px, 2vw, 33px) !important; }
  #spinButton.spin-button { width: 70px !important; height: 70px !important; flex-basis: 70px !important; }
  .secondary-action { min-height: 39px !important; }
  .control-bottomline { margin-top: 5px !important; padding-top: 4px !important; }
  .utility-button { min-height: 34px !important; font-size: 11px !important; }
}

/* PHOENIX SLOTS 1.9.13 — signature reel choreography and mobile-safe bonus copy. */
/* The five reels have subtly different motion profiles, like a crafted game cabinet. */
.reel.is-spinning[data-col="0"] .tile { animation: phoenixEmberRoll .19s linear infinite !important; }
.reel.is-spinning[data-col="1"] .tile { animation: phoenixWingBeat .25s ease-in-out infinite alternate !important; }
.reel.is-spinning[data-col="2"] .tile { animation: phoenixVortexRoll .23s ease-in-out infinite !important; }
.reel.is-spinning[data-col="3"] .tile { animation: phoenixBackdraft .21s ease-in-out infinite alternate !important; }
.reel.is-spinning[data-col="4"] .tile { animation: phoenixFinalFlare .31s ease-in-out infinite alternate !important; }
.reel.is-spinning[data-col="1"] .tile:nth-child(2),
.reel.is-spinning[data-col="3"] .tile:nth-child(2) { animation-delay: -90ms !important; }
.reel.is-spinning[data-col="2"] .tile:nth-child(3),
.reel.is-spinning[data-col="4"] .tile:nth-child(3) { animation-delay: -130ms !important; }

@keyframes phoenixEmberRoll {
  0% { transform: translateY(-3px); filter: brightness(1.08); }
  100% { transform: translateY(3px); filter: brightness(.94); }
}
@keyframes phoenixWingBeat {
  0% { transform: translateY(2px) scaleY(.96); filter: brightness(.92); }
  100% { transform: translateY(-2px) scaleY(1.025); filter: brightness(1.14); }
}
@keyframes phoenixVortexRoll {
  0%, 100% { transform: scale(.965) rotate(-.7deg); filter: brightness(.94); }
  50% { transform: scale(1.015) rotate(.7deg); filter: brightness(1.16); }
}
@keyframes phoenixBackdraft {
  0% { transform: translateY(-2px) skewY(-.35deg); filter: brightness(1.12); }
  100% { transform: translateY(2px) skewY(.35deg); filter: brightness(.9); }
}
@keyframes phoenixFinalFlare {
  0% { transform: scale(.97); filter: brightness(.9) saturate(1); }
  100% { transform: scale(1.025); filter: brightness(1.22) saturate(1.16); }
}

/* Reel landings snap and settle with an ordered, slightly different rebound per reel. */
.reel.is-stopped[data-col="0"] .tile { animation: phoenixLandEmber .30s cubic-bezier(.18,.82,.26,1) both !important; }
.reel.is-stopped[data-col="1"] .tile { animation: phoenixLandWing .30s cubic-bezier(.18,.82,.26,1) both !important; }
.reel.is-stopped[data-col="2"] .tile { animation: phoenixLandVortex .30s cubic-bezier(.18,.82,.26,1) both !important; }
.reel.is-stopped[data-col="3"] .tile { animation: phoenixLandBackdraft .30s cubic-bezier(.18,.82,.26,1) both !important; }
.reel.is-stopped[data-col="4"] .tile { animation: phoenixLandFlare .30s cubic-bezier(.18,.82,.26,1) both !important; }
@keyframes phoenixLandEmber { 0% { transform: translateY(-7px); filter: brightness(1.6); } 65% { transform: translateY(2px); filter: brightness(1.18); } 100% { transform: none; filter: brightness(1); } }
@keyframes phoenixLandWing { 0% { transform: scaleY(.83); filter: brightness(1.5); } 58% { transform: scaleY(1.04); filter: brightness(1.16); } 100% { transform: none; filter: brightness(1); } }
@keyframes phoenixLandVortex { 0% { transform: scale(.84) rotate(-2deg); filter: brightness(1.65); } 68% { transform: scale(1.035) rotate(.6deg); filter: brightness(1.2); } 100% { transform: none; filter: brightness(1); } }
@keyframes phoenixLandBackdraft { 0% { transform: translateY(6px); filter: brightness(1.5); } 62% { transform: translateY(-2px); filter: brightness(1.12); } 100% { transform: none; filter: brightness(1); } }
@keyframes phoenixLandFlare { 0% { transform: scale(.88); filter: brightness(1.65) saturate(1.2); } 55% { transform: scale(1.045); filter: brightness(1.24); } 100% { transform: none; filter: brightness(1); } }

/* Winning symbols briefly collapse into an ember slit, then re-form in place. This is
   a presentation-only flourish: no symbol, payout, RNG result or RTP rule is changed. */
.tile.ember-reform .symbol-art {
  animation: phoenixReforge 1.08s cubic-bezier(.18,.75,.25,1) 1 both !important;
  transform-origin: 50% 50%;
}
.tile.is-winning.ember-reform::after {
  z-index: 3 !important;
  inset: -26% !important;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 17%, rgba(255, 213, 104, .7) 20%, transparent 24% 43%, rgba(255, 100, 32, .65) 47%, transparent 51% 73%, rgba(255, 228, 144, .5) 78%, transparent 83%);
  mix-blend-mode: screen;
  animation: phoenixEmberVortex 1.08s ease-out 1 both !important;
}
@keyframes phoenixReforge {
  0% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1); }
  30% { opacity: .18; clip-path: inset(43% 0 43% 0); filter: brightness(1.8); }
  45% { opacity: .06; clip-path: inset(49% 2% 49% 2%); }
  65% { opacity: .86; clip-path: inset(8% 0 8% 0); filter: brightness(1.7); }
  82% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.28); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1); }
}
@keyframes phoenixEmberVortex {
  0% { opacity: 0; transform: rotate(-40deg) scale(.5); }
  28% { opacity: .85; }
  72% { opacity: .48; transform: rotate(115deg) scale(1.12); }
  100% { opacity: 0; transform: rotate(205deg) scale(1.25); }
}

/* The spin control is a fixed medallion; only press/hover feedback may move it. */
#spinButton:not(:disabled):not(.is-stopping) .spin-button-art { animation: none !important; }

/* The previous compact one-row mobile card clipped its title and wrapped rule copy.
   Let the copy use its natural height and give the Journey meter a dedicated second row. */
@media (max-width: 820px) {
  .machine-shell > .bonus-info-strip,
  .machine-shell.has-outcome > .bonus-info-strip {
    display: grid !important;
    grid-template-columns: 27px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "icon copy counter" "meter meter meter" !important;
    align-items: center !important;
    width: min(98%, 760px) !important;
    height: auto !important;
    min-height: 84px !important;
    max-height: none !important;
    padding: 10px 9px 9px !important;
    gap: 8px 9px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-symbol,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-symbol {
    grid-area: icon !important;
    grid-column: auto !important;
    align-self: start !important;
    margin-top: 2px !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-copy,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-copy {
    grid-area: copy !important;
    grid-column: auto !important;
    align-self: start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 1px 0 2px !important;
    gap: 4px !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-copy > strong,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-copy > strong {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    overflow: visible !important;
    font-size: clamp(9px, 2.2vw, 11px) !important;
    line-height: 1.3 !important;
    letter-spacing: .075em !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-copy > span,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-copy > span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 1px !important;
    overflow: visible !important;
    font-size: clamp(9px, 2.25vw, 11px) !important;
    line-height: 1.34 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .machine-shell > .bonus-info-strip .phoenix-meter,
  .machine-shell.has-outcome > .bonus-info-strip .phoenix-meter {
    grid-area: meter !important;
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
    min-width: 0 !important;
    min-height: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .machine-shell > .bonus-info-strip .free-spin-counter,
  .machine-shell.has-outcome > .bonus-info-strip .free-spin-counter {
    grid-area: counter !important;
    grid-column: auto !important;
    align-self: start !important;
    justify-self: end !important;
    max-width: 92px !important;
    padding: 4px 6px !important;
    font-size: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel.is-spinning[data-col] .tile,
  .reel.is-stopped[data-col] .tile,
  .tile.ember-reform .symbol-art,
  .tile.is-winning.ember-reform::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* PHOENIX SLOTS 1.9.13 — mobile bonus panel no longer tucks under the dock. */
@media (max-width: 820px) {
  :root {
    --phoenix-machine-head: 20px;
    --phoenix-outcome-space: 32px;
    --phoenix-bonus-space: clamp(94px, 14svh, 102px);
    --phoenix-stage-height: min(
      56svh,
      calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - env(safe-area-inset-bottom) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 16px),
      calc(98vw / var(--phoenix-reel-ratio))
    );
  }

  /* Put the machine caption directly under the brand/actions row instead of vertically centering it. */
  .game-main {
    justify-content: flex-start !important;
    padding-top: 4px !important;
    padding-bottom: calc(var(--phoenix-dock-space) + env(safe-area-inset-bottom)) !important;
  }
  .game-layout,
  .main-column {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
  }
  .machine-shell {
    align-content: start !important;
    margin: 0 auto !important;
    row-gap: 3px !important;
  }
  .machine-shell > .machine-header {
    margin: 0 auto !important;
    transform: none !important;
  }
  .machine-shell > .bonus-info-strip,
  .machine-shell.has-outcome > .bonus-info-strip {
    display: grid !important;
    grid-row: 4 !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "icon copy counter" "meter meter meter" !important;
    align-items: center !important;
    width: min(98vw, 760px) !important;
    height: auto !important;
    min-height: var(--phoenix-bonus-space) !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 7px 8px 7px !important;
    gap: 6px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-radius: 11px !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-symbol,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-symbol {
    grid-area: icon !important;
    align-self: start !important;
    margin-top: 2px !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-copy,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-copy {
    grid-area: copy !important;
    align-self: start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 1px 0 !important;
    gap: 3px !important;
    overflow: visible !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-copy > strong,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-copy > strong {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: clamp(9px, 2.35vw, 10.5px) !important;
    line-height: 1.2 !important;
    letter-spacing: .055em !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }
  .machine-shell > .bonus-info-strip .bonus-info-copy > span,
  .machine-shell.has-outcome > .bonus-info-strip .bonus-info-copy > span {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: clamp(9px, 2.35vw, 10.5px) !important;
    line-height: 1.24 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;
  }
  .machine-shell > .bonus-info-strip .phoenix-meter,
  .machine-shell.has-outcome > .bonus-info-strip .phoenix-meter {
    grid-area: meter !important;
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 17px !important;
    margin: 0 !important;
    gap: 3px !important;
  }
  .machine-shell > .bonus-info-strip .phoenix-meter-head,
  .machine-shell.has-outcome > .bonus-info-strip .phoenix-meter-head {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }
  .machine-shell > .bonus-info-strip .phoenix-meter-head strong,
  .machine-shell.has-outcome > .bonus-info-strip .phoenix-meter-head strong {
    font-size: 9px !important;
  }
  .machine-shell > .bonus-info-strip #phoenixMeterHint,
  .machine-shell.has-outcome > .bonus-info-strip #phoenixMeterHint {
    display: none !important;
  }
  .machine-shell > .bonus-info-strip .free-spin-counter,
  .machine-shell.has-outcome > .bonus-info-strip .free-spin-counter {
    grid-area: counter !important;
    align-self: start !important;
    justify-self: end !important;
    max-width: 90px !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    font-size: 7px !important;
  }
}

@media (max-width: 820px) and (max-height: 650px) {
  :root {
    --phoenix-machine-head: 18px;
    --phoenix-outcome-space: 28px;
    --phoenix-bonus-space: 74px;
    --phoenix-stage-height: min(
      50svh,
      calc(100svh - var(--phoenix-topbar-space) - var(--phoenix-dock-space) - env(safe-area-inset-bottom) - var(--phoenix-machine-head) - var(--phoenix-outcome-space) - var(--phoenix-bonus-space) - 16px),
      calc(98vw / var(--phoenix-reel-ratio))
    );
  }
  .machine-shell > .bonus-info-strip,
  .machine-shell.has-outcome > .bonus-info-strip {
    padding-block: 5px !important;
    gap: 4px 7px !important;
  }
}

@media (max-width: 820px) {
  /* A restrained halo animates the cabinet's existing phoenix crest; no mismatched extra art is layered over the game. */
  .phoenix-crest-aura {
    position: absolute !important;
    z-index: 3 !important;
    top: -2.5% !important;
    left: 37% !important;
    width: 26% !important;
    height: 17% !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background: radial-gradient(ellipse at center, rgba(255, 237, 169, .42) 0%, rgba(255, 132, 43, .24) 31%, rgba(176, 40, 24, .09) 56%, transparent 76%) !important;
    filter: blur(7px) !important;
    opacity: .48 !important;
    transform-origin: 50% 60% !important;
    animation: phoenixCrestBreath 5.2s ease-in-out infinite !important;
    mix-blend-mode: screen !important;
  }
  .reel-stage.feedback-win .phoenix-crest-aura,
  .reel-stage.feedback-big-win .phoenix-crest-aura,
  .reel-stage.feedback-bonus .phoenix-crest-aura,
  .reel-stage.feedback-meter .phoenix-crest-aura {
    animation: phoenixCrestAwaken 1.2s ease-out 1 both !important;
  }
}

@keyframes phoenixCrestBreath {
  0%, 100% { opacity: .3; transform: scale(.9); filter: blur(7px) brightness(.95); }
  50% { opacity: .63; transform: scale(1.08); filter: blur(9px) brightness(1.18); }
}
@keyframes phoenixCrestAwaken {
  0% { opacity: .35; transform: scale(.82); filter: blur(7px) brightness(1); }
  28% { opacity: .96; transform: scale(1.23); filter: blur(11px) brightness(1.45); }
  100% { opacity: .36; transform: scale(1.06); filter: blur(8px) brightness(1.05); }
}
@media (min-width: 821px) {
  .phoenix-crest-aura {
    position: absolute;
    z-index: 3;
    top: -2.5%;
    left: 37%;
    width: 26%;
    height: 17%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255, 237, 169, .32), rgba(255, 132, 43, .18) 34%, transparent 72%);
    filter: blur(10px);
    opacity: .42;
    animation: phoenixCrestBreath 5.2s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  .reel-stage.feedback-win .phoenix-crest-aura,
  .reel-stage.feedback-big-win .phoenix-crest-aura,
  .reel-stage.feedback-bonus .phoenix-crest-aura,
  .reel-stage.feedback-meter .phoenix-crest-aura {
    animation: phoenixCrestAwaken 1.2s ease-out 1 both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .phoenix-crest-aura { animation: none !important; opacity: .38 !important; }
}

/* Compact navigation utilities, deliberately outside the reel and spin-control areas. */
.top-actions .lobby-button,.top-actions .fullscreen-button{min-width:34px}
.top-actions .lobby-button .top-button-symbol,.top-actions .fullscreen-button .top-button-symbol{font-family:system-ui,sans-serif;font-size:18px;font-weight:600;line-height:1}
@media(max-width:820px){
 .top-actions{flex-wrap:nowrap;max-width:100%}
 .top-actions .lobby-button,.top-actions .fullscreen-button{width:27px;min-width:27px;height:27px;padding:0}
 .top-actions .lobby-button .top-button-caption,.top-actions .fullscreen-button .top-button-caption{display:none}
 .top-actions .lobby-button .top-button-symbol,.top-actions .fullscreen-button .top-button-symbol{font-size:16px}
}
@media(max-width:360px){
 .top-actions{gap:2px}
 .top-actions .icon-button{width:25px;height:25px}
 .top-actions .lobby-button,.top-actions .fullscreen-button{width:25px;min-width:25px;height:25px}
}


/* PHOENIX SLOTS — dedicated navigation pair beside the logo, never inside the four-button settings toolbar. */
.navigation-utilities {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  gap: 7px !important;
  margin: 0 clamp(10px, 1.1vw, 18px) 0 2px !important;
  min-width: 0 !important;
}
.navigation-utilities .icon-button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: clamp(31px, 2.5vw, 38px) !important;
  min-width: clamp(31px, 2.5vw, 38px) !important;
  height: clamp(31px, 2.5vw, 38px) !important;
  min-height: clamp(31px, 2.5vw, 38px) !important;
  padding: 0 !important;
  border-radius: 10px !important;
  color: #ffdfab !important;
  border: 1px solid rgba(255, 205, 119, .28) !important;
  background: linear-gradient(145deg, rgba(61, 28, 21, .78), rgba(18, 6, 14, .92)) !important;
  box-shadow: inset 0 1px rgba(255, 239, 201, .08), 0 3px 12px rgba(0,0,0,.18) !important;
}
.navigation-utilities .icon-button:hover {
  border-color: rgba(255, 218, 153, .62) !important;
  background: linear-gradient(145deg, rgba(86, 39, 25, .92), rgba(28, 7, 15, .96)) !important;
}
.navigation-utilities .top-button-symbol {
  font-family: system-ui, sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}
.navigation-utilities .top-button-caption { display: none !important; }

@media (max-width: 820px) {
  .topbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 5px !important;
    padding-inline: 8px !important;
    overflow: visible !important;
  }
  .brand { flex: 0 0 auto !important; min-width: 0 !important; }
  .brand-logo { width: clamp(62px, 19vw, 89px) !important; max-width: 100% !important; }
  .navigation-utilities { gap: 3px !important; margin: 0 auto 0 2px !important; }
  .navigation-utilities .icon-button {
    width: 27px !important; min-width: 27px !important; height: 29px !important; min-height: 29px !important;
    border-radius: 8px !important;
  }
  .navigation-utilities .top-button-symbol { font-size: 16px !important; }
  .top-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 35px) !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    max-width: none !important;
  }
  .top-actions > .phoenix-top-button {
    width: 35px !important; min-width: 35px !important; height: 37px !important; min-height: 37px !important;
  }
}
@media (min-width: 391px) and (max-width: 820px) {
  .top-actions { grid-template-columns: repeat(4, 38px) !important; gap: 4px !important; }
  .top-actions > .phoenix-top-button { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; }
}
@media (max-width: 350px) {
  .topbar { gap: 3px !important; padding-inline: 6px !important; }
  .brand-logo { width: 58px !important; }
  .navigation-utilities { gap: 2px !important; margin-left: 0 !important; }
  .navigation-utilities .icon-button { width: 24px !important; min-width: 24px !important; height: 26px !important; min-height: 26px !important; }
  .top-actions { grid-template-columns: repeat(4, 31px) !important; gap: 2px !important; }
  .top-actions > .phoenix-top-button { width: 31px !important; min-width: 31px !important; height: 33px !important; min-height: 33px !important; }
}
@media (min-width: 821px) {
  .navigation-utilities { margin-left: clamp(10px, 1.2vw, 22px) !important; }
}


/* Navigation controls: compact and unmistakable, with a subtle return arrow on the lobby button. */
.navigation-utilities .lobby-button { position: relative !important; }
.navigation-utilities .lobby-button::after { content: '↖'; position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid rgba(255, 219, 157, .42); border-radius: 50%; background: #29130f; color: #ffd99c; font: 700 9px/1 system-ui, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.navigation-utilities .fullscreen-button { position: relative !important; }
.navigation-utilities .icon-button:focus-visible { outline: 2px solid #ffe5ad !important; outline-offset: 2px !important; }
@media (max-width: 820px) {
  .navigation-utilities { gap: 5px !important; margin-right: 4px !important; }
  .navigation-utilities .icon-button { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; }
  .navigation-utilities .lobby-button::after { width: 12px; height: 12px; right: -3px; bottom: -3px; font-size: 8px; }
}