/* Mine Slot is a local-only game surface. All selectors are scoped so the
   existing STARQC games keep their own layout and tokens. */
.home-games-grid .game-card[data-game="mine-slot"] {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(27, 89, 100, .9), rgba(16, 27, 42, .98)),
        radial-gradient(circle at 80% 10%, rgba(89, 225, 239, .22), transparent 38%);
    border-color: rgba(83, 225, 235, .36);
}
.home-games-grid .game-card[data-game="mine-slot"]::after {
    content: '⛏';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-58%) rotate(-18deg);
    color: rgba(247, 201, 72, .9);
    font-size: 44px;
    line-height: 1;
    text-shadow: 0 5px 0 rgba(25, 33, 48, .8), 0 0 18px rgba(247, 201, 72, .35);
}
.home-games-grid .game-card[data-game="mine-slot"] .game-icon {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #ecb83f, #a65825 68%, #3b2735);
    border: 1px solid rgba(255, 235, 160, .7);
    box-shadow: inset 0 0 0 3px rgba(67, 43, 23, .35), 0 0 20px rgba(244, 190, 67, .2);
    font-size: 28px;
    color: #22202b;
}
.home-games-grid .game-card[data-game="mine-slot"] .game-icon::before { content: '◆'; }
.home-games-grid .game-card[data-game="mine-slot"] .game-info,
.home-games-grid .game-card[data-game="mine-slot"] .game-arrow,
.home-games-grid .game-card[data-game="mine-slot"] .game-card-play { position: relative; z-index: 2; }

