/* Shared mechanical finishes. No symbol sizing or outcome changes. */
.slotHeader #languageIcon { display: block; width: 62%; height: 62%; object-fit: contain; filter: invert(91%) sepia(31%) saturate(712%) hue-rotate(344deg) brightness(106%) drop-shadow(0 2px 4px #000b); }
.slotHeader .headerActions #soundBtn.active { color: #ffe4a6; border-color: #e6af53; background: #ff971c21; box-shadow: inset 0 0 12px #ff9c2233; }
.slotStage .cabinet { max-width: none; container-type: inline-size; }
.slotStage .reelFrame { width: 89.2857% !important; }
.slotStage .reelFrame::before { left: -6% !important; right: -6% !important; }
/* The artwork overlaps the glass by about 3% on each side. Keep every
   column (including its winning glow) inside that aperture. */
.slotStage .reels { padding-inline: 3.2% !important; box-sizing: border-box; }
.slotStage .paylineHint { margin-top: 6cqw; }
@media (min-width: 1181px) and (pointer: fine), (min-width: 1367px) {
  .slotStage { padding-top: clamp(170px, 13vw, 230px); }
  .controlDeck .historyBtn { left: 8%; width: 6%; }
  .controlDeck .deckButton { min-width: calc(44px / var(--fit-scale, 1)); min-height: calc(44px / var(--fit-scale, 1)); }
  .slotHeader .headerActions { width: calc(270px / var(--fit-scale, 1)); }
  .slotHeader .headerActions .iconBtn { min-height: calc(44px / var(--fit-scale, 1)); }
  .slotHeader .balancePlaque { width: calc(220px / var(--fit-scale, 1)); }
  .slotHeader .balancePlaque b { font-size: calc(15px / var(--fit-scale, 1)); }
  .slotHeader .balancePlaque span { font-size: calc(9px / var(--fit-scale, 1)); }
  .controlDeck .betButton b { font-size: max(2cqw, calc(16px / var(--fit-scale, 1))); }
  .controlDeck .winReadout b { font-size: max(2.4cqw, calc(18px / var(--fit-scale, 1))); }
  .controlDeck .deckButton small { font-size: calc(8px / var(--fit-scale, 1)); }
  .controlDeck .autoButton b { font-size: calc(12px / var(--fit-scale, 1)); }
  .controlDeck .spinBtn span { font-size: max(1.8cqw, calc(14px / var(--fit-scale, 1))); }
  .controlDeck .spinBtn small { font-size: calc(7px / var(--fit-scale, 1)); }
  .slotStage .message .main { font-size: max(24px, calc(16px / var(--fit-scale, 1))); }
  .slotStage .message .sub { font-size: max(14px, calc(11px / var(--fit-scale, 1))); }
}

