/* ========================================================================== */
/* GDNF UI/UX 2.4 — THEME / MOBILE / RESPONSIVE / MENU HARDENING             */
/* Loaded last. Combat art direction is unchanged; this layer fixes semantic  */
/* contrast, compact mobile overlays and robust multiplayer reflow.            */
/* ========================================================================== */

:root {
  --gdnf-mobile-glass: 48%;
  --gdnf-mobile-control-alpha: .54;
  --gdnf-mobile-control-alpha-active: .82;
}

/* -------------------------------------------------------------------------- */
/* THEME TOGGLE: intentionally inverse in both themes.                        */
/* It must never become invisible because parent text/background was inverted. */
/* -------------------------------------------------------------------------- */
html[data-ui-version='2'][data-visual-theme='light'] .gdnf-theme-toggle,
html[data-ui-version='2'][data-theme='light'] .gdnf-theme-toggle {
  border: 1px solid var(--gdnf-fg);
  border-left-width: 1px;
  background: var(--gdnf-fg);
  color: var(--gdnf-bg);
  box-shadow: none;
}

html[data-ui-version='2'][data-visual-theme='dark'] .gdnf-theme-toggle,
html[data-ui-version='2'][data-theme='dark'] .gdnf-theme-toggle {
  border: 1px solid var(--gdnf-fg);
  border-left-width: 1px;
  background: var(--gdnf-fg);
  color: var(--gdnf-bg);
  box-shadow: none;
}

html[data-ui-version='2'] .gdnf-theme-toggle:hover,
html[data-ui-version='2'] .gdnf-theme-toggle:focus-visible {
  background: var(--gdnf-bg);
  color: var(--gdnf-fg);
  border-color: var(--gdnf-fg);
  filter: none;
}

/* -------------------------------------------------------------------------- */
/* CONCLAVE: stop hard-coded dark colors from fighting the global theme.      */
/* -------------------------------------------------------------------------- */
html[data-ui-version='2'] .conclave-body {
  --conclave-bg: var(--gdnf-bg);
  --conclave-fg: var(--gdnf-fg);
  --conclave-muted: var(--gdnf-muted);
  --conclave-line: var(--gdnf-hair);
  --conclave-panel: color-mix(in srgb, var(--gdnf-bg-raised) 94%, transparent);
  --conclave-paper: var(--gdnf-bg);
  --conclave-ink: var(--gdnf-fg);
  color: var(--gdnf-fg);
  background:
    linear-gradient(var(--gdnf-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--gdnf-grid) 1px, transparent 1px),
    var(--gdnf-bg);
  background-size: 72px 72px;
}

html[data-ui-version='2'] .conclave-topbar {
  color: var(--gdnf-fg);
  background: color-mix(in srgb, var(--gdnf-bg) 92%, transparent);
  border-bottom-color: var(--gdnf-hair);
}

html[data-ui-version='2'] .conclave-lead,
html[data-ui-version='2'] .conclave-note,
html[data-ui-version='2'] .conclave-field-copy,
html[data-ui-version='2'] .conclave-option span,
html[data-ui-version='2'] .conclave-theorem b,
html[data-ui-version='2'] .conclave-theorem small,
html[data-ui-version='2'] .conclave-room__header p:last-child,
html[data-ui-version='2'] .conclave-advanced > summary,
html[data-ui-version='2'] .conclave-room-options > summary {
  color: var(--gdnf-muted);
}

html[data-ui-version='2'] .conclave-intro,
html[data-ui-version='2'] .conclave-config,
html[data-ui-version='2'] .conclave-start-card,
html[data-ui-version='2'] .conclave-simple-rules article,
html[data-ui-version='2'] .conclave-seat,
html[data-ui-version='2'] .conclave-advanced,
html[data-ui-version='2'] .conclave-room-options,
html[data-ui-version='2'] .conclave-theorem,
html[data-ui-version='2'] .conclave-option,
html[data-ui-version='2'] .conclave-draft-options button,
html[data-ui-version='2'] .conclave-offer,
html[data-ui-version='2'] .conclave-result-card {
  background: color-mix(in srgb, var(--gdnf-bg-raised) 88%, transparent);
  border-color: var(--gdnf-hair);
  color: var(--gdnf-fg);
  box-shadow: none;
}

