*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#c8a45a; --gold-dim:#8a6f39; --ink:#0b0a0d;
  --r-common:#e8e6e0; --r-magic:#5f9dff; --r-rare:#ffd24a; --r-set:#5fe08a; --r-legend:#ff9a3c;
}
html,body{height:100%;background:#000;overflow:hidden;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#ddd;user-select:none}
#app{position:relative;width:100vw;height:100vh;overflow:hidden}
canvas#game{position:absolute;inset:0;display:block;cursor:crosshair}
.hidden{display:none !important}

/* ---------- Boss bar ---------- */
#bossBar{position:absolute;top:14px;left:calc(50% - 110px);transform:translateX(-50%);width:min(660px,52vw);z-index:20;
  background:linear-gradient(180deg,rgba(20,8,8,.92),rgba(8,4,4,.92));border:1px solid #6a5330;
  box-shadow:0 0 18px #000 inset,0 4px 14px rgba(0,0,0,.7);padding:5px 26px 4px}
#bossBar:before,#bossBar:after{content:"";position:absolute;top:2px;bottom:2px;width:22px;
  background:radial-gradient(circle at 50% 50%,#c8a45a 0 30%,transparent 32%);opacity:.5}
#bossBar:before{left:-16px}#bossBar:after{right:-16px}
.boss-name{text-align:center;font-size:15px;letter-spacing:2px;color:#ffe9c0;text-shadow:0 0 6px #000}
.boss-name #bossLevel{margin-left:12px;color:#ffb0b0;font-size:13px}
.boss-track{height:13px;margin-top:3px;background:#2a0d0d;border:1px solid #000;position:relative;overflow:hidden}
#bossFill{height:100%;width:100%;background:linear-gradient(180deg,#e04b3c,#8d1d16);transition:width .12s linear}
.boss-affixes{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:3px;font-size:11px;color:#c9c2b2}
.boss-affixes span:before{content:"◆ ";color:var(--gold-dim)}
.boss-affixes .elem{color:#7fd0ff}

/* ---------- Minimap ---------- */
#mapBox{position:absolute;top:10px;right:12px;width:246px;z-index:15}
#minimap{display:block;width:246px;height:184px;background:rgba(6,6,10,.55);border:1px solid #4b3f28}
#mapInfo{font-size:10px;line-height:1.5;color:#9c927c;text-align:right;padding-right:2px}

/* ---------- Floor box ---------- */
#floorBox{position:absolute;right:14px;bottom:132px;width:210px;z-index:15;text-align:right;
  background:linear-gradient(180deg,rgba(10,8,6,.72),rgba(10,8,6,.5));border:1px solid #4b3f28;padding:5px 8px}
.floor-title{color:var(--r-rare);font-size:17px;letter-spacing:1px;text-shadow:0 0 8px rgba(0,0,0,.9)}
.floor-title #killProg{font-size:14px;margin-left:8px;color:#ffe9a8}
.save-line{font-size:10px;color:#b9ae94;margin-top:2px}
.timer-track{height:7px;background:#241d10;border:1px solid #000;margin:3px 0}
#timerFill{height:100%;width:100%;background:linear-gradient(90deg,#d8c04a,#8a6f1a)}
.timer-line{font-size:10px;color:#a99f88}
.timer-foot{display:flex;justify-content:space-between;font-size:9px;color:#7d7461;margin-top:1px}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;bottom:0;height:126px;z-index:18;display:flex;align-items:flex-end;
  justify-content:center;gap:6px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 55%,rgba(0,0,0,.85))}
#hud *{pointer-events:auto}
.orb-side{display:flex;align-items:flex-end;gap:6px;padding:0 6px 8px;flex:0 0 auto}
.orb-wrap{position:relative;width:96px;height:96px;flex:0 0 auto}
.orb-text{position:absolute;top:-17px;left:-16px;right:-16px;text-align:center;font-size:12px;
  color:#f0e6cf;text-shadow:0 1px 3px #000,0 0 7px #000;pointer-events:none;letter-spacing:.5px}
.orb{position:relative;width:96px;height:96px;border-radius:50%;overflow:hidden;
  border:2px solid #2a2118;
  box-shadow:0 0 0 3px #6b5a34,0 0 0 4px #171310,0 0 22px rgba(0,0,0,.9),inset 0 -10px 24px rgba(0,0,0,.8)}
.orb-fill{position:absolute;left:0;right:0;bottom:0;height:100%;transition:height .15s ease}
.orb-hp .orb-fill{background:radial-gradient(ellipse at 50% 120%,#ff6a52 0%,#c31b12 45%,#5d0705 100%)}
.orb-mp .orb-fill{background:radial-gradient(ellipse at 50% 120%,#63b6ff 0%,#1450c8 45%,#061c4f 100%)}
.orb-gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 34% 26%,rgba(255,255,255,.55) 0 8%,rgba(255,255,255,.12) 12% 26%,transparent 45%)}
.orb-btns{display:flex;flex-direction:column;gap:5px;align-items:center}
.sq-btn{width:26px;height:24px;font-size:11px;color:#d8c99f;cursor:pointer;
  background:linear-gradient(180deg,#3a3020,#151109);border:1px solid #6b5a34}
.sq-btn:hover{background:linear-gradient(180deg,#5a4a2c,#241d10);color:#ffe9a8}
.round-btn{width:28px;height:28px;border-radius:50%;font-size:13px;color:#fff3cd;cursor:pointer;
  background:radial-gradient(circle at 40% 30%,#e8cf7a,#7a5f14);border:2px solid #6b5a34}
.round-btn.gem{background:radial-gradient(circle at 40% 30%,#c39cff,#4a1d8a)}
.round-btn:hover{border-color:#ffe08a}

.center-hud{flex:0 0 auto;width:min(560px,44vw);padding-bottom:8px}
.seg-bar{display:flex;gap:2px;height:6px;margin-bottom:4px}
.seg-bar i{flex:1;background:#2b2416;border:1px solid #000}
.seg-bar i.on{background:linear-gradient(180deg,#ffe08a,#b8892a)}
.skill-bar{display:flex;gap:3px;justify-content:center}
.slot{position:relative;width:46px;height:46px;background:linear-gradient(180deg,#241d13,#0d0b07);
  border:1px solid #6b5a34;box-shadow:inset 0 0 10px rgba(0,0,0,.9);cursor:pointer;overflow:hidden}
.slot:hover{border-color:#ffe08a}
.slot .ico{position:absolute;inset:3px;display:grid;place-items:center;font-size:22px;line-height:1}
.slot .cd{position:absolute;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#ffd77a}
.slot .cost{position:absolute;bottom:1px;right:2px;font-size:9px;color:#8fd0ff;text-shadow:0 1px 2px #000}
.slot .key{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:9px;color:#c8b98c;
  background:rgba(0,0,0,.6)}
.slot.no-mana .ico{filter:grayscale(.8) brightness(.6)}
.slot .stack{position:absolute;top:0;left:2px;font-size:10px;color:#ffe9a8;text-shadow:0 1px 2px #000}
.slot.potion{border-color:#4a3d22}
.slot.flash{animation:flash .18s}
@keyframes flash{0%{box-shadow:0 0 0 2px #fff}100%{box-shadow:inset 0 0 10px rgba(0,0,0,.9)}}

/* ---------- Tooltip ---------- */
#itemTip{position:absolute;z-index:60;min-width:250px;max-width:340px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,12,.97),rgba(16,12,18,.97));
  border:1px solid #6b5a34;box-shadow:0 6px 26px rgba(0,0,0,.85);padding:8px 10px 9px;font-size:12px;line-height:1.55}
#itemTip .t-head{display:flex;justify-content:space-between;align-items:baseline}
#itemTip .t-name{font-size:14px;font-weight:bold}
#itemTip .t-lv{color:#c9c2b2;font-size:11px}
#itemTip .t-type{color:#8f8878;font-size:11px;margin-bottom:4px}
#itemTip .t-sec{border-top:1px solid #2e2a22;margin:5px 0 4px;padding-top:4px}
#itemTip .t-setname{color:#d38bff;text-align:center;margin-top:5px}
#itemTip .t-setline{color:#5fe08a}
#itemTip .t-setline.off{color:#6b6b6b}
#itemTip .t-skill{color:var(--r-rare)}
#itemTip .t-special{color:#ff9a3c}
#itemTip .t-sock{color:#8f8878}
#itemTip .t-hint{color:#9c927c;font-size:11px;text-align:right;margin-top:4px}
#itemTip .t-gold{color:#ffd24a;margin-top:5px}
#itemTip .t-diff{border-top:1px solid #3a3020;border-bottom:1px solid #3a3020;padding:5px 0;margin:6px 0 5px}
#itemTip .t-diff.up .t-diff-title{color:#6ee07a}
#itemTip .t-diff.down .t-diff-title{color:#ff7a6a}
#itemTip .t-diff-title{text-align:center;font-size:12px;letter-spacing:1px;margin-bottom:3px;text-shadow:0 0 8px currentColor}
#itemTip .t-diff-row{display:flex;justify-content:space-between;font-size:11px;color:#9c927c;line-height:1.55}
#itemTip .t-diff-row .g{color:#6ee07a}
#itemTip .t-diff-row .r{color:#ff7a6a}

/* ---------- 稀有掉落演出 ---------- */
#flash{position:absolute;inset:0;z-index:75;pointer-events:none;opacity:0;background:#fff}
#flash.go{animation:flashOut .5s ease-out}
@keyframes flashOut{0%{opacity:.55}100%{opacity:0}}
#dropBanner{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:76;pointer-events:none;
  text-align:center;padding:10px 34px;opacity:0;
  background:linear-gradient(180deg,rgba(8,6,4,.9),rgba(8,6,4,.55));
  border-top:1px solid;border-bottom:1px solid;border-color:currentColor;
  box-shadow:0 0 40px rgba(0,0,0,.8)}
#dropBanner.go{animation:banner 1.5s cubic-bezier(.16,.9,.3,1) forwards}
@keyframes banner{
  0%{opacity:0;transform:translateX(-50%) scale(.7)}
  14%{opacity:1;transform:translateX(-50%) scale(1.06)}
  22%{transform:translateX(-50%) scale(1)}
  76%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(1)}}
#dropBanner .db-tag{font-size:11px;letter-spacing:6px;opacity:.85}
#dropBanner .db-name{font-size:26px;letter-spacing:4px;margin-top:2px;text-shadow:0 0 16px currentColor,0 2px 0 #000}
#dropBanner.db-legend{color:#ff9a3c}
#dropBanner.db-set{color:#5fe08a}
#dropBanner.db-rare{color:#ffd24a}
.c-common{color:var(--r-common)}.c-magic{color:var(--r-magic)}.c-rare{color:var(--r-rare)}
.c-set{color:var(--r-set)}.c-legend{color:var(--r-legend)}

/* ---------- Panels ---------- */
.panel{position:absolute;z-index:40;max-height:calc(100vh - 170px);overflow:auto;
  background:linear-gradient(180deg,rgba(16,13,10,.96),rgba(9,7,6,.97));
  border:1px solid #6b5a34;box-shadow:0 10px 40px rgba(0,0,0,.9)}
.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#4b3f28}
.panel-head{display:flex;align-items:center;gap:10px;padding:5px 8px;border-bottom:1px solid #3a3020;
  font-size:13px;color:#e0cf9e;letter-spacing:2px}
.panel-head .close-x{margin-left:auto;width:22px;height:22px;background:#2a2118;border:1px solid #6b5a34;color:#e0cf9e;cursor:pointer}
.page-nav{display:flex;align-items:center;gap:6px;font-size:11px;color:#b9ae94;margin-left:8px}
.page-nav button{width:20px;height:18px;background:#2a2118;border:1px solid #6b5a34;color:#e0cf9e;cursor:pointer}
.char-body{display:flex;gap:12px;padding:10px;flex-wrap:wrap}
#panelChar{width:520px}
#panelInv{width:486px}
.equip-grid{display:grid;grid-template-columns:repeat(3,54px);grid-auto-rows:54px;gap:6px}
.equip-cell{position:relative;background:#15120d;border:1px solid #3a3020}
.equip-cell .lbl{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;color:#5d543f}
.equip-cell.filled .lbl{display:none}
.equip-cell:hover{border-color:#ffe08a}
.char-stats{min-width:236px;font-size:12px;line-height:1.65;color:#cfc7b4}
.char-stats h4{color:#e0cf9e;font-size:12px;margin:6px 0 2px;font-weight:normal;letter-spacing:1px}
.char-stats .v{color:#fff}
.char-stats .bonus{color:var(--r-magic)}
.char-stats .setline{color:#5fe08a}
.char-stats .setline.off{color:#6b6b6b}
.inv-grid{display:grid;grid-template-columns:repeat(10,44px);grid-auto-rows:44px;gap:3px;padding:9px}
.inv-cell{position:relative;background:#141009;border:1px solid #2e2820}
.inv-cell.has{border-color:#5a4a2c;background:#1d1710;cursor:pointer}
.inv-cell:hover{border-color:#ffe08a}
.inv-cell .ico{position:absolute;inset:2px;display:grid;place-items:center;font-size:20px}
.inv-cell .rq{position:absolute;bottom:0;right:2px;font-size:9px;color:#9c927c}
.inv-cell .stk{position:absolute;top:0;left:2px;font-size:9px;color:#ffe9a8}
.inv-foot{display:flex;align-items:center;gap:10px;padding:0 10px 9px}
.filter-swatches{display:flex;gap:5px}
.filter-swatches i{width:14px;height:14px;border:1px solid #000;cursor:pointer;display:block;opacity:.25}
.filter-swatches i.on{opacity:1;box-shadow:0 0 5px currentColor}
.gold-line{margin-left:auto;font-size:12px;color:#ffd24a}
.gold-ico{margin-right:4px}

/* ---------- Toast ---------- */
#toast{position:absolute;left:50%;top:96px;transform:translateX(-50%);z-index:70;font-size:14px;
  color:#ffe9a8;background:rgba(8,6,4,.86);border:1px solid #6b5a34;padding:6px 18px;letter-spacing:1px}

/* ---------- Start / End ---------- */
#startScreen,#endScreen{position:absolute;inset:0;z-index:90;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 34%,#2a1c38 0%,#120b1a 38%,#05040a 72%,#000 100%)}
#bgFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.start-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}

.title-wrap{position:relative;text-align:center}
.title-glow{position:absolute;left:50%;top:52%;width:620px;height:220px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(160,108,255,.34) 0%,rgba(120,40,160,.12) 42%,transparent 70%);
  filter:blur(6px);animation:pulseGlow 4.2s ease-in-out infinite;pointer-events:none}
@keyframes pulseGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
#startScreen h1{position:relative;font-size:66px;font-weight:900;letter-spacing:20px;padding-left:20px;
  background:linear-gradient(180deg,#fff6dd 0%,#e8cf8a 34%,#b06a2a 68%,#6b2f1a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(190,120,255,.55)) drop-shadow(0 5px 0 rgba(0,0,0,.85))}
#startScreen .sub{margin-top:2px;color:#8d8270;letter-spacing:5px;font-size:12px}
#startScreen .sub:before,#startScreen .sub:after{content:"";display:inline-block;width:70px;height:1px;
  vertical-align:middle;margin:0 14px;background:linear-gradient(90deg,transparent,#6b5a34,transparent)}

.class-pick{display:flex;gap:30px;margin-top:2px}
.class-card{position:relative;width:280px;padding:24px 20px 18px;text-align:center;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,rgba(38,26,50,.92),rgba(10,8,14,.96));
  border:1px solid #4b3f28;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.class-card:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.07),transparent 55%)}
.class-card:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent,#a06cff),transparent);opacity:.55}
.class-card:hover{transform:translateY(-8px);border-color:#ffe08a;
  box-shadow:0 22px 50px rgba(0,0,0,.85),0 0 34px var(--glow,rgba(160,108,255,.4))}
.class-card[data-class=ranger]{--accent:#7adf4a;--glow:rgba(122,223,74,.35)}
.class-card[data-class=mage]{--accent:#6fc8ff;--glow:rgba(111,200,255,.35)}

.portrait{position:relative;width:112px;height:112px;margin:0 auto}
.portrait .ring{position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 12%,var(--accent) 16%,transparent 24% 48%,var(--accent) 54%,transparent 62% 100%);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%);
  animation:spin 9s linear infinite;opacity:.85}
.class-card:hover .portrait .ring{animation-duration:2.6s;opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait .core{position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 26px rgba(0,0,0,.8),0 0 22px var(--glow)}
.portrait .core.ranger{background:radial-gradient(circle at 38% 30%,#b6ffce 0%,#2e8f47 42%,#08240f 100%)}
.portrait .core.mage{background:radial-gradient(circle at 38% 30%,#d6f0ff 0%,#2f6fd0 42%,#06142f 100%)}
.portrait .glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;
  color:#fff;text-shadow:0 0 14px var(--accent),0 2px 4px #000}

.class-card h3{font-size:26px;letter-spacing:8px;color:#f4e8c4;margin-top:14px;text-shadow:0 2px 8px #000}
.class-card h3 span{display:block;font-size:10px;letter-spacing:5px;color:#6f6757;margin-top:3px;font-weight:normal}
.tags{display:flex;gap:6px;justify-content:center;margin-top:9px;flex-wrap:wrap}
.tags i{font-size:10px;font-style:normal;padding:2px 7px;border:1px solid;letter-spacing:1px}
.t-poison{color:#8fe05a;border-color:#3f6b28;background:rgba(60,120,40,.16)}
.t-ice{color:#7fd0ff;border-color:#285a7a;background:rgba(40,110,160,.16)}
.t-set{color:#d38bff;border-color:#5d3a7a;background:rgba(110,60,160,.16)}
.t-orb{color:#ffd24a;border-color:#7a6328;background:rgba(150,120,40,.16)}
.skill-list{list-style:none;margin-top:13px;text-align:left;font-size:12px}
.skill-list li{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid rgba(255,255,255,.05)}
.skill-list kbd{flex:0 0 34px;text-align:center;font-size:10px;color:#ffe9a8;background:#1c1610;
  border:1px solid #4b3f28;padding:1px 0;font-family:inherit}
.skill-list b{color:#ddd3bd;font-weight:normal;flex:0 0 62px}
.skill-list em{color:#7d7461;font-style:normal;font-size:11px}
.cta{margin-top:14px;padding:7px 0;font-size:12px;letter-spacing:5px;color:#c8b98c;
  border-top:1px solid #3a3020;background:linear-gradient(180deg,transparent,rgba(255,224,138,.06));transition:.18s}
.class-card:hover .cta{color:#0e0a04;background:linear-gradient(180deg,#ffe08a,#a8811f)}

#btnContinue{padding:8px 26px;font-size:13px;letter-spacing:3px;cursor:pointer;color:#e0cf9e;
  background:linear-gradient(180deg,#2a2118,#120e08);border:1px solid #6b5a34}
#btnContinue:hover{border-color:#ffe08a;color:#ffe9a8;box-shadow:0 0 18px rgba(255,224,138,.25)}

.keys{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;max-width:820px;font-size:11px;color:#6f6757}
.keys span{padding:3px 9px;border:1px solid #241d13;background:rgba(8,6,4,.6)}
.keys b{color:#a99f88;font-weight:normal;letter-spacing:1px}
.keys .warn{color:#c8a45a;border-color:#4b3f28}

#endScreen{background:radial-gradient(ellipse at 50% 40%,rgba(60,12,12,.9) 0%,rgba(8,4,6,.96) 60%,#000 100%)}
#endScreen h2{font-size:44px;letter-spacing:12px;color:#ff8a72;text-shadow:0 0 26px rgba(255,60,40,.6),0 4px 0 #000}
#endStats{font-size:14px;line-height:2.1;color:#cfc7b4;text-align:center;
  padding:12px 30px;border:1px solid #4b3f28;background:linear-gradient(180deg,rgba(20,14,10,.8),rgba(8,6,4,.9))}
#btnRestart{margin-top:8px;padding:10px 34px;font-size:15px;letter-spacing:4px;cursor:pointer;color:#1a1206;
  background:linear-gradient(180deg,#ffe08a,#8a6f1a);border:1px solid #ffe08a}
#btnRestart:hover{box-shadow:0 0 26px rgba(255,224,138,.5)}