@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stage-preview { min-height: 320px; }
  .story-grid, .progress-grid { grid-template-columns: 1fr 1fr; }
  .choice-grid, .minigame-options { grid-template-columns: 1fr; }
  .theatre-stage, .stage-content { min-height: 560px; }
}

@media (max-width: 640px) {
  .app-header {
    grid-template-columns: auto 1fr auto;
    width: calc(100% - 18px);
    margin-top: 9px;
    min-height: 66px;
    border-radius: 18px;
  }
  .brand-kicker { display: none; }
  .brand strong { font-size: .92rem; }
  .header-actions { gap: 5px; }
  .icon-btn { width: 42px; height: 42px; }
  .app-main { width: calc(100% - 18px); margin: 14px auto; }
  .hero { padding: 24px 18px; min-height: 560px; border-radius: 24px; }
  .hero-grid { gap: 22px; }
  .hero-copy h1 { font-size: 3rem; }
  .stage-preview { min-height: 290px; }
  .story-grid, .progress-grid { grid-template-columns: 1fr; }
  .story-cover { min-height: 180px; }
  .theatre-topbar { align-items: center; }
  .theatre-stage { min-height: 640px; border-width: 4px; border-radius: 22px; }
  .stage-content {
    min-height: 640px;
    padding: 14px;
    grid-template-rows: 1fr auto;
  }
  .stage-cast { padding: 28px 0 0; }
  .actor { width: 120px; min-height: 180px; }
  .actor-avatar { width: 94px; height: 138px; font-size: 2.2rem; }
  .dialogue-dock {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px;
  }
  .speaker-chip { grid-column: 1 / -1; justify-self: start; }
  .dialogue-text { font-size: .97rem; }
  .next-btn { min-width: 72px; padding-inline: 12px; }
  .choice-panel, .minigame-panel, .ending-panel { padding: 16px; border-radius: 20px; }
  .choice-card { min-height: 88px; }
  .drag-grid { grid-template-columns: 1fr; }
  .section-head { align-items: start; flex-direction: column; }
  .app-footer { margin-bottom: 10px; }
}

@media (max-width: 410px) {
  .hero-copy h1 { font-size: 2.55rem; }
  .stage-preview { min-height: 250px; }
  .character-token.hakim { width: 90px; height: 120px; }
  .character-token.fahima { width: 86px; height: 112px; }
  .preview-bubble { max-width: 170px; top: 16px; inset-inline-start: 14px; }
}