/* V1.138 · Normalize visible artwork, not the transparent image frame.
   Keep the approved opening unchanged. Asset calibration is shared by every page.
   Important declarations form the geometry boundary over legacy per-page rules. */
:root {
  --wq-portrait-right: 12vw;
  --wq-portrait-bottom: -1dvh;
  --wq-portrait-width: min(38vw, 510px);
  --wq-portrait-height: 84dvh;
  --wq-visible-height: min(57vw, 765px, 84dvh);
}
@media (max-width: 900px), (max-height: 560px) {
  :root { --wq-portrait-right: 4vw; --wq-portrait-height: 90dvh; --wq-visible-height: min(57vw, 765px, 90dvh, calc(101dvh - max(64px, env(safe-area-inset-top, 0px) + 56px))); }
}

/* Full-screen stage frames. Visibility and narrative state remain page-owned. */
:is(.siyan-portrait, .home-portrait-stage, .lead-sprite-layer,
    .portrait-wrap, .interaction-portrait, .date-home .character-stage,
    .detail-view .portrait-stage, #app .character-card),
:is(.lead-portrait-image, .stage__portrait, .reading-portrait, .adv__portrait, #filmPortrait) {
  position: fixed !important;
  inset: auto var(--wq-portrait-right) var(--wq-portrait-bottom) auto !important;
  width: var(--wq-portrait-width) !important;
  height: var(--wq-portrait-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

:is(.siyan-portrait, .home-portrait-stage, .lead-sprite-layer,
    .portrait-wrap, .date-home .character-stage,
    .detail-view .portrait-stage, #app .character-card) {
  transform: none !important;
  translate: none !important;
  animation: none !important;
}

:is(.siyan-portrait, .home-portrait-stage, .lead-sprite-layer,
    .portrait-wrap, .interaction-portrait, .date-home .character-stage,
    .detail-view .portrait-stage, #app .character-card) > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

:is(.siyan-portrait, .home-portrait-stage, .lead-sprite-layer,
    .portrait-wrap, .interaction-portrait, .date-home .character-stage,
    .detail-view .portrait-stage, #app .character-card) > img,
:is(.lead-portrait-image, .stage__portrait, .reading-portrait, .adv__portrait, #filmPortrait) {
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/* Asset metadata: alpha > 32, transparent padding excluded. No raster edits. */
img[src*="siyan"][src*=".png"] { --wq-image-width: calc(var(--wq-visible-height) * 0.666666667); --wq-image-height: calc(var(--wq-visible-height) * 1.000000000); }
img[src*="shinian"][src*=".png"] { --wq-image-width: calc(var(--wq-visible-height) * 0.673684211); --wq-image-height: calc(var(--wq-visible-height) * 1.010526316); }
img[src*="shenzhaoxue"][src*=".png"] { --wq-image-width: calc(var(--wq-visible-height) * 0.825141015); --wq-image-height: calc(var(--wq-visible-height) * 1.005640612); }
img[src*="xiaochengjin"][src*=".png"] { --wq-image-width: calc(var(--wq-visible-height) * 0.738816739); --wq-image-height: calc(var(--wq-visible-height) * 1.000000000); }
img[src*="seraphiel"][src*=".png"] { --wq-image-width: calc(var(--wq-visible-height) * 0.730906495); --wq-image-height: calc(var(--wq-visible-height) * 1.096359743); }
img[src*="wuchuan"][src*=".png"] { --wq-image-width: calc(var(--wq-visible-height) * 0.709141274); --wq-image-height: calc(var(--wq-visible-height) * 1.063711911); }

/* The visible top is 101dvh minus the reference's painted height.
   Inner images may be wider than their old transparent frame; never clip hair. */
:is(.siyan-portrait, .home-portrait-stage, .lead-sprite-layer,
    .portrait-wrap, .interaction-portrait, .date-home .character-stage,
    .detail-view .portrait-stage, #app .character-card) {
  overflow: visible !important;
}
:is(.siyan-portrait, .home-portrait-stage, .lead-sprite-layer,
    .portrait-wrap, .interaction-portrait, .date-home .character-stage,
    .detail-view .portrait-stage, #app .character-card) > img {
  inset: auto auto 0 50% !important;
  width: var(--wq-image-width, 100%) !important;
  height: var(--wq-image-height, 100%) !important;
  transform: translateX(-50%) !important;
}
:is(.lead-portrait-image, .stage__portrait, .reading-portrait, .adv__portrait, #filmPortrait) {
  right: calc(var(--wq-portrait-right) + var(--wq-portrait-width) / 2 - var(--wq-image-width, var(--wq-portrait-width)) / 2) !important;
  width: var(--wq-image-width, var(--wq-portrait-width)) !important;
  height: var(--wq-image-height, var(--wq-portrait-height)) !important;
}

/* V1.150 · Detail pages retain their left portrait / right content grid.
   Shared alpha calibration controls image size, not page column order. */
#detailView #portraitStage {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
}
#detailView #portraitStage > img { bottom: -1dvh !important; }
#app:has(.character-card) {
  --detail-width: calc(100vw - var(--wq-portrait-right) - var(--wq-portrait-width) - var(--portrait-rail) - var(--function-rail) - 24px);
}
#app:has(.character-card) .development-panel {
  left: calc(var(--portrait-rail) + var(--function-rail) + 12px) !important;
  right: auto !important;
  width: var(--detail-width) !important;
  min-width: 0 !important;
}
#app:has(.character-card) .growth-actions {
  position: static !important;
  width: auto !important;
}
#app:has(.character-card) .card-identity {
  bottom: calc(var(--bottom) + 1vh + 12px);
}

/* A transformed ancestor would turn viewport anchoring back into local scaling. */
.story-screen:has(.portrait-wrap),
.story-screen .scene:has(> .portrait-wrap) { transform: none !important; translate: none !important; }
.story-screen:has(.portrait-wrap) { animation-name: wq-portrait-screen-enter !important; }
@keyframes wq-portrait-screen-enter { from { opacity: 0; } to { opacity: 1; } }
/* Removing the transformed scroll container must not expose the legacy ADV
   translation below the viewport. Keep its two reserved lines inside the stage. */
@media (min-width: 1001px) and (min-height: 561px) {
  .story-screen:has(.portrait-wrap) #advWrap.wq-dialogue-fixed-layout {
    bottom: max(64px, calc(env(safe-area-inset-bottom, 0px) + 56px));
  }
}

/* Keep controls above the stage without an opaque strip cutting through the hair. */
body:has(.stage__portrait) :is(.hud, .reading__header),
#app[data-screen="story"]:has(.portrait-wrap) > .topbar,
#app:has(.character-card) > .topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}