/* FIX 11 is the owner-facing presentation layer. No test or developer controls are rendered. */
.f-win {
  --u: min(calc(100cqw / 1600), calc(100cqh / 900));
}

.game > .hud .zoom-control,
.game > .hud .location-chip,
.game > .hud .action-button,
.game > .hud .note-button,
.iphone-page > .note-button,
.note-layer,
.story-note-button,
[data-note-page] {
  display: none !important;
}

.hud-keys.dismissed {
  opacity: 0;
  translate: -50% calc(var(--u) * 24);
  pointer-events: none;
}

/* The map avatar is always solid. Tablet transitions remain owned by HUD e. */
.game:not(.tab-open) > .hud .hud-avatar {
  opacity: 1;
  visibility: visible;
  filter: none;
}
.hud-avatar.expression-active .av-face img {
  visibility: visible;
}

/* A brighter, larger studio mark with clean spacing and a soft premium glow. */
.studio-splash {
  background:
    radial-gradient(circle at 50% 52%, rgba(105, 65, 139, .27), transparent 34%),
    radial-gradient(circle at 50% 52%, #21182c 0, #0b0911 48%, #020204 79%);
}
.studio-splash::before {
  opacity: .42;
  background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(172, 111, 224, .2), transparent 28%, rgba(255, 205, 112, .18), transparent 56%);
}
.studio-credit {
  top: clamp(34px, 7vh, 66px);
  gap: clamp(5px, 1vh, 9px);
}
.studio-credit strong {
  font-size: clamp(23px, 2.2vw, 34px);
  letter-spacing: .075em;
  text-shadow: 0 3px 28px rgba(255, 219, 150, .24);
}
.studio-credit span {
  font-size: clamp(16px, 1.45vw, 22px);
  color: rgba(255, 246, 223, .82);
}
.studio-emblem {
  width: min(820px, 82vw, calc(100cqh * .8));
  margin-top: clamp(72px, 12vh, 112px);
}
.studio-rim {
  width: 64%;
  border: 2px solid rgba(255, 229, 166, .9);
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 230, 175, .18), transparent 38%),
    radial-gradient(circle, rgba(112, 72, 147, .28) 0 48%, rgba(22, 14, 31, .7) 68%, transparent 70%);
  box-shadow:
    -14px -6px 36px rgba(255, 200, 105, .52),
    18px 8px 48px rgba(169, 98, 225, .55),
    0 0 90px rgba(121, 74, 161, .36),
    inset -18px 0 42px rgba(166, 102, 218, .23),
    inset 16px 0 36px rgba(255, 210, 124, .18);
}
#studioSilhouettes {
  opacity: 1;
  filter: drop-shadow(-7px -2px 13px rgba(255, 205, 118, .42)) drop-shadow(8px 3px 15px rgba(177, 111, 226, .5));
}

/* Preserve the 844 x 390 game plane while scaling the entire phone preview to the viewport. */
@media (min-width: 901px) {
  .iphone-page .phone-shell {
    width: min(100vw, calc(100vh * 1106 / 535));
    height: min(100vh, calc(100vw * 535 / 1106));
    max-width: none;
    aspect-ratio: 1106 / 535;
    padding: 2.19% 2.4%;
  }
  .iphone-page .phone-game {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* The greeting copy and its action occupy separate vertical bands on iPhone. */
.f-ios .premium-dialogue.continue-dialogue .tk-card {
  top: calc(var(--u) * 42);
  max-height: calc(var(--u) * 218);
}
.f-ios .premium-dialogue.continue-dialogue .tk-line {
  font-size: calc(var(--u) * 18);
  line-height: 1.12;
}
.f-ios .premium-dialogue.continue-dialogue .tk-answers {
  top: auto;
  bottom: calc(var(--u) * 24);
}

/* iPhone compositions use the logical 844 x 390 point plane at every host viewport. */
.f-ios .studio-credit {
  top: calc(var(--u) * 18);
  gap: calc(var(--u) * 4);
}
.f-ios .studio-credit strong {
  font-size: calc(var(--u) * 21);
}
.f-ios .studio-credit span {
  font-size: calc(var(--u) * 14);
}
.f-ios .studio-emblem {
  width: calc(var(--u) * 305);
  margin-top: calc(var(--u) * 52);
}

@media (max-width: 900px) {
  .studio-credit {
    top: max(calc(var(--u) * 18), 12px);
  }
  .studio-credit strong {
    font-size: max(17px, calc(var(--u) * 21));
  }
  .studio-credit span {
    font-size: max(12px, calc(var(--u) * 14));
  }
  .studio-emblem {
    width: min(82vw, calc(100cqh * .8));
    margin-top: calc(var(--u) * 62);
  }
}