/* The opening scenes in the approved HUD language (the lead, 2026-10-13). The door, the hall of Imagination and the
   five inner spaces are the approved investor-video frames, full screen with the 2.5D depth camera; Freddy and Fairy
   Teller speak in the HUD's own line card (tk-card); the choices are the HUD's own pills (tk-ans); the lock and the
   hall are played in the picture itself. Units: --u (Windows: the frame unit; iPhone: one point). */

.game:has(.modal-layer .opening-scene-host) > .hud { visibility: hidden; }
.opening-scene-host { position: absolute; inset: 0; overflow: hidden; background: #1d1230; }
.os { position: absolute; inset: 0; overflow: hidden; animation: os-in .5s ease both; }
@keyframes os-in { from { opacity: 0; } }
.os-stage { position: absolute; inset: 0; overflow: hidden; background: #1d1230; }
.os-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); }
.os-stage .depth-parallax-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
.os-stage.is-depth-ready .depth-parallax-canvas { opacity: 1; }
.os-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.os-marks > * { position: absolute; }
.os-flash { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fffaf0, #ffe6b3 45%, #f4c877); }

/* the line card and its choices travel together */
.os-dock { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 14);
  width: max-content; max-width: calc(var(--u) * 560); }
.os-dock[data-place="lock"], .os-dock[data-place="door"], .os-dock[data-place="home"], .os-dock[data-place="right"] {
  right: calc(var(--u) * 56); bottom: calc(var(--u) * 46); align-items: flex-end; }
.os-dock[data-place="hall"] { left: calc(var(--u) * 56); bottom: calc(var(--u) * 42); }
.os .tk-card.os-card { position: relative; left: auto; top: auto; max-width: none; transform-origin: 50% 100%;
  padding: calc(var(--u) * 16) calc(var(--u) * 26) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 10); animation: none; }
.os .tk-card.os-card::before { display: none; }
.os-card .tk-name { gap: calc(var(--u) * 12); }
.os-card .tk-line { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 30); line-height: 1.16; }
.os-face { flex: 0 0 auto; width: calc(var(--u) * 52); height: calc(var(--u) * 52); border-radius: 50%; overflow: hidden; background: #f4dcc4;
  box-shadow: 0 0 0 calc(var(--u) * 3) #fff, 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(50, 15, 80, .3); }
.os-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: scale(1.3); transform-origin: 50% 22%; }
.os-face.teller { display: grid; place-items: center; background: linear-gradient(160deg, #8b5cf6, #4c1d95); }
.os-face.teller img { width: 74%; height: 74%; object-fit: contain; transform: none; }
.os-card .tk-voice i { transform-origin: 50% 50%; }
.os-card.speaking .tk-voice i { animation: os-voice .5s ease-in-out infinite alternate; }
.os-card.speaking .tk-voice i:nth-child(2) { animation-duration: .38s; animation-delay: -.2s; }
.os-card.speaking .tk-voice i:nth-child(3) { animation-duration: .56s; animation-delay: -.1s; }
.os-card.speaking .tk-voice i:nth-child(4) { animation-duration: .44s; animation-delay: -.3s; }
.os-card.speaking .tk-voice i:nth-child(5) { animation-duration: .6s; animation-delay: -.15s; }
@keyframes os-voice { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.os-actions { display: flex; flex-direction: column; align-items: inherit; gap: calc(var(--u) * 12); }
.os-actions:empty { display: none; }
.os .tk-ans.os-act, .tablet-coach .tk-ans.os-act { min-height: calc(var(--u) * 66); padding-right: calc(var(--u) * 30); }
.os .tk-ans.os-act .tk-t, .tablet-coach .tk-ans.os-act .tk-t { font-size: calc(var(--u) * 26); }
.os .tk-ans.os-act .tk-ic img, .tablet-coach .tk-ans.os-act .tk-ic img { filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(20, 0, 40, .35)); }

/* ----------------------------------------------------------------------------------- the Curious Lock */
/* the carving lights from within: a soft golden fill with a bright edge and a bloom, screened onto the wood */
.os-carve { transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: screen; transition: opacity .7s ease; }
.os-carve svg { display: block; width: 100%; height: 100%; overflow: visible; fill: rgba(255, 196, 92, .42); stroke: #fff1c2; stroke-width: 3px;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
  filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 214, 120, .95)) drop-shadow(0 0 calc(var(--u) * 22) rgba(255, 170, 60, .8)); }
