/* SwissDevPath static asset: skilltree.css */
.skilltree-map {
      cursor: grab;
      user-select: none;
      touch-action: none;
      position: relative;
      min-height: 1080px;
      margin-top: 20px;
      border-radius: 34px;
      border: 1px solid rgba(148,163,184,.22);
      background:
        radial-gradient(circle at 50% 50%, rgba(37,99,235,.26), transparent 18%),
        radial-gradient(circle at 24% 28%, rgba(245,158,11,.16), transparent 22%),
        radial-gradient(circle at 78% 30%, rgba(34,197,94,.16), transparent 22%),
        radial-gradient(circle at 48% 78%, rgba(220,38,38,.17), transparent 24%),
        linear-gradient(180deg, #0f172a 0%, #020617 72%, #000 100%);
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.52);
    }
    .skilltree-map::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 1px),
        radial-gradient(circle, rgba(147,197,253,.22) 1px, transparent 1px);
      background-size: 46px 46px, 82px 82px;
      opacity: .16;
      animation: starDrift 22s linear infinite;
    }
    .skilltree-map::after {
      content: "";
      position: absolute;
      inset: -80px;
      background:
        radial-gradient(circle at 50% 50%, transparent 0 23%, rgba(2,6,23,.35) 42%, rgba(2,6,23,.88) 76%),
        radial-gradient(circle at 18% 72%, rgba(59,130,246,.18), transparent 28%),
        radial-gradient(circle at 84% 66%, rgba(34,197,94,.13), transparent 30%);
      pointer-events: none;
      z-index: 3;
    }
    .skilltree-pan-layer {
      position: absolute;
      inset: 0;
      transform-origin: 50% 50%;
      transform: translate(0px, 0px) scale(1);
      transition: transform .05s linear;
    }
    .skilltree-map.dragging {
      cursor: grabbing;
    }
    .skilltree-pan-help {
      margin: 8px 0 12px;
      color: #64748b;
      font-size: 13px;
      font-weight: 800;
    }

    .constellation-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      opacity: .78;
    }
    .constellation-lines line {
      stroke: rgba(96,165,250,.52);
      stroke-width: 2;
      stroke-linecap: round;
      filter: drop-shadow(0 0 8px rgba(96,165,250,.35));
    }
    .constellation-lines .line-done {
      stroke: rgba(34,197,94,.66);
    }
    .constellation-lines .line-locked {
      stroke: rgba(71,85,105,.48);
      stroke-dasharray: 5 7;
    }
    .skill-core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 126px;
      height: 126px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      font-weight: 950;
      color: white;
      background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.34), transparent 18%),
        linear-gradient(135deg, #dc2626, #2563eb 54%, #16a34a);
      border: 2px solid rgba(255,255,255,.28);
      box-shadow: 0 0 42px rgba(96,165,250,.55), 0 0 90px rgba(220,38,38,.22);
      animation: skillPulse 2.8s ease-in-out infinite;
      z-index: 6;
    }
    .skill-core small {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      color: rgba(255,255,255,.78);
    }
    .skill-node {
      position: absolute;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      font-size: 8px;
      line-height: 1.08;
      font-weight: 900;
      border: 2px solid rgba(148,163,184,.32);
      background: #111827;
      color: #e5e7eb;
      box-shadow: 0 14px 30px rgba(0,0,0,.45);
      transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
      z-index: 5;
    }
    .skill-node:hover {
      filter: brightness(1.12);
      box-shadow: 0 20px 46px rgba(0,0,0,.56);
    }
    .skill-node.done {
      background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), transparent 18%), linear-gradient(135deg, #166534, #22c55e);
      border-color: #86efac;
      box-shadow: 0 0 28px rgba(34,197,94,.28), 0 14px 30px rgba(0,0,0,.42);
    }
    .skill-node.current {
      background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.34), transparent 18%), linear-gradient(135deg, #2563eb, #7c3aed);
      border-color: #bfdbfe;
      animation: nodePulse 1.9s ease-in-out infinite;
    }
    .skill-node.available {
      background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.18), transparent 18%), linear-gradient(135deg, #1e293b, #334155);
      border-color: #60a5fa;
    }
    .skill-node.locked {
      background: rgba(2,6,23,.66);
      border-color: rgba(71,85,105,.38);
      color: #64748b;
      filter: grayscale(.85);
      opacity: .38;
      box-shadow: 0 0 18px rgba(15,23,42,.55);
    }
    .skill-node.major {
      width: 66px;
      height: 66px;
      font-size: 9px;
    }
    .skill-node span {
      display: block;
      font-size: 7px;
      color: rgba(226,232,240,.72);
      margin-top: 2px;
    }
    a.skill-node, a.skill-core {
      text-decoration: none;
    }
    .talent-detail {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
      gap: 18px;
      align-items: start;
    }
    .talent-title {
      font-size: 34px;
      margin: 8px 0 10px;
    }
    .talent-effect {
      border: 1px solid rgba(96,165,250,.35);
      background: rgba(37,99,235,.12);
      border-radius: 18px;
      padding: 16px;
      margin: 14px 0;
    }
    .talent-prompt {
      border: 1px solid rgba(34,197,94,.35);
      background: rgba(22,163,74,.10);
      border-radius: 18px;
      padding: 16px;
      margin: 14px 0;
    }
    .talent-actions form {
      display: inline;
    }
    .talent-meta-list {
      margin: 0;
      padding-left: 18px;
    }
    .trial-step {
      border: 1px solid rgba(148,163,184,.25);
      background: rgba(15,23,42,.72);
      border-radius: 18px;
      padding: 16px;
      margin: 14px 0;
    }
    .trial-step h3 {
      margin-top: 0;
    }
    .xp-badge {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(245,158,11,.16);
      border: 1px solid rgba(245,158,11,.35);
      color: #fde68a;
      font-weight: 900;
      margin-bottom: 10px;
    }
    .complete-burst {
      text-align: center;
      padding: 34px;
      border-radius: 28px;
      border: 1px solid rgba(245,158,11,.34);
      background:
        radial-gradient(circle at top, rgba(245,158,11,.22), transparent 32%),
        radial-gradient(circle at bottom left, rgba(34,197,94,.16), transparent 30%),
        linear-gradient(135deg, #111827, #020617);
      box-shadow: 0 24px 60px rgba(0,0,0,.46);
      animation: fadeUp .35s ease-out;
    }
    .complete-burst h2 {
      font-size: 38px;
      margin: 8px 0 10px;
    }
    .reward-big {
      display: inline-block;
      margin: 12px 0;
      padding: 12px 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, #f59e0b, #22c55e);
      color: #07111f;
      font-weight: 950;
      font-size: 22px;
      box-shadow: 0 0 34px rgba(245,158,11,.28);
    }
    .unlock-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }
    .unlock-card {
      border: 1px solid rgba(96,165,250,.28);
      background: rgba(15,23,42,.72);
      border-radius: 18px;
      padding: 14px;
    }
    .next-talent-cta {
      display: block;
      margin-top: 14px;
      padding: 18px;
      border-radius: 20px;
      border: 1px solid rgba(34,197,94,.36);
      background:
        radial-gradient(circle at top left, rgba(34,197,94,.18), transparent 34%),
        rgba(15,23,42,.84);
      text-decoration: none;
      color: #e5e7eb;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .next-talent-cta:hover {
      transform: translateY(-2px);
      border-color: #86efac;
      box-shadow: 0 18px 38px rgba(0,0,0,.36);
    }
    .next-talent-cta b {
      color: #bbf7d0;
      font-size: 18px;
    }
    .next-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
    }
    .next-actions a {
      display: inline-block;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(147,197,253,.35);
      text-decoration: none;
      color: #dbeafe;
      font-weight: 900;
      background: rgba(37,99,235,.14);
    }
    .next-actions a.primary {
      border-color: rgba(34,197,94,.48);
      color: #bbf7d0;
      background: rgba(34,197,94,.14);
    }
    .reward-note {
      margin-top: 10px;
      color: #94a3b8;
      font-size: 15px;
    }
    .skilltree-zoom-panel {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 12px 0 16px;
      padding: 10px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(15,23,42,.7);
      width: fit-content;
    }
    .skilltree-zoom-panel button {
      border-radius: 999px;
      padding: 8px 13px;
      border: 1px solid rgba(96,165,250,.35);
      background: rgba(37,99,235,.14);
      color: #dbeafe;
      font-weight: 950;
      cursor: pointer;
    }
    .skilltree-zoom-panel span {
      color: #94a3b8;
      font-weight: 800;
      padding: 0 4px;
    }
    @media (max-width: 760px) {
      .talent-detail {
        grid-template-columns: 1fr;
      }
    }
    .node-en-1 { left: 50%; top: 21%; transform: translate(-50%, -50%); }
    .node-en-2 { left: 39%; top: 16%; transform: translate(-50%, -50%); }
    .node-en-3 { left: 61%; top: 16%; transform: translate(-50%, -50%); }
    .node-en-4 { left: 50%; top: 8%; transform: translate(-50%, -50%); }

    .node-de-1 { left: 24%; top: 39%; transform: translate(-50%, -50%); }
    .node-de-2 { left: 15%; top: 31%; transform: translate(-50%, -50%); }
    .node-de-3 { left: 13%; top: 49%; transform: translate(-50%, -50%); }
    .node-de-4 { left: 7%; top: 39%; transform: translate(-50%, -50%); }

    .node-dev-1 { left: 76%; top: 39%; transform: translate(-50%, -50%); }
    .node-dev-2 { left: 85%; top: 31%; transform: translate(-50%, -50%); }
    .node-dev-3 { left: 87%; top: 49%; transform: translate(-50%, -50%); }
    .node-dev-4 { left: 93%; top: 39%; transform: translate(-50%, -50%); }

    .node-ch-1 { left: 50%; top: 76%; transform: translate(-50%, -50%); }
    .node-ch-2 { left: 38%; top: 83%; transform: translate(-50%, -50%); }
    .node-ch-3 { left: 62%; top: 83%; transform: translate(-50%, -50%); }
    .node-ch-4 { left: 50%; top: 93%; transform: translate(-50%, -50%); }

    .skill-label {
      position: absolute;
      z-index: 5;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      border: 1px solid rgba(148,163,184,.24);
      background: rgba(15,23,42,.72);
      backdrop-filter: blur(8px);
      color: #e5e7eb;
    }
    .label-en { left: 50%; top: 3%; transform: translateX(-50%); }
    .label-de { left: 5%; top: 26%; }
    .label-dev { right: 5%; top: 26%; }
    .label-ch { left: 50%; bottom: 1.5%; transform: translateX(-50%); }

    .skill-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }
    .legend-pill {
      border: 1px solid #334155;
      background: #111827;
      border-radius: 999px;
      padding: 8px 12px;
      color: #cbd5e1;
      font-weight: 800;
      font-size: 13px;
    }
    @keyframes starDrift {
      from { transform: translate3d(0,0,0); }
      to { transform: translate3d(46px,46px,0); }
    }
    .skill-note {
      margin-top: 18px;
      padding: 18px;
      border: 1px solid #334155;
      border-radius: 22px;
      background: #111827;
    }
    @keyframes skillPulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.035); }
    }
    @keyframes nodePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,.38), 0 12px 26px rgba(0,0,0,.32); }
      50% { box-shadow: 0 0 0 12px rgba(96,165,250,0), 0 20px 38px rgba(0,0,0,.45); }
    }
    

    /* SwissDevPath Unified RPG Safe UI */
    :root {
      --rpg-panel: rgba(15, 23, 42, .82);
      --rpg-border: rgba(148, 163, 184, .24);
      --rpg-gold: #fbbf24;
      --rpg-blue: #60a5fa;
      --rpg-green: #34d399;
      --rpg-muted: #94a3b8;
    }

    .hero, .card, .complete-burst, .talent-effect, .talent-prompt, .trial-step, .unlock-card, .next-talent-cta {
      border-radius: 22px;
      border: 1px solid var(--rpg-border);
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.08), transparent 34%),
        rgba(15,23,42,.78);
      box-shadow: 0 18px 44px rgba(0,0,0,.32);
    }

    .hero {
      border-color: rgba(96,165,250,.28);
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.22), transparent 34%),
        radial-gradient(circle at top right, rgba(248,113,113,.12), transparent 28%),
        linear-gradient(135deg, #111827, #020617);
    }

    .skilltree-map {
      min-height: 1550px !important;
      background:
        radial-gradient(circle at 50% 50%, rgba(37,99,235,.18), transparent 15%),
        radial-gradient(circle at 18% 34%, rgba(245,158,11,.12), transparent 18%),
        radial-gradient(circle at 85% 38%, rgba(34,197,94,.13), transparent 20%),
        radial-gradient(circle at 48% 86%, rgba(248,113,113,.12), transparent 22%),
        linear-gradient(180deg, #0f172a 0%, #020617 70%, #000 100%) !important;
    }

    .skill-node {
      width: 34px !important;
      height: 34px !important;
      font-size: 0 !important;
      line-height: 1 !important;
      padding: 0 !important;
      border-radius: 999px;
      display: grid;
      place-items: center;
      overflow: visible;
      text-decoration: none;
    }

    .skill-node.major {
      width: 46px !important;
      height: 46px !important;
      font-size: 0 !important;
    }

    .skill-core {
      width: 98px !important;
      height: 98px !important;
      font-size: 12px !important;
      text-decoration: none;
    }

    .skill-node span {
      display: none !important;
    }

    .skill-node::before {
      content: attr(data-glyph);
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      font-size: 10px;
      font-weight: 950;
      color: #e5e7eb;
      letter-spacing: -.03em;
    }

    .skill-node.major::before {
      font-size: 12px;
    }

    .skill-node.done {
      background:
        radial-gradient(circle at 32% 25%, rgba(255,255,255,.34), transparent 20%),
        linear-gradient(135deg, #166534, #22c55e) !important;
      border-color: rgba(134,239,172,.75) !important;
    }

    .skill-node.current {
      background:
        radial-gradient(circle at 32% 25%, rgba(255,255,255,.35), transparent 20%),
        linear-gradient(135deg, #2563eb, #7c3aed) !important;
      border-color: rgba(191,219,254,.85) !important;
    }

    .skill-node.available {
      background:
        radial-gradient(circle at 32% 25%, rgba(255,255,255,.22), transparent 20%),
        linear-gradient(135deg, #1e293b, #334155) !important;
      border-color: rgba(96,165,250,.7) !important;
    }

    .skill-node.locked {
      background: rgba(2,6,23,.54) !important;
      border-color: rgba(71,85,105,.32) !important;
      color: #64748b !important;
      filter: grayscale(.92);
      opacity: .26;
      box-shadow: 0 0 14px rgba(15,23,42,.6);
    }

    .skill-node::after {
      content:
        attr(data-title) "\\A"
        attr(data-path) " · " attr(data-state) "\\A\\A"
        "Lore: " attr(data-lore) "\\A\\A"
        "Unlock: " attr(data-unlock) "\\A\\A"
        "Trial: " attr(data-trial);
      white-space: pre-wrap;
      position: absolute;
      left: 50%;
      bottom: calc(100% + 12px);
      transform: translateX(-50%) translateY(6px);
      width: min(420px, 86vw);
      padding: 15px;
      border-radius: 16px;
      border: 1px solid rgba(245,158,11,.38);
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.13), transparent 34%),
        rgba(2,6,23,.97);
      box-shadow: 0 22px 54px rgba(0,0,0,.58), 0 0 26px rgba(245,158,11,.13);
      color: #e5e7eb;
      opacity: 0;
      pointer-events: none;
      z-index: 999;
      transition: opacity .12s ease, transform .12s ease;
      text-align: left;
      font-size: 13px;
      line-height: 1.35;
    }

    .skill-node:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .path-label {
      position: absolute;
      z-index: 6;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.24);
      background: rgba(2,6,23,.72);
      color: #e5e7eb;
      font-weight: 950;
      font-size: 13px;
      backdrop-filter: blur(8px);
    }

    .path-label small {
      color: #94a3b8;
      font-weight: 800;
      margin-left: 6px;
    }

    .path-voice { left: 50%; top: 3%; transform: translateX(-50%); }
    .path-gate { left: 4%; top: 31%; }
    .path-forge { right: 4%; top: 31%; }
    .path-alps { left: 50%; bottom: 2%; transform: translateX(-50%); }


    /* SwissDevPath RPG Page Unification */
    .rpg-page-shell {
      max-width: 1160px;
      margin: 0 auto;
    }

    .rpg-panel {
      border-radius: 24px;
      border: 1px solid rgba(148,163,184,.24);
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.09), transparent 34%),
        rgba(15,23,42,.82);
      box-shadow: 0 18px 44px rgba(0,0,0,.34);
      padding: 20px;
      margin: 16px 0;
    }

    .rpg-panel.gold {
      border-color: rgba(245,158,11,.34);
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.14), transparent 34%),
        rgba(15,23,42,.84);
    }

    .rpg-panel.green {
      border-color: rgba(34,197,94,.34);
      background:
        radial-gradient(circle at top left, rgba(34,197,94,.12), transparent 34%),
        rgba(15,23,42,.84);
    }

    .rpg-panel.red {
      border-color: rgba(248,113,113,.32);
      background:
        radial-gradient(circle at top left, rgba(248,113,113,.10), transparent 34%),
        rgba(15,23,42,.84);
    }

    .rpg-kicker {
      display: inline-flex;
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid rgba(96,165,250,.3);
      background: rgba(37,99,235,.16);
      color: #bfdbfe;
      font-size: 13px;
      font-weight: 950;
      margin-bottom: 10px;
    }

    .rpg-title {
      margin: 0 0 10px;
      font-size: clamp(28px, 4vw, 42px);
      color: #f8fafc;
      letter-spacing: -.04em;
      line-height: 1.05;
    }

    .rpg-text {
      color: #cbd5e1;
      line-height: 1.55;
      font-size: 16px;
    }

    .rpg-stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .rpg-stat {
      border-radius: 18px;
      border: 1px solid rgba(148,163,184,.2);
      background: rgba(2,6,23,.42);
      padding: 14px;
    }

    .rpg-stat span {
      display: block;
      color: #94a3b8;
      font-size: 13px;
      font-weight: 800;
    }

    .rpg-stat strong {
      display: block;
      margin-top: 5px;
      font-size: 22px;
      color: #f8fafc;
    }

    .rpg-two-col {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
      gap: 18px;
      align-items: start;
    }

    @media (max-width: 820px) {
      .rpg-two-col {
        grid-template-columns: 1fr;
      }
    }

    .rpg-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .rpg-link-button {
      display: inline-block;
      border-radius: 999px;
      padding: 10px 15px;
      border: 1px solid rgba(96,165,250,.38);
      background: rgba(37,99,235,.16);
      color: #dbeafe;
      text-decoration: none;
      font-weight: 950;
    }

    .rpg-link-button.primary {
      border-color: rgba(34,197,94,.46);
      background: rgba(34,197,94,.15);
      color: #bbf7d0;
    }

    .rpg-link-button.gold {
      border-color: rgba(245,158,11,.46);
      background: rgba(245,158,11,.15);
      color: #fde68a;
    }

    .quest-card {
      border-radius: 20px;
      border: 1px solid rgba(148,163,184,.22);
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.08), transparent 32%),
        rgba(2,6,23,.38);
      padding: 16px;
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .quest-card:hover {
      transform: translateY(-2px);
      border-color: rgba(96,165,250,.5);
      box-shadow: 0 18px 38px rgba(0,0,0,.32);
    }

    .codex-line {
      border-left: 3px solid rgba(245,158,11,.48);
      padding-left: 14px;
      margin: 14px 0;
    }

    .trial-chamber textarea {
      width: 100%;
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,.28);
      background: rgba(2,6,23,.65);
      color: #e5e7eb;
      padding: 12px;
      font-size: 15px;
      box-sizing: border-box;
    }

    .trial-chamber textarea:focus {
      outline: none;
      border-color: rgba(96,165,250,.7);
      box-shadow: 0 0 0 3px rgba(96,165,250,.12);
    }


    /* SwissDevPath Global RPG Skin v2 */
    body {
      background:
        radial-gradient(circle at 18% 8%, rgba(37,99,235,.16), transparent 28%),
        radial-gradient(circle at 82% 14%, rgba(34,197,94,.10), transparent 24%),
        radial-gradient(circle at 48% 90%, rgba(248,113,113,.10), transparent 28%),
        linear-gradient(180deg, #020617 0%, #0f172a 46%, #020617 100%) !important;
      color: #e5e7eb !important;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px),
        radial-gradient(circle, rgba(147,197,253,.16) 1px, transparent 1px);
      background-size: 54px 54px, 96px 96px;
      opacity: .16;
      z-index: -1;
    }

    header {
      border-bottom: 1px solid rgba(148,163,184,.18) !important;
      background:
        linear-gradient(180deg, rgba(2,6,23,.96), rgba(2,6,23,.72)) !important;
      backdrop-filter: blur(12px);
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    nav a {
      border: 1px solid rgba(96,165,250,.24) !important;
      background: rgba(15,23,42,.68) !important;
      color: #dbeafe !important;
      border-radius: 999px !important;
      padding: 8px 12px !important;
      text-decoration: none !important;
      font-weight: 900 !important;
      transition: transform .14s ease, border-color .14s ease, background .14s ease;
    }

    nav a:hover {
      transform: translateY(-1px);
      border-color: rgba(96,165,250,.58) !important;
      background: rgba(37,99,235,.20) !important;
    }

    .global-rpg-hud {
      max-width: 1160px;
      margin: 18px auto 0;
      padding: 22px;
      border-radius: 28px;
      border: 1px solid rgba(148,163,184,.22);
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.20), transparent 34%),
        radial-gradient(circle at top right, rgba(245,158,11,.12), transparent 26%),
        rgba(15,23,42,.78);
      box-shadow: 0 24px 58px rgba(0,0,0,.42);
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: center;
    }

    .global-rpg-hud h1 {
      margin: 0;
      font-size: clamp(30px, 5vw, 48px);
      line-height: 1;
      letter-spacing: -.05em;
      color: #f8fafc;
    }

    .global-rpg-hud p {
      margin: 8px 0 0;
      color: #94a3b8;
      line-height: 1.45;
    }

    .hud-kicker {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(245,158,11,.34);
      background: rgba(245,158,11,.12);
      color: #fde68a;
      font-weight: 950;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .hud-runes {
      display: grid;
      grid-template-columns: repeat(2, minmax(72px, 1fr));
      gap: 8px;
      min-width: 170px;
    }

    .hud-runes span {
      text-align: center;
      border-radius: 999px;
      border: 1px solid rgba(96,165,250,.22);
      background: rgba(2,6,23,.48);
      color: #cbd5e1;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 950;
    }

    main, .container {
      max-width: 1160px !important;
    }

    h1, h2, h3 {
      color: #f8fafc;
      letter-spacing: -.02em;
    }

    .hero {
      border-radius: 28px !important;
      border: 1px solid rgba(96,165,250,.28) !important;
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(34,197,94,.08), transparent 28%),
        rgba(15,23,42,.78) !important;
      box-shadow: 0 24px 58px rgba(0,0,0,.38) !important;
    }

    .card,
    .quest-card,
    .talent-effect,
    .talent-prompt,
    .trial-step,
    .complete-burst,
    .unlock-card,
    .next-talent-cta,
    .stat,
    .rpg-panel {
      border-radius: 22px !important;
      border: 1px solid rgba(148,163,184,.22) !important;
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.08), transparent 30%),
        rgba(15,23,42,.78) !important;
      box-shadow: 0 18px 44px rgba(0,0,0,.30) !important;
    }

    .card:hover,
    .quest-card:hover,
    .unlock-card:hover,
    .next-talent-cta:hover {
      border-color: rgba(96,165,250,.50) !important;
      box-shadow: 0 22px 54px rgba(0,0,0,.40) !important;
    }

    .track-badge,
    .status,
    .xp-badge,
    .legend-pill {
      border-radius: 999px !important;
      border: 1px solid rgba(96,165,250,.28) !important;
      background: rgba(37,99,235,.14) !important;
      color: #bfdbfe !important;
      font-weight: 950 !important;
    }

    .talent-effect,
    .xp-badge,
    .complete-burst {
      border-color: rgba(245,158,11,.32) !important;
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.13), transparent 34%),
        rgba(15,23,42,.82) !important;
    }

    .talent-prompt,
    .trial-step {
      border-color: rgba(34,197,94,.28) !important;
      background:
        radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 34%),
        rgba(15,23,42,.82) !important;
    }

    button,
    .rpg-link-button,
    input[type="submit"] {
      border-radius: 999px !important;
      border: 1px solid rgba(96,165,250,.38) !important;
      background: rgba(37,99,235,.18) !important;
      color: #dbeafe !important;
      font-weight: 950 !important;
      padding: 10px 14px !important;
      cursor: pointer;
      transition: transform .14s ease, filter .14s ease, border-color .14s ease;
    }

    button:hover,
    .rpg-link-button:hover,
    input[type="submit"]:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
      border-color: rgba(147,197,253,.65) !important;
    }

    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"] {
      border-radius: 16px !important;
      border: 1px solid rgba(148,163,184,.28) !important;
      background: rgba(2,6,23,.68) !important;
      color: #e5e7eb !important;
      padding: 12px !important;
      box-sizing: border-box;
    }

    textarea:focus,
    input:focus {
      outline: none !important;
      border-color: rgba(96,165,250,.72) !important;
      box-shadow: 0 0 0 3px rgba(96,165,250,.12) !important;
    }

    pre {
      border-radius: 18px !important;
      border: 1px solid rgba(148,163,184,.22) !important;
      background: rgba(2,6,23,.72) !important;
    }

    .muted {
      color: #94a3b8 !important;
    }

    .skilltree-map {
      border-radius: 34px !important;
      border: 1px solid rgba(148,163,184,.20) !important;
      box-shadow: inset 0 0 80px rgba(0,0,0,.42), 0 24px 70px rgba(0,0,0,.44) !important;
    }

    @media (max-width: 720px) {
      .global-rpg-hud {
        flex-direction: column;
        align-items: flex-start;
      }
      .hud-runes {
        width: 100%;
      }
    }


    /* Skilltree Main Menu Mode */
    .skilltree-main-shell {
      position: relative;
      min-height: calc(100vh - 90px);
      margin-top: 10px;
    }

    .skilltree-main-shell .hero {
      display: none !important;
    }

    .skilltree-main-shell .skill-note {
      display: none !important;
    }

    .skilltree-main-shell .skilltree-zoom-panel,
    .skilltree-main-shell .skilltree-pan-help,
    .skilltree-main-shell .skilltree-outskirts-note {
      position: fixed;
      z-index: 1000;
      left: 24px;
      background: rgba(2,6,23,.78);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(148,163,184,.22);
      box-shadow: 0 18px 42px rgba(0,0,0,.34);
    }

    .skilltree-main-shell .skilltree-zoom-panel {
      top: 92px;
      border-radius: 999px;
      padding: 8px;
    }

    .skilltree-main-shell .skilltree-pan-help {
      top: 150px;
      border-radius: 999px;
      padding: 8px 12px;
    }

    .skilltree-main-shell .skilltree-outskirts-note {
      display: none !important;
    }

    .skilltree-main-shell .skilltree-map {
      min-height: calc(100vh - 115px) !important;
      height: calc(100vh - 115px);
      margin-top: 0;
      border-radius: 28px !important;
      overflow: hidden;
    }

    .skilltree-main-shell .path-label {
      opacity: .78;
      transform: scale(.92);
    }

    .skilltree-main-shell .path-voice {
      top: 5%;
    }

    .skilltree-main-shell .path-gate {
      left: 3%;
    }

    .skilltree-main-shell .path-forge {
      right: 3%;
    }

    .skilltree-main-shell .path-alps {
      bottom: 4%;
    }

    .skilltree-main-title {
      position: fixed;
      z-index: 1000;
      right: 24px;
      top: 92px;
      width: min(360px, calc(100vw - 48px));
      border-radius: 22px;
      border: 1px solid rgba(245,158,11,.30);
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.14), transparent 34%),
        rgba(2,6,23,.78);
      backdrop-filter: blur(10px);
      padding: 16px;
      box-shadow: 0 18px 42px rgba(0,0,0,.34);
    }

    .skilltree-main-title .kicker {
      display: inline-flex;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(245,158,11,.14);
      border: 1px solid rgba(245,158,11,.32);
      color: #fde68a;
      font-weight: 950;
      font-size: 12px;
      margin-bottom: 8px;
    }

    .skilltree-main-title h1 {
      margin: 0;
      color: #f8fafc;
      font-size: 26px;
      letter-spacing: -.04em;
    }

    .skilltree-main-title p {
      margin: 8px 0 0;
      color: #94a3b8;
      line-height: 1.35;
      font-size: 14px;
    }

    .skilltree-main-title .mini-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .skilltree-main-title .mini-actions a {
      border-radius: 999px;
      padding: 8px 10px;
      border: 1px solid rgba(96,165,250,.34);
      background: rgba(37,99,235,.14);
      color: #dbeafe;
      text-decoration: none;
      font-weight: 900;
      font-size: 13px;
    }

    @media (max-width: 900px) {
      .skilltree-main-title {
        position: static;
        width: auto;
        margin: 10px 0;
      }

      .skilltree-main-shell .skilltree-zoom-panel,
      .skilltree-main-shell .skilltree-pan-help {
        position: static;
        margin: 8px 0;
        width: fit-content;
      }

      .skilltree-main-shell .skilltree-map {
        height: 78vh;
        min-height: 78vh !important;
      }
    }


    /* TREE_ONLY_LESSON_SCREEN_SAFE */

