*{box-sizing:border-box}
[hidden]{display:none!important}
:root{color-scheme:dark;--ink:#10152a;--cream:#fff0c1;--left:#8be4cf;--right:#ffc67b}
html,body,main{width:100%;height:100%;margin:0;overflow:hidden;background:#141735}
body{font:14px system-ui,sans-serif;color:var(--cream)}
#stage,#game{position:absolute;inset:0;width:100%;height:100%}
#game{display:block;image-rendering:pixelated}
header,footer,#progress{position:absolute;z-index:2}
header{top:max(14px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
header button{pointer-events:auto}
.kicker{font:700 10px ui-monospace,monospace;letter-spacing:.17em;margin:0 0 5px;color:#f4c98f}
h1{font-size:clamp(17px,2vw,27px);margin:0 0 3px}
.score{font:900 clamp(24px,4vw,56px)/1 ui-monospace,monospace;letter-spacing:.04em;text-shadow:3px 3px #12142d}
.score small{display:block;margin-top:5px;font-size:12px;letter-spacing:0}
#message{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:16px}
#title{font-size:clamp(30px,7vw,76px);font-weight:900;letter-spacing:.13em;margin:0 0 8px;text-shadow:4px 4px #30304c,7px 7px #171a30}
#detail{max-width:350px;margin:0 auto 19px;color:#fff0cf;text-shadow:2px 2px #201e37}
.buttons{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
button{color:var(--cream);background:#232641;border:2px solid #74728a;padding:7px 12px;font:inherit;font-weight:700;cursor:pointer;box-shadow:3px 3px #11142b}
button:hover,button:focus-visible{background:#40405f;border-color:var(--cream)}
#preview{position:absolute;z-index:1;right:max(14px,env(safe-area-inset-right));bottom:max(34px,calc(env(safe-area-inset-bottom) + 28px));width:clamp(84px,14vw,184px);border:2px solid #6f7089;background:#151a30;box-shadow:4px 4px #111429;pointer-events:none}
#preview video,#preview canvas{display:block;width:100%;transform:scaleX(-1)}
#preview canvas{position:absolute;inset:0;height:100%}
#progress{bottom:0;left:0;width:100%;height:4px;background:#181b38}
#progress div{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#ffc67b}
footer{bottom:max(10px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 11px ui-monospace,monospace;text-shadow:1px 1px #16182c;pointer-events:none}
footer b{margin-right:7px}.left{color:var(--left)}.right{color:var(--right)}
@media(max-width:460px){#detail{font-size:13px}footer{font-size:10px}}

@font-face{font-family:AirPixel;src:url("fonts/fusion-pixel-12px-proportional-zh_hans.ttf.woff2") format("woff2");font-display:swap;font-weight:400}
body,.kicker,.score,footer,button{font-family:AirPixel,monospace;font-weight:400;font-synthesis:none}
.kicker{font-size:12px;letter-spacing:.08em}
.score{font-size:clamp(24px,4vw,48px);letter-spacing:.03em}
.score small,footer{font-size:12px}
#title{font-weight:400;font-size:clamp(36px,6vw,72px);letter-spacing:.08em}
#detail{font-size:16px;line-height:1.5}
button{position:relative;border:0;padding:9px 13px;font:16px/1 AirPixel,monospace;background:#222541;box-shadow:inset 0 0 0 2px #8b87a4,inset 0 -4px #151933;clip-path:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 3px,3px 3px)}
button:hover,button:focus-visible{background:#383b5f;box-shadow:inset 0 0 0 2px #fff0c1,inset 0 -4px #222541}
button:active{transform:translateY(2px)}
@media(max-width:460px){#detail{font-size:14px}button{font-size:14px}footer{font-size:12px}}

#levels{display:flex;justify-content:center;gap:6px;margin:0 auto 14px}
#levels button{font-size:14px;padding:7px 10px}
#levels button[aria-pressed="true"]{color:#171b35;background:#ffc67b;box-shadow:inset 0 0 0 2px #fff0c1,inset 0 -4px #c89158}
#game-text{position:absolute;inset:0;pointer-events:none;color:#fff0c1;font:12px/1 AirPixel,monospace;font-synthesis:none}
#game-text span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.gesture-caption{padding:2px 4px;background:#10142c;color:#f8eacb}
.hit-caption{color:#fff4d5;text-shadow:1px 1px #10142c;animation:hit-caption .55s ease-out both}
#countdown{left:50%;top:36%;font-size:24px;text-shadow:2px 2px #10142c}
@keyframes hit-caption{from{transform:translate(-50%,-2px)}to{transform:translate(-50%,-24px);opacity:0}}
#detail{max-width:none;white-space:nowrap;font-size:clamp(12px,3.5vw,16px)}
.gesture-caption{font-size:clamp(22px,2.3vw,34px);padding:3px 6px;color:#fff4d5;background:#10142c}

.embedded-game #message{pointer-events:none}
.embedded-game #levels,.embedded-game #message .buttons{display:none}
.embedded-game #message .buttons:has(.pixel-result-actions:not([hidden])){display:flex}
.embedded-game #message .buttons button{pointer-events:auto}
.embedded-game #detail{display:none}
.embedded-game #title{font-size:22px}