:root{color:#213f36;font-synthesis:none;--ink:#213f36;--cream:#fff6e2;--orange:#dc774c;--control-size:clamp(84px, 24dvh, 108px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);background:#d4dfd8;font-family:Inter,Segoe UI,Noto Sans TC,sans-serif}*{box-sizing:border-box}body{overscroll-behavior:none;margin:0;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline-offset:4px;outline:3px solid #eab465}[hidden]{display:none!important}#shell,#view{position:fixed;inset:0}#view canvas{width:100%;height:100%;display:block}header{align-items:center;gap:14px;display:flex}.wordmark{letter-spacing:-6px;font-size:39px;font-weight:800}header small{letter-spacing:3px;margin-top:5px;font-size:9px;display:block}.quiet{color:inherit;background:0 0;border:0;padding:12px;font-size:12px}.primary{background:var(--ink);color:var(--cream);border:0;border-radius:6px;padding:17px 25px;font-size:14px;font-weight:600;box-shadow:0 6px 18px #213f3618}.primary span{padding-left:45px}#home{background:linear-gradient(90deg,#e8eee2f0,#e8eee2ad 34%,#0000 65%);padding:28px 40px;position:absolute;inset:0}#home header{letter-spacing:2px;font-size:13px}#sound{letter-spacing:0;background:#eff2e1bd;border-radius:5px;margin-left:auto}.home-copy{position:absolute;top:25%;left:40px}.eyebrow{letter-spacing:2.5px;font-size:9px;font-weight:700}h1{letter-spacing:1px;margin:20px 0 16px;font-size:clamp(26px,4.8vw,60px);font-weight:700;line-height:1.3}h1 em{color:#527766;font-style:normal}.home-copy>p:not(.eyebrow){margin-bottom:22px;font-size:13px;line-height:1.9}.home-foot{letter-spacing:1.5px;justify-content:space-between;font-size:9px;display:flex;position:absolute;bottom:25px;left:40px;right:40px}#loading{text-align:center;z-index:10;background:#e4eadf;place-content:center;display:grid;position:absolute;inset:0}#loading h2{font-weight:600}#loading p{font-size:12px}.load-line{background:#a8b7a9;width:180px;height:2px;margin:14px auto;overflow:hidden}.load-line:after{content:"";background:var(--ink);width:70px;height:2px;animation:1.3s infinite load;display:block}@keyframes load{0%{transform:translate(-70px)}to{transform:translate(180px)}}#setup,#modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:6;background:#233c3640;place-items:center;display:grid;position:absolute;inset:0}.setup-card,.dialog{text-align:center;background:#faf6e8f2;border-radius:12px;width:min(560px,90vw);max-height:94dvh;padding:27px 35px;overflow:auto;box-shadow:0 18px 60px #13342b24}h2{margin:12px 0 20px;font-size:25px;font-weight:600}.cast{gap:10px;display:flex}.cast button{text-align:left;color:var(--ink);background:#e4eadd;border:1px solid #b6c4b4;border-radius:6px;flex:1;padding:16px 10px}.cast span{float:right;color:#698670;font-size:30px}.cast b,.cast small{display:block}.cast b{margin:9px 0;font-size:13px}.cast small{font-size:10px}.selected{background:#f1bd83!important;border-color:#c07c4c!important}.difficulty{gap:7px;margin-top:15px;display:flex}.difficulty button{color:var(--ink);background:#edf0e5;border:1px solid #b7c5b6;border-radius:4px;flex:1;padding:11px;font-size:12px}.muted,.dialog p:not(.eyebrow){color:#617369;font-size:12px;line-height:1.9}#match{pointer-events:none;position:absolute;inset:0}.hud{top:max(16px, var(--safe-top));left:max(20px, var(--safe-left));right:max(20px, var(--safe-right));align-items:center;gap:20px;display:flex;position:absolute}.score{color:#25453c;background:#f6f6e4e6;border-radius:5px;align-items:center;gap:10px;min-width:135px;padding:7px 15px 30px;display:flex;position:relative;box-shadow:0 3px 8px #17372c0b}.score small{letter-spacing:1px;font-size:9px;font-weight:600}.score strong{font-size:30px;line-height:1}.energy{color:#25453c;height:20px;padding:0 8px;position:absolute;bottom:5px;left:0;right:0}.energy>span{justify-content:space-between;font-size:9px;font-weight:600;line-height:11px;display:flex}.energy-track{background:#28483c;border:1px solid #254d42;border-radius:3px;height:9px;overflow:hidden}.energy i{transform-origin:0;background:#52c89b;height:100%;display:block}.energy[data-energy=tired] i{background:#e5b64b}.energy[data-energy=critical] i{background:#f17650}.energy[data-energy=critical] b{color:#ae3e28}.score.cpu{margin-left:auto}.status-rail{top:calc(max(16px, var(--safe-top)) + 76px);left:calc(16px + var(--safe-left));pointer-events:none;flex-direction:column;align-items:flex-start;gap:6px;width:clamp(108px,17vw,148px);display:flex;position:absolute}.middle{text-align:left;color:#25453c;text-shadow:0 1px 3px #fff8}.middle small{letter-spacing:2px;font-size:8px;display:block}.middle span{letter-spacing:1px;margin-top:3px;font-size:11px;display:block}.pause{pointer-events:auto;width:38px;height:38px;color:var(--ink);background:#eef2e3d9;border:0;border-radius:50%;font-weight:700}.control-left{left:calc(16px + var(--safe-left));bottom:calc(12px + var(--safe-bottom));pointer-events:auto;position:absolute}.control-left>small{letter-spacing:2px;text-shadow:0 1px 2px #fff;margin-bottom:8px;font-size:14px;display:block}#aim{height:var(--control-size);touch-action:none;-webkit-user-select:none;user-select:none;gap:12px;display:flex}#aim button{width:var(--control-size);height:var(--control-size);text-align:center;color:#4a7460;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);touch-action:none;background:#eaf0e2e8;border:1px solid #fff9df;border-radius:18px;place-content:center;font-size:29px;display:grid}#aim b{margin-top:4px;font-size:14px;font-weight:400}#shot-buttons{right:calc(16px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));grid-template-columns:repeat(2, var(--control-size));grid-template-rows:repeat(2, var(--control-size));pointer-events:auto;grid-template-areas:".return""drop smash";gap:10px;display:grid;position:absolute}#shot-buttons button{touch-action:none;-webkit-user-select:none;user-select:none;color:#eef3d9;width:var(--control-size);height:var(--control-size);background:#22483eeb;border:1px solid #fff7dbad;border-radius:50%;font-size:18px;font-weight:600;position:relative;box-shadow:0 4px 14px #153c3330}#shot-buttons button[data-charging=true][data-serve-grade=PERFECT]{color:#264335;background:#f5df87;box-shadow:0 0 0 4px #ffe17e90,0 0 24px #ffe17e}#shot-buttons button small{letter-spacing:1px;opacity:.65;margin-top:4px;font-size:10px;display:block}#shot-buttons #return{color:#284636;background:#efd3a3eb;border-color:#fff0c8;grid-area:return}#shot-buttons #smash{background:#ba6a47eb;grid-area:smash}#shot-buttons #drop{grid-area:drop}#shot-buttons button:disabled{opacity:.34;cursor:default;box-shadow:none}#shot-buttons button[data-timing=approach]{box-shadow:0 0 0 3px #eaffee75,0 4px 14px #153c3330}#shot-buttons button[data-timing=perfect]{filter:brightness(1.2);border:3px solid #fff09a;box-shadow:0 0 0 5px #f6d14a70,0 0 24px #ffe17ebd}.pressed{filter:brightness(1.2);transform:scale(.93)}#feedback{text-align:left;letter-spacing:1px;color:#fef5d6;text-shadow:0 2px 10px #3f6133;width:100%;font-size:14px;font-weight:700;transform:translateZ(0)}#feedback.perfect{color:#fff3a1;text-shadow:0 0 16px #ffc331,0 2px 6px #254636}#feedback.miss{color:#edbaa1}#feedback.point{font-size:16px}#hint{color:#35563d;overflow-wrap:anywhere;background:#e9efdfdf;border-radius:3px;max-width:100%;padding:5px 6px;font-size:11px;line-height:1.4}#hint:empty,#feedback:empty,#passive:empty,#quality-note:empty{display:none}#hint.now{color:#d4e5bb;background:#225747e6}#passive{color:#fdf6d6;text-shadow:0 1px 6px #233d33;font-size:9px}#quality-note{color:#fff4d4;overflow-wrap:anywhere;background:#763e2ee6;border-left:3px solid #f2b374;border-radius:3px;max-width:100%;padding:4px 6px;font-size:10px;line-height:1.4}#rotate{text-align:center;z-index:20;background:#e4ebdf;place-content:center;display:none;position:absolute;inset:0}#rotate>span{font-size:80px}#rotate p{font-size:12px}.result-score{letter-spacing:5px;font-size:55px}.result-score small{opacity:.45;font-size:35px}.dialog .quiet{margin:8px auto;display:block}#debug{color:#fff;z-index:25;background:#18372edc;padding:4px;font:10px monospace;position:absolute;bottom:3px;left:10px}@media (height<=450px){#home{padding:18px 28px}.home-copy{top:20%;left:28px}h1{margin:14px 0 10px;font-size:32px}.home-copy>p:not(.eyebrow){margin-bottom:14px;font-size:11px}.primary{padding:13px 20px}.home-foot{bottom:14px;left:28px;right:28px}#home header{font-size:11px}.wordmark{font-size:30px}.setup-card{padding:18px 25px}.setup-card h2{margin:8px 0 12px;font-size:20px}.cast button{padding:8px 12px}.setup-card .muted{margin:10px 0;font-size:10px}.difficulty{margin-top:10px}.difficulty button{padding:8px}.hud{top:max(14px, var(--safe-top));gap:13px}.score{min-width:115px;padding:5px 11px 29px}.score strong{font-size:24px}.status-rail{top:calc(max(14px, var(--safe-top)) + 70px)}.control-left{left:calc(16px + var(--safe-left))}#shot-buttons{right:calc(16px + var(--safe-right))}.dialog{padding:20px 30px}.dialog h2{margin:9px 0 12px}.dialog p:not(.eyebrow){font-size:11px}}@media (orientation:portrait){#rotate{display:grid}}@media (width<=600px) and (orientation:landscape){.status-rail{gap:4px;width:142px}#quality-note{padding:3px 5px;font-size:9px;line-height:1.3}}