*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0d0a07;
  --bg2:#161009;
  --bg3:#1e1508;
  --panel:#1a1208;
  --panel2:#221a0a;
  --border:#5a3e14;
  --border2:#7a5520;
  --gold:#c9960a;
  --gold2:#f0c040;
  --gold3:#ffdd88;
  --green:#3a6e2a;
  --green2:#5aa040;
  --green3:#8cd46a;
  --brown:#7a4e20;
  --brown2:#a06830;
  --tan:#c8a060;
  --tan2:#e8c888;
  --cream:#f0e0b0;
  --red:#8b2020;
  --red2:#c04040;
  --muted:#7a6040;
  --text:#e8d090;
  --text2:#c0a060;
  --text3:#907040;
}

body{
  font-family:'IM Fell English',Georgia,serif;
  background:url('/assets/idlebg.png') calc(50% - 140px) center / cover no-repeat fixed;
  color:var(--text);
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* ── RS VIEWPORT LAYOUT ── */
#game-shell{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
  position:relative;
  z-index:1;
}

/* TOP BAR */
#top-bar{
  flex-shrink:0;
  height:62px;
  background:linear-gradient(180deg,#1e1608,#120e04);
  border-bottom:2px solid #5a3e14;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.2rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.6);
  position:relative;
  z-index:10;
}
#top-bar::after{
  content:'';
  position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,150,10,0.4),transparent);
  pointer-events:none;
}
.topbar-title{
  font-family:'Uncial Antiqua',serif;
  font-size:1.3rem;
  color:var(--gold2);
  letter-spacing:0.06em;
  text-shadow:0 0 20px rgba(200,140,10,0.5);
  line-height:1;
}
.topbar-stats{
  display:flex;gap:0.6rem;align-items:center;
}
.topbar-stat{
  display:flex;align-items:center;gap:0.35rem;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(90,62,20,0.4);
  border-radius:3px;
  padding:0.18rem 0.55rem;
  font-size:0.72rem;color:var(--tan);
}
.topbar-stat .s-val{color:var(--gold2);font-weight:bold;}
.topbar-save{
  display:flex;align-items:center;gap:0.5rem;
}

/* MAIN GAME WINDOW — fills everything below top bar */
#main-game{
  flex:1;
  overflow:hidden;
  position:relative;
  min-height:0;
}
#main-game-inner{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
  padding:0.75rem 295px 280px 0.75rem;
}

/* BOTTOM ROW — fixed overlay at bottom of screen, above everything */
#bottom-row{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:260px;
  display:flex;
  flex-direction:row;
  background:transparent;
  pointer-events:none;
  z-index:100;
}

/* Chat panel — left, floats over game */
#chat-panel{
  width:420px;
  flex-shrink:0;
  border:1px solid #4a3410;
  border-bottom:none;
  border-left:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  background:linear-gradient(180deg,rgba(14,11,4,0.97),rgba(8,6,2,0.97));
  pointer-events:all;
  box-shadow:2px -4px 20px rgba(0,0,0,0.7);
}

/* ── STORAGE PANEL ── */
#storage-panel{
  position:fixed;
  right:0;
  top:62px;
  width:280px;
  background:linear-gradient(180deg,rgba(14,10,3,0.97),rgba(10,7,2,0.97));
  border-left:1px solid #4a3410;
  border-bottom:1px solid #3a2808;
  box-shadow:-2px 4px 20px rgba(0,0,0,0.6);
  z-index:99;
  pointer-events:all;
  display:flex;
  flex-direction:column;
  max-height:260px;
}
#storage-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.3rem 0.5rem;
  background:linear-gradient(180deg,rgba(30,20,5,0.9),rgba(20,13,3,0.9));
  border-bottom:1px solid rgba(90,62,20,0.5);
  flex-shrink:0;
  gap:0.3rem;
}
#storage-panel-header .sph-title{
  font-size:0.62rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--gold2);
  font-family:'Uncial Antiqua',serif;
  flex:1;
}
#storage-panel-header .sph-cap{
  font-size:0.55rem;
  color:var(--muted);
}
.store-all-btn{
  background:linear-gradient(180deg,#3a2808,#241804);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--tan);
  font-family:'IM Fell English',serif;
  font-size:0.58rem;
  cursor:pointer;
  padding:0.18rem 0.45rem;
  transition:all 0.15s;
  white-space:nowrap;
}
.store-all-btn:hover{border-color:var(--gold);color:var(--gold2);}
#storage-grid-wrap{
  flex:1;
  overflow-y:auto;
  padding:0.3rem;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
#storage-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:3px;
}
.st-slot{
  aspect-ratio:1;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(90,62,20,0.35);
  border-radius:3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:44px;
  transition:border-color 0.15s,background 0.15s;
  cursor:default;
  overflow:hidden;
}
.st-slot.has-item{
  border-color:var(--border2);
  background:rgba(40,25,8,0.6);
}
.st-slot.has-item:hover{
  border-color:var(--gold);
  background:rgba(60,40,12,0.7);
}
.st-slot.drop-target{
  border-color:var(--gold2) !important;
  background:rgba(200,150,10,0.15) !important;
}
.st-slot.locked{
  background:rgba(0,0,0,0.5);
  border-color:rgba(60,40,10,0.2);
  cursor:not-allowed;
}
.st-slot-icon{
  font-size:1.2rem;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.st-slot-icon svg{width:24px;height:24px;display:block;}
.st-slot-qty{
  position:absolute;
  bottom:1px;right:3px;
  font-size:0.52rem;font-weight:bold;
  color:var(--tan2);
}
.lock-overlay{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.inv-slot-rs.drop-target{
  border-color:var(--gold2) !important;
  background:rgba(200,150,10,0.15) !important;
}
/* Dragging from inventory */
.inv-slot-rs.dragging{opacity:0.45;cursor:grabbing;}

/* ── AUTO-TRANSFER BRIDGE (fixed between storage and right panel) ── */
#auto-transfer-bridge{
  position:fixed;
  right:0;
  width:280px;
  /* sits between storage (top:62px, max-height:260px) and right-panel (height:520px from bottom) */
  top:322px; /* 62 + 260 */
  bottom:520px;
  background:rgba(8,5,1,0.96);
  border-left:1px solid #4a3410;
  border-top:1px solid rgba(90,62,20,0.3);
  border-bottom:1px solid rgba(90,62,20,0.3);
  z-index:99;
  pointer-events:all;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:3px 0;
}
.atb-arrow-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  padding:0 0.3rem;
  box-sizing:border-box;
}
.atb-arrow-side{
  font-size:0.55rem;
  color:rgba(140,100,35,0.45);
  line-height:1;
  user-select:none;
}
.atb-arrow-label{
  font-size:0.42rem;
  color:rgba(140,100,35,0.4);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-style:italic;
  user-select:none;
}
#auto-transfer-row{
  display:flex;
  align-items:center;
  gap:4px;
  padding:0.25rem 0.3rem;
  width:100%;
  box-sizing:border-box;
}
#auto-transfer-label{
  font-size:0.5rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
  flex-shrink:0;
  line-height:1.2;
  max-width:38px;
  text-align:center;
}
.auto-xfer-slot{
  flex:1;
  aspect-ratio:1;
  max-width:52px;
  background:rgba(0,0,0,0.45);
  border:1px dashed rgba(90,62,20,0.3);
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:not-allowed;
  transition:border-color 0.15s;
}
.auto-xfer-slot .axs-lock{
  font-size:1rem;
  opacity:0.3;
  line-height:1;
}
.auto-xfer-slot .axs-label{
  font-size:0.42rem;
  color:var(--muted);
  opacity:0.5;
  margin-top:2px;
  text-align:center;
  font-style:italic;
}

