:root{font-family:Tahoma,Arial,sans-serif;color:#fff5df;background:#101c24;color-scheme:dark;--gold:#ffdb78;--cyan:#8de6f5}*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overscroll-behavior:none;overflow:hidden}body{display:grid;place-items:center;background:radial-gradient(ellipse at center,#274653,#0c1720 70%)}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:700 16px Tahoma,Arial;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}#arena{position:relative;width:min(100%,520px);height:100svh;height:100dvh;max-height:1100px;overflow:hidden;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 100px #0006}canvas{width:100%;height:100%;display:block}header{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:8px;padding:calc(9px + env(safe-area-inset-top)) 12px 10px;background:linear-gradient(#0c1f2ff5,#0d2936d9);z-index:4;direction:ltr;border-bottom:1px solid #add2de30}header button,.back{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border:1px solid #cee0e335;border-radius:11px;background:#112f3b;color:#f5e4c5;font:700 22px Arial;text-decoration:none}.brand{flex:1;font:900 17px/1.1 Arial;letter-spacing:-.3px}.brand b{color:var(--gold)}.brand small{font-size:11px;letter-spacing:1.9px;font-weight:600;display:block;margin-top:5px;color:#9cb9c4}#hud{position:absolute;inset:calc(70px + env(safe-area-inset-top)) 14px auto;pointer-events:none;z-index:3}.stats{display:flex;gap:8px;direction:ltr}.stats>div{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#102b3ce8;border:1px solid #fce7b927;border-radius:10px;padding:8px 11px;flex:1;min-width:0;direction:rtl}.stats span{font-size:13px;color:#bdcdd2}.stats b{font:900 24px Arial;color:#ffdf88;direction:ltr;font-variant-numeric:tabular-nums}.stage{display:flex;justify-content:space-between;margin-top:9px;font-size:13px;text-shadow:0 1px 4px #000,0 0 8px #000;color:#fff6dd}.stage>span:last-child{font-family:Arial;font-weight:800;direction:ltr}.progress{height:3px;border-radius:4px;background:#11263290;margin-top:7px;direction:ltr}.progress i{display:block;height:100%;background:var(--gold);width:0}#boss-hud{background:#3c2429ed;border:1px solid #f0b17b88;padding:8px 12px;border-radius:10px;margin-top:8px;font-size:14px}#boss-hud>div{height:5px;background:#fff2;margin-top:6px;direction:ltr}#boss-health{height:100%;display:block;background:#fa8c66}.screen{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;padding:100px 24px max(30px,env(safe-area-inset-bottom));background:linear-gradient(#091b2603 13%,#08172415 30%,#091924e8 69%,#0b1a25);overflow-y:auto;touch-action:pan-y}.intro-card{width:100%;text-align:right;padding-bottom:15px}.tag{font-size:14px;color:var(--gold);line-height:1.7;margin:0 0 14px}h1{font:900 clamp(32px,8.5vw,46px)/1.6 Tahoma,Arial;margin:0 0 15px;text-shadow:0 3px 15px #001a21}h1 em{font-style:normal;color:var(--gold)}.guide{font-size:16px;line-height:1.9;color:#d6e1e5;margin:0 0 22px}.primary{width:100%;min-height:56px;padding:14px;border:1px solid #ffedb5;border-radius:13px;background:linear-gradient(115deg,#ffe99f,#f5bd54);color:#132938;box-shadow:0 5px 0 #97703c;font-size:18px}.primary:active{transform:translateY(2px);box-shadow:0 3px 0 #97703c}.footnote{font-size:12px;text-align:center;color:#91b0bf;margin:20px 0 0}.shade{align-items:center;background:#081924cc;backdrop-filter:blur(7px)}.panel{width:100%;padding:27px 23px;background:linear-gradient(135deg,#233e4c,#10242f);border:1px solid #edca8166;border-radius:21px;text-align:center}.panel h2{font-size:30px;line-height:1.65;margin:10px 0 12px;color:#ffe3a2}.panel p:not(.tag){font-size:15px;line-height:1.9;color:#d5e0e4}.panel a{color:#bcd9e4;display:block;margin-top:24px;min-height:44px;padding:10px;font-size:14px}.secondary{min-height:48px;width:100%;background:#123343;border:1px solid #8cbdc755;border-radius:10px;margin-top:16px}.panel #result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.panel #result-stats>div{background:#0b222ca8;border-radius:9px;padding:12px;font-size:13px;color:#a7c4ce}.panel #result-stats b{display:block;font:900 26px Arial;color:#ffe3a2;margin-top:8px}#notice{position:absolute;bottom:calc(110px + env(safe-area-inset-bottom));left:18px;right:18px;text-align:center;background:#0b2a3ced;border:1px solid #a2e5e866;border-radius:11px;color:#fff1bb;padding:10px;font-size:15px;line-height:1.6;pointer-events:none;z-index:3}#hint{position:absolute;inset:auto 0 calc(18px + env(safe-area-inset-bottom));text-align:center;font-size:14px;color:#cbe4e5;pointer-events:none}#error{color:#ffc0a7;font-size:15px;line-height:1.7}@media(max-width:360px){.brand{font-size:14px}.brand small{font-size:10px;letter-spacing:1px}header{gap:5px;padding-inline:8px}.stats b{font-size:20px}.stats>div{padding:8px}.stats span{font-size:12px}.panel{padding:22px 17px}.screen{padding-inline:19px}}@media(max-height:690px){.screen{padding-top:80px;padding-bottom:18px}h1{font-size:29px;line-height:1.45}.tag{margin-bottom:8px}.guide{font-size:14px;margin-bottom:15px}.intro-card{padding-bottom:0}.footnote{margin-top:15px}.panel{padding:17px}.panel h2{font-size:25px}.panel #result-stats{margin:12px 0}.panel a{margin-top:13px}#hud{top:calc(66px + env(safe-area-inset-top))}.stats>div{padding-block:5px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.stats #level{font:800 15px/1.4 Tahoma,Arial;white-space:nowrap;direction:rtl}.stats>div:nth-child(2){flex:1.2}.stats #clock{font-size:20px}#notice{top:calc(215px + env(safe-area-inset-top));bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:90%;padding:5px 13px;font-size:14px;background:#123445df;border-radius:20px}#hint{bottom:calc(13px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:13px}#hint small{font-size:12px;color:#b8d0d7}#hint b{display:inline-block;color:#ffe1a2;font:800 15px Arial;margin-inline-start:5px}.footnote{font-size:13px}@media(max-width:360px){.stats{gap:5px}.stats>div{gap:4px;padding-inline:7px}.stats #level{font-size:14px}.stats #clock{font-size:18px}}@media(max-height:690px){#notice{top:190px;font-size:13px}#boss-hud{padding:5px 10px;font-size:13px}}
:root{--hud-top:calc(59px + env(safe-area-inset-top))}header{padding-block:calc(5px + env(safe-area-inset-top)) 5px;padding-inline:9px}.brand{font-size:16px}.brand small{font-size:9px;letter-spacing:1.4px;margin-top:3px}#hud{top:var(--hud-top);inset-inline:10px}.stats>div{padding:5px 9px;border-radius:8px}.stats b{font-size:22px}.stats #clock{font-size:18px}.stats #level{font-size:14px}.stage{margin-top:5px;font-size:12px}.progress{margin-top:4px}#boss-hud,#ally-hud{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:8px;margin-top:5px;font-size:12px}#boss-hud>span,#ally-hud>span{white-space:nowrap}#boss-hud>div,#ally-hud>div{flex:1;height:6px;background:#ffffff25;margin:0;direction:ltr}#ally-hud{background:#163c50ed;border:1px solid #83d9ec99;color:#b7f4ff}#ally-health{display:block;height:100%;background:#91e8ff}#objective{margin:5px 0 0;text-align:center;padding:5px;background:#112e40ed;border:1px solid #8ae6ff66;border-radius:8px;font-size:12px;color:#b4efff}#notice{top:auto;bottom:calc(50px + env(safe-area-inset-bottom));font-size:13px;padding:4px 12px}#hint{font-size:12px}#arena{width:min(100%,560px)}@media(max-width:360px){.stats>div{padding-inline:6px}.stats #level{font-size:12px}.stage{font-size:11px}.brand{font-size:14px}#boss-hud,#ally-hud{font-size:11px}}@media(max-height:690px){#hud{top:var(--hud-top)}#notice{top:auto;bottom:43px;font-size:12px}}
#victory-art{position:absolute;inset:0;z-index:4;background:#142b36;overflow:hidden;pointer-events:none}#victory-art>img{position:absolute;inset:0;width:100%;height:64%;object-fit:cover;opacity:0;animation:celebration-frame 15s infinite}#victory-art>img:nth-child(1){animation-delay:0s;object-position:50% 65%}#victory-art>img:nth-child(2){animation-delay:5s;object-position:52% 20%}#victory-art>img:nth-child(3){animation-delay:10s;object-position:50% 10%}.victory header{visibility:hidden}.victory #result{align-items:flex-end;padding:24px 18px max(20px,env(safe-area-inset-bottom));backdrop-filter:none;background:linear-gradient(#071e2a10 20%,#071c2944 42%,#081f30ed 70%)}.victory #result .panel{background:linear-gradient(#102e3de0,#0b2535f5);border-color:#efd895aa;box-shadow:0 0 45px #eed6a522;padding:18px}.victory #result h2{font-size:43px;line-height:1.25;margin:8px 0}.victory #result .tag{margin:0;font-size:12px}.victory #result p:not(.tag){margin:10px 0;font-size:14px}.victory #result #result-stats{margin:14px 0;gap:7px}.victory #result #result-stats>div{padding:8px}.victory #result #result-stats b{font-size:21px;margin-top:5px}.victory #result a{margin:12px 0 0}.victory #confetti i{position:absolute;top:-20px;left:var(--x);width:6px;height:11px;opacity:.9;animation:confetti-fall 5.5s var(--delay) linear infinite}@keyframes celebration-frame{0%,27%{opacity:1;transform:scale(1)}33%,94%{opacity:0;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}@keyframes confetti-fall{to{transform:translate(var(--drift),110dvh) rotate(540deg)}}@media(prefers-reduced-motion:reduce){#victory-art>img{animation:none!important;opacity:0}#victory-art>img:first-child{opacity:1}.victory #confetti i{animation:none!important;display:none}}@media(max-height:690px){.victory #result .panel{padding:12px}.victory #result h2{font-size:33px}.victory #result #result-stats{margin:8px 0}.victory #result #result-stats>div{padding:6px}.victory #result a{margin-top:5px}}
.brand{font-family:Tahoma,Arial,sans-serif;font-size:18px;text-align:left}.brand small{font-family:Arial,sans-serif;font-size:10px;letter-spacing:1.3px}.intro-card h1{font-size:clamp(37px,10vw,54px);line-height:1.5}.intro-card .tag{font-family:Arial,sans-serif;letter-spacing:2px;font-size:14px;direction:ltr;text-align:right}.intro-line{font-size:17px;line-height:1.9;color:#fff1ce;margin:8px 0 18px}@media(max-width:360px){.brand{font-size:16px}.brand small{font-size:9px;letter-spacing:1px}.intro-line{font-size:15px}}@media(max-height:690px){.intro-card h1{font-size:35px}.intro-line{margin:4px 0 12px}}
html,body{position:fixed;inset:0;min-height:0;overscroll-behavior:none}body{height:100svh;height:100dvh;-webkit-text-size-adjust:100%}#arena{height:100%;touch-action:pan-y}#arena.playing,#game{touch-action:none}.screen{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

#result-sound{min-height:40px;margin:0 0 14px;font-size:14px}.victory #result-sound{min-height:38px;margin-bottom:10px}
.stats #level{white-space:normal;text-align:center;line-height:1.15}
/* Current stage leads the existing HUD; the canvas and touch area stay full-size. */
#hud .stage{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:7px 10px;background:#102936f5;border:1px solid #ffdb7870;border-radius:10px;text-shadow:none;direction:rtl}
.stage-count{display:flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap;margin:0;font-size:14px;line-height:1.4;font-weight:700;color:#fff5df}
.stage-count strong{font-size:28px;line-height:1.2;color:var(--gold);font-variant-numeric:tabular-nums;min-width:1.1em;text-align:center}
.stage-count bdi{font-size:20px;color:#fff0c4;font-variant-numeric:tabular-nums}
.stage-meta{display:grid;gap:3px;min-width:0;text-align:left;line-height:1.5;font-size:12px;color:#d4e4e9}
.stage-meta #stage-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-score{color:#9fbecb}.stage-score bdi{color:#fff0ce;font-family:Arial,sans-serif;font-weight:700}
#hud .progress{height:4px;margin:4px 3px 6px;overflow:hidden}#hud .progress i{border-radius:4px}
@media(max-width:360px){#hud .stage{gap:6px;padding:6px 8px}.stage-count{gap:5px}.stage-count strong{font-size:26px}.stage-count bdi{font-size:19px}}
.audio-settings{margin-top:16px;text-align:right;border-top:1px solid #8cbdc744;font-size:14px}.audio-settings summary{cursor:pointer;min-height:44px;padding:12px 2px;color:#a7e8f2;font-weight:700;touch-action:manipulation}.audio-settings label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px;margin-top:5px}.audio-settings output{font:700 14px Arial;color:#ffdf88;direction:ltr}.audio-settings input{grid-column:1/-1;width:100%;height:44px;margin:0;accent-color:#ffda78;touch-action:pan-y;cursor:pointer}.audio-settings input:focus-visible,.audio-settings summary:focus-visible{outline:2px solid #8de6f5;outline-offset:2px}.audio-settings p,.panel .audio-settings p:not(.tag){font-size:12px;line-height:1.6;color:#a8c4cf;margin:4px 0 0}#paused .panel{max-height:100%;overflow-y:auto;overscroll-behavior:contain}

/* After the three-second victory result, leave only compact footer controls. */
.victory-unobstructed #victory-art>img{height:100%}.victory-unobstructed #result{background:linear-gradient(transparent 75%,#081924b3);pointer-events:none}.victory-unobstructed #result .panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:none;border:0;box-shadow:none;padding:0;pointer-events:auto}.victory-unobstructed #result #result-sound,.victory-unobstructed #result #again{margin:0;min-height:44px;padding:10px;font-size:14px;box-shadow:none}.victory-unobstructed #result a{grid-column:1/-1;margin:0;padding:8px;min-height:44px;font-size:12px}