:root {
    color-scheme: dark;
    --gold: #ffd45b;
    --gold-bright: #ffe9a1;
    --ink: #101624;
    --glass: rgba(8, 18, 33, .82);
    --wood: #3a2118;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { overflow: hidden; background: #07101e; color: #fff; font-family: Georgia, "Times New Roman", serif; }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.goldrush-hud {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    min-height: 76px;
    align-items: center;
    gap: 20px;
    padding: calc(10px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 10px max(22px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(5, 13, 25, .9), rgba(5, 13, 25, .32) 74%, transparent);
}
.brand-lockup { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand { color: var(--gold); font: 900 25px/1 Impact, "Arial Narrow", sans-serif; text-shadow: 0 2px #5d290c, 0 0 18px rgba(255, 185, 43, .3); }
.brand-subtitle { color: #f6d89b; font: 700 11px/1 system-ui, sans-serif; }
.session-info { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); color: #d7dfeb; font: 12px/1.2 system-ui, sans-serif; }
.hud-readout { display: grid; gap: 4px; text-align: right; }
.hud-readout > span { color: #dfc38c; font-size: 9px; font-weight: 800; }
.hud-readout b { color: var(--gold-bright); font-size: 13px; font-variant-numeric: tabular-nums; }
.mode-readout { padding: 6px 10px; border: 1px solid rgba(255, 212, 91, .55); border-radius: 2px; color: var(--gold-bright); font-size: 10px; font-weight: 800; }
.game-actions { display: flex; align-items: center; gap: 8px; }
.hud-button, .exit-button {
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid rgba(222, 177, 88, .55);
    border-radius: 2px;
    background: rgba(28, 23, 20, .76);
    color: #f5e5c0;
    font: 700 11px/1 system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.hud-button:hover, .exit-button:hover { background: rgba(97, 55, 24, .9); color: #fff; }
.exit-button { border-color: #d59d43; background: #633019; color: #fff2cf; }
.rules { position: relative; color: #eee2c3; font: 12px/1.45 system-ui, sans-serif; }
.rules summary { display: flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(222, 177, 88, .55); border-radius: 2px; background: rgba(28, 23, 20, .76); color: var(--gold-bright); cursor: pointer; font-weight: 700; list-style: none; white-space: nowrap; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary img { width: 20px; height: 20px; object-fit: contain; }
.rules-content { position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 24px)); padding: 14px 16px; border: 1px solid rgba(255, 214, 99, .56); border-radius: 3px; background: rgba(7, 15, 26, .97); box-shadow: 0 12px 36px rgba(0, 0, 0, .45); color: #eee2c3; }
.rules-content p { margin: 0 0 9px; }
.rules-content p:last-child { margin-bottom: 0; }
.goldrush-stage {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background: #10243a url("/goldrush/PNG/Landscape.png") center / cover no-repeat;
}
.goldrush-stage::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(2, 10, 21, .26), transparent 24%, transparent 72%, rgba(3, 8, 14, .48)); content: ""; }
.reel-frame {
    position: absolute;
    top: 47%;
    left: 50%;
    width: min(91vw, 1360px, calc((100svh - 208px) * 1.9));
    aspect-ratio: 1.9 / 1;
    transform: translate(-50%, -50%);
    background: url("/goldrush/PNG/Reels.png") center / 100% 100% no-repeat;
    filter: drop-shadow(0 17px 20px rgba(0, 0, 0, .46));
}
.reel-grid { position: absolute; inset: 7% 5.2% 6.5%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.15%; }
.reel-column { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); min-width: 0; overflow: hidden; }
.symbol-cell { display: grid; min-height: 0; place-items: center; overflow: visible; }
.symbol-cell img { display: block; width: 88%; height: 84%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .45)); transform: scale(1); }
.reel-column.spinning .symbol-cell img { animation: reel-tumble .22s linear infinite; }
.symbol-cell.winner { position: relative; z-index: 1; }
.symbol-cell.winner img { animation: win-enlarge .72s cubic-bezier(.2,.85,.2,1.2) 2 both; filter: drop-shadow(0 0 12px #fff2a4) drop-shadow(0 0 28px #ffae20); }
@keyframes reel-tumble { 0% { transform: translateY(-18%) scale(.92); opacity: .66; } 100% { transform: translateY(18%) scale(1.04); opacity: 1; } }
@keyframes win-enlarge { 0%, 100% { transform: scale(1); } 48% { transform: scale(1.42); } }
.game-controls {
    position: absolute;
    right: 2.5%;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 2.5%;
    display: grid;
    width: min(100% - 5%, 1450px);
    min-height: 102px;
    grid-template-columns: .65fr 1.25fr .68fr .8fr .72fr 1.2fr 1.1fr;
    align-items: center;
    gap: clamp(7px, 1.4vw, 22px);
    margin: 0 auto;
    padding: 8px 16px;
    background: linear-gradient(90deg, transparent, rgba(8, 18, 33, .86) 8%, rgba(8, 18, 33, .86) 92%, transparent);
}
.console-readout, .bet-control { display: grid; min-width: 0; min-height: 54px; align-content: center; justify-items: center; gap: 4px; background: url("/goldrush/PNG/Balance Button.png") center / 100% 100% no-repeat; text-align: center; }
.readout-label { color: #f2c478; font: 800 10px/1 system-ui, sans-serif; text-shadow: 0 1px 3px #160b07; }
.console-readout b, .bet-control output { color: #ffe6b2; font: 800 clamp(14px, 1.35vw, 20px)/1.1 Georgia, "Times New Roman", serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px #160b07; white-space: nowrap; }
.balance-readout { background-image: url("/goldrush/PNG/Balance Button.png"); }
.win-readout { background-image: url("/goldrush/PNG/Win Button.png"); }
.bet-control { background-image: url("/goldrush/PNG/Total Bet Button.png"); }
.bet-adjust { display: flex; align-items: center; justify-content: center; gap: clamp(3px, .5vw, 8px); }
.image-button { display: grid; width: clamp(30px, 3.1vw, 42px); height: clamp(30px, 3.1vw, 42px); flex: 0 0 auto; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.image-button img { width: 100%; height: 100%; object-fit: contain; }
.image-button:disabled, .wood-action:disabled, .spin-button:disabled { opacity: .48; cursor: not-allowed; }
.wood-action { position: relative; display: grid; width: 100%; min-width: 54px; height: 62px; place-items: center; padding: 4px; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.wood-action img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.wood-action span { position: relative; color: #eac27f; font: 900 11px/1.05 Georgia, "Times New Roman", serif; text-align: center; text-shadow: 0 2px 3px #1a0d08; }
.wood-action:hover:not(:disabled) { filter: brightness(1.22); }
.auto-spin-button.is-active { filter: drop-shadow(0 0 7px rgba(255, 208, 94, .65)); }
.spin-button { display: grid; width: clamp(72px, 7.4vw, 104px); aspect-ratio: 1; justify-self: center; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .55)); touch-action: manipulation; }
.spin-button img { width: 100%; height: 100%; object-fit: contain; }
.spin-button:not(:disabled):hover { transform: scale(1.06); }
.win-banner { position: absolute; z-index: 2; bottom: 18%; left: 50%; max-width: calc(100vw - 24px); transform: translateX(-50%); color: #ffe98b; font: 800 clamp(14px, 1.7vw, 22px)/1.25 system-ui, sans-serif; text-align: center; text-shadow: 0 2px 4px #000, 0 0 16px rgba(255, 174, 32, .8); }
.error-message { position: absolute; z-index: 8; top: 92px; left: 50%; max-width: calc(100vw - 24px); transform: translateX(-50%); padding: 10px 14px; border: 1px solid #ff9e74; background: rgba(131, 29, 24, .95); font: 14px system-ui, sans-serif; text-align: center; }
[hidden] { display: none !important; }

@media (max-width: 900px) {
    .goldrush-hud { grid-template-columns: 1fr auto; gap: 7px 12px; padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); }
    .brand-lockup { grid-column: 1; grid-row: 1; }
    .session-info { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
    .game-actions { grid-column: 2; grid-row: 1; gap: 5px; }
    .hud-button, .exit-button, .rules summary { min-height: 34px; padding-right: 8px; padding-left: 8px; font-size: 10px; }
    .rules summary img { width: 18px; height: 18px; }
    .reel-frame { top: 45%; width: min(96vw, 1320px, calc((100svh - 220px) * 1.9)); }
    .game-controls { right: 1%; bottom: max(8px, env(safe-area-inset-bottom)); left: 1%; width: 98%; min-height: 92px; gap: 8px; padding: 6px 10px; }
    .readout-label { font-size: 9px; }
    .console-readout b, .bet-control output { font-size: 15px; }
    .wood-action { height: 56px; }
    .spin-button { width: clamp(64px, 9vw, 84px); }
}

@media (max-width: 620px) {
    .goldrush-stage { min-height: 400px; background-position: center; }
    .goldrush-hud { grid-template-columns: minmax(0, 1fr) auto; min-height: 94px; padding-top: calc(7px + env(safe-area-inset-top)); }
    .brand { font-size: 19px; }
    .brand-subtitle { font-size: 9px; }
    .session-info { gap: 8px; font-size: 10px; }
    .hud-readout { gap: 2px; }
    .hud-readout > span { font-size: 8px; }
    .hud-readout b { font-size: 11px; }
    .mode-readout { padding: 5px 7px; font-size: 9px; }
    .game-actions { gap: 4px; }
    .hud-button, .exit-button { min-height: 32px; padding: 0 7px; font-size: 9px; }
    .rules summary { min-height: 32px; padding: 0 6px; font-size: 0; }
    .rules summary img { width: 21px; height: 21px; }
    .rules-content { position: fixed; top: 90px; right: 10px; z-index: 10; font-size: 11px; }
    .reel-frame { top: 43%; width: 100vw; }
    .reel-grid { inset: 7% 5.2% 6.5%; gap: 1%; }
    .symbol-cell img { width: 94%; height: 82%; }
    .game-controls {
        right: 0;
        bottom: max(4px, env(safe-area-inset-bottom));
        left: 0;
        width: 100%;
        min-height: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas: "bet bet max spin" "auto balance balance win";
        gap: 3px 5px;
        padding: 7px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
        background: linear-gradient(180deg, transparent, rgba(5, 12, 21, .82) 12%, rgba(5, 12, 21, .92));
    }
    .line-readout { display: none; }
    .bet-control { grid-area: bet; min-height: 49px; }
    .bet-adjust { width: 100%; justify-content: space-around; }
    .bet-control output { min-width: 50px; font-size: 16px; }
    .image-button { width: 36px; height: 36px; }
    .max-bet-button { grid-area: max; height: 48px; }
    .auto-spin-button { grid-area: auto; height: 48px; }
    .wood-action span { font-size: 10px; }
    .spin-button { grid-area: spin; width: 56px; }
    .balance-readout { grid-area: balance; min-height: 45px; }
    .win-readout { grid-area: win; min-height: 45px; }
    .console-readout b, .bet-control output { font-size: 13px; }
    .readout-label { font-size: 8px; }
    .win-banner { bottom: 23%; width: 90%; font-size: 14px; }
    .error-message { top: 102px; font-size: 12px; }
}

@media (max-width: 360px) {
    .brand-lockup { gap: 6px; }
    .brand { font-size: 16px; }
    .brand-subtitle { font-size: 8px; }
    .hud-button, .exit-button { padding: 0 5px; font-size: 8px; }
    .game-controls { gap: 2px; padding-right: 5px; padding-left: 5px; }
    .bet-control output { min-width: 42px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .goldrush-stage { min-height: 0; }
    .goldrush-hud { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
    .brand-lockup, .session-info, .game-actions { grid-column: auto; grid-row: auto; }
    .session-info { justify-content: flex-end; }
    .goldrush-hud { min-height: 52px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
    .brand { font-size: 18px; }
    .session-info { gap: 12px; }
    .hud-button, .exit-button, .rules summary { min-height: 30px; }
    .reel-frame { top: 50%; width: min(88vw, calc((100svh - 160px) * 1.9)); }
    .game-controls { min-height: 72px; grid-template-columns: .6fr 1.2fr .65fr .7fr .65fr 1fr 1fr; gap: 5px; padding: 3px 8px; }
    .console-readout, .bet-control { min-height: 42px; }
    .wood-action { height: 42px; }
    .spin-button { width: 62px; }
    .readout-label { font-size: 8px; }
    .console-readout b, .bet-control output { font-size: 12px; }
}

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