/* ============================================================================
 * Abilities — TAB of the Character window (#itemsWin, ui/items.js): the three
 * trees as TOP-DOWN forked columns (Melee · Magic · Ranged) under the Ember of
 * Hope, with the live base character preview + mastery card on the right. Node frames
 * wear the sheet kit's slot-cell like every other item square; learned
 * connectors run gold; every surface sits on the kit's palette (blackened
 * iron / charcoal stone, antique gold, blood-red accents).
 * ========================================================================= */
/* the slim strip above the tree: spendable-points readout + the macros button */
#itemsWin .abilbar{display:flex;align-items:center;gap:10px;padding:7px 14px;flex:none;
  border-bottom:1px solid #3a2f22;background:linear-gradient(#241c16,#140f0b)}
#itemsWin .abilbar .wsub{font-size:11px;color:var(--faint);letter-spacing:.04em}
#itemsWin .abilbar .abmacros{margin-left:auto;padding:4px 10px;border-radius:7px;font-size:11px;
  background:#191330;border:1px solid #b48ce855;color:#cbb3f0;cursor:pointer}
#itemsWin .abilbar .abmacros:hover{border-color:#b48ce8;color:#fff}

/* Two columns: the pannable tree board, then the showcase pane.
   The pane fills whatever the abilbar strip above leaves of the tab. */
#itemsWin .paneabil{display:grid;padding:0;overflow:hidden;flex:1;min-height:0;
  grid-template-columns:1fr 340px}

/* ---- the tree board ----------------------------------------------------- */
/* touch-action:none — the pointer handlers own the drag, not the browser's scroll.
   Dark charcoal stone, vignetted — the kit's palette, not the old navy theme. */
#itemsWin .abwrap{position:relative;overflow:hidden;min-width:0;cursor:grab;touch-action:none;
  background:
    radial-gradient(120% 90% at 50% 0%,#241c15 0%,#14100b 55%,#0a0705 100%)}
#itemsWin .abwrap.grabbing{cursor:grabbing}
/* both layers get the identical transform from JS, hence the identical origin */
#itemsWin .abedges,#itemsWin .abnodes{position:absolute;left:0;top:0;transform-origin:0 0}
/* the layers must not eat the background drag — only .tnode opts back in */
#itemsWin .abedges,#itemsWin .abnodes{pointer-events:none}

/* column heads: MELEE · MAGIC · RANGED over their own forks */
#itemsWin .thead{position:absolute;transform:translate(-50%,-50%);display:flex;gap:8px;
  align-items:center;white-space:nowrap;pointer-events:none}
