:root{--ink: #0b0e1d;--paper: #f2ead8;--paper-dim: #c9c2ae;--gold: #e8b84b;--red: #e05545;--panel: rgba(10, 13, 26, .84);--line: #4a5378}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:Hiragino Kaku Gothic ProN,Yu Gothic,system-ui,sans-serif}#app,#app canvas{position:absolute;inset:0}#hud{position:absolute;inset:0;pointer-events:none;user-select:none}.hidden{display:none!important}.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 12px}#xpwrap{position:absolute;top:0;left:0;right:0;height:10px;background:#1c2138;border-bottom:1px solid #2a3152}#xpfill{height:100%;width:0%;background:linear-gradient(90deg,#b98a2e,var(--gold));transition:width .15s ease-out}#topline{position:absolute;top:18px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:18px}#timer{font-size:30px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(0,0,0,.8)}#lvbadge{font-size:15px;color:var(--gold);font-weight:700}#kills{font-size:14px;color:var(--paper-dim)}#bossbar{position:absolute;top:68px;left:50%;transform:translate(-50%);width:min(540px,74%);text-align:center}#bossname{font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:17px;letter-spacing:.35em;color:#ffb09e;text-shadow:0 1px 6px rgba(0,0,0,.9)}#bosstrack{margin-top:4px;height:10px;background:#2a1216;border:1px solid #5c2730;border-radius:4px;overflow:hidden}#bossfill{height:100%;width:100%;background:linear-gradient(90deg,#a03028,var(--red));transition:width .12s linear}#toast{position:absolute;top:118px;left:50%;transform:translate(-50%);font-size:16px;letter-spacing:.2em;color:#ffc9b8;opacity:0;transition:opacity .3s;font-family:Hiragino Mincho ProN,Yu Mincho,serif}#toast.show{opacity:1}#buff{position:absolute;left:14px;top:54px;font-size:13px;color:#ffd23e;border-color:#7a6420;letter-spacing:.08em}#bottom{position:absolute;left:0;right:0;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:10px}#slots{display:flex;gap:8px;align-items:flex-end;min-height:48px}.slot{width:46px;height:46px;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center}.slot .kanji{font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:22px;color:var(--gold)}.slot.passive{width:36px;height:36px}.slot.passive .kanji{font-size:16px;color:#9fb4d8}.slot .pips{position:absolute;bottom:3px;left:0;right:0;display:flex;justify-content:center;gap:2px}.slot .pip{width:4px;height:4px;border-radius:50%;background:#3a4266}.slot .pip.on{background:var(--gold)}#hpwrap{display:flex;align-items:center;gap:10px}#hptrack{width:270px;height:14px;background:#331a1e;border:1px solid #5c3038;border-radius:5px;overflow:hidden}#hpfill{height:100%;width:100%;background:linear-gradient(90deg,#a03428,var(--red));transition:width .12s linear}#hptext{font-size:13px;color:var(--paper-dim);font-variant-numeric:tabular-nums}#vignette{position:absolute;inset:0;opacity:0;transition:opacity .28s;background:radial-gradient(ellipse at center,transparent 55%,rgba(190,30,24,.5) 100%)}#vignette.on{opacity:1;transition:opacity .05s}@keyframes lowhpPulse{0%,to{opacity:.18}50%{opacity:.8}}#vignette.lowhp{animation:lowhpPulse 1.1s ease-in-out infinite}#cinema{position:absolute;inset:0;pointer-events:none}#cinema:before,#cinema:after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height .55s cubic-bezier(.4,0,.2,1)}#cinema:before{top:0}#cinema:after{bottom:0}#cinema.on:before,#cinema.on:after{height:9vh}#flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(circle at center,rgba(232,184,75,.32),transparent 72%)}#flash.on{opacity:1;transition:opacity .05s}#modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,94vw);text-align:center;background:#080a14eb;border:1px solid var(--line);border-radius:10px;padding:26px 22px 18px;pointer-events:auto}#modal h2{margin:0 0 18px;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:24px;letter-spacing:.5em;color:var(--gold);font-weight:600}#cards{display:flex;gap:14px;justify-content:center}.card{flex:1;max-width:220px;padding:18px 12px 14px;background:#12172b;border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:transform .1s,border-color .1s;position:relative}.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:var(--gold);outline:none}.card .key{position:absolute;top:6px;left:8px;font-size:12px;color:var(--paper-dim);border:1px solid var(--line);border-radius:4px;padding:0 6px}.card .kanji{font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:36px;color:var(--gold);line-height:1.2}.card .name{font-size:16px;font-weight:700;margin-top:6px}.card .desc{font-size:12.5px;color:var(--paper-dim);margin-top:6px;line-height:1.6}.card .lvtext{font-size:12px;color:var(--gold);margin-top:8px;letter-spacing:.1em}#modalhint{font-size:12px;color:var(--paper-dim);margin:14px 0 0}.screen{position:absolute;inset:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0b0e1d8c,#060810eb);text-align:center}.prologue{font-size:15px;letter-spacing:.4em;color:var(--paper-dim);margin:0 0 8px}.screen h1{margin:0;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(44px,9vw,76px);font-weight:600;letter-spacing:.18em;color:var(--paper);text-shadow:0 0 30px rgba(232,184,75,.35),0 4px 14px rgba(0,0,0,.8)}.subtitle{font-size:14px;letter-spacing:.5em;color:var(--gold);margin:12px 0 26px}.controls{list-style:none;padding:0;margin:0 0 18px;font-size:14.5px;line-height:2;color:var(--paper-dim)}.goal{font-size:15px;color:var(--paper);margin:0 0 30px;letter-spacing:.1em}.screen button{pointer-events:auto;cursor:pointer;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:17px;letter-spacing:.25em;color:var(--paper);background:transparent;border:1px solid var(--gold);border-radius:4px;padding:13px 42px;transition:background .15s,color .15s}.screen button:hover{background:var(--gold);color:#1a1408}#end-message{font-size:15px;color:var(--paper-dim);margin:14px 0 20px;letter-spacing:.15em}#end-stats{font-size:15px;line-height:2.1;padding:14px 34px;margin-bottom:28px;font-variant-numeric:tabular-nums}#paused{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:19px;letter-spacing:.3em;padding:16px 34px;font-family:Hiragino Mincho ProN,Yu Mincho,serif}#mutehint{position:absolute;right:14px;bottom:12px;font-size:12px;color:#6a7292;letter-spacing:.1em}html,body{overscroll-behavior:none;touch-action:none}#topbtns{position:absolute;top:14px;right:14px;display:flex;gap:8px}#topbtns button{pointer-events:auto;cursor:pointer;height:38px;padding:0 12px;border-radius:6px;background:var(--panel);border:1px solid var(--line);color:var(--paper);font-size:12px;letter-spacing:.08em;font-family:inherit}#topbtns button:active{border-color:var(--gold)}#stick{position:absolute;left:24px;bottom:30px;width:128px;height:128px;border-radius:50%;background:#12172b80;border:1px solid rgba(90,100,150,.55);pointer-events:auto;touch-action:none}#stick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#e8b84b80;border:1px solid rgba(232,184,75,.8)}@media(pointer:coarse){#mutehint,#modalhint,.card .key{display:none}html,body{-webkit-touch-callout:none}#hud button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#topbtns{top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));gap:8px}#topbtns button{height:42px;padding:0 14px;font-size:13px;backdrop-filter:blur(8px);background:#0e1222b8}#topline{top:calc(12px + env(safe-area-inset-top));gap:8px;justify-content:flex-start;padding-left:calc(12px + env(safe-area-inset-left))}#lvbadge,#kills{font-size:11.5px;padding:3px 9px}#timer{font-size:20px;letter-spacing:.08em}#xpwrap{height:6px}#bossbar{top:calc(50px + env(safe-area-inset-top));width:min(420px,78vw)}#bossname{font-size:13px;letter-spacing:.25em}#toast{top:calc(92px + env(safe-area-inset-top));font-size:14px;letter-spacing:.12em;width:94vw;text-align:center}#buff{top:calc(48px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));font-size:11.5px}#stick{left:calc(16px + env(safe-area-inset-left));bottom:calc(24px + env(safe-area-inset-bottom));width:148px;height:148px;background:radial-gradient(circle at 35% 32%,#404c7c61,#0c101e8c);border-color:#8c9bd273;box-shadow:inset 0 0 18px #00000059;transition:border-color .15s,box-shadow .15s}#stick.active{border-color:#e8b84bb3;box-shadow:inset 0 0 22px #00000073,0 0 14px #e8b84b26}#stick-knob{width:58px;height:58px;margin:-29px 0 0 -29px;background:radial-gradient(circle at 35% 30%,#ffde8cd9,#c4943480);box-shadow:0 3px 10px #00000073}#bottom{bottom:calc(14px + env(safe-area-inset-bottom));gap:8px}#slots{gap:5px}.slot{width:34px;height:34px;border-radius:5px}.slot.passive{width:27px;height:27px}.slot .kanji{font-size:16px}.slot.passive .kanji{font-size:12px}.slot .pip{width:3px;height:3px}#hpwrap{gap:8px}#hptrack{width:min(230px,48vw);height:12px}#hptext{font-size:11px}#modal{padding:16px 14px 12px;width:min(520px,94vw);max-height:84vh;overflow-y:auto}#modal h2{font-size:19px;letter-spacing:.3em;margin-bottom:12px}#cards{flex-direction:column;gap:10px}.card{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;max-width:none;width:100%}.card .kanji{font-size:27px;width:44px;flex-shrink:0;text-align:center;line-height:1.1}.card-main{flex:1;min-width:0}.card .name{font-size:15px;margin-top:0}.card .desc{font-size:12px;margin-top:3px}.card .lvtext{font-size:11px;margin-top:4px}.screen h1{font-size:clamp(34px,11vw,54px)}}@media(pointer:coarse)and (orientation:landscape){#stick{width:122px;height:122px}#stick-knob{width:50px;height:50px;margin:-25px 0 0 -25px}#bottom{bottom:calc(10px + env(safe-area-inset-bottom))}#slots{gap:4px}.slot{width:30px;height:30px}.slot.passive{width:24px;height:24px}}@media(pointer:coarse)and (max-height:480px){.prologue{font-size:12px;margin-bottom:4px}.subtitle{font-size:11px;margin:6px 0 12px;letter-spacing:.35em}.controls{display:none}.goal{font-size:12.5px;margin-bottom:16px}.screen h1{font-size:clamp(28px,9vh,40px)}.screen button{padding:10px 28px;font-size:14px}}@media(max-width:640px)and (pointer:fine){#cards{flex-direction:column;align-items:stretch}.card{max-width:none}}