/* ══════════════════════════════════════════════════════════════════════════
   PILGRIMAZE — RESPONSIVE LAYER (v4)
   ──────────────────────────────────────────────────────────────────────────
   New in v4 vs v3:
     • FIX 4 — Modal grids (Mount/Weapon/Armour/etc.) no longer overflow
                right edge. Targets JS-generated inline style="…" grids.
     • FIX 5 — No more empty gap between the topBar and the modal title
                when a full-panel card opens.

   Keep <link rel="stylesheet" href="responsive-additions.css"> in
   index.html, AFTER the style.css link.
   ══════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   PART A — STRUCTURAL FIXES
   ════════════════════════════════════════════════════════════════════════ */

/* FIX 1 — CSS-class grids: ignore content min-width so columns share equally. */
.eq-row  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bag-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.np-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.eq-slot,
.bc,
.nb { min-width: 0; overflow: hidden; }
.eq-name,
.bc-name { word-break: break-word; overflow-wrap: anywhere; }


/* FIX 2 — Bottom nav always reachable on short viewports. */
#shell{
  height: 100vh;
  height: 100svh;
}
#content     { min-height: 0; min-width: 0; }
.tb-name-wrap{ min-width: 0; }
#topBar > * ,
.act-btn > div ,
.hunt-ctrl > * { min-width: 0; }
.tb-name     { overflow: hidden; text-overflow: ellipsis; }


/* FIX 3 — Olive Tree Helper Log stays visible. */
#screen-olive .olive-stage-wrap{
  flex: 0 1 40%;
  min-height: 110px;
}


/* FIX 4 — Modal grid overflow (NEW in v4) ───────────────────────────────
   The Mount/Weapon/Armour/etc. selection modals are populated by JS using
   inline style="grid-template-columns:…" attributes. Inline styles beat
   regular CSS class rules, so we use attribute selectors with !important
   to retrofit `minmax(0, 1fr)` onto the most common JS-generated patterns.
   This catches any grid built with `repeat(N, 1fr)` or bare `1fr 1fr…`. */

