/* FIX 10 keeps the playable iPhone entry on the approved HUD e 844 x 390 point grid. */

.iphone-page .phone-camera { display: none; }

.iphone-page .phone-game {
  --safe-left: calc(var(--u) * 59);
  --safe-right: calc(var(--u) * 59);
  --safe-bottom: calc(var(--u) * 21);
}

.game > .island,
.game > .home-ind,
.game > .safe-guides { display: none; }

.f-ios > .island,
.f-ios > .home-ind,
.f-ios > .safe-guides { display: block; }

/* Conversation and place are mounted by the real HUD e controllers, including their own retained HUD. */
.game:has(.modal-layer .approved-conversation-host) > .hud,
.game:has(.modal-layer .approved-place-host) > .hud { visibility: hidden; }

.approved-conversation-host,
.approved-place-host { position: absolute; inset: 0; overflow: hidden; }
.approved-conversation-host > .talk,
.approved-place-host > .plc { position: absolute; inset: 0; }
.demo-place-adapted .pl-cv { display: none; }

/* Generated v3 states sit in the unchanged approved avatar construction. */
.av-head > .av-expression {
  z-index: 12;
  opacity: 1;
  pointer-events: none;
}
.hud-avatar.expression-active .av-face img { visibility: hidden; }

/* Goal thoughts and the one-time avatar invitation originate beside the avatar. */
.avatar-thought,
.avatar-tap-hint {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  min-height: calc(var(--u) * 58);
  padding: calc(var(--u) * 9) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 7);
  color: var(--ink);
  background: linear-gradient(180deg,rgba(255,252,245,.98),rgba(255,244,226,.96));
  box-shadow: inset 0 calc(var(--u) * 2) 0 #fff,var(--sh-2);
  animation: fix10-thought-in .44s cubic-bezier(.2,.86,.24,1.12) both;
}

.avatar-thought::before,
.avatar-tap-hint::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * -8);
  bottom: calc(var(--u) * 9);
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19);
  rotate: 45deg;
  border-radius: calc(var(--u) * 4);
  background: rgba(255,247,232,.98);
  z-index: -1;
}

.avatar-thought img,
.avatar-tap-hint img { width: calc(var(--u) * 42); height: calc(var(--u) * 42); object-fit: contain; }
.avatar-thought small { display: block; color: #805b91; font-size: max(12px,calc(var(--u) * 13)); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.avatar-thought strong,
.avatar-tap-hint strong { display: block; max-width: calc(var(--u) * 270); font-size: max(12px,calc(var(--u) * 16)); line-height: 1.12; }

@keyframes fix10-thought-in {
  from { opacity: 0; transform: translate(calc(var(--u) * -48),calc(var(--u) * 18)) scale(.5); }
}

/* The right paw sleeps quietly and wakes without changing its hit area. */
.f-ios .paw-act .pa-tilt { transform: scale(.86) rotate(4deg); opacity: .62; transition: transform .42s cubic-bezier(.3,1.35,.5,1),opacity .32s ease,filter .32s ease; }
.f-ios .paw-act.awake .pa-tilt { transform: rotate(4deg); opacity: 1; }
.f-ios .paw-act[aria-disabled="true"] { cursor: default; }
.f-ios .paw-act[aria-disabled="true"] .pa-in { filter: saturate(.72); }
.f-ios .paw-act.awake .pa-in { filter: none; }

@media (max-width: 900px) {
  .iphone-page > .note-button,
  .iphone-page .game > .hud .zoom-control,
  .iphone-page .game > .hud .location-chip { display: none !important; }

  .iphone-page .notification-dock {
    left: calc(var(--u) * 168);
    top: calc(var(--u) * 20);
    width: calc(var(--u) * 310);
  }

  .f-ios .premium-dialogue .tk-answers,
  .f-ios .premium-dialogue .tk-card { right: calc(var(--u) * 59); }

  .f-ios .premium-dialogue.choice-dialogue .tk-card {
    right: auto;
    width: calc(var(--u) * 286);
    max-width: calc(var(--u) * 286);
  }

  .f-ios .premium-dialogue .tk-answers .button-row {
    min-height: calc(var(--u) * 44);
  }

  .f-ios .premium-dialogue .tk-answers .button-row button {
    min-width: calc(var(--u) * 132);
  }
}

@media (min-width: 901px) {
  .iphone-page { padding: 0; }
  .iphone-page .phone-shell {
    width: min(calc(100vw - 32px),1180px);
    aspect-ratio: 1106 / 535;
    box-sizing: border-box;
    padding: 2.1% 2.4%;
    border-radius: 9% / 19.5%;
  }
  .iphone-page .phone-game {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--u) * 47);
  }
  .iphone-page > .note-button { display: none; }
}