.os-carve svg path { vector-effect: non-scaling-stroke; }
.os-carve.hint { animation: os-carve-hint 1.6s ease-in-out infinite; }
.os-carve.lit { opacity: 1; animation: os-carve-lit 1.1s ease-out; }
.os-carve.lit svg { fill: rgba(255, 200, 104, .46); }
@keyframes os-carve-hint { 0%, 100% { opacity: .22; } 50% { opacity: .78; } }
@keyframes os-carve-lit { 0% { opacity: .5; filter: brightness(2.2); } 100% { opacity: 1; filter: none; } }
.opening-scene-host.is-solved .os-carve { animation: os-carve-solved 1.5s ease-in-out both; }
@keyframes os-carve-solved { 0% { opacity: 1; } 45% { opacity: 1; filter: brightness(1.6); } 100% { opacity: 1; } }
/* the keyhole that wants a key: a warm halo breathes around its plate and light glows out of the slot */
.os-hole { transform: translate(-50%, -50%); opacity: 0; border-radius: 50% / 46%; }
.os-hole::before { content: ""; position: absolute; inset: -38% -60%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .9), rgba(255, 186, 70, .55) 45%, rgba(255, 160, 50, 0) 100%); }
.os-hole::after { content: ""; position: absolute; inset: -4%; border-radius: 50% / 46%;
  box-shadow: 0 0 0 calc(var(--u) * 3.5) rgba(255, 244, 205, .95), 0 0 calc(var(--u) * 18) calc(var(--u) * 4) rgba(255, 200, 90, .9); }
.os-hole.next { animation: os-hole-pulse 1.4s ease-in-out infinite; }
.os-hole.done { animation: os-hole-done 1s ease-out both; }
@keyframes os-hole-pulse { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.97); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes os-hole-done { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
/* the keys in the paw: each one catches the light now and then; under the pointer it lifts and glows */
.os-key { transform: translate(-50%, -50%); border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; }
.os-key:focus-visible { outline: none; }
.os-key-glow { position: absolute; inset: -22%; border-radius: 50%; mix-blend-mode: screen; opacity: .32;
  background: radial-gradient(closest-side, rgba(255, 244, 196, .95), rgba(255, 200, 80, .5) 50%, rgba(255, 180, 60, 0));
  animation: os-key-idle 2.4s calc(var(--i, 0) * .8s) ease-in-out infinite; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .4, 1); }
.os-key:hover .os-key-glow, .os-key:focus-visible .os-key-glow { opacity: 1; transform: scale(1.12); animation: none; }
@keyframes os-key-idle { 0%, 70%, 100% { opacity: .28; } 82% { opacity: .9; } }
.os-key-tag { position: absolute; left: 50%; bottom: calc(100% + var(--u) * 8); white-space: nowrap; pointer-events: none;
  padding: calc(var(--u) * 7) calc(var(--u) * 16); border-radius: 999px; font: 1000 calc(var(--u) * 19)/1 "Nunito", sans-serif; color: var(--ink);
  background: linear-gradient(180deg, #fffdf8, #f1e7d6); box-shadow: 0 calc(var(--u) * 2.5) 0 #cdbda1, 0 calc(var(--u) * 5) calc(var(--u) * 9) rgba(50, 15, 80, .28);
  opacity: 0; transform: translate(-50%, 6px) scale(.9); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .4, 1); }
