/**
 * Diablo IV Skill Tree Planner Stylesheet
 * Author: vlad1116
 * Website: https://arpg-life.ru
 * Version: 0.2.0
 */

.d4st-planner {
  --d4st-bg: #0b0b0e;
  --d4st-panel: #15151a;
  --d4st-panel-2: #1d1d24;
  --d4st-line: #2f2e34;
  --d4st-line-strong: #5f584b;
  --d4st-accent: #c69a45;
  --d4st-gold: #e8b971;
  --d4st-red: #9e252e;
  --d4st-muted: #898793;
  --d4st-text: #ececf1;

  width: min(960px, calc(100vw - 32px));
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  /* The blocks sit in a theme column that is often narrower than the
     viewport, so the layout below reacts to the block's own width
     (@container d4st), not to the screen's. */
  container: d4st / inline-size;
  color: var(--d4st-text);
  background: var(--d4st-bg);
  border: 1px solid #2c2b30;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
}

.d4st-planner * {
  box-sizing: border-box;
}

/* Header */
.d4st-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--d4st-line);
  background: linear-gradient(180deg, #17171b, #101014);
}

.d4st-header__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

.d4st-brand h2 {
  margin: 2px 0 0;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 500;
}

.d4st-kicker {
  color: #c63a42 !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 800;
}

/* Class Switcher (matching equipment blocks) */
.d4st-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.d4st-class {
  border: 1px solid var(--d4st-line);
  background: #18181d;
  color: #aaa8b1;
  padding: 7px 11px;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  transition: all .15s ease;
}

.d4st-class:hover {
  color: #fff;
  border-color: #55525a;
}

.d4st-class.is-active {
  color: #fff;
  border-color: #74333a;
  background: linear-gradient(180deg, #3a1b20, #231418);
  box-shadow: inset 0 -2px #b8323b;
}

/* Toolbar */
.d4st-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.d4st-points {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.d4st-points__label {
  color: #b0a38f;
  font-family: Georgia, serif;
}

.d4st-points__val {
  color: #f0ddba;
  font-weight: 700;
  font-size: 16px;
  padding: 2px 8px;
  background: #201912;
  border: 1px solid #57432c;
  border-radius: 2px;
}

.d4st-points__val.is-full {
  color: #ffd27d;
  border-color: #c69a45;
  box-shadow: 0 0 10px rgba(198, 154, 69, .3);
}

.d4st-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.d4st-btn {
  border: 1px solid #4a3b29;
  background: #191612;
  color: #d1bfa0;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  transition: background .15s ease;
}

.d4st-btn:hover {
  background: #2b2118;
  color: #fff;
}

.d4st-btn--reset {
  border-color: #633232;
  color: #e5a4a4;
}

.d4st-btn--reset:hover {
  background: #381a1a;
  color: #fff;
}

.d4st-btn--undo {
  border-color: #60482c;
  color: #f0d7ad;
}

.d4st-zoom-group {
  display: inline-flex;
  align-items: center;
  background: #11100e;
  border: 1px solid #4a3b29;
  border-radius: 2px;
}

.d4st-btn-icon {
  background: transparent;
  border: none;
  color: #c4a570;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.d4st-btn-icon:hover {
  color: #fff;
  background: #272016;
}

.d4st-zoom-level {
  font-size: 11px;
  color: #b0a38f;
  padding: 0 4px;
  min-width: 38px;
  text-align: center;
}

.d4st-notice {
  margin-top: 10px;
  padding: 8px 12px;
  background: #272013;
  color: #ddc8a2;
  border-left: 3px solid #c69a45;
  font-size: 13px;
}

.d4st-btn--order-toggle {
  border-color: #4a3b29;
}

/* Body row: canvas + "Путь прокачки" side panel */
.d4st-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.d4st-order-panel {
  flex: 0 0 240px;
  max-width: 280px;
  max-height: 640px;
  overflow-y: auto;
  background: #14120f;
  border: 1px solid #4a3b29;
  border-radius: 2px;
  padding: 10px 12px;
}

.d4st-order-panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #e5c98a;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.d4st-order-panel__empty {
  font-size: 12px;
  color: #a89980;
  margin: 0;
}

.d4st-order-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.d4st-order-panel__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #d1bfa0;
  padding: 3px 4px;
  border-radius: 2px;
}

