/* 修仙 Online — 樣式（深色仙俠風） */
:root{
  --gold:#e8c877;
  --jade:#7cffb0;
  --ink:#0a0d12;
  --panel:rgba(14,18,26,.86);
  --line:rgba(232,200,119,.28);
  --hp:#e05263;
  --mp:#5aa9f5;
  --xp:#c9a227;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);overflow:hidden}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:#e9e6dd;-webkit-font-smoothing:antialiased;
  user-select:none;
}
#cv{display:block;width:100vw;height:100vh;cursor:crosshair}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud > *{pointer-events:auto}

.topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:12px}
.me-card{
  min-width:270px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);backdrop-filter:blur(6px);
}
.me-line{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
#me-name{font-size:15px;font-weight:700;letter-spacing:.5px}
.realm{
  font-size:11px;padding:1px 7px;border-radius:999px;
  color:#0b0f14;background:linear-gradient(180deg,#f0d894,#c99b3a);font-weight:700;
}
.bar{position:relative;height:13px;border-radius:7px;background:rgba(255,255,255,.09);margin-bottom:5px;overflow:hidden}
.bar i{display:block;height:100%;width:0;transition:width .18s linear;border-radius:7px}
.bar.hp i{background:linear-gradient(90deg,#8e2130,#e05263)}
.bar.mp i{background:linear-gradient(90deg,#1f4f8f,#5aa9f5)}
.bar.xp{height:11px}
.bar.xp i{background:linear-gradient(90deg,#7a5f10,#e8c877)}
.bar span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;letter-spacing:.4px;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.bar.xp span{font-size:8px}
.me-sub{display:flex;justify-content:space-between;font-size:11px;color:#a9a496;margin-top:5px}

.stat-card{
  padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  text-align:center;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;align-content:center;
}
.stat-big{font-size:18px;font-weight:800;color:var(--gold);line-height:1.1}
.stat-lbl{font-size:10px;color:#9a9487;margin-bottom:5px}

.minimap{
  position:absolute;right:12px;top:112px;border:1px solid var(--line);border-radius:10px;
  background:rgba(6,9,13,.8);padding:7px;
}
.minimap canvas{display:block;border-radius:6px;background:#05070a}
.legend{display:flex;gap:9px;font-size:10px;color:#9a9487;margin-top:6px;justify-content:center;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:3px}
.dot.mo{background:#c0703a}.dot.pl{background:#7cffb0}.dot.me{background:#e8c877}

.chatwrap{position:absolute;left:12px;bottom:104px;width:330px}
#chatlog{max-height:150px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;margin-bottom:6px}
#chatlog div{
  font-size:12px;padding:3px 8px;border-radius:7px;background:rgba(6,9,13,.72);
  border-left:2px solid var(--line);word-break:break-word;
}
#chatlog b{color:var(--gold)}
#chatbox{
  width:100%;padding:6px 10px;font-size:12px;border-radius:8px;
  border:1px solid var(--line);background:rgba(6,9,13,.8);color:#e9e6dd;outline:none;
}
#chatbox:focus{border-color:var(--gold)}

.hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:44px;display:flex;gap:10px}
.slot{
  position:relative;width:62px;height:62px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:rgba(10,13,19,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.slot .k{position:absolute;top:3px;left:5px;font-size:10px;color:#8d8878;font-weight:800}
.slot .n{font-size:11px;font-weight:700;letter-spacing:.5px}
.slot .m{font-size:9px;color:#6fa8dc;margin-top:2px}
.slot .cdmask{
  position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.72);
  height:0%;transition:height .1s linear;
}
.slot .cdnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000}
.slot.no{opacity:.42}
.slot.ready{box-shadow:0 0 0 1px rgba(232,200,119,.5),0 4px 14px rgba(0,0,0,.5)}

.hint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:14px;
  font-size:11px;color:#8d8878;white-space:nowrap;
}

/* ---------------- overlay ---------------- */
.overlay{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 50% 30%,#141c28,#05070a 70%);
}
.overlay[hidden]{display:none}
.panel{
  width:min(430px,92vw);padding:26px 26px 20px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);box-shadow:0 24px 70px rgba(0,0,0,.7);text-align:center;
}
.panel h1{
  margin:0;font-size:30px;letter-spacing:7px;
  background:linear-gradient(180deg,#fff3cd,#c99b3a);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.panel .sub{margin:6px 0 20px;font-size:12px;color:#9a9487;letter-spacing:2px}
.panel label{display:block;text-align:left;font-size:12px;color:#a9a496;margin-bottom:6px}
.panel input{
  width:100%;padding:11px 13px;font-size:15px;border-radius:9px;text-align:center;
  border:1px solid var(--line);background:rgba(0,0,0,.45);color:#fff;outline:none;letter-spacing:2px;
}
.panel input:focus{border-color:var(--gold)}
.panel button{
  width:100%;margin-top:12px;padding:12px;font-size:16px;font-weight:800;letter-spacing:8px;
  border:0;border-radius:9px;cursor:pointer;color:#12161c;
  background:linear-gradient(180deg,#f2dc9e,#c99b3a);
}
.panel button:hover{filter:brightness(1.08)}
.panel button:disabled{opacity:.5;cursor:default}
.tips{margin:18px 0 0;padding-left:18px;text-align:left;font-size:12px;color:#9a9487;line-height:1.9}
.tips b{color:var(--gold)}
.err{min-height:16px;margin:8px 0 0;font-size:12px;color:#ff8a8a}

/* ---------------- toast ---------------- */
#toast{position:fixed;left:50%;top:86px;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
#toast div{
  padding:6px 15px;border-radius:999px;font-size:13px;font-weight:700;
  background:rgba(8,11,16,.9);border:1px solid var(--line);color:var(--gold);
  animation:pop .3s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}