/* Three adventure states read differently before the child reads a word. */
.tablet-content {
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.tablet-content .tablet-scroll-page {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: calc(var(--su) * 8);
}
.tablet-content .tablet-scroll-page > p:first-child { margin-top: 0; }
.tablet-content .state-column {
  position: relative;
  overflow: hidden;
  border: 0;
}
.tablet-content .state-column::before {
  content: attr(data-state-label);
  display: inline-flex;
  min-height: calc(var(--su) * 28);
  align-items: center;
  margin-bottom: calc(var(--su) * 8);
  padding: 0 calc(var(--su) * 12);
  border-radius: 999px;
  font-weight: 1000;
  letter-spacing: .04em;
}
.tablet-content .state-column.focus { background: linear-gradient(145deg,rgba(255,207,92,.24),rgba(126,67,155,.28)); box-shadow: inset 0 0 0 2px rgba(255,220,132,.72); }
.tablet-content .state-column.paused { background: linear-gradient(145deg,rgba(79,147,190,.2),rgba(42,63,108,.3)); box-shadow: inset 0 0 0 2px rgba(133,204,232,.56); }
.tablet-content .state-column.new { background: linear-gradient(145deg,rgba(212,131,223,.2),rgba(91,47,133,.3)); box-shadow: inset 0 0 0 2px rgba(224,155,238,.56); }
.tablet-content .state-column.focus::before { background:#ffd66d; color:#43275b; }
.tablet-content .state-column.paused::before { background:#7bc5df; color:#1f3855; }
.tablet-content .state-column.new::before { background:#d99ce8; color:#452456; }
.tablet-content .goal-card { border: 1px solid rgba(255,255,255,.16); box-shadow: 0 calc(var(--su) * 8) calc(var(--su) * 16) rgba(15,8,25,.16); }

/* Keep the complete hero, all four ready looks and the item shelf in one tablet view. */
.tablet-content .look-layout {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0,.36fr) minmax(0,.64fr);
  gap: calc(var(--su) * 18);
  align-items: stretch;
  overflow: hidden;
}
.tablet-content .look-hero-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--su) * 22);
}
.tablet-content .look-hero-stage > img {
  position: absolute;
  inset: calc(var(--su) * 8);
  width: calc(100% - calc(var(--su) * 16));
  height: calc(100% - calc(var(--su) * 16));
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  transform: none !important;
}
.tablet-content .look-options {
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: calc(var(--su) * 5);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-right: calc(var(--su) * 4);
}
.tablet-content .look-intro { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--su) * 12); align-items: center; }
.tablet-content .look-intro .speaker-name { grid-column: 1; align-self: end; }
.tablet-content .look-intro h2 { grid-column: 1; margin: 0; font-size: calc(var(--su) * 24); }
.tablet-content .look-intro p { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: calc(var(--su) * 15); line-height: 1.2; }
.tablet-content .look-intro .name-input { grid-column: 1 / -1; min-height: max(44px,calc(var(--su) * 44)); margin-top: calc(var(--su) * 5); padding: 0 calc(var(--su) * 14); }
.tablet-content .look-group h3 { margin: calc(var(--su) * 2) 0 calc(var(--su) * 4); font-size: calc(var(--su) * 17); }
.tablet-content .look-ready .item-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: calc(var(--su) * 7); }
.tablet-content .look-ready .item-card { min-height: max(44px,calc(var(--su) * 48)); padding: calc(var(--su) * 4); border-radius: calc(var(--su) * 13); font-size: calc(var(--su) * 14); }
.tablet-content .look-items { min-height: 0; }
.tablet-content .look-items .item-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: calc(var(--su) * 6); }
.tablet-content .look-items .item-card { min-height: max(44px,calc(var(--su) * 68)); border-radius: calc(var(--su) * 13); }
.tablet-content .look-items .look-item { grid-template-rows: calc(var(--su) * 38) auto; gap: 0; padding: calc(var(--su) * 4); font-size: calc(var(--su) * 11); }
.tablet-content .look-items .look-item img { height: calc(var(--su) * 38); }

