:root{--ink: #05070a;--storm: #27384a;--ember: #ff8a3c;--crimson: #c2182b;--bone: #e8e1d3;--gold: #d6a84a;--serif: "Cormorant Garamond", "Iowan Old Style", "Songti SC", "STSong", "Noto Serif CJK SC", "Palatino Linotype", Georgia, serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;overflow:hidden;color:var(--bone);font-family:var(--serif);user-select:none;-webkit-user-select:none}#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;cursor:crosshair}#ui{position:fixed;inset:0;pointer-events:none;overflow:hidden}.vitals{position:absolute;left:clamp(18px,3vw,44px);bottom:clamp(18px,4vh,40px);width:clamp(220px,24vw,340px);opacity:0;transition:opacity .8s}.hud-on .vitals{opacity:1}.vitals .name{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#e8e1d3b8;margin-bottom:7px;text-shadow:0 1px 6px #000}.bar{position:relative;height:7px;background:#05070a9e;border:1px solid rgba(232,225,211,.22);transform:skew(-18deg);margin-bottom:6px;overflow:hidden;box-shadow:0 2px 10px #0009}.bar>i{position:absolute;inset:0;transform-origin:left;display:block;transition:transform .12s linear}.bar>i.lag{background:#e8e1d361;transition:transform .7s .25s ease-out}.bar.hp>i.fill{background:linear-gradient(90deg,#b9b2a4,var(--bone))}.bar.resolve{height:4px;width:78%}.bar.resolve>i.fill{background:linear-gradient(90deg,#8a6a24,var(--gold))}.bar.resolve.low>i.fill{background:var(--crimson)}.pips{display:flex;gap:9px;margin-top:10px;padding-left:3px}.pip{width:11px;height:11px;transform:rotate(45deg);border:1px solid rgba(255,138,60,.55);background:#05070a99;position:relative;overflow:hidden}.pip>i{position:absolute;inset:0;background:var(--ember);transform-origin:bottom;transform:scaleY(0)}.pip.full{box-shadow:0 0 12px 2px #ff8a3cbf;border-color:#ffd0a0}.pip.full>i{background:linear-gradient(#fff1d6,var(--ember))}.boss{position:absolute;top:clamp(18px,5vh,46px);left:50%;width:min(56vw,720px);transform:translate(-50%);text-align:center;opacity:0;transition:opacity 1s}.boss.on{opacity:1}.boss .title{font-size:clamp(17px,1.7vw,24px);letter-spacing:.32em;text-transform:uppercase;text-shadow:0 2px 12px #000,0 0 24px rgba(194,24,43,.5)}.boss .sub{font-size:12px;letter-spacing:.3em;color:#e8e1d38c;margin:2px 0 9px;text-transform:uppercase}.boss .bar.hp{height:8px}.boss .bar.hp>i.fill{background:linear-gradient(90deg,#7c0f1b,var(--crimson) 60%,#ff5a4a)}.boss .bar.poise{height:3px;width:60%;margin:0 auto}.boss .bar.poise>i.fill{background:var(--gold)}.boss.staggered .bar.poise{box-shadow:0 0 14px 2px #d6a84ae6}.tag{position:absolute;width:74px;margin-left:-37px;opacity:0;transition:opacity .25s;will-change:transform}.tag.on{opacity:.92}.tag .bar{height:4px;margin-bottom:3px}.tag .bar.hp>i.fill{background:var(--crimson)}.tag .bar.poise{height:2px;width:70%;margin-left:15%}.tag .bar.poise>i.fill{background:var(--gold)}.tag.target:before{content:"";position:absolute;left:50%;top:-13px;width:6px;height:6px;margin-left:-3px;background:var(--bone);transform:rotate(45deg);box-shadow:0 0 8px #e8e1d3cc}.finish{position:absolute;margin:-23px 0 0 -23px;width:46px;height:46px;display:grid;place-items:center;opacity:0;transition:opacity .15s}.finish.on{opacity:1}.finish span{width:34px;height:34px;display:grid;place-items:center;transform:rotate(45deg);border:1.5px solid var(--gold);background:#05070abf;box-shadow:0 0 22px 4px #d6a84aa6;animation:pulse .7s ease-in-out infinite alternate}.finish b{transform:rotate(-45deg);font:600 17px var(--serif);color:#fff3d6}@keyframes pulse{0%{transform:rotate(45deg) scale(.92)}to{transform:rotate(45deg) scale(1.1)}}.prompt{position:absolute;left:50%;bottom:clamp(70px,13vh,130px);transform:translate(-50%);max-width:80vw;text-align:center;font-size:clamp(15px,1.35vw,19px);letter-spacing:.08em;color:#e8e1d3f0;text-shadow:0 1px 10px #000,0 0 2px #000;opacity:0;transition:opacity .5s;padding:8px 22px;background:linear-gradient(90deg,transparent,rgba(5,7,10,.55) 18%,rgba(5,7,10,.55) 82%,transparent)}.prompt.on{opacity:1}.prompt kbd{font:600 .82em var(--serif);letter-spacing:.06em;padding:1px 8px;margin:0 3px;border:1px solid rgba(232,225,211,.55);border-radius:2px;color:#fff;background:#e8e1d314}.prompt .g{color:var(--gold)}.prompt .c{color:#ff5d6c}.callout{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:clamp(22px,2.6vw,40px);letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;white-space:nowrap;opacity:0;text-shadow:0 0 22px currentColor,0 2px 8px #000}.callout.show{animation:callout .9s ease-out forwards}.callout.gold{color:#ffe1a0}.callout.blue{color:#cfe6ff}.callout.red{color:#ff7a84}.callout.ember{color:#ffb070}@keyframes callout{0%{opacity:0;letter-spacing:.9em}15%{opacity:1}70%{opacity:1}to{opacity:0;letter-spacing:.5em}}.banner{position:absolute;left:50%;top:26%;width:96vw;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;opacity:0;transition:opacity 1.1s}.banner.on{opacity:1}.banner h2{margin:0;font-weight:500;font-size:clamp(26px,4vw,64px);letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;text-shadow:0 4px 30px #000,0 0 60px rgba(0,0,0,.8)}.banner p{margin:10px 0 0;font-size:clamp(13px,1.2vw,17px);letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;color:#e8e1d3b3}.banner .rule{width:180px;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.hurt{position:absolute;inset:0;box-shadow:inset 0 0 180px 40px #c2182bd9;opacity:0;transition:opacity .6s}.hurt.on{opacity:1;transition:none}.hurt.low{opacity:.35}.bars{position:absolute;left:0;right:0;height:0;background:#000;transition:height .7s ease}.bars.top{top:0}.bars.bottom{bottom:0}.cine .bars{height:10.5vh}.overlay{position:absolute;inset:0;display:none;place-items:center;text-align:center;pointer-events:auto}.overlay.on{display:grid}.overlay.start{background:radial-gradient(ellipse at 50% 40%,#05070a40,#05070ae0 75%)}.overlay.dim{background:#05070ab8;backdrop-filter:blur(3px)}.overlay h1{margin:0;font-weight:500;font-size:clamp(44px,8vw,118px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;text-shadow:0 6px 40px #000}.overlay .cn{font-size:clamp(22px,3vw,42px);letter-spacing:.6em;text-indent:.6em;color:var(--ember);margin-top:4px;text-shadow:0 0 26px rgba(255,138,60,.6)}.overlay .tag2{margin-top:18px;font-size:clamp(13px,1.2vw,17px);letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:#e8e1d3a8}.overlay h3{margin:0 0 8px;font-weight:500;font-size:clamp(30px,4.6vw,64px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase}.overlay h3.red{color:#e0424f;text-shadow:0 0 40px rgba(194,24,43,.7)}.overlay h3.goldt{color:#ffe1a0;text-shadow:0 0 40px rgba(214,168,74,.6)}.loadbar{width:min(320px,50vw);height:2px;margin:38px auto 0;background:#e8e1d329}.loadbar i{display:block;height:100%;width:0;background:var(--gold);box-shadow:0 0 10px var(--gold);transition:width .2s}.btn{pointer-events:auto;margin-top:34px;padding:13px 44px;font:500 clamp(14px,1.3vw,18px) var(--serif);letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:var(--bone);background:#05070a80;border:1px solid rgba(214,168,74,.7);cursor:pointer;transition:all .2s}.btn:hover,.btn:focus-visible{background:#d6a84a2e;box-shadow:0 0 26px #d6a84a73;color:#fff;outline:none}.btn[hidden]{display:none}.keys{margin:30px auto 0;display:grid;grid-template-columns:auto auto;gap:7px 26px;justify-content:center;text-align:left;font-size:clamp(13px,1.1vw,16px);letter-spacing:.08em;color:#e8e1d3d1}.keys b{font-weight:600;color:#fff;text-align:right;letter-spacing:.12em}.stats{display:grid;grid-template-columns:auto auto;gap:8px 36px;justify-content:center;margin-top:22px;font-size:clamp(15px,1.4vw,20px);letter-spacing:.14em}.stats span{text-align:right;color:#e8e1d39e;text-transform:uppercase;font-size:.8em;align-self:center}.stats b{text-align:left;font-weight:500}.rank{font-size:clamp(64px,9vw,120px);line-height:1;margin-top:14px;color:var(--gold);text-shadow:0 0 50px rgba(214,168,74,.7)}