/* A compact courtside scoreboard, with a quieter treatment for missed shots. */
.resultPopup { width: min(430px, 86%); }
.resultPopup.show { opacity: 1; filter: none; transform: translate(-50%, -50%); animation: scoreboardEnter .3s ease-out both; }
.resultPopup .resultPopupCard {
  padding: 20px 24px 24px; border: 2px solid #ffa635; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0, #c05c1e66, transparent 70%), repeating-linear-gradient(90deg, #ffffff03 0 1px, transparent 1px 5px), linear-gradient(#27170f, #080c12);
  box-shadow: inset 0 0 0 4px #140f0b, inset 0 0 0 5px #d08a38, 0 0 32px #ff8b2440, 0 16px 45px #000b;
}
.resultPopup .resultPopupCard::before, .resultPopup .resultPopupCard::after {
  content: ''; display: block; top: 14px; bottom: 14px; width: 5px; height: auto;
  border: 0; border-radius: 4px; transform: none; background: linear-gradient(#ffeb9f, #ff891e, #70300e); box-shadow: 0 0 9px #ff871d;
}
.resultPopup .resultPopupCard::before { left: 9px; }
.resultPopup .resultPopupCard::after { right: 9px; }
.resultPopup .resultSigil {
  width: 46px; height: 46px; margin: 0 auto 6px;
  background: url('../../public/assets/wild/wild-display.png') center / contain no-repeat;
  filter: drop-shadow(0 0 8px #ff921a88);
}
.resultBrand { display: block; color: #ce9b62; font: 800 9px/1.4 var(--ui-font); letter-spacing: .24em; }
.resultPopup .resultEyebrow { margin-top: 8px; font: 900 clamp(18px, 2.4vw, 27px)/1.15 var(--ui-font); letter-spacing: .04em; color: #ffe4a9; }
.resultPopup .resultAmount { margin-top: 12px; font: 900 clamp(28px, 4vw, 48px)/1.1 var(--ui-font); font-variant-numeric: tabular-nums; letter-spacing: -.035em; color: #ffd26c; overflow-wrap: anywhere; }
.resultPopup .resultDetail { margin-top: 12px; color: #e1c5a1; font: 600 12px/1.4 var(--ui-font); letter-spacing: .04em; }
.resultPopup.loss .resultPopupCard { border-color: #aa7445; background: radial-gradient(ellipse at 50% 0, #70462344, transparent 70%), linear-gradient(#201b18, #0b1017); box-shadow: inset 0 0 0 4px #100f0e, inset 0 0 0 5px #785432, 0 16px 40px #000b; }
.resultPopup.loss .resultAmount { color: #e9d8bc; text-shadow: none; }
.resultPopup.loss .resultSigil { filter: saturate(.55); }
.resultPopup.loss .resultPopupCard::before, .resultPopup.loss .resultPopupCard::after { opacity: .45; box-shadow: none; }
.resultPopup.feature .resultAmount { font-size: clamp(24px, 3vw, 36px); }
@keyframes scoreboardEnter { from { opacity: 0; transform: translate(-50%, -46%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .resultPopup.show, .resultPopup .resultSigil { animation: none !important; } }

@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px) {
  .slotMachine { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-content: start; gap: 14px; }
  .slotHeader { grid-column: 1; grid-row: 1; grid-template-areas: 'actions balance'; grid-template-columns: auto minmax(0, 1fr); }
  .slotHeader .headerActions, .slotHeader .balancePlaque {
    border: 2px solid #d68b30; border-radius: 10px;
    background: linear-gradient(135deg, #5e2b0d, #16191c 18%, #0c121c 80%, #673611);
    box-shadow: inset 0 0 0 2px #241a0f, inset 0 0 0 3px #f5c87655, 0 3px 12px #0009;
  }
  .slotHeader .headerActions { display: flex; position: relative; width: auto; height: auto; aspect-ratio: auto; gap: 3px; padding: 5px; justify-self: start; }
  .slotHeader .headerActions .iconBtn { position: static; flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #a97836; border-radius: 6px; background: linear-gradient(#242a2d, #10151b); color: #fff0d1; }
  .slotHeader .balancePlaque { display: flex; position: relative; align-items: center; justify-self: end; gap: 8px; width: auto; height: auto; aspect-ratio: auto; min-height: 58px; padding: 8px 12px; }
  .slotHeader .balancePlaque > img { display: block; width: 30px; height: 30px; }
  .slotHeader .balancePlaque > div { position: static; width: auto; min-width: 0; }
  .slotHeader .balancePlaque b { font-size: clamp(14px, 2.2vw, 22px); color: #ffd16d; margin-top: 5px; }
  .slotHeader .balancePlaque span { font-size: 10px; color: #d9ccb9; }
  .slotStage { grid-column: 1; grid-row: 2; align-self: auto; padding-top: clamp(70px, 15vw, 158px); }
  .slotStage .reelFrame { width: 89.2857% !important; }
  .slotStage .reelFrame::before { top: -36% !important; bottom: -15% !important; }
  .slotStage .paylineHint { display: block; margin-top: 5cqw; }
  .slotStage .message { min-height: 52px; }
  .slotStage .message .sub { display: block; }
  .controlDeck {
    grid-column: 1; grid-row: 3; width: 100%; max-width: none; align-self: auto;
    border: 3px solid #dd912f; border-radius: 16px;
    background: linear-gradient(135deg, #a54b10, #242323 8%, #11161f 45%, #3f250e 90%, #e38b21);
    box-shadow: inset 0 0 0 3px #160e08, inset 0 0 0 5px #fbbf6655, 0 8px 25px #0009;
    padding: 14px; gap: 9px; grid-template-columns: 1fr 2.4fr 2fr 1fr 1fr 1.5fr;
  }
  .controlDeck .deckButton, .controlDeck .winReadout { grid-area: auto; border: 1px solid #c28a41; background: linear-gradient(#2f281e, #111820); box-shadow: inset 0 0 0 2px #0007, inset 0 1px 8px #edb95f22; }
  .controlDeck .spinBtn { grid-area: auto; border: 3px solid #ffcb53; box-shadow: 0 0 0 3px #a55413, 0 0 0 5px #3e2514, inset 0 0 16px #ffa63088, 0 0 20px #ff870844; width: 96px; max-width: 100%; }
  .controlDeck .spinBtn span { width: auto; font-size: 21px; }
  .controlDeck .spinBtn small { width: auto; font-size: 9px; }
  .slotMachine > .footerNote { display: block; grid-column: 1; grid-row: 4; }
}

/* Tablet keeps the same illustrated deck as desktop, with 44px hit areas. */
@media (min-width: 768px) and (max-width: 1180px),
       (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
  .controlDeck { display: block; container-type: inline-size; aspect-ratio: 2048 / 390; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
  .controlDeck::before { content: ''; display: block; position: absolute; inset: -37.18% 0 auto; width: 100%; height: 175.04%; border: 0; border-radius: 0; transform: none; box-shadow: none; background: linear-gradient(180deg, #4d1738f2, #120d1cf2); }
  .controlDeck .deckButton, .controlDeck .winReadout, .controlDeck .spinBtn { position: absolute; top: 42%; height: 35%; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .controlDeck .historyBtn { left: 8%; width: 6%; }
  .controlDeck .betButton { left: 15%; width: 23%; }
  .controlDeck .winReadout { left: 40.5%; width: 25.8%; }
  .controlDeck .autoButton { left: 68%; width: 6%; gap: 1px; }
  .controlDeck .turboButton { left: 75.8%; width: 6%; }
  .controlDeck .spinBtn { left: 83.9%; top: 37.2%; width: 8.1%; height: auto; aspect-ratio: 1; background: radial-gradient(circle at 40% 30%, #c77720, #67300e 60%, #180e08); }
  .controlDeck .spinBtn span { font-size: clamp(16px, 2.2cqw, 22px); }
  .controlDeck .spinBtn small { font-size: clamp(7px, .9cqw, 10px); }
  .controlDeck .betButton b { font-size: clamp(18px, 2.4cqw, 24px); }
  .controlDeck .deckButton svg { width: 21px; height: 21px; }
  .controlDeck .deckButton small { font-size: 8px; }
  .controlDeck .autoButton b { font-size: 13px; }
}

@media (max-width: 767px) {
  .slotHeader .headerActions { gap: 2px; padding: 3px; }
  .slotHeader .balancePlaque { min-height: 56px; padding: 6px 7px; gap: 4px; }
  .slotHeader .balancePlaque > img { display: none; }
  .slotHeader .balancePlaque b { font-size: clamp(13px, 3.7vw, 18px); }
  .controlDeck { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; padding: 12px; gap: 8px; }
  .controlDeck .historyBtn { grid-area: 1 / 1; }
  .controlDeck .betButton { grid-area: 1 / 2 / 2 / 4; gap: 5px; }
  .controlDeck .autoButton { grid-area: 1 / 4; }
  .controlDeck .turboButton { grid-area: 1 / 5; }
  .controlDeck .winReadout { grid-area: 2 / 1 / 3 / 4; }
  .controlDeck .spinBtn { grid-area: 2 / 4 / 3 / 6; margin: 8px 0; }
  .controlDeck .betButton b { font-size: clamp(16px, 4.5vw, 20px); }
  .controlDeck .betButton svg { width: 20px; height: 20px; }
  .resultPopup .resultPopupCard { padding: 14px 20px 18px; }
  .resultPopup .resultSigil { width: 32px; height: 32px; }
  .resultPopup .resultAmount { font-size: clamp(25px, 7.5vw, 38px); }
}

/* Low-height history stays readable: fixed frame, only inner content scrolls. */
@media (min-width: 601px) and (min-height: 601px) {
  .ledgerModal .ledgerCard h2 { font-size: 27px; margin: 0 0 3px; }
  .ledgerModal .ledgerStatus { margin: 2px 0 6px; font-size: 11px; }
  .ledgerModal .ledgerNavigation { padding: 0; }
  .ledgerModal .ledgerNavigation button { height: 44px; }
  .ledgerModal #ledgerBody { display: grid; grid-template-columns: 1fr 1.5fr; align-items: center; gap: 8px; }
  .ledgerModal .ledgerHero { padding: 8px 0; }
  .ledgerModal .ledgerHero > strong { font-size: 26px; margin: 3px 0; }
  .ledgerModal .ledgerNet { font-size: 10px; padding: 4px 7px; }
  .ledgerModal .ledgerStats b { font-size: 15px; }
  .ledgerModal .ledgerStats span { font-size: 10px; }
  .ledgerModal .ledgerTableWrap, .ledgerModal .ledgerBalance, .ledgerModal .ledgerPending { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 600px), (max-height: 600px) {
  .ledgerModal .ledgerCard {
    width: min(560px, 96vw); aspect-ratio: auto; max-height: calc(100dvh - 24px); padding: 14px;
    border: 2px solid #df9639; border-radius: 16px;
    background: radial-gradient(ellipse at 50% 0, #ab541c44, transparent 55%), linear-gradient(#211910, #0a111b);
    box-shadow: inset 0 0 0 3px #15100b, inset 0 0 0 4px #a97234, 0 16px 50px #000b;
  }
  .ledgerModal .ledgerScroll { position: static; padding: 42px 5px 8px; }
  .ledgerScroll > .ledgerCrest, .ledgerScroll > .ledgerKicker { display: none; }
  .ledgerModal .ledgerCard h2 { margin: 0 0 10px; font-size: 26px; }
  .ledgerModal .ledgerClose { top: 10px; right: 12px; left: auto; width: 44px; height: 44px; border: 1px solid #b17d36; border-radius: 8px; background: #1d1b19; }
  .ledgerModal .ledgerActions { position: static; margin: 12px 0 0; }
  .ledgerModal .ledgerActions button { background: linear-gradient(#794017, #3b240e); border-color: #d69942; }
}

/* Machined bronze face, gold bevel and a single restrained moving rim. */
.controlDeck .spinBtn {
  isolation: isolate; overflow: visible;
  border: 2px solid #ffe6a0;
  background: radial-gradient(ellipse at 35% 18%, #ffd68188, transparent 43%), linear-gradient(160deg, #eaa13b, #b65a16 48%, #74300c);
  box-shadow: inset 0 2px 3px #fff0b8aa, inset 0 -5px 8px #552005, inset 0 0 0 4px #d28a2b, 0 0 0 3px #66330d, 0 0 0 5px #e6b64f, 0 5px 12px #0009;
  transition: filter .18s, box-shadow .18s, transform .12s;
}
.controlDeck .spinBtn::before { content: '⟳'; display: block; color: #fff0c5; font-size: clamp(18px, 2vw, 26px); line-height: .85; margin: 0 0 3px; text-shadow: 0 2px 2px #6a2d0c; }
.controlDeck .spinBtn::after { content: ''; display: block; position: absolute; inset: -7px; border: 2px solid #ffc65c; border-top-color: #fff6c6; border-bottom-color: #8c4617; border-radius: 50%; box-shadow: 0 0 10px #ff9b2633; pointer-events: none; }
.controlDeck .spinBtn span { color: #fff9e8; text-shadow: 0 2px 2px #572608, 0 0 10px #ffcb6855; letter-spacing: .035em; }
.controlDeck .spinBtn small { color: #fff0c7; }
.controlDeck .spinBtn:hover:not(:disabled) { filter: brightness(1.12); box-shadow: inset 0 2px 4px #fff0b8bb, inset 0 -5px 8px #552005, inset 0 0 0 4px #e8aa48, 0 0 0 3px #66330d, 0 0 0 5px #ffe28b, 0 0 24px #ffaf4966; }
.controlDeck .spinBtn:active:not(:disabled) { transform: scale(.96); filter: brightness(.96); }
.controlDeck .spinBtn:focus-visible { outline: 3px solid #fff4c4; outline-offset: 10px; }
.controlDeck .spinBtn:disabled { cursor: not-allowed; opacity: .55; filter: saturate(.55); }
.game.is-spinning .controlDeck .spinBtn:disabled { opacity: .9; filter: saturate(.85); }
.game.is-spinning .controlDeck .spinBtn::after { inset: -7px; border-style: solid; border-color: #ffce6b55; border-top-color: #fff8d8; animation: spin-ring 1.1s linear infinite; }
@media (max-width: 1180px), (pointer: coarse) and (max-width: 1366px) {
  .slotStage .cell { width: 100%; min-width: 0; min-height: calc(var(--base-cell-height, 0px) + var(--reel-extra, 0px)); }
  .slotStage { padding-top: calc(clamp(70px, 15vw, 158px) + var(--reel-extra, 0px) * 1.08); }
  .slotStage .paylineHint { margin-top: calc(5cqw + var(--reel-extra, 0px) * .45); }
}
@media (min-width: 768px) {
  .controlDeck .spinBtn::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .game.is-spinning .controlDeck .spinBtn::after { animation: none !important; } }

/* Illustrated paytable uses exactly the same assets and multipliers as play. */
.rulesCard { width: min(900px, 96vw); }
.rulesGrid { grid-template-columns: minmax(0, 1fr); }
.rulesSection { min-width: 0; }
.rulesSymbol { display: flex; align-items: center; gap: 12px; text-align: left; }
.rulesSymbol img, .rulesScatterArt img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 5px #0009); }
.rulesSymbol span { font-size: 13px; }
.symbolPaytable { width: 100%; table-layout: fixed; }
.symbolPaytable th:first-child { width: 46%; }
.symbolPaytable th, .symbolPaytable td { padding: 8px; text-align: center; border-bottom: 1px solid #c28a4133; }
.symbolPaytable thead th { color: #ffe0a0; background: #a4581722; }
.symbolPaytable td { color: #ffdf95; font-weight: 800; }
.rulesScatterArt { display: flex; align-items: center; justify-content: center; gap: 16px; color: #ffdf95; }
.rulesPayoutNote { line-height: 1.65; }
@media (max-width: 600px) {
  .rulesCard { padding: 24px 14px 18px; }
  .rulesSymbol { flex-direction: column; gap: 4px; }
  .rulesSymbol img { width: 48px; height: 48px; }
  .rulesSymbol span { font-size: 11px; text-align: center; }
  .symbolPaytable th:first-child { width: 37%; }
  .symbolPaytable td, .symbolPaytable th { padding: 6px 3px; font-size: 12px; }
}

/* Phones keep a CSS gold frame, without the illustrated control-deck PNG. */
@media (max-width: 767px) {
  .controlDeck { position: relative; padding: 14px 12px; border: 2px solid #d99a3e; border-radius: 16px; background: linear-gradient(145deg, #352414, #0c111bed 45%, #241b10); box-shadow: inset 0 0 0 2px #17110b, inset 0 0 0 3px #f4c46a55, 0 6px 20px #0007; }
  .controlDeck::before, .controlDeck::after { content: none; display: none; }
}

/* One History entry in the deck. Reflow the remaining three utilities. */
.slotHeader .headerActions #autoHistoryBtn { display: none !important; }
.slotHeader .headerActions { display: flex; width: auto; height: auto; aspect-ratio: auto; min-height: 0; gap: 5px; padding: 6px; border: 1px solid #c99140; border-radius: 10px; background: linear-gradient(#302516, #0b141f); box-shadow: inset 0 0 0 2px #f0b95722, 0 4px 12px #0007; }
.slotHeader .headerActions .iconBtn { position: static; flex: 0 0 auto; width: calc(44px / var(--fit-scale, 1)); height: calc(44px / var(--fit-scale, 1)); min-height: 44px; padding: 0 !important; border: 1px solid #ad7a32; border-radius: 7px; background: #101b27; font-size: calc(20px / var(--fit-scale, 1)); }
.ledgerModal .ledgerClose { color: #fff1ce; text-shadow: none; transition: filter .15s, box-shadow .15s; }
.ledgerModal .ledgerClose svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 1px 2px #000); transition: transform .15s; }
.ledgerModal .ledgerClose:hover { filter: brightness(1.2); box-shadow: inset 0 0 18px #ffb23c55; }
.ledgerModal .ledgerClose:active svg { transform: scale(.88); }
.ledgerModal .ledgerClose:focus-visible { outline: 2px solid #fff0bc; outline-offset: -5px; }
@media (min-width: 601px) and (min-height: 601px) {
  .ledgerModal .ledgerClose { top: 19%; left: 88%; height: 12%; border-radius: 12px; background: radial-gradient(ellipse at 50% 20%, #f9b74733, transparent 65%); }
}