/* Custom tablet pages use the glass scale, so content remains clear without hiding a final row. */
.tablet-content .settings-layout { height: 100%; min-height: 0; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: calc(var(--su) * 12); overflow: hidden; }
.tablet-content .audio-settings { gap: calc(var(--su) * 5); padding: calc(var(--su) * 9); border-radius: calc(var(--su) * 18); }
.tablet-content .settings-title { grid-template-columns: calc(var(--su) * 42) 1fr; gap: calc(var(--su) * 8); margin: 0; }
.tablet-content .settings-title img { width: calc(var(--su) * 40); height: calc(var(--su) * 40); }
.tablet-content .settings-title small,
.tablet-content .audio-slider-row small,
.tablet-content .tablet-row small { font-size: max(11px,calc(var(--su) * 12)); }
.tablet-content .audio-slider-row { grid-template-columns: minmax(calc(var(--su) * 116),1fr) minmax(calc(var(--su) * 110),1.25fr) calc(var(--su) * 38); gap: calc(var(--su) * 8); min-height: calc(var(--su) * 48); padding: calc(var(--su) * 3) calc(var(--su) * 7); border-radius: calc(var(--su) * 12); }
.tablet-content .settings-actions { gap: calc(var(--su) * 6); padding: 0; overflow: hidden; }
.tablet-content .settings-actions .tablet-row { grid-template-columns: calc(var(--su) * 48) minmax(calc(var(--su) * 92),1fr) auto; gap: calc(var(--su) * 8); min-height: calc(var(--su) * 78); padding: calc(var(--su) * 6) calc(var(--su) * 8); border-radius: calc(var(--su) * 16); }
.tablet-content .settings-actions .tablet-row img { width: calc(var(--su) * 46); height: calc(var(--su) * 46); }
.tablet-content .settings-actions .tablet-row strong { font-size: calc(var(--su) * 16); line-height: 1.08; }
.tablet-content .settings-actions .tablet-row button { min-height: max(44px,calc(var(--su) * 50)); padding: 0 calc(var(--su) * 10); font-size: calc(var(--su) * 14); white-space: nowrap; }
.tablet-content .settings-zoom { gap: calc(var(--su) * 3); }
.tablet-content .settings-zoom button { min-width: 0; padding: 0 calc(var(--su) * 7) !important; font-size: calc(var(--su) * 12) !important; }

.tablet-content .state-columns { height: 100%; min-height: 0; gap: calc(var(--su) * 10); overflow: hidden; }
.tablet-content .state-column { min-height: 0; padding: calc(var(--su) * 9); border-radius: calc(var(--su) * 17); }
.tablet-content .state-column::before { min-height: calc(var(--su) * 25); margin-bottom: calc(var(--su) * 4); padding: 0 calc(var(--su) * 10); font-size: calc(var(--su) * 13); }
.tablet-content .goal-card { margin: calc(var(--su) * 5) 0; padding: calc(var(--su) * 8); border-radius: calc(var(--su) * 13); font-size: calc(var(--su) * 14); }
.tablet-content .goal-card small { font-size: calc(var(--su) * 12); }
.tablet-content .goal-card button { min-height: max(44px,calc(var(--su) * 48)); margin-top: calc(var(--su) * 4); padding: 0 calc(var(--su) * 10); font-size: calc(var(--su) * 13); }
.tablet-content .goal-card button img { width: calc(var(--su) * 25); height: calc(var(--su) * 25); }

