:root{--ink:#f3ead8;--ink-dim:#f3ead89e;--ink-faint:#f3ead852;--gold:#e6b567;--gold-hi:#ffd796;--fly:#6ff2ff;--night:#05070d;--panel:#090b149e;--serif:"Cormorant Garamond", "Shippori Mincho", Georgia, serif;--jp:"Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif}*{box-sizing:border-box}html,body{background:var(--night);height:100%;color:var(--ink);font-family:var(--serif);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;margin:0;overflow:hidden}#app{position:fixed;inset:0;container:app/size}#app.rotated{transform-origin:0 0;inset:0 auto auto 100%;transform:rotate(90deg)}#app canvas{width:100%;height:100%;display:block}.ui{pointer-events:none;font-family:var(--serif);position:absolute;inset:0}.ui.touch .only-desk,.ui:not(.touch) .only-touch{display:none}.hidden{visibility:hidden;opacity:0!important;pointer-events:none!important}.loading{z-index:50;background:radial-gradient(at 50% 60%,#121829 0%,#05070d 70%);flex-direction:column;justify-content:center;align-items:center;gap:14px;transition:opacity 1.1s;display:flex;position:absolute;inset:0}.loading.fade-out{opacity:0}.loading-mark{letter-spacing:.04em;color:var(--gold-hi);text-shadow:0 0 24px #ffbe6e59;font-size:clamp(34px,6vw,60px);font-style:italic;font-weight:500}.loading-sub{font-family:var(--jp);letter-spacing:.3em;color:var(--ink-dim);font-size:14px;animation:2.4s ease-in-out infinite breathe}.title{pointer-events:auto;cursor:pointer;background:linear-gradient(90deg,#03040a8c 0%,#03040a2e 45%,#03040a00 70%);transition:opacity 1.2s,visibility 1.2s;position:absolute;inset:0}.title-inner{max-width:min(560px,86vw);position:absolute;top:50%;left:clamp(20px,7vw,110px);transform:translateY(-50%)}.title-kicker{letter-spacing:.35em;text-transform:lowercase;color:var(--gold);opacity:.9;font-size:clamp(15px,1.6vw,20px);font-style:italic}.logo{letter-spacing:-.01em;color:var(--ink);text-shadow:0 0 40px #ffc8822e,0 2px #0000004d;margin:4px 0 6px;font-size:clamp(64px,11vw,150px);font-weight:500;line-height:.95}.logo span{color:var(--gold-hi);text-shadow:0 0 34px #ffbe6473;font-style:italic}.title-stage{letter-spacing:.08em;color:var(--ink-dim);font-size:clamp(15px,1.5vw,19px)}.title-stage .jp{font-family:var(--jp);letter-spacing:.2em;margin-left:4px;font-size:.85em}.title-start{font-family:var(--jp);letter-spacing:.22em;color:var(--ink);margin-top:clamp(28px,5vh,54px);font-size:clamp(13px,1.3vw,16px)}.blink{animation:2.2s ease-in-out infinite breathe}.title-help{font-family:var(--jp);letter-spacing:.08em;color:var(--ink-faint);margin-top:14px;font-size:12px;line-height:1.8}.title-best{letter-spacing:.18em;color:var(--ink-faint);font-size:14px;position:absolute;bottom:20px;right:24px}@keyframes breathe{0%,to{opacity:.35}50%{opacity:1}}.hud{padding:max(14px, env(safe-area-inset-top)) clamp(14px, 2.4vw, 30px) 0;align-items:center;gap:clamp(12px,2vw,28px);transition:opacity .8s;display:flex;position:absolute;top:0;left:0;right:0}.flies{letter-spacing:.04em;min-width:64px;color:var(--ink);text-shadow:0 1px 6px #0009;align-items:center;gap:9px;font-size:22px;font-weight:600;display:flex}.flies.pulse .fly-dot{animation:.45s ease-out flypulse}.fly-dot{background:var(--fly);border-radius:50%;width:10px;height:10px;box-shadow:0 0 10px 3px #6ff2ff8c,0 0 22px 6px #6ff2ff33}@keyframes flypulse{0%{transform:scale(2.2)}to{transform:scale(1)}}.progress{background:#f3ead824;border-radius:2px;flex:1;height:2px;position:relative}.progress-fill{background:linear-gradient(90deg,#e6b56733,#ffd796d9);border-radius:2px;width:0;position:absolute;top:0;bottom:0;left:0}.progress-cat{width:30px;height:18px;fill:var(--ink);filter:drop-shadow(0 0 4px #000c);position:absolute;top:-15px;transform:translate(-50%)}.progress-cat svg{width:100%;height:100%}.tick{background:#f3ead847;border-radius:2px;width:6px;height:10px;margin-left:-3px;transition:background .6s,box-shadow .6s;position:absolute;top:-4px}.tick.lit{background:var(--gold-hi);box-shadow:0 0 10px 2px #ffbe6499}.hud-btns{gap:8px;display:flex}.icon-btn{pointer-events:auto;cursor:pointer;background:#06081059;border:1px solid #f3ead838;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;transition:background .2s,border-color .2s;display:grid}.icon-btn:hover{background:#1e1e288c;border-color:#ffd79699}.icon-btn svg{width:20px;height:20px;fill:var(--ink);stroke:var(--ink)}.cue{text-align:center;opacity:0;text-shadow:0 2px 12px #000000d9;white-space:nowrap;transition:opacity .6s,transform .6s;position:absolute;top:17%;left:50%;transform:translate(-50%,8px)}.cue.show{opacity:1;transform:translate(-50%)}.cue-main{font-family:var(--jp);letter-spacing:.16em;font-size:clamp(15px,1.7vw,21px)}.cue-sub{letter-spacing:.2em;color:var(--gold);margin-top:4px;font-size:clamp(13px,1.3vw,16px);font-style:italic}.chapter{opacity:0;text-shadow:0 2px 14px #000c;transition:opacity 1.1s;position:absolute;bottom:16%;left:clamp(20px,6vw,90px)}.chapter.show{opacity:1}.chapter-line{background:var(--gold);width:64px;height:1px;margin-bottom:12px}.chapter-main{letter-spacing:.04em;font-size:clamp(26px,3.4vw,44px);font-style:italic}.chapter-sub{font-family:var(--jp);letter-spacing:.4em;color:var(--ink-dim);margin-top:4px;font-size:clamp(13px,1.3vw,16px)}.toast{font-family:var(--jp);letter-spacing:.3em;opacity:0;text-shadow:0 2px 16px #000000e6;font-size:clamp(20px,2.6vw,32px);transition:opacity .4s,transform .6s;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)scale(.96)}.toast.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.overlay{pointer-events:auto;background:#03040961;place-items:center;transition:opacity .5s,visibility .5s;display:grid;position:absolute;inset:0}.panel{background:var(--panel);-webkit-backdrop-filter:blur(10px);border:1px solid #ffd79638;border-radius:4px;flex-direction:column;align-items:stretch;gap:10px;min-width:min(340px,88vw);padding:30px 34px;display:flex;box-shadow:0 20px 60px #00000080}.panel-title{text-align:center;color:var(--gold-hi);margin-bottom:8px;font-size:34px;font-style:italic}.btn{pointer-events:auto;cursor:pointer;font-family:var(--jp);letter-spacing:.2em;color:var(--ink);background:linear-gradient(#ffd79633,#e6b5671a);border:1px solid #ffd796b3;border-radius:2px;padding:12px 18px;font-size:15px;transition:background .2s,transform .1s}.btn:hover{background:linear-gradient(#ffd79657,#e6b5672e)}.btn:active{transform:scale(.98)}.btn.ghost{color:var(--ink-dim);background:0 0;border-color:#f3ead838}.result{background:linear-gradient(#03040900 0%,#03040973 60%);place-items:center end;padding-right:clamp(16px,7vw,110px)}.result-panel{min-width:min(380px,90vw);animation:1s both rise}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.result-kicker{letter-spacing:.3em;text-transform:uppercase;color:var(--gold);text-align:center;font-size:13px}.result-title{text-align:center;font-size:46px;font-style:italic;line-height:1.05}.result-jp{font-family:var(--jp);letter-spacing:.2em;color:var(--ink-dim);text-align:center;margin-bottom:4px;font-size:13px}.rank{text-align:center;color:var(--gold-hi);text-shadow:0 0 30px #ffc87873;font-size:78px;font-style:italic;line-height:1}.rank-s{color:#fff3d6;text-shadow:0 0 34px #ffdc96cc,0 0 70px #ffb45a66}.rank-c{color:var(--ink-dim);text-shadow:none}.rank-wrap{isolation:isolate;place-items:center;display:grid;position:relative}.rank-wrap.celebrate .rank{animation:.55s cubic-bezier(.2,1.6,.4,1) .6s both rank-stamp}@keyframes rank-stamp{0%{opacity:0;filter:blur(6px);transform:scale(2.4)}60%{opacity:1;filter:blur()brightness(1.8)}to{opacity:1;filter:none;transform:none}}.rank-wrap.celebrate:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffd69673,#ffbe6e00 65%);border-radius:50%;width:1.6em;height:1.6em;font-size:78px;animation:1.4s ease-out .75s both rank-flash;position:absolute}@keyframes rank-flash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}to{opacity:.35;transform:scale(1)}}.rank-wrap:has(.rank-s):after{content:"";background:repeating-conic-gradient(#ffe2aa29 0 6deg, transparent 6deg 30deg);pointer-events:none;z-index:-1;border-radius:50%;width:170px;height:170px;animation:14s linear infinite rank-rays,1.2s .8s both fade-in;position:absolute;-webkit-mask:radial-gradient(circle,#000 20%,#0000 70%);mask:radial-gradient(circle,#000 20%,#0000 70%)}@keyframes rank-rays{to{rotate:360deg}}@keyframes fade-in{0%{opacity:0}}.rank-sparks{pointer-events:none;position:absolute;inset:50% auto auto 50%}.rank-sparks i{opacity:0;width:5px;height:5px;animation:spark 1.1s ease-out calc(.72s + var(--d)) both;background:#fff1cf;border-radius:50%;margin:-2.5px;position:absolute;box-shadow:0 0 8px 2px #ffc878cc}@keyframes spark{0%{opacity:1;transform:rotate(var(--a)) translateX(10px) scale(1.2)}to{opacity:0;transform:rotate(var(--a)) translateX(78px) scale(.3)}}.rank-p{color:#eafcff;text-shadow:0 0 26px #96ebffe6,0 0 70px #6ff2ff73;position:relative}.rank-p:before{content:"";filter:drop-shadow(0 0 6px #96ebffe6);border-radius:50%;width:.34em;height:.34em;margin-left:-.17em;position:absolute;top:-.3em;left:50%;rotate:40deg;box-shadow:.07em -.03em #eafcff}.rank-wrap:has(.rank-p){padding-top:.26em;font-size:78px}.rank-wrap:has(.rank-p) .rank{font-size:1em}.rank-wrap:has(.rank-p):after{content:"";background:repeating-conic-gradient(#aaf0ff33 0 5deg, transparent 5deg 20deg);pointer-events:none;z-index:-1;border-radius:50%;width:210px;height:210px;animation:18s linear infinite rank-rays,1.2s .8s both fade-in;position:absolute;-webkit-mask:radial-gradient(circle,#000 20%,#0000 70%);mask:radial-gradient(circle,#000 20%,#0000 70%)}.rank-wrap:has(.rank-p).celebrate:before{background:radial-gradient(circle,#aaf0ff80,#6ff2ff00 65%)}.rank-wrap:has(.rank-p) .rank-sparks i{background:#eafcff;box-shadow:0 0 8px 2px #6ff2ffd9}.medal-name{text-align:center;letter-spacing:.45em;text-transform:uppercase;color:#bff6ff;text-shadow:0 0 10px #6ff2ffcc;margin-top:-2px;font-size:13px;animation:1s 1.1s both fade-in}.result-panel.perfect-night{border-color:#bef5ff99;box-shadow:0 0 60px #6ff2ff47,inset 0 0 40px #6ff2ff14}.result-panel.perfect{border-color:#6ff2ff73;box-shadow:0 0 40px #6ff2ff2e,inset 0 0 30px #6ff2ff0f}.stats .all-flies b{color:var(--fly);text-shadow:0 0 10px #6ff2ffb3}.perfect-badge{text-align:center;letter-spacing:.28em;background:linear-gradient(90deg,#6ff2ff 0%,#e8feff 45%,#6ff2ff 55%,#3fb8d8 100%) 0 0/250% 100%;color:#0000;filter:drop-shadow(0 0 8px #6ff2ff8c);-webkit-background-clip:text;background-clip:text;font-style:italic;animation:3s linear infinite shimmer,1s 1s both fade-in}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-150% 0}}.stats .miss-row{justify-content:flex-start;align-items:baseline}.miss-n{margin-left:14px;font-size:1.25em}.miss-kinds{font-family:var(--jp);letter-spacing:.05em;margin-left:12px}.miss-kinds.nomiss{color:var(--gold)}.stats{gap:6px;margin:6px 0 10px;display:grid}.stats div{border-bottom:1px solid #f3ead81a;justify-content:space-between;padding:4px 0;font-size:18px;display:flex}.stats span{color:var(--ink-dim);letter-spacing:.12em}.stats small{color:var(--ink-faint);font-size:.75em}.newbest{text-align:center;color:var(--fly);letter-spacing:.3em;text-shadow:0 0 12px #6ff2ff99;font-style:italic}.result-btns{flex-direction:column;gap:8px;display:flex}@media (orientation:portrait) and (max-width:820px){#app:not(.rotated) .title-inner{top:16%;transform:none}#app:not(.rotated) .title{background:linear-gradient(#03040a99 0%,#03040a33 55%,#03040a00 75%)}}.overlay{overflow-y:auto}@container app (height<=560px){.panel{gap:6px;max-height:calc(100% - 16px);padding:14px 22px}.result-title{font-size:30px}.result-jp{margin-bottom:0}.rank,.rank-wrap.celebrate:before{font-size:46px}.rank-wrap:has(.rank-s):after{width:110px;height:110px}.rank-wrap:has(.rank-p){font-size:46px}.rank-wrap:has(.rank-p):after{width:130px;height:130px}.medal-name{font-size:11px}.stats{gap:2px;margin:2px 0 4px}.stats div{padding:2px 0;font-size:15px}.result-btns{flex-direction:row}.result-btns .btn{flex:1}.btn{padding:9px 14px;font-size:14px}.panel-title{margin-bottom:2px;font-size:26px}}@container app (height<=380px){.result-kicker,.result-jp{display:none}.rank{font-size:38px}.rank-wrap:has(.rank-p){font-size:38px}}@media (max-width:640px){.result{place-items:end center;padding:0 0 24px}.title-help{display:none}.flies{font-size:18px}}.result.behind{visibility:hidden}.title-rank{padding:8px 18px;font-size:14px;position:absolute;bottom:16px;left:24px}.ranking{background:#0304099e}.ranking-panel{flex-direction:column;width:min(520px,92vw);max-height:calc(100% - 32px);display:flex}.ranking-panel .panel-title{text-align:center;margin-bottom:0}.rk-sub{text-align:center;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-size:13px}.rk-form.hidden{display:none}.rk-label{font-family:var(--jp);letter-spacing:.12em;color:var(--ink-dim);margin-bottom:6px;font-size:13px}.rk-entry{gap:8px;display:flex}.rk-name{-webkit-user-select:text;user-select:text;touch-action:manipulation;min-width:0;color:var(--ink);font-family:var(--jp);background:#00000059;border:1px solid #ffd79659;border-radius:3px;outline:none;flex:1;padding:9px 12px;font-size:16px}.rk-name:focus{border-color:var(--gold)}.rk-entry .btn{padding:9px 18px}.rk-msg{min-height:1.2em;font-family:var(--jp);color:var(--fly);text-align:center;font-size:13px}.rk-msg:empty{display:none}.rk-msg.error,.rk-note.error{color:#ff9f8a}.rk-list{overscroll-behavior:contain;flex:1;min-height:60px;overflow-y:auto}.rk-line{border-bottom:1px solid #f3ead814;grid-template-columns:2.2em minmax(0,1fr) 3em 3.2em 2.6em 4.6em;align-items:baseline;gap:6px;padding:5px 4px;font-size:16px;display:grid}.rk-line>span:nth-child(n+3){text-align:right}.rk-head{letter-spacing:.12em;color:var(--ink-faint);border-bottom-color:#f3ead82e;font-size:12px}.rk-line.me{box-shadow:inset 2px 0 0 var(--fly);background:#6ff2ff14}.rk-pos{color:var(--ink-dim);font-style:italic}.rk-nm{font-family:var(--jp);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.rk-rank{color:var(--gold-hi);font-style:italic}.rk-rank.rk-c{color:var(--ink-dim)}.rk-rank.rk-p{color:#eafcff;text-shadow:0 0 10px #6ff2ffcc;white-space:nowrap}.rk-moon{fill:currentColor;vertical-align:-.05em;width:.8em;height:.8em;margin-right:1px}.rk-ff.all{color:var(--fly)}.rk-ms.zero{color:var(--gold)}.rk-tm{font-variant-numeric:tabular-nums;color:var(--ink-dim)}.rk-gap{text-align:center;color:var(--ink-faint);padding:2px 0;line-height:1}.rk-note{font-family:var(--jp);color:var(--ink-dim);text-align:center;padding:10px 0 4px;font-size:13px}@container app (height<=560px){.ranking-panel{max-height:calc(100% - 12px)}.rk-sub,.rk-label{display:none}.rk-line{padding:3px 4px;font-size:14px}.title-rank{padding:6px 14px;bottom:10px;left:14px}}.btn-pair{gap:8px;display:flex}.btn-pair .btn{flex:1}.share{background:#030409a8}.share-panel{width:min(640px,94vw);max-height:calc(100% - 24px)}.share-panel .panel-title{text-align:center;margin-bottom:0}.share-frame{aspect-ratio:1200/675;background:#00000059;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #00000080}.share-img{object-fit:contain;width:100%;height:100%;display:block}.share-img:not([src]){visibility:hidden}.share-btns{grid-template-columns:1fr 1fr;gap:8px;display:grid}.share-btns .hidden-btn{display:none}.share-msg{min-height:1.2em;font-family:var(--jp);color:var(--ink-dim);text-align:center;font-size:13px}.share-msg:empty{display:none}@container app (height<=560px){.share-panel{width:min(560px,94vw)}.share-panel .panel-title{display:none}.share-frame{width:min(100%,81.7778cqh);margin:0 auto}.result-btns .btn-pair{flex:2}.share-btns{grid-template-columns:repeat(4,auto);justify-content:center}}.title-collars{pointer-events:none;justify-items:center;gap:6px;display:grid;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.collar-row{pointer-events:auto;gap:12px;display:flex}.collar-dot{background:var(--c);width:22px;height:22px;box-shadow:0 0 10px color-mix(in srgb, var(--c) 45%, transparent);cursor:pointer;border:1px solid #f3ead84d;border-radius:50%;padding:0;transition:transform .2s,box-shadow .2s}.collar-dot.sel{border-color:var(--ink);box-shadow:0 0 0 3px #f3ead824, 0 0 14px color-mix(in srgb, var(--c) 70%, transparent);transform:scale(1.22)}.collar-dot.locked{box-shadow:none;background:#141620d9;border-style:dashed;position:relative}.collar-dot.locked:after{content:"";background:var(--c);opacity:.28;border-radius:50%;position:absolute;inset:6px}.collar-cap{min-height:1.2em;font-family:var(--jp);letter-spacing:.16em;color:var(--ink-faint);text-align:center;white-space:nowrap;font-size:13px}.collar-cap.hint{color:var(--gold-hi);letter-spacing:.06em}.new-collar{text-align:center;font-family:var(--jp);letter-spacing:.12em;color:var(--gold-hi);text-shadow:0 0 10px #ffc87873;font-size:14px;animation:1s 1.3s both fade-in}@container app (height<=560px){.title-collars{bottom:10px}.collar-dot{width:19px;height:19px}}.coat-row{pointer-events:auto;gap:12px;margin-bottom:2px;display:flex}.coat-dot{width:20px;height:20px}