/* The Skills tab in a class's own art (SKILL_TREE_THEMES in src/ui/skillThemes.js, markup artSkillsHTML() in
   src/ui/character.js). Only a class with a theme gets .sk-art; every other class keeps the plain tree of style.css
   and ui-windows.css untouched. Sizes are in tree pixels: the tree keeps the plain tree's coordinates (nodes 44 px,
   trees 100 px apart, rows spread over 320 px) and is scaled to fill the tab, so 7 rows, the emblems, the points line
   and the hint fit the character window without scrolling. The phone layout is in mobile.css (magetree section). */
.cw-skills .sk-art { --k: 1.09; display: flex; flex-direction: column; align-items: center; }

/* Skill points remaining: N, between the two halves of the divider (each half ends in the curl that faced the gem). */
.cw-skills .sk-art .skpts { align-self: stretch; display: flex; align-items: center; gap: 8px; height: 24px; margin: 0; line-height: 24px; white-space: nowrap; color: #cdb98f; }
.sk-art .skpts::before, .sk-art .skpts::after { content: ''; flex: 1 1 0; min-width: 0; background: var(--divider) no-repeat; opacity: .72; transition: opacity .3s, filter .3s; }
.sk-art .skpts::before { aspect-ratio: 3.32; background-position: left center; background-size: calc(100% / .4699) 100%; }
.sk-art .skpts::after { aspect-ratio: 3.35; background-position: right center; background-size: calc(100% / .4743) 100%; }
.sk-art .skpts.glow { color: #ffd860; }
.sk-art .skpts.glow::before, .sk-art .skpts.glow::after { opacity: 1; filter: brightness(1.15) drop-shadow(0 0 3px rgba(255, 190, 70, .55)); }

.cw-skills .sk-art .tree { flex: none; width: 330px; height: 456px; margin: 2px auto calc(456px * (var(--k) - 1)); transform: scale(var(--k)); transform-origin: top center; }
.cw-skills .sk-art .hint { margin: 0; text-align: center; }

/* Column panels: the arch keeps its shape and the middle stretches with the rows (border-image slices). The apex gem
   sits under the emblem's own gem, and the gold line runs through every skill of the tree. */
.sk-art .skpanel { position: absolute; top: 52px; height: 404px; width: 96px; margin-left: -48px; border: solid transparent; border-width: 63px 0 36px;
  border-image: var(--panel) 168 0 96 0 fill / 63px 0 36px stretch; opacity: .36; pointer-events: none; }
.sk-art .treelines line[data-rail] { visibility: hidden; }
.sk-art .treelines line, .sk-art .treelines polyline { stroke: #9a7640; stroke-width: 2.5; }

/* Tree emblems: the art carries the tree's word; the live name is the heading's aria-label (and the hidden text). */
.sk-art .treehead { top: -5px; width: 96px; height: 112px; margin-left: -48px; background: var(--head) center top / contain no-repeat; pointer-events: none; }
.sk-art .treehead span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* An emblem still painted with an older tree name (src/ui/character.js artSkillsHTML): the element icon over the live
   name, lettered in the emblem's gold, until the repainted emblem lands. */
.sk-art .treehead.named { background: var(--head) center 4px / 52px auto no-repeat; }
.sk-art .treehead.named span { left: -12px; right: -12px; top: 62px; width: auto; height: auto; overflow: visible; clip-path: none; text-align: center;
  color: #f4d488; font: 600 13px/18px Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 6px var(--tree-color), 0 1px 2px #000; }
.sk-art .treehead.named::after { content: ''; position: absolute; left: 16px; right: 16px; top: 84px; height: 1px; background: linear-gradient(90deg, transparent, #d9b25f, transparent); }

/* A gem on each link whose first skill is learned. */
.sk-art .skgem { position: absolute; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--gem) center / contain no-repeat; filter: drop-shadow(0 0 2px var(--tree-color)); pointer-events: none; }

/* Skills keep their icons. Learned: the gold slot frame (its window is the node, the dark border its inner mat).
   Learnable now: today's gold pulse. Locked: grey, with a padlock. */
.sk-art .sknode { border-color: #4a3b25; background: #080605; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, .65); }
.sk-art .sknode.avail { border-color: #ffd860; }
.sk-art .sknode.has { border-color: #0b0806; }
.sk-art .sknode.has::after { content: ''; position: absolute; left: -11.43px; top: -11.43px; width: 62.86px; height: 62.86px; background: var(--slot) center / 100% 100% no-repeat; pointer-events: none; }
.sk-art .sknode.locked { border-color: #34302b; }
.sk-art .sknode .sklvl, .sk-art .sknode .skreq { left: -5px; top: -5px; right: auto; bottom: auto; z-index: 2; min-width: 16px; height: 16px; padding: 0 3px; border: 1px solid #a3834a;
  background: linear-gradient(#1f1a13, #0a0907); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .85); color: #f2dc9c; font: 600 11px/14px 'EB Garamond', Georgia, serif; text-align: center; }
.sk-art .sknode .sklvl { border-color: #caa55c; color: #fff0c2; }
.sk-art .sknode .skreq { border-color: #5e4c30; background: linear-gradient(#15120e, #080706); color: #ab9670; font-size: 10.5px; }
.sk-art .sknode .sklvl i { color: #a9b8ff; }
.sk-art .sklock { position: absolute; z-index: 2; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; border: 1px solid #8a7045; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a241c, #0b0a08 70%); box-shadow: 0 0 0 1px #000, 0 1px 3px rgba(0, 0, 0, .8); pointer-events: none; }
.sk-art .sklock::before { content: ''; position: absolute; inset: 2px; background: #cbb27a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7.2V5.4a3 3 0 0 1 6 0v1.8' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath fill-rule='evenodd' d='M3.4 7h9.2c.5 0 .9.4.9.9v5.7c0 .5-.4.9-.9.9H3.4c-.5 0-.9-.4-.9-.9V7.9c0-.5.4-.9.9-.9zm4.6 2a1.1 1.1 0 0 0-.6 2v1.5h1.2V11A1.1 1.1 0 0 0 8 9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7.2V5.4a3 3 0 0 1 6 0v1.8' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath fill-rule='evenodd' d='M3.4 7h9.2c.5 0 .9.4.9.9v5.7c0 .5-.4.9-.9.9H3.4c-.5 0-.9-.4-.9-.9V7.9c0-.5.4-.9.9-.9zm4.6 2a1.1 1.1 0 0 0-.6 2v1.5h1.2V11A1.1 1.1 0 0 0 8 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .sk-art .skpts::before, .sk-art .skpts::after { transition: none; } }