/* ============================================================
   Тихий Дол — Albion-inspired HUD & interface
   ============================================================ */
:root{
  --ink:#0c0a07;
  --panel:#17130d;
  --panel2:#211a11;
  --panel3:#2b2216;
  --line:#5f4a2c;
  --gold:#c9a24a;
  --gold-lt:#f0d79a;
  --gold-dk:#7a5c2a;
  --parch:#d9c7a0;
  --text:#e8ddc6;
  --muted:#a8977a;
  --hp:#b23a2e;
  --hp-lt:#e2634f;
  --en:#2f6fa8;
  --en-lt:#5fa4d8;
  --serif:"Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#070806;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;user-select:none}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;filter:saturate(1.12) contrast(1.05) brightness(1.03)}
#grade{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(255,244,214,.05) 0%, rgba(255,238,200,0) 46%, rgba(10,14,18,.28) 100%),
    linear-gradient(180deg, rgba(22,34,44,.12) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, rgba(8,10,8,.30) 100%);
  mix-blend-mode:multiply;}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 180px 30px rgba(0,0,0,.55), inset 0 0 60px 0 rgba(0,0,0,.32);}
.hidden{display:none !important}

#hud{position:fixed;inset:0;z-index:10;pointer-events:none;font-size:13px}
#hud > *{pointer-events:auto}
/* Full-screen remote-name layer and its labels must never eat world clicks. */
#hud > .remote-layer,
#hud > .remote-layer *{pointer-events:none}

