/* ═══════════════════════════════════════════════════════
   MOBILE.CSS — responsive overrides for screens ≤ 768px
   ═══════════════════════════════════════════════════════ */

/* ── Shared small-screen utilities ── */
@media (max-width: 768px) {

  /* ── Sidebar / nav ── */
  #sidebar {
    height: 52px;
    padding: 0;
  }
  #sidebar-header {
    padding: 0 12px 0 10px;
    gap: 8px;
  }
  #sidebar-header .campaign-title {
    font-size: 12px;
  }
  #nav-groups {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }
  #nav-groups::-webkit-scrollbar { display: none; }
  .nav-section { display: inline-flex; }
  .nav-section-label {
    font-size: 11px;
    padding: 0 10px;
    height: 52px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  .nav-dropdown {
    top: 52px;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .nav-item { font-size: 13px; padding: 10px 14px; }

  #main { padding-top: 52px; }
  #content { padding: 16px 14px 40px; }

  /* ── Topbar (inner pages) ── */
  #topbar {
    height: auto !important;
    min-height: 80px;
    padding: 14px 16px 50px !important;
  }
  #topbar .breadcrumb { margin-top: 0 !important; }
  #topbar .breadcrumb::before { font-size: 22px !important; }
  .status-badge { display: none; }

  /* ── Page content ── */
  .page { padding: 16px !important; border-radius: 14px; }
  .page-title { font-size: 26px !important; }
  .page-header { margin-bottom: 20px; padding-bottom: 14px; }

  /* ── Home page ── */
  #home-nav-menu {
    min-width: unset !important;
    width: calc(100vw - 24px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 60px !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 16px !important;
    gap: 6px !important;
    max-height: 80vh;
    overflow-y: auto;
  }
  #home-nav-menu.open { grid-template-columns: 1fr 1fr !important; }
  .home-menu-item { font-size: 13px; padding: 7px 8px; }
  .home-menu-section-title { font-size: 8px; }

  .home-nav {
    height: auto !important;
    padding: 12px 14px !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  .home-brand-title { font-size: 14px; }
  .home-brand-sub { font-size: 11px; }
  .home-links { display: none !important; }
  .home-search { width: 100%; min-width: unset !important; }
  .home-search input { width: 100%; }

  .home-hero { min-height: 100svh; }
  .home-hero-content { width: 96% !important; padding: 0 12px !important; }

  .home-realms { padding: 0 12px 40px; }
  .realm-grid { grid-template-columns: 1fr !important; }
  .realm-card img { height: 200px; }

  /* ── Character sheets ── */
  .char-sheet { border-radius: 14px; margin-bottom: 24px; }
  .char-sheet-header {
    grid-template-columns: 1fr !important;
  }
  .char-portrait-wrap {
    height: 280px;
    border-right: none !important;
    border-bottom: 1px solid color-mix(in srgb,var(--cx-accent-deep) 15%,transparent);
  }
  .char-header-content { padding: 18px !important; }
  .char-body { padding: 16px !important; gap: 16px !important; }
  .char-name-field { font-size: 24px !important; }

  /* Ability scores — 3 per row on mobile */
  .char-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Two-col sections → single col */
  .char-body .two-col,
  .char-body .char-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Kill/death counters stacked */
  .char-counters {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .char-counter-val { font-size: 32px !important; }

  /* Items */
  .char-item-row { flex-wrap: wrap; }
  .char-item-img { width: 56px !important; height: 56px !important; }

  /* ── Gilded cards ── */
  .leg-item-card { padding: 14px 16px; }
  .leg-item-inner { flex-direction: column !important; }
  .leg-item-img { width: 100% !important; height: 160px !important; }
  .leg-stat-row { grid-template-columns: 1fr !important; gap: 2px !important; }

  /* ── Session notes ── */
  .session-layout,
  .sess-layout {
    grid-template-columns: 1fr !important;
  }
  .session-sidebar { position: relative !important; top: auto !important; }
  .sess-nav { flex-wrap: wrap; gap: 8px; }
  .sess-session-label { min-width: unset; }

  /* ── Party inventory ── */
  .inv-grid { grid-template-columns: 1fr !important; }

  /* ── Awards ── */
  .awards-grid,
  .aw-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Stars & Wishes ── */
  .sw-explainer {
    grid-template-columns: 1fr !important;
  }
  .sw-explainer-divider { width: 100% !important; height: 1px !important; }
  .sw-layout { grid-template-columns: 1fr !important; }
  .sw-entry-row { grid-template-columns: 1fr !important; }

  /* ── Atlas ── */
  .world-map-panel { grid-template-columns: 1fr !important; }
  .world-detail-card { position: relative !important; top: auto !important; }
  .atlas-title { font-size: 28px !important; }
  .world-map-frame img { min-width: 0 !important; }

  /* ── God forms / Eld portrait layout ── */
  .portrait-stat-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Gallery ── */
  #gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── NPCs ── */
  .gc { padding: 14px 16px; }

  /* ── Effects / visual ── */
  #rune-ring, #rune-ring-inner { display: none; }

  .home-nav-menu {
    padding: 16px !important;
  }
}

/* ── Very small screens (≤ 380px) ── */
@media (max-width: 380px) {
  .page-title { font-size: 22px !important; }
  #gallery-grid { grid-template-columns: 1fr !important; }
  .home-menu-item span.icon { display: none; }
  #home-nav-menu { grid-template-columns: 1fr !important; }
  #home-nav-menu.open { grid-template-columns: 1fr !important; }
  .char-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .nav-section-label { font-size: 10px; padding: 0 8px; }
}

/* ── Touch targets — make all interactive elements finger-friendly ── */
@media (max-width: 768px) {
  button, .nav-item, .nav-section-label,
  .btn-g, .btn-o, .btn-d, .btn-dash,
  .sw-submit-btn, .sess-nav-btn,
  .sw-nav-btn, .cnt-btn, .pot-btn,
  .ev-move-btn, .ev-del-btn {
    min-height: 40px;
    min-width: 40px;
  }
  .ev-move-btn { min-width: 32px; min-height: 28px; }

  input[type="text"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important; /* prevents iOS auto-zoom */
  }
}

/* ══════════════════════════════════════════════════
   MOBILE CONSISTENCY PASS — additional overrides
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Portrait/stat grid (god forms, eld) ── */
  .portrait-stat-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Sessions page meta row ── */
  .session-meta-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .session-meta-row > * {
    width: 100% !important;
    min-width: unset !important;
  }

  /* ── Topbar hero image area ── */
  #topbar {
    background-size: cover !important;
    background-position: center bottom !important;
  }

  /* ── Navigation dropdown positioning ── */
  .nav-dropdown {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    border-radius: 0 0 12px 12px !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.7) !important;
  }

  /* ── Home nav menu 2-col then 1-col at smallest ── */
  #home-nav-menu {
    top: 56px !important;
    grid-template-columns: 1fr 1fr !important;
    max-height: 75vh;
    overflow-y: auto;
    padding: 14px !important;
  }
  .home-menu-item {
    font-size: 12px !important;
    padding: 7px 8px !important;
    gap: 6px !important;
  }

  /* ── Story / timeline ── */
  .timeline { padding-left: 20px !important; }
  .timeline-item { padding-right: 30px; }

  /* ── Cards consistent spacing ── */
  .leg-item-card,
  .session-card,
  .sw-submit-card,
  .inv-card,
  .aw-card {
    border-radius: 12px !important;
  }

  /* ── Full-width buttons on mobile ── */
  .sw-submit-btn,
  .new-session-btn {
    width: 100% !important;
  }

  /* ── Page eyebrow smaller ── */
  .page-eyebrow { font-size: 10px !important; letter-spacing: .15em !important; }

  /* ── Leg stat row single col ── */
  .leg-stat-row { grid-template-columns: 1fr !important; }

  /* ── Counters ── */
  .char-counters { grid-template-columns: 1fr 1fr !important; }

  /* ── Legend items page wrap ── */
  .items-page-wrap { padding: 0 !important; }

  /* ── NPCs section labels ── */
  .items-section-header { flex-wrap: wrap; gap: 8px; }

  /* ── Awards page ── */
  .awards-grid { grid-template-columns: 1fr !important; }
  .ballot-section { padding: 14px !important; }

  /* ── Inventory gold amount ── */
  .gold-amount { font-size: 38px !important; }

  /* ── Scripture/lore ── */
  .scripture-block { padding: 16px !important; }

  /* ── Atlas ── */
  .atlas-shell { padding: 0 !important; }
  .atlas-hero { padding: 20px 16px 30px !important; }
  .atlas-title { font-size: 26px !important; }
  .atlas-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .world-view { padding: 16px !important; }

  /* ── Constructs ── */
  .constructs-grid { grid-template-columns: 1fr !important; }

  /* ── Prevent horizontal overflow globally ── */
  .page { overflow-x: hidden; }
  #content { overflow-x: hidden; }

  /* ── Gallery 2 cols on medium mobile ── */
  #gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── iPhone SE / very small ── */
