/* Phone: one pane at a time, chosen with tabs. Back and Next stay pinned to the bottom. */
@media (max-width: 760px) {
  .page { display: flex; flex-direction: column; height: auto; min-height: 100vh; padding-bottom: 92px; }
  .topbar { display: contents; }

  .ptabs { order: 0; position: sticky; top: 0; z-index: 4; display: flex; background: #1b2130; padding: 6px 6px 0; gap: 2px; }
  .ptab { position: relative; flex: 1; min-width: 0; padding: 8px 2px 9px; border: 0; border-radius: 8px 8px 0 0; background: none;
    color: #a6afc0; font-size: 12px; font-weight: 600; line-height: 1.15; cursor: pointer; }
  .ptab.on { background: #e4e7ec; color: #1b2130; }
  .ptab.has-hl::after { content: ""; position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #f2b705; }

  .narr { order: 1; flex: none; display: none; margin: 12px; padding: 16px; border-radius: 12px; background: #1b2130; color: #f3f5f9; }
  body[data-tab="story"] .narr { display: block; }
  .narr h1 { font-size: 20px; margin: 4px 0 6px; }
  .narr p { font-size: 15px; line-height: 1.5; }
  .narr-look { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .narr-look button { padding: 6px 12px; border-radius: 999px; border: 1px solid #f7c948; background: none; color: #f7c948;
    font-size: 13px; font-weight: 600; cursor: pointer; }

  .stage { order: 2; display: block; padding: 8px; }
  .apps { display: block; }
  .pane { display: none; height: calc(100vh - 160px); height: calc(100dvh - 160px); min-height: 460px; }
  body[data-tab="mms"] .pane-mms, body[data-tab="wave"] .pane-wave,
  body[data-tab="quo"] .pane-quo, body[data-tab="sync"] .pane-sync { display: flex; }
  .pane.pane-hl { outline-color: transparent; }

  .wrap { position: static; background: none; padding: 0 4px; }
  body:not([data-tab="story"]) .wrap { display: none; }
  .wrap-card { padding: 18px 20px; }
  .wrap-card > h2, .wrap-card > p { display: none; }
  body[data-tab="story"] .stage { padding-top: 0; }

  .controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #1b2130; }
  .dots { justify-content: center; }
  .ctl-buttons { display: grid; grid-template-columns: 1fr 1.4fr auto; }
  .ctl-buttons .btn { padding: 9px 10px; }

  .foot { order: 3; padding: 12px 16px; }
}