/* FIX 9 integrates the approved HUD e v2 components into the playable Day 1 demo. */

.approved-album-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 360ms ease;
}

.approved-album-frame.is-handoff .al-dest { filter: saturate(1.08) brightness(1.05); }
.approved-album-frame.is-leaving { opacity: 0; }

.game.frame {
  width: 100%;
  height: 100%;
  border-radius: 0;
  --u: calc(100cqw / 1600);
}

.game.frame.f-ios { --u: calc(100cqw / 844); }

.game > .hud { padding: 0; z-index: 12; }
.game > .hud .location-chip { display: none; }
.game > .hud .hud-avatar,
.game > .hud .hud-tab { font: inherit; }

.game > .hud .hud-avatar {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  overflow: visible;
}

.game > .hud .hud-avatar > .av-in,
.game > .hud .hud-avatar span { display: block; }
.game > .hud .hud-avatar .av-face img { pointer-events: none; }
.game > .hud .hud-avatar .av-rim { z-index: 8; }

.game > .hud .zoom-control {
  right: calc(var(--u) * 24);
  bottom: calc(var(--u) * 22);
  padding: calc(var(--u) * 5);
  gap: calc(var(--u) * 3);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(28,12,51,.74);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(20,5,40,.28);
}

.game > .hud .zoom-control button {
  min-width: calc(var(--u) * 58);
  min-height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 10);
  border-radius: 999px;
  font-size: max(12px, calc(var(--u) * 14));
}

.game > .hud .action-button { display: none !important; }
.game > .hud .note-button { top: calc(var(--u) * 132); right: calc(var(--u) * 24); }

.modal-layer.premium-mode {
  z-index: 30;
  display: block;
  padding: 0;
  overflow: hidden;
}

.modal-layer.premium-mode > section { pointer-events: auto; }
.modal-layer.tablet-mode { overflow: visible; }
.game:has(.modal-layer.premium-mode) > .hud .note-button,
.iphone-page:has(.modal-layer.premium-mode) > .note-button { visibility: hidden; }

/* Approved conversation screen 2, generalized to every speaker. */
.premium-dialogue { background: #26153b; }
.premium-dialogue .tk-bg img { object-fit: cover; }
.premium-dialogue .premium-character { animation: fix9-character-rise .8s cubic-bezier(.2,.78,.22,1.06) both; }
.premium-dialogue .tk-card { animation: fix9-bubble-in .55s .24s cubic-bezier(.2,.82,.24,1.08) both; }
.premium-dialogue .tk-answers > * { animation: fix9-answer-in .45s calc(.5s + var(--i, 0) * .08s) cubic-bezier(.2,.82,.24,1.08) both; }
.premium-dialogue .tk-heading {
  margin: calc(var(--u) * 8) 0 0;
  color: var(--ink);
  font: 1000 calc(var(--u) * 30)/1.05 "Nunito", system-ui, sans-serif;
}
.premium-dialogue .tk-heading + .tk-line { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 29); }
.premium-dialogue .tk-breath > .tk-face {
  left: 50%;
  width: 100%;
  height: 100%;
  translate: -50% 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 26) rgba(35,10,52,.34));
}
.premium-dialogue .option-grid { display: contents; }
.premium-dialogue .choice-button { color: var(--cream); transform: none; }
.premium-dialogue .tk-answers .button-row {
  display: flex;
  gap: calc(var(--u) * 12);
  margin: calc(var(--u) * 2) 0 0;
}
.premium-dialogue .tk-answers .button-row button,
.premium-dialogue .tk-answers > .button-row button {
  min-height: calc(var(--u) * 58);
  padding: 0 calc(var(--u) * 26);
  border-radius: 999px;
  font: 1000 calc(var(--u) * 22)/1 "Nunito", system-ui, sans-serif;
}
.premium-dialogue .primary-button {
  border: 0;
  color: #3a1b00;
  background: linear-gradient(170deg,#ffe58f,#ffc53d 52%,#f5a50a);
  box-shadow: 0 calc(var(--u) * 5) 0 #b9750a, var(--sh-1);
}
.premium-dialogue .secondary-button {
  border: 1.5px solid rgba(255,255,255,.32);
  color: var(--cream);
  background: rgba(255,255,255,.1);
  box-shadow: var(--sh-1);
}
.premium-dialogue .leave-button {
  border: 1.5px solid rgba(255,255,255,.24);
  color: rgba(255,248,236,.82);
  background: rgba(20,7,40,.36);
  text-decoration: none;
}
.premium-dialogue.continue-dialogue .tk-answers { top: auto; bottom: calc(var(--u) * 90); }
.premium-dialogue.long-dialogue .tk-line { font-size: calc(var(--u) * 37); line-height: 1.12; }
.premium-dialogue .name-input {
  min-height: calc(var(--u) * 62);
  padding: 0 calc(var(--u) * 20);
  border: calc(var(--u) * 2) solid rgba(255,255,255,.52);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(22,8,43,.78);
  box-shadow: inset 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0,0,0,.22);
  font-size: calc(var(--u) * 23);
}
.premium-input-label {
  display: block;
  margin-bottom: calc(var(--u) * 6);
  color: rgba(255,248,236,.78);
  font-size: calc(var(--u) * 17);
  font-weight: 900;
}