/* Patterns using repeat() */
[style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"]
  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
[style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"]
  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
[style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"]
  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
[style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"]
  { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
[style*="repeat(6, 1fr)"], [style*="repeat(6,1fr)"]
  { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* Bare-list patterns: "1fr 1fr 1fr" etc. */
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"]
  { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
[style*="grid-template-columns:1fr 1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr 1fr"]
  { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; }
[style*="grid-template-columns:1fr 1fr 1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr 1fr 1fr"]
  { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; }

/* Defensive: any grid item inside the modal sheet can shrink, and the
   sheet itself never shows a horizontal scrollbar (safety net only —
   the rules above already prevent overflow at the source). */
.m-sheet { overflow-x: hidden; }
.m-sheet > *,
.m-sheet > * > * { min-width: 0; }


/* FIX 5 — No gap between topBar and modal title (NEW in v4) ─────────────
   Full-panel modals (#mOverlay.full-panel) are pinned in place — they
   don't slide or drag — so the m-handle (the small horizontal pill that
   indicates "drag me") and its padding above the title are pure visual
   noise that show up as an empty band below the topBar. Hide them.
   Bottom-sheet modals (without .full-panel) keep the handle, since
   those DO drag/dismiss and the handle is meaningful UX there. */
#mOverlay.full-panel .m-handle { display: none; }
#mOverlay.full-panel .m-sheet  { padding-top: 0; }


/* ════════════════════════════════════════════════════════════════════════
   PART B — SMOOTH SCALING WITH clamp()
   ══════════════════════════════════════════════════════════════════════ */

.screen { padding: clamp(8px, 3vw, 12px); }

/* HOME — equipment grid */
.eq-row    { gap: clamp(5px, 1.7vw, 7px); margin-bottom: clamp(8px, 3vw, 12px); }
.eq-slot   {
  padding: clamp(6px, 2.2vw, 10px) clamp(2px, 1vw, 4px) clamp(5px, 1.8vw, 8px);
  gap: clamp(2px, 1vw, 4px);
}
.eq-ico,
.eq-ph     { width: clamp(32px, 11vw, 44px); height: clamp(32px, 11vw, 44px); }
.eq-ph     { font-size: clamp(16px, 5.5vw, 22px); }
.eq-name   { font-size: clamp(9px, 2.7vw, 11px); min-height: clamp(18px, 5.5vw, 22px); line-height: 1.2; }
.eq-lbl    { font-size: clamp(8.5px, 2.5vw, 10px); }

/* HOME — action buttons */
.act-btn   {
  padding: clamp(10px, 3.7vw, 15px) clamp(11px, 4vw, 16px);
  gap: clamp(8px, 3.4vw, 14px);
  margin-bottom: clamp(6px, 2.2vw, 9px);
}
.act-ico   { width: clamp(26px, 9vw, 36px); height: clamp(26px, 9vw, 36px); }
.act-title { font-size: clamp(13px, 4vw, 16px); }
.act-sub   { font-size: clamp(10px, 3vw, 12px); }
.act-lk    { font-size: clamp(9px, 2.7vw, 11px); }

/* BAG */
.bag-grid  { gap: clamp(5px, 2vw, 8px); }
.bc        {
  padding: clamp(7px, 2.5vw, 10px) clamp(2px, 1vw, 4px);
  min-height: clamp(70px, 21vw, 82px);
}
.bc-ico    { width: clamp(28px, 9vw, 36px); height: clamp(28px, 9vw, 36px); }
.bc-name   { font-size: clamp(9px, 2.7vw, 11px); }
.bc-cnt    { font-size: clamp(9px, 2.7vw, 11px); top: 3px; right: 4px; }

/* TOP BAR */
#topBar      { gap: clamp(3px, 1.5vw, 6px); padding-left: clamp(5px, 2vw, 10px); padding-right: clamp(5px, 2vw, 10px); }
.tb-name     { font-size: clamp(10.5px, 3.2vw, 13px); }
.tb-st       { gap: clamp(2px, .8vw, 3px); }
.tb-st .val  { font-size: clamp(10px, 3.2vw, 13px); }
.tb-st .lbl  { font-size: clamp(8px, 2.5vw, 10px); }
.exp-lbl     { font-size: clamp(8px, 2.4vw, 9px); }
.exp-bar-w   { width: clamp(46px, 16vw, 64px); }
.regen-timer { font-size: clamp(7.5px, 2.4vw, 9px); }

/* QUEST + SYSLOG */
#questBar    { padding: clamp(6px, 2.3vw, 9px) clamp(10px, 3.5vw, 14px) clamp(5px, 2vw, 8px); }
.q-rew       { font-size: clamp(11px, 3.2vw, 12px); margin-bottom: clamp(1px, .8vw, 3px); }
.q-desc      { font-size: clamp(11px, 3.2vw, 12px); }
.log-entry   { font-size: clamp(11px, 3.2vw, 12px); }

/* NAV */
.nav-btn        { gap: clamp(2px, 1vw, 4px); }
.nav-btn svg    { width: clamp(18px, 6vw, 23px); height: clamp(18px, 6vw, 23px); }
.nav-btn .nl    { font-size: clamp(8px, 2.6vw, 10px); letter-spacing: clamp(0px, .1vw, .4px); }

/* SCREEN TITLES */
.sc-title    { font-size: clamp(15px, 4.7vw, 18px); padding: clamp(2px, 1vw, 4px) 0 clamp(8px, 3.5vw, 14px); }

/* HUNTING control bar */
.hunt-ctrl       { padding: clamp(5px, 2vw, 8px) clamp(5px, 2.5vw, 10px); gap: clamp(3px, 1.5vw, 6px); }
.hunt-btn-left   { min-width: clamp(60px, 19vw, 80px); padding: 0 clamp(5px, 2.5vw, 10px); font-size: clamp(9px, 2.7vw, 10px); height: clamp(30px, 9.5vw, 36px); }
.hunt-loot-slot  { width: clamp(24px, 8vw, 32px); height: clamp(24px, 8vw, 32px); }
.hunt-loot-slot img { width: clamp(18px, 6vw, 24px); height: clamp(18px, 6vw, 24px); }
.hunt-trap-btn   { min-width: clamp(64px, 22vw, 90px); padding: 0 clamp(6px, 2.5vw, 10px); height: clamp(30px, 9.5vw, 36px); }
.hunt-trap-count { font-size: clamp(9px, 2.7vw, 10px); }
.hunt-trap-ico   { width: clamp(15px, 5vw, 18px); height: clamp(15px, 5vw, 18px); }


/* ════════════════════════════════════════════════════════════════════════
   PART C — DISCRETE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 340px) { .bag-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 280px) { .bag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 340px) { .exp-row .exp-lbl { display: none; } }


/* Short viewports (≤ 600px tall) */
@media (max-height: 600px) {
  :root { --nav: 42px; }
  #topBar { height: calc(46px + env(safe-area-inset-top, 0px)); }
  #sysLog { max-height: 48px; }

  #screen-olive .olive-stage-wrap { flex: 0 1 32%; min-height: 90px; }
  #screen-olive .olive-info-panel { padding: 7px 16px; gap: 4px; }
  #screen-olive .olive-btn-area   { padding: 8px 12px 10px; gap: 7px; }
  #screen-olive .olive-helper-log { min-height: 50px; max-height: 110px; }
  #screen-olive .olive-btn        { padding: 10px 8px; }
  #screen-olive .olive-btn-row .olive-btn { padding: 9px 4px; }
}


/* Very short viewports (≤ 500px tall) */
@media (max-height: 500px) {
  :root { --nav: 38px; }
  #topBar { height: calc(42px + env(safe-area-inset-top, 0px)); }
  #sysLog { max-height: 32px; }

  #screen-olive .olive-stage-wrap { flex: 0 1 26%; min-height: 70px; }
  #screen-olive .olive-info-panel { padding: 5px 14px; gap: 3px; }
  #screen-olive .olive-btn-area   { padding: 6px 10px 8px; gap: 6px; }
  #screen-olive .olive-helper-log { min-height: 40px; max-height: 80px; padding: 6px 10px 8px; }
  #screen-olive .olive-helper-log-empty { padding: 6px 4px; line-height: 1.5; }
  #screen-olive .olive-btn        { padding: 8px 6px; font-size: 9px; }
  #screen-olive .olive-btn-row .olive-btn { padding: 7px 4px; font-size: 8.5px; }
  #screen-olive .olive-header     { padding: 6px 14px 5px; }
}