/* ─────────────────────────────────────────────
   MOBILE — stack layout vertically
────────────────────────────────────────────── */
@media (max-width: 700px) {
  .app-main {
    grid-template-columns: 1fr;
    grid-template-rows: 52vw 1fr;
    overflow: hidden;
  }

  .camera-panel {
    max-height: 52vw;
  }

  .side-panel {
    border-left: none;
    border-top: 1px solid var(--border);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .topbar {
    padding: 0 12px;
    height: 48px;
  }

  .brand-title { font-size: 1.1rem; }
  .topbar select { max-width: 90px; font-size: 0.68rem; }

  .stats-grid { grid-template-columns: repeat(3, 1fr); }

  .hud-chip strong { font-size: 1rem; }
  .hud-chip.hud-score strong { font-size: 1.2rem; }

  .home-card { padding: 28px 20px; }
  .home-h1 { font-size: 2.2rem; }
  .feat-grid { grid-template-columns: 1fr 1fr; }

  .overlay-card { padding: 24px 20px; margin: 16px; }
  .overlay-card h1 { font-size: 1.5rem; }
}

@media (max-width: 380px) {
  .topbar-controls { display: none; }
  .feat-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   TALL SCREEN — give camera more height
────────────────────────────────────────────── */
@media (min-width: 701px) and (max-height: 600px) {
  .side-panel { min-width: 260px; }
}

/* ─────────────────────────────────────────────
   PRINT
────────────────────────────────────────────── */
@media print {
  .app-shell, body { background: #fff; color: #000; }
  .side-panel, .topbar { display: none; }
  .camera-panel { display: block; }
}