@keyframes fix9-character-rise { from { opacity: 0; transform: translateY(48%) rotate(-3deg) scale(.96); } }
@keyframes fix9-bubble-in { from { opacity: 0; transform: translate(-8%,12%) scale(.72); } }
@keyframes fix9-answer-in { from { opacity: 0; transform: translateX(10%) scale(.94); } }

/* Approved hero-place screen 3. */
.premium-place .pl-fallback,
.premium-place .depth-parallax-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.premium-place .parallax-stage::after { z-index: 3; }
.premium-place .pl-card { animation: fix9-place-rise .72s cubic-bezier(.2,.78,.22,1.08) both; }
.premium-place .pl-body { animation: fix9-place-copy .55s .32s ease both; }
.premium-place .pl-name { max-width: 100%; }
.premium-place .pl-line { max-width: calc(var(--u) * 1120); justify-content: center; }
.premium-place .pl-b2 img { width: calc(var(--u) * 30); }
@keyframes fix9-place-rise { from { opacity: 0; transform: translateY(34%) rotateX(8deg) scale(.88); } }
@keyframes fix9-place-copy { from { opacity: 0; transform: translateY(calc(var(--u) * 20)); } }

/* The remaining bespoke opening panels use the approved plum glass, never generic white cards. */
.modal-layer:not(.scene-mode) .story-card {
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(155deg,rgba(63,30,102,.97),rgba(22,10,44,.98));
  box-shadow: 0 34px 90px rgba(13,4,28,.56), inset 0 1px rgba(255,255,255,.18);
}
.modal-layer:not(.scene-mode) .story-card .speaker-name { color: var(--gold); }
.modal-layer:not(.scene-mode) .story-card .secondary-button,
.modal-layer:not(.scene-mode) .story-card .leave-button { color: var(--cream); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); text-decoration: none; }
.modal-layer:not(.scene-mode) .story-card .name-input { color: var(--cream); background: rgba(10,4,25,.54); border-color: rgba(255,255,255,.3); }

