/* Shared controls and art-directed layouts. The photograph and its live
   monitor use the SAME rectangle; no independently cropped panel overlay. */
:root { --control-radius: 6px; --instrument-ink: #d9f7ff; }
html.is-scene-travelling { scroll-snap-type: none; scroll-behavior: auto; overflow-anchor: none; }
html { overflow-x: clip; }
/* Never restore root snapping on touch: WebKit can re-snap to the old scene
   when its browser chrome resizes the dynamic viewport after a transition. */
@media (any-pointer: coarse), (max-width: 900px), (max-width: 1100px) and (max-height: 600px) {
  html { scroll-snap-type: none; scroll-behavior: auto; overflow-anchor: none; }
  #scene, #quiz { scroll-snap-align: none; scroll-snap-stop: normal; }
  /* Fill the available viewport when browser bars retract. The navigation
     controller realigns the selected scene after dynamic size changes. */
  #scene { height: 100vh; height: 100dvh; min-height: 0; }
}
.space-landing .request-trigger,
.mobile-island-tour,
.quiz-actions .quiz-action,
.request-sheet .sheet-action {
  border-radius: var(--control-radius);
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0;
}
.space-landing .request-trigger {
  min-height: 48px;
  padding: 12px 20px;
  color: #091117;
  background: #ffc857;
  border: 1px solid #ffc857;
  box-shadow: none;
  font-size: 17px;
}
.space-landing .request-trigger svg { width: 18px; height: 18px; }
.mobile-island-tour { color: #b8efff; border-color: #658b98; background: #061018ed; }
.space-landing .proposition { isolation: isolate; }
.space-landing .proposition::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -28px -20px -32px;
  background: radial-gradient(ellipse at 40% 45%, #02080de6 15%, #02080da6 50%, transparent 74%);
  pointer-events: none;
}
.space-landing .proposition p {
  width: auto;
  max-width: 34ch;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.45;
  margin-top: 18px;
  text-shadow: 0 2px 3px #000, 0 4px 12px #000;
}
/* Source monitor interior, desktop: x370..1302/1672, y447..836/941.
   Portrait: x154..786/941, y726..1367/1672. Scale decorative
   cabin axes together with this target rectangle, never the live text. */
.quiz-scene {
  --monitor-left: 22%;
  --monitor-width: 56%;
  --monitor-top: 45%;
  --monitor-height: 48%;
  height: 100dvh;
  min-height: 0;
}
.quiz-scene .cockpit-background {
  inset: auto;
  left: calc(var(--monitor-left) - var(--monitor-width) * .397);
  top: calc(var(--monitor-top) - var(--monitor-height) * 1.1491);
  width: calc(var(--monitor-width) * 1.794);
  height: calc(var(--monitor-height) * 2.419);
  max-width: none;
  transform: none;
  object-fit: fill;
}
.quiz-scene .quiz-console {
  left: var(--monitor-left);
  top: var(--monitor-top);
  width: var(--monitor-width);
  height: var(--monitor-height);
  bottom: auto;
  transform: none;
  margin: 0;
  padding: clamp(16px, 2.5dvh, 28px) clamp(18px, 2vw, 32px);
  border: 0;
  border-radius: 26px;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}
/* Language readout follows the monitor frame, including its compact layouts. */
.quiz-scene .quiz-language {
  position: absolute;
  z-index: 8;
  left: calc(var(--monitor-left) + var(--monitor-width) - 48px);
  top: calc(var(--monitor-top) - 46px);
  right: auto;
  bottom: auto;
  width: 48px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ffc857;
  font: 700 17px/1 'Space Mono', monospace;
  text-shadow: 0 2px 4px #000;
  touch-action: manipulation;
}
.quiz-language span { padding: 5px 6px; border-radius: 3px; background: #020609e6; }
@media (min-width: 1101px), (min-width: 901px) and (min-height: 601px) {
  .quiz-scene .quiz-language { top: calc(var(--monitor-top) - 38px); }
  .quiz-language span { background: transparent; }
}
.quiz-scene .quiz-language:focus-visible { outline: 2px solid #7ee7ff; outline-offset: 1px; }
@media (hover: hover) { .quiz-language:hover span { color: #091117; background: #ffc857; } }
.quiz-heading { padding: max(20px, env(safe-area-inset-top)) 4% 0; }
.quiz-heading h2 { max-width: 24ch; font-size: clamp(24px, 2.7vw, 42px); }
.quiz-scene .quiz-companion { top: 12%; right: 2%; width: min(390px, calc((100% - var(--monitor-width)) / 2 - 3%)); }
.quiz-console #quiz-content { padding: 4px 2px 16px; scroll-padding-block: 8px 16px; scrollbar-gutter: stable; }
.quiz-stats { font-size: 12px; gap: 4px 12px; }
.quiz-console #quiz-progress { margin: 8px 0 12px; }
.quiz-question { font-size: clamp(19px, 1.65vw, 27px); line-height: 1.35; margin-bottom: 16px; text-wrap: pretty; }
.quiz-answer { border-radius: var(--control-radius); }
.quiz-feedback { font-size: 16px; line-height: 1.5; }
.quiz-feedback strong { font-size: 18px; margin-bottom: 14px; }
.quiz-feedback.is-correct strong { color: #b5ffd1; }
.quiz-feedback.is-wrong strong { color: #ffd4c8; }
.quiz-feedback p { margin: 10px 0; }
.quiz-correct-answer { color: #e3faff; font-weight: 700; }
.quiz-evidence { margin-top: 14px; color: #9cc3cc; font-size: 14px; }
.quiz-evidence summary, .quiz-share-fallback summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
  line-height: 1.6;
  scroll-margin-block: 8px 16px;
  color: #7ee7ff;
  text-underline-offset: 4px;
}
.quiz-evidence { padding-bottom: 8px; }
/* Keep the native disclosure and its hit area; lift the baseline away from the lower clip edge. */
.quiz-evidence summary { padding-top: 6px; padding-bottom: 14px; }
.quiz-evidence summary:hover, .quiz-share-fallback summary:hover { text-decoration: underline; }
.quiz-actions { padding-top: 12px; }
.quiz-actions .quiz-action { min-height: 48px; }
.quiz-result { padding: 6px 0; }
.quiz-result h3 { font-size: clamp(20px, 2vw, 30px); line-height: 1.25; margin: 0 0 12px; }
.quiz-result .quiz-result-score { color: #ffc857; font: 700 clamp(28px, 3.8vw, 56px)/1.2 'Space Mono', 'Courier New', monospace; margin: 12px 0; }
.quiz-result .quiz-result-thanks { color: #d9f7ff; font-size: 16px; }
.quiz-result canvas[hidden], .quiz-stats[hidden], #quiz-progress[hidden], .quiz-question[hidden] { display: none; }
.quiz-share-status:empty { display: none; }
.quiz-share-preview { display: block; width: 100%; height: auto; margin: 12px 0; }
.quiz-copy-link { color: #7ee7ff; background: none; border: 0; padding: 10px 0; min-height: 44px; text-align: left; font: 14px/1.5 'IBM Plex Mono', monospace; text-decoration: underline; cursor: pointer; }
.quiz-copy-link[hidden] { display: none; }
.quiz-share-fallback { display: block; margin-top: 12px; font: 14px/1.4 'IBM Plex Mono', monospace; }
.quiz-share-fallback a, .quiz-share-fallback button { display: block; max-width: 100%; overflow-wrap: anywhere; text-align: left; padding-left: 0; }
.quiz-share-status { font-size: 14px; }
.scene-back { position: absolute; top: max(0px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 8; width: 48px; height: 44px; display: grid; place-items: center; color: #ffc857; text-decoration: none; }
.scene-back::after { content: ''; width: 14px; height: 14px; border-left: 2px solid; border-top: 2px solid; transform: translateY(4px) rotate(45deg); }
.scene-back-hint { position: absolute; top: 8px; left: calc(100% + 8px); width: max-content; max-width: 180px; visibility: hidden; font: 13px/1.3 'IBM Plex Mono', monospace; text-shadow: 0 2px 4px #000; pointer-events: none; }
.scene-back:focus-visible .scene-back-hint { visibility: visible; }
.quiz-scene .quiz-heading { justify-content: center; text-align: center; padding-top: max(46px, calc(env(safe-area-inset-top) + 44px)); }
.quiz-scene .quiz-heading h2 { max-width: 100%; }
.quiz-actions .quiz-retry:only-child { flex: 0 1 360px; font-size: 16px; }
.is-quiz-finished .quiz-actions { justify-content: center; }
html:lang(ru) .space-landing .request-trigger { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
.quiz-scene [tabindex="-1"]:focus { outline: none; }
.space-landing .quiz-link { width: max-content; max-width: calc(100% - 28px); display: flex; gap: 14px; padding: 0 10px; }
.space-landing .quiz-link .quiz-link-hint { position: static; transform: none; visibility: visible; font-size: 13px; }
.space-landing .quiz-link::after { flex-shrink: 0; width: 12px; height: 12px; }
@media (hover: hover) {
  .scene-back:hover .scene-back-hint { visibility: visible; }
  .space-landing .request-trigger:hover, .quiz-action:not(.quiz-secondary):not(:disabled):hover { background: #ffda8a; border-color: #ffda8a; }
  .mobile-island-tour:hover, .quiz-secondary:hover { background: #142b35; border-color: #7ee7ff; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .quiz-scene .cockpit-lights { display: none; }
  .space-landing .proposition { top: max(18px, env(safe-area-inset-top)); left: 18px; right: 18px; width: auto; padding-right: 42px; }
  .space-landing .proposition h1 { font-size: clamp(21px, 5.7vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
  .space-landing .proposition p { font-size: clamp(16px, 4.1vw, 22px); line-height: 1.4; margin-top: 12px; max-width: 30ch; }
  .space-landing .proposition::before { inset: -28px -32px -16px; background: linear-gradient(#02080ddd, #02080d99 58%, transparent); }
  .space-landing .request-trigger, .mobile-island-tour {
    right: max(14px, env(safe-area-inset-right));
    width: min(320px, calc(100% - max(14px, env(safe-area-inset-right)) - max(14px, env(safe-area-inset-left))));
    min-height: 48px;
    padding: 9px 10px;
    font-size: clamp(12px, 3.3vw, 15px);
  }
  .space-landing .request-trigger { bottom: max(65px, calc(env(safe-area-inset-bottom) + 49px)); font-size: 16px; line-height: 1.3; }
  .mobile-island-tour { bottom: max(125px, calc(env(safe-area-inset-bottom) + 109px)); }
  .space-landing .quiz-link { width: max-content; max-width: calc(100% - 28px); display: flex; gap: 14px; padding: 0 10px; }
  .space-landing .quiz-link .quiz-link-hint { position: static; transform: none; visibility: visible; font-size: 13px; }
  .space-landing .quiz-link::after { flex-shrink: 0; width: 12px; height: 12px; }
  .quiz-scene { --monitor-left: 6%; --monitor-width: 88%; --monitor-top: 41%; --monitor-height: 54%; }
  .quiz-scene .cockpit-background {
    left: calc(var(--monitor-left) - var(--monitor-width) * .24367);
    top: calc(var(--monitor-top) - var(--monitor-height) * 1.1326);
    width: calc(var(--monitor-width) * 1.48892);
    height: calc(var(--monitor-height) * 2.60842);
  }
  .quiz-heading { padding: max(18px, env(safe-area-inset-top)) 6% 0; }
  .quiz-heading h2 { max-width: 82%; font-size: clamp(21px, 5.5vw, 30px); line-height: 1.2; }
  /* English is wider in Space Mono. Keep the Russian line box so switching
     locale never takes space away from the kitten below the heading. */
  html:lang(en) .quiz-scene .quiz-heading h2 {
    font-size: clamp(16px, 4.8vw, 30px);
    line-height: calc(clamp(21px, 5.5vw, 30px) * 1.2);
    white-space: nowrap;
  }
  .quiz-scene .quiz-companion {
    /* Enlarge the entire idle/video box, bounded by the real window opening.
       Use dvh rather than percentages: width percentages use the horizontal axis. */
    --companion-window-bottom: 41dvh;
    top: calc(var(--quiz-header-height, 80px) + 8px);
    right: 6%;
    width: min(58.5vw, 34.5dvh, 315px, max(0px, calc(var(--companion-window-bottom) - var(--quiz-header-height, 80px) - 16px)));
  }
  .quiz-scene .quiz-console { padding: 16px 13px; border-radius: 18px; }
  .quiz-stats { font-size: 11px; gap: 2px 6px; flex-wrap: nowrap; }
  .quiz-console #quiz-progress { margin: 7px 0 10px; }
  .quiz-question { font-size: clamp(18px, 4.7vw, 23px); margin-bottom: 12px; }
  .quiz-answer { padding: 9px 10px; min-height: 46px; }
  .quiz-feedback strong { font-size: 17px; margin-bottom: 10px; }
  .quiz-actions { padding-top: 9px; gap: 8px; }
  .quiz-actions .quiz-action { font-size: 12px; min-height: 48px; }
  .quiz-result .quiz-result-score { font-size: clamp(28px, 8vw, 42px); }
}
@media (max-width: 900px) and (orientation: portrait) and (max-height: 690px) {
  .quiz-scene { --monitor-left: 3%; --monitor-width: 94%; --monitor-top: 32%; --monitor-height: calc(68% - max(4%, env(safe-area-inset-bottom))); }
  .quiz-heading { padding-top: max(10px, env(safe-area-inset-top)); }
  .quiz-heading h2 { font-size: 20px; }
  html:lang(en) .quiz-scene .quiz-heading h2 { font-size: clamp(16px, 4.8vw, 20px); line-height: 24px; }
  .quiz-scene .quiz-console { padding: 10px 11px; }
  .quiz-scene .quiz-companion { --companion-window-bottom: 32dvh; }
  .quiz-question { font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
  .quiz-answer { min-height: 44px; padding: 7px 8px; }
  .quiz-answers { gap: 5px; }
}
@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  .space-landing .proposition { left: 44%; right: 58px; top: max(10px, env(safe-area-inset-top)); width: auto; }
  .space-landing .proposition h1 { font-size: clamp(18px, 2.65vw, 27px); line-height: 1.15; }
  .space-landing .proposition p { font-size: 16px; margin-top: 8px; line-height: 1.35; }
  .space-landing .request-trigger, .mobile-island-tour { width: 27%; min-height: 44px; font-size: 12px; padding: 6px 10px; }
  .space-landing .request-trigger { font-size: 16px; }
  .scene-back { left: 50%; }
  .mobile-island-tour { right: calc(27% + 22px); }
  .quiz-scene {
    --monitor-left: max(8%, env(safe-area-inset-left));
    --monitor-width: calc(100% - max(8%, env(safe-area-inset-left)) - max(8%, env(safe-area-inset-right)));
    --monitor-top: 32%;
    --monitor-height: calc(68% - max(10px, env(safe-area-inset-bottom)));
  }
  .quiz-scene .quiz-heading { padding: max(8px, env(safe-area-inset-top)) max(64px, env(safe-area-inset-right)) 0; width: 100%; }
  .quiz-scene .scene-back { left: max(28px, calc(env(safe-area-inset-left) + 24px)); }
  .quiz-scene .cockpit-lights { display: none; }
  .quiz-heading h2 { max-width: 100%; font-size: clamp(16px, 2vw, 21px); }
  .quiz-scene .quiz-companion { top: calc(var(--quiz-header-height, 30px) + 2px); bottom: auto; right: max(2%, env(safe-area-inset-right)); width: min(15vw, calc(32dvh - var(--quiz-header-height, 30px) - 8px)); }
  .quiz-scene .quiz-console { padding: 8px 14px; border-radius: 18px; }
  .quiz-stats { font-size: 11px; }
  .quiz-question { font-size: 17px; line-height: 1.25; margin-bottom: 8px; }
  .quiz-console #quiz-progress { margin: 4px 0 5px; }
  .quiz-answer { min-height: 44px; padding: 6px 8px; }
  .quiz-feedback { font-size: 16px; line-height: 1.4; }
  .quiz-feedback strong { font-size: 17px; margin-bottom: 8px; }
  .quiz-actions { padding-top: 6px; }
  .quiz-actions .quiz-action { min-height: 44px; }
  .quiz-result { padding-top: 0; }
  .quiz-result h3 { font-size: 20px; margin-bottom: 4px; }
  .quiz-result .quiz-result-score { font-size: 30px; margin: 6px 0; }
}

/* Do not expose cockpit pixels underneath iPhone's floating browser chrome
   while the hero is at rest. Opacity preserves geometry and cannot be undone
   by descendant visibility rules. Navigation/focus reveals the whole quiz. */
html.is-iphone.is-hero-resting #quiz { opacity: 0; pointer-events: none; }

/* Keep the controls above browser chrome without the previous artificial
   48px extension, which did not prevent WebKit painting the next section. */
@supports (height: 100lvh) {
  @media (max-width: 1100px) {
    html.is-iphone #scene {
      --iphone-hero-height: max(100lvh, 100dvh);
      --iphone-controls-lift: calc(max(0px, 100lvh - 100dvh) + 16px);
      height: var(--iphone-hero-height);
      min-height: 0;
    }
    html.is-iphone #scene .hero-fallback,
    html.is-iphone #scene .hero-motion-video { object-fit: cover; }
    html.is-iphone #scene .request-trigger {
      bottom: calc(max(65px, env(safe-area-inset-bottom) + 49px) + var(--iphone-controls-lift));
    }
    html.is-iphone #scene .mobile-island-tour {
      bottom: calc(max(125px, env(safe-area-inset-bottom) + 109px) + var(--iphone-controls-lift));
    }
    html.is-iphone #scene .quiz-link {
      bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--iphone-controls-lift));
    }
  }
  @media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
    html.is-iphone #scene .request-trigger,
    html.is-iphone #scene .mobile-island-tour {
      bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--iphone-controls-lift));
    }
  }
}