/* The lead's final layer (2026-10-13, Codex out of limit). The owner plays at 1920x1080 (browser about 1920x920),
   wider than HUD e's 16:9 frame, so every HUD e unit must fit the height too and nothing may be cropped. */

/* HUD e units fit both width and height (`.game.frame` set a width-only unit and won over fix11's rule). */
.game.frame.f-win { --u: min(calc(100cqw / 1600), calc(100svh / 900)); }

/* The Glass tablet is always whole: as wide as the screen allows without losing its top, centred. */
.game.f-win .tl-rig {
  width: min(100%, calc(100svh * 1672 / 941));
  left: calc((100% - min(100%, calc(100svh * 1672 / 941))) / 2);
}

/* Hero-house stories: each picture fills the whole screen (the owner asked for big parallax pictures), the Fairy
   Teller's caption rests on a soft dark band at the bottom, controls inside the safe areas. */
.modal-layer.scene-mode { padding: 0; }
.modal-layer.scene-mode .story-card.story-scene-card {
  width: 100%; height: 100%; max-width: none; max-height: none;
  border: 0; border-radius: 0; box-shadow: none;
}
.story-scene-layout { display: block; position: relative; }
.story-scene-stage { position: absolute; inset: 0; }
.story-scene-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: calc(var(--u) * 84) calc(var(--u) * 64) calc(var(--u) * 34);
  background: linear-gradient(0deg, rgba(16, 9, 27, .92) 0%, rgba(16, 9, 27, .74) 52%, rgba(16, 9, 27, 0) 100%);
}
.story-card .story-scene-narration { color: #fff8ec; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }

.f-ios .story-scene-caption {
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.5fr) auto;
  grid-template-rows: auto;
  grid-template-areas: "meta narration controls";
  align-items: center;
  min-height: 0;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 46) calc(var(--u) * 59) calc(var(--u) * 21);
}
.f-ios .story-scene-caption .story-scene-controls { justify-content: flex-end; max-width: none; flex-wrap: nowrap; }

/* iPhone four-answer screens: the question card stays above the answers (a 3-line question ran under them) */
.f-ios .premium-dialogue.choice-dialogue .tk-card { top: calc(var(--u) * 10); right: calc(var(--u) * 150); width: auto; max-width: none; }
.f-ios .premium-dialogue.choice-dialogue .tk-line { font-size: calc(var(--u) * 16); line-height: 1.12; }
.f-ios .premium-dialogue.choice-dialogue .tk-heading { font-size: calc(var(--u) * 15); }
.f-ios .story-card .story-scene-narration { font-size: calc(var(--u) * 14); line-height: 1.38; }
.f-ios .story-scene-meta h2 { font-size: calc(var(--u) * 15); }
.f-ios .story-scene-count { font-size: calc(var(--u) * 12); }
.f-ios .story-scene-controls { gap: calc(var(--u) * 6); }
.f-ios .story-scene-controls button {
  min-height: calc(var(--u) * 44); min-width: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 12); font-size: calc(var(--u) * 12);
}
.f-ios .story-scene-controls button img { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }

/* ------------------------------------------------------------------------------------------------------------------
   Tablet pages in HUD e's own language (owner 2026-10-13: My Friends and My Look looked "system-made").
   Inside the Glass tablet the unit is --su (1/1000 of the screen width); small text never below 12 px (iPhone). */
.tablet-content { color: var(--cream); font-family: "Nunito", sans-serif; }
.tablet-content h2 { font: 1000 calc(var(--su) * 34)/1.05 "Nunito", sans-serif; margin: calc(var(--su) * 6) 0 calc(var(--su) * 10); color: var(--cream); }
.tablet-content h3 { font: 1000 max(12px, calc(var(--su) * 15))/1 "Nunito", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: calc(var(--su) * 18) 0 calc(var(--su) * 10); }
.tablet-content p { font: 800 max(12px, calc(var(--su) * 16))/1.42 "Nunito", sans-serif; color: rgba(255, 248, 236, .9); margin: 0 0 calc(var(--su) * 10); }
.tablet-content .speaker-name { font: 1000 max(12px, calc(var(--su) * 13))/1 "Nunito", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* HUD e buttons: gold (pl-b1), glass (pl-b2), rose glass for leaving */
.tablet-content .primary-button, .tablet-content .secondary-button, .tablet-content .leave-button {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--su) * 8);
  min-height: max(44px, calc(var(--su) * 52)); padding: 0 calc(var(--su) * 24); border: 0; border-radius: 999px; cursor: pointer;
  font: 1000 max(12px, calc(var(--su) * 18))/1 "Nunito", sans-serif; text-decoration: none; white-space: nowrap;
  transition: translate .3s cubic-bezier(.3, 1.6, .4, 1), filter .2s;
}
.tablet-content .primary-button { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--su) * 4) 0 #b9750a, 0 calc(var(--su) * 10) calc(var(--su) * 18) rgba(40, 10, 60, .35); }
.tablet-content .secondary-button { color: var(--cream); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3), 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(40, 10, 60, .3); backdrop-filter: blur(8px); }
.tablet-content .leave-button { color: #ffe3ee; background: linear-gradient(180deg, rgba(255, 143, 184, .26), rgba(171, 52, 112, .3)); box-shadow: inset 0 0 0 1.5px rgba(255, 190, 215, .4); }
.tablet-content .primary-button:hover, .tablet-content .secondary-button:hover, .tablet-content .leave-button:hover { translate: 0 calc(var(--su) * -2); filter: brightness(1.06); }
.tablet-content .secondary-button img, .tablet-content .primary-button img { width: calc(var(--su) * 24); height: calc(var(--su) * 24); object-fit: contain; }

/* My Friends: an RPG menu */
.friends-layout { display: grid; grid-template-columns: 40% 1fr; gap: calc(var(--su) * 22); height: 100%; min-height: 0; }
.friend-rail { min-height: 0; overflow: auto; padding: calc(var(--su) * 4) calc(var(--su) * 10) calc(var(--su) * 10) calc(var(--su) * 4); scrollbar-width: thin; scrollbar-color: rgba(255, 197, 61, .6) transparent; }
.friend-category { display: flex; align-items: center; gap: calc(var(--su) * 10); margin: calc(var(--su) * 12) 0;
  font: 1000 max(12px, calc(var(--su) * 14))/1 "Nunito", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.friend-category::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(255, 197, 61, .7), transparent); }
