/* Full-screen skill constellation. Each skill carries its own artwork palette. */
#skill-tree-panel {
  position: fixed; z-index: 20; inset: 0; transform: none;
  width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; min-width: 0;
  box-sizing: border-box; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; overflow: auto; overscroll-behavior: contain;
  scroll-padding: 108px 0 24px; color: #eff5ff;
  background:
    radial-gradient(ellipse at 14% 65%, #07697d47, transparent 48%),
    radial-gradient(ellipse at 59% 20%, #7125ba40, transparent 50%),
    radial-gradient(ellipse at 100% 90%, #c2297040, transparent 45%), #080d20;
}
.skill-tree-header {
  position: sticky; top: 0; z-index: 5; flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px;
  padding: max(22px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) 20px max(32px, env(safe-area-inset-left));
  border-bottom: 1px solid #929aff28; background: #0b1027f5;
}
.skill-tree-eyebrow { margin: 0 0 6px; color: #9d9fff; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
#skill-tree-title { margin: 0; color: #f5f3ff; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.1; letter-spacing: .03em; text-align: left; }
.skill-tree-note { grid-column: 3; grid-row: 1; margin: 0; padding-right: 58px; color: #b2bddb; font-size: 12px; line-height: 1.7; text-align: right; }
.skill-tree-note strong { display: block; color: #6df0d1; font-size: 13px; letter-spacing: .05em; }
#skill-tree-panel #skill-tree-category-toggle {
  grid-column: 2; grid-row: 1; justify-self: center; width: auto; min-height: 46px;
  padding: 12px 20px; border: 1px solid #bd9fff; border-radius: 12px;
  background: linear-gradient(145deg, #674296, #392759); color: #f5edff;
  font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: .02em; cursor: pointer;
}
#skill-tree-panel #skill-tree-category-toggle:hover { background: #735099; border-color: #fff; }
#skill-tree-panel #skill-tree-category-toggle:focus-visible { outline: 3px solid #7ff6ff; outline-offset: 3px; }
#skill-tree-panel #skill-tree-back {
  position: fixed; z-index: 8; top: max(22px, env(safe-area-inset-top)); right: max(26px, env(safe-area-inset-right));
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; min-height: 48px; max-width: none;
  padding: 0; border: 1px solid #a0aaff77; border-radius: 12px; color: #e7edff;
  background: #202b4a; font-size: 28px; line-height: 1; cursor: pointer;
}
#skill-tree-panel #skill-tree-back:hover { border-color: #f2baff; background: #593875; color: #fff; }
#skill-tree-panel #skill-tree-back:focus-visible { outline: 3px solid #7ff6ff; outline-offset: 3px; }
.skill-tree-layout {
  flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: center; gap: clamp(18px, 3vw, 56px); width: 100%; box-sizing: border-box;
  padding: 24px max(32px, env(safe-area-inset-right)) 18px max(32px, env(safe-area-inset-left));
}
.skill-tree-map {
  position: relative; width: min(100%, calc(100dvh - 200px)); min-width: 0;
  aspect-ratio: 1; align-self: center; justify-self: center; isolation: isolate;
  background: radial-gradient(ellipse, #4570dd23 0%, #7f45e912 45%, transparent 70%);
}
.skill-tree-map::before, .skill-tree-map::after {
  content: ''; position: absolute; inset: 13%; border: 1px solid #a59cff16; border-radius: 50%; pointer-events: none;
}
.skill-tree-map::after { inset: 23%; border-style: dashed; border-color: #6cceff25; }
.skill-tree-grid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.skill-tree-cells use { stroke: #8d80ed; }
.skill-tree-cells use:nth-child(3n) { stroke: #52d9ee; }
.skill-tree-cells use:nth-child(3n + 1) { stroke: #e87dcc; }
.skill-tree-links { fill: none; stroke: url(#skill-tree-link-color); stroke-width: 3; opacity: .8; }
#skill-tree-nodes { position: absolute; inset: 0; pointer-events: none; }
[data-skill="powerhouse"] { --skill-color: #ff9a48; }
[data-skill="racer"] { --skill-color: #40e5ed; }
[data-skill="iron-heart"] { --skill-color: #ff6b9e; }
[data-skill="ironman"] { --skill-color: #6caaff; }
[data-skill="fighter"] { --skill-color: #ffd568; }
[data-skill="upgraded-arrows"] { --skill-color: #66efb3; }
[data-skill="sharpened-weapons"] { --skill-color: #87e3ff; }
[data-skill="spell-master"] { --skill-color: #bc8cff; }
[data-skill="gladiator"] { --skill-color: #ffbd64; }
[data-skill="vampire"] { --skill-color: #ff547e; }
[data-skill="cat"] { --skill-color: #ed88ff; }
[data-skill="armor-shattering"] { --skill-color: #b8f56a; }
[data-skill="super-power"] { --skill-color: #ff77d9; }
[data-skill="ultra-power"] { --skill-color: #ffbc61; }
[data-skill="ultimate-power"] { --skill-color: #63e9ff; }
[data-skill="hyper-power"] { --skill-color: #be9bff; }
[data-skill="axe-master"] { --skill-color: #ffb56a; }
[data-skill="the-wizard"] { --skill-color: #9aa5ff; }
[data-skill="defensive-upgrades"] { --skill-color: #8de0d3; }
[data-skill="spare-bandages"] { --skill-color: #ffe4a3; }
[data-skill="jack-of-all-trades"] { --skill-color: #7ce4d1; }
[data-skill="master-of-all-trades"] { --skill-color: #ffd474; }
[data-skill="spell-mastery"] { --skill-color: #a2a6ff; }
[data-skill="ruin-of-infinite-oblivion"] { --skill-color: #ed879d; }
#skill-tree-panel .skill-node {
  position: absolute; transform: translate(-50%, -50%); width: 13%; height: 14.6%; min-width: 44px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 9px 4px; border: 0; border-radius: 0; background: #65728c; color: #b8c3dc;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font: 700 clamp(9px, .85vw, 13px)/1.1 'Trebuchet MS', sans-serif;
  letter-spacing: 0; text-transform: none; pointer-events: auto; cursor: pointer; isolation: isolate;
  transition: background .16s, filter .16s;
}
#skill-tree-panel .skill-node::before {
  content: ''; position: absolute; inset: 2px; z-index: -1; clip-path: inherit;
  background: linear-gradient(150deg, #26324c, #0b1228);
}
#skill-tree-panel .skill-node.skill-active { background: var(--skill-color); color: #f7f7ff; }
#skill-tree-panel .skill-node.skill-active::before { background: linear-gradient(150deg, color-mix(in srgb, var(--skill-color) 30%, #121d3c), #0e152c); }
#skill-tree-panel .skill-node.skill-selected { background: #fff4d2; color: #fff; }
#skill-tree-panel .skill-node.skill-selected::before { inset: 3px; background: linear-gradient(150deg, color-mix(in srgb, var(--skill-color) 58%, #121d3c), #151c38); }
#skill-tree-panel .skill-node:hover { background: #fff; color: #fff; filter: brightness(1.2); }
#skill-tree-panel .skill-node:focus-visible { background: #fff; outline: 0; }
#skill-tree-panel .skill-node:focus-visible::before { inset: 4px; }
#skill-tree-panel .skill-node[hidden] { display: none; }
.skill-node-art { display: block; width: 46%; height: 43%; min-height: 18px; flex: 0 1 auto; object-fit: contain; opacity: .5; pointer-events: none; }
.skill-active .skill-node-art, .skill-selected .skill-node-art { opacity: 1; }
.skill-node-name { max-width: 100%; overflow-wrap: normal; text-shadow: 0 1px 3px #05091d; }
.skill-node-name-compact { display: none; }
.skill-node-level { color: var(--skill-color); font-size: 9px; font-weight: 700; }
.skill-detail {
  position: relative; padding: 24px; border: 1px solid color-mix(in srgb, var(--skill-color) 42%, #232742);
  border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--skill-color) 9%, #131b36), #0d142b);
  box-shadow: 0 20px 60px #02061266, 0 0 45px color-mix(in srgb, var(--skill-color) 8%, transparent);
}
.skill-detail-portrait {
  display: grid; place-items: center; position: relative; height: clamp(110px, 17vh, 174px); margin: -4px 0 18px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--skill-color) 22%, transparent), transparent 70%);
}
.skill-detail-portrait::before { content: ''; position: absolute; width: 110px; height: 110px; transform: rotate(45deg); border: 1px solid color-mix(in srgb, var(--skill-color) 35%, transparent); border-radius: 20px; }
#skill-detail-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 15px color-mix(in srgb, var(--skill-color) 25%, transparent)); }
.skill-detail-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
#skill-detail-title { margin: 0; color: #f7f5ff; font-size: 25px; line-height: 1.15; }
#skill-detail[data-skill="armor-shattering"] #skill-detail-title { flex-basis: 100%; min-width: 0; font-size: 23px; line-height: 1.25; overflow-wrap: anywhere; }
#skill-detail-state { padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--skill-color) 40%, transparent); border-radius: 6px; color: var(--skill-color); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
#skill-detail-description { margin: 14px 0; color: #c2cce5; font-size: 13px; line-height: 1.6; }
#skill-detail-slot-cost { margin: 8px 0; color: var(--skill-color); font-size: 12px; font-weight: 700; }
.skill-power-links { stroke: #ffbcdb; stroke-dasharray: 4 4; }
#skill-power-choices { margin-top: 18px; padding-top: 14px; border-top: 1px solid #7683ab44; }
#skill-power-choices h4 { margin: 0; font-size: 14px; color: #f4dcff; }
#skill-power-choices p { margin: 8px 0 12px; color: #bdc9e2; font-size: 12px; line-height: 1.5; }
.skill-power-options { display: grid; gap: 8px; }
#skill-tree-panel .skill-power-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-height: 54px; padding: 10px 12px; border: 1px solid #7889bb77; border-radius: 8px; background: #192641; color: #eef2ff; text-align: left; text-transform: none; letter-spacing: 0; font-size: 13px; cursor: pointer; }
#skill-tree-panel .skill-power-choice span { color: #bdc9e2; font-size: 11px; }
#skill-tree-panel .skill-power-choice[aria-pressed="true"] { border-color: #b5ffec; background: #23464f; }
#skill-tree-panel .skill-power-choice:hover { border-color: #fff; }
#skill-tree-panel .skill-power-choice:focus-visible { outline: 2px solid #a4edff; outline-offset: 3px; }
#skill-power-choices[hidden], #skill-tree-levels[hidden], #skill-level-label[hidden] { display: none; }
.skill-effects { margin: 16px 0; padding: 0; list-style: none; }
.skill-effects li { display: grid; grid-template-columns: 43px 1fr; gap: 10px; margin: 7px 0; padding: 10px; border: 1px solid #7683ab22; border-left: 2px solid #4c5a7f; border-radius: 5px; background: #080e2438; color: #aab8d8; font-size: 12px; line-height: 1.5; }
.skill-effects strong { color: #afbad9; font-size: 10px; text-transform: uppercase; padding-top: 2px; }
.skill-effects li.skill-current-level { border-color: color-mix(in srgb, var(--skill-color) 35%, transparent); border-left-color: var(--skill-color); background: color-mix(in srgb, var(--skill-color) 12%, #10162c); color: #f3f4ff; }
.skill-current-level strong { color: var(--skill-color); }
.skill-level-label { margin: 18px 0 8px; color: #c9d2ea; font-size: 12px; }
#skill-tree-levels { display: flex; flex-wrap: wrap; gap: 6px; }
#skill-tree-panel .skill-level-button { flex: 1 0 56px; width: auto; padding: 10px 5px; min-height: 44px; border: 1px solid #61719a66; border-radius: 7px; background: #1a2540; color: #c8d5f3; font-size: 12px; letter-spacing: 0; text-transform: none; }
#skill-tree-panel .skill-level-button[aria-pressed="true"] { border-color: var(--skill-color); background: var(--skill-color); color: #101426; box-shadow: 0 0 18px color-mix(in srgb, var(--skill-color) 18%, transparent); font-weight: 700; }
#skill-tree-panel .skill-level-button:hover { border-color: #fff; }
#skill-tree-panel .skill-level-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.skill-apply-note { margin: 12px 0 0; color: #9baacb; font-size: 11px; line-height: 1.5; }
.skill-tree-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 32px max(16px, env(safe-area-inset-bottom)); color: #9da9ce; font-size: 11px; }
.skill-tree-hint { margin: 0; }
#skill-tree-status { margin: 0; color: #9ef8df; font-size: 12px; line-height: 1.4; }
#skill-tree-status:empty { display: none; }
@media (max-width: 1100px) {
  .skill-tree-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); padding: 18px; gap: 18px; }
  .skill-detail { padding: 18px; }
  #skill-tree-panel .skill-node { padding: 6px 2px; font-size: 9px; }
  .skill-node-name-full { display: none; }
  .skill-node-name-compact { display: block; }
  .skill-node-level { font-size: 8px; }
}
@media (max-width: 800px) {
  #skill-tree-panel { scroll-padding-top: 156px; }
  .skill-tree-header { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); }
  .skill-tree-header > div { padding-right: 62px; }
  #skill-tree-panel #skill-tree-category-toggle { grid-column: 1; grid-row: 2; min-height: 44px; padding: 10px 18px; }
  .skill-tree-eyebrow { font-size: 8px; letter-spacing: .18em; }
  #skill-tree-title { font-size: 26px; }
  .skill-tree-note { display: none; }
  #skill-tree-panel #skill-tree-back { top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
  .skill-tree-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  .skill-tree-map { width: 100%; max-width: 560px; }
  #skill-tree-panel .skill-node { padding: 7px 2px; gap: 1px; }
  .skill-node-art { width: 54%; height: 45%; }
  .skill-node-level { display: none; }
  .skill-detail { padding: 18px; }
  .skill-detail-portrait { height: 108px; margin: 0 0 15px; }
  .skill-detail-portrait::before { width: 85px; height: 85px; }
  .skill-tree-footer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 8px 18px max(18px, env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .skill-tree-layout { padding-left: 0; padding-right: 0; }
  .skill-detail { margin-left: 12px; margin-right: 12px; }
}
@media (min-width: 801px) and (max-height: 600px) {
  #skill-tree-panel { scroll-padding-top: 86px; }
  .skill-tree-header { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px; }
  #skill-tree-title { font-size: 24px; }
  #skill-tree-panel #skill-tree-back { top: max(14px, env(safe-area-inset-top)); }
  .skill-tree-layout { align-items: start; }
  .skill-tree-map { width: 100%; align-self: start; }
  .skill-detail-portrait { height: 86px; margin-bottom: 14px; }
  .skill-detail-portrait::before { width: 70px; height: 70px; }
  #skill-tree-panel .skill-node { padding: 5px 2px; }
  .skill-node-level { display: none; }
}
@media (prefers-reduced-motion: reduce) { #skill-tree-panel .skill-node { transition: none; } }


/* The original honeycomb remains beside a compact equipped-skill bar. */
#skill-tree-panel { scroll-padding-bottom: 104px; }
.skill-tree-footer { position: sticky; bottom: 0; z-index: 4; border-top: 1px solid #929aff28; background: #0b1027f5; }
#skill-tree-panel #skill-equip-toggle { width: 100%; min-height: 48px; margin: 6px 0 0; padding: 12px; border: 1px solid #a4cbff; border-radius: 12px; background: #86b8ff; color: #10254a; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
#skill-tree-panel #skill-equip-toggle[aria-pressed="true"] { background: #263a60; border-color: #8aaddb; color: #dfecff; }
#skill-tree-panel #skill-equip-toggle[aria-disabled="true"] { background: #29334c; border-color: #687993; color: #bac7df; }
#skill-tree-panel #skill-equip-toggle:hover { border-color: #fff; }
#skill-tree-panel #skill-equip-toggle:focus-visible { outline: 3px solid #9ce9ff; outline-offset: 3px; }
.skill-tree-layout { gap: clamp(18px, 2vw, 32px); }
.skill-tree-board { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: 18px; width: 100%; min-width: 0; }
.skill-tree-viewport { width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #6d7bb4 #111a32; }
.skill-tree-viewport .skill-tree-map { width: min(100%, 700px); min-width: 360px; max-width: 700px; margin-inline: auto; }
.skill-loadout-section { min-width: 0; padding: 20px 18px; box-sizing: border-box; border: 1px solid #6b94d9a8; border-radius: 34px; background: linear-gradient(160deg, #233f70d9, #111f3edb); box-shadow: inset 0 1px 0 #bbd5ff1c; }
.skill-loadout-section .skill-section-heading { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 20px; text-align: center; }
.skill-loadout-section .skill-section-heading h3 { margin: 0; font-size: 21px; line-height: 1.25; color: #e7f0ff; text-align: center; }
.skill-loadout-section .skill-section-eyebrow, .skill-loadout-section .skill-section-note { display: none; }
#skill-equipped-count { padding: 4px 9px; border: 1px solid #a2c5ff66; border-radius: 999px; background: #102346; color: #dceaff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
#skill-equipped-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 14px 14px; }
#skill-tree-panel .skill-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-sizing: border-box; width: 108px; height: 112px; min-width: 44px; min-height: 44px; margin: 0; padding: 4px; border: 1px solid #90b4ec; border-radius: 50%; background: linear-gradient(150deg, #294671, #101f3d); color: #e5eeff; font: 700 9px/1.1 'Trebuchet MS', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
#skill-tree-panel .skill-slot.skill-slot-empty { border-style: dashed; border-color: #8cadd276; background: #14274a88; }
#skill-tree-panel .skill-slot.skill-selected { border-color: #fff0c6; box-shadow: 0 0 0 2px #b2caff55; }
#skill-tree-panel .skill-slot:hover { border-color: #fff; background: #354f7b; }
#skill-tree-panel .skill-slot:focus-visible { outline: 2px solid #a4edff; outline-offset: 2px; }
.skill-slot-art { display: block; width: 68px; height: 68px; object-fit: contain; pointer-events: none; }
.skill-slot-art[hidden] { display: none; }
.skill-slot-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skill-slot-level { color: #c4d9f8; font-size: 12px; font-weight: 400; }
.skill-slot-number { display: none; }
.skill-slot-empty::before { content: '+'; color: #c5d8f3; font: 300 21px/1 sans-serif; }
#skill-free-equipped { margin-top: 18px; padding-top: 14px; border-top: 1px solid #a0b9e43d; }
#skill-free-equipped h4 { margin: 0 0 10px; color: #edb4ff; font-size: 10px; letter-spacing: .12em; text-align: center; }
#skill-tree-panel .skill-free-button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px; border: 1px solid #bb8fda80; border-radius: 12px; background: #322448; color: #f4e5ff; font-size: 12px; text-transform: none; letter-spacing: 0; text-align: left; cursor: pointer; }
.skill-free-button img { width: 40px; height: 40px; }
.skill-free-button strong, .skill-free-button small { display: block; }
.skill-free-button small { margin-top: 3px; color: #cfb8e5; font-size: 10px; }
#skill-tree-panel .skill-free-button[aria-pressed="true"] { border-color: #fff0c6; box-shadow: 0 0 0 2px #b2caff55; }
#skill-tree-panel .skill-free-button:focus-visible { outline: 2px solid #a4edff; outline-offset: 2px; }
#skill-free-equipped[hidden], #skill-tree-panel .skill-free-button[hidden] { display: none; }
.skill-detail { min-width: 0; }
@media (max-width: 1100px) {
  .skill-tree-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .skill-tree-board { grid-template-columns: 280px minmax(0, 1fr); gap: 14px; }
  .skill-detail { width: 100%; box-sizing: border-box; }
}
@media (max-width: 800px) {
  .skill-tree-layout { gap: 20px; }
  .skill-tree-board { grid-template-columns: 200px minmax(0, 1fr); gap: 8px; align-items: center; }
  .skill-loadout-section { padding: 16px 12px; border-radius: 28px; }
  .skill-loadout-section .skill-section-heading { gap: 6px; margin-bottom: 10px; }
  .skill-loadout-section .skill-section-heading h3 { font-size: 18px; overflow-wrap: anywhere; }
  #skill-equipped-count { padding: 5px 12px; font-size: 13px; }
  #skill-equipped-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 10px; }
  #skill-tree-panel .skill-slot { width: 82px; height: 86px; padding: 5px; }
  .skill-slot-art { width: 54px; height: 54px; }
  .skill-slot-level { font-size: 10px; }
  .skill-tree-viewport .skill-tree-map { min-width: 360px; max-width: 700px; }
}
@media (max-width: 380px) {
  .skill-tree-board { grid-template-columns: 184px minmax(0, 1fr); }
  .skill-loadout-section { padding: 14px 12px; }
  #skill-equipped-slots { gap: 10px 10px; }
  #skill-tree-panel .skill-slot { width: 74px; height: 78px; }
  .skill-slot-art { width: 48px; height: 48px; }
  .skill-tree-layout { padding-left: 8px; padding-right: 8px; }
  .skill-detail { margin-left: 0; margin-right: 0; }
}