html[data-ui-version='2'] .conclave-name-field input,
html[data-ui-version='2'] .conclave-join-row input,
html[data-ui-version='2'] .conclave-code-input,
html[data-ui-version='2'] .conclave-room input {
  background: var(--gdnf-bg-strong);
  color: var(--gdnf-fg);
  border-color: var(--gdnf-hair);
  caret-color: var(--conclave-accent);
}

html[data-ui-version='2'] .conclave-option:hover,
html[data-ui-version='2'] .conclave-option:focus-visible,
html[data-ui-version='2'] .conclave-option.is-selected,
html[data-ui-version='2'] .conclave-draft-options button:hover,
html[data-ui-version='2'] .conclave-draft-options button:focus-visible,
html[data-ui-version='2'] .conclave-draft-options button.is-selected {
  background: color-mix(in srgb, var(--option-accent, var(--conclave-accent)) 12%, var(--gdnf-bg-raised));
  color: var(--gdnf-fg);
  border-color: var(--option-accent, var(--conclave-accent));
  filter: none;
}

/* Buttons get explicit semantic foreground. Never depend on inherited dark CSS. */
html[data-ui-version='2'] .conclave-body .primary-button,
html[data-ui-version='2'] .conclave-body .conclave-play-button {
  background: var(--conclave-accent);
  border-color: var(--conclave-accent);
  color: #101114;
  text-shadow: none;
}

html[data-ui-version='2'][data-visual-theme='dark'] .conclave-body .primary-button,
html[data-ui-version='2'][data-visual-theme='dark'] .conclave-body .conclave-play-button {
  color: #08090b;
}

html[data-ui-version='2'] .conclave-body .secondary-button,
html[data-ui-version='2'] .conclave-body .conclave-friends-button,
html[data-ui-version='2'] .conclave-start-card .conclave-join-row .secondary-button,
html[data-ui-version='2'] .conclave-room__actions > button,
html[data-ui-version='2'] .conclave-room-options button {
  background: var(--gdnf-bg-strong);
  border-color: var(--gdnf-fg);
  color: var(--gdnf-fg);
  text-shadow: none;
  filter: none;
}

html[data-ui-version='2'] .conclave-body .primary-button:hover,
html[data-ui-version='2'] .conclave-body .primary-button:focus-visible,
html[data-ui-version='2'] .conclave-body .secondary-button:hover,
html[data-ui-version='2'] .conclave-body .secondary-button:focus-visible,
html[data-ui-version='2'] .conclave-body .conclave-friends-button:hover,
html[data-ui-version='2'] .conclave-body .conclave-friends-button:focus-visible {
  filter: none;
  box-shadow: inset 0 -4px 0 color-mix(in srgb, currentColor 22%, transparent);
}

/* -------------------------------------------------------------------------- */
/* HP DAMAGE DEBT: clearly show the just-lost portion in neutral grey.         */
/* JS keeps --damage-debt alive for ~0.9 s; animation holds then fades.        */
/* -------------------------------------------------------------------------- */
html[data-ui-version='2'] .combat-integrity-track > em {
  background: color-mix(in srgb, var(--gdnf-muted) 82%, var(--gdnf-bg) 18%);
  opacity: .86;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--gdnf-fg) 28%, transparent);
  animation: gdnf-damage-debt-hold 900ms linear both;
}

@keyframes gdnf-damage-debt-hold {
  0%, 68% { opacity: .86; }
  100% { opacity: .08; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-version='2'] .combat-integrity-track > em {
    animation: none;
    opacity: .80;
  }
}

/* -------------------------------------------------------------------------- */
/* SOLO PAUSE: clean geometry; resume is visually primary, leave is secondary. */
/* -------------------------------------------------------------------------- */
html[data-ui-version='2'] .pause-panel {
  position: relative;
  width: min(920px, 100%);
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--gdnf-hair);
  border-top: 4px solid var(--gdnf-parallax);
  background: color-mix(in srgb, var(--gdnf-bg-raised) 96%, transparent);
  color: var(--gdnf-fg);
  box-shadow: none;
}

html[data-ui-version='2'] .pause-panel::before,
html[data-ui-version='2'] .pause-panel::after {
  display: none !important;
}

html[data-ui-version='2'] #pause-resume-button {
  background: var(--gdnf-fg);
  border-color: var(--gdnf-fg);
  color: var(--gdnf-bg);
}

html[data-ui-version='2'] #pause-leave-button {
  background: transparent;
  border-color: var(--gdnf-hair);
  color: var(--gdnf-fg);
}