.friend-button { display: flex; align-items: center; gap: calc(var(--su) * 14); width: 100%; min-height: max(44px, calc(var(--su) * 86));
  margin: 0 0 calc(var(--su) * 12); padding: calc(var(--su) * 6) calc(var(--su) * 18) calc(var(--su) * 6) calc(var(--su) * 8);
  border: 0; border-radius: 999px; text-align: left; color: var(--cream); cursor: pointer;
  background: linear-gradient(180deg, rgba(92, 44, 150, .88), rgba(58, 22, 104, .9));
  box-shadow: inset 0 calc(var(--su) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(20, 0, 40, .28);
  transition: translate .35s cubic-bezier(.3, 1.6, .4, 1), background .25s; }
.friend-button:hover { translate: calc(var(--su) * 6) 0; }
.friend-button.selected { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--su) * 4) 0 #b9750a, 0 calc(var(--su) * 10) calc(var(--su) * 16) rgba(40, 10, 60, .3); }
.friend-button strong { display: block; font: 1000 max(12px, calc(var(--su) * 21))/1.1 "Nunito", sans-serif; }
.friend-button small { display: block; margin-top: calc(var(--su) * 3); font: 800 max(12px, calc(var(--su) * 13))/1.25 "Nunito", sans-serif; opacity: .8; }
/* the premium disc the character breaks out of (like the main avatar): head above, body clipped by the circle */
.friend-portrait-ring { position: relative; flex: 0 0 auto; width: calc(var(--su) * 70); height: calc(var(--su) * 70); border-radius: 50%; overflow: visible;
  background: radial-gradient(circle at 38% 30%, #fff8ea, #ead9ff 52%, #a77fe0 100%);
  box-shadow: inset 0 0 0 calc(var(--su) * 3) rgba(255, 229, 166, .95), inset 0 calc(var(--su) * -6) calc(var(--su) * 10) rgba(91, 42, 134, .35), 0 calc(var(--su) * 5) calc(var(--su) * 10) rgba(20, 0, 40, .35); }
.friend-portrait-ring img { position: absolute; left: 50%; bottom: 0; width: 118%; height: auto; max-width: none; translate: -50% 0;
  -webkit-mask-image: linear-gradient(#000 0 67%, transparent 67%), radial-gradient(ellipse 42.4% 33% at 50% 67%, #000 98%, transparent 100%);
  mask-image: linear-gradient(#000 0 67%, transparent 67%), radial-gradient(ellipse 42.4% 33% at 50% 67%, #000 98%, transparent 100%);
  filter: drop-shadow(0 calc(var(--su) * 3) calc(var(--su) * 3) rgba(30, 5, 50, .35)); }
.friend-portrait-ring img.unknown, .friend-detail img.unknown { filter: brightness(0) opacity(.42); }
.friend-detail { position: relative; min-height: 0; border-radius: calc(var(--su) * 30); overflow: hidden;
  background: radial-gradient(70% 50% at 74% 100%, rgba(255, 197, 61, .3), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.friend-detail::after { content: ""; position: absolute; right: 6%; bottom: 5%; width: 40%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 229, 166, .85), rgba(255, 197, 61, .3) 60%, transparent); }
.friend-detail .full-character { position: absolute; z-index: 1; right: 6%; bottom: 8%; height: 84%; width: auto; max-width: 46%; object-fit: contain;
  filter: drop-shadow(0 calc(var(--su) * 14) calc(var(--su) * 16) rgba(20, 0, 40, .45)); }
.friend-copy { position: absolute; z-index: 2; left: calc(var(--su) * 30); top: calc(var(--su) * 26); width: 50%; }
.friend-progress { height: calc(var(--su) * 14); margin: calc(var(--su) * 8) 0 calc(var(--su) * 6); border-radius: 999px; overflow: hidden;
  background: rgba(10, 2, 24, .4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
.friend-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe58f, #ffc53d 55%, #f5a50a); box-shadow: 0 0 calc(var(--su) * 10) rgba(255, 197, 61, .6); }

/* My Look: the hero on a glowing stand, ready looks as pills, items as glass tiles */
.look-layout { display: grid; grid-template-columns: 38% 1fr; gap: calc(var(--su) * 26); height: 100%; min-height: 0; }
.tablet-content .look-hero-stage { position: relative; min-height: 0; border-radius: calc(var(--su) * 30); overflow: hidden; border: 0;
  background: radial-gradient(70% 40% at 50% 96%, rgba(255, 197, 61, .42), transparent 70%), radial-gradient(90% 70% at 50% 28%, rgba(196, 181, 253, .28), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.tablet-content .look-hero-stage::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 6%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .95), rgba(255, 197, 61, .38) 62%, transparent); box-shadow: 0 0 calc(var(--su) * 30) rgba(255, 197, 61, .35); }
.tablet-content .look-hero-stage img { position: absolute; z-index: 1; left: 50%; bottom: 10%; height: 82%; width: auto; max-width: 92%; translate: -50% 0; object-fit: contain;
  filter: drop-shadow(0 calc(var(--su) * 12) calc(var(--su) * 14) rgba(20, 0, 40, .45)); }
.look-options { min-height: 0; overflow: auto; padding-right: calc(var(--su) * 6); }
.look-intro p { margin-bottom: calc(var(--su) * 12); }
.tablet-content .name-input { width: 100%; height: max(44px, calc(var(--su) * 54)); padding: 0 calc(var(--su) * 22); border: 0; border-radius: 999px; outline: none;
  font: 1000 max(13px, calc(var(--su) * 20))/1 "Nunito", sans-serif; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 245, 228, .95));
  box-shadow: inset 0 calc(var(--su) * 2) 0 #fff, inset 0 calc(var(--su) * -3) calc(var(--su) * 6) rgba(124, 58, 237, .14), 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(20, 0, 40, .3); }
.tablet-content .name-input:focus { box-shadow: inset 0 calc(var(--su) * 2) 0 #fff, 0 0 0 calc(var(--su) * 3) var(--gold), 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(20, 0, 40, .3); }
.tablet-content .item-grid { display: flex; flex-wrap: wrap; gap: calc(var(--su) * 10); }
.tablet-content .look-ready .item-card { min-height: max(44px, calc(var(--su) * 50)); padding: 0 calc(var(--su) * 22); border: 0; border-radius: 999px; cursor: pointer;
  font: 1000 max(12px, calc(var(--su) * 17))/1 "Nunito", sans-serif; color: var(--cream);
  background: linear-gradient(180deg, rgba(92, 44, 150, .88), rgba(58, 22, 104, .9)); box-shadow: inset 0 calc(var(--su) * 2) 0 rgba(255, 255, 255, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.tablet-content .look-items .item-card { display: grid; justify-items: center; align-content: center; gap: calc(var(--su) * 4);
  width: calc(var(--su) * 98); min-height: max(56px, calc(var(--su) * 108)); padding: calc(var(--su) * 8); border: 0; border-radius: calc(var(--su) * 24); cursor: pointer;
  font: 900 max(12px, calc(var(--su) * 13))/1.1 "Nunito", sans-serif; color: var(--cream);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(20, 0, 40, .28); }
.tablet-content .look-items .item-card img { width: calc(var(--su) * 54); height: calc(var(--su) * 54); object-fit: contain; filter: drop-shadow(0 2px 3px rgba(20, 0, 40, .35)); }
.tablet-content .item-card.selected { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--su) * 4) 0 #b9750a, 0 0 calc(var(--su) * 16) rgba(255, 197, 61, .5); }

/* Talk to Freddy: the whole tablet screen is the call; Freddy's bust rises in a warm room light, his words in HUD e's
   cream speech card, the answers as HUD e answer pills */
.call-stage { position: relative; display: grid; grid-template-columns: 42% 1fr; gap: calc(var(--su) * 18); height: 100%; min-height: 0; align-items: center; }
.call-stage::before { content: ""; position: absolute; inset: calc(var(--su) * -104) calc(var(--su) * -64) calc(var(--su) * -40); z-index: 0; pointer-events: none;
  background: radial-gradient(60% 75% at 24% 70%, rgba(255, 214, 160, .55), transparent 70%), radial-gradient(80% 90% at 30% 40%, rgba(196, 127, 158, .35), transparent 72%); }
.fred-video { position: relative; z-index: 1; align-self: end; height: 100%; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.fred-video img { position: absolute; left: 50%; bottom: calc(var(--su) * -40); height: 108%; width: auto; max-width: none; translate: -50% 0; object-fit: contain;
  filter: drop-shadow(0 calc(var(--su) * 16) calc(var(--su) * 20) rgba(30, 5, 50, .45)); }
.call-stage > div:last-child { position: relative; z-index: 2; align-self: center; padding: calc(var(--su) * 22) calc(var(--su) * 30) calc(var(--su) * 24);
  border-radius: calc(var(--su) * 36) calc(var(--su) * 36) calc(var(--su) * 36) calc(var(--su) * 10); color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .94)); box-shadow: inset 0 calc(var(--su) * 2) 0 #fff, 0 calc(var(--su) * 14) calc(var(--su) * 26) rgba(30, 5, 50, .35); }
.call-stage > div:last-child .speaker-name { color: var(--violet); }
.call-stage > div:last-child h2 { color: var(--ink); font-size: calc(var(--su) * 30); }
.call-stage > div:last-child p { color: var(--ink); font: 1000 max(13px, calc(var(--su) * 22))/1.25 "Nunito", sans-serif; }
.call-stage .button-row { display: flex; flex-wrap: wrap; gap: calc(var(--su) * 10); margin-top: calc(var(--su) * 12); }
.call-stage .leave-button { color: #9b2d63; background: rgba(255, 143, 184, .22); box-shadow: inset 0 0 0 1.5px rgba(171, 52, 112, .35); }
.call-stage .secondary-button { color: var(--plum); background: rgba(124, 58, 237, .1); box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .28); }
.call-stage small { display: block; margin-top: calc(var(--su) * 8); font: 800 max(12px, calc(var(--su) * 12))/1.3 "Nunito", sans-serif; color: rgba(42, 18, 69, .62); }
.call-stage .option-grid { display: flex; flex-direction: column; gap: calc(var(--su) * 10); margin-top: calc(var(--su) * 12); }
.call-stage .tk-ans { min-height: max(44px, calc(var(--su) * 58)); padding: calc(var(--su) * 6) calc(var(--su) * 20) calc(var(--su) * 6) calc(var(--su) * 10); gap: calc(var(--su) * 12); }
.call-stage .tk-ans kbd { min-width: calc(var(--su) * 28); height: calc(var(--su) * 28); font-size: max(12px, calc(var(--su) * 13)); }
.call-stage .tk-ic { width: calc(var(--su) * 38); height: calc(var(--su) * 38); }
.call-stage .tk-t { font-size: max(12px, calc(var(--su) * 18)); }

/* My Adventures: In Focus, Paused, New as three clearly different glass columns */
.state-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--su) * 16); height: 100%; min-height: 0; }
.state-column { position: relative; min-height: 0; overflow: auto; padding: calc(var(--su) * 58) calc(var(--su) * 14) calc(var(--su) * 14); border-radius: calc(var(--su) * 28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.state-column::before { content: attr(data-state-label); position: absolute; left: calc(var(--su) * 14); top: calc(var(--su) * 14); padding: calc(var(--su) * 8) calc(var(--su) * 16); border-radius: 999px;
  font: 1000 max(12px, calc(var(--su) * 15))/1 "Nunito", sans-serif; letter-spacing: .08em; }
.state-column.focus { box-shadow: inset 0 0 0 2px rgba(255, 197, 61, .8), 0 0 calc(var(--su) * 26) rgba(255, 197, 61, .25); background: radial-gradient(90% 60% at 50% 0%, rgba(255, 197, 61, .18), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.state-column.focus::before { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); }
.state-column.paused::before { color: #062b28; background: linear-gradient(170deg, #9ff0e6, #2bb5a8); }
.state-column.new::before { color: #fff; background: linear-gradient(170deg, #b69cff, #7c3aed); }
.goal-card { display: grid; gap: calc(var(--su) * 6); margin: 0 0 calc(var(--su) * 12); padding: calc(var(--su) * 14) calc(var(--su) * 16); border-radius: calc(var(--su) * 22);
  background: linear-gradient(180deg, rgba(92, 44, 150, .85), rgba(58, 22, 104, .88)); box-shadow: inset 0 calc(var(--su) * 2) 0 rgba(255, 255, 255, .2), 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(20, 0, 40, .28); }
.goal-card strong { font: 1000 max(12px, calc(var(--su) * 18))/1.15 "Nunito", sans-serif; }
.goal-card small { font: 800 max(12px, calc(var(--su) * 13))/1 "Nunito", sans-serif; opacity: .78; }
.goal-card[data-goal-state="focus"] { background: linear-gradient(170deg, rgba(255, 229, 143, .95), rgba(255, 197, 61, .92)); color: #3a1b00; }
.state-column > p { opacity: .65; }

/* Settings: glass cards, gold sliders */
.tablet-content input[type="range"] { -webkit-appearance: none; appearance: none; height: calc(var(--su) * 10); border-radius: 999px; background: linear-gradient(90deg, #ffc53d, #7c3aed); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
.tablet-content input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--su) * 26); height: calc(var(--su) * 26); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc53d 60%, #e09a12); box-shadow: 0 calc(var(--su) * 3) calc(var(--su) * 6) rgba(20, 0, 40, .45); cursor: pointer; }
.tablet-content input[type="range"]::-moz-range-thumb { width: calc(var(--su) * 26); height: calc(var(--su) * 26); border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc53d 60%, #e09a12); }
.tablet-content .tablet-row, .tablet-content .audio-settings { border-radius: calc(var(--su) * 24); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.tablet-content .tablet-row button { min-height: max(44px, calc(var(--su) * 46)); padding: 0 calc(var(--su) * 20); border: 0; border-radius: 999px; cursor: pointer;
  font: 1000 max(12px, calc(var(--su) * 16))/1 "Nunito", sans-serif; color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--su) * 3) 0 #b9750a; }

/* My Home: the chosen place as a framed picture, no flat pink box */
.tablet-content .home-preview { background: radial-gradient(70% 50% at 50% 100%, rgba(255, 197, 61, .25), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)) !important;
  border-radius: calc(var(--su) * 30); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.tablet-content .home-preview img { border-radius: calc(var(--su) * 22); box-shadow: 0 0 0 calc(var(--su) * 4) rgba(255, 229, 166, .85), 0 calc(var(--su) * 12) calc(var(--su) * 20) rgba(20, 0, 40, .4); }

/* ------------------------------------------------------------------------------------------------------------------
   Owner, 2026-10-13: "Fred has to stand beautifully against our town... every character in a fitting place";
   "we already had the design: our hero on a pedestal in the dressing room"; "Talk to Freddy premium against our town,
   without the icon on the left". Approved art only: the house scenes, HUD e's town hall, the video's dressing room. */

/* My Friends: the selected friend stands in their own place of Freddyville */
.friend-detail { background: none; box-shadow: 0 calc(var(--su) * 14) calc(var(--su) * 26) rgba(20, 0, 40, .35), inset 0 0 0 calc(var(--su) * 3) rgba(255, 229, 166, .55); }
.friend-detail::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(26, 12, 44, .78) 0%, rgba(26, 12, 44, .38) 42%, rgba(26, 12, 44, 0) 70%), var(--place, none) center / cover no-repeat; }
.friend-detail::after { z-index: 0; right: 4%; bottom: 3%; width: 46%; height: 10%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .9), rgba(255, 197, 61, .34) 62%, transparent); }
.friend-detail .full-character { z-index: 1; right: 7%; bottom: 6%; height: 88%; max-width: 50%;
  filter: drop-shadow(0 calc(var(--su) * 4) 0 rgba(255, 238, 200, .35)) drop-shadow(0 calc(var(--su) * 18) calc(var(--su) * 18) rgba(20, 0, 40, .5)); }
.friend-detail .full-character.bust { bottom: 0; height: 92%; max-width: 56%; }
.friend-copy { width: 46%; padding: calc(var(--su) * 18) calc(var(--su) * 20) calc(var(--su) * 16); border-radius: calc(var(--su) * 26) calc(var(--su) * 26) calc(var(--su) * 26) calc(var(--su) * 8);
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .94)); box-shadow: inset 0 calc(var(--su) * 2) 0 #fff, 0 calc(var(--su) * 12) calc(var(--su) * 22) rgba(20, 0, 40, .35); }
.friend-copy .speaker-name { color: var(--violet); }
.friend-copy h2 { color: var(--ink); font-size: calc(var(--su) * 32); }
.friend-copy p { color: rgba(42, 18, 69, .85); }
.friend-copy h3 { color: var(--plum); }
.friend-copy .friend-progress { background: rgba(91, 42, 134, .18); box-shadow: inset 0 1px 2px rgba(42, 18, 69, .25); }

/* My Look: the dressing room, the hero on the round wooden pedestal (the room picture carries the chosen hero) */
.look-layout.dressing-room { position: relative; display: block; height: 100%; border-radius: calc(var(--su) * 24); overflow: hidden;
  background: var(--room) 22% center / cover no-repeat; box-shadow: inset 0 0 0 calc(var(--su) * 3) rgba(255, 229, 166, .5); }
.look-layout.dressing-room .look-hero-stage { display: none; }
.look-layout.dressing-room .look-options { position: absolute; top: calc(var(--su) * 18); right: calc(var(--su) * 18); bottom: calc(var(--su) * 18); width: 46%;
  overflow: auto; padding: calc(var(--su) * 22) calc(var(--su) * 24); border-radius: calc(var(--su) * 28);
  background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .95)); box-shadow: inset 0 calc(var(--su) * 2) 0 #fff, 0 calc(var(--su) * 14) calc(var(--su) * 26) rgba(30, 5, 50, .35); }
.dressing-room .look-intro .speaker-name { color: var(--violet); }
.dressing-room .look-intro h2 { color: var(--ink); }
.dressing-room .look-intro p { color: rgba(42, 18, 69, .8); }
.dressing-room .look-group h3 { color: var(--violet); }
.dressing-room .name-input { box-shadow: inset 0 0 0 calc(var(--su) * 2) rgba(124, 58, 237, .25), 0 calc(var(--su) * 4) calc(var(--su) * 8) rgba(30, 5, 50, .12); }
.dressing-room .look-ready .item-card { color: var(--plum); background: rgba(124, 58, 237, .1); box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .25); }
.dressing-room .look-ready .item-card.selected { color: #fff; background: linear-gradient(170deg, #9b6bff, #7c3aed); box-shadow: 0 calc(var(--su) * 4) 0 #4c1d95, 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(76, 29, 149, .35); }
.dressing-room .look-items .item-card { color: var(--plum); background: rgba(124, 58, 237, .08); box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .2); }
.dressing-room .look-items .item-card.selected { color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--su) * 4) 0 #b9750a; }

/* Talk to Freddy: a video call from Freddy in the town square; no page icon, no boxes */
.ts-panel[data-panel="fred"] .tp-head > img, .ts-panel[data-panel="fred"] .tp-head .tp-ic { display: none; }
.call-stage { border-radius: calc(var(--su) * 24); overflow: hidden; background: url("../../characters/fred/place.webp") 40% center / cover no-repeat;
  box-shadow: inset 0 0 0 calc(var(--su) * 3) rgba(255, 229, 166, .5); padding-right: calc(var(--su) * 18); }
.call-stage::before { inset: 0; background: linear-gradient(90deg, rgba(26, 12, 44, 0) 30%, rgba(26, 12, 44, .45) 100%), radial-gradient(60% 70% at 26% 78%, rgba(255, 214, 160, .35), transparent 70%); }
.fred-video img { bottom: 0; height: 104%; }
/* stronger than fix9's call rules: Freddy whole, no lavender box behind him */
.tablet-content .call-stage { grid-template-columns: 40% 1fr; }
.tablet-content .call-stage .fred-video { background: none; border-radius: 0; box-shadow: none; overflow: visible; height: 100%; align-self: end; }
.tablet-content .call-stage .fred-video img { inset: auto; top: auto; right: auto; left: 50%; bottom: 0; width: auto; height: 100%; max-width: 135%; translate: -50% 0; object-fit: contain; object-position: center bottom; }

/* My Look card: compact, everything visible without scrolling */
.tablet-content .dressing-room .look-intro { display: block; }
.tablet-content .dressing-room .look-intro .speaker-name { display: block; }
.tablet-content .dressing-room .look-intro h2 { margin: calc(var(--su) * 4) 0 calc(var(--su) * 4); font-size: calc(var(--su) * 28); }
.tablet-content .dressing-room .look-intro p { margin: 0 0 calc(var(--su) * 8); font-size: max(12px, calc(var(--su) * 14)); line-height: 1.25; }
.tablet-content .dressing-room .name-input { height: max(40px, calc(var(--su) * 44)); min-height: 0; margin-top: 0; font-size: max(12px, calc(var(--su) * 17)); }
.tablet-content .dressing-room .look-group h3 { margin: calc(var(--su) * 12) 0 calc(var(--su) * 8); }
.tablet-content .dressing-room .look-ready .item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--su) * 8); }
.tablet-content .dressing-room .look-ready .item-card { min-height: max(36px, calc(var(--su) * 40)); padding: 0 calc(var(--su) * 10); font-size: max(12px, calc(var(--su) * 14)); }
.tablet-content .dressing-room .look-items .item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--su) * 8); }
.tablet-content .dressing-room .look-items .item-card { width: auto; min-height: max(48px, calc(var(--su) * 74)); padding: calc(var(--su) * 6); border-radius: calc(var(--su) * 18); }
.tablet-content .dressing-room .look-items .item-card img { width: calc(var(--su) * 36); height: calc(var(--su) * 36); }

