:root{color-scheme:dark;--bg:#0b0811;--card:#181121;--ink:#fff8fc;--muted:#bcaec5;--pink:#ff5ca8;--cyan:#65e6ff;--gold:#ffd36a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#322044 0,#0b0811 45%);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:var(--ink);overscroll-behavior:none}button,select{font:inherit}button{touch-action:manipulation}
main{width:min(100%,560px);margin:auto;padding:calc(12px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom))}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}h1{font-size:clamp(22px,7vw,34px);margin:0;letter-spacing:.03em}.eyebrow{color:var(--pink);font-size:11px;font-weight:900;letter-spacing:.2em;margin:0 0 3px}.round{border:1px solid #ffffff2e;background:#ffffff12;color:#fff;border-radius:50%;width:44px;height:44px}
.scorebar{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}.scorebar div{background:#ffffff0c;border:1px solid #ffffff19;border-radius:14px;padding:7px 10px;text-align:center}.scorebar small{display:block;color:var(--muted);font-size:9px;letter-spacing:.15em}.scorebar strong{font-variant-numeric:tabular-nums;font-size:20px}
.runway{height:min(61vh,570px);min-height:410px;position:relative;overflow:hidden;border-radius:24px;border:1px solid #ffffff25;background:linear-gradient(#231431,#501d57 60%,#140e1b);box-shadow:0 18px 60px #0008;touch-action:none;user-select:none}.runway.sunset{background:linear-gradient(#55305a,#ff805e 48%,#3d1a35)}.runway.moon{background:linear-gradient(#071a35,#162d5a 58%,#070d20)}
.lights{display:flex;justify-content:space-around;position:absolute;inset:0 5% auto;height:68%}.lights i{width:2px;background:linear-gradient(#fff,#ffffff00);transform:rotate(var(--r,8deg));transform-origin:top;opacity:.28}.lights i:nth-child(2){--r:-13deg}.lights i:nth-child(3){--r:0deg}.lights i:nth-child(4){--r:13deg}.lights i:nth-child(5){--r:-8deg}
.cue-lane{position:absolute;z-index:4;top:12px;left:13px;right:13px;background:#090611b8;backdrop-filter:blur(8px);border:1px solid #fff2;border-radius:14px;padding:8px 11px;text-align:center}.cue-lane span{font-size:17px;font-weight:900;letter-spacing:.12em}.timing{position:relative;height:5px;background:#fff2;border-radius:5px;margin-top:6px}.timing:after{content:"";position:absolute;left:50%;top:-3px;height:11px;width:2px;background:#fff}.timing b{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--gold);top:-4px;left:calc(var(--pos,0)*1%);transform:translateX(-50%);box-shadow:0 0 12px var(--gold)}
.haruka{position:absolute;z-index:2;width:auto;height:78%;left:50%;bottom:18px;transform:translateX(-50%);filter:drop-shadow(0 15px 14px #0007)}.model{transform-origin:120px 430px;transition:transform .18s}.hair-back,.hair-front{fill:#3a2239}.face,.neck{fill:url(#skin)}.eyes{fill:none;stroke:#4d3240;stroke-width:3;stroke-linecap:round}.mouth{fill:none;stroke:#c35b75;stroke-width:3;stroke-linecap:round}.dress{fill:url(#dress);stroke:#ffffff55;stroke-width:2}.belt{fill:none;stroke:#ffd77b;stroke-width:8}.arm,.leg{fill:none;stroke:url(#skin);stroke-width:25;stroke-linecap:round}.leg{stroke-width:27}.shoe{fill:#2a1830}.outfit-midnight .dress{fill:#112644}.outfit-midnight .belt{stroke:#72e5ff}.outfit-ivory .dress{fill:#fff1de}.outfit-ivory .belt{stroke:#d5ad52}
.pose-left .model{transform:rotate(-8deg) translateX(-9px)}.pose-left .arm-r{d:path("M148 154Q188 155 189 102")}.pose-right .model{transform:rotate(8deg) translateX(9px)}.pose-right .arm-l{d:path("M92 154Q51 154 50 102")}.pose-tap .model{transform:translateY(-8px) scale(1.025)}.pose-tap .arm-l{d:path("M92 154Q64 183 96 212")}.pose-tap .arm-r{d:path("M148 154Q176 183 144 212")}.pose-hold .model{transform:scale(1.035)}.pose-hold .arm-l{d:path("M92 154Q64 142 53 177")}.pose-hold .arm-r{d:path("M148 154Q176 142 187 177")}
.catwalk{position:absolute;left:15%;right:15%;bottom:-43%;height:62%;background:linear-gradient(90deg,#ffffff0a,#ffffff36,#ffffff0a);transform:perspective(160px) rotateX(38deg);border-left:1px solid #fff2;border-right:1px solid #fff2}.judge{position:absolute;z-index:6;top:35%;left:0;right:0;text-align:center;font-size:38px;font-style:italic;font-weight:1000;text-shadow:0 3px 20px #000;opacity:0;transform:scale(.7)}.judge.show{animation:judge .55s ease-out}.judge.perfect{color:var(--gold)}.judge.good{color:var(--cyan)}.judge.miss{color:#ff7995}@keyframes judge{0%{opacity:0;transform:scale(.7)}30%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1)}}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:9px 0}.controls button{border:1px solid #ffffff22;background:#21182d;color:#fff;border-radius:15px;padding:8px 2px;min-height:57px}.controls b{display:block;font-size:22px}.controls span{font-size:10px;color:var(--muted)}.controls button:active{background:#5f2e70;transform:translateY(1px)}
.card{background:var(--card);border:1px solid #ffffff18;border-radius:18px;padding:14px;margin-top:10px}.setup{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setup label{font-size:11px;color:var(--muted)}select{display:block;width:100%;margin-top:5px;background:#0e0a14;color:#fff;border:1px solid #ffffff25;border-radius:10px;padding:10px}.primary{grid-column:1/-1;border:0;border-radius:13px;background:linear-gradient(100deg,var(--pink),#8e55ff);color:#fff;font-weight:900;padding:14px;box-shadow:0 8px 25px #9e2c8044}.primary:disabled{opacity:.45}
.result{text-align:center}.rank{font-size:74px;line-height:1;font-weight:1000;color:var(--gold);text-shadow:0 0 30px #ffcf5155}.result h2{margin:5px}.result p{color:var(--muted)}.recap{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0}.shot{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:linear-gradient(#633a6e,#24152c);border:1px solid #fff2}.shot svg{width:95%;height:95%;margin-top:5%}.shot b{position:absolute;bottom:4px;left:4px;right:4px;font-size:9px;color:#fff;text-shadow:0 1px 4px #000}.shot .mini-head{fill:#f5c7b3}.shot .mini-hair{fill:#392239}.shot .mini-dress{fill:#fa5fa8}.shot.midnight .mini-dress{fill:#183456}.shot.ivory .mini-dress{fill:#fff0dc}
.install{display:flex;align-items:center;gap:10px;justify-content:space-between}.install strong{font-size:14px}.install p{font-size:11px;color:var(--muted);margin:3px 0 0}.install button{flex:0 0 auto;background:#fff;color:#21152a;border:0;border-radius:11px;padding:10px;font-size:11px;font-weight:900}.howto{color:var(--muted);font-size:12px;margin:14px 5px}.howto summary{color:#fff;font-weight:700}
.runway.running{box-shadow:0 15px 70px #d24dff30}.runway.running .lights i{animation:pulse 1.2s infinite alternate}.runway.finished .haruka{animation:finale 1.1s ease-in-out}@keyframes pulse{to{opacity:.62}}@keyframes finale{50%{transform:translateX(-50%) scale(1.08);filter:drop-shadow(0 10px 30px #fff7)}}@media(max-height:730px){.runway{height:430px}.haruka{height:75%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}