body:has(.skilltree-main-shell) header,
    body:has(.skilltree-main-shell) .global-rpg-hud {
      display: none !important;
    }

    body:has(.skilltree-main-shell) {
      overflow: hidden !important;
    }

    body:has(.skilltree-main-shell) main,
    body:has(.skilltree-main-shell) .container {
      max-width: none !important;
      width: 100vw !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body:has(.skilltree-main-shell) .skilltree-main-shell {
      margin: 0 !important;
      min-height: 100vh !important;
    }

    body:has(.skilltree-main-shell) .skilltree-main-title,
    body:has(.skilltree-main-shell) .skilltree-zoom-panel,
    body:has(.skilltree-main-shell) .skilltree-pan-help,
    body:has(.skilltree-main-shell) .skilltree-outskirts-note,
    body:has(.skilltree-main-shell) .skill-note,
    body:has(.skilltree-main-shell) .hero,
    body:has(.skilltree-main-shell) .path-label {
      display: none !important;
    }

    body:has(.skilltree-main-shell) .skilltree-main-shell .skilltree-map,
    body:has(.skilltree-main-shell) .skilltree-map {
      width: 100vw !important;
      height: 100vh !important;
      min-height: 100vh !important;
      margin: 0 !important;
      border-radius: 0 !important;
      border: 0 !important;
    }

    body:has(.skilltree-main-shell) .skill-node,
    body:has(.skilltree-main-shell) .skill-core {
      cursor: pointer;
    }


    /* NODE_LESSON_PACK_V3_VISUALS */
    body:has(.skilltree-main-shell) .skill-node {
      width: 22px !important;
      height: 22px !important;
      border-width: 1.2px !important;
    }

    body:has(.skilltree-main-shell) .skill-node.major {
      width: 28px !important;
      height: 28px !important;
    }

    body:has(.skilltree-main-shell) .skill-core {
      width: 68px !important;
      height: 68px !important;
      font-size: 9px !important;
    }

    body:has(.skilltree-main-shell) .skill-node::before {
      font-size: 6px !important;
    }

    body:has(.skilltree-main-shell) .skill-node.major::before {
      font-size: 7px !important;
    }

    body:has(.skilltree-main-shell) .skill-node:hover {
      transform: translate(-50%, -50%) scale(1.85) !important;
    }

    .lesson-pack-note {
      display: inline-flex;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid rgba(245,158,11,.32);
      background: rgba(245,158,11,.12);
      color: #fde68a;
      font-weight: 950;
      margin: 8px 0 14px;
    }


    /* CSS_ONLY_BALANCED_SKILLTREE_V1 */

    body:has(.skilltree-main-shell) header,
    body:has(.skilltree-main-shell) .global-rpg-hud {
      display: none !important;
    }

    body:has(.skilltree-main-shell) {
      overflow: hidden !important;
      background: #020617 !important;
    }

    body:has(.skilltree-main-shell) main,
    body:has(.skilltree-main-shell) .container {
      width: 100vw !important;
      max-width: none !important;
      height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body:has(.skilltree-main-shell) .skilltree-main-title,
    body:has(.skilltree-main-shell) .skilltree-zoom-panel,
    body:has(.skilltree-main-shell) .skilltree-pan-help,
    body:has(.skilltree-main-shell) .skilltree-outskirts-note,
    body:has(.skilltree-main-shell) .skill-note,
    body:has(.skilltree-main-shell) .hero,
    body:has(.skilltree-main-shell) .path-label {
      display: none !important;
    }

    body:has(.skilltree-main-shell) .skilltree-main-shell {
      width: 100vw !important;
      height: 100vh !important;
      min-height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body:has(.skilltree-main-shell) .skilltree-map {
      width: 100vw !important;
      height: 100vh !important;
      min-height: 100vh !important;
      margin: 0 !important;
      border-radius: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      background:
        radial-gradient(circle at 50% 48%, rgba(96,165,250,.20), transparent 15%),
        radial-gradient(circle at 18% 35%, rgba(245,158,11,.10), transparent 20%),
        radial-gradient(circle at 86% 43%, rgba(34,197,94,.12), transparent 20%),
        radial-gradient(circle at 48% 88%, rgba(248,113,113,.10), transparent 22%),
        radial-gradient(circle at center, transparent 0 42%, rgba(2,6,23,.64) 78%),
        linear-gradient(180deg, #07111f 0%, #020617 70%, #000 100%) !important;
      box-shadow:
        inset 0 0 130px rgba(0,0,0,.76),
        inset 0 0 280px rgba(2,6,23,.90) !important;
    }

    body:has(.skilltree-main-shell) .constellation-lines line {
      stroke-width: 1.15 !important;
      opacity: .48 !important;
      filter:
        drop-shadow(0 0 4px rgba(96,165,250,.28))
        drop-shadow(0 0 9px rgba(96,165,250,.14));
    }

    body:has(.skilltree-main-shell) .constellation-lines .line-done {
      opacity: .62 !important;
      filter:
        drop-shadow(0 0 5px rgba(34,197,94,.30))
        drop-shadow(0 0 12px rgba(34,197,94,.16));
    }

    body:has(.skilltree-main-shell) .constellation-lines .line-locked {
      opacity: .18 !important;
      stroke-dasharray: 6 10;
    }

    body:has(.skilltree-main-shell) .skill-node {
      width: 20px !important;
      height: 20px !important;
      border-width: 1.1px !important;
      box-shadow:
        inset 0 2px 4px rgba(255,255,255,.18),
        inset 0 -5px 9px rgba(0,0,0,.42),
        0 0 8px rgba(96,165,250,.14),
        0 8px 18px rgba(0,0,0,.42) !important;
      transition:
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease,
        filter .16s ease !important;
    }

    body:has(.skilltree-main-shell) .skill-node.major {
      width: 25px !important;
      height: 25px !important;
    }

    body:has(.skilltree-main-shell) .skill-core {
      width: 62px !important;
      height: 62px !important;
      font-size: 8px !important;
      box-shadow:
        inset 0 3px 8px rgba(255,255,255,.20),
        inset 0 -10px 18px rgba(0,0,0,.36),
        0 0 28px rgba(96,165,250,.28),
        0 18px 38px rgba(0,0,0,.50) !important;
    }

    body:has(.skilltree-main-shell) .skill-node::before {
      font-size: 5.5px !important;
      text-shadow:
        0 1px 2px rgba(0,0,0,.75),
        0 0 8px rgba(255,255,255,.22);
    }

    body:has(.skilltree-main-shell) .skill-node.major::before {
      font-size: 6.5px !important;
    }

    body:has(.skilltree-main-shell) .skill-node.current {
      animation: runePulseCssOnly 2.2s ease-in-out infinite !important;
    }

    body:has(.skilltree-main-shell) .skill-node.locked {
      opacity: .18 !important;
      filter: grayscale(1) blur(.2px);
    }

    body:has(.skilltree-main-shell) .skill-node:hover {
      transform: translate(-50%, -50%) scale(1.9) !important;
      z-index: 5000 !important;
      opacity: 1 !important;
      filter: none !important;
      box-shadow:
        inset 0 3px 7px rgba(255,255,255,.30),
        inset 0 -9px 16px rgba(0,0,0,.32),
        0 0 20px rgba(245,158,11,.35),
        0 0 42px rgba(96,165,250,.26),
        0 18px 34px rgba(0,0,0,.55) !important;
    }

    /* Fixed tooltip panel: does not fly away, does not cover half the map */
    body:has(.skilltree-main-shell) .skill-node::after {
      position: fixed !important;
      right: 22px !important;
      top: 92px !important;
      left: auto !important;
      bottom: auto !important;
      transform: translateY(8px) !important;
      width: min(360px, calc(100vw - 44px)) !important;
      max-height: calc(100vh - 150px) !important;
      overflow: auto !important;
      padding: 16px !important;
      border-radius: 20px !important;
      border: 1px solid rgba(245,158,11,.34) !important;
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.14), transparent 34%),
        linear-gradient(180deg, rgba(2,6,23,.96), rgba(15,23,42,.93)) !important;
      box-shadow:
        0 22px 58px rgba(0,0,0,.62),
        0 0 28px rgba(245,158,11,.12) !important;
      backdrop-filter: blur(12px);
      white-space: pre-wrap !important;
      font-size: 13px !important;
      line-height: 1.35 !important;
      font-weight: 800 !important;
      color: #dbeafe !important;
      z-index: 9000 !important;
      pointer-events: none !important;
      opacity: 0 !important;
      content:
        attr(data-title) "\\A"
        attr(data-path) " · " attr(data-state) "\\A\\A"
        "Unlock: " attr(data-unlock) "\\A\\A"
        "Trial: " attr(data-trial) !important;
    }

    body:has(.skilltree-main-shell) .skill-node:hover::after {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    body:has(.skilltree-main-shell) .skill-core::after {
      display: none !important;
    }

    body:has(.skilltree-main-shell)::after {
      content: "Drag to move · Hover to inspect · Click to start lesson";
      position: fixed;
      left: 22px;
      bottom: 18px;
      z-index: 8000;
      padding: 10px 13px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(2,6,23,.70);
      backdrop-filter: blur(10px);
      color: #94a3b8;
      font-size: 13px;
      font-weight: 850;
      pointer-events: none;
    }

    @keyframes runePulseCssOnly {
      0%, 100% {
        box-shadow:
          inset 0 2px 5px rgba(255,255,255,.26),
          inset 0 -8px 14px rgba(0,0,0,.32),
          0 0 16px rgba(96,165,250,.38),
          0 0 0 0 rgba(96,165,250,.34),
          0 12px 26px rgba(0,0,0,.44);
      }
      50% {
        box-shadow:
          inset 0 2px 5px rgba(255,255,255,.30),
          inset 0 -8px 14px rgba(0,0,0,.32),
          0 0 28px rgba(96,165,250,.58),
          0 0 0 12px rgba(96,165,250,0),
          0 18px 34px rgba(0,0,0,.52);
      }
    }

    @media (max-width: 900px) {
      body:has(.skilltree-main-shell) .skill-node::after {
        left: 14px !important;
        right: 14px !important;
        top: auto !important;
        bottom: 14px !important;
        width: auto !important;
        max-height: 42vh !important;
      }

      body:has(.skilltree-main-shell)::after {
        display: none !important;
      }
    }



/* SKILLTREE_READABILITY_FINAL_V3 */
body:has(.skilltree-main-shell) {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
}
body:has(.skilltree-main-shell) .skill-label {
  z-index: 1200 !important; box-sizing: border-box !important; max-width: min(260px, 32vw) !important; padding: 7px 12px !important; border-radius: 999px !important; font-size: clamp(11px, .82vw, 14px) !important; line-height: 1 !important; font-weight: 850 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: rgba(226,232,240,.88) !important; background: rgba(15,23,42,.58) !important; border: 1px solid rgba(148,163,184,.18) !important; box-shadow: 0 10px 28px rgba(0,0,0,.22) !important; backdrop-filter: blur(10px) !important; pointer-events: none !important;
}
body:has(.skilltree-main-shell) .label-en { top: 22px !important; left: 50% !important; transform: translateX(-50%) !important; }
body:has(.skilltree-main-shell) .label-de { left: 28px !important; top: 24vh !important; transform: none !important; }
body:has(.skilltree-main-shell) .label-dev { right: 28px !important; top: 24vh !important; transform: none !important; }
body:has(.skilltree-main-shell) .label-ch { left: 50% !important; bottom: 30px !important; transform: translateX(-50%) !important; }
body:has(.skilltree-main-shell) .skill-node { z-index: 80 !important; width: 19px !important; height: 19px !important; border-width: 1px !important; }
body:has(.skilltree-main-shell) .skill-node.major { width: 23px !important; height: 23px !important; }
body:has(.skilltree-main-shell) .skill-core { z-index: 140 !important; width: 58px !important; height: 58px !important; font-size: 8px !important; line-height: 1.08 !important; }
body:has(.skilltree-main-shell) .skill-core small { font-size: 7px !important; opacity: .74 !important; }
body:has(.skilltree-main-shell) .skill-node span { font-size: 0 !important; }
body:has(.skilltree-main-shell) .skill-node::before { font-size: 5.5px !important; font-weight: 900 !important; line-height: 1 !important; }
body:has(.skilltree-main-shell) .skill-node.major::before { font-size: 6px !important; }
body:has(.skilltree-main-shell) .skill-node:hover { transform: translate(-50%, -50%) scale(1.42) !important; z-index: 3000 !important; }
body:has(.skilltree-main-shell) .skill-node.major:hover { transform: translate(-50%, -50%) scale(1.34) !important; }
body:has(.skilltree-main-shell) .constellation-lines { pointer-events: none !important; }
body:has(.skilltree-main-shell) .constellation-lines line { stroke-width: .95 !important; opacity: .34 !important; }
body:has(.skilltree-main-shell) .constellation-lines .line-done { opacity: .50 !important; }
body:has(.skilltree-main-shell) .constellation-lines .line-locked { opacity: .13 !important; }
body:has(.skilltree-main-shell) .skill-node::after {
  box-sizing: border-box !important; position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 18px !important; transform: translateX(-50%) translateY(8px) !important; width: min(560px, calc(100vw - 40px)) !important; max-height: 132px !important; overflow: hidden !important; padding: 12px 15px !important; border-radius: 18px !important; border: 1px solid rgba(148,163,184,.24) !important; background: radial-gradient(circle at top left, rgba(96,165,250,.14), transparent 36%), linear-gradient(180deg, rgba(2,6,23,.94), rgba(15,23,42,.90)) !important; box-shadow: 0 18px 42px rgba(0,0,0,.56), 0 0 22px rgba(96,165,250,.10) !important; backdrop-filter: blur(14px) !important; white-space: pre-line !important; text-align: left !important; font-size: 11.5px !important; line-height: 1.24 !important; font-weight: 650 !important; color: rgba(226,232,240,.92) !important; z-index: 9000 !important; pointer-events: none !important; opacity: 0 !important; content: attr(data-title) "\\A" attr(data-path) " · " attr(data-state) "\\A" "Trial: " attr(data-trial) !important;
}
body:has(.skilltree-main-shell) .skill-node:hover::after { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
body:has(.skilltree-main-shell)::after { left: 18px !important; bottom: 18px !important; padding: 8px 11px !important; font-size: 11.5px !important; line-height: 1 !important; font-weight: 750 !important; color: rgba(148,163,184,.82) !important; background: rgba(2,6,23,.54) !important; border-color: rgba(148,163,184,.18) !important; }
@media (max-width: 900px) {
  body:has(.skilltree-main-shell) .skill-label { max-width: 42vw !important; font-size: 10.5px !important; padding: 6px 9px !important; }
  body:has(.skilltree-main-shell) .label-de { left: 12px !important; }
  body:has(.skilltree-main-shell) .label-dev { right: 12px !important; }
  body:has(.skilltree-main-shell) .skill-node::after { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-height: 30vh !important; transform: translateY(8px) !important; font-size: 11px !important; }
  body:has(.skilltree-main-shell) .skill-node:hover::after { transform: translateY(0) !important; }
}


/* SwissDevPath C1 main screen pass */
.skilltree-main-shell {
  max-width: 1440px;
  margin: 0 auto;
}
.mission-control-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,.20);
  background:
    radial-gradient(circle at 10% 10%, rgba(59,130,246,.24), transparent 32%),
    radial-gradient(circle at 94% 22%, rgba(34,197,94,.16), transparent 30%),
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(2,6,23,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
}
.mission-copy h2 {
  margin: 4px 0 10px;
  font-size: clamp(28px, 4.8vw, 56px);
  line-height: .95;
  letter-spacing: -.055em;
  max-width: 920px;
}
.mission-copy .muted {
  max-width: 820px;
  font-size: 15px;
  line-height: 1.55;
}
.mission-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mission-stats div {
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 20px;
  padding: 12px;
  background: rgba(2,6,23,.46);
}
.mission-stats span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mission-stats strong {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  color: #f8fafc;
}
.roadmap-board {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.58);
}
.roadmap-title h3 { margin: 0 0 8px; font-size: 22px; }
.roadmap-title p { margin: 0; color: #94a3b8; line-height: 1.45; }
.roadmap-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.roadmap-track {
  display: grid;
  gap: 4px;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid rgba(96,165,250,.18);
  background: rgba(2,6,23,.36);
}
.roadmap-track b { color: #e2e8f0; }
.roadmap-track span { color: #94a3b8; font-size: 12px; line-height: 1.35; }
.roadmap-track em { color: #93c5fd; font-style: normal; font-size: 11px; font-weight: 900; }
.skill-legend.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.skill-legend.compact .legend-pill {
  padding: 7px 10px;
  font-size: 11px;
  border-radius: 999px;
  background: rgba(15,23,42,.62);
  border: 1px solid rgba(148,163,184,.18);
  color: #cbd5e1;
}
.skill-legend.compact .done { border-color: rgba(34,197,94,.45); }
.skill-legend.compact .current { border-color: rgba(96,165,250,.55); }
.skill-legend.compact .available { border-color: rgba(245,158,11,.45); }
.skill-legend.compact .locked { opacity: .62; }
.skilltree-map {
  min-height: 1280px;
  max-height: none;
}
.skill-node::after {
  content:
    attr(data-title) "\A"
    attr(data-path) " · " attr(data-level) " · " attr(data-state) "\A"
    attr(data-trial) !important;
}
.skill-node[data-level="C1"] {
  outline: 1px solid rgba(250,204,21,.82);
  box-shadow: 0 0 22px rgba(250,204,21,.22), 0 14px 30px rgba(0,0,0,.42);
}
.roadmap-next {
  max-width: 980px;
  margin: 18px auto 0;
}
@media (max-width: 900px) {
  .mission-control-hero,
  .roadmap-board { grid-template-columns: 1fr; }
  .mission-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mission-copy h2 { font-size: 34px; }
}


/* SKILLTREE_SCROLL_FIX_V3 */

html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.skilltree-main-shell) {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.skilltree-main-shell) .game-shell,
body:has(.skilltree-main-shell) .skilltree-main-shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

body:has(.skilltree-main-shell) .skilltree-main-shell {
  padding-bottom: 80px !important;
}

body:has(.skilltree-main-shell) .mission-control-hero,
body:has(.skilltree-main-shell) .roadmap-board,
body:has(.skilltree-main-shell) .skilltree-legend {
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}

body:has(.skilltree-main-shell) .skilltree-zoom-panel {
  position: relative !important;
  height: auto !important;
  min-height: 980px !important;
  overflow: visible !important;
  margin-top: 20px !important;
}

body:has(.skilltree-main-shell) .skilltree-map {
  position: relative !important;
  height: 960px !important;
  min-height: 960px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

body:has(.skilltree-main-shell) .skilltree-pan-layer {
  min-height: 960px !important;
}

body:has(.skilltree-main-shell) .skill-label {
  position: absolute !important;
}

body:has(.skilltree-main-shell) .label-de,
body:has(.skilltree-main-shell) .label-dev {
  top: 180px !important;
}

@media (max-height: 850px) {
  body:has(.skilltree-main-shell) .skilltree-zoom-panel {
    min-height: 900px !important;
  }

  body:has(.skilltree-main-shell) .skilltree-map,
  body:has(.skilltree-main-shell) .skilltree-pan-layer {
    height: 900px !important;
    min-height: 900px !important;
  }
}