/* Scolaxy envelope for its Kaï runtime. Load after the scoped game CSS. */
.demo-page .kai-adventure :is(.adventure-frame, .adventure-hud, #game-tools) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.demo-page .kai-adventure :is(#training-stage, #training-stage canvas, .touch-gamepad) {
  touch-action: none;
  -webkit-user-drag: none;
}
/* A response field remains editable, selectable and scrollable. */
.demo-page .kai-adventure #game-dialog,
.demo-page .kai-adventure #game-dialog :is(input, textarea, [contenteditable]) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}
.demo-page {
  width: min(1280px, calc(100% - 64px));
  margin-inline: auto;
  padding-block: 6px 30px;
  color: #090e55;
}
.demo-page .kai-adventure {
  --navy: #090e55;
  --panel: #fff;
  --line: #d7e0ff;
  --muted: #64719d;
  --cyan: #001bff;
  --coral: #db3347;
  --gold: #ffc72e;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  position: relative;
  min-width: 0;
  color: var(--navy);
  background: #fff;
  font-family: 'Inter', Arial, sans-serif;
  color-scheme: light;
}
.demo-page .kai-adventure .preview-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.demo-page .demo-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-bottom: 0;
  color: #001bff;
  font-size: 14px;
  font-weight: 600;
}
.demo-page .demo-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.demo-page .demo-back :is(svg, .icon) { width: 19px; height: 19px; }
.demo-page .kai-adventure .intro-row {
  position: static;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}
