/* speedingfines.gg paper doll (public/js/paperdoll.js): the in-game character window, our own drawing.
 * Colours come from the site theme (theme.css) with fallbacks, so the guides pages can use it too. */
.pd {
  --pd-line: var(--sf-border, rgba(201, 154, 60, .28));
  --pd-gold: var(--sf-gold-500, #c99a3c);
  --pd-gold-hi: var(--sf-gold-300, #f0c75e);
  --pd-red: var(--sf-red-500, #c8281e);
  --pd-text: var(--sf-text, #ece4d4);
  --pd-muted: var(--sf-text-muted, #a59d8f);
  --pd-well: #0c0b0f;
  --pd-ic: 44px;
  color: var(--pd-text);
  min-width: 0;
}
.pd [data-paperdoll-controls] { margin-bottom: 10px; }
.pd-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 250px) minmax(0, 1fr);
  grid-template-areas: "l m r" "w w w";
  gap: 6px 12px;
  padding: 12px;
  border: 1px solid var(--pd-line);
  border-radius: var(--sf-radius-md, 10px);
  background:
    radial-gradient(120% 70% at 50% 35%, rgba(201, 154, 60, .10), transparent 60%),
    linear-gradient(180deg, rgba(27, 26, 31, .96), rgba(14, 13, 17, .98));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 24px rgba(0, 0, 0, .55);
}
.pd-frame.pd-only { display: block; padding: 0; border: 0; background: none; box-shadow: none; }
.pd-l { grid-area: l; }
.pd-r { grid-area: r; }
.pd-mid { grid-area: m; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pd-col { display: grid; gap: 5px; align-content: start; min-width: 0; }
.pd-weap { grid-area: w; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 640px; justify-self: center; width: 100%; }

/* A slot: icon well + name. Right column mirrors the left (icon on the outer edge), as in game. */
.pd-slot {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 2px; border-radius: 6px; outline: none; cursor: default;
}
.pd-slot[data-item] { cursor: help; }
.pd-slot[data-item]:hover, .pd-slot[data-item]:focus-visible { background: rgba(255, 255, 255, .05); }
.pd-slot:focus-visible { box-shadow: 0 0 0 2px var(--sf-focus, #f0c75e); }
.pd-r .pd-slot { flex-direction: row-reverse; text-align: right; }
.pd-ic {
  position: relative; flex: none; width: var(--pd-ic); height: var(--pd-ic);
  border-radius: 5px; background: var(--pd-well);
  border: 1px solid #4a4650;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 8px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .04);
}
.pd-img { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.pd-img[hidden] { display: none; }
/* Empty slot: our own outline (a faint inner square), the slot's name in the text column. */
.pd-empty .pd-ic::before {
  content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(201, 154, 60, .22); border-radius: 3px;
}
.pd-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pd-nm { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-empty .pd-nm { color: var(--pd-muted); font-weight: 400; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pd-sub { font-size: .74rem; color: var(--sft-green, #1eff00); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-sub:empty { display: none; }

/* Quality: border on the icon, colour on the name (the tooltip's colours). */
.pd-q0 .pd-ic { border-color: #6b6b6b; } .pd-q0 .pd-nm { color: var(--sft-q0, #9d9d9d); }
.pd-q1 .pd-ic { border-color: #c8c8c8; } .pd-q1 .pd-nm { color: var(--sft-q1, #fff); }
.pd-q2 .pd-ic { border-color: #1eff00; } .pd-q2 .pd-nm { color: var(--sft-q2, #1eff00); }
.pd-q3 .pd-ic { border-color: #0070dd; } .pd-q3 .pd-nm { color: #3d9bff; }
.pd-q4 .pd-ic { border-color: #a335ee; } .pd-q4 .pd-nm { color: #b768f5; }
.pd-q5 .pd-ic { border-color: #ff8000; } .pd-q5 .pd-nm { color: var(--sft-q5, #ff8000); }
.pd-q6 .pd-ic, .pd-q7 .pd-ic { border-color: #e6cc80; } .pd-q6 .pd-nm, .pd-q7 .pd-nm { color: #e6cc80; }
.pd-slot[data-item]:not(.pd-empty) .pd-ic { box-shadow: inset 0 0 0 1px #000, 0 0 6px rgba(0, 0, 0, .8); }

/* Markers on the icon: BiS (gold corner), upgrade, no enchant (red dot), the caller's badge (bottom corner). */
.pd-mk { position: absolute; inset: 0; pointer-events: none; }
.pd-bis, .pd-up {
  position: absolute; top: -5px; left: -5px; padding: 0 3px; border-radius: 3px;
  font: 700 9px/13px var(--sf-font-body, system-ui, sans-serif); letter-spacing: .03em; text-transform: uppercase;
}
.pd-bis { background: var(--pd-gold-hi); color: #1b1a1f; box-shadow: 0 0 0 1px #000, 0 0 6px rgba(240, 199, 94, .6); }
.pd-up { background: #2b2a30; color: var(--pd-muted); box-shadow: 0 0 0 1px #000; }
.pd-r .pd-bis, .pd-r .pd-up { left: auto; right: -5px; }
.pd-noench {
  position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pd-red); box-shadow: 0 0 0 1.5px #000, 0 0 6px rgba(200, 40, 30, .8);
}
.pd-r .pd-noench { right: auto; left: -3px; }
.pd-badge {
  position: absolute; bottom: -4px; right: -4px; min-width: 16px; height: 16px; padding: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; background: #1b1a1f; color: var(--pd-gold-hi); box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(201, 154, 60, .35);
  font-size: 10px; line-height: 1; pointer-events: auto;
}
.pd-r .pd-badge { right: auto; left: -4px; }
.pd-g { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pd-badge[data-icon="horde"] { color: var(--pd-red); }

/* Portrait: our illustration in a gold-edged arch; the class crest when the race is unknown. */
.pd-portrait {
  position: relative; width: 100%; max-width: 250px; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 125px 125px 10px 10px; border: 1px solid rgba(201, 154, 60, .45);
  background: radial-gradient(80% 60% at 50% 30%, rgba(232, 213, 169, .10), transparent 70%), #121116;
  box-shadow: inset 0 0 0 1px #000, inset 0 -30px 40px rgba(0, 0, 0, .55), 0 0 0 3px rgba(0, 0, 0, .35);
}
.pd-pimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-crest { position: absolute; inset: 0; display: grid; place-items: center; }
.pd-crest::before {
  content: ""; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50% 50% 46% 46%;
  border: 2px solid var(--c, var(--pd-gold)); opacity: .55;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .06), transparent 70%);
}
.pd-cicon { position: relative; width: 38%; height: auto; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--c, var(--pd-gold)); }
.pd-p-crest .pd-crest::after {
  content: ""; position: relative; width: 22%; aspect-ratio: 1; transform: rotate(45deg); border: 2px solid var(--pd-gold); opacity: .5;
}
.pd-c-warrior { --c: var(--sf-class-warrior, #c69b6d); } .pd-c-paladin { --c: var(--sf-class-paladin, #f48cba); }
.pd-c-hunter { --c: var(--sf-class-hunter, #aad372); } .pd-c-rogue { --c: var(--sf-class-rogue, #fff468); }
.pd-c-priest { --c: var(--sf-class-priest, #fff); } .pd-c-shaman { --c: var(--sf-class-shaman, #0070dd); }
.pd-c-mage { --c: var(--sf-class-mage, #3fc7eb); } .pd-c-warlock { --c: var(--sf-class-warlock, #8788ee); }
.pd-c-druid { --c: var(--sf-class-druid, #ff7c0a); }
.pd-cap { text-align: center; min-width: 0; }
.pd-name { font: 700 1rem/1.15 var(--sf-font-display, inherit); letter-spacing: .04em; text-transform: uppercase; }
.pd-name:empty, .pd-note:empty, .pd-line:empty { display: none; }
.pd-line { font-size: .78rem; color: var(--pd-muted); }
.pd-note { font-size: .74rem; color: var(--pd-muted); max-width: 200px; margin: 2px auto 0; }

/* Phones: the frame stays the in-game shape; slots go icon-only (the name is in the tooltip and aria-label). */
@media (max-width: 560px) {
  .pd-full { --pd-ic: 40px; }
  .pd-full .pd-frame { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px; gap: 5px 8px; }
  .pd-full .pd-tx { display: none; }
  .pd-full .pd-weap { grid-template-columns: repeat(3, auto); justify-content: center; gap: 10px; }
  .pd-full .pd-portrait { max-width: 100%; }
}

/* Compact (hover cards): icons only, small portrait. */
.pd-compact { --pd-ic: 30px; }
.pd-compact .pd-frame { grid-template-columns: auto 130px auto; padding: 8px; gap: 3px 8px; }
.pd-compact .pd-tx { display: none; }
.pd-compact .pd-col { gap: 3px; }
.pd-compact .pd-weap { grid-template-columns: repeat(3, auto); justify-content: center; gap: 6px; }
.pd-compact .pd-portrait { max-width: 130px; border-radius: 65px 65px 8px 8px; }
.pd-compact .pd-bis, .pd-compact .pd-up { display: none; }
.pd-compact .pd-name { font-size: .9rem; }

.pd-hover {
  position: fixed; z-index: 9000; width: 280px; pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .7));
}
.pd-hover[hidden] { display: none; }

/* The character page's look line: a colour swatch for skin / hair colour choices. */
.pd-sw { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: -.05em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 2px rgba(255, 255, 255, .15); }