:root{box-sizing:border-box;
 --ink:#efe4cf;--dim:#b3a58b;--paper:#17131a;--panel:rgba(27,21,26,.94);--edge:rgba(232,183,90,.38);--gold:#e8b75a;
 --BLOOD:#e0493c;--VOLT:#46d8ea;--CHROME:#e3dccb;--IRON:#d8963f;--GHOST:#ad92f5;--RAIN:#e8b75a;
 --common:#b3a58b;--rare:#7db8ff;--legendary:#ff9b3d;
 --serif:'EB Garamond',Garamond,'Times New Roman','Noto Serif SC','Songti SC',serif;
 --display:'Oswald','Arial Narrow',Impact,'Noto Sans SC','PingFang SC',sans-serif;}
/* The painting is always a night scene, so both themes keep the dark palette */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#17131a;--ink:#efe4cf}}
:root[data-theme="dark"],:root[data-theme="light"]{--paper:#17131a;--ink:#efe4cf}
:root[lang="zh"]{--serif:'Noto Serif SC','Songti SC','SimSun','EB Garamond',serif;--display:'Noto Sans SC','PingFang SC','Microsoft YaHei','Oswald',sans-serif}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--serif);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,.focused{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.4;cursor:not-allowed}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}

/* HUD */
#hud{position:fixed;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;z-index:5;pointer-events:none}
#hud button{pointer-events:auto}
.hp{position:relative;width:min(50vw,270px);height:20px;background:#2b1719;border:2px solid rgba(239,228,207,.4);transform:skewX(-10deg);overflow:hidden}
#hpf{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#7d1d1a,#c7402f 60%,#e8764a);transition:width .12s}
#hpf::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.08) 0 3px,transparent 3px 9px)}
#hpt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--display);letter-spacing:.05em;transform:skewX(10deg);text-shadow:0 1px 2px #000}
.meta{margin-top:6px;font:500 13px/1.2 var(--display);letter-spacing:.04em;color:var(--dim);text-shadow:0 1px 3px #000}
.meta b{color:var(--ink);font-weight:700}
#chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;max-width:60vw}
.chip{font:700 10px/1 var(--display);letter-spacing:.06em;padding:3px 6px;border:1px solid var(--tc);color:var(--tc);background:rgba(20,14,18,.7);opacity:.55}
.chip.on{opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--tc) 55%,transparent)}
.chip.max{background:var(--tc);color:#1a1216}
.hr{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:52vw}
.hb{background:rgba(27,21,26,.85);border:1.5px solid var(--edge);padding:7px 11px;font:700 12px/1 var(--display);letter-spacing:.06em}
.hb.on{background:var(--gold);color:#1b141a}
#bossbar{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 96px);width:min(80vw,460px);z-index:5;pointer-events:none;text-align:center}
#bossbar .nm{font:700 15px/1 var(--display);letter-spacing:.2em;color:#ffd36b;text-shadow:2px 1px 0 #7a1f24}
#bossbar .bar{height:10px;margin-top:5px;background:#2a1616;border:1px solid rgba(255,211,107,.5)}
#bossf{height:100%;width:100%;background:linear-gradient(90deg,#a8322c,#ffd36b)}
#fuse{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 60px);width:min(60vw,320px);z-index:5;pointer-events:none;text-align:center}
#fuse .lbl{font:700 12px/1 var(--display);letter-spacing:.16em;color:#ffcf8a;text-shadow:0 1px 3px #000}
#fuse .bar{height:6px;margin-top:4px;background:#2a1616;border:1px solid rgba(255,160,90,.5)}
#fusef{height:100%;width:100%;background:linear-gradient(90deg,#ff5a4a,#ffcf5a)}
#fuse.hot #fusef{animation:blink .25s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
#alarm{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 56px);text-align:center;z-index:5;pointer-events:none;font:700 16px/1 var(--display);letter-spacing:.24em;color:#ff5a4a;text-shadow:0 0 12px rgba(255,60,40,.8),0 1px 2px #000;animation:alarmPulse .8s ease-in-out infinite}
#alarm span{font:500 13px/1 var(--display);letter-spacing:.08em;color:#ffcf8a}
@keyframes alarmPulse{50%{opacity:.55}}
body.alarmed::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 90px rgba(220,30,30,.35);animation:alarmPulse .8s ease-in-out infinite}

/* voices, banner, toasts, prompt */
#voice{position:fixed;left:12px;top:calc(env(safe-area-inset-top,0px) + 122px);max-width:min(560px,70vw);z-index:5;pointer-events:none;font:500 17px/1.35 var(--serif);text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
#voice.on{opacity:1;transform:none}
#voice b{font:700 13px/1 var(--display);letter-spacing:.14em;margin-right:6px}
#banner{position:fixed;left:0;right:0;top:34%;text-align:center;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s}
#banner.on{opacity:1}
#banner .w{font:700 clamp(36px,9vw,80px)/.95 var(--display);letter-spacing:.04em;color:#f3e3c2;text-shadow:4px 3px 0 #a8322c,-3px -2px 0 #2c8f9c}
#banner .d{font:italic 500 clamp(18px,4.6vw,26px)/1.2 var(--serif);color:var(--gold);margin-top:8px;text-shadow:0 2px 6px #000}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 150px);z-index:7;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:rgba(24,18,22,.9);border-left:3px solid var(--tc,var(--gold));padding:6px 12px;font:500 15px/1.2 var(--serif);white-space:nowrap;animation:tfade 2.8s forwards}
@keyframes tfade{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
#prompt{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 100px);z-index:6;pointer-events:none;font:700 14px/1 var(--display);letter-spacing:.08em;background:rgba(24,18,22,.88);border:1.5px solid var(--edge);padding:8px 14px}
.key{display:inline-block;min-width:22px;padding:3px 6px;margin-right:6px;border:1.5px solid var(--ink);border-radius:3px;text-align:center;font:700 12px/1 var(--display)}
.glyph{display:inline-block;width:22px;height:22px;border-radius:50%;margin-right:6px;color:#111;text-align:center;font:700 13px/22px var(--display);vertical-align:middle}
.glyph-a{background:#5ec44e}.glyph-b{background:#e5493c}.glyph-x{background:#3f8ef0}.glyph-y{background:#f0c23c}
.glyph-bumper{display:inline-block;padding:3px 7px;margin-right:6px;border-radius:6px;background:#ddd;color:#111;font:700 11px/1 var(--display)}

/* touch controls */
#touch{position:fixed;left:0;top:calc(env(safe-area-inset-top,0px) + 150px);bottom:0;width:55%;z-index:4;touch-action:none}
#stickBase{position:fixed;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid rgba(239,228,207,.3);background:radial-gradient(circle,rgba(232,183,90,.08),rgba(20,14,18,.25));pointer-events:none;opacity:0;transition:opacity .15s}
#stickBase.on{opacity:1}
#stickKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e8b75a,#8e5a1f);box-shadow:0 0 12px rgba(232,183,90,.5)}
#btns{position:fixed;right:calc(env(safe-area-inset-right,0px) + 14px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:grid;grid-template-columns:auto auto auto;gap:10px;z-index:6;align-items:end}
.cb{--cd:0;position:relative;width:62px;height:62px;border-radius:50%;border:2px solid rgba(239,228,207,.45);background:radial-gradient(circle at 40% 35%,rgba(96,72,48,.92),rgba(25,18,24,.94));font:700 11px/1.1 var(--display);letter-spacing:.03em;touch-action:none;padding:0}
.cb::after{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(rgba(8,5,9,.78) calc(var(--cd) * 360deg),transparent 0);pointer-events:none}
.cb small{display:block;font:500 9px/1 var(--display);color:var(--dim);margin-top:3px}
#bAtk{width:88px;height:88px;font-size:15px;grid-column:3;grid-row:1 / span 2;border-color:rgba(232,183,90,.7)}
#bStim{grid-column:1;grid-row:1}#bUse{grid-column:1;grid-row:2}#bSkill{grid-column:2;grid-row:1}#bDash{grid-column:2;grid-row:2}
.desk #btns{transform:scale(.78);transform-origin:bottom right}
#hint{position:fixed;left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);max-width:min(620px,55vw);font:500 13px/1.4 var(--display);letter-spacing:.03em;color:var(--dim);z-index:5;pointer-events:none;text-shadow:0 1px 3px #000}

/* overlays */
.ov{position:fixed;inset:0;z-index:20;display:flex;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 12px calc(env(safe-area-inset-bottom,0px) + 14px);background:radial-gradient(ellipse at 30% 20%,rgba(60,32,30,.55),rgba(12,9,14,.86) 70%);touch-action:pan-y}
.ov.map{background:rgba(10,8,12,.82);align-items:center;justify-content:center;flex-direction:column}
#mapCanvas{width:100%;height:100%}
.mapHint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font:500 14px var(--display);color:var(--dim)}
.sheet{margin:auto;width:min(760px,100%);background:var(--panel);border:1.5px solid var(--edge);padding:22px 20px 20px;position:relative;box-shadow:8px 10px 0 rgba(0,0,0,.35)}
.sheet.wide{width:min(1100px,100%)}
.sheet.narrow{width:min(420px,100%);text-align:center}
.sheet::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,240,210,.018) 0 2px,transparent 2px 7px),radial-gradient(ellipse at 90% 0%,rgba(168,50,44,.16),transparent 60%),radial-gradient(ellipse at 0% 100%,rgba(47,85,96,.2),transparent 60%)}
.sheet>*{position:relative}
h1.title{font:700 clamp(48px,14vw,104px)/.86 var(--display);letter-spacing:.02em;margin:0;color:#f3e3c2;text-shadow:5px 4px 0 #a8322c,-3px -3px 0 #2c8f9c;white-space:pre-line}
h1.title.small{font-size:clamp(40px,11vw,80px)}
.sub{font:italic 500 20px/1.3 var(--serif);color:var(--gold);margin:12px 0 16px}
.lore{font:500 18px/1.55 var(--serif);max-width:62ch;color:var(--ink)}
:root[lang="zh"] .lore{line-height:1.8}
.lore p{margin:0 0 12px}
h2{font:700 20px/1.1 var(--display);letter-spacing:.05em;margin:20px 0 10px;color:var(--ink)}
.builds{display:grid;gap:10px}
.build{border-left:3px solid var(--tc);padding:4px 0 4px 12px}
.build .bn{font:700 17px/1.2 var(--display);letter-spacing:.04em;color:var(--tc)}
.build .bk{font:italic 500 15px/1.3 var(--serif);color:var(--dim)}
.build .bh{font:500 16px/1.45 var(--serif);margin-top:3px}
.go{display:inline-block;margin-top:20px;background:var(--gold);color:#1b141a;border:0;padding:14px 26px;font:700 20px/1 var(--display);letter-spacing:.08em;box-shadow:4px 4px 0 #a8322c}
.go:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #a8322c}
.ghost{background:transparent;border:1.5px solid var(--edge);padding:11px 16px;font:700 14px/1 var(--display);letter-spacing:.06em;margin-top:10px;margin-right:6px}
.langBtn{position:absolute;right:14px;top:10px;margin:0;z-index:2}
.ctl{font:500 15px/1.5 var(--serif);color:var(--dim);margin-top:14px}
.close{position:absolute;right:12px;top:10px;background:none;border:1.5px solid var(--edge);width:38px;height:38px;font:700 18px/1 var(--display);z-index:2}

.item{border-left:4px solid var(--tc);background:rgba(10,7,10,.35);padding:9px 11px}
.item .in{font:700 18px/1.15 var(--serif)}
.r-common .in{color:var(--common)}.r-rare .in{color:var(--rare)}.r-legendary .in{color:var(--legendary)}
.item .is{font:500 12px/1.3 var(--display);letter-spacing:.06em;color:var(--dim);margin:3px 0 5px}
.item .is b{color:var(--tc)}
.item .ia{font:500 15px/1.35 var(--serif)}
.item .ii{font:500 14px/1.35 var(--serif);color:var(--dim)}
.item .ik{font:500 15px/1.35 var(--serif);color:#ffcf8a;margin-top:5px}
.item .if{font:italic 500 14px/1.35 var(--serif);color:var(--dim);margin-top:5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cell .sl{font:700 12px/1 var(--display);letter-spacing:.08em;color:var(--dim);margin-bottom:4px}
.empty{font:italic 15px var(--serif);color:var(--dim);padding:10px}
.row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.row button{flex:1;min-width:100px;background:rgba(232,183,90,.12);border:1.5px solid var(--edge);padding:8px;font:700 12px/1.2 var(--display);letter-spacing:.04em}
.row button.eq{background:var(--gold);color:#1b141a;border-color:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px 14px;font:500 15px/1.4 var(--serif)}
.stats span{color:var(--dim)}
.syn{border-left:3px solid var(--tc);padding:4px 0 4px 10px;margin-bottom:6px;font:500 15px/1.35 var(--serif);color:var(--dim)}
.syn b{font:700 14px/1 var(--display);letter-spacing:.06em;color:var(--tc);margin-right:6px}
.syn .lit{color:var(--ink)}
.cred{font:700 16px/1 var(--display);color:var(--gold);letter-spacing:.05em}
.note{font:italic 500 14px/1.3 var(--serif);color:var(--dim);margin-top:5px}
details{margin-top:14px}
summary{font:700 16px/1 var(--display);letter-spacing:.05em;cursor:pointer;padding:6px 0}
.bigstat{font:700 34px/1 var(--display);color:var(--ink)}
.bigrow{display:flex;gap:28px;flex-wrap:wrap;margin:14px 0}
.bigrow div span{display:block;font:italic 500 15px var(--serif);color:var(--dim)}
.cols{display:grid;grid-template-columns:3fr 2fr;gap:18px}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.upg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.upg button{text-align:left;background:rgba(10,7,10,.35);border:1.5px solid var(--edge);padding:10px}
.upg button b{display:block;font:700 15px/1.2 var(--display);letter-spacing:.04em}
.upg button span{display:block;font:500 14px/1.3 var(--serif);color:var(--dim);margin-top:3px}
.blades{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.blades button{background:rgba(10,7,10,.35);border:1.5px solid var(--edge);padding:9px 12px;font:700 14px/1.2 var(--display);letter-spacing:.04em;min-width:110px;text-align:left}
.blades button.sel{background:var(--gold);color:#1b141a}
.blades button small{display:block;font:italic 500 12px/1.3 var(--serif);color:inherit;opacity:.8;margin-top:3px;max-width:160px}
.codex{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.codex .locked{opacity:.5;filter:grayscale(1)}
@media (prefers-reduced-motion: reduce){#voice,#banner{transition:none}#alarm,body.alarmed::after{animation:none}}
:root[lang="zh"] h1.title{line-height:1.02;letter-spacing:.06em}
:root[lang="zh"] .sub{margin-top:16px}
:root[lang="zh"] .cb{font-size:12px}
body:not(.desk) .cb small{display:none}
.audioSet{margin:12px auto 0;max-width:320px;text-align:left}
.audioSet label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0;font:500 15px/1.2 var(--display);letter-spacing:.04em}
.audioSet input[type=range]{flex:1;max-width:180px;accent-color:var(--gold)}
.audioSet input[type=range].focused{outline:2px solid var(--gold);outline-offset:4px}