@media (max-width: 380px) {
  #home-nav-menu { grid-template-columns: 1fr !important; }
  .home-menu-item .icon { display: none !important; }
  .char-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .atlas-grid { grid-template-columns: 1fr !important; }
  #gallery-grid { grid-template-columns: 1fr !important; }
  .session-nav-btn { padding: 6px 10px !important; font-size: 11px !important; }
  .page-title { font-size: 20px !important; }
}

/* ── Landscape mobile ── */
@media (max-width: 900px) and (orientation: landscape) {
  .home-hero { min-height: 100vw !important; }
  .home-hero-content { padding: 20px !important; }
  .char-sheet-header { grid-template-columns: 160px 1fr !important; }
  .char-portrait-wrap { height: 200px !important; }
}

/* ── Planetary Progression — mobile ── */
@media (max-width: 768px) {
  .prog-run-grid { grid-template-columns: 1fr 1fr !important; }
  .slot-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .core-stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .stacked-entry { grid-template-columns: 100px 1fr 24px !important; }
  .prog-combined-box { display: flex !important; width: 100%; }
}
@media (max-width: 380px) {
  .prog-run-grid { grid-template-columns: 1fr !important; }
  .slot-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .stacked-entry { grid-template-columns: 1fr 1fr 24px !important; }
}

