/*!********************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js!./styles/slot.css ***!
  \********************************************************************/
:root {
    --ice: #83e9ff;
    --ice-strong: #28bfe8;
    --deep: #05101f;
    --panel: #0a1e34;
    --panel-2: #102a45;
    --gold: #ffd45f;
    --gold-dark: #a86812;
    --text: #f4fbff;
    --muted: #9bc0d6;
    --stroke: rgba(143, 224, 255, .38);
    --shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #020812; }
body {
    min-height: 100vh;
    margin: 0;
    padding: 18px;
    color: var(--text);
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 50% 0%, rgba(52, 174, 228, .34), transparent 34%),
        radial-gradient(circle at 10% 55%, rgba(34, 113, 177, .22), transparent 28%),
        radial-gradient(circle at 90% 58%, rgba(55, 144, 207, .2), transparent 30%),
        linear-gradient(180deg, #0a2945 0%, #061629 40%, #020914 100%);
    overflow-x: hidden;
}

body::before, body::after {
    content: "";
    position: fixed;
    inset: auto;
    width: 40vw;
    height: 75vh;
    bottom: -24vh;
    z-index: -1;
    opacity: .55;
    filter: blur(1px);
    background: linear-gradient(140deg, rgba(125, 222, 255, .16), rgba(8, 29, 55, .02));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body::before { left: -10vw; transform: rotate(-8deg); }
body::after { right: -12vw; transform: rotate(10deg); }

button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(126, 230, 255, .45); outline-offset: 2px; }
.hidden { display: none !important; }
.visible { display: block; }

.app-shell { width: min(840px, 100%); margin: 0 auto; }
.screen {
    width: 100%;
    border: 1px solid rgba(129, 219, 255, .28);
    border-radius: 26px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(13, 46, 76, .96), rgba(3, 15, 30, .98));
    box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
}