#itemsWin .thead b{font-size:19px;letter-spacing:.3em;text-transform:uppercase;font-weight:800;
  color:var(--c,#9fb0d0);text-shadow:0 2px 8px #000,0 0 22px color-mix(in srgb,var(--c,#9fb0d0) 45%,transparent)}
#itemsWin .thead img.uic{width:22px;height:22px;image-rendering:pixelated;
  filter:drop-shadow(0 1px 3px #000)}

/* ---- nodes: the sheet kit's slot square, framed per state ---------------- */
#itemsWin .tnode{position:absolute;width:62px;height:62px;
  transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer}
#itemsWin .tframe{position:absolute;inset:0;display:grid;place-items:center;
  border-style:solid;border-width:7px;
  border-image:var(--img-slot-cell) 7 fill / 7px;image-rendering:auto;
  box-shadow:0 6px 16px -8px #000;transition:transform .12s ease,filter .12s ease}
#itemsWin .tframe img.abico{width:100%;height:100%;display:block}
#itemsWin .tnode:hover .tframe{transform:scale(1.08)}
#itemsWin .tnode.learned .tframe{
  box-shadow:0 0 0 2px #e0a44c88,0 0 18px -2px #e0a44cb0,0 6px 16px -8px #000}
/* available = parent owned, not bought yet: bright, gently pulsing gold */
#itemsWin .tnode.available .tframe{animation:abPulse 2s ease-in-out infinite}
@keyframes abPulse{0%,100%{box-shadow:0 0 0 0 #e0a44c88}55%{box-shadow:0 0 0 7px transparent}}
/* filter on frame+plate rather than the node so the 🔒 badge stays readable */
#itemsWin .tnode.locked .tframe,#itemsWin .tnode.locked .tnm{
  filter:grayscale(.85) brightness(.55)}
#itemsWin .tnode.isroot{width:74px;height:74px}
#itemsWin .tnode.isroot .tframe{box-shadow:0 0 0 3px #e0a44c55,0 0 30px -2px #e0a44cbb;
  animation:emberGlow 3.2s ease-in-out infinite}
@keyframes emberGlow{
  0%,100%{box-shadow:0 0 0 3px #e0a44c55,0 0 30px -2px #e0a44cbb}
  50%{box-shadow:0 0 0 6px #e0a44c33,0 0 52px 2px #ffc46bd8}}
#itemsWin .tnode.sel .tframe{animation:none;
  box-shadow:0 0 0 3px var(--gold2),0 0 26px -1px var(--gold)}
#itemsWin .tnode .tlock{position:absolute;right:-6px;top:-6px;font-size:12px;line-height:1;
  pointer-events:none;text-shadow:0 1px 3px #000}
#itemsWin .tnode .tcost{position:absolute;right:-7px;top:-7px;min-width:15px;height:15px;
  border-radius:4px;display:grid;place-items:center;pointer-events:none;
  font-size:9.5px;font-weight:800;color:#1a1204;padding:0 3px;
  background:linear-gradient(#f0c26a,#c9922f);box-shadow:0 1px 4px #000c}

/* mastery pips: five shards under a learned node, gold as they fill */
#itemsWin .mpips{display:flex;gap:3px;pointer-events:none}
#itemsWin .tnode .mpips{position:absolute;left:50%;top:calc(100% + 3px);
  transform:translateX(-50%)}
#itemsWin .mpips i{width:7px;height:7px;transform:rotate(45deg);border-radius:1px;
  background:#1c1610;border:1px solid #4a3b28;box-shadow:inset 0 1px 1px #000}
#itemsWin .mpips i.on{background:linear-gradient(135deg,#ffd38a,#c9922f);
  border-color:#ffd38a;box-shadow:0 0 6px #e0a44cb0}
#itemsWin .mpips.big i{width:11px;height:11px;border-radius:2px}

/* the name plate: only when the node asks for attention */
#itemsWin .tnode .tnm{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:10px;font-weight:700;color:#e6d9b8;background:#0c0806e8;
  border:1px solid #8a6a2e88;border-radius:4px;padding:2px 7px;pointer-events:none;
  display:none}
#itemsWin .tnode:hover .tnm,#itemsWin .tnode.sel .tnm,#itemsWin .tnode.isroot .tnm{display:block}

#itemsWin .abreset{position:absolute;right:10px;bottom:10px;z-index:2;padding:6px 11px;
  border-radius:8px;background:#171210e8;border:1px solid #3a2f22;color:var(--dim);
  font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
#itemsWin .abreset:hover{border-color:var(--gold);color:var(--ink)}

/* ---- the showcase pane -------------------------------------------------- */
#itemsWin .abview{border-left:1px solid #3a2f22;display:flex;flex-direction:column;gap:10px;
  padding:12px;overflow:auto;min-height:0;
  background:linear-gradient(180deg,#1b1512,#100c09)}

/* the stage: the character plays the selected art with the player's own gear */
#itemsWin .pvplate{position:relative;flex:none;padding:8px 8px 0;
  background:
    radial-gradient(90% 70% at 50% 30%,#3a2d20 0%,#1c1510 62%,#0e0a07 100%);
  border:1px solid #8a6a2e66;box-shadow:inset 0 0 30px #000c,0 4px 14px -6px #000}
#itemsWin .pvplate canvas{display:block;margin:0 auto;width:232px;height:232px;
  image-rendering:pixelated}
#itemsWin .pvcap{margin:0 -8px;padding:6px 10px;text-align:center;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold2);background:#00000055;border-top:1px solid #8a6a2e55}
/* gold L-brackets in the plate corners, same language as the rich tooltip */
#itemsWin .pvplate .cn{position:absolute;width:9px;height:9px;pointer-events:none;
  border:2px solid var(--gold);opacity:.9}
#itemsWin .pvplate .cn.tl{left:-1px;top:-1px;border-right:none;border-bottom:none}
#itemsWin .pvplate .cn.tr{right:-1px;top:-1px;border-left:none;border-bottom:none}
#itemsWin .pvplate .cn.bl{left:-1px;bottom:-1px;border-right:none;border-top:none}
#itemsWin .pvplate .cn.br{right:-1px;bottom:-1px;border-left:none;border-top:none}

/* point pools: one chip per tree, "spare / ever earned" */
#itemsWin .abpts{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:8px;
  border-bottom:1px solid #3a2f22}
#itemsWin .abpts .abchip{font-size:10px;font-weight:700;color:var(--c,#9fb0d0);border-radius:999px;
  border:1px solid var(--c,#9fb0d0);padding:1px 7px;background:#140f0b99;white-space:nowrap}
#itemsWin .abpts .abchip b{margin-left:0;font-size:11px;color:inherit}
#itemsWin .abpts .abchip i{font-style:normal;opacity:.55;font-weight:600}
#itemsWin .abpts .abchip.dim{opacity:.45}

/* ---- the selected art's card ------------------------------------------- */
#itemsWin .abcard{border:1px solid #3a2f22;border-radius:10px;background:#171210;padding:11px;
  display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
#itemsWin .abcard .abtop{display:flex;align-items:center;gap:10px}
#itemsWin .abtile{width:46px;height:46px;display:grid;place-items:center;flex:none;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c,#9fb0d0) 40%,transparent))}
#itemsWin .abtile img.abico{width:46px;height:46px;display:block}
#itemsWin .abgrp{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:var(--c,#9fb0d0)}
#itemsWin .abttl{font-size:14.5px;font-weight:800;color:var(--ink)}
#itemsWin .abstatus{font-size:11px;font-weight:700}
#itemsWin .abstatus.learned{color:var(--good)}
#itemsWin .abstatus.available{color:var(--gold2)}
#itemsWin .abstatus.locked{color:var(--faint)}
#itemsWin .abdesc{font-size:11px;color:var(--faint);line-height:1.5}
#itemsWin .abtags,#itemsWin .abnums{display:flex;flex-wrap:wrap;gap:4px}
#itemsWin .abtag{font-size:9.5px;color:var(--dim);background:#131009;border:1px solid #33291d;
  border-radius:6px;padding:2px 6px}
#itemsWin .abnum{font-size:10.5px;color:var(--dim);background:#131009;border:1px solid #33291d;
  border-radius:6px;padding:2px 7px;font-family:var(--mono)}
/* the price tag reads as the commitment it is */
#itemsWin .abnum.cost{color:var(--gold2);border-color:var(--gold);background:#241d10}

/* mastery block: pips, the road to the next level, what a level is worth */
#itemsWin .mblock{display:flex;flex-direction:column;gap:5px;padding:8px 9px;
  background:#120d08;border:1px solid #8a6a2e55;border-radius:8px}
#itemsWin .mrow{display:flex;align-items:center;gap:8px}
#itemsWin .mlab{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold2);font-weight:800}
#itemsWin .mlvl{margin-left:auto;font-size:11px;font-weight:800;color:var(--gold2);
  font-family:var(--mono)}
