:root{--ink:#1d2340;--ink-2:#4a5480;--ink-3:#8a93b8;--line:#e1e7f6;--panel:#f3f6ff;--sky:#6fd0ff;--sky-light:#d6f3ff;--red:#ff3d4f;--red-light:#ff7a87;--red-tint:#ffe2e6;--blue:#2f8cff;--blue-light:#6aaeff;--blue-tint:#ddebff;--yellow:#ffd23a;--yellow-light:#ffe680;--yellow-deep:#f5b400;--green:#2fd27a;--green-light:#79eaab;--orange:#ff9f1c;--orange-light:#ffc062;--purple:#9b5cff;--purple-light:#bf95ff;--cyan:#3fd8ff;--left:var(--red);--right:var(--blue);--display:"Fredoka", ui-rounded, "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;--body:var(--display);--spring:cubic-bezier(.2, 1.6, .4, 1);--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--pad-h:0px}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--sky);height:100%;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;font-weight:500;overflow:hidden}#app canvas{touch-action:none;display:block}.hidden{display:none!important}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:0}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}h1,h2,h3{margin:0;font-weight:700}.chunky{--face:linear-gradient(180deg, #fff 0%, #fff 55%, #e8eefb 100%);text-transform:uppercase;border:3px solid var(--ink);background:var(--face);width:100%;min-height:58px;box-shadow:0 6px 0 var(--ink), inset 0 3px 0 #fffc;color:var(--ink);font-family:var(--display);letter-spacing:.5px;border-radius:999px;padding:0 22px 3px;font-size:22px;font-weight:700;transition:transform .1s,box-shadow .1s;position:relative}.chunky:active{box-shadow:0 1px 0 var(--ink), inset 0 3px 0 #fffc;transform:translateY(5px)}.chunky.primary{--face:linear-gradient(180deg, var(--yellow-light) 0%, var(--yellow) 55%, var(--yellow-deep) 100%);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;font-size:25px}.chunky.soft{--face:linear-gradient(180deg, #eef3ff, #d9e3f8);color:var(--ink-2)}.chunky.small{width:auto;min-width:140px;min-height:48px;font-size:18px}.play-btn{border:4px solid var(--ink);background:linear-gradient(180deg, var(--yellow-light) 0%, var(--yellow) 50%, var(--yellow-deep) 100%);width:100%;height:74px;box-shadow:0 8px 0 var(--ink), inset 0 4px 0 #ffffffbf, inset 0 -6px 0 #c878004d;border-radius:999px;margin-top:4px;transition:translate 80ms,box-shadow 80ms;animation:1.6s ease-in-out infinite play-bob;position:relative;overflow:hidden}.play-btn span{z-index:1;color:#fff;font-family:var(--display);letter-spacing:4px;text-indent:4px;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;font-size:46px;font-weight:700;display:block;position:relative}.play-btn:after{content:"";background:linear-gradient(90deg,#fff0,#fffc,#fff0);width:34%;animation:2.8s ease-in-out infinite shine;position:absolute;top:-10px;bottom:-10px;left:0;transform:translate(-130%)skew(-20deg)}.play-btn:active{box-shadow:0 2px 0 var(--ink), inset 0 4px 0 #ffffffbf, inset 0 -6px 0 #c878004d;translate:0 6px}@keyframes play-bob{50%{transform:scale(1.035,1.02)}}@keyframes shine{0%,55%{transform:translate(-130%)skew(-20deg)}to{transform:translate(330%)skew(-20deg)}}.link-btn{border:2.5px solid var(--ink);min-height:40px;box-shadow:0 4px 0 var(--ink);color:var(--ink);background:#fffffff0;border-radius:999px;justify-self:center;padding:0 18px 1px;font-size:15px;font-weight:600;transition:transform 80ms,box-shadow 80ms}.link-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.icon-btn{border:3px solid var(--ink);width:48px;height:48px;box-shadow:0 4px 0 var(--ink);color:var(--ink);background:#fff;border-radius:50%;place-items:center;transition:transform 80ms,box-shadow 80ms;display:grid}.icon-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.icon-btn svg{fill:currentColor;stroke:currentColor;width:24px;height:24px}.icon-btn-spacer{width:48px}.stack{gap:16px;margin-top:22px;display:grid}.screen{z-index:20;-webkit-overflow-scrolling:touch;position:fixed;inset:0;overflow-y:auto}.screen.overlay{padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);background:#6fd0ffad;place-items:center;display:grid}.screen.overlay:before,.screen.page:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#ffffff6b 0 6px,#0000 6.5px),radial-gradient(circle,#ffffff6b 0 6px,#0000 6.5px);background-position:0 0,20px 20px;background-size:40px 40px;animation:4s linear infinite drift;position:fixed;inset:-80px}@keyframes drift{to{transform:translate(40px,40px)}}.sheet{border:3px solid var(--ink);width:min(400px,100%);box-shadow:0 8px 0 var(--ink), 0 24px 40px #1d234038;color:var(--ink);text-align:center;animation:sheet-in .4s var(--spring);background:#fff;border-radius:28px;margin-top:26px;padding:42px 22px 26px;position:relative}.sheet.center{justify-items:center;gap:12px;margin-top:0;padding-top:30px;display:grid}@keyframes sheet-in{0%{opacity:0;transform:translateY(30px)scale(.86)}}.sheet h2:not(.result-title){border:3px solid var(--ink);background:linear-gradient(180deg, var(--blue-light), var(--blue));max-width:calc(100% - 24px);box-shadow:0 5px 0 var(--ink), inset 0 3px 0 #ffffff59;color:#fff;white-space:nowrap;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;border-radius:999px;padding:4px 26px 7px;font-size:30px;line-height:1.1;position:absolute;top:0;left:50%;transform:translate(-50%,-58%)rotate(-2deg)}#stance-screen .sheet h2{background:linear-gradient(180deg, var(--purple-light), var(--purple))}.sheet-note{color:var(--ink-2);margin:14px 0 0;font-size:14px;font-weight:500;line-height:1.45}.tools{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;display:flex}.tools .link-btn{background:var(--panel);min-height:36px;font-size:14px}body.touch .keys-only,body:not(.camera-game) .camera-only{display:none}.menu{padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 16px);flex-direction:column;display:flex}.menu-corners{justify-content:space-between;display:flex}.menu-hero{flex:1;place-items:center;min-height:150px;display:grid}.logo{justify-items:center;line-height:.95;animation:3s ease-in-out infinite logo-bob;display:grid;transform:rotate(-3deg)}.logo-top{color:#fff;letter-spacing:.5px;-webkit-text-stroke:clamp(11px, 3.4vw, 20px) var(--ink);paint-order:stroke fill;filter:drop-shadow(0 6px 0 var(--red)) drop-shadow(0 5px 0 var(--ink));font-size:clamp(56px,18vw,112px)}.logo-bottom{border:4px solid var(--ink);background:linear-gradient(180deg, var(--yellow-light), var(--yellow) 60%, var(--yellow-deep));box-shadow:0 6px 0 var(--ink), inset 0 3px 0 #ffffffb3;color:#fff;letter-spacing:clamp(6px,2.5vw,14px);text-indent:clamp(6px,2.5vw,14px);-webkit-text-stroke:clamp(7px, 2.2vw, 12px) var(--ink);paint-order:stroke fill;border-radius:999px;margin-top:8px;padding:0 24px 5px;font-size:clamp(30px,9.5vw,56px);transform:rotate(4deg)}@keyframes logo-bob{50%{transform:rotate(-1.5deg)translateY(-7px)}}.menu-play{gap:12px;width:min(420px,100%);margin:0 auto;display:grid}.mode-cards{grid-template-columns:repeat(3,1fr);gap:12px;padding-top:6px;display:grid}.mode-cards button{--tile:var(--red);--tile-light:var(--red-light);aspect-ratio:1/.9;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);color:var(--ink);transition:transform .3s var(--spring), box-shadow .2s, background .2s;background:linear-gradient(#fff 60%,#e9eefb);border-radius:24px;align-content:center;justify-items:center;gap:6px;display:grid;position:relative}.mode-cards .tile-practice{--tile:var(--orange);--tile-light:var(--orange-light)}.mode-cards .tile-rhythm{--tile:var(--purple);--tile-light:var(--purple-light)}.mode-icon{aspect-ratio:1;border:3px solid var(--ink);background:linear-gradient(180deg, var(--tile-light), var(--tile));width:clamp(48px,15vw,64px);box-shadow:inset 0 3px 0 #ffffff73, 0 3px 0 var(--ink);border-radius:50%;place-items:center;font-size:clamp(24px,7.5vw,32px);line-height:1;display:grid}.mode-cards b{letter-spacing:.5px;font-size:clamp(16px,4.6vw,20px);font-weight:700}.mode-cards button.active{background:linear-gradient(180deg, var(--tile-light), var(--tile) 70%);box-shadow:0 10px 0 var(--ink);transform:translateY(-6px)scale(1.05)}.mode-cards button.active b{color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}.mode-cards button.active .mode-icon{background:#fff;animation:1.4s ease-in-out infinite icon-wiggle}.mode-cards button:after{content:"";border:4px solid var(--cyan);opacity:0;pointer-events:none;border-radius:32px;position:absolute;inset:-10px -10px -14px;box-shadow:0 0 0 3px #fff,inset 0 0 0 3px #fff,0 0 18px 3px #3fd8ffbf}.mode-cards button.active:after{opacity:1;animation:1s ease-in-out infinite select-pulse}@keyframes select-pulse{50%{border-color:#9ff0ff;transform:scale(1.04)}}@keyframes icon-wiggle{0%,to{transform:rotate(-8deg)scale(1.05)}50%{transform:rotate(8deg)scale(1.12)}}.mode-hint{background:var(--ink);color:#fff;letter-spacing:.3px;text-align:center;border-radius:999px;justify-self:center;max-width:100%;min-height:1.3em;margin:10px 0 0;padding:5px 16px 6px;font-size:14px;font-weight:600}.mode-hint:empty{visibility:hidden}.menu-options{gap:12px;display:grid}.segmented{border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:#fff;border-radius:999px;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.segmented button{--seg:var(--blue);--seg-light:var(--blue-light);min-height:40px;color:var(--ink-2);letter-spacing:.5px;border-radius:999px;font-size:15px;font-weight:600;transition:background .2s,color .2s}#difficulty button[data-value="0"]{--seg:var(--green);--seg-light:var(--green-light)}#difficulty button[data-value="1"]{--seg:var(--orange);--seg-light:var(--orange-light)}#difficulty button[data-value="2"]{--seg:var(--red);--seg-light:var(--red-light)}.segmented button.active{background:linear-gradient(180deg, var(--seg-light), var(--seg));box-shadow:inset 0 0 0 2.5px var(--ink), inset 0 5px 0 #ffffff4d;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;animation:pop .3s var(--spring);font-weight:700}@keyframes pop{0%{transform:scale(.85)}}.screen.page{background:linear-gradient(180deg, var(--sky) 0%, #9fdfff 55%, var(--sky-light) 100%);flex-direction:column;display:flex}.topbar{width:min(520px,100%);padding:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) 10px calc(var(--safe-l) + 16px);grid-template-columns:48px 1fr 48px;align-items:center;gap:8px;margin:0 auto;display:grid}.topbar h2{color:#fff;letter-spacing:.5px;text-align:center;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 4px 0 var(--ink));font-size:34px}.page-body{width:min(520px,100%);padding:10px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 26px) calc(var(--safe-l) + 16px);flex:1;align-content:start;gap:18px;margin:0 auto;display:grid}.list{border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);background:#fff;border-radius:24px;overflow:hidden}.row{border-top:2px solid var(--line);min-height:58px;color:var(--ink);justify-content:space-between;align-items:center;gap:14px;padding:10px 16px;font-size:17px;font-weight:600;display:flex}.row:first-child{border-top:0}.row.column{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px 16px}.row-head{justify-content:space-between;align-items:center;display:flex}.row-head output{border:2.5px solid var(--ink);background:var(--yellow);color:var(--ink);border-radius:999px;padding:1px 12px 2px;font-size:15px;font-weight:700}select{appearance:none;border:2.5px solid var(--ink);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%231d2340' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;min-height:40px;box-shadow:0 3px 0 var(--ink);color:var(--ink);font:600 15px var(--body);border-radius:999px;padding:6px 36px 7px 16px}input[type=range]{appearance:none;background:0 0;width:100%;height:34px;margin:0}input[type=range]::-webkit-slider-runnable-track{border:3px solid var(--ink);background:linear-gradient(90deg, var(--green-light), var(--yellow), var(--red-light));border-radius:999px;height:16px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--ink);width:30px;height:30px;box-shadow:0 3px 0 var(--ink);background:#fff;border-radius:50%;margin-top:-10px}input[type=range]::-moz-range-track{border:3px solid var(--ink);background:linear-gradient(90deg, var(--green-light), var(--yellow), var(--red-light));border-radius:999px;height:10px}input[type=range]::-moz-range-thumb{border:3px solid var(--ink);width:24px;height:24px;box-shadow:0 3px 0 var(--ink);background:#fff;border-radius:50%}input.switch{appearance:none;border:3px solid var(--ink);cursor:pointer;background:#d7deef;border-radius:999px;flex:none;width:58px;height:34px;margin:0;transition:background .2s;position:relative}input.switch:after{content:"";border:3px solid var(--ink);box-sizing:border-box;width:26px;height:26px;transition:transform .3s var(--spring);background:#fff;border-radius:50%;position:absolute;top:1px;left:1px}input.switch:checked{background:var(--green)}input.switch:checked:after{transform:translate(24px)}.tip-card{border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);background:#fff;border-radius:22px;align-items:center;gap:14px;padding:14px 16px;display:flex}.tip-card>span{--badge:var(--yellow);border:3px solid var(--ink);background:var(--badge);border-radius:50%;flex:none;place-items:center;width:54px;height:54px;font-size:27px;line-height:1;display:grid;box-shadow:inset 0 3px #ffffff73}.tip-card:nth-child(6n+2)>span{--badge:var(--red-light)}.tip-card:nth-child(6n+3)>span{--badge:var(--green-light)}.tip-card:nth-child(6n+4)>span{--badge:var(--blue-light)}.tip-card:nth-child(6n+5)>span{--badge:var(--orange-light)}.tip-card:nth-child(6n+6)>span{--badge:var(--purple-light)}.tip-card b{color:var(--ink);letter-spacing:.5px;font-size:19px;font-weight:700}.tip-card p{color:var(--ink-2);margin:2px 0 0;font-size:15px;font-weight:500;line-height:1.4}.stance-options{gap:16px;margin:6px 0 18px;display:grid}.stance-options button{border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:22px;padding:14px 16px 16px;transition:transform 80ms,box-shadow 80ms}.stance-options button[data-value=orthodox]{background:linear-gradient(180deg, #fff 30%, var(--red-tint))}.stance-options button[data-value=southpaw]{background:linear-gradient(180deg, #fff 30%, var(--blue-tint))}.stance-options button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(5px)}.stance-options b{color:var(--ink);letter-spacing:.5px;font-size:27px;font-weight:700;display:block}.stance-options small{color:var(--ink-2);margin-top:2px;font-size:14px;font-weight:600;display:block}.spinner{border:8px solid var(--line);border-top-color:var(--red);border-right-color:var(--yellow);border-bottom-color:var(--blue);width:58px;height:58px;box-shadow:0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink);border-radius:50%;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#loading-text{color:var(--ink);margin:8px 0 0;font-size:17px;font-weight:600}#start-error .sheet h2{background:linear-gradient(180deg, var(--red-light), var(--red))}.error-icon{font-size:56px;line-height:1}.error-text{color:var(--ink);margin:12px 0 0;font-size:17px;font-weight:600;line-height:1.4}.camera-screen{background:#000;overflow:hidden}#calib-canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.calib-top,.calib-bottom{text-align:center;padding-left:calc(var(--safe-l) + 20px);padding-right:calc(var(--safe-r) + 20px);position:absolute;left:0;right:0}.calib-top{padding-top:calc(var(--safe-t) + 18px);background:linear-gradient(#1d234099,#1d234000);padding-bottom:40px;top:0}.calib-top h2{color:#fff;letter-spacing:1px;-webkit-text-stroke:clamp(11px, 3vw, 16px) var(--ink);paint-order:stroke fill;filter:drop-shadow(0 5px 0 var(--red)) drop-shadow(0 4px 0 var(--ink));font-size:clamp(50px,15vw,86px);line-height:1;animation:2.4s ease-in-out infinite logo-bob}.calib-top p{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--ink);background:#fff;border-radius:999px;margin:12px 0 0;padding:5px 16px 6px;font-size:clamp(15px,4.4vw,20px);font-weight:600;display:inline-block}.calib-ring{width:min(44vw,30vh);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.calib-ring circle{fill:none}.calib-ring .edge{stroke:var(--ink);stroke-width:12px}.calib-ring .track{stroke:#fff;stroke-width:6px}#calib-ring{stroke:var(--yellow);stroke-width:6px;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5px;transition:stroke-dashoffset .1s}.calib-bottom{padding-top:40px;padding-bottom:calc(var(--safe-b) + 22px);background:linear-gradient(#1d234000,#1d234099);justify-items:center;gap:18px;display:grid;bottom:0}.status{border:3px solid var(--ink);background:var(--yellow);min-height:1.3em;box-shadow:0 5px 0 var(--ink);color:var(--ink);border-radius:999px;margin:0;padding:4px 20px 6px;font-size:clamp(20px,6vw,30px);font-weight:700}.status:empty{visibility:hidden}.sheet.results{margin-top:64px;padding-top:4px}.result-title{z-index:0;color:var(--yellow);letter-spacing:1px;-webkit-text-stroke:13px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 6px 0 var(--ink));animation:title-in .6s var(--spring);margin:-58px auto 0;font-size:clamp(50px,15vw,76px);line-height:1.05;position:relative}.result-title:before{content:"";z-index:-1;background:repeating-conic-gradient(from var(--ray-angle), #ffffffbf 0deg 9deg, #fff0 9deg 18deg);clip-path:inset(0 0 50%);pointer-events:none;width:400px;height:400px;margin:-200px 0 0 -200px;animation:3s linear infinite rays;position:absolute;top:50%;left:50%;-webkit-mask-image:radial-gradient(circle,#000 20%,#0000 66%);mask-image:radial-gradient(circle,#000 20%,#0000 66%)}@property --ray-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes rays{to{--ray-angle:18deg}}@keyframes title-in{0%{transform:scale(.3)rotate(-8deg)}}.result-sub{background:var(--panel);width:fit-content;max-width:100%;color:var(--ink);border-radius:16px;margin:12px auto 0;padding:7px 16px 8px;font-size:17px;font-weight:600;line-height:1.3}.result-sub:empty{display:none}.stats{text-align:left;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;display:grid}.stats div{border:2.5px solid var(--line);background:var(--panel);box-shadow:inset 0 -4px 0 var(--line);color:var(--ink-2);letter-spacing:.3px;text-transform:uppercase;border-radius:18px;padding:9px 12px 10px;font-size:12px;font-weight:600;line-height:1.25}.stats b{color:var(--ink);letter-spacing:0;text-transform:none;word-break:break-word;margin-bottom:1px;font-size:22px;font-weight:700;display:block}.stats div:first-child{border-color:var(--yellow);background:#fff7d6;box-shadow:inset 0 -4px #ffe9a3}#hurt,#flash,#warning{pointer-events:none;z-index:5;position:fixed;inset:0}#hurt,#flash{opacity:0}#hurt{background:radial-gradient(#ff002800 35%,#e60028b3)}#flash{background:#fff}#warning{transition:box-shadow .1s;box-shadow:inset 0 0 160px #ff282800}#pause-btn{top:calc(var(--safe-t) + 10px);right:calc(var(--safe-r) + 10px);z-index:14;position:fixed}#rec{top:calc(var(--safe-t) + 68px);right:calc(var(--safe-r) + 10px);z-index:14;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--red);letter-spacing:1px;pointer-events:none;background:#fff;border-radius:999px;align-items:center;gap:6px;padding:3px 10px 4px;font-size:12px;font-weight:700;display:flex;position:fixed}#rec:before{content:"";background:var(--red);border-radius:50%;width:9px;height:9px;animation:1s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.2}}#hud{pointer-events:none;z-index:10;position:fixed;inset:0}.hud-top{padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 64px) 0 calc(var(--safe-l) + 10px);grid-template-columns:1fr auto 1fr;align-items:start;gap:6px;display:grid}.fighter{min-width:0}.fighter .name{border:2.5px solid var(--ink);max-width:100%;box-shadow:0 3px 0 var(--ink);color:var(--ink);letter-spacing:-.1px;white-space:nowrap;text-overflow:ellipsis;vertical-align:top;background:#fff;border-radius:999px;padding:1px 6px 2px;font-size:11px;font-weight:700;font-stretch:75%;display:inline-block;overflow:hidden}.fighter .kd{color:var(--red);letter-spacing:1px;font-size:11px}.fighter.right{text-align:right}.bar{height:18px;box-shadow:0 0 0 2.5px var(--ink), 0 4px 0 2.5px var(--ink);background:#3b4370;border:3px solid #fff;border-radius:999px;margin:7px 2px 0;position:relative;overflow:hidden}.bar .fill,.bar .ghost{border-radius:999px;width:100%;transition:width .12s;position:absolute;top:0;bottom:0;left:0}.bar .fill{background:linear-gradient(180deg, #a5f7c6 0%, var(--green) 55%, #1cb365 100%);box-shadow:inset 0 -3px #005a2840}.fighter.right .fill{background:linear-gradient(180deg, #ffa3ad 0%, var(--red) 55%, #e0233a 100%);box-shadow:inset 0 -3px #78001440}.bar .ghost{background:#fff;transition:width .6s .25s}.fighter.right .bar .fill,.fighter.right .bar .ghost{left:auto;right:0}.clock{border:3px solid var(--ink);min-width:62px;box-shadow:0 4px 0 var(--ink);text-align:center;background:#fff;border-radius:18px;padding:3px 8px 5px}.clock .round{color:var(--red);letter-spacing:1px;white-space:nowrap;font-size:10px;font-weight:700}.clock .time{color:var(--ink);font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;line-height:1}#combo{left:calc(var(--safe-l) + 14px);top:calc(var(--safe-t) + 84px);color:var(--yellow);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 4px 0 var(--ink));opacity:0;transform-origin:0;transition:opacity .2s, transform .35s var(--spring);font-size:46px;font-weight:700;line-height:1;position:absolute;transform:scale(.6)rotate(-6deg)}#combo.show{opacity:1;transform:scale(1)rotate(-6deg)}#combo small{color:#fff;letter-spacing:1px;-webkit-text-stroke:5px var(--ink);font-size:14px;display:block}#guard-indicator{left:50%;bottom:calc(var(--safe-b) + var(--pad-h) + 16px);border:3px solid var(--ink);background:linear-gradient(180deg, var(--blue-light), var(--blue));box-shadow:0 4px 0 var(--ink);color:#fff;letter-spacing:1.5px;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;opacity:0;transition:opacity .12s, transform .25s var(--spring);border-radius:999px;padding:4px 18px 6px;font-size:17px;font-weight:700;position:absolute;transform:translate(-50%)scale(.7)}#guard-indicator.on{opacity:1;transform:translate(-50%)scale(1)}#hud-help{left:calc(var(--safe-l) + 14px);bottom:calc(var(--safe-b) + 14px);border:2.5px solid var(--ink);max-width:min(560px,100% - 260px);box-shadow:0 4px 0 var(--ink);color:var(--ink-2);background:#ffffffe6;border-radius:16px;padding:8px 12px;font-size:12.5px;font-weight:500;line-height:1.75;position:absolute}#hud-help:empty{display:none}#hud.practice #hud-help{max-width:calc(50% - 290px)}#hud.practice .hud-top,#hud.practice #combo{display:none}#hud-help kbd{border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);color:var(--ink);font:700 11px var(--body);background:#fff;border-radius:6px;padding:0 5px 1px}.chips{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.chips .arrow{color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;font-size:20px;font-weight:700}.chip{border:3px solid var(--ink);min-width:70px;box-shadow:0 4px 0 var(--ink);color:var(--ink);text-align:center;transition:transform .3s var(--spring);background:#fff;border-radius:18px;padding:6px 10px 8px}.chip b{letter-spacing:.3px;white-space:nowrap;font-size:16px;font-weight:700;display:block}.chip small{color:var(--ink-2);letter-spacing:1px;text-transform:uppercase;margin-top:1px;font-size:10.5px;font-weight:700;display:block}.chip.active{box-shadow:0 4px 0 var(--ink), 0 0 0 5px var(--yellow), 0 0 22px 6px #ffd23ab3;animation:.6s ease-in-out infinite alternate chip-pulse}@keyframes chip-pulse{to{transform:scale(1.08)translateY(-2px)}}.chip.ok,.chip.bad{color:#fff}.chip.ok{background:linear-gradient(180deg, var(--green-light), var(--green))}.chip.bad{background:linear-gradient(180deg, var(--red-light), var(--red));animation:.35s shake}.chip.ok b,.chip.bad b{-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}.chip.ok small,.chip.bad small{color:#fff!important}@keyframes shake{20%,60%{transform:translate(-5px)rotate(-3deg)}40%,80%{transform:translate(5px)rotate(3deg)}}#practice{top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 12px);right:calc(var(--safe-r) + 66px);z-index:10;pointer-events:none;justify-items:center;gap:12px;display:grid;position:fixed}.practice-head{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px;display:flex}.practice-head span{border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--ink);letter-spacing:.8px;background:#fff;border-radius:999px;padding:2px 11px 3px;font-size:12.5px;font-weight:700}#practice-stars{background:var(--yellow)}#practice-chips .chip{min-width:0;padding:5px 10px 7px}#practice-chips .chip b{font-size:15px;font-stretch:87.5%}#practice-status{color:#fff;letter-spacing:.5px;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;min-height:1.3em;filter:drop-shadow(0 3px 0 var(--ink));font-size:24px;font-weight:700}#practice-result{left:50%;bottom:calc(var(--safe-b) + var(--pad-h) + 22px);z-index:12;border:3px solid var(--ink);width:min(380px,100% - 24px);box-shadow:0 7px 0 var(--ink);color:var(--ink);text-align:center;pointer-events:none;animation:result-in .4s var(--spring);background:#fff;border-radius:26px;padding:12px 20px 16px;position:fixed;transform:translate(-50%)}@keyframes result-in{0%{opacity:0;transform:translate(-50%,30px)scale(.85)}}#practice-result .grade{color:#fff;letter-spacing:1px;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 4px 0 var(--ink));font-size:50px;font-weight:700;line-height:1.05}#practice-result .grade.perfect{color:var(--yellow)}#practice-result .grade.great{color:var(--green)}#practice-result .grade.good{color:var(--blue-light)}#practice-result .grade.miss{color:var(--red)}#practice-result .stars{min-height:1.2em;color:var(--yellow);letter-spacing:6px;text-indent:6px;text-shadow:-2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink), 0 2px var(--ink), 0 4px var(--ink);font-size:30px;line-height:1.2}#practice-result .detail{font-size:16px;font-weight:700}#practice-result .hint{color:#e0263b;margin-top:6px;font-size:14px;font-weight:600}#practice-result .note{background:var(--yellow);width:fit-content;color:var(--ink);border-radius:999px;margin:8px auto 0;padding:2px 12px 3px;font-weight:700}#practice-result .next{color:var(--ink-2);margin-top:8px;font-size:13px;font-weight:500}#practice-result .hint:empty,#practice-result .note:empty{display:none}#rhythm{z-index:10;pointer-events:none;position:fixed;inset:0}.rhythm-top{padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 66px) 0 calc(var(--safe-l) + 12px);grid-template-columns:auto 1fr auto;align-items:center;gap:10px;display:grid}.rhythm-stat{border:3px solid var(--ink);min-width:62px;box-shadow:0 4px 0 var(--ink);text-align:center;background:#fff;border-radius:18px;padding:3px 8px 5px;transition:background .2s}.rhythm-stat b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;line-height:1.05;display:block}.rhythm-stat small{color:var(--ink-2);letter-spacing:1px;font-size:9px;font-weight:700;display:block}#rhythm-mult[data-level="2"]{color:var(--blue)}#rhythm-mult[data-level="3"]{color:#17b866}#rhythm-mult[data-level="4"]{color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}.rhythm-stat:has(#rhythm-mult[data-level="4"]){background:linear-gradient(180deg, var(--yellow-light), var(--yellow));animation:.5s ease-in-out infinite alternate chip-pulse}.rhythm-mid{text-align:center;min-width:0}#rhythm-cue{color:#fff;letter-spacing:.5px;white-space:nowrap;text-overflow:ellipsis;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;font-size:21px;font-weight:700;overflow:hidden}.rhythm-progress{border:3px solid var(--ink);background:#fff;border-radius:999px;height:14px;margin:4px 0 0;overflow:hidden}#rhythm-progress{background:linear-gradient(180deg, var(--yellow-light), var(--yellow-deep));border-radius:999px;width:0;height:100%}.rhythm-legend{letter-spacing:.8px;grid-column:1/-1;justify-content:center;align-items:center;gap:6px;min-width:0;margin-top:2px;font-size:10px;font-weight:700;display:flex}.rhythm-legend span{border:2px solid var(--ink);color:var(--ink);background:#fff;border-radius:999px;padding:1px 7px 2px}#rhythm-stance{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.rhythm-legend .left,.rhythm-legend .right{color:#fff;flex:none}.rhythm-legend .left{background:var(--left)}.rhythm-legend .right{background:var(--right)}.rhythm-bottom{left:0;right:0;bottom:calc(var(--safe-b) + var(--pad-h) + 14px);padding:0 calc(var(--safe-r) + 10px) 0 calc(var(--safe-l) + 10px);justify-items:center;gap:12px;display:grid;position:absolute}#rhythm-hint{border:2.5px solid var(--ink);max-width:100%;box-shadow:0 4px 0 var(--ink);color:var(--ink);text-align:center;animation:pop .3s var(--spring);background:#fff;border-radius:16px;padding:6px 14px 7px;font-size:14px;font-weight:600;line-height:1.35}#rhythm-hint:empty{display:none}#rhythm-next{flex-wrap:nowrap;gap:8px}#rhythm-next .chip{width:78px;min-width:0;box-shadow:0 0 0 2.5px var(--ink), 0 5px 0 2.5px var(--ink);border-width:4px;padding:4px 4px 6px}#rhythm-next .chip b{font-size:30px;line-height:1.05}#rhythm-next .chip .label{letter-spacing:.3px;white-space:nowrap;font-size:12px;font-weight:700;display:block}#rhythm-next .chip small{font-size:9.5px}#rhythm-next .chip.active{box-shadow:0 0 0 2.5px var(--ink), 0 5px 0 2.5px var(--ink), 0 0 0 8px var(--yellow), 0 0 24px 8px #ffd23ab3}#rhythm-next .chip:not(.active):not(.ok):not(.half):not(.miss):not(.bad){opacity:.85}#rhythm-next .chip.half{background:linear-gradient(180deg, var(--orange-light), var(--orange));color:#fff}#rhythm-next .chip.miss{color:var(--ink-2);opacity:.6;background:#c9d1e6}#rhythm-next .chip.half b,#rhythm-next .chip.half .label{-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}#rhythm-next .chip.miss b,#rhythm-next .chip.miss .label{text-decoration:line-through;text-decoration-thickness:3px}#rhythm-next .chip.half small,#rhythm-next .chip.miss small{color:var(--ink)!important}#banner{z-index:15;color:#fff;font-family:var(--display);letter-spacing:1px;-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;text-shadow:0 .09em 0 var(--red), 0 .15em 0 var(--ink);white-space:nowrap;pointer-events:none;opacity:0;font-size:clamp(56px,17vw,150px);font-weight:700;position:fixed;top:38%;left:50%;transform:translate(-50%,-50%)}#banner:before{content:"";z-index:-1;background:repeating-conic-gradient(#ffd23ad9 0deg 10deg,#ffd23a00 10deg 20deg);border-radius:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;animation:5s linear infinite spin;position:absolute;top:50%;left:50%;-webkit-mask-image:radial-gradient(circle,#000 15%,#0000 66%);mask-image:radial-gradient(circle,#000 15%,#0000 66%)}#banner.show{animation:1.4s ease-out forwards banner}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)rotate(-12deg)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.18)rotate(3deg)}20%{transform:translate(-50%,-50%)scale(.94)rotate(-1deg)}28%{transform:translate(-50%,-50%)scale(1.03)rotate(0)}34%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.15)}}#floaters{z-index:12;pointer-events:none;position:fixed;inset:0}.floater{color:#fff;font-family:var(--display);letter-spacing:.5px;white-space:nowrap;-webkit-text-stroke:.2em var(--ink);paint-order:stroke fill;text-shadow:0 .13em 0 var(--ink);font-size:clamp(28px,8.5vw,44px);font-weight:700;animation:.95s forwards floatup;position:absolute;transform:translate(-50%,-50%)}.floater.big{color:var(--yellow);font-size:clamp(34px,11vw,58px)}.floater.counter{color:var(--red)}.floater.dim{font-size:clamp(20px,6vw,28px)}.floater.good{color:var(--green)}@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%)scale(.3)}14%{opacity:1;transform:translate(-50%,-50%)scale(1.25)}24%{transform:translate(-50%,-50%)scale(.92)}32%{transform:translate(-50%,-52%)scale(1)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-170%)scale(.95)}}#notice{z-index:16;border:3px solid var(--ink);width:max-content;max-width:calc(100% - 32px);box-shadow:0 6px 0 var(--ink), 0 0 0 7px var(--yellow);color:var(--ink);text-align:center;pointer-events:none;animation:notice-in .4s var(--spring);background:#fff;border-radius:24px;padding:14px 22px 16px;font-size:clamp(20px,6vw,30px);font-weight:700;line-height:1.15;position:fixed;top:40%;left:50%;transform:translate(-50%,-50%)}@keyframes notice-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.7)}}#pip{right:calc(var(--safe-r) + 10px);bottom:calc(var(--safe-b) + var(--pad-h) + 12px);z-index:11;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);pointer-events:none;background:#fff;border-radius:16px;padding:5px;position:fixed}#pip-canvas{border-radius:10px;width:96px;display:block}.pip-meters{color:var(--ink);grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;margin-top:4px;font-size:9px;font-weight:700;display:grid}.meter{border:1.5px solid var(--ink);background:var(--line);border-radius:999px;height:8px;overflow:hidden}.meter div{background:var(--blue);width:0;height:100%}.meter div.hit{background:var(--yellow)}#touchpad{z-index:13;padding:8px calc(var(--safe-r) + 10px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 10px);grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;display:grid;position:fixed;bottom:0;left:0;right:0}body.touch-play{--pad-h:182px}.pad-hand,.pad-defence{gap:9px;display:grid}.pad-defence{width:128px}.pad-row{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}#touchpad button{border:3px solid var(--ink);min-height:44px;box-shadow:0 5px 0 var(--ink);color:var(--ink);font-family:var(--display);letter-spacing:.5px;touch-action:none;background:linear-gradient(#fff 55%,#e6ecfa);border-radius:999px;font-size:15px;font-weight:700;transition:transform 50ms,box-shadow 50ms}#touchpad .pad-hand:first-child button{background:linear-gradient(180deg, #fff 30%, var(--red-tint))}#touchpad .pad-hand:last-child button{background:linear-gradient(180deg, #fff 30%, var(--blue-tint))}#touchpad button.main{color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;min-height:66px;font-size:23px}#touchpad .pad-hand:first-child button.main{background:linear-gradient(180deg, var(--red-light), var(--red) 70%)}#touchpad .pad-hand:last-child button.main{background:linear-gradient(180deg, var(--blue-light), var(--blue) 70%)}#touchpad button.guard{min-height:66px;font-size:19px}#touchpad .pad-row button{aspect-ratio:1;min-height:0;padding:0;font-size:14px}#touchpad button.down{box-shadow:0 1px 0 var(--ink);filter:brightness(1.12);transform:translateY(4px)}#touchpad.punch-only{grid-template-columns:1fr 1fr}#touchpad.punch-only .pad-defence{display:none}#test{left:50%;top:calc(var(--safe-t) + 74px);z-index:21;border:3px solid var(--ink);width:min(520px,100% - 24px);box-shadow:0 6px 0 var(--ink);color:var(--ink);text-align:center;background:#fff;border-radius:24px;padding:24px 18px 18px;position:fixed;transform:translate(-50%)}.test-step{border:2.5px solid var(--ink);background:var(--yellow);color:var(--ink);letter-spacing:1px;white-space:nowrap;border-radius:999px;padding:2px 14px 3px;font-size:12px;font-weight:700;position:absolute;top:0;left:50%;transform:translate(-50%,-55%)}.test-label{margin:0 0 12px;font-size:clamp(22px,7vw,34px);font-weight:700;line-height:1.15}.test-bar{border:2.5px solid var(--ink);background:var(--line);border-radius:999px;height:14px;overflow:hidden}#test-progress{background:var(--yellow);width:0;height:100%}.test-detected{color:#13a85a;min-height:1.5em;margin-top:10px;font-weight:700}#test-stop{margin-top:8px}#debug{left:calc(var(--safe-l) + 8px);top:calc(var(--safe-t) + 116px);z-index:11;color:#e8ecf8;white-space:pre;pointer-events:none;background:#1d2340d1;border:2px solid #fff;border-radius:12px;max-width:calc(100% - 16px);margin:0;padding:8px 10px;font:10px/1.45 ui-monospace,Menlo,monospace;position:fixed;overflow:hidden}@media (height<=560px){.menu-hero{min-height:0}.logo-top{-webkit-text-stroke-width:clamp(8px, 2.6vh, 14px);font-size:clamp(40px,13vh,80px)}.logo-bottom{-webkit-text-stroke-width:clamp(6px, 1.8vh, 9px);margin-top:6px;font-size:clamp(22px,7vh,40px)}.mode-cards button{aspect-ratio:auto;padding:10px 0}.play-btn{height:64px}.play-btn span{-webkit-text-stroke-width:8px;font-size:36px}}@media (orientation:landscape) and (height<=560px){.menu{padding-top:calc(var(--safe-t) + 8px);padding-bottom:calc(var(--safe-b) + 8px);grid-template-rows:auto 1fr;grid-template-columns:1fr minmax(300px,400px);column-gap:28px;display:grid}.menu-corners{grid-area:1/1}.menu-hero{grid-area:2/1}.menu-play{grid-area:1/2/span 2;align-self:center;gap:9px}.mode-cards{gap:14px;padding-top:10px}.mode-cards button{border-radius:20px;gap:2px;padding:6px 0 7px}.mode-cards button:after{border-radius:28px}.mode-icon{width:38px;font-size:21px}.mode-hint{margin-top:8px;padding:3px 14px 4px;font-size:13px}.menu-options{gap:9px}.segmented button{min-height:30px;font-size:14px}.play-btn{height:56px;margin-top:2px}.play-btn span{-webkit-text-stroke-width:7px;font-size:30px}.menu .link-btn{min-height:32px;font-size:14px}body.touch-play{--pad-h:0px}#touchpad,#touchpad.punch-only{grid-template-columns:116px 1fr 116px}#touchpad.punch-only .pad-hand:last-child{grid-column:3}.pad-defence{justify-self:center}#touchpad button{min-height:38px}#touchpad button.main,#touchpad button.guard{min-height:52px}#touchpad .pad-row button{min-height:0}.rhythm-bottom{left:140px;right:140px}#practice-result{width:auto;animation:none;left:140px;right:140px;transform:none}.calib-ring{width:24vh}.sheet.results{margin-top:54px}}@media (width>=720px) and (height>=600px){.hud-top{padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 84px) 0 calc(var(--safe-l) + 22px);gap:18px}.fighter .name{padding:2px 14px 3px;font-size:17px}.bar{height:24px}.clock{border-radius:22px;padding:4px 18px 6px}.clock .round{font-size:12px}.clock .time{font-size:36px}#combo{top:calc(var(--safe-t) + 108px);font-size:54px}#pause-btn{top:calc(var(--safe-t) + 16px);right:calc(var(--safe-r) + 16px);width:56px;height:56px}#rec{top:calc(var(--safe-t) + 84px);right:calc(var(--safe-r) + 18px)}.rhythm-top{padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 92px) 0 calc(var(--safe-l) + 24px);gap:24px}.rhythm-stat{border-radius:22px;min-width:110px;padding:4px 14px 7px}.rhythm-stat b{font-size:40px}.rhythm-stat small{font-size:11px}#rhythm-cue{-webkit-text-stroke-width:8px;font-size:32px}.rhythm-progress{width:min(460px,100%);height:18px;margin:6px auto 0}.rhythm-legend{margin-top:6px;font-size:12px}#rhythm-hint{font-size:17px}#rhythm-next{gap:14px}#rhythm-next .chip{width:120px;padding:8px 8px 10px}#rhythm-next .chip b{font-size:44px}#rhythm-next .chip .label{font-size:16px}#rhythm-next .chip small{font-size:11px}.chip{min-width:96px;padding:8px 16px 10px}.chip b,#practice-chips .chip b{font-size:21px;font-stretch:100%}#practice-chips .chip{min-width:96px;padding:8px 16px 10px}.practice-head span{padding:3px 14px 4px;font-size:15px}#practice-status{font-size:32px}#practice-result .grade{font-size:62px}#pip-canvas{width:200px}.pip-meters{font-size:10px}#debug{top:calc(var(--safe-t) + 160px);font-size:12px}.mode-cards{gap:16px}}@media (prefers-reduced-motion:reduce){.logo,.play-btn,.play-btn:after,.calib-top h2,.mode-cards button.active:after,.mode-cards button.active .mode-icon,.screen.overlay:before,.screen.page:before,.result-title:before,#banner:before,.chip.active{animation:none}.rhythm-stat:has(#rhythm-mult[data-level="4"]){animation:none}}