.game-header {
    min-height: 96px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(151, 225, 255, .18);
    background:
        linear-gradient(90deg, rgba(7, 22, 40, .95), rgba(18, 55, 86, .88) 50%, rgba(7, 22, 40, .95));
}
.brand-block { display: flex; align-items: center; gap: 13px; }
.brand-rune {
    width: 56px; height: 64px;
    display: grid; place-items: center;
    border: 1px solid rgba(144, 234, 255, .45);
    border-radius: 14px 14px 18px 18px;
    color: #dff9ff;
    background: linear-gradient(180deg, #184e72, #08253e);
    box-shadow: inset 0 0 22px rgba(89, 213, 255, .18), 0 4px 16px rgba(0,0,0,.3);
    font-size: 35px;
    font-family: Georgia, serif;
    text-shadow: 0 0 12px rgba(101, 226, 255, .7);
}
.brand-kicker { color: #80dfff; font-size: 9px; font-weight: 900; letter-spacing: .28em; }
.brand-block h1 { margin: 0; font-size: clamp(22px, 4.6vw, 35px); line-height: .95; letter-spacing: .04em; text-shadow: 0 3px 0 #042033, 0 0 18px rgba(91, 220, 255, .25); }
.brand-subtitle { color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .3em; margin-top: 4px; }
.header-actions { display: flex; gap: 8px; }
.icon-button, .back-button {
    border: 1px solid rgba(135, 218, 255, .35);
    color: #dff8ff;
    background: linear-gradient(180deg, #163e5d, #0a2237);
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.09);
}
.icon-button { width: 40px; height: 40px; border-radius: 50%; font-weight: 900; }

.jackpot-strip {
    padding: 8px 10px 4px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.45fr 1fr 1fr;
    gap: 6px;
    background: rgba(3, 14, 27, .68);
}
.jackpot, .total-win {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    box-shadow: inset 0 0 15px rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.25);
    text-align: center;
}
.jackpot span, .total-win span { font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.jackpot strong { font-size: 17px; text-shadow: 0 2px 2px rgba(0,0,0,.45); }
.jackpot-grand { background: linear-gradient(180deg, #bb3134, #6d1219); }
.jackpot-major { background: linear-gradient(180deg, #7a47aa, #40235f); }
.jackpot-minor { background: linear-gradient(180deg, #4aaf60, #236536); }
.jackpot-mini { background: linear-gradient(180deg, #3394c5, #155178); }
.total-win { background: linear-gradient(180deg, #174978, #092a4d); border-color: rgba(126,225,255,.45); }
.total-win strong { color: #fff; font-size: 23px; line-height: 1; }
.total-win small { color: #8edff9; font-size: 8px; font-weight: 800; margin-top: 3px; }

.status-bar {
    min-height: 42px;
    padding: 5px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(14, 48, 77, .8), rgba(6, 25, 44, .8));
    border-bottom: 1px solid rgba(126,225,255,.16);
}
.status-pill { display: flex; gap: 6px; align-items: center; color: #8dcde6; font-size: 9px; }
.status-pill b { color: #e3f8ff; letter-spacing: .08em; }
.game-state { text-align: center; font-size: 10px; font-weight: 900; color: #dffaff; letter-spacing: .09em; }

.bonus-bet-panel {
    padding: 8px 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    background: rgba(3, 15, 28, .82);
}
.bonus-bet-title { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.bonus-bet-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bonus-option {
    min-height: 34px;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(125, 211, 247, .2);
    border-radius: 8px;
    color: #a6cde0;
    background: #0b2238;
    cursor: pointer;
}
.bonus-option b { font-size: 8px; letter-spacing: .04em; }
.bonus-option small { font-size: 8px; color: #6ea8c4; }
.bonus-option.active { color: #071522; background: linear-gradient(180deg, #ffe27f, #d99629); border-color: #ffe79d; box-shadow: 0 0 14px rgba(255, 202, 72, .2); }
.bonus-option.active small { color: #53360a; }

.reel-stage {
    position: relative;
    padding: 14px 18px 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 20%, rgba(86, 190, 235, .16), transparent 42%),
        linear-gradient(180deg, rgba(17, 62, 96, .35), rgba(4, 20, 37, .55));
}
.mountain { position: absolute; bottom: -32px; width: 230px; height: 190px; opacity: .14; background: #b9edff; clip-path: polygon(0 100%, 38% 20%, 50% 50%, 68% 0, 100% 100%); }
.mountain-left { left: -65px; }
.mountain-right { right: -70px; transform: scaleX(-1); }
.reel-frame {
    position: relative;
    width: min(620px, 100%);
    margin: 0 auto;
    padding: 8px 10px 12px;
    border: 2px solid rgba(147, 230, 255, .52);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(22, 77, 114, .95), rgba(3, 20, 38, .98));
    box-shadow: inset 0 0 28px rgba(65, 196, 244, .12), 0 14px 35px rgba(0,0,0,.4);
}
.reel-frame::before, .reel-frame::after {
    content: "";
    position: absolute;
    top: 36px; bottom: 18px;
    width: 7px;
    border-radius: 5px;
    background: linear-gradient(180deg, #6f91a6, #d2f1fa 35%, #45667b 65%, #182c3c);
    box-shadow: 0 0 0 1px #142c40, inset 1px 0 rgba(255,255,255,.3);
}
.reel-frame::before { left: -5px; }
.reel-frame::after { right: -5px; }

.strike-row { height: 35px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 5px; }
.strike-cell {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid rgba(110, 214, 255, .16);
    border-radius: 7px;
    background: rgba(5, 26, 45, .72);
    color: #638da3;
    transition: 160ms ease;
}
.strike-cell span { filter: grayscale(1); opacity: .35; }
.strike-cell b { font-size: 12px; }
.reel-frame.bonus-active .strike-cell { color: #dffbff; border-color: rgba(117, 225, 255, .42); background: linear-gradient(180deg, #194a6b, #0a2a45); box-shadow: inset 0 0 15px rgba(80,206,255,.12); }
.reel-frame.bonus-active .strike-cell span { filter: none; opacity: 1; }
.strike-cell.striking { transform: translateY(2px); box-shadow: 0 0 22px rgba(121, 228, 255, .55), inset 0 0 22px rgba(121, 228, 255, .25) !important; }

table.gameGrid { width: 100%; table-layout: fixed; border-spacing: 6px; border-collapse: separate; }
td.gameGrid {
    position: relative;
    height: clamp(105px, 17vw, 148px);
    overflow: hidden;
    border: 1px solid rgba(98, 191, 230, .32);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(20, 66, 97, .8), rgba(6, 28, 49, .88)),
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,.02) 10px 11px);
    box-shadow: inset 0 0 24px rgba(50, 153, 203, .08), inset 0 1px rgba(255,255,255,.05);
    text-align: center;
    vertical-align: middle;
    transition: 180ms ease;
}
td.gameGrid::before { content: "ᛏ"; position: absolute; inset: 0; display: grid; place-items: center; font: 74px Georgia, serif; color: rgba(112, 198, 229, .055); pointer-events: none; }
td.gameGrid.spinning .symbol-wrap { animation: reelBlur .32s ease-in-out; }
td.gameGrid.win { border-color: #f6dc74; box-shadow: inset 0 0 30px rgba(255, 209, 73, .26), 0 0 17px rgba(255, 208, 70, .25); transform: translateY(-2px); }
td.gameGrid.collect { border-color: #8ceaff; box-shadow: inset 0 0 34px rgba(83, 216, 255, .35), 0 0 20px rgba(69, 205, 255, .32); }
td.gameGrid.struck { animation: hammerFlash .42s ease; }

.symbol-wrap { position: relative; z-index: 1; width: 100%; height: 100%; min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.symbol-icon { font-size: clamp(38px, 8vw, 66px); line-height: 1; text-shadow: 0 4px 6px rgba(0,0,0,.45); }
.symbol-label { margin-top: 5px; font-size: 9px; font-weight: 900; letter-spacing: .11em; color: #b7e9fa; }
.symbol-wrap.wild .symbol-icon { color: #b9f4ff; text-shadow: 0 0 16px rgba(117, 229, 255, .8); }
.symbol-wrap.wild .symbol-label { color: #f5dc6a; }
.symbol-wrap.hammer .symbol-icon { transform: rotate(-18deg); filter: drop-shadow(0 0 12px #72dfff); }
.symbol-wrap.hammer .symbol-label { color: #b9f4ff; }

.coin-symbol {
    width: clamp(68px, 12vw, 104px); height: clamp(68px, 12vw, 104px);
    display: grid; place-items: center;
    border-radius: 50%;
    border: 4px solid #e6ad34;
    background: radial-gradient(circle at 35% 28%, #fff0a7 0 8%, #f3c04b 24%, #c47a12 64%, #6c3e09 100%);
    box-shadow: inset 0 0 0 4px rgba(255,236,138,.35), inset 0 0 18px rgba(102,50,2,.45), 0 5px 13px rgba(0,0,0,.4);
    color: #fff8d2;
    font-weight: 950;
    font-size: clamp(17px, 3.5vw, 26px);
    text-shadow: 0 2px 2px #7a3b05;
}
.coin-symbol::before { content: "ᛟ"; position: absolute; color: rgba(105,55,6,.18); font: 54px Georgia,serif; }
.coin-symbol span { position: relative; z-index: 1; }
.coin-symbol.jackpot { border-color: #fff4b5; background: radial-gradient(circle at 36% 25%, #fffbdc, #ffd252 34%, #dc711f 72%, #792016); }
.coin-symbol.jackpot span { font-size: .72em; letter-spacing: -.03em; }
.multiplier-chip { position: absolute; z-index: 3; top: 6px; right: 7px; min-width: 32px; padding: 3px 6px; border: 1px solid #ffd861; border-radius: 999px; background: #9b341a; color: #fff5c8; font-weight: 950; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.empty-bonus { position: relative; z-index: 1; color: rgba(148, 220, 245, .22); font: 48px Georgia,serif; }

.line-markers { display: flex; justify-content: center; gap: 18px; margin-top: 4px; color: #70b7d2; font-size: 9px; font-weight: 800; }

.message-panel {
    width: min(620px, calc(100% - 36px));
    min-height: 48px;
    margin: 0 auto 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(114, 205, 240, .2);
    border-radius: 10px;
    background: rgba(4, 19, 35, .78);
}
.message-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #103552; font-size: 18px; }
.message-panel strong { display: block; font-size: 10px; color: #eafaff; letter-spacing: .1em; }
.message-panel span { display: block; margin-top: 2px; color: #8eb8cd; font-size: 10px; }

.control-panel {
    min-height: 92px;
    padding: 12px 16px 16px;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(129, 220, 255, .18);
    background: linear-gradient(180deg, rgba(6,22,39,.65), rgba(2,10,20,.95));
}
.wallet-block span, .bet-control span { display: block; color: #6fa6c1; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.wallet-block strong, .bet-control strong { font-size: 17px; }
.bet-control { min-width: 126px; height: 52px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; border: 1px solid rgba(114, 204, 240, .25); border-radius: 10px; background: #071b2e; text-align: center; }
.bet-control button { height: 100%; border: 0; color: #b7e8f8; background: transparent; cursor: pointer; font-size: 20px; }
.bet-control button:hover { background: rgba(122,215,249,.08); }
.auto-button { height: 52px; min-width: 82px; border: 1px solid rgba(116, 208, 244, .3); border-radius: 10px; color: #c9effb; background: linear-gradient(180deg, #123b59, #0a2237); font-size: 10px; font-weight: 900; cursor: pointer; }
.auto-button span { display: block; font-size: 18px; line-height: 15px; }
.spin-button { width: 84px; height: 68px; border: 2px solid #fff0a0; border-radius: 50%; color: #1e1505; background: radial-gradient(circle at 36% 25%, #fff1a2, #f6bf39 48%, #b86b13 100%); box-shadow: inset 0 0 0 4px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.36), 0 0 22px rgba(255,198,55,.16); cursor: pointer; font-weight: 950; }
.spin-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.spin-button:active { transform: translateY(1px); }
.spin-button:disabled, .auto-button:disabled, .bonus-option:disabled, .bet-control button:disabled { opacity: .5; cursor: default; }
.spin-hammer { display: block; font-size: 24px; line-height: 24px; transform: rotate(-18deg); }
.spin-button b { font-size: 9px; letter-spacing: .08em; }

.info-header { min-height: 80px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-bottom: 1px solid rgba(129,220,255,.18); background: #071b2e; }
.info-header h2 { margin: 2px 0 0; font-size: 22px; }
.eyebrow { color: #6cb8d8; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.back-button { min-width: 78px; height: 38px; border-radius: 8px; font-size: 10px; font-weight: 900; }
.info-content { padding: 16px; display: grid; gap: 12px; }
.info-card { padding: 16px; border: 1px solid rgba(117, 209, 245, .18); border-radius: 14px; background: rgba(9,31,52,.9); }
.info-card h3 { margin: 0 0 10px; color: #dcf7ff; font-size: 14px; letter-spacing: .04em; }
.info-card p { margin: 0; color: #a5c8da; font-size: 12px; line-height: 1.6; }
.mechanic-grid, .jackpot-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mechanic-grid > div { min-height: 105px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(118,211,247,.18); border-radius: 10px; background: #071b2e; }
.mechanic-symbol { font-size: 30px; }
.mechanic-grid b { margin-top: 5px; font-size: 10px; color: #eafaff; }
.mechanic-grid small { margin-top: 4px; color: #79aac1; font-size: 9px; line-height: 1.35; }
.jackpot-info-grid { grid-template-columns: repeat(4, 1fr); }
.jp { padding: 10px 8px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,.13); }
.jp span { display: block; font-size: 9px; font-weight: 900; }
.jp b { font-size: 18px; }
.jp.grand { background: #771922; } .jp.major { background: #4d2a6c; } .jp.minor { background: #225f35; } .jp.mini { background: #155079; }
.paytable-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pay-row { min-height: 50px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(120,207,240,.14); border-radius: 8px; background: #071b2e; }
.pay-row .left { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pay-row .icon { font-size: 20px; }
.pay-row .name { color: #b9dbea; font-size: 9px; font-weight: 850; }
.pay-row b { color: #ffde6c; font-size: 13px; }
.note { margin-top: 9px !important; color: #688ea4 !important; font-size: 10px !important; }

.stats-dialog { width: min(520px, calc(100% - 30px)); border: 1px solid rgba(126,220,255,.35); border-radius: 14px; color: #eafaff; background: #06182a; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.stats-dialog::backdrop { background: rgba(0,7,15,.7); backdrop-filter: blur(3px); }
.stats-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(126,220,255,.16); }
.stats-head h3 { margin: 0; font-size: 12px; letter-spacing: .1em; }
.stats-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #dff8ff; background: transparent; font-size: 22px; cursor: pointer; }
.stats-dialog pre { white-space: pre-wrap; color: #9dc7dc; font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@keyframes reelBlur { 0% { transform: translateY(-12px); opacity: .1; filter: blur(4px); } 60% { transform: translateY(7px); opacity: .55; filter: blur(2px); } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes hammerFlash { 0% { filter: brightness(1); } 35% { filter: brightness(2.2); transform: scale(.96); } 100% { filter: brightness(1); } }

@media (max-width: 650px) {
    body { padding: 8px; }
    .screen { border-radius: 18px; }
    .game-header { min-height: 78px; padding: 10px 12px; }
    .brand-rune { width: 44px; height: 50px; font-size: 28px; }
    .brand-block h1 { font-size: 22px; }
    .brand-subtitle { font-size: 9px; }
    .jackpot-strip { gap: 3px; padding: 5px 5px 3px; }
    .jackpot, .total-win { min-height: 45px; border-radius: 6px; }
    .jackpot span, .total-win span { font-size: 7px; }
    .jackpot strong { font-size: 12px; }
    .total-win strong { font-size: 17px; }
    .status-bar { padding: 4px 7px; gap: 5px; }
    .status-pill { display: none; }
    .status-bar { grid-template-columns: 1fr; }
    .bonus-bet-panel { grid-template-columns: 1fr; gap: 5px; padding: 6px; }
    .bonus-bet-title { text-align: center; }
    .bonus-option { min-height: 30px; padding: 3px; }
    .bonus-option b { font-size: 6.5px; }
    .bonus-option small { display: none; }
    .reel-stage { padding: 8px; }
    .reel-frame { padding: 5px 5px 8px; }
    .strike-row { height: 29px; gap: 3px; }
    table.gameGrid { border-spacing: 3px; }
    td.gameGrid { height: clamp(88px, 29vw, 128px); }
    .message-panel { width: calc(100% - 16px); margin-bottom: 8px; }
    .control-panel { grid-template-columns: 1fr auto auto; gap: 7px; padding: 9px 8px 12px; }
    .wallet-block { grid-column: 1; grid-row: 1; }
    .bet-control { grid-column: 1; grid-row: 2; min-width: 118px; height: 46px; }
    .auto-button { grid-column: 2; grid-row: 1 / 3; height: 58px; min-width: 58px; }
    .spin-button { grid-column: 3; grid-row: 1 / 3; width: 72px; height: 72px; }
    .mechanic-grid { grid-template-columns: 1fr; }
    .jackpot-info-grid { grid-template-columns: repeat(2,1fr); }
    .paytable-list { grid-template-columns: repeat(2,1fr); }
}

/* Mathematical simulator button: intentionally separate from visible AUTO spins. */
.multi-button {
    height: 52px;
    min-width: 96px;
    padding: 0 12px;
    border: 1px solid rgba(255, 216, 95, .36);
    border-radius: 10px;
    color: #ffe793;
    background: linear-gradient(180deg, #3b3016, #20190b);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .05em;
    cursor: pointer;
}
.multi-button:hover { filter: brightness(1.08); }
.multi-button:disabled { opacity: .5; cursor: default; }

@media (min-width: 651px) {
    .control-panel { grid-template-columns: 1fr auto auto auto auto; gap: 9px; }
}

@media (max-width: 650px) {
    .control-panel { grid-template-columns: 1fr auto auto auto; }
    .auto-button { grid-column: 2; grid-row: 1 / 3; }
    .multi-button { grid-column: 3; grid-row: 1 / 3; height: 58px; min-width: 70px; padding: 0 6px; font-size: 7px; }
    .spin-button { grid-column: 4; grid-row: 1 / 3; }
}