/* House stories retain the same framed-place language as first open. */
.modal-layer.scene-mode { padding: 0; }
.story-card.story-scene-card { border: 0; border-radius: 0; background: #1b0d32; }
.story-scene-layout {
  grid-template-rows: minmax(0,1fr) auto;
  gap: 0;
  padding: calc(var(--u) * 46) calc(var(--u) * 92) calc(var(--u) * 30);
  background: radial-gradient(80% 70% at 50% 30%,#4a236e,#180b2d 72%);
}
.story-scene-stage {
  border-radius: calc(var(--u) * 30);
  border: calc(var(--u) * 6) solid rgba(255,250,238,.96);
  box-shadow: 0 0 0 calc(var(--u) * 2) rgba(196,181,253,.64),0 calc(var(--u) * 24) calc(var(--u) * 50) rgba(8,2,18,.5);
}
.story-scene-caption {
  grid-template-columns: minmax(calc(var(--u) * 210),.64fr) minmax(0,1.5fr) auto;
  min-height: calc(var(--u) * 170);
  padding: calc(var(--u) * 20) 0 0;
  color: var(--cream);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.story-scene-count { color: var(--gold); }
.story-scene-meta .speaker-name { color: #e2c7ff; }
.story-scene-controls button {
  min-height: calc(var(--u) * 54);
  border-radius: 999px;
  padding: 0 calc(var(--u) * 20);
}
.story-scene-controls .secondary-button,
.story-scene-controls .leave-button,
.story-note-button { color: var(--cream); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.09); text-decoration: none; }

/* Exact HUD e v2 tablet frame with v3 page content inside the glass. */
.modal-layer .tablet-layer { position: absolute; inset: 0; }
.modal-layer .tablet-layer .tablet { display: block; }
.tablet-content { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: auto; color: var(--cream); }
.tablet-content > p:first-child { margin-top: 0; }
.tablet-content .tablet-list { padding-right: calc(var(--su) * 8); }
.tablet-content .tablet-row { min-height: calc(var(--su) * 92); border-radius: calc(var(--su) * 18); }
.tablet-content .tablet-row img { width: calc(var(--su) * 70); height: calc(var(--su) * 70); }
.tablet-content .tablet-row button,
.tablet-content .secondary-button,
.tablet-content .primary-button,
.tablet-content .leave-button {
  min-height: max(44px,calc(var(--su) * 68));
  border-radius: 999px;
  text-decoration: none;
}
.tablet-content .friends-layout,
.tablet-content .look-layout,
.tablet-content .settings-layout,
.tablet-content .tree-view,
.tablet-content .call-stage { height: 100%; }

.tablet-content .call-stage {
  display: grid;
  grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr);
  gap: calc(var(--su) * 24);
  align-items: stretch;
}
.tablet-content .fred-video {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(var(--su) * 28);
  background: radial-gradient(circle at 50% 28%,rgba(255,248,216,.92),rgba(196,181,253,.5) 48%,rgba(39,16,71,.88));
  box-shadow: inset 0 0 0 calc(var(--su) * 2) rgba(255,255,255,.36);
}
.tablet-content .fred-video img { position: absolute; inset: 0; width: 100%; height: 108%; object-fit: contain; object-position: center bottom; }
.tablet-content .call-stage > div:last-child {
  min-width: 0;
  overflow: auto;
  padding: calc(var(--su) * 18) calc(var(--su) * 22);
  border-radius: calc(var(--su) * 28);
  color: var(--ink);
  background: rgba(255,247,232,.96);
  box-shadow: var(--sh-1);
}
.tablet-content .call-stage h2 { margin: 0; font-size: calc(var(--su) * 34); }
.tablet-content .call-stage p { margin: calc(var(--su) * 8) 0; font-size: calc(var(--su) * 22); line-height: 1.25; }
.tablet-content .call-stage .option-grid { display: flex; flex-direction: column; gap: calc(var(--su) * 8); margin-top: calc(var(--su) * 10); }
.tablet-content .call-stage .tk-ans {
  min-height: calc(var(--su) * 58);
  padding: calc(var(--su) * 5) calc(var(--su) * 14);
  gap: calc(var(--su) * 10);
  color: var(--cream);
}
.tablet-content .call-stage .tk-ans kbd { min-width: calc(var(--su) * 34); height: calc(var(--su) * 34); font-size: calc(var(--su) * 15); }
.tablet-content .call-stage .tk-ic { width: calc(var(--su) * 40); height: calc(var(--su) * 40); }
.tablet-content .call-stage .tk-t { font-size: calc(var(--su) * 18); }

/* One clean studio composition. Text stays live and outside the circle. */
.studio-credit { top: clamp(18px,5.5vh,48px); gap: 3px; }
.studio-credit strong { font-size: clamp(17px,2vw,27px); }
.studio-emblem { width: min(660px,72vw,calc(100vh * 1.22)); margin-top: clamp(46px,9vh,82px); }
#studioSilhouettes { opacity: 1; filter: drop-shadow(0 0 7px rgba(246,205,122,.2)); }

@media (max-width: 900px) {
  .iphone-page { display: block; padding: 0; overflow: hidden; }
  .iphone-page .phone-shell { width: 100vw; height: 100vh; padding: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .iphone-page .phone-game { width: 100%; height: 100%; border-radius: 0; }
  .iphone-page .phone-camera { left: 8px; }
  .game > .hud .hud-keys { display: none; }
  .game > .hud .zoom-control { top: auto; right: calc(var(--u) * 112); bottom: calc(var(--u) * 14); }
  .game > .hud .zoom-control button { min-width: 44px; min-height: 44px; font-size: 12px; }
  .iphone-page .premium-paws { display: block; }
  .iphone-page .premium-paws .paw-zone,
  .iphone-page .premium-paws .paw-joy,
  .iphone-page .premium-paws .paw-act { display: block; }

  .f-ios .premium-dialogue .tk-heading { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 17); }
  .f-ios .premium-dialogue .tk-heading + .tk-line { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 14); }
  .f-ios .premium-dialogue.choice-dialogue .tk-card { top: calc(var(--u) * 30); }
  .f-ios .premium-dialogue.choice-dialogue .tk-answers { top: calc(var(--u) * 130); gap: calc(var(--u) * 3); }
  .f-ios .premium-dialogue .tk-answers .button-row { margin-top: 0; gap: calc(var(--u) * 5); }
  .f-ios .premium-dialogue .tk-answers .button-row button { min-height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 13); font-size: calc(var(--u) * 14); }
  .f-ios .premium-dialogue .name-input { min-height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 16); }
  .f-ios .premium-dialogue.continue-dialogue .tk-answers { top: auto; bottom: calc(var(--u) * 28); }
  .f-ios .premium-dialogue.long-dialogue .tk-line { font-size: calc(var(--u) * 19); }
  .f-ios .premium-input-label { margin-bottom: 2px; font-size: calc(var(--u) * 12); }

  .f-ios .story-scene-layout { padding: calc(var(--u) * 8) calc(var(--u) * 60) calc(var(--u) * 8); }
  .f-ios .story-scene-stage { border-width: calc(var(--u) * 3); border-radius: calc(var(--u) * 16); }
  .f-ios .story-scene-caption { grid-template-columns: calc(var(--u) * 145) minmax(0,1fr) auto; min-height: calc(var(--u) * 112); gap: calc(var(--u) * 8); padding-top: calc(var(--u) * 6); }
  .f-ios .story-scene-meta h2 { font-size: calc(var(--u) * 16); }
  .f-ios .story-card .story-scene-narration { font-size: calc(var(--u) * 13); line-height: 1.25; }
  .f-ios .story-scene-controls { max-width: calc(var(--u) * 224); gap: calc(var(--u) * 4); }
  .f-ios .story-scene-controls button { min-height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 12); }

  .f-ios .tablet-content { font-size: calc(var(--su) * 21); }
  .f-ios .tablet-content .call-stage { grid-template-columns: minmax(0,.64fr) minmax(0,1.36fr); gap: calc(var(--su) * 12); }
  .f-ios .tablet-content .call-stage > div:last-child { padding: calc(var(--su) * 10); }
  .f-ios .tablet-content .call-stage .option-grid { gap: calc(var(--su) * 4); margin-top: calc(var(--su) * 4); }
  .f-ios .tablet-content .call-stage .tk-ans { min-height: calc(var(--su) * 48); }
  .f-ios .tablet-content .call-stage .tk-ans kbd { display: none; }
  .f-ios .tablet-content .call-stage .tk-t { font-size: calc(var(--su) * 17); }

  .studio-credit { top: 14px; }
  .studio-credit strong { font-size: 17px; }
  .studio-credit span { font-size: 13px; }
  .studio-emblem { width: min(500px,68vw,calc(100vh * 1.18)); margin-top: 46px; }
  .title-logo { top: 18px; }
  .title-logo h1 { font-size: clamp(44px,12vw,72px); line-height: .9; }
  .title-actions { bottom: max(30px,calc(var(--safe-bottom) + 12px)); }
  .title-button { min-width: min(260px,36vw); min-height: 50px; padding: 7px 18px; font-size: 16px; }
}