/* Right panel: fixed flush to bottom-right corner */
#right-panel{
  position:fixed;
  right:0;
  bottom:0;
  width:280px;
  height:520px;
  display:flex;
  flex-direction:column;
  overflow:visible;
  z-index:100;
  pointer-events:all;
}
#right-panel-content{
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-left:1px solid #4a3410;
  border-top:1px solid #5a3e14;
  background:linear-gradient(180deg,rgba(16,12,4,0.97),rgba(12,8,2,0.97));
  box-shadow:-2px -4px 20px rgba(0,0,0,0.7);
}
/* tab bodies fill remaining space */
.rs-tab-body{display:none;padding:0.4rem;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.rs-tab-body.active{display:flex;flex-direction:column;}
#menu-buttons{
  display:none;
}
.menu-btn{
  flex:1;
  background:none;
  border:none;
  border-right:1px solid rgba(90,62,20,0.5);
  color:#6a5030;
  font-family:'IM Fell English',serif;
  font-size:0.7rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:0.2rem 0.1rem;
  transition:all 0.12s;
  position:relative;
}
.menu-btn:last-child{border-right:none;}
.menu-btn:hover{color:var(--tan);background:rgba(255,200,60,0.05);}
.menu-btn.active{
  color:var(--gold2);
  background:linear-gradient(180deg,rgba(200,150,10,0.12),rgba(200,150,10,0.03));
}
.menu-btn.active::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
}
.menu-btn-icon{font-size:0.9rem;line-height:1;}
.menu-btn-label{font-size:0.48rem;text-transform:uppercase;letter-spacing:0.05em;color:inherit;}

/* ── MAIN LAYOUT ── */
.game-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.75rem;
  justify-items:center;
}
/* Hide old bottom-grid — layout is now in #bottom-row */
.bottom-grid{display:none!important;}

/* PANELS inside main game area */
.bg-runes{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:0.03;
}
.bg-rune{
  position:absolute;
  font-size:4rem;
  color:#c9960a;
  animation:runeFloat 20s infinite linear;
}
@keyframes runeFloat{
  0%{transform:translateY(110vh) rotate(0deg);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-10vh) rotate(360deg);opacity:0}
}

/* Scanline grain */
body::before{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);
  pointer-events:none;z-index:999;
}

/* ── HEADER (now in topbar) ── */
.rune-border-top{display:none;}
h1{display:none;}
.tagline{display:none;}
.stats-bar{display:none;}

/* ── WRAP becomes main-game-inner ── */
.wrap{
  position:relative;z-index:1;
  padding:0;
  margin:0;
  max-width:none;
}

/* ── HEADER ── */
header{display:none;}

/* ── PANELS — borderless, full-area ── */
.panel{
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
  position:relative;
}
.panel::before{ display:none; }
.panel-head{ display:none; }
.panel-title{ display:none; }
.panel-body{ padding:0; }

/* ── WOODCUTTING AREA ── */
.wc-area{
  display:flex;flex-direction:column;align-items:center;
  gap:1.2rem;
  padding:1.5rem 1rem;
}

/* Tree SVG */
.tree-container{
  position:relative;
  width:180px;height:200px;
  cursor:pointer;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  transition:transform 0.08s ease;
}
.tree-container:hover{filter:drop-shadow(0 4px 20px rgba(80,180,50,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.7))}
.tree-container:active{transform:scale(0.97)}
.tree-container.chopping{animation:chopTree 0.22s ease}
@keyframes chopTree{
  0%{transform:rotate(0deg) translateX(0)}
  20%{transform:rotate(-3deg) translateX(-4px)}
  60%{transform:rotate(2deg) translateX(3px)}
  100%{transform:rotate(0deg) translateX(0)}
}

/* Chip particles */
.chip{
  position:absolute;
  width:6px;height:4px;
  background:var(--brown2);
  border-radius:2px;
  pointer-events:none;
  animation:chipFly 0.6s ease-out forwards;
}
@keyframes chipFly{
  0%{opacity:1;transform:translate(0,0) rotate(0deg)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr))}
}

/* Progress */
.progress-section{width:100%;max-width:260px}
.prog-info{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:0.35rem;
  font-size:0.78rem;
  color:var(--muted);
  background:rgba(0,0,0,0.45);
  border-radius:3px;
  padding:0.15rem 0.4rem;
}
.prog-name{color:var(--tan);font-style:italic}
.prog-time{color:var(--gold);font-size:0.85rem;font-weight:bold}
.prog-track{
  height:10px;
  background:rgba(0,0,0,0.45);
  border:1px solid var(--border);
  border-radius:2px;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.6);
}
.prog-fill{
  height:100%;
  background:linear-gradient(90deg,#4a7a20,#8cd450);
  border-radius:2px;
  transition:width 0.08s linear;
  position:relative;
}
.prog-fill::after{
  content:'';
  position:absolute;right:0;top:0;bottom:0;
  width:3px;
  background:rgba(255,255,255,0.5);
  border-radius:2px;
}

/* Action button */
.action-btn{
  width:100%;max-width:220px;
  padding:0.7rem 1rem;
  background:linear-gradient(180deg,#4a3010,#2e1c08);
  border:1px solid var(--border2);
  border-radius:4px;
  color:var(--cream);
  font-family:'IM Fell English',serif;
  font-size:1rem;
  cursor:pointer;
  transition:all 0.15s;
  display:flex;align-items:center;justify-content:center;gap:0.5rem;
  position:relative;
  overflow:hidden;
}
.action-btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent);
  pointer-events:none;
}
.action-btn:hover{
  border-color:var(--gold);
  color:var(--gold3);
  background:linear-gradient(180deg,#5a3a14,#3a2010);
}
.action-btn:active{transform:scale(0.97)}
.action-btn:disabled{opacity:0.4;cursor:not-allowed}
.action-btn.active-chop{
  border-color:var(--green2);
  color:var(--green3);
  animation:pulseBtn 1.5s ease infinite;
}
@keyframes pulseBtn{
  0%,100%{box-shadow:0 0 0 rgba(90,160,64,0)}
  50%{box-shadow:0 0 12px rgba(90,160,64,0.4)}
}

/* Resource card */
.res-card{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:0.7rem 0.9rem;
  display:flex;align-items:center;gap:0.8rem;
  width:100%;max-width:260px;
}
.res-icon-wrap{
  width:40px;height:40px;
  background:rgba(0,0,0,0.4);
  border:1px solid var(--border);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  flex-shrink:0;
}
.res-info .res-name{
  font-size:0.9rem;color:var(--tan);
  font-style:italic;
}
.res-info .res-desc{
  font-size:0.72rem;color:var(--muted);margin-top:1px;
}
.res-info .res-xp{
  font-size:0.72rem;color:var(--gold);margin-top:1px;
}

/* Level badge */
.level-badge{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:0.3rem 0.7rem;
  font-size:0.72rem;
  color:var(--gold);
  display:flex;align-items:center;gap:0.3rem;
}

/* ── XP BAR ── */
.xp-section{margin-top:0.5rem}
.xp-header{
  display:flex;justify-content:space-between;
  font-size:0.72rem;color:var(--muted);margin-bottom:0.3rem;
  background:rgba(0,0,0,0.45);
  border-radius:3px;
  padding:0.15rem 0.4rem;
}
.xp-track{
  height:6px;
  background:rgba(0,0,0,0.45);
  border:1px solid var(--border);
  border-radius:2px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.6);
}
.xp-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:2px;
  transition:width 0.4s ease;
}

/* ── INVENTORY ── */
.inv-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
}
.inv-slot{
  aspect-ratio:1;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(90,62,20,0.4);
  border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
  min-height:52px;
  transition:border-color 0.15s,background 0.15s;
  cursor:default;
}
.inv-slot.has-item{
  border-color:var(--border2);
  background:rgba(40,25,8,0.6);
}
.inv-slot.has-item:hover{
  border-color:var(--gold);
  background:rgba(60,40,12,0.7);
}
.inv-slot.just-added{
  animation:slotPop 0.3s ease;
}
@keyframes slotPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.12);border-color:var(--gold2)}
  100%{transform:scale(1)}
}
.slot-icon{font-size:1.4rem;line-height:1}
.slot-qty{
  position:absolute;bottom:2px;right:4px;
  font-size:0.62rem;font-weight:bold;
  color:var(--tan2);
}
.slot-name{
  font-size:0.5rem;
  color:var(--muted);
  text-align:center;
  margin-top:1px;
  font-style:italic;
}

.inv-capacity{
  display:flex;justify-content:flex-end;
  font-size:0.7rem;color:var(--muted);
  margin-top:0.4rem;
}

