:root{--ink:#28243c;--muted:#746d80;--orange:#ff7658;--orange-dark:#d94d36;--green:#2aa46f}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#e9edf8;color:var(--ink)}
#app{position:relative;width:min(100vw,480px);height:100dvh;margin:auto;overflow:hidden;background:#bdeaff;box-shadow:0 0 50px #29243b18}
canvas{width:100%;height:100%;display:block;touch-action:none}.screen{position:absolute;inset:0;display:none;z-index:2}.screen.show{display:flex}
#start,#result{align-items:center;justify-content:center;flex-direction:column;padding:calc(env(safe-area-inset-top) + 18px) 22px calc(env(safe-area-inset-bottom) + 16px);text-align:center;background:radial-gradient(circle at 8% 16%,#fff 0 6%,transparent 6.4%),radial-gradient(circle at 88% 14%,#fff4a8 0 8%,transparent 8.4%),linear-gradient(#dff5ff,#fff0df)}
.topbar{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 9px);display:flex;justify-content:space-between;align-items:center;z-index:20}.back{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 13px;border-radius:14px;background:#ffffffeb;color:#d94d36;text-decoration:none;font-size:12px;font-weight:950;box-shadow:0 9px 22px #3c405618}.sound{width:44px;height:44px;border:0;border-radius:15px;background:#fff;box-shadow:0 9px 22px #3c405618;font-size:18px;cursor:pointer}
.note{margin-top:43px;padding:8px 12px;border-radius:999px;background:#ffffffbd;color:#635c6d;font-size:12px;font-weight:800}.portraitWrap{position:relative;width:min(52vw,230px);aspect-ratio:1;margin:14px 0 10px;padding:10px;border-radius:38px;background:linear-gradient(#fff,#fff2d9);box-shadow:0 24px 55px #3b405526;transform:rotate(-1.5deg)}.portrait{width:100%;height:100%;border-radius:29px;object-fit:cover;object-position:center;display:block}.nameTag{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:#2e2946e8;color:#fff;font-size:11px;font-weight:950;letter-spacing:.1em}
h1{font-size:clamp(32px,8vw,43px);line-height:1;letter-spacing:-.045em;margin:9px 0 7px}p{color:var(--muted);line-height:1.48;margin:0}.guide{display:grid;gap:7px;width:min(100%,360px);margin:13px 0}.chip{padding:9px 12px;border-radius:14px;background:#ffffffd8;font-weight:850;font-size:12px;box-shadow:0 8px 18px #3c40560d}.good{color:#21875a}.bad{color:#d34d50}
.play,.secondary,.order{border:0;border-radius:18px;min-height:54px;padding:0 23px;font-weight:950;font-size:16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:min(100%,340px)}.play{background:linear-gradient(#ff855f,#df4e31);color:#fff;box-shadow:0 13px 25px #df583a4b}.secondary{background:#fff;color:#d94d36;margin-top:9px;box-shadow:0 9px 20px #3d405414}.order{background:linear-gradient(#43c68c,#278f63);color:#fff;margin-top:9px}.micro{margin-top:9px;font-size:11px}
#hud{position:absolute;left:9px;right:9px;top:calc(env(safe-area-inset-top) + 9px);z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}#hud>div{position:relative;min-height:55px;padding:7px 8px 8px 35px;border-radius:16px;background:#fffffff1;box-shadow:0 9px 22px #31465c1c;text-align:left}#hud .ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:20px}#hud small{display:block;color:#777080;font-size:9px;font-weight:950;letter-spacing:.1em}#hud strong{display:block;margin-top:2px;font-size:19px;line-height:1}
#goal{position:absolute;z-index:5;left:9px;right:61px;top:calc(env(safe-area-inset-top) + 72px);padding:9px 11px;border-radius:16px;background:#fffffff1;box-shadow:0 9px 22px #31465c16}.goalTop{display:flex;justify-content:space-between;color:#6d6675;font-size:9px;font-weight:950;letter-spacing:.05em}.track{height:8px;margin-top:7px;border-radius:999px;background:#eee7e5;overflow:hidden}.fill{height:100%;width:0;background:linear-gradient(90deg,#ffbd58,#ff805c);border-radius:inherit;transition:width .2s}
#gameSound{position:absolute;right:10px;top:calc(env(safe-area-inset-top) + 73px);z-index:6}#exitGame{position:absolute;left:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:10;min-height:40px;padding:0 12px;border:0;border-radius:13px;background:#ffffffdd;color:#5e586c;font-weight:900;box-shadow:0 8px 20px #3440551a;cursor:pointer}
.quickGuide{position:absolute;z-index:8;left:50%;top:calc(env(safe-area-inset-top) + 145px);transform:translateX(-50%) translateY(-6px);width:min(84%,315px);display:grid;gap:7px;opacity:0;pointer-events:none;transition:.25s}.quickGuide.on{opacity:1;transform:translateX(-50%)}.quickGuide span{padding:9px 11px;border-radius:14px;background:#fffffff0;text-align:center;font-size:12px;font-weight:900;box-shadow:0 10px 20px #31374b16}.quickGuide .swipe{background:#322d49d9;color:#fff}.combo{position:absolute;z-index:7;left:50%;top:calc(env(safe-area-inset-top) + 137px);transform:translateX(-50%) translateY(-8px);padding:9px 14px;border-radius:999px;background:#7554cf;color:#fff;font-size:12px;font-weight:950;opacity:0;transition:.2s}.combo.on{opacity:1;transform:translateX(-50%)}
#result{background:linear-gradient(#fff0e8,#e8f6ff)}.resultCard{position:relative;width:min(100%,400px);padding:30px 22px 21px;border-radius:34px;background:#fff;box-shadow:0 28px 70px #3d364b27}.resultPortrait{width:140px;height:140px;margin-top:-91px;border-radius:50%;object-fit:cover;border:7px solid #fff;box-shadow:0 14px 36px #3d364b2b}.badge{display:inline-flex;margin-top:7px;padding:8px 14px;border-radius:999px;background:linear-gradient(#a876f2,#7350d0);color:#fff;font-weight:950}.eyebrow{margin-top:8px;color:#df593f;font-size:10px;font-weight:950;letter-spacing:.1em}#result h2{font-size:clamp(28px,7vw,39px);line-height:1.02;letter-spacing:-.045em;margin:8px 0}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.stats div{padding:11px;border-radius:17px;background:#fff1d9}.stats small{display:block;color:#756d79;font-size:9px;font-weight:950;letter-spacing:.08em}.stats strong{display:block;margin-top:3px;color:#df5338;font-size:25px}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-15px;width:8px;height:14px;border-radius:3px;animation:fall 1.5s linear forwards}@keyframes fall{to{transform:translateY(105vh) rotate(500deg)}}
@media(max-height:720px){.portraitWrap{width:min(40vw,176px);margin-top:8px}.note{margin-top:35px}.guide{margin:9px 0}.chip{padding:7px 10px}.resultPortrait{width:118px;height:118px;margin-top:-71px}.resultCard{padding-top:25px}}