@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@700;800&display=swap";:root{--ink: #23110d;--ui: #f76953}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}#app{position:relative;width:100%;height:100%;margin:0 auto;overflow:hidden;container-type:inline-size}@media(orientation:landscape){#app{width:min(100vw,56.25vh);width:min(100vw,56.25dvh)}}body{background:#000;color:var(--ink);font-family:Nunito,sans-serif;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}#hud{position:absolute;z-index:2;inset:0 auto auto 0;width:100%;padding:max(20px,env(safe-area-inset-top)) 24px 0;pointer-events:none;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}.score{position:absolute;right:24px;top:max(20px,env(safe-area-inset-top));text-align:right;letter-spacing:.1em;font-size:11px;font-weight:800}.score strong{display:block;font:700 clamp(28px,5cqw,45px)/.9 Fredoka,sans-serif;letter-spacing:0}#help{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%);text-align:center;font-size:13px;font-weight:800;line-height:1.5;white-space:nowrap}#help span{font-size:11px;opacity:.8}#zone-banner{position:absolute;z-index:3;top:20vh;left:50%;width:min(88%,620px);transform:translate(-50%,-10px);text-align:center;pointer-events:none;opacity:0;transition:opacity .35s ease,transform .35s ease}#zone-banner.show{opacity:1;transform:translate(-50%)}#zone-banner:before{content:"";display:block;margin-bottom:7px;color:#5c1a10;font-size:11px;font-weight:800;letter-spacing:.22em;text-shadow:0 2px 0 rgba(255,255,255,.45)}#zone-name{display:block;color:var(--ink);font:700 clamp(25px,5cqw,46px)/1.05 Fredoka,sans-serif;letter-spacing:-.02em;text-shadow:0 3px 0 rgba(255,255,255,.5),0 8px 22px rgba(0,0,0,.18)}#danger{position:absolute;z-index:1;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(ellipse at center,#d2140a00 42%,#d2140a9e)}#dpad{position:absolute;z-index:3;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:none;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:4px;pointer-events:none}.dpad-btn{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin:0;padding:0;border:3px solid var(--ink);border-radius:16px;background:var(--ui);color:var(--ink);box-shadow:0 4px #b3422f;font:800 22px/1 Nunito,sans-serif;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.dpad-btn:active{transform:translateY(3px);box-shadow:0 1px #b3422f}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}.overlay{position:absolute;z-index:4;inset:0;display:grid;place-items:center;place-items:safe center;padding:22px;overflow-y:auto;background:#23110d6b;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .2s,visibility .2s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.card{max-width:385px;text-align:center;padding:38px 35px;border:3px solid var(--ink);border-radius:24px;background:var(--ui);box-shadow:0 8px #b3422f,0 20px 46px #00000040}.eyebrow{margin:0 0 9px;color:#5c1a10;font-size:11px;letter-spacing:.14em;font-weight:800}h1{margin:0;font:700 clamp(30px,9cqw,58px)/.95 Fredoka,sans-serif;letter-spacing:-.04em}.card>p:not(.eyebrow){line-height:1.45}button{border:0;margin-top:8px;padding:13px 23px;border-radius:12px;background:#f5c949;color:var(--ink);box-shadow:0 4px #b17723;font:800 16px Nunito,sans-serif;cursor:pointer}button:active{transform:translateY(3px);box-shadow:0 1px #b17723}.final-score{margin:24px 0 2px!important;font-size:18px}.final-score strong{font-size:28px;color:var(--ink)}.high-score{margin:0 0 17px;opacity:.82}.audio-settings{display:grid;gap:9px;margin-top:18px;font-size:11px;font-weight:800;letter-spacing:.08em}.audio-settings label{display:grid;grid-template-columns:48px 1fr 40px;align-items:center;gap:8px}.audio-settings input{accent-color:var(--ink);cursor:pointer}.audio-settings span{text-align:right;font-variant-numeric:tabular-nums}.sign-in-fields{display:grid;gap:10px;margin:20px 0 8px;text-align:left}.sign-in-fields label{display:grid;gap:5px;font-size:11px;font-weight:800;letter-spacing:.08em}.sign-in-fields input{width:100%;padding:11px 12px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:700 16px Nunito,sans-serif}.sign-in-fields input:focus{outline:3px solid rgba(35,17,13,.25);outline-offset:1px}.sign-in-fields button{justify-self:center;margin-top:2px}@container (max-width: 520px){#hud{padding-left:17px;padding-right:17px}.score{right:17px}#help{font-size:11px;white-space:normal}.card{padding:33px 25px}}@media(orientation:landscape){@container (max-width: 380px){.card{padding:22px 16px;border-radius:18px}h1{font-size:clamp(22px,10cqw,40px)}.card>p:not(.eyebrow){font-size:13px}.audio-settings{margin-top:12px}.sign-in-fields{margin:14px 0 6px}.final-score{margin-top:14px!important}}}@media(pointer:coarse),(hover:none){#dpad{display:grid}#help{left:max(17px,env(safe-area-inset-left));transform:none;text-align:left;bottom:max(24px,env(safe-area-inset-bottom))}#help span{display:none}.dpad-btn{width:58px;height:58px}#dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px)}.overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:#23110d8c}}