/* ============================================================
 * Deploy81 — mobile home fixes + fullscreen nav
 * ============================================================ */
#mnav-btn, #mnav { display: none; } /* desktop never sees these */

@media (max-width: 768px) {

  /* ── Home hero collision fix ──
     .home-realms pulls itself up (-62px / -48px) for a decorative overlap
     on desktop; on phones the four stacked hero buttons fill that space,
     so the "Explore the Realms" title landed on top of them. */
  .home-hero {
    display: block !important;
    min-height: auto !important;
    padding: 50px 22px 76px !important;
    overflow: visible !important;
  }
  .home-hero-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    animation: none !important;
  }
  .home-realms {
    margin-top: 0 !important;
    padding-top: 34px !important;
  }

  /* ── Title wrap fix ── clamp so the campaign title fits one line;
     forbid mid-word breaking outright. */
  .home-title {
    font-size: clamp(32px, 9.8vw, 40px) !important;
    letter-spacing: .005em !important;
    line-height: 1.04 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  .home-title, .home-title * {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  .home-actions {
    gap: 14px !important;
    margin: 30px 0 0 !important;
  }
  .home-action {
    width: 100% !important;
    min-height: 58px !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }

  /* ── Replace desktop-style dropdown nav on phones ── */
  #nav-groups { display: none; }             /* strip keeps brand + search only */
  #sidebar-header { padding-right: 62px; }   /* clear the hamburger */
  .home-menu-btn { display: none; }          /* global hamburger covers home too */

  /* ── Hamburger ── */
  #mnav-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
    width: 44px; height: 44px; z-index: 8900;
    background: color-mix(in srgb,var(--cx-field) 92%,transparent); color: var(--cx-accent); font-size: 20px;
    border: 1px solid color-mix(in srgb,var(--cx-accent-deep) 55%,transparent); border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45); cursor: pointer;
    backdrop-filter: blur(4px);
  }
  body.dcs-modal-open #mnav-btn, body.mnav-open #mnav-btn { display: none; }
  body.mnav-open { overflow: hidden; }

  /* ── Fullscreen menu ── */
  #mnav {
    display: block; position: fixed; inset: 0; z-index: 9400;
    background: color-mix(in srgb,var(--cx-bg) 98.5%,transparent);
    backdrop-filter: blur(8px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    opacity: 0; pointer-events: none; transform: translateY(-10px);
    transition: opacity .18s ease, transform .18s ease;
  }
  #mnav.open { display: block; opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mnav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .mnav-brand { font-family: 'Cinzel', serif; color: var(--cx-accent); font-size: 18px; letter-spacing: .08em; }
  .mnav-brand span { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb,var(--cx-accent) 55%,transparent); margin-top: 2px; }
  .mnav-close {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid color-mix(in srgb,var(--cx-accent-deep) 45%,transparent); border-radius: 12px;
    color: var(--cx-accent); font-size: 18px; cursor: pointer;
  }
  .mnav-label {
    font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: color-mix(in srgb,var(--cx-accent) 60%,transparent); margin: 20px 4px 6px;
  }
  .mnav-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
    background: none; border: none; border-bottom: 1px solid color-mix(in srgb,var(--cx-accent-deep) 12%,transparent);
    color: var(--cx-accent-bright); font-family: 'EB Garamond', serif; font-size: 17px; text-align: left;
    padding: 4px 6px; cursor: pointer;
  }
  .mnav-item .icon { width: 24px; text-align: center; font-size: 17px; }
  .mnav-item:active { background: color-mix(in srgb,var(--cx-accent-deep) 10%,transparent); }
}

/* ── Back to Campaigns in the mobile fullscreen menu (v66.1) ── */
@media (max-width: 768px){
  .mnav-account{
    margin-top:22px;padding-top:16px;
    border-top:1px solid color-mix(in srgb,var(--cx-accent) 25%,transparent);
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  }
  .mnav-account .dash-return--mobile{
    width:100%;justify-content:flex-start;font-size:15px;padding:14px 12px;
    min-height:48px; /* comfortable tap target */
  }
  /* Desktop-only placements stay out of the phone layout entirely. */
  .dash-return--topbar{display:none;}
}