:root{--ink: #6b5a6e;--ink-soft: #9a8a9c;--cream: #fff8f0;--peach: #f6c9b8;--gold: #e7b77a;--font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;position:fixed;width:100%;background:#f6dccf;font-family:var(--font);color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}#scene{position:fixed;left:0;top:0;width:100%;height:100vh;height:100dvh;display:block}#ui{position:fixed;left:0;top:0;width:100%;height:100vh;height:100dvh;pointer-events:none}.hidden{display:none!important}#hud{position:absolute;top:0;right:0;bottom:0;left:0}.progress{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:calc(env(safe-area-inset-left) + 22px);right:calc(env(safe-area-inset-right) + 22px);height:3px;border-radius:3px;background:#ffffff73;overflow:hidden}.progress .bar{height:100%;background:linear-gradient(90deg,#f3b8a4,#e8a8c0);transform-origin:left;transform:scaleX(0)}.score{position:absolute;top:calc(env(safe-area-inset-top) + 26px);left:calc(env(safe-area-inset-left) + 18px);font-weight:700;font-size:22px;letter-spacing:.04em;color:#fff;padding:4px 14px;border-radius:999px;background:#5c40626b;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 3px rgba(70,40,80,.5)}.combo{position:absolute;top:calc(env(safe-area-inset-top) + 64px);left:0;right:0;text-align:center;color:#fff;opacity:0;transition:opacity .3s;text-shadow:0 2px 4px rgba(80,48,92,.55),0 0 16px rgba(80,48,92,.45)}.combo.on{opacity:1}.combo .val{display:block;font-size:52px;font-weight:700;line-height:1}.combo .label{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.35em;padding:2px 10px 2px 14px;margin-top:4px;border-radius:999px;background:#5c406266;text-shadow:0 1px 3px rgba(70,40,80,.5)}.combo.pop .val{animation:pop .22s ease-out}@keyframes pop{0%{transform:scale(1.18)}to{transform:scale(1)}}#pads{position:absolute;left:0;right:0;bottom:0;height:calc(22% + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex}.pad{flex:1;position:relative}.pad:after{content:"";position:absolute;top:18%;right:14%;bottom:18%;left:14%;border-radius:999px;background:radial-gradient(ellipse at center,#fff4e280,#fff4e200 70%);opacity:0}.pad.hit:after{animation:padhit .3s ease-out}@keyframes padhit{0%{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.15)}}.judge{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:#fff8ea;-webkit-text-stroke:3px rgba(92,52,104,.92);paint-order:stroke fill;text-shadow:0 2px 0 rgba(74,40,84,.8),0 0 10px rgba(255,226,160,.95),0 0 22px rgba(255,190,110,.6);animation:judge 1s cubic-bezier(.2,.7,.3,1) forwards;white-space:nowrap;pointer-events:none}.judge.perfect{color:#fff4d0;font-size:38px}.judge.good{color:#fff8ea;font-size:30px}.judge.miss{color:#d9c9f0;font-size:22px;text-shadow:0 2px 0 rgba(74,40,84,.8),0 0 8px rgba(185,166,214,.7)}@keyframes judge{0%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}12%{opacity:1;transform:translate(-50%,-58%) scale(1)}50%{opacity:1;transform:translate(-50%,-80%) scale(1)}to{opacity:0;transform:translate(-50%,-100%) scale(1)}}body.capture .judge{animation-play-state:paused;animation-delay:-.12s}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:auto}#title{justify-content:center}#title .logo{position:absolute;left:0;right:0;top:calc(8vh + env(safe-area-inset-top));display:flex;justify-content:center}@supports (height: 100dvh){#title .logo{top:calc(8dvh + env(safe-area-inset-top))}}#title .bottom{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(120px,30vh,300px)}#title h1{margin:0;line-height:0}#title .logo-img{width:min(72vw,300px);height:auto;filter:drop-shadow(0 2px 3px rgba(80,48,92,.55)) drop-shadow(0 6px 22px rgba(80,48,92,.45))}#title .cta{font-size:18px;letter-spacing:.3em;color:#fff;padding:10px 26px 10px 32px;border-radius:999px;background:#5c406280;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 3px rgba(70,40,80,.5);animation:breathe 2.6s ease-in-out infinite}#title .hint{font-size:13px;color:#fff;padding:5px 14px;border-radius:999px;background:#5c406261;text-shadow:0 1px 3px rgba(80,48,92,.6)}#title .gear{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:calc(env(safe-area-inset-right) + 16px);width:44px;height:44px;padding:0;border:0;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#5c40626b;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);filter:drop-shadow(0 1px 3px rgba(70,40,80,.35))}#title .settings{position:absolute;top:calc(env(safe-area-inset-top) + 68px);right:calc(env(safe-area-inset-right) + 16px);width:min(264px,calc(100% - 32px));padding:16px;border-radius:22px;display:flex;flex-direction:column;gap:10px;text-align:left;background:#5c40628c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px #4628504d;color:#fff;animation:rise .25s ease-out}#title .s-title{font-weight:700;font-size:14px;letter-spacing:.2em;padding:0 4px 2px;text-shadow:0 1px 3px rgba(70,40,80,.5)}#title .calib,#title .s-close{font:inherit;font-size:14px;letter-spacing:.06em;color:#fff;cursor:pointer;background:#fff8f02e;border:0;border-radius:999px;padding:11px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}#title .calib .ms{font-size:12px;opacity:.8}#title .s-close{justify-content:center;background:transparent;font-size:12px;opacity:.85;padding:6px}#ready{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;pointer-events:none}#ready .song-name,#song-banner{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:#fff;text-shadow:0 1px 2px rgba(70,40,84,.85),0 2px 6px rgba(80,48,92,.7),0 0 20px rgba(80,48,92,.55);animation:rise .5s ease-out}body.capture #ready .song-name{animation:none}#ready .song-name .en,#song-banner .en{font-size:28px;font-weight:700;letter-spacing:.06em;line-height:1.15}#ready .song-name .jp,#song-banner .jp{font-size:15px;font-weight:500;letter-spacing:.3em;padding-left:.3em;opacity:.95}#song-banner{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 17%);pointer-events:none;animation:banner 4s ease-out forwards}@keyframes banner{0%{opacity:0;transform:translateY(14px)}15%,62%{opacity:1;transform:none}to{opacity:0;transform:translateY(-18px)}}#ready .ready-cta{font-size:22px;letter-spacing:.3em;color:#fff;padding:12px 28px 12px 34px;border-radius:999px;background:#5c406280;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 3px rgba(70,40,80,.5);animation:breathe 2.6s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.8}50%{opacity:1}}#calib{background:#fae2d68c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}#calib h2{margin:0 0 6px;font-size:28px;color:var(--ink)}#calib p{margin:0 0 24px;color:var(--ink-soft)}#calib .dots{display:flex;gap:10px}#calib .dots i{width:12px;height:12px;border-radius:50%;background:#fff9;transition:background .15s,transform .15s}#calib .dots i.on{background:var(--gold);transform:scale(1.2)}#calib .result{margin-top:18px;height:20px;color:var(--ink-soft);font-size:14px}#results{background:linear-gradient(180deg,#fff0e800,#faded680)}#results .card{width:min(360px,100%);padding:28px 22px 24px;border-radius:28px;background:#fff9f3d1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 60px #aa788c40;animation:rise .6s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}#results .jp{font-size:13px;letter-spacing:.4em;color:var(--ink-soft)}#results h2{margin:6px 0;font-size:24px}#results .song{margin-bottom:14px;font-size:13px;color:var(--ink-soft);letter-spacing:.06em}#results .song .jp-name{margin-left:8px;letter-spacing:.18em}#results .senbei{display:flex;justify-content:center;gap:6px;margin-bottom:12px}#results .cracker{width:50px;height:50px;display:block}#results .cracker.got{animation:drop .45s cubic-bezier(.3,1.6,.5,1) both}#results .cracker svg{width:100%;height:100%;display:block}@keyframes drop{0%{opacity:0;transform:translateY(-16px) scale(.6) rotate(-25deg)}to{opacity:1;transform:none}}#results .big-score{font-size:40px;font-weight:700;letter-spacing:.04em;margin-bottom:14px}#results .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:20px}#results .stats div{display:flex;flex-direction:column;gap:2px}#results .stats b{font-size:17px}#results .stats span{font-size:10px;color:var(--ink-soft);letter-spacing:.04em}#results .again{font-size:15px;font-weight:700;letter-spacing:.25em;color:var(--ink);animation:breathe 2.6s ease-in-out infinite}#results .share{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 22px 10px 18px;font:inherit;font-size:14px;font-weight:700;letter-spacing:.12em;color:#fff;border:0;border-radius:999px;background:#7a5a8cc7;box-shadow:0 6px 18px #7a5a8c4d;cursor:pointer;pointer-events:auto;touch-action:manipulation}#results .share:active{transform:scale(.96)}#results .share:disabled{opacity:.6}.share-sheet{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:#5c406259;pointer-events:auto;z-index:50}.share-sheet .panel{width:min(360px,100%);padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-radius:24px;background:#fff9f3f0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 60px #78508259;display:flex;flex-direction:column;gap:10px;text-align:center;animation:rise .3s ease-out}.share-sheet h3{margin:0 0 4px;font-size:16px;color:var(--ink)}.share-sheet .opt{display:block;font:inherit;font-size:14px;color:var(--ink);text-decoration:none;text-align:center;padding:12px 16px;border:0;border-radius:999px;background:#f6c9b88c;cursor:pointer;touch-action:manipulation}.share-sheet .close{background:#ffffffb3;color:var(--ink-soft)}#rotate{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#e2cdecd1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:auto;touch-action:none;font-family:var(--font)}#rotate .phone{animation:rotate-hint 3.2s ease-in-out infinite;transform:rotate(-90deg)}#rotate .msg{font-size:18px;font-weight:700;letter-spacing:.08em;color:#6b4f7e}@keyframes rotate-hint{0%,15%{transform:rotate(-90deg)}50%,70%{transform:rotate(0)}to{transform:rotate(-90deg)}}@media(orientation:landscape)and (max-height:500px)and (pointer:coarse){#rotate{display:flex}}