/* Authoritative overlay composition layer. Loaded after all feature styles. */
:root {
  --experience-edge: clamp(12px,2.4vw,36px);
  --experience-header: var(--header-height,76px);
  --experience-gap: 12px;
}

/* Narration belongs above the play field, never over the main scene prompt. */
.house-caption,
body:has(#room.is-active) .house-caption {
  position:fixed;
  z-index:840;
  top:calc(var(--experience-header) + var(--experience-edge));
  right:var(--experience-edge);
  bottom:auto;
  left:auto;
  width:min(410px,calc(100vw - (var(--experience-edge) * 2)));
  max-height:none;
  overflow:visible;
  padding:13px 48px 13px 16px;
  transform:translateY(-10px);
}
.house-caption.is-visible,
body:has(#room.is-active) .house-caption.is-visible { transform:none; }
.house-caption p {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
}
.caption-controls { display:flex;top:9px;right:9px; }

/* Secondary feedback occupies its own lower-left lane. */
.living-message,
.discovery-reveal {
  position:fixed;
  z-index:835;
  right:auto;
  bottom:max(20px,env(safe-area-inset-bottom));
  left:var(--experience-edge);
  width:min(390px,calc(100vw - (var(--experience-edge) * 2)));
  max-height:150px;
  overflow:hidden;
}
.discovery-reveal { transform:translateY(18px); }
.discovery-reveal.is-visible { transform:none; }
body:has(.path-shortcut.is-visible) .living-message,
body:has(.path-shortcut.is-visible) .discovery-reveal { bottom:92px; }

/* The foyer prompt owns lower-center. It becomes compact when narration is active. */
.foyer-presence {
  z-index:14;
  top:auto;
  bottom:18px;
  width:min(470px,calc(100vw - 460px));
  transition:opacity .2s ease,transform .2s ease;
}
body:has(.house-caption.is-visible) .foyer-presence {
  width:min(430px,calc(100vw - 500px));
  padding:10px 16px;
}
body:has(.house-caption.is-visible) .foyer-presence > p:last-child { display:none; }
body:has(.house-caption.is-visible) .foyer-presence h1 { font-size:clamp(1.55rem,2.4vw,2.25rem); }

.foyer-key-meter { top:calc(var(--experience-header) + 18px);right:var(--experience-edge);bottom:auto;left:auto; }
.house-view.is-active ~ .house-caption,
body:has(#house.is-active) .house-caption { top:calc(var(--experience-header) + 118px); }
.pocket-toggle { right:var(--experience-edge);bottom:max(20px,env(safe-area-inset-bottom)); }
.story-whisper { max-width:min(620px,calc(100vw - 40px));max-height:min(46dvh,360px);overflow:auto; }

/* A modal/drawer is the active task; background messages yield to it. */
body:has(.pocket.is-open) .house-caption,
body:has(.pocket.is-open) .living-message,
body:has(.pocket.is-open) .discovery-reveal,
body:has(.house-journal[open]) .house-caption,
body:has(.house-journal[open]) .living-message,
body:has(.story-panel[open]) .house-caption,
body:has(.story-panel[open]) .living-message { opacity:0!important;pointer-events:none!important; }

@media (min-width:761px) and (max-width:1199px) {
  .house-caption,
  body:has(#room.is-active) .house-caption { width:min(350px,42vw); }
  .living-message,.discovery-reveal { width:min(330px,42vw); }
  .foyer-presence { width:min(390px,48vw); }
  body:has(.house-caption.is-visible) .foyer-presence { width:min(360px,44vw); }
  .foyer-key-meter { width:190px; }
}

@media (min-width:761px) and (max-width:900px) {
  .foyer-presence,
  body:has(.house-caption.is-visible) .foyer-presence { bottom:78px; }
}

@media (max-width:760px) {
  :root { --experience-edge:10px;--experience-header:var(--header-height,68px); }
  .house-caption,
  body:has(#room.is-active) .house-caption {
    top:calc(var(--experience-header) + 8px);
    right:10px;
    bottom:auto;
    left:10px;
    width:auto;
    max-height:112px;
    padding:10px 78px 10px 13px;
    overflow:hidden;
  }
  .house-view.is-active ~ .house-caption,
  body:has(#house.is-active) .house-caption { top:calc(var(--experience-header) + 8px); }
  .house-caption small { font-size:.54rem; }
  .house-caption p { margin-top:2px;font-size:.78rem;line-height:1.3;-webkit-line-clamp:3; }
  .caption-controls { display:flex; }
  .room-view .room-actions {
    top:calc(var(--experience-header) + 8px);
    right:10px;
    width:calc(100vw - 20px);
  }
  body:has(#room.is-active) .room-actions + * { --room-control-bottom:0px; }
  body:has(#room.is-active):has(.room-actions) .house-caption {
    top:calc(var(--experience-header) + 68px);
  }
  .living-message,.discovery-reveal {
    right:10px;
    bottom:max(70px,calc(env(safe-area-inset-bottom) + 60px));
    left:10px;
    width:auto;
    max-height:106px;
    padding:10px 44px 10px 13px;
    overflow:hidden;
  }
  .living-message p,.discovery-reveal p { display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3; }
  .foyer-presence {
    top:auto;
    bottom:76px;
    width:calc(100vw - 20px);
    padding:9px 12px;
    text-align:left;
  }
  .foyer-presence .eyebrow { justify-content:flex-start; }
  .foyer-presence h1 { font-size:1.55rem;line-height:.95; }
  .foyer-presence > p:last-child { display:none; }
  body:has(.house-caption.is-visible) .foyer-presence {
    width:calc(100vw - 20px);
    padding:8px 12px;
  }
  body:has(.house-caption.is-visible) .foyer-presence h1 { font-size:1.35rem; }
  body:has(.living-message.is-visible) .foyer-presence,
  body:has(.story-whisper.is-visible) .foyer-presence { opacity:0;pointer-events:none; }
  .foyer-key-meter { top:auto;right:auto;bottom:74px;left:10px;width:154px;padding:8px 10px; }
  .pocket-toggle { right:10px;bottom:max(142px,calc(env(safe-area-inset-bottom) + 132px)); }
  .look-controls { bottom:max(10px,env(safe-area-inset-bottom)); }
  .story-whisper { width:calc(100vw - 20px);max-height:42dvh; }

  /* Keep every primary action reachable without a horizontally clipped header. */
  .site-header { padding-inline:8px;gap:5px; }
  .wordmark { flex:0 0 auto;padding:0; }
  .wordmark > span:last-child { display:none; }
  .header-actions { min-width:0;gap:4px; }
  .house-status { display:none; }
  .header-button { min-width:40px;padding-inline:8px;gap:4px; }
  .header-button > span:not(:first-child) { display:none; }
  .header-button b { margin-left:0; }
  .round-button { flex:0 0 40px;width:40px;height:40px; }
}

@media (max-width:760px) and (max-height:700px) {
  .house-caption,
  body:has(#room.is-active) .house-caption { max-height:92px; }
  .house-caption p { -webkit-line-clamp:2; }
  .living-message,.discovery-reveal { max-height:84px; }
  .living-message p,.discovery-reveal p { -webkit-line-clamp:2; }
  .foyer-presence { bottom:68px; }
  .foyer-presence h1 { font-size:1.25rem; }
  .foyer-key-meter { bottom:66px; }
  .pocket-toggle { bottom:max(126px,calc(env(safe-area-inset-bottom) + 116px)); }
}

@media (prefers-reduced-motion:reduce) {
  .foyer-presence { transition:none; }
}