html[data-ui-version='2'] #pause-theme-button {
  background: var(--gdnf-fg);
  border-color: var(--gdnf-fg);
  color: var(--gdnf-bg);
}

html[data-ui-version='2'] #pause-audio-button {
  background: color-mix(in srgb, var(--gdnf-bg) 84%, var(--gdnf-fg) 16%);
  color: var(--gdnf-fg);
}

/* Debrief CTA belongs to flow. Never leave it floating mid-viewport. */
html[data-ui-version='2'] .screen--debrief #return-altar-button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin-top: 22px;
  max-width: min(100%, 420px);
}

/* -------------------------------------------------------------------------- */
/* MOBILE COMBAT: overlays must preserve the battlefield.                     */
/* -------------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
  /* Only one pause UI on Solo mobile. JS also suppresses desktop pause-overlay. */
  html.gdnf-mobile .pause-overlay { display: none !important; }

  /* Top HUD becomes a set of content-sized glass chips instead of a wide slab. */
  html[data-ui-version='2'].gdnf-mobile .arena-hud--top {
    top: max(8px, env(safe-area-inset-top, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    right: auto;
    width: max-content;
    max-width: calc(100vw - max(66px, env(safe-area-inset-right, 0px) + 58px) - 16px);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    pointer-events: none;
  }

  html[data-ui-version='2'].gdnf-mobile .arena-hud-context {
    display: inline-grid;
    width: max-content;
    max-width: min(58vw, 270px);
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--gdnf-fg) 14%, transparent);
    background: color-mix(in srgb, var(--gdnf-bg) 48%, transparent);
    backdrop-filter: blur(5px) saturate(.75);
  }

  /* Own god and long edict are redundant in active mobile combat. */
  html[data-ui-version='2'].gdnf-mobile .arena-hud-context > #hud-god,
  html[data-ui-version='2'].gdnf-mobile .arena-hud-context > #hud-edict {
    display: none;
  }

  html[data-ui-version='2'].gdnf-mobile .arena-hostile-god {
    width: max-content;
    max-width: min(52vw, 240px);
    margin: 0;
    padding: 4px 7px 4px 9px;
    border-left-width: 3px;
    background: color-mix(in srgb, var(--hostile-god-accent) 8%, transparent);
    backdrop-filter: none;
  }

  html[data-ui-version='2'].gdnf-mobile .arena-hostile-god span { font-size: 5px; }
  html[data-ui-version='2'].gdnf-mobile .arena-hostile-god strong { font-size: 9px; }
  html[data-ui-version='2'].gdnf-mobile .arena-hostile-god small { display: none; }

  html[data-ui-version='2'].gdnf-mobile .hud-score,
  html[data-ui-version='2'].gdnf-mobile .hud-timer {
    min-width: 58px;
    width: max-content;
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--gdnf-fg) 13%, transparent);
    background: color-mix(in srgb, var(--gdnf-bg) 40%, transparent);
    backdrop-filter: blur(4px);
  }

  html[data-ui-version='2'].gdnf-mobile .hud-score span,
  html[data-ui-version='2'].gdnf-mobile .hud-timer span { font-size: 5px; }
  html[data-ui-version='2'].gdnf-mobile .hud-score strong,
  html[data-ui-version='2'].gdnf-mobile .hud-timer strong { font-size: 10px; }

  /* Pause button is deliberately tiny; match-status bars no longer expand it. */
  html.gdnf-mobile .mobile-pause-button,
  html.gdnf-mobile .mobile-pause-button.has-match-status {
    top: max(68px, calc(env(safe-area-inset-top, 0px) + 58px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 5px;
    border-color: color-mix(in srgb, var(--gdnf-fg) 28%, transparent);
    background: color-mix(in srgb, var(--gdnf-bg) 46%, transparent);
    box-shadow: none;
    backdrop-filter: blur(5px);
  }
  html.gdnf-mobile .mobile-pause-status { display: none !important; }
  html.gdnf-mobile .mobile-pause-glyph > i { background: var(--gdnf-fg); }

  /* Action controls stay tactile, but battlefield remains visible through them. */
  html.gdnf-mobile .mobile-action-cluster {
    width: min(35vw, 270px);
    gap: clamp(5px, 1vw, 8px);
  }

  html.gdnf-mobile .mobile-action-button,
  html[data-ui-version='2'].gdnf-mobile .mobile-action-button {
    width: clamp(44px, 7.2vw, 58px);
    height: clamp(44px, 7.2vw, 58px);
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--gdnf-fg) 30%, transparent);
    background: color-mix(in srgb, var(--gdnf-bg) var(--gdnf-mobile-glass), transparent);
    color: var(--gdnf-fg);
    box-shadow: none;
    backdrop-filter: blur(4px);
    opacity: var(--gdnf-mobile-control-alpha);
  }

  html.gdnf-mobile .mobile-action-button--dash {
    width: clamp(52px, 8.2vw, 66px);
    height: clamp(52px, 8.2vw, 66px);
  }

  html.gdnf-mobile .mobile-action-button.is-pressed {
    opacity: 1;
    background: color-mix(in srgb, var(--gdnf-parallax) 72%, var(--gdnf-bg));
    color: var(--gdnf-fg);
    transform: scale(.94);
  }

  html.gdnf-mobile .mobile-stick-base {
    border-color: color-mix(in srgb, var(--gdnf-fg) 24%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--gdnf-fg) 8%, transparent), color-mix(in srgb, var(--gdnf-bg) 18%, transparent) 68%, transparent 70%);
    opacity: .46;
  }
  html.gdnf-mobile .mobile-stick-base.is-active { opacity: .78; }
  html.gdnf-mobile .mobile-stick-knob {
    border-color: color-mix(in srgb, var(--gdnf-fg) 66%, transparent);
    background: color-mix(in srgb, var(--gdnf-bg) 35%, transparent);
  }

  /* Match menu is compact and scrollable. It no longer turns the whole viewport opaque. */
  html.gdnf-mobile .mobile-match-menu {
    align-items: flex-start;
    justify-items: end;
    place-items: initial;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--gdnf-bg) 18%, transparent);
    backdrop-filter: blur(2px);
  }

  html.gdnf-mobile .mobile-match-menu__panel {
    width: min(360px, calc(100vw - 16px));
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--gdnf-hair);
    background: color-mix(in srgb, var(--gdnf-bg-raised) 86%, transparent);
    color: var(--gdnf-fg);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--gdnf-parallax) 52%, transparent);
    backdrop-filter: blur(10px) saturate(.75);
    overflow-y: auto;
  }

  html.gdnf-mobile .mobile-match-menu p { color: var(--gdnf-parallax); font-size: 6px; }
  html.gdnf-mobile .mobile-match-menu strong { color: var(--gdnf-fg); font-size: clamp(22px, 6vw, 34px); }
  html.gdnf-mobile .mobile-match-menu span { color: var(--gdnf-muted); font-size: 8px; line-height: 1.35; }
  html.gdnf-mobile .mobile-match-status {
    gap: 7px;
    padding: 8px;
    border-color: var(--gdnf-hair-soft);
    background: color-mix(in srgb, var(--gdnf-bg) 42%, transparent);
  }

  html.gdnf-mobile .mobile-match-menu .primary-button,
  html.gdnf-mobile .mobile-match-menu .secondary-button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 8px;
  }

  html.gdnf-mobile .mobile-match-menu [data-mobile-theme] {
    background: var(--gdnf-fg);
    color: var(--gdnf-bg);
    border-color: var(--gdnf-fg);
  }

  /* When menu is open, actual controls disappear entirely instead of living under it. */
  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;
    pointer-events: none !important;
  }

  /* Debrief CTA remains in normal flow on phone. */
  html.gdnf-mobile .screen--debrief #return-altar-button {
    display: block;
    width: 100%;
    max-width: none;
    margin: 18px 0 max(18px, env(safe-area-inset-bottom, 0px));
  }

  /* God choice is a horizontal touch carousel in both orientations. */
  html.gdnf-mobile .screen--gods {
    overflow-y: auto;
    padding-bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px));
  }
  html.gdnf-mobile .god-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding: 2px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
  }
  html.gdnf-mobile .god-grid::-webkit-scrollbar { display: none; }
  html.gdnf-mobile .god-card,
  html.gdnf-mobile .god-card:nth-child(n) {
    flex: 0 0 min(78vw, 330px);
    min-height: min(62dvh, 430px);
    scroll-snap-align: center;
    border: 1px solid var(--gdnf-hair);
  }
  html.gdnf-mobile .selection-footer {
    position: sticky;
    z-index: 8;
    bottom: max(0px, env(safe-area-inset-bottom, 0px));
    padding: 9px 0 max(9px, env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--gdnf-bg) 82%, transparent);
    backdrop-filter: blur(8px);
  }

  /* Conclave mobile lobby/room: one obvious vertical flow, no hidden second column. */
  html.gdnf-mobile .conclave-lobby,
  html.gdnf-mobile .conclave-room {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 0;
    height: calc(100dvh - 48px);
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }
  html.gdnf-mobile .conclave-intro,
  html.gdnf-mobile .conclave-config,
  html.gdnf-mobile .conclave-room {
    width: 100%;
    min-width: 0;
    padding: 18px max(12px, env(safe-area-inset-right, 0px)) 22px max(12px, env(safe-area-inset-left, 0px));
    border-right: 0;
  }
  html.gdnf-mobile .conclave-intro { min-height: auto; }
  html.gdnf-mobile .conclave-intro h1 { font-size: clamp(54px, 18vw, 92px); }
  html.gdnf-mobile .conclave-start-card { width: 100%; min-width: 0; padding: 14px; box-shadow: none; }
  html.gdnf-mobile .conclave-entry__primary,
  html.gdnf-mobile .conclave-join-row,
  html.gdnf-mobile .conclave-choice-grid,
  html.gdnf-mobile .conclave-vessel-grid,
  html.gdnf-mobile .conclave-loadout,
  html.gdnf-mobile .conclave-seats,
  html.gdnf-mobile .conclave-room__actions {
    grid-template-columns: 1fr !important;
    width: 100%;
    min-width: 0;
  }
  html.gdnf-mobile .conclave-entry__primary button,
  html.gdnf-mobile .conclave-join-row button,
  html.gdnf-mobile .conclave-room__actions > button {
    width: 100%;
    min-width: 0;
  }
}