/* Long dynamic place copy still leaves both actions fully inside a 1600 x 900 frame. */
.game:not(.f-ios) .demo-place-adapted .pl-body { top: calc(var(--u) * 600); }

.story-scene-controls button { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7); }
.story-scene-controls button img { width: calc(var(--u) * 24); height: calc(var(--u) * 24); object-fit: contain; }
.loading-star img { width: 100%; height: 100%; object-fit: contain; }
.lock-slot img,
.symbol-key img { width: min(70%,44px); height: min(70%,44px); object-fit: contain; pointer-events: none; }
.tablet-content .settings-zoom { display: inline-flex; align-items: center; gap: calc(var(--su) * 5); }
.tablet-content .goal-card button { display: inline-flex; align-items: center; gap: calc(var(--su) * 5); }
.tablet-content .goal-card button img { object-fit: contain; }
.tablet-content .settings-zoom button.selected { box-shadow: inset 0 0 0 3px #ffd66d; }

@media (max-width: 900px) {
  /* The 844 x 390 frame is already expressed in CSS points. Keep every custom-page label at 12 pt or more. */
  .f-ios .tablet-content .look-intro p,
  .f-ios .tablet-content .look-intro .speaker-name,
  .f-ios .tablet-content .look-group h3,
  .f-ios .tablet-content .look-ready .item-card,
  .f-ios .tablet-content .look-items .look-item,
  .f-ios .tablet-content .settings-title small,
  .f-ios .tablet-content .audio-slider-row small,
  .f-ios .tablet-content .tablet-row small,
  .f-ios .tablet-content .settings-actions .tablet-row strong,
  .f-ios .tablet-content .settings-actions .tablet-row button,
  .f-ios .tablet-content .settings-zoom button,
  .f-ios .tablet-content .goal-card,
  .f-ios .tablet-content .goal-card small,
  .f-ios .tablet-content .goal-card button { font-size: 12px !important; }
  .f-ios .tablet-content .settings-zoom button { min-width: 44px; }
  .f-ios .tablet-content .settings-actions .tablet-row > button { min-width: 44px; }
  .f-ios .tablet-content .settings-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }

  .f-ios .tablet-content .look-items .item-card { min-height: 60px; }
  .f-ios .tablet-content .look-items .look-item { grid-template-rows: 28px auto; line-height: 1.05; }
  .f-ios .tablet-content .look-items .look-item img { height: 28px; }

  .f-ios .tablet-content .goal-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 5px;
    align-items: center;
  }
  .f-ios .tablet-content .goal-card > strong,
  .f-ios .tablet-content .goal-card > small { grid-column: 1; min-width: 0; }
  .f-ios .tablet-content .goal-card > button { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .f-ios .tablet-content .state-columns { grid-template-columns: minmax(0,.72fr) minmax(0,.72fr) minmax(0,1.56fr); gap: calc(var(--su) * 6); }
  .f-ios .tablet-content .state-column { padding: calc(var(--su) * 6); }

  .f-ios .demo-place-adapted .pl-line { margin-top: calc(var(--u) * 3); }
  .f-ios .demo-place-adapted .pl-btns { margin-top: calc(var(--u) * 4); }

  .f-ios .story-scene-caption {
    grid-template-columns: calc(var(--u) * 145) minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) calc(var(--u) * 44);
    grid-template-areas: "meta narration" "controls controls";
    min-height: calc(var(--u) * 136);
    gap: calc(var(--u) * 4) calc(var(--u) * 8);
    padding: calc(var(--u) * 6) calc(var(--u) * 59) calc(var(--u) * 21);
    box-sizing: border-box;
  }
  .f-ios .story-scene-controls { max-width: none; justify-content: flex-start; flex-wrap: nowrap; }
}