/* My Friends rail: room for the heads that break out of their discs; readable text on the gold pill */
.tablet-content .friend-category { margin: calc(var(--su) * 6) 0 calc(var(--su) * 26); }
.tablet-content .friend-button { margin-bottom: calc(var(--su) * 22); }
.tablet-content .friend-button.selected small { color: rgba(58, 27, 0, .78); opacity: 1; }

/* Places: the Wonder Book as polaroids (HUD e's album language), not dark silhouettes */
.tablet-content .wonder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--su) * 22) calc(var(--su) * 18); padding: calc(var(--su) * 14) calc(var(--su) * 10); }
.tablet-content .wonder-card { position: relative; min-height: 0; padding: calc(var(--su) * 8) calc(var(--su) * 8) calc(var(--su) * 6); border: 0; border-radius: calc(var(--su) * 6); overflow: visible; cursor: pointer;
  background: #fffaf0; box-shadow: 0 calc(var(--su) * 8) calc(var(--su) * 14) rgba(20, 0, 40, .4); rotate: -1.6deg; transition: rotate .3s, translate .3s; }
.tablet-content .wonder-card:nth-child(even) { rotate: 1.4deg; }
.tablet-content .wonder-card:hover { rotate: 0deg; translate: 0 calc(var(--su) * -4); }
.tablet-content .wonder-card::before { content: ""; position: absolute; z-index: 2; top: calc(var(--su) * -8); left: 50%; width: 36%; height: calc(var(--su) * 16); translate: -50% 0; rotate: -3deg; background: rgba(196, 181, 253, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.tablet-content .wonder-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--su) * 3); }
.tablet-content .wonder-card strong { display: block; padding: calc(var(--su) * 6) calc(var(--su) * 2) 0; font: 1000 max(12px, calc(var(--su) * 14))/1.1 "Nunito", sans-serif; color: var(--ink); text-align: center; }
.tablet-content .wonder-card.unknown { filter: none; }   /* app.css blacks out every .unknown: the polaroid stays */
.tablet-content .wonder-card.unknown img { filter: blur(calc(var(--su) * 3)) grayscale(.55) brightness(.85); }
.tablet-content .wonder-card.unknown strong { color: rgba(42, 18, 69, .5); }
.tablet-content .wonder-card.unknown::after { content: "?"; position: absolute; left: 50%; top: 40%; translate: -50% -50%; width: calc(var(--su) * 44); height: calc(var(--su) * 44); border-radius: 50%;
  display: grid; place-items: center; font: 1000 calc(var(--su) * 26)/1 "Nunito", sans-serif; color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--su) * 3) 0 #b9750a; }