.os-key:hover .os-key-tag, .os-key:focus-visible .os-key-tag { opacity: 1; transform: translate(-50%, 0) scale(1); }
.os-key.used, .os-key.flying { pointer-events: none; }
.os-key.used .os-key-glow, .os-key.used .os-key-tag { opacity: 0; animation: none; }
.os-flykey { position: absolute; z-index: 8; width: calc(var(--u) * 124); height: calc(var(--u) * 48); margin: calc(var(--u) * -24) 0 0 calc(var(--u) * -24);
  transform-origin: calc(var(--u) * 24) 50%; pointer-events: none;
  filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 214, 120, .95)) drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(60, 20, 0, .35)); }
.os-flykey svg { display: block; width: 100%; height: 100%; }
.os-spark { position: absolute; z-index: 8; width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; pointer-events: none; }
.os-spark.gold { background: radial-gradient(circle, #fff8dc, #ffc53d 55%, transparent 72%); }
.os-spark.violet { background: radial-gradient(circle, #f6efff, #b48cff 55%, transparent 72%); }

/* ----------------------------------------------------------------------------------- the hall of Imagination */
.ih { position: absolute; inset: 0; }
/* scenes that continue straight out of the previous picture do not fade in from the dark */
.os.os-hall, .os.os-arrive { animation: none; }
.ih-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); }
.ih-gl, .ih-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ih-gl { opacity: 0; transition: opacity .5s ease; }
.ih.is-ready .ih-gl { opacity: 1; }
.ih.gl-off { background: #2a1d3c url("../../story/opening/imagination-hall.webp") center / cover no-repeat; }
.ih.gl-off .ih-gl { display: none; }
.ih-fx { z-index: 2; pointer-events: none; }
.ih-doors { position: absolute; inset: 0; z-index: 3; }
.ih-door { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 50% 50% 6% 6% / 28% 28% 3% 3%;
  -webkit-tap-highlight-color: transparent; }
.ih-door:focus-visible { outline: none; }
.ih-label { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; white-space: nowrap; pointer-events: none;
  padding: calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * 12); border-radius: calc(var(--u) * 22);
  background: linear-gradient(180deg, rgba(255, 253, 248, .97), rgba(241, 231, 214, .95)); box-shadow: 0 calc(var(--u) * 2.5) 0 #cdbda1, var(--sh-2);
  opacity: 0; transform: translate(-50%, calc(var(--u) * 12)) scale(.88); transition: opacity .22s ease, transform .5s cubic-bezier(.3, 1.6, .4, 1); }
.ih-label small { font: 1000 calc(var(--u) * 13)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 2); text-transform: uppercase; color: var(--violet); }
.ih-label b { margin-top: calc(var(--u) * 4); font: 1000 calc(var(--u) * 28)/1.05 "Nunito", sans-serif; color: var(--ink); }
.ih-label.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ih.is-flying .ih-label, .ih.is-flying .ih-doors { opacity: 0; pointer-events: none; transition: opacity .3s; }
/* Freddy's card steps aside while a doorway is lit (and comes back only after a moment, so gliding from door to door
   over the pillars never makes it flicker) */
.os-hall .os-dock { transition: opacity .4s ease .7s, translate .5s ease .7s; }
.opening-scene-host.door-lit .os-hall .os-dock, .opening-scene-host.is-choosing .os-hall .os-dock {
  opacity: 0; translate: 0 calc(var(--u) * 14); pointer-events: none; transition-delay: 0s; }
.os-arrive { cursor: pointer; }

/* ----------------------------------------------------------------------------------- at home: Freddy and the tablet */
.premium-dialogue.no-tablet .hud-tab { visibility: hidden; }
.tablet-home-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #1d1230; }
.tablet-home-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08);
  filter: blur(calc(var(--u) * 6)) brightness(.9) saturate(1.05); animation: os-in .6s ease both; }
/* the tablet tour: a coach mark beside the lit section (the old bust-in-the-corner covered the tablet's icons) */
.modal-layer .tablet-coach { position: absolute; inset: 0; left: 0; bottom: 0; z-index: 40; display: block; pointer-events: none; animation: none; }
.tablet-coach .coach-col { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10);
  width: max-content; max-width: calc(var(--u) * 440); pointer-events: auto; opacity: 0; transform: translateY(calc(var(--u) * -8)) scale(.94); }
