/**
 * Diablo IV class mechanics (Specialization / Book of the Dead / etc.) stylesheet.
 * Author: vlad1116
 * Website: https://arpg-life.ru
 * Version: 0.10.0
 *
 * Shared by the admin builder (interactive) and the public planner
 * (read-only) — both render the same .d4cm-* markup from class-mechanics.js.
 */

.d4cm-panel {
  --d4cm-bg: #0b0b0e;
  --d4cm-line: #2f2e34;
  --d4cm-gold: #e8b971;
  --d4cm-text: #ececf1;
  --d4cm-muted: #898793;

  /* Kept at 640px for the public planner page, where this panel renders
     full-width and dropping the cap would stretch tight option grids out
     with distracting empty gaps instead of the compactness this pass is
     after. Compactness here comes from the smaller sizes below, plus
     multi-slot's icon-only rows (see .d4cm-multi-slot further down). As a
     plain block, this still STRETCHES to fill up to 640px even when its
     actual content is much narrower (e.g. nested-choice's compact rows,
     ~300-400px) — see the width:fit-content override further down for
     that case, added after the admin builder's column looked oversized/
     empty next to the icon rows (user-reported). */
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 12px;
  color: var(--d4cm-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.d4cm-panel * {
  box-sizing: border-box;
}

.d4cm-title {
  margin: 0 0 10px;
  color: #f0ddba;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.d4cm-options {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.d4cm-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 96px;
  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;
}

.d4cm-option:hover:not(:disabled) {
  border-color: #8c6a3f;
  background: #201912;
}

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

.d4cm-option:disabled {
  cursor: default;
}

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

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

.d4cm-option__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

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

.d4cm-option__unlock {
  font-size: 9px;
  color: var(--d4cm-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.d4cm-description {
  padding: 10px 12px;
  background: #14120f;
  border-left: 3px solid var(--d4cm-gold);
  font-size: 12px;
  line-height: 1.45;
  /* Necromancer/Warlock's multi-paragraph descriptions carry real \n\n
     breaks (bullet lists too) — respect them without needing raw <br>
     HTML injected through esc(). */
  white-space: pre-line;
}

.d4cm-placeholder,
.d4cm-empty {
  text-align: center;
  color: var(--d4cm-muted);
  font-size: 13px;
  padding: 20px 0;
}

/* Shared tooltip-card look — two uses:
 * 1) `.d4cm-tooltip--floating` (the common case): a real hover tooltip,
 *    `position: fixed` and JS-positioned next to whatever
 *    [data-d4cm-tip-desc] element is hovered/focused (see
 *    bindFloatingTooltips() in class-mechanics.js/mercenaries.js) — never a
 *    fixed spot below the grid, so it always reads as "this is what THAT
 *    skill does", not a separate disconnected panel.
 * 2) The plain (non-floating) block-flow form: skill-slots' edit-mode
 *    "what's currently assigned to the active slot" panel, which isn't a
 *    hover tooltip at all — it's a persistent status readout, so it stays
 *    inline where it's always been. */
.d4cm-tooltip {
  margin-top: 12px;
  padding: 12px 14px;
  max-width: 320px;
  background: #14120f;
  /* explicit fallback: the floating variant is appended to document.body
     by showFloatingTooltip() (see class-mechanics.js/mercenaries.js), so on
     the public-facing page it sits OUTSIDE .d4cm-panel's --d4cm-text/
     --d4cm-gold custom-property scope — without a fallback these vars
     resolve to nothing there and the tooltip renders invisible (near-black
     text on a near-black box, no border), even though it looks fine inside
     wp-admin's own page chrome. */
  color: var(--d4cm-text, #ececf1);
  border: 1px solid var(--d4cm-gold, #e8b971);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(232, 185, 113, .15);
}

.d4cm-tooltip--floating {
  position: fixed;
  z-index: 100000;
  margin-top: 0;
  pointer-events: none;
}

.d4cm-tooltip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--d4cm-gold, #e8b971);
}

.d4cm-tooltip .d4cm-description {
  margin-top: 0;
}

/* Tap bottom sheet — what touch devices get instead of the floating hover
   tooltip (see assets/js/touch-sheet.js): fixed to the bottom, full width,
   scrolls past ~70vh, closed by the corner button, a tap outside or Esc.
   Appended to <body>, outside .d4cm-panel's custom-property scope, so every
   color var carries a fallback. */
.d4ts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001;
  box-sizing: border-box;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #14120f;
  color: var(--d4cm-text, #ececf1);
  border-top: 1px solid var(--d4cm-gold, #e8b971);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .55);
  animation: d4ts-up .18s ease-out;
}

.d4ts__name {
  display: block;
  margin: 0 40px 8px 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--d4cm-gold, #e8b971);
}

.d4ts__body {
  font-size: 14px;
  line-height: 1.5;
}

/* Explicit background/color/border: the site theme paints button:hover/
   :focus yellow (see the theme-guard block at the end of this file). */
.d4ts__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f1b16;
  color: #ececf1;
  border: 1px solid #2f2e34;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

@keyframes d4ts-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .d4ts { animation: none; }
}

/* dual-slot (Spiritborn's Spirit Hall: Primary + Secondary from one pool) */

.d4cm-dual-slot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 560px) {
  .d4cm-dual-slot {
    grid-template-columns: 1fr;
  }
}

/* Interactive admin builder only (Spiritborn's Spirit Hall): two small
   labeled circular triggers side by side instead of the two full card
   grids above — same shrink-wrap rationale as nested-choice/skill-slots
   (user-reported: wanted "two circles", not two permanently-expanded
   grids). .d4cm-single-select--labeled stacks the slot's own label above
   its trigger, reusing .d4cm-slot__label as-is. */
.d4cm-dual-slot--compact {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.d4cm-single-select--labeled {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.d4cm-panel:has(.d4cm-dual-slot--compact) {
  width: fit-content;
  max-width: 100%;
}

.d4cm-slot__label {
  margin: 0 0 6px;
  color: var(--d4cm-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
}

.d4cm-slot .d4cm-options {
  gap: 6px;
  margin-bottom: 4px;
}

.d4cm-slot .d4cm-option {
  width: 76px;
  padding: 6px 4px;
  gap: 3px;
}

.d4cm-slot .d4cm-option__icon {
  width: 32px;
  height: 32px;
}

/* Every slot/group panel (dual-slot, nested-choice) shares this compact
   card so N of them stacking (e.g. Necromancer's 3 Book of the Dead groups)
   reads as a tight list, not N copies of the full-size .d4cm-panel spacing.
   multi-slot (Druid) doesn't use this card at all — see below. */
.d4cm-slot {
  padding: 8px;
  background: #0f0e0c;
  border: 1px solid var(--d4cm-line);
  border-radius: 4px;
}

/* multi-slot (Druid's Spirit Boons): matches the reference planner's own
   display exactly (checked live) — a plain grid of small round icons, one
   row per slot/spirit family, no label or card chrome at all, relying
   purely on the hover tooltip (tipAttrs()/bindFloatingTooltips()) for each
   icon's name — see renderMultiSlotOne()'s docblock in class-mechanics.js. */
.d4cm-multi-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.d4cm-multi-slot__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.d4cm-option--compact {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.d4cm-option--compact .d4cm-option__icon {
  width: 46px;
  height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.d4cm-option--compact:hover:not(:disabled) .d4cm-option__icon {
  border-color: #8c6a3f;
}

.d4cm-option--compact.is-selected .d4cm-option__icon {
  border-color: var(--d4cm-gold);
  box-shadow: 0 0 8px rgba(232, 185, 113, .4);
}

/* The family marker (see renderMultiSlotOne()'s docblock) — same icon size
   as the real options next to it, but visually set apart with a vertical
   divider so it doesn't read as a 5th pickable option. */
.d4cm-multi-slot__badge {
  display: flex;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid var(--d4cm-line);
}

.d4cm-multi-slot__badge .d4cm-option__icon {
  width: 46px;
  height: 46px;
  opacity: .85;
}

/* single-choice, admin builder only (Rogue's Specialization, Paladin's
   Oaths, Barbarian's Weapon Technique): matches the reference planner's own
   "Weapon Expertise" widget (checked live) — one collapsed trigger icon,
   dashed/muted until something's picked, that opens a dropdown list of
   every option on click. The read-only public planner keeps the old
   always-expanded .d4cm-option card grid instead (see
   renderSingleChoiceGrid in class-mechanics.js) — no interaction to
   compact for there. */
.d4cm-single-select {
  display: flex;
  justify-content: center;
  position: relative;
}

.d4cm-single-select__trigger {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.d4cm-single-select__trigger .d4cm-option__icon {
  width: 56px;
  height: 56px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.d4cm-single-select__trigger.is-placeholder .d4cm-option__icon {
  border-style: dashed;
  opacity: .5;
}

.d4cm-single-select__trigger:hover .d4cm-option__icon {
  border-color: #8c6a3f;
}

.d4cm-single-select__trigger.is-open .d4cm-option__icon {
  border-color: var(--d4cm-gold);
  box-shadow: 0 0 8px rgba(232, 185, 113, .4);
}

.d4cm-single-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: #14120f;
  border: 1px solid var(--d4cm-line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.d4cm-single-select__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--d4cm-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.d4cm-single-select__item .d4cm-option__icon {
  width: 28px;
  height: 28px;
}

.d4cm-single-select__item:hover {
  background: #201912;
}

.d4cm-single-select__item.is-selected {
  background: linear-gradient(180deg, #2b1f13, #1a130a);
  color: var(--d4cm-gold);
}

/* Necromancer/Warlock's branch trigger (inside .d4cm-nested-row) highlights
   red once a branch is actually picked, matching the in-game Book of the
   Dead (user-reported) — not the gold used by every other class's
   single-choice/dual-slot/etc. triggers, so this is scoped to nested-choice
   rows only via the .d4cm-nested-row ancestor, left untouched elsewhere. */
.d4cm-nested-row .d4cm-single-select__trigger:not(.is-placeholder) .d4cm-option__icon {
  border-color: #d9573f;
  box-shadow: 0 0 6px rgba(217, 87, 63, .4);
}

.d4cm-nested-row .d4cm-single-select__item.is-selected {
  background: linear-gradient(180deg, #3a1712, #240b08);
  color: #e08a75;
}

/* nested-choice (Necromancer's Book of the Dead, Warlock's Soul Shards):
   the inner "pick" row (upgrades/sacrifice, fragments) has no icon, so it
   reads as a compact text-only row rather than the icon-grid look above.
   Used by the read-only public planner (renderNestedChoiceGroupGrid). */

.d4cm-option--pick {
  width: auto;
  min-width: 84px;
  padding: 6px 10px;
  font-size: 11px;
}

/* nested-choice, admin builder only (renderNestedChoiceGroupCompact):
   matches the reference planner's own Book of the Dead widget (checked
   live) — one row per group: a static category badge, a branch trigger
   reusing .d4cm-single-select's dropdown, and (once a branch is picked)
   its upgrade/sacrifice pick slots on the right.

   These rows are narrow (~300-400px), so the shared .d4cm-panel (which
   otherwise stretches to fill up to its own 640px cap) is shrunk to hug
   them instead of leaving a big empty gap on a wider admin-builder column
   — :has() scopes this to panels that actually contain nested-choice rows
   (Necromancer/Warlock), leaving every other mechanic type's panel sizing
   untouched. */
.d4cm-panel:has(.d4cm-nested-row) {
  width: fit-content;
  max-width: 100%;
}

.d4cm-nested-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #0f0e0c;
  border: 1px solid var(--d4cm-line);
  border-radius: 4px;
}

.d4cm-nested-row__badge {
  display: flex;
  flex-shrink: 0;
}

.d4cm-nested-row__badge .d4cm-option__icon {
  width: 32px;
  height: 32px;
  opacity: .85;
}

.d4cm-single-select--inline {
  justify-content: flex-start;
}

.d4cm-single-select--inline .d4cm-single-select__trigger .d4cm-option__icon {
  width: 40px;
  height: 40px;
}

.d4cm-nested-row__picks {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* upgrade1/upgrade2 — plain circular toggles, no per-item art exists so
   they're drawn in CSS; sacrifice gets its own diamond shape below to read
   as a distinct trade-off. Selected state is red, not the usual gold —
   Necromancer's own Book of the Dead in-game highlights its current pick
   in red, not the gold used elsewhere in the skill tree (user-reported,
   matches the real game). Both upgrade and sacrifice share this red once
   selected; the diamond shape alone still tells them apart. */
.d4cm-pick-slot {
  width: 22px;
  height: 22px;
  padding: 0;
  background: #14120f;
  border: 1px solid var(--d4cm-line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.d4cm-pick-slot:hover {
  border-color: #8c6a3f;
}

.d4cm-pick-slot.is-selected {
  border-color: #d9573f;
  background: linear-gradient(180deg, #3a1712, #240b08);
  box-shadow: 0 0 6px rgba(217, 87, 63, .4);
}

.d4cm-pick-slot--sacrifice {
  border-radius: 3px;
  border-color: #6e2c22;
  transform: rotate(45deg);
}

.d4cm-pick-slot--sacrifice.is-selected {
  border-color: #d9573f;
  background: linear-gradient(180deg, #3a1712, #240b08);
  box-shadow: 0 0 6px rgba(217, 87, 63, .5);
}

/* skill-slots (Sorcerer's Enchantment System: N slots, any class skill).
   Same shrink-wrap rationale as nested-choice above: ~20 skill options used
   to render as an always-expanded card grid under the chips — now each
   chip is its own dropdown trigger (see renderSkillSlots), so the panel
   itself should hug the (usually just 1-3) chips instead of staying sized
   for that old grid (user-reported). */
.d4cm-panel:has(.d4cm-slots-bar) {
  width: fit-content;
  max-width: 100%;
}

.d4cm-slots-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.d4cm-slot-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #14120f;
  border: 1px solid var(--d4cm-line);
  border-radius: 20px;
  color: var(--d4cm-text);
  font-size: 12px;
  cursor: pointer;
}

.d4cm-slot-chip:hover:not(:disabled) {
  border-color: #8c6a3f;
}

.d4cm-slot-chip.is-active {
  border-color: var(--d4cm-gold);
  box-shadow: 0 0 8px rgba(232, 185, 113, .3);
}

.d4cm-slot-chip:disabled {
  cursor: default;
}

.d4cm-slot-chip img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.d4cm-slot-chip__empty {
  color: var(--d4cm-muted);
}

.d4cm-clear {
  margin-left: 8px;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--d4cm-line);
  border-radius: 3px;
  color: var(--d4cm-muted);
  font-size: 11px;
  cursor: pointer;
}

.d4cm-clear:hover {
  border-color: var(--d4cm-gold);
  color: var(--d4cm-gold);
}

/* Druid: the bonded spirit's second boon (picks.bonded) — same frame as a
   regular pick, plus a green ring. */
.d4cm-option--compact.is-bonded .d4cm-option__icon {
  box-shadow: 0 0 0 2px #6fbf73, 0 0 8px rgba(111, 191, 115, .55);
}

.d4cm-hint {
  margin: -4px 0 10px;
  color: #9a8f7c;
  font-size: 12px;
  text-align: center;
}

/* On the site the widgets are the builder's own, but nothing is clickable —
   only the hover tooltips work. */
.d4cm-panel--readonly .d4cm-single-select__trigger,
.d4cm-panel--readonly .d4cm-pick-slot,
.d4cm-panel--readonly .d4cm-slot-chip,
.d4cm-panel--readonly .d4cm-option--compact { cursor: default; }

/* theme-guard:start — generated by tools/theme-guard.mjs, do not edit */
html body .d4ts__close:where(:hover, :focus) { background: #1f1b16; color: #ececf1; border: 1px solid #2f2e34; }
html body .d4cm-option--compact:where(:hover, :focus) { border: none; background: transparent; }
html body .d4cm-single-select__trigger:where(:hover, :focus) { border: none; background: transparent; }
html body .d4cm-single-select__item:where(:hover, :focus) { background: transparent; border: none; color: var(--d4cm-text); }
html body .d4cm-pick-slot:where(:hover, :focus) { background: #14120f; border: 1px solid var(--d4cm-line); }
html body .d4cm-pick-slot--sacrifice:where(:hover, :focus) { border-color: #6e2c22; }
html body .d4cm-slot-chip:where(:hover, :focus) { background: #14120f; border: 1px solid var(--d4cm-line); color: var(--d4cm-text); }
/* theme-guard:end */