/* ═══ MOBILE / SMALL SCREENS ═══ */
@media (max-width: 860px) {
  #nav { padding: 12px 20px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* Panels dock to the TOP half — the middle/bottom of the screen stays
     free so the thumb can keep scrolling the journey naturally */
  .panel,
  .panel-left, .panel-right, .panel-top {
    top: calc(92px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    max-width: none;
    max-height: 42vh;
    overflow-y: auto;
    padding: 18px 20px 16px;
  }
  .panel-body { font-size: 14.5px; }
  .exp-desc { max-height: 110px; }

  /* Hero — name sits high (nav/telemetry are hidden here), titles stack
     as one colored line each instead of a wrapping paragraph */
  #heroBand { padding: 68px 16px 104px; }
  .hero-name { letter-spacing: 3px; }
  .hero-titles span {
    display: block;
    border-right: none;
    padding: 2.5px 0;
    letter-spacing: 2.5px;
  }
  .hero-titles span:nth-child(1) { color: var(--cyan); }
  .hero-titles span:nth-child(2) { color: var(--green); }
  .hero-titles span:nth-child(3) { color: #b07fff; }
  .hero-titles span:nth-child(4) { color: #ffb84d; }
  .hero-titles span:nth-child(5) { color: #cfe9ff; }

  /* Telemetry: compact top-right strip */
  #telemetry {
    top: 64px;
    right: 14px;
    transform: none;
    flex-direction: row;
    gap: 12px;
    font-size: 9px;
  }
  #telemetry .t-block .t-value { font-size: 11px; }

  .social-rail { display: none; }
  #progressRail { display: none; }
  .gameover { padding: 26px 20px 22px; }
  .exp-list { max-height: 24vh; }

  /* Floating buttons */
  .wa-float, .ai-float { right: 14px; width: 46px; height: 46px; }
  .wa-float { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ai-float { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .ai-hint { right: 72px; bottom: calc(32px + env(safe-area-inset-bottom)); }

  /* Chat becomes full-screen sheet */
  .chat-panel {
    width: 100vw;
    right: -100vw;
  }
  .chat-input { font-size: 16px; } /* prevents iOS zoom */

  .project-modal { padding: 26px 22px 24px; }
}

@media (max-width: 400px) {
  .hero-name { font-size: 27px; }
  .hero-titles { font-size: 10px; }
  .panel-title { font-size: 18px; }
}