/* above a section the button goes beside the card (on top it would sit on the tablet's title) */
.tablet-coach .coach-col.above { flex-direction: row; align-items: flex-end; max-width: calc(var(--u) * 760); transform: translateY(calc(var(--u) * 8)) scale(.94); }
.tablet-coach .coach-col.above .tk-card.os-card { max-width: calc(var(--u) * 440); }
.tablet-coach .coach-col.above .os-actions { margin-bottom: calc(var(--u) * 4); }
.tablet-coach.in .coach-col { opacity: 1; transform: none; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.5, .4, 1); }
.tablet-coach .tk-card.os-card { position: relative; left: auto; top: auto; max-width: none; padding: calc(var(--u) * 14) calc(var(--u) * 22) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 26); box-shadow: inset 0 calc(var(--u) * 2) 0 #fff, 0 0 0 calc(var(--u) * 3) rgba(255, 214, 120, .55), var(--sh-2); }
.tablet-coach .tk-card.os-card::before { display: block; left: calc(var(--tail, 50%) - var(--u) * 12); top: calc(var(--u) * -11); bottom: auto;
  width: calc(var(--u) * 24); height: calc(var(--u) * 24); background: #fffcf5; }
.tablet-coach .coach-col.above .tk-card.os-card::before { top: auto; bottom: calc(var(--u) * -11); background: #fff4e3; }
.tablet-coach .os-card .tk-line { font-size: calc(var(--u) * 24); line-height: 1.18; }

/* ----------------------------------------------------------------------------------- iPhone (points) */
.f-ios .os-dock { gap: calc(var(--u) * 6); max-width: calc(var(--u) * 300); }
.f-ios .os-dock[data-place="lock"], .f-ios .os-dock[data-place="door"], .f-ios .os-dock[data-place="home"], .f-ios .os-dock[data-place="right"] {
  right: calc(var(--u) * 59); bottom: calc(var(--u) * 21); }
.f-ios .os-dock[data-place="hall"] { left: calc(var(--u) * 59); bottom: calc(var(--u) * 21); }
.f-ios .os .tk-card.os-card, .f-ios .tablet-coach .tk-card.os-card { padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 6); }
.f-ios .os-card .tk-name { gap: calc(var(--u) * 6); }
.f-ios .os-card .tk-line, .f-ios .tablet-coach .os-card .tk-line { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 15); line-height: 1.16; }
.f-ios .os-card .tk-listen { width: calc(var(--u) * 30); height: calc(var(--u) * 28); }
.f-ios .os-face { width: calc(var(--u) * 28); height: calc(var(--u) * 28); box-shadow: 0 0 0 calc(var(--u) * 2) #fff, 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(50, 15, 80, .3); }
.f-ios .os .tk-ans.os-act, .f-ios .tablet-coach .tk-ans.os-act { min-height: calc(var(--u) * 44); padding-right: calc(var(--u) * 16); }
.f-ios .os .tk-ans.os-act .tk-t, .f-ios .tablet-coach .tk-ans.os-act .tk-t { font-size: calc(var(--u) * 15); }
.f-ios .os-key-tag { padding: calc(var(--u) * 4) calc(var(--u) * 9); font-size: calc(var(--u) * 12); }
.f-ios .os-flykey { width: calc(var(--u) * 70); height: calc(var(--u) * 27); margin: calc(var(--u) * -13.5) 0 0 calc(var(--u) * -13.5); transform-origin: calc(var(--u) * 13.5) 50%; }
.f-ios .os-spark { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.f-ios .ih-label { padding: calc(var(--u) * 5) calc(var(--u) * 11) calc(var(--u) * 6); border-radius: calc(var(--u) * 12); }
.f-ios .ih-label small { font-size: calc(var(--u) * 12); letter-spacing: calc(var(--u) * 1); }
.f-ios .ih-label b { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 16); }
.modal-layer .tablet-coach.f-ios { left: 0; }
.f-ios .tablet-coach .coach-col, .tablet-coach.f-ios .coach-col { max-width: calc(var(--u) * 270); gap: calc(var(--u) * 5); }
.tablet-coach.f-ios .coach-col.above { max-width: calc(var(--u) * 470); }
.tablet-coach.f-ios .coach-col.above .tk-card.os-card { max-width: calc(var(--u) * 270); }
.tablet-coach.f-ios .tk-card.os-card { padding: calc(var(--u) * 7) calc(var(--u) * 11) calc(var(--u) * 9); border-radius: calc(var(--u) * 16); }
.tablet-coach.f-ios .tk-card.os-card::before { left: calc(var(--tail, 50%) - var(--u) * 7); top: calc(var(--u) * -6); width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.tablet-coach.f-ios .coach-col.above .tk-card.os-card::before { top: auto; bottom: calc(var(--u) * -6); }
.tablet-coach.f-ios .os-card .tk-line { font-size: calc(var(--u) * 14); }
.tablet-coach.f-ios .os-card .tk-name b { font-size: calc(var(--u) * 12); }
.tablet-coach.f-ios .os-face { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.tablet-coach.f-ios .tk-ans.os-act { min-height: calc(var(--u) * 44); }
.tablet-coach.f-ios .tk-ans.os-act .tk-t { font-size: calc(var(--u) * 14); }

/* ----------------------------------------------------------------------------------- the house stories (2026-10-13)
   Fairy Teller speaks in the HUD's own line card (round book medallion, name, voice bars, "3 of 10", the place, words
   that arrive one by one) over the full-screen picture; Back, Next and Leave are the HUD's pills (Next in gold). The
   dark caption band of the Codex build is gone. */
.story-card.story-scene-card .story-scene-caption { position: absolute; left: calc(var(--u) * 56); right: calc(var(--u) * 56); bottom: calc(var(--u) * 40);
  top: auto; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 24); min-height: 0;
  padding: 0; background: none; border: 0; box-shadow: none; grid-template-areas: none; }
.story-card.story-scene-card .story-line { position: relative; left: auto; top: auto; flex: 0 1 calc(var(--u) * 820); max-width: calc(var(--u) * 820);
  padding: calc(var(--u) * 16) calc(var(--u) * 26) calc(var(--u) * 20); animation: none;
  border-radius: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 10); }
.story-card.story-scene-card .story-line::before { display: none; }
.story-card.story-scene-card .story-scene-meta { grid-area: auto; align-self: auto; }
.story-card.story-scene-card .story-scene-count { margin-left: auto; font: 1000 calc(var(--u) * 15)/1 "Nunito", sans-serif; letter-spacing: calc(var(--u) * 1.5);
  text-transform: uppercase; color: rgba(42, 18, 69, .5); }
.story-card.story-scene-card .story-scene-title { margin: calc(var(--u) * 8) 0 0; font: 1000 calc(var(--u) * 21)/1.1 "Nunito", sans-serif; color: var(--violet); }
.story-card.story-scene-card .story-line .story-scene-narration { grid-area: auto; max-width: none; margin: calc(var(--u) * 6) 0 0; color: var(--ink);
  text-shadow: none; font: 900 calc(var(--u) * 26)/1.22 "Nunito", sans-serif; }
.story-card.story-scene-card .story-scene-controls { grid-area: auto; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 12);
  flex: 0 0 auto; max-width: none; }