/* ---------- generic panel chrome ---------- */
#player-card,#quest-panel,#minimap-wrap,#chat-log,#action-bar-wrap,
.inv-window,.help-card,.victory-card{
  background:
    linear-gradient(180deg, rgba(56,44,27,.55) 0%, rgba(20,16,10,.94) 14%, rgba(14,11,7,.97) 82%, rgba(38,29,18,.9) 100%);
  border:1px solid #6b5636;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 0 0 2px rgba(150,118,64,.30),
    inset 0 1px 0 rgba(255,231,178,.16),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 14px 38px rgba(0,0,0,.62);
  border-radius:5px;
}
#player-card::before,#quest-panel::before,#minimap-wrap::before,#chat-log::before{
  content:"";position:absolute;inset:3px;border:1px solid rgba(201,162,74,.18);border-radius:3px;pointer-events:none;
}
.rivet{position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e2c98f,#8a6d38 55%,#3a2c16 100%);
  box-shadow:0 0 0 1px #241a0c,0 1px 2px #000;}

/* ---------- player card ---------- */
#player-card{position:absolute;left:16px;top:16px;width:344px;padding:10px 12px 10px 10px;display:flex;gap:12px;align-items:center}
.pc-portrait{position:relative;width:78px;height:78px;flex:0 0 78px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#3a2f20,#0e0b07 72%);
  box-shadow:0 0 0 2px #0b0805,0 0 0 3px #8a6c39,0 0 0 5px #2a1f10,0 0 14px rgba(201,162,74,.25),inset 0 0 18px #000;}
.pc-portrait canvas{position:absolute;inset:5px;width:68px;height:68px;border-radius:50%;display:block}
.pc-ring{position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(240,215,154,.25);
  background:conic-gradient(from 210deg,rgba(240,215,154,.55),rgba(240,215,154,0) 22%,rgba(240,215,154,0) 78%,rgba(240,215,154,.45));mask:radial-gradient(circle,transparent 66%,#000 68%);-webkit-mask:radial-gradient(circle,transparent 66%,#000 68%);pointer-events:none}
.pc-level{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:700 12px/1 var(--serif);color:#1b1206;background:linear-gradient(180deg,#f4dc9d,#c39a44 60%,#8a6424);
  border:1px solid #4b3615;box-shadow:0 2px 4px #000,inset 0 1px 0 #fff6d0;z-index:2}
.pc-info{min-width:0;flex:1}
.pc-name{font:700 19px/1.1 var(--serif);letter-spacing:.4px;color:#f1e3c4;text-shadow:0 1px 0 #000,0 0 12px rgba(201,162,74,.18)}
.pc-guild{font-size:10.5px;color:#a89573;letter-spacing:.6px;margin:3px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{position:relative;height:15px;margin-top:4px;background:linear-gradient(180deg,#0a0906,#15110b);border:1px solid #3a2d19;border-radius:3px;
  box-shadow:inset 0 2px 4px #000,0 1px 0 rgba(255,230,180,.08);overflow:hidden}
.bar i{position:absolute;inset:0;transform-origin:left center;transition:transform .22s ease}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 10px/1 var(--sans);
  letter-spacing:.5px;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;z-index:2}
.bar-hp i{background:linear-gradient(180deg,#e2634f,#b23a2e 55%,#7d2118);box-shadow:inset 0 -3px 6px rgba(0,0,0,.35)}
.bar-en i{background:linear-gradient(180deg,#67a9da,#2f6fa8 55%,#1b4a73);box-shadow:inset 0 -3px 6px rgba(0,0,0,.35)}
.bar-hp::after,.bar-en::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.20),transparent 46%);pointer-events:none;z-index:1}

/* ---------- zone & resources ---------- */
#zone-plate{position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center;pointer-events:none;
  padding:4px 26px 5px;background:linear-gradient(90deg,transparent,rgba(9,8,6,.72) 18%,rgba(9,8,6,.72) 82%,transparent);}
.zp-name{display:block;font:700 17px/1.1 var(--serif);letter-spacing:2.4px;color:#e7d3a8;text-shadow:0 2px 3px #000}
.zp-sub{display:block;font-size:9px;letter-spacing:2.2px;color:#9c8763;margin-top:2px;text-transform:uppercase}
#resource-bar{position:absolute;left:50%;top:58px;transform:translateX(-50%);display:flex;gap:7px;opacity:.9}
.res{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:4px;
  background:linear-gradient(180deg,rgba(45,36,23,.75),rgba(12,10,7,.82));border:1px solid #4a3a22;box-shadow:0 2px 6px #0008,inset 0 1px 0 rgba(255,230,180,.08)}
.res svg{width:21px;height:21px;filter:drop-shadow(0 1px 1px #000)}
.res .amt{font:700 12px/1 var(--sans);color:#f0dfba;margin-left:1px;text-shadow:0 1px 2px #000}
.res.bump{animation:resbump .35s ease}
@keyframes resbump{0%{transform:scale(1)}35%{transform:scale(1.14);border-color:#d9b264}100%{transform:scale(1)}}

/* ---------- top buttons ---------- */
#top-buttons{position:absolute;right:16px;top:16px;display:flex;gap:7px}
.hud-btn{width:40px;height:40px;padding:9px;border-radius:4px;cursor:pointer;color:#cbb68c;
  background:linear-gradient(180deg,#3a2e1c,#1a140c 55%,#241b10);border:1px solid #6b5636;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.18),inset 0 -2px 4px #0007,0 3px 8px #0007;transition:.12s}
.hud-btn:hover{color:#f4dfb0;border-color:#a9823f;box-shadow:0 0 10px rgba(201,162,74,.3),inset 0 1px 0 rgba(255,235,190,.3)}
.hud-btn svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px #000)}
#btn-sound.off{color:#7c6a4c;opacity:.65}

/* ---------- quest ---------- */
#quest-panel{position:absolute;right:16px;top:74px;width:306px;padding:0 0 12px;overflow:hidden;
  animation:panelIn .35s ease}
@keyframes panelIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.panel-cap{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(201,162,74,.24);
  background:linear-gradient(180deg,rgba(94,72,38,.5),rgba(38,29,17,.2));font:700 11px/1 var(--serif);letter-spacing:2.2px;color:#e3c98f;text-transform:uppercase}
.panel-cap i{flex:1;height:1px;background:linear-gradient(90deg,rgba(201,162,74,.55),transparent)}
.panel-cap b{font:600 9px/1 var(--sans);color:#9d8861;letter-spacing:1.2px}
.quest-head{padding:11px 14px 2px}
.quest-kicker{font-size:8.5px;letter-spacing:2.4px;color:#a88f5f;text-transform:uppercase}
.quest-head h3{margin:4px 0 6px;font:700 17px/1.2 var(--serif);color:#f3e3bf;text-shadow:0 1px 2px #000;letter-spacing:.2px}
.quest-list{list-style:none;margin:0;padding:4px 10px 0}
.quest-list li{display:flex;align-items:flex-start;gap:8px;padding:6px 6px;border-radius:3px;font-size:12px;line-height:1.32;color:#b8a583;position:relative}
.quest-list li+li{border-top:1px solid rgba(120,96,58,.16)}
.quest-list .tick{width:14px;height:14px;flex:0 0 14px;margin-top:1px;border:1px solid #6c5734;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#8fdc7a;background:#15110b;box-shadow:inset 0 1px 2px #000}
.quest-list li.active{color:#efe0bc;background:linear-gradient(90deg,rgba(201,162,74,.10),transparent)}
.quest-list li.active .tick{border-color:#c9a24a;box-shadow:0 0 8px rgba(201,162,74,.35)}
.quest-list li.done{color:#7e8a6b}
.quest-list li.done .tick{background:#26331f;border-color:#56713f}
.quest-list .cnt{margin-left:auto;font:700 10px/1 var(--sans);color:#e6c887;background:#211a10;border:1px solid #4b3a20;border-radius:8px;padding:2px 6px}
.quest-hint{margin:8px 14px 0;padding-top:8px;border-top:1px dashed rgba(201,162,74,.24);font-size:11px;line-height:1.4;color:#9e8a67}
.quest-hint b{color:#e8c987;font-weight:600}

/* ---------- minimap ---------- */
#minimap-wrap{position:absolute;right:18px;bottom:18px;width:196px;padding:7px 7px 6px;border-radius:6px}
.mm-frame{position:relative;width:180px;height:180px;margin:0 auto;border-radius:4px;overflow:hidden;
  border:1px solid #20180d;box-shadow:0 0 0 1px #8a6c39,0 0 0 3px #1a130a,inset 0 0 22px #000c,0 4px 14px #000}
#minimap{width:100%;height:100%;display:block;background:#1c2418}
.mm-n,.mm-e,.mm-s,.mm-w{position:absolute;font:700 9px/1 var(--serif);color:#f0dcae;text-shadow:0 1px 3px #000;z-index:2}
.mm-n{left:50%;top:4px;transform:translateX(-50%)}.mm-e{right:5px;top:50%;transform:translateY(-50%)}
.mm-s{left:50%;bottom:4px;transform:translateX(-50%)}.mm-w{left:5px;top:50%;transform:translateY(-50%)}
.mm-compass{position:absolute;right:7px;top:7px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#3a2d1a,#100c07 70%);border:1px solid #8a6c39;box-shadow:0 2px 6px #000a;z-index:2}
.mm-compass i{position:absolute;left:50%;top:50%;width:2px;height:9px;margin:-9px 0 0 -1px;background:linear-gradient(180deg,#e05a44 55%,#e8dcc0 55%);transform-origin:50% 100%}
.mm-label{display:flex;justify-content:space-between;align-items:baseline;padding:6px 4px 1px;font:600 11px/1 var(--serif);color:#e6d3a9;letter-spacing:.6px}
.mm-label span:last-child{font:600 10px/1 var(--sans);color:#9c8763;letter-spacing:.5px}
.mm-meta{display:flex;justify-content:space-between;padding:3px 4px 0;font:500 9px/1 var(--sans);color:#7f6f53;letter-spacing:.6px}

/* ---------- chat ---------- */
#chat-log{position:absolute;left:16px;bottom:20px;width:392px;height:154px;display:flex;flex-direction:column;overflow:hidden;border-radius:5px}
.chat-head{display:flex;gap:14px;padding:6px 12px 5px;border-bottom:1px solid rgba(201,162,74,.2);font:600 10px/1 var(--sans);letter-spacing:.8px;color:#7f6f53;background:linear-gradient(180deg,rgba(70,54,30,.34),transparent)}
.chat-head b{color:#e3c98f;font-weight:700;position:relative}
.chat-head b::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#c9a24a}
#chat-lines{flex:1;padding:6px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;font-size:11px;line-height:1.35;color:#c9baa0;overflow:hidden}
#chat-lines .cl{text-shadow:0 1px 2px #000;animation:chatIn .25s ease}
#chat-lines .cl b{color:#e8c987;font-weight:600}
#chat-lines .cl.sys{color:#8fa7bd}
#chat-lines .cl.good{color:#a8c98c}
#chat-lines .cl.warn{color:#d8a26b}
@keyframes chatIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---------- action bar ---------- */
#action-bar-wrap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 12px 5px;border-radius:6px;min-width:560px;text-align:center}
.ab-top{display:flex;gap:8px;margin:0 auto 6px;width:min(520px,100%)}
.ab-hp,.ab-en{position:relative;flex:1;height:11px;border-radius:3px;background:#0b0906;border:1px solid #382b18;box-shadow:inset 0 2px 3px #000;overflow:hidden}
.ab-hp i,.ab-en i{position:absolute;inset:0;transform-origin:left;transition:transform .2s}
.ab-hp i{background:linear-gradient(180deg,#dc6450,#a83227 60%,#6f1d15)}
.ab-en i{background:linear-gradient(180deg,#63a5d6,#2c6a9f 60%,#174265)}
.ab-hp span,.ab-en span{position:absolute;inset:0;display:grid;place-items:center;font:700 8.5px/1 var(--sans);color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.5px}
#hotbar{display:flex;align-items:center;justify-content:center;gap:6px}
.slot{position:relative;width:54px;height:54px;border-radius:4px;cursor:pointer;flex:0 0 54px;
  background:
    radial-gradient(120% 90% at 50% 20%,rgba(110,88,52,.35),transparent 60%),
    linear-gradient(180deg,#2a2115,#100d08 65%,#1b150d);
  border:1px solid #6d5734;
  box-shadow:0 0 0 1px #0b0805,inset 0 1px 0 rgba(255,230,180,.18),inset 0 -3px 6px #0009,0 3px 8px #0008;
  display:grid;place-items:center;transition:.12s;overflow:visible}
.slot:hover{border-color:#c9a24a;box-shadow:0 0 12px rgba(201,162,74,.3),inset 0 1px 0 rgba(255,235,190,.28),0 4px 10px #0009;transform:translateY(-1px)}
.slot svg{width:38px;height:38px;filter:drop-shadow(0 2px 2px #000a)}
.slot .key{position:absolute;left:3px;top:2px;font:700 9.5px/1 var(--sans);color:#e7d3a8;text-shadow:0 1px 2px #000,0 0 4px #000;z-index:3;letter-spacing:.2px}
.slot.sel{border-color:#e2bd72;box-shadow:0 0 0 1px #f0d79a,0 0 16px rgba(226,189,114,.55),inset 0 0 14px rgba(201,162,74,.25),0 4px 10px #0009}
.slot.sel::after{content:"";position:absolute;left:8%;right:8%;bottom:-5px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#e2bd72,transparent);box-shadow:0 0 8px #e2bd7266}
.slot.locked{cursor:not-allowed}
.slot.locked svg{opacity:.22;filter:grayscale(1)}
.slot.locked::before{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:15px;opacity:.5;z-index:4;text-shadow:0 1px 3px #000}
.slot .cd{position:absolute;inset:0;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .15s;
  background:conic-gradient(rgba(4,6,10,.82) var(--p,0%),transparent 0);z-index:4}
.slot .cd.on{opacity:1}
.slot .cdnum{position:absolute;inset:0;display:grid;place-items:center;font:800 17px/1 var(--sans);color:#fff;text-shadow:0 2px 4px #000}
.ab-caption{display:flex;justify-content:center;gap:9px;margin-top:5px;font:500 9px/1 var(--sans);letter-spacing:1.4px;color:#8b7a5c;text-transform:uppercase}
.ab-sep{color:#5f4a2c}

/* ---------- interact / toasts / combat tips ---------- */
#interact-prompt{position:absolute;transform:translate(-50%,-140%);display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border-radius:4px;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,23,15,.94),rgba(9,7,5,.96));border:1px solid #8a6c39;box-shadow:0 4px 16px #000b,inset 0 1px 0 rgba(255,230,180,.15);font-size:12px;color:#efe0bd}
#interact-prompt kbd{font:700 10px/1 var(--sans);color:#1a1207;background:linear-gradient(180deg,#f2d899,#b8914a);border:1px solid #4d3818;border-radius:3px;padding:4px 5px;text-shadow:0 1px 0 #ffeec4}
#toasts{position:absolute;right:18px;top:300px;display:flex;flex-direction:column;gap:7px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;max-width:320px;padding:8px 12px;border-radius:4px;font-size:12px;line-height:1.3;
  background:linear-gradient(180deg,rgba(37,30,19,.97),rgba(12,10,7,.97));border:1px solid #6d5734;border-left:3px solid #c9a24a;
  box-shadow:0 8px 24px #000a,inset 0 1px 0 rgba(255,230,180,.1);animation:toastIn .28s ease}
.toast .ti{font-size:15px;color:#e8c987}
.toast.good{border-left-color:#79a85e}.toast.good .ti{color:#9ed07e}
.toast.warn{border-left-color:#c9773f}.toast.warn .ti{color:#e5a06c}
.toast.out{opacity:0;transform:translateX(14px);transition:.35s}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
#combat-tips{position:absolute;left:50%;top:108px;transform:translateX(-50%);padding:7px 16px;border-radius:4px;font-size:12px;color:#e9d9b7;pointer-events:none;
  background:rgba(12,9,6,.82);border:1px solid #5f4a2c;box-shadow:0 6px 18px #0008;text-align:center}
#combat-tips kbd{font:700 10px/1 var(--sans);padding:3px 5px;border-radius:3px;color:#1a1207;background:linear-gradient(180deg,#f2d899,#b8914a);border:1px solid #4d3818}
#damage-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.dmg{position:absolute;transform:translate(-50%,-50%);font:800 20px/1 var(--sans);color:#ffe9c0;text-shadow:0 2px 3px #000,0 0 8px #000;animation:dmgUp .9s ease-out forwards;pointer-events:none}
.dmg.heal{color:#9be87c}.dmg.crit{font-size:26px;color:#ffd06a}
.dmg.player{color:#ff7c62}
@keyframes dmgUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}18%{opacity:1;transform:translate(-50%,-70%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}

/* ---------- dialog ---------- */
#dialog{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);width:min(760px,86vw);display:flex;gap:14px;padding:14px 18px 12px;z-index:30;
  background:linear-gradient(180deg,rgba(45,36,22,.97),rgba(13,10,7,.98));border:1px solid #8a6c39;border-radius:5px;
  box-shadow:0 0 0 1px #241a0c,0 0 0 3px rgba(201,162,74,.28),0 20px 50px #000c,inset 0 1px 0 rgba(255,230,180,.18)}
.dlg-portrait{width:86px;height:86px;flex:0 0 86px;border-radius:50%;overflow:hidden;border:2px solid #8a6c39;box-shadow:0 0 0 3px #1b1309,inset 0 0 18px #000;background:#1b1610}
.dlg-portrait canvas{width:100%;height:100%;display:block}
.dlg-body{flex:1;min-width:0}
.dlg-name{font:700 14px/1 var(--serif);color:#e8c987;letter-spacing:.5px;margin-bottom:6px}
.dlg-name span{font:400 10px/1 var(--sans);color:#8f7c5c;letter-spacing:1px}
#dialog-text{font-size:14px;line-height:1.55;color:#efe4cc;min-height:44px;text-shadow:0 1px 2px #000}
.dlg-next{margin-top:6px;font-size:9.5px;color:#7d6c50;letter-spacing:1px;text-align:right}

/* ---------- fishing ---------- */
#fishing-ui{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,80vw);padding:16px 18px 12px;border-radius:6px;z-index:32;
  background:linear-gradient(180deg,rgba(18,30,32,.97),rgba(6,12,13,.98));border:1px solid #4f7b80;box-shadow:0 0 0 2px #0a1213,0 0 30px rgba(90,180,190,.2),0 20px 50px #000c}
.fish-title{text-align:center;font:700 20px/1 var(--serif);color:#cfe9e6;letter-spacing:2px;margin-bottom:12px;text-shadow:0 0 14px rgba(120,220,220,.4)}
.fish-bar{position:relative;height:26px;border-radius:3px;background:#0a1415;border:1px solid #3d666b;box-shadow:inset 0 2px 5px #000;overflow:hidden}
.fish-zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(120,200,120,.5),rgba(60,130,70,.5));border-left:1px solid #b8e8a8;border-right:1px solid #b8e8a8}
.fish-marker{position:absolute;top:-3px;bottom:-3px;width:3px;background:#ffe6a8;box-shadow:0 0 8px #ffe6a8;transform:translateX(-50%)}
.fish-hint{text-align:center;margin-top:8px;font-size:10.5px;color:#8fb3b0}
.fish-hint kbd{font:700 10px/1 var(--sans);padding:2px 5px;border-radius:2px;background:#254043;border:1px solid #4f7b80;color:#d6efec}
.fish-exit{display:inline-block;margin-top:5px;font-size:9.5px;color:#6f9492}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,rgba(8,8,6,.55),rgba(4,4,3,.88));backdrop-filter:blur(3px)}
.inv-window{position:relative;width:min(1000px,95vw);height:min(648px,92vh);display:flex;flex-direction:column;border-radius:7px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 0%,rgba(104,79,42,.24),transparent 42%),
    linear-gradient(180deg,#221b11 0%,#14100a 10%,#0e0b07 70%,#191309 100%);
  border:1px solid #8a6c39;box-shadow:0 0 0 2px #171008,0 0 0 4px rgba(201,162,74,.22),0 30px 80px #000e,inset 0 1px 0 rgba(255,230,180,.16)}
.inv-corners i{position:absolute;width:16px;height:16px;border:2px solid #c9a24a;opacity:.55;z-index:3;pointer-events:none}
.inv-corners i:nth-child(1){left:6px;top:6px;border-right:0;border-bottom:0}
.inv-corners i:nth-child(2){right:6px;top:6px;border-left:0;border-bottom:0}
.inv-corners i:nth-child(3){left:6px;bottom:6px;border-right:0;border-top:0}
.inv-corners i:nth-child(4){right:6px;bottom:6px;border-left:0;border-top:0}
.inv-header{display:flex;align-items:center;gap:22px;padding:13px 18px 11px;border-bottom:1px solid rgba(201,162,74,.28);
  background:linear-gradient(180deg,rgba(92,70,38,.42),rgba(26,20,12,.3))}
.inv-title{display:flex;align-items:baseline;gap:10px}
.inv-crest{color:#c9a24a;font-size:15px}
.inv-title h2{margin:0;font:700 24px/1 var(--serif);letter-spacing:1.4px;color:#f2e2bd;text-shadow:0 2px 3px #000}
.inv-sub{font:500 10px/1 var(--sans);letter-spacing:1.4px;color:#8f7c5a;text-transform:uppercase}
.inv-tabs{display:flex;gap:2px;margin-left:6px}
.inv-tabs b,.inv-tabs span{padding:7px 13px;font:600 11px/1 var(--sans);letter-spacing:.8px;color:#8b7a5c;border-radius:3px;cursor:default}
.inv-tabs b{color:#f0dcae;background:linear-gradient(180deg,rgba(201,162,74,.22),rgba(201,162,74,.06));border:1px solid rgba(201,162,74,.4);box-shadow:inset 0 1px 0 rgba(255,235,190,.2)}
.inv-close{margin-left:auto;width:30px;height:30px;border-radius:3px;cursor:pointer;color:#cbb68c;font:400 14px/1 var(--sans);
  background:linear-gradient(180deg,#342818,#171108);border:1px solid #6b5636;box-shadow:inset 0 1px 0 rgba(255,230,180,.15)}
.inv-close:hover{color:#ffd9a0;border-color:#c9a24a}
.inv-body{flex:1;display:grid;grid-template-columns:340px 1fr;min-height:0}
.inv-left{padding:12px 10px 10px;border-right:1px solid rgba(201,162,74,.18);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(40,31,18,.25),transparent 60%)}
.paperdoll{position:relative;flex:1;min-height:0;margin:0 auto;width:320px;max-height:430px}
.pd-figure{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:96%;width:auto;opacity:.85;filter:drop-shadow(0 6px 12px #000)}
.pd-figure .g-cape,.pd-figure .g-head,.pd-figure .g-chest,.pd-figure .g-shoes,.pd-figure .g-mainhand,.pd-figure .g-offhand{display:none}
.paperdoll.has-cape .g-cape,.paperdoll.has-head .g-head,.paperdoll.has-chest .g-chest,.paperdoll.has-shoes .g-shoes,.paperdoll.has-mainhand .g-mainhand,.paperdoll.has-offhand .g-offhand{display:block}
.eq-slot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:52px;height:52px;border-radius:4px;cursor:pointer;
  background:linear-gradient(180deg,rgba(46,36,22,.92),rgba(13,10,7,.96));border:1px solid #6b5636;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.13),inset 0 -3px 6px #000a,0 3px 7px #0008;display:grid;place-items:center;transition:.12s}
.eq-slot:hover{border-color:#c9a24a;box-shadow:0 0 12px rgba(201,162,74,.35),inset 0 1px 0 rgba(255,235,190,.2)}
.eq-slot .eq-ico canvas{width:46px;height:46px;display:block;filter:brightness(1.12) saturate(1.05)}
.eq-slot .eq-key{position:absolute;left:0;right:0;bottom:-13px;text-align:center;font-size:8.5px;letter-spacing:.7px;color:#a08a62;text-transform:uppercase;white-space:nowrap}
.eq-slot.filled{border-color:#8a6c39}
.eq-slot.filled .eq-key{color:#d8c194}
.eq-slot.empty::after{content:"";width:22px;height:22px;border:1px dashed rgba(201,162,74,.26);border-radius:3px}
.eq-slot.filled::after{display:none}
.inv-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:10px;border-top:1px solid rgba(201,162,74,.16)}
.inv-stats>div{display:flex;justify-content:space-between;align-items:baseline;padding:5px 8px;background:rgba(0,0,0,.28);border:1px solid rgba(107,86,54,.4);border-radius:3px}
.inv-stats span{font-size:9px;letter-spacing:.8px;color:#8f7c5a;text-transform:uppercase}
.inv-stats b{font:700 14px/1 var(--serif);color:#ead6a9}
.inv-stats b.silver{color:#e8e2d2}
.inv-right{display:flex;flex-direction:column;min-height:0;padding:12px 14px 10px}
.inv-tools{display:flex;gap:7px;align-items:center;margin-bottom:9px}
.inv-search{flex:1;display:flex;align-items:center;gap:7px;height:32px;padding:0 9px;border-radius:3px;background:#0c0905;border:1px solid #4a3a22;box-shadow:inset 0 2px 4px #000}
.inv-search svg{width:16px;height:16px;color:#7f6d4e}
.inv-search input{flex:1;background:none;border:0;outline:0;color:#e8dcc0;font:400 12px/1 var(--sans)}
.inv-search input::placeholder{color:#6e5e44}
.inv-tool-btn{height:32px;padding:0 11px;border-radius:3px;cursor:pointer;color:#cbb68c;font:600 10px/1 var(--sans);letter-spacing:.6px;
  background:linear-gradient(180deg,#332818,#171108);border:1px solid #5f4a2c;box-shadow:inset 0 1px 0 rgba(255,230,180,.12)}
.inv-tool-btn:hover{color:#f0dcae;border-color:#a9823f}
.inv-grid-head{display:flex;justify-content:space-between;font:600 9.5px/1 var(--sans);letter-spacing:1.2px;color:#8f7c5a;text-transform:uppercase;padding:0 2px 7px}
.inv-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-content:start;flex:1;overflow-y:auto;padding:2px}
.inv-grid::-webkit-scrollbar{width:8px}
.inv-grid::-webkit-scrollbar-thumb{background:#4a3a22;border-radius:4px}
.islot{position:relative;aspect-ratio:1;border-radius:3px;background:radial-gradient(circle at 50% 38%,#33281a,#17110a 72%);border:1px solid #57432a;
  box-shadow:inset 0 2px 5px #000b,inset 0 1px 0 rgba(255,230,180,.05);cursor:pointer;transition:.1s;display:grid;place-items:center}
.islot:hover{border-color:#a9823f;background:linear-gradient(180deg,#2b2214,#14100a)}
.islot.empty{cursor:default}
.islot.empty:hover{border-color:#4a3a22;background:linear-gradient(180deg,#211a10,#0e0b07)}
.islot canvas{width:88%;height:88%;display:block;filter:drop-shadow(0 2px 3px #000a) brightness(1.1) saturate(1.05)}
.islot .icount{position:absolute;right:3px;bottom:1px;font:700 10px/1 var(--sans);color:#f3e6c8;text-shadow:0 1px 2px #000,0 0 4px #000;z-index:3}
.islot .itier{position:absolute;left:3px;top:2px;font:700 8px/1 var(--sans);color:#c9b083;opacity:.8;text-shadow:0 1px 2px #000;z-index:3}
.islot.q2{border-color:#4f7a45}.islot.q3{border-color:#3f6f9a}.islot.q4{border-color:#7a4f9a}
.islot.q2::after,.islot.q3::after,.islot.q4::after{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;box-shadow:inset 0 0 9px rgba(120,200,120,.22)}
.islot.q3::after{box-shadow:inset 0 0 9px rgba(110,170,255,.25)}
.islot.dim{opacity:.25}
.inv-footer{display:flex;align-items:center;gap:14px;padding-top:9px;margin-top:6px;border-top:1px solid rgba(201,162,74,.18)}
.weight{flex:1;display:flex;align-items:center;gap:8px}
.weight-bar{flex:1;height:9px;border-radius:3px;background:#0b0906;border:1px solid #3a2d19;box-shadow:inset 0 2px 3px #000;overflow:hidden}
.weight-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#7f6a3a,#c9a24a 70%,#e8c987);transition:width .25s}
#inv-weight-text{font:600 10px/1 var(--sans);color:#c5b18a;white-space:nowrap}
.inv-gold{font:600 11px/1 var(--sans);color:#cbb68c;white-space:nowrap}
.coin{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font:700 9px/1 var(--serif);color:#2a1f0c;margin-right:2px;border:1px solid #5f4a2c}
.coin.gold{background:radial-gradient(circle at 35% 30%,#ffe9a8,#d4a94a 60%,#8a6424)}
.coin.silver{background:radial-gradient(circle at 35% 30%,#f2f2ee,#b9bdc0 60%,#767c80);color:#2a2b28}
.inv-hintbar{padding:7px 16px;border-top:1px solid rgba(201,162,74,.22);font-size:10px;color:#8d7b5b;letter-spacing:.4px;background:rgba(0,0,0,.28)}
.inv-hintbar kbd{font:700 9px/1 var(--sans);padding:2px 4px;border-radius:2px;background:#2b2214;border:1px solid #5f4a2c;color:#d8c39a}

/* ---------- item tooltip ---------- */
#item-tooltip{position:fixed;z-index:90;width:274px;pointer-events:none;padding:10px 12px;border-radius:4px;
  background:linear-gradient(180deg,rgba(20,17,12,.99),rgba(8,7,5,.99));border:1px solid #8a6c39;
  box-shadow:0 0 0 1px #0b0805,0 12px 30px #000d,inset 0 1px 0 rgba(255,230,180,.14);font-size:11.5px;line-height:1.42;color:#cbbca0}
#item-tooltip .tt-name{font:700 14px/1.2 var(--serif);letter-spacing:.3px;color:#f0dcae;margin-bottom:2px}
#item-tooltip .tt-type{font:600 9px/1 var(--sans);letter-spacing:1.2px;color:#8f7c5a;text-transform:uppercase;margin-bottom:7px}
#item-tooltip .tt-desc{color:#a99a80;border-top:1px solid rgba(201,162,74,.18);padding-top:6px;margin-top:6px;font-style:italic}
#item-tooltip .tt-row{display:flex;justify-content:space-between;color:#b9a582;margin-top:3px}
#item-tooltip .tt-row b{color:#e4d0a4;font-weight:600}
#item-tooltip .tt-val{color:#e3c98f}

/* ---------- title ---------- */
#title-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%,rgba(47,44,30,.30),transparent 62%),
    linear-gradient(180deg,rgba(6,8,7,.58) 0%,rgba(5,6,5,.82) 55%,rgba(3,4,3,.96) 100%);
  transition:opacity .65s ease}
#title-screen::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 42% 34% at 50% 42%,rgba(242,214,150,.10),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen}
.title-inner{position:relative;text-align:center;max-width:680px;padding:0 24px;animation:titleIn 1.1s ease both}
@keyframes titleIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.title-ornament{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:min(700px,80vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,74,.6),transparent)}
.title-kicker{font:600 10px/1 var(--sans);letter-spacing:5px;color:#b79a62;text-transform:uppercase;margin-bottom:14px;text-shadow:0 2px 4px #000}
#title-screen h1{margin:0;font:400 92px/.92 var(--serif);letter-spacing:6px;color:#efe1bf;
  text-shadow:0 2px 0 #4d3a1c,0 6px 26px rgba(0,0,0,.9),0 0 60px rgba(201,162,74,.18)}
#title-screen h1 span{font-style:italic;color:#d8b264;letter-spacing:8px}
.title-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px auto 16px;width:300px}
.title-rule i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#8a6c39)}
.title-rule i:last-child{background:linear-gradient(90deg,#8a6c39,transparent)}
.title-rule b{color:#c9a24a;font-size:11px}
.title-lead{font:400 14px/1.75 var(--serif);color:#b7a685;margin:0 auto 26px;max-width:520px;text-shadow:0 1px 3px #000}
.title-buttons{display:flex;flex-direction:column;align-items:center;gap:10px}
.btn-gold,.btn-ghost{position:relative;min-width:280px;padding:13px 30px;border-radius:3px;cursor:pointer;font:700 13px/1 var(--serif);letter-spacing:2.2px;text-transform:uppercase;transition:.15s;overflow:hidden}
.btn-gold{color:#201605;background:linear-gradient(180deg,#f3dda2 0%,#d3ad5e 46%,#a87f34 100%);border:1px solid #6d5122;
  box-shadow:0 0 0 1px #2a1e0c,0 0 0 3px rgba(201,162,74,.28),0 8px 24px rgba(0,0,0,.6),inset 0 1px 0 #fff3c8,inset 0 -3px 0 rgba(90,60,15,.35)}
.btn-gold:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 0 0 1px #2a1e0c,0 0 0 3px rgba(240,215,154,.45),0 12px 28px #000a,0 0 24px rgba(201,162,74,.25)}
.btn-ghost{color:#d8c39a;background:linear-gradient(180deg,rgba(40,32,20,.9),rgba(12,10,7,.92));border:1px solid #6b5636;box-shadow:inset 0 1px 0 rgba(255,230,180,.12),0 6px 18px #0008}
.btn-ghost:hover{color:#f4e3bd;border-color:#c9a24a}
.title-foot{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:26px;font:500 9.5px/1 var(--sans);letter-spacing:1.2px;color:#7d6d50;text-transform:uppercase}
.title-version{position:absolute;right:20px;bottom:16px;font:500 9px/1 var(--sans);letter-spacing:1.4px;color:#5e523c;text-transform:uppercase}

/* ---------- victory ---------- */
#victory-screen{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,rgba(10,12,9,.5),rgba(4,4,3,.9));backdrop-filter:blur(2px)}
.victory-card{position:relative;width:min(560px,92vw);padding:34px 36px 28px;text-align:center;border-radius:6px;overflow:hidden}
.victory-crest{font-size:22px;color:#c9a24a;margin-bottom:6px;text-shadow:0 0 18px rgba(201,162,74,.5)}
.victory-kicker{font:600 9.5px/1 var(--sans);letter-spacing:4px;color:#b79a62;text-transform:uppercase}
.victory-card h2{margin:10px 0 12px;font:400 44px/1 var(--serif);letter-spacing:2px;color:#efe1bf;text-shadow:0 3px 18px #000}
.victory-card h2 span{color:#d8b264;font-style:italic}
#victory-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 auto 20px;max-width:380px;text-align:left}
.v-stat{display:flex;justify-content:space-between;padding:6px 10px;background:rgba(0,0,0,.3);border:1px solid rgba(107,86,54,.45);font-size:11px;color:#9c8a6a;border-radius:3px}
.v-stat b{color:#ecd9ae}
.victory-buttons{display:flex;flex-direction:column;align-items:center;gap:9px}
.victory-buttons .btn-gold,.victory-buttons .btn-ghost{min-width:250px}

/* ---------- help ---------- */
.help-card{position:relative;width:min(760px,94vw);padding:18px 22px 16px;border-radius:6px}
.help-head{display:flex;align-items:center;margin-bottom:14px}
.help-head h2{margin:0;font:700 24px/1 var(--serif);letter-spacing:1.2px;color:#f0dcae}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.help-grid>div{padding:8px 10px;background:rgba(0,0,0,.22);border-left:2px solid rgba(201,162,74,.4);border-radius:2px}
.help-grid p{margin:5px 0 0;font-size:11px;line-height:1.45;color:#a99a80}
kbd{display:inline-block;min-width:20px;text-align:center;font:700 10px/1 var(--sans);color:#eedcb6;background:#241b10;border:1px solid #5f4a2c;border-bottom-width:2px;border-radius:3px;padding:3px 5px;margin-right:3px}
.help-note{margin-top:14px;padding-top:10px;border-top:1px solid rgba(201,162,74,.2);font-size:11px;font-style:italic;color:#9c8a6a}

/* ---------- misc overlays ---------- */
#screen-flash{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .35s ease}
#fade{position:fixed;inset:0;z-index:70;pointer-events:none;background:#000;opacity:0}

/* ---------- portrait drawing helpers (canvas) ---------- */
/* ---------- responsive ---------- */
@media (max-width:1280px){
  #chat-log{width:320px;height:132px}
  #quest-panel{width:280px}
  #minimap-wrap{width:176px}
  .mm-frame{width:160px;height:160px}
}
@media (max-width:1020px){
  #player-card{width:300px}
  .pc-portrait{width:66px;height:66px;flex-basis:66px}
  .pc-portrait canvas{width:56px;height:56px;inset:5px}
  #chat-log{display:none}
  #resource-bar{top:56px;transform:translateX(-50%) scale(.92)}
  #quest-panel{top:66px;width:256px}
  #action-bar-wrap{min-width:0}
  .slot{width:46px;height:46px;flex-basis:46px}
  .slot svg{width:32px;height:32px}
  .inv-body{grid-template-columns:290px 1fr}
  .paperdoll{width:280px}
  .eq-slot{width:50px;height:50px}
  .eq-slot .eq-ico canvas{width:40px;height:40px}
}
@media (max-width:760px){
  .pc-guild{display:none}
  #zone-plate{display:none}
  #quest-panel{display:none}
  #resource-bar{top:98px}
  #minimap-wrap{width:150px;bottom:104px}
  .mm-frame{width:136px;height:136px}
  #action-bar-wrap{bottom:8px;padding:6px 8px 4px}
  .slot{width:42px;height:42px;flex-basis:42px}
  .slot svg{width:29px;height:29px}
  .slot .key{font-size:8px}
  .ab-top{width:100%}
  .inv-window{height:94vh}
  .inv-body{grid-template-columns:1fr;overflow-y:auto}
  .inv-left{border-right:0;border-bottom:1px solid rgba(201,162,74,.2)}
  .paperdoll{height:300px}
  .help-grid{grid-template-columns:1fr}
  #title-screen h1{font-size:62px}
}

/* ── boot / asset loading ─────────────────────────────── */
#boot {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 35%, #2b3a32 0%, #131a17 55%, #0a0e0c 100%);
  transition: opacity .4s ease;
}
#boot.done { opacity: 0; pointer-events: none; }
.boot-card { text-align: center; color: #e8dcc0; width: min(420px, 82vw); }
.boot-crest { font-size: 42px; color: #c9a24a; margin-bottom: 8px; text-shadow: 0 0 22px #c9a24a66; }
.boot-card h1 { font-family: var(--font-display, Georgia, serif); font-size: 38px; letter-spacing: 2px; margin: 0 0 4px; color: #f0e6cc; }
.boot-card p { margin: 0 0 22px; color: #9aa79c; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; }
.boot-track { height: 8px; border: 1px solid #7a6332; background: #0c110e; border-radius: 2px; overflow: hidden; box-shadow: inset 0 1px 4px #000; }
#boot-bar { height: 100%; width: 0; background: linear-gradient(90deg, #8a6f2f, #e0c070); transition: width .18s ease; }
#boot-label { margin-top: 10px; font-size: 12px; color: #bfa77a; letter-spacing: .6px; }
.boot-card small { display: block; margin-top: 14px; color: #6d7a70; font-size: 10.5px; letter-spacing: .5px; }

/* ── multiplayer ──────────────────────────────────────── */
#net-status {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 30px; margin-right: 4px;
  border: 1px solid #4a3c24; border-radius: 3px;
  background: linear-gradient(#211c14, #17140e);
  color: #a99a7a; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  align-self: center;
}
#net-status i { width: 7px; height: 7px; border-radius: 50%; background: #7a6a4a; box-shadow: 0 0 6px #000; }
#net-status.online { color: #cfe0b8; border-color: #4f6a35; }
#net-status.online i { background: #8fd05a; box-shadow: 0 0 8px #8fd05a99; }
#net-status.connecting, #net-status.reconnecting { color: #d8c07a; }
#net-status.connecting i, #net-status.reconnecting i { background: #d8b04a; animation: netpulse 1s infinite; }
#net-status.offline i { background: #6a4a3a; }
@keyframes netpulse { 50% { opacity: .25; } }

.chat-input {
  width: calc(100% - 14px); margin: 6px 7px 7px;
  height: 26px; padding: 0 8px;
  background: #0f0d09; border: 1px solid #3f3424; border-radius: 2px;
  color: #e6dcc4; font: 11px/1 Georgia, serif; outline: none;
  opacity: .75; transition: opacity .2s, border-color .2s;
}
.chat-input::placeholder { color: #7a6f5a; }
.chat-input:focus { opacity: 1; border-color: #8a6f2f; box-shadow: 0 0 0 1px #c9a24a33; }

.remote-layer { position: fixed; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; }
.remote-tag {
  position: absolute; left: 0; top: 0; will-change: transform;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px 7px 3px; border-radius: 3px;
  background: linear-gradient(#17130dcc, #0d0b07cc);
  border: 1px solid #00000066; box-shadow: 0 2px 8px #0008;
  white-space: nowrap;
}
.rt-name { font: 11px/1.1 Georgia, serif; color: var(--tag-color, #e0b84a); text-shadow: 0 1px 2px #000; }
.rt-hp { display: block; width: 46px; height: 3px; background: #2a1410; border: 1px solid #00000088; }
.rt-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(#c0503e, #8e2f22); }