:root{--midnight: #0b0d26;--indigo: #1b1648;--violet: #3a1f5c;--sakura: #ff9cc6;--sakura-deep: #e2558f;--sakura-pale: #ffd9ea;--spirit: #aaf0ff;--lantern: #ffd98a;--text: #f3edff;--muted: #b9addb;--serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;--sans: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--midnight);color:var(--text);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--spirit);outline-offset:3px}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.menu-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.menu{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,40px);padding:max(24px,env(safe-area-inset-top)) clamp(24px,7vw,110px) max(24px,env(safe-area-inset-bottom));background:linear-gradient(90deg,#07061ad1,#07061a73 45%,#07061a00 70%);animation:rise .9s cubic-bezier(.2,.7,.2,1) both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.title-block{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}.emblem{width:clamp(64px,9vw,104px);height:auto;flex:none;filter:drop-shadow(0 0 18px rgba(255,156,198,.45));animation:turn 40s linear infinite}@keyframes turn{to{transform:rotate(360deg)}}.title{margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:.95;letter-spacing:.04em;color:#fff4fa;text-shadow:0 0 28px rgba(255,156,198,.45),0 2px 0 rgba(30,10,50,.8)}.subtitle{margin:.35em 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(1.05rem,2.2vw,1.6rem);letter-spacing:.32em;color:var(--sakura)}.vertical-jp{writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.9rem);letter-spacing:.25em;color:var(--sakura-pale);padding:.3em .25em;border-left:1px solid rgba(255,156,198,.5);opacity:.9}.menu-options{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.opt{position:relative;background:none;border:0;padding:8px 0 8px 30px;font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--muted);text-align:left;transition:color .16s,transform .16s}.opt:before{content:"";position:absolute;left:4px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--sakura);clip-path:path("M6 0C9 3 10 7 6 12C2 7 3 3 6 0Z");transform:rotate(-30deg) scale(0);transition:transform .18s}.opt:hover,.opt:focus-visible{color:#fff;transform:translate(4px)}.opt:hover:before,.opt:focus-visible:before{transform:rotate(-30deg) scale(1)}.opt-primary{font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700;color:#fff}.opt-primary:before{transform:rotate(-30deg) scale(1)}.progress{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;font-size:.85rem;color:var(--muted)}.progress div{display:flex;gap:8px;align-items:baseline}.progress dt{margin:0}.progress dd{margin:0;color:var(--lantern);font-weight:700;font-size:1.05rem}.sheet-wrap{position:relative;z-index:1;height:100%;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));background:#0605168c}.sheet{width:min(760px,100%);margin:auto;padding:clamp(22px,4vw,40px);background:linear-gradient(180deg,#1b1648f0,#100c2cf5);border-left:3px solid var(--sakura);box-shadow:0 30px 80px #00000080;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}.sheet h2{margin:0 0 .6em;font-family:var(--serif);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.15;color:#fff4fa}.sheet h3{margin:1.2em 0 .5em;font-family:var(--serif);font-size:1.1rem;color:var(--sakura-pale)}.sheet h3:first-child{margin-top:0}.lede{margin:0 0 1.4em;max-width:62ch;line-height:1.7;color:#ded5f7}.sheet p{line-height:1.65;color:#d4cbee}.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.keys,.tips{list-style:none;margin:0;padding:0}.keys li{display:grid;grid-template-columns:9.5em 1fr;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#d4cbee}.tips li{position:relative;padding:5px 0 5px 18px;line-height:1.55;color:#d4cbee}.tips li:before{content:"";position:absolute;left:2px;top:.85em;width:6px;height:6px;background:var(--sakura);transform:rotate(45deg)}kbd{display:inline-block;min-width:1.9em;margin-right:4px;padding:2px 7px;font-family:var(--sans);font-size:.82rem;font-weight:700;text-align:center;color:#fff;background:#ffffff14;border:1px solid rgba(255,156,198,.45);border-bottom-width:3px;border-radius:4px}.sheet-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btn{padding:11px 22px;font-weight:700;background:transparent;border:1px solid rgba(255,156,198,.55);border-radius:2px;transition:background .15s,transform .15s}.btn:hover{background:#ff9cc61f}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--sakura);border-color:var(--sakura);color:#2a0d26}.btn-primary:hover{background:#ffb3d4}.btn-danger{border-color:#ff6f8f;color:#ffc2d0}.setting{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}.setting-text{display:flex;flex-direction:column;gap:3px}.setting-label{font-weight:700}.setting-desc{font-size:.86rem;color:var(--muted)}.confirm{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;width:48px;height:26px;border-radius:13px;background:#ffffff24;position:relative;cursor:pointer;transition:background .16s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .16s}.switch:checked{background:var(--sakura-deep)}.switch:checked:after{transform:translate(22px)}.segmented{display:flex;flex:none;border:1px solid rgba(255,156,198,.45)}.seg{padding:7px 14px;background:none;border:0;color:var(--muted);font-weight:700}.seg.on{background:var(--sakura);color:#2a0d26}.result-kicker{margin:0 0 4px;font-family:var(--serif);font-size:1.1rem;letter-spacing:.4em;color:var(--sakura)}.result.lost .result-kicker{color:#c9a7ff}.result.lost{border-left-color:#9a6cff}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;background:#ffffff14}.stats div{padding:14px 16px;background:#100c2cf5}.stats dt{font-size:.82rem;color:var(--muted)}.stats dd{margin:4px 0 0;font-size:1.5rem;font-weight:700;color:var(--lantern)}.game-shell{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#05041a;touch-action:none;user-select:none;-webkit-user-select:none}.stage{position:relative;width:min(100vw,calc(100vh * 16 / 9));width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16 / 9}.game-canvas{display:block;width:100%;height:100%}.pause-btn{position:absolute;top:2.6%;right:1.6%;width:clamp(38px,5vw,50px);height:clamp(38px,5vw,50px);display:grid;place-items:center;background:#0e0a24c7;border:1px solid rgba(255,156,198,.6);border-radius:50%;color:var(--sakura-pale)}.pause-btn svg{width:55%;height:55%}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0604169e;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.pause-panel{display:flex;flex-direction:column;align-items:flex-start;min-width:min(320px,80%);padding:26px 32px;background:#141034f2;border-left:3px solid var(--sakura)}.pause-panel h2{margin:0 0 10px;font-family:var(--serif);font-size:1.8rem}.pause-note{margin:12px 0 0;font-size:.8rem;color:var(--muted);max-width:28ch}.touch-controls{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));pointer-events:none}.touch-group{display:flex;gap:12px;align-items:flex-end;pointer-events:auto}.touch-btn{width:clamp(58px,9vw,74px);height:clamp(58px,9vw,74px);display:grid;place-items:center;align-content:center;gap:1px;border-radius:50%;background:#140e348c;border:1.5px solid rgba(255,217,234,.45);color:#fff;touch-action:none;-webkit-touch-callout:none;transition:transform 80ms,background 80ms}.touch-btn.held{transform:scale(.92);background:#ff9cc666}.touch-btn.accent{width:clamp(68px,10.5vw,86px);height:clamp(68px,10.5vw,86px);border-color:var(--sakura)}.touch-btn.small{width:clamp(50px,7.5vw,62px);height:clamp(50px,7.5vw,62px);border-color:var(--spirit);margin-bottom:30px}.touch-label{font-size:.62rem;font-weight:700;opacity:.8}.rotate-hint{display:none}@media (orientation: portrait) and (max-width: 700px){.rotate-hint{display:block;position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;right:16px;padding:10px 14px;text-align:center;font-size:.85rem;background:#140e34d9;border-left:3px solid var(--sakura)}.stage{margin-bottom:30vh}}.setting-voice{flex-direction:column;align-items:stretch}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer}.voice-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px}.voice-msg{flex:1 1 260px;margin:0;font-size:.86rem;line-height:1.5}.voice-msg.ok{color:var(--spirit)}.voice-msg.warn{color:#ffc2d0}.voice-msg.muted{color:var(--muted)}.btn-small{padding:7px 14px;font-size:.88rem}.voice-test-line{flex-basis:100%;margin:0;font-size:.9rem;color:var(--sakura-pale)}.voice-test-line [lang=ja]{font-family:var(--serif);font-weight:700;margin-right:6px}.subtitles{position:fixed;left:50%;bottom:max(9vh,64px);z-index:20;transform:translate(-50%);width:max-content;max-width:min(640px,86vw);display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px 12px;text-align:center;background:linear-gradient(90deg,#08061c00,#08061cd1 18%,#08061cd1 82%,#08061c00);pointer-events:none;animation:sub-in .38s ease-out both}.subtitles.in-game{bottom:max(15vh,84px)}@keyframes sub-in{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}.sub-speaker{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--sakura)}.sub-speaker [lang=ja]{font-family:var(--serif);margin-right:3px}.sub-speaker.sp-yuki{color:var(--spirit)}.sub-speaker.sp-kurogane{color:#ff8fb0}.sub-ja{font-family:var(--serif);font-weight:700;font-size:clamp(1.05rem,2.3vw,1.45rem);color:#fff6fb;text-shadow:0 0 14px rgba(255,156,198,.35),0 1px 2px #000}.sub-en{font-size:clamp(.8rem,1.6vw,.98rem);color:#e2dbf7;text-shadow:0 1px 2px #000}.voice-notice{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;z-index:21;transform:translate(-50%);max-width:min(520px,88vw);padding:9px 16px;font-size:.85rem;text-align:center;background:#140e34eb;border-left:3px solid #ffc2d0;pointer-events:none}@media (max-width: 720px){.howto-grid{grid-template-columns:1fr;gap:8px}.stats{grid-template-columns:repeat(2,1fr)}.keys li{grid-template-columns:8.5em 1fr}.vertical-jp{display:none}.menu{background:linear-gradient(180deg,#07061a8c,#07061ad9)}}@media (max-height: 460px){.menu{gap:14px}.title{font-size:clamp(2rem,6vw,3.4rem)}.opt{padding:4px 0 4px 30px}.opt-primary{font-size:1.4rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
