*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;}
body{background:#0a0a0f;overflow:hidden;width:100vw;height:100vh;font-family:'Segoe UI',sans-serif;color:#fff;}
/* Canvas is pinned to a fixed 1920x1080 internal buffer (see game.js BASE_W/BASE_H).
   We scale it to fit the viewport while preserving 16:9 aspect — letterboxing with
   black bars. This keeps every client rendering the same world coordinates, so
   player/enemy positions sync correctly across different window sizes. */
canvas{display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(100vw,calc(100vh*16/9));height:min(100vh,calc(100vw*9/16));background:#000;}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:100;background:rgba(8,8,14,.96);}
.logo{font-size:86px;font-weight:900;letter-spacing:18px;background:linear-gradient(135deg,#a855f7,#06b6d4,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:pulseLogo 2.4s ease-in-out infinite;}
@keyframes pulseLogo{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.tagline{font-size:11px;letter-spacing:4px;color:#444;text-transform:uppercase;}
.hint{font-size:10px;letter-spacing:2px;color:#272737;text-transform:uppercase;margin-top:2px;}
.stat-row{display:flex;gap:44px;margin:8px 0;}
.stat-box{text-align:center;}
.stat-val{font-size:34px;font-weight:900;color:#f59e0b;}
.stat-lbl{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;}
.name-row{margin:18px 0 4px;}
.name-input{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;color:#e2e8f0;font-size:14px;font-weight:600;
  letter-spacing:1px;padding:10px 18px;text-align:center;width:220px;
  outline:none;transition:border-color .2s,box-shadow .2s;
  font-family:'Segoe UI',sans-serif;
}
.name-input::placeholder{color:#374151;letter-spacing:.5px;font-weight:400;}
.name-input:focus{border-color:rgba(168,85,247,.6);box-shadow:0 0 16px rgba(168,85,247,.25);}
.btn{padding:14px 52px;font-size:15px;font-weight:700;letter-spacing:3px;border:none;border-radius:50px;cursor:pointer;text-transform:uppercase;background:linear-gradient(135deg,#a855f7,#06b6d4);color:#fff;box-shadow:0 0 30px rgba(168,85,247,.5);transition:transform .1s,box-shadow .1s;margin-top:10px;}
.btn:hover{transform:scale(1.06);box-shadow:0 0 50px rgba(168,85,247,.8);}
.btn:active{transform:scale(.96);}

/* ══════════════════════════════════════════
   HUD  (top strip)
══════════════════════════════════════════ */
#hud{position:fixed;top:0;left:0;right:0;z-index:10;display:none;justify-content:center;align-items:center;padding:10px 28px 14px;background:linear-gradient(to bottom,rgba(5,5,10,.95) 0%,rgba(5,5,10,.6) 70%,transparent 100%);pointer-events:none;gap:0;}
.hud-block{text-align:center;padding:0 22px;}
.hud-val{font-size:28px;font-weight:900;line-height:1;letter-spacing:1px;text-shadow:0 0 18px currentColor;}
.hud-lbl{font-size:8px;letter-spacing:3.5px;color:#3a3a50;text-transform:uppercase;margin-top:2px;}
.hud-sep{width:1px;height:36px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.12),transparent);flex-shrink:0;}

/* ══════════════════════════════════════════
   BOTTOM BAR  —  three-column layout
   Left: HP + XP  |  Center: travel  |  Right: resources
══════════════════════════════════════════ */
/* Base shell — shown as flex by startGame(), hidden until then */
#bars{position:fixed;bottom:0;left:0;right:0;z-index:10;display:none;
  padding:8px 20px 10px;
  background:linear-gradient(to top,rgba(5,5,10,.97) 0%,rgba(5,5,10,.75) 60%,transparent 100%);
  align-items:flex-end;gap:12px;}
/* Survival column — HP & XP, fixed narrow width */
#bars-left{display:flex;flex-direction:column;gap:5px;width:250px;flex-shrink:0;}
/* Travel column — zone tabs, fills the middle */
#bars-center{flex:1;min-width:0;display:flex;justify-content:center;align-items:flex-end;}
/* Resource column — inventory sidebar now handles display; keep slim spacer */
#bars-right{width:0;flex-shrink:0;}

/* ── HP BAR ── */
#hp-row{display:flex;align-items:center;gap:8px;pointer-events:none;}
.si-hp{font-size:12px;color:#ef4444;text-shadow:0 0 10px #ef444488;flex-shrink:0;line-height:1;}
#hp-track{flex:1;height:13px;background:rgba(255,255,255,.06);border-radius:7px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);}
#hp-ghost{position:absolute;top:0;left:0;height:100%;background:rgba(239,68,68,.28);border-radius:7px;transition:width 0.7s ease-out;pointer-events:none;}
#hp-bar{position:absolute;top:0;left:0;height:100%;border-radius:7px;transition:width .14s,background .4s;background:linear-gradient(to right,#16a34a,#22c55e);}
#hp-bar::after{content:'';position:absolute;top:1px;left:6px;right:6px;height:3px;background:rgba(255,255,255,.18);border-radius:3px;pointer-events:none;}
#hp-text{font-size:9px;color:#4a4a65;width:52px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:.5px;}
@keyframes hp-low-pulse{0%{box-shadow:0 0 0 rgba(239,68,68,0);}100%{box-shadow:0 0 18px rgba(239,68,68,.65);}}
.hp-critical{animation:hp-low-pulse .55s ease-in-out infinite alternate;}
/* Brief lateral jolt when HP drops */
@keyframes hp-shake{0%{transform:translateX(0);}20%{transform:translateX(-5px);}40%{transform:translateX(5px);}60%{transform:translateX(-3px);}80%{transform:translateX(3px);}100%{transform:translateX(0);}}
.hp-shake{animation:hp-shake .32s ease-out;}





/* ── WORLD MAP PANEL ── */
#worldmap-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(760px,96vw);max-height:90vh;background:rgba(4,4,12,.97);border:1px solid rgba(192,146,58,.28);border-radius:14px;z-index:1200;flex-direction:column;overflow:hidden;font-family:'Segoe UI',sans-serif;color:#94a3b8;}
.wm-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.wm-title{font-size:14px;font-weight:900;letter-spacing:4px;color:#c0923a;text-transform:uppercase;}
.wm-sub{font-size:9px;letter-spacing:1px;color:#333;text-transform:uppercase;margin-top:4px;}
.wm-close{background:transparent;border:1px solid rgba(255,255,255,.1);color:#555;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:10px;letter-spacing:1px;flex-shrink:0;}
.wm-close:hover{color:#aaa;border-color:rgba(255,255,255,.25);}
.wm-body{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.wm-graph{position:relative;height:220px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.25);}
.wm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.wm-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(8,8,18,.9);cursor:pointer;transition:all .18s;pointer-events:all;min-width:64px;text-align:center;}
.wm-node:hover{border-color:var(--nc);background:rgba(255,255,255,.03);}
.wm-node.wm-sel{border-color:var(--nc);background:rgba(255,255,255,.04);box-shadow:0 0 14px var(--nc);}
.wm-node.wm-current::before{content:'▲ YOU';position:absolute;top:-16px;font-size:7px;letter-spacing:1px;color:var(--nc);}
.wm-ic{font-size:15px;line-height:1;}
.wm-lb{font-size:7px;letter-spacing:2px;text-transform:uppercase;color:#555;}
.wm-node.wm-sel .wm-lb,.wm-node.wm-current .wm-lb{color:var(--nc);}
.wm-stars{font-size:7px;color:#444;}
.wm-node.wm-sel .wm-stars{color:var(--nc);}
.wm-node.wm-dest{border-color:#fde68a;box-shadow:0 0 14px rgba(253,230,138,.6);animation:wmDestPulse 1.6s ease-in-out infinite;}
.wm-node.wm-dest .wm-lb{color:#fde68a;}
.wm-dest-pin{position:absolute;top:-14px;right:-8px;font-size:14px;line-height:1;filter:drop-shadow(0 0 4px rgba(253,230,138,.9));pointer-events:none;}
@keyframes wmDestPulse{0%,100%{box-shadow:0 0 10px rgba(253,230,138,.45);}50%{box-shadow:0 0 18px rgba(253,230,138,.85);}}
.wm-detail{padding:16px 20px;overflow-y:auto;flex:1;}
.wm-det-hdr{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.wm-det-ic{font-size:26px;}
.wm-det-name{font-size:15px;font-weight:900;letter-spacing:3px;color:#c0923a;}
.wm-det-danger{font-size:10px;color:#555;margin-top:3px;letter-spacing:1px;}
.wm-det-tagline{font-size:11px;color:#666;font-style:italic;margin-bottom:12px;line-height:1.5;}
.wm-det-grid{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.wm-route-hint{text-align:center;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(192,146,58,.6);border:1px dashed rgba(192,146,58,.2);border-radius:6px;padding:8px;margin-bottom:8px;}
.wm-town-hint{padding:24px;text-align:center;font-size:12px;color:#444;letter-spacing:1px;}

/* ── INVENTORY PANEL (inside #side-panel, toggled) ── */
#inv-panel{
  display:none;overflow-y:auto;overflow-x:hidden;
  max-height:calc(100vh - 210px);
  border-top:1px solid rgba(255,255,255,0.07);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;
}
.ip-section{margin-bottom:4px;}
.ip-section-hd{
  font-size:8px;letter-spacing:1.8px;color:#334155;
  text-transform:uppercase;padding:6px 10px 3px;
  border-top:1px solid rgba(255,255,255,0.04);
}
.ip-section:first-child .ip-section-hd{border-top:none;}
.ip-item{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;cursor:default;
  transition:background .1s;
}
.ip-item:hover{background:rgba(255,255,255,0.05);}
.ip-item-icon{font-size:13px;line-height:1;flex-shrink:0;}
.ip-item-name{flex:1;font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ip-item-badge{font-size:7px;font-weight:700;letter-spacing:.5px;padding:1px 4px;border-radius:3px;text-transform:uppercase;flex-shrink:0;}
.ip-badge-eq {background:rgba(74,222,128,0.15);color:#4ade80;}
.ip-badge-bag{background:rgba(100,116,139,0.12);color:#475569;}
.ip-mat{
  display:flex;align-items:center;justify-content:space-between;
  padding:3px 10px;cursor:default;transition:background .1s;
}
.ip-mat:hover{background:rgba(255,255,255,0.05);}
.ip-consumable{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 10px;cursor:pointer;transition:background .1s;
  border-left:2px solid rgba(34,197,94,0.25);
}
.ip-consumable:hover{background:rgba(34,197,94,0.06);border-left-color:rgba(34,197,94,0.6);}
.ip-mat-lbl{font-size:10px;white-space:nowrap;}
.ip-mat-qty{font-size:10px;font-weight:700;color:#94a3b8;}
.ip-empty{padding:10px;font-size:9px;color:#334155;text-align:center;font-style:italic;}
/* Weight bar */
.ip-weight{padding:6px 10px 8px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2px;}
.ip-weight-lbl{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.5px;margin-bottom:4px;color:#94a3b8;}
.ip-weight-track{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.ip-weight-bar{height:100%;border-radius:3px;transition:width .3s,background .3s;}
/* Mira rest row in craft panel */
.mira-rest-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;background:rgba(192,146,58,.05);border:1px solid rgba(192,146,58,.15);
  border-radius:8px;margin:6px 0 2px;}
.mira-rest-info{display:flex;flex-direction:column;gap:3px;}
.mira-rest-btn{padding:6px 14px;border:1px solid rgba(192,146,58,.4);background:rgba(192,146,58,.08);
  color:#c0923a;border-radius:6px;cursor:pointer;font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;transition:all .15s;white-space:nowrap;}
.mira-rest-btn:hover:not(:disabled){background:rgba(192,146,58,.18);color:#e0a84e;}
.mira-rest-btn:disabled{opacity:.38;cursor:default;}

/* ── ITEM STATS TOOLTIP ── */
#item-tooltip{
  position:fixed;z-index:200;display:none;pointer-events:none;
  background:rgba(7,7,18,0.97);border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;width:210px;font-size:11px;color:#e2e8f0;overflow:hidden;
  box-shadow:0 4px 22px rgba(0,0,0,0.75);
}

/* ── INVENTORY MATERIAL TOOLTIP ── */
#inv-tooltip{
  position:fixed;z-index:200;display:none;pointer-events:none;
  background:rgba(7,7,18,0.97);border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;min-width:220px;max-width:260px;
  font-size:11px;color:#e2e8f0;overflow:hidden;
  box-shadow:0 4px 22px rgba(0,0,0,0.75);
}
.it-header{padding:10px 12px 8px;display:flex;justify-content:space-between;align-items:center;border-radius:9px 9px 0 0;}
.it-mat-name{font-size:13px;font-weight:700;}
.it-stock{font-size:10px;color:#64748b;}
.it-body{padding:4px 0 8px;}
.it-section-lbl{font-size:8px;letter-spacing:1.5px;color:#475569;padding:2px 12px 5px;text-transform:uppercase;}
.it-recipe{padding:5px 12px;border-top:1px solid rgba(255,255,255,0.04);}
.it-recipe.craftable{background:rgba(74,222,128,0.04);}
.it-recipe-top{display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.it-recipe-icon{font-size:13px;line-height:1;}
.it-recipe-name{flex:1;font-size:11px;font-weight:600;color:#e2e8f0;}
.it-badge{font-size:8px;font-weight:700;letter-spacing:1px;padding:2px 5px;border-radius:4px;text-transform:uppercase;white-space:nowrap;}
.it-badge-ready{background:rgba(74,222,128,0.18);color:#4ade80;border:1px solid rgba(74,222,128,0.3);}
.it-badge-missing{background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.2);}
.it-badge-locked{background:rgba(100,116,139,0.15);color:#64748b;border:1px solid rgba(100,116,139,0.2);}
.it-recipe-mats{display:flex;flex-wrap:wrap;gap:3px;}
.it-mat-chip{font-size:9px;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,0.05);color:var(--mc);}
.it-mat-chip.ok{box-shadow:inset 0 0 0 1px rgba(74,222,128,0.2);}
.it-mat-chip.bad{color:#f87171!important;box-shadow:inset 0 0 0 1px rgba(239,68,68,0.25);}
.it-no-recipes{padding:8px 12px;color:#475569;font-style:italic;font-size:10px;}

/* ══════════════════════════════════════════
   PROGRESSION HUD  (left-side fixed panel)
══════════════════════════════════════════ */
#prog-hud{position:fixed;left:0;top:68px;z-index:20;display:none;flex-direction:row;align-items:flex-start;pointer-events:all;}
#prog-body{flex-shrink:0;}
#prog-hud.collapsed #prog-body{display:none;}
#prog-inner{width:var(--prog-w,168px);min-width:0;height:var(--prog-h,auto);overflow-y:hidden;background:rgba(5,5,10,.88);border:1px solid rgba(255,255,255,.08);border-left:none;border-radius:0 12px 12px 0;padding:10px 12px;display:flex;flex-direction:column;gap:6px;position:relative;}
/* Drag grip — strip at top of skill HUD */
.ph-drag-grip{height:14px;margin:-10px -12px 4px;cursor:grab;display:flex;align-items:center;justify-content:center;position:relative;border-radius:0 12px 0 0;transition:background .15s;}
.ph-drag-grip::before{content:'⠿ ⠿ ⠿';font-size:9px;color:#2a2a3a;letter-spacing:3px;}
.ph-drag-grip:hover{background:rgba(255,255,255,.06);}
.ph-drag-grip:hover::before{color:#555;}
.ph-drag-grip.dragging{cursor:grabbing;background:rgba(255,255,255,.08);}
/* Lock button inside drag grip */
.ph-lock-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:3px;padding:0 4px;height:12px;cursor:pointer;font-size:9px;line-height:1;color:#888;display:flex;align-items:center;justify-content:center;gap:2px;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;}
.ph-lock-btn::before{content:'🔓';font-size:8px;}
.ph-lock-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#ccc;}
#prog-hud.locked .ph-lock-btn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4);color:#fbbf24;}
#prog-hud.locked .ph-lock-btn::before{content:'🔒';}
#prog-hud.locked .ph-lock-btn:hover{background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.6);}
#prog-hud.locked .ph-drag-grip{cursor:default;}
#prog-hud.locked .ph-skill,#prog-hud.locked .ph-hp{cursor:default;}
#prog-hud.locked .ph-resize-grip{pointer-events:none;opacity:.1;}
/* Resize grip — bottom-right corner of inner panel */
.ph-resize-grip{position:absolute;bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize;opacity:.25;transition:opacity .15s;}
.ph-resize-grip::before{content:'';position:absolute;bottom:4px;right:4px;width:10px;height:10px;background:linear-gradient(135deg,transparent 40%,#666 40%,#666 55%,transparent 55%,transparent 70%,#666 70%,#666 85%,transparent 85%);}
.ph-resize-grip:hover{opacity:.7;}
#prog-toggle{flex-shrink:0;width:16px;background:rgba(5,5,10,.75);border:1px solid rgba(255,255,255,.08);border-left:none;border-radius:0 6px 6px 0;color:#555;font-size:9px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;line-height:1;}
#prog-toggle:hover{color:#ccc;background:rgba(255,255,255,.06);}
.ph-skill{display:flex;flex-direction:column;gap:3px;border-radius:5px;padding:3px 4px;transition:background .3s;cursor:grab;}
.ph-skill-head{display:flex;align-items:center;gap:4px;}
.ph-skill-icon{font-size:11px;line-height:1;flex-shrink:0;}
.ph-skill-name{font-size:8px;letter-spacing:1.5px;color:#666;text-transform:uppercase;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ph-skill-lvl{font-size:12px;font-weight:900;color:#e0e0e0;line-height:1;flex-shrink:0;min-width:16px;text-align:right;}
.ph-xp-pct{font-size:8px;color:#444;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:26px;text-align:right;transition:color .3s;}
.ph-bar-track{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.ph-bar-fill{height:100%;border-radius:3px;transition:width .35s ease-out;}
/* Active skill — subtle label brightening for 4s after XP gain */
.ph-skill.ph-active{background:rgba(255,255,255,.04);}
.ph-skill.ph-active .ph-skill-name{color:#aaa;}
.ph-skill.ph-active .ph-xp-pct{color:#aaa;}
/* One-shot bar flash on XP gain — throttled to ≤1× per 2s per skill */
@keyframes ph-xp-flash{
  0%   {filter:brightness(1);}
  20%  {filter:brightness(1.9) drop-shadow(0 0 4px var(--skill-col,#a855f7));}
  100% {filter:brightness(1);}
}
.ph-bar-fill.ph-xp-flash{animation:ph-xp-flash .55s ease-out forwards;}
/* Near-level — subtle shimmer when >88% full */
@keyframes ph-near-pulse{0%,100%{opacity:.7;}50%{opacity:1;}}
.ph-skill.ph-near-level .ph-bar-fill{animation:ph-near-pulse 1.2s ease-in-out infinite;}
.ph-skill.ph-near-level .ph-xp-pct{color:#fbbf24;font-weight:700;}
.ph-hp{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:5px;cursor:grab;transition:background .3s;}
.ph-hp-icon{font-size:10px;line-height:1;flex-shrink:0;}
.ph-hp-txt{font-size:9px;color:#ef4444;font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums;}
/* Row sort — drag to reorder within HUD */
.ph-skill.ph-sorting,.ph-hp.ph-sorting{opacity:.35;cursor:grabbing;}
.ph-skill.ph-sort-above,.ph-hp.ph-sort-above{border-top:2px solid rgba(255,255,255,.35);margin-top:-2px;}
.ph-skill:hover:not(.ph-sorting),.ph-hp:hover:not(.ph-sorting){background:rgba(255,255,255,.04);}

/* Hunt tracker row in prog-hud */
.ph-hunt{padding:4px 4px 3px;border-radius:5px;border-top:1px solid rgba(245,158,11,.12);margin-top:2px;}
.ph-hunt-head{display:flex;align-items:center;gap:4px;margin-bottom:3px;}
.ph-hunt-icon{font-size:10px;line-height:1;flex-shrink:0;}
.ph-hunt-name{font-size:8px;letter-spacing:1.5px;color:#f59e0b;text-transform:uppercase;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.ph-hunt-count{font-size:9px;font-weight:900;color:#f59e0b;line-height:1;flex-shrink:0;font-variant-numeric:tabular-nums;}
.ph-hunt-bar{transition:width .35s ease-out;}
.ph-hunt-sub{font-size:7px;color:#6a5030;letter-spacing:1px;margin-top:2px;text-align:right;}


/* ── Level-up toast — compact, non-blocking, color set dynamically by JS ── */

/* SKILL level-ups: full arc — pop in, hold, fade up and out */
@keyframes lu-pop{
  0%      {opacity:0;transform:translateX(-50%) translateY(56px) scale(.72);}
  10%     {opacity:1;transform:translateX(-50%) translateY(-12px) scale(1.10);}
  17%     {transform:translateX(-50%) translateY(4px) scale(.96);}
  24%     {transform:translateX(-50%) translateY(-4px) scale(1.03);}
  32%,60%,72%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  100%    {opacity:0;transform:translateX(-50%) translateY(-28px) scale(.92);}
}
/* COMBAT level-ups phase 1: pop in and hold (forwards keeps final state) */
@keyframes lu-arrive{
  0%   {opacity:0;transform:translateX(-50%) translateY(56px) scale(.72);}
  14%  {opacity:1;transform:translateX(-50%) translateY(-12px) scale(1.10);}
  23%  {transform:translateX(-50%) translateY(4px) scale(.96);}
  32%  {transform:translateX(-50%) translateY(-3px) scale(1.03);}
  42%,100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
/* COMBAT level-ups phase 2: shrink and fly toward [K] button */
/* JS sets --lu-dx / --lu-dy to the pixel offset of the button center */
@keyframes lu-fly{
  0%  {opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
  55% {opacity:.5;}
  100%{opacity:0;transform:translateX(calc(-50% + var(--lu-dx,0px))) translateY(var(--lu-dy,0px)) scale(.07);}
}
#levelup-screen{
  position:fixed;bottom:165px;left:50%;
  transform:translateX(-50%);
  display:none;flex-direction:column;align-items:center;gap:0;
  z-index:50;pointer-events:none;
  background:rgba(4,4,10,.92);
  border:1px solid rgba(255,255,255,.2);
  border-radius:22px;padding:22px 56px 20px;
  box-shadow:0 14px 44px rgba(0,0,0,.7);
  white-space:nowrap;
}
/* Milestone variant — stronger glow ring */
#levelup-screen.milestone{border-width:2px;}
#levelup-screen.milestone #lu-lvl{
  text-shadow:0 0 28px currentColor,0 0 60px currentColor,0 0 120px currentColor;
}
/* Icon row */
#lu-icon {font-size:26px;margin-bottom:6px;line-height:1;filter:drop-shadow(0 0 10px currentColor);}
/* Big number */
#lu-lvl  {font-size:68px;font-weight:900;letter-spacing:2px;line-height:1;
          text-shadow:0 0 28px currentColor,0 0 60px currentColor;}
/* Skill name */
#lu-title{font-size:11px;letter-spacing:6px;text-transform:uppercase;
          opacity:.85;margin-top:9px;}
/* Sub label (reward text) */
#lu-sub  {font-size:9px;letter-spacing:3px;text-transform:uppercase;
          color:#4a4a5a;margin-top:6px;}
.perk-btn{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 20px;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;width:162px;transition:all .15s;text-align:center;}
.perk-btn:hover{background:rgba(168,85,247,.18);border-color:#a855f7;transform:translateY(-5px);box-shadow:0 10px 28px rgba(168,85,247,.35);}
.perk-icon{font-size:34px;}.perk-name{font-size:13px;font-weight:700;letter-spacing:1px;}.perk-desc{font-size:11px;color:#777;line-height:1.5;}

/* ITEM POPUP */
#item-popup{position:fixed;bottom:120px;right:18px;z-index:50;display:flex;align-items:center;gap:12px;background:rgba(8,8,14,.96);border:1px solid #333;border-radius:14px;padding:12px 18px;min-width:215px;transform:translateX(280px);transition:transform .38s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
#item-popup.show{transform:translateX(0);}
.p-icon{font-size:26px;}.p-name{font-size:13px;font-weight:700;}.p-desc{font-size:11px;color:#666;margin-top:2px;}

/* WAVE BANNER */
#wave-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:38px;font-weight:900;letter-spacing:10px;z-index:60;pointer-events:none;opacity:0;text-shadow:0 0 40px currentColor;transition:opacity .35s;}

/* ══════════════════════════════════════════
   TARGET UI SHELL (P0S3-9) — positions the compact card and the
   expanded inspect panel as a single flex-column so they always stay
   stacked regardless of either child's height. No hardcoded offsets.
══════════════════════════════════════════ */
/* Top-center placement mirrors the ARPG/MMO standard for target frames
   (Diablo 4, WoW, FFXIV, Lost Ark, PoE). Sits directly below #hud
   (which is ~65px tall) so the player's eye travels straight up from
   the enemy sprite to the card, not diagonally to a corner. */
#target-ui{
  position:fixed; top:72px; left:50%; transform:translateX(-50%);
  z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  pointer-events:none; /* children re-enable selectively */
}

/* ══════════════════════════════════════════
   TARGET CARD (P0S3-5) — compact info on current target
   Colors come in as CSS custom props (--tc-accent, --tc-accent-rgb, --tc-role)
   written by target-card.js when the target or tier changes.
══════════════════════════════════════════ */
#target-card{
  width:180px; padding:8px 12px;
  background:rgba(4,4,12,.92);
  border:1px solid rgba(255,255,255,0.1);
  border-left:3px solid var(--tc-accent, #d1d5db);
  border-radius:6px;
  font-family:'Segoe UI',sans-serif;
  pointer-events:none;
  display:none;
}
#target-card.tc-tier-boss{ box-shadow:0 0 18px rgba(239,68,68,0.25); }

.tc-row-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:6px;
}
.tc-name{
  font-size:13px; font-weight:700;
  color:var(--tc-accent, #d1d5db);
  text-shadow:0 0 6px rgba(var(--tc-accent-rgb, 209,213,219), 0.4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0;
}
#target-card.tc-tier-boss .tc-name{ font-size:14px; }

.tc-role{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.tc-role-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--tc-role, #d1d5db);
  box-shadow:0 0 4px var(--tc-role, #d1d5db);
}
.tc-role-lbl{
  font-size:8px; letter-spacing:2px;
  color:var(--tc-role, #d1d5db);
  text-transform:uppercase;
}

.tc-hp-track{
  position:relative; height:10px;
  background:rgba(255,255,255,0.06);
  border-radius:5px; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.tc-hp-fill{
  position:absolute; top:0; left:0; height:100%;
  width:100%; border-radius:5px;
}
/* HP palette mirrors the player HP bar (hud.js:138-140) */
.tc-hp-fill--high{ background:linear-gradient(to right, #16a34a, #22c55e); }
.tc-hp-fill--mid { background:linear-gradient(to right, #b45309, #f59e0b); }
.tc-hp-fill--low { background:linear-gradient(to right, #991b1b, #ef4444); }
.tc-hp-text{
  position:absolute; inset:0;
  font-size:9px; line-height:10px;
  text-align:center; color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.9);
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
}

/* Expand-inspect affordance (P0S3-9). Full-width bar at the bottom of the
   compact card — clearly labeled so the action is obvious. Sole clickable
   region of the card; the rest keeps pointer-events:none so attack clicks
   pass through to the canvas. */
.tc-expand-btn{
  pointer-events:auto;
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-top:8px; padding:5px 0;
  background:rgba(var(--tc-accent-rgb, 209,213,219), 0.08);
  border:1px solid rgba(var(--tc-accent-rgb, 209,213,219), 0.35);
  border-radius:4px;
  color:var(--tc-accent, #d1d5db);
  font-family:inherit;
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.tc-expand-btn:hover{
  background:rgba(var(--tc-accent-rgb, 209,213,219), 0.18);
  border-color:rgba(var(--tc-accent-rgb, 209,213,219), 0.6);
  color:#fff;
}
.tc-expand-btn:active{
  background:rgba(var(--tc-accent-rgb, 209,213,219), 0.28);
}
.tc-expand-arrow{
  font-size:11px; line-height:1;
}
.tc-expand-label{
  line-height:1; text-transform:uppercase;
}
/* Open state: arrow glyph flips from ▼ to ▲ via JS; label stays "INSPECT"
   so the affordance is stable. Button background brightens. */
.tc-expand-btn.tc-expand-btn--open{
  background:rgba(var(--tc-accent-rgb, 209,213,219), 0.2);
  color:#fff;
}

/* ══════════════════════════════════════════
   EXPANDED TARGET INSPECT (P0S3-6)
   Docks directly below the compact card. Colors flow in via CSS custom props
   (--ti-accent, --ti-accent-rgb, --ti-role) written by target-inspect.js.
   Width matches the compact card (180px) so the two surfaces read as one.
══════════════════════════════════════════ */
#target-inspect{
  width:260px; padding:10px 12px;
  background:rgba(4,4,12,.92);
  border:1px solid rgba(255,255,255,0.08);
  border-left:3px solid var(--ti-accent, #d1d5db);
  border-radius:6px;
  font-family:'Segoe UI',sans-serif;
  color:#d1d5db;
  display:none;
  pointer-events:none; /* children re-enable as needed */
}
#target-inspect.ti-tier-boss{ box-shadow:0 0 18px rgba(var(--ti-accent-rgb,239,68,68),0.22); }

.ti-tier-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:6px;
}
.ti-tier-badge{
  font-size:9px; letter-spacing:2px; font-weight:800;
  text-transform:uppercase;
  color:var(--ti-accent, #d1d5db);
  background:rgba(var(--ti-accent-rgb, 209,213,219), 0.12);
  border:1px solid rgba(var(--ti-accent-rgb, 209,213,219), 0.35);
  padding:2px 6px; border-radius:3px;
}
.ti-temperament{ display:flex; align-items:center; gap:4px; }
.ti-temperament-dot{
  width:6px; height:6px; border-radius:50%;
  background:#d1d5db;
}
.ti-temperament-lbl{
  font-size:10px; font-weight:600; letter-spacing:.5px;
  color:#d1d5db;
}

.ti-role-line{
  font-size:11px; line-height:1.35; color:#e5e7eb;
  margin-bottom:7px;
  border-left:2px solid var(--ti-role, #d1d5db);
  padding-left:7px;
}

.ti-tag-row{
  display:flex; flex-wrap:wrap; gap:4px;
  margin-bottom:7px;
}
.ti-tag{
  font-size:9px; letter-spacing:1px; font-weight:600;
  color:#cbd5e1;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  padding:2px 6px; border-radius:3px;
  display:inline-flex; align-items:center; gap:4px;
}
.ti-tag-icon{ font-size:11px; line-height:1; }

.ti-state-row{ margin-bottom:7px; }
.ti-state-chip{
  display:inline-block;
  font-size:9px; letter-spacing:1.5px; font-weight:700;
  color:#9ca3af;
  border:1px solid #9ca3af;
  padding:2px 7px; border-radius:3px;
  text-transform:uppercase;
}

.ti-flavor-block{
  margin-top:6px; padding-top:7px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.ti-flavor-hint{
  font-size:10px; line-height:1.4;
  color:#fbbf24;
  margin-bottom:4px;
}
.ti-flavor-lore{
  font-size:10px; line-height:1.45;
  color:#9ca3af; font-style:italic;
}

.ti-gate-hint{
  margin-top:6px; padding:5px 7px;
  font-size:9px; letter-spacing:.5px;
  color:#6b7280;
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.08);
  border-radius:3px;
  text-align:center;
}
.ti-gate-remaining{ color:#d1d5db; font-weight:700; }

.ti-foot{ margin-top:8px; text-align:right; }
.ti-codex-link{
  pointer-events:auto;
  background:transparent;
  border:1px solid rgba(168,85,247,0.45);
  color:#c4b5fd;
  font-size:10px; letter-spacing:.5px;
  padding:3px 8px; border-radius:3px;
  cursor:pointer;
  transition:background .12s, color .12s;
  font-family:inherit;
}
.ti-codex-link:hover{ background:rgba(168,85,247,0.15); color:#fff; }

/* SKILL NOTIFICATION */
#skill-notif{position:fixed;top:-60px;left:50%;transform:translateX(-50%);padding:10px 24px;border:1px solid #555;border-radius:30px;font-size:13px;font-weight:700;letter-spacing:2px;background:rgba(8,8,14,.96);z-index:80;pointer-events:none;transition:top .38s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;}
#skill-notif.show{top:16px;}

/* SIDE BUTTONS */
/* ── RIGHT SIDEBAR ── */
#side-panel{
  position:fixed;right:0;top:58px;width:190px;height:auto;
  z-index:20;display:none;flex-direction:column;
  background:rgba(5,5,12,0.92);
  border-left:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.07);
  border-radius:0 0 0 8px;
}
.side-btn-row{display:flex;flex-wrap:wrap;gap:4px;padding:6px;flex-shrink:0;}
/* Base: every button inside .side-btn-row inherits these styles.
   Adding a new button here requires ZERO CSS changes — do NOT re-introduce
   enumerated ID lists for base styling. That is exactly the pattern that
   caused #claim-btn (Account) to render with browser defaults and regress. */
.side-btn-row > button{
  flex:1;min-width:calc(50% - 4px);
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  color:#4b5563;font-size:7.5px;letter-spacing:1.2px;
  border-radius:6px;cursor:pointer;text-transform:uppercase;
  transition:all .15s;display:none;
  padding:6px 4px 5px;text-align:center;line-height:1.2;
}
.side-btn-row > button.side-btn--full{min-width:100%;}
.side-btn-row > button:hover{color:#e2e8f0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);}
/* Per-button active-state accents (these ARE unique per button) */
#codex-btn.active{color:#a78bfa;border-color:rgba(167,139,250,.35);background:rgba(167,139,250,.08);}
#leaderboard-btn.active{color:#f59e0b;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08);}
#inv-btn.active{color:#4ade80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08);}
#poecraft-btn.active{color:#f59e0b;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08);}
/* ── Button notification pulse ────────────────────────────────────── */
/* Phase 1: bright one-shot flash the moment the event fires.         */
/* Phase 2: settles into a gentle breathe while action is pending.    */
@keyframes btn-notify-flash{
  0%,8%        {box-shadow:0 0 0 transparent;}
  16%          {box-shadow:0 0 28px 8px var(--bn-glow);border-color:var(--bn-flash-bd);}
  30%,38%      {box-shadow:0 0 0 transparent;}
  46%          {box-shadow:0 0 28px 8px var(--bn-glow);border-color:var(--bn-flash-bd);}
  60%,68%      {box-shadow:0 0 0 transparent;}
  76%          {box-shadow:0 0 28px 8px var(--bn-glow);border-color:var(--bn-flash-bd);}
  90%,100%     {box-shadow:0 0 0 transparent;}
}
@keyframes btn-notify{
  0%,100%{box-shadow:0 0 0 transparent;}
  50%    {box-shadow:0 0 9px 1px var(--bn-glow);}
}
/* Gentle pulse — stays on while action is pending */
.btn-notify      {animation:btn-notify       2.4s ease-in-out infinite;}
/* Three bright flashes — one-shot, overrides gentle pulse while it runs */
.btn-notify-flash{animation:btn-notify-flash 2s ease-in-out forwards;}
/* Attribute points unspent → gold */
#attrib-btn.btn-notify,#attrib-btn.btn-notify-flash{color:#f59e0b;border-color:rgba(245,158,11,.4);--bn-glow:rgba(245,158,11,.5);--bn-flash-bd:rgba(245,158,11,.85);}
/* Quests ready to claim → green */
#quest-btn.btn-notify, #quest-btn.btn-notify-flash {color:#4ade80;border-color:rgba(74,222,128,.4); --bn-glow:rgba(74,222,128,.5); --bn-flash-bd:rgba(74,222,128,.85);}
/* Codex new unlock → purple */
#codex-btn.btn-notify,#codex-btn.btn-notify-flash{color:#a78bfa;border-color:rgba(167,139,250,.4);--bn-glow:rgba(167,139,250,.5);--bn-flash-bd:rgba(167,139,250,.85);}

.side-btn-row kbd{display:block;font-size:7px;color:#334155;font-family:inherit;letter-spacing:0;margin-top:2px;}

/* ATTRIB PANEL */
#attrib-panel{position:fixed;right:16px;top:56px;z-index:50;background:rgba(8,8,14,.97);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px;min-width:290px;max-width:310px;}
.ap-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.ap-pts-block{display:flex;align-items:baseline;gap:5px;}
.ap-pts{font-size:24px;font-weight:900;color:#f59e0b;line-height:1;}
.ap-pts-sub{font-size:9px;color:#555;font-weight:400;letter-spacing:.5px;}
.ap-build{font-size:9px;color:#555;letter-spacing:1px;text-align:right;}
.ap-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.ap-row:last-of-type{border-bottom:none;}
.ap-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0;padding-top:2px;}
.ap-body{flex:1;min-width:0;}
.ap-top-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.ap-name{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;}
.ap-cur{font-size:8px;color:#3a3a4a;font-weight:400;letter-spacing:.4px;}
.ap-track{height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:5px;}
.ap-fill{height:100%;border-radius:2px;transition:width .25s;}
.ap-stat{font-size:10px;color:#94a3b8;font-weight:600;letter-spacing:.2px;}
.ap-next{font-size:9px;color:#4ade80;margin-top:4px;opacity:.85;letter-spacing:.2px;}
.ap-btn{padding:4px 10px;border:1px solid;background:rgba(0,0,0,.3);border-radius:5px;cursor:pointer;font-size:14px;font-weight:900;line-height:1;transition:all .12s;flex-shrink:0;margin-top:2px;}
.ap-btn:hover:not([disabled]){filter:brightness(1.4);}
.ap-btn[disabled]{opacity:.2;cursor:default;}
.ap-totals{margin:10px 0 8px;padding:10px 12px;background:rgba(255,255,255,.025);border-radius:8px;border:1px solid rgba(255,255,255,.06);}
.ap-totals-hd{font-size:8px;letter-spacing:2px;color:#333;text-transform:uppercase;margin-bottom:8px;}
.ap-totals-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;}
.ap-tc{display:flex;justify-content:space-between;align-items:center;}
.ap-tl{font-size:9px;color:#444;letter-spacing:.3px;}
.ap-tv{font-size:10px;font-weight:700;color:#94a3b8;font-variant-numeric:tabular-nums;}

/* QUEST TRACKER */
#quest-tracker{position:fixed;bottom:90px;right:16px;z-index:10;display:none;flex-direction:column;gap:5px;pointer-events:none;width:186px;}
.qt-quest{background:rgba(8,8,14,.9);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:7px 9px;}
.qt-name{font-size:8px;font-weight:700;color:#bbb;letter-spacing:.4px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qt-track{height:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:2px;}
.qt-fill{height:100%;border-radius:2px;transition:width .35s;}
.qt-prog{font-size:7px;color:#444;}

/* ── SHARED OVERLAY PANEL SHELL ──
   Positioning, background, border and scroll behaviour are identical
   across all centred modal panels. Individual rules below only add
   their unique size and padding. */
#quest-log,#craft-panel,#harkon-panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:150;background:rgba(8,8,14,.97);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;overflow-y:auto;}

/* ── SHARED FULL-WIDTH CLOSE BUTTON ──
   Applies to every "footer" close button inside a panel.
   #close-craft is intentionally excluded — it sits in a flex header row. */
#close-attrib,#close-quest,#close-char,#close-harkon{
  display:block;width:100%;
  border:1px solid rgba(255,255,255,.1);background:transparent;color:#555;
  border-radius:8px;cursor:pointer;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;transition:color .15s,border-color .15s;}
#close-attrib                         {margin-top:10px;padding:7px;}
#close-quest                          {margin-top:14px;padding:7px;}
#close-char                           {padding:9px;letter-spacing:3px;}
#close-attrib:hover,#close-quest:hover{color:#ccc;border-color:rgba(255,255,255,.3);}
#close-char:hover                     {color:#fff;border-color:rgba(255,255,255,.3);}

/* QUEST LOG */
#quest-log{padding:20px 24px;width:min(540px,96vw);max-height:82vh;}
#quest-log h2{font-size:20px;letter-spacing:6px;color:#06b6d4;margin-bottom:2px;}
.ql-sub{font-size:10px;color:#555;letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;}
.ql-section{font-size:9px;letter-spacing:3px;color:#333;text-transform:uppercase;margin:14px 0 8px;}
.ql-card{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:11px 13px;background:rgba(255,255,255,.02);margin-bottom:8px;}
.ql-card.done{opacity:.45;}
.ql-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:7px;}
.ql-icon{font-size:20px;flex-shrink:0;line-height:1.2;}
.ql-info{flex:1;}.ql-name{font-size:12px;font-weight:700;letter-spacing:.5px;}
.ql-desc{font-size:10px;color:#666;margin-top:2px;}
.ql-reward{font-size:10px;color:#f59e0b;font-weight:700;white-space:nowrap;padding-top:2px;}
.ql-bar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:3px;}
.ql-fill{height:100%;border-radius:2px;transition:width .3s;}
.ql-prog-lbl{font-size:9px;color:#555;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ql-card.ql-critical{border-color:rgba(253,230,138,.45);background:linear-gradient(180deg,rgba(253,230,138,.06),rgba(253,230,138,.02));}
.ql-critical-tag{display:inline-block;font-size:8px;letter-spacing:2px;color:#fde68a;background:rgba(253,230,138,.12);border:1px solid rgba(253,230,138,.3);border-radius:3px;padding:1px 6px;margin-left:6px;vertical-align:middle;}
.ql-skip-btn{font-size:9px;color:#888;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:2px 7px;cursor:pointer;letter-spacing:.5px;transition:color .15s,border-color .15s;}
.ql-skip-btn:hover{color:#fde68a;border-color:rgba(253,230,138,.3);}

/* ══════════════════════════════════════════
   CRAFT / FORGE PANEL
══════════════════════════════════════════ */
#craft-panel{padding:18px 22px;width:min(700px,96vw);max-height:84vh;}
/* ── header row: forge name left, close button right ── */
.forge-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px;}
.forge-title{font-size:18px;font-weight:900;letter-spacing:5px;line-height:1;}
.forge-meta{font-size:9px;letter-spacing:2px;color:#444;text-transform:uppercase;margin-top:5px;}
#close-craft{flex-shrink:0;align-self:flex-start;padding:6px 14px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#555;border-radius:8px;cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;transition:color .15s,border-color .15s;}
.wb-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;}
.wb-icon{font-size:48px;line-height:1;}
.wb-title{font-size:14px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#fb923c;}
.wb-desc{font-size:11px;letter-spacing:1px;text-align:center;line-height:1.8;color:#555;}
#close-craft:hover{color:#ccc;border-color:rgba(255,255,255,.35);}
/* ── compact quality / context strip ── */
#craft-prog{margin-bottom:12px;}
.cq-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px;}
.cq-lbl{font-size:8px;letter-spacing:2px;color:#444;text-transform:uppercase;flex-shrink:0;}
.cq-badge{font-size:8px;padding:2px 8px;border-radius:10px;border:1px solid;letter-spacing:.5px;white-space:nowrap;}
.cq-note{font-size:8px;color:#333;letter-spacing:.4px;}
.cb-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:2px;}
.cb-unlocked{font-size:10px;color:#4ade80;}.cb-upcoming{font-size:10px;color:#3a3a55;}
/* ── recipe grid ── */
#recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:10px;}
/* ── base card ── */
.recipe-card{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;background:rgba(255,255,255,.02);transition:border-color .2s,box-shadow .2s;position:relative;}
/* state: all materials available — highlight the card */
.recipe-card.rc-ready{border-color:rgba(251,146,36,.45);background:rgba(251,146,36,.04);}
.recipe-card.rc-ready:hover{border-color:rgba(251,146,36,.8);box-shadow:0 0 18px rgba(251,146,36,.12);}
/* state: locked by craft level — strongly dimmed, no interaction */
.recipe-card.rc-locked{opacity:.25;pointer-events:none;}
.rc-lock{position:absolute;top:9px;right:10px;font-size:13px;line-height:1;opacity:.5;}
/* ── card layout ── */
.rc-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.rc-icon{font-size:26px;line-height:1;flex-shrink:0;}
.rc-info{flex:1;min-width:0;}
.rc-name{font-size:12px;font-weight:700;letter-spacing:.4px;line-height:1.3;margin-bottom:2px;}
.rc-stat{font-size:10px;color:#fb923c;}
/* badge row: craft-level req + slot type */
.rc-badges{display:flex;align-items:center;gap:5px;margin-bottom:8px;flex-wrap:wrap;}
.rc-lvl-badge{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.06);color:#555;letter-spacing:.8px;}
.rc-slot-badge{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.04);color:#3a3a55;letter-spacing:.8px;text-transform:capitalize;}
/* material list */
.rc-mats{display:flex;flex-direction:column;gap:3px;margin-bottom:9px;}
.rc-mat-line{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;}
.rc-mat-name{color:#555;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc-mat-qty{font-variant-numeric:tabular-nums;font-weight:700;flex-shrink:0;}
.mat-ok{color:#22c55e;}.mat-no{color:#ef4444;}
/* forge / brew button */
.rc-btn{width:100%;padding:8px;border:none;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:all .15s;}
.rc-btn:not(:disabled){background:linear-gradient(135deg,#f59e0b,#fb923c);color:#fff;cursor:pointer;}
.rc-btn:not(:disabled):hover{filter:brightness(1.15);}
.rc-btn:disabled{background:rgba(255,255,255,.05);color:#333;cursor:not-allowed;}

/* HARKON PANEL */
#harkon-panel{padding:20px 24px;width:min(560px,96vw);max-height:82vh;}
#harkon-panel h2{font-size:20px;letter-spacing:5px;margin-bottom:2px;}
#close-harkon{margin-top:12px;padding:10px;}
#close-harkon:hover{color:#ccc;border-color:rgba(255,255,255,.3);}
.npc-item-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02);margin-bottom:8px;cursor:pointer;transition:border-color .18s;}
.npc-item-row:hover{border-color:rgba(168,85,247,.35);}
.npc-item-row.selected{border-color:#a855f7;background:rgba(168,85,247,.08);}
.npc-item-row.enchanted{border-color:rgba(168,85,247,.3);opacity:.6;cursor:default;}
.npc-action-btn{width:100%;padding:11px;border:none;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;margin-top:10px;transition:all .15s;}
.npc-action-btn:not(:disabled){background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 0 20px rgba(168,85,247,.3);}
.npc-action-btn:not(:disabled):hover{filter:brightness(1.15);}
.npc-action-btn:disabled{background:rgba(255,255,255,.05);color:#333;cursor:not-allowed;}

/* GAMEOVER EXTRAS */
#go-new{font-size:22px;font-weight:900;color:#f59e0b;min-height:28px;}
#go-msg{font-size:13px;color:#a855f7;max-width:340px;text-align:center;line-height:1.6;}
.go-skills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:11px;color:#444;margin-top:4px;letter-spacing:2px;}
.go-skills span{color:#888;}

/* CHAR PANEL */
#char-panel{position:fixed;inset:0;z-index:150;background:rgba(6,6,12,.97);display:none;flex-direction:column;overflow:hidden;}
#char-header{padding:18px 24px 14px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
#char-header h2{font-size:18px;font-weight:900;letter-spacing:6px;color:#06b6d4;margin-bottom:2px;}
#char-headersub{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;}
#char-body{display:grid;grid-template-columns:300px 1fr;gap:0;flex:1;overflow:hidden;}
#char-slots{padding:16px 20px;border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
#char-slots-title{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;margin-bottom:4px;flex-shrink:0;}
#char-bag{padding:16px 20px;overflow-y:auto;}
.char-slot{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.015);transition:border-color .2s;}
.char-slot.equipped{background:rgba(255,255,255,.03);}
.cs-sloticon{font-size:18px;width:26px;text-align:center;flex-shrink:0;}
.cs-info{flex:1;min-width:0;}
.cs-label{font-size:8px;letter-spacing:3px;color:#444;text-transform:uppercase;}
.cs-empty{font-size:11px;color:#2a2a3a;margin-top:2px;}
.cs-iname{font-size:12px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs-idesc{font-size:10px;color:#666;margin-top:1px;}
.cs-uneq{flex-shrink:0;padding:5px 9px;border:1px solid rgba(239,68,68,.35);background:transparent;color:#ef4444;border-radius:6px;cursor:pointer;font-size:8px;letter-spacing:1px;text-transform:uppercase;transition:background .15s;}
.cs-uneq:hover{background:rgba(239,68,68,.18);}
/* ── Card Sockets ── */
.cs-sockets{display:flex;gap:4px;margin-top:5px;}
.cs-socket{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;border:1.5px solid;font-size:13px;cursor:default;}
.cs-socket.empty{border-color:rgba(255,255,255,.15);color:#333;font-size:14px;}
.cs-socket.filled{cursor:pointer;transition:filter .15s;}
.cs-socket.filled:hover{filter:brightness(1.3);}
/* ── Upgrade level badge ── */
.cs-upg-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:rgba(249,115,22,.18);border:1px solid rgba(249,115,22,.35);color:#f97316;font-size:10px;font-weight:700;vertical-align:middle;}
.bag-title{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;margin-bottom:10px;}
.bag-empty{color:#2a2a3a;font-size:12px;line-height:1.8;margin-top:24px;text-align:center;}
.bag-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-left:3px solid #333;border-radius:0 8px 8px 0;background:rgba(255,255,255,.015);margin-bottom:6px;transition:background .15s;}
.bag-item:hover{background:rgba(255,255,255,.03);}
.bi-icon{font-size:20px;flex-shrink:0;}
.bi-info{flex:1;min-width:0;}
.bi-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bi-desc{font-size:10px;color:#666;margin-top:1px;}
.bi-btns{display:flex;gap:5px;flex-shrink:0;}
.bi-eq{padding:6px 12px;border:none;border-radius:6px;background:linear-gradient(135deg,#06b6d4,#3b82f6);color:#fff;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;transition:filter .15s;}
.bi-eq:hover{filter:brightness(1.2);}
.bi-del{padding:6px 9px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#444;border-radius:6px;cursor:pointer;font-size:12px;line-height:1;transition:all .15s;}
.bi-del:hover{color:#ef4444;border-color:rgba(239,68,68,.4);}
#char-footer{padding:12px 24px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
@media(max-width:600px){
  #char-body{grid-template-columns:1fr;}
  #char-slots{border-right:none;border-bottom:1px solid rgba(255,255,255,.06);max-height:45vh;}
}
/* DEATH OVERLAY */
#death-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.75);flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;display:none;}
#death-title{font-size:52px;font-weight:900;letter-spacing:10px;color:#ef4444;text-shadow:0 0 40px #ef444488;}
#death-msg{font-size:12px;color:#888;letter-spacing:3px;text-transform:uppercase;}
#death-sub{font-size:10px;color:#444;letter-spacing:2px;text-transform:uppercase;}
/* SKILL BAR */
#skill-bar{position:fixed;bottom:120px;left:50%;transform:translateX(-50%);display:none;flex-direction:row;align-items:center;gap:8px;z-index:15;background:rgba(6,6,18,.9);padding:9px 13px;border-radius:16px;border:1px solid rgba(255,255,255,.06);pointer-events:none;}
.sk-slot{position:relative;width:62px;height:62px;border-radius:10px;background:rgba(14,12,30,.95);border:2px solid rgba(255,255,255,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden;}
.sk-cd{position:absolute;top:0;left:0;width:100%;background:rgba(0,0,0,.74);height:0%;pointer-events:none;border-radius:8px 8px 0 0;}
.sk-glyph{font-size:22px;font-weight:900;line-height:1;pointer-events:none;margin-bottom:1px;}
.sk-name{font-size:7.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#999;pointer-events:none;}
.sk-key{font-size:7px;color:#555;letter-spacing:.3px;pointer-events:none;}
.sk-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;font-weight:900;color:rgba(255,255,255,.85);pointer-events:none;text-shadow:0 0 8px rgba(0,0,0,1);}
#sk-dash   .sk-glyph{color:#818cf8;}
#sk-strike .sk-glyph{color:#fbbf24;}
#sk-blink  .sk-glyph{color:#c084fc;}
#sk-shield .sk-glyph{color:#22d3ee;}
#sk-potion .sk-glyph{color:#22c55e;}
#sk-potion .sk-name{color:#22c55e;}
@keyframes sk-ready{0%{opacity:0;transform:scale(.9);}15%{opacity:1;transform:scale(1.08);}55%{transform:scale(1);}100%{opacity:1;transform:scale(1);}}

/* ── Departure Panel ── */
#depart-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(520px,94vw);background:#08080f;border:1px solid rgba(192,146,58,.32);
  border-radius:18px;padding:22px 24px;z-index:120;box-shadow:0 0 60px rgba(192,146,58,.12);
  display:none;flex-direction:column;gap:0;}
#dp-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
#dp-zone-icon{font-size:32px;flex-shrink:0;}
#dp-title{font-size:18px;font-weight:700;letter-spacing:3px;color:#c0923a;}
#dp-danger{font-size:11px;color:#555;margin-top:3px;letter-spacing:1px;}
#dp-tagline{font-size:11px;color:#888;font-style:italic;margin-bottom:14px;line-height:1.5;}
#dp-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.dp-row{display:flex;gap:10px;font-size:10px;align-items:flex-start;}
.dp-label{color:#444;min-width:62px;flex-shrink:0;letter-spacing:1px;text-transform:uppercase;padding-top:1px;}
#dp-grid span:last-child{color:#888;line-height:1.5;}
#dp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.dp-tab{padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);color:#444;cursor:pointer;font-size:10px;
  letter-spacing:1px;transition:all .15s;}
.dp-tab:hover{border-color:rgba(192,146,58,.4);color:#c0923a;}
.dp-tab.dp-active{border-color:rgba(192,146,58,.6);color:#c0923a;background:rgba(192,146,58,.08);}
#dp-portal-hint{width:100%;text-align:center;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:rgba(192,146,58,.55);
  border:1px dashed rgba(192,146,58,.22);border-radius:8px;
  padding:9px 0;margin-bottom:10px;}
#dp-readiness{padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;margin-bottom:10px;}
.dp-ready-row{display:flex;gap:18px;font-size:11px;font-weight:700;}
.dp-warn{font-size:9px;color:#f97316;letter-spacing:1px;margin-top:5px;}
#dp-actions{display:flex;}
#dp-close-btn{flex:1;padding:10px 16px;border:1px solid rgba(255,255,255,.08);background:transparent;color:#555;border-radius:8px;cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;transition:background .15s;}
#dp-close-btn:hover{background:rgba(255,255,255,.05);color:#888;}

/* ── Run Summary (slide-up toast) ── */
#run-summary{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  min-width:260px;padding:14px 20px;background:rgba(8,8,15,.92);
  border:1px solid rgba(192,146,58,.3);border-radius:12px;z-index:200;
  text-align:center;pointer-events:none;
  animation:rsSlideIn .4s ease-out both;}
@keyframes rsSlideIn{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
#rs-zone{font-size:10px;letter-spacing:3px;color:#c0923a;text-transform:uppercase;margin-bottom:6px;}
#rs-stats{display:flex;gap:18px;justify-content:center;font-size:12px;font-weight:700;}
.rs-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.rs-stat span:first-child{font-size:16px;font-weight:700;}
.rs-stat span:last-child{font-size:8px;color:#555;letter-spacing:1px;text-transform:uppercase;}

/* Active and Town tabs are not info-clickable — suppress pointer */
.map-tab.active,.map-tab[data-map="town"]{cursor:default;}

/* ── ADMIN PANEL ────────────────────────────────────────────────── */
#admin-panel{
  position:fixed; top:54px; right:0; width:300px;
  max-height:calc(100vh - 64px); overflow-y:auto;
  background:rgba(4,4,12,.97);
  border:1px solid rgba(139,92,246,.55); border-right:none;
  border-radius:8px 0 0 8px;
  z-index:500; display:flex; flex-direction:column;
  font-family:'Segoe UI',sans-serif; font-size:12px;
  box-shadow:-6px 0 32px rgba(139,92,246,.18);
}
#admin-hdr{
  display:flex; align-items:center; gap:8px; padding:10px 12px 8px;
  border-bottom:1px solid rgba(139,92,246,.3);
  font-size:11px; font-weight:700; letter-spacing:2px;
  color:#a78bfa; flex-shrink:0;
}
#admin-hdr span:first-child{ flex:1; }
#admin-god-badge{
  background:rgba(251,191,36,.18); color:#fbbf24;
  border:1px solid rgba(251,191,36,.4);
  border-radius:4px; padding:1px 6px; font-size:9px; letter-spacing:1px;
}
#admin-close-btn{
  background:rgba(239,68,68,.12); color:#f87171;
  border:1px solid rgba(239,68,68,.3); border-radius:4px;
  padding:3px 8px; font-size:9px; cursor:pointer; letter-spacing:1px;
}
#admin-close-btn:hover{ background:rgba(239,68,68,.28); }
#admin-body{ padding:8px 10px 14px; display:flex; flex-direction:column; gap:10px; }
.adm-section{ display:flex; flex-direction:column; gap:5px; }
.adm-section-title{
  font-size:9px; letter-spacing:2px; color:#6b7280; font-weight:700;
  text-transform:uppercase; padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.05); margin-bottom:1px;
}
.adm-row{ display:flex; flex-wrap:wrap; gap:4px; }
.adm-btn{
  padding:4px 9px; font-size:10px; border-radius:4px; cursor:pointer;
  font-family:'Segoe UI',sans-serif; font-weight:600; letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  color:#d1d5db; transition:background .12s;
}
.adm-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.adm-btn.adm-active{ background:rgba(139,92,246,.28); border-color:rgba(139,92,246,.6); color:#c4b5fd; }
.adm-btn.adm-danger{ border-color:rgba(239,68,68,.4); color:#fca5a5; }
.adm-btn.adm-danger:hover{ background:rgba(239,68,68,.22); }
.adm-btn.adm-green{ border-color:rgba(34,197,94,.4); color:#86efac; }
.adm-btn.adm-green:hover{ background:rgba(34,197,94,.18); }
.adm-btn.adm-gold{ border-color:rgba(251,191,36,.4); color:#fde68a; }
.adm-btn.adm-gold:hover{ background:rgba(251,191,36,.18); }
.adm-input-row{ display:flex; gap:4px; align-items:center; }
.adm-input{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:4px; color:#f3f4f6; font-size:11px; padding:3px 7px;
  width:64px; font-family:'Segoe UI',sans-serif;
}
.adm-label{ font-size:10px; color:#6b7280; min-width:48px; }
/* Town-entry tabs (direct portal from Town) get a gold underline */
.map-tab.town-entry{border-bottom:2px solid rgba(192,146,58,.4);}
.map-tab.town-entry:not(.active):hover{border-bottom-color:rgba(192,146,58,.75);}

/* ══════════════════════════════════════════════════════════════════
   POE CRAFTING PANEL  (#poe-craft-panel)
══════════════════════════════════════════════════════════════════ */
#poe-craft-panel{
  position:fixed;inset:0;z-index:152;background:rgba(6,6,12,.97);
  display:none;flex-direction:column;overflow:hidden;
}
.poe-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 24px 14px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.poe-hdr-title{font-size:17px;font-weight:900;letter-spacing:4px;color:#c4b5fd;}
.poe-hdr-sub{font-size:10px;color:#555;margin-top:3px;letter-spacing:.5px;}
.poe-close-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#9ca3af;font-size:11px;padding:6px 14px;border-radius:6px;cursor:pointer;white-space:nowrap;
}
.poe-close-btn:hover{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444;}
.poe-close-btn kbd{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:3px;font-size:9px;padding:1px 4px;margin-left:5px;
}

/* ── Two-column layout ── */
.poe-body{display:flex;flex:1;min-height:0;overflow:hidden;}

/* ── Left: item list ── */
.poe-item-list{
  width:220px;min-width:180px;flex-shrink:0;overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.06);padding:10px 0;
}
.poe-item-row{
  display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;
  border-left:2px solid transparent;transition:background .15s,border-color .15s;
}
.poe-item-row:hover{background:rgba(255,255,255,.04);}
.poe-item-sel{
  background:rgba(168,85,247,.12)!important;border-left-color:#a855f7!important;
}
.poe-item-row-icon{font-size:15px;flex-shrink:0;}
.poe-item-row-name{font-size:11px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.poe-list-tag{font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;}
.poe-list-eq{font-size:7px;font-weight:700;letter-spacing:.5px;background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.35);border-radius:3px;padding:1px 4px;flex-shrink:0;}
.poe-empty-list{padding:20px 14px;font-size:11px;color:#4b5563;line-height:1.5;}

/* ── Right: modification panel ── */
.poe-right-panel{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:12px;}
.poe-no-sel{color:#4b5563;font-size:12px;padding:30px 0;text-align:center;}

/* Item header */
.poe-item-hdr{display:flex;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.poe-item-hdr-icon{font-size:24px;flex-shrink:0;}
.poe-item-hdr-name{font-size:15px;font-weight:800;letter-spacing:1px;}
.poe-item-hdr-meta{font-size:10px;color:#6b7280;margin-top:3px;display:flex;align-items:center;gap:6px;}
.poe-rar-tag{font-size:8px;font-weight:700;letter-spacing:1px;padding:1px 6px;border-radius:3px;border:1px solid;}

.poe-warn{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:7px 12px;font-size:11px;color:#fca5a5;}
.poe-base-stat{font-size:12px;color:#94a3b8;font-weight:600;}

/* Affix list */
.poe-affixes{display:flex;flex-direction:column;gap:3px;}
.poe-affix-line{display:flex;align-items:center;gap:7px;padding:4px 8px;background:rgba(255,255,255,.03);border-radius:4px;}
.poe-affix-badge{font-size:9px;font-weight:800;padding:1px 5px;border-radius:3px;min-width:16px;text-align:center;}
.poe-tier-badge{font-size:9px;font-weight:800;padding:1px 5px;border-radius:3px;border:1px solid;letter-spacing:.5px;min-width:20px;text-align:center;}
.poe-affix-lbl{font-size:11px;font-weight:600;flex:1;}
.poe-affix-nm{font-size:9px;color:#6b7280;font-style:italic;}
.poe-crafted-line{border:1px solid rgba(34,197,94,.2);}
.poe-rm-crafted{background:none;border:none;color:#6b7280;cursor:pointer;font-size:11px;padding:0 4px;margin-left:auto;}
.poe-rm-crafted:hover{color:#ef4444;}
.poe-no-affixes{font-size:11px;color:#4b5563;font-style:italic;padding:4px 0;}

/* Slot pips */
.poe-slots-row{display:flex;align-items:center;gap:8px;font-size:10px;color:#6b7280;}
.poe-slots-lbl{font-weight:700;letter-spacing:.5px;min-width:42px;}
.poe-slots-pips{letter-spacing:3px;font-size:12px;color:#a855f7;}
.poe-slots-sep{flex:1;}

/* Section label */
.poe-section-title{font-size:10px;font-weight:700;letter-spacing:2px;color:#6b7280;margin-bottom:6px;text-transform:uppercase;}

/* Currency grid */
.poe-cur-section{}
.poe-cur-grid{display:flex;flex-direction:column;gap:4px;}
.poe-cur-btn{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;
  border:1px solid rgba(255,255,255,.07);cursor:pointer;transition:background .15s,border-color .15s;
  background:rgba(255,255,255,.03);
}
.poe-cur-btn.enabled:hover{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.45);}
.poe-cur-btn.disabled{opacity:.35;cursor:not-allowed;}
.poe-cur-icon{font-size:16px;flex-shrink:0;}
.poe-cur-body{flex:1;min-width:0;}
.poe-cur-name{font-size:11px;font-weight:700;color:#e2e8f0;}
.poe-cur-hint{font-size:9px;color:#6b7280;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.poe-cur-qty{font-size:11px;font-weight:700;color:#4b5563;min-width:28px;text-align:right;}
.poe-cur-qty.poe-has-qty{color:#a855f7;}

/* Bench craft */
.poe-bench-section{border-top:1px solid rgba(255,255,255,.06);padding-top:10px;}
.poe-bench-hint{font-size:11px;color:#6b7280;font-style:italic;}
.poe-bench-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.poe-bench-opt{
  font-size:10px;font-weight:600;padding:5px 10px;border-radius:5px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#d1d5db;
  transition:background .15s,border-color .15s;
}
.poe-bench-opt:hover{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#4ade80;}
.poe-bench-opt.bench-sel{background:rgba(34,197,94,.18);border-color:#22c55e;color:#4ade80;}
.poe-bench-opt.disabled{opacity:.3;cursor:not-allowed;}
.poe-bench-apply{
  width:100%;padding:9px 16px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.5px;
  background:linear-gradient(135deg,#16a34a,#15803d);border:none;color:#fff;cursor:pointer;
  transition:opacity .15s;
}
.poe-bench-apply:hover{opacity:.85;}

/* Salvage */
.poe-salvage-row{margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);}
.poe-salvage-btn{
  width:100%;padding:8px 16px;border-radius:6px;font-size:11px;font-weight:600;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#fca5a5;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.poe-salvage-btn:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.55);}

/* Modify button in char panel bag */
.bi-mod{
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);
  color:#a855f7;font-size:12px;padding:4px 8px;border-radius:5px;cursor:pointer;
}
.bi-mod:hover{background:rgba(168,85,247,.25);border-color:#a855f7;}
.bi-affix{font-size:9px;color:#9ca3af;margin-top:1px;display:flex;align-items:center;gap:4px;}
.bi-affix.bi-crafted{color:#22c55e;}
.bi-tier{font-size:8px;font-weight:700;padding:0 4px;border-radius:3px;border:1px solid;letter-spacing:.5px;flex-shrink:0;}

/* ══════════════════════════════════════════
   CONTRACT BOARD PANEL
══════════════════════════════════════════ */
#board-panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:150;background:rgba(8,8,14,.97);border:1px solid rgba(255,255,255,.12);
  width:min(640px,96vw);max-height:84vh;display:flex;flex-direction:column;
  padding:0;border-radius:4px;overflow:hidden;
}
.bd-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 20px 10px;background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.bd-title{font-size:16px;font-weight:900;letter-spacing:5px;color:#e8c580;line-height:1;}
.bd-sub{font-size:9px;letter-spacing:1.5px;color:#555;text-transform:uppercase;margin-top:4px;}
.bd-close-btn{
  flex-shrink:0;align-self:flex-start;padding:6px 14px;
  border:1px solid rgba(255,255,255,.1);background:transparent;color:#555;
  border-radius:6px;cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  transition:color .15s,border-color .15s;
}
.bd-close-btn:hover{color:#ccc;border-color:rgba(255,255,255,.35);}
.bd-tabs{
  display:flex;gap:0;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.bd-tab{
  flex:1;padding:10px 0;background:transparent;border:none;
  color:#444;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;transition:color .15s,background .15s;
  border-bottom:2px solid transparent;
}
.bd-tab:hover{color:#888;background:rgba(255,255,255,.02);}
.bd-tab.active{color:#e8c580;border-bottom-color:#e8c580;}
#bd-content{overflow-y:auto;flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:8px;}
.bd-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:6px;padding:12px 14px;position:relative;
  transition:border-color .2s,background .2s;
}
.bd-card:hover{background:rgba(255,255,255,.05);}
.bd-card.bd-ready{
  border-color:rgba(245,158,11,.4);
  background:rgba(245,158,11,.04);
  box-shadow:0 0 12px rgba(245,158,11,.08);
}
.bd-card-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.bd-chain-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.bd-card-name{font-size:13px;font-weight:700;letter-spacing:1px;flex:1;}
.bd-card-desc{font-size:10px;color:#666;margin-bottom:8px;line-height:1.4;}
.bd-reward-row{display:flex;align-items:center;gap:10px;font-size:10px;color:#555;margin-bottom:8px;}
.bd-reward-tag{
  padding:2px 8px;border-radius:3px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);color:#888;letter-spacing:1px;
}
.bd-prog-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:6px;}
.bd-prog-fill{height:100%;border-radius:2px;transition:width .3s;}
.bd-prog-lbl{font-size:9px;color:#444;text-align:right;margin-bottom:6px;}
.bd-btn-row{display:flex;justify-content:flex-end;gap:8px;}
.bd-accept-btn{
  padding:6px 18px;border-radius:4px;border:1px solid rgba(6,182,212,.3);
  background:rgba(6,182,212,.08);color:#06b6d4;font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.bd-accept-btn:hover{background:rgba(6,182,212,.18);border-color:rgba(6,182,212,.6);}
.bd-accept-btn:disabled{opacity:.25;cursor:not-allowed;}
.bd-claim-btn{
  padding:8px 22px;border-radius:4px;border:1px solid rgba(245,158,11,.5);
  background:rgba(245,158,11,.12);color:#f59e0b;font-size:11px;font-weight:900;
  letter-spacing:3px;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
  animation:claimPulse 1.8s ease-in-out infinite;
}
.bd-claim-btn:hover{background:rgba(245,158,11,.28);border-color:rgba(245,158,11,.8);box-shadow:0 0 18px rgba(245,158,11,.2);}
@keyframes claimPulse{
  0%,100%{box-shadow:0 0 6px rgba(245,158,11,.15);}
  50%{box-shadow:0 0 16px rgba(245,158,11,.35);}
}
.bd-empty{text-align:center;padding:40px 20px;color:#333;font-size:11px;letter-spacing:2px;}
.bd-streak{
  text-align:center;padding:6px 12px;background:rgba(251,146,36,.08);
  border:1px solid rgba(251,146,36,.2);border-radius:4px;color:#fb923c;
  font-size:10px;font-weight:700;letter-spacing:2px;
}

/* ── CODEX PANEL ───────────────────────────────────────────────────── */
#codex-panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(760px,95vw);max-height:82vh;
  background:rgba(6,4,2,.97);border:1px solid rgba(180,130,50,.35);
  border-radius:6px;display:flex;flex-direction:column;z-index:1200;
  font-family:'Segoe UI',sans-serif;color:#c4a458;overflow:hidden;
}
.cx-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px 10px;border-bottom:1px solid rgba(180,130,50,.2);flex-shrink:0;
}
.cx-title{font-size:13px;font-weight:900;letter-spacing:4px;color:#c0923a;}
.cx-sub{font-size:10px;color:#4a3a1a;letter-spacing:2px;margin-top:2px;}
.cx-close-btn{
  background:none;border:1px solid rgba(180,130,50,.3);color:#6a5030;
  padding:5px 10px;border-radius:3px;cursor:pointer;font-size:10px;letter-spacing:1px;
}
.cx-close-btn:hover{background:rgba(180,130,50,.08);color:#c0923a;}
.cx-tabs{display:flex;gap:0;border-bottom:1px solid rgba(180,130,50,.15);flex-shrink:0;}
.cx-tab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:#4a3a1a;padding:9px 18px;cursor:pointer;font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;transition:color .15s,border-color .15s;
}
.cx-tab:hover{color:#c0923a;}
.cx-tab.active{color:#c0923a;border-bottom-color:#c0923a;}
.cx-tab.cx-tab-new::after{
  content:'';display:inline-block;width:6px;height:6px;
  background:#a78bfa;border-radius:50%;margin-left:5px;vertical-align:middle;
  box-shadow:0 0 4px rgba(167,139,250,.6);
  animation:cxTabPulse 2s ease-in-out infinite;
}
@keyframes cxTabPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.cx-tab-seasonal{color:#2a2a3e;}
.cx-tab-seasonal:hover{color:#555;}
.cx-seasonal-badge{font-size:7px;letter-spacing:1px;background:#1a1a2e;color:#334;border-radius:3px;padding:1px 4px;margin-left:4px;vertical-align:middle;}
#cx-content{overflow-y:auto;padding:16px 18px;flex:1 1 auto;}
/* stat row */
.cx-stat-row{
  display:flex;gap:24px;margin-bottom:14px;
  font-size:10px;color:#6a5030;letter-spacing:2px;
}
/* ── Bestiary ── */
.cx-bestiary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.cx-enemy-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.12);
  border-radius:4px;padding:10px 12px;position:relative;
  border-left:3px solid var(--ec,#c0923a);
}
.cx-enemy-card.cx-mastered-card{
  border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.04);
}
.cx-enemy-card.cx-new{
  border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.06);
  box-shadow:0 0 0 1px rgba(167,139,250,.2);
}
.cx-locked{opacity:.5;border-left-color:rgba(100,80,40,.4)!important;}
.cx-silhouette{opacity:.12;filter:grayscale(1);font-size:28px;}
.cx-enemy-hint{font-size:8px;color:#4a3a1a;font-style:italic;margin-top:4px;letter-spacing:.5px;}
.cx-enemy-icon{font-size:22px;margin-bottom:4px;}
.cx-enemy-name{font-size:11px;font-weight:700;color:#c0923a;letter-spacing:1px;}
.cx-enemy-zone{font-size:9px;color:#4a3a1a;margin:2px 0;}
.cx-enemy-tier{
  display:inline-block;font-size:8px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;padding:1px 5px;border-radius:2px;margin:3px 0;
  background:rgba(255,255,255,.05);color:#6a5030;border:1px solid rgba(180,130,50,.15);
}
.cx-enemy-tier.boss{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.3);}
.cx-enemy-tier.miniboss{background:rgba(245,158,11,.1);color:#f59e0b;border-color:rgba(245,158,11,.3);}
.cx-enemy-tier.elite{background:rgba(251,191,36,.1);color:#fbbf24;border-color:rgba(251,191,36,.3);}
/* Info tags */
.cx-tags{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0;}
.cx-tag{font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:1px 5px;border-radius:2px;background:rgba(255,255,255,.04);
  color:#6a5030;border:1px solid rgba(180,130,50,.1);}
.cx-tag-elem{color:#8a7a5a;border-color:rgba(180,130,50,.2);}
/* Combat hints */
.cx-combat-hints{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:3px 0;}
.cx-tag-combat{color:#c0923a;border-color:rgba(192,146,58,.25);}
.cx-hint-temper{font-size:7px;color:#5a4a2a;font-style:italic;letter-spacing:.5px;}
/* Lore & drops */
.cx-lore{font-size:9px;color:#6a5030;margin:5px 0 3px;line-height:1.5;}
.cx-drops{font-size:9px;color:#4a6830;line-height:1.5;}
.cx-locked-text{font-style:italic;opacity:.5;}
/* Drop table */
.cx-drop-table{margin:5px 0 3px;border-top:1px solid rgba(180,130,50,.08);padding-top:4px;}
.cx-drop-hdr{font-size:7px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#5a6a3a;margin-bottom:3px;}
.cx-drop-row{font-size:8px;color:#6a5030;display:flex;justify-content:space-between;padding:1px 0;line-height:1.6;}
.cx-drop-pct{color:#4a3a1a;font-variant-numeric:tabular-nums;}
.cx-drop-ore{color:#c0923a;}
.cx-drop-card{color:#a78bfa;}
/* Stat bars (mastery+) */
.cx-stat-bars{display:flex;flex-direction:column;gap:3px;margin:6px 0 2px;}
.cx-sbar{display:flex;align-items:center;gap:4px;}
.cx-sbar-label{font-size:7px;font-weight:700;letter-spacing:1px;color:#6a5030;width:22px;text-align:right;}
.cx-sbar-track{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;}
.cx-sbar-fill{height:100%;border-radius:2px;transition:width .3s;}
.cx-sbar-hp{background:linear-gradient(90deg,#22c55e,#4ade80);}
.cx-sbar-dmg{background:linear-gradient(90deg,#ef4444,#f87171);}
.cx-sbar-spd{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
/* Filter/sort toolbar */
.cx-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.cx-filter-group,.cx-sort-group{display:flex;align-items:center;gap:3px;}
.cx-sort-label{font-size:7px;color:#4a3a1a;letter-spacing:1px;margin-right:2px;}
.cx-filter-btn{font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;cursor:pointer;border:1px solid rgba(180,130,50,.15);
  background:rgba(255,255,255,.03);color:#6a5030;transition:all .15s;}
.cx-filter-btn:hover{background:rgba(192,146,58,.1);color:#c0923a;border-color:rgba(192,146,58,.3);}
.cx-filter-btn.active{background:rgba(192,146,58,.15);color:#c0923a;border-color:rgba(192,146,58,.4);}
.cx-kills-bar{
  height:3px;background:rgba(255,255,255,.06);border-radius:2px;margin:6px 0 2px;
}
.cx-kills-bar>div{height:100%;background:#c0923a;border-radius:2px;transition:width .3s;}
.cx-kills-count{font-size:8px;color:#4a3a1a;}
.cx-mastered{
  font-size:9px;font-weight:900;color:#fbbf24;letter-spacing:3px;
  margin-top:6px;text-shadow:0 0 8px rgba(251,191,36,.4);
}
.cx-perfected{
  font-size:9px;font-weight:900;color:#e879f9;letter-spacing:3px;
  margin-top:6px;text-shadow:0 0 8px rgba(232,121,249,.4);
}
.cx-enemy-card.cx-perfected-card{
  border-color:rgba(232,121,249,.35);background:rgba(232,121,249,.04);
  border-left-color:rgba(232,121,249,.6);
}
.cx-perf-bar>div{background:linear-gradient(90deg,#fbbf24,#e879f9);}
.cx-codex-tier{font-size:8px;font-weight:700;letter-spacing:1.5px;margin:2px 0 1px;}
.cx-bar-perf>div{background:linear-gradient(90deg,#c084fc,#e879f9);}
/* ── Map Mastery ── */
.cx-map-list{display:flex;flex-direction:column;gap:10px;}
.cx-map-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.15);
  border-radius:4px;padding:12px 14px;
}
.cx-map-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.cx-map-name{font-size:12px;font-weight:700;color:#c0923a;letter-spacing:2px;}
.cx-map-tier{font-size:9px;color:#4a3a1a;letter-spacing:2px;margin-top:2px;}
.cx-stars{font-size:14px;color:#f59e0b;letter-spacing:2px;}
.cx-map-stats{
  display:flex;gap:16px;font-size:9px;color:#6a5030;letter-spacing:1px;margin-bottom:8px;
}
.cx-progress-label{font-size:9px;color:#6a5030;letter-spacing:1px;margin-bottom:4px;}
.cx-progress-bar{
  height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:4px;
}
.cx-progress-bar>div{height:100%;background:linear-gradient(90deg,#c0923a,#f59e0b);border-radius:2px;transition:width .3s;}
.cx-progress-detail{display:flex;gap:12px;font-size:9px;color:#4a3a1a;}
.cx-map-unvisited{font-size:9px;color:#3a2a10;font-style:italic;}
.cx-map-preview{font-size:8px;color:#4a3a1a;margin-top:3px;letter-spacing:.5px;font-style:normal;}
.cx-map-tagline{font-size:9px;color:#5a4a2a;font-style:italic;margin-bottom:6px;line-height:1.4;}
.cx-map-mastered{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.03);}
.cx-mastered-row{font-size:9px;font-weight:900;color:#fbbf24;letter-spacing:3px;margin-top:8px;text-shadow:0 0 8px rgba(251,191,36,.4);}
/* Map checklist sections */
.cx-map-section{margin:6px 0;}
.cx-map-section-hdr{font-size:7px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#5a4a2a;margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;}
.cx-map-section-count{font-size:8px;font-weight:900;color:#6a5030;letter-spacing:1px;}
.cx-checklist{display:flex;flex-wrap:wrap;gap:4px;}
.cx-check{font-size:8px;padding:2px 6px;border-radius:3px;border:1px solid rgba(180,130,50,.1);background:rgba(255,255,255,.02);}
.cx-check-found{color:var(--cc,#c0923a);border-color:rgba(192,146,58,.25);background:rgba(192,146,58,.06);}
.cx-check-missing{color:#3a2a10;font-style:italic;opacity:.5;}
.cx-check-boss{font-weight:700;}
/* ── Collection ── */
.cx-section-label{
  font-size:9px;font-weight:700;letter-spacing:3px;color:#4a3a1a;
  text-transform:uppercase;margin:14px 0 8px;padding-bottom:4px;
  border-bottom:1px solid rgba(180,130,50,.1);
}
.cx-mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;}
.cx-mat-cell{
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.12);
  border-radius:3px;padding:8px 6px;text-align:center;
}
.cx-mat-locked{opacity:.2;}
.cx-mat-icon{font-size:18px;margin-bottom:3px;}
.cx-mat-name{font-size:8px;color:#c0923a;letter-spacing:1px;}
.cx-mat-total{font-size:8px;color:#4a3a1a;margin-top:2px;}
.cx-card-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.cx-card-pill{
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.2);
  border-radius:12px;padding:4px 10px;font-size:9px;color:#a78bfa;letter-spacing:1px;
}
.cx-empty{font-size:9px;color:#3a2a10;font-style:italic;padding:8px 0;}

/* ── Codex Overview ── */
.cx-ov-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0 14px;border-bottom:1px solid rgba(180,130,50,.12);margin-bottom:14px;
}
.cx-ov-title{font-size:14px;font-weight:900;color:#c0923a;letter-spacing:2px;}
.cx-ov-title span{color:#f0d080;}
.cx-ov-pts{font-size:10px;color:#6a5030;letter-spacing:2px;}
.cx-completion-grid{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.cx-compl-row{display:grid;grid-template-columns:80px 1fr 42px;gap:8px;align-items:center;}
.cx-compl-label{font-size:9px;color:#6a5030;letter-spacing:2px;text-transform:uppercase;}
.cx-compl-bar{
  height:4px;background:rgba(255,255,255,.06);border-radius:2px;
}
.cx-compl-bar>div{height:100%;background:linear-gradient(90deg,#6a5030,#c0923a);border-radius:2px;transition:width .4s;}
.cx-compl-nums{font-size:9px;color:#4a3a1a;text-align:right;}
.cx-compl-sub{font-size:9px;color:#3a2a10;font-style:italic;margin-top:6px;}
/* Active hunt block */
.cx-hunt-active{
  display:flex;gap:12px;align-items:center;
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);
  border-radius:4px;padding:10px 12px;margin-bottom:4px;
}
.cx-hunt-icon{font-size:24px;flex-shrink:0;}
.cx-hunt-info{flex:1;min-width:0;}
.cx-hunt-name{font-size:11px;font-weight:700;color:#f59e0b;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.cx-hunt-progress{
  height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:4px;
}
.cx-hunt-progress>div{height:100%;background:linear-gradient(90deg,#b45309,#f59e0b);border-radius:2px;transition:width .3s;}
.cx-hunt-zone{font-size:8px;color:#6a5030;letter-spacing:1px;}
/* Goals list */
.cx-goals{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.cx-goal-cat{border-radius:4px;overflow:hidden;}
.cx-goal-cat-hdr{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:5px 10px;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
}
.cx-goal-cat-sub{font-size:8px;font-weight:400;letter-spacing:1px;opacity:.6;text-transform:none;}
.cx-goal-quick .cx-goal-cat-hdr{color:#22c55e;background:rgba(34,197,94,.06);}
.cx-goal-session .cx-goal-cat-hdr{color:#c0923a;background:rgba(192,146,58,.06);}
.cx-goal-chase .cx-goal-cat-hdr{color:#c084fc;background:rgba(192,132,252,.06);}
.cx-goal-row{
  display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;
  background:rgba(255,255,255,.02);border:1px solid rgba(180,130,50,.09);
  padding:8px 10px;
}
.cx-goal-icon{font-size:14px;padding-top:2px;}
.cx-goal-body{min-width:0;}
.cx-goal-label{font-size:10px;color:#c0923a;font-weight:700;letter-spacing:1px;margin-bottom:4px;}
.cx-goal-zone{font-size:9px;color:#4a3a1a;font-weight:400;}
.cx-goal-bar{
  height:3px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:3px;
}
.cx-goal-bar>div{height:100%;border-radius:2px;transition:width .3s;}
.cx-goal-quick .cx-goal-bar>div{background:linear-gradient(90deg,#16a34a,#22c55e);}
.cx-goal-session .cx-goal-bar>div{background:linear-gradient(90deg,#c0923a,#f59e0b);}
.cx-goal-chase .cx-goal-bar>div{background:linear-gradient(90deg,#a855f7,#e879f9);}
.cx-goal-detail{display:flex;justify-content:space-between;font-size:8px;color:#4a3a1a;}
.cx-goal-pct{color:#6a5030;font-weight:700;}
.cx-goal-reward{font-size:8px;color:#22c55e;letter-spacing:1px;white-space:nowrap;padding-top:3px;}
/* Titles */
.cx-titles-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.cx-title-pill{
  background:rgba(192,146,58,.08);border:1px solid rgba(192,146,58,.2);
  border-radius:12px;padding:4px 10px;font-size:9px;color:#c0923a;letter-spacing:1px;
}
.cx-title-pill.active{
  background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);
  color:#f0d080;font-weight:700;
}
/* Hunt button */
.cx-hunt-btn{
  background:rgba(180,130,50,.08);border:1px solid rgba(180,130,50,.25);
  color:#6a5030;padding:3px 8px;border-radius:3px;cursor:pointer;
  font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  transition:all .15s;
}
.cx-hunt-btn:hover{background:rgba(245,158,11,.12);color:#c0923a;border-color:rgba(245,158,11,.4);}
.cx-hunt-btn.active{
  background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);
  color:#f59e0b;
}
/* Bestiary hunt highlighting */
.cx-hunted{
  border-color:rgba(245,158,11,.5)!important;
  background:rgba(245,158,11,.05)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.15);
}
.cx-enemy-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px;}
/* Map insights */
.cx-insights{margin:8px 0 6px;display:flex;flex-direction:column;gap:3px;}
.cx-insight{
  font-size:8px;color:#6a5030;font-style:italic;line-height:1.5;
  padding-left:8px;border-left:2px solid rgba(192,146,58,.3);
}
.cx-insight-locked{
  font-size:8px;color:#2a1a08;font-style:italic;
  padding-left:8px;border-left:2px solid rgba(255,255,255,.04);
}
/* Collection sets */
.cx-set-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.cx-mat-set{
  background:rgba(255,255,255,.02);border:1px solid rgba(180,130,50,.1);
  border-radius:4px;padding:10px 12px;
}
.cx-set-complete{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.03);}
.cx-set-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.cx-set-hdr>div{display:flex;align-items:center;gap:6px;}
.cx-set-icon{font-size:14px;}
.cx-set-name{font-size:10px;font-weight:700;color:#c0923a;letter-spacing:2px;}
.cx-set-done{font-size:8px;font-weight:900;color:#fbbf24;letter-spacing:2px;padding:1px 6px;background:rgba(251,191,36,.1);border-radius:2px;}
.cx-set-count{font-size:9px;color:#4a3a1a;letter-spacing:1px;}
.cx-set-bar{
  height:3px;background:rgba(255,255,255,.05);border-radius:2px;margin-bottom:8px;
}
.cx-set-bar>div{height:100%;background:linear-gradient(90deg,#6a5030,#c0923a);border-radius:2px;transition:width .3s;}
.cx-set-complete .cx-set-bar>div{background:linear-gradient(90deg,#b45309,#fbbf24);}
.cx-set-mats{display:flex;flex-wrap:wrap;gap:6px;}
.cx-set-mat{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.1);
  border-radius:3px;padding:5px 8px;min-width:120px;
}
.cx-set-mat.cx-mat-locked{opacity:.25;}
.cx-set-mat .cx-mat-icon{font-size:16px;flex-shrink:0;}
.cx-set-mat-info{min-width:0;}
.cx-set-mat-info .cx-mat-name{font-size:9px;color:#c0923a;letter-spacing:1px;}
.cx-mat-source{font-size:8px;color:#3a2a10;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}



/* ══════════════════════════════════════════
   QUICK START OVERLAY
══════════════════════════════════════════ */
#qs-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(4,4,10,.88);backdrop-filter:blur(6px);}
#qs-card{background:linear-gradient(135deg,rgba(18,14,28,.98),rgba(10,10,20,.98));border:1px solid rgba(168,85,247,.35);border-radius:18px;padding:32px 36px 26px;max-width:500px;width:90%;box-shadow:0 0 60px rgba(168,85,247,.2),0 20px 60px rgba(0,0,0,.6);}
#qs-logo{font-size:22px;font-weight:900;letter-spacing:4px;text-align:center;margin-bottom:22px;background:linear-gradient(135deg,#a855f7,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#qs-grid{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;}
.qs-row{display:flex;align-items:baseline;gap:14px;}
.qs-key{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#a855f7;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);border-radius:5px;padding:3px 8px;white-space:nowrap;min-width:80px;text-align:center;flex-shrink:0;}
.qs-desc{font-size:12px;color:#94a3b8;line-height:1.4;}
#qs-close-btn{display:block;width:100%;padding:11px;background:linear-gradient(135deg,#7c3aed,#06b6d4);border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:opacity .15s;}
#qs-close-btn:hover{opacity:.85;}
#qs-footer{text-align:center;font-size:9px;letter-spacing:2px;color:#2a2a40;margin-top:10px;text-transform:uppercase;}

/* ══════════════════════════════════════════
   CONTEXTUAL HINT BAR
══════════════════════════════════════════ */
#ctx-hint{position:fixed;bottom:68px;left:50%;transform:translateX(-50%);z-index:50;background:rgba(10,10,20,.92);border:1px solid rgba(168,85,247,.4);border-radius:20px;padding:8px 20px;font-size:12px;color:#c4b5fd;letter-spacing:.5px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .4s;box-shadow:0 4px 20px rgba(0,0,0,.4);}
#ctx-hint.visible{opacity:1;}

/* ══════════════════════════════════════════
   ONBOARDING PERSISTENT HINT
══════════════════════════════════════════ */
#onb-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:55;background:rgba(10,10,20,.90);border:1px solid rgba(168,85,247,.35);border-radius:20px;padding:8px 24px;font-size:13px;font-weight:600;color:#c4b5fd;letter-spacing:.5px;pointer-events:none;white-space:nowrap;opacity:0;box-shadow:0 4px 20px rgba(0,0,0,.5);transition:bottom 1.4s cubic-bezier(.22,1,.36,1),font-size 1.4s cubic-bezier(.22,1,.36,1),padding 1.4s cubic-bezier(.22,1,.36,1),opacity .4s,text-shadow 1.4s,border-color 1.4s,transform 1.4s cubic-bezier(.22,1,.36,1);}
#onb-hint.show{opacity:1;}
/* .intro snaps immediately to the centered state (no slide-up from bottom).
   Only opacity transitions (for smooth fade-in). When .intro is removed,
   the base transition takes over and the hint smoothly settles to the bottom. */
#onb-hint.intro{bottom:42%;font-size:22px;padding:14px 36px;border-color:rgba(168,85,247,.7);transform:translateX(-50%) scale(1);animation:onb-pulse .6s ease-in-out 5;text-shadow:0 0 18px rgba(168,85,247,.7);transition:opacity .4s;}
@keyframes onb-pulse{0%,100%{text-shadow:0 0 10px rgba(168,85,247,.4);border-color:rgba(168,85,247,.45);transform:translateX(-50%) scale(1);}50%{text-shadow:0 0 32px rgba(168,85,247,1);border-color:rgba(168,85,247,1);transform:translateX(-50%) scale(1.06);}}

/* ONBOARDING — blinking skill buttons */
@keyframes onb-blink{
  0%,100%{box-shadow:0 0 8px 2px rgba(34,197,94,.5);border-color:rgba(34,197,94,1);}
  50%{box-shadow:0 0 20px 6px rgba(34,197,94,.9);border-color:rgba(34,197,94,1);transform:scale(1.08);}
}
@keyframes onb-blink-strike{
  0%,100%{box-shadow:0 0 8px 2px rgba(245,158,11,.5);border-color:rgba(245,158,11,1);}
  50%{box-shadow:0 0 20px 6px rgba(245,158,11,.9);border-color:rgba(245,158,11,1);transform:scale(1.08);}
}
.onb-blink{animation:onb-blink .8s ease-in-out infinite !important;opacity:1 !important;}
#sk-strike.onb-blink{animation:onb-blink-strike .8s ease-in-out infinite !important;}

/* ══════════════════════════════════════════
   SIDE PANEL — improved button styles
══════════════════════════════════════════ */
.side-btn-row button{font-size:10.5px;letter-spacing:.3px;}
.side-btn-row button kbd{font-size:8px;opacity:.5;margin-left:3px;}


/* ══════════════════════════════════════════
   LEADERBOARD PANEL
══════════════════════════════════════════ */
#leaderboard-panel{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);
  background:#0d1117;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  min-width:500px;max-width:620px;width:max-content;
  box-shadow:0 12px 40px rgba(0,0,0,.65);
  flex-direction:column;overflow:hidden;z-index:60;
  font-family:'Segoe UI',sans-serif;
}
.lb-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 18px 10px;border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);flex-shrink:0;
}
.lb-title{font-size:14px;font-weight:900;color:#e2e8f0;letter-spacing:1.5px;text-transform:uppercase;}
.lb-sub{font-size:9px;color:#374151;margin-top:3px;letter-spacing:.5px;}
.lb-hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.lb-badge{font-size:9px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.5px;}
.lb-badge-on{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.28);}
.lb-badge-off{background:rgba(107,114,128,.12);color:#6b7280;border:1px solid rgba(107,114,128,.25);}
.lb-close-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#6b7280;font-size:10px;padding:3px 9px;cursor:pointer;font-family:inherit;transition:all .12s;}
.lb-close-btn:hover{background:rgba(255,255,255,.1);color:#e2e8f0;}
.lb-close-btn kbd{background:rgba(0,0,0,.4);padding:1px 4px;border-radius:3px;font-size:9px;}
/* Column header row */
.lb-col-row{
  display:flex;align-items:center;
  padding:5px 18px;border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.015);
}
.lb-col-rank{width:32px;font-size:8px;color:#374151;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.lb-col-name{flex:1;font-size:8px;color:#374151;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding-right:10px;}
.lb-ch{width:38px;text-align:center;font-size:14px;flex-shrink:0;}
/* Data rows */
.lb-row{
  display:flex;align-items:center;
  padding:8px 18px;border-bottom:1px solid rgba(255,255,255,.035);
  transition:background .1s;
}
.lb-row:last-child{border-bottom:none;}
.lb-row:hover{background:rgba(255,255,255,.035);}
.lb-row-self{
  background:rgba(245,158,11,.06)!important;
  border-left:2px solid rgba(245,158,11,.5);
  padding-left:16px;
}
.lb-rank{width:32px;font-size:15px;flex-shrink:0;line-height:1;}
.lb-name{
  flex:1;font-size:12px;color:#cbd5e1;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-right:10px;display:flex;align-items:center;gap:6px;
}
.lb-you{
  font-size:7px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(245,158,11,.18);color:#f59e0b;
  border:1px solid rgba(245,158,11,.35);border-radius:3px;padding:1px 5px;
  flex-shrink:0;
}
.lb-val{
  width:38px;text-align:center;font-size:12px;font-weight:700;
  color:#374151;flex-shrink:0;
}
.lb-val-hi{color:#22c55e;}
.lb-val-max{color:#f59e0b;}
.lb-row-offline{opacity:.45;}
.lb-row-offline .lb-rank{filter:grayscale(1);}
.lb-offline-tag{
  font-size:7px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(107,114,128,.15);color:#6b7280;
  border:1px solid rgba(107,114,128,.25);border-radius:3px;padding:1px 5px;
  flex-shrink:0;
}
.lb-empty{padding:28px 18px;font-size:12px;color:#374151;text-align:center;letter-spacing:.5px;}

/* ══════════════════════════════════════════
   HISCORES (RuneScape-style) — hs-* classes
══════════════════════════════════════════ */

/* Tab bar */
.hs-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px 6px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.hs-tab{
  padding:4px 10px;font-size:12px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);color:#6b7280;transition:all .15s;
}
.hs-tab:hover{color:#e2e8f0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);}
.hs-tab-on{color:#f59e0b!important;border-color:rgba(245,158,11,.4)!important;background:rgba(245,158,11,.1)!important;}

/* Scrollable body */
.hs-body{overflow-y:auto;flex:1;min-height:0;}

/* Column headers */
.hs-col-hdr{
  display:grid;grid-template-columns:32px 1fr 52px 28px;
  padding:4px 12px;font-size:10px;color:#4b5563;letter-spacing:.5px;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;
}
.hs-col-r{text-align:center;}
.hs-col-n{}
.hs-col-v{text-align:right;}
.hs-col-c{text-align:center;}

/* Skill banner (shows above column header on skill tabs) */
.hs-skill-banner{
  padding:8px 12px 4px;font-size:13px;font-weight:600;color:#a78bfa;
  letter-spacing:.5px;flex-shrink:0;
}

/* Rank rows */
.hs-row{
  display:grid;grid-template-columns:32px 1fr 52px 28px;
  padding:5px 12px;font-size:13px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.03);transition:background .1s;
}
.hs-row:hover{background:rgba(255,255,255,.04);}
.hs-row-self{background:rgba(167,139,250,.06)!important;}
.hs-row-self:hover{background:rgba(167,139,250,.1)!important;}
.hs-row-offline{opacity:.45;}

/* Row cells */
.hs-rank{text-align:center;color:#4b5563;font-size:12px;font-weight:600;}
.hs-name{color:#d1d5db;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.hs-lv{text-align:right;color:#6b7280;font-variant-numeric:tabular-nums;}
.hs-lv-hi{color:#34d399;}
.hs-lv-max{color:#f59e0b;font-weight:700;}

/* Online dot */
.hs-dot{color:#22c55e;font-size:8px;flex-shrink:0;}

/* Compare button */
.hs-cmp-btn{
  background:none;border:none;cursor:pointer;color:#4b5563;font-size:13px;
  padding:2px 4px;border-radius:4px;transition:color .15s;display:flex;align-items:center;justify-content:center;
  min-width:20px;
}
.hs-cmp-btn:hover{color:#a78bfa;}

/* ── Compare view ──────────────────────────────────────── */
.hs-cmp-wrap{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;}

.hs-cmp-bar{
  display:flex;align-items:center;gap:10px;padding:10px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.hs-back{
  background:none;border:1px solid rgba(255,255,255,.1);border-radius:6px;
  color:#9ca3af;font-size:12px;padding:4px 10px;cursor:pointer;transition:all .15s;
}
.hs-back:hover{color:#e2e8f0;border-color:rgba(255,255,255,.25);}

.hs-cmp-names{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;font-size:13px;}
.hs-cmp-you{color:#a855f7;font-weight:600;}
.hs-vs{color:#4b5563;font-size:11px;}
.hs-cmp-them{color:#22d3ee;font-weight:600;}

.hs-cmp-col-hdr{
  display:grid;grid-template-columns:24px 1fr 44px 28px 44px;
  padding:4px 12px;font-size:10px;color:#4b5563;letter-spacing:.5px;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;
}
.hs-cmp-row{
  display:grid;grid-template-columns:24px 1fr 44px 28px 44px;
  padding:5px 12px;font-size:13px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.hs-cmp-total{border-top:1px solid rgba(255,255,255,.1);font-weight:700;margin-top:2px;}
.hs-cmp-icon{text-align:center;font-size:14px;}
.hs-cmp-lbl{color:#9ca3af;font-size:12px;}
.hs-cmp-v{text-align:right;font-variant-numeric:tabular-nums;color:#6b7280;}
.hs-cmp-mid{text-align:center;color:#4b5563;font-size:11px;}
.hs-win{color:#34d399;font-weight:700;}
.hs-lose{color:#f87171;}

/* ══════════════════════════════════════════
   UI DRAG SYSTEM — drag handle bar
══════════════════════════════════════════ */
.drag-handle-bar{
  width:100%;height:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;flex-shrink:0;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-sizing:border-box;
  user-select:none;
  transition:background .15s;
  position:relative;
}
.drag-handle-bar::after{
  content:'· · · · ·';
  color:rgba(255,255,255,.22);
  font-size:9px;letter-spacing:5px;
  pointer-events:none;
}
.drag-handle-bar:hover{
  background:rgba(255,255,255,.07);
}
.drag-handle-bar:hover::after{
  color:rgba(255,255,255,.55);
}
.drag-handle-bar.dragging{
  cursor:grabbing;
  background:rgba(255,255,255,.10);
}

/* ══════════════════════════════════════════
   ACCOUNT / CLAIM PANEL
══════════════════════════════════════════ */
#claim-panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(400px,92vw);
  z-index:1200;flex-direction:column;align-items:center;justify-content:center;
}

/* ══════════════════════════════════════════
   LOGIN SECTION (start screen)
══════════════════════════════════════════ */
#login-section{margin-top:8px;text-align:center;}
#login-toggle{color:#94a3b8;font-size:13px;text-decoration:underline;cursor:pointer;}
#login-toggle:hover{color:#e2e8f0;}
#login-form{margin-top:10px;max-width:320px;display:inline-block;text-align:left;}
#login-form input{
  width:100%;padding:8px 10px;margin-bottom:8px;
  background:#1e293b;border:1px solid #475569;border-radius:6px;
  color:#e2e8f0;font-size:14px;box-sizing:border-box;
  font-family:'Segoe UI',sans-serif;outline:none;
}
#login-form input:focus{border-color:rgba(168,85,247,.6);box-shadow:0 0 12px rgba(168,85,247,.2);}
#login-submit{
  width:100%;padding:10px;background:#0891b2;border:none;
  border-radius:6px;color:#fff;cursor:pointer;font-size:14px;
  font-weight:600;margin-bottom:6px;
}
#login-submit:hover{background:#0e7490;}
#login-submit:disabled{opacity:0.5;cursor:not-allowed;}
#login-error{
  background:#450a0a;border:1px solid #dc2626;border-radius:6px;
  padding:8px 12px;margin-bottom:8px;color:#fca5a5;font-size:13px;
}
#login-cancel{display:block;text-align:center;color:#64748b;font-size:12px;text-decoration:underline;cursor:pointer;margin-top:4px;}
#login-cancel:hover{color:#94a3b8;}
#login-forgot{display:block;text-align:center;color:#64748b;font-size:12px;text-decoration:underline;cursor:pointer;margin-top:4px;}
#login-forgot:hover{color:#94a3b8;}

/* Password-reset forms — mirrors #login-form styling */
#reset-request-form,#reset-complete-form,#reset-request-done,#reset-complete-done{
  margin-top:10px;max-width:320px;display:none;text-align:left;
}
#reset-request-form input,#reset-complete-form input{
  width:100%;padding:8px 10px;margin-bottom:8px;
  background:#1e293b;border:1px solid #475569;border-radius:6px;
  color:#e2e8f0;font-size:14px;box-sizing:border-box;
  font-family:'Segoe UI',sans-serif;outline:none;
}
#reset-request-form input:focus,#reset-complete-form input:focus{
  border-color:rgba(168,85,247,.6);box-shadow:0 0 12px rgba(168,85,247,.2);
}
#reset-request-submit,#reset-complete-submit{
  width:100%;padding:10px;background:#0891b2;border:none;
  border-radius:6px;color:#fff;cursor:pointer;font-size:14px;
  font-weight:600;margin-bottom:6px;
}
#reset-request-submit:hover,#reset-complete-submit:hover{background:#0e7490;}
#reset-request-submit:disabled,#reset-complete-submit:disabled{opacity:0.5;cursor:not-allowed;}
#reset-request-error,#reset-complete-error{
  background:#450a0a;border:1px solid #dc2626;border-radius:6px;
  padding:8px 12px;margin-bottom:8px;color:#fca5a5;font-size:13px;
}
#reset-request-cancel,#reset-complete-cancel,#reset-request-done-back,#reset-complete-done-ok{
  display:block;text-align:center;color:#64748b;font-size:12px;
  text-decoration:underline;cursor:pointer;margin-top:4px;
}
#reset-request-cancel:hover,#reset-complete-cancel:hover,
#reset-request-done-back:hover,#reset-complete-done-ok:hover{color:#94a3b8;}
.reset-info-msg,.reset-done-msg{
  color:#94a3b8;font-size:13px;margin:0 0 8px;text-align:center;
}

/* ══════════════════════════════════════════
   CHAT PANEL  —  Ticket P2S1-1
   Permanent docked HUD element, bottom-left.
══════════════════════════════════════════ */
.chat-panel{
  position:fixed; left:12px; bottom:12px; width:360px; height:200px;
  display:flex; flex-direction:column;
  background:rgba(8,8,14,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  font-family:'Segoe UI',sans-serif; font-size:12px; color:#e2e8f0;
  z-index:12;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
  user-select:text; -webkit-user-select:text;
}
.chat-panel.collapsed{ height:28px; overflow:hidden; }
.chat-panel .chat-header{
  display:flex; align-items:center; justify-content:space-between;
  height:28px; flex-shrink:0;
  padding:0 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-panel .chat-tabs{ display:flex; gap:4px; }
.chat-panel .chat-tab{
  background:transparent; border:none; color:#64748b; cursor:pointer;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; padding:4px 8px; border-radius:4px;
  font-family:inherit; position:relative;
}
.chat-panel .chat-tab:hover{ color:#cbd5e1; background:rgba(255,255,255,.04); }
.chat-panel .chat-tab-active{ color:#a855f7; background:rgba(168,85,247,.1); }
.chat-panel .chat-tab-unread::after{
  content:''; position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%;
  background:#06b6d4; box-shadow:0 0 6px #06b6d4;
}
.chat-panel .chat-collapse{
  background:transparent; border:none; color:#64748b; cursor:pointer;
  font-size:16px; line-height:1; padding:2px 8px;
  font-family:inherit;
}
.chat-panel .chat-collapse:hover{ color:#e2e8f0; }
.chat-panel .chat-log{
  flex:1; min-height:0; overflow-y:auto;
  padding:4px 6px;
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.chat-panel .chat-log::-webkit-scrollbar{ width:6px; }
.chat-panel .chat-log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }
.chat-panel .chat-row{
  display:flex; gap:6px; line-height:1.3;
  word-break:break-word;
}
.chat-panel .chat-row-time{ color:#475569; flex-shrink:0; font-variant-numeric:tabular-nums; font-size:10px; padding-top:1px; }
.chat-panel .chat-row-name{ color:#06b6d4; flex-shrink:0; font-weight:700; cursor:context-menu; }
.chat-panel .chat-row-text{ color:#cbd5e1; flex:1; }
.chat-panel .chat-row-system .chat-row-name{ color:#64748b; font-style:italic; font-weight:400; }
.chat-panel .chat-row-system .chat-row-text{ color:#94a3b8; font-style:italic; }
.chat-panel .chat-input-row{
  flex-shrink:0; padding:4px 6px;
  border-top:1px solid rgba(255,255,255,.08);
}
.chat-panel .chat-input{
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:4px;
  color:#e2e8f0; padding:4px 8px; font-size:12px;
  font-family:inherit; outline:none;
}
.chat-panel .chat-input:focus{ border-color:rgba(168,85,247,.5); box-shadow:0 0 8px rgba(168,85,247,.2); }

/* ── MIRA QUEST-GIVER DIALOG (P0S4-1 v2) ─────────────────────────── */
.mira-dialog{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(92vw,420px); background:linear-gradient(180deg,#141a28 0%,#0f1420 100%);
  border:2px solid #fde68a; border-radius:12px; padding:22px 22px 20px;
  z-index:9500; box-shadow:0 14px 48px rgba(0,0,0,.7), 0 0 48px rgba(253,230,138,.22);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:'Segoe UI',sans-serif;
}
.mira-dialog .md-close{
  position:absolute; top:6px; right:10px; background:transparent; border:0;
  color:#94a3b8; font-size:18px; cursor:pointer; padding:4px 8px; line-height:1;
}
.mira-dialog .md-close:hover{ color:#fde68a; }
.mira-dialog .md-portrait{
  width:72px; height:72px; border-radius:50%; overflow:hidden;
  background:#1a1f2e; border:2px solid #fde68a; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 18px rgba(253,230,138,.25);
}
.mira-dialog .md-title{
  margin:0; font:bold 16px 'Segoe UI',sans-serif; color:#fde68a;
  letter-spacing:.3px;
}
.mira-dialog .md-body{
  margin:0 0 4px; font:13px 'Segoe UI',sans-serif; color:#cbd5e1;
  text-align:center; line-height:1.55; max-width:360px;
}
.mira-dialog .md-buttons{ display:flex; flex-direction:column; gap:8px; width:100%; }
.mira-dialog .md-btn{
  padding:12px 16px; font:bold 13px 'Segoe UI',sans-serif;
  border-radius:6px; cursor:pointer; border:1px solid transparent;
  min-height:44px; transition:background .12s ease,border-color .12s ease;
}
.mira-dialog .md-btn-primary{
  background:#fde68a; color:#1a1408; border-color:#fde68a;
}
.mira-dialog .md-btn-primary:hover{ background:#fef3c7; border-color:#fef3c7; }
.mira-dialog .md-btn-primary:focus{ outline:2px solid #fef3c7; outline-offset:2px; }
.mira-dialog .md-btn-secondary{
  background:transparent; color:#a78bfa; border-color:#a78bfa;
}
.mira-dialog .md-btn-secondary:hover{ background:rgba(167,139,250,.14); }
.mira-dialog .md-btn-secondary:focus{ outline:2px solid #a78bfa; outline-offset:2px; }

/* Quest log side-button pip while a critical quest is pending. */
.side-btn-pip{
  position:absolute; top:-3px; right:-3px; width:10px; height:10px;
  border-radius:50%; background:#fde68a;
  box-shadow:0 0 8px rgba(253,230,138,.85), 0 0 0 1.5px #1a1408;
  pointer-events:none;
  animation:sbPipPulse 1.6s ease-in-out infinite;
}
@keyframes sbPipPulse{
  0%,100%{ transform:scale(1);   opacity:1; }
  50%    { transform:scale(1.3); opacity:.75; }
}