/* Role & Talk / Performance stage refinement, 2026-10-10.
   Scope: live performance scene only. No recording, line progression,
   stage height or dialogue fitting rule is changed. */

/* A single shared containing block clips the outside shoulders, never the
   character image itself. The stage scene, not the portrait, is the crop. */
main.performance-main.performance-fixed-page .performance-scene{
  overflow:hidden !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage{
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  gap:0 !important;
  overflow:visible !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:end !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .performance-slot{
  height:100% !important;
  overflow:visible !important;
  justify-content:flex-end !important;
  max-height:none !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .performance-avatar-art,
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .performance-slot.speaking .performance-avatar-art,
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .performance-slot.inactive .performance-avatar-art{
  /* These canvases deliberately extend beyond their 50% grid cells. */
  position:relative !important;
  width:min(47vw,690px) !important;
  height:calc(100% + 12px) !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  overflow:visible !important;
  bottom:-12px !important;
  margin-top:0 !important;
  opacity:1 !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .slot-left .performance-avatar-art{
  align-self:flex-start !important;
  margin-left:0 !important;
  margin-right:auto !important;
  left:calc(-1 * clamp(32px,6vw,115px)) !important;
  right:auto !important;
  transform-origin:left bottom !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .slot-right .performance-avatar-art{
  align-self:flex-end !important;
  margin-left:auto !important;
  margin-right:0 !important;
  left:auto !important;
  right:calc(-1 * clamp(32px,6vw,115px)) !important;
  transform-origin:right bottom !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .performance-role-art{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .performance-slot.inactive .performance-avatar-art{
  filter:grayscale(1) !important;
  opacity:.85 !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage .performance-slot.speaking .performance-avatar-art{
  filter:none !important;
  transform:scale(1.025) !important;
}

/* Crucial zoom fix: names are now children of the SAME dialogue-card box.
   The name-tab top border always follows the card's top edge at any zoom.
   No vh/% arithmetic or position compensation against a separate actor layer. */
main.performance-main.performance-fixed-page .performance-scene
.performance-dialogue-card{
  overflow:visible !important;
  isolation:isolate;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-dialogue-names{
  position:absolute;
  inset:0 0 auto 0;
  height:0;
  z-index:12;
  pointer-events:none;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab{
  box-sizing:border-box;
  position:absolute;
  top:0;
  transform:translateY(calc(-100% + 3px));
  width:max-content;
  max-width:calc(50% - 8px);
  min-width:min(112px,36%);
  padding:6px 12px 7px;
  color:#35271f;
  background:rgba(250,246,237,.97);
  border:1px solid #ae8b57;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  box-shadow:0 -4px 14px rgba(24,14,9,.16);
  text-align:left;
  font-size:clamp(12px,1.2vw,15px);
  font-weight:600;
  line-height:1.3;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab strong{
  display:block;
  font:inherit;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab.slot-left{left:-1px;right:auto;}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab.slot-right{left:auto;right:-1px;}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab.speaking{
  border-color:#bb9658;
  background:#fff8e9;
}

@media(max-width:900px){
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .performance-avatar-art,
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .performance-slot.speaking .performance-avatar-art,
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .performance-slot.inactive .performance-avatar-art{
    width:min(64vw,440px) !important;
    height:calc(100% + 8px) !important;
    bottom:-8px !important;
  }
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .slot-left .performance-avatar-art{
    left:-10vw !important;
  }
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .slot-right .performance-avatar-art{
    right:-10vw !important;
  }
}
@media(max-width:650px){
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .performance-avatar-art,
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .performance-slot.speaking .performance-avatar-art,
  main.performance-main.performance-fixed-page .performance-scene
  .performance-cast-layer.two-actor-stage .performance-slot.inactive .performance-avatar-art{
    width:min(70vw,360px) !important;
    height:calc(100% + 8px) !important;
  }
  main.performance-main.performance-fixed-page .performance-scene
  .performance-name-tab{
    padding:5px 7px 6px;
    min-width:min(90px,36%);
    max-width:calc(50% - 4px);
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce){
  main.performance-main.performance-fixed-page .performance-scene
  .performance-avatar-art{transition:none !important;}
}


/* ROLE_TALK_NAME_PANEL_REFINEMENT_20261010
   Common performanceStage(): participant, host and spectator.
   Only dialogue-card/name-tabs visuals. The tabs already share the card's
   positioned ancestor (STEP31). No Javascript, API or room-state changes.

   A connected tab silhouette is formed by masking the panel's top stroke
   INSIDE the tab. No subpixel translate compensation, isolated drop shadow,
   or lower-ending border tail. Both tabs use the same anchor geometry.
*/
main.performance-main.performance-fixed-page .performance-scene
.performance-dialogue-card{
  --rt-dialogue-surface:#f8f3eb;
  --rt-dialogue-outline:#b49465;
  background:var(--rt-dialogue-surface) !important;
  border:1px solid rgba(180,148,101,.8) !important;
  border-top:3px solid var(--rt-dialogue-outline) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}

main.performance-main.performance-fixed-page .performance-scene
.performance-dialogue-names{
  inset:-3px 0 auto 0 !important;
  z-index:15 !important;
  height:0 !important;
  pointer-events:none !important;
}

main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab{
  top:0 !important;
  /* Bottom edge meets the dialogue-card top exactly. */
  transform:translateY(-100%) !important;
  box-sizing:border-box !important;
  padding:9px 17px 10px !important;
  color:#392b23 !important;
  background:var(--rt-dialogue-surface) !important;
  border:1px solid var(--rt-dialogue-outline) !important;
  border-top:2px solid var(--rt-dialogue-outline) !important;
  border-bottom:0 !important;
  border-radius:12px 12px 0 0 !important;
  box-shadow:none !important;
  text-align:left !important;
  line-height:1.25 !important;
  max-width:calc(50% - 10px) !important;
  z-index:2 !important;
}

/* Hide precisely the 3px panel top stroke under the tab, leaving a
   continuous border around the combined silhouette. Insets preserve both
   tab side borders and let those borders terminate cleanly at the seam. */
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab::after{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  bottom:-4px;
  height:5px;
  background:var(--rt-dialogue-surface);
  pointer-events:none;
}

main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab.slot-left{
  left:-1px !important;
  right:auto !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab.slot-right{
  left:auto !important;
  right:-1px !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab.speaking{
  /* Speaking state may accent the text but must not split the surface. */
  background:var(--rt-dialogue-surface) !important;
  border-color:var(--rt-dialogue-outline) !important;
}
main.performance-main.performance-fixed-page .performance-scene
.performance-name-tab strong{
  position:relative;
  z-index:1;
  color:#392b23 !important;
  font-weight:700 !important;
}

@media(max-width:650px){
  main.performance-main.performance-fixed-page .performance-scene
  .performance-name-tab{
    padding:7px 10px 8px !important;
    max-width:calc(50% - 5px) !important;
    border-radius:9px 9px 0 0 !important;
  }
}


/* ROLE_TALK_MOBILE_RIGHT_AVATAR_FLIP_20261014
   Mobile only. Flip the right-side portrait image.
   Preserve parent scale and positioning.
*/
@media (max-width:700px){
  main.performance-main.performance-fixed-page
  .performance-scene
  .performance-cast-layer.two-actor-stage
  .slot-right .performance-role-art{
    transform:scaleX(-1) !important;
  }
}


/* ROLE_TALK_SPECTATOR_CAST_20261023:
   Spectators see the same right-oriented role art as other viewers;
   flip ONLY the spectator's right portrait toward the center. Host-side
   presentation remains unchanged, and neither slot is re-positioned. */
main.performance-main.performance-fixed-page .performance-scene
.performance-cast-layer.two-actor-stage.spectator-stage
.slot-right .performance-role-art {
  transform:scaleX(-1) !important;
}