/* ── BOTTOM PANEL TABS (RS-style) ── */
.rs-panel{
  background:linear-gradient(180deg,#100c04,#0c0802);
  border:1px solid #4a3410;
  border-radius:4px;
  overflow:hidden;
  position:relative;
  box-shadow:0 2px 12px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,200,80,0.04);
}
.rs-panel::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0.4;pointer-events:none;
}
.rs-tabs{
  display:flex;
  background:linear-gradient(0deg,#1a1006,#120b04);
  border-top:2px solid #5a3e14;
  flex-shrink:0;
}
.rs-tab{
  flex:1;
  padding:0.5rem 0.2rem 0.35rem;
  background:none;
  border:none;
  border-right:1px solid rgba(90,62,20,0.5);
  color:#6a5030;
  font-family:'IM Fell English',serif;
  font-size:0.65rem;
  cursor:pointer;
  transition:all 0.12s;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  letter-spacing:0.02em;
  position:relative;
  overflow:hidden;
}
.rs-tab:last-child{border-right:none;}
.rs-tab:hover{color:var(--tan);background:rgba(255,200,60,0.04);}
.rs-tab.active{
  color:var(--gold2);
  background:linear-gradient(0deg,rgba(200,150,10,0.12),rgba(200,150,10,0.03));
}
.rs-tab.active::after{
  content:'';
  position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
}
.rs-tab-icon{font-size:1.05rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8));transition:transform 0.15s;}
.rs-tab:hover .rs-tab-icon{transform:translateY(-2px);}
.rs-tab-label{
  font-size:0.5rem;color:inherit;text-transform:uppercase;letter-spacing:0.06em;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height 0.18s ease,opacity 0.18s ease,margin-top 0.18s;
  white-space:nowrap;
}
.rs-tab:hover .rs-tab-label,.rs-tab.active .rs-tab-label{
  max-height:1.2em;opacity:1;margin-top:1px;
}
.rs-tab-body{display:none;padding:0.4rem;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.rs-tab-body.active{display:flex;flex-direction:column;}

/* ── RS SKILL GRID ── */
.skill-grid-rs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  padding:2px;
}
.skill-cell{
  background:linear-gradient(135deg,#141008 0%,#0c0906 100%);
  border:1px solid #3a2a08;
  border-radius:2px;
  padding:0.28rem 0.25rem 0.22rem;
  display:flex;flex-direction:row;align-items:center;gap:5px;
  cursor:default;
  position:relative;
  transition:border-color 0.12s,background 0.12s;
  min-height:36px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03),inset 0 -1px 0 rgba(0,0,0,0.4);
}
.skill-cell:hover{
  border-color:var(--gold);
  background:linear-gradient(135deg,#201608 0%,#140e06 100%);
  z-index:5;
  box-shadow:0 0 5px rgba(200,150,10,0.2),inset 0 1px 0 rgba(255,200,80,0.05);
}
.skill-cell.unlocked{border-color:rgba(80,60,16,0.7);}
.skill-cell.maxed{
  border-color:rgba(200,140,10,0.6);
  background:linear-gradient(135deg,#1e1608 0%,#120e06 100%);
}
/* Skill icon */
.skill-cell-icon{
  width:28px;height:28px;
  border-radius:2px;
  overflow:hidden;
  flex-shrink:0;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,0.7);
}
.skill-cell-icon svg{display:block;}
/* Right side: levels stacked */
.skill-cell-right{
  display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0;
}
.skill-cell-level{
  font-size:0.82rem;
  font-weight:bold;
  color:var(--gold2);
  line-height:1;
  font-family:'Uncial Antiqua',serif;
  letter-spacing:0.01em;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.skill-cell-frac{
  font-size:0.56rem;
  color:#7a6030;
  line-height:1;
  margin-top:1px;
}
/* XP mini bar under levels */
.skill-cell-bar{
  width:100%;height:2px;
  background:rgba(255,255,255,0.05);
  border-radius:1px;
  overflow:hidden;
  margin-top:3px;
}
.skill-cell-fill{
  height:100%;
  border-radius:1px;
  transition:width 0.5s ease;
}
/* Hover tooltip — global fixed overlay, never clipped */
#skill-global-tooltip{
  display:none;
  position:fixed;
  background:rgba(8,5,1,0.98);
  border:1px solid #8a6020;
  border-radius:3px;
  padding:0.5rem 0.7rem;
  white-space:nowrap;
  z-index:9999;
  pointer-events:none;
  min-width:155px;
  box-shadow:0 4px 16px rgba(0,0,0,0.9),inset 0 1px 0 rgba(255,200,80,0.05);
}
#skill-global-tooltip.inv-tip{ min-width:170px; }
#skill-global-tooltip::after{
  content:'';
  position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #8a6020;
}
/* keep tooltip data on cells but hidden — rendered via global overlay */
.skill-cell-tooltip{ display:none !important; }
/* Inv slot icon supports SVG */
.inv-slot-icon{font-size:1.5rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8));display:flex;align-items:center;justify-content:center;}
.inv-slot-icon svg{width:28px;height:28px;display:block;}
/* res-card icon supports SVG */
.res-icon-wrap svg{width:100%;height:100%;display:block;}
/* Inv tooltip — handled by global tooltip system */
.inv-slot-rs .tooltip{ display:none !important; }
.stt-name{font-size:0.82rem;color:var(--gold2);font-style:italic;margin-bottom:4px;border-bottom:1px solid rgba(90,62,20,0.3);padding-bottom:3px;}
.stt-row{font-size:0.7rem;color:var(--tan2);display:flex;justify-content:space-between;gap:1rem;margin-top:2px;}
.stt-row span:last-child{color:var(--gold);font-weight:bold;}
.stt-locked{font-size:0.7rem;color:var(--red2);font-style:italic;margin-top:2px;}
/* Coming-soon placeholder cell */
.skill-cell.placeholder{
  opacity:0.22;
  border-style:dashed;
  cursor:not-allowed;
}

/* ── RS INVENTORY PANEL ── */
.inv-grid-rs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  padding:2px;
  flex-shrink:0;
}
.inv-slot-rs{
  aspect-ratio:1;
  background:linear-gradient(135deg,#1a1006 0%,#0e0904 100%);
  border:1px solid #3a2808;
  border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
  min-height:44px;
  transition:border-color 0.12s,background 0.12s;
  cursor:default;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),inset 0 -1px 0 rgba(0,0,0,0.4);
}
.inv-slot-rs::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,200,80,0.04),transparent 70%);
  pointer-events:none;
}
.inv-slot-rs.has-item{
  border-color:#6a4a18;
  background:linear-gradient(135deg,#261808 0%,#180e04 100%);
  box-shadow:inset 0 1px 0 rgba(255,220,100,0.06),inset 0 -1px 0 rgba(0,0,0,0.5);
}
.inv-slot-rs.has-item:hover{
  border-color:var(--gold);
  background:linear-gradient(135deg,#2e1e08 0%,#1e1204 100%);
  box-shadow:0 0 6px rgba(200,150,10,0.25),inset 0 1px 0 rgba(255,220,80,0.08);
}
.inv-slot-rs.just-added{animation:slotPop 0.3s ease;}
.inv-slot-icon{font-size:1.5rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8));display:flex;align-items:center;justify-content:center;}
.inv-slot-icon svg{width:28px;height:28px;display:block;}
.inv-slot-qty{
  position:absolute;bottom:1px;right:3px;
  font-size:0.62rem;font-weight:bold;
  color:#ffe080;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  font-family:'Uncial Antiqua',serif;
  line-height:1;
}
.inv-slot-name{font-size:0.44rem;color:var(--muted);text-align:center;margin-top:1px;font-style:italic;line-height:1.1;display:none;}
/* Inv tooltip — handled by global tooltip system */
.inv-slot-rs .old-tooltip-unused{ display:none; }
.inv-cap-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:0.35rem;padding:0 2px;
  font-size:0.65rem;color:var(--muted);font-style:italic;
  flex-shrink:0;
}