.story-card.story-scene-card .story-scene-controls .tk-ans { min-height: calc(var(--u) * 62); padding: calc(var(--u) * 8) calc(var(--u) * 28) calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius: 999px; white-space: nowrap; font-size: inherit; }
.story-card.story-scene-card .story-scene-controls .tk-ans img { width: 76%; height: 76%; }
.story-card.story-scene-card .story-scene-controls .tk-t { font-size: calc(var(--u) * 24); }
.story-card.story-scene-card .story-scene-controls .story-next { background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); color: #3a1b00; }
.story-card.story-scene-card .story-scene-controls .story-next .tk-ic { background: rgba(255, 255, 255, .5); }
.story-card.story-scene-card .story-scene-controls .story-next .tk-ic img { filter: brightness(.35) sepia(1) saturate(3) hue-rotate(-12deg); }
.story-card.story-scene-card .story-scene-controls .tk-ans:disabled { opacity: 0; pointer-events: none; }
.f-ios .story-card.story-scene-card .story-scene-caption { left: calc(var(--u) * 59); right: calc(var(--u) * 59); bottom: calc(var(--u) * 21); gap: calc(var(--u) * 10);
  grid-template-columns: none; grid-template-rows: none; padding: 0; }
.f-ios .story-card.story-scene-card .story-line { flex-basis: calc(var(--u) * 480); max-width: calc(var(--u) * 480);
  padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 10); border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 6); }
