:root{--bg:#0B0D12;--panel:#12161E;--raised:#1A1F2A;--hover:#222836;--border:#262C38;--border-hi:#343C4B;--text:#E8ECF2;--muted:#8A93A3;--faint:#5A6272;--accent:#4FD1FF;--accent-dim:#0E2A36;--good:#3DDC84;--bad:#FF5C5C;--warn:#F5B748;}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font:13px "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;user-select:none}
#view{position:fixed;inset:0;width:100%;height:100%;display:block}
#overlay{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.card{background:rgba(18,22,30,.94);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.glow{border-color:var(--accent);background:linear-gradient(180deg,rgba(14,42,54,.97),rgba(18,22,30,.97));box-shadow:0 0 0 1px rgba(79,209,255,.25),0 0 28px rgba(79,209,255,.25)}
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;transition:opacity .5s}
.wordmark{font:600 54px Bahnschrift,"Segoe UI",sans-serif;letter-spacing:4px}
.wordmark span{color:var(--accent)}
#loading .sub{color:var(--muted);margin-top:8px}
#hover-text{position:fixed;left:12px;top:10px;font-weight:600;text-shadow:0 1px 2px #000,0 0 6px #000;pointer-events:none;font-size:14px}
#hover-text .t{color:var(--accent)} #hover-text .m{color:var(--muted);font-weight:400}
/* top right */
#top-right{position:fixed;right:12px;top:12px;width:248px}
#minimap-card{width:248px;height:200px;display:flex;align-items:center;justify-content:center;position:relative}
#minimap{width:176px;height:176px;border-radius:50%;border:1px solid var(--border-hi);cursor:pointer;background:#000}
#compass{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--raised);border:1px solid var(--border-hi);display:flex;align-items:center;justify-content:center;font:600 13px Bahnschrift,sans-serif;color:var(--bad);cursor:pointer}
#orbs{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.orb{width:56px;height:56px;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 16px Consolas,monospace;position:relative;overflow:hidden}
.orb small{font:600 9px "Segoe UI",sans-serif;color:var(--muted);letter-spacing:1px}
#orb-hp{border-color:rgba(255,92,92,.6)} #orb-hp span{color:var(--bad)}
#orb-run{cursor:pointer;font-size:11px} #orb-run.on{border-color:var(--accent)} #orb-run.on small{color:var(--accent)}
#orb-cb span{color:var(--warn)}
#xp-drops{position:relative;height:0}
.xpdrop{position:absolute;right:4px;top:0;font:600 14px Consolas,monospace;color:var(--text);text-shadow:0 1px 2px #000;white-space:nowrap;animation:xpup 1.8s ease-out forwards}
.xpdrop b{color:var(--accent)}
@keyframes xpup{from{transform:translateY(40px);opacity:0}15%{opacity:1}to{transform:translateY(-60px);opacity:0}}
/* side panel */
#side{position:fixed;right:12px;bottom:12px;width:248px;padding:10px}
.tabrow{display:flex;gap:6px}
.tabrow button{flex:1;height:34px;background:var(--raised);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:16px;cursor:pointer}
.tabrow button:hover{background:var(--hover);border-color:var(--border-hi)}
.tabrow button.active{background:var(--accent-dim);border-color:var(--accent)}
#tab-title{font:600 11px "Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:10px 2px 8px}
.tab-body{height:336px;overflow:hidden}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{height:42px;background:var(--raised);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;cursor:pointer}
.slot:hover{background:var(--hover);border-color:var(--border-hi)}
.slot.sel{border-color:var(--accent);background:var(--accent-dim)}
.slot.empty{cursor:default;opacity:.55}
.slot .qty{position:absolute;left:4px;top:1px;font:600 10px Consolas,monospace;color:var(--warn)}
.slot .tier{position:absolute;right:3px;bottom:2px;font:700 8px "Segoe UI",sans-serif;padding:0 3px;border-radius:4px;color:#0B0D12}
#skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.skill{background:var(--raised);border:1px solid var(--border);border-radius:8px;padding:6px 8px;position:relative}
.skill .nm{font-size:11px;color:var(--muted)} .skill .lv{font:600 16px Consolas,monospace}
.skill .bar{height:4px;background:var(--border);border-radius:2px;margin-top:4px;overflow:hidden}.skill .bar i{display:block;height:100%;background:var(--accent)}
.skill .ic{position:absolute;right:8px;top:8px;font-size:16px}
#skills-total{margin-top:10px;color:var(--muted);font-size:12px;text-align:center}
#equip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.eqslot{text-align:center;font-size:10px;color:var(--faint)}
.eqslot .slot{margin-bottom:2px}
#equip-stats{margin:10px 0;font:12px Consolas,monospace;color:var(--muted);line-height:1.6;background:var(--raised);border:1px solid var(--border);border-radius:8px;padding:6px 10px}
#equip-stats b{color:var(--text)}
.section-label{font:600 10px "Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:8px 2px 6px}
#styles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
#styles button,.btn{background:var(--raised);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 6px;cursor:pointer;font:12px "Segoe UI",sans-serif}
#styles button:hover,.btn:hover{background:var(--hover);border-color:var(--border-hi)}
#styles button.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
#styles button small{display:block;color:var(--muted);font-size:10px}
.btn{display:block;width:100%;margin-top:8px} .btn.danger:hover{color:var(--bad)}
.help{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:6px} .faint{color:var(--faint)}
.check{display:block;margin:8px 0;color:var(--text)}
/* chat */
#chat{position:fixed;left:12px;bottom:12px;width:520px;height:190px;padding:8px 12px;display:flex;flex-direction:column}
#chat-head{font:600 10px "Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:6px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
#log{flex:1;overflow-y:auto;padding-top:6px;font-size:13px;line-height:1.5}
#log div{color:var(--text)} #log .sys{color:var(--muted)} #log .good{color:var(--good)} #log .bad{color:var(--bad)} #log .acc{color:var(--accent)} #log .warn{color:var(--warn)}
#log::-webkit-scrollbar{width:6px}#log::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:3px}
/* menu */
#menu{position:fixed;min-width:180px;padding:4px;z-index:30;border-radius:10px}
#menu .mh{font:600 10px "Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);padding:6px 10px 4px}
#menu .mi{padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
#menu .mi:hover{background:var(--accent-dim);color:var(--accent)}
#menu .mi .t{color:var(--warn)} #menu .mi .lvl{color:var(--good)} #menu .mi .lvl.hi{color:var(--bad)}
/* dialog */
#dialog{position:fixed;left:50%;bottom:220px;transform:translateX(-50%);width:560px;display:flex;gap:14px;padding:14px;z-index:20}
#dlg-portrait{width:72px;height:72px;border-radius:14px;background:var(--accent-dim);border:1px solid var(--accent)}
#dlg-main{flex:1}
#dlg-name{font:600 15px Bahnschrift,sans-serif;color:var(--accent);margin-bottom:4px}
#dlg-text{line-height:1.5;min-height:40px}
#dlg-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#dlg-opts button{background:var(--raised);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 12px;cursor:pointer;font:12px "Segoe UI",sans-serif}
#dlg-opts button:hover{border-color:var(--accent);color:var(--accent)}
/* level up */
#levelup{position:fixed;left:50%;top:70px;transform:translateX(-50%);padding:14px 26px;text-align:center;z-index:25;animation:pop .35s ease-out}
#levelup .t{font:600 20px Bahnschrift,sans-serif} #levelup .t span{color:var(--accent)} #levelup .s{color:var(--muted);margin-top:4px}
@keyframes pop{from{transform:translate(-50%,-10px) scale(.95);opacity:0}to{transform:translate(-50%,0) scale(1);opacity:1}}
/* bank */
#bank{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;padding:14px;z-index:20}
.modal-head{display:flex;justify-content:space-between;align-items:center;font:600 16px Bahnschrift,sans-serif;margin-bottom:6px}
.x{background:var(--raised);border:1px solid var(--border);color:var(--muted);border-radius:6px;cursor:pointer;width:28px;height:28px}
.x:hover{color:var(--bad)}
#bank-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-height:320px;min-height:150px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px}
.modal-foot{display:flex;gap:8px} .modal-foot .btn{flex:1}
/* world overlays */
.splat{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px Consolas,monospace;color:#fff;text-shadow:0 1px 1px #000;animation:splat .9s ease-out forwards}
.splat.hit{background:radial-gradient(circle,#ff6b6b,#b81d1d);border:1px solid #ffb3b3}
.splat.miss{background:radial-gradient(circle,#4fd1ff,#1a6f99);border:1px solid #b3ecff}
.splat.heal{background:radial-gradient(circle,#3ddc84,#1b8a4c)}
@keyframes splat{0%{transform:scale(.6)}15%{transform:scale(1.1)}25%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-8px)}}
.hpbar{position:absolute;width:36px;height:5px;margin-left:-18px;background:#b81d1d;border:1px solid #000;border-radius:2px;overflow:hidden}
.hpbar i{display:block;height:100%;background:var(--good)}
.overhead{position:absolute;transform:translate(-50%,-100%);color:var(--warn);font-weight:600;text-shadow:0 1px 2px #000;white-space:nowrap;font-size:13px}
.clickmark{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid var(--warn);border-radius:50%;animation:cm .5s ease-out forwards}
.clickmark.red{border-color:var(--bad)}
@keyframes cm{from{transform:scale(1.6);opacity:1}to{transform:scale(.4);opacity:0}}

#bank-grid .help{grid-column:1/-1}

/* ---- polish pass ---- */
#hover-text{background:rgba(11,13,18,.72);border:1px solid var(--border);border-radius:8px;padding:5px 10px;backdrop-filter:blur(4px)}
#hover-text:empty{display:none}
#area-banner{position:fixed;left:50%;top:18%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .6s}
#area-banner.show{opacity:1}
#area-banner .n{font:600 34px Bahnschrift,"Segoe UI",sans-serif;letter-spacing:3px;text-shadow:0 2px 12px rgba(0,0,0,.8)}
#area-banner .s{font:600 11px "Segoe UI",sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--accent);text-shadow:0 1px 6px #000}
#chat{transition:opacity .4s} #chat.idle{opacity:.55} #chat:hover{opacity:1}
.splat{width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:9px;transform:rotate(45deg);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.splat span{transform:rotate(-45deg);font:800 14px Consolas,monospace}
.splat.big{width:36px;height:36px;margin:-18px 0 0 -18px;box-shadow:0 0 12px rgba(255,92,92,.8)}
@keyframes splat{0%{transform:rotate(45deg) scale(.4)}18%{transform:rotate(45deg) scale(1.15)}30%{transform:rotate(45deg) scale(1)}80%{opacity:1}to{opacity:0;transform:rotate(45deg) translate(-6px,-6px)}}
.xpdrop{background:rgba(18,22,30,.9);border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 4px;display:flex;gap:6px;align-items:center}
.xpdrop .ic{width:22px;height:22px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px}
#xp-total{position:absolute;right:256px;top:0;font:600 12px Consolas,monospace;color:var(--muted);background:rgba(18,22,30,.9);border:1px solid var(--border);border-radius:999px;padding:4px 10px;white-space:nowrap}
#xp-total b{color:var(--accent)}
.skill.hl{border-color:var(--accent);background:var(--accent-dim)}

.slot.forged{box-shadow:inset 0 0 0 1px var(--fc,#4FD1FF),0 0 8px -2px var(--fc,#4FD1FF)}
.slot .star{position:absolute;right:4px;top:1px;font-size:10px;color:var(--warn)}
.quest{background:var(--raised);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:8px}
.quest h4{margin:0 0 6px;font:600 14px Bahnschrift,sans-serif} .quest h4 small{color:var(--muted);font:11px "Segoe UI",sans-serif;margin-left:6px}
.quest .st{font-size:12px;color:var(--muted);line-height:1.7} .quest .st.done{color:var(--good);text-decoration:line-through;opacity:.7} .quest .st.cur{color:var(--text)}
.quest.complete{border-color:var(--good)}
.modal-head small{font:12px "Segoe UI",sans-serif;color:var(--muted);margin-left:8px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{background:var(--raised);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer;font:12px "Segoe UI",sans-serif}
.seg button:hover{border-color:var(--border-hi);background:var(--hover)}
.seg button.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.seg button.locked{opacity:.45}
.seg button small{color:var(--muted);margin-left:4px}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);cursor:pointer}
.sw.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.btn.primary{background:var(--accent);color:#0B0D12;border-color:var(--accent);font-weight:600}
.btn.primary:hover{background:#2BB5E8}
.btn.primary:disabled{opacity:.4;cursor:not-allowed}
#tab-quests{overflow-y:auto;padding-right:4px}#tab-quests::-webkit-scrollbar{width:6px}#tab-quests::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:3px}
/* v0.4 GAD: Harbour Blue (#3E6B8A) gets a 1px BONE edge inside the ring so it separates from the dark panel */
.sw.dye-harbour{box-shadow:inset 0 0 0 1px #D8CCB0}
.sw.dye-harbour.active{box-shadow:inset 0 0 0 1px #D8CCB0,0 0 0 2px var(--accent)}

/* B21 save-failure banner */
#save-banner{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:60;background:#3a1d14;color:#F2D24B;border:1px solid #D8CCB0;padding:6px 14px;font:13px/1.3 inherit;box-shadow:0 2px 0 #000;pointer-events:none}
/* v0.4 bank (V4-21) */
#bank{width:560px}
#bank-used{font:600 11px Consolas,monospace;color:var(--muted);margin-left:8px}
#bank-tabs{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
#bank-tabs .btab{width:40px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--raised);border:1px solid var(--border);cursor:pointer;font:700 11px Tahoma,Verdana,sans-serif;color:var(--text);position:relative}
#bank-tabs .btab img{width:26px;height:26px;pointer-events:none}
#bank-tabs .btab.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#bank-tabs .btab.drop{background:var(--hover)}
#bank-tabs .btab.plus.off{opacity:.35;cursor:default}
.bank-search{display:flex;gap:8px;align-items:center;margin-bottom:6px}
#bank-search{flex:1;background:var(--raised);border:1px solid var(--border);color:var(--text);padding:4px 6px;font:12px Tahoma,Verdana,sans-serif}
#bank-search:focus{outline:none;border-color:var(--accent)}
#bank-matches{font:600 11px Consolas,monospace;color:var(--muted);min-width:70px;text-align:right}
#bank-grid{max-height:300px;align-content:start}
#bank-grid .bdiv{grid-column:1/-1;height:12px;border-bottom:1px solid var(--border-hi);font:700 9px Tahoma,sans-serif;color:var(--muted);letter-spacing:1px}
#bank-grid .slot.ph{opacity:.35}
#bank-grid .slot.found{box-shadow:inset 0 0 0 1px var(--accent)}
#bank-grid .slot.dragging{opacity:.3}
#bank-grid .slot.dropat{outline:1px dashed var(--warn)}
.slot.slip::before{content:'';position:absolute;left:5px;right:5px;top:4px;bottom:4px;background:linear-gradient(180deg,#E8DDBF,#CDBB91);border:1px solid #7A6A48;transform:rotate(-4deg);pointer-events:none}
.slot.slip img.ic32,.slot.slip>span:not(.qty){position:relative;transform:scale(.72)}
.bank-foot{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.bseg{display:flex}
.bseg button{background:var(--raised);border:1px solid var(--border);color:var(--muted);padding:3px 7px;cursor:pointer;font:700 11px Tahoma,Verdana,sans-serif}
.bseg button.on{color:var(--warn);background:var(--hover);border-color:var(--border-hi);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
#bank-x{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--border-hi);padding:10px;width:220px;box-shadow:0 6px 18px rgba(0,0,0,.6)}
#bank-x input{width:100%;box-sizing:border-box;background:var(--raised);border:1px solid var(--border);color:var(--text);padding:4px 6px;font:14px Consolas,monospace;margin:6px 0 4px}
#bank-x .bx-t{font:700 12px Tahoma,Verdana,sans-serif} #bank-x .bx-h{font:10px Tahoma,sans-serif;color:var(--muted)}
.bank-ghost{position:fixed;pointer-events:none;z-index:60;opacity:.85;width:44px}

/* 0.4.0-dev.C shop selling */
#shop-x{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--border-hi);padding:10px;width:220px;box-shadow:0 6px 18px rgba(0,0,0,.6);z-index:2}
#shop-x input{width:100%;box-sizing:border-box;background:var(--raised);border:1px solid var(--border);color:var(--text);padding:4px 6px;font:14px Consolas,monospace;margin:6px 0 4px}
#shop-x .bx-t{font:700 12px Tahoma,Verdana,sans-serif} #shop-x .bx-h{font:10px Tahoma,sans-serif;color:var(--muted)}
.shop-item .qty{color:var(--muted);font-size:11px} .shop-item.out{opacity:.5} #shop-sell-hint{margin-top:2px}
/* examine_drops: drop table panel (Examine on a creature) */
#drops{position:fixed;width:300px;padding:6px 8px 8px;z-index:29}
#drops .dh{padding:2px 2px 5px;border-bottom:1px solid var(--border)} #drops .dh .dx{float:right;cursor:pointer;color:var(--muted)}
#drops .ex{color:var(--muted);font-style:italic;font-weight:400;font-size:12px;line-height:1.35;padding:6px 2px}
#drops .dr{display:grid;grid-template-columns:40px 1fr 54px 58px;align-items:center;padding:2px 2px}
#drops .dr.th{font-size:11px;color:var(--muted);padding:2px 4px}
#drops .sl{width:36px;height:36px;display:flex;align-items:center;justify-content:center}
#drops .q,#drops .r{text-align:right} #drops .q{padding-right:6px}
#drops .unseen .sl img,#drops .unseen .sl span{filter:brightness(0) opacity(.4)} #drops .unseen .in{color:var(--faint)}
#drops .none{padding:6px 2px;color:var(--muted)} #drops .ft{font-size:11px;font-weight:400;color:var(--muted);padding:5px 2px 0}