/* My Tree: HUD e's tree with its three branch labels */
.tablet-content .hud-tree { display: grid; place-items: center; align-content: center; gap: calc(var(--su) * 10); min-height: 100%;
  background: radial-gradient(ellipse at 50% 88%, rgba(255, 197, 61, .2), transparent 60%); }
.hud-tree .tree-stage { position: relative; width: calc(var(--su) * 290); height: calc(var(--su) * 290); }
.hud-tree .tree-stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 calc(var(--su) * 14) calc(var(--su) * 18) rgba(20, 0, 40, .45)); }
.hud-tree .tree-label { position: absolute; display: flex; align-items: center; gap: calc(var(--su) * 8); padding: calc(var(--su) * 7) calc(var(--su) * 16); border-radius: 999px;
  font: 1000 max(12px, calc(var(--su) * 18))/1 "Nunito", sans-serif; color: var(--cream); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.hud-tree .tree-label i { width: calc(var(--su) * 12); height: calc(var(--su) * 12); border-radius: 50%; }
.hud-tree .mind { right: -34%; top: 6%; } .hud-tree .mind i { background: #8b5cf6; box-shadow: 0 0 8px #8b5cf6; }
.hud-tree .heart { left: -36%; top: 30%; } .hud-tree .heart i { background: #e2479a; box-shadow: 0 0 8px #e2479a; }
.hud-tree .body { right: -32%; top: 42%; } .hud-tree .body i { background: #22b8a6; box-shadow: 0 0 8px #22b8a6; }
.tablet-content .hud-tree h2 { margin: 0; font-size: calc(var(--su) * 26); }
.tablet-content .soon-pill { padding: calc(var(--su) * 8) calc(var(--su) * 20); border-radius: 999px; font: 1000 max(12px, calc(var(--su) * 15))/1 "Nunito", sans-serif; color: var(--gold); box-shadow: inset 0 0 0 1.5px rgba(255, 197, 61, .7); }

/* iPhone measured in phone points (lead check 2026-10-13): the speech card ran under the tablet button (card 404..785,
   top 42; button 702..784, 8..84) and the place buttons sat 17.5 pt from the bottom (safe area 21). */
.f-ios .premium-dialogue.continue-dialogue .tk-card { top: calc(var(--u) * 30); right: calc(var(--u) * 150); max-height: calc(var(--u) * 196); overflow: hidden; }
.f-ios .premium-dialogue.continue-dialogue .tk-line { font-size: calc(var(--u) * 17); line-height: 1.14; }
.f-ios .premium-dialogue.long-dialogue .tk-line { font-size: calc(var(--u) * 16); }
/* (the place card keeps HUD e's own iPhone positions: with phone-always.css the buttons sit 23+ pt above the bottom) */

/* The hero panel under the avatar = HUD e's approved cream card (.me-card): three items, icon on top, label under it,
   the notch pointing at the avatar (the old dark list looked "system-made"). */
.hud .avatar-panel { position: absolute; z-index: 11; left: calc(var(--u) * 24); top: calc(var(--u) * 182); width: auto; display: flex; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 10); border: 0; border-radius: calc(var(--u) * 28); transform-origin: 26% 0;
  background: linear-gradient(180deg, rgba(255, 252, 245, .96), rgba(255, 244, 226, .93)); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, 0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(40, 10, 60, .3);
  animation: lead-panel-in .42s cubic-bezier(.3, 1.4, .5, 1) both; backdrop-filter: none; }
.hud .avatar-panel[hidden] { display: none; }
.hud .avatar-panel::before { content: ""; position: absolute; left: calc(var(--u) * 66); top: calc(var(--u) * -9); width: calc(var(--u) * 20); height: calc(var(--u) * 20); rotate: 45deg; border-radius: calc(var(--u) * 4); background: rgba(255, 252, 245, .97); }
.hud .avatar-panel button { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); width: calc(var(--u) * 96); min-height: 0; margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 4); border: 0; border-radius: calc(var(--u) * 18); background: none; box-shadow: none; cursor: pointer; transition: background .25s; }
.hud .avatar-panel button:hover, .hud .avatar-panel button:focus-visible { background: rgba(124, 58, 237, .09); }
.hud .avatar-panel img { width: calc(var(--u) * 70); height: calc(var(--u) * 62); object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(50, 15, 80, .3)); transition: translate .4s cubic-bezier(.3, 1.6, .4, 1); }
.hud .avatar-panel button:hover img { translate: 0 calc(var(--u) * -3); }
.hud .avatar-panel strong { font: 1000 calc(var(--u) * 16)/1.08 "Nunito", sans-serif; color: var(--ink); text-align: center; }
.f-ios .hud .avatar-panel { left: calc(var(--u) * 58); top: calc(var(--u) * 112); scale: .78; transform-origin: 0 0; }
.f-ios .hud .avatar-panel strong { font-size: calc(var(--u) * 16); }
@keyframes lead-panel-in { from { opacity: 0; transform: translateY(calc(var(--u) * -10)) scale(.86); } to { opacity: 1; transform: none; } }