.d4st-order-panel__row:hover {
  background: #201b14;
}

.d4st-order-panel__num {
  flex: 0 0 auto;
  min-width: 18px;
  text-align: right;
  color: #8a7a5f;
  font-variant-numeric: tabular-nums;
}

.d4st-order-panel__icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  object-fit: contain;
  background: #1a1a1a;
  flex: 0 0 auto;
}

.d4st-order-panel__name {
  flex: 1 1 auto;
  min-width: 0;
}

/* Viewport & Canvas */
.d4st-canvas-viewport {
  touch-action: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 640px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(119, 100, 73, .13), transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(50, 20, 20, .18), transparent 50%),
    linear-gradient(180deg, #131316, #09090c);
  cursor: grab;
  user-select: none;
}

.d4st-canvas {
  /* width/height set inline per-tree (skill-tree.js) to fit the actual
     node bounds — a fixed size here would clip the SVG connector lines
     for any tree taller than the old 1800x2400 guess. */
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transition: transform .05s linear;
}

.d4st-connections {
  /* width/height set inline per-tree (skill-tree.js), see .d4st-canvas above */
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

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

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

/* Lit route (allocated skill back up to the first section), red like the
   game's own skill tree. */
.d4st-line.is-active {
  stroke: #d23a2f;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(210, 58, 47, .65));
}

.d4st-node--category.is-reached .d4st-category-diamond {
  border-color: #d23a2f;
  box-shadow: 0 0 0 1px #2a1f14, 0 0 14px rgba(210, 58, 47, .55), inset 0 0 10px rgba(0, 0, 0, .7);
}

.d4st-nodes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1800px;
  height: 2400px;
}

/* Node Styling */
.d4st-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform .15s ease, filter .15s ease;
}

.d4st-node:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.d4st-node.is-locked {
  opacity: .35;
  filter: grayscale(1);
  cursor: not-allowed;
}

.d4st-node.is-unlocked {
  opacity: .85;
}

.d4st-node.is-allocated {
  opacity: 1;
}

/* Category Node */
.d4st-node--category {
  cursor: default;
  pointer-events: none;
  flex-direction: column;
  gap: 4px;
}

.d4st-category-diamond {
  width: 32px;
  height: 32px;
  transform: rotate(45deg);
  background: #241c14;
  border: 1px solid #785a33;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, .8);
}

.d4st-category-diamond span {
  transform: rotate(-45deg);
  color: #e8b971;
  font-size: 13px;
  font-weight: 700;
  font-family: Georgia, serif;
}

/* Hub with the game's category icon: a larger diamond plate, icon upright,
   hover shows the name (title attribute), so the node takes pointer events. */
.d4st-node--category.has-icon {
  pointer-events: auto;
  cursor: help;
}

.d4st-node--category.has-icon .d4st-category-diamond {
  width: 58px;
  height: 58px;
  background: radial-gradient(circle at 50% 50%, #3a2c1d 0%, #1a140e 75%);
  border: 2px solid #9a7440;
  box-shadow: 0 0 0 1px #2a1f14, 0 0 14px rgba(0, 0, 0, .85), inset 0 0 10px rgba(0, 0, 0, .7);
}

.d4st-category-icon {
  width: 60px;
  height: 60px;
  transform: rotate(-45deg);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9));
  pointer-events: none;
}

.d4st-node--category.has-icon:hover .d4st-category-diamond {
  border-color: #e8b971;
}

.d4st-category-label {
  color: #b0a38f;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(15, 13, 11, .85);
  padding: 2px 6px;
  border-radius: 2px;
}

