/* === Global Reset === */
html, body {
  height: 100%;
  margin: 0;
}

.pinnacle-items { list-style: none; margin: 0; padding: 0; }
.pinnacle-items li { list-style: none; margin: 0 0 8px 0; padding: 0; }
.pinnacle-items li::marker { content: none; }

/* --- Layout tunables --- */
:root{
  --pill-w: 48px;  
  --pill-gap: 12px; 
  --app-bg:      #0f1115;
  --app-surface: #141720;
  --app-muted:   #1b1f2a;
  --app-ring:    #2b3040;
  --app-text:    #e8eefb;
  --app-sub:     #9fb0d8;
  --app-accent:  #5aa9ff;
  --special-w: 360px;   /* left column width (Special Talents) */
  --augment-w: 320px;   /* right column width (Augment Panel) */
  --tree-gap: 4px;     /* gap between columns */
  --scrollbar-size: 100px;           /* thickness/height of horizontal bar */
  --scrollbar-thumb: #BDA000;       /* gold thumb */
  --scrollbar-thumb-hover: #FFD24D; /* brighter gold on hover */
  --scrollbar-track: #1a1a1a;       /* dark track */
  --special-top-nudge: -6px;   
  --zone-thumb-h: 150px;
  --zone-card-w: 240px;   
  --zone-thumb-h: 140px; 

}

/* Item Rarities*/
.item-name { font-weight: 700; }
.rarity-poor   { color: #9d9d9d; } 
.rarity-common  { color: #ffffff; }
.rarity-uncommon{ color: #1eff00; } 
.rarity-rare    { color: #0070dd; }
.rarity-epic    { color: #a335ee; } 

/* Highlight utilities used across the app */
.highlight-gold  { color: #BDA000 ; font-weight: 700; }
.highlight-green { color: #4caf50 ;  font-weight: 700; }
.highlight-blue  { color: #0018B5 ;  font-weight: 700; }
.highlight-lblue  { color: #4da6ff ;  font-weight: 700; }
.highlight-purple  { color: #830cd3 ;  font-weight: 700; }
.highlight-red   { color: #f44336 ; }

p.Larger { font-size: 18px;
}
p.Bolder {font-weight: bold;
}

html, body{
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(90,169,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 50%),
    var(--app-bg);
  color: var(--app-text);
}

/* Class selection screen paneling */
#class-screen{
  background: transparent;          
  color: var(--app-text);
}

#class-screen h1{
  color: var(--app-text);
  text-shadow: 0 0 12px rgba(90,169,255,.15);
}

#class-select button,
#back-btn,
#controls button,
#reset-btn{
  background: var(--app-muted);
  border: 1px solid var(--app-ring);
  color: var(--app-text);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
#class-select button:hover,
#back-btn:hover,
#controls button:hover,
#reset-btn:hover{
  filter: brightness(1.08);
  border-color: var(--app-accent);
  box-shadow:
    0 0 0 2px rgba(90,169,255,.25),
    0 6px 20px rgba(0,0,0,.35);
}


/* Ensure horizontal scroll is on (you already have this in Option A) */
#tree-container {
  overflow-x: auto;
  overscroll-behavior-x: contain;

  /* Firefox scrollbar styling */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: auto; /* 'auto' is thicker; Firefox can't set exact px height */
}

/* WebKit (Chrome, Edge, Safari) — exact size + visuals */
#tree-container::-webkit-scrollbar {
  height: var(--scrollbar-size);  /* make it taller */
  background: var(--scrollbar-track);
}

#tree-container::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 4px solid var(--scrollbar-track);  
}

#tree-container::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

#tree-container::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 10px;
}

#tree-container::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* === Class Selection Screen === */
#class-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
  height: 100vh;
  width: 100vw;
  text-align: center;
}

#class-screen h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: gold;
}

#class-select {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

#class-select button {
  font-size: 1.2em;
  padding: 12px 20px;
  border-radius: 8px;
  border: 2px solid #666;
  background: #222;
  color: #eee;
  cursor: pointer;
  transition: all 0.2s ease;
}

#class-select button:hover {
  border-color: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

#class-name,
#points-info {
  margin-left: 36px;   /* tweak to taste: 16–48px */
}
#points-info {
  display: inline-block;
  margin-left: 24px;   /* space between title and stats */
  vertical-align: baseline;
}

#back-btn {
  margin-bottom: 20px;
  font-size: 1em;
  padding: 8px 16px;
  border-radius: 6px;
  border: 2px solid #666;
  background: #222;
  color: #eee;
  cursor: pointer;
  transition: all 0.2s ease;
}

#back-btn:hover {
  border-color: #f44336;
  box-shadow: 0 0 8px rgba(244, 67, 54, 0.6);
}

#controls {
  margin-top: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 12px; /* spacing between buttons */
}

#controls button,
#reset-btn {
  padding: 8px 12;
  height: 40px;
  font-size: 1em;
  border-radius: 6px;
  border: 2px solid #666;
  background: #222;
  color: #eee;
  cursor: pointer;
  transition: all 0.2s ease;
}

#controls button:hover {
  border-color: gold;
  box-shadow: 0 0 6px 2px rgba(255,215,0,0.6);
}

#reset-btn:hover {
  border-color: #f44336;
  box-shadow: 0 0 6px 2px rgba(244, 67, 54, 0.6);
  color: #f44336;
}

/* === Talent Tree Wrapper Layout === */
#tree-container {
  display: flex;
  flex-wrap: nowrap;       /* keep a single row */
  justify-content: flex-start; /* anchor row at the left edge */
  gap: 20px;
  overflow-x: auto;        /* enable horizontal scrolling if it overflows */
  overscroll-behavior-x: contain;
  padding: 0 12px;         /* small padding so content isn't flush with edges */
}

.talent-tree-wrapper{
  display: grid;
  overflow: hidden;
  flex-wrap: wrap;
  flex: 0 0 auto;
  grid-template-columns: var(--special-w) 1fr var(--augment-w);
  gap: var(--tree-gap);
  align-items: start;
  background: transparent;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  grid-template-columns: var(--special-w) 1fr var(--augment-w);
  transition: grid-template-columns 180ms ease;
}

.talent-tree-wrapper::before{
  content:"";
  position: absolute;
  inset: 0;
  background-image: var(--tree-bg, none);
  background-size: cover;          /* or 'contain' if you prefer */
  background-position: var(--tree-bg-pos, center center);
  background-repeat: no-repeat;
  opacity: var(--tree-bg-opacity, 0.35); /* tweak for readability */
  z-index: 0;                       /* behind content */
  pointer-events: none;             /* ignore clicks */
}

/* Gentle dark vignette under content, but above the image */
.talent-tree-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0.5; /* between ::before bg (0) and content (1) */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.10) 20%,
      rgba(0,0,0,.10) 80%,
      rgba(0,0,0,.35) 100%
    );
}

.talent-tree-wrapper > *{
  position: relative;
  z-index: 1;
}

.talent-tree-wrapper.collapsed-special .special-tree { 
  width: 0; overflow: hidden; 
.talent-tree-wrapper.collapsed-special {
  grid-template-columns: 0 1fr var(--augment-w); 
  column-gap: 0; /* remove the leftover gap */
}

}
.talent-tree-wrapper.collapsed-augment .augment-panel { width: 0; overflow: hidden; }

/* Collapsed states (open by default; these classes hide a side) */
.talent-tree-wrapper.collapsed-special{  grid-template-columns: 0 1fr var(--augment-w);
}
.talent-tree-wrapper.collapsed-augment{  grid-template-columns: var(--special-w) 1fr 0;
}
.talent-tree-wrapper.collapsed-special.collapsed-augment{
  grid-template-columns: 0 1fr 0;
}
.talent-tree-wrapper.collapsed-special .tree-main { margin-left: var(--tree-gap); }

