/**
 * Diablo IV Paragon Board Stylesheet
 * Author: vlad1116
 * Website: https://arpg-life.ru
 * Version: 0.1.0
 */

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

  position: relative;
  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: d4pb / inline-size;
  color: var(--d4pb-text);
  background: var(--d4pb-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);
}

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

.d4pb-error {
  padding: 16px;
  color: #e5a4a4;
  background: #1a1214;
  border: 1px solid #633232;
}

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

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

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

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

.d4pb-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

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

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

/* Toolbar */
.d4pb-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);
}

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

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

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

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

.d4pb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.d4pb-stat-pill {
  font-size: 11px;
  color: #cfc2aa;
  background: #14120f;
  border: 1px solid #4a3b28;
  border-radius: 2px;
  padding: 3px 8px;
}

.d4pb-stat-pill b {
  color: #f0ddba;
}

.d4pb-glyph-level {
  display: flex;
  align-items: center;
  gap: 4px;
}

.d4pb-glyph-level-label {
  font-size: 11px;
  color: #b0a38f;
  margin-right: 2px;
}

.d4pb-glyph-level-btn {
  border: 1px solid #4a3b29;
  background: #14120f;
  color: #9c8a74;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .15s ease;
}

.d4pb-glyph-level-btn:hover {
  color: #fff;
  border-color: #8c6a3f;
}

.d4pb-glyph-level-btn.is-active {
  color: #fff;
  border-color: #b98af0;
  background: rgba(185, 138, 240, .18);
  box-shadow: 0 0 8px rgba(185, 138, 240, .35);
}

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

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

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

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

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

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

.d4pb-btn--confirm {
  border-color: #c49944;
  color: #f7e0b5;
  background: linear-gradient(180deg, #2b1f13, #1a130a);
}

.d4pb-btn--confirm:hover {
  background: linear-gradient(180deg, #3a2a18, #241a0d);
}

.d4pb-btn--cancel {
  border-color: #633232;
  color: #e5a4a4;
}

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

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

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

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

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

/* Viewport & Canvas */
.d4pb-canvas-viewport {
  touch-action: none;
  width: 100%;
  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;
}

.d4pb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transition: transform .05s linear;
}

.d4pb-svg {
  display: block;
}

.d4pb-edge {
  stroke: rgba(130, 105, 68, .28);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  transition: stroke .2s ease;
}

.d4pb-edge.is-active {
  stroke: #e8b971;
  stroke-width: 3;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 5px rgba(232, 185, 113, .6));
}

.d4pb-edge.is-ghost {
  stroke: rgba(120, 190, 220, .4);
  stroke-dasharray: 3 5;
}

/* Tiles */
.d4pb-tile {
  cursor: pointer;
}

.d4pb-tile-ring {
  fill: #14110d;
  stroke: #503d28;
  stroke-width: 2;
  transition: stroke .15s ease, fill .15s ease;
}

.d4pb-tile:hover .d4pb-tile-ring {
  stroke: #8c6a3f;
}

.d4pb-tile-bg {
  opacity: .9;
  pointer-events: none;
}

.d4pb-tile-icon {
  pointer-events: none;
  filter: brightness(1.05);
}

.d4pb-tile.is-locked {
  cursor: not-allowed;
}

.d4pb-tile.is-locked .d4pb-tile-ring,
.d4pb-tile.is-locked .d4pb-tile-bg,
.d4pb-tile.is-locked .d4pb-tile-icon {
  opacity: .35;
  filter: grayscale(1);
}

.d4pb-tile.is-ghost {
  cursor: default;
  opacity: .55;
}

.d4pb-tile.is-ghost .d4pb-tile-ring {
  stroke: #6fb8d8;
  stroke-dasharray: 3 3;
}

.d4pb-tile.is-gate-open .d4pb-tile-ring {
  stroke: var(--d4pb-gold);
  filter: drop-shadow(0 0 6px rgba(232, 185, 113, .6));
}

.d4pb-tile.is-bonus-active .d4pb-tile-ring {
  stroke: #f0c56d;
  filter: drop-shadow(0 0 8px rgba(240, 197, 109, .55));
}

.d4pb-tile.is-socket .d4pb-tile-ring {
  stroke: #6a4fa0;
}

.d4pb-tile.is-glyph-active .d4pb-tile-ring {
  stroke: #b98af0;
  filter: drop-shadow(0 0 8px rgba(185, 138, 240, .6));
}