.mine-slot-game {
    --ms-ink: #f8fafc;
    --ms-muted: rgba(240, 244, 243, .78);
    --ms-line: rgba(255, 255, 255, .18);
    --ms-gold: #ffe254;
    --ms-green: #36d28a;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: min(1100px, 100%);
    height: min(940px, calc(100vh - 178px));
    height: min(940px, calc(100dvh - 178px));
    min-height: min(680px, calc(100vh - 178px));
    min-height: min(680px, calc(100dvh - 178px));
    margin: 0 auto;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    isolation: isolate;
    color: var(--ms-ink);
    background: #78a9f2;
    font-family: 'Fredoka', system-ui, sans-serif;
    box-shadow: none;
}
.mine-slot-game * { box-sizing: border-box; }
.mine-slot-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
    background: #78a9f2 url('/assets/games/mine-slot/BG.png') center / 100% 100% no-repeat;
}
.mine-slot-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.mine-slot-effects {
    position: absolute;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.mine-slot-stage::after {
    content: none;
}
.mine-slot-topline {
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
}
.mine-slot-menu {
    position: absolute;
    top: 16px;
    right: 22px;
    width: 60px;
    height: 60px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(57, 93, 162, .78);
    box-shadow: 0 3px 8px rgba(38, 68, 125, .18);
    cursor: pointer;
    pointer-events: auto;
}
.mine-slot-menu span {
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: #f4f7ff;
}
.mine-slot-menu:hover { background: #426caf; }
.mine-slot-menu:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mine-slot-paytable {
    position: absolute;
    top: 88px;
    right: 18px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(354px, calc(100vw - 28px));
    padding: 12px;
    border: 3px solid #2c3034;
    border-radius: 7px;
    background: rgba(231, 235, 231, .98);
    box-shadow: 4px 5px 0 rgba(33, 44, 47, .7), 0 12px 26px rgba(19, 37, 69, .25);
    pointer-events: auto;
}
.mine-slot-game.show-paytable .mine-slot-paytable { display: flex; }
.mine-slot-paytable-title,
.mine-slot-coefs-title {
    margin: 0;
    color: #30383d;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(255,255,255,.6);
}
.mine-slot-paytable-title {
    font-size: 15px;
    letter-spacing: .35px;
}
.mine-slot-pays {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
}
.mine-slot-coefs-title {
    font-size: 10px;
    letter-spacing: .3px;
}
.mine-slot-coefs {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.mine-slot-pay-item {
    position: relative;
    min-width: 0;
    min-height: 66px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px solid rgba(43, 52, 53, .38);
    background: linear-gradient(180deg, #d7ded8, #a7b3b0);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.65);
}
.mine-slot-pay-item img { display: block; width: 37px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.mine-slot-pay-item b { color: #ffe066; font-size: clamp(8px, 2.4vw, 10px); }
.mine-slot-pay-item.is-enchanted::after {
    content: '✦';
    position: absolute;
    top: 2px;
    right: 4px;
    color: #b74cf4;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 3px #fff;
}

.mine-slot-message {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(90vw, 440px);
    min-width: 170px;
    padding: 9px 14px;
    border: 2px solid rgba(241, 244, 239, .84);
    border-radius: 5px;
    background: rgba(39, 45, 45, .94);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .65px;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 3px 4px 0 rgba(24, 35, 38, .58);
    pointer-events: none;
    transform: translateX(-50%);
}
.mine-slot-message.idle { display: none; }
.mine-slot-message.win { color: #fef08a; border-color: rgba(254, 240, 138, .55); }
.mine-slot-message.bonus { color: #9fffe3; border-color: rgba(73, 214, 155, .6); }
.mine-slot-message.loss { color: #ffd0c9; }
.mine-slot-message.mining { color: #ffe886; border-color: rgba(255, 221, 104, .8); }
.mine-slot-game.is-mining .mine-slot-message { animation: mineSlotMining .36s ease-in-out infinite alternate; }
@keyframes mineSlotMining { to { box-shadow: 0 0 18px rgba(255, 208, 77, .55); } }

.mine-slot-reel-frame {
    position: absolute;
    z-index: 4;
    top: 4%;
    left: 50%;
    width: min(19vw, 350px);
    aspect-ratio: 5460 / 3460;
    background: url('/assets/games/mine-slot/playing-frame.png') center / 100% 100% no-repeat;
    transform: translateX(-50%);
}
.mine-slot-reels {
    position: absolute;
    inset: 7.6% 4.3% 8.5%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 2.2%;
}
.mine-slot-reels.is-tape-spinning { grid-template-rows: minmax(0, 1fr); }
.mine-slot-reel-window {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
}
.mine-slot-reel-window::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: -35% -25%;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 34%, rgba(202, 246, 255, .2) 47%, rgba(255,255,255,.58) 50%, rgba(113, 202, 255, .16) 53%, transparent 66%);
    transform: translateY(-35%);
}
.mine-slot-reel-window.is-rolling::after { opacity: .9; animation: mineSlotReelShine var(--ms-roll-duration) linear both; }
.mine-slot-reel-window.is-landed { animation: mineSlotReelLand .14s ease-out; }
.mine-slot-reel-track {
    position: absolute;
    inset: 0 0 auto;
    display: grid;
    grid-template-rows: repeat(24, minmax(0, 1fr));
    will-change: transform;
    backface-visibility: hidden;
}
.mine-slot-reel-track.is-rolling { transition: transform var(--ms-roll-duration) cubic-bezier(.12, .78, .14, 1) var(--ms-stop-delay); }
.mine-slot-reel-track .mine-slot-cell { min-height: 0; }
.mine-slot-cell {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #fff;
    font-weight: 900;
    text-shadow: 2px 2px 0 rgba(0,0,0,.45);
    transition: background .15s, transform .15s, filter .15s;
}
.mine-slot-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 38%, rgba(0,0,0,.035));
}
.mine-slot-cell.is-upgraded { box-shadow: inset 0 0 0 2px #f4dc79, 0 0 15px rgba(255,220,110,.48); }
.mine-slot-cell.is-scatter { box-shadow: inset 0 0 0 3px rgba(161,255,215,.9), 0 0 16px rgba(73,214,155,.55); }
.mine-slot-glyph {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    text-align: center;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1;
}
.mine-slot-glyph img {
    display: block;
    width: min(78%, 68px);
    height: min(76%, 68px);
    object-fit: contain;
    object-position: center;
    image-rendering: pixelated;
}
.mine-slot-glyph.word { font-size: clamp(8px, 1.3vw, 12px); letter-spacing: -.25px; }
.mine-slot-cell.is-spinning { animation: mineSlotCell .16s steps(2, end) infinite; filter: brightness(1.18); }
.mine-slot-cell.is-win { animation: mineSlotWin .55s ease-in-out infinite alternate; outline: 3px solid #fff3a3; outline-offset: -3px; z-index: 2; }
.mine-slot-cell.is-bonus { box-shadow: inset 0 0 0 3px rgba(161, 255, 215, .9), 0 0 16px rgba(73, 214, 155, .65); }
.mine-slot-cell.is-tnt .mine-slot-glyph img { filter: drop-shadow(0 0 7px rgba(255, 110, 51, .62)); }
.mine-slot-cell.is-book .mine-slot-glyph img { filter: drop-shadow(0 0 7px rgba(113, 245, 201, .55)); }
.mine-slot-cell.is-upgraded { animation: mineSlotEnchant .42s ease-out; }
.mine-slot-cell.is-consumed { animation: mineSlotSymbolConsume .22s ease-in forwards; }
@keyframes mineSlotReelShine { to { transform: translateY(35%); } }
@keyframes mineSlotReelLand { 35% { filter: brightness(1.7); transform: translateY(2px); } 100% { filter: brightness(1); transform: translateY(0); } }
@keyframes mineSlotEnchant { 0% { filter: brightness(2) saturate(1.6); transform: scale(1.12); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes mineSlotSymbolConsume { to { opacity: 0; filter: brightness(1.5); transform: translateY(9px) scale(.68); } }
@keyframes mineSlotCell { 50% { transform: translateY(2px); filter: brightness(.85); } }
@keyframes mineSlotWin { to { filter: brightness(1.45) saturate(1.25); transform: translateY(-2px) scale(1.03); } }
.mine-slot-game.is-spinning .mine-slot-reel-frame { filter: drop-shadow(0 0 16px rgba(97,229,237,.55)); }

.mine-slot-free-spins {
    position: absolute;
    z-index: 5;
    top: 105px;
    left: 50%;
    padding: 7px 12px;
    border: 1px solid rgba(255,226,130,.4);
    border-radius: 999px;
    background: rgba(15,25,34,.86);
    color: #ffe58b;
    font: 900 9px/1 'Fredoka', sans-serif;
    letter-spacing: .6px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.65);
    transform: translateX(-50%);
    white-space: nowrap;
}
.mine-slot-counters {
    position: absolute;
    z-index: 5;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    pointer-events: none;
    transform: translateX(-50%);
    white-space: nowrap;
}
.mine-slot-chests,
.mine-slot-depth {
    padding: 6px 9px;
    border: 1px solid rgba(255,226,130,.34);
    border-radius: 999px;
    background: rgba(15,25,34,.86);
    color: rgba(255,239,194,.9);
    font: 900 8px/1 'Fredoka', sans-serif;
    letter-spacing: .35px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.65);
}
.mine-slot-free-spins.is-active {
    color: #a5ffe1;
    border-color: rgba(103,255,202,.72);
    box-shadow: 0 0 18px rgba(73,214,155,.3);
}
.mine-slot-free-spins[hidden] { display: none; }

.mine-slot-bonus-buy {
    position: absolute;
    z-index: 5;
    left: clamp(16px, calc(50% - 360px), 35%);
    top: 43%;
    width: 154px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 8px 8px;
    border: 3px solid #ffea67;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffea32, #ffaf12);
    color: #272019;
    box-shadow: 3px 4px 0 rgba(73, 41, 23, .62), 0 9px 22px rgba(41, 32, 18, .22), inset 0 0 0 2px rgba(255,255,255,.28);
    cursor: pointer;
    font: 900 13px/1.02 'Fredoka', sans-serif;
    text-transform: uppercase;
    transition: transform .16s, filter .16s;
}
.mine-slot-buy-art { display: block; width: 55px; height: 55px; object-fit: contain; image-rendering: pixelated; }
.mine-slot-bonus-buy span { max-width: 130px; }
.mine-slot-bonus-buy small { color: #61431b; font-size: 10px; font-weight: 900; }
.mine-slot-bonus-buy:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); }
.mine-slot-bonus-buy:active:not(:disabled) { transform: translateY(1px); }
.mine-slot-bonus-buy:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.35); }

.mine-slot-bottom {
    position: absolute;
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(150px, 1.15fr) minmax(140px, 1fr) minmax(250px, 1.7fr) 42px 42px;
    align-items: center;
    gap: 6px;
    left: clamp(12px, 18%, 350px);
    right: clamp(12px, 18%, 350px);
    bottom: 40px;
    min-height: 92px;
}
.mine-slot-stat,
.mine-slot-win {
    min-width: 0;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 9px 15px;
    border: 2px solid rgba(208, 221, 226, .28);
    border-radius: 10px;
    background: rgba(35, 37, 39, .88);
    color: var(--ms-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
    text-transform: none;
    box-shadow: 2px 3px 0 rgba(34, 37, 34, .44);
}
.mine-slot-stat b,
.mine-slot-win b { display: block; margin-top: 3px; color: #fff; font-size: 18px; letter-spacing: 0; }
.mine-slot-stat { text-align: center; }
.mine-slot-win { text-align: center; }
.mine-slot-win b { color: #ffe47c; }
.mine-slot-bet {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: min(100%, 169px);
    gap: 6px;
    min-width: 0;
    min-height: 68px;
    padding: 6px;
    border: 2px solid rgba(208, 221, 226, .28);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(43, 41, 56, .96), rgba(25, 27, 40, .96));
    box-shadow: 2px 3px 0 rgba(34, 37, 34, .44);
}
.mine-slot-bet button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    cursor: pointer;
    font: 900 16px/1 'Fredoka', sans-serif;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.mine-slot-bet button:hover:not(:disabled) {
    border-color: rgba(211, 50, 211, .62);
    background: rgba(147, 76, 220, .2);
}
.mine-slot-bet button:active:not(:disabled) { transform: scale(.96); }
.mine-slot-bet-value {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 0 5px;
    border: 1px solid rgba(208, 221, 226, .18);
    border-radius: 8px;
    outline: 0!important;
    background: transparent;
    box-shadow: none;
}
.mine-slot-bet-currency {
    flex: 0 0 auto;
    margin-left: auto;
    transform: translateY(2px);
    color: rgba(230, 230, 236, .72);
    font: 800 8px/1 'Fredoka', sans-serif;
    letter-spacing: .1px;
    white-space: nowrap;
}
.mine-slot-spin,
.mine-slot-auto {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(208, 221, 226, .28);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    box-shadow: 2px 3px 0 rgba(34, 37, 34, .44);
    color: #fff;
    cursor: pointer;
    font: 900 18px/1 'Fredoka', sans-serif;
}
.mine-slot-auto:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.mine-slot-bet input {
    flex: 1 1 0;
    width: 0;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    box-sizing: border-box;
    border: 0!important;
    border-radius: 0!important;
    outline: 0!important;
    appearance: textfield;
    -moz-appearance: textfield;
    background: transparent!important;
    box-shadow: none!important;
    color: #fff;
    font: 900 16px 'Fredoka', sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.mine-slot-bet input::-webkit-inner-spin-button,
.mine-slot-bet input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.mine-slot-bet-star {
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
}
.mine-slot-bet button:focus-visible,
.mine-slot-spin:focus-visible,
.mine-slot-auto:focus-visible,
.mine-slot-bonus-buy:focus-visible { outline: 2px solid #fff1a8; outline-offset: 2px; }
.mine-slot-bet input:focus-visible { outline: 0!important; outline-offset: 0!important; box-shadow: none!important; }
.mine-slot-spin {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border: 2px solid rgba(208, 221, 226, .28);
    border-radius: 10px;
    background: linear-gradient(145deg, #29ce83, #139355);
    box-shadow: 2px 3px 0 rgba(34, 37, 34, .44);
    font-size: 27px;
    transition: transform .16s, filter .16s;
}
.mine-slot-spin:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); }
.mine-slot-spin:active:not(:disabled) { transform: translateY(1px); }
.mine-slot-spin.is-busy { animation: none; }
.mine-slot-spin:disabled,
.mine-slot-auto:disabled,
.mine-slot-bet button:disabled { cursor: not-allowed; opacity: .45; }
.mine-slot-auto { width: 42px; height: 42px; min-height: 42px; font-size: 16px; background: rgba(34, 39, 40, .9); }
.mine-slot-auto.is-on { color: #fff; background: linear-gradient(145deg, #e6535b, #a72134); }
.mine-slot-hint {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    color: rgba(228, 243, 245, .44);
    font-size: 8px;
    letter-spacing: .9px;
    text-transform: uppercase;
    pointer-events: none;
}

@media (max-width: 700px) {
    .mine-slot-game {
        height: min(900px, calc(100vh - 130px));
        height: min(900px, calc(100dvh - 130px));
        min-height: min(680px, calc(100vh - 130px));
        min-height: min(680px, calc(100dvh - 130px));
        border-radius: 6px;
    }
    .mine-slot-stage { min-height: 0; }
    .mine-slot-menu { top: 12px; right: 12px; width: 48px; height: 48px; gap: 5px; }
    .mine-slot-menu span { width: 24px; }
    .mine-slot-paytable { top: 70px; right: 9px; width: min(354px, calc(100vw - 18px)); padding: 9px; gap: 7px; }
    .mine-slot-paytable-title { font-size: 13px; }
    .mine-slot-pays { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .mine-slot-coefs-title { font-size: 9px; }
    .mine-slot-pay-item { min-height: 50px; gap: 2px; }
    .mine-slot-pay-item img { width: 30px; height: 25px; }
    .mine-slot-pay-item b { font-size: 9px; }
    .mine-slot-reel-frame { top: 14%; width: min(90vw, 320px, 90%); }
    .mine-slot-free-spins { top: 78px; left: 50%; padding: 5px 8px; font-size: 8px; }
    .mine-slot-counters { gap: 3px; }
    .mine-slot-chests,
    .mine-slot-depth { padding: 5px 7px; font-size: 7px; }
    .mine-slot-bonus-buy { left: 7px; top: 54%; width: 78px; min-height: 82px; gap: 2px; padding: 5px 3px; font-size: 8px; }
    .mine-slot-buy-art { width: 38px; height: 37px; }
    .mine-slot-bonus-buy span { max-width: 70px; }
    .mine-slot-bonus-buy small { font-size: 7px; }
    .mine-slot-bottom { left: 8px; right: 8px; bottom: 54px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px 42px; gap: 4px; min-height: 0; }
    .mine-slot-stat,
    .mine-slot-win { min-height: 54px; padding: 6px 8px; border-width: 1px; border-radius: 7px; font-size: 10px; }
    .mine-slot-stat b,
    .mine-slot-win b { margin-top: 2px; font-size: 13px; }
    .mine-slot-bet { grid-column: 1 / 3; grid-row: 2; width: min(100%, 169px); min-height: 54px; padding: 4px; gap: 4px; }
    .mine-slot-bet button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; border-radius: 10px; }
    .mine-slot-bet-value { min-height: 44px; gap: 3px; padding: 0 8px; }
    .mine-slot-bet input { min-height: 44px; font-size: 16px; }
    .mine-slot-bet-star { flex-basis: 15px; width: 15px; height: 15px; }
    .mine-slot-spin { grid-column: 3; grid-row: 1 / 3; width: 42px; height: 42px; min-height: 42px; border-radius: 10px; font-size: 27px; }
    .mine-slot-auto { grid-column: 4; grid-row: 1 / 3; width: 42px; height: 42px; min-height: 42px; font-size: 16px; }
    .mine-slot-bet,
    .mine-slot-spin,
    .mine-slot-auto { border-width: 1px; border-radius: 7px; }
    .mine-slot-hint { display: none; }
    .mine-slot-message { min-width: 0; max-width: calc(100vw - 32px); padding: 7px 9px; font-size: 9px; }
}
@media (max-height: 760px) and (min-width: 701px) {
    .mine-slot-game {
        height: calc(100vh - 178px);
        height: calc(100dvh - 178px);
        min-height: min(500px, calc(100vh - 178px));
        min-height: min(500px, calc(100dvh - 178px));
    }
    .mine-slot-stage { min-height: 0; }
    .mine-slot-bottom { bottom: 8px; }
}
@media (max-height: 760px) and (max-width: 700px) {
    .mine-slot-game {
        height: calc(100vh - 140px);
        height: calc(100dvh - 140px);
        min-height: min(500px, calc(100vh - 140px));
        min-height: min(500px, calc(100dvh - 140px));
    }
    .mine-slot-stage { min-height: 0; }
    .mine-slot-reel-frame { top: 10%; width: min(72vw, 240px, 76%); }
    .mine-slot-bonus-buy { left: 4px; width: 68px; }
    .mine-slot-bottom { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .mine-slot-cell.is-spinning,
    .mine-slot-cell.is-win,
    .mine-slot-game.is-mining .mine-slot-message { animation: none; }
    .mine-slot-cell.is-consumed { animation-duration: 80ms; }
    .mine-slot-bonus-buy,
    .mine-slot-spin { transition: none; }
}

.mine-slot-big-win {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
}
.mine-slot-big-win[hidden] { display: none; }
.mine-slot-big-win::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 182, 44, .16), transparent 46%),
        rgba(8, 10, 14, .68);
    backdrop-filter: blur(1.5px) brightness(.58) saturate(.82);
}
.mine-slot-big-win__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 4vh, 40px);
    padding: 0 16px;
    translate: 0 -50%;
}
.mine-slot-big-win__title {
    display: block;
    width: min(54%, 1100px);
    min-width: min(280px, 80%);
    max-width: 100%;
    height: auto;
    overflow: visible;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .36));
}
.mine-slot-pixel-text {
    display: block;
    width: auto;
    max-width: 100%;
    overflow: visible;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
}
.mine-slot-pixel-text--gold {
    height: clamp(50px, 12vh, 148px);
    filter:
        drop-shadow(2px 2px 0 #ef9d1b)
        drop-shadow(0 5px 0 #a64e0c)
        drop-shadow(0 10px 0 #482513)
        drop-shadow(0 16px 10px rgba(0, 0, 0, .76));
}
.mine-slot-big-win__payout {
    position: relative;
    display: grid;
    place-items: center;
    width: min(62%, 1160px);
    min-height: clamp(86px, 18vh, 196px);
    padding: 10px 24px;
    border: 8px solid #e2e5e1;
    border-radius: 0;
    background:
        linear-gradient(180deg, #cbd0d6 0 49%, #b9c0c9 50% 100%),
        #c4cad1;
    box-shadow:
        0 7px 0 #626361,
        0 14px 30px rgba(0, 0, 0, .48),
        inset 0 0 0 4px #a5aba9;
}
.mine-slot-big-win__payout::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 4px solid #52595c;
    border-top-color: #f0f1ed;
    border-left-color: #8f979a;
    pointer-events: none;
}
.mine-slot-big-win__payout > span:not(.mine-slot-big-win__sr-only) {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    font-size: 0;
    line-height: 0;
}
.mine-slot-pixel-text--lime {
    height: clamp(38px, 9vh, 110px);
    filter: drop-shadow(2px 2px 0 #19220f) drop-shadow(0 5px 0 #10160d);
}
.mine-slot-big-win__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mine-slot-game.is-big-win .mine-slot-big-win__title { animation: mineSlotBigWinPop .72s cubic-bezier(.16, 1.2, .36, 1) both; }
.mine-slot-game.is-big-win .mine-slot-big-win__payout { animation: mineSlotBigWinPanel .66s .12s cubic-bezier(.16, 1.1, .35, 1) both; }
.mine-slot-game.is-big-win-closing .mine-slot-big-win::before { animation: mineSlotBigWinFade .36s ease-in both; }
.mine-slot-game.is-big-win-closing .mine-slot-big-win__content { animation: mineSlotBigWinExit .36s ease-in both; }
@keyframes mineSlotBigWinPop {
    from { opacity: 0; transform: scale(.55) translateY(24px); }
    72% { opacity: 1; transform: scale(1.06); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mineSlotBigWinPanel {
    from { opacity: 0; transform: translateY(24px) scale(.82); }
    70% { opacity: 1; transform: translateY(-3px) scale(1.035); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mineSlotBigWinFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes mineSlotBigWinExit { to { opacity: 0; transform: translateY(-12px) scale(.97); } }

@media (max-width: 700px) {
    .mine-slot-big-win__content { gap: clamp(18px, 4vh, 28px); }
    .mine-slot-big-win__title { width: min(80%, 540px); min-width: 0; }
    .mine-slot-big-win__payout { width: min(88%, 560px); min-height: 76px; border-width: 5px; }
    .mine-slot-pixel-text--lime { height: clamp(30px, 7vh, 52px); }
}
@media (prefers-reduced-motion: reduce) {
    .mine-slot-big-win__title,
    .mine-slot-big-win__payout,
    .mine-slot-big-win::before,
    .mine-slot-big-win__content { animation: none !important; }
}

/* Keep the star and stake value together inside one compact framed field. */
html.theme-engine-active #gameArea .mine-slot-game .mine-slot-bet .mine-slot-bet-value > input[data-ms-bet],
html.theme-engine-active #gameArea .mine-slot-game .mine-slot-bet .mine-slot-bet-value > input[data-ms-bet]:focus,
html.theme-engine-active #gameArea .mine-slot-game .mine-slot-bet .mine-slot-bet-value > input[data-ms-bet]:focus-visible {
    appearance: none!important;
    -webkit-appearance: none!important;
    border: 0!important;
    border-radius: 0!important;
    outline: 0!important;
    background: transparent!important;
    box-shadow: none!important;
}

/* Compact-screen defaults; desktop sizes scale to match fullscreen proportions. */
.mine-slot-game .mine-slot-bet button,
.mine-slot-game .mine-slot-spin,
.mine-slot-game .mine-slot-auto {
    width: 42px!important;
    min-width: 42px!important;
    max-width: 42px!important;
    height: 42px!important;
    min-height: 42px!important;
    max-height: 42px!important;
    box-sizing: border-box!important;
}

@media (min-width: 900px) {
    .mine-slot-game .mine-slot-bottom {
        left: 50%!important;
        right: auto!important;
        bottom: calc(clamp(22px, 3.5vh, 40px) - 5px)!important;
        width: min(497px, 72%, calc(100% - 48px))!important;
        min-height: 86px!important;
        grid-template-columns: minmax(0, 101px) minmax(0, 91px) 169px 60px 60px!important;
        gap: 4px!important;
        transform: translateX(calc(-50% + 19.5px))!important;
    }
    .mine-slot-game .mine-slot-stat,
    .mine-slot-game .mine-slot-win {
        min-height: 60px!important;
        padding: 9px 13px!important;
        font-size: 12px!important;
    }
    .mine-slot-game .mine-slot-stat b,
    .mine-slot-game .mine-slot-win b {
        font-size: 18px!important;
    }
    .mine-slot-game .mine-slot-bet {
        width: min(100%, 169px)!important;
        min-height: 60px!important;
        gap: 4px!important;
        padding: 4px!important;
    }
    .mine-slot-game .mine-slot-bet button {
        width: 31px!important;
        min-width: 31px!important;
        max-width: 31px!important;
        height: 31px!important;
        min-height: 31px!important;
        max-height: 31px!important;
        font-size: 14px!important;
    }
    .mine-slot-game .mine-slot-bet-value {
        min-height: 35px!important;
        gap: 4px!important;
        padding: 0 6px!important;
    }
    .mine-slot-game .mine-slot-bet input {
        width: 47px!important;
        min-height: 35px!important;
        font-size: 15px!important;
    }
    .mine-slot-game .mine-slot-bet-star {
        width: 13px!important;
        height: 13px!important;
    }
    .mine-slot-game .mine-slot-spin,
    .mine-slot-game .mine-slot-auto {
        width: 60px!important;
        min-width: 60px!important;
        max-width: 60px!important;
        height: 60px!important;
        min-height: 60px!important;
        max-height: 60px!important;
    }
    .mine-slot-game .mine-slot-spin { font-size: 26px!important; }
    .mine-slot-game .mine-slot-auto { font-size: 16px!important; }
    .mine-slot-game .mine-slot-hint {
        bottom: -10px!important;
        font-size: 8px!important;
    }
}

@media (min-width: 900px) {
    html:fullscreen #gameOverlay.show #gameArea .mine-slot-game .mine-slot-bet-value,
    html.starqc-fullscreen-fallback #gameOverlay.show #gameArea .mine-slot-game .mine-slot-bet-value {
        gap: 6px!important;
        padding-inline: 4px!important;
    }
    html:fullscreen #gameOverlay.show #gameArea .mine-slot-game .mine-slot-bet-star,
    html.starqc-fullscreen-fallback #gameOverlay.show #gameArea .mine-slot-game .mine-slot-bet-star {
        flex-basis: 20px!important;
        width: 20px!important;
        height: 20px!important;
    }
    html:fullscreen #gameOverlay.show #gameArea .mine-slot-game .mine-slot-bet-currency,
    html.starqc-fullscreen-fallback #gameOverlay.show #gameArea .mine-slot-game .mine-slot-bet-currency {
        align-self: flex-end!important;
        margin-bottom: 5px!important;
        transform: translateY(-9px)!important;
        color: rgba(233, 213, 255, .72)!important;
        font: 700 10px/1 'Fredoka', sans-serif!important;
    }
}

@media (max-width: 899px) {
    .mine-slot-game .mine-slot-spin,
    .mine-slot-game .mine-slot-auto {
        width: 42px!important;
        min-width: 42px!important;
        max-width: 42px!important;
        height: 42px!important;
        min-height: 42px!important;
        max-height: 42px!important;
    }
}

@media (min-width: 701px) and (max-width: 899px) {
    .mine-slot-game .mine-slot-bottom {
        left: 50%!important;
        right: auto!important;
        bottom: 3px!important;
        width: min(72%, calc(100% - 20px))!important;
        min-height: 51px!important;
        grid-template-columns: minmax(51px, .9fr) minmax(47px, .8fr) minmax(110px, 1.8fr) 31px 31px!important;
        gap: 3px!important;
        transform: translateX(-50%)!important;
    }
    .mine-slot-game .mine-slot-stat,
    .mine-slot-game .mine-slot-win {
        min-height: 39px!important;
        padding: 4px 6px!important;
        font-size: 8px!important;
    }
    .mine-slot-game .mine-slot-stat b,
    .mine-slot-game .mine-slot-win b {
        font-size: 11px!important;
    }
    .mine-slot-game .mine-slot-bet {
        width: min(100%, 169px)!important;
        min-height: 42px!important;
        gap: 3px!important;
        padding: 3px!important;
    }
    .mine-slot-game .mine-slot-bet button {
        width: 31px!important;
        min-width: 31px!important;
        max-width: 31px!important;
        height: 31px!important;
        min-height: 31px!important;
        max-height: 31px!important;
        font-size: 14px!important;
    }
    .mine-slot-game .mine-slot-bet-value {
        min-height: 32px!important;
        gap: 3px!important;
        padding: 0 4px!important;
    }
    .mine-slot-game .mine-slot-bet input {
        width: clamp(31px, 6.6vw, 47px)!important;
        min-height: 32px!important;
        font-size: clamp(10px, 1.25vw, 12px)!important;
    }
    .mine-slot-game .mine-slot-bet-star { width: 13px!important; height: 13px!important; }
    .mine-slot-game .mine-slot-spin,
    .mine-slot-game .mine-slot-auto {
        width: 31px!important;
        min-width: 31px!important;
        max-width: 31px!important;
        height: 31px!important;
        min-height: 31px!important;
        max-height: 31px!important;
    }
    .mine-slot-game .mine-slot-spin { font-size: 20px!important; }
    .mine-slot-game .mine-slot-auto { font-size: 12px!important; }
    .mine-slot-game .mine-slot-hint { bottom: -10px!important; font-size: 8px!important; }
}

/* Match the star/amount/USDT field frame to the balance card. */
html.theme-engine-active #gameOverlay #gameArea .mine-slot-game .mine-slot-bet-value,
html.theme-engine-active #gameOverlay:fullscreen #gameArea .mine-slot-game .mine-slot-bet-value,
html.starqc-fullscreen-fallback #gameOverlay #gameArea .mine-slot-game .mine-slot-bet-value {
    border: 2px solid rgba(208, 221, 226, .18)!important;
    border-radius: 10px!important;
    box-shadow: 2px 3px 0 rgba(34, 37, 34, .44)!important;
}

@media (max-width: 700px) {
    html.theme-engine-active #gameOverlay #gameArea .mine-slot-game .mine-slot-bet-value,
    html.starqc-fullscreen-fallback #gameOverlay #gameArea .mine-slot-game .mine-slot-bet-value {
        border-width: 1px!important;
        border-radius: 7px!important;
    }
}