/* Make side columns clip when collapsed */
.special-tree, .augment-panel{ overflow: hidden; }
/* also remove any residual border/padding so nothing peeks through */
.talent-tree-wrapper.collapsed-special .special-tree {
  width: 0;             /* you already have this */
  overflow: hidden;     /* you already have this */
  padding: 0;           /* new */
  border: 0 !important; /* new: out-prioritize later border-color rules */
  margin: 0;            /* new: belt-and-suspenders */
}


/* Outer container that *allows* the title pill to bleed upward */
.tree-shell{
  position: relative;
  overflow: hidden;    /* important: never clip the pill */
  display: inline-block;
  vertical-align: top;
}



/* Toggle buttons */
.panel-toggle{
  position: absolute;
  top: 0px;
  z-index: 5;
  width: 8px;
  height: 8px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid #666;
  background: #222;
  color: #eee;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .12s;
}
.panel-toggle:hover{
  border-color: gold;
  box-shadow: 0 0 6px 2px rgba(255,215,0,.3);
}
.panel-toggle:active{ transform: scale(0.96); }

/* Positions */
.panel-toggle.special{ left: 8px; }   /* controls left panel */
.panel-toggle.augment{ right: 8px; }  /* controls right panel */

/* Special panel aligns 1:1 with the main grid rows */
.special-tree{
  padding: 4px;
  display: grid;
  border: 2px solid transparent;
  grid-template-columns: 1fr;
  grid-auto-rows: 120px;   /* will be synced from JS */
  row-gap: 10px;           /* will be synced from JS */
  position: relative;
  overflow: hidden;
  top: var(--special-top-nudge); 
}

/* Special Talent Nodes */
.special-talent-node {
  background: #111;
  border: 2px solid #666;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 10px;
  margin: 0;
  text-align: center;
  transition: all .2s ease;
  color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;          /* fill the grid row height (120px) */
  box-sizing: border-box;
}
.special-talent-node.disabled { 
  opacity: .5; 
  filter: grayscale(100%);
 }

.special-talent-node.active   { 
  border-color: gold; 
  box-shadow: 0 0 8px 2px rgba(255,215,0,.6); 
  color: gold; 
}

.special-talent-node .name { 
  font-weight: bold;
  flex: 0 0 auto;
   margin-bottom: 4px; 
  }

.special-talent-node .description { 
  font-size: .9em; 
  line-height: 1.2em;
  flex: 1 1 auto;        /* takes remaining space */
  min-height: 0;         /* IMPORTANT: allow flex child to shrink */
  overflow-y: auto;      /* scroll only when needed */
  padding-right: 6px;    /* room for scrollbar thumb */
  scrollbar-color: var(--scrollbar-thumb);
  scrollbar-width: thin;   
 }
 .special-talent-node .description::-webkit-scrollbar{
  width: 10px;
}
.special-talent-node .description::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 8px;
}
.special-talent-node .description::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
  
}
.special-talent-node .description::-webkit-scrollbar-track{
  background: transparent;
}

