/* ========================================================================== */
/* GDNF UI/UX 2.3 — RESPONSIVE / REFLOW / MULTIPLAYER PASS                    */
/* Loaded last. This file intentionally centralizes viewport behavior so the   */
/* game does not depend on a single “desktop landscape” composition.          */
/* ========================================================================== */

:root {
  --gdnf-page-inline: clamp(14px, 3vw, 46px);
  --gdnf-page-block: clamp(22px, 4vh, 58px);
  --gdnf-scroll-tail: calc(34px + env(safe-area-inset-bottom, 0px));
  --gdnf-readable-line: 74ch;
}

html,
body,
.app-shell,
main {
  min-width: 0;
  min-height: 100dvh;
}

body {
  /* The active surface owns scrolling. This prevents fixed bars, multiplayer
     shells, and portrait desktop windows from fighting over body scroll. */
  overflow: hidden;
}

.screen,
.duel-screen,
.conclave-screen,
.duel-shell,
.conclave-shell,
.app-shell,
main,
.altar-layout,
.altar-panel,
.duel-config,
.conclave-config,
.duel-lobby-copy,
.conclave-intro {
  min-width: 0;
}

.screen:not(.screen--arena),
.duel-screen:not(.duel-arena-screen),
.conclave-screen:not(.conclave-arena-screen) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 18px var(--gdnf-scroll-tail);
  -webkit-overflow-scrolling: touch;
}

.screen--arena,
.duel-arena-screen,
.conclave-arena-screen {
  overflow: hidden !important;
}

/* The <=1050 legacy rule changed screens to absolute/body scrolling. Keep a
   single viewport-scroller model on desktop, narrow desktop, tablet and phone. */
