/* Backdrop and actor share image coordinates, including on narrow screens. */
body[data-stage="resident"] .stage-picture {
  position: absolute;
  inset: 0 0 calc(var(--dock-height) + 72px);
  overflow: hidden;
  container-type: size;
}
/* The canvas covers the picture. It is lowered only as far as keeps the
   resident's feet on the floor line, so the cutout is never cut at the waist. */
body[data-stage="resident"] .stage-canvas {
  --canvas-height: max(100cqh, 66.667cqw);
  position: absolute;
  width: calc(var(--canvas-height) * 1.5);
  height: var(--canvas-height);
  left: 50%;
  top: clamp(
    calc(100cqh - var(--canvas-height)),
    calc(
      100cqh - var(--floor-reserve, 0px) - var(--sprite-foot, 0.81) *
        var(--canvas-height)
    ),
    0px
  );
  transform: translateX(-50%);
}
body[data-stage="resident"] .backdrop {
  z-index: 0;
}
body[data-stage="resident"] .stage-resident {
  position: absolute;
  width: var(--sprite-width, 22%);
  height: auto;
  left: var(--sprite-left, 59%);
  top: var(--sprite-top, 78%);
  transform: translate(-50%, -92%);
  filter: drop-shadow(0 5px 4px #17201570);
}
body[data-stage="resident"] .scene-shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(#101b2080, transparent 30%);
}
body[data-stage="resident"] #cast,
body[data-stage="resident"] #speech-hint {
  display: none;
}
body[data-stage="resident"] .stage {
  min-height: 350px;
}
body[data-stage="resident"] a {
  color: var(--gold);
}
/* A wide resting hand sits at the right with the dialogue beside it, so the
   painting fills the whole stage like any other scene and the resident stands
   on the floor just above the hand. */
@media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
  body[data-stage="resident"][data-hand-expanded="false"] .stage-picture {
    bottom: 0;
    --floor-reserve: var(--dock-height);
  }
}
@media (max-width: 700px) {
  body[data-stage="resident"] .stage-picture {
    bottom: calc(var(--dock-height) + 72px);
  }
  body[data-stage="resident"] .stage-canvas {
    left: 46%;
  }
}
@media (max-height: 680px) {
  body[data-stage="resident"] {
    overflow-y: auto;
  }
}

@media (max-height: 640px) and (min-width: 701px) {
  :root {
    --card-height: clamp(126px, 37dvh, 176px);
    --card-width: clamp(100px, 28dvh, 128px);
    --dock-height: calc(var(--card-height) + 82px);
  }
  body,
  body[data-stage="resident"] {
    min-height: 0;
    height: 100dvh;
    overflow: hidden;
  }
  main,
  body .stage,
  body[data-stage="resident"] .stage {
    min-height: 0;
  }
  .topbar {
    min-height: 44px;
    padding-block: 2px;
  }
  body .card .name {
    font-size: 14px;
    padding-bottom: 8px;
  }
  body .cast {
    top: 46px;
  }
  body .dialogue {
    bottom: calc(var(--dock-height) + 4px);
    padding: 4px 10px;
  }
}