@keyframes highlight-activation {
  0%   { box-shadow: 0 0 0 0 gold; transform: scale(1); }
  50%  { box-shadow: 0 0 10px 4px #4caf50; transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 gold; transform: scale(1); }
}
.special-talent-node.highlight { animation: highlight-activation 1s ease forwards; }

/* === Middle column: Main Tree === */
.tree-main {
  position: relative;
  overflow: hidden;  /* allow arrows/popovers if needed */
  background: #111111;
  border: 2px solid #444;
  border-radius: 8px;
  padding: 4px;
  padding-top: 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* Make the special title and any nested tags inherit the color we set in JS */
.special-talent-node .name,
.special-talent-node .name * {
  color: inherit !important;
}


.talent-tree {
  align-content: start;
  display: grid;
  grid-template-columns: repeat(4, 72px);
  grid-auto-rows: 120px; /* taller rows for vertical breathing room */
  gap: 10px;
  min-height: 700px;
  justify-content: center;
}

.talent-node {
  text-align: center;
  cursor: pointer;
  color: white;
  position: relative;
}
.talent-node.disabled { opacity: 0.4; }
.talent-node img { display: block; margin: 0 auto; border-radius: 8px; }
.talent-name { font-weight: 700; color: gold; margin-top: 6px; font-size: 0.95em; }

/* === Right column: Augments === */
.augment-panel{
  position: relative;         /* IMPORTANT for rail positioning */
  font-size: 0.85em;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border: 2px solid #444;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  min-width: var(--augment-w); /* keep width stable */
  overflow: hidden;
  min-height: 0;
}

.augment-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}

.augment-title {
  font-weight: bold;
  color: gold;
  margin-bottom: 4px;
  font-size: 0.9em;
}

.augment-choice {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* Spellbreaker Augmetns */
.augment-choice.selected-archon { border-color:#4da6ff; box-shadow:0 0 8px 2px rgba(77,166,255,.7); }
.augment-choice.selected-pyretic{ border-color:#ff4d4d; box-shadow:0 0 8px 2px rgba(255,77,77,.7); }
.augment-choice.selected-sage  { border-color:#4dff88; box-shadow:0 0 8px 2px rgba(77,255,136,.7); }

.augment-node {
  padding: 2px 6px;
  border: 1px solid #666;
  border-radius: 4px;
  font-size: 0.8em;
  background: #222;
  cursor: pointer;
  white-space: nowrap;
}
.augment-node.selected {
  border: 2px solid #4caf50;
  background: #1a1a1a;
}
.augment-node.disabled {
  opacity: 0.4;
  pointer-events: none;
}
/* static anchored popover to the right of a talent */

/* use your existing button styles for options */
.augment-node.choice { white-space: nowrap; }

/* === Tooltip === */
.tooltip {
  position: absolute;
  background: #111;
  color: #eee;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #555;
  max-width: 300px;
  pointer-events: none;
  white-space: normal;
  z-index: 1000;
  display: none;
}

.tooltip.visible { display: block; }

/* === Arrows === */
.arrow-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
/* tooltip base + two regions */
#tooltip { color: #eee; }
#tooltip .tt-title {
  font-weight: 700;
  color: rgb(76, 189, 1) !important;   /* ensure gold title even if body has colors */
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Default tooltip title */
#tooltip .tt-title { font-weight: 700; color: #eee; margin-bottom: 6px; line-height: 1.2; }
/* If the hovered talent has augments, make the title gold */
#tooltip.augmentable .tt-title { color: #BDA000; }

/* On-grid visual hint for talents that have augments */
.talent-node.has-augment { position: relative; }
.talent-node.has-augment img { outline: 3px dashed rgba(206, 177, 15, 0.55); outline-offset: -2px; border-radius: 8px; }
.talent-node.has-augment::after {
  content: "✦";
  position: absolute; top: -4px; right: -5px;
  font-size: 14px; color: #BDA000; text-shadow: 0 0 6px rgba(59, 167, 17, 0.459);
}

.tree-main,
.special-tree,
.augment-panel,
.talent-tree-wrapper {
  box-sizing: border-box;
  background: rgba(15,19,27,0.35);     /* subtle film; tune this */
  border-color: var(--app-ring);
}
/* Clip any inner shadows/edges to the wrapper’s rounded corners */
.talent-tree-wrapper {
  position: relative;
  overflow: hidden;
}
.talent-tree-wrapper > .spellbook-panel {
  flex: 0 0 100%;          /* take the whole row in flex layouts */
  align-self: stretch;     /* fill cross-axis */
}
/* Keep the augment panel content contained */
.augment-panel {
  overflow: hidden;      /* not visible */
  /* optional but recommended: match tree-main's top padding for perfect top alignment */
  /* padding-top: 4px; */
}
/* body remains free to use rich HTML colors & spans */
#tooltip .tt-body [style] { color: inherit !important; background: transparent !important; }

#tooltip.augmentable .tt-title {
  color: #BDA000 !important;  /* gold for augmentable talents */
}

/* Hide talent names on the grid; keep ranks (cur/max) visible */
.tree-main .talent-node .talent-name,
.tree-main .talent-node .talent-title,
.tree-main .talent-node .name,
.tree-main .talent-node .title {
  display: none !important;
}

/* If a CSS pseudo-element is injecting names, kill it */
.tree-main .talent-node::before {
  content: none !important;
}

/* Ensure highlight colors always win inside the tooltip */
#tooltip .highlight-gold  { color: #BDA000 !important; font-weight: 700; }
#tooltip .highlight-green { color: #4caf50 !important;  font-weight: 700; }
#tooltip .highlight-blue  { color: #0018B5 !important;  font-weight: 700; }
#tooltip .highlight-lblue  { color: #7184ff !important;  font-weight: 700; }
#tooltip .highlight-purple  { color: #830cd3 !important;  font-weight: 700; }
#tooltip .highlight-red   { color: #f44336 !important; }

/* And in the Special panel (both old + new class names) */
.special-node .highlight-gold,
.special-talent-node .highlight-gold  { color: #BDA000 !important; font-weight: 700; }
.special-node .highlight-green,
.special-talent-node .highlight-green { color: #4caf50 !important;  font-weight: 700; }
.special-node .highlight-blue,
.special-talent-node .highlight-blue  { color: #0018B5 !important;  font-weight: 700; }
.special-node .highlight-red,
.special-talent-node .highlight-red   { color: #f44336 !important; }
.special-node .highlight-purple,
.special-talent-node .highlight-purple   { color: #830cd3 !important; font-weight: 700; }

/* === Talent Tree Title Card === */
/* === Talent Tree Title Card (floats above) === */
.tree-main {

  padding-top: 0;          /* no vertical push */
}

.tree-title-card{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -22px;           /* lift above the wrapper; tweak to taste */
  padding: 6px 14px;
  border: 1px solid #777;
  border-radius: 999px;
  background: #111;
  color: #6d79ff;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 0 8px rgba(0,0,0,.5);
  z-index: 6;
  pointer-events: none;
}


/* === AUGMENTS: canonical styles === */

/* Panel container */
.augment-panel{
  --aug-pad: 10px; position: relative;
  position: relative;        /* rail anchors to this */
  font-size: 0.85em;
  background: #111;
  border: 2px solid #444;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  min-width: var(--augment-w);
  overflow: hidden;          /* keep content inside wrapper ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~_____________________ This one was Hidden*/
  min-height: 0;             /* allow JS to set height */
  box-sizing: border-box;
}

/* Rail fills the whole panel; items are absolutely positioned on it */
.augment-rail{
  position: relative; 
  padding-left: 0;
  height: 100%; 
  inset: 0;                  /* top/right/bottom/left: 0 */
  pointer-events: none;      /* children re-enable as needed */
  z-index: 0;
}

/* Common positioning for rail items (Y is set in JS; we center on Y) */
.augment-pill,
.augment-card{
  
  position: absolute;
  left: var(--aug-pad);
  right: var(--aug-pad);
  width: auto;                /* no hard width */
  max-width: none;
  box-sizing: border-box;     /* include padding/border in width */
  transform: translateY(-50%);
  left: 0;
  pointer-events: auto;      /* clickable */
}

#reset-btn.flash {
  box-shadow: 0 0 30px rgb(138, 15, 6); transition: box-shadow 0.2s ease;
}

/* Small label on the left */
.augment-pill{
  display: none;
/*  width: var(--pill-w);
  position: absolute;
  padding: 4px 6px;
  left: 0px;
  border: 1px solid #666;
  border-radius: 4px;
  background: #222;
  font-size: 0.8em;
  text-align: center;
  z-index: 1;               
  padding-right: 20px;       /* room for the × button */
}

/* Info / choice card to the right */
.augment-card{
  position: absolute;
  left: 0;
  width: 100%;
  background: #111;
  /*  left: var(--aug-pad); don't like this... */
  border: 1px solid #777;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  z-index: 2;                /* above pill */
}

/* Choice mode: full width column of compact buttons */
.augment-card.choice{
 
  right: var(--aug-pad);
  z-index: 6;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.augment-card .title{
  font-weight: 700;
  margin-bottom: 4px;
}
/* give the card a bit of breathing room on the right edge */
.augment-card { padding-right: 24px; }

.augment-card.choice .augment-node.choice{
  display: inline-block;
  width: auto;
  padding: 4px 8px;
}

/* Locked/talent-gated card look */
.card.locked {
  opacity: .55;
  filter: grayscale(.25) saturate(.8);
  position: relative;            /* ensure overlay positions correctly */
}

.card.locked .meta,
.card.locked .icon {
  pointer-events: none;          /* avoid accidental clicks, rank toggles, etc. */
}

/* The existing overlay class; keep or tweak if you already have one */
.lock{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.65));
  color:#fff; font-weight:700; letter-spacing:.3px;
}

.lock .btn{ pointer-events:auto; } /* allow the "Mark unlocked" button */


/* Action row on selected card */
.augment-actions{
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.augment-reset{
  padding: 3px 8px;
  font-size: 0.8em;
  border: 1px solid #666;
  border-radius: 4px;
  background: #222;
  color: #eee;
  cursor: pointer;
}
.augment-reset:hover{
  border-color: #f44336;
  color: #f44336;
}

/* Tiny “×” reset button on the pill */
.augment-pill-close{
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  line-height: 14px;
  border-radius: 50%;
  border: 1px solid #666;
  background: #222;
  color: #eee;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.augment-pill-close:hover{
  border-color: #f44336;
  color: #f44336;
}
.augment-pill:empty { display: none; }
/* small red × in the top-left of the augment info card */
.augment-card{
  position: absolute;           /* already set; reaffirm for positioning */
}

.augment-card-close{
  position: absolute;
  top: 4px;
  left: auto;
  right: 4px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  border-radius: 50%;
  border: 1px solid #666;
  background: #222;
  color: #f44336;               /* red × */
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.augment-card-close:hover{
  border-color: #f44336;
  color: #ff6b6b;
}
/* === Augment Choice: rich option cards === */

/* Choice card should use natural height and scroll internally only if needed */
.augment-card.choice{
  transform: none;               /* override the translateY centering */
  max-height: calc(100% - 16px); /* expand up to panel height */
  overflow-y: auto;              /* scroll only if taller than panel */
  padding-right: 10px;           /* keep text clear of scrollbar */
}

/* Each option is a compact card */
.augment-option{
  width: 100%;
  border: 1px solid #555;
  border-radius: 6px;
  background: #1a1a1a;
  padding: 8px;
  box-sizing: border-box;
}
.augment-option + .augment-option{ margin-top: 8px; }

.augment-option.selectable{ cursor: pointer; }
.augment-option.selectable:hover{
  border-color: #888;
  box-shadow: 0 0 6px rgba(0,0,0,0.35);
}

/* Header: badge + title */
.augment-option .opt-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.augment-option .opt-title{
  font-weight: 700;
  color: #eee;
}

/* Type badge colors (reuse your earlier palette) */
.opt-badge{
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.75em;
  border: 1px solid #555;
  background: #1b1b1b;
  color: #ddd;
}

/* Rich description area: readable on dark */
.opt-desc{
  color: #eee;
  line-height: 1.25;
}

/* Neutralize legacy inline styles inside descriptions */
.opt-desc [style],
.opt-desc font[color]{
  color: inherit !important;
  background: transparent !important;
}

/* Keep your highlight helpers available here too */
.opt-desc .highlight-gold  { color:#BDA000 !important; font-weight:700; }
.opt-desc .highlight-green { color:#4caf50 !important;  font-weight:700; }
.opt-desc .highlight-blue  { color:#0018B5 !important;  font-weight:700; }
.opt-desc .highlight-red   { color:#f44336 !important; }

/* Select button inside each option */
.opt-actions{
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.augment-select-btn{
  padding: 3px 8px;
  font-size: 0.8em;
  border: 1px solid #666;
  border-radius: 4px;
  background: #222;
  color: #eee;
  cursor: pointer;
}
.augment-select-btn:hover{
  border-color: #BDA000;
  color: #BDA000;
}

/* Disabled (limit reached) */
.augment-option.disabled{
  opacity: 0.5;
  pointer-events: none;
}

/* --- Augment description: readable on dark + allow rich HTML --- */
.augment-card { color: #eee; }                 /* default text color */
.augment-card .effect { line-height: 1.25; }

/* Type-colored badge (in the choice list) */
.opt-badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75em;
  border: 1px solid #555;
  background: #1b1b1b;
  color: #ddd;
  text-shadow: 0 0 4px rgba(0,0,0,.4);
}
.opt-title:empty { display: none; }


/* Strip inline color/background coming from legacy markup */
.augment-card .effect [style],
.augment-card .effect font[color]{
  color: inherit !important;
  background: transparent !important;
}

/* Ensure your highlight classes still pop inside augment cards */
.augment-card .effect .highlight-gold  { color: #BDA000 !important; font-weight: 700; }
.augment-card .effect .highlight-green { color: #4caf50 !important;  font-weight: 700; }
.augment-card .effect .highlight-blue  { color: #0018B5 !important;  font-weight: 700; }
.augment-card .effect .highlight-red   { color: #f44336 !important; }

/* Badges (inside choice list) */

/* Selected left pill */


/* Defensive: if a blanket color rule exists somewhere */
.augment-panel .opt-badge,
.augment-panel .augment-pill { color: inherit; }


/* Selected left pill */

/* If any global text rule is still winning, neutralize it locally */
.opt-badge, .augment-pill { color: inherit; } /* must remain BEFORE the rules above */

/* Center icon + rank inside each tile */
.tree-main .talent-node{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tree-main .talent-node img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

@keyframes maxPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,210,77,.45); }
  100% { box-shadow: 0 0 0 10px rgba(255,210,77,0); }
}
.tree-main .talent-node.maxed img {
  outline: 2px solid #ffd24d;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255,210,77,.25);
  animation: maxPulse .6s ease-out;
}

/* ===== Main tree unlock pulse (generic) ===== */
@keyframes treePulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-color, rgba(189,160,0,.55)); }
  100% { box-shadow: 0 0 0 24px rgba(0,0,0,0); }
}

.tree-main.pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow:
    0 0 0 3px var(--pulse-color, rgba(189,160,0,.55)),
    0 0 18px var(--pulse-color, rgba(189,160,0,.55));
  animation: treePulse .9s ease-out;
}

/* Final arrow layer */
.arrow-layer {
  position: absolute;
  inset: 0;
  z-index: 1;           /* under tooltips, above background */
  pointer-events: none; /* arrows never catch clicks */
  background: transparent;
}

.arrow-layer line {
  stroke-width: 3;
}

.arrow-layer line.arrow-active {
  stroke: #BDA000;                          /* gold */
  filter: drop-shadow(0 0 3px rgba(189,160,0,.6));
}

.arrow-layer line.arrow-inactive {
  stroke: #666;
  stroke-dasharray: 6 6;
  opacity: .9;
}

/* Header strip lives INSIDE the wrapper (no clipping) */
.talent-tree-wrapper.headerized .tree-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  /* center the pill without affecting layout below */
  display: flex;
  align-items: center;
  justify-content: center;

  height: 34px;            /* must match HEADER_H in JS */
  pointer-events: none;    /* decorative only */
}

/* Optional: if your wrapper has a visible border and you want some breathing room */
.talent-tree-wrapper.headerized .tree-header .tree-title-card{
  /* You can tweak font/size here if desired */
  white-space: nowrap;
}


/* Make the horizontal scrollbar appear ONLY when needed, no gutter reservation */
#tree-container {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: auto !important;   /* ensure no permanent gutter */
}

/* Optional (hide scrollbars entirely; uncomment if you prefer a clean look)
#tree-container { -ms-overflow-style: none; scrollbar-width: none; }
#tree-container::-webkit-scrollbar { display: none; }
*/

/* Header lives INSIDE each wrapper so nothing clips */
.talent-tree-wrapper.headerized .tree-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;                 /* must match HEADER_H in JS */
  pointer-events: none;
}

/* Spellbook Panel Styles */

/* Re-position the Spellbook toggle */

/* (Optional) a little hover polish */
.panel-toggle.spellbook:hover {
  opacity: 1;
}

.spell-entry {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 16px;
  display: block; /* ensure it behaves like a block in multi-column flow */
}
.spell-icon {
  width: 40px;
  height: 40px;
}

.spell-icon img {
  width: 100%;
  height: 100%;
}

.glow-border {
  border: 2px solid gold;
  box-shadow: 0 0 6px gold;
}

/* base icon frame */
.talent-node img {
  display:block;
  width:64px; height:64px;
  border:2px solid #555;            /* default frame */
  border-radius:10px;
  background:#000;
  box-shadow: 0 0 0 1px #000 inset; /* slight inner edge */
}

/* not chosen yet (0/?) — gray/silver outline */
.talent-node.unspent img {
  border-color: #8a8a8a;            /* silver/gray */
  box-shadow: 0 0 0 1px #000 inset, 0 0 6px rgba(160,160,160,.25);
  filter: none;                      /* keep the icon colored */
}

/* partially invested (optional) */
.talent-node.invested img {
  border-color: #b5b5b5;
}

/* maxed — gold frame & soft glow (like your screenshot) */
.talent-node.maxed img {
  border-color: #f2c94c;
  box-shadow: 0 0 0 1px #000 inset, 0 0 10px rgba(242,201,76,.6);
}

/* disabled by gating/dependency — dim it */
.talent-node.disabled img {
  border-color: #3f3f3f;
  filter: grayscale(60%) brightness(.8);
  box-shadow: 0 0 0 1px #000 inset;
}


.spell-info {
  flex: 1;
}

.spell-name {
  font-weight: bold;
  font-size: 15px;
}

.spell-meta {
  font-size: 13px;
  color: #aaa;
}

.spell-description {
  font-style: italic;
  font-size: 13px;
}

.spell-ranks {
  font-size: 12px;
  color: #88f;
}

/* Tooltip styles */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-box {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 110%;
  left: 0;
  width: 260px;
  background-color: #111;
  color: #f1f1f1;
  text-align: left;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid gold;
  box-shadow: 0 0 10px #000;
  font-size: 13px;
  z-index: 100;
  transition: opacity 0.3s;
  white-space: pre-wrap;
}

.tooltip-wrapper:hover .tooltip-box {
  visibility: visible;
  opacity: 1;
}

/* Temp fix */
.spellbook-panel {
  border: 2px dashed red;
}

#spellbook-tabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 10px;
}

#spellbook-content {
  border: 1px solid cyan;
  padding: 10px;
}

/* Make sure inner borders and separators look tidy in columns */
.spell-entry + .spell-entry {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
 
/* Root panel in the popup */
#spellbook-root {
  width: calc(3 * 300px + 2 * 22px); /* 3 cards + 2 gaps */
  margin: 0 auto;
  overflow-x: auto;                  /* scroll if window narrower */
}

/* Tabs row stays on top */
#spellbook-tabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* ============= 3-column layout ============= */
#spellbook-content.spellbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 300px); /* exactly 3 fixed columns */
  gap: 18px 22px;
  align-items: start;
}

/* Spell cards should look good inside a grid cell */


/* Tidy separation if you have an internal hr/divider */


.spell-entry .spell-icon img {
  width: 44px;
  height: 44px;
  display: block;
}

/* Optional polish */
.spell-entry .spell-name { font-weight: 700; }
.spell-entry .spell-meta { opacity: 0.85; }
.spell-entry .spell-description em { opacity: 0.9; }

/* Apply to the whole popup window */
html, body {
  /* So the window uses this scrollbar */
  scrollbar-gutter: stable both-edges; /* nicer layout when scrollbars appear */
}

/* Width & track */
::-webkit-scrollbar {
  width: 14px;               /* make it larger */
  height: 14px;              /* horizontal bar size */
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: #0c0c0c;       /* dark track */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  border-radius: 10px;
}

/* Thumb (draggable handle) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e8c963, #bda000); /* gold gradient */
  border: 3px solid #0c0c0c;  /* creates a gap from track; also increases visual thickness */
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 0 6px rgba(189,160,0,.45);
}

/* Hover/active states */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f2d978, #c9a600);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #ffd766, #d2ad00);
}

/* Use both to ensure visibility; Firefox picks these up */
* {
  scrollbar-width: auto; /* 'thin' or 'auto' */
  scrollbar-color: #c9a600 #0c0c0c; /* thumb color, track color */
}

/* Labels and small text */
.talent-name,
.special-talent-node .name { color: #eedd86; }      /* warm gold accents */
.special-talent-node .description { color: var(--app-text); }
.highlight-gold { color: #eedd86 !important; }

/* Panel toggle buttons */
.panel-toggle{
  background: var(--app-muted);
  border: 1px solid var(--app-ring);
  color: var(--app-text);
}

.panel-toggle:hover{
  border-color: var(--app-accent);
  box-shadow: 0 0 0 2px rgba(90,169,255,.25);
}

/* Chip variants */
.chip.cost.mana   { border-color:#4da6ff; color:#cfe6ff; background:rgba(77,166,255,.10); }
.chip.cost.rage   { border-color:#ff4d4d; color:#ffd6d6; background:rgba(255,77,77,.10); }
.chip.cost.energy { border-color:#ffd24d; color:#fff3cf; background:rgba(255,210,77,.10); }

/* Talent source emphasis (gold outline) */
.chip.source-talent{
  border-color:#BDA000;
  box-shadow: inset 0 0 0 1px rgba(189,160,0,.35);
  color:#ffeaa3;
}

.desc .hl-blue{color:#4da6ff}
.desc .hl-red{color:#ff4d4d}
.desc .hl-gold{color:#ffd24d}
.desc .hl-green{color:#4dff88}

.opt-badge { border: 1px solid currentColor; padding: 2px 6px; border-radius: 8px; }

/* Two-column layout for the class select screen */
.class-select-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 24px;
  align-items: start;
}

/* The “talent-like” info panel */
.class-info {
  position: relative;
  padding: 16px 16px 18px;
  border: 1px solid rgba(189, 160, 0, 0.45);  /* gold-ish like your highlights */
  border-radius: 12px;
  background: rgba(15, 18, 22, 0.65);         /* semi-transparent dark */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 6px 22px rgba(0,0,0,0.45),
    0 0 18px rgba(189, 160, 0, 0.18);          /* soft outer glow */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Title styling to match your gold headings */
.class-info__title {
  font-weight: 700;
  letter-spacing: .4px;
  color: #BDA000;                              /* same gold you use for accents */
  margin-bottom: 10px;
}

/* Body copy (same line-height / color as your tree panels) */
.class-info__body {
  color: #cfd7df;                              /* readable soft light text */
  line-height: 1.45;
  font-size: 0.95rem;
}

.class-info__body p { margin: 0 0 10px; }

/* Keep your existing “Select a class” area untouched; add a little spacing */
.class-pick__title { margin: 0 0 8px; }

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .class-select-layout {
    grid-template-columns: 1fr;
  }
}

.site-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid rgba(189,160,0,.25);
  background: rgba(15,18,22,.75); backdrop-filter: blur(4px);
}
.nav-logo { font-weight:800; color:#BDA000; text-decoration:none; }
.nav-links a { color:#cfd7df; text-decoration:none; margin-left:16px; }
.nav-links a:hover { color:#fff; }

.app-root { padding:16px; }

.panel-like {
  position:relative;
  padding:16px;
  border:1px solid rgba(189,160,0,.45);
  border-radius:12px;
  background: rgba(15,18,22,.65);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4) inset,
    0 6px 22px rgba(0,0,0,.45),
    0 0 18px rgba(189,160,0,.18);
}
.panel-like h2 { color:#BDA000; margin:0 0 8px; }

/* MAPS */
/* --- Maps pane --- */
.pane.maps-pane { padding: 16px 16px 24px; }

/* Responsive grid of cards */
.maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* Map card matches your rounded/glow aesthetic */
.map-card {
  display: flex;
  flex-direction: column;
  background: rgba(18,18,24,0.7);
  border: 1px solid rgba(189,160,0,0.35);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(189,160,0,0.12);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.map-card:hover {
  transform: translateY(-1px);
  border-color: rgba(189,160,0,0.6);
  box-shadow: 0 0 22px rgba(189,160,0,0.18);
}
.map-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0d0f12;
}
.map-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.map-meta {
  padding: 10px 12px 12px;
}
.map-title {
  font-weight: 700;
  color: #e9e6ff;
  margin-bottom: 6px;
}
.map-desc {
  font-size: 0.9rem;
  color: #b9b7c9;
  line-height: 1.25rem;
}

/* Lightbox */
.lightbox { 
  position: fixed; inset: 0; display: none;
}
.lightbox.open { display: block; }
.lightbox .lb-backdrop {
  position: absolute; inset: 0; 
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}
.lightbox .lb-content {
  position: absolute; inset: 4% 3%;
  display: flex; flex-direction: column;
  background: rgba(18,18,24,0.9);
  border: 1px solid rgba(189,160,0,0.35);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(189,160,0,0.18);
}
.lb-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(189,160,0,0.25);
}
.lb-title { color: #e9e6ff; font-weight: 700; }
.lb-spacer { flex: 1; }
.lb-btn {
  background: rgba(32,32,44,0.85);
  color: #e9e6ff;
  border: 1px solid rgba(189,160,0,0.35);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
}
.lb-btn:hover { border-color: rgba(189,160,0,0.6); }
.lb-view {
  flex: 1; display: grid; place-items: center; padding: 10px;
}
.lb-view img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px;
}

/* shared card look */
.class-select-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
}

.class-select-card {
  border: 2px solid gold;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 800px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ddd;
}

.about-title {
  color: gold;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.pick-class-title {
  color: gold;
  font-weight: 800;
  font-size: 1.8rem;
  margin-top: 1rem;
}

#class-screen .class-select-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.class-button {
  background-color: #222;
  border: 2px solid #555;
  border-radius: 6px;
  color: #eee;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.class-button:hover {
  background-color: #333;
  border-color: gold;
  color: gold;
}

/* System doc card uses same container/card classes you already have */
.system-view .class-select-panel { align-items: center; }
.system-doc {
  max-width: 900px;
  text-align: left;                  /* body text left, header centered */
}

/* Gold headings consistent with your theme */
.system-doc h1 {
  color: gold;
  font-weight: 800;
  text-align: center;
  margin: 0.5rem 0 1rem;
}
.system-doc h2, .system-doc h3 {
  color: gold;
  font-weight: 700;
  margin: 1.25rem 0 0.5rem;
}

/* Body text rhythm */
.system-doc p { line-height: 1.6; margin: 0.5rem 0; }
.system-doc br + br { line-height: 2; }

/* Links */
.system-doc a { color: #8ecbff; text-decoration: underline; }
.system-doc a:hover { color: #cfe7ff; }

/* Optional: tidy lists inside the imported HTML if you add some later */
.system-doc ul, .system-doc ol { margin: 0.5rem 0 0.5rem 1.25rem; }

/* Small version label at top if you keep "Version 0.x" text */
/*.system-doc:has(> :first-child:not(h1)) { } */

/* TOC */
/* Layout: left TOC, right content */
.system-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  text-align: left;
}

/* TOC box */
.system-toc {
  position: sticky;
  top: 12px;
  align-self: start;
  border: 1px solid rgba(255,215,0,.35);
  border-radius: 10px;
  padding: 0.75rem;
  background: rgba(0,0,0,0.4);
}
.system-toc .toc-title {
  color: gold; font-weight: 700; text-align: center; margin-bottom: .5rem;
}
.system-toc ul { list-style: none; margin: 0; padding: 0; }
.system-toc .toc-item { margin: .25rem 0; }
.system-toc .toc-sub { margin: .25rem 0 0 .75rem; }
.system-toc a {
  color: #cfd8ff; text-decoration: none; padding: 2px 4px; border-radius: 6px; display: inline-block;
}
.system-toc a:hover { background: rgba(207,216,255,.08); color: #e8eeff; }
.system-toc a.active { color: gold; background: rgba(255,215,0,.1); box-shadow: 0 0 0 1px rgba(255,215,0,.15) inset; }

/* Content look */
.system-content h1 { color: gold; font-weight: 800; text-align: center; margin: .2rem 0 1rem; }
.system-content h2 { color: gold; font-weight: 700; margin: 1.25rem 0 .5rem; }
.system-content h3 { color: #ffd866; font-weight: 600; margin: .75rem 0 .25rem; }
.system-content p  { line-height: 1.6; margin: .5rem 0; }
.system-content a  { color: #8ecbff; text-decoration: underline; }
.system-content a:hover { color: #cfe7ff; }

/* Responsive: stack TOC above content on small screens */
@media (max-width: 900px) {
  .system-layout { grid-template-columns: 1fr; }
  .system-toc { position: static; }
}


/* ===== WoW gold theme for Dungeons & Quests ===== */

/* ===== Zones: unify with gold theme ===== */
:root {
  --wow-gold: #d4b44c;
  --wow-gold-dim: #a9882c;
  --panel-bg: #0b0c0e;
  --panel-bg-2: #0f1114;
}

.zones-panel {
  background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg-2));
  border: 1px solid var(--wow-gold-dim);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 8px 24px rgba(0,0,0,.35);
  
}

.zones-grid{
  /* keep CSS Grid, but stop items from stretching */
  grid-template-columns: repeat(auto-fill, minmax(var(--zone-card-w), 1fr));
  justify-items: start;   /* <- important: use the card’s own width */
  gap: .5rem;
}

/* card */
.zone-card {
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: left;
  background: #0f1216;
  border: 1px solid #3a2d12;
  border-radius: 8px;
  color: #e6e6e6;
  overflow: hidden;
  width: var(--zone-card-w); 
  cursor: pointer;
  transition: transform .1s ease, border-color .12s ease, box-shadow .12s ease;
}
.zone-card:hover {
  transform: translateY(-1px);
  border-color: var(--wow-gold);
  box-shadow: 0 0 0 1px rgba(212,180,76,.25);
}

.zone-thumb {
  height: var(--zone-thumb-h);
  aspect-ratio: auto;         /* override previous aspect ratio */
  background: #000;
}
.zone-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* crop to fit smaller height */
}

/* meta */
.zone-meta {
  padding: .4rem .5rem .5rem;
}
.zone-title { font-size: .95rem; }
.zone-desc  { font-size: .9rem; }

/* lightbox */
.lb-themed .lb-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
}
.lb-themed .lb-content {
  position: fixed; inset: 6vh 6vw;
  background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg-2));
  border: 1px solid var(--wow-gold-dim);
  border-radius: 12px;
  display: grid; grid-template-rows: auto 1fr; gap: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.lb-themed .lb-toolbar {
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: .5rem; align-items: center; padding: .5rem .6rem;
  border-bottom: 1px solid var(--wow-gold-dim);
}
.lb-themed .lb-title { color: var(--wow-gold); font-weight: 700; text-align: center; }
.lb-themed .lb-btn {
  background:#101317; color:#e6e6e6; border:1px solid var(--wow-gold-dim);
  border-radius: 8px; padding:.35rem .6rem; cursor:pointer;
}
.lb-themed .lb-btn:hover { border-color: var(--wow-gold); }
.lb-themed .lb-view { padding: .5rem; display:grid; place-items:center; }
.lb-themed .lb-view img { max-width:100%; max-height:72vh; object-fit: contain; }

.lightbox { display:none; }
.lightbox.open { display:block; }


/* Shared shells */
.view-shell { display: grid; gap: 1rem; padding: 1rem; }
.page-header { display: flex; align-items: end; justify-content: space-between; padding: .5rem 0 1rem; border-bottom: 1px solid var(--border, #2a2a2a); }
.page-title { margin: 0; font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); }
.page-subtitle { margin: .25rem 0 0; opacity: .8; }
.input { width: 100%; padding: .5rem .75rem; border: 1px solid var(--border, #2a2a2a); border-radius: .5rem; background: var(--bg2, #111); color: inherit; }
.empty-state { text-align: center; opacity: .8; padding: 2rem 1rem; }

/* Chips */
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin:.25rem 0 .5rem; }
.chip { border: 1px solid var(--border, #2a2a2a); padding: .125rem .5rem; border-radius: 999px; font-size: .8rem; opacity: .9; }
.lead { opacity: .9; }

/* Dungeons */
.dungeons-layout { 
  display: grid; 
  grid-template-columns: 320px 1fr; 
  gap: 1rem; 
  min-height: 60vh;
  align-items: start; /* Prevents vertical stretching that can affect horizontal sizing */
}
.dungeon-list { display: grid; grid-template-rows: auto 1fr; gap: .5rem; }
.dungeon-items { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; overflow: auto; }
.dungeon-item { width: 100%; text-align: left; background: var(--bg2, #111); border: 1px solid var(--border, #2a2a2a); border-radius: .75rem; padding: .5rem .75rem; cursor: pointer; transition: transform .08s ease, border-color .1s ease; }
.dungeon-item:hover { transform: translateY(-1px); border-color: var(--accent, #6ea8fe); }
.dungeon-item .title { display:block; font-weight:600; }
.dungeon-item .meta { display:block; font-size:.85rem; opacity:.7; }
.dungeon-item .blurb { display:block; font-size:.9rem; opacity:.9; margin-top:.25rem; }
.dungeon-details { background: var(--bg2, #0d0d0d); border: 1px solid var(--border, #2a2a2a); border-radius: 1rem; padding: 1rem; overflow: auto; }
.dungeon-card { display: grid; gap: 1rem; }
.dungeon-header h2 { margin: 0; }
.boss-list { margin: .25rem 0 0; padding-left: 1.25rem; }
.boss-list li { margin: .25rem 0; }
.boss-name { font-weight: 600; margin-right: .5rem; }
.boss-note { opacity: .85; }

/* Quests */
.tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--border, #2a2a2a); }
.tab { appearance:none; background: transparent; border: 1px solid transparent; border-bottom: none; padding: .5rem .75rem; border-radius: .5rem .5rem 0 0; cursor: pointer; opacity:.85; }
.tab.is-active { border-color: var(--border, #2a2a2a); background: var(--bg2, #0f0f0f); opacity:1; }
/* Quest Layout - make both panels equal height */
.quest-layout { 
  display: grid; 
  grid-template-columns: 320px 1fr; 
  gap: 1rem; 
  min-height: 60vh;
  align-items: stretch;  /* align tops, but let content grow */
}

/* Left pane: search + scrollable list */
.quest-list-pane { 
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .5rem;
  height: 100%;
  min-height: 0;      
}

/* The scrollable quest list */
.quest-toc { 
  display:grid;
  gap:.25rem;
  overflow:auto;
  height:100%;

  /* stop tracks from stretching */
  align-content:start;        /* key line */
  grid-auto-rows:max-content; /* rows size to content */
  align-items:start;          /* don't stretch items */
}

/* Individual quest link - base styles */
.quest-link { 
  overflow: hidden;
  display: grid; 
  gap: .125rem; 
  padding: .5rem .6rem; 
  text-decoration: none; 
  color: inherit; 
  border: 2px solid var(--wow-gold-dim);
  border-radius: .5rem; 
  background: #0f1216;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.quest-link .quest-snippet {
  max-height: 160px;    /* 200px minus title/meta padding */
  overflow-y: auto;     /* vertical scrollbar if the text is long */
}

/* Quest link hover state */
.quest-link:hover { 
  border-color: var(--wow-gold);
  box-shadow: 0 0 0 1px rgba(212,180,76,.25);
}

/* NEW: Selected quest link - bright gold border */
.quest-link.selected {
  border-color: #f7d43a;
  border-width: 2px;
  box-shadow: 
    0 0 0 1px rgba(247,212,58,.4) inset,
    0 0 12px rgba(247,212,58,.3);
  background: #151a20;
}

.quest-link .title { 
  font-weight: 600; 
}

.quest-link .meta { 
  font-size: .85rem; 
  opacity: .75; 
}

/* Right pane */
.quest-detail-pane { 
  background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg-2));
  border: 1px solid var(--wow-gold-dim);
  border-radius: 12px;
  padding: 1rem; 
  overflow: auto;
  height: 100%;  /* match left pane */
  max-height: calc(100vh - 140px);  /* account for header + padding */
}

.quest-card { 
  display: grid; 
  gap: 1rem; 
}

/* Responsive */
@media (max-width: 980px) {
  .dungeons-layout, .quest-layout { grid-template-columns: 1fr; }
}

/* Base text contrast + headings */
.view-shell,
.dungeon-details,
.quest-detail-pane {
  color: #e6e6e6;
}
.page-header .page-title {
  font-weight: 700;
  letter-spacing: .2px;
}
.page-header .page-subtitle {
  color: #cfcfcf;
  opacity: .9;
}

/* Panels */
.dungeon-details,
.quest-detail-pane {
  background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg-2));
  border: 1px solid var(--wow-gold-dim);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 8px 24px rgba(0,0,0,.35);
  border-radius: 12px;
}

/* Left lists get the same framed feel */
.dungeon-list,
.quest-list-pane {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
  border: 1px solid var(--wow-gold-dim);

  border-radius: 12px;
  padding: .75rem;
}

/* Search input */
.input {
  background: #0e1012;
  border: 1px solid var(--wow-gold-dim);
  color: #eaeaea;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset;
}
.input::placeholder { color: #9aa1a6; }

/* List items (dungeon + quest links) */
.dungeon-item,
.quest-link {
  background: #0f1216;
  border: 1px solid #3a2d12;
  border-radius: 10px;
  color: #e6e6e6;
}
.dungeon-item:hover,
.quest-link:hover {
  border-color: var(--wow-gold);
  box-shadow: 0 0 0 1px rgba(212,180,76,.25);
}

/* Tiny meta lines */
.dungeon-item .meta,
.quest-link .meta {
  color: #c8c8c8;
  opacity: .9;
}

/* Tabs with gold underline */
.tabs { border-bottom: 1px solid var(--wow-gold-dim); }
.tab {
  color: #e6e6e6;
  border: 1px solid transparent;
  border-bottom: none;
}
.tab.is-active {
  background: #101317;
  border-color: var(--wow-gold-dim);
  box-shadow: 0 -2px 0 var(--wow-gold) inset;
}

/* Section headings */
.dungeon-card h3,
.quest-card h3 {
  color: var(--wow-gold);
  margin: .25rem 0 .4rem;
  font-weight: 700;
}

/* Chips (make them match the theme) */
.chip {
  border-color: var(--wow-gold-dim);
  background: #0f1216;
  color: #e6e6e6;
}

/* Reward badges */
.badge {
  border-color: var(--wow-gold-dim);
  background: #101317;
}
.badge-gold { border-color: #6b5a2a; }
.badge-rep  { border-color: #2a4e6b; }
.badge-skill{ border-color: #355e2a; }

/* Loot item names pick up your rarity colors; bump contrast a touch */
.item-name { text-shadow: 0 0 6px rgba(0,0,0,.4); }

/* Boss list spacing */
.boss-list li { padding: .05rem 0; }

/* Responsive nicety: keep the gold frame on small screens too */
@media (max-width: 980px) {
  .dungeon-list,
  .quest-list-pane {
    padding: .5rem;
  }
}
@media (min-width: 1400px) {
  .zones-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

/* Layout: reuse .dungeons-layout for consistent two-column grid */
.pinnacle-class-list { overflow-y: auto; }
.section-title { color: #f7d43a; font-weight: 700; text-align: center; margin: .25rem 0 .5rem; }

/* 2×2 grid on the right */
.pinnacle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}

/* Fixed 3-column grid for pinnacle details (one column per spec) */
.pinnacle-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

/* Each spec column */
.spec-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Spec header styling */
.spec-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--spec, #f7d43a);
  text-align: center;
  padding: 0.5rem;
  border-bottom: 2px solid var(--spec, #f7d43a);
  margin-bottom: 0.5rem;
}

/* Fixed 2x2 grid for talent cards within each spec */
.spec-talent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
}

/* Cards and title chip */
.pinnacle-header-bar { display: flex; justify-content: center; margin-bottom: .75rem; }
.pinnacle-title-chip {
  border: 2px solid #f7d43a; border-radius: 18px; padding: .35rem 1rem; background: rgba(0,0,0,.35);
  color: #f7d43a; font-weight: 800; letter-spacing: .02em;
}

/* Left class list buttons */
.class-item {
  width: 100%; text-align: center;
  border: 2px solid rgba(247,212,58,.75);
  border-radius: 20px; padding: 12px 14px; margin: 8px 0;
  background: rgba(0,0,0,.35); color: #f7d43a; font-weight: 700;
}
.class-item:hover { background: rgba(247,212,58,.09); }
.class-item .blurb { display:block; color: #f7d43aCC; font-weight: 500; opacity: .8; }

.pinnacle-note { margin-top: .75rem; opacity: .8; font-size: .9rem; }

.blurb :where(p, ul, ol) { margin: .25rem 0; }
.talent-summary :where(p, ul, ol) { margin: .35rem 0; }
.talent-summary ul { padding-left: 1.1rem; list-style: disc; }
.talent-summary ol { padding-left: 1.1rem; list-style: decimal; }
.highlight { color: #f7d43a; font-weight: 700; }
.pinnacle-items li { list-style: none; margin: 0 0 10px 0; padding: 0; }

/* Class Cards — themed like your Augment cards */
/* Class Cards — Minimal Clean Style */
.class-item.themed {
  --card: #f7d43a;
  --card-glow: rgba(247,212,58,.35);
  
  text-align: center; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  width: 100%;
  
  border: 2px solid var(--card);
  border-radius: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.6));
  color: var(--card);
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  
  transition: all 0.2s ease;
  cursor: pointer;
}

.class-item.themed:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 20px color-mix(in oklab, var(--card), #000 60%);
}

.class-item.themed.is-current {
  border-width: 3px;
  box-shadow: 
    0 0 0 2px rgba(0, 0, 0, 0.8),
    0 0 28px color-mix(in oklab, var(--card), #000 40%);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.4));
}

.class-item.themed .title { 
  display: block;
  font-weight: 800; 
  color: var(--card); 
  font-size: clamp(1.1rem, 6cqh, 1.4rem); 
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.class-item.themed .blurb {
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.9;
  font-size: clamp(.85rem, 3.8cqh, 1rem);
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Right panel uses the same theme vars */
.pinnacle-title-chip, .talent-title { color: var(--card); }

/* Prevent talent cards from resizing with window - fixed height */
.talent-card {
  min-height: 200px;
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.talent-card .talent-summary {
  flex: 1;
  overflow-y: auto;
}

/* Optional: rounded header chip */
.pinnacle-title-chip {
  border: 2px solid var(--card);
  border-radius: 18px;
  padding: .35rem 1rem;
  background: rgba(0,0,0,.35);
  font-weight: 800;
  letter-spacing: .02em;
}

/* Grid that holds all class buttons */
.class-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

/* The button itself */
.class-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.class-button:hover,
.class-button:focus-visible {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25) inset;
  transform: translateY(-1px);
}

/* Icon */
.class-button .icon {
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border: 2px solid rgba(168, 168, 168, 0.466);
  outline: 1px solid rgba(25, 20, 40, 0.35);   
  outline-offset: -1px;        
  border-radius: 10px;
  object-fit: cover;      /* or "contain" if your icons vary */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.35);
  display: block;
}

/* Label under the icon */
.class-button .label {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: #e8e8ff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  max-width: 90px;        /* keep long names neat */
  word-wrap: break-word;
}

/* Prevent layout shifts if an image fails to load */
.class-button .icon[hidden] {
  display: block;
  background: linear-gradient(180deg, #444444, #222);   
}

/* Your grid layout (works for both names) */


/* Flat look for Talents (same visual as About) */
#class-select.class-select--flat .class-button {
  background: transparent;
  box-shadow: none;
  border: 0;
}
#class-select.class-select--flat .class-button:hover,
#class-select.class-select--flat .class-button:focus-visible {
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

.class-select, .class-select-grid { display:flex !important; flex-wrap:wrap; gap:12px; justify-content:center; }

/* card-width sticky footer at the bottom of the right pane */
.prof-sticky-mini {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: .5rem;

  background: rgba(10,10,14,0.96);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: .5rem .75rem;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
  box-shadow: 0 -8px 16px rgba(0,0,0,0.25);
}
.prof-sticky-mini .footer-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.prof-sticky-mini .push { margin-left: auto; }

/* ensure sticky has a scrolling ancestor */
.prof-details {
  max-height: calc(100vh - 170px); /* adjust to your header height */
  overflow: auto;
  position: relative;
}/* Make the right pane a scrolling container (if it isn't already) */
.prof-details {
  max-height: calc(100vh - 170px); /* adjust to your header height */
  overflow: auto;
  position: relative;
}

/* Make the card fill the visible height so there's room to push the footer down */
.prof-details .dungeon-card {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px); /* tweak; ~right pane height minus header/padding */
}

/* Let the list area expand and push the footer down */
.prof-details .prof-grid {
  flex: 1 1 auto;
}

/* Compact sticky footer: bottom-left, not full width */
.prof-sticky-mini {
  position: sticky;
  bottom: 16px;          /* distance from the bottom of the pane */
  display: inline-block; /* prevents full-width stretch */
  width: auto;
  max-width: 420px;      /* optional cap */
  z-index: 10;

  background: rgba(10,10,14,0.96);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: .5rem .75rem;
  border-radius: .5rem;
  box-shadow: 0 -8px 16px rgba(0,0,0,0.25);
  margin-top: .5rem;
  align-self: flex-start; /* hug the left edge of the card */
}

.prof-sticky-mini .footer-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.prof-sticky-mini .push { margin-left: auto; }

/* Left column container */
.profession-list, .prof-list, #leftColumn, .left-col, [data-col="left"] {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Filter bar */
#sortFilter, .sort-filter, [data-role="sort-filter"] {
  margin-top: auto; /* pushes it to the bottom of the column */
}

/* segmented control (parent) */
.items-tabs {
  display: grid;
  grid-auto-flow: column;
  gap: .5rem;
}

/* individual tab buttons/links */
.items-tab {
  padding: .5rem .9rem;
  border: 2px solid var(--frame-2, #2a2f37);
  border-radius: .75rem;
  background: #0f1318;
  line-height: 1;
  user-select: none;
}

/* active (selected) state — gold glow */
.items-tab.is-active {
  border-color: #f7d43a;
  box-shadow:
    0 0 0 1px rgba(247,212,58,.35) inset,
    0 0 10px rgba(247,212,58,.25);
  background: #151a20;
}

/* keyboard focus */
.items-tab:focus-visible {
  outline: 2px solid #f7d43a;
  outline-offset: 2px;
}

.tabs .tab.is-active {
  border-color: #f7d43a;
  box-shadow:
    0 0 0 1px rgba(247,212,58,.35) inset,
    0 0 10px rgba(247,212,58,.25);
  background: #151a20;
}
/* Put this near the end of style.css */
.seg-btn.seg-active {
  border-color: #f7d43a !important;
  box-shadow:
    0 0 0 1px rgba(247,212,58,.35) inset,
    0 0 10px rgba(247,212,58,.25) !important;
  background: #151a20 !important;
}
/* NAV LAYOUT: prevent stretch/wrap jitter */
.site-nav {
  display: flex;               /* make sure it’s flex */
  gap: 2.25rem;                /* even spacing between links */
  align-items: flex-end;
}

/* All links share the same weight -> no width change on active */
.site-nav a {
  display: inline-flex;        /* keep width = to text, not 100% */
  position: relative;          /* so the underline can be absolute */
  padding-bottom: 8px;         /* reserve space for the underline */
  font-weight: 700;            /* <-- set base weight for ALL links */
}

/* Active look: gold color only (no extra bold needed to avoid reflow) */
.site-nav a.is-active {
  color: #d4b037;
}

/* Underline that DOES NOT affect layout */
.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                   /* sits in the reserved 8px */
  height: 2px;
  background: #d4b037;
  border-radius: 2px;
  opacity: .9;
}

/* If you previously added a block-level ::after, neutralize it */
.site-nav a.is-active::after { display: block; }   /* <-- REMOVE this old rule */

/* Subtabs container styling */
/* Subtabs container styling - nested tab bar */
.subtabs-container {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  border-bottom: 2px solid rgba(255, 200, 0, 0.3);
  padding: 0;
  margin: 0;
}

.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  align-items: flex-end;
}

.subtab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 2px solid rgba(255, 200, 0, 0.2);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.9));
  color: rgba(200, 200, 200, 0.9);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  position: relative;
  margin-right: -1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.subtab:hover {
  background: linear-gradient(to bottom, rgba(40, 40, 40, 0.9), rgba(30, 30, 30, 0.95));
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 200, 0, 0.4);
  z-index: 1;
}

.subtab.is-active {
  background: linear-gradient(to bottom, rgba(60, 50, 20, 0.9), rgba(40, 35, 15, 0.95));
  border-color: rgba(255, 200, 0, 0.6);
  color: #ffd700;
  font-weight: 600;
  z-index: 2;
  box-shadow: 
    inset 0 1px 0 rgba(255, 200, 0, 0.3),
    0 0 10px rgba(255, 200, 0, 0.2);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.subtab img {
  border-radius: 0.25rem;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  filter: brightness(0.9);
}

.subtab:hover img {
  opacity: 0.95;
  filter: brightness(1);
}

.subtab.is-active img {
  opacity: 1;
  filter: brightness(1.1);
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .subtab {
    padding: 0.5rem 1rem;
    font-size: 13px;
  }
  
  .subtab img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 1200px) {
  .subtab {
    padding: 0.5rem 0.8rem;
    font-size: 12px;
    gap: 0.4rem;
  }
  
  .subtab img {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .subtabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .subtab {
    padding: 0.45rem 0.7rem;
    font-size: 11px;
  }
}