/* GLORB LISTENING MISSION — AUG 2026 RESPONSIVE / ASSET PATCH
   Load AFTER style.css.

   The new Glorb assets are already framed/cropped for the web,
   so this CSS deliberately avoids the old extra image scaling.
*/

/* ---------------- STORY / INTRO VISUALS ---------------- */
.story-shell { position: relative; }

.story-visual {
  overflow: hidden;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none !important;
}

/* New assets already contain the correct visual proportions. */
.story-visual.close img,
.story-visual.wide img {
  transform: none !important;
}

/* Pip walks away: scene fills the visual area and copy sits in the middle gap. */
.story-shell.walkaway-mode {
  grid-template-columns: 1fr;
  min-height: 620px;
}

.story-shell.walkaway-mode .story-visual {
  min-height: 620px;
  padding: 12px 18px;
}

.story-shell.walkaway-mode .story-visual img {
  object-fit: contain;
  object-position: center center;
}

.story-shell.walkaway-mode .dialogue-panel {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, 31%);
  min-height: 0;
  padding: 24px 26px;
  border: 1px solid rgba(38, 42, 49, .16);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

.story-shell.walkaway-mode .dialogue-text {
  min-height: 0;
  font-size: clamp(.8rem, 1.2vw, 1rem);
  line-height: 1.55;
}

.story-shell.walkaway-mode .dialogue-panel .eyebrow,
.story-shell.walkaway-mode .dialogue-panel .speaker {
  font-size: .58rem;
}

/* ---------------- TEACHING CARDS ---------------- */
.teaching-stage {
  min-height: 650px;
  padding-bottom: 150px;
}

.research-card {
  min-height: 540px;
}

.research-card-visual {
  min-height: 540px;
  padding: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.research-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 470px;
  object-fit: contain;
  object-position: center center;
  transform: none;
}

/* Bigger Glorb field note, placed over the lesson card after the first click. */
.glorb-annotation {
  right: clamp(14px, 3vw, 46px);
  bottom: 18px;
  width: min(960px, 80%);
  grid-template-columns: 200px minmax(0, 1fr);
  z-index: 24;
}

.glorb-annotation img {
  display: block;
  width: 210px;
  height: 220px;
  max-width: 100%;
  max-height: 245px;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(18px, 12px);
}

.glorb-scribble {
  min-height: 180px;
  padding: 24px 34px 28px 68px;
}

.glorb-scribble::before {
  left: 22px;
  top: 54px;
}

.glorb-scribble span {
  font-size: .72rem;
  margin-bottom: 12px;
}

.glorb-scribble p {
  font-size: clamp(1.05rem, 1.65vw, 1.35rem);
  line-height: 1.48;
}

/* ---------------- SORT CARDS ---------------- */
.visual-card-bank { align-items: stretch; }

.sort-card {
  min-height: 156px;
  padding: 8px;
  overflow: hidden;
}

.sort-card img {
  height: 110px;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.sort-card span {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.placed-sort img {
  object-fit: contain;
  object-position: center;
}

/* ---------------- BODY CALIBRATION ---------------- */
#bodyScreen .activity-intro {
  margin-bottom: 8px;
  padding-block: 10px;
}

#bodyScreen .body-layout {
  margin-top: -34px;
}

.body-map { overflow: hidden; }

/* Printed artwork already contains labels, so do not duplicate them. */
.body-zone > span { display: none !important; }

.body-zone small {
  font-size: clamp(7px, .68vw, 11px) !important;
  line-height: 1.18;
}

.body-zone.mouth small {
  font-size: clamp(6px, .56vw, 9px) !important;
}

.body-zone.incorrect { cursor: pointer; }

.body-zone.incorrect::after {
  content: 'TAP TO CHANGE';
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #ffb6b6;
  font: 700 8px "IBM Plex Mono", monospace;
}

/* ---------------- TABLET ---------------- */
@media (max-width: 1180px) {
  .screen { padding-left: 18px; padding-right: 18px; }
  .shell { width: 100%; }
  .story-shell { grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr); }
  .story-visual, .dialogue-panel { min-height: 560px; }
  .visual-card-bank { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .body-layout { grid-template-columns: minmax(500px, 1.1fr) minmax(300px, .9fr); gap: 12px; }
  .glorb-annotation { width: min(880px, 84%); }
}