/* ── ADVENTURE LOG / CHAT PANEL ── */
.log-tabs{
  display:flex;
  background:linear-gradient(0deg,#1a1006,#120b04);
  border-top:2px solid #5a3e14;
  flex-shrink:0;
  gap:0;
}
.log-tab{
  padding:0.32rem 0.65rem;
  background:none;border:none;
  border-right:1px solid rgba(90,62,20,0.5);
  color:#7a6040;
  font-family:'IM Fell English',serif;
  font-size:0.65rem;
  cursor:pointer;
  transition:all 0.15s;
  white-space:nowrap;
  letter-spacing:0.02em;
  position:relative;
}
.log-tab:last-child{border-right:none;}
.log-tab:hover{color:var(--tan);background:rgba(255,200,60,0.04);}
.log-tab.active{
  color:var(--gold2);
  background:linear-gradient(0deg,rgba(200,150,10,0.1),rgba(200,150,10,0.03));
}
.log-tab.active::after{
  content:'';
  position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.log-body{display:none;flex:1;padding:0.4rem 0.55rem;flex-direction:column;overflow:hidden;}
.log-body.active{display:flex;}
.log-entries-rs{
  display:flex;flex-direction:column;gap:0.1rem;
  flex:1;
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.log-entry-rs{
  font-size:0.72rem;color:var(--text3);
  padding:0.18rem 0;
  border-bottom:1px solid rgba(90,62,20,0.12);
  display:flex;gap:0.4rem;align-items:baseline;
  font-style:italic;
  opacity:0;animation:logFade 0.4s ease forwards;
}
.log-time-rs{color:var(--muted);font-size:0.64rem;flex-shrink:0;}
/* Chat bodies */
.chat-body{
  flex:1;display:flex;flex-direction:column;gap:0;overflow:hidden;
}
.chat-messages{
  flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  font-size:0.72rem;font-style:italic;
  display:flex;flex-direction:column;gap:0;
}
.chat-msg{
  padding:0.12rem 0;
  border-bottom:1px solid rgba(90,62,20,0.08);
  line-height:1.4;
}
.chat-msg .cm-name{font-weight:bold;font-style:normal;}
.chat-msg.global .cm-name{color:#5ab0f0;}
.chat-msg.friends .cm-name{color:#60e080;}
.chat-msg.clan .cm-name{color:#c080ff;}
.chat-input-row{
  display:flex;gap:0;margin-top:0.3rem;
}
.chat-input{
  flex:1;
  background:linear-gradient(180deg,#0a0602,#060401);
  border:1px solid #4a3210;
  border-right:none;
  border-radius:2px 0 0 2px;
  color:var(--text);
  font-family:'IM Fell English',serif;
  font-size:0.72rem;
  padding:0.3rem 0.6rem;
  outline:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.6);
}
.chat-input::placeholder{color:#4a3a20;font-style:italic;}
.chat-input:focus{border-color:#8a6020;box-shadow:inset 0 1px 3px rgba(0,0,0,0.6),0 0 0 1px rgba(200,150,10,0.15);}
.chat-send{
  background:linear-gradient(180deg,#3a2208,#221508);
  border:1px solid #6a4a18;
  border-radius:0 2px 2px 0;
  color:var(--tan);
  font-family:'IM Fell English',serif;
  font-size:0.68rem;
  padding:0.3rem 0.8rem;
  cursor:pointer;
  transition:all 0.12s;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,200,80,0.06);
}
.chat-send:hover{border-color:var(--gold);color:var(--gold3);background:linear-gradient(180deg,#4a2c0a,#2e1a08);}

@keyframes logFade{to{opacity:1}}
.log-entry-rs .log-text .hi{color:var(--green3)}
.log-entry-rs .log-text .xp{color:var(--gold)}
.log-entry-rs .log-text .lvl{color:var(--gold2);font-weight:bold}
/* Also keep old selectors for compat */
.log-text .hi{color:var(--green3)}
.log-text .xp{color:var(--gold)}
.log-text .lvl{color:var(--gold2);font-weight:bold}

/* ── OLD SKILL ROWS kept for compact sidebar ── */
.skill-row{display:none;}/* hide old ones */

/* Floating XP popup */
.xp-popup{
  position:fixed;
  font-size:0.85rem;
  color:var(--gold2);
  font-family:'IM Fell English',serif;
  font-style:italic;
  pointer-events:none;
  z-index:100;
  animation:xpRise 1.2s ease-out forwards;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
}
@keyframes xpRise{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-55px) scale(0.8)}
}
.log-popup{
  position:fixed;
  font-size:0.82rem;
  color:var(--green3);
  font-family:'IM Fell English',serif;
  font-style:italic;
  pointer-events:none;
  z-index:100;
  animation:xpRise 1.4s ease-out forwards;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
}

/* ── SELECTOR DROPDOWN ── */
.tree-selector{
  width:100%;
  display:flex;flex-direction:column;gap:0.35rem;
  margin-bottom:0.5rem;
  position:relative;
  z-index:50;
}
.tree-selector-label{
  font-size:0.7rem;color:var(--muted);font-style:italic;
  letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:0.1rem;
}

/* ── HOVER SELECTOR — res-card becomes the dropdown trigger ── */
.hover-selector-wrap{
  position:relative;
  cursor:pointer;
}
.hover-selector-wrap:hover{
  border-color:var(--gold);
  background:rgba(50,32,8,0.7);
}
.hover-selector-arrow{
  font-size:0.55rem;
  color:var(--muted);
  margin-left:auto;
  align-self:center;
  flex-shrink:0;
  transition:transform 0.2s;
  padding-left:0.4rem;
}
.hover-selector-wrap:hover .hover-selector-arrow{
  transform:rotate(180deg);
  color:var(--gold);
}
.hover-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 2px);
  left:0;right:0;
  z-index:300;
}
.hover-selector-wrap:hover .hover-dropdown{
  display:flex;
}

/* Dropdown list */
.tree-list{
  flex-direction:column;gap:0;
  background:linear-gradient(180deg,#1a1006,#100a03);
  border:1px solid var(--gold);
  border-radius:0 0 4px 4px;
  max-height:260px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  box-shadow:0 8px 24px rgba(0,0,0,0.8);
  width:100%;
}
.tree-list.open{display:flex;}

.tree-btn{
  display:flex;align-items:center;gap:0.6rem;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(90,62,20,0.25);
  border-radius:0;
  padding:0.38rem 0.75rem;
  cursor:pointer;
  transition:all 0.12s;
  text-align:left;
  width:100%;
  position:relative;
  font-family:'IM Fell English',serif;
}
.tree-btn:last-child{border-bottom:none;}
.tree-btn:hover:not(.locked){
  background:rgba(60,38,10,0.7);
}
.tree-btn.active-tree{
  background:rgba(60,40,8,0.5);
}
.tree-btn.locked{
  opacity:0.38;cursor:not-allowed;
}
.tree-btn-swatch{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.15);
}
.tree-btn-name{
  font-size:0.78rem;color:var(--tan);font-style:italic;flex:1;
}
.tree-btn.active-tree .tree-btn-name{color:var(--gold2);}
.tree-btn-meta{
  font-size:0.64rem;color:var(--muted);
  white-space:nowrap;
}
.tree-btn.locked .tree-btn-meta{color:var(--red2);}
.tree-btn-xp{
  font-size:0.64rem;color:var(--gold);
  white-space:nowrap;margin-left:0.3rem;
}
.tree-unlock-flash{
  animation:treeUnlock 0.6s ease;
}
@keyframes treeUnlock{
  0%{box-shadow:0 0 0 rgba(200,180,50,0)}
  40%{box-shadow:0 0 16px rgba(200,180,50,0.6)}
  100%{box-shadow:0 0 0 rgba(200,180,50,0)}
}

/* ── SKILL TABS ── */
.skill-tabs{
  display:flex;gap:3px;margin-bottom:0;
  border-bottom:1px solid var(--border);
}
.skill-tab{
  padding:0.45rem 0.9rem;
  background:var(--panel2);
  border:1px solid var(--border);
  border-bottom:none;
  border-radius:4px 4px 0 0;
  color:var(--muted);
  font-family:'IM Fell English',serif;
  font-size:0.78rem;
  cursor:pointer;
  transition:all 0.15s;
  display:flex;align-items:center;gap:0.35rem;
  position:relative;
  bottom:-1px;
}
.skill-tab:hover{color:var(--tan);border-color:var(--border2);}
.skill-tab.active{
  background:var(--panel);
  border-color:var(--gold);
  color:var(--gold2);
  z-index:2;
}
.skill-panel{display:none;}
.skill-panel.active{display:block;}

/* ── MINING ── */
.mine-area{
  display:flex;flex-direction:column;align-items:center;
  gap:1.2rem;
  padding:1.5rem 1rem;
}
.rock-selector-label{
  font-size:0.7rem;color:var(--muted);font-style:italic;
  letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:0.1rem;
}
.rock-list{
  flex-direction:column;gap:0;
  background:linear-gradient(180deg,#1a1006,#100a03);
  border:1px solid var(--gold);
  border-radius:0 0 4px 4px;
  max-height:260px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  box-shadow:0 8px 24px rgba(0,0,0,0.8);
  width:100%;
}
.rock-list.open{display:flex;}
.rock-btn{
  display:flex;align-items:center;gap:0.6rem;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(90,62,20,0.25);
  border-radius:0;
  padding:0.38rem 0.75rem;
  cursor:pointer;
  transition:all 0.12s;
  text-align:left;
  width:100%;
  font-family:'IM Fell English',serif;
}
.rock-btn:last-child{border-bottom:none;}
.rock-btn:hover:not(.locked){background:rgba(60,38,10,0.7);}
.rock-btn.active-rock{background:rgba(60,40,8,0.5);}
.rock-btn.locked{opacity:0.38;cursor:not-allowed;}
.rock-btn-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,0.15);}
.rock-btn-name{font-size:0.78rem;color:var(--tan);font-style:italic;flex:1;}
.rock-btn.active-rock .rock-btn-name{color:var(--gold2);}
.rock-btn-meta{font-size:0.64rem;color:var(--muted);white-space:nowrap;}
.rock-btn.locked .rock-btn-meta{color:var(--red2);}
.rock-btn-xp{font-size:0.64rem;color:var(--gold);white-space:nowrap;margin-left:0.3rem;}
.rock-container{
  position:relative;width:140px;height:130px;
  cursor:pointer;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  transition:transform 0.08s ease;
}
.rock-container:hover{filter:drop-shadow(0 4px 20px rgba(160,140,80,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.7));}
.rock-container:active{transform:scale(0.97);}
.rock-container.striking{animation:strikeRock 0.2s ease;}
@keyframes strikeRock{
  0%{transform:rotate(0deg) translateX(0)}
  25%{transform:rotate(-2deg) translateX(-3px)}
  65%{transform:rotate(1.5deg) translateX(2px)}
  100%{transform:rotate(0deg) translateX(0)}
}
.spark{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  pointer-events:none;
  animation:sparkFly 0.5s ease-out forwards;
}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0.2)}
}

/* ── FISHING ── */
.fish-area{
  display:flex;flex-direction:column;align-items:center;
  gap:1.2rem;
  padding:1.5rem 1rem;
}
.spot-list{
  flex-direction:column;gap:0;
  background:linear-gradient(180deg,#1a1006,#100a03);
  border:1px solid var(--gold);
  border-radius:0 0 4px 4px;
  max-height:260px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  box-shadow:0 8px 24px rgba(0,0,0,0.8);
  width:100%;
}
.spot-list.open{display:flex;}
.spot-btn{
  display:flex;align-items:center;gap:0.6rem;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(90,62,20,0.25);
  border-radius:0;
  padding:0.38rem 0.75rem;
  cursor:pointer;transition:all 0.12s;
  text-align:left;width:100%;
  font-family:'IM Fell English',serif;
}
.spot-btn:last-child{border-bottom:none;}
.spot-btn:hover:not(.locked){background:rgba(60,38,10,0.7);}
.spot-btn.active-spot{background:rgba(60,40,8,0.5);}
.spot-btn.locked{opacity:0.38;cursor:not-allowed;}
.spot-btn-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,0.15);}
.spot-btn-name{font-size:0.78rem;color:var(--tan);font-style:italic;flex:1;}
.spot-btn.active-spot .spot-btn-name{color:var(--gold2);}
.spot-btn-meta{font-size:0.64rem;color:var(--muted);white-space:nowrap;}
.spot-btn.locked .spot-btn-meta{color:var(--red2);}
.spot-btn-xp{font-size:0.64rem;color:var(--gold);white-space:nowrap;margin-left:0.3rem;}
.fish-container{
  position:relative;width:170px;height:130px;
  cursor:pointer;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  transition:transform 0.08s ease;
}
.fish-container:hover{filter:drop-shadow(0 4px 20px rgba(40,120,200,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.7));}
.fish-container:active{transform:scale(0.97);}
.fish-container.casting{animation:castLine 0.3s ease;}
@keyframes castLine{
  0%{transform:translateY(0)}
  40%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
.splash{
  position:absolute;width:8px;height:4px;
  background:#60c8f0;border-radius:50%;
  pointer-events:none;
  animation:splashFly 0.6s ease-out forwards;
}
@keyframes splashFly{
  0%{opacity:0.9;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0.1)}
}

/* ── FIREMAKING ── */
.fire-area{
  display:flex;flex-direction:column;align-items:center;
  gap:1.2rem;
  padding:1.5rem 1rem;
}
.fire-log-list{
  display:none;
  flex-direction:column;gap:0;
  position:absolute;
  top:100%;left:0;right:0;
  background:linear-gradient(180deg,#1a1006,#100a03);
  border:1px solid var(--gold);
  border-top:none;
  border-radius:0 0 4px 4px;
  max-height:260px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  z-index:200;
  box-shadow:0 8px 24px rgba(0,0,0,0.8);
}
.fire-log-list.open{display:flex;}
.fire-log-btn{
  display:flex;align-items:center;gap:0.6rem;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(90,62,20,0.25);
  border-radius:0;
  padding:0.38rem 0.75rem;
  cursor:pointer;transition:all 0.12s;
  text-align:left;width:100%;
  font-family:'IM Fell English',serif;
}
.fire-log-btn:last-child{border-bottom:none;}
.fire-log-btn:hover:not(.locked):not(.no-logs){background:rgba(60,38,10,0.7);}
.fire-log-btn.active-log{background:rgba(60,40,8,0.5);}
.fire-log-btn.locked,.fire-log-btn.no-logs{opacity:0.38;cursor:not-allowed;}
.fire-log-btn.no-logs{border-left:2px solid var(--red);}
.fire-log-btn-name{font-size:0.78rem;color:var(--tan);font-style:italic;flex:1;}
.fire-log-btn.active-log .fire-log-btn-name{color:var(--gold2);}
.fire-log-btn-count{font-size:0.7rem;color:var(--text2);white-space:nowrap;}
.fire-log-btn-meta{font-size:0.64rem;color:var(--muted);white-space:nowrap;}
.fire-log-btn.locked .fire-log-btn-meta{color:var(--red2);}
.fire-log-btn-xp{font-size:0.64rem;color:var(--gold);white-space:nowrap;margin-left:0.3rem;}
.fire-container{
  position:relative;width:160px;height:130px;
  cursor:pointer;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  transition:transform 0.08s ease;
}
.fire-container:hover{filter:drop-shadow(0 4px 24px rgba(255,120,20,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.7));}
.fire-container:active{transform:scale(0.97);}
.fire-container.igniting{animation:ignitePop 0.22s ease;}
@keyframes ignitePop{
  0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}
}
.ember-particle{
  position:absolute;width:4px;height:4px;
  background:#ff8020;border-radius:50%;
  pointer-events:none;
  animation:emberRise 0.9s ease-out forwards;
}
@keyframes emberRise{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0.2)}
}
.buff-banner{
  width:100%;max-width:260px;
  background:rgba(180,80,10,0.15);
  border:1px solid rgba(255,140,30,0.4);
  border-radius:4px;
  padding:0.5rem 0.9rem;
  display:flex;align-items:center;gap:0.7rem;
  font-size:0.78rem;
}
.buff-banner.inactive{opacity:0.45;filter:grayscale(0.6);}
.buff-icon{font-size:1.3rem;}
.buff-info .buff-title{color:var(--gold2);font-style:italic;}
.buff-info .buff-desc{font-size:0.68rem;color:var(--muted);margin-top:1px;}
.buff-timer{margin-left:auto;font-size:0.85rem;color:#ff9040;font-weight:bold;min-width:40px;text-align:right;}

/* Tooltip */
.tooltip{
  position:absolute;
  bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  background:rgba(15,10,4,0.97);
  border:1px solid var(--border2);
  border-radius:4px;
  padding:0.4rem 0.7rem;
  white-space:nowrap;
  font-size:0.72rem;
  color:var(--tan2);
  pointer-events:none;
  z-index:50;
  display:none;
}
.has-item:hover .tooltip{display:block}

/* Footer */
footer{display:none;}
.footer-inner{display:none;}

/* Save indicator */
.save-indicator{
  display:flex;align-items:center;gap:0.4rem;
  font-size:0.68rem;color:var(--muted);font-style:italic;
  transition:color 0.3s;
}
.save-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--muted);
  transition:background 0.3s,box-shadow 0.3s;
  flex-shrink:0;
}
.save-indicator.saving .save-dot{
  background:var(--gold2);
  box-shadow:0 0 6px var(--gold2);
}
.save-indicator.saving{color:var(--gold);}
.save-indicator.saved .save-dot{background:var(--green3);}