/* iPhone: the sleeping action paw stays a clear plush paw (it read as a grey smudge at .62) */
.f-ios .paw-act .pa-tilt { opacity: .9; }
.f-ios .paw-act[aria-disabled="true"] .pa-in { filter: saturate(.85) brightness(.97); }

/* ------------------------------------------------------------------------------------------------------------------
   The opening from the APPROVED investor-video frames (full screen like the house stories) */
.opening-scene .story-scene-narration { font-weight: 800; }
/* the lock: three golden keys with the door's own symbols, slots that light up in the caption */
.opening-scene .lock-key { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); color: #3a1b00; border: 0;
  background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--u) * 4) 0 #b9750a, 0 calc(var(--u) * 10) calc(var(--u) * 18) rgba(40, 10, 60, .35); }
.opening-scene .lock-key svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); fill: #7a3e00; }
.opening-scene .lock-key.used { opacity: .45; filter: saturate(.6); transform: translateY(calc(var(--u) * 3)); }
.opening-scene .lock-slots { display: flex; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); }
.opening-scene .lock-slots i { display: grid; place-items: center; width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 50%;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 229, 166, .55); transition: background .3s, box-shadow .3s; }
.opening-scene .lock-slots i svg { width: 58%; height: 58%; fill: rgba(255, 229, 166, .55); }
.opening-scene .lock-slots i.on { background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc53d 60%, #e09a12); box-shadow: 0 0 calc(var(--u) * 18) rgba(255, 197, 61, .8); }
.opening-scene .lock-slots i.on svg { fill: #7a3e00; }
/* Imagination: five places as portal cards over the hall of portals */
.imagination-portals { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--u) * 190); translate: -50% 0; display: flex; gap: calc(var(--u) * 18); }
.imagination-portals .portal { display: grid; gap: calc(var(--u) * 8); width: calc(var(--u) * 200); padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 10); border: 0; cursor: pointer;
  border-radius: calc(var(--u) * 110) calc(var(--u) * 110) calc(var(--u) * 22) calc(var(--u) * 22); background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 244, 226, .94));
  box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, 0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(30, 5, 50, .45);
  animation: lead-portal-in .6s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 90ms + 300ms); transition: translate .3s cubic-bezier(.3, 1.6, .4, 1); }
