/* Phone layout: natural page scrolling, compact setup and a chat-shaped device. */
.mobile-scene { display: none; }
#agentSetup form > .primary { min-height: 56px; font-size: 20px; font-weight: 750; line-height: 1.2; text-transform: uppercase; letter-spacing: .3px; }
/* The host identifies a horizontal phone; desktop keeps its original HUD. */
.phone-landscape body:not(.scene-review) .game { grid-template-columns: 176px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
.phone-landscape .game > .hud { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px; height: 100%; min-height: 0; padding: 16px 12px; }
.phone-landscape .game > .play-layout { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
.phone-landscape .hud .agent-info { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 0; text-align: center; }
.phone-landscape .hud .agent-portrait { width: 48px; height: 48px; }
.phone-landscape .hud .agent-caption { display: block; min-width: 0; }
.phone-landscape .hud .agent-caption small { font-size: 10px; }
.phone-landscape .hud .agent-caption b { font-size: 12px; white-space: normal; }
.phone-landscape .hud .agent-info .shift { display: none; }
.phone-landscape .hud .stats { display: flex; flex: 1; flex-direction: column; justify-content: space-around; align-items: stretch; width: 100%; min-width: 0; gap: 18px; }
.phone-landscape .hud .stat { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.phone-landscape .hud .stat > span { grid-column: 1; grid-row: auto; font-size: 11px; line-height: 1.3; }
.phone-landscape .hud .stat > b { grid-column: 1; grid-row: auto; font-size: 24px; text-align: left; }
.phone-landscape .hud .stat > div { grid-column: 1; }
.phone-landscape .hud .stat-help { font-size: 9px; line-height: 1.3; white-space: normal; }
@media (max-width: 700px) {
  html, body { height: auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
  body { display: flow-root; background: #103762; }
  body:not(.scene-review) .game, .game .laptop, .game .laptop .phone, .game .laptop .phone-header, .game .laptop .phone-content { background: #103762; }
  body.agent-setup-open { min-height: 100dvh; display: flex; align-items: center; }
  body.agent-setup-open .game { display: none !important; }
  #agentSetup[open] { position: relative; inset: auto; width: calc(100% - 16px); max-width: 520px; height: auto; max-height: none; margin: 8px auto; padding: 14px; overflow: visible; }
  #agentSetup form { grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
  #agentSetup .setup-brand { gap: 8px; }
  #agentSetup .setup-brand h1 { font-size: clamp(22px, 6.5vw, 29px); }
  #agentSetup .setup-academy-logo { width: 76px; }
  #agentSetup .setup-kicker { font-size: 9px; letter-spacing: .7px; }
  #agentSetup .setup-intro h2 { font-size: 18px; margin: 3px 0; }
  #agentSetup .setup-intro p { font-size: 11px; line-height: 1.35; }
  #agentSetup .setup-fields { gap: 5px; }
  #agentSetup .setup-fields > label, #agentSetup legend { font-size: 11px; }
  #agentName { font-size: 16px; min-height: 38px; padding: 6px 10px; }
  #agentSetup .gender-choices { margin-top: 4px; }
  #agentSetup legend { margin-bottom: 5px; }
  #agentSetup .gender-option span { min-height: 36px; padding: 6px; font-size: 12px; }
  #agentSetup .setup-appearance { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); grid-template-areas: 'preview preview' 'hair outfit'; gap: 6px 10px; align-items: start; }
  #agentSetup .agent-setup-preview { grid-area: preview; height: 110px; }
  #agentSetup .avatar-label { display: none; }
  #agentSetup .outfit-label { display: none; }
  #agentSetup .avatar-label, #agentSetup .outfit-label { font-size: 12px; line-height: 1.3; text-align: center; margin: 0; }
  #agentSetup .avatar-choices { grid-area: hair; }
  #agentSetup .outfit-choices { grid-area: outfit; }
  #agentSetup .avatar-choices, #agentSetup .outfit-choices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-content: center; gap: 4px; margin: 0; width: 100%; }
  #agentSetup .avatar-option, #agentSetup .outfit-option { width: 100%; max-width: 40px; height: auto; min-height: 0; aspect-ratio: 1; padding: 2px; justify-self: center; }
  #agentSetup form > .primary { width: 100%; min-height: 56px; font-size: clamp(18px, 4.6vw, 20px); margin-top: 2px; }
  body:not(.scene-review) .game { display: flex; flex-direction: column; height: auto; min-height: var(--mobile-screen-height, 100dvh); padding: 0; gap: 0; }
  body:has(#shiftResult:not([hidden])) .game { min-height: 0; }
  .game .hud { margin: 8px; flex: none; }
  .game .hud { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 7px; }
  .game .agent-info { min-width: 0; width: 30px; padding: 0; }
  .game .agent-portrait { width: 28px; height: 28px; }
  .game .agent-caption, .game .agent-info .shift, .game .stat-help { display: none; }
  .game .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; min-width: 0; }
  .game .stat { min-width: 0; gap: 4px; }
  .game .stat > span { font-size: 0; display: block; min-width: 0; }
  .game .stat > span i { display: block; font-size: clamp(6px, 1.8vw, 8px); line-height: 1.2; font-style: normal; letter-spacing: 0; white-space: nowrap; }
  .game .stat > b { font-size: clamp(11px, 3.2vw, 14px); line-height: 1.1; white-space: nowrap; }
  .game .play-layout, .game .play-layout:has(#feedback:not([hidden])) { display: flex; flex-direction: column; flex: 1; height: auto; min-height: 0; }
  .game .play-layout > .scene-panel { position: absolute; left: -10000px; top: 0; width: 320px; height: 210px; min-height: 0; visibility: hidden; contain: strict; }
  .game .play-layout > .scene-panel #scene { inset: 0; }
  .game .laptop, .game .feedback-in-laptop .laptop, .game .feedback-in-laptop .laptop:has(#feedback:not([hidden])) { display: flex; flex-direction: column; flex: 1; height: auto; min-height: 0; padding: 0; perspective: none; }
  .game .laptop-base { display: none; }
  .game .laptop .phone, .game .feedback-in-laptop .laptop:has(#feedback:not([hidden])) .phone { display: flex; flex-direction: column; flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; padding-bottom: calc(27px + env(safe-area-inset-bottom, 0px)); box-shadow: none; }
  .game .laptop .phone::before { display: none; }
  .game .laptop .phone-hardware { display: none; }
  .game .laptop .phone-island { width: 42px; height: 5px; left: calc(50% - 21px); border-radius: 5px; }
  .game .laptop .phone-header { padding: 10px 12px; }
  .game .laptop .phone-content, .game .feedback-in-laptop .laptop:has(#feedback:not([hidden])) .phone-content { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; flex: 1; overflow: visible; gap: 10px; padding: 10px; }
  .game .laptop .phone-content > * { flex-shrink: 0; }
  .game .laptop .phone-content .incoming, .game .laptop .phone-content .sent-message, .game .laptop .phone-content .answer p { font-size: 13px; line-height: 1.4; }
  .game .laptop .answer { min-height: 48px; padding: 10px; }
  .game .laptop .decision-head { margin-top: auto; }
  .game .laptop #nextSituation { min-height: 46px; font-size: clamp(15px, 3.85vw, 17px); margin-top: 8px; }
  .game .laptop #feedback[data-placement=laptop] { margin-top: auto; padding: 12px; --result-font: 14px; font-size: var(--result-font); }
  .game .laptop #feedback[data-placement=laptop] p, .game .laptop #feedback[data-placement=laptop] .growth-block p { font-size: 14px; }
  .game .laptop #feedback[data-placement=laptop] .impact-pill, .game .laptop #feedback[data-placement=laptop] .growth-block b { font-size: 12px; }
  .game .laptop #feedback h2 { font-size: 17px; }
  .mobile-scene { display: block; position: relative; width: 132px; height: 116px; flex: none; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #e3eff7; }
  .mobile-scene img { display: block; width: 100%; height: 116px; object-fit: cover; object-position: center; transform: scale(1.3); }
  .mobile-scene .mobile-thought { position: absolute; width: 58px; height: 50px; right: 12px; top: 25px; }
  .mobile-scene .mobile-thought svg { width: 100%; height: 100%; }
  .mobile-scene figcaption { display: none; }
  .game .phone-content > #timeoutOverlay { position: relative; inset: auto; width: 100%; min-height: 0; margin-top: auto; padding: 16px; border-radius: 12px; }
  #shiftResult, .game-embedded .game-finished #shiftResult { position: relative; inset: auto; width: 100%; height: auto; min-height: 0; max-height: none; overflow: visible; padding: 16px; }

  /* Compact mobile result: character beside summary, report directly below score. */
  #shiftResult { padding: 12px 12px calc(27px + env(safe-area-inset-bottom, 0px)); }
  #shiftResult .result-sheet { grid-template-columns: 82px minmax(0, 1fr); grid-template-areas: 'logo logo' 'agent title' 'agent profile' 'score score' 'action action' 'course course'; gap: 10px 12px; min-height: 0; align-content: start; }
  #shiftResult .result-heading-copy { display: contents; }
  #shiftResult #resultAgent3d { width: 82px; height: 150px; align-self: center; }
  #shiftResult #resultTitle { grid-area: title; font-size: clamp(20px, 5.2vw, 24px); margin: 0; align-self: end; }
  #shiftResult #resultProfile { grid-area: profile; font-size: 14px; line-height: 1.4; }
  #shiftResult .result-totals { grid-area: score; margin: 0; gap: 7px; align-items: stretch; }
  #shiftResult .result-score-card { padding: 10px 12px; gap: 12px; }
  #shiftResult .result-score b { font-size: 36px; }
  #shiftResult .result-score span { font-size: 12px; }
  #shiftResult .result-stars { font-size: 21px; }
  #shiftResult .result-counts { justify-content: center; flex-wrap: wrap; }
  #shiftResult .result-counts span { padding: 4px 6px; }
  #shiftResult .result-topline .setup-kicker { font-size: 18px; }
  #shiftResult .result-academy-logo { width: 76px; height: 27px; }
  #shiftResult .result-course { padding: 12px; gap: 8px; }
  #shiftResult .result-course h2 { font-size: 16px; }
  #shiftResult #requestReport { font-size: 14px; min-height: 44px; }
}

/* A brief score reveal, followed by the course recommendation. */
#shiftResult .result-star { display: inline-block; color: #a6cfe4; transition: color .25s ease, text-shadow .25s ease; }
#shiftResult .result-star.is-lit { color: #ffcb04; text-shadow: 0 0 8px #ffcb0466; }
#shiftResult .result-course { opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease; }
#shiftResult.result-counting .result-course { opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #shiftResult .result-star, #shiftResult .result-course { transition: none; } }

/* Desktop conversation uses one shared size for questions, choices and sent replies. */
@media (min-width: 701px) {
  .game .laptop .phone-content .incoming, .game .laptop .phone-content .sent-message, .game .laptop .phone-content .answer p { font-size: var(--chat-font, clamp(12px, 1.1vw, 18.5px)); line-height: 1.25; }
}

/* Center the Academy logo above the initial loading title. */
.initial-load .loader-academy-logo { margin-left: auto; margin-right: auto; }