/* ═══════════════════════════════════════════════════════════════════════
   HIMOTHY — Mobile & PWA styles
   Loaded alongside chapter-v2.css in app.html.
   Breakpoints:
     xl  >1200px   canonical desktop
     lg  900-1200  full layout
     md  640-900   tablet
     sm  <640      mobile (primary target)
     xs  <400      small phones
   ═══════════════════════════════════════════════════════════════════════ */

/* ── safe-area utilities ────────────────────────────────────────────────── */
:root {
  --bottom-nav-h:  56px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-left:     env(safe-area-inset-left, 0px);
  --safe-right:    env(safe-area-inset-right, 0px);
  --tap-min:       44px; /* WCAG / Apple HIG minimum touch target */
}

/* ── Bottom navigation bar ──────────────────────────────────────────────── */
.bottom-nav {
  display: none; /* shown only on mobile via media query below */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  background: var(--ink);
  border-top: 3px solid var(--ink);
  z-index: 900;
  padding-bottom: var(--safe-bottom);
}

.bottom-nav-inner {
  display: flex;
  height: var(--bottom-nav-h);
  align-items: stretch;
}

.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--ink-ghost);
  min-width: 0;
  border-right: 1px solid rgba(250,250,250,0.08);
  padding: 0 4px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms, color 100ms;
}
.bnav-item:last-child { border-right: none; }
.bnav-item[data-active="true"] {
  background: #1a1a1a;
  color: var(--page);
}
.bnav-item:active { background: #222; }

.bnav-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.bnav-icon svg { width: 100%; height: 100%; }

.bnav-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Mobile masthead ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .masthead {
    padding: 0 16px;
    height: calc(48px + var(--safe-top));
    padding-top: var(--safe-top);
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .chapter-num {
    font-size: 11px;
    letter-spacing: 0.1em;
    flex-shrink: 0;
  }
  .lang-switcher { gap: 2px; }
  .lang-btn { font-size: 7px; padding: 2px 5px; }
  .chapter-title {
    font-size: 18px;
    letter-spacing: 0.04em;
    flex: 1;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .chapter-meta { display: none; }

  /* hide desktop tab bar, show bottom nav */
  .tabs-bar { display: none; }
  .bottom-nav { display: flex; }

  /* content needs breathing room above bottom nav */
  main {
    margin: 16px auto;
    padding: 0 14px calc(var(--bottom-nav-h) + var(--safe-bottom) + 20px);
  }

  .section-label { font-size: 26px; margin: 20px 0 3px; }
  .section-sub   { font-size: 10px; margin-bottom: 14px; }

  /* ── CHAPTER PANELS — webtoon single-column ── */
  .ch2-grid {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 3px;
    align-items: stretch;
  }
  /* Full-width panels, staggered heights preserved for drama */
  .ch2-panel[data-slot="setup"]      { height: 72vw;  }
  .ch2-panel[data-slot="rise"]       { height: 88vw;  }
  .ch2-panel[data-slot="climax"]     { height: 105vw; }
  .ch2-panel[data-slot="resolution"] { height: 72vw;  }

  /* Bigger SFX on mobile — more room to breathe at full width */
  .ch2-sfx { font-size: 100px; top: 20px; left: 18px; }
  .ch2-panel[data-slot="climax"] .ch2-sfx { font-size: 120px; }
  .ch2-panel[data-slot="rise"] .ch2-sfx {
    font-size: 80px; right: -12px; left: auto; top: 18px;
  }
  .ch2-panel[data-slot="setup"] .ch2-sfx {
    font-size: 64px; bottom: 90px; left: -4px; top: auto;
  }

  .ch2-headline { font-size: 40px; }
  .ch2-hero { padding: 20px 18px 14px; }

  /* Bubble text larger on mobile */
  .ch2-bubble-body { font-size: 15px; }
  .ch2-bubble { left: 10px; right: 10px; }

  /* ── Status pills — 2 per row ── */
  .status-row { flex-wrap: wrap; }
  .status-pill {
    min-width: calc(50% - 1px);
    flex: 0 0 calc(50% - 1px);
  }

  /* ── Metric cards — 2 per row ── */
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric-row .metric:nth-child(2n) { border-right: none; }
  .metric-val { font-size: 20px; }

  /* ── Ledger table — hide less critical cols ── */
  th:nth-child(2), td:nth-child(2),   /* Date */
  th:nth-child(5), td:nth-child(5),   /* Strategy */
  th:nth-child(7), td:nth-child(7),   /* Exit */
  th:nth-child(8), td:nth-child(8) {  /* P(win) */
    display: none;
  }

  /* ── Character cards — full-width ── */
  .party-grid { grid-template-columns: 1fr; }
  .char-card { padding: 16px; }

  /* ── Director's chair ── */
  .director-row { grid-template-columns: 1fr; }
  .director-left { padding: 18px; }
  .director-input { min-height: 88px; font-size: 16px; /* prevent iOS zoom */ }

  /* ── Archive grid ── */
  .archive-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ── Prev chapters row ── */
  .prev-row { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* ── Knowledge ── */
  .knowledge-grid { grid-template-columns: 1fr; gap: 10px; }

  /* ── Buttons — full-width on mobile ── */
  .btn { padding: 13px 18px 12px; font-size: 20px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { text-align: center; }
  .btn-row .draft-count { text-align: right; margin-top: 4px; }

  /* ── Doc view ── */
  .doc-view { padding: 18px 16px; font-size: 12px; }

  /* ── Stubs ── */
  .stub { padding: 40px 20px; }
  .stub-sfx { font-size: 36px; }

  /* ── Footer ── */
  .footer-note { font-size: 10px; padding-bottom: 8px; }

  /* ── Filters — stacked ── */
  .ledger-header { flex-direction: column; gap: 10px; align-items: flex-start; }
  .filters { gap: 10px; }
  .filters select, .filters input { font-size: 14px; padding: 6px 8px; min-height: var(--tap-min); }
}

/* ── Extra small phones (<400px) ──────────────────────────────────────── */
@media (max-width: 400px) {
  .ch2-headline { font-size: 32px; }
  .ch2-panel[data-slot="climax"]     { height: 110vw; }
  .archive-grid { grid-template-columns: 1fr; }
  .prev-row     { grid-template-columns: 1fr; }
  .bnav-label   { font-size: 7px; }
}

/* ── Tablet (640-900) ──────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  main { padding: 20px 20px 60px; }
  .director-row { grid-template-columns: 1fr; }
  .metric-row   { grid-template-columns: repeat(2, 1fr); }
  .metric-row .metric:nth-child(2n) { border-right: none; }
  .masthead { padding: 12px 20px; }
  .chapter-meta { display: none; }
}

/* ── Swipe chapter navigation hint ────────────────────────────────────── */
.swipe-hint {
  display: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-ghost);
  letter-spacing: 0.12em;
  padding: 8px;
}
@media (max-width: 640px) {
  .swipe-hint { display: block; }
}

/* ── Chapter nav arrows (prev/next chapter on mobile) ──────────────────── */
.ch-nav {
  display: none;
}
@media (max-width: 640px) {
  .ch-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0 4px;
  }
  .ch-nav-btn {
    font-family: var(--font-sfx);
    font-size: 18px;
    letter-spacing: 0.04em;
    border: 2.5px solid var(--ink);
    background: var(--page);
    color: var(--ink);
    padding: 10px 20px;
    cursor: pointer;
    flex: 1;
    text-align: center;
    min-height: var(--tap-min);
    -webkit-tap-highlight-color: transparent;
  }
  .ch-nav-btn:active { background: var(--ink); color: var(--page); }
  .ch-nav-info {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-fade);
    letter-spacing: 0.08em;
    text-align: center;
    flex: 1.2;
  }
}

/* ── Pull-to-refresh indicator ─────────────────────────────────────────── */
.ptr-indicator {
  display: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-ghost);
  padding: 8px;
  border-bottom: 1px solid var(--ink-ghost);
  text-transform: uppercase;
}
.ptr-indicator[data-visible="true"] { display: block; }

