*{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{display:block;position:fixed;inset:0;}

.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;}
.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;}

/* ── XP BAR ── */
#xp-row{display:flex;align-items:center;gap:7px;pointer-events:none;}
/* Level orb — smaller than before; level detail lives in the progression HUD */
#lvl-orb{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 8px rgba(168,85,247,.4),inset 0 1px 2px rgba(255,255,255,.2);}
#lvl-num{font-size:9px;font-weight:900;color:#fff;line-height:1;}
#xp-col{flex:1;min-width:0;}
#xp-track-wrap{height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);}
#xp-bar{height:100%;border-radius:3px;background:linear-gradient(to right,#7c3aed,#a855f7,#06b6d4);box-shadow:0 0 6px rgba(168,85,247,.4);transition:width .2s;}
#xp-info{display:flex;justify-content:space-between;align-items:center;margin-top:2px;}
#xp-lbl{font-size:8px;letter-spacing:2px;color:#2e2e45;text-transform:uppercase;}
#xp-pct{font-size:8px;color:#38295a;font-variant-numeric:tabular-nums;}

/* ── ZONE TABS ── */
#map-tabs{display:none;justify-content:center;gap:5px;pointer-events:all;flex-wrap:wrap;}
.map-tab{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 11px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.07);background:rgba(12,12,20,.8);color:#3a3a55;cursor:pointer;pointer-events:all;transition:all .2s;}
.map-tab:not(.active):hover{color:#888;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);}
.mt-ic{font-size:13px;line-height:1;}
.mt-nm{font-size:8px;letter-spacing:2px;text-transform:uppercase;}
.map-tab[data-map="arena"].active   {color:#a855f7;border-color:rgba(168,85,247,.6);background:rgba(168,85,247,.1);box-shadow:0 0 16px rgba(168,85,247,.3),inset 0 1px 0 rgba(168,85,247,.2);}
.map-tab[data-map="ruins"].active   {color:#f59e0b;border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.1);box-shadow:0 0 16px rgba(245,158,11,.3),inset 0 1px 0 rgba(245,158,11,.2);}
.map-tab[data-map="badlands"].active{color:#ef4444;border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.1);box-shadow:0 0 16px rgba(239,68,68,.3),inset 0 1px 0 rgba(239,68,68,.2);}
.map-tab[data-map="crypt"].active   {color:#8b5cf6;border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.1);box-shadow:0 0 16px rgba(139,92,246,.3),inset 0 1px 0 rgba(139,92,246,.2);}
.map-tab[data-map="volcano"].active {color:#f97316;border-color:rgba(249,115,22,.6);background:rgba(249,115,22,.1);box-shadow:0 0 16px rgba(249,115,22,.3),inset 0 1px 0 rgba(249,115,22,.2);}
.map-tab[data-map="town"].active    {color:#22c55e;border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.1);box-shadow:0 0 16px rgba(34,197,94,.3),inset 0 1px 0 rgba(34,197,94,.2);}

/* ── 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{overflow:hidden;width:168px;transition:width .25s cubic-bezier(.4,0,.2,1);}
#prog-hud.collapsed #prog-body{width:0;}
#prog-inner{width:168px;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;}
#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-section{display:flex;flex-direction:column;gap:4px;}
.ph-sep{height:1px;background:rgba(255,255,255,.06);margin:1px 0;}
.ph-skill{display:flex;flex-direction:column;gap:2px;}
.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:#555;text-transform:uppercase;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ph-skill-lvl{font-size:11px;font-weight:900;color:#ddd;line-height:1;flex-shrink:0;min-width:18px;text-align:right;}
.ph-bar-track{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;}
.ph-bar-fill{height:100%;border-radius:2px;transition:width .3s;}
.ph-hp{display:flex;align-items:center;gap:5px;margin-top:1px;}
.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;}

/* LEVEL UP */
#levelup-screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:200;background:rgba(8,8,14,.93);}
#lu-title{font-size:52px;font-weight:900;letter-spacing:8px;color:#f59e0b;text-shadow:0 0 40px #f59e0b88;}
#lu-sub{font-size:10px;letter-spacing:5px;color:#555;text-transform:uppercase;}
#perk-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.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;}

/* 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;}
#attrib-btn,#craft-btn,#char-btn,#quest-btn,#codex-btn,#coop-btn{
  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;
}
#attrib-btn:hover,#craft-btn:hover,#char-btn:hover,#quest-btn:hover,#codex-btn:hover,#coop-btn:hover{color:#e2e8f0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);}
#codex-btn.active,#coop-btn.active{color:#a78bfa;border-color:rgba(167,139,250,.35);background:rgba(167,139,250,.08);}
#inv-btn,#poecraft-btn{
  width:100%;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;margin-top:0;
}
#inv-btn:hover,#poecraft-btn:hover{color:#e2e8f0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);}
#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);}
.side-btn-row kbd{display:block;font-size:7px;color:#334155;font-family:inherit;letter-spacing:0;margin-top:2px;}
#gather-btn{position:fixed;bottom:165px;left:50%;transform:translateX(-50%);z-index:15;padding:13px 30px;border:1px solid #f59e0b;background:rgba(245,158,11,.15);color:#f59e0b;font-size:13px;font-weight:700;letter-spacing:3px;border-radius:26px;cursor:pointer;text-transform:uppercase;display:none;transition:background .1s;}
#gather-btn:active{background:rgba(245,158,11,.4);}

/* 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;}

/* 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;}

/* ══════════════════════════════════════════
   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;}
#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;gap:8px;}
#dp-depart-btn{flex:1;padding:10px;border:1px solid rgba(192,146,58,.5);
  background:rgba(192,146,58,.1);color:#c0923a;border-radius:8px;cursor:pointer;font-size:11px;
  font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:all .15s;}
#dp-depart-btn:hover{background:rgba(192,146,58,.2);color:#e0a84e;}
#dp-close-btn{flex:0 0 auto;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-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-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-locked{opacity:.35;border-left-color:rgba(100,80,40,.4)!important;}
.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);}
.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;}
.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);
}
/* ── 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;}
/* ── 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;}

/* ── CO-OP PANEL ───────────────────────────────────────────────────── */
#coop-panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(480px,95vw);
  background:rgba(2,10,14,.97);border:1px solid rgba(34,211,238,.25);
  border-radius:8px;display:flex;flex-direction:column;z-index:1200;
  font-family:'Segoe UI',sans-serif;color:#94a3b8;
}
.cp-hdr{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px 12px;border-bottom:1px solid rgba(34,211,238,.15);
}
.cp-hdr > div:first-child{ flex:1; }
.cp-title{font-size:13px;font-weight:900;letter-spacing:4px;color:#22d3ee;text-transform:uppercase;}
.cp-sub{font-size:9px;letter-spacing:2px;color:#164e63;margin-top:2px;text-transform:uppercase;}
.cp-close-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#6b7280;padding:5px 10px;border-radius:4px;cursor:pointer;
  font-size:10px;letter-spacing:1px;white-space:nowrap;
}
.cp-close-btn:hover{background:rgba(255,255,255,.1);color:#d1d5db;}
.cp-close-btn kbd{background:rgba(0,0,0,.4);padding:1px 4px;border-radius:3px;font-size:9px;}
.cp-badge{font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:10px;white-space:nowrap;}
.cp-badge-off{background:rgba(107,114,128,.1);color:#6b7280;}
.cp-badge-wait{background:rgba(245,158,11,.08);color:#f59e0b;}
.cp-badge-on{background:rgba(34,211,238,.08);color:#22d3ee;}
.cp-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.cp-desc{font-size:11px;color:#64748b;line-height:1.6;text-align:center;}
.cp-btn-primary{
  width:100%;padding:11px;font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;border:none;border-radius:5px;cursor:pointer;
  background:linear-gradient(135deg,#0e7490,#22d3ee);color:#fff;
}
.cp-btn-primary:hover{filter:brightness(1.15);}
.cp-btn-secondary{
  padding:9px 16px;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;border:none;border-radius:5px;cursor:pointer;
  background:rgba(34,211,238,.12);color:#22d3ee;border:1px solid rgba(34,211,238,.25);
  white-space:nowrap;
}
.cp-btn-secondary:hover{background:rgba(34,211,238,.2);}
.cp-btn-danger{
  width:100%;padding:9px;font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;border:none;border-radius:5px;cursor:pointer;
  background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.2);
}
.cp-btn-danger:hover{background:rgba(239,68,68,.15);}
.cp-divider{text-align:center;font-size:9px;color:#1e3a47;letter-spacing:2px;text-transform:uppercase;}
.cp-join-row{display:flex;gap:8px;}
.cp-input{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(34,211,238,.2);
  border-radius:5px;color:#e2e8f0;padding:9px 12px;font-size:13px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;outline:none;
}
.cp-input:focus{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.04);}
.cp-input::placeholder{color:#1e3a47;letter-spacing:2px;font-weight:400;text-transform:none;}
.cp-code-box{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.3);
  border-radius:6px;padding:14px;cursor:pointer;
}
.cp-code-box:hover{background:rgba(34,211,238,.1);}
.cp-code-text{font-size:26px;font-weight:900;letter-spacing:8px;color:#22d3ee;}
.cp-code-copy{font-size:10px;color:#164e63;letter-spacing:1px;}
.cp-hint{font-size:10px;color:#164e63;text-align:center;letter-spacing:1px;}
.cp-hint kbd{background:rgba(34,211,238,.1);color:#22d3ee;padding:1px 5px;border-radius:3px;font-size:9px;}
.cp-partner-card{
  background:rgba(34,211,238,.04);border:1px solid rgba(34,211,238,.15);
  border-radius:6px;padding:14px;
}
.cp-partner-name{font-size:14px;font-weight:700;color:#e2e8f0;margin-bottom:8px;}
.cp-partner-stats{display:flex;gap:14px;flex-wrap:wrap;}

/* ══════════════════════════════════════════
   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;}

/* ══════════════════════════════════════════
   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;}
.cp-partner-stats span{font-size:10px;color:#64748b;letter-spacing:1px;}