#itemsWin .mbar{height:7px;border-radius:4px;background:#0b0806;border:1px solid #4a3b28;
  overflow:hidden}
#itemsWin .mbar i{display:block;height:100%;
  background:linear-gradient(90deg,#8a6a2e,#e0a44c,#ffd38a);box-shadow:0 0 8px #e0a44c88}
#itemsWin .mnums{font-size:10px;color:var(--dim);font-family:var(--mono)}
#itemsWin .mnums.gold{color:var(--gold2)}

#itemsWin .abact{width:100%;padding:10px;border-radius:9px;border:none;font-family:inherit;
  font-size:12.5px;font-weight:800;letter-spacing:.05em;cursor:pointer;color:#1a1204;
  background:linear-gradient(#f0c26a,#c9922f);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
#itemsWin .abact:hover{filter:brightness(1.08)}
/* Cast wears the kit's blood red — the blue button belonged to the old navy theme */
#itemsWin .abact.cast{background:linear-gradient(#c2453a,#7e1f18);color:#ffe9dd;
  text-shadow:0 1px 2px #0008}
#itemsWin .abact:disabled{background:#1a1510;border:1px solid #33291d;color:var(--faint);
  font-weight:700;letter-spacing:0;cursor:not-allowed}
#itemsWin .abhint{font-size:11px;color:var(--faint);line-height:1.6;text-align:center;padding:14px 6px}