/* ---------- explorer ---------- */
.addr { display:flex; align-items:center; gap:4px; padding:2px 1px; flex:0 0 auto; }
.addr .lab { font-size:11px; }
.addr .abox { flex:1; height:19px; display:flex; align-items:center; gap:3px; padding:0 4px;
  background:#fff; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
.addr .abox img { width:16px; height:16px; }
.iconview { flex:1; overflow:auto; background:#fff; padding:8px; position:relative;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
.iconview.list { display:flex; flex-direction:column; gap:0; }
.fitem { width:76px; padding:3px 2px; text-align:center; position:relative; }
.iconview.list .fitem { width:100%; display:flex; align-items:center; text-align:left; gap:6px; padding:1px 4px; }
.iconview.list .fitem img { width:16px; height:16px; }
.iconview.list .fitem .fl { display:flex; flex-direction:column; }
.iconview.list .fitem .sz { color:#808080; font-size:10px; }
.fitem img.big { width:32px; height:32px; margin:0 auto 3px; }
.fitem .fl { line-height:1.15; word-wrap:break-word; padding:0 1px; display:inline-block; }
.fitem.sel .fl { background:var(--navy); color:#fff; outline:1px dotted #c0c0c0; }
.fitem .cdov { position:absolute; left:22px; top:2px; width:32px; height:32px; overflow:hidden; pointer-events:none; }
.iconview.list .fitem .cdov { left:2px; top:1px; }
.fitem .cdov i { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,24,.62); }
.fitem .dis-x { position:absolute; left:22px; top:2px; width:32px; height:32px; pointer-events:none;
  background: url('') center/24px no-repeat; }
.fitem .badge { position:absolute; right:8px; top:0; color:#e02020; font-weight:bold; font-size:11px; }
.drop-hint { outline:2px dashed #000080; outline-offset:-4px; }
.price { color:#000080; font-size:10px; display:block; margin-top:1px; }
/* ---------- combat ---------- */
.combat { display:flex; flex-direction:column; height:100%; gap:6px; padding:6px; }
.enemy-area { display:flex; gap:10px; align-items:center; padding:8px; min-height:96px;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow), inset -2px -2px var(--hi), inset 2px 2px var(--dark); }
.enemy-area.droptarget { outline:2px dashed #000080; outline-offset:2px; }
.enemy-area .espr { width:64px; height:64px; flex:0 0 64px; animation:bob 1.4s steps(2) infinite; }
.enemy-area .espr canvas { width:64px; height:64px; }
.enemy-area.dead .espr { animation:none; filter:grayscale(1) brightness(.7); }
@keyframes bob { 0%{transform:translateY(0)} 50%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
.estats { flex:1; display:flex; flex-direction:column; gap:4px; }
.bar { height:14px; background:#fff; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); position:relative; overflow:hidden; }
.bar .fill { height:100%; width:100%; transition:width .15s steps(6); }
.bar.hp .fill { background:repeating-linear-gradient(90deg,#e02020 0 5px,#901010 5px 7px); }
.bar.timer .fill { background:repeating-linear-gradient(90deg,#f0d040 0 5px,#a08010 5px 7px); }
.bar.mana .fill { background:repeating-linear-gradient(90deg,#3050e0 0 5px,#102080 5px 7px); }
.bar.xp .fill { background:repeating-linear-gradient(90deg,#20a020 0 5px,#106010 5px 7px); }
.bar .btxt { position:absolute; inset:0; font-size:10px; text-align:center; line-height:14px; color:#000; mix-blend-mode:normal; }
.quicks { display:flex; gap:4px; flex-wrap:wrap; min-height:44px; }
.qslot { width:40px; height:40px; position:relative; background:var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hi);
  display:flex; align-items:center; justify-content:center; }
.qslot img { width:24px; height:24px; }
.qslot .cdov { position:absolute; left:3px; top:3px; width:32px; height:32px; overflow:hidden; pointer-events:none; }
.qslot .cdov i { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,24,.62); }
.qslot .mpcost { position:absolute; right:1px; bottom:0; font-size:9px; color:#000080; font-weight:bold; }
.qslot.dis { opacity:.4; }
.combat .clog { flex:1; overflow-y:auto; background:#fff; padding:3px 5px; font-size:11px; line-height:1.4;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
.combat .hint { font-size:10px; color:#404040; }
.combat.boss .titlebar { background:linear-gradient(90deg,#800000,#e04040); }
/* ---------- map ---------- */
.mapwin .mapwrap { flex:1; position:relative; overflow:hidden; background:#000; }
.mapwin canvas.map { position:absolute; left:0; top:0; }
.mapwin .leg { position:absolute; left:4px; bottom:4px; background:rgba(0,0,0,.55); color:#fff;
  font-size:10px; padding:3px 6px; line-height:1.5; }
/* ---------- mail ---------- */
.mailbody { flex:1; display:flex; gap:3px; overflow:hidden; }
.mailfolders { width:130px; flex:0 0 130px; overflow:auto; background:#fff; padding:4px;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
.mfold { padding:3px 6px; display:flex; align-items:center; gap:5px; }
.mfold img { width:16px; height:16px; }
.mfold.sel { background:var(--navy); color:#fff; }
.maillist { width:230px; flex:0 0 230px; overflow-y:auto; background:#fff;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
.mrow { padding:3px 5px; border-bottom:1px solid #e0e0e0; }
.mrow .from { font-size:11px; }
.mrow .subj { font-size:11px; }
.mrow.unread .from, .mrow.unread .subj { font-weight:bold; }
.mrow.sel { background:var(--navy); color:#fff; }
.mrow .dt { float:right; font-size:10px; color:#808080; }
.mrow.sel .dt { color:#c0c0c0; }
.mailview { flex:1; overflow:auto; background:#fff; padding:8px; font-size:12px; line-height:1.5;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
.mailview .mhdr { border-bottom:1px solid #000; padding-bottom:4px; margin-bottom:6px; }
.mailview .mhdr b { font-size:12px; }
.mailview .qbtns { margin-top:10px; }
.mailview .qstatus { margin-top:8px; padding:5px; background:#ffffe1; border:1px solid #808080; }
/* ---------- notepad ---------- */
.notepad textarea { flex:1; resize:none; border:none; outline:none; font-family:"Courier New",monospace;
  font-size:13px; padding:4px; white-space:pre-wrap; background:#fff;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
/* ---------- character ---------- */
.charbody { flex:1; display:flex; gap:8px; padding:8px; overflow:auto; }
.charleft { width:150px; flex:0 0 150px; display:flex; flex-direction:column; gap:6px; align-items:center; }
.charleft .portrait { width:64px; height:64px; padding:4px; background:var(--face);
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hi); }
.charleft .portrait canvas { width:64px; height:64px; }
.charright { flex:1; display:flex; flex-direction:column; gap:5px; }
.strow { display:flex; align-items:center; gap:6px; }
.strow .k { width:78px; text-align:right; font-size:11px; }
.strow .bar { flex:1; }
.strow .v { width:64px; font-size:10px; }
.eqslot { display:flex; align-items:center; gap:6px; padding:3px 5px; min-height:36px;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow); background:var(--face); }
.eqslot img { width:24px; height:24px; }
.eqslot.drop-hint { outline:2px dashed #000080; }
/* ---------- wizard ---------- */
.wiz .wbody { flex-direction:column; }
.wiz .wizrow { flex:1; display:flex; overflow:hidden; }
.wiz .wside { width:132px; flex:0 0 132px; background:var(--navy); color:#fff; padding:10px 8px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.wiz .wside .wt { font-size:13px; font-weight:bold; text-align:center; }
.wiz .wmain { flex:1; padding:12px; overflow:auto; background:var(--face); }
.wiz h2 { font-size:15px; margin-bottom:8px; }
.wiz p { font-size:12px; line-height:1.5; margin-bottom:8px; }
.wiz .classes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wiz .classes.cards3 { grid-template-columns:1fr 1fr 1fr; gap:6px; }
.wiz .classes.cards3 .ccard { padding:6px; }
.wiz .classes.cards3 .ccard canvas { width:32px; height:32px; }
.wiz .classes.cards3 .ccard .cn { font-size:11px; }
.wiz .classes.cards3 .ccard .cd { font-size:9px; }
.wiz .ccard { display:flex; gap:8px; padding:8px; align-items:center; background:#fff;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
.wiz .ccard.sel { background:#c0c0ff; }
.wiz .ccard canvas { width:48px; height:48px; }
.wiz .ccard .cn { font-weight:bold; font-size:12px; }
.wiz .ccard .cd { font-size:10px; color:#404040; line-height:1.3; }
.wizfoot { display:flex; justify-content:flex-end; gap:6px; padding:6px 10px; flex:0 0 auto; }

/* ---------- HUD: System Monitor ---------- */
.hud .wbody { display:flex; flex-direction:column; gap:4px; padding:6px; font-size:11px; }
.hud .bar { height:16px; margin-bottom:2px; }
.hud .hud-hero { font-weight:bold; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.hud .hud-slots { display:flex; gap:6px; align-items:center; margin-top:2px; }
.hud .hud-slot { position:relative; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  cursor:pointer; }
.hud .hud-slot:active { box-shadow: inset 1px 1px var(--hi), inset -1px -1px var(--shadow), inset 2px 2px var(--light), inset -2px -2px var(--dark); }
.hud .hud-slot .mpcost { position:absolute; right:1px; bottom:0; font-size:9px; color:#1030a0; }
.hud .hud-gold { font-size:10px; color:#504010; margin-left:auto; }