:root{--ink: #f3ead6;--dim: #b8ab90;--gold: #e3b95a;--red: #c0392b;--panel: rgba(12, 14, 22, .78);--line: rgba(227, 185, 90, .35)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0d1424;color:var(--ink);font-family:"Noto Serif SC",serif;-webkit-user-select:none;user-select:none}canvas#view{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}button{font:inherit;color:var(--ink);background:#1e1a14cc;border:1px solid var(--line);padding:10px 22px;cursor:pointer;letter-spacing:.15em}button:hover{border-color:var(--gold);color:#fff}button.primary{background:linear-gradient(#8a2018,#5a120c);border-color:var(--gold);font-size:20px;padding:12px 40px}.logo{font-family:Ma Shan Zheng,serif;font-size:min(26vw,160px);line-height:1;color:#f6eedb;text-shadow:0 0 30px rgba(255,120,60,.35),4px 4px 0 #6b1810}#loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#0d1424;z-index:50;transition:opacity .6s}#loading.done{opacity:0;pointer-events:none}#loading .bar{width:min(320px,70vw);height:3px;background:#222}#loadbar{height:100%;width:0;background:var(--gold);transition:width .2s}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;z-index:10}.screen.on{display:flex}#title{background:radial-gradient(ellipse at center,#0000 30%,#050810bf)}#title .sub{letter-spacing:.4em;color:var(--dim);font-size:14px;text-align:center}#title .hint{color:var(--dim);font-size:12px;opacity:.7}#select,#pause,#result{background:#06080eb8;overflow-y:auto;justify-content:flex-start;padding-top:max(4vh,16px)}h2{font-family:Ma Shan Zheng,serif;font-size:40px;margin:0;letter-spacing:.3em;color:var(--gold);font-weight:400}#heroes{display:grid;grid-template-columns:repeat(4,minmax(0,220px));gap:14px;width:100%;justify-content:center}@media(max-width:900px){#heroes{grid-template-columns:repeat(2,minmax(0,1fr))}}.hero{text-align:left;background:var(--panel);padding:16px;letter-spacing:.05em;display:flex;flex-direction:column;gap:6px}.hero.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 24px #e3b95a40;background:#3c160ed9}.wname{font-family:Ma Shan Zheng,serif;font-size:30px;color:var(--gold)}.wname span{font-family:"Noto Serif SC",serif;font-size:11px;color:var(--dim);margin-left:8px;letter-spacing:.1em}.hname{font-size:18px;font-weight:700}.htitle{font-size:12px;color:var(--dim)}.blurb{font-size:13px;line-height:1.6;min-height:42px}.stats{font-size:12px;color:var(--dim)}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.label{color:var(--dim);letter-spacing:.3em}#levels{display:flex;gap:8px;flex-wrap:wrap}.lvl.sel{border-color:var(--gold);background:#5a1e12e6}.keys{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;max-width:760px;font-size:13px;color:var(--dim)}.keys button{padding:2px 10px;font-size:13px;letter-spacing:.05em}.keys b{color:var(--ink);border:1px solid var(--line);padding:0 6px;margin-right:4px;font-weight:400}#rtitle{font-family:Ma Shan Zheng,serif;font-size:140px;line-height:1;margin-top:8vh}#rtitle.win{color:var(--gold);text-shadow:0 0 40px rgba(227,185,90,.5)}#rtitle.lose{color:#8a8a96}#rquote{font-size:20px;text-align:center}#rscore{color:var(--dim)}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:none;z-index:5}#hud.on{display:block}.side{position:absolute;top:14px;width:min(40vw,460px);display:flex;flex-direction:column;gap:5px}.side.left{left:16px}.side.right{right:16px;align-items:flex-end}.name{display:flex;align-items:baseline;gap:10px;font-size:18px;font-weight:700;text-shadow:0 2px 4px #000}.name small{font-size:12px;font-weight:400;color:var(--dim)}.name em{font-style:normal;color:var(--gold);font-size:14px;letter-spacing:2px}.hp{position:relative;width:100%;height:16px;background:#0009;border:1px solid var(--line)}.hp div{position:absolute;top:0;bottom:0}.left .hp div{left:0}.right .hp div{right:0}.hp .lag{background:#e8d8a0;opacity:.6}.hp .fill{background:linear-gradient(#d9483a,#8f1d14);transition:width .08s}.rage{width:70%;height:6px;background:#0009;position:relative}.rage div{height:100%;background:linear-gradient(90deg,#c87a18,#ffd36a)}.right .rage div{margin-left:auto}.rage.full{box-shadow:0 0 10px #ffd36a;animation:pulse .6s infinite alternate}.guard{width:45%;height:3px;background:#00000080}.guard div{height:100%;background:#7fb8e8}.right .guard div{margin-left:auto}@keyframes pulse{to{filter:brightness(1.5)}}#timer{position:absolute;top:12px;left:50%;transform:translate(-50%);font-family:Ma Shan Zheng,serif;font-size:44px;text-shadow:0 2px 6px #000}#combo{position:absolute;left:6vw;top:34%;font-family:Ma Shan Zheng,serif;font-size:46px;color:var(--gold);text-shadow:0 3px 8px #000;opacity:0;transition:opacity .2s}#combo.on{opacity:1}#ragehint{position:absolute;bottom:24px;left:50%;transform:translate(-50%);color:#ffd36a;letter-spacing:.3em;opacity:0;text-shadow:0 0 12px #c87a18}#ragehint.on{opacity:1;animation:pulse .5s infinite alternate}#banner{position:fixed;left:0;right:0;top:36%;text-align:center;font-family:Ma Shan Zheng,serif;font-size:54px;color:var(--ink);text-shadow:0 0 20px rgba(0,0,0,.9),3px 3px 0 #6b1810;opacity:0;transform:scale(1.3);transition:opacity .2s,transform .25s;pointer-events:none;z-index:6}#banner.on{opacity:1;transform:scale(1)}#banner.big{font-size:min(22vw,120px)}#banner.win{color:var(--gold)}#banner.lose{color:#9a9aa6}@media(max-width:600px){.name{font-size:14px}.name small{display:none}#timer{font-size:32px}}#guide{position:fixed;top:0;right:0;bottom:0;left:0;display:none;z-index:30;background:#04060cf2;overflow-y:auto;padding:16px}#guide.on{display:flex}#guide .gbox{margin:auto;max-width:820px;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}#guide .gcols{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;width:100%}@media(max-width:700px){#guide .gcols{grid-template-columns:1fr}}#guide h3{font-size:15px;color:var(--gold);letter-spacing:.3em;margin:8px 0;font-weight:400;border-bottom:1px solid var(--line);padding-bottom:4px}#guide dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}#guide dt{white-space:nowrap;color:var(--dim)}#guide dd{margin:0}#guide b{color:var(--ink);border:1px solid var(--line);padding:0 6px;font-weight:400}#guide ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--dim)}#guide em{font-style:normal;color:var(--ink)}