@media (max-width: 1050px) {
  body { overflow: hidden; }
  .screen {
    position: fixed;
    inset: var(--utility-height) 0 max(var(--author-contact-height), env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }
}

/* Text/actions may wrap instead of forcing horizontal scroll. */
.primary-button,
.secondary-button,
.text-button,
.mode-button,
.game-menu-action,
.duel-option,
.conclave-option,
.duel-theorem,
.conclave-theorem,
.offer-card,
.ability-row,
.inventory-item,
.ability-status-card,
.edict-preview,
.meta-progression-panel,
.league-progress {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

button,
a,
label,
input,
select,
textarea {
  max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* SINGLE-PLAYER FLOW                                                          */
/* -------------------------------------------------------------------------- */

/* Main/void become normal document flow whenever the viewport is narrow OR
   portrait. This is also what makes an 800×1100 desktop browser window usable. */
@media (max-width: 1180px), (orientation: portrait) and (max-width: 1280px) {
  .screen--menu,
  .screen--void {
    padding: clamp(54px, 7vh, 82px) var(--gdnf-page-inline) var(--gdnf-scroll-tail);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .screen--menu::before,
  .screen--void::before {
    inset: 14px;
  }

  .main-menu-copy,
  .void-copy {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 780px);
    transform: none;
  }

  .main-menu-copy { margin-top: clamp(8px, 3vh, 34px); }
  .void-copy { margin-top: clamp(34px, 8vh, 96px); }

  .main-menu-copy h1,
  .screen--void h1 {
    max-width: 8ch;
    font-size: clamp(52px, 12vw, 100px);
  }

  .main-menu-thesis { max-width: 22ch; }
  .main-menu-actions { width: min(100%, 700px); }

  .main-menu-brief {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 780px);
    margin: 28px 0 0;
    transform: none;
  }

  .menu-sigil,
  .void-sigil {
    position: absolute;
    z-index: 0;
    right: -12vmin;
    bottom: -10vmin;
    width: min(58vmin, 480px);
    height: min(58vmin, 480px);
    opacity: .14;
  }

  .void-coordinate {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 28px;
    padding-bottom: 8px;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .screen--menu,
  .screen--void {
    padding-inline: max(14px, env(safe-area-inset-left, 0px));
  }
  .main-menu-copy h1,
  .screen--void h1 { font-size: clamp(46px, 18vw, 76px); }
  .main-menu-modes,
  .intro-choice-copy { grid-template-columns: 1fr; }
  .intro-choice-copy p + p {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .button-row { flex-wrap: wrap; }
  .button-row > * { flex: 1 1 100%; }
}

/* God selection: auto-fit on every viewport rather than separate desktop and
   “four microscopic cards on mobile” rules. */
.screen--gods {
  overflow-x: hidden;
  overflow-y: auto;
}
.god-grid {
  min-height: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.god-card { min-width: 0; }
.selection-footer { flex-wrap: wrap; }

@media (max-width: 1180px) {
  .screen--gods {
    padding: clamp(60px, 8vh, 86px) var(--gdnf-page-inline) var(--gdnf-scroll-tail);
  }
  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
    margin-bottom: 24px;
  }
  .section-heading h2 { font-size: clamp(42px, 7vw, 70px); }
  .god-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .god-card,
  .god-card:nth-child(n) {
    min-height: clamp(300px, 45vh, 400px);
    border-right: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  }
  .god-card:nth-child(2n) { border-right: 0; }
  .selection-footer { align-items: stretch; }
  .selection-footer .primary-button { margin-left: auto; }
}

@media (max-width: 620px) {
  .screen--gods { padding-top: 52px; }
  .section-heading h2 { font-size: clamp(36px, 11vw, 54px); }
  .god-grid { grid-template-columns: 1fr; gap: 10px; border: 0; }
  .god-card,
  .god-card:nth-child(n) {
    min-height: 278px;
    border: 1px solid color-mix(in srgb, var(--ink) 48%, transparent);
  }
  .god-card canvas { max-height: 150px; }
  .god-card-doctrine { min-height: 0; }
  .selection-footer { gap: 14px; padding-top: 20px; }
  .selection-footer .primary-button { width: 100%; margin-left: 0; }
}

/* Altar: 3 → 2 → 1 columns; no fixed-height assumption. Every column may grow. */
.screen--altar {
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: var(--gdnf-scroll-tail);
}
.altar-header {
  align-items: flex-start;
  flex-wrap: wrap;
}
.resource-ledger {
  min-width: 0;
  width: min(100%, 430px);
}
.altar-layout {
  width: 100%;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(250px, .66fr);
}
.altar-panel {
  min-width: 0;
  min-height: clamp(330px, 52vh, 480px);
}
.altar-panel--actions .primary-button,
#enter-arena-button { width: 100%; }

@media (max-width: 1280px) {
  .screen--altar { padding: clamp(60px, 7vh, 82px) var(--gdnf-page-inline) var(--gdnf-scroll-tail); }
  .altar-header { gap: 22px; margin-bottom: 22px; }
  .altar-header > div:first-child { flex: 1 1 520px; }
  .resource-ledger { flex: 1 1 330px; }
  .altar-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .altar-panel--actions {
    grid-column: 1 / -1;
    min-height: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  }
}

@media (max-width: 760px) {
  .screen--altar { padding-top: 52px; padding-inline: max(14px, env(safe-area-inset-left, 0px)); }
  .altar-header { display: grid; grid-template-columns: minmax(0, 1fr); }
  .altar-header h2 { font-size: clamp(36px, 10vw, 56px); }
  .resource-ledger { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resource-ledger > div { min-width: 0; padding: 10px 8px; }
  .resource-ledger strong { font-size: clamp(25px, 9vw, 39px); }
  .resource-ledger span { font-size: clamp(7px, 2.1vw, 9px); }
  .altar-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border: 0; }
  .altar-panel,
  .altar-panel--actions {
    grid-column: auto;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 48%, transparent);
  }
  .analysis-status { min-height: 0; align-items: flex-start; }
  .offer-list,
  .ability-list,
  .inventory-list { min-width: 0; }
}

/* Debrief and long-form generated content must reflow rather than crop. */
.screen--debrief { overflow-x: hidden; overflow-y: auto; padding-bottom: var(--gdnf-scroll-tail); }
@media (max-width: 980px) {
  .debrief-layout { grid-template-columns: minmax(0,1fr); }
  .debrief-summary,
  .debrief-metrics { min-width: 0; }
  .debrief-path { width: 100%; max-width: 100%; }
}

/* -------------------------------------------------------------------------- */
/* PAUSE / DIALOGS                                                             */
/* -------------------------------------------------------------------------- */
.pause-overlay {
  overflow: auto;
  overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.pause-panel {
  width: min(980px, 100%);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  overflow-x: hidden;
  overflow-y: auto;
  margin: auto;
}
.confirm-dialog,
.lineage-economy-dialog {
  max-width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

@media (max-width: 760px), (max-height: 620px) {
  .pause-panel { padding: 14px; }
  .pause-grid { grid-template-columns: 1fr !important; }
  .pause-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pause-block { min-width: 0; }
  .pause-title { font-size: clamp(24px, 7vw, 38px); }
}
@media (max-width: 460px) {
  .pause-actions { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------- */
/* MULTIPLAYER: DUEL + CONCLAVE                                                */
/* -------------------------------------------------------------------------- */

.duel-shell { height: 100dvh; min-height: 100dvh; }
.duel-screen { inset: 54px 0 0; min-height: 0; }
.conclave-shell { min-height: 100dvh; }
.conclave-screen { min-height: 0; }

#duel-lobby,
#conclave-lobby,
.duel-verdict,
.conclave-verdict,
.duel-waiting,
.conclave-room {
  max-width: 100%;
}

.duel-config,
.conclave-config,
.duel-entry-card,
.conclave-start-card,
.duel-config-panel,
.conclave-advanced,
.duel-advanced,
.conclave-room-options {
  min-width: 0;
}

/* Portrait desktop/tablet windows need the same reflow as phones even when
   mobile-runtime does not apply .gdnf-mobile. */
@media (max-width: 1180px), (orientation: portrait) and (max-width: 1400px) {
  #duel-lobby.is-active,
  #conclave-lobby.is-active,
  .duel-verdict.is-active,
  .conclave-verdict.is-active {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .duel-lobby-copy,
  .conclave-intro {
    position: relative;
    top: auto;
    min-height: 0;
    padding: clamp(30px, 5vw, 54px) var(--gdnf-page-inline);
    border-right: 0;
    border-bottom: 1px solid var(--duel-line, var(--conclave-line));
  }

  .duel-lobby-copy h1 span { font-size: clamp(62px, 14vw, 112px); }
  .duel-lobby-copy h1 b { justify-self: start; font-size: clamp(58px, 13vw, 104px); }
  .conclave-intro h1 { font-size: clamp(68px, 16vw, 120px); }
  .conclave-intro h1 span { justify-self: start; }

  .duel-config,
  .conclave-config {
    width: 100%;
    max-width: 1040px;
    overflow: visible;
    padding: clamp(24px, 4vw, 48px) var(--gdnf-page-inline) var(--gdnf-scroll-tail);
    margin-inline: auto;
  }

  .duel-entry-heading,
  .conclave-entry-heading { grid-template-columns: 1fr; }

  .duel-entry-actions,
  .conclave-entry__primary,
  .duel-room-actions,
  .conclave-start-card .conclave-join-row {
    grid-template-columns: 1fr;
  }

  .duel-choice-grid,
  .duel-vessel-grid,
  .conclave-choice-grid,
  .conclave-vessel-grid,
  .duel-loadout,
  .conclave-loadout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .duel-waiting,
  .conclave-room {
    align-content: start;
    padding: clamp(28px, 5vw, 54px) var(--gdnf-page-inline) var(--gdnf-scroll-tail);
  }

  .duel-verdict > div,
  .duel-interpretation,
  .conclave-verdict__summary,
  .conclave-interpretation {
    padding: clamp(28px, 5vw, 54px) var(--gdnf-page-inline) var(--gdnf-scroll-tail);
    border-right: 0;
  }
}

@media (max-width: 620px) {
  .duel-choice-grid,
  .duel-vessel-grid,
  .conclave-choice-grid,
  .conclave-vessel-grid,
  .duel-loadout,
  .conclave-loadout { grid-template-columns: 1fr; }

  .duel-lobby-copy,
  .conclave-intro,
  .duel-config,
  .conclave-config,
  .duel-waiting,
  .conclave-room,
  .duel-verdict > div,
  .duel-interpretation,
  .conclave-verdict__summary,
  .conclave-interpretation {
    padding-inline: max(14px, env(safe-area-inset-left, 0px));
  }

  .duel-mode-facts { grid-template-columns: 1fr; }
  .conclave-simple-rules { grid-template-columns: 1fr; }
  .duel-entry-card,
  .conclave-start-card { padding: 16px; }
  .duel-create-button,
  .conclave-entry__primary button { min-height: 82px; }
}

/* Room screens: controls wrap instead of sliding outside a narrow window. */
.conclave-room__header,
.duel-waiting-card,
.duel-waiting-flow { min-width: 0; }
.conclave-room__header { flex-wrap: wrap; gap: 16px; }
.conclave-room__actions { flex-wrap: wrap; }
@media (max-width: 820px) {
  .conclave-room__actions { display: grid; grid-template-columns: 1fr; }
  .conclave-room__actions > button,
  .conclave-room-options { width: 100%; min-width: 0; }
  .conclave-seats { grid-template-columns: 1fr; }
}

/* Multiplayer in-arena modal surfaces have to fit portrait phones and short
   landscape devices, and remain scrollable while the canvas stays locked. */
.conclave-pause-menu,
.conclave-draft {
  overflow: auto;
  overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.conclave-pause-menu__panel,
.conclave-draft__panel {
  max-width: min(720px, 100%);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  margin: auto;
}

/* -------------------------------------------------------------------------- */
/* MOBILE-SPECIFIC REFLOW                                                      */
/* -------------------------------------------------------------------------- */
html.gdnf-mobile .screen:not(.screen--arena),
html.gdnf-mobile .duel-screen:not(.duel-arena-screen),
html.gdnf-mobile .conclave-screen:not(.conclave-arena-screen) {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

html.gdnf-mobile .screen--gods,
html.gdnf-mobile .screen--altar,
html.gdnf-mobile .screen--debrief {
  height: auto;
  min-height: 0;
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

html.gdnf-mobile .god-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
html.gdnf-mobile .god-card,
html.gdnf-mobile .god-card:nth-child(n) {
  min-height: 248px;
}
html.gdnf-mobile .god-card canvas { max-height: 130px; }

html.gdnf-mobile .altar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
html.gdnf-mobile .altar-panel,
html.gdnf-mobile .altar-panel--actions {
  min-height: 0;
  order: initial;
}

html.gdnf-mobile .mobile-match-menu,
html.gdnf-mobile .mobile-orientation-gate {
  align-content: start;
  justify-items: center;
  overflow: auto;
}
html.gdnf-mobile .mobile-match-menu__panel,
html.gdnf-mobile .mobile-orientation-gate > div {
  max-height: calc(var(--gdnf-vv-height, 100dvh) - max(20px, var(--gdnf-safe-top) + var(--gdnf-safe-bottom)));
  overflow: auto;
}
html.gdnf-mobile .mobile-game-ui.is-menu-open .mobile-control-zone,
html.gdnf-mobile .mobile-game-ui.is-menu-open .mobile-action-cluster,
html.gdnf-mobile .mobile-game-ui.is-menu-open .mobile-ability-status,
html.gdnf-mobile .mobile-game-ui.is-menu-open .mobile-pause-button {
  visibility: hidden;
}

@media (orientation: portrait) and (max-width: 620px) {
  html.gdnf-mobile .god-grid { grid-template-columns: 1fr; }
  html.gdnf-mobile .god-card,
  html.gdnf-mobile .god-card:nth-child(n) { min-height: 270px; }

  html.gdnf-mobile .mobile-match-status { grid-template-columns: 1fr; }
  html.gdnf-mobile .mobile-match-status__facts { grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* Keep the central play field readable; thumb controls stay lower and closer
     to the device edges instead of occupying the middle of a portrait screen. */
  html.gdnf-mobile .mobile-control-zone {
    width: min(44vw, 210px);
    height: min(31vh, 290px);
  }
  html.gdnf-mobile .mobile-action-cluster {
    right: calc(max(18px, var(--gdnf-safe-right)) + 2px);
    bottom: calc(max(16px, var(--gdnf-safe-bottom)) + 27vh);
    width: min(44vw, 220px);
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  html.gdnf-mobile .screen--menu,
  html.gdnf-mobile .screen--gods,
  html.gdnf-mobile .screen--altar,
  html.gdnf-mobile .screen--debrief {
    padding-top: max(14px, env(safe-area-inset-top, 0px));
  }
  html.gdnf-mobile .god-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  html.gdnf-mobile .god-card,
  html.gdnf-mobile .god-card:nth-child(n) { min-height: 210px; }
  html.gdnf-mobile .mobile-match-menu__panel,
  html.gdnf-mobile .mobile-orientation-gate > div {
    grid-template-columns: 1fr 1fr;
    width: min(92vw, 620px);
    padding: 14px;
    gap: 8px 10px;
  }
}

/* Short desktop windows need vertical scroll just as much as phones. */
@media (max-height: 650px) and (min-width: 621px) {
  .screen--menu,
  .screen--void,
  .screen--gods,
  .screen--altar,
  .screen--debrief {
    padding-top: 48px;
  }
  .main-menu-copy h1,
  .screen--void h1 { font-size: clamp(46px, 10vh, 72px); }
  .section-heading h2,
  .altar-header h2 { font-size: clamp(38px, 8vh, 58px); }
  .god-card { min-height: 280px; }
  .altar-panel { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* QA 2.3: shadows/keylines must never create horizontal menu scrolling. */
.pause-overlay,
.conclave-pause-menu,
.conclave-draft,
.mobile-match-menu,
.mobile-orientation-gate {
  overflow-x: hidden;
}