/* Witch Succession: PvE Prime skill choices, rebuilt to match the in-game Prime skill selection tree (2026-10-21) */
.prime-board { width: fit-content; max-width: 100%; margin: 1.25rem auto 0; }
.prime-board-title { margin: 0 0 0.6rem; text-align: center; font-family: var(--font-display, "Cinzel", serif); font-size: 1rem; letter-spacing: 0.08em; color: var(--gold, #c9a46a); }
.prime-tree { --pt-w: 246px; width: 790px; max-width: 100%; box-sizing: border-box; margin: 0 auto; padding: 6px 0; overflow: hidden; background: none;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif; }
.pt-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; }
.pt-row + .pt-row { margin-top: 10px; }
.pt-pair { display: flex; flex-direction: column; gap: 12px; }
.pt-link { display: flex; align-items: center; width: 100%; }
.pt-link + .pt-link { margin-top: 12px; }
.pt-link .pt-card + .pt-card { margin-left: 62px; }
.pt-link .pt-card + .pt-card::before { width: 62px; left: -63px; background: #3b3432; }
/* card */
.pt-card { position: relative; box-sizing: border-box; width: var(--pt-w); height: 66px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 11px;
  background: #232020; border: 1px solid #322b2a; }
.pt-card::before { content: ""; position: absolute; top: 50%; left: -9px; width: 8px; height: 2px; background: #4a4341; }
.pt-row .pt-pair:first-child .pt-card::before { left: -4px; width: 4px; }
.pt-card.is-on { background: linear-gradient(180deg, #312d2d 0%, #2e2a2b 100%); border-color: #726b69;
  box-shadow: inset 0 0 0 2px #2b2728, inset 0 0 0 3px #5c5654; }
.pt-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; background: #1a1818; border: 1px solid #2c2827; }
.pt-icon img.combo-skill-icon { width: 40px; height: 40px; border-radius: 0; filter: grayscale(1) brightness(0.42) contrast(1.1); }
.is-on .pt-icon { border-color: #e2bf72; box-shadow: 0 0 0 1px #6a5530, 0 0 6px rgba(236,196,110,0.55); }
.is-on .pt-icon img.combo-skill-icon { filter: none; }
.pt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-card .combo-skill-name { display: block; min-width: 0; padding-right: 34px; font-size: 15px; font-weight: 700; line-height: 18px; color: #535353;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.pt-card:not(.is-on) .combo-skill-name { padding-right: 0; }
.pt-card.is-on .combo-skill-name { color: #eb9261; }
.pt-gems { display: flex; align-items: center; gap: 5px; height: 12px; padding-left: 2px; }
.pt-gems i { position: relative; width: 5px; height: 5px; border-radius: 50%; background: #3e3b3a; }
.pt-gems i.on { background: radial-gradient(circle at 45% 40%, #fff4c2 0%, #ffc63d 45%, #d9861a 100%); box-shadow: 0 0 3px rgba(255,180,60,0.8); }
.pt-gems i.cur::after { content: ""; position: absolute; inset: -4px; border: 1px solid #d9d6d2;
  -webkit-mask: linear-gradient(#000 0 0) top left/4px 4px, linear-gradient(#000 0 0) top right/4px 4px, linear-gradient(#000 0 0) bottom left/4px 4px, linear-gradient(#000 0 0) bottom right/4px 4px;
  -webkit-mask-repeat: no-repeat; mask: linear-gradient(#000 0 0) top left/4px 4px, linear-gradient(#000 0 0) top right/4px 4px, linear-gradient(#000 0 0) bottom left/4px 4px, linear-gradient(#000 0 0) bottom right/4px 4px; mask-repeat: no-repeat; }
.pt-card:not(.is-on) .pt-gems i.cur::after { border-color: #8a8682; }
.pt-attrs { display: block; align-self: flex-start; flex: 0 0 auto; object-fit: contain; height: 20px; width: auto; max-width: 100%; image-rendering: auto; }
.pt-arrows { position: absolute; top: 13px; right: 10px; width: 30px; height: 12px;
  background: linear-gradient(to left, transparent 0, transparent 0) ; }
.pt-arrows::before, .pt-arrows::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.pt-arrows::before { left: 0; border-right: 9px solid #b98d3a; }
.pt-arrows::after { right: 0; border-left: 9px solid #d4a443; }
.pt-lock { position: absolute; right: 13px; bottom: 9px; width: 11px; height: 8px; background: #a9a6a3; border-radius: 1px; }
.pt-lock::before { content: ""; position: absolute; left: 4px; bottom: 7px; width: 7px; height: 6px; border: 2px solid #a9a6a3; border-bottom: 0; border-radius: 5px 5px 0 0; }
.pt-lock::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3px; height: 3px; border-radius: 50%; background: #2e2a2b; }
/* narrower screens: pairs wrap, then cards go full width */
@media (max-width: 820px) {
  .prime-board { width: auto; }
  .prime-tree { width: auto; padding: 0; }
  .pt-row { justify-content: center; }
  .pt-link { justify-content: center; }
  .pt-row { row-gap: 12px; column-gap: 12px; }
  .pt-row + .pt-row { margin-top: 12px; }
  .pt-card::before, .pt-row .pt-pair:first-child .pt-card::before { display: none; }
  .pt-link { flex-wrap: wrap; gap: 12px; }
  .pt-link .pt-card + .pt-card { margin-left: 0; }
}
@media (max-width: 560px) {
  .prime-tree { --pt-w: 100%; }
  .pt-pair, .pt-link { width: 100%; }
}