/* Landscape phones have little vertical room. Keep God cards short and menu dense. */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  html.gdnf-mobile .screen--gods { padding-top: 42px; }
  html.gdnf-mobile .section-heading { margin-bottom: 8px; }
  html.gdnf-mobile .section-heading h2 { font-size: clamp(28px, 8vh, 42px); }
  html.gdnf-mobile .god-card,
  html.gdnf-mobile .god-card:nth-child(n) {
    flex-basis: min(42vw, 300px);
    min-height: min(68dvh, 300px);
  }
  html.gdnf-mobile .god-card canvas { max-height: 108px; }
  html.gdnf-mobile .god-card-profile,
  html.gdnf-mobile .god-card-doctrine { font-size: 6px; line-height: 1.25; }
  html.gdnf-mobile .selection-footer { padding-block: 5px; }

  html.gdnf-mobile .mobile-match-menu__panel {
    width: min(430px, 54vw);
    max-height: calc(100dvh - 12px);
    padding: 10px;
    gap: 6px;
  }
  html.gdnf-mobile .mobile-match-status { display: none; }
  html.gdnf-mobile .mobile-match-menu strong { font-size: clamp(18px, 6vh, 27px); }
  html.gdnf-mobile .mobile-match-menu span { font-size: 7px; }
  html.gdnf-mobile .mobile-match-menu .primary-button,
  html.gdnf-mobile .mobile-match-menu .secondary-button { min-height: 34px; }

  html.gdnf-mobile .mobile-pause-button,
  html.gdnf-mobile .mobile-pause-button.has-match-status {
    top: max(50px, calc(env(safe-area-inset-top, 0px) + 44px));
    width: 36px;
    height: 36px;
  }
}