.demo-page .kai-adventure .preview-intro {
  display: block;
  min-width: 0;
}
.demo-page .kai-adventure .preview-intro .adventure-eyebrow,
.demo-page .kai-adventure .preview-intro .demo-eyebrow,
.demo-page .demo-eyebrow {
  margin: 0 0 10px;
  color: #001bff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.demo-page .kai-adventure .preview-intro h1 {
  max-width: none;
  margin: 0;
  color: #090e55;
  font: 800 clamp(37px, 3.5vw, 44px)/1.02 var(--display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.demo-page .kai-adventure .preview-intro h1 em { color: inherit; }
.demo-page .kai-adventure .preview-intro p:not(.demo-eyebrow):not(.adventure-eyebrow) {
  margin: 7px 0 0;
  color: #090e55;
  font-size: 16px;
  line-height: 1.5;
}
.demo-page .kai-adventure #zone-label { display: none; }
.demo-page .kai-adventure .preview-tools { flex: 0 0 auto; gap: 10px; }
.demo-page .kai-adventure .tool-button {
  min-width: 44px;
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid #b9c8ff;
  border-radius: 11px;
  background: #fff;
  color: #090e55;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}
.demo-page .kai-adventure .tool-button:hover:not(:disabled) {
  border-color: #001bff;
  background: #f3f7ff;
}
.demo-page .kai-adventure #demo-fullscreen {
  border-color: #001bff;
  background: #001bff;
  color: #fff;
}
.demo-page .kai-adventure #demo-fullscreen:hover { background: #0020de; }
.demo-page .kai-adventure #sound-button[aria-pressed='false'] { color: #64719d; }
.demo-page .kai-adventure .adventure-hud {
  position: relative;
  min-height: 60px;
  gap: 24px;
  margin-bottom: -1px;
  padding: 12px 22px;
  border: 1px solid #d7e0ff;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #fff;
}
.demo-page .kai-adventure .hearts { gap: 9px; }
.demo-page .kai-adventure .hearts svg { width: 27px; height: 27px; }
.demo-page .kai-adventure .hearts .empty { color: #dce2f1; }
.demo-page .kai-adventure .journey { min-width: 0; max-width: 320px; }
.demo-page .kai-adventure .journey span {
  margin-bottom: 6px;
  color: #090e55;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}
.demo-page .kai-adventure .journey progress { height: 5px; background: #dce5fb; }
.demo-page .kai-adventure .journey progress::-webkit-progress-bar { background: #dce5fb; }
.demo-page .kai-adventure .journey progress::-webkit-progress-value { background: #001bff; }
.demo-page .kai-adventure .journey progress::-moz-progress-bar { background: #001bff; }
.demo-page .kai-adventure .orb-count { gap: 8px; color: #b52335; font-size: 20px; }
.demo-page .kai-adventure .orb-count img { width: 29px; height: 29px; object-fit: contain; }
.demo-page .kai-adventure .orb-label { color: #090e55; font-size: 12px; font-weight: 400; }
.demo-page .kai-adventure .stage-frame {
  border: 1px solid #001bff;
  border-radius: 16px;
  background: #a0dbe4;
  box-shadow: none;
}
.demo-page .kai-adventure .adventure-frame #training-stage {
  height: auto;
  aspect-ratio: 2.4;
  min-height: 340px;
  max-height: 640px;
}
.demo-page .kai-adventure .bot-dialogue {
  padding: 11px 14px;
  border-color: #090e55;
  background: #fff;
  color: #090e55;
  box-shadow: 0 3px 0 #090e551c;
}
.demo-page .kai-adventure .bot-dialogue::after {
  border-color: #090e55;
  background: #fff;
}
.demo-page .kai-adventure .bot-dialogue b { color: #4d5985; }
.demo-page .kai-adventure .bot-dialogue small { color: #4d5985; }
.demo-page .kai-adventure .controls-row { margin-top: 16px; gap: 18px; }
.demo-page .kai-adventure :is(.direction-controls, .action-controls) { gap: 14px; }
.demo-page .kai-adventure .move-button {
  min-height: 78px;
  padding: 12px 23px;
  border: 1px solid #829dff;
  border-radius: 12px;
  background: #fff;
  color: #090e55;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}
.demo-page .kai-adventure .direction-button { width: 82px; padding: 10px; }
.demo-page .kai-adventure .move-button kbd { font-size: 11px; font-weight: 400; opacity: 1; color: #4d5985; }
.demo-page .kai-adventure .attack-button { border-color: #db3347; color: #c62539; background: #fffafa; }
.demo-page .kai-adventure .attack-button kbd { color: #b52335; }
.demo-page .kai-adventure .move-button:hover:not(:disabled) { background: #f3f7ff; filter: none; }
.demo-page .kai-adventure .move-button.is-pressed { background: #e6edff; transform: translateY(2px); box-shadow: none; filter: none; }
.demo-page .kai-adventure .attack-button.is-pressed { background: #fff0f2; }
.demo-page .kai-adventure .move-button.is-guided { outline-color: #001bff; }
.demo-page .kai-adventure .control-help { gap: 12px; color: #4d5985; font-size: 13px; }
.demo-page .kai-adventure .control-help svg { width: 24px; height: 24px; color: #090e55; }
.demo-page .kai-adventure .control-help strong { color: #4d5985; font-size: 10px; }
.demo-page .kai-adventure .rules-note { margin-top: 16px; color: #4d5985; font-size: 12px; }
.demo-page .kai-adventure :is(button, a, input, [tabindex]):focus-visible {
  outline: 3px solid #eaaa00;
  outline-offset: 4px;
}
.demo-page .kai-adventure .demo-mobile-back { display: none; }

/* Existing encounters and lessons keep their original state and semantics. */
.demo-page .kai-adventure .enemy-meter {
  border-color: #acbaff;
  background: #fffffff2;
  color: #090e55;
  box-shadow: 0 3px 10px #090e5512;
}
.demo-page .kai-adventure #enemy-life i { background: #e2e7f8; }
.demo-page .kai-adventure #enemy-life .remaining { background: #001bff; box-shadow: none; }
.demo-page .kai-adventure #shield-status { color: #4d5985; }
.demo-page .kai-adventure .enemy-meter.is-open { border-color: #079b73; background: #edfff8f5; }
.demo-page .kai-adventure .enemy-meter.is-open #shield-status { color: #08674f; }
.demo-page .kai-adventure .challenge-button {
  min-height: 48px;
  border-color: #001bff;
  background: #001bff;
  color: #fff;
  box-shadow: 0 3px 0 #090e5550;
}
.demo-page .kai-adventure .challenge-button:hover { background: #0020de; }
.demo-page .kai-adventure .challenge-button kbd { border-color: #ffffff80; }
.demo-page .kai-adventure .game-dialog {
  z-index: 100;
  max-height: 100dvh;
  background: #090e558a;
  backdrop-filter: blur(5px);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.demo-page .kai-adventure .game-panel {
  flex-shrink: 0;
  padding: 30px 34px;
  border: 1px solid #d7e0ff;
  border-radius: 24px;
  background: #fff;
  color: #090e55;
  box-shadow: 0 24px 90px #0007463d;
}
.demo-page .kai-adventure .game-panel h2 {
  margin: 9px 0 17px;
  color: #090e55;
  font: 800 clamp(30px, 4vw, 43px)/1.04 var(--display);
  letter-spacing: -.015em;
}
.demo-page .kai-adventure .game-panel > p { color: #4d5985; font-size: 14px; }
.demo-page .kai-adventure .game-panel strong { color: #090e55; }
.demo-page .kai-adventure .game-panel .eyebrow { color: #001bff; font-size: 11px; letter-spacing: .04em; }
.demo-page .kai-adventure .panel-symbol { border-color: #d7e0ff; background: #f3f7ff; color: #001bff; }
.demo-page .kai-adventure .panel-symbol.success { color: #087557; background: #ecfaf5; border-color: #b6e5d5; }
.demo-page .kai-adventure .panel-symbol.defeat { color: #bd2338; background: #fff2f3; border-color: #f3c0c7; }
.demo-page .kai-adventure #question-content { border-color: #d7e0ff; background: #f3f7ff; }
.demo-page .kai-adventure :is(.verb-label, .answer-blank) { color: #001bff; }
.demo-page .kai-adventure .verb-label small { color: #64719d; }
.demo-page .kai-adventure .question-stem { color: #090e55; }
.demo-page .kai-adventure .answer-blank { border-color: #829dff; }
.demo-page .kai-adventure :is(.question-after, .challenge-note) { color: #4d5985; }
.demo-page .kai-adventure .answer-choice {
  min-height: 52px;
  border-color: #b7c7ff;
  background: #fff;
  color: #090e55;
  font-size: 16px;
}
.demo-page .kai-adventure .answer-choice:hover,
.demo-page .kai-adventure .answer-choice:focus-visible { border-color: #001bff; background: #edf2ff; }
.demo-page .kai-adventure .primary-button {
  min-height: 48px;
  border-color: #001bff;
  border-radius: 12px;
  background: #001bff;
  color: #fff;
  box-shadow: 0 5px 16px #001bff12;
  font-size: 14px;
  font-weight: 600;
}
.demo-page .kai-adventure .primary-button:hover { background: #0020de; }
.demo-page .kai-adventure .answer-label { color: #090e55; font-size: 13px; }
.demo-page .kai-adventure .game-panel input {
  min-height: 50px;
  border-color: #a1b6f3;
  background: #fff;
  color: #090e55;
  font-size: 18px;
  scroll-margin-block: 24px;
}
.demo-page .kai-adventure .game-panel input::placeholder { color: #64719d; font-weight: 400; }
.demo-page .kai-adventure .question-hint { color: #2c4281; background: #edf3ff; font-size: 13px; }
.demo-page .kai-adventure .game-panel .panel-footnote { display: block; color: #64719d; font-size: 12px; }
.demo-page .kai-adventure .lesson-rule { border-color: #d7e0ff; background: #f3f7ff; }
.demo-page .kai-adventure .lesson-rule b { color: #001bff; }
.demo-page .kai-adventure .lesson-rule p { color: #2f3d70; }
.demo-page .kai-adventure .endings span { background: #f3f7ff; color: #4d5985; font-size: 12px; }
.demo-page .kai-adventure .endings b { color: #001bff; }
.demo-page .kai-adventure .game-panel .taunt { color: #bd2338; }
.demo-page .kai-adventure .end-actions button { background: #fff; color: #090e55; border-color: #b7c7ff; box-shadow: none; }
.demo-page .kai-adventure .game-panel .final-score { color: #4d5985; }
.demo-page .kai-adventure .final-score strong { color: #a86b00; font-size: 72px; }
.demo-page .kai-adventure .score-details div { background: #f3f7ff; }
.demo-page .kai-adventure .score-details dt { color: #4d5985; font-size: 11px; }
.demo-page .kai-adventure .score-details dd { color: #090e55; }
.demo-page .kai-adventure .share-button { background: #087d57; border-color: #087d57; color: #fff; box-shadow: none; }
.demo-page .kai-adventure .share-button:hover { background: #066447; }
.demo-page .kai-adventure .victory-panel > #restart-button { color: #001bff; background: #fff; border-color: #b7c7ff; box-shadow: none; }
.demo-page .kai-adventure .victory-return { display: inline-flex; align-items: center; min-height: 44px; color: #001bff; text-decoration: underline; text-underline-offset: 4px; }

/* Orientation prompt uses the real BOT-01 asset and a library rotation icon. */
.demo-page .kai-adventure #demo-fullscreen :is(.enter-fullscreen-icon, .exit-fullscreen-icon):not([hidden]) { display: inline-flex; }
.demo-page .kai-adventure #demo-fullscreen .icon { display: inline-block; }
.demo-page .demo-orientation {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 0 38px;
  color: #090e55;
  text-align: center;
}
.demo-page .orientation-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  margin: 5px -10px 14px;
  background: radial-gradient(ellipse at center, #e1edff 0%, #f3f8ff 48%, #fff0 74%);
}
.demo-page .orientation-art img { width: 44%; max-width: 185px; height: auto; object-fit: contain; }
.demo-page .orientation-art > :is(.orientation-icon, .icon, svg) {
  display: block;
  width: 43%;
  height: 130px;
  max-width: 175px;
  color: #001bff;
  flex-shrink: 0;
}
.demo-page .orientation-icon :is(svg, .icon) { width: 100%; height: 100%; }
.demo-page .demo-orientation h2 {
  max-width: 380px;
  margin: 0 auto 18px;
  color: #090e55;
  font: 800 clamp(42px, 10vw, 60px)/1.04 'Barlow Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.demo-page .demo-orientation p { color: #4d5985; font-size: 16px; line-height: 1.7; }
.demo-page .demo-orientation p + p { margin-top: 3px; color: #64719d; }
.demo-page .demo-orientation .button { margin-top: 24px; color: #001bff; border-color: #001bff; }
body.demo-portrait .demo-page .kai-adventure :is(.adventure-hud, .adventure-frame, #game-tools, #motion-controls, .rules-note) { display: none; }
body.demo-portrait .demo-page .demo-back { display: none; }
body.demo-portrait .demo-page .kai-adventure .intro-row { margin-bottom: 0; }

@media (max-width: 1100px) {
  .demo-page .kai-adventure .tool-button { padding-inline: 11px; }
  .demo-page .kai-adventure .preview-tools { gap: 7px; }
  .demo-page .kai-adventure .preview-intro h1 { font-size: 42px; }
  .demo-page .kai-adventure .preview-intro p:not(.demo-eyebrow):not(.adventure-eyebrow) { font-size: 14px; }
  .demo-page .kai-adventure .move-button { min-height: 68px; }
  .demo-page .kai-adventure .direction-button { width: 72px; }
}
@media (max-width: 900px) {
  .demo-page .kai-adventure .intro-row { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .demo-page .kai-adventure .control-help { display: none; }
  .demo-page .kai-adventure .adventure-frame #training-stage { aspect-ratio: 2; min-height: 300px; }
}
@media (max-width: 540px) {
  .demo-page { width: calc(100% - 40px); padding-top: 22px; padding-bottom: 8px; }
  .demo-page .kai-adventure .preview-tools { max-width: 100%; flex-wrap: wrap; }
  .demo-page .kai-adventure .controls-row { flex-wrap: wrap; row-gap: 12px; }
  .demo-page .kai-adventure :is(.direction-controls, .action-controls) { max-width: 100%; flex-wrap: wrap; }
  .demo-page .kai-adventure .move-button { padding-inline: 14px; font-size: 14px; }
  .demo-page .kai-adventure .preview-intro h1 { font-size: clamp(34px, 9.1vw, 43px); }
  .demo-page .kai-adventure .preview-intro p:not(.demo-eyebrow):not(.adventure-eyebrow) { max-width: 320px; margin-top: 10px; color: #4d5985; font-size: 16px; line-height: 1.55; }
  .demo-page .kai-adventure .preview-intro :is(.demo-eyebrow, .adventure-eyebrow) { font-size: 12px; margin-bottom: 13px; }
  .demo-page .demo-orientation { padding-block: 14px 35px; }
  .demo-page .orientation-art { min-height: 210px; margin-block: 0 8px; }
  .demo-page .demo-orientation h2 { max-width: 290px; font-size: clamp(41px, 12vw, 54px); }
  .demo-page .kai-adventure .game-panel { padding: 24px 20px; }
  .demo-page .kai-adventure .game-panel h2 { font-size: 34px; }
  .demo-page .kai-adventure .score-details { gap: 6px; grid-template-columns: repeat(2, 1fr); }
  .demo-page .kai-adventure .write-answer { gap: 8px; }
  .demo-page .kai-adventure .write-answer .primary-button { padding-inline: 13px; }
}

/* The host enables immersive mode only during active landscape play. */
body.demo-immersive { overflow: hidden; overscroll-behavior: none; }
body.demo-immersive :is(.site-header, .site-footer) { display: none; }
body.demo-immersive .demo-page {
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
body.demo-immersive .demo-page::backdrop { background: #fff; }
/* A single envelope follows visualViewport through the software keyboard.
   Its descendants share local coordinates instead of nested fixed layers. */
body.demo-immersive .demo-page[data-viewport-managed] { position: absolute; }
body.demo-immersive .demo-page[data-viewport-managed] .kai-adventure { position: absolute; height: 100%; }
body.demo-immersive .demo-page[data-viewport-managed] .kai-adventure .adventure-main > section,
body.demo-immersive .demo-page[data-viewport-managed] .kai-adventure .stage-frame,
body.demo-immersive .demo-page[data-viewport-managed] .kai-adventure .adventure-frame #training-stage { height: 100%; }
body.demo-immersive .demo-page[data-viewport-managed] .game-dialog { position: absolute; max-height: 100%; }
body.demo-immersive .demo-page .kai-adventure {
  --demo-hud-height: calc(44px + env(safe-area-inset-top, 0px));
  position: fixed;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100dvh;
  background: #fff;
}
body.demo-immersive .demo-page :is(.demo-back, .demo-orientation) { display: none; }
body.demo-immersive .demo-page .kai-adventure :is(.preview-intro, .rules-note, .control-help) { display: none; }
body.demo-immersive .demo-page .kai-adventure .intro-row { margin: 0; }
body.demo-immersive .demo-page .kai-adventure .preview-main { height: 100%; padding: 0; }
body.demo-immersive .demo-page .kai-adventure .adventure-hud {
  position: absolute;
  z-index: 18;
  inset: 0 0 auto;
  height: var(--demo-hud-height);
  min-height: var(--demo-hud-height);
  gap: clamp(10px, 2.8vw, 24px);
  margin: 0;
  padding: env(safe-area-inset-top, 0px) calc(158px + env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
  background: #f3f7ffd9;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
body.demo-immersive .demo-page .kai-adventure .demo-mobile-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #001bff;
  pointer-events: auto;
}
body.demo-immersive .demo-page .kai-adventure .demo-mobile-back :is(svg, .icon) { width: 26px; height: 26px; }
body.demo-immersive .demo-page .kai-adventure .hearts { flex-shrink: 0; gap: 5px; }
body.demo-immersive .demo-page .kai-adventure .hearts svg { width: 22px; height: 22px; }
body.demo-immersive .demo-page .kai-adventure .journey { flex: 1; max-width: 330px; }
body.demo-immersive .demo-page .kai-adventure .journey span { margin-bottom: 4px; font-size: 11px; font-weight: 700; }
body.demo-immersive .demo-page .kai-adventure .journey progress { height: 4px; }
body.demo-immersive .demo-page .kai-adventure .orb-count { gap: 6px; color: #090e55; font-size: 16px; }
body.demo-immersive .demo-page .kai-adventure .orb-count img { width: 23px; height: 23px; }
body.demo-immersive .demo-page .kai-adventure .orb-label { display: none; }
body.demo-immersive .demo-page .kai-adventure #game-tools {
  position: absolute;
  z-index: 20;
  top: env(safe-area-inset-top, 0px);
  right: max(12px, env(safe-area-inset-right, 0px));
  height: 44px;
  gap: 3px;
}
body.demo-immersive .demo-page .kai-adventure #game-tools .tool-button {
  width: 44px;
  min-height: 44px;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #090e55;
}
body.demo-immersive .demo-page .kai-adventure #game-tools .tool-button:hover { background: #e2eaff; }
body.demo-immersive .demo-page .kai-adventure #game-tools .tool-button > span:not(.enter-fullscreen-icon):not(.exit-fullscreen-icon),
body.demo-immersive .demo-page .kai-adventure #game-tools #reset-button { display: none; }
body.demo-immersive .demo-page .kai-adventure #game-tools .tool-button :is(svg, .icon) { width: 25px; height: 25px; }
body.demo-immersive .demo-page .kai-adventure .stage-frame {
  width: 100%;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.demo-immersive .demo-page .kai-adventure .adventure-frame #training-stage {
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}
body.demo-immersive .demo-page .kai-adventure .bot-dialogue { max-width: 210px; padding: 9px 12px; border-radius: 14px; }
body.demo-immersive .demo-page .kai-adventure .bot-dialogue p { font-size: 13px; }
body.demo-immersive .demo-page .kai-adventure .bot-dialogue small { display: none; }
body.demo-immersive .demo-page .kai-adventure .enemy-meter { top: calc(var(--demo-hud-height) + 10px); bottom: auto; right: max(12px, env(safe-area-inset-right, 0px)); min-width: 155px; padding: 8px 10px; }
body.demo-immersive .demo-page .kai-adventure .challenge-button { top: calc(var(--demo-hud-height) + 98px); right: max(12px, env(safe-area-inset-right, 0px)); min-height: 48px; padding: 10px 12px; font-size: 12px; }
body.demo-immersive .demo-page .kai-adventure .challenge-button :is(kbd, small) { display: none; }
body.demo-immersive .demo-page .kai-adventure .opening-clock { top: calc(var(--demo-hud-height) + 99px); right: max(30px, env(safe-area-inset-right, 0px)); }

/* Native dialog stays above the immersive canvas and can scroll on short screens. */
.demo-page .demo-fullscreen-help {
  width: min(480px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: auto;
  padding: 22px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #b7c7ff;
  border-radius: 18px;
  background: #fff;
  color: #090e55;
  box-shadow: 0 24px 90px #0007463d;
  font-family: 'Inter', Arial, sans-serif;
}
.demo-page .demo-fullscreen-help::backdrop { background: #090e558a; backdrop-filter: blur(5px); }
.demo-page .demo-fullscreen-help h2 { margin: 0 0 12px; font: 700 30px/1.05 'Barlow Condensed', 'Arial Narrow', sans-serif; }
.demo-page .demo-fullscreen-help p,
.demo-page .demo-fullscreen-help li { font-size: 14px; line-height: 1.5; }
.demo-page .demo-fullscreen-help p { margin: 12px 0; }
.demo-page .demo-fullscreen-help ol { margin: 12px 0; padding-left: 22px; }
.demo-page .demo-fullscreen-help li + li { margin-top: 8px; }
.demo-page .demo-fullscreen-help button { min-height: 44px; margin-top: 4px; padding: 10px 18px; border: 0; border-radius: 9px; background: #001bff; color: #fff; font: 600 14px/1.4 'Inter', Arial, sans-serif; }
.demo-page .demo-fullscreen-help button:focus-visible { outline: 3px solid #001bff; outline-offset: 4px; }

/* Keep all learning text reachable even with a short screen or software keyboard. */
@media (max-height: 540px) and (orientation: landscape) {
  .demo-page .kai-adventure .game-dialog { align-items: flex-start; padding: max(12px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); }
  .demo-page .kai-adventure .game-panel { width: min(100%, 650px); margin-block: auto; padding: 20px 26px; }
  .demo-page .kai-adventure .game-panel h2 { margin-block: 7px 12px; font-size: 31px; }
  .demo-page .kai-adventure .game-panel .panel-intro { display: block; font-size: 12px; }
  .demo-page .kai-adventure .game-panel .panel-footnote { display: block; font-size: 11px; }
  .demo-page .kai-adventure .question-stem { font-size: 25px; }
  .demo-page .kai-adventure .question-hint { font-size: 12px; }
  .demo-page .kai-adventure .answer-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-page .kai-adventure .answer-choice { min-height: 48px; font-size: 15px; }
  .demo-page .kai-adventure .primary-button { min-height: 48px; }
  .demo-page .kai-adventure .game-panel input { font-size: 18px; }
}
@media (max-width: 700px) and (orientation: landscape) {
  body.demo-immersive .demo-page .kai-adventure .adventure-hud { gap: 10px; padding-left: max(4px, env(safe-area-inset-left, 0px)); padding-right: calc(142px + env(safe-area-inset-right, 0px)); }
  body.demo-immersive .demo-page .kai-adventure #game-tools { right: max(4px, env(safe-area-inset-right, 0px)); gap: 1px; }
  body.demo-immersive .demo-page .kai-adventure .hearts { gap: 3px; }
  body.demo-immersive .demo-page .kai-adventure .hearts svg { width: 19px; height: 19px; }
  body.demo-immersive .demo-page .kai-adventure .journey span { font-size: 10px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  body.demo-immersive .demo-page .kai-adventure .enemy-meter { left: 50%; right: auto; top: calc(var(--demo-hud-height) + 6px); min-width: 148px; padding: 5px 9px; transform: translateX(-50%); }
  body.demo-immersive .demo-page .kai-adventure .enemy-meter > span { font-size: 14px; }
  body.demo-immersive .demo-page .kai-adventure #enemy-life { margin-block: 4px; }
  body.demo-immersive .demo-page .kai-adventure #shield-status { font-size: 8px; }
  body.demo-immersive .demo-page .kai-adventure .challenge-button { left: 50%; right: auto; top: calc(var(--demo-hud-height) + 72px); min-height: 44px; padding: 7px 11px; transform: translateX(-50%); }
  body.demo-immersive .demo-page .kai-adventure .opening-clock { left: 50%; right: auto; top: calc(var(--demo-hud-height) + 72px); transform: translateX(-50%); }
  .demo-page .demo-fullscreen-help { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-page *, .demo-page *::before, .demo-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The shared course lesson stays readable while the canvas prepares behind it. */
.demo-page .kai-adventure[data-preparing="true"] .game-dialog { background: #f3f7ff; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
.demo-page .kai-adventure[data-preparing="true"] :is(.adventure-hud, #game-tools, #motion-controls, .bot-dialogue, .enemy-meter, .challenge-button) { visibility: hidden; pointer-events: none; }
.demo-page .kai-adventure .game-panel.loading-panel { box-shadow: 0 8px 30px #090e550d; }
.demo-page .kai-adventure .loading-heading > p { color: #4d5985; }
.demo-page .kai-adventure .loading-panel .lesson-tabs button { color: #090e55; border-color: #b7c7ff; background: #fff; }
.demo-page .kai-adventure .loading-panel .lesson-tabs button[aria-pressed="true"] { color: #fff; border-color: #001bff; background: #001bff; }
.demo-page .kai-adventure .loading-footer { border-color: #d7e0ff; }
.demo-page .kai-adventure .loading-progress { color: #4d5985; }
.demo-page .kai-adventure .loading-progress progress { color: #001bff; background: #e2eaff; accent-color: #001bff; }
.demo-page .kai-adventure .loading-progress progress::-webkit-progress-bar { background: #e2eaff; }
.demo-page .kai-adventure .loading-progress progress::-webkit-progress-value { background: #001bff; }
.demo-page .kai-adventure .loading-progress progress::-moz-progress-bar { background: #001bff; }
.demo-page .kai-adventure .loading-return { color: #001bff; }
.demo-page .kai-adventure .loading-actions .primary-button:disabled { border-color: #c6d2f7; background: #dfe7fb; color: #57668d; box-shadow: none; opacity: 1; }