/* Active Skill Node (Square) */
.d4st-node--active .d4st-node__frame {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 2px solid #57442d;
  background: #17130e;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .8), 0 4px 10px rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.d4st-node--active.is-allocated .d4st-node__frame {
  border-color: #d4a754;
  background: linear-gradient(135deg, #3d2a19, #22180f);
  box-shadow: 0 0 14px rgba(212, 167, 84, .45), inset 0 0 8px rgba(255, 222, 153, .3);
}

/* Enhanced Skill (Diamond) */
.d4st-node--enhanced .d4st-node__frame {
  width: 36px;
  height: 36px;
  transform: rotate(45deg);
  border: 2px solid #503d28;
  background: #14110d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d4st-node--enhanced.is-allocated .d4st-node__frame {
  border-color: #e0b45d;
  background: #332314;
  box-shadow: 0 0 10px rgba(224, 180, 93, .5);
}

/* Passive nodes intentionally remain below enhanced 36px and active 48px. */
.d4st-node--passive .d4st-node__frame {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #503d28;
  background: #14110d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.d4st-node__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.d4st-node--enhanced .d4st-node__frame {
  width: 36px;
  height: 36px;
  transform: rotate(45deg);
  border: 2px solid #503d28;
  background: #14110d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.d4st-node--enhanced .d4st-node__inner {
  transform: rotate(-45deg);
  width: 142%;
  height: 142%;
}

.d4st-node__icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  transition: filter .15s ease, transform .15s ease;
}

.d4st-node--passive .d4st-node__icon {
  border-radius: 50%;
}

.d4st-node:hover .d4st-node__icon {
  filter: brightness(1.2);
}

.d4st-node.is-locked .d4st-node__icon {
  filter: grayscale(1) brightness(0.5);
}

.d4st-node.is-allocated .d4st-node__icon {
  filter: brightness(1.25) contrast(1.1);
}

.d4st-node__fallback {
  color: #e8b971;
  font-weight: 700;
  font-size: 13px;
  font-family: Georgia, serif;
  text-transform: uppercase;
  pointer-events: none;
}

.d4st-node__title {
  display: none;
}

/* Rank Badge */
.d4st-node__rank-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: #100e0b;
  border: 1px solid #5a462f;
  color: #cfc2aa;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}

.d4st-node.is-allocated .d4st-node__rank-badge {
  color: #f7e0b5;
  border-color: #c49944;
  background: #291e12;
}