/* Reset button */
.reset-btn{
  background:none;
  border:1px solid rgba(139,32,32,0.4);
  border-radius:3px;
  color:var(--red2);
  font-family:'IM Fell English',serif;
  font-size:0.68rem;
  font-style:italic;
  padding:0.2rem 0.6rem;
  cursor:pointer;
  transition:all 0.2s;
  letter-spacing:0.05em;
}
.reset-btn:hover{
  border-color:var(--red2);
  color:#e05050;
  background:rgba(139,32,32,0.12);
}

/* Modal overlay */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.75);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  opacity:0;pointer-events:none;
  transition:opacity 0.2s;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-box{
  background:var(--panel);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:2rem 2.2rem;
  max-width:340px;width:90%;
  text-align:center;
  position:relative;
  transform:translateY(12px);
  transition:transform 0.2s;
  box-shadow:0 8px 40px rgba(0,0,0,0.8);
}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--red2),transparent);
  opacity:0.7;
}
.modal-title{
  font-family:'Uncial Antiqua',serif;
  font-size:1.1rem;
  color:var(--red2);
  margin-bottom:0.7rem;
  letter-spacing:0.08em;
}
.modal-body{
  font-size:0.82rem;
  color:var(--text2);
  font-style:italic;
  line-height:1.6;
  margin-bottom:1.4rem;
}
.modal-body strong{color:var(--cream);}
.modal-actions{display:flex;gap:0.7rem;justify-content:center;}
.modal-cancel{
  padding:0.55rem 1.2rem;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--tan);
  font-family:'IM Fell English',serif;
  font-size:0.88rem;
  cursor:pointer;
  transition:all 0.15s;
}
.modal-cancel:hover{border-color:var(--gold);color:var(--gold3);}
.modal-confirm{
  padding:0.55rem 1.2rem;
  background:linear-gradient(180deg,#6a1010,#3e0808);
  border:1px solid var(--red2);
  border-radius:4px;
  color:#f08080;
  font-family:'IM Fell English',serif;
  font-size:0.88rem;
  cursor:pointer;
  transition:all 0.15s;
}
.modal-confirm:hover{background:linear-gradient(180deg,#8a1818,#5a1010);color:#ffb0b0;}

/* ── ARCANE WORKSHOP ── */
:root{
  --arcane:#5a20a0;
  --arcane2:#8040d0;
  --arcane3:#b080ff;
  --arcane4:#d0aaff;
  --rp:#a060e0;
}

.workshop-area{
  display:flex;flex-direction:column;gap:1.2rem;
  padding:1rem;
}

/* RP display */
.rp-banner{
  display:flex;align-items:center;gap:0.8rem;
  background:linear-gradient(135deg,rgba(60,10,100,0.5),rgba(30,5,60,0.7));
  border:1px solid rgba(120,60,200,0.4);
  border-radius:6px;
  padding:0.7rem 1rem;
  position:relative;
  overflow:hidden;
}
.rp-banner::before{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(180,100,255,0.03) 8px,rgba(180,100,255,0.03) 16px);
  pointer-events:none;
}
.rp-orb{
  width:42px;height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#c080ff,#5010a0);
  border:1px solid rgba(180,100,255,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
  box-shadow:0 0 12px rgba(140,60,220,0.5);
  animation:orbPulse 3s ease infinite;
}
@keyframes orbPulse{
  0%,100%{box-shadow:0 0 12px rgba(140,60,220,0.5)}
  50%{box-shadow:0 0 22px rgba(180,100,255,0.8),0 0 40px rgba(140,60,220,0.3)}
}
.rp-info{flex:1}
.rp-label{font-size:0.68rem;color:rgba(180,120,255,0.7);text-transform:uppercase;letter-spacing:0.15em}
.rp-value{font-family:'Uncial Antiqua',serif;font-size:1.4rem;color:var(--arcane3);line-height:1.1}
.rp-rate{font-size:0.7rem;color:rgba(180,120,255,0.6);font-style:italic;margin-top:1px}
.rp-bar-wrap{
  width:100%;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(120,60,200,0.3);
  border-radius:2px;height:5px;overflow:hidden;margin-top:0.4rem;
}
.rp-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--arcane),var(--arcane3));
  border-radius:2px;
  transition:width 0.5s ease;
}