.imagination-portals .portal:hover, .imagination-portals .portal:focus-visible { translate: 0 calc(var(--u) * -8); }
.imagination-portals .portal img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: calc(var(--u) * 100) calc(var(--u) * 100) calc(var(--u) * 14) calc(var(--u) * 14); }
.imagination-portals .portal span { font: 1000 max(12px, calc(var(--u) * 19))/1.1 "Nunito", sans-serif; color: var(--ink); text-align: center; }
@keyframes lead-portal-in { from { opacity: 0; transform: translateY(calc(var(--u) * 26)) scale(.9); } to { opacity: 1; transform: none; } }
.f-ios .imagination-portals { bottom: calc(var(--u) * 132); gap: calc(var(--u) * 10); }
.f-ios .imagination-portals .portal { width: calc(var(--u) * 116); padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 6); }
.f-ios .imagination-portals .portal span { font-size: calc(var(--u) * 12); }
/* the tablet tour: the real Glass tablet, Freddy's coach card, one section glowing at a time */
.modal-layer.tutorial-mode .tablet-layer { pointer-events: none; }
.modal-layer.tutorial-mode .ts-app:not(.tutorial-focus) { opacity: .42; transition: opacity .35s; }
.modal-layer.tutorial-mode .ts-app.tutorial-focus { scale: 1.08; transition: scale .4s cubic-bezier(.3, 1.6, .4, 1); }
.modal-layer.tutorial-mode .ts-app.tutorial-focus .ap-ic { filter: drop-shadow(0 0 calc(var(--su) * 18) rgba(255, 197, 61, .95)); animation: lead-coach-pulse 1.4s ease-in-out infinite; }
@keyframes lead-coach-pulse { 50% { transform: translateY(calc(var(--su) * -5)) scale(1.05); } }
.tablet-coach { position: absolute; z-index: 40; left: calc(var(--u) * 24); bottom: 0; display: flex; align-items: flex-end; gap: calc(var(--u) * 6); pointer-events: auto; }
.tablet-coach.in { animation: lead-panel-in .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.tablet-coach .coach-fred { height: calc(var(--u) * 300); width: auto; filter: drop-shadow(0 calc(var(--u) * 12) calc(var(--u) * 16) rgba(30, 5, 50, .45)); }
.tablet-coach .coach-card { margin-bottom: calc(var(--u) * 40); max-width: calc(var(--u) * 430); padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 8); background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(255, 245, 228, .95));
  box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, 0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(30, 5, 50, .4); }