.f-ios .story-card.story-scene-card .story-scene-title { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 13); }
.f-ios .story-card.story-scene-card .story-line .story-scene-narration { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 14); line-height: 1.22; }
.f-ios .story-card.story-scene-card .story-scene-count { font-size: calc(var(--u) * 12); letter-spacing: calc(var(--u) * 1); }
.f-ios .story-card.story-scene-card .story-scene-controls { gap: calc(var(--u) * 6); }
.f-ios .story-card.story-scene-card .story-scene-controls .tk-ans { min-height: calc(var(--u) * 44); min-width: 0;
  padding: calc(var(--u) * 3) calc(var(--u) * 14) calc(var(--u) * 3) calc(var(--u) * 5); gap: calc(var(--u) * 7); }
.f-ios .story-card.story-scene-card .story-scene-controls .tk-ic { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.f-ios .story-card.story-scene-card .story-scene-controls .tk-t { font-size: calc(var(--u) * 14); }

/* ----------------------------------------------------------------------------------- notices from the avatar
   (owner 2026-10-13: check the pop-ups by the avatar). New friend, new place, the goal and the tablet now come out of
   the avatar in the same HUD card as "In Focus": cream card with its tail to the avatar, the icon large, a violet
   kicker and a bold title. The old pill was flat and thin and stretched across the whole iPhone. */
.notification-dock .notice-pill { width: max-content; max-width: calc(var(--u) * 380); min-height: calc(var(--u) * 58);
  gap: calc(var(--u) * 10); padding: calc(var(--u) * 9) calc(var(--u) * 20) calc(var(--u) * 9) calc(var(--u) * 12); border: 0;
  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, notice-out .45s 4.6s ease-in both; }
.notification-dock .notice-pill::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; }
.notification-dock .notice-pill img { flex: 0 0 auto; width: calc(var(--u) * 48); height: calc(var(--u) * 48); object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(50, 15, 80, .25)); }
.notification-dock .notice-pill small { display: block; opacity: 1; color: #805b91; font: 900 max(12px, calc(var(--u) * 13))/1.1 "Nunito", sans-serif;
  text-transform: uppercase; letter-spacing: .08em; }
.notification-dock .notice-pill strong { display: block; margin-top: calc(var(--u) * 2); font: 1000 max(12px, calc(var(--u) * 18))/1.12 "Nunito", sans-serif; }

/* "Auto" in the stories (owner 2026-10-14): lit gold while the pages turn by themselves */
.story-scene-controls .story-auto.on { box-shadow: inset 0 0 0 calc(var(--u) * 2.5) #ffc53d, 0 0 calc(var(--u) * 16) rgba(255, 197, 61, .55); }
.story-scene-controls .story-auto.on .tk-ic img { filter: drop-shadow(0 0 calc(var(--u) * 4) rgba(255, 210, 90, .9)); }

/* the living map under the world canvas (js/app.js World.loadLive): shown once it has drawn its first picture; the
   switch itself is a cross-fade drawn by the world canvas (the still map over it fades away), so no transition here.
   Its box reaches LIVE_MARGIN past every edge (set inline) and the game slides it with the camera (World.placeLive) */
.game > .live-map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; display: block;
  pointer-events: none; opacity: 0; background: transparent; transform-origin: 0 0; will-change: transform; }
.game > .live-map.on { opacity: 1; }