/* Unlock notice */
.workshop-locked{
  text-align:center;
  padding:2rem 1rem;
  color:rgba(180,120,255,0.5);
  font-style:italic;
  font-size:0.85rem;
}
.workshop-locked .lock-icon{font-size:2.5rem;display:block;margin-bottom:0.5rem;opacity:0.5}
.workshop-locked .lock-req{color:var(--arcane3);font-weight:bold;font-style:normal}

/* Research tree */
.research-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:0.4rem;
}
.research-title{
  font-family:'Uncial Antiqua',serif;
  font-size:0.85rem;color:var(--arcane3);
  letter-spacing:0.08em;
}
.research-subtitle{
  font-size:0.68rem;color:rgba(180,120,255,0.5);font-style:italic;
}

.tech-tree{
  display:flex;flex-direction:column;gap:0.4rem;
}

.tech-node{
  display:flex;align-items:center;gap:0.7rem;
  background:rgba(30,5,60,0.5);
  border:1px solid rgba(90,32,160,0.35);
  border-radius:5px;
  padding:0.55rem 0.8rem;
  position:relative;
  overflow:hidden;
  transition:border-color 0.2s,background 0.2s;
  cursor:default;
}
.tech-node::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(160,80,255,0.3),transparent);
}
.tech-node.unlocked{
  background:rgba(50,15,90,0.6);
  border-color:rgba(140,70,220,0.5);
}
.tech-node.available{
  cursor:pointer;
  border-color:rgba(140,70,220,0.6);
  background:rgba(40,10,80,0.6);
  animation:nodeGlow 2s ease infinite;
}
.tech-node.available:hover{
  border-color:var(--arcane3);
  background:rgba(60,15,110,0.7);
}
@keyframes nodeGlow{
  0%,100%{box-shadow:none}
  50%{box-shadow:0 0 10px rgba(160,80,255,0.3)}
}
.tech-node.locked-node{
  opacity:0.4;
}

.tech-indent{
  width:12px;height:100%;
  display:flex;align-items:center;
  flex-shrink:0;
}
.tech-indent-line{
  width:1px;height:100%;
  background:rgba(120,60,200,0.3);
  margin-left:6px;
}