/* Nodes within a hovered glyph socket's radius — toggled directly via JS,
   not part of a render(), so it needs its own transition independent of
   is-locked/is-bonus-active. */
.d4pb-tile.is-glyph-radius .d4pb-tile-ring {
  stroke: #b98af0;
  stroke-width: 3;
}

/* Tooltip */
.d4pb-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #1c1a16, #121110);
  border: 1px solid var(--d4pb-line-strong);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s ease;
  font-size: 12px;
}

.d4pb-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.d4pb-tooltip-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.d4pb-tooltip-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  overflow: hidden;
  background: #0f0e0c;
  border: 1px solid var(--d4pb-line);
}

.d4pb-tooltip-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.d4pb-tooltip-type {
  color: var(--d4pb-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.d4pb-tooltip-name {
  color: #f0ddba;
  font-weight: 700;
}

.d4pb-tooltip-divider {
  margin: 6px 0;
  border-top: 1px solid var(--d4pb-line);
}

.d4pb-tooltip-effect {
  color: var(--d4pb-text);
}

.d4pb-tooltip-bonus {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .04);
  border-left: 2px solid var(--d4pb-line-strong);
  color: var(--d4pb-muted);
}

.d4pb-tooltip-bonus.is-active {
  border-left-color: var(--d4pb-gold);
  color: #f0ddba;
}

.d4pb-tooltip-bonus-label {
  font-weight: 700;
  margin-bottom: 2px;
}

.d4pb-tooltip-bonus-req {
  margin-top: 2px;
  font-size: 11px;
  opacity: .85;
}

.d4pb-tooltip-hint {
  margin-top: 6px;
  color: #8fb4d8;
  font-style: italic;
}

/* Board list */
.d4pb-footer {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--d4pb-line);
  background: linear-gradient(180deg, #101014, #0b0b0e);
}

.d4pb-boardlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.d4pb-boardchip-group {
  position: relative;
  display: flex;
}

.d4pb-boardchip {
  position: relative;
  border: 1px solid var(--d4pb-line);
  background: #14120f;
  color: #cfc2aa;
  padding: 5px 10px;
  border-radius: 2px 0 0 2px;
  font-size: 11px;
  cursor: pointer;
}

.d4pb-boardchip-group:has(.d4pb-boardchip-detach) .d4pb-boardchip {
  border-radius: 2px 0 0 2px;
}

.d4pb-boardchip-group:not(:has(.d4pb-boardchip-detach)) .d4pb-boardchip {
  border-radius: 2px;
}

.d4pb-boardchip:hover {
  border-color: #8c6a3f;
  color: #fff;
}

.d4pb-boardchip.is-start {
  border-color: #57442d;
  color: #f0ddba;
}

.d4pb-boardchip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--d4pb-gold);
  box-shadow: 0 0 6px rgba(232, 185, 113, .8);
}

.d4pb-boardchip-detach {
  border: 1px solid #633232;
  border-left: none;
  background: #1a1214;
  color: #e5a4a4;
  border-radius: 0 2px 2px 0;
  font-size: 11px;
  cursor: pointer;
  padding: 0 8px;
}

.d4pb-boardchip-detach:hover {
  background: #381a1a;
  color: #fff;
}

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

/* Board picker modal */
.d4pb-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 5, 4, .75);
}

