/* ═══════════════════════════════════════════════════════════
   MOBILE ENHANCEMENTS — wider content, better readability
   ═══════════════════════════════════════════════════════════ */

/* ───── Tablet & below ───── */
@media (max-width: 900px) {
  .sec, .ftree-block, .gi-controls, .gi-grid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .ch-header {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ch-header__title {
    font-size: clamp(28px, 7vw, 48px) !important;
    line-height: 1.25;
  }
  .ch-header__bg-kanji {
    font-size: clamp(120px, 30vw, 200px) !important;
  }
  .hero {
    padding: 60px 16px 40px !important;
  }
  .hero__title {
    font-size: clamp(28px, 8vw, 56px) !important;
  }
  .hero__subtitle {
    font-size: clamp(11px, 3vw, 16px) !important;
  }
  .hero__desc {
    font-size: 14px !important;
    line-height: 1.8;
  }
  .topbar__nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__nav a {
    white-space: nowrap;
    font-size: 12px !important;
  }
}

/* ───── Phones ───── */
@media (max-width: 600px) {
  body { font-size: 15px; }

  /* Make all main sections use full available width */
  .sec,
  .ftree-block,
  .gi-controls,
  .gi-grid,
  .char-grid,
  .princ-grid,
  .trinity-grid,
  .types-tabs,
  .death-cases {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Topbar: smaller and tighter */
  .topbar {
    padding: 10px 12px !important;
    flex-direction: column;
    gap: 8px;
  }
  .topbar__logo {
    font-size: 14px !important;
  }
  .topbar__nav {
    width: 100%;
    gap: 14px !important;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  /* Hero: tighter */
  .hero { padding: 80px 12px 30px !important; }
  .hero__kanji span {
    font-size: clamp(80px, 24vw, 140px) !important;
  }
  .hero__toc {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .hero__toc-item {
    padding: 12px 14px !important;
  }
  .hero__toc-name {
    font-size: 13px !important;
  }

  /* Chapter headers */
  .ch-header {
    padding-top: 60px;
    padding-bottom: 30px;
  }
  .ch-header__num {
    font-size: clamp(60px, 18vw, 100px) !important;
  }
  .ch-header__label {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }
  .ch-header__sub {
    font-size: 11px !important;
  }

  /* Trinity / principles cards full width with comfortable padding */
  .princ-card, .trinity-card, .type-card, .eq-detail, .sub-item {
    padding: 18px !important;
  }

  /* Char cards: single column with edge-to-edge feel */
  .char-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cc {
    padding: 14px !important;
  }
  .cc__header {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .cc__avatar {
    margin: 0 auto;
    width: 80px;
    height: 80px;
  }
  .cc__name {
    font-size: 18px !important;
    text-align: center;
  }
  .cc__name-en {
    text-align: center;
  }
  .cc__strip {
    padding: 8px 10px !important;
    row-gap: 8px !important;
  }
  .cc__strip-left,
  .cc__strip-actions {
    max-width: 100%;
  }
  .cc__save-btn {
    min-height: 34px !important;
    padding: 0 12px !important;
  }
  .cc__stats-row {
    grid-template-columns: 1fr !important;
  }
  .cc__stat {
    padding: 11px 12px !important;
    border-left: 0 !important;
  }
  .cc__stat-val {
    overflow-wrap: anywhere;
  }
  .cc__detail-inner {
    padding: 12px !important;
  }
  .cc__ability-block {
    padding: 16px 12px !important;
  }
  .cc__ability-label {
    letter-spacing: 1px !important;
    line-height: 1.6;
  }
  .cc__ability-name,
  .cc__ability-detail,
  .cc__essence {
    overflow-wrap: anywhere;
  }
  .cc__matrix {
    padding: 12px 8px !important;
  }
  .cc__matrix-svg {
    width: min(100%, 220px) !important;
  }

  /* Stats bar: 2 columns instead of cramped */
  .char-stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .char-stat-pill__num { font-size: 22px !important; }
  .char-stat-pill__label { font-size: 8px !important; }

  /* Filter tabs: scrollable horizontally instead of cramped wrap */
  .char-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 12px !important;
  }
  .char-tabs::-webkit-scrollbar { display: none; }
  .char-tab {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 10px 14px !important;
  }

  /* Types tabs (chapter II): scroll */
  .types-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .types-tabs::-webkit-scrollbar { display: none; }
  .types-tab {
    flex-shrink: 0;
    min-height: 44px;
  }

  /* Hex SVG: scale it down */
  .type-card__hex svg {
    width: 100% !important;
    height: auto !important;
    max-width: 280px;
  }

  /* Prince / queen / guardian grids: 1 col */
  .prince-grid,
  .ftree-block__grid,
  .ftree-overview-row,
  .dc-threats-list {
    grid-template-columns: 1fr !important;
  }

  /* Family-tree blocks: comfortable padding */
  .ftree-block {
    padding: 18px 12px !important;
    margin: 14px 6px !important;
  }
  .ftree-block__title { font-size: 17px !important; }
  .ftree-block__sub { font-size: 11px !important; }

  /* Tree nodes (members inside family trees) */
  .ftree-member,
  .tree-kakin__queen,
  .tree-kakin__prince {
    padding: 10px !important;
  }
  .ftree-member__name { font-size: 13px !important; }
  .ftree-member__role { font-size: 10.5px !important; }

  /* GI grid: 2 cols on phone (looks like trading cards) */
  .gi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* GI modal: full screen */
  .gi-modal__content {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
  }

  /* Larger tap targets for buttons */
  .gi-rarity,
  .gi-type-pill,
  .types-tab,
  .char-tab {
    min-height: 40px;
  }

  /* Footer */
  .footer { padding: 30px 16px !important; }

  /* Eq compare bars side-by-side → stacked */
  .eq-compare { grid-template-columns: 1fr !important; gap: 24px; }

  /* Water grid: 2 cols not 3 */
  .water-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Reduce flow SVG height so it fits */
  .flow-container svg,
  .flow-svg {
    width: 100%;
    height: auto;
  }

  /* Note blocks comfortable */
  .note-block, .death-block, .training-box {
    padding: 18px !important;
  }
}

/* ───── Tiny phones ───── */
@media (max-width: 380px) {
  .hero__title { font-size: 26px !important; }
  .topbar__logo { font-size: 13px !important; }
  .gi-grid { grid-template-columns: 1fr !important; }
  .char-stats-bar { grid-template-columns: 1fr !important; }
  .cc__avatar { width: 72px !important; height: 72px !important; }
  .cc__hero-name .cc__name { font-size: 20px !important; }
  .cc__ability-detail { font-size: 13px !important; line-height: 1.85 !important; }
}

/* ───── Hide edit toolbar entirely when not admin (extra safety) ─── */
body:not(.edit-mode-available) #edit-toolbar {
  /* leave default; gated by JS — this is a placeholder for future */
}

/* When admin toolbar IS visible on small screens, keep it tight and out of the way */
@media (max-width: 600px) {
  #edit-toolbar {
    bottom: 10px !important;
    left: 10px !important;
    right: auto !important;
    max-width: calc(100vw - 20px);
    padding: 6px !important;
    gap: 4px !important;
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .edit-toolbar__btn {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
}