/* -------------------------------------------------------------------------- */
/* Narrow desktop/portrait multiplayer remains scrollable and actionable.     */
/* -------------------------------------------------------------------------- */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  html:not(.gdnf-mobile) .conclave-lobby,
  html:not(.gdnf-mobile) .conclave-room {
    grid-template-columns: 1fr !important;
    align-content: start;
    overflow-y: auto;
  }
  html:not(.gdnf-mobile) .conclave-intro,
  html:not(.gdnf-mobile) .conclave-config,
  html:not(.gdnf-mobile) .conclave-room {
    padding: clamp(22px, 5vw, 48px);
  }
  html:not(.gdnf-mobile) .conclave-entry__primary,
  html:not(.gdnf-mobile) .conclave-join-row { grid-template-columns: 1fr; }
  html:not(.gdnf-mobile) .conclave-seats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  html:not(.gdnf-mobile) .conclave-room__actions { display: grid; grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------- */
/* MULTIPLAYER ACTION CONTRAST: material hierarchy without theme-dependent     */
/* inherited colors. Primary is inverse-neutral with an accent rail; secondary */
/* stays transparent/high-contrast.                                            */
/* -------------------------------------------------------------------------- */
html[data-ui-version='2'] .duel-body {
  --duel-bg: var(--gdnf-bg);
  --duel-surface: var(--gdnf-bg-raised);
  --duel-surface-raised: var(--gdnf-bg-strong);
  --duel-paper: var(--gdnf-bg);
  --duel-ink: var(--gdnf-fg);
  --duel-fg: var(--gdnf-fg);
  --duel-muted: var(--gdnf-muted);
  --duel-line: var(--gdnf-hair);
  color: var(--gdnf-fg);
  background: var(--gdnf-bg);
}

html[data-ui-version='2'] .duel-lobby-copy,
html[data-ui-version='2'] .duel-mode-facts article,
html[data-ui-version='2'] .duel-config-panel,
html[data-ui-version='2'] .duel-advanced,
html[data-ui-version='2'] .duel-entry-card,
html[data-ui-version='2'] .duel-join-card,
html[data-ui-version='2'] .duel-waiting-card {
  background: color-mix(in srgb, var(--gdnf-bg-raised) 92%, transparent);
  border-color: var(--gdnf-hair);
  color: var(--gdnf-fg);
}

html[data-ui-version='2'] .duel-body .duel-create-button,
html[data-ui-version='2'] .duel-body .primary-button,
html[data-ui-version='2'] .conclave-body .primary-button,
html[data-ui-version='2'] .conclave-body .conclave-play-button {
  position: relative;
  border: 1px solid var(--gdnf-fg);
  background: var(--gdnf-fg);
  color: var(--gdnf-bg);
  text-shadow: none;
  box-shadow: inset 7px 0 0 var(--duel-accent, var(--conclave-accent, var(--gdnf-parallax)));
  filter: none;
}

html[data-ui-version='2'] .duel-body .duel-create-button:hover,
html[data-ui-version='2'] .duel-body .duel-create-button:focus-visible,
html[data-ui-version='2'] .duel-body .primary-button:hover,
html[data-ui-version='2'] .duel-body .primary-button:focus-visible,
html[data-ui-version='2'] .conclave-body .primary-button:hover,
html[data-ui-version='2'] .conclave-body .primary-button:focus-visible,
html[data-ui-version='2'] .conclave-body .conclave-play-button:hover,
html[data-ui-version='2'] .conclave-body .conclave-play-button:focus-visible {
  background: var(--gdnf-bg);
  color: var(--gdnf-fg);
  border-color: var(--gdnf-fg);
  box-shadow: inset 7px 0 0 var(--duel-accent, var(--conclave-accent, var(--gdnf-parallax)));
  transform: none;
  filter: none;
}

html[data-ui-version='2'] .duel-body .secondary-button,
html[data-ui-version='2'] .duel-body #duel-join,
html[data-ui-version='2'] .duel-body #duel-wait-leave,
html[data-ui-version='2'] .duel-body #duel-rematch,
html[data-ui-version='2'] .conclave-body .secondary-button,
html[data-ui-version='2'] .conclave-body .conclave-friends-button,
html[data-ui-version='2'] .conclave-room__actions > button,
html[data-ui-version='2'] .conclave-room-options button {
  background: transparent;
  color: var(--gdnf-fg);
  border-color: var(--gdnf-hair);
  text-shadow: none;
  filter: none;
}

html[data-ui-version='2'] .duel-body #duel-join,
html[data-ui-version='2'] .duel-body #duel-wait-leave,
html[data-ui-version='2'] .duel-body #duel-rematch {
  border: 1px solid var(--gdnf-fg);
}