.d4pb-modal {
  width: min(360px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  overflow-y: auto;
  padding: 18px;
  background: linear-gradient(180deg, #1c1a16, #121110);
  border: 1px solid var(--d4pb-line-strong);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.d4pb-modal h3 {
  margin: 0 0 12px;
  color: #f0ddba;
  font-family: Georgia, serif;
  font-size: 16px;
}

.d4pb-board-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.d4pb-board-option {
  padding: 8px 10px;
  background: #14120f;
  border: 1px solid var(--d4pb-line);
  border-radius: 3px;
  color: var(--d4pb-text);
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.d4pb-board-option:hover {
  border-color: var(--d4pb-gold);
  background: rgba(232, 185, 113, .1);
}

.d4pb-board-options-empty {
  color: var(--d4pb-muted);
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
}

.d4pb-modal-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Glyph picker */
.d4pb-modal--glyphs {
  width: min(420px, calc(100% - 40px));
}

.d4pb-glyph-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}

.d4pb-glyph-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: #14120f;
  border: 1px solid var(--d4pb-line);
  border-radius: 3px;
  color: var(--d4pb-text);
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.d4pb-glyph-option:hover {
  border-color: #b98af0;
  background: rgba(185, 138, 240, .1);
}

.d4pb-glyph-option.is-current {
  border-color: #b98af0;
  background: rgba(185, 138, 240, .16);
}

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

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

.d4pb-glyph-option__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.d4pb-glyph-option__name {
  font-size: 13px;
  font-weight: 600;
  color: #f0ddba;
}

.d4pb-glyph-option__effect {
  font-size: 11px;
  color: var(--d4pb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rotate/attach bar for a live board preview */
.d4pb-preview-bar {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #1c1a16, #121110);
  border: 1px solid var(--d4pb-line-strong);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  font-size: 12px;
}

.d4pb-preview-label {
  color: #8fb4d8;
}

.d4pb-preview-actions {
  display: flex;
  gap: 6px;
}

/* Mobile Responsive — by the block's own width (@container), not the screen's */
@container d4pb (max-width: 640px) {
  .d4pb-header__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .d4pb-classes {
    width: 100%;
  }
  .d4pb-class {
    flex: 1 1 calc(25% - 6px);
    text-align: center;
    padding: 6px 4px;
    font-size: 11px;
  }
  .d4pb-header {
    padding: 12px 14px;
  }
  .d4pb-canvas-viewport {
    height: clamp(320px, 60vh, 640px);
  }
  .d4pb-preview-bar {
    flex-direction: column;
    gap: 8px;
    bottom: 16px;
  }
}

/* Glyph legendary bonus: orange when the selected glyph level (46+) enables it. */
.d4pb-tooltip-legendary.is-active {
  color: #f08a3c;
}

.d4pb-tooltip-legendary.is-inactive {
  opacity: .55;
}

/* English name next to the Russian one (boards, glyphs) — secondary, for cross-referencing guides. */
.d4pb-en {
  color: #8f8a80;
  font-size: .82em;
  font-weight: 400;
  font-style: italic;
}

.d4pb-board-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.d4pb-board-option__title {
  font-weight: 600;
}

.d4pb-board-option__legendary {
  color: #c9b99a;
  font-size: 12px;
  line-height: 1.4;
}

.d4pb-board-option__legendary b {
  color: #f08a3c;
  font-weight: 600;
}

.d4pb-glyph-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 7px 10px;
  background: #15120e;
  border: 1px solid #57442d;
  color: #ececf1;
  border-radius: 2px;
  font: inherit;
}

.d4pb-glyph-option[hidden] {
  display: none;
}

.d4pb-modal--boards {
  width: min(500px, calc(100% - 40px));
}

/* theme-guard:start — generated by tools/theme-guard.mjs, do not edit */
html body .d4pb-class:where(:hover, :focus) { border: 1px solid var(--d4pb-line); background: #18181d; color: #aaa8b1; }
html body .d4pb-glyph-level-btn:where(:hover, :focus) { border: 1px solid #4a3b29; background: #14120f; color: #9c8a74; }
html body .d4pb-btn:where(:hover, :focus) { border: 1px solid #4a3b29; background: #191612; color: #d1bfa0; }
html body .d4pb-btn--reset:where(:hover, :focus) { border-color: #633232; color: #e5a4a4; }
html body .d4pb-btn--undo:where(:hover, :focus) { border-color: #60482c; color: #f0d7ad; }
html body .d4pb-btn--confirm:where(:hover, :focus) { border-color: #c49944; color: #f7e0b5; background: linear-gradient(180deg, #2b1f13, #1a130a); }
html body .d4pb-btn--cancel:where(:hover, :focus) { border-color: #633232; color: #e5a4a4; }
html body .d4pb-btn-icon:where(:hover, :focus) { background: transparent; border: none; color: #c4a570; }
html body .d4pb-boardchip:where(:hover, :focus) { border: 1px solid var(--d4pb-line); background: #14120f; color: #cfc2aa; }
html body .d4pb-boardchip-detach:where(:hover, :focus) { border: 1px solid #633232; border-left: none; background: #1a1214; color: #e5a4a4; }
html body .d4pb-board-option:where(:hover, :focus) { background: #14120f; border: 1px solid var(--d4pb-line); color: var(--d4pb-text); }
html body .d4pb-glyph-option:where(:hover, :focus) { background: #14120f; border: 1px solid var(--d4pb-line); color: var(--d4pb-text); }
/* theme-guard:end */