:root {
  --gold: #e3b768; --gold2: #a8742e; --ink: #0c0907; --panel: rgba(14, 10, 8, 0.72); --line: rgba(227, 183, 104, 0.45);
  --red: #c8322a; --txt: #efe4cf; --dim: #9a8d78;
  --serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif; --sans: 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif; --num: 'Cinzel', 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0907; color: var(--txt); font-family: var(--sans); user-select: none; }
#app { position: fixed; inset: 0; }
#app canvas { display: block; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2 L22 12 L13 14 L9 24 Z' fill='%23e8c27a' stroke='%23231508' stroke-width='1.6'/%3E%3C/svg%3E") 3 2, auto; }
.hidden { display: none !important; }
button { font-family: var(--serif); cursor: pointer; }

/* ---------- 伤害数字 ---------- */
#nums, #mbars { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.dmg { position: absolute; left: 0; top: 0; font: 800 22px/1 var(--num); color: #fff3d6; white-space: nowrap; text-shadow: 0 0 2px #000, 0 2px 3px #000, 0 0 8px rgba(0,0,0,.6); will-change: transform; letter-spacing: 0.5px; }
.dmg.crit { font-size: 30px; color: #ffb43a; text-shadow: 0 0 2px #3a1400, 0 2px 4px #000, 0 0 14px rgba(255,120,20,.7); }
.dmg.crit small { display: block; font: 900 12px var(--serif); color: #ffd890; text-align: center; margin-bottom: 1px; letter-spacing: 3px; }
.dmg.awaken { font-size: 52px; color: #fff0b0; text-shadow: 0 0 3px #4a2000, 0 3px 6px #000, 0 0 24px rgba(255,190,60,.95); }
.dmg.taken { color: #ff5a4a; font-size: 20px; }
.dmg.heal { color: #7cff8a; font-size: 20px; }

/* ---------- 怪物血条 ---------- */
.mbar { position: absolute; left: 0; top: 0; width: 76px; height: 7px; background: rgba(0,0,0,.75); border: 1px solid rgba(0,0,0,.9); box-shadow: 0 0 0 1px rgba(200,80,60,.35); }
.mbar .fill, .mbar .lag { position: absolute; left: 0; top: 0; bottom: 0; }
.mbar .fill { background: linear-gradient(#e2473a, #8a1810); }
.mbar .lag { background: #f0d0a0; }
.mbar.elite { width: 150px; height: 10px; box-shadow: 0 0 0 1px var(--gold2), 0 0 10px rgba(255,160,60,.3); }
.mbar.elite .fill { background: linear-gradient(#ff8a3a, #9a3a10); }
.mbar .nm { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 900 13px var(--serif); color: #ffcf7a; text-shadow: 0 1px 3px #000; }

/* ---------- HUD 布局 ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
#hud button { pointer-events: auto; }
#topleft { position: absolute; left: 18px; top: 16px; display: flex; gap: 12px; align-items: center; }
#portrait { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 0 16px rgba(227,183,104,.35); }
#portrait svg { width: 100%; height: 100%; display: block; }
.pname { font: 900 17px var(--serif); color: #f6e6c4; text-shadow: 0 1px 3px #000; }
.pname span { font: 600 13px var(--num); color: var(--gold); margin-left: 6px; }
.pclass { font-size: 12px; color: var(--dim); margin-top: 3px; text-shadow: 0 1px 2px #000; }

#topright { position: absolute; right: 18px; top: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mmwrap { position: relative; width: 180px; height: 180px; }
#minimap { width: 180px; height: 180px; border-radius: 50%; display: block; }
.mmring { position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--gold2); box-shadow: inset 0 0 0 1px rgba(255,220,150,.4), 0 0 0 2px rgba(0,0,0,.8), 0 6px 20px rgba(0,0,0,.6); background: radial-gradient(circle, transparent 66%, rgba(0,0,0,.35) 72%); }
.mmzone { font: 900 14px var(--serif); color: #f3dcae; text-shadow: 0 1px 3px #000; letter-spacing: 2px; }
.sysrow { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--dim); }
.sysrow button { background: var(--panel); color: var(--txt); border: 1px solid var(--line); font-size: 11px; padding: 3px 8px; border-radius: 3px; }
#fps { font-family: var(--num); min-width: 46px; }

#quest { position: absolute; right: 20px; top: 270px; width: 250px; padding: 10px 12px; background: linear-gradient(90deg, transparent, rgba(10,7,5,.7) 25%); }
#quest h3 { margin: 0 0 8px; font: 900 14px var(--serif); color: var(--gold); letter-spacing: 1px; text-align: right; }
#quest .q { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; text-shadow: 0 1px 2px #000; justify-content: flex-end; }
#quest .q i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); background: rgba(227,183,104,.25); flex: none; order: 3; }
#quest .q b { font: 600 13px var(--num); color: #ffd890; order: 2; }
#quest .q span { order: 1; }
#quest .q.done { color: #8a8a7a; text-decoration: line-through; }
#quest .q.done i { background: #7aa84a; border-color: #7aa84a; }
#quest .q.dim { opacity: .45; }
#quest .q.boss span { color: #ff9a6a; font-weight: 700; }

#bossbar { position: absolute; left: 50%; top: 22px; transform: translateX(-50%) translateY(-30px); width: min(760px, 60vw); opacity: 0; transition: .6s; }
#bossbar.show { opacity: 1; transform: translateX(-50%); }
.bb-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4px; padding: 0 4px; }
#bossName { font: 900 19px var(--serif); color: #ffdca0; text-shadow: 0 2px 4px #000, 0 0 12px rgba(255,120,40,.5); letter-spacing: 2px; }
#bossCount { font: 800 20px var(--num); color: #fff; text-shadow: 0 2px 3px #000; }
.bb-track { position: relative; height: 20px; background: #0d0806; border: 1px solid #000; box-shadow: 0 0 0 1px var(--gold2), 0 0 0 3px rgba(0,0,0,.8), 0 0 18px rgba(255,100,30,.25); overflow: hidden; }
.bb-track > div { position: absolute; left: 0; top: 0; bottom: 0; }
#bossUnder { right: 0; }
#bossLag { background: rgba(255,240,210,.85); }
#bossFill { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
#bossPct { position: absolute; right: 8px; top: 2px; font: 600 12px var(--num); color: #fff; text-shadow: 0 1px 2px #000; }
#bossbar.enraged .bb-track { animation: enr 1s infinite; }
@keyframes enr { 50% { box-shadow: 0 0 0 1px #ff6a20, 0 0 0 3px rgba(0,0,0,.8), 0 0 28px rgba(255,80,20,.8); } }

#combo { position: absolute; right: 22%; top: 40%; text-align: center; opacity: 0; transform: scale(.8); transition: .2s; }
#combo.show { opacity: 1; transform: none; }
#combo b { display: block; font: 800 46px/1 var(--num); color: #ffe2a0; text-shadow: 0 0 14px rgba(255,140,40,.7), 0 3px 4px #000; }
#combo span { font: 900 14px var(--serif); color: var(--gold); letter-spacing: 4px; }

#toasts { position: absolute; left: 50%; top: 21%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { padding: 7px 26px; font: 900 15px var(--serif); color: #fff1d6; background: linear-gradient(90deg, transparent, rgba(0,0,0,.7), transparent); text-shadow: 0 1px 3px #000; animation: tin .3s; transition: .5s; }
.toast.warn { color: #ffb08a; }
.toast.good { color: #b8f0a0; }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

.banner { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .8s; pointer-events: none; }
.banner.show { opacity: 1; }
.banner h2 { margin: 6px 0 2px; font: 900 34px var(--serif); color: #f8e2b2; letter-spacing: 8px; text-shadow: 0 2px 6px #000, 0 0 24px rgba(255,190,90,.35); }
.banner p { margin: 0 0 6px; font: 600 15px var(--serif); color: #cdb98e; letter-spacing: 4px; text-shadow: 0 1px 3px #000; }
.banner .b-line { width: 460px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.banner.boss h2 { color: #ffb07a; font-size: 44px; text-shadow: 0 2px 6px #000, 0 0 30px rgba(255,90,30,.7); }
.banner.elite h2 { color: #ffcf7a; }
.banner.victory h2 { font-size: 56px; color: #ffe8b0; }
.banner.show h2 { animation: bnr 1.2s ease-out; }
@keyframes bnr { from { letter-spacing: 24px; opacity: 0; } }

/* ---------- 底部：血条 + 技能栏 ---------- */
#bottom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#buffs { display: flex; gap: 4px; height: 30px; }
.buff { position: relative; width: 30px; height: 30px; border: 1px solid var(--gold); }
.buff svg { width: 100%; height: 100%; display: block; }
.buff span { position: absolute; right: 1px; bottom: 0; font: 600 11px var(--num); text-shadow: 0 1px 2px #000; }
#bars { width: 640px; display: flex; flex-direction: column; gap: 3px; }
#hpBar, #rageBar { position: relative; background: rgba(0,0,0,.75); border: 1px solid #000; box-shadow: 0 0 0 1px rgba(227,183,104,.35); overflow: hidden; }
#hpBar { height: 18px; }
#rageBar { height: 8px; width: 70%; margin: 0 auto; }
#hpFill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#e24a3a, #8a1a12); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transition: width .15s; }
#rageFill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffc04a, #c0661a); transition: width .2s; }
#rageBar.full { box-shadow: 0 0 0 1px #ffd27a, 0 0 14px rgba(255,180,60,.9); animation: rg 1.2s infinite; }
@keyframes rg { 50% { box-shadow: 0 0 0 1px #fff0c0, 0 0 22px rgba(255,200,80,1); } }
#hpText { position: absolute; inset: 0; text-align: center; font: 600 12px/18px var(--num); text-shadow: 0 1px 2px #000; }
#rageText { position: absolute; right: -60px; top: -4px; font-size: 11px; color: var(--gold); text-shadow: 0 1px 2px #000; white-space: nowrap; }
#skillrow { display: flex; align-items: flex-end; gap: 14px; padding: 8px 12px 8px; background: linear-gradient(180deg, rgba(10,7,5,.35), rgba(10,7,5,.85)); border: 1px solid rgba(227,183,104,.25); border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
#skills { display: flex; gap: 14px; align-items: flex-end; }
.grp { display: flex; gap: 5px; }
#utility { display: flex; gap: 5px; }
.slot { position: relative; width: 54px; height: 54px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--gold2), inset 0 0 0 1px rgba(255,230,170,.2); background: #120c08; pointer-events: auto; }
.slot.small { width: 42px; height: 42px; }
.slot.awaken { width: 64px; height: 64px; box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(255,180,60,.6); }
.slot.awaken.locked .ic { filter: grayscale(.85) brightness(.55); }
.slot.awaken:not(.locked) { animation: awk 1.4s infinite; }
@keyframes awk { 50% { box-shadow: 0 0 0 1px #fff0c0, 0 0 24px rgba(255,190,70,1); } }
.slot .ic, .slot .ic svg { width: 100%; height: 100%; display: block; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.72) calc(var(--k, 0) * 360deg), transparent 0); pointer-events: none; }
.slot.cooling .ic { filter: saturate(.4) brightness(.8); }
.slot .cdn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 18px var(--num); color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.slot .key { position: absolute; left: 2px; top: 1px; font: 700 11px var(--num); color: #ffe7b0; text-shadow: 0 0 2px #000, 0 1px 2px #000; }
.slot.potion::after { content: attr(data-count); position: absolute; right: 2px; bottom: 0; font: 700 12px var(--num); color: #fff; text-shadow: 0 1px 2px #000; }
.slot.ready::before { content: ''; position: absolute; inset: -2px; border: 2px solid #ffe7a0; animation: rdy .45s ease-out forwards; pointer-events: none; }
@keyframes rdy { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.slot .tip { display: none; position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); width: 220px; padding: 10px 12px; background: rgba(10,7,5,.95); border: 1px solid var(--line); z-index: 9; }
.slot:hover .tip { display: block; }
.tip h4 { margin: 0 0 5px; font: 900 14px var(--serif); color: var(--gold); }
.tip p { margin: 0 0 6px; font-size: 12px; line-height: 1.55; color: var(--txt); }
.tip i { font-size: 11px; color: var(--dim); font-style: normal; }

/* ---------- 电影黑边 ---------- */
.cinebar { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 7; transition: height .6s ease; pointer-events: none; }
.cinebar.top { top: 0; } .cinebar.bot { bottom: 0; }
body.cine .cinebar { height: 9vh; }
body.cine #bottom, body.cine #quest, body.cine #topleft, body.cine #topright { opacity: 0; transition: opacity .4s; }
#bottom, #quest, #topleft, #topright { transition: opacity .4s; }

/* ---------- 面板 ---------- */
#help, #death, #results { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
#help.show, #death.show, #results.show { display: flex; }
.h-box, .d-box, .r-box { min-width: 420px; padding: 26px 32px; background: linear-gradient(180deg, rgba(28,20,14,.97), rgba(12,8,6,.97)); border: 1px solid var(--line); box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.8); text-align: center; }
.h-box h3, .r-box h2, .d-box h2 { margin: 0 0 14px; font: 900 24px var(--serif); color: var(--gold); letter-spacing: 4px; }
.h-grid { display: grid; grid-template-columns: auto auto; gap: 8px 22px; text-align: left; font-size: 14px; margin: 0 auto 14px; width: max-content; }
.h-grid b { color: #ffd890; font-weight: 700; }
.h-box p, .d-box p { color: var(--dim); font-size: 13px; }
.h-box button, .d-box button, .r-box button, #startBtn { margin-top: 10px; padding: 10px 40px; font-size: 16px; letter-spacing: 4px; color: #2a1405; background: linear-gradient(#f6d58e, #b07a2a); border: 1px solid #ffeab8; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.6); }
.h-box button:hover, .d-box button:hover, .r-box button:hover, #startBtn:hover { filter: brightness(1.12); }
#death { background: radial-gradient(circle, rgba(60,0,0,.35), rgba(0,0,0,.8)); }
.d-box h2 { color: #ff7a5a; font-size: 34px; }
.r-sub { color: var(--dim); margin: -8px 0 16px; letter-spacing: 3px; }
.r-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.r-grid div { padding: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(227,183,104,.15); }
.r-grid span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.r-grid b { font: 700 18px var(--num); color: #ffe2a8; }
.r-grid b.rank { font-size: 28px; color: #ffb43a; text-shadow: 0 0 12px rgba(255,150,40,.8); }
.loot { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.item { display: flex; gap: 12px; align-items: center; padding: 8px 12px; text-align: left; border: 1px solid; }
.item h4 { margin: 0; font: 900 14px var(--serif); }
.item p { margin: 2px 0 0; font-size: 12px; color: var(--dim); }
.item .it-ic { width: 40px; height: 40px; border: 1px solid; }
.item.legend { border-color: #ff9a2a; background: linear-gradient(90deg, rgba(255,140,30,.18), transparent); }
.item.legend h4 { color: #ffae4a; } .item.legend .it-ic { border-color: #ff9a2a; background: radial-gradient(circle, #ffcf6a, #8a3a0a); box-shadow: 0 0 12px rgba(255,150,40,.7); }
.item.epic { border-color: #a65aff; background: linear-gradient(90deg, rgba(150,80,255,.15), transparent); }
.item.epic h4 { color: #c48aff; } .item.epic .it-ic { border-color: #a65aff; background: radial-gradient(circle, #c89aff, #3a1a6a); }

/* ---------- 加载 / 标题 ---------- */
#loading, #title { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#loading { background: radial-gradient(ellipse at center, #2a1c12, #070504 70%); transition: opacity .8s; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-logo, .t-logo { font: 900 64px var(--serif); color: #f5dca8; letter-spacing: 10px; text-shadow: 0 0 30px rgba(255,170,70,.45), 0 4px 10px #000; }
.ld-logo span, .t-logo span { color: var(--gold); font-size: .8em; }
.ld-en, .t-en { font: 600 14px var(--num); color: var(--gold2); letter-spacing: 8px; margin: 6px 0 30px; }
.ld-bar { width: 420px; height: 4px; background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(227,183,104,.3); }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a8742e, #ffe2a0); box-shadow: 0 0 10px #ffb43a; transition: width .3s; }
.ld-text { margin-top: 12px; font-size: 13px; color: var(--dim); }
#title { display: none; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.1) 40%, rgba(0,0,0,.65)); }
#title.show { display: flex; }
.t-inner { text-align: center; animation: tin 1.2s; }
.t-sub { color: #d8c49a; letter-spacing: 4px; margin: 0 0 26px; text-shadow: 0 1px 3px #000; }
.t-keys { margin-top: 20px; font-size: 12px; color: #bba98a; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
#startBtn { font-size: 20px; padding: 12px 56px; }