html, body {
  overflow: hidden; /* prevent page-level scrolling */
  height: 100%;
}

/* Full stage under header */
.skill-tree-stage{
  position: relative;
  background: #000;
  overflow: auto;
  padding-right: 320px;

  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: calc(100vh - 52px);
}

/* =========================
   ZOOM UI
   ========================= */

.skill-tree-zoom-ui{
  position: fixed;
  left: 12px;
  top: 64px; /* just under the header; tweak if needed */

  z-index: 999999;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin: 0;
  padding: 5px 7px;

  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(35, 150, 255, 0.35);
  border-radius: 10px;

  backdrop-filter: blur(4px);
}

.zoom-label{
  font-family: system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 220, 255, 0.9);
}

.zoom-range{
  width: 180px;
}

.zoom-value{
  font-family: system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  min-width: 62px;
  text-align: right;
  margin-left: -24px
}

.zoom-btn{
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(35, 150, 255, 0.35);
  background: rgba(0,0,0,0.5);
  color: rgba(210, 240, 255, 0.92);
  cursor: pointer;
}

.zoom-btn:hover{
  box-shadow: 0 0 10px rgba(35, 150, 255, 0.35);
}

/*
  This is your tracing "canvas".
  Adjust these pixel values freely.
*/
.skill-tree-canvas{
  position: relative;

  /* MAIN CONTROL: overall canvas size */
  width: 1800px;
  height: 1800px;
  margin: 0px;

  overflow: hidden;
}

:root{
  --tree-size: 1800px;   /* your current base canvas size */
  --tree-scale: 8.7;  /* ✅ change THIS to enlarge everything */
}

.skill-tree-scale{
  width: calc(var(--tree-size) * var(--tree-scale));
  height: calc(var(--tree-size) * var(--tree-scale));
}

.skill-tree-scale .skill-tree-canvas{
  width: var(--tree-size);
  height: var(--tree-size);

  transform: scale(var(--tree-scale));
  transform-origin: top left;

  /* keep your existing clamp */
  overflow: hidden;
}

/* =========================
   20 DARK-BLUE RINGS
   (pixel-first, easy tuning)
   ========================= */

/*
  The ring container matches canvas size and shares the same center.
  Z-index chosen to sit below rays/logo.
*/
.skill-rings{
  position: absolute;
  left: 0;
  top: 0;

  width: 1800px;
  height: 1800px;

  pointer-events: none;
  z-index: 1;
}

/*
  Each ring is a transparent circle centered on the canvas.
  You adjust radius by changing width/height per ring below.
*/
.ring{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  border-radius: 50%;
  background: transparent;

  border-style: solid;
}

/* Tuned opacity approach */
.ring.thick{ border-width: 2px; border-color: rgba(10, 70, 210, 1); }
.ring.thin { border-width: 1px; border-color: rgba(10, 70, 210, 0.3);}

/* Your tuned sizes (aspect-ratio version) */
.ring-01{ width: 326px; aspect-ratio: 1 / 1; }
.ring-02{ width: 394px; aspect-ratio: 1 / 1; }
.ring-03{ width: 465px; aspect-ratio: 1 / 1; }
.ring-04{ width: 537px; aspect-ratio: 1 / 1; }
.ring-05{ width: 610px; aspect-ratio: 1 / 1; }
.ring-06{ width: 682px; aspect-ratio: 1 / 1; }
.ring-07{ width: 788px; aspect-ratio: 1 / 1; }
.ring-08{ width: 858px; aspect-ratio: 1 / 1; }
.ring-09{ width: 930px; aspect-ratio: 1 / 1; }
.ring-10{ width: 1002px; aspect-ratio: 1 / 1; }
.ring-11{ width: 1074px; aspect-ratio: 1 / 1; }
.ring-12{ width: 1145px; aspect-ratio: 1 / 1; }
.ring-13{ width: 1216px; aspect-ratio: 1 / 1; }
.ring-14{ width: 1287px; aspect-ratio: 1 / 1; }
.ring-15{ width: 1358px; aspect-ratio: 1 / 1; }
.ring-16{ width: 1429px; aspect-ratio: 1 / 1; }
.ring-17{ width: 1500px; aspect-ratio: 1 / 1; }
.ring-18{ width: 1571px; aspect-ratio: 1 / 1; }
.ring-19{ width: 1642px; aspect-ratio: 1 / 1; }
.ring-20{ width: 1788px; aspect-ratio: 1 / 1; }

