/* ════════════════════════════════════════════════════════════════════════════
   responsive.css — loaded LAST. Three additive layers:
     1. Contract-address chip (#ca-chip) + auth field (#ca-field)
     2. Branded background on the auth-flow screens (.lh-bg + img/bg.png)
     3. Mobile pass — menus scroll + reflow on phones (phones race in LANDSCAPE,
        so the landscape branch is the important one). Mobile rules are gated to
        phone-sized viewports (max-width:560px portrait, or short landscape capped
        at max-width:1024px) so desktop windows are not affected. Scroll containers
        mirror the .guide-card pattern (css/betting.css:228).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1a. Contract-address chip (compact, non-auth menus) ───────────────────── */
#ca-chip {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;                       /* above .screen (20), below overlays/popups (26+) */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 24px);
  padding: 4px 5px 4px 9px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: rgba(8, 18, 36, .84);
  border: 1px solid rgba(0, 229, 255, .35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#ca-chip.hidden { display: none; }
.ca-chip__tag {
  flex: 0 0 auto;
  font-family: var(--font-head, sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .06em;
  color: #04121f;
  background: var(--gold, #ffd400);
  padding: 2px 8px;
  border-radius: 999px;
}
.ca-chip__val {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--cream, #eaf3ff);
  background: none;
  border: none;
  padding: 2px 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-chip__val .ti { font-size: 13px; opacity: .8; }
.ca-chip__val:hover { color: #fff; }
.ca-chip__val:hover .ti { opacity: 1; }
.ca-chip__val--soon { color: var(--cream-warm, #9fb3c8); cursor: default; font-style: italic; }
.ca-chip__pump {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #04121f;
  background: var(--gem-aqua, #43d6ff);
  text-decoration: none;
  transition: filter var(--engine-dur, .2s);
}
.ca-chip__pump:hover { filter: brightness(1.1); }
.ca-chip__pump .ti { font-size: 15px; }

/* ── 1b. Contract-address field (prominent, the auth/landing page) ─────────── */
.ca-field {
  width: 100%;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ca-field__label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gem-aqua, #43d6ff);
}
.ca-field__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 13px;
  border-radius: 12px;
  background: rgba(8, 18, 36, .72);
  border: 1px solid rgba(0, 229, 255, .30);
  box-shadow: inset 0 1px 0 rgba(127, 242, 255, .08);
}
.ca-field__val {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--cream, #eaf3ff);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-field__val .ti { font-size: 15px; opacity: .75; }
.ca-field__val:hover { color: #fff; }
.ca-field__val--soon { color: var(--cream-warm, #9fb3c8); font-style: italic; cursor: default; }
.ca-field__pump {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head, sans-serif);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .03em;
  color: #04121f;
  background: var(--gem-aqua, #43d6ff);
  padding: 8px 13px;
  border-radius: 999px;
  text-decoration: none;
  transition: filter var(--engine-dur, .2s);
}
.ca-field__pump:hover { filter: brightness(1.08); }
.ca-field__pump .ti { font-size: 14px; }

/* ── 2. Branded background on the auth-flow screens (.lh-bg) ────────────────── */
/* A dedicated .auth-bg <img> (the old global .bg-plate is force-hidden in ocean-bg.css).
   Image at z:0, scrim at z:1, content (.lh) at z:2. If img/bg.png fails to load the <img>
   removes itself (onerror) and the .lh-screen dark-grid background shows. */
.lh-bg > .auth-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.lh-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 9, 26, .58) 0%, rgba(4, 9, 26, .40) 30%, rgba(4, 9, 26, .44) 64%, rgba(4, 9, 26, .82) 100%),
    radial-gradient(110% 80% at 42% 40%, transparent 16%, rgba(4, 9, 26, .52) 92%);
}
.lh-bg > .lh { position: relative; z-index: 2; }

/* ════════════════════════════════════════════════════════════════════════════
   3. MOBILE PASS — phones only (portrait ≤560px wide, or short landscape ≤500px
   tall AND ≤1024px wide so wide-but-short desktop windows are excluded).
   ════════════════════════════════════════════════════════════════════════════ */

/* 3a. Shared scroll containers — content scrolls within its fixed screen instead of
   clipping. overflow-y:auto only scrolls when content actually overflows. */
@media (max-width: 560px), (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .lh-screen .lh {
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Boathouse is NOT a .lh-screen (it uses the bh-, cs-, bs- class families) — bespoke
     handling: the whole screen scrolls, and BOTH panes take natural height (flex:0 0 auto)
     so the screen-level scroll reaches the Select/Equip/Buy/Back actions in either tab.
     The carousel gets a bounded height so a card + info + actions fit the scroll flow. */
  #screen-character {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #screen-character .bh-pane.is-active { flex: 0 0 auto; }
  #screen-character .cs-carousel { flex: 0 0 auto; height: min(54vh, 430px); }
  #screen-character .bs-skins,
  #screen-character .bs-boats { flex: 0 0 auto; }

  /* Touch targets ≥44px for the chip controls + carousel arrows. */
  .ca-chip__pump { width: 44px; height: 44px; }
  .ca-chip__val { min-height: 40px; padding: 6px 4px; }
  #screen-character .cs-nav { width: 44px; height: 44px; }
  /* the fixed CA chip sits top-center — push the boathouse tabs below it so it doesn't cover them */
  #screen-character .bh-tabs { margin-top: 28px; }
}

/* 3b. Portrait phones — reflow dense grids, shrink the hero. */
@media (max-width: 560px) {
  .lh-word { font-size: clamp(30px, 10.5vw, 52px); }
  #lobby-slots { grid-template-columns: repeat(3, 1fr); }
  #screen-results .res-stats { grid-template-columns: 1fr 1fr; }
  .lh-screen .lh { padding-top: 6px; }
}

/* 3c. Short landscape (phones held sideways) — tighten vertical rhythm, drop
   non-essential subtitles, keep the primary action in view. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .lh-screen { padding-top: clamp(10px, 3vh, 24px); padding-bottom: clamp(10px, 3vh, 24px); }
  .lh { gap: clamp(8px, 1.8vh, 16px); }
  .lh-word { font-size: clamp(24px, 8vh, 40px); }
  .lh-sub { display: none; }
  .lh-input { font-size: clamp(15px, 2.4vh, 20px); }
  #lobby-slots { grid-template-columns: repeat(6, 1fr); }
  /* leaderboard: match the existing short-landscape list cap (don't override it taller) */
  #screen-board #lb-list { max-height: 38vh; }
  #screen-character .cs-carousel { height: min(70vh, 360px); }
  #screen-character .bh-head { margin-bottom: 4px; }
  /* the auth field still shows on #screen-auth here — keep it compact */
  .ca-field__box { padding: 7px 10px; }
  /* shrink boat-tab cards so the Boat pane needs less scroll to reach the actions */
  #screen-character .bs-boat__art { width: clamp(60px, 8.5vh, 84px); }
  #screen-character .bs-skin { width: clamp(72px, 10vh, 100px); }
}