html[data-ui-version='2'] .duel-body .duel-code-button {
  background: color-mix(in srgb, var(--gdnf-bg) 94%, var(--duel-accent) 6%);
  color: var(--gdnf-fg);
  border-color: var(--duel-accent);
}
html[data-ui-version='2'] .duel-body .duel-code-button #duel-room-code { color: var(--gdnf-fg); }

/* Conclave choice/draft copy must not inherit a dark-only foreground. */
html[data-ui-version='2'] .conclave-body .conclave-draft-options button,
html[data-ui-version='2'] .conclave-body .conclave-option,
html[data-ui-version='2'] .conclave-body .conclave-theorem,
html[data-ui-version='2'] .conclave-body .conclave-seat {
  color: var(--gdnf-fg);
}

/* Theme control is deliberately inverse even inside multiplayer mobile menus.
   Keep this last: generic multiplayer secondary-button rules must not neutralize it. */
html[data-ui-version='2'].gdnf-mobile .mobile-match-menu [data-mobile-theme],
html[data-ui-version='2'].gdnf-mobile .conclave-body .mobile-match-menu [data-mobile-theme],
html[data-ui-version='2'].gdnf-mobile .duel-body .mobile-match-menu [data-mobile-theme] {
  background: var(--gdnf-fg);
  color: var(--gdnf-bg);
  border: 1px solid var(--gdnf-fg);
  filter: none;
  text-shadow: none;
}

