.avatar-progression-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.avatar-skill-tree-button { display: grid; justify-items: center; gap: 4px; padding: 6px; border: 0; background: transparent; color: #efd99f; cursor: pointer; }
.avatar-skill-tree-button img { object-fit: contain; transition: transform .2s; filter: drop-shadow(0 3px 8px #000); }
.avatar-skill-tree-button:hover img { transform: scale(1.08); }
.avatar-skill-tree-button:focus-visible { outline: 2px solid #efd99f; outline-offset: 4px; }
#avatarSkillTreePanel { max-width: 1200px; margin: 24px auto; padding: clamp(16px, 3vw, 32px); border: 1px solid #80622e; background: linear-gradient(135deg, #0d1a22, #080d12); color: #d4d6d2; }
#avatarSkillTreePanel h2, #avatarSkillTreePanel h3, #avatarSkillTreePanel h4 { color: #efd99f; }
#avatarSkillTreePanel h2 { font-family: Georgia, serif; font-size: clamp(28px, 4vw, 44px); margin: 0; }
#avatarSkillTreePanel p { line-height: 1.65; }
.skill-tree-overview { display: flex; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid #80622e; }
.skill-tree-overview img { object-fit: contain; flex-shrink: 0; }
.skill-tree-status { color: #e9bf69; font-size: .85rem; }
.skill-tree-abilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; margin: 24px 0; }
.skill-tree-ability { padding: 20px; border: 1px solid #65502d; border-radius: 8px; background: linear-gradient(145deg, #172732, #0b131b); }
.skill-tree-ability-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.skill-tree-ability h4 { margin: 0; font-size: 1.15rem; }
.skill-tree-ability dl { margin-bottom: 0; }
.skill-tree-ability dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #ffffff15; font-size: .9rem; }
.skill-tree-ability dd { margin: 0; text-align: right; color: #efd99f; }
.skill-tree-future { border-top: 1px solid #80622e; padding-top: 16px; }
.skill-tree-classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin: 24px 0; }
.skill-tree-class { display: flex; flex-direction: column; align-items: center; padding: 20px 16px; border: 1px solid #65502d; border-radius: 8px; background: linear-gradient(145deg, #172732, #0b131b); text-align: center; }
.skill-tree-class img { display: block; margin: 0 auto 16px; object-fit: contain; filter: drop-shadow(0 4px 12px #0008); }
.skill-tree-class h4 { margin: 0 0 12px; font-size: 1.15rem; }
.skill-tree-class p { margin: 0 0 16px; font-size: .95rem; }
.skill-tree-class .skill-tree-class-passive { width: 100%; padding-top: 12px; border-top: 1px solid #65502d; color: #efd99f; font-size: .9rem; }
.skill-tree-class.is-selected { border-color: #efd99f; box-shadow: inset 0 0 20px #e9bf6915, 0 0 12px #e9bf6920; }
.skill-tree-class button { margin-top: auto; min-height: 40px; padding: 8px 18px; border: 1px solid #a27a37; border-radius: 4px; background: #302513; color: #efd99f; cursor: pointer; }
.skill-tree-class button:hover, .skill-tree-class button[aria-pressed="true"] { background: #58401d; }
.skill-tree-class button:focus-visible { outline: 2px solid #efd99f; outline-offset: 3px; }
#avatarClassSelectionStatus { color: #efd99f; }
.avatar-class-page-button { position: relative; }
.avatar-class-page-button small { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: .65rem; color: #e9bf69; }
#avatarClassPanel { max-width: 1200px; margin: 24px auto; padding: clamp(16px, 3vw, 32px); border: 1px solid #80622e; background: linear-gradient(135deg, #0d1a22, #080d12); color: #d4d6d2; }
#avatarClassPanel h2, #avatarClassPanel h3, #avatarClassPanel h4 { color: #efd99f; }
#avatarClassPanel h2 { font-family: Georgia, serif; font-size: clamp(28px, 4vw, 44px); margin: 0; }
#avatarClassPanel p { line-height: 1.65; }
.avatar-class-unlock-notice { padding: 14px 18px; border: 1px solid #80622e; border-radius: 8px; background: #e9bf6910; color: #efd99f; }
.classes-locked .skill-tree-class img { filter: grayscale(.65) drop-shadow(0 4px 12px #0008); }
.skill-tree-class button:disabled, .skill-tree-roadmap button:disabled { opacity: .55; cursor: not-allowed; }
.avatar-skill-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 24px; }
.avatar-skill-points > div { padding: 14px; border: 1px solid #65502d; border-radius: 8px; background: #172732; }
.avatar-skill-points span { display: block; font-size: .85rem; margin-bottom: 6px; }
.avatar-skill-points strong { display: block; font-size: 1.2rem; color: #efd99f; }
.skill-tree-roadmap button { margin-top: 12px; }
/* The class sits outside the portrait. An ancestor clip-path would hide it
   even when overflow is visible; keep cropping on the portrait itself. */
body.in-game .combatant-board .avatar[data-avatar-class] {
  clip-path: none !important;
  overflow: visible !important;
}
body.in-game .combatant-board .avatar > .avatar-class-icon {
  position: absolute;
  left: calc(100% + clamp(8px, 1vw, 16px));
  top: 50%;
  transform: translateY(-50%);
  width: 72%;
  height: 72%;
  object-fit: contain;
  z-index: 1;
  pointer-events: auto;
  cursor: help;
  user-select: none;
  filter: drop-shadow(0 4px 8px #0009);
}
body.in-game .drag-ghost .avatar-class-icon { display: none; }
body.in-game .combatant-board .avatar > .avatar-class-icon:focus-visible {
  outline: 2px solid #efd99f;
  outline-offset: 3px;
}
/* Fade the dragged portrait without fading the stationary class emblem. */
body.in-game .combatant-board .avatar.dragging {
  opacity: 1;
}
body.in-game .combatant-board .avatar.dragging > :not(.avatar-class-icon) {
  opacity: .42;
}
.skill-tree-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.skill-tree-roadmap article { padding-left: 16px; border-left: 2px solid #80622e; }
@media (max-width: 600px) {
  .avatar-progression-actions { gap: 4px; }
  .avatar-skill-tree-button img { width: 48px; height: 48px; }
  .avatar-skill-tree-button span { font-size: 11px; }
  #avatarSkillTreePanel .page-panel-head, #avatarClassPanel .page-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .skill-tree-overview { gap: 12px; }
  .skill-tree-overview img { width: 64px; height: 64px; }
  .skill-tree-roadmap { grid-template-columns: 1fr; gap: 8px; }
}

/* Class skill-tree: three separate progression paths, existing battle ability panel. */
.class-skill-intro { padding:14px 18px; margin:16px 0; border:1px solid #795b30; border-radius:10px; background:rgba(171,126,52,.09); }
.class-skill-branch { margin:18px 0 26px; }
.class-skill-branch>h3 { margin-bottom:12px; border-bottom:1px solid #795b30; padding-bottom:8px; }
.class-skill-nodes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:10px; }
.class-skill-node { display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid #6f5730; border-radius:10px; background:linear-gradient(145deg,#17202a,#0e131b); min-width:0; }
.class-skill-node.is-equipped { border-color:#e3b25d; box-shadow:inset 0 0 18px #b38c3426; }
.class-skill-node.is-locked { opacity:.65; }
.class-skill-node-head { display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px; align-items:center; color:#f5dcab; }
.class-skill-node-head span { font-size:12px;color:#b5bfca; }
.class-skill-node p { margin:0; flex:1;font-size:14px;line-height:1.45; }
.class-skill-meta { display:flex; flex-wrap:wrap; gap:5px; }
.class-skill-meta span { padding:3px 6px; border:1px solid #69532b; border-radius:5px;font-size:11px; }
.class-skill-node button { min-height:38px; width:100%; }
.class-skill-targets { display:flex;gap:6px;flex-wrap:wrap;padding-top:8px; }
.class-skill-targets small { width:100%; }
.class-skill-targets button { max-width:100%;min-height:34px;background:#273748;border:1px solid #b69454;color:#f0e4ca;border-radius:7px;padding:5px 8px;font-size:12px; }
@media(max-width:720px){.class-skill-nodes{grid-template-columns:1fr 1fr}.class-skill-node{padding:10px;font-size:13px}}
@media(max-width:470px){.class-skill-nodes{grid-template-columns:1fr}}

.class-skill-battle-passives { border:1px solid #826233;border-radius:8px;padding:8px 10px;margin:6px 0 12px;background:#191d24;color:#efd69b; }
.class-skill-battle-passives>strong { font-size:12px;display:block;margin-bottom:7px; }
.class-skill-battle-passives>div { display:flex;flex-wrap:wrap;gap:5px; }
.class-skill-battle-passives span { font-size:11px;color:#f5e4bd;border:1px solid #a1844b;padding:4px 6px;border-radius:6px;cursor:help; }

/* Engraved black and gold surfaces shared with the Deck Editor. */
:is(#avatarSkillTreePanel, #avatarClassPanel) {
  --skill-gold: #d6a545;
  --skill-gold-bright: #f3d889;
  --skill-line: rgba(207, 157, 62, .48);
  box-sizing: border-box;
  width: min(1280px, calc(100% - 24px));
  max-width: 1280px;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid rgba(194, 143, 48, .38);
  border-radius: 6px;
  background:
    radial-gradient(circle at 15% 0%, rgba(219, 168, 64, .12), transparent 30%),
    repeating-linear-gradient(115deg, rgba(255, 238, 195, .016) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, rgba(13, 17, 18, .96), rgba(4, 7, 8, .98));
  color: #f7ecd1;
  box-shadow: inset 0 0 0 1px #ffe2990d, inset 0 0 48px #0005, 0 24px 70px #0007;
}
:is(#avatarSkillTreePanel, #avatarClassPanel) .page-panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--skill-line);
  border-radius: 5px;
  background: linear-gradient(90deg, #d6a5451a, transparent 28%), linear-gradient(180deg, #191914, #080b0c);
  box-shadow: inset 0 0 0 3px #0305057a, inset 0 0 0 4px #eec16517;
}
:is(#avatarSkillTreePanel, #avatarClassPanel) .page-panel-head::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #efc9771a;
  pointer-events: none;
}
:is(#avatarSkillTreePanel, #avatarClassPanel) :is(h2, h3, h4) {
  color: var(--skill-gold-bright);
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .035em;
  text-shadow: 0 2px 2px #000, 0 0 18px #d7a33a2e;
}
:is(#avatarSkillTreePanel, #avatarClassPanel) p { color: #f6e9cbb8; }
:is(#avatarSkillTreePanel, #avatarClassPanel) :is(button, .back-nav-btn) {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #d5a547ad;
  border-radius: 4px;
  background: linear-gradient(180deg, #292a25, #101413);
  color: #f5e2b4;
  font-family: "Cinzel", Georgia, serif;
  font-size: .8rem;
  box-shadow: inset 0 0 0 2px #0005, inset 0 0 0 3px #eec16512;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
:is(#avatarSkillTreePanel, #avatarClassPanel) button:hover:not(:disabled),
#avatarClassPanel button[aria-pressed="true"] {
  border-color: #f3d889;
  background: linear-gradient(180deg, #78561c, #352105);
  box-shadow: inset 0 0 0 2px #0005, 0 0 16px #dea63533;
}
:is(#avatarSkillTreePanel, #avatarClassPanel) button:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 4px;
}
:is(#avatarSkillTreePanel, #avatarClassPanel) button:disabled { opacity: .55; cursor: not-allowed; }
:is(#avatarSkillTreePanel, #avatarClassPanel) :is(.skill-tree-overview, .skill-tree-future) { border-color: var(--skill-line); }
#avatarSkillTreePanel .avatar-skill-points { gap: 10px; }
#avatarSkillTreePanel .avatar-skill-points > div,
:is(#avatarSkillTreePanel, #avatarClassPanel) :is(.class-skill-intro, .avatar-class-unlock-notice) {
  border: 1px solid var(--skill-line);
  border-radius: 5px;
  background: linear-gradient(135deg, #e1b15114, transparent 38%), linear-gradient(160deg, #121413, #050809);
  box-shadow: inset 0 0 0 3px #0005, inset 0 0 0 4px #e7bb5e12;
}
#avatarSkillTreePanel .avatar-skill-points strong { color: var(--skill-gold-bright); font-family: "Cinzel", Georgia, serif; }
#avatarSkillTreePanel #avatarSkillTreeAbilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
}
#avatarSkillTreeAbilities > .class-skill-intro { grid-column: 1 / -1; margin: 0; }
#avatarSkillTreeAbilities > p { grid-column: 1 / -1; }
#avatarSkillTreePanel .class-skill-branch { min-width: 0; margin: 0; }
#avatarSkillTreePanel .class-skill-branch > h3 {
  min-height: 3.5em;
  display: flex;
  align-items: center;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--skill-line);
  border-radius: 4px;
  background: linear-gradient(180deg, #29261a, #0c0f0f);
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
}
#avatarSkillTreePanel .class-skill-nodes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
#avatarSkillTreePanel .class-skill-node {
  position: relative;
  padding: 16px;
  gap: 12px;
  border: 1px solid var(--skill-line);
  border-radius: 5px;
  background: radial-gradient(circle at 12% 0%, #e1af4c1a, transparent 45%), linear-gradient(160deg, #121311, #050809);
  box-shadow: inset 0 0 0 3px #0005, inset 0 0 0 4px #ecc2690f, 0 12px 24px #0005;
}
#avatarSkillTreePanel .class-skill-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: calc(100% + 1px);
  width: 2px;
  height: 22px;
  background: linear-gradient(#d6a54599, #d6a54533);
}
#avatarSkillTreePanel .class-skill-node.is-equipped {
  border-color: #f5ca69;
  background: radial-gradient(circle at 18% 0%, #ecbe5b2e, transparent 52%), linear-gradient(160deg, #2d2310, #080a0a);
  box-shadow: inset 0 0 0 3px #0005, 0 0 0 1px #ffe0911f, 0 0 22px #d79e2a21;
}
#avatarSkillTreePanel .class-skill-node.is-locked { opacity: 1; }
#avatarSkillTreePanel .class-skill-node.is-locked .class-skill-icon { filter: saturate(.45); opacity: .7; }
#avatarSkillTreePanel .class-skill-node-head { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 12px; }
#avatarSkillTreePanel .class-skill-node-head > div { min-width: 0; }
#avatarSkillTreePanel .class-skill-node-head strong { display: block; color: #f3d889; font-family: "Cinzel", Georgia, serif; line-height: 1.4; }
#avatarSkillTreePanel .class-skill-node-head span { display: block; margin-top: 5px; color: #f6e9cb99; }
.class-skill-icon { flex-shrink: 0; width: 64px; height: 64px; object-fit: contain; }
#avatarSkillTreePanel .class-skill-state { width: fit-content; padding: 3px 8px; border: 1px solid #e2bb692e; border-radius: 999px; color: #f6e9cb99; font-size: .72rem; }
#avatarSkillTreePanel .is-equipped .class-skill-state { color: #fff0bd; border-color: #e2bb6970; }
#avatarSkillTreePanel .class-skill-meta span { border-color: #e2bb692e; background: #05070785; color: #f5e2b4; }
#avatarSkillTreePanel .skill-tree-roadmap article { border-color: var(--skill-line); }
#avatarSkillTreePanel #avatarSkillTreeResetBtn { border-color: #ad6b47; background: linear-gradient(180deg, #56231f, #130808); }
#avatarClassPanel .skill-tree-classes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
#avatarClassPanel .skill-tree-class {
  position: relative;
  isolation: isolate;
  padding: 24px 18px 18px;
  border: 1px solid var(--skill-line);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 0%, #e1af4c1a, transparent 45%), linear-gradient(160deg, #121413, #050809);
  box-shadow: inset 0 0 0 3px #0005, inset 0 0 0 4px #e7bb5e12, 0 14px 30px #0005;
}
#avatarClassPanel .skill-tree-class::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #f0ca781a;
  z-index: -1;
  pointer-events: none;
}
#avatarClassPanel .skill-tree-class.is-selected {
  border-color: #f5ca69;
  background: radial-gradient(circle at 50% 0%, #ecbe5b2e, transparent 55%), linear-gradient(160deg, #2d2310, #080a0a);
  box-shadow: inset 0 0 0 3px #0005, 0 0 0 1px #ffe0911f, 0 16px 34px #0006, 0 0 22px #d79e2a21;
}
#avatarClassPanel .skill-tree-class > img { width: 112px; height: 112px; filter: drop-shadow(0 6px 12px #0009); }
#avatarClassPanel.classes-locked .skill-tree-class > img { filter: grayscale(.65) drop-shadow(0 6px 12px #0009); }
#avatarClassPanel .skill-tree-class-passive { border-color: #e2bb692e; color: #f5e2b4; line-height: 1.65; }
#avatarClassPanel .skill-tree-class button { width: 100%; }
.ability-skill-icon { flex-shrink: 0; object-fit: contain; }
.class-skill-battle-passives span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  #avatarSkillTreePanel #avatarSkillTreeAbilities { grid-template-columns: minmax(0, 1fr); }
  #avatarSkillTreePanel .class-skill-branch > h3 { min-height: auto; }
  #avatarSkillTreePanel .class-skill-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #avatarSkillTreePanel .class-skill-node::after { display: none; }
}
@media (max-width: 540px) {
  #avatarSkillTreePanel .class-skill-nodes { grid-template-columns: minmax(0, 1fr); }
  #avatarSkillTreePanel .avatar-skill-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #avatarSkillTreePanel .avatar-skill-points > div:first-child { grid-column: 1 / -1; }
  #avatarClassPanel .skill-tree-classes { grid-template-columns: minmax(0, 1fr); }
  :is(#avatarSkillTreePanel, #avatarClassPanel) .page-panel-head { padding: 16px 12px; align-items: flex-start; }
  :is(#avatarSkillTreePanel, #avatarClassPanel) .page-panel-head h2 { font-size: 1.6rem; }
  :is(#avatarSkillTreePanel, #avatarClassPanel) .page-panel-head .back-nav-btn { flex-shrink: 0; }
  :is(#avatarSkillTreePanel, #avatarClassPanel) .page-panel-head p { margin-bottom: 0; }
}
#avatarClassPanel .avatar-class-heading {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  min-width: 0;
}
#avatarClassPanel .avatar-class-heading > div { min-width: 0; }
#avatarClassPanel .avatar-class-heading-icon {
  width: clamp(64px, 10vw, 128px);
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px #0009);
}
@media (prefers-reduced-motion: reduce) {
  :is(#avatarSkillTreePanel, #avatarClassPanel) button { transition: none; }
}
.skill-tree-class.is-locked { opacity: .65; }
#avatarClassPanel .skill-tree-class.is-locked { opacity: 1; }
#avatarClassPanel [data-preview-avatar-class] { margin: 0 0 10px; background: #171611; }

/* Golden boughs keep the same reading order in the editor and class preview. */
:is(#avatarSkillTreePanel, .class-abilities-dialog) {
  --skill-tree-art: url("assets/ui/alberto%20oro%20skilltree.webp");
  --skill-tree-art-opacity: .38;
  --skill-tree-art-size: cover;
  --skill-tree-art-bleed: clamp(12px, 2vw, 24px);
  --skill-tree-connector-gap: 48px;
}
.class-abilities-dialog {
  --skill-tree-art-bleed: 20px;
  box-sizing: border-box;
  width: min(1180px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #76603d;
  border-radius: 12px;
  background: #100f0c;
  color: #e8e1d3;
  box-shadow: 0 24px 90px #0009;
}
.class-abilities-dialog[open] { display: flex; flex-direction: column; }
.class-abilities-dialog::backdrop { background: #000b; }
.class-abilities-header { display: flex; align-items: center; gap: 14px; padding: 20px; border-bottom: 1px solid #393126; }
.class-abilities-header > div { flex: 1; min-width: 0; }
.class-abilities-header img { object-fit: contain; flex-shrink: 0; }
.class-abilities-header h2 { margin: 0; color: #e1c08b; font-family: "Cinzel", Georgia, serif; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.class-abilities-header p { margin: 6px 0 0; color: #b9b1a1; font-size: .85rem; }
.class-abilities-scroll { padding: 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.class-abilities-tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.class-abilities-tree > .class-skill-intro { grid-column: 1 / -1; margin: 0; }
:is(#avatarSkillTreeAbilities, .class-abilities-tree) { position: relative; isolation: isolate; }
:is(#avatarSkillTreeAbilities, .class-abilities-tree)::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--skill-tree-art-bleed));
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  z-index: -1;
  border-radius: 8px;
  background-image: var(--skill-tree-art);
  background-position: center top;
  background-size: var(--skill-tree-art-size);
  background-repeat: no-repeat;
  opacity: var(--skill-tree-art-opacity);
  pointer-events: none;
}
.class-abilities-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid #393126; background: #16140f; }
.class-abilities-dialog button { min-height: 44px; padding: 10px 16px; border: 1px solid #76603d; border-radius: 6px; color: #ead6b1; background: #292217; cursor: pointer; font: inherit; }
.class-abilities-dialog button:hover:not(:disabled) { background: #403322; }
.class-abilities-dialog button:disabled { opacity: .55; cursor: not-allowed; }
.class-abilities-dialog button:focus-visible { outline: 2px solid #efcf8d; outline-offset: 3px; }
.class-abilities-dialog [data-class-preview-edit] { background: #594327; border-color: #b89968; }
.class-innate-passive, .class-preview-lock { margin: 0 0 16px; padding: 14px 16px; border: 1px solid #514731; border-radius: 8px; line-height: 1.65; }
.class-preview-lock { color: #e6bf9d; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-intro { background: #19170f; border: 1px solid #413826; border-radius: 8px; box-shadow: none; padding: 16px 20px; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-intro p { color: #ccc4b4; margin: 0 0 10px; font-size: .9rem; line-height: 1.65; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-intro p:last-child { margin-bottom: 0; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-branch { margin: 0; min-width: 0; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-branch > h3 {
  position: relative;
  justify-content: center;
  text-align: center;
  margin: 0 0 12px;
  padding: 12px 8px 44px;
  color: #e9cd92;
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-family: "Cinzel", Georgia, serif;
  line-height: 1.5;
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-branch > h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(240px, 90%);
  height: 40px;
  background: url("assets/ui/skill-tree-crown.svg") center / contain no-repeat;
  pointer-events: none;
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-nodes { grid-template-columns: minmax(0, 1fr); gap: var(--skill-tree-connector-gap); }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node {
  background: radial-gradient(ellipse at top right, #d8a5480d, transparent 60%), #15150feb;
  border: 1px solid #8e713c66;
  border-radius: 10px 4px 10px 4px;
  box-shadow: inset 0 0 0 3px #0003, 0 8px 20px #0003;
  padding: 20px 18px 18px;
  gap: 12px;
  position: relative;
  min-width: 0;
  transition: border-color .2s, box-shadow .2s;
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node::before {
  content: "";
  position: absolute;
  left: auto;
  right: 2px;
  top: 2px;
  bottom: auto;
  width: 64px;
  height: 64px;
  background: url("assets/ui/skill-tree-filigree.svg") center / contain no-repeat;
  opacity: .36;
  pointer-events: none;
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 90px);
  top: calc(100% + 1px);
  width: 180px;
  height: var(--skill-tree-connector-gap);
  background: url("assets/ui/skill-tree-branch.svg") center / 180px 100% no-repeat;
  opacity: .48;
  pointer-events: none;
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node:nth-child(even)::after { transform: scaleX(-1); }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-owned { border-color: #b18b468c; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-owned::before { opacity: .65; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-owned::after { opacity: .85; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-equipped {
  border-color: #e6bd65;
  background: radial-gradient(ellipse at top left, #e9b63e20, transparent 65%), linear-gradient(145deg, #2b2416f5, #171710f5);
  box-shadow: inset 0 1px 0 #ffe7a326, inset 0 0 24px #f3c65f0a, 0 0 14px #d99a2424;
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-equipped::before { opacity: 1; filter: drop-shadow(0 0 4px #e7b64c40); }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-equipped .class-skill-state {
  color: #fff3c4;
  border-color: #e8bb55;
  background: #78551e;
  box-shadow: 0 0 8px #f3c65f30;
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-locked { opacity: 1; background: #11130fe8; border-color: #55493280; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node.is-locked::before { opacity: .2; }
@media (hover: hover) {
  :is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node:hover { border-color: #cba452; box-shadow: inset 0 1px 0 #ffe7a320, 0 0 18px #c9902a18; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node { transition: none; }
}
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-right: 32px; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node-head > div { min-width: 0; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-icon { width: 48px; height: 48px; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node-head strong { display: block; font-family: "Cinzel", Georgia, serif; color: #eadcc3; font-size: 1rem; line-height: 1.5; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node-head span { display: block; margin-top: 5px; color: #a9bed4; font-size: .8rem; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) [data-skill-type="passive"] .class-skill-node-head span { color: #b1c6a3; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-node p { color: #ddd6c8; font-size: .9rem; line-height: 1.7; margin: 0; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-state { color: #d3c4a7; font-size: .78rem; padding: 4px 8px; border: 1px solid #57492f; border-radius: 4px; width: fit-content; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-meta { display: flex; flex-wrap: wrap; gap: 7px; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-meta span { color: #c9c0ae; background: #0f0e0b; border: 1px solid #393226; padding: 5px 8px; border-radius: 4px; font-size: .78rem; line-height: 1.5; }
:is(#avatarSkillTreePanel, .class-abilities-dialog) p.class-skill-requirements { padding-top: 10px; border-top: 1px solid #393226; color: #dbb895; font-size: .82rem; }
@media (max-width: 900px) {
  .class-abilities-tree { grid-template-columns: minmax(0, 1fr); }
  :is(#avatarSkillTreeAbilities, .class-abilities-tree)::before { display: none; }
  :is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-branch { position: relative; isolation: isolate; }
  :is(#avatarSkillTreePanel, .class-abilities-dialog) .class-skill-branch::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--skill-tree-art-bleed));
    z-index: -1;
    background: var(--skill-tree-art) center top / var(--skill-tree-art-size) no-repeat;
    opacity: var(--skill-tree-art-opacity);
    pointer-events: none;
  }
}
@media (max-width: 540px) {
  .class-abilities-dialog { max-height: calc(100dvh - 16px); --skill-tree-art-bleed: 14px; }
  .class-abilities-header, .class-abilities-scroll { padding: 14px; }
  .class-abilities-header { gap: 10px; }
  .class-abilities-header img { width: 40px; height: 40px; }
  .class-abilities-actions { padding: 12px; }
  .class-abilities-actions button { width: 100%; }
}
#avatarSkillTreePanel .skill-loadout { margin-top: 32px; padding-top: 24px; border-top: 1px solid #76603d; }
.skill-loadout-actives { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 24px; }
.skill-loadout-passives { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#avatarSkillTreePanel .skill-loadout-card { padding: 18px; border: 1px solid #423929; border-radius: 8px; background: #191711; min-width: 0; }
.skill-loadout-heading { display: flex; align-items: center; gap: 10px; }
.skill-loadout-heading img { flex-shrink: 0; }
#avatarSkillTreePanel .skill-loadout-card h4 { margin: 0 0 8px; font-size: .95rem; line-height: 1.5; }
#avatarSkillTreePanel .skill-loadout-card p { margin: 10px 0 0; color: #ddd6c8; font-size: .88rem; line-height: 1.65; }
.skill-loadout-type { display: inline-block; font-size: .75rem; color: #b1c6a3; }
#avatarSkillTreePanel .skill-loadout-meta { color: #b9b1a1; font-size: .78rem; padding-top: 10px; border-top: 1px solid #393226; }
#avatarSkillTreePanel .skill-loadout-innate { border-color: #b89968; background: #211c12; }
.skill-loadout-innate .skill-loadout-type { color: #e1c08b; margin-bottom: 10px; }
#avatarSkillTreePanel .skill-loadout-card.is-empty { background: #14130f; border-style: dashed; }
.skill-loadout-count { display: inline-block; margin-left: 8px; padding: 4px 10px; border: 1px solid #76603d; border-radius: 20px; font-family: system-ui, sans-serif; font-size: .85rem; color: #e1c08b; }
@media (max-width: 900px) { .skill-loadout-passives { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .skill-loadout-passives { grid-template-columns: minmax(0, 1fr); } }
.class-unlock-spotlight {
  position: fixed; z-index: 11000; pointer-events: none; border: 2px solid #f2c76b;
  border-radius: 8px; box-shadow: 0 0 0 200vmax #000b;
}
.class-unlock-coach {
  position: fixed; z-index: 11001; bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px));
  max-height: 45dvh; overflow: auto; box-sizing: border-box;
  padding: 18px; border: 1px solid #d3a449; border-radius: 8px;
  background: #15110b; color: #fff0d0; text-align: center; box-shadow: 0 8px 40px #000b;
}
.class-unlock-coach.at-top { bottom: auto; top: max(16px, env(safe-area-inset-top)); }
.class-unlock-coach p { margin: 0 0 14px; line-height: 1.5; }
.class-unlock-focus { outline: 3px solid #f2c76b !important; outline-offset: 4px; }

/* Class colours stay inside the branches and tree artwork. The intro, page
   header, points and equipped loadout retain their original black and gold. */
#avatarSkillTreePanel[data-skill-class="piromante"] {
  --tree-accent: 238 82 74;
  --tree-bright: #ffb5a5;
  --tree-text: #ead9d5;
  --tree-muted: #ba9e99;
  --tree-surface: 34 15 16;
  --tree-deep: 12 7 9;
  --tree-filter: hue-rotate(-42deg) saturate(1.5);
}
#avatarSkillTreePanel[data-skill-class="necromante"] {
  --tree-accent: 157 96 215;
  --tree-bright: #d8b9f4;
  --tree-text: #dfd7e8;
  --tree-muted: #ab9ab9;
  --tree-surface: 22 13 32;
  --tree-deep: 7 5 12;
  --tree-filter: hue-rotate(236deg) saturate(1.15) brightness(.8);
}
#avatarSkillTreePanel[data-skill-class="arcimago"] {
  --tree-accent: 86 201 237;
  --tree-bright: #b6edff;
  --tree-text: #d8e7ed;
  --tree-muted: #99b4c0;
  --tree-surface: 13 29 38;
  --tree-deep: 5 12 18;
  --tree-filter: hue-rotate(153deg) saturate(1.15);
}
#avatarSkillTreePanel[data-skill-class="guerriero"] {
  --tree-accent: 73 119 202;
  --tree-bright: #b5cef6;
  --tree-text: #dbe2ef;
  --tree-muted: #9aaac3;
  --tree-surface: 12 21 38;
  --tree-deep: 5 9 18;
  --tree-filter: hue-rotate(180deg) saturate(1.35) brightness(.75);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch {
  color: var(--tree-text);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch h3 {
  text-shadow: 0 2px 2px #000, 0 0 18px rgb(var(--tree-accent) / .18);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node p { color: var(--tree-text); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch button {
  color: var(--tree-bright);
  border-color: rgb(var(--tree-accent) / .65);
  background: linear-gradient(180deg, rgb(var(--tree-surface)), rgb(var(--tree-deep)));
  box-shadow: inset 0 0 0 2px #0005, inset 0 0 0 3px rgb(var(--tree-accent) / .08);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch button:hover:not(:disabled) {
  border-color: var(--tree-bright);
  background: linear-gradient(180deg, rgb(var(--tree-accent) / .26), rgb(var(--tree-deep)));
  box-shadow: inset 0 0 0 2px #0005, 0 0 16px rgb(var(--tree-accent) / .2);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch button:focus-visible { outline-color: var(--tree-bright); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities::before,
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch::before,
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch > h3::after,
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node::before,
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node::after {
  filter: var(--tree-filter);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-icon { filter: sepia(1) saturate(2) var(--tree-filter); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .is-locked .class-skill-icon { filter: sepia(1) saturate(2) var(--tree-filter) saturate(.4); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-branch > h3 { color: var(--tree-bright); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node {
  border-color: rgb(var(--tree-accent) / .28);
  background: radial-gradient(ellipse at top right, rgb(var(--tree-accent) / .045), transparent 60%), rgb(var(--tree-deep) / .92);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node.is-owned { border-color: rgb(var(--tree-accent) / .55); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node.is-equipped {
  border-color: rgb(var(--tree-accent) / .9);
  background: radial-gradient(ellipse at top left, rgb(var(--tree-accent) / .13), transparent 65%), linear-gradient(145deg, rgb(var(--tree-surface) / .96), rgb(var(--tree-deep) / .96));
  box-shadow: inset 0 1px 0 rgb(var(--tree-accent) / .2), inset 0 0 24px rgb(var(--tree-accent) / .04), 0 0 14px rgb(var(--tree-accent) / .16);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node.is-equipped::before { filter: var(--tree-filter) drop-shadow(0 0 4px rgb(var(--tree-accent) / .25)); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node.is-locked {
  border-color: rgb(var(--tree-accent) / .18);
  background: rgb(var(--tree-deep) / .94);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node-head strong { color: var(--tree-bright); }
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-state {
  color: var(--tree-muted);
  border-color: rgb(var(--tree-accent) / .3);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .is-equipped .class-skill-state {
  color: var(--tree-bright);
  border-color: rgb(var(--tree-accent) / .8);
  background: rgb(var(--tree-accent) / .2);
  box-shadow: 0 0 8px rgb(var(--tree-accent) / .18);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-meta span {
  color: var(--tree-muted);
  background: rgb(var(--tree-deep) / .8);
  border-color: rgb(var(--tree-accent) / .18);
}
#avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities p.class-skill-requirements { color: var(--tree-bright); border-color: rgb(var(--tree-accent) / .28); }
@media (hover: hover) {
  #avatarSkillTreePanel.skill-tree-themed #avatarSkillTreeAbilities .class-skill-node:hover {
    border-color: var(--tree-bright);
    box-shadow: inset 0 1px 0 rgb(var(--tree-accent) / .16), 0 0 18px rgb(var(--tree-accent) / .12);
  }
}