:root{--ui-scale:1;--action-energy:100%}
#brand-logo{position:fixed;z-index:3;left:calc(7px * var(--ui-scale) + var(--safe-left));top:calc(9px * var(--ui-scale) + env(safe-area-inset-top,0px));width:calc(222px * var(--ui-scale));pointer-events:none;mix-blend-mode:multiply}
#brand-logo img{display:block;width:100%;height:auto}.loading-logo{width:min(340px,80vw);height:auto;justify-self:center;mix-blend-mode:multiply}
body:has(#loading) #brand-logo{display:none}
#loading{z-index:2;background:#fff;padding:24px;justify-items:center;gap:0}
#loading>p{margin:0;color:#77777f}
#loading>p:first-of-type{margin-top:24px;font-size:16px}
#loading #progress{display:block;width:min(280px,76vw);height:6px;margin-top:28px;border:0;border-radius:99px;overflow:hidden;background:#ededee;appearance:none;-webkit-appearance:none;accent-color:#e9983d}
#loading #progress::-webkit-progress-bar{background:#ededee;border-radius:99px}
#loading #progress::-webkit-progress-value{background:#e9983d;border-radius:99px;transition:width .18s ease-out}
#loading #progress::-moz-progress-bar{background:#e9983d;border-radius:99px}
#loading #load-status{min-height:18px;margin-top:20px;font-size:13px;font-variant-numeric:tabular-nums}
#loading[data-phase="compile"] #progress,#loading[data-phase="start"] #progress{animation:load-pulse 1.5s ease-in-out infinite}
#loading #error:empty{display:none}
#loading #error:not(:empty){max-width:min(460px,85vw);margin-top:18px;color:#e64341}
@keyframes load-pulse{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){#loading[data-phase="compile"] #progress,#loading[data-phase="start"] #progress{animation:none}}
body:has(#loading) #sound-control,body:has(#loading) #controls,body:has(#loading) #balance,body:has(#loading) #connection-status,body:has(#loading) #result-overlay{display:none!important}
#balance{position:fixed;z-index:4;top:calc(39px * var(--ui-scale) + env(safe-area-inset-top,0px));right:calc(36px * var(--ui-scale) + var(--safe-right));width:clamp(128px,calc(224px * var(--ui-scale)),224px);pointer-events:none;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;text-align:right}
#balance span{display:block;color:#292929;font-size:clamp(11px,calc(15px * var(--ui-scale)),15px);line-height:1.2;white-space:nowrap}
#balance strong{display:block;margin-top:5px;color:#e9983d;font-size:clamp(30px,calc(39px * var(--ui-scale)),40px);font-weight:800;line-height:1.05;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:600px){#balance{width:112px}#balance span{font-size:10px}#balance strong{font-size:28px}}
#actions,body.touch #actions{right:calc(28px + var(--safe-right));bottom:calc(76px + var(--safe-bottom));display:flex;flex-direction:column-reverse;align-items:center;gap:12px}
#actions .action,#actions #bite{--action-fill:#03cd39;width:138px;height:58px;margin:0;padding:0 12px;border:0;border-radius:10px;background:linear-gradient(to top,var(--action-fill) var(--action-energy),#f4f4f4 var(--action-energy));color:white;box-shadow:none;gap:0;isolation:isolate;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;transition:transform .1s}
#actions #bite{--action-fill:var(--red)}
#actions .action strong{font-size:16px;line-height:1.1;font-weight:600;text-shadow:0 1px 2px #18181b44}
#actions .action kbd{right:5px;top:-8px;background:#18181b;min-width:23px;height:19px;font-size:10px;border-color:#18181b;color:white}
#actions .action.pressed,#actions #bite.pressed{transform:scale(.96);box-shadow:none}
#actions.low .action,#actions.low #bite,#actions.empty .action,#actions.empty #bite{color:#18181b}
#actions.low .action strong,#actions.empty .action strong{text-shadow:none}
#actions.low .action strong{transform:translateY(-10px)}#actions.empty .action strong{transform:none}
#actions.empty .action,#actions.empty #bite{background:#f4f4f4;color:#77777f}
#control-hint{position:absolute;left:50%;bottom:calc(61px + var(--safe-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 320px);color:#77777f;font-size:12px;line-height:1.3;text-align:center;white-space:normal}
#controls.not-playing #control-hint{display:none}
#stick-zone{display:block;left:calc(10px + var(--safe-left));bottom:calc(65px + var(--safe-bottom));width:180px;height:180px;min-height:0}
#stick,body.touch #stick{width:116px;height:116px;border:4px solid #03cd39;border-radius:29px;background:#ffffff8c;box-shadow:none}
#stick:before,#stick:after{display:none}#thumb,body.touch #thumb{left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border:0;border-radius:7px;background:#363636}
body.touch #actions{right:calc(21px + var(--safe-right));bottom:calc(76px + var(--safe-bottom));gap:12px}body.touch #actions .action,body.touch #actions #bite{width:118px;height:54px;margin:0;border-radius:10px}
body.touch #stick-zone{left:0;bottom:calc(54px + var(--safe-bottom));width:48%;height:43%;min-height:160px}
body.touch #control-hint{bottom:calc(37px + var(--safe-bottom));max-width:calc(100vw - 48px);font-size:11px}
@media(max-height:480px){#actions,body.touch #actions{bottom:calc(60px + var(--safe-bottom));gap:8px}#actions .action,#actions #bite,body.touch #actions .action,body.touch #actions #bite{width:112px;height:46px}#actions .action strong{font-size:12px}body.touch #control-hint{bottom:calc(27px + var(--safe-bottom))}}
@media(prefers-reduced-motion:reduce){#actions .action{transition:none}}

#balance.wallet-loss strong{color:#e64341}#balance.wallet-gain strong{color:#03cd39}
.wallet-change{position:absolute;right:0;top:calc(100% + 9px);display:flex;align-items:center;gap:7px;color:#e64341;white-space:nowrap;font-size:clamp(15px,calc(19px * var(--ui-scale)),19px);animation:wallet-change .95s ease-out both;transition:top .12s ease-out}
.wallet-change.gain{color:#03cd39}.wallet-change i{display:grid;place-items:center;width:23px;height:23px;flex:none;border-radius:50%;background:#e64341;font-style:normal;color:#fff}.wallet-change.gain i{background:#03cd39}
.wallet-change b{font-weight:700;font-variant-numeric:tabular-nums}
@keyframes wallet-change{0%{opacity:0;transform:translateY(-8px) scale(.94)}18%{opacity:1;transform:translateY(0) scale(1)}65%{opacity:1}100%{opacity:0;transform:translateY(24px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.wallet-change{animation:wallet-change-still .95s linear both;transition:none}@keyframes wallet-change-still{0%,75%{opacity:1}100%{opacity:0}}}

#actions.recharging .action{animation:energy-refill .7s ease-out}
.energy-gain{position:absolute;right:calc(100% + 13px);top:43%;color:#03cd39;font-size:23px;font-weight:800;pointer-events:none;animation:energy-gain .8s ease-out both;text-shadow:0 1px 4px white}
@keyframes energy-refill{0%,100%{box-shadow:none}35%{box-shadow:0 0 0 5px #03cd3924,0 0 20px #03cd3930}}
@keyframes energy-gain{0%{opacity:0;transform:translateY(10px) scale(.9)}20%{opacity:1;transform:translateY(0) scale(1)}65%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@media(prefers-reduced-motion:reduce){#actions.recharging .action{animation:none}.energy-gain{animation:wallet-change-still .8s linear both}}

#money-feedback{position:fixed;inset:0;z-index:3;pointer-events:none;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.money-pop{position:absolute;inset:0;pointer-events:none;color:#e64341}
.money-pop.gain{color:#03cd39}
.money-pop strong,.money-pop>span{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);white-space:nowrap;animation:money-pop 1.3s ease-out both}
.money-pop strong{font-size:min(clamp(48px,7.5vw,96px),calc(155vw / var(--money-characters)));font-weight:850;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px #ffffffef,0 0 3px #fff}
.money-pop>span{margin-top:clamp(40px,5vw,61px);font-size:clamp(13px,1.4vw,18px);font-weight:650;letter-spacing:.04em;text-shadow:0 1px 6px #fff}
.money-pop.gain strong,.money-pop.gain>span{top:61%}
.money-wash{position:absolute;inset:0;z-index:-1;background:#e64341;animation:money-wash .65s ease-out both}
.money-wash.gain{background:#03cd39;animation:money-gain-wash .6s ease-out both}
#money-feedback-status{position:fixed;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
@keyframes money-pop{0%{opacity:1;transform:translate(-50%,-35%) scale(.94)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-75%) scale(.98)}}
@keyframes money-wash{0%{opacity:.18}100%{opacity:0}}
@keyframes money-gain-wash{0%{opacity:.07}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.money-pop strong,.money-pop>span{animation:money-pop-still 1.3s linear both}.money-wash{animation:none;display:none}@keyframes money-pop-still{0%,75%{opacity:1}100%{opacity:0}}}