/* ── Touch-target padding on cards ────────────────────────────────────── */
@media (max-width: 640px) {
  .arch-card, .prev-card, .doc-card, .example {
    min-height: var(--tap-min);
  }
  .tab { min-height: var(--tap-min); }
}

/* ── Momentum scroll on iOS ────────────────────────────────────────────── */
main, .doc-view {
  -webkit-overflow-scrolling: touch;
}

/* ── Prevent text-size-adjust on orientation change ────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Landscape phone — 2 columns for panels ──────────────────────────── */
@media (max-width: 896px) and (orientation: landscape) and (max-height: 430px) {
  .ch2-grid { grid-template-columns: 1fr 1fr; align-items: end; }
  .ch2-panel[data-slot="setup"]      { height: 46vw; }
  .ch2-panel[data-slot="rise"]       { height: 54vw; }
  .ch2-panel[data-slot="climax"]     { height: 64vw; }
  .ch2-panel[data-slot="resolution"] { height: 46vw; }
  main { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 10px); }
}

/* ── ARENA + Settings mobile ───────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Onboarding lang picker — stays 3-col but tighter */
  .ob-lang-btn { padding: 18px 6px 14px; }
  .ob-lang-script { font-size: 28px; }
  .ob-lang-native { font-size: 13px; }
  /* Soul step chips — 2-col wrap on small screens */
  .ob-soul-row { gap: 5px; }
  .ob-soul-chip { font-size: 10px; padding: 8px 8px; min-width: 48px; }
  .ob-soul-section { margin-bottom: 14px; }

  /* Wizard cards — full bleed, less padding */
  .arena-wizard { padding: 24px 16px 28px; }
  .arena-sfx { font-size: 40px; }
  .arena-h { font-size: 18px; }

  /* Form rows — stack to single column */
  .arena-row { grid-template-columns: 1fr; gap: 12px; }

  /* Inputs — 16px min prevents iOS auto-zoom */
  .arena-field input,
  .arena-field select,
  .settings-field input,
  .settings-field select {
    font-size: 16px;
    min-height: var(--tap-min);
    padding: 12px;
  }

  /* Buttons — full width on mobile */
  .arena-btns { flex-direction: column; }
  .arena-btn { width: 100%; text-align: center; padding: 14px; }

  /* Status grid — 2 columns on mobile */
  .arena-status-grid { grid-template-columns: 1fr 1fr; }
  .arena-stat:nth-child(2n) { border-right: none; }
  .arena-stat-val { font-size: 18px; }

  /* Trade rows — hide less critical columns */
  .arena-trade-row {
    grid-template-columns: 60px 50px 80px 70px;
  }
  .arena-trade-row > div:nth-child(5),
  .arena-trade-row > div:nth-child(6) { display: none; }

  /* Gate rows */
  .gate-row { flex-wrap: wrap; gap: 8px; }
  .gate-value { width: 100%; padding-left: 22px; }

  /* Settings cards */
  .settings-card { padding: 20px 16px 24px; }
  .settings-btns { flex-direction: column; }
  .settings-btn { width: 100%; text-align: center; }

  /* Admin table — hide non-essential cols */
  .admin-table th:nth-child(3),
  .admin-table td:nth-child(3),
  .admin-table th:nth-child(5),
  .admin-table td:nth-child(5) { display: none; }

  /* Position box */
  .arena-pos-val { font-size: 13px; }
}

@media (max-width: 400px) {
  .arena-status-grid { grid-template-columns: 1fr; }
  .arena-stat { border-right: none; border-bottom: 1.5px solid var(--ink); }
  .arena-stat:last-child { border-bottom: none; }
}