/* wgf-model3d - kit chrome for the first-party 3D model viewer stage (spec C1).
 * Poster-first: the page ships only the activate button; the stage unhides on click. */
/* Squared beveled stage (F25, 13-ingame-reference sec 0.4: rounded web cards are
   banned; containers are squared metal-braced plates). The four real corner
   braces from the ui-frame-metal atlas anchor the corners, the same joinery as
   .wgf-window (top 40px, bottom 26px); the radial vignette stays the stage
   backdrop. Blast radius: mounts / npcs / items / toys / characters / housing
   all consume viewer_section_html. */
.wgf-model3d-box {
  position: relative;
  border: 1px solid var(--wgf-metal, #4a4a4a);
  border-radius: 0;
  background:
    url(/assets/ui/ui-frame-metal-cornertopleft-2x.png) top left / 40px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png) top right / 40px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png) bottom left / 26px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png) bottom right / 26px auto no-repeat,
    radial-gradient(ellipse at 50% 40%, #1d1913 0%, #0e0c0a 78%);
  overflow: hidden;
}
.wgf-model3d-activate {
  display: block;
  width: 100%;
  padding: 14px 18px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #f0c744;
  font: inherit;
  font-weight: 600;
  text-align: center;
}
.wgf-model3d-activate:hover { color: #ffe08a; }
.wgf-model3d-activate.is-loading { color: #a99e86; cursor: progress; }
#wgf-model3d-stage { width: 100%; height: 420px; }
#wgf-model3d-stage canvas { display: block; width: 100%; height: 100%; }
#wgf-model3d-status {
  padding: 8px 14px;
  border-top: 1px solid #3a332a;
  color: #a99e86;
  font-size: .85rem;
}
.wgf-model3d-note { margin: 6px 2px 0; color: #7d7460; font-size: .78rem; }
@media (max-width: 700px) { #wgf-model3d-stage { height: 300px; } }

/* Paperdoll variant: overlays the 3D viewer on the character render within the gear paperdoll.
   Owner call 2026-08-02: the activate control must NOT sit over the character's face - it is a
   small corner affordance, not a slab. The overlay itself is click-through (pointer-events:none)
   so it never steals clicks from the render beneath; only the button takes pointer events. */
.wgf-model3d-box--paperdoll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 10px;
  pointer-events: none;
}
.wgf-model3d-box--paperdoll .wgf-model3d-activate {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  width: auto;
  pointer-events: auto;
  padding: 5px 11px;
  border: 1px solid #3b342a;
  border-radius: 4px;
  background: rgba(10, 9, 7, 0.72);
  color: #c9b47e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.wgf-model3d-box--paperdoll .wgf-model3d-activate:hover {
  opacity: 1;
  color: #ffe08a;
  border-color: #6a6153;
  background: rgba(14, 12, 10, 0.9);
}
.wgf-model3d-box--paperdoll .wgf-model3d-activate.is-loading {
  color: #a99e86;
  border-color: #4a4133;
  cursor: progress;
}
.wgf-model3d-box--paperdoll #wgf-model3d-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The loading layer IS the game's own loading screen (owner call 2026-08-02, 1:1 in-game UI
   law - never a spinner). --wgf-loadscreen is set inline per character from their class art;
   with no art the layer degrades to the plain dark plate below. The inline activate script
   un-hides #wgf-model3d-status on click, so this becomes visible exactly while the model
   downloads and assembles, then wgf-model3d.js hides it again. */
.wgf-model3d-box--paperdoll #wgf-model3d-status.is-loading {
  position: absolute;
  inset: 0;
  z-index: 11;
  padding: 0;
  border-top: none;
  pointer-events: none;
  background-color: #0b0a08;
  background-image: var(--wgf-loadscreen, none);
  background-size: cover;
  background-position: center 28%;
  box-shadow: inset 0 0 90px 30px rgba(0, 0, 0, 0.85);
  animation: wgf-m3d-ls-in 160ms ease-out;
}
/* The in-game progress bar sits low-centre, the way the client draws it. */
.wgf-model3d-box--paperdoll #wgf-model3d-status.is-loading::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 13%;
  height: 9px;
  border: 1px solid #6a5b3a;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #f0c744 0%, #b8912c 100%) left / 35% 100% no-repeat,
    rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: wgf-m3d-ls-bar 2.4s ease-in-out infinite;
}
@keyframes wgf-m3d-ls-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wgf-m3d-ls-bar {
  0%   { background-size: 12% 100%, auto; }
  70%  { background-size: 88% 100%, auto; }
  100% { background-size: 96% 100%, auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wgf-model3d-box--paperdoll #wgf-model3d-status,
  .wgf-model3d-box--paperdoll #wgf-model3d-status.is-loading::after { animation: none; }
}

/* When the 3D stage is visible (not [hidden]), hide the Blizzard render and hint. */
.wgf-pvp-modelstage:has(#wgf-model3d-stage:not([hidden])) .wgf-pvp-render,
.wgf-pvp-modelstage:has(#wgf-model3d-stage:not([hidden])) .wgf-pvp-model-hint {
  display: none;
}

/* After load the same element is only a caption strip - no backdrop, no bar. */
.wgf-model3d-box--paperdoll #wgf-model3d-status:not(.is-loading) {
  position: absolute;
  inset: auto 8px 8px 8px;
  z-index: 11;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(10, 9, 7, 0.66);
  color: #c9b47e;
  font-size: 11px;
  text-align: center;
  pointer-events: none;
}