.d4st-node__rank-badge.is-max {
  background: linear-gradient(180deg, #66411a, #38210b);
  border-color: #f0c56d;
  color: #fff;
  box-shadow: 0 0 6px rgba(240, 197, 109, .6);
}

/* Footer & Active Skill Bar */
.d4st-footer {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--d4st-line);
  background: linear-gradient(180deg, #101014, #0b0b0e);
}

.d4st-skillbar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.d4st-skillbar-heading {
  font-family: Georgia, serif;
  font-size: 13px;
  color: #c4a570;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.d4st-skillbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}

.d4st-skillbar-slot {
  width: 52px;
  height: 52px;
  background: #14120f;
  border: 1px solid #4a3b28;
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}

.d4st-skillbar-slot:hover {
  border-color: #8c6a3f;
  background: #201912;
}

.d4st-skillbar-slot.has-skill {
  border-color: #c49944;
  background: linear-gradient(180deg, #2b1f13, #1a130a);
  box-shadow: 0 0 8px rgba(196, 153, 68, .3);
}

.d4st-skillbar-key {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  color: #9c8a74;
  font-weight: 700;
  text-transform: uppercase;
}

.d4st-skillbar-empty {
  color: #4a3b28;
  font-size: 18px;
  font-weight: 300;
}

.d4st-skillbar-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
}

.d4st-skillbar-name {
  font-size: 9px;
  color: #f0ddba;
  line-height: 1.1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.d4st-skillbar-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.d4st-skillbar-slot.is-open {
  border-color: var(--d4st-gold);
  box-shadow: 0 0 0 1px var(--d4st-gold), 0 0 10px rgba(232, 185, 113, .35);
}

/* Themed skill picker popover, replacing the browser's native <select>. */
.d4st-skillbar-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  min-width: 190px;
  max-width: 260px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: linear-gradient(180deg, #1c1a16, #121110);
  border: 1px solid var(--d4st-line-strong);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  cursor: default;
  text-align: left;
}

.d4st-skillbar-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #121110;
}

.d4st-skillbar-popover__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--d4st-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.d4st-skillbar-popover__item:hover,
.d4st-skillbar-popover__item:focus-visible {
  background: rgba(196, 153, 68, .16);
  border-color: rgba(196, 153, 68, .4);
  outline: none;
}

.d4st-skillbar-popover__item.is-current {
  border-color: var(--d4st-gold);
  background: rgba(232, 185, 113, .12);
}

.d4st-skillbar-popover__item--clear {
  color: var(--d4st-muted);
  border-bottom: 1px solid var(--d4st-line);
  border-radius: 4px 4px 0 0;
  margin-bottom: 2px;
}

.d4st-skillbar-popover__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  overflow: hidden;
  background: #0f0e0c;
  border: 1px solid var(--d4st-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.d4st-skillbar-popover__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.d4st-skillbar-popover__icon--empty {
  color: var(--d4st-muted);
  font-size: 12px;
}

.d4st-skillbar-popover__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d4st-skillbar-popover__empty {
  padding: 8px;
  color: var(--d4st-muted);
  font-size: 12px;
  text-align: center;
}

.d4st-help {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: #79746b;
}

/* Narrow block (the theme column, not the screen, decides): the tree takes the
   full width on top, the "Путь прокачки" panel goes below it. Side by side the
   panel's 240px used up all the width and the tree collapsed to nothing. */
@container d4st (max-width: 640px) {
  .d4st-header {
    padding: 12px 14px;
  }
  .d4st-header__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .d4st-classes {
    width: 100%;
  }
  .d4st-class {
    flex: 1 1 calc(25% - 6px);
    text-align: center;
    padding: 6px 4px;
    font-size: 11px;
  }
  .d4st-body {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .d4st-canvas-viewport {
    flex: 0 0 auto;
    width: 100%;
    height: clamp(320px, 60vh, 640px);
  }
  .d4st-order-panel {
    flex: 0 0 auto;
    max-width: none;
    max-height: 240px;
    width: 100%;
  }
  .d4st-footer {
    padding: 12px 10px 14px;
  }
  .d4st-skillbar {
    gap: 6px;
  }
  .d4st-skillbar-slot {
    width: 44px;
    height: 44px;
  }
}

@container d4st (max-width: 360px) {
  .d4st-header {
    padding: 10px;
  }
  .d4st-brand h2 {
    font-size: 20px;
  }
  .d4st-skillbar-slot {
    width: 40px;
    height: 40px;
  }
}

/* Icons drawn from the class's sprite sheet (tools/build_skill_sprites.py)
   instead of one file each — same box as the <img> they replace. */
.d4st-sprite {
  display: block;
  background-repeat: no-repeat;
}

.d4st-node__inner .d4st-sprite {
  width: 100%;
  height: 100%;
}

/* No-cost nodes (the druid's forms and "Versatile" modifiers): picked without
   spending one of the 83 points, so no rank badge and a cooler frame. */
.d4st-node--free .d4st-node__frame {
  border-color: #5d6b78;
}

.d4st-node--free.is-allocated .d4st-node__frame {
  border-color: #9fc4e0;
  box-shadow: 0 0 10px rgba(159, 196, 224, .45);
}

.d4st-node--free .d4st-node__rank-badge {
  display: none;
}

/* theme-guard:start — generated by tools/theme-guard.mjs, do not edit */
html body .d4st-class:where(:hover, :focus) { border: 1px solid var(--d4st-line); background: #18181d; color: #aaa8b1; }
html body .d4st-btn:where(:hover, :focus) { border: 1px solid #4a3b29; background: #191612; color: #d1bfa0; }
html body .d4st-btn--reset:where(:hover, :focus) { border-color: #633232; color: #e5a4a4; }
html body .d4st-btn--undo:where(:hover, :focus) { border-color: #60482c; color: #f0d7ad; }
html body .d4st-btn-icon:where(:hover, :focus) { background: transparent; border: none; color: #c4a570; }
html body .d4st-btn--order-toggle:where(:hover, :focus) { border-color: #4a3b29; }
html body .d4st-node:where(:hover, :focus) { background: transparent; border: none; }
html body .d4st-skillbar-popover__item:where(:hover, :focus) { background: transparent; border: 1px solid transparent; color: var(--d4st-text); }
html body .d4st-skillbar-popover__item--clear:where(:hover, :focus) { color: var(--d4st-muted); border-bottom: 1px solid var(--d4st-line); }
/* theme-guard:end */