#skills {
  background-color: transparent; /* Blend naturally with surrounding gradients */
  position: relative;
  padding-top: var(--space-16);
  padding-bottom: 2rem;
}

.seamless-tree {
  /* The tree is a direct child of the section, so its width is direction-safe. */
  width: 100vw;
  max-width: 100%;
  margin-top: var(--space-8);
  overflow: hidden; /* No scrolling - everything fits */
}

/* Inner Canvas - fits viewport exactly */
.skill-tree-container {
  --skill-tree-scale: 1;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 680px;
  background: transparent;
  border: none;
  cursor: default;
  /* Padding keeps nodes from touching edges */
  padding: 40px;
  box-sizing: border-box;
}

/* Base Node Styling */
.skill-node {
  position: absolute;
  padding: var(--space-2) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
  z-index: 10;
  will-change: transform;
  /* They are centered on their left/top coordinates via transform in JS */
}

/* Core / Major Nodes */
.node-core {
  font-size: var(--text-2xl);
  padding: var(--space-4) var(--space-8);
  font-weight: 800;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(251, 191, 36, 0.08));
  color: var(--color-text);
  border-color: var(--color-primary);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.node-major {
  font-size: var(--text-lg);
  color: var(--color-text);
  padding: var(--space-4) var(--space-6);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Flow logic: Node Hovering */
.skill-tree-container.node-hovered .skill-node {
  opacity: 1;
  filter: none;
}

.skill-tree-container.node-hovered .skill-node.active-node,
.skill-tree-container.node-hovered .skill-node.active-connected {
  opacity: 1;
  filter: blur(0px);
  color: var(--color-text);
}

.skill-node.active-node {
  background: var(--color-primary);
  color: var(--color-text-on-accent) !important;
  border-color: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary);
}

.skill-node.active-connected {
  border-color: var(--color-accent);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* Keep the desktop graph readable at the browser's normal 100% zoom. */
@media (min-width: 1051px) {
  /* Match the compact visual density of browser zoom without shrinking the rest of the page. */
  .seamless-tree {
    height: 476px;
  }

  .skill-tree-container {
    --skill-tree-scale: 0.7;
    width: 142.857143%;
    max-width: none;
    margin-inline: -21.4285715%;
    transform: scale(0.7);
    transform-origin: top center;
  }

  .skill-node:not(.node-major):not(.node-core) {
    font-size: .9rem;
    padding-inline: 1rem;
  }

  .node-major {
    font-size: 1.05rem;
    padding-inline: 1.15rem;
  }

  .node-core {
    font-size: clamp(1.65rem, 2.1vw, 2.35rem);
    padding: .9rem 1.7rem;
  }
}

/* SVG Lines */
.tree-connections {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.skill-connection {
  stroke: var(--color-border);
  stroke-width: 2;
  transition: stroke 0.4s, stroke-width 0.4s, opacity 0.4s;
}

.skill-tree-container.node-hovered .skill-connection {
  opacity: 0.1;
}

.skill-tree-container.node-hovered .skill-connection.active-line {
  opacity: 1;
  stroke: var(--color-accent);
  stroke-width: 4;
}

@media (max-width: 768px) {
  .seamless-tree { width: 100%; max-width: 100%; overflow: visible; }
  .skill-tree-container { height: auto; min-height: 0; padding: .5rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .tree-connections { display: none; }
  .skill-node { position: static; width: 100%; min-height: 46px; padding: .65rem .7rem; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1.25; transform: none !important; }
  .skill-node > span { display: block; }
  .node-core, .node-major { grid-column: 1 / -1; }
  .node-core { font-size: var(--text-base); padding: .8rem 1rem; }
  .node-major { font-size: var(--text-sm); padding: .7rem .8rem; }
  .skill-tree-container.node-hovered .skill-node { opacity: 1; filter: none; }
}

@media (min-width: 769px) and (max-width: 1050px) {
  .seamless-tree { height: 592px; }
  .skill-tree-container {
    --skill-tree-scale: 0.8;
    width: 125%;
    max-width: none;
    margin-inline: -12.5%;
    height: 740px;
    transform: scale(0.8);
    transform-origin: top center;
  }
  .skill-node { font-size: .82rem; padding-inline: 1rem; }
  .node-major { font-size: .95rem; }
}