:root{--ink:#18181b;--muted:#77777f;--green:#4fc65f;--red:#e64341;--soft:#f4f4f5;--border:#e4e4e7;--paper:#fff;--modal-backdrop:rgba(0,0,0,.4);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
html,body{overscroll-behavior:none}body{height:100dvh}#game{touch-action:none;-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}[hidden]{display:none!important}
#controls{position:fixed;inset:0;pointer-events:none;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none;-webkit-user-select:none;color:var(--ink)}#controls button,#stick-zone{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
.control-tools{position:absolute;left:50%;bottom:calc(12px + var(--safe-bottom));transform:translateX(-50%);display:flex;gap:7px}.tool{height:36px;min-width:36px;padding:0 10px;border:1px solid var(--border);background:#fffffff0;border-radius:12px;color:var(--ink);cursor:pointer;font-size:14px}.tool:hover{background:var(--soft)}
#actions{position:absolute;right:calc(30px + var(--safe-right));bottom:calc(64px + var(--safe-bottom));display:flex;align-items:flex-end;gap:14px}.action{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:124px;height:106px;border:0;background:var(--green);color:white;border-radius:28px;box-shadow:0 5px 0 #36a848;cursor:pointer;transition:transform .08s,background .08s,box-shadow .08s}.action svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.action strong{font-size:14px;font-weight:600}.action.pressed{background:var(--green);color:white;box-shadow:0 1px 0 #36a848;transform:translateY(4px)}.action kbd{position:absolute;right:8px;top:8px;min-width:20px;font-size:10px}.action#bite{background:var(--red);color:white;border-color:var(--red);box-shadow:0 5px 0 #c62d2b}.action#bite.pressed{background:var(--red);border-color:var(--red)}kbd{display:inline-flex;min-width:24px;height:23px;padding:0 5px;align-items:center;justify-content:center;border:1px solid currentColor;border-bottom-width:3px;border-radius:5px;font:11px system-ui,-apple-system,"Segoe UI",sans-serif;opacity:.85}
#stick-zone{display:none;position:absolute;left:0;bottom:calc(54px + var(--safe-bottom));width:48%;height:43%;min-height:160px}#stick{position:absolute;width:116px;height:116px;border-radius:50%;background:#ffffffbb;border:1px solid var(--border);box-shadow:inset 0 0 0 12px #f4f4f588;left:calc(25px + var(--safe-left));bottom:26px;pointer-events:none}#stick:before,#stick:after{content:'';position:absolute;background:#c6c6ca;left:50%;top:50%;transform:translate(-50%,-50%)}#stick:before{width:80px;height:1px}#stick:after{width:1px;height:80px}#thumb{position:absolute;left:33px;top:33px;width:50px;height:50px;border-radius:50%;background:var(--ink);border:2px solid white;z-index:1}
#focus-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:22px;max-width:calc(100vw - 32px);width:370px;background:var(--paper);border:1px solid var(--border);border-radius:24px;box-shadow:0 0 0 100vmax var(--modal-backdrop),0 15px 60px #18181b22;z-index:1;pointer-events:auto;text-align:center}#focus-note p{font-size:14px;line-height:1.6;color:var(--muted);margin:8px 0 16px}#focus-note button{background:var(--ink);color:white;border:0;border-radius:12px;min-height:44px;padding:10px 18px;cursor:pointer}#control-notice{position:absolute;top:25%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:12px 16px;background:var(--paper);border-radius:14px;font-size:13px;text-align:center;line-height:1.5}
body.touch #stick-zone{display:block}body.touch .action kbd{display:none}body.touch #actions{right:calc(22px + var(--safe-right));bottom:calc(76px + var(--safe-bottom));gap:14px}body.touch .action{width:76px;height:76px;border-radius:50%;gap:3px}body.touch .action svg{width:26px;height:26px}body.touch .action strong{font-size:11px}body.touch #boost{margin-bottom:65px;width:68px;height:68px}body.touch .control-tools .tool{min-width:44px;height:44px}body.touch .control-tools{bottom:calc(8px + var(--safe-bottom))}
@media(max-width:740px){body:not(.touch) #actions{right:20px}.action{width:100px;height:90px}#settings{inset:12px!important;width:calc(100vw - 24px)!important}#close{top:22px!important;right:24px!important}}
@media(max-height:480px){body.touch #stick-zone{height:53%;bottom:50px}body.touch #stick{bottom:8px}body.touch #actions{bottom:58px}body.touch #boost{margin-bottom:38px}.control-tools{bottom:7px}}
@media(prefers-reduced-motion:reduce){.action{transition:none}}
#game{position:fixed;left:env(safe-area-inset-left,0px);top:env(safe-area-inset-top,0px);width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));height:calc(100% - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
#controls.not-playing #actions,#controls.not-playing #stick-zone{display:none}
#controls{z-index:5}#settings{z-index:10}#close{z-index:11}
body.touch #actions{bottom:calc(116px + var(--safe-bottom))}
@media(max-height:480px){body.touch #actions{bottom:calc(105px + var(--safe-bottom))}}
#sound-control{position:fixed;z-index:6;bottom:calc(10px + var(--safe-bottom));right:calc(22px + var(--safe-right));color:var(--ink)}#sound-toggle{display:grid;place-items:center;width:42px;height:38px;background:#fffffff0;border:1px solid var(--border);border-radius:12px;color:inherit;cursor:pointer}#sound-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sound-slash{display:none}.muted .sound-waves{display:none}.muted .sound-slash{display:block}.muted #sound-toggle{color:var(--muted)}.sound-panel{display:none;position:absolute;bottom:100%;right:0;width:195px;padding:17px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 35px #18181b20}.sound-panel label{display:flex;justify-content:space-between;font-size:12px}.sound-panel output{font-variant-numeric:tabular-nums;color:var(--ink)}.sound-panel input{width:100%;accent-color:var(--ink);margin:14px 0 0;cursor:pointer}#sound-control:hover .sound-panel,#sound-control:focus-within .sound-panel{display:block}.touch #sound-toggle{width:44px;height:44px}
#diagnostics{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:30;width:min(340px,90vw);max-height:65vh;overflow:auto;padding:12px 16px;background:#fffffff5;color:var(--ink);border:1px solid var(--border);border-radius:16px;font:12px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 8px 30px #18181b20}#diagnostics summary{cursor:pointer;font-weight:700}#diagnostics pre{white-space:pre-wrap;font-size:10px}#diagnostics button{font:inherit;padding:7px;border:1px solid var(--border);border-radius:6px;background:white;cursor:pointer}

#controls:has(#focus-note:not([hidden])){z-index:20}
body:has(#session-overlay:not([hidden]),#result-overlay:not([hidden])) #focus-note{visibility:hidden}