/**
 * Diablo IV war plans stylesheet.
 * Author: vlad1116
 * Website: https://arpg-life.ru
 * Version: 0.4.0
 *
 * Shared by the admin builder (interactive) and the public planner
 * (read-only) — both render the same markup from assets/js/war-plans.js.
 * Depends on class-mechanics.css being loaded first: war-plans.js emits
 * .d4cm-panel/.d4cm-title/.d4cm-empty/.d4cm-tooltip directly, reusing that
 * stylesheet's rules and CSS variables wholesale — this file only adds the
 * 7-tree plan-selector row and the tree canvas (SVG lines + absolutely-
 * positioned icon-frame nodes — same technique as mercenaries.css's
 * .d4mc-tree rules; upgrade icons: see
 * tools/build_war_plans.py's UPGRADE_ICON_BASE docblock).
 */

.d4wp-plan-selector {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* only="1": one plan, its icon and name in place of the plan switcher. */
.d4wp-plan-single {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.d4wp-plan-single__name {
  color: var(--d4cm-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

.d4wp-plan-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  padding: 8px 6px;
  background: #14120f;
  border: 1px solid var(--d4cm-line);
  border-radius: 4px;
  color: var(--d4cm-text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.d4wp-plan-option:hover {
  border-color: #8c6a3f;
  background: #201912;
}

.d4wp-plan-option.is-active {
  border-color: var(--d4cm-gold);
  background: linear-gradient(180deg, #2b1f13, #1a130a);
  box-shadow: 0 0 10px rgba(232, 185, 113, .3);
}

.d4wp-plan-option__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #0f0e0c;
  border: 1px solid var(--d4cm-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.d4wp-plan-option__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.d4wp-plan-option__name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.d4wp-plan-option__points {
  font-size: 10px;
  color: var(--d4cm-muted);
  font-variant-numeric: tabular-nums;
}

.d4wp-plan-option.is-active .d4wp-plan-option__points {
  color: var(--d4cm-gold);
}

.d4wp-points {
  text-align: center;
  font-size: 13px;
  color: var(--d4cm-muted);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

/* Tree canvas — see mercenaries.css's own .d4mc-tree docblock for the
   shared reasoning (fixed-size diagram, no zoom/pan). .d4wp-tree-fit is the
   fit-to-width wrapper (touch-sheet.js's fitTrees() scales the inner
   .d4wp-tree with transform: scale(), never above 1). */

.d4wp-tree-fit {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.d4wp-tree {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.d4wp-tree-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.d4wp-tree-line {
  stroke-width: 2;
  transition: stroke .2s ease;
}

.d4wp-tree-line.is-inactive {
  stroke: rgba(130, 105, 68, .28);
  stroke-dasharray: 4 4;
}

.d4wp-tree-line.is-active {
  stroke: var(--d4cm-gold);
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(232, 185, 113, .55));
}

.d4wp-tree-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.d4wp-tree-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.d4wp-tree-node:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.15);
}

.d4wp-tree-node__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #14110d;
  border: 2px solid #503d28;
}

.d4wp-tree-node__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.d4wp-tree-node.is-locked {
  opacity: .35;
  filter: grayscale(1);
  cursor: default;
}

.d4wp-tree-node.is-available .d4wp-tree-node__frame {
  border-color: #8c6a3f;
}

.d4wp-tree-node.is-selected .d4wp-tree-node__frame {
  border-color: var(--d4cm-gold);
  box-shadow: 0 0 10px rgba(232, 185, 113, .55);
}

.d4wp-tree-node--root {
  width: 48px;
  height: 48px;
  cursor: default;
}

.d4wp-tree-node--root .d4wp-tree-node__frame {
  border: 2px solid #8a6bc9;
  box-shadow: 0 0 12px rgba(138, 107, 201, .45);
}

/* theme-guard:start — generated by tools/theme-guard.mjs, do not edit */
html body .d4wp-plan-option:where(:hover, :focus) { background: #14120f; border: 1px solid var(--d4cm-line); color: var(--d4cm-text); }
html body .d4wp-tree-node:where(:hover, :focus) { background: transparent; border: none; }
/* theme-guard:end */