.tech-icon{
  width:34px;height:34px;
  border-radius:4px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(120,60,200,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
  transition:box-shadow 0.2s;
}
.tech-node.unlocked .tech-icon{
  border-color:rgba(160,90,255,0.6);
  box-shadow:0 0 8px rgba(140,70,220,0.3);
}
.tech-node.available .tech-icon{
  box-shadow:0 0 10px rgba(180,100,255,0.4);
}

.tech-info{flex:1;min-width:0}
.tech-name{
  font-size:0.82rem;color:var(--tan);
  font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tech-node.unlocked .tech-name{color:var(--arcane4);}
.tech-desc{
  font-size:0.68rem;color:var(--muted);margin-top:1px;
}
.tech-cost{
  font-size:0.72rem;
  color:var(--arcane3);
  font-weight:bold;
  white-space:nowrap;
  flex-shrink:0;
  padding:2px 7px;
  border:1px solid rgba(140,70,220,0.4);
  border-radius:3px;
  background:rgba(0,0,0,0.3);
}
.tech-node.unlocked .tech-cost{
  color:var(--green3);
  border-color:rgba(90,180,60,0.4);
}
.tech-node.locked-node .tech-cost{
  color:rgba(120,60,200,0.5);
  border-color:rgba(90,32,160,0.2);
}

/* Runic unlock flash animation */
@keyframes runicUnlock{
  0%{box-shadow:0 0 0 rgba(200,140,255,0)}
  15%{box-shadow:0 0 30px rgba(200,140,255,0.9),0 0 60px rgba(160,80,255,0.5)}
  60%{box-shadow:0 0 15px rgba(180,100,255,0.4)}
  100%{box-shadow:0 0 8px rgba(140,70,220,0.3)}
}
.tech-node.just-unlocked{
  animation:runicUnlock 1.2s ease forwards;
}

/* Rune glyph burst */
.rune-burst{
  position:fixed;
  font-size:1.8rem;
  color:var(--arcane3);
  pointer-events:none;
  z-index:100;
  text-shadow:0 0 10px var(--arcane3);
  animation:runeBurst 1.0s ease-out forwards;
}
@keyframes runeBurst{
  0%{opacity:1;transform:scale(0.5) translateY(0)}
  50%{opacity:0.9;transform:scale(1.3) translateY(-20px)}
  100%{opacity:0;transform:scale(1.8) translateY(-45px)}
}

.workshop-machine{
  background:linear-gradient(180deg,rgba(40,10,80,0.7),rgba(20,5,45,0.8));
  border:1px solid rgba(100,50,180,0.5);
  border-radius:3px;
  overflow:hidden;
  margin-top:0.3rem;
  box-shadow:inset 0 1px 0 rgba(180,100,255,0.06);
}
.workshop-machine-head{
  padding:0.4rem 0.7rem;
  background:linear-gradient(180deg,rgba(50,15,90,0.8),rgba(35,8,70,0.8));
  border-bottom:1px solid rgba(100,50,180,0.4);
  display:flex;align-items:center;justify-content:space-between;
}
.workshop-machine-title{
  font-size:0.75rem;color:var(--arcane3);font-style:italic;
  display:flex;align-items:center;gap:0.4rem;
}
.machine-status{
  font-size:0.62rem;color:rgba(120,255,120,0.7);
  background:rgba(0,80,0,0.3);
  border:1px solid rgba(60,180,60,0.3);
  padding:1px 5px;border-radius:2px;
}
.workshop-machine-body{
  padding:0.65rem;
}

/* 2×2 craft grid */
.craft-grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  max-width:120px;
}
.craft-slot{
  aspect-ratio:1;
  background:rgba(0,0,0,0.45);
  border:1px dashed rgba(120,60,200,0.3);
  border-radius:3px;
  min-height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  cursor:pointer;
  transition:border-color 0.15s,background 0.15s;
  position:relative;
}
.craft-slot.has-item{
  border-color:rgba(160,80,255,0.5);border-style:solid;
  background:rgba(40,10,80,0.5);
}
.craft-slot:hover{
  border-color:rgba(200,120,255,0.6);
  background:rgba(50,15,90,0.5);
}
.craft-slot-qty{
  position:absolute;bottom:1px;right:3px;
  font-size:0.55rem;color:var(--arcane4);
}

/* craft arrow */
.craft-arrow{
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:rgba(160,80,255,0.5);
  padding:0 0.4rem;
}

/* craft output slot */
.craft-output{
  aspect-ratio:1;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(160,80,255,0.4);
  border-radius:3px;
  min-height:52px;max-width:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1.3rem;
  cursor:pointer;
  transition:all 0.15s;
  position:relative;
}
.craft-output.ready{
  border-color:var(--arcane3);
  box-shadow:0 0 10px rgba(160,80,255,0.4);
  animation:outputReady 1s ease infinite;
}
@keyframes outputReady{
  0%,100%{box-shadow:0 0 5px rgba(160,80,255,0.3)}
  50%{box-shadow:0 0 15px rgba(200,130,255,0.6)}
}

/* Section divider */
.workshop-divider{
  display:flex;align-items:center;gap:0.5rem;
  margin:0.3rem 0;
}
.wd-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(120,60,200,0.3),transparent);}
.wd-rune{font-size:0.75rem;color:rgba(160,80,255,0.4);}

/* Passive node active banner */
.passive-banner{
  display:flex;align-items:center;gap:0.6rem;
  background:rgba(30,80,30,0.25);
  border:1px solid rgba(80,180,60,0.35);
  border-radius:4px;
  padding:0.4rem 0.8rem;
  margin-top:-0.1rem;
  font-size:0.72rem;
  color:var(--green3);
  font-style:italic;
}
.passive-icon{font-size:0.9rem;}
.passive-text{color:rgba(140,220,100,0.85);}

