@charset "UTF-8";
:root { color-scheme:dark; --bg:#141416; --panel:#202024; --lime:#d2f641; --cream:#f7f8f2; --muted:#929298; --orange:#ffc04b; font-family:Arial,Helvetica,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:#0d0d0f; color:var(--cream); font-size:14px; }
button,input { font:inherit; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
button:disabled { cursor:default; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
[hidden] { display:none!important; }
.app-shell { max-width:1280px; margin:auto; padding:0 24px; }
.topbar { display:flex; align-items:center; height:66px; gap:18px; }
.brand { color:var(--cream); text-decoration:none; display:flex; align-items:center; gap:5px; font-size:24px; letter-spacing:-1px; font-weight:900; }
.brand img { width:31px; height:31px; }
.brand small { margin-left:7px; font-size:12px; font-weight:500; letter-spacing:0; }
.demo-badge { border:1px solid #5c642e; border-radius:4px; font-size:9px; font-weight:700; color:var(--lime); padding:5px 7px; letter-spacing:.5px; }
.demo-badge b { color:#afb0a5; margin-left:5px; font-weight:400; }
.header-tools { display:flex; align-items:center; gap:7px; margin-left:auto; }
.balance { padding-right:16px; display:flex; gap:5px; flex-direction:column; }
.balance>span { font-size:8px; color:var(--muted); letter-spacing:.8px; }
.balance strong { font-size:19px; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.balance small { font-size:9px; font-weight:400; color:#929298; margin-left:4px; }
.icon-button { width:33px; height:33px; border-radius:7px; border:1px solid #34343a; color:#c1c1c7; background:#202024; display:inline-flex; justify-content:center; align-items:center; font-size:19px; }
.icon-button:hover { background:#35353c; color:white; }
.icon-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.icon-button[aria-pressed=true] { color:var(--lime); }
.rounds-bar { height:36px; display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rounds-bar>span { font-size:9px; color:#a3a3aa; font-weight:700; letter-spacing:.5px; }
#history { display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; }
.history-empty { font-size:11px; color:#6f6f78; white-space:nowrap; }
.history-item { min-width:48px; padding:6px 9px; text-align:center; border-radius:12px; background:#272d1b; color:#c7e876; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.history-item.loss { background:#312224; color:#ed9898; }
.text-button { background:none; border:none; color:#a8a8b0; padding:0; font-size:11px; white-space:nowrap; }
.text-button:hover { color:white; }.rounds-bar>button { margin-left:auto; }
.text-button span { display:inline-flex; border:1px solid #50505a; border-radius:50%; width:15px; height:15px; align-items:center; justify-content:center; margin-left:4px; font-size:10px; }
.arena { position:relative; height:clamp(360px,calc(100dvh - 300px),620px); min-width:0; overflow:hidden; border-radius:12px 12px 0 0; background:#ad8b9f; border:1px solid #323137; border-bottom:0; }
.scene-wrap { position:absolute; inset:0; }canvas { display:block; width:100%; height:100%; }
.world-loading { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#221b2b; color:#f7f8f2; }
.world-loading strong { font-size:15px; }.world-loading>span { font-size:9px; color:#d2f641; letter-spacing:.7px; }
.game-title { position:absolute; left:27px; top:24px; pointer-events:none; z-index:2; }
.game-title h1 { display:flex; gap:8px; margin:0; font-family:"Arial Black",Arial,sans-serif; color:white; font-weight:1000; font-size:39px; font-style:italic; letter-spacing:-2px; line-height:1; paint-order:stroke fill; -webkit-text-stroke:5px #44304f; text-shadow:3px 5px 0 #44304f; }
.game-title h1 span { color:var(--lime); }
.game-title>span { display:block; margin-top:11px; color:#f8eddc; text-shadow:0 1px 2px #573d51; font-size:8px; font-weight:800; letter-spacing:1.5px; }
.multiplier-hud { position:absolute; top:25px; right:29px; z-index:2; text-align:right; pointer-events:none; }
.multiplier-hud>span { font-size:9px; color:#514059; letter-spacing:.7px; font-weight:800; }
.multiplier-hud>strong { display:block; font-size:65px; line-height:1.08; color:#f7f8f2; letter-spacing:-2px; font-weight:900; font-variant-numeric:tabular-nums; paint-order:stroke fill; -webkit-text-stroke:4px #44304f; text-shadow:3px 4px 0 #44304f; }
.multiplier-hud strong span { font-size:38px; margin-left:2px; }
.multiplier-hud>div { font-size:10px; font-weight:600; color:#514059; max-width:240px; line-height:1.5; }
.stage-display { position:absolute; top:116px; left:29px; z-index:2; }
.stage-display>span { display:block; font-size:9px; color:#514059; font-weight:800; letter-spacing:.7px; }
.stage-display { padding:7px 9px; border-radius:6px; background:#3b294a99; }
.stage-display>span { color:#fff1dc; }
.multiplier-hud>span,.multiplier-hud>div { color:#fff1dc; text-shadow:0 1px 2px #392443,1px 1px 0 #392443; }
.circuit-progress { display:flex; gap:4px; margin-top:7px; }
.circuit-progress i { width:15px; height:5px; border:1px solid #65466f; background:#a286a84a; border-radius:2px; }
.circuit-progress i.done { background:#d2f641; }.circuit-progress i.failed { background:#e76e6e; }
.arena-bottom { position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 23px; background:linear-gradient(transparent,#30213988); color:#f7f8f2; font-size:11px; pointer-events:none; }
.scene-demo { font-size:8px; font-weight:700; letter-spacing:.5px; color:#e6dbd8; white-space:nowrap; }
.control-panel { display:grid; grid-template-columns:260px 260px minmax(0,1fr); gap:28px; padding:19px 24px 15px; background:#1c1c21; border:1px solid #34343a; border-radius:0 0 12px 12px; min-width:0; }
.stake-controls,.risk-controls,.action-controls { min-width:0; }
.stake-controls label,.risk-controls h2 { font-size:10px; letter-spacing:.5px; font-weight:700; color:#b6b6c0; margin:0 0 8px; display:flex; align-items:center; justify-content:space-between; }
.stake-controls label span { color:#6f6f79; font-size:8px; }
.amount-field { display:flex; align-items:center; gap:5px; height:42px; padding:0 7px; background:#111115; border:1px solid #404048; border-radius:7px; }
.amount-field button { width:27px; height:27px; border:0; border-radius:4px; color:#b7b7c1; background:#29292f; font-size:18px; flex-shrink:0; }
.amount-field button:hover { background:#44444c; }.amount-field>span { color:#b8b8c0; font-size:16px; margin-left:4px; }
.amount-field input { width:100%; min-width:0; appearance:textfield; -moz-appearance:textfield; background:none; border:none; color:var(--cream); text-align:center; font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; }
.amount-field input::-webkit-outer-spin-button,.amount-field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.stake-presets { display:flex; gap:5px; margin-top:6px; }.stake-presets button { flex:1; height:25px; background:#29292f; border:1px solid transparent; color:#afafb9; border-radius:5px; font-size:10px; }
.stake-presets button.selected { color:var(--lime); border-color:#545d2c; background:#2c311d; }.stake-presets button:hover { background:#3d3d45; }
.stake-controls.locked { opacity:.55; }.field-error { color:#ff9797; font-size:10px; line-height:1.5; margin:5px 0 0; }
.route-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.route { text-align:left; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px; min-width:0; height:74px; padding:10px 10px 8px; border:1px solid #44444d; border-radius:7px; color:#cfcfd7; background:#26262d; }
.route.selected { background:#303921; border-color:#97b833; color:#d2f641; }.route.boost.selected { background:#3e3020; border-color:#b38d38; color:#ffc04b; }
.route:hover { border-color:#d2f641; }.route.boost:hover { border-color:#ffc04b; }.route-name { font-weight:700; font-size:13px; }.route-name>span { margin-right:2px; font-size:16px; }
.route>small { grid-column:1; font-size:8px; color:#91919d; white-space:nowrap; }.route>strong { grid-column:2; grid-row:1/3; font-size:16px; align-self:center; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.route>span:last-child { grid-column:1/-1; font-size:9px; color:#c4c4cc; }.route:disabled { opacity:.5; }.risk-note { margin:6px 0 0; font-size:9px; line-height:1.4; color:#7e7e89; }
.run-summary { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:16px; margin-bottom:7px; }.run-summary>span:first-child { font-size:9px; color:#9797a3; letter-spacing:.3px; }.run-summary strong { font-size:14px; font-variant-numeric:tabular-nums; color:#dadade; white-space:nowrap; }.run-summary small { font-size:8px; color:#777783; font-weight:400; }
.action-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.primary-button,.cashout-button { height:66px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; border:1px solid #b9dc31; border-radius:9px; background:linear-gradient(#e1ff73,#c6ed38); color:#20280d; box-shadow:inset 0 1px 0 #f3ffbc,0 3px 0 #829d20; font-weight:800; }
.primary-button>span,.cashout-button>span { font-size:11px; letter-spacing:.4px; text-transform:uppercase; }.primary-button>strong,.cashout-button>strong { font-size:24px; font-variant-numeric:tabular-nums; letter-spacing:-.7px; }
.primary-button:hover { background:linear-gradient(#ecff9b,#d8f94d); }.primary-button:active:not(:disabled),.cashout-button:active:not(:disabled) { transform:translateY(2px); box-shadow:inset 0 1px 0 #ffffff50,0 1px 0 #829d20; }
.cashout-button { background:linear-gradient(#ffd885,#ffc04b); border-color:#dd9e25; color:#372706; box-shadow:inset 0 1px 0 #ffe8ac,0 3px 0 #916818; }.cashout-button:hover { background:linear-gradient(#ffe5a3,#ffd06b); }
.primary-button:disabled,.cashout-button:disabled { background:#29292f; border-color:#3c3c45; box-shadow:none; color:#666674; }
.control-hint { font-size:9px; color:#878793; margin:9px 0 0; line-height:1.4; text-align:center; }
.disclaimer { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:14px 2px 17px; color:#777780; font-size:9px; line-height:1.5; }.disclaimer p { margin:0; }.disclaimer b { color:#a7a7ae; font-weight:600; }
.result-banner { z-index:4; position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); text-align:center; width:min(340px,calc(100% - 40px)); padding:22px 25px 24px; background:#241b32ef; border:2px solid #f6d474; box-shadow:0 10px 0 #37254790,0 20px 60px #21132755; border-radius:16px; animation:result-in .22s ease-out; }
.result-star { display:block; font-size:36px; color:#ffd274; text-shadow:0 3px 0 #8e6937; line-height:1; margin:0 0 12px; }.result-banner>span:nth-child(2) { font-size:11px; font-weight:700; color:#ffdc88; letter-spacing:.7px; }.result-banner strong { display:block; color:#f7f8f2; font-size:46px; letter-spacing:-1.5px; margin-top:8px; font-variant-numeric:tabular-nums; }.result-banner p { margin:9px 0 0; color:#c4b7cf; font-size:11px; line-height:1.7; }
.result-banner.loss { border-color:#df868e; }.result-banner.loss .result-star { color:#f19494; text-shadow:0 3px 0 #7d414f; }.result-banner.loss>span:nth-child(2) { color:#f7a1a1; }body[data-state=lost] .multiplier-hud>strong { color:#ffe0e0; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
dialog { color:var(--cream); background:#222228; border:1px solid #4d4d58; border-radius:14px; padding:25px; width:min(530px,calc(100% - 30px)); max-height:calc(100dvh - 30px); overflow:auto; box-shadow:0 24px 100px #0008; }dialog::backdrop { background:#0b0711b8; backdrop-filter:blur(4px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }.eyebrow { font-size:9px; color:#a4a4af; font-weight:700; letter-spacing:.8px; margin:0; }dialog h2 { font-size:28px; letter-spacing:-.8px; margin:20px 0 12px; }.dialog-intro { color:#b6b6c0; font-size:13px; line-height:1.6; }
.how-steps { list-style:none; padding:0; margin:23px 0; display:flex; flex-direction:column; gap:18px; }.how-steps li { display:flex; gap:15px; }.how-steps li>span { color:var(--lime); font-size:12px; padding-top:2px; }.how-steps strong { font-size:13px; }.how-steps p { color:#a4a4b1; font-size:12px; line-height:1.6; margin:5px 0 0; }
.rules-note { padding:15px; background:#17171c; border-radius:8px; line-height:1.6; }.rules-note strong { color:var(--lime); font-size:12px; }.rules-note p { font-size:11px; color:#a7a7b1; margin:8px 0 0; }.keyboard-note { font-size:10px; color:#a2a2af; line-height:1.8; }kbd { padding:2px 4px; border:1px solid #484852; border-radius:4px; margin:0 3px; font-family:inherit; }
dialog>.primary-button { width:100%; height:48px; margin-top:18px; flex-direction:row; justify-content:space-between; padding:0 16px; font-size:13px; }.dialog-actions { display:flex; gap:9px; margin-top:22px; }.dialog-actions button { flex:1; height:47px; font-size:13px; flex-direction:row; gap:10px; }
@keyframes result-in { from { opacity:0; transform:translate(-50%,-43%) scale(.93); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media(max-width:1050px) {
  .app-shell { padding:0 16px; }.control-panel { grid-template-columns:210px 235px minmax(0,1fr); gap:18px; padding-left:18px; padding-right:18px; }.action-buttons { gap:7px; }.primary-button>strong,.cashout-button>strong { font-size:21px; }.run-summary>span:first-child { font-size:8px; }
}
@media(max-width:800px) {
  .app-shell { padding:0 10px; }.topbar { height:54px; gap:10px; }.brand { font-size:22px; }.brand small { font-size:10px; margin-left:5px; }.balance { padding-right:7px; }.balance strong { font-size:17px; }.balance>span { font-size:7px; }.rounds-bar { height:30px; margin-bottom:6px; }.arena { height:clamp(330px,calc(100dvh - 320px),640px); }
  .control-panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 16px; padding:13px 14px 12px; }.action-controls { grid-column:1/-1; }.action-controls .run-summary { display:none; }.action-buttons { gap:10px; }.primary-button,.cashout-button { height:57px; }.primary-button>strong,.cashout-button>strong { font-size:23px; }.risk-note { font-size:8px; }.control-hint { margin-top:6px; font-size:8px; }.disclaimer { padding:10px 1px 12px; font-size:8px; gap:9px; }.disclaimer>span { text-align:right; max-width:180px; }
}
@media(max-width:500px) {
  .app-shell { padding:0 7px; }.topbar { height:52px; gap:9px; }.brand { font-size:20px; gap:2px; }.brand img { width:27px; height:27px; }.brand small { display:none; }.demo-badge { font-size:8px; padding:4px 5px; }.demo-badge b { display:none; }.header-tools { gap:4px; }.icon-button { width:28px; height:28px; font-size:16px; border-radius:5px; }.icon-button svg { width:14px; height:14px; }.balance { padding-right:4px; gap:4px; }.balance strong { font-size:15px; }.balance small { display:none; }.balance>span { font-size:6px; letter-spacing:.6px; }
  .rounds-bar { gap:7px; }.rounds-bar>span { font-size:8px; }.history-empty { font-size:9px; }.history-item { min-width:36px; padding:5px 6px; font-size:9px; }.rounds-bar>button { font-size:9px; }.rounds-bar>button span { display:none; }.arena { height:clamp(330px,calc(100dvh - 309px),620px); border-radius:9px 9px 0 0; }
  .game-title { top:20px; left:17px; }.game-title h1 { font-size:29px; gap:6px; letter-spacing:-1.7px; -webkit-text-stroke:4px #44304f; text-shadow:2px 4px 0 #44304f; }.game-title>span { font-size:6px; letter-spacing:1px; margin-top:9px; }.multiplier-hud { top:87px; right:17px; }.multiplier-hud>span { font-size:8px; }.multiplier-hud>strong { font-size:48px; letter-spacing:-1px; }.multiplier-hud strong span { font-size:27px; }.multiplier-hud>div { font-size:8px; max-width:165px; }.stage-display { left:19px; top:88px; }.stage-display>span { font-size:7px; }.circuit-progress { gap:3px; }.circuit-progress i { width:10px; height:4px; }.arena-bottom { padding:12px 13px; font-size:9px; }.scene-demo { font-size:6px; letter-spacing:0; }
  .control-panel { padding:11px 11px 10px; gap:9px 12px; border-radius:0 0 9px 9px; }.stake-controls label,.risk-controls h2 { font-size:8px; margin-bottom:6px; }.stake-controls label span { font-size:6px; }.amount-field { height:36px; gap:2px; padding:0 5px; }.amount-field button { width:21px; height:24px; font-size:16px; }.amount-field>span { font-size:13px; margin-left:2px; }.amount-field input { font-size:18px; }.stake-presets { margin-top:5px; gap:4px; }.stake-presets button { font-size:9px; height:23px; }.route-options { gap:5px; }.route { height:64px; padding:7px 6px 6px; gap:2px; }.route-name { font-size:10px; white-space:nowrap; }.route-name>span { font-size:12px; margin-right:0; }.route>strong { font-size:11px; }.route>small { font-size:7px; }.route>span:last-child { font-size:7px; }.risk-note { margin-top:4px; font-size:7px; }
  .primary-button,.cashout-button { height:56px; border-radius:7px; }.primary-button>span,.cashout-button>span { font-size:10px; }.primary-button>strong,.cashout-button>strong { font-size:23px; }.control-hint { font-size:7px; }.disclaimer { display:block; padding:9px 1px 11px; font-size:7px; line-height:1.6; }.disclaimer>span { display:block; text-align:left; max-width:none; margin-top:2px; }.result-banner { width:calc(100% - 46px); max-width:300px; padding:20px; top:49%; }.result-banner strong { font-size:38px; }.result-banner>span:nth-child(2) { font-size:10px; }.result-banner p { font-size:10px; }.result-star { font-size:30px; margin-bottom:9px; }dialog { padding:21px; }dialog h2 { font-size:25px; }.keyboard-note { display:none; }
}
@media(max-width:360px) {
  .topbar { gap:6px; }.brand { font-size:18px; }.brand img { width:24px; height:24px; }.balance strong { font-size:13px; }.icon-button { width:25px; height:27px; }.control-panel { gap:9px; padding:11px 9px; }.route { padding:6px 5px; }.route-name>span { display:none; }.route>strong { font-size:10px; }.game-title h1 { font-size:26px; }.history-empty { max-width:132px; overflow:hidden; text-overflow:ellipsis; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
/* Fixed hero layout: the scene takes the space left after controls, without inner scrolling. */
html[data-presentation=hero],html[data-presentation=hero] body{height:100%;overflow:hidden;overscroll-behavior:none}
html[data-presentation=hero] .app-shell{height:100%;display:flex;flex-direction:column}
html[data-presentation=hero] .topbar{flex-shrink:0}
html[data-presentation=hero] main{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
html[data-presentation=hero] .arena{height:100%;min-height:0;max-height:none;touch-action:none}
html[data-presentation=hero] #history{overflow:hidden}
html[data-presentation=hero] .topbar{height:46px}
html[data-presentation=hero] .rounds-bar{height:26px;margin-bottom:4px}
html[data-presentation=hero] .disclaimer{padding:7px 2px;font-size:7px}
html[data-presentation=hero] .game-title h1{font-size:29px}