/* Conclave mobile match menu owns its material in both themes. Old Conclave
   dark-only rules must not leak through when the global theme is light. */
html[data-ui-version='2'].gdnf-mobile .conclave-body .mobile-match-menu__panel {
  background: color-mix(in srgb, var(--gdnf-bg-raised) 92%, transparent);
  color: var(--gdnf-fg);
  border-color: var(--gdnf-hair);
}
html[data-ui-version='2'].gdnf-mobile .conclave-body .mobile-match-menu .secondary-button:not([data-mobile-theme]) {
  background: transparent;
  color: var(--gdnf-fg);
  border: 1px solid var(--gdnf-hair);
}
html[data-ui-version='2'].gdnf-mobile .conclave-body .mobile-match-menu .primary-button {
  background: var(--gdnf-fg);
  color: var(--gdnf-bg);
  border-color: var(--gdnf-fg);
}

/* Light Conclave details must not retain legacy dark translucent wells. */
html[data-ui-version='2'] .conclave-body .conclave-advanced fieldset,
html[data-ui-version='2'] .conclave-body .conclave-profile-drawer {
  background: color-mix(in srgb, var(--gdnf-bg-raised) 92%, transparent);
  border-color: var(--gdnf-hair);
  color: var(--gdnf-fg);
}

/* -------------------------------------------------------------------------- */
/* 2.4 final mobile menu clearance: match menu must begin below the persistent */
/* topbar/countdown region instead of clipping its own title in short landscape.*/
/* -------------------------------------------------------------------------- */
@media (max-width: 950px), (pointer: coarse) {
  html[data-ui-version='2'].gdnf-mobile .mobile-match-menu {
    padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 52px));
  }
  html[data-ui-version='2'].gdnf-mobile .mobile-match-menu__panel {
    max-height: calc(100dvh - max(68px, calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 60px)));
  }
}
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  html[data-ui-version='2'].gdnf-mobile .mobile-match-menu__panel {
    max-height: calc(100dvh - max(66px, calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 58px)));
  }
}

/* -------------------------------------------------------------------------- */
/* 2.4 mobile cleanup: decorative onboarding art must never read as a control. */
/* The large Void sigil sits behind the READY / I AM NOT A WEAPON decision on */
/* desktop, but on a phone it becomes a tappable-looking circle in the center. */
/* -------------------------------------------------------------------------- */
@media (max-width: 950px), (pointer: coarse) {
  html[data-ui-version='2'].gdnf-mobile .screen--void .void-sigil {
    display: none !important;
  }
}

/* Local vessel HUD should read as instrumentation, not as a white card pasted */
/* over combat. Keep the integrity rail and typography as the ownership cue.   */
@media (max-width: 950px), (pointer: coarse) {
  html[data-ui-version='2'].gdnf-mobile[data-visual-theme='light'] .combat-character-hud,
  html[data-ui-version='2'].gdnf-mobile[data-theme='light'] .combat-character-hud {
    background: color-mix(in srgb, var(--gdnf-bg) 38%, transparent);
    border-color: color-mix(in srgb, var(--gdnf-fg) 14%, transparent);
    border-left-color: var(--integrity-color);
    backdrop-filter: blur(8px) saturate(.72);
  }
}

html[data-ui-version='2'] .offer-decision-note {
  margin: 2px 0 0;
  color: var(--gdnf-muted);
  font: 700 7px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}