/* ── WORKBENCH ── */
.wb-cell{
  width:34px;height:34px;
  background:linear-gradient(135deg,#1a1006,#0e0904);
  border:1px solid #3a2808;
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  font-size:1.1rem;
  cursor:pointer;
  transition:border-color 0.12s,background 0.12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  box-sizing:border-box;
}
.wb-cell.has-item{border-color:#6a4a18;background:linear-gradient(135deg,#261808,#180e04);}
.wb-cell.has-item:hover{border-color:var(--gold);background:linear-gradient(135deg,#2e1e08,#1e1204);}
.wb-cell.wb-output{
  width:40px;height:40px;
  border-color:rgba(90,62,20,0.6);
  background:linear-gradient(135deg,#120e06,#0a0804);
}
.wb-cell.wb-output.has-item{border-color:var(--gold2);box-shadow:0 0 8px rgba(200,150,10,0.25);}
.wb-cell-qty{
  position:absolute;bottom:1px;right:2px;
  font-size:0.5rem;font-weight:bold;color:#ffe080;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000;
  line-height:1;pointer-events:none;
}
.wb-recipe{
  display:flex;align-items:center;gap:0.4rem;
  padding:0.28rem 0.4rem;
  border:1px solid rgba(90,62,20,0.25);
  border-radius:3px;
  background:linear-gradient(135deg,#14100a,#0e0b06);
  cursor:pointer;
  transition:border-color 0.12s,background 0.12s;
  flex-shrink:0;
}
.wb-recipe:hover{border-color:var(--gold);background:rgba(40,28,8,0.8);}
.wb-recipe.active-recipe{border-color:var(--gold2);background:rgba(50,36,8,0.8);}
.wb-recipe.locked-recipe{opacity:0.35;cursor:not-allowed;}
.wb-recipe-icon{font-size:1rem;flex-shrink:0;width:22px;text-align:center;}
.wb-recipe-info{flex:1;min-width:0;}
.wb-recipe-name{font-size:0.7rem;color:var(--tan);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wb-recipe-detail{font-size:0.58rem;color:var(--muted);margin-top:1px;}
.wb-recipe-out{font-size:0.65rem;color:var(--gold);flex-shrink:0;white-space:nowrap;}

/* ── EQUIPMENT TAB ── */
.equip-paper{
  display:flex;flex-direction:column;gap:3px;
  padding:0.4rem 0.3rem;align-items:center;
  flex:1;justify-content:center;
}
.equip-row{
  display:flex;gap:3px;align-items:center;justify-content:center;
}
.equip-slot{
  width:52px;height:52px;
  background:linear-gradient(135deg,#1a1006 0%,#0e0904 100%);
  border:1px solid #3a2808;
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  position:relative;cursor:default;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),inset 0 -1px 0 rgba(0,0,0,0.4);
  transition:border-color 0.12s,background 0.12s;
  overflow:hidden;
}
.equip-slot::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,200,80,0.04),transparent 70%);
  pointer-events:none;
}
.equip-slot:not(.empty-slot):hover{
  border-color:#6a4a18;
  background:linear-gradient(135deg,#22180a,#14100a);
  box-shadow:0 0 5px rgba(180,120,20,0.15),inset 0 1px 0 rgba(255,220,100,0.06);
}
.equip-slot.empty-slot{
  background:transparent;border-color:transparent;
  box-shadow:none;cursor:default;
}
.equip-slot.empty-slot::before{display:none;}
.equip-slot-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;pointer-events:none;
}
.equip-slot-inner svg{opacity:0.42;transition:opacity 0.12s;}
.equip-slot:not(.empty-slot):hover .equip-slot-inner svg{opacity:0.68;}
.equip-slot-label{
  font-size:0.37rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.04em;
  text-align:center;line-height:1;opacity:0.7;
}

/* ── TOOLBELT ── */
.toolbelt-slot{
  width:38px;height:38px;
  background:linear-gradient(135deg,#1e1408,#120e04);
  border:1px solid #5a3e14;
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  cursor:default;
  transition:border-color 0.12s,background 0.12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.toolbelt-slot.has-tool{
  border-color:#9a7030;
  background:linear-gradient(135deg,#2a1e08,#1a1204);
  box-shadow:inset 0 1px 0 rgba(255,220,100,0.07),0 0 4px rgba(180,120,20,0.2);
}
.toolbelt-slot.has-tool:hover{
  border-color:var(--gold2);
  box-shadow:0 0 8px rgba(200,150,10,0.35);
}
.toolbelt-slot-icon svg{width:26px;height:26px;display:block;}
.toolbelt-slot-label{
  position:absolute;bottom:1px;left:0;right:0;text-align:center;
  font-size:0.4rem;color:var(--muted);
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
  padding:0 2px;
  pointer-events:none;
}
/* ── GEM STORE MODAL ── */
#gemStoreModal .modal-box::before {
  background: linear-gradient(90deg, transparent, rgba(180, 80, 255, 0.5), transparent);
}
#gemStoreModal .modal-box {
  border-color: rgba(160, 80, 230, 0.5);
  box-shadow: 0 8px 40px rgba(120, 40, 200, 0.4);
}

/* Gem currency button pulse on hover */
#gemCurrencyBtn {
  transition: all 0.15s;
}

/* ── Offline Progress Modal ── */
.offline-modal-box {
  max-width: 420px;
  padding: 2rem;
  text-align: center;
}
.offline-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}
.offline-icon {
  font-size: 2.5rem;
  line-height: 1;
}
.offline-title {
  font-size: 1.4rem;
  color: var(--gold2, #f0c040);
  font-family: 'MedievalSharp', serif;
}
.offline-subtitle {
  font-size: 0.9rem;
  color: var(--text2, #b0a090);
  margin-top: 0.2rem;
}
.offline-skill-name {
  font-size: 0.85rem;
  color: var(--text2, #b0a090);
  margin-bottom: 1.2rem;
  font-style: italic;
}
.offline-stats {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.offline-stat {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border, #4a3a28);
  border-radius: 8px;
  padding: 0.7rem 1.2rem;
  min-width: 100px;
}
.offline-stat-val {
  font-size: 1.3rem;
  color: var(--gold2, #f0c040);
  font-weight: bold;
}
.offline-stat-label {
  font-size: 0.75rem;
  color: var(--text2, #b0a090);
  margin-top: 0.2rem;
}
.offline-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}
.offline-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  color: var(--text, #d0c0a0);
}
.offline-item.consumed {
  color: var(--text2, #b0a090);
  opacity: 0.7;
}
.offline-item-qty {
  color: var(--gold2, #f0c040);
  font-weight: bold;
  min-width: 2.5rem;
  text-align: right;
}

/* ── MAP HOTSPOTS ── */
#map-hotspots {
  position: fixed;
  /* same inset as the background: full viewport minus topbar and right panel */
  top: 62px;
  left: 0;
  right: 280px;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}
.map-zone {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.map-zone:hover {
  background: rgba(255, 200, 60, 0.12);
  border-color: rgba(200, 150, 10, 0.55);
}
.map-zone-label {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 0.65rem;
  color: rgba(255, 230, 140, 0.0);
  background: rgba(10, 6, 2, 0.0);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.15s, background 0.15s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.map-zone:hover .map-zone-label {
  color: rgba(255, 220, 100, 1);
  background: rgba(10, 6, 2, 0.75);
}

/* ── MAP NODES ── */
#map-hotspots {
  position: fixed;
  top: 62px;
  left: 0;
  right: 280px;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}
.map-node {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.15s;
}
.map-node:hover { transform: translate(-50%, -50%) scale(1.1); }
.map-node-icon {
  width: 38px; height: 38px;
  background: linear-gradient(180deg, rgba(30,20,5,0.92), rgba(15,10,2,0.95));
  border: 2px solid rgba(200,150,10,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.map-node:hover .map-node-icon,
.map-node.active-node .map-node-icon {
  border-color: rgba(255,200,60,1);
  box-shadow: 0 2px 12px rgba(200,150,10,0.6), 0 0 0 1px rgba(0,0,0,0.5);
}
.map-node-label {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 0.6rem;
  color: rgba(255,220,120,0.95);
  background: rgba(8,5,1,0.82);
  border: 1px solid rgba(140,100,20,0.5);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
}
/* Dual-skill nodes */
.map-node-dual-tabs {
  display: flex;
  gap: 2px;
  pointer-events: all;
}
.map-dual-btn {
  background: rgba(20,13,3,0.9);
  border: 1px solid rgba(120,85,15,0.6);
  border-radius: 3px;
  color: var(--text);
  font-size: 0.75rem;
  width: 22px; height: 18px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
}
.map-dual-btn.active {
  background: rgba(180,130,10,0.3);
  border-color: rgba(200,150,10,0.8);
}
.map-dual-btn:hover { background: rgba(180,130,10,0.2); }

/* ── ACTIVE SKILL TAB ── */
#rsbody-active { padding: 0; }
#active-skill-slot {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* Skill panels inside the Active tab always show */
#active-skill-slot .skill-panel { display: block !important; }
#active-skill-slot .panel-head { display: none; }
#active-skill-slot .panel { background: none; border: none; box-shadow: none; }


/* Hide all floating skill panels from the map — content lives in Active tab */
#main-game-inner .skill-panel,
#main-game-inner .game-grid { display: none !important; }

/* ══════════════════════════════════════════════════
   PETS PANEL
   ══════════════════════════════════════════════════ */
#pets-panel-inner {
  padding: 0.3rem;
}
#pet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.3rem 0.2rem;
}
.pet-card {
  background: linear-gradient(160deg, rgba(30,20,5,0.95), rgba(15,10,2,0.98));
  border: 1px solid rgba(120,85,20,0.4);
  border-radius: 6px;
  padding: 0.4rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: default;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pet-card.unlocked {
  border-color: rgba(200,150,20,0.7);
  box-shadow: 0 2px 8px rgba(200,140,10,0.2);
}
.pet-card.shiny.unlocked {
  border-color: rgba(180,80,255,0.8);
  box-shadow: 0 2px 12px rgba(160,60,240,0.35);
}
.pet-card.locked {
  opacity: 0.38;
  filter: grayscale(0.85);
}
.pet-card-svg {
  width: 52px; height: 52px;
}
.pet-card-svg svg { width: 52px; height: 52px; }
.pet-card-name {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 0.58rem;
  color: var(--gold);
  text-align: center;
  line-height: 1.2;
}
.pet-card.shiny.unlocked .pet-card-name {
  color: #c060ff;
}
.pet-card-skill {
  font-size: 0.52rem;
  color: var(--muted);
  text-align: center;
}
.pet-card-perk {
  font-size: 0.5rem;
  color: var(--gold2);
  text-align: center;
  line-height: 1.3;
  border-top: 1px solid rgba(120,85,20,0.25);
  padding-top: 0.2rem;
  width: 100%;
}
.pet-card.shiny.unlocked .pet-card-perk {
  color: #c080ff;
  border-top-color: rgba(160,60,240,0.3);
}
.pet-card-badge {
  position: absolute;
  top: 3px; right: 4px;
  font-size: 0.5rem;
  background: rgba(180,80,255,0.25);
  border: 1px solid rgba(180,80,255,0.5);
  border-radius: 3px;
  padding: 0 3px;
  color: #d090ff;
}
.pet-unlock-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(20,14,3,0.97), rgba(10,7,1,0.98));
  border: 2px solid rgba(200,150,20,0.8);
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  color: var(--gold);
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 0.82rem;
  z-index: 9999;
  pointer-events: none;
  animation: toastIn 0.3s ease, toastOut 0.4s ease 3.6s forwards;
  box-shadow: 0 4px 20px rgba(200,140,10,0.4);
  text-align: center;
}
.pet-unlock-toast.shiny {
  border-color: rgba(180,80,255,0.9);
  box-shadow: 0 4px 24px rgba(160,60,240,0.5);
  color: #d090ff;
}
@keyframes toastIn {
  from { opacity:0; transform: translateX(-50%) translateY(20px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity:1; }
  to   { opacity:0; }
}