/* Shared skill rank zone glow */
.shared-rank-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.shared-rank-glow.active {
  opacity: 1;
}

.shared-rank-glow.entry {
  width: 326px;
  height: 326px;
  background: radial-gradient(
    circle,
    transparent 56%,
    rgba(86, 79, 227, 0.266) 99%,
    rgba(28, 73, 206, 0.25) 99%,
    rgba(0, 255, 255, 0.12) 99%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 100px rgba(0, 255, 255, .65),
    0 0 40px rgba(0, 255, 255, 0.1);
}

.shared-rank-glow.basic {
  width: 465px;
  height: 465px;
  background: radial-gradient(
    circle,
    transparent 69%,
    rgba(0, 255, 255, 0.12) 70%,
    rgba(0, 255, 255, 0.25) 84%,
    rgba(0, 255, 255, 0.12) 99%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 90px rgba(0, 255, 255, 4.95),
    0 0 50px rgba(0, 255, 255, 0.2);
}

.shared-rank-glow.intermediate {
  width: 682px;
  height: 682px;
  background: radial-gradient(
    circle,
    transparent 67%,
    rgba(0, 255, 255, 0.15) 78%,
    rgba(0, 255, 255, 0.3) 82%,
    rgba(0, 255, 255, 0.25) 99%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 140px rgba(0, 255, 255, 8.18),
    0 0 90px rgba(0, 255, 255, 0.15);
}

.shared-rank-glow.advanced {
  width: 1074px;
  height: 1074px;
  background: radial-gradient(
    circle,
    transparent 63%,
    rgba(0, 255, 255, 0.15) 75%,
    rgba(0, 255, 255, 0.3) 84%,
    rgba(0, 255, 255, 0.25) 99%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 180px rgba(0, 255, 255, 10),
    0 0 120px rgba(0, 255, 255, 0.18);
}

.shared-rank-glow.expert {
  width: 1642px;
  height: 1642px;
  background: radial-gradient(
    circle,
    transparent 65%,
    rgba(0, 255, 255, 0.15) 75%,
    rgba(0, 255, 255, 0.3) 85%,
    rgba(0, 255, 255, 0.3) 99%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 220px rgba(0, 255, 255, 12),
    0 0 150px rgba(0, 255, 255, 0.2);
}

.shared-rank-glow.master {
  width: 1788px;
  height: 1788px;
  background: radial-gradient(
    circle,
    transparent 91%,
    rgba(0, 255, 255, 0.2) 94%,
    rgba(0, 255, 255, 0.4) 97%,
    rgba(0, 255, 255, 0.35) 99%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 260px rgba(0, 255, 255, 14),
    0 0 180px rgba(0, 255, 255, 0.22);
}

/* =========================
   TIER NUMBERS (1–20)
   Cardinal strips only:
   UP / DOWN / LEFT / RIGHT
   ========================= */

.tier-labels{
  position: absolute;
  left: 0;
  top: 0;
  width: 1800px;
  height: 1800px;
  pointer-events: none;

  /* Above rings, below rays/logo */
  z-index: 2;
}

.tier-group{
  position: absolute;
  left: 50%;
  top: 50%;
}

/* Style for each number */
.tier{
  position: absolute;
  left: 0;
  top: 0;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 0;

  color: rgba(120, 190, 255, 0.85);
  text-shadow: 0 0 6px rgba(35, 150, 255, 0.35);

  user-select: none;
  white-space: nowrap;

  /* Keep each number centered on its point */
  transform: translate(-50%, -50%);
}

/* =========================
   STACK DOUBLE-DIGITS
   FOR UP & DOWN ONLY
   ========================= */

/* Make 2-digit numbers stack vertically (1 over 0) */
.tier-group.up .tier,
.tier-group.down .tier {
  writing-mode: vertical-rl;
  text-orientation: upright;
 
  /* tighten spacing between digits */
  line-height: 0;

  /* optional micro-adjustment */
  letter-spacing: -1px;
}

.tier-group.left .tier,
.tier-group.right .tier { 
  /* tighten spacing between digits */
  padding-top: .6px; 
}

/* =========
   DIRECTION
   =========
   These are the ONLY “direction” rules.
   Nothing rotates, so text always stays upright.
*/

/* UP: move by negative Y (optionally shift X a hair to center between the two borders) */
.tier-group.up .tier{
  /* tweak this if you need to “sit” between the border lines */
  margin-left: 0px;
}

/* DOWN */
.tier-group.down .tier{
  margin-left: 0px;
}

/* LEFT */
.tier-group.left .tier{
  margin-top: 0px;
}

/* RIGHT */
.tier-group.right .tier{
  margin-top: 0px;
}

/* =========================
   RADIAL DISTANCES (pixels)
   These are your tuned “between rings” distances.
   We reuse the SAME distances for all 4 directions.
   ========================= */

/* UP (negative Y) */
.tier-group.up .t01{ top: -131.5px; }
.tier-group.up .t02{ top: -180px; }
.tier-group.up .t03{ top: -214.75px; }
.tier-group.up .t04{ top: -250.5px; }
.tier-group.up .t05{ top: -286.75px; }
.tier-group.up .t06{ top: -323px; }
.tier-group.up .t07{ top: -367.5px; }
.tier-group.up .t08{ top: -411.5px; }
.tier-group.up .t09{ top: -447px; }
.tier-group.up .t10{ top: -483px; }
.tier-group.up .t11{ top: -519px; }
.tier-group.up .t12{ top: -554.75px; }
.tier-group.up .t13{ top: -590.25px; }
.tier-group.up .t14{ top: -625.75px; }
.tier-group.up .t15{ top: -661.25px; }
.tier-group.up .t16{ top: -696.75px; }
.tier-group.up .t17{ top: -732.25px; }
.tier-group.up .t18{ top: -767.75px; }
.tier-group.up .t19{ top: -803.25px; }
.tier-group.up .t20{ top: -857.5px; }

/* DOWN (positive Y) */
.tier-group.down .t01{ top: 131.5px; }
.tier-group.down .t02{ top: 180px; }
.tier-group.down .t03{ top: 214.75px; }
.tier-group.down .t04{ top: 250.5px; }
.tier-group.down .t05{ top: 286.75px; }
.tier-group.down .t06{ top: 323px; }
.tier-group.down .t07{ top: 367.5px; }
.tier-group.down .t08{ top: 411.5px; }
.tier-group.down .t09{ top: 447px; }
.tier-group.down .t10{ top: 483px; }
.tier-group.down .t11{ top: 519px; }
.tier-group.down .t12{ top: 554.75px; }
.tier-group.down .t13{ top: 590.25px; }
.tier-group.down .t14{ top: 625.75px; }
.tier-group.down .t15{ top: 661.25px; }
.tier-group.down .t16{ top: 696.75px; }
.tier-group.down .t17{ top: 732.25px; }
.tier-group.down .t18{ top: 767.75px; }
.tier-group.down .t19{ top: 803.25px; }
.tier-group.down .t20{ top: 857.5px; }

/* LEFT (negative X) */
.tier-group.left .t01{ left: -131.5px; }
.tier-group.left .t02{ left: -180px; }
.tier-group.left .t03{ left: -214.75px; }
.tier-group.left .t04{ left: -250.5px; }
.tier-group.left .t05{ left: -286.75px; }
.tier-group.left .t06{ left: -323px; }
.tier-group.left .t07{ left: -367.5px; }
.tier-group.left .t08{ left: -411.5px; }
.tier-group.left .t09{ left: -447px; }
.tier-group.left .t10{ left: -483px; }
.tier-group.left .t11{ left: -519px; }
.tier-group.left .t12{ left: -554.75px; }
.tier-group.left .t13{ left: -590.25px; }
.tier-group.left .t14{ left: -625.75px; }
.tier-group.left .t15{ left: -661.25px; }
.tier-group.left .t16{ left: -696.75px; }
.tier-group.left .t17{ left: -732.25px; }
.tier-group.left .t18{ left: -767.75px; }
.tier-group.left .t19{ left: -803.25px; }
.tier-group.left .t20{ left: -857.5px; }

/* RIGHT (positive X) */
.tier-group.right .t01{ left: 131.5px; }
.tier-group.right .t02{ left: 180px; }
.tier-group.right .t03{ left: 214.75px; }
.tier-group.right .t04{ left: 250.5px; }
.tier-group.right .t05{ left: 286.75px; }
.tier-group.right .t06{ left: 323px; }
.tier-group.right .t07{ left: 367.5px; }
.tier-group.right .t08{ left: 411.5px; }
.tier-group.right .t09{ left: 447px; }
.tier-group.right .t10{ left: 483px; }
.tier-group.right .t11{ left: 519px; }
.tier-group.right .t12{ left: 554.75px; }
.tier-group.right .t13{ left: 590.25px; }
.tier-group.right .t14{ left: 625.75px; }
.tier-group.right .t15{ left: 661.25px; }
.tier-group.right .t16{ left: 696.75px; }
.tier-group.right .t17{ left: 732.25px; }
.tier-group.right .t18{ left: 767.75px; }
.tier-group.right .t19{ left: 803.25px; }
.tier-group.right .t20{ left: 857.5px; }

/* =========================
   6 ROTATED RAY STRIPS
   (pixel-first, easy knobs)
   ========================= */

.skill-rays{
  position: absolute;
  left: 0;
  top: 0;

  width: 1800px;
  height: 1800px;

  pointer-events: none;
  z-index: 3;
}

.ray-set{
  position: absolute;
  left: 50%;
  top: 50%;

  height: 1800px;
  width: 12px;

  border-left: 1.5px solid rgba(35, 150, 255, 0.98);
  border-right: 1.5px solid rgba(35, 150, 255, 0.98);

  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;

  opacity: 0.95;
}

.ray-set.r0   { transform: translate(-50%, -50%) rotate(0deg); }
.ray-set.r30  { transform: translate(-50%, -50%) rotate(30deg); }
.ray-set.r60  { transform: translate(-50%, -50%) rotate(60deg); }
.ray-set.r90  { transform: translate(-50%, -50%) rotate(90deg); }
.ray-set.r120 { transform: translate(-50%, -50%) rotate(120deg); }
.ray-set.r150 { transform: translate(-50%, -50%) rotate(150deg); }

/* =========================
   TICK MARKS ON DIVIDER STRIPS
   Lines up with the 20 rings
   (based on current ring diameters)
   ========================= */

/* Easy knobs */
.ray-set{
  position: absolute; 
}

/* =========================
   TICK MARKS (split dashes)
   Two dashes: one outside each border
   Leaves a clean gap in the strip center
   ========================= */

/* knobs */
:root{
  /* how far OUTSIDE each border the dash starts */
  --tick-outset: -1px;

  /* dash length (horizontal) */
  --tick-len: 4px;

  /* dash thickness */
  --tick-thick: 2px;

  /* tick color */
  --tick-color: rgba(35, 150, 255, 0.90);
  --tick-right-nudge: -0.5px;
}

/* left + right dash columns */
.ray-set::before,
.ray-set::after{
  content: "";
  position: absolute;
  top: 50%;
  height: var(--tick-thick);
  width: var(--tick-len);
  background: var(--tick-color);

  /* anchor vertically at center, ring offsets are via box-shadow */
  transform: translateY(-50%);

  /* ring ticks (same list for both sides) */
    box-shadow:
    0 -162px  0 0 var(--tick-color),
    0  162px  0 0 var(--tick-color),

    0 -197px  0 0 var(--tick-color),
    0  197px  0 0 var(--tick-color),

    0 -232px 0 0 var(--tick-color),
    0  232px 0 0 var(--tick-color),

    0 -268.5px 0 0 var(--tick-color),
    0  268.5px 0 0 var(--tick-color),

    0 -304.5px 0 0 var(--tick-color),
    0  304.5px 0 0 var(--tick-color),

    0 -340px 0 0 var(--tick-color),
    0  340px 0 0 var(--tick-color),

    0 -393.5px 0 0 var(--tick-color),
    0  393.5px 0 0 var(--tick-color),

    0 -428.5px 0 0 var(--tick-color),
    0  428.5px 0 0 var(--tick-color),

    0 -464.5px 0 0 var(--tick-color),
    0  464.5px 0 0 var(--tick-color),

    0 -500.5px 0 0 var(--tick-color),
    0  500.5px 0 0 var(--tick-color),

    0 -536px 0 0 var(--tick-color),
    0  536px 0 0 var(--tick-color),

    0 -572.5px 0 0 var(--tick-color),
    0  572.5px 0 0 var(--tick-color),

    0 -607.5px 0 0 var(--tick-color),
    0  607.5px 0 0 var(--tick-color),

    0 -643.5px 0 0 var(--tick-color),
    0  643.5px 0 0 var(--tick-color),

    0 -679px 0 0 var(--tick-color),
    0  679px 0 0 var(--tick-color),

    0 -714.5px 0 0 var(--tick-color),
    0  714.5px 0 0 var(--tick-color),

    0 -749.5px 0 0 var(--tick-color),
    0  749.5px 0 0 var(--tick-color),

    0 -785.5px 0 0 var(--tick-color),
    0  785.5px 0 0 var(--tick-color),

    0 -820px 0 0 var(--tick-color),
    0  820px 0 0 var(--tick-color),

    0 -893px 0 0 var(--tick-color),
    0  893px 0 0 var(--tick-color);
}

/* LEFT dash column: anchored to the LEFT border line */
.ray-set::before{
  left: calc(-1 * (var(--tick-outset) + var(--tick-len)));
}

.ray-set::after{
  left: calc(100% + var(--tick-outset) + var(--tick-right-nudge));
}

/* Waltz logo positioning */
.skill-tree-waltz{
  position: absolute;

  width: 190px; aspect-ratio: 1 / 1;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  object-fit: contain;
  user-select: none;
  pointer-events: none;

  z-index: 4;
  animation: waltz-breathe 9s ease-in-out infinite;
}

/* =========================
   WALTZ LOGO — BREATHING
   Brightness + Contrast pulse
   ========================= */

@keyframes waltz-breathe {
  0%, 100% {
    filter:
      brightness(1.0) 
      saturate(1.1)
      contrast(1.1);
  }

  50% {
    filter:
      brightness(1.15)
      saturate(1.2)
      contrast(1.15);
  }
}

/* =========================
   SKILL TREE – STAT NODE
   ========================= */

.skill-node{
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* ABOVE EVERYTHING */
  z-index: 9999;
}

.skill-node img{
  display: block;
  width: 10px; /* starting size */
  height: auto;

  filter: brightness(1.75);
}

/* =========================
   STAT — r0 strip (vertical)
   Thick rings only (1,3,6,11,19)
   ========================= */

/* Ring 01 */
.stat-r0-01{
  transform: translate(-50%, -50%) translateY(-162px);
}

/* Ring 03 */
.stat-r0-03{
  transform: translate(-50%, -50%) translateY(-232px);
}

/* Ring 06 */
.stat-r0-06{
  transform: translate(-50%, -50%) translateY(-340px);
}

/* Ring 11 */
.stat-r0-11{
  transform: translate(-50%, -50%) translateY(-536px);
}

/* Ring 19 */
.stat-r0-19{
  transform: translate(-50%, -50%) translateY(-820px);
}

/* =========================
   STAT — r0 strip (DOWN mirror)
   Thick rings only (1,3,6,11,19)
   ========================= */

.stat-r0-01-down{ transform: translate(-50%, -50%) translateY(162px); }
.stat-r0-03-down{ transform: translate(-50%, -50%) translateY(232px); }
.stat-r0-06-down{ transform: translate(-50%, -50%) translateY(340px); }
.stat-r0-11-down{ transform: translate(-50%, -50%) translateY(536px); }
.stat-r0-19-down{ transform: translate(-50%, -50%) translateY(820px); }

/* =========================
   STAT LAYER (clean + stable)
   Rotate groups; keep node translateY values untouched
   ========================= */

.stat-layer{
  position: absolute;
  left: 0;
  top: 0;
  width: 1800px;
  height: 1800px;
  pointer-events: none;
  z-index: 9999; /* same as nodes, safe */
}

.stat-group{
  position: absolute;
  left: 0;
  top: 0;
  width: 1800px;
  height: 1800px;
  transform-origin: 50% 50%;
}

.stat-group.r0   { transform: rotate(0deg); }
.stat-group.r30  { transform: rotate(30deg); }
.stat-group.r60  { transform: rotate(60deg); }
.stat-group.r90  { transform: rotate(90deg); }
.stat-group.r120 { transform: rotate(120deg); }
.stat-group.r150 { transform: rotate(150deg); }

/* =========================
   SKILL INFO PANEL (Right Sidebar)
   ========================= */

.skill-info-panel {
  position: fixed;
  right: 17px;
  top: 56px; /* below header */
  bottom: 17px;
  width: 230px;
  background: rgb(10, 10, 10);
  border-left: 2px solid #333;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  color: #0ff;
}

/* Header */
.skill-info-header {
  font-family: "AstroSpace", sans-serif;
  font-size: 13.45px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Panel toggle tabs */
.skill-panel-toggle {
  display: flex;
  border-bottom: 1px solid #333;
}

.skill-panel-toggle-btn {
  flex: 1;
  padding: 6px 4px;
  background: transparent;
  border: none;
  color: #888;
  font-family: "AstroSpace", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 2px solid transparent;
}

.skill-panel-toggle-btn:hover {
  color: #0ff;
}

.skill-panel-toggle-btn.active {
  color: #0ff;
  border-bottom-color: #0ff;
}

/* Shared skills content area */
.skill-shared-content {
  flex: 1;
  overflow-y: auto;
  padding: 9px;
  background: rgba(255, 255, 255, 0.02);
}

/* Shared skills class filter grid */
.shared-class-filter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
}

.shared-class-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.shared-class-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.9;
  filter: brightness(1.5);
  transition: opacity 0.2s;
}

.shared-class-btn:hover {
  border-color: #0ff;
  background: rgba(0, 255, 255, 0.06);
}

.shared-class-btn:hover img {
  opacity: 1;
}

.shared-class-btn.active {
  border-color: #0ff;
  background: rgba(0, 255, 255, 0.1);
}

.shared-class-btn.active img {
  opacity: 1;
}

/* Shared skills list */
.shared-skills-list {
  padding: 8px 0;
}

.shared-rank-label {
  font-family: "AstroSpace", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #0ff;
  padding: 10px 6px 4px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  margin-bottom: 2px;
}

.shared-rank-label:first-child {
  padding-top: 4px;
}

.shared-skill-name {
  font-size: 12px;
  color: #ccc;
  padding: 3px 6px 3px 12px;
  cursor: default;
}

.shared-skill-name:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.shared-skill-name.shared-skill-applied {
  background: rgba(0, 255, 136, 0.2);
  color: #fff;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Shared skill detail back button */
.shared-skill-back {
  font-family: "AstroSpace", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #0ff;
  cursor: pointer;
  padding: 4px 6px 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.shared-skill-back:hover {
  opacity: 1;
}

/* Shared skill apply button */
.shared-skill-apply-btn {
  width: 100%;
  padding: 10px 16px;
  margin-top: 8px;
  background: linear-gradient(180deg, #0cc, #099);
  border: 1px solid #0ff;
  border-radius: 4px;
  color: #000;
  font-family: "AstroSpace", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.shared-skill-apply-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #0ff, #0cc);
}

.shared-skill-apply-btn:disabled {
  background: #333;
  border-color: #555;
  color: #888;
  cursor: default;
}

.skill-info-title {
  color: #0ff;
}

.skill-info-counter {
  font-size: 11px;
  color: rgba(0, 255, 255, 0.7);
}

/* Content area */
.skill-info-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* Placeholder text */
.skill-info-placeholder {
  font-size: 12px;
  color: #888;
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed #333;
  background: rgba(255, 255, 255, 0.02);
}

/* Details section */
.skill-info-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skill-info-name {
  font-family: "AstroSpace", sans-serif;
  font-size: 16px;
  color: #0ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}

.skill-info-description {
  font-size: 13px;
  line-height: 1.15;
  color: rgba(0, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #333;
  padding: 10px;
  border-radius: 4px;

  /* ✅ allow newline formatting like the book blocks */
  white-space: normal;
}

/* ================================
   Skill Type Color System
   ================================ */

.skill-block {
  margin-bottom: 20px;
  line-height: 1.2;     
}

.skill-block > div {
  margin: 0;              /* remove browser spacing */
  padding: 0;
}

/* ACTION — Orange */
.skill-block.action-skill {
  color: #ff9a2f;
}

/* PASSIVE — Deep Pink */
.skill-block.passive-skill {
  color: #ff2f7a;
}

/* REACTION — Cool Blue */
.skill-block.reaction-skill {
  color: #2fc7ff;
}

/* Explanation body always white */
.skill-block .explanation-text {
  color: #ffffff;
}

/* ================================
   Cluster Node Options (AG:4 etc.)
   ================================ */

.skill-options{
  margin-top: 12px; /* space between main text + options list */
}

.skill-options-title{
  margin-bottom: 6px;
  /* inherits the skill color (orange/pink/blue) */
}

.skill-options-list{
  margin: 0 0 0 18px; /* bullet indent */
  padding: 0;
}

.skill-options-list li{
  margin: 0 0 10px 0; /* space between options */
}

.skill-options-list .option-explanation{
  color: #ffffff; /* body stays white */
  margin-top: 4px;
}

/* Allow option headers to override parent skill color */
.skill-options-list .option-name.action-skill   { color: #ff9a2f; }
.skill-options-list .option-name.passive-skill  { color: #ff2f7a; }
.skill-options-list .option-name.reaction-skill { color: #2fc7ff; }

/* Wrap long header lines instead of overflowing */
.skill-info-description,
.skill-options-list .option-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ================================
   Interactive Option Selection
   ================================ */

.skill-option {
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.skill-option.option-clickable {
  cursor: pointer;
}

.skill-option.option-clickable:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 204, 204, 0.5);
  transform: translateX(4px);
}

.skill-option.option-selected {
  background: rgba(0, 204, 204, 0.2);
  border-color: #0cc;
  box-shadow: 0 0 8px rgba(0, 204, 204, 0.3);
}

.skill-option.option-clickable.option-selected:hover {
  background: rgba(0, 204, 204, 0.3);
  border-color: #0ff;
}

.skill-option.option-acquired {
  background: rgba(0, 255, 136, 0.2);
  border-color: #0f8;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.option-name {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 4px;  
}

.option-explanation {
  color: #ffffff;
  font-size: 0.95em;
  line-height: 1.4;
  margin-top: 4px;
}

.option-capacity {
  color: #aaa;
  font-size: 0.9em;
  margin-top: 4px;
  font-style: italic;
}

.skill-options-header {
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 16px;
  margin-bottom: 8px;  
}

/* Type-based colors for option headers */
.skill-option .option-name.action-skill {
  color: #ff9a2f !important;
}

.skill-option .option-name.passive-skill {
  color: #ff2f7a !important;
}

.skill-option .option-name.reaction-skill {
  color: #2fc7ff !important;
}

/* Parent skill header elements inherit type color */
.skill-name.action-skill,
.skill-tier.action-skill,
.skill-type.action-skill,
.skill-cost.action-skill,
.skill-capacity.action-skill,
.skill-explanation-label.action-skill,
.skill-options-header.action-skill {
  color: #ff9a2f;
}

.skill-name.passive-skill,
.skill-tier.passive-skill,
.skill-type.passive-skill,
.skill-cost.passive-skill,
.skill-capacity.passive-skill,
.skill-explanation-label.passive-skill,
.skill-options-header.passive-skill {
  color: #ff2f7a;
}

.skill-name.reaction-skill,
.skill-tier.reaction-skill,
.skill-type.reaction-skill,
.skill-cost.reaction-skill,
.skill-capacity.reaction-skill,
.skill-explanation-label.reaction-skill,
.skill-options-header.reaction-skill {
  color: #2fc7ff;
}

/* Apply button */
.skill-info-apply-btn {
  width: 100%;
  padding: 10px 16px;
  margin-top: 8px;
  background: linear-gradient(180deg, #0cc, #099);
  border: 1px solid #0ff;
  border-radius: 4px;
  color: #000;
  font-family: "AstroSpace", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.skill-info-apply-btn:hover:not(:disabled) {
  filter: brightness(1.2);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
}

.skill-info-apply-btn:disabled {
  background: rgba(50, 50, 50, 0.6);
  border-color: #555;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}

.skill-info-apply-requirement {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  font-family: system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 80, 80, 0.9);
}

.skill-info-apply-btn:not(:disabled) .skill-info-apply-requirement {
  display: none;
}