:root{--bg:#07080f;--surface:#0e101ceb;--surface-2:#ffffff0e;--surface-3:#ffffff1a;--line:#ffffff1a;--line-strong:#ffffff38;--ink:#f4f1ea;--muted:#a3a9b8;--faint:#6f7586;--red:#ff3b4e;--red-deep:#c4142a;--gold:#f2d77e;--green:#5be59a;--amber:#f2b84b;--blue:#4c9bff;--violet:#9b6bff;--left:#ff4d6d;--right:#4c9bff;--display:"Anton", Impact, "Arial Narrow", sans-serif;--body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--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(--bg);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;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:2px solid var(--gold);outline-offset:2px}h1,h2,h3{margin:0;font-weight:400}.chunky{--face:linear-gradient(180deg, #3a4160, #262b42);--edge:#141726;background:var(--face);width:100%;min-height:56px;box-shadow:0 5px 0 var(--edge), 0 12px 24px #00000059, inset 0 1px 0 #ffffff2e;color:#fff;font-family:var(--display);letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 2px #00000059;border:1px solid #ffffff24;border-radius:14px;padding:0 20px 2px;font-size:22px;transition:transform 70ms,box-shadow 70ms;position:relative}.chunky:active{box-shadow:0 1px 0 var(--edge), 0 4px 10px #00000059, inset 0 1px 0 #ffffff2e;transform:translateY(4px)}.chunky.red{--face:linear-gradient(180deg, #ff5a68, #d3142c);--edge:#7d0816;border-color:#ffb4ba59}.chunky.dark{--face:linear-gradient(180deg, #24283aeb, #161926eb);--edge:#080910f2;color:#c9cfdc}.chunky.small{width:auto;min-width:140px;min-height:46px;font-size:18px}.play-btn{background:linear-gradient(#ff6170 0%,#ff3b4e 45%,#c9112a 100%);border:1.5px solid #ffc8cd80;border-radius:16px;width:100%;height:78px;margin-top:6px;transition:transform 70ms,box-shadow 70ms;animation:1.8s ease-in-out infinite play-glow;position:relative;transform:skew(-9deg);box-shadow:0 7px #7a0715,0 18px 40px #ff283c73,inset 0 2px #ffffff59}.play-btn span{color:#fff;font-family:var(--display);letter-spacing:6px;text-shadow:0 3px #8c0a1a,0 0 24px #ffffff59;font-size:42px;display:block;transform:skew(9deg)}.play-btn:active{transform:skew(-9deg)translateY(5px);box-shadow:0 2px #7a0715,0 8px 20px #ff283c66,inset 0 2px #ffffff59}@keyframes play-glow{50%{box-shadow:0 7px #7a0715,0 18px 60px #ff3c50bf,inset 0 2px #ffffff59}}.link-btn{min-height:44px;color:var(--muted);padding:0 12px;font-size:14px;font-weight:600}.link-btn:active{color:var(--ink)}.icon-btn{border:1.5px solid var(--line-strong);-webkit-backdrop-filter:blur(6px);background:#0a0c1699;border-radius:50%;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 4px 14px #00000059}.icon-btn:active{transform:scale(.94)}.icon-btn svg{fill:currentColor;stroke:currentColor;width:23px;height:23px}.icon-btn-spacer{width:46px}.stack{gap:14px;margin-top:22px;display:grid}.screen{z-index:20;-webkit-overflow-scrolling:touch;background:radial-gradient(at 50% 30%,#07080f66,#07080fe6);position:fixed;inset:0;overflow-y:auto}.screen:not(.page):not(.camera-screen):not(.menu){padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);place-items:center;display:grid}.sheet{-webkit-backdrop-filter:blur(16px);text-align:center;background:linear-gradient(#1a1d30f0,#0c0e18f0);border:1.5px solid #ffffff1f;border-radius:26px;width:min(400px,100%);padding:28px 22px 22px;animation:.24s cubic-bezier(.2,1.4,.4,1) sheet-in;box-shadow:0 30px 80px #0009,inset 0 1px #ffffff14}.sheet.center{justify-items:center;gap:10px;display:grid}@keyframes sheet-in{0%{opacity:0;transform:scale(.9)}}.sheet h2{font-family:var(--display);letter-spacing:2px;text-shadow:0 3px #0006;font-size:42px;line-height:1}.sheet-note{color:var(--muted);margin:12px 0 0;font-size:13px;line-height:1.45}.tools{flex-wrap:wrap;justify-content:center;margin-top:10px;display:flex}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);background:radial-gradient(80% 45% at 50% 22%,#ff3b4e38,#ff3b4e00 70%),linear-gradient(#07080f40 0%,#07080f73 45%,#07080feb 100%);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{font-family:var(--display);justify-items:center;line-height:.92;display:grid;transform:rotate(-4deg)}.logo-top{letter-spacing:1px;background:linear-gradient(#fff 30%,#ffd7a8 100%);color:#0000;filter:drop-shadow(0 4px #b30f24)drop-shadow(0 8px #5c0712)drop-shadow(0 14px 30px #0009);-webkit-background-clip:text;background-clip:text;font-size:clamp(58px,19vw,118px)}.logo-bottom{color:#fff;letter-spacing:clamp(8px,3vw,16px);text-indent:clamp(8px,3vw,16px);text-shadow:0 3px #0000004d;background:linear-gradient(#ff5a68,#c9112a);border-radius:8px;margin-top:10px;padding:2px 22px 4px;font-size:clamp(30px,10vw,58px);transform:skew(-12deg);box-shadow:0 5px #6b0613,0 12px 30px #ff283c73}.menu-play{gap:12px;width:min(420px,100%);margin:0 auto;display:grid}.mode-cards{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.mode-cards button{--tile:var(--red);aspect-ratio:1/1.02;background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tile) 22%, transparent), transparent 70%), linear-gradient(180deg, #1e2236, #0f111c);color:var(--muted);border:2px solid #ffffff1a;border-radius:20px;align-content:center;justify-items:center;gap:6px;transition:transform .15s cubic-bezier(.2,1.4,.4,1),border-color .15s,box-shadow .15s,color .15s;display:grid;box-shadow:0 5px #05060b,0 12px 24px #00000073}.mode-cards .tile-practice{--tile:var(--amber)}.mode-cards .tile-rhythm{--tile:var(--violet)}.mode-icon{filter:grayscale(.7)brightness(.75)drop-shadow(0 6px 10px #00000080);font-size:clamp(34px,11vw,46px);line-height:1;transition:transform .2s,filter .2s}.mode-cards b{font-family:var(--display);letter-spacing:1px;font-size:clamp(17px,5vw,21px);font-weight:400}.mode-cards button.active{color:#fff;background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tile) 45%, transparent), transparent 75%), linear-gradient(180deg, #262b44, #12141f);border-color:var(--tile);box-shadow:0 5px 0 color-mix(in srgb, var(--tile) 45%, #000), 0 0 30px color-mix(in srgb, var(--tile) 45%, transparent);transform:translateY(-4px)scale(1.04)}.mode-cards button.active .mode-icon{filter:drop-shadow(0 6px 10px #00000080);transform:scale(1.12)rotate(-6deg)}.mode-hint{min-height:1.3em;color:var(--gold);letter-spacing:1.5px;text-align:center;text-transform:uppercase;margin:2px 0 0;font-size:13px;font-weight:800}.menu-options{gap:8px;display:grid}.segmented{border:1px solid var(--line);background:#06070e99;border-radius:14px;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.segmented button{min-height:42px;color:var(--muted);letter-spacing:1.2px;border-radius:10px;font-size:13px;font-weight:800;transition:background .15s,color .15s}.segmented button.active{color:#0b0c14;background:linear-gradient(#fff,#dfe2ea);box-shadow:0 3px #8d93a3}.screen.page{background:linear-gradient(#07080fbf,#07080ff2 40%);flex-direction:column;display:flex}.topbar{width:min(520px,100%);padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 16px) 8px calc(var(--safe-l) + 16px);grid-template-columns:46px 1fr 46px;align-items:center;gap:8px;margin:0 auto;display:grid}.topbar h2{text-align:center;font-family:var(--display);letter-spacing:1.5px;font-size:30px}.page-body{width:min(520px,100%);padding:8px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 20px) calc(var(--safe-l) + 16px);flex:1;align-content:start;gap:14px;margin:0 auto;display:grid}.list{border:1.5px solid var(--line);background:linear-gradient(#1e2236d9,#10121ed9);border-radius:18px;overflow:hidden}.row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:14px;min-height:56px;padding:10px 16px;font-size:16px;font-weight:600;display:flex}.row:first-child{border-top:0}.row.column{flex-direction:column;align-items:stretch;gap:8px;padding:14px 16px}.row-head{justify-content:space-between;display:flex}.row-head output{color:var(--gold);font-family:var(--display);font-size:19px;font-weight:400}select{appearance:none;background:var(--surface-3) 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='%23a3a9b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 18px;min-height:38px;color:var(--ink);font:700 15px var(--body);border:0;border-radius:10px;padding:6px 34px 6px 14px}input[type=range]{width:100%;height:30px;accent-color:var(--red);margin:0}input.switch{appearance:none;cursor:pointer;background:#ffffff29;border-radius:16px;flex:none;width:52px;height:31px;margin:0;transition:background .2s;position:relative}input.switch:after{content:"";background:#fff;border-radius:50%;width:25px;height:25px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #00000059}input.switch:checked{background:var(--green)}input.switch:checked:after{transform:translate(21px)}.tip-card{border:1.5px solid var(--line);background:linear-gradient(#1e2236d9,#10121ed9);border-radius:18px;align-items:flex-start;gap:14px;padding:14px 16px;display:flex}.tip-card>span{text-align:center;flex:none;width:34px;font-size:28px;line-height:1.1}.tip-card b{color:var(--gold);font-family:var(--display);letter-spacing:1px;font-size:19px;font-weight:400}.tip-card p{color:#cdd2dd;margin:3px 0 0;font-size:14.5px;line-height:1.45}.stance-options{gap:12px;margin:20px 0 10px;display:grid}.stance-options button{background:linear-gradient(#3a4160,#262b42);border:1px solid #ffffff24;border-radius:18px;padding:16px;transition:transform 70ms,box-shadow 70ms;box-shadow:0 5px #141726,0 12px 24px #00000059}.stance-options button:active{transform:translateY(4px);box-shadow:0 1px #141726}.stance-options b{font-family:var(--display);letter-spacing:1.5px;font-size:28px;font-weight:400;display:block}.stance-options small{color:var(--muted);margin-top:2px;font-size:13.5px;font-weight:600;display:block}.spinner{border:5px solid #ffffff26;border-top-color:var(--red);border-radius:50%;width:50px;height:50px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#loading-text{color:var(--muted);margin:6px 0 0;font-size:15px;font-weight:600}.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) + 22px);background:linear-gradient(#000000bf,#0000);padding-bottom:48px;top:0}.calib-top h2{font-family:var(--display);letter-spacing:2px;text-shadow:0 4px #b30f24,0 10px 30px #000000b3;font-size:clamp(48px,15vw,84px);line-height:1}.calib-top p{color:#e6e9f0;margin:8px 0 0;font-size:clamp(16px,4.8vw,22px);font-weight:800}.calib-ring{filter:drop-shadow(0 0 16px #f2d77e66);width:min(44vw,30vh);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.calib-ring circle{fill:none;stroke:#ffffff40;stroke-width:7px}#calib-ring{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5px;transition:stroke-dashoffset .1s}.calib-bottom{padding-top:48px;padding-bottom:calc(var(--safe-b) + 20px);background:linear-gradient(#0000,#000c);justify-items:center;gap:16px;display:grid;bottom:0}.status{min-height:1.3em;color:var(--gold);font-family:var(--display);letter-spacing:1px;text-shadow:0 2px 10px #000;margin:0;font-size:clamp(22px,7vw,34px)}.result-title{color:var(--gold);text-shadow:0 4px #8a6a12,0 0 40px #f2d77e73!important;font-size:clamp(54px,17vw,76px)!important}.result-sub{color:var(--ink);font-family:var(--display);letter-spacing:1px;margin:10px 0 0;font-size:24px}.stats{text-align:left;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;display:grid}.stats div{border:1px solid var(--line);color:var(--muted);letter-spacing:.5px;text-transform:uppercase;background:#ffffff0f;border-radius:14px;padding:10px 12px;font-size:11px;font-weight:700;line-height:1.25}.stats b{color:var(--ink);font-family:var(--display);letter-spacing:.5px;text-transform:none;word-break:break-word;margin-bottom:2px;font-size:22px;font-weight:400;display:block}#hurt,#flash,#warning{pointer-events:none;z-index:5;position:fixed;inset:0}#hurt,#flash{opacity:0}#hurt{background:radial-gradient(#f000 35%,#c80000bf)}#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) + 64px);right:calc(var(--safe-r) + 12px);z-index:14;color:#fff;letter-spacing:1.5px;pointer-events:none;background:#0009;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:800;display:flex;position:fixed}#rec:before{content:"";background:var(--red);border-radius:50%;width:8px;height:8px;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) + 12px);grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;display:grid}.fighter .name{font-family:var(--display);letter-spacing:.8px;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 8px #000;font-size:15px;overflow:hidden}.fighter .kd{color:var(--red);letter-spacing:2px;font-size:12px}.fighter.right{text-align:right}.bar{background:#0000008c;border:1.5px solid #ffffff40;border-radius:4px;height:14px;margin-top:4px;position:relative;overflow:hidden;transform:skew(-14deg)}.bar .fill,.bar .ghost{width:100%;transition:width .12s;position:absolute;inset:0}.bar .fill{background:linear-gradient(#ffe58a,#f0b429)}.fighter.right .fill{background:linear-gradient(#ff7b88,#d61c2c)}.bar .ghost{background:#ffffffd9;transition:width .6s .25s}.fighter.right .bar .fill,.fighter.right .bar .ghost{left:auto;right:0}.clock{border:1px solid var(--line);text-align:center;background:#0000008c;border-radius:10px;min-width:64px;padding:3px 10px 5px}.clock .round{color:var(--gold);letter-spacing:1.5px;white-space:nowrap;font-size:9.5px;font-weight:800}.clock .time{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:26px;line-height:1}#combo{left:calc(var(--safe-l) + 14px);top:calc(var(--safe-t) + 72px);color:var(--gold);font-family:var(--display);text-shadow:0 3px 12px #000;opacity:0;font-size:36px;line-height:1;transition:opacity .2s;position:absolute}#combo.show{opacity:1}#combo small{color:var(--ink);letter-spacing:2px;font-size:13px;display:block}#guard-indicator{left:50%;bottom:calc(var(--safe-b) + var(--pad-h) + 16px);letter-spacing:2px;opacity:0;background:#3d7bffe0;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:800;transition:opacity .12s;position:absolute;transform:translate(-50%)}#guard-indicator.on{opacity:1}#hud-help{left:calc(var(--safe-l) + 14px);bottom:calc(var(--safe-b) + 14px);max-width:min(560px,100% - 260px);color:var(--muted);background:#00000073;border-radius:10px;padding:8px 12px;font-size:12px;line-height:1.6;position:absolute}#hud-help:empty,#hud.practice .hud-top,#hud.practice #combo{display:none}#hud-help kbd{color:var(--ink);font:600 11px var(--body);background:#ffffff26;border-radius:4px;padding:1px 5px}.chips{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.chips .arrow{color:var(--muted);font-size:16px}.chip{border:2px solid var(--line-strong);text-align:center;-webkit-backdrop-filter:blur(6px);background:#0a0c14d6;border-radius:14px;min-width:70px;padding:7px 10px 8px}.chip b{letter-spacing:.5px;white-space:nowrap;font-size:15px;font-weight:800;display:block}.chip small{color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:1px;font-size:10.5px;font-weight:700;display:block}.chip.active{border-color:var(--gold);animation:.7s ease-in-out infinite alternate chip-pulse;box-shadow:0 0 22px #f2d77e73}@keyframes chip-pulse{to{transform:scale(1.06)}}.chip.ok{border-color:var(--green);background:#185c3ae6}.chip.bad{border-color:var(--red);background:#78121ee6}.chip.ok small,.chip.bad small{color:var(--ink)}#practice{top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 12px);right:calc(var(--safe-r) + 64px);z-index:10;pointer-events:none;justify-items:center;gap:10px;display:grid;position:fixed}.practice-head{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px;display:flex}.practice-head span{letter-spacing:1px;background:#0000008c;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}#practice-stars{color:var(--gold)}#practice-status{min-height:1.3em;color:var(--gold);font-family:var(--display);letter-spacing:1px;text-shadow:0 2px 8px #000;font-size:22px}#practice-result{left:50%;bottom:calc(var(--safe-b) + var(--pad-h) + 20px);z-index:12;border:1px solid var(--line);text-align:center;pointer-events:none;background:#0a0c14e6;border-radius:20px;width:min(380px,100% - 24px);padding:14px 20px 16px;animation:.25s ease-out result-in;position:fixed;transform:translate(-50%)}@keyframes result-in{0%{opacity:0;transform:translate(-50%,20px)}}#practice-result .grade{font-family:var(--display);letter-spacing:2px;font-size:50px;line-height:1}#practice-result .grade.perfect{color:var(--gold)}#practice-result .grade.great{color:var(--green)}#practice-result .grade.good{color:#9fd0ff}#practice-result .grade.miss{color:var(--red)}#practice-result .stars{min-height:1.2em;color:var(--gold);letter-spacing:6px;font-size:24px}#practice-result .detail{font-size:15px;font-weight:800}#practice-result .hint{color:#ffb3bb;margin-top:6px;font-size:13px}#practice-result .note{color:var(--gold);margin-top:6px;font-weight:800}#practice-result .next{color:var(--muted);margin-top:8px;font-size:12px}#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) + 64px) 0 calc(var(--safe-l) + 12px);grid-template-columns:auto 1fr auto;align-items:center;gap:10px;display:grid}.rhythm-stat{text-align:center;min-width:56px}.rhythm-stat b{font-family:var(--display);font-variant-numeric:tabular-nums;text-shadow:0 3px 12px #000;font-size:28px;font-weight:400;line-height:1;display:block}.rhythm-stat small{color:var(--muted);letter-spacing:1.2px;margin-top:2px;font-size:9.5px;font-weight:800;display:block}#rhythm-mult[data-level="2"]{color:#9fd0ff}#rhythm-mult[data-level="3"]{color:var(--green)}#rhythm-mult[data-level="4"]{color:var(--gold)}.rhythm-mid{text-align:center;min-width:0}#rhythm-cue{color:var(--gold);font-family:var(--display);letter-spacing:1px;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 10px #000;font-size:20px;overflow:hidden}.rhythm-progress{background:#ffffff26;border-radius:3px;height:5px;margin:4px 0;overflow:hidden}#rhythm-progress{background:var(--gold);width:0;height:100%}.rhythm-legend{color:var(--muted);letter-spacing:1px;justify-content:space-between;gap:6px;font-size:9.5px;font-weight:800;display:flex}#rhythm-stance{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.rhythm-legend .left{color:var(--left)}.rhythm-legend .right{color:var(--right)}.rhythm-bottom{left:0;right:0;bottom:calc(var(--safe-b) + var(--pad-h) + 12px);padding:0 calc(var(--safe-r) + 10px) 0 calc(var(--safe-l) + 10px);justify-items:center;gap:8px;display:grid;position:absolute}#rhythm-hint{text-align:center;background:#0009;border-radius:14px;max-width:100%;padding:7px 14px;font-size:14px;font-weight:700;line-height:1.35}#rhythm-hint:empty{display:none}#rhythm-next{flex-wrap:nowrap;gap:6px}#rhythm-next .chip{width:78px;min-width:0;padding:5px 4px 7px}#rhythm-next .chip b{font-family:var(--display);font-size:30px;font-weight:400;line-height:1.05}#rhythm-next .chip .label{letter-spacing:.5px;white-space:nowrap;font-size:12px;font-weight:800;display:block}#rhythm-next .chip small{font-size:9.5px}#rhythm-next .chip:not(.active):not(.bad){opacity:.75}#rhythm-next .chip.half{border-color:var(--amber);background:#6e480ce6}#rhythm-next .chip.miss{border-color:var(--red);opacity:.45;background:#280a10d9}#rhythm-next .chip.miss b,#rhythm-next .chip.miss .label{text-decoration:line-through}#rhythm-next .chip.half small,#rhythm-next .chip.miss small{color:var(--ink)}#banner{z-index:15;color:#fff;font-family:var(--display);letter-spacing:3px;text-shadow:0 6px #a3101d,0 12px 40px #000c;white-space:nowrap;pointer-events:none;opacity:0;font-size:clamp(54px,17vw,150px);position:fixed;top:38%;left:50%;transform:translate(-50%,-50%)}#banner.show{animation:1.4s ease-out forwards banner}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(2.2)}12%{opacity:1;transform:translate(-50%,-50%)scale(.95)}20%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1.05)}}#floaters{z-index:12;pointer-events:none;position:fixed;inset:0}.floater{color:#fff;font-family:var(--display);white-space:nowrap;text-shadow:0 3px #0009,0 0 18px #0009;font-size:clamp(26px,8vw,40px);animation:.9s ease-out forwards floatup;position:absolute;transform:translate(-50%,-50%)}.floater.big{color:var(--gold);font-size:clamp(32px,10.5vw,54px)}.floater.counter{color:var(--red)}.floater.dim{color:#c9cfdc;font-size:clamp(19px,5.6vw,26px)}.floater.good{color:var(--green)}@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%)scale(.6)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-180%)scale(1)}}#notice{z-index:16;border:1.5px solid var(--gold);width:max-content;max-width:calc(100% - 32px);color:var(--gold);font-family:var(--display);letter-spacing:1px;text-align:center;pointer-events:none;background:#000c;border-radius:20px;padding:14px 22px;font-size:clamp(22px,7vw,32px);line-height:1.15;position:fixed;top:40%;left:50%;transform:translate(-50%,-50%)}#pip{right:calc(var(--safe-r) + 10px);bottom:calc(var(--safe-b) + var(--pad-h) + 10px);z-index:11;border:1px solid var(--line);pointer-events:none;background:#0009;border-radius:14px;padding:5px;position:fixed}#pip-canvas{border-radius:9px;width:96px;display:block}.pip-meters{color:var(--muted);grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;margin-top:4px;font-size:9px;font-weight:800;display:grid}.meter{background:#ffffff1f;border-radius:3px;height:5px;overflow:hidden}.meter div{background:var(--blue);width:0;height:100%}.meter div.hit{background:var(--gold)}#touchpad{z-index:13;padding:8px calc(var(--safe-r) + 10px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 10px);background:linear-gradient(#07080f00,#07080f8c);grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;display:grid;position:fixed;bottom:0;left:0;right:0}body.touch-play{--pad-h:176px}.pad-hand,.pad-defence{gap:8px;display:grid}.pad-defence{width:128px}.pad-row{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}#touchpad button{border:1.5px solid var(--line-strong);min-height:44px;font-family:var(--display);letter-spacing:1px;touch-action:none;background:linear-gradient(#282d44e0,#141724e0);border-radius:14px;font-size:15px;transition:transform 50ms,box-shadow 50ms;box-shadow:0 4px #06070ee6}#touchpad .pad-hand:first-child button{border-color:#ff4d6db3}#touchpad .pad-hand:last-child button{border-color:#4c9bffb3}#touchpad button.main{min-height:64px;font-size:20px}#touchpad .pad-hand:first-child button.main{background:linear-gradient(#ff4d6dbf,#aa1432bf)}#touchpad .pad-hand:last-child button.main{background:linear-gradient(#4c9bffbf,#1946aabf)}#touchpad button.guard{border-color:#4c9bff99;min-height:64px;font-size:18px}#touchpad button.down{filter:brightness(1.35);transform:translateY(3px);box-shadow:0 1px #06070ee6}#touchpad.punch-only{grid-template-columns:1fr 1fr}#touchpad.punch-only .pad-defence{display:none}#test{left:50%;top:calc(var(--safe-t) + 66px);z-index:21;border:1.5px solid var(--gold);text-align:center;background:#0a0c14e6;border-radius:20px;width:min(520px,100% - 24px);padding:16px 18px;position:fixed;transform:translate(-50%)}.test-step{color:var(--gold);letter-spacing:2px;font-size:12px;font-weight:800}.test-label{font-family:var(--display);letter-spacing:.5px;margin:4px 0 10px;font-size:clamp(24px,7.5vw,36px);line-height:1.15}.test-bar{background:#ffffff1f;border-radius:3px;height:6px;overflow:hidden}#test-progress{background:var(--gold);width:0;height:100%}.test-detected{min-height:1.5em;color:var(--green);margin-top:10px;font-weight:800}#test-stop{margin-top:6px}#debug{left:calc(var(--safe-l) + 8px);top:calc(var(--safe-t) + 112px);z-index:11;border:1px solid var(--line);color:#d8dce6;white-space:pre;pointer-events:none;background:#000000b8;border-radius:10px;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{font-size:clamp(40px,13vh,80px)}.logo-bottom{margin-top:6px;font-size:clamp(22px,7vh,40px)}.mode-cards button{aspect-ratio:auto;padding:10px 0}.play-btn{height:62px}.play-btn span{font-size:34px}}@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:24px;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:8px}.mode-cards button{gap:2px;padding:8px 0}.mode-icon{font-size:30px}.segmented button{min-height:36px}.play-btn{height:56px;margin-top:4px}.play-btn span{font-size:30px}.menu .link-btn{min-height:32px}body.touch-play{--pad-h:0px}#touchpad,#touchpad.punch-only{background:0 0;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}.rhythm-bottom{left:140px;right:140px}#practice-result{width:auto;animation:none;left:140px;right:140px;transform:none}.calib-ring{width:24vh}}@media (width>=720px) and (height>=600px){.hud-top{padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 80px) 0 calc(var(--safe-l) + 22px);gap:18px}.fighter .name{font-size:20px}.bar{height:18px}.clock{padding:4px 16px 6px}.clock .round{font-size:11px}.clock .time{font-size:34px}#combo{top:calc(var(--safe-t) + 96px);font-size:42px}#pause-btn{top:calc(var(--safe-t) + 16px);right:calc(var(--safe-r) + 16px);width:52px;height:52px}#rec{top:calc(var(--safe-t) + 76px);right:calc(var(--safe-r) + 18px)}.rhythm-top{padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 88px) 0 calc(var(--safe-l) + 24px);gap:24px}.rhythm-stat{min-width:90px}.rhythm-stat b{font-size:42px}.rhythm-stat small{font-size:11px}#rhythm-cue{font-size:30px}.rhythm-progress{width:min(460px,100%);margin:6px auto}.rhythm-legend{width:min(460px,100%);margin:0 auto;font-size:11px}#rhythm-hint{font-size:17px}#rhythm-next{gap:10px}#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:9px 16px 10px}.chip b{font-size:20px}.practice-head span{padding:6px 14px;font-size:14px}#practice-status{font-size:28px}#practice-result .grade{font-size:60px}#pip-canvas{width:200px}.pip-meters{font-size:10px}#debug{top:calc(var(--safe-t) + 150px);font-size:12px}.mode-cards{gap:14px}}