.tablet-coach .coach-card b { display: block; font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.tablet-coach .coach-card strong { display: block; margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); font: 1000 calc(var(--u) * 26)/1.1 "Nunito", sans-serif; color: var(--ink); }
.tablet-coach .coach-card p { margin: 0 0 calc(var(--u) * 12); font: 800 calc(var(--u) * 18)/1.3 "Nunito", sans-serif; color: rgba(42, 18, 69, .9); }
.tablet-coach .primary-button { min-height: max(44px, calc(var(--u) * 54)); padding: 0 calc(var(--u) * 24); border: 0; border-radius: 999px; cursor: pointer;
  font: 1000 calc(var(--u) * 18)/1 "Nunito", sans-serif; color: #3a1b00; background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); box-shadow: 0 calc(var(--u) * 4) 0 #b9750a; }
.f-ios .tablet-coach { left: calc(var(--u) * 59); }
.f-ios .tablet-coach .coach-fred { height: calc(var(--u) * 150); }
.f-ios .tablet-coach .coach-card { margin-bottom: calc(var(--u) * 24); max-width: calc(var(--u) * 260); padding: calc(var(--u) * 9) calc(var(--u) * 12) calc(var(--u) * 10); }
.f-ios .tablet-coach .coach-card b { font-size: calc(var(--u) * 12); }
.f-ios .tablet-coach .coach-card strong { font-size: calc(var(--u) * 15); }
.f-ios .tablet-coach .coach-card p { font-size: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 6); }
.f-ios .tablet-coach .primary-button { min-height: calc(var(--u) * 44); font-size: calc(var(--u) * 13); padding: 0 calc(var(--u) * 14); }

