@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;650;700;750;800;900&display=swap');

:root {
  color-scheme: dark;
  --bg: #031810;
  --surface: #081f18;
  --cream: #fff4d6;
  --text: #e9f3de;
  --muted: #83a38c;
  --line: #375842;
  --lime: #ccf45b;
  --font: 'DM Sans', Arial, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-width: 320px; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, input { touch-action: manipulation; }
button { transition: border-color .18s, background .18s, box-shadow .18s, transform .18s, opacity .18s; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
button:disabled:not(.play-button) { opacity: .44; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }

.game-shell { width: 100%; height: 100vh; height: 100dvh; min-height: 500px; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 55% 0%, #10382b 0%, transparent 51%), #031810; }
.game-shell:fullscreen, .game-shell.expanded { width: 100%; height: 100dvh; }
.game-shell.expanded { position: fixed; inset: 0; z-index: 50; }
.game-header { display: flex; align-items: center; gap: 24px; height: 68px; flex-shrink: 0; padding: 0 30px; border-bottom: 1px solid #3f704148; background: linear-gradient(90deg, #00170dda, #07261ea6 55%, #001710c9); }
.wordmark { display: inline-flex; gap: 13px; align-items: center; color: var(--cream); font: 800 37px/.9 var(--display); letter-spacing: .3px; white-space: nowrap; text-shadow: 0 2px 2px #0009; }
.brand-orb { position: relative; display: block; width: 42px; height: 42px; flex: none; border: 1px solid #d1f9d4a6; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 20%, #d9ffda69, #476d3938 34%, #174c34c2 70%, #b6df9abf); box-shadow: inset -3px -3px 4px #051f15, inset 2px 2px 3px #efffe4ad, 0 0 14px #b1f36c1b; }
.brand-orb:after { content: ''; position: absolute; left: 7px; top: 4px; width: 16px; height: 5px; border-radius: 50%; background: #f2ffe7e6; transform: rotate(-35deg); box-shadow: 17px 26px 5px #caff9680; }
.brand-orb i { position: absolute; width: 23px; height: 13px; border: 1px solid #d7ec8e; background: #82b660; box-shadow: inset 0 0 0 2px #366d37, 1px 2px 2px #022316a6; color: #2d6136; font: 900 11px/12px var(--font); text-align: center; font-style: normal; }
.brand-orb i:nth-child(1) { top: 9px; left: 4px; transform: rotate(-25deg); }
.brand-orb i:nth-child(2) { top: 19px; left: 13px; transform: rotate(25deg); background: #b0cd70; }
.brand-orb i:nth-child(3) { top: 26px; left: 2px; transform: rotate(-16deg); }
.wallet { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 5px 5px 5px 14px; border: 1px solid #34634844; border-radius: 30px; background: #031b13a3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-tag { color: #a7beae; font-size: 10px; font-weight: 700; letter-spacing: .55px; }
#balance { color: #c5ee7b; font-size: 17px; font-weight: 800; }

.refill-button { border: 0; width: 28px; height: 28px; padding: 7px; border-radius: 50%; color: #cbecb0; background: #244930; }
.refill-button svg { width: 14px; height: 14px; }
.refill-button:hover:not(:disabled) { background: #3a633a; }
.header-tools { display: flex; gap: 6px; }
.icon-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #c1d6c6; }
.icon-button svg { width: 22px; height: 22px; }
.icon-button:hover { background: #bbed9410; border-color: #b6e59b2b; color: var(--cream); }
.icon-button[aria-pressed=true] { color: var(--lime); }

.game-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arena { position: relative; flex: 1; min-height: 180px; margin: 0 8px; overflow: hidden; isolation: isolate; border: 1px solid #6b934b75; border-radius: 27px; box-shadow: inset 0 0 0 2px #07150bbf, inset 0 0 25px #000b, 0 0 15px #94c1550a; background: radial-gradient(ellipse at 53% 35%, #153f32, #052118 65%, #03150e); }
#game { display: block; position: absolute; width: 100%; height: 100%; inset: 0; }
.multiplier-hud { position: absolute; z-index: 2; left: 50%; top: 14%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 220px; pointer-events: none; text-align: center; }
.hud-label { color: #8eba8d; font-size: 12px; font-weight: 800; letter-spacing: 1.45px; line-height: 1.3; }
#current-mult { color: var(--cream); font: 850 76px/.99 var(--font); letter-spacing: -4px; text-shadow: 0 4px 1px #001509, 0 0 35px #e1ffc511; font-variant-numeric: tabular-nums; padding-right: 4px; }
#current-mult span, #current-mult small { font-size: .68em; margin-left: 3px; vertical-align: .055em; letter-spacing: -2px; }
.hit-counter { display: inline-flex; align-items: center; gap: 6px; color: #8fbb8d; margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .8px; }
.hit-counter i { width: 4px; height: 4px; border-radius: 50%; background: #abd28d; }
.multiplier-hud.bump #current-mult { animation: multiplier-bump .32s cubic-bezier(.16,1,.3,1) both; }
.multiplier-hud.won #current-mult { color: #dcff8b; text-shadow: 0 3px #254513, 0 0 30px #b2f66c44; }
.multiplier-hud.busted #current-mult { color: #ffb898; text-shadow: 0 3px #462718, 0 0 25px #e671431f; }
.multiplier-hud.busted .hud-label, .multiplier-hud.busted .hit-counter { color: #c39380; }
.arena-message { position: absolute; z-index: 2; bottom: 16%; left: 15%; right: 15%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; pointer-events: none; transition: opacity .25s, transform .25s; }

#message-title { color: #f4f1d9; font: 700 32px/1.12 var(--display); letter-spacing: .3px; }

.arena-message.playing { opacity: 0; visibility: hidden; transform: translateY(8px); }
.arena-message.won #message-title { color: #d4f885; }
.arena-message.busted #message-title { color: #ffc3aa; }
.hit-toast { position: absolute; z-index: 3; display: none; padding: 6px 12px; pointer-events: none; color: #fff7c4; font: 800 36px/1 var(--display); letter-spacing: -.25px; text-align: center; white-space: nowrap; text-shadow: 0 3px 0 #5a4014, 0 0 15px #fff2a164; }
.hit-toast.show { display: block; animation: hit-float .95s cubic-bezier(.16,.75,.25,1) both; }
.hit-toast.bust { color: #ffc3a1; text-shadow: 0 3px 0 #5c2516, 0 0 12px #ff97633a; }
.pause-overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; backdrop-filter: blur(4px); background: #0218117d; }
.pause-overlay span { padding: 12px 23px; border: 1px solid #9cbc7966; border-radius: 30px; background: #0c281ee6; font-size: 11px; font-weight: 800; letter-spacing: 2px; }

.recent-label { display: flex; gap: 6px; align-items: center; height: 36px; padding: 0; border: 0; background: none; color: #a0b9a7; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.recent-label svg { width: 13px; height: 13px; opacity: .65; }
.recent-label:hover { color: #e2eecd; }
#round-chips { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.round-chip { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 4px 11px; border: 1px solid #6da763; border-radius: 20px; box-shadow: inset 0 2px 5px #94d7760e; background: linear-gradient(#133d2b, #0b2b1f); color: #e0f397; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; animation: chip-in .25s both; }
.round-chip.lost { color: #ec9a92; background: linear-gradient(#3d302c, #2b2520); border-color: #965c55; }

.bet-control, .play-control, .auto-control { min-width: 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; color: #aec2b4; font-size: 10px; font-weight: 750; letter-spacing: .45px; line-height: 15px; white-space: nowrap; }
.field-label>span { color: #6f917d; font-size: 9px; }

.stake-field:focus-within { border-color: #aed975; }
.stake-field button { flex: 0 0 43px; padding: 0; border: 0; background: linear-gradient(#263b33, #1b3028); color: #e0e8df; font-size: 27px; font-weight: 650; line-height: 1; }
.stake-field button:first-child { border-right: 1px solid #4960508c; }
.stake-field button:last-child { border-left: 1px solid #4960508c; }
.stake-field button:hover:not(:disabled) { background: #354d38; color: #f0ffbf; }
input { min-width: 0; border: 0; background: transparent; color: #edf3e4; font-variant-numeric: tabular-nums; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input:focus-visible { outline-offset: -3px; }

.shortcut:hover:not(:disabled) { border-color: #98b577; background: #2b4833; }
.play-control { text-align: center; }

.play-button>svg { flex: none; width: 23px; height: 23px; stroke-width: 2; fill: currentColor; }
.play-button:hover:not(:disabled) { background: radial-gradient(ellipse at 50% -15%, #efffb7 0, transparent 75%), linear-gradient(#dcff71, #b7ea4d); box-shadow: inset 0 2px 1px #f2ffc3bb, inset 0 -3px 1px #8fbd399e, 0 0 33px #b7ec4836, 0 4px 9px #0005; transform: translateY(-1px); }
.play-button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 5px #6b961a50, 0 1px 4px #0004; }
.play-button:disabled { opacity: .72; filter: saturate(.72); }
.play-button.cashout { animation: cashout-ready .3s both; }
.play-button.cashout>svg { fill: none; }
.action-copy { display: flex; flex-direction: column; align-items: center; gap: 0; }
#action-label { font: 800 30px/1 var(--display); letter-spacing: .6px; white-space: nowrap; }
#action-value { margin-top: 3px; font-size: 14px; font-weight: 850; line-height: 1.1; letter-spacing: -.15px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.auto-heading .field-label { font-size: 10px; }
.switch { position: relative; width: 31px; height: 17px; flex: none; border: 1px solid #516c56; border-radius: 20px; background: #142d24; padding: 2px; }
.switch:before { content: ''; position: absolute; inset: -9px -3px; }
.switch>span { display: block; width: 11px; height: 11px; border-radius: 50%; background: #92a294; box-shadow: 0 1px 3px #0006; transition: transform .2s, background .2s; }
.switch[aria-checked=true] { border-color: #b2d576; background: #86b440; }
.switch[aria-checked=true]>span { transform: translateX(13px); background: #f0ffcc; }

#auto-target:disabled { color: #728676; opacity: .7; }

.form-error { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); margin: 0; z-index: 6; width: max-content; max-width: calc(100vw - 32px); border: 1px solid #ac6b4a; border-radius: 9px; padding: 9px 14px; background: #3b261dee; color: #ffd2ab; box-shadow: 0 3px 16px #0005; text-align: center; font-size: 11px; }

.notification { position: fixed; z-index: 100; left: 50%; bottom: 180px; max-width: calc(100vw - 32px); padding: 12px 19px; border: 1px solid #c8ea95; border-radius: 11px; background: #dcf2bcec; color: #24371d; font-size: 12px; font-weight: 600; text-align: center; box-shadow: 0 8px 30px #0005; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.notification.visible { opacity: 1; transform: translate(-50%,0); }

/* Short focused dialogs keep the active game in view. */
dialog { position: fixed; width: min(490px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 34px; overflow-y: auto; border: 1px solid #53734c; border-radius: 23px; color: var(--text); background: radial-gradient(ellipse at 0 0, #234632, transparent 75%), #0c2118; box-shadow: 0 24px 100px #000a, inset 0 1px 0 #e5ffb009; }
dialog::backdrop { background: #00150bc4; backdrop-filter: blur(9px); }
.dialog-close { position: absolute; top: 13px; right: 13px; }
.eyebrow { display: block; margin-right: 25px; color: #a0c08c; font-size: 8px; font-weight: 750; letter-spacing: 1.8px; }
dialog h1 { margin: 15px 0 25px; color: var(--cream); font: 700 39px/.98 var(--display); letter-spacing: .2px; }
dialog p { color: #aec3ad; font-size: 12px; line-height: 1.8; }
dialog b { color: #e0efcb; }
.help-steps { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.help-steps li { display: flex; gap: 14px; }
.help-steps li>span { width: 29px; height: 29px; flex: none; display: grid; place-items: center; margin-top: 2px; border: 1px solid #6d8f53; border-radius: 50%; color: #c9e995; font-size: 10px; font-weight: 650; }
.help-steps h2 { margin: 0 0 4px; color: #e6eed7; font-size: 14px; font-weight: 750; }
.help-steps p { margin: 0; font-size: 11px; }
.dialog-note { border-top: 1px solid #5373446b; padding-top: 16px; margin-top: 22px; font-size: 10px; color: #829f86; }
.solid-button { width: 100%; height: 47px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #d7f796; border-radius: 10px; background: linear-gradient(#d3f975,#abd950); color: #203212; font: 800 19px/1 var(--display); letter-spacing: .5px; box-shadow: inset 0 1px 1px #edffc8; }
.solid-button svg { width: 15px; height: 15px; fill: currentColor; }
.rtp-value { color: #d8f994; font: 800 83px/1 var(--display); letter-spacing: -1px; margin: 0 0 15px; }
.rtp-value span { font-size: 39px; margin-left: 4px; }
.history-dialog { width: min(650px, calc(100vw - 32px)); }
.history-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
th { color: #8eaa8a; font-size: 9px; font-weight: 500; padding: 10px 9px; border-bottom: 1px solid #3e5a3c; }
td { color: #c3d4b9; padding: 11px 9px; border-bottom: 1px solid #35513480; font-size: 11px; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; text-align: right; }
.result-win { color: #d3ee94; }.result-loss { color: #e49b82; }
.empty-history { text-align: center !important; padding: 30px 0; color: #8eaa8a; }

@keyframes multiplier-bump { 0% { transform: scale(1.13); filter: brightness(1.3); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes hit-float { 0% { opacity: 0; transform: translate(-50%, 3px) scale(.65) rotate(-5deg); } 15% { opacity: 1; transform: translate(-50%, -9px) scale(1.09) rotate(-5deg); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -53px) scale(.95) rotate(-3deg); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cashout-ready { from { box-shadow: inset 0 2px 1px #fffbb3, 0 0 45px #cfff7880; } to { box-shadow: inset 0 2px 1px #f2ffc3bb, inset 0 -3px 1px #8fbd399e, 0 0 23px #b7ec4821, 0 4px 9px #0005; } }

@media (min-width: 1600px) { .game-header { height: 74px; padding: 0 38px; }.wordmark { font-size: 41px; }.brand-orb { width: 44px; height: 44px; }#current-mult { font-size: 86px; }.hud-label { font-size: 13px; }.hit-counter { font-size: 12px; }.arena { border-radius: 30px; } }
@media (max-width: 1050px) { .game-header { height: 60px; padding: 0 22px; gap: 16px; }.wordmark { font-size: 31px; gap: 10px; }.brand-orb { width: 37px; height: 37px; }.stake-field button { flex-basis: 32px; }#action-label { font-size: 28px; } }
@media (max-width: 720px) { .game-header { height: 57px; padding: 0 15px; gap: 10px; }.wordmark { font-size: 26px; gap: 8px; }.brand-orb { width: 32px; height: 32px; }.brand-orb i { transform-origin: left center; }.brand-orb i:nth-child(1) { top: 7px; left: 4px; }.brand-orb i:nth-child(2) { top: 17px; left: 9px; }.brand-orb i:nth-child(3) { top: 24px; left: 0; }.brand-orb:after { width: 11px; height: 4px; left: 5px; top: 4px; }.wallet { padding-left: 10px; gap: 6px; }#balance { font-size: 13px; }.demo-tag { font-size: 8px; }.header-tools { gap: 1px; }.icon-button { width: 35px; height: 36px; padding: 8px; }.icon-button svg { width: 19px; height: 19px; }.arena { margin: 0 5px; border-radius: 21px; }.hud-label { font-size: 9px; letter-spacing: 1.05px; }#current-mult { font-size: 62px; letter-spacing: -3px; }.hit-counter { font-size: 9px; margin-top: 5px; }.recent-label { font-size: 8px; letter-spacing: 1px; }.round-chip { font-size: 11px; padding: 3px 9px; min-width: 49px; }#round-chips { gap: 5px; }.field-label, .auto-heading .field-label { font-size: 9px; letter-spacing: .1px; }.field-label>span { font-size: 8px; }.stake-field button { flex-basis: 29px; font-size: 22px; }.play-button>svg { width: 17px; height: 17px; }#action-label { font-size: 25px; letter-spacing: .2px; }#action-value { font-size: 12px; }.switch { width: 27px; height: 16px; padding: 2px; }.switch>span { width: 10px; height: 10px; }.switch[aria-checked=true]>span { transform: translateX(10px); }.arena-message { bottom: 17%; left: 15%; right: 15%; gap: 5px; }#message-title { font-size: 27px; }.hit-toast { font-size: 29px; }.notification { bottom: 158px; font-size: 11px; } }
@media (max-width: 440px) { .game-header { padding: 0 10px; gap: 7px; height: 55px; }.wordmark { font-size: 24px; gap: 6px; letter-spacing: -.1px; }.brand-orb { width: 29px; height: 29px; }.header-tools { gap: 0; }.icon-button { width: 32px; height: 36px; padding: 7px; }.icon-button svg { width: 18px; height: 18px; }.wallet { padding: 3px 3px 3px 8px; gap: 5px; }.demo-tag { display: none; }#balance { font-size: 11px; }.refill-button { width: 23px; height: 25px; padding: 5px; }.refill-button svg { width: 13px; height: 13px; }.field-label, .auto-heading .field-label { font-size: 8px; line-height: 13px; letter-spacing: -.1px; }.field-label>span { display: none; }.switch { width: 25px; height: 15px; padding: 2px; }.switch>span { width: 9px; height: 9px; }.switch[aria-checked=true]>span { transform: translateX(9px); }.stake-field button { flex-basis: 24px; font-size: 20px; }.play-button>svg { width: 14px; height: 14px; }#action-label { font-size: 22px; letter-spacing: 0; }#action-value { font-size: 11px; }.multiplier-hud { top: 15%; min-width: 170px; }#current-mult { font-size: 54px; letter-spacing: -3px; }.hud-label { font-size: 8px; letter-spacing: 1px; }.hit-counter { font-size: 8px; }.arena-message { left: 15%; right: 15%; }#message-title { font-size: 25px; }.recent-label { font-size: 7px; gap: 4px; }.recent-label svg { width: 12px; height: 12px; }.round-chip { padding: 3px 8px; font-size: 10px; min-width: 45px; }dialog { padding: 29px 23px 24px; border-radius: 18px; }dialog h1 { font-size: 35px; margin-bottom: 23px; }.help-steps { gap: 18px; }.dialog-close { top: 10px; right: 10px; }.history-dialog { padding-left: 20px; padding-right: 20px; }th { font-size: 8px; padding-left: 7px; padding-right: 7px; }td { font-size: 9px; padding-left: 7px; padding-right: 7px; } }
@media (max-width: 360px) { .game-header { gap: 4px; padding-left: 8px; padding-right: 8px; }.wordmark { font-size: 21px; gap: 4px; }.brand-orb { width: 25px; height: 25px; }.header-tools .icon-button { width: 29px; }.wallet { padding-left: 6px; gap: 4px; }.stake-field button { flex-basis: 21px; }.auto-heading .field-label { font-size: 7px; }.play-button>svg { display: none; }.field-label { font-size: 7px; } }
@media (max-height: 580px) and (min-width: 600px) { .game-shell { min-height: 340px; }.game-header { height: 44px; padding: 0 18px; }.wordmark { font-size: 25px; }.brand-orb { width: 29px; height: 29px; }.header-tools .icon-button { width: 35px; height: 34px; }#balance { font-size: 12px; }.wallet { padding-top: 2px; padding-bottom: 2px; }.refill-button { width: 25px; height: 25px; padding: 6px; }.arena { min-height: 140px; border-radius: 20px; }.multiplier-hud { left: 23%; top: 50%; transform: translate(-50%, -50%); gap: 0; }.hud-label { font-size: 7px; letter-spacing: 1px; }#current-mult { font-size: 42px; letter-spacing: -2px; }.hit-counter { font-size: 7px; margin-top: 1px; gap: 4px; }.hit-counter i { width: 3px; height: 3px; }.arena-message { left: 66%; right: 8%; top: 50%; bottom: auto; transform: translateY(-50%); gap: 4px; }#message-title { font-size: 20px; }.round-chip { font-size: 9px; padding: 2px 9px; min-width: 45px; }.recent-label { font-size: 7px; height: 29px; }.field-label, .auto-heading .field-label { font-size: 8px; line-height: 12px; }.field-label>span { font-size: 7px; }.stake-field button { flex-basis: 30px; font-size: 22px; }.play-button>svg { width: 18px; height: 18px; }#action-label { font-size: 24px; }#action-value { font-size: 11px; margin-top: 1px; }.switch { width: 26px; height: 15px; padding: 2px; }.switch>span { width: 9px; height: 9px; }.switch[aria-checked=true]>span { transform: translateX(10px); }.notification { bottom: 114px; font-size: 10px; padding: 8px 14px; }.hit-toast { font-size: 25px; } }
/* One compact betting block: Bet, Play, then Auto at every width. */
.round-ticker { display: flex; align-items: center; justify-content: center; height: 32px; flex-shrink: 0; padding: 0 16px; }
.recent-rounds { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-width: 0; }
.recent-label { height: 30px; }
#round-chips:empty { display: none; }
.control-dock { position: relative; flex-shrink: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr) minmax(0,.82fr); align-items: end; gap: clamp(20px,3vw,44px); margin: 0 10px max(10px,env(safe-area-inset-bottom)); padding: 17px clamp(20px,3.2vw,50px) 18px; border: 1px solid #45674d80; border-radius: 18px; background: linear-gradient(125deg,#102b22,#0a211b 60%,#10271f); box-shadow: inset 0 1px 0 #d7edbd08, 0 5px 20px #0002; }
.field-label, .auto-heading .field-label { color: #afc4b1; font-size: 10px; font-weight: 750; line-height: 16px; letter-spacing: .55px; }
.bet-row { display: flex; gap: 7px; height: 56px; margin-top: 8px; }
.stake-field { display: flex; flex: 1; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid #466250; border-radius: 11px; background: #041911; box-shadow: inset 0 2px 5px #0003; transition: border-color .2s; }
.stake-field button { flex-basis: 40px; color: #cbdec8; background: #1b3528; }
.stake-currency { flex: none; align-self: center; margin-left: 12px; margin-right: 2px; color: #a7c197; font-size: 17px; font-weight: 750; line-height: 1; }
#stake { width: 100%; flex: 1; padding: 0 7px 0 0; text-align: center; color: #edf5df; font-size: 19px; font-weight: 800; }
.shortcut { flex: 0 0 46px; padding: 0; border: 1px solid #466250; border-radius: 11px; color: #bdd2b7; background: #183125; box-shadow: inset 0 1px 0 #d1e5c508; font-size: 17px; font-weight: 750; }
.play-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 72px; padding: 8px 16px; border: 1px solid #e5ff9b; border-radius: 13px; color: #112002; background: radial-gradient(ellipse at 50% -15%, #e3ff8e 0, transparent 72%), linear-gradient(#cef65e, #a5da42); box-shadow: inset 0 2px 1px #f2ffc3bb, inset 0 -3px 1px #8fbd399e, 0 0 23px #b7ec4821, 0 4px 9px #0005; }
#action-label { font-size: 29px; }
#action-value { margin-top: 3px; font-size: 14px; }
.auto-heading { display: flex; align-items: center; justify-content: space-between; min-height: 16px; gap: 8px; }
.auto-field { display: flex; align-items: center; gap: 8px; height: 56px; margin-top: 8px; padding: 0 16px; border: 1px solid #466250; border-radius: 11px; background: #10281d; box-shadow: inset 0 1px 0 #d1e5c505; }
#auto-state { color: #93ad94; font-size: 12px; font-weight: 650; }
#auto-target { width: 100%; flex: 1; padding: 7px 0; text-align: right; font-size: 19px; font-weight: 750; }
.times { color: #8ba77e; font-size: 18px; font-weight: 650; }
.math-link { display: block; margin: -3px 0 15px; padding: 4px 0; border: 0; color: #c7e79d; background: none; font-size: 11px; text-decoration: underline; text-decoration-color: #8dad6559; text-underline-offset: 4px; }
.math-link:hover { color: #edffc6; text-decoration-color: currentColor; }

@media (max-width: 1050px) {
  .control-dock { gap: 22px; padding: 15px 25px 16px; }
  .shortcut { flex-basis: 35px; font-size: 16px; }
  .stake-field button { flex-basis: 33px; }
  .stake-currency { margin-left: 9px; font-size: 16px; }
  #stake { font-size: 17px; }
}
@media (max-width: 720px) {
  .control-dock { gap: 12px; margin: 0 6px max(8px,env(safe-area-inset-bottom)); padding: 13px 13px 14px; grid-template-columns: minmax(0,1.04fr) minmax(0,1.12fr) minmax(0,.87fr); border-radius: 15px; }
  .field-label, .auto-heading .field-label { font-size: 9px; line-height: 14px; letter-spacing: .15px; }
  .bet-row { height: 50px; margin-top: 7px; }
  .stake-field { border-radius: 9px; }
  .stake-field button { flex-basis: 27px; }
  .stake-currency { margin-left: 7px; margin-right: 0; font-size: 14px; }
  #stake { padding-right: 3px; font-size: 15px; }
  .shortcut { display: none; }
  .play-button { min-height: 69px; padding: 7px 8px; gap: 7px; border-radius: 11px; }
  #action-label { font-size: 25px; }
  #action-value { font-size: 12px; }
  .auto-heading { min-height: 14px; gap: 5px; }
  .auto-field { height: 50px; margin-top: 7px; padding: 0 9px; gap: 4px; border-radius: 9px; }
  #auto-state { font-size: 10px; }
  #auto-target { font-size: 15px; }
  .times { font-size: 15px; }
  .notification { bottom: 133px; }
}
@media (max-width: 440px) {
  .game-header { padding: 0 9px; gap: 6px; }
  .wordmark { font-size: 22px; gap: 5px; }
  .brand-orb { width: 27px; height: 27px; }
  .wallet { gap: 4px; padding: 3px 3px 3px 7px; }
  .demo-tag { display: inline; color: #96b49e; font-size: 7px; font-weight: 750; letter-spacing: .15px; }
  #balance { font-size: 10px; }
  .header-tools .icon-button { width: 30px; }
  .control-dock { margin-left: 5px; margin-right: 5px; padding: 12px 9px 13px; gap: 8px; grid-template-columns: minmax(0,1.10fr) minmax(0,1.07fr) minmax(0,.87fr); }
  .field-label, .auto-heading .field-label { font-size: 8px; line-height: 13px; letter-spacing: 0; }
  .bet-row { height: 47px; margin-top: 7px; }
  .stake-field button { flex-basis: 23px; font-size: 20px; }
  .stake-currency { margin-left: 5px; margin-right: 0; font-size: 12px; }
  #stake { font-size: 13px; padding: 0 1px 0 0; }
  .play-button { min-height: 65px; padding: 6px 5px; }
  .play-button>svg { display: none; }
  #action-label { font-size: 23px; }
  #action-value { font-size: 12px; }
  .auto-heading { gap: 3px; min-height: 13px; }
  .auto-field { height: 47px; margin-top: 7px; padding: 0 7px; gap: 3px; }
  #auto-state { font-size: 9px; }
  #auto-target { font-size: 13px; }
  .times { font-size: 13px; }
}
@media (max-width: 360px) {
  .game-header { gap: 4px; padding-left: 7px; padding-right: 7px; }
  .wordmark { font-size: 20px; gap: 4px; }
  .brand-orb { width: 24px; height: 24px; }
  .wallet { gap: 3px; padding-left: 5px; }
  .demo-tag { font-size: 6px; }
  #balance { font-size: 9px; }
  .header-tools .icon-button { width: 27px; padding: 6px; }
  .refill-button { width: 21px; }
  .control-dock { margin-left: 4px; margin-right: 4px; padding: 11px 7px 12px; gap: 6px; }
  .field-label, .auto-heading .field-label { font-size: 7px; }
  .stake-field button { flex-basis: 20px; font-size: 18px; }
  .stake-currency { margin-left: 4px; font-size: 11px; }
  #stake { font-size: 12px; }
  #action-label { font-size: 21px; }
  #action-value { font-size: 11px; }
  #auto-state { display: none; }
  .auto-field { padding: 0 8px; }
}
@media (max-height: 580px) and (min-width: 600px) {
  .round-ticker { height: 29px; }
  .control-dock { margin: 0 7px max(7px,env(safe-area-inset-bottom)); padding: 8px 22px 9px; gap: 25px; border-radius: 13px; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr) minmax(0,.8fr); }
  .field-label, .auto-heading .field-label { font-size: 8px; line-height: 12px; }
  .bet-row { height: 40px; margin-top: 5px; }
  .stake-field button { flex-basis: 29px; }
  .stake-currency { font-size: 14px; margin-left: 8px; }
  #stake { font-size: 15px; }
  .shortcut { display: block; flex-basis: 33px; font-size: 15px; border-radius: 9px; }
  .play-button { min-height: 57px; padding: 5px 12px; gap: 9px; }
  #action-label { font-size: 24px; }
  #action-value { font-size: 11px; margin-top: 1px; }
  .auto-heading { min-height: 12px; }
  .auto-field { height: 40px; margin-top: 5px; padding: 0 12px; }
  #auto-target { font-size: 15px; }
  #auto-state { font-size: 10px; }
  .notification { bottom: 111px; }
}

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