@media (max-width: 1024px) {
  #bodyScreen .body-layout {
    margin-top: 0;
    grid-template-columns: 1fr;
  }

  .body-map {
    max-width: 690px;
    margin: 0 auto;
  }

  .body-bank {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
  }

  .visual-card-bank {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-shell.walkaway-mode .dialogue-panel {
    width: min(430px, 40%);
  }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 900px) {
  .topbar { padding: 9px 12px; }
  .brand { font-size: .55rem; }
  .progress-wrap span { display: none; }
  .progress { width: 92px; }

  .screen {
    padding: 66px 10px 18px;
    align-items: flex-start;
  }

  .shell {
    width: 100%;
    border-left: 0;
    border-right: 0;
  }

  .story-shell {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .story-visual {
    min-height: 340px;
    height: 43vh;
    max-height: 500px;
    padding: 10px;
  }

  .dialogue-panel {
    min-height: auto;
    padding: 28px 22px 34px;
  }

  .dialogue-text {
    min-height: 0;
    font-size: 1rem;
    line-height: 1.6;
  }

  /* On mobile the walk-away scene stacks instead of overlapping copy. */
  .story-shell.walkaway-mode {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .story-shell.walkaway-mode .story-visual {
    min-height: 340px;
    height: 46vh;
  }

  .story-shell.walkaway-mode .dialogue-panel {
    position: static;
    transform: none;
    width: auto;
    min-height: auto;
    padding: 26px 22px;
  }

  .story-shell.walkaway-mode .dialogue-text {
    font-size: 1rem;
  }

  .lesson-shell, .hub, .game-shell {
    padding: 14px 10px 18px;
  }

  .section-header { gap: 8px; }
  .counter, .scorebox { font-size: .58rem; padding: 8px; }

  .teaching-stage {
    margin-top: 14px;
    min-height: 0;
    padding-bottom: 0;
  }

  .research-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .research-card-visual {
    min-height: 300px;
    height: 38vh;
    max-height: 380px;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(38, 42, 49, .12);
  }

  .research-card-visual img {
    max-height: 100%;
  }

  .research-card-copy {
    padding: 26px 20px 46px;
  }

  .research-card-copy h3 {
    font-size: clamp(2rem, 10vw, 3.25rem);
  }

  .glorb-annotation {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: -42px 0 12px;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: end;
  }

  .glorb-annotation img {
    width: 118px;
    height: 145px;
    max-height: 150px;
    transform: translate(6px, 8px);
  }

  .glorb-scribble {
    min-height: 150px;
    padding: 18px 18px 22px 42px;
  }

  .glorb-scribble::before {
    left: 12px;
    top: 48px;
  }

  .glorb-scribble p { font-size: 1rem; }
  .teaching-footer { margin-top: 8px; }

  .activity-intro {
    grid-template-columns: 78px 1fr;
    padding: 10px;
    gap: 10px;
  }

  .activity-intro img {
    height: 90px;
    width: 78px;
    object-fit: contain;
  }

  .activity-intro p { font-size: .78rem; }

  .listening-sort { grid-template-columns: 1fr; }

  .visual-card-bank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sort-card { min-height: 150px; }
  .sort-card img { height: 100px; }

  .body-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #bodyScreen .body-layout { margin-top: 0; }

  .body-map {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  .body-bank {
    order: -1;
    padding: 12px;
  }

  #bodyCards {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .body-card {
    min-height: 52px;
    font-size: .63rem;
  }

  .body-zone small {
    font-size: clamp(6px, 2vw, 9px) !important;
  }

  .activity-footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .back-button, .check-button { width: 100%; }
  .activity-feedback { order: -1; }
}

@media (max-width: 520px) {
  .read-aloud-btn { top: 7px; right: 7px; }

  .visual-card-bank {
    grid-template-columns: 1fr 1fr;
  }

  .sort-card { min-height: 136px; }
  .sort-card img { height: 84px; }

  .glorb-annotation {
    grid-template-columns: 80px 1fr;
    margin-top: -28px;
  }

  .glorb-annotation img {
    width: 88px;
    height: 112px;
  }

  .glorb-scribble {
    padding-left: 36px;
    min-height: 138px;
  }
}