/* Owner 2026-10-13: no key hints on Windows (the bottom bar, the Tab badge, the E badges, the answer numbers) */
.f-win .hud-keys, .f-win .kh, .f-win .tb-key, .f-win .tk-ans kbd, .f-win .bub kbd, .f-win .sp-bub kbd, .f-win kbd { display: none !important; }

/* Owner 2026-10-13: friends not met yet are inactive (no tap, no card) */
.tablet-content .friend-button.locked { cursor: default; opacity: .72; filter: saturate(.6); pointer-events: none;
  background: linear-gradient(180deg, rgba(60, 34, 96, .7), rgba(40, 18, 70, .72)); }
.tablet-content .friend-button.locked strong { opacity: .82; }

/* The tap-me hint and the goal thought never swallow a tap meant for the avatar */
.avatar-tap-hint, .avatar-thought { pointer-events: none; }

/* My Look card fits the dressing room without scrolling */
.tablet-content .dressing-room .look-intro p { display: none; }
.tablet-content .dressing-room .look-intro h2 { font-size: calc(var(--su) * 24); }
.tablet-content .dressing-room .look-group h3 { margin: calc(var(--su) * 10) 0 calc(var(--su) * 6); }
.tablet-content .dressing-room .look-ready .item-card { min-height: max(34px, calc(var(--su) * 36)); }
.tablet-content .dressing-room .look-items .item-card { min-height: max(44px, calc(var(--su) * 58)); padding: calc(var(--su) * 4); gap: calc(var(--su) * 2); }
.tablet-content .dressing-room .look-items .item-card img { width: calc(var(--su) * 30); height: calc(var(--su) * 30); }
.tablet-content .dressing-room .look-options { padding: calc(var(--su) * 14) calc(var(--su) * 18); top: calc(var(--su) * 12); bottom: calc(var(--su) * 12); }
.f-ios .tablet-content .dressing-room .look-options { padding: calc(var(--su) * 14) calc(var(--su) * 18); top: calc(var(--su) * 12); bottom: calc(var(--su) * 12); }

/* My Adventures: the state badge never covers the cards */
.tablet-content .state-columns .state-column { padding-top: calc(var(--su) * 60); }
.tablet-content .state-columns .state-column::before { position: absolute; left: calc(var(--su) * 14); top: calc(var(--su) * 14); }

.call-stage::after { content: "\25CF  Freddy is on the call"; position: absolute; left: calc(var(--su) * 18); top: calc(var(--su) * 16); z-index: 3; padding: calc(var(--su) * 7) calc(var(--su) * 14);
  border-radius: 999px; font: 1000 max(12px, calc(var(--su) * 13))/1 "Nunito", sans-serif; color: #fff; background: rgba(20, 10, 34, .55); backdrop-filter: blur(6px); }