/* GDNF UI/UX 2.2 final override. Loaded after ui-v2.css. */

/* extracted from styles.css */
/* ========================================================================== */
/* UI / UX 2.2 — G05B EDGE production language                               */
/* Stable typography, warm materials, one local color voltage. Combat layout  */
/* remains unchanged except for the desktop dash collision fix.               */
/* ========================================================================== */

:root {
  --paper: #f5f0e4;
  --panel: rgba(236, 228, 212, .94);
  --ink: #1a181b;
  --muted: rgba(26, 24, 27, .70);
  --faint: rgba(26, 24, 27, .11);
  --hairline: rgba(26, 24, 27, .34);
  --shadow: rgba(36, 27, 31, .16);
  --g05-field-opacity: .12;
  --g05-edge-opacity: .94;
  --g05-material: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);
}

html[data-theme='dark'] {
  --paper: #141216;
  --panel: rgba(31, 27, 35, .94);
  --ink: #f4eee2;
  --muted: rgba(244, 238, 226, .70);
  --faint: rgba(244, 238, 226, .10);
  --hairline: rgba(244, 238, 226, .31);
  --shadow: rgba(0, 0, 0, .42);
  --g05-material: color-mix(in srgb, var(--paper) 90%, var(--ink) 10%);
}

body,
.app-shell {
  background-color: var(--paper);
}

.app-shell {
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), var(--faint) 50%, transparent calc(50% + .5px)),
    radial-gradient(circle at 50% 52%, transparent 0 31%, color-mix(in srgb, var(--accent) 8%, transparent) 31.15%, transparent 31.45%),
    var(--paper);
}

/* Stable interaction foreground: states add layers instead of inverting copy. */
.utility-brand:hover,
.utility-brand:focus-visible,
.utility-button:hover {
  background: color-mix(in srgb, var(--paper) 86%, var(--accent) 14%);
  color: var(--ink);
}

.primary-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 38%, transparent);
  background: var(--g05-material);
  color: var(--ink);
  box-shadow: inset 8px 0 0 var(--accent), 7px 7px 0 color-mix(in srgb, var(--accent) 78%, transparent);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.primary-button::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  content: '';
  background: var(--accent);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.primary-button:hover:not(:disabled),
.primary-button:focus-visible:not(:disabled) {
  color: var(--ink);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--g05-material) 90%, var(--accent) 10%);
  transform: translate(2px, 2px);
  box-shadow: inset 8px 0 0 var(--accent), 4px 4px 0 color-mix(in srgb, var(--accent) 84%, transparent);
}
.primary-button:active:not(:disabled) {
  color: var(--ink);
  transform: translate(5px, 5px);
  box-shadow: inset 8px 0 0 var(--accent), 1px 1px 0 var(--accent);
}
.main-menu-primary small {
  color: var(--muted);
}

.secondary-button {
  position: relative;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 58%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.secondary-button::before {
  position: absolute;
  left: 0;
  top: -2px;
  width: 0;
  height: 3px;
  content: '';
  background: var(--accent);
  transition: width 130ms ease;
}
.secondary-button:hover:not(:disabled),
.secondary-button:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--paper) 91%, var(--accent) 9%);
  color: var(--ink);
}
.secondary-button:hover:not(:disabled)::before,
.secondary-button:focus-visible:not(:disabled)::before { width: 42%; }

.text-button,
#refuse-button {
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  padding-inline: 0;
  text-underline-offset: .35em;
}
.text-button:hover,
.text-button:focus-visible,
#refuse-button:hover,
#refuse-button:focus-visible {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* Utility navigation: editorial rails, not Windows-style gray cards. */
.game-menu-section {
  gap: 7px;
  padding: 13px 14px 15px;
  border: 0;
  border-left: 4px solid color-mix(in srgb, var(--accent) 68%, transparent);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 96%, var(--accent) 4%);
}
.game-menu-label {
  border-bottom-color: color-mix(in srgb, var(--ink) 42%, transparent);
  color: var(--muted);
}
.game-menu-action {
  position: relative;
  min-height: 54px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  padding-inline: 10px 20px;
}
.game-menu-action::after {
  position: absolute;
  top: -2px;
  right: 0;
  width: 0;
  height: 3px;
  content: '';
  background: var(--accent);
  transition: width 120ms ease;
}
.game-menu-action:hover,
.game-menu-action:focus-visible,
.game-menu-action.is-primary {
  border-color: color-mix(in srgb, var(--ink) 62%, transparent);
  background: color-mix(in srgb, var(--paper) 88%, var(--accent) 12%);
  color: var(--ink);
}
.game-menu-action:hover::after,
.game-menu-action:focus-visible::after,
.game-menu-action.is-primary::after { width: 44%; }
.game-menu-action:hover span,
.game-menu-action:focus-visible span,
.game-menu-action.is-primary span { color: var(--muted); }
.game-menu-settings-grid .utility-button,
.game-menu-contact {
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  background: transparent;
  color: var(--ink);
}

/* G05B stage: one broad quiet field plus one strong edge. */
.screen--menu,
.screen--void,
.screen--altar,
.screen--gods {
  isolation: isolate;
}
.screen--menu {
  background:
    linear-gradient(90deg, transparent 0 64%, color-mix(in srgb, var(--ink) 11%, transparent) 64% calc(64% + 1px), transparent calc(64% + 1px)),
    var(--paper);
}
.screen--menu::before {
  inset: clamp(54px, 7vh, 90px) var(--edge);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}
.screen--menu::after,
.screen--void::after,
.screen--altar::after {
  position: absolute;
  z-index: 0;
  content: '';
  pointer-events: none;
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  border: 2px solid color-mix(in srgb, var(--accent) 92%, transparent);
  clip-path: polygon(3% 8%, 91% 0, 100% 51%, 80% 100%, 11% 88%);
}
.screen--menu::after {
  top: 11%; right: -2%; width: min(45vw, 680px); height: 72%;
  transform: rotate(-3deg);
}
.menu-sigil,
.main-menu-copy,
.main-menu-brief,
.void-copy,
.void-sigil,
.altar-header,
.altar-layout { z-index: 2; }
.menu-sigil { opacity: .88; filter: saturate(1.08) contrast(1.05); }
.main-menu-brief {
  border: 0;
  border-left: 6px solid var(--accent);
  background: color-mix(in srgb, var(--paper) 91%, var(--accent) 9%);
  box-shadow: none;
}
.main-menu-brief ol { border-top-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.mode-button {
  position: relative;
  border: 0;
  border-top: 2px solid color-mix(in srgb, var(--ink) 54%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: transparent;
  color: var(--ink);
}
.mode-button::after {
  position: absolute; top: -3px; left: 0; width: 0; height: 4px;
  content: ''; background: var(--accent); transition: width 130ms ease;
}
.mode-button:hover,
.mode-button:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 65%, transparent);
  background: color-mix(in srgb, var(--paper) 91%, var(--accent) 9%);
  color: var(--ink);
}
.mode-button:hover::after,
.mode-button:focus-visible::after { width: 55%; }
.mode-button small { color: var(--muted); }

.screen--void::after {
  top: 12%; right: 1%; width: min(42vw, 620px); height: 70%;
  transform: rotate(-4deg);
}
.screen--void::before { border-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.void-sigil { opacity: .82; filter: saturate(1.08) contrast(1.06); }

/* God selection: stable copy, additive selected fracture, no card inversion. */
.screen--gods {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--ink) 10%, transparent) calc(25% - 1px) 25%),
    var(--paper);
}
.god-grid { border-color: color-mix(in srgb, var(--ink) 78%, transparent); }
.god-card {
  --card-quiet: color-mix(in srgb, var(--paper) 97%, var(--card-accent) 3%);
  isolation: isolate;
  border-right-color: color-mix(in srgb, var(--ink) 52%, transparent);
  background: var(--card-quiet);
  color: var(--ink);
  transition: background 120ms ease, border-color 120ms ease;
}
.god-card::before {
  z-index: 0;
  inset: 17% -15% -8% 11%;
  height: auto;
  background: color-mix(in srgb, var(--card-accent) 9%, transparent);
  opacity: 1;
  clip-path: polygon(2% 7%, 92% 0, 100% 48%, 76% 100%, 12% 87%);
  transform: rotate(-3deg);
}
.god-card::after {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0; height: 0;
  content: '';
  background: var(--card-accent);
  transition: height 120ms ease;
}
.god-card:hover,
.god-card:focus-visible {
  background: color-mix(in srgb, var(--paper) 89%, var(--card-accent) 11%);
  color: var(--ink);
  border-color: var(--card-accent);
}
.god-card.is-selected {
  background: color-mix(in srgb, var(--paper) 84%, var(--card-accent) 16%);
  color: var(--ink);
  box-shadow: none;
}
.god-card.is-selected::before {
  background: color-mix(in srgb, var(--card-accent) 17%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 70%, transparent);
}
.god-card:hover::after { height: 4px; }
.god-card.is-selected::after { height: 9px; }
.god-card-number,
.god-card-doctrine,
.god-card-prompt,
.god-card h3,
.god-card canvas { position: relative; z-index: 2; color: var(--ink); }
.god-card canvas {
  opacity: .82;
  filter: saturate(1.13) contrast(1.11);
}
.god-card:hover canvas { opacity: .93; }
.god-card.is-selected canvas { opacity: 1; filter: saturate(1.20) contrast(1.12); }
.god-card-number { opacity: .68; }
.god-card-prompt { border-top-color: color-mix(in srgb, var(--ink) 52%, transparent); opacity: .68; }

/* Altar: rails/materials, no generic gray cards. */
.screen--altar::after {
  right: -4%; bottom: -8%; width: 43%; height: 54%; transform: rotate(-5deg);
  opacity: .58;
}
.resource-ledger {
  border: 0;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  background: color-mix(in srgb, var(--paper) 91%, var(--accent) 9%);
}
.resource-ledger > div { border-right-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.altar-layout { border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.altar-panel {
  position: relative;
  background: color-mix(in srgb, var(--paper) 96%, var(--accent) 4%);
  border-right-color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.altar-panel::before {
  position: absolute; top: 0; left: 0; width: 0; height: 4px;
  content: ''; background: var(--accent);
}
.altar-panel:focus-within::before,
.altar-panel:hover::before { width: 48%; }
.panel-label { border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); }

/* Pause: calm G05A material, theme action remains available. */
.pause-overlay { background: color-mix(in srgb, var(--paper) 79%, transparent); }
.pause-panel {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ink) 48%, transparent);
  border-top: 5px solid var(--accent);
  background: color-mix(in srgb, var(--paper) 94%, var(--accent) 6%);
  box-shadow: 0 22px 80px var(--shadow);
}
.pause-panel::after {
  position: absolute; z-index: -1; right: -5%; bottom: -10%; width: 43%; height: 45%;
  content: ''; background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  clip-path: polygon(3% 9%, 92% 0, 100% 50%, 78% 100%, 12% 88%);
  transform: rotate(-4deg);
}
.pause-small-button { width: auto; text-align: center; }
#pause-theme-button { border-top-color: var(--accent); }

/* Desktop: keep dash away from local HP. */
@media (min-width: 901px) {
  .arena-hud--bottom { position: absolute; }
  .vital-block--dash {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(180px, 15vw);
    transform: translateX(-50%);
  }
  .ability-hud,
  .combat-ability-strip { margin-left: auto; }
}

/* Vitals that are not unlocked do not reserve a mysterious shield row. */
.combat-character-hud[data-shield-unlocked='false'] .combat-character-hud__shield,
.combat-character-hud[data-shield-unlocked='false'] [data-shield-row] { display: none !important; }

@keyframes g05-edge-enter {
  from { opacity: 0; transform: translate3d(16px, -8px, 0) rotate(-3deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg); }
}
.screen.is-active.screen--menu::after,
.screen.is-active.screen--void::after,
.screen.is-active.screen--altar::after { animation: g05-edge-enter 340ms cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .screen.is-active.screen--menu::after,
  .screen.is-active.screen--void::after,
  .screen.is-active.screen--altar::after,
  .primary-button,
  .mode-button,
  .god-card { animation: none !important; transition: none !important; }
}


/* extracted from mobile.css */
/* UI / UX 2.2 mobile production overrides ------------------------------- */
html.gdnf-mobile {
  --gdnf-mobile-edge: max(12px, env(safe-area-inset-left));
}
html.gdnf-mobile .screen {
  padding-left: max(14px, var(--gdnf-safe-left));
  padding-right: max(14px, var(--gdnf-safe-right));
}
html.gdnf-mobile .screen--menu::after {
  top: 12%; right: -16%; width: 58%; height: 72%; opacity: .76;
  clip-path: polygon(4% 8%, 91% 0, 100% 48%, 76% 100%, 13% 86%);
}
html.gdnf-mobile .main-menu-copy { z-index: 3; }
html.gdnf-mobile .main-menu-brief { display: none; }
html.gdnf-mobile .main-menu-primary { min-height: 54px; }
html.gdnf-mobile .mode-button { min-height: 54px; }

html.gdnf-mobile .screen--gods {
  background: var(--paper);
}
html.gdnf-mobile .god-grid {
  border-color: color-mix(in srgb, var(--ink) 60%, transparent);
}
html.gdnf-mobile .god-card {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 96%, var(--card-accent) 4%);
}
html.gdnf-mobile .god-card::before { inset: 16% -18% -12% 18%; }
html.gdnf-mobile .god-card.is-selected {
  background: color-mix(in srgb, var(--paper) 83%, var(--card-accent) 17%);
}
html.gdnf-mobile .god-card canvas {
  opacity: .90;
  filter: saturate(1.22) contrast(1.12);
}
html.gdnf-mobile .god-card h3,
html.gdnf-mobile .god-card-doctrine,
html.gdnf-mobile .god-card-number { color: var(--ink); }

html.gdnf-mobile .pause-overlay {
  padding: max(10px, var(--gdnf-safe-top)) max(10px, var(--gdnf-safe-right)) max(10px, var(--gdnf-safe-bottom)) max(10px, var(--gdnf-safe-left));
}
html.gdnf-mobile .pause-panel {
  width: min(96vw, 920px);
  max-height: calc(var(--gdnf-vv-height, 100dvh) - var(--gdnf-safe-top) - var(--gdnf-safe-bottom) - 16px);
  padding: 14px;
  gap: 10px;
}
html.gdnf-mobile .pause-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; }
html.gdnf-mobile .pause-actions { gap: 8px; }
html.gdnf-mobile .pause-small-button { min-height: 42px; }

/* Touch controls own the lower corners. HUD cannot occupy those areas. */
html.gdnf-mobile .arena-hud--bottom {
  left: max(10px, var(--gdnf-safe-left));
  right: max(10px, var(--gdnf-safe-right));
  bottom: max(8px, var(--gdnf-safe-bottom));
  pointer-events: none;
}
html.gdnf-mobile .vital-block--dash { display: none; }
html.gdnf-mobile .combat-character-hud-slot {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: min(34vw, 220px);
}
html.gdnf-mobile .combat-ability-strip,
html.gdnf-mobile .ability-hud {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: min(43vw, 360px);
}
html.gdnf-mobile .screen--arena::after { display: none; }

@media (orientation: landscape) and (max-height: 520px) {
  html.gdnf-mobile .pause-title { font-size: clamp(24px, 6vh, 38px); }
  html.gdnf-mobile .pause-hint { font-size: 8px; }
  html.gdnf-mobile .pause-block { padding: 8px; }
  html.gdnf-mobile .pause-list { font-size: 8px; }
  html.gdnf-mobile .pause-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* extracted from duel.css */
/* UI / UX 2.2 — G05B EDGE lobby overrides ------------------------------ */
#duel-lobby {
  background:
    linear-gradient(90deg, transparent 0 38%, rgba(244,238,226,.10) 38% 38.07%, transparent 38.07%),
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--duel-accent) 15%, transparent), transparent 26%),
    #141216;
}
#duel-lobby::after {
  position: fixed;
  z-index: -1;
  right: -4vw;
  top: 11vh;
  width: min(48vw, 760px);
  height: 72vh;
  content: '';
  pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--duel-accent) 82%, transparent);
  background: color-mix(in srgb, var(--duel-accent) 11%, transparent);
  clip-path: polygon(3% 8%, 91% 0, 100% 51%, 79% 100%, 12% 87%);
  transform: rotate(-3deg);
}
.duel-lobby-copy {
  background: color-mix(in srgb, #141216 94%, var(--duel-accent) 6%);
}
.duel-mode-facts article,
.duel-config-panel,
.duel-advanced,
.duel-entry-card {
  border-color: color-mix(in srgb, var(--duel-fg) 25%, transparent);
  background: color-mix(in srgb, #141216 92%, var(--duel-accent) 8%);
  box-shadow: none;
}
.duel-entry-card { border-top: 4px solid var(--duel-accent); }
.duel-option {
  isolation: isolate;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--duel-fg) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--duel-fg) 12%, transparent);
  background: color-mix(in srgb, #141216 96%, var(--option-accent, var(--duel-accent)) 4%);
  color: var(--duel-fg);
  transform: none;
}
.duel-option::before { width: 4px; opacity: .42; }
.duel-option::after {
  position: absolute; z-index: -1; inset: 16% -12% -18% 18%; content: '';
  background: color-mix(in srgb, var(--option-accent, var(--duel-accent)) 8%, transparent);
  clip-path: polygon(2% 8%, 92% 0, 100% 49%, 75% 100%, 12% 87%);
}
.duel-option:hover,
.duel-option:focus-visible,
.duel-option.is-selected {
  border-color: var(--option-accent, var(--duel-accent));
  background: color-mix(in srgb, #141216 84%, var(--option-accent, var(--duel-accent)) 16%);
  color: var(--duel-fg);
  box-shadow: none;
  transform: none;
}
.duel-option.is-selected::before { opacity: 1; width: 7px; }
.duel-option.is-selected span { color: var(--duel-muted); }

@media (prefers-reduced-motion: reduce) {
  #duel-lobby::after,
  .duel-option { transition: none !important; animation: none !important; }
}


/* extracted from conclave.css */
/* UI / UX 2.2 — G05B EDGE lobby overrides ------------------------------ */
:root {
  --conclave-bg: #141216;
  --conclave-fg: #f4eee2;
  --conclave-muted: rgba(244,238,226,.70);
  --conclave-line: rgba(244,238,226,.25);
  --conclave-panel: rgba(31,27,35,.94);
}
.conclave-body {
  background:
    linear-gradient(rgba(244,238,226,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,238,226,.022) 1px, transparent 1px),
    var(--conclave-bg);
  background-size: 48px 48px;
}
.conclave-lobby::after {
  right: -4vw;
  bottom: -12vh;
  width: min(51vw, 780px);
  height: 82vh;
  aspect-ratio: auto;
  border: 2px solid color-mix(in srgb, var(--conclave-accent) 80%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--conclave-accent) 10%, transparent);
  box-shadow: none;
  clip-path: polygon(3% 8%, 91% 0, 100% 51%, 79% 100%, 12% 87%);
  transform: rotate(-3deg);
}
.conclave-intro {
  background: color-mix(in srgb, var(--conclave-bg) 94%, var(--conclave-accent) 6%);
}
.conclave-simple-rules article,
.conclave-start-card,
.conclave-advanced,
.conclave-room-options {
  border-color: color-mix(in srgb, var(--conclave-fg) 24%, transparent);
  background: color-mix(in srgb, var(--conclave-bg) 93%, var(--conclave-accent) 7%);
  box-shadow: none;
}
.conclave-start-card { border-top: 4px solid var(--conclave-accent); }
.conclave-option {
  isolation: isolate;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--conclave-fg) 32%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--conclave-fg) 12%, transparent);
  background: color-mix(in srgb, var(--conclave-bg) 96%, var(--option-accent, var(--conclave-accent)) 4%);
}
.conclave-option::before { opacity: .42; }
.conclave-option::after {
  position: absolute; z-index: 0; inset: 16% -12% -18% 18%; content: '';
  background: color-mix(in srgb, var(--option-accent, var(--conclave-accent)) 8%, transparent);
  clip-path: polygon(2% 8%, 92% 0, 100% 49%, 75% 100%, 12% 87%);
}
.conclave-option:hover,
.conclave-option:focus-visible,
.conclave-option.is-selected {
  border-color: var(--option-accent, var(--conclave-accent));
  background: color-mix(in srgb, var(--conclave-bg) 84%, var(--option-accent, var(--conclave-accent)) 16%);
  color: var(--conclave-fg);
}
.conclave-option.is-selected::before { width: 7px; opacity: 1; }
.conclave-option strong,
.conclave-option span,
.conclave-option small { z-index: 1; }
.primary-button {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--conclave-fg) 38%, transparent);
  background: color-mix(in srgb, var(--conclave-bg) 87%, var(--conclave-fg) 13%);
  color: var(--conclave-fg);
  box-shadow: inset 8px 0 0 var(--conclave-accent);
}
.primary-button:hover,
.primary-button:focus-visible {
  filter: none;
  border-color: var(--conclave-accent);
  background: color-mix(in srgb, var(--conclave-bg) 82%, var(--conclave-accent) 18%);
}
.secondary-button {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--conclave-fg) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--conclave-fg) 14%, transparent);
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .conclave-lobby::after,
  .conclave-option { transition: none !important; animation: none !important; }
}


/* UI/UX 2.2 production corrections -------------------------------------- */
/* Keep desktop dash clearly separated from the local integrity card. */
@media (min-width: 901px) {
  html[data-ui-version='2']:not(.gdnf-mobile) .arena-hud--bottom .vital-block--dash {
    position: absolute;
    left: calc(clamp(252px, 23vw, 334px) + 18px);
    right: auto;
    bottom: 0;
    width: 120px;
    transform: none;
    opacity: .62;
  }
}

/* The touch zones own the lower corners. Local status is a non-interactive
   top-left instrument, not an obstacle over the floating movement stick. */
html[data-ui-version='2'].gdnf-mobile .arena-hud--bottom {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: block;
}
html[data-ui-version='2'].gdnf-mobile .combat-character-hud-slot {
  position: fixed;
  z-index: 7;
  left: max(10px, var(--gdnf-safe-left));
  top: max(106px, calc(var(--gdnf-safe-top) + 98px));
  bottom: auto;
  width: min(220px, 24vw);
  max-width: min(220px, 24vw);
  transform: none;
  pointer-events: none;
}
html[data-ui-version='2'].gdnf-mobile .combat-character-hud {
  padding: 6px 8px;
  background: color-mix(in srgb, var(--gdnf-bg) 90%, transparent);
  backdrop-filter: blur(9px) saturate(.82);
}
html[data-ui-version='2'].gdnf-mobile .arena-hud--bottom {
  transform: none;
}

/* ========================================================================== */
/* UI / UX 2.2 — READABILITY & OCCLUSION PASS                                */
/* Content-heavy screens may not be covered by decorative stage polygons.     */
/* Gameplay entities are handled in Canvas2D; this layer protects DOM content.*/
/* ========================================================================== */

/* G05B remains a decision-stage language, not a permanent sheet over content. */
.screen--altar::after,
.pause-panel::after,
#duel-lobby::after,
.conclave-lobby::after {
  display: none !important;
  content: none !important;
}

/* Menu/void may retain one fracture, but it must stay a background accent. */
.screen--menu::after {
  right: -5%;
  width: min(34vw, 520px);
  height: 58%;
  opacity: .42;
  border-width: 1px;
}
.screen--void::after {
  right: -4%;
  width: min(31vw, 470px);
  height: 54%;
  opacity: .36;
  border-width: 1px;
}

/* Altar information must stay on solid material; no translucent poster over it. */
.screen--altar {
  overflow: clip;
}
.altar-header,
.altar-layout,
.altar-panel,
.altar-panel--actions,
.resource-ledger {
  position: relative;
  z-index: 2;
}
.altar-panel {
  background: color-mix(in srgb, var(--paper) 98%, var(--accent) 2%);
  border-color: color-mix(in srgb, var(--ink) 52%, transparent);
}
html[data-theme='dark'] .altar-panel {
  background: color-mix(in srgb, var(--paper) 97%, var(--accent) 3%);
}
.altar-panel--actions {
  isolation: isolate;
}
.altar-panel--actions::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 7px;
  height: min(46%, 220px);
  content: '';
  background: var(--accent);
  opacity: .82;
}

/* Long-copy and technical labels may be quiet, but never ivory-on-ivory. */
.screen--altar .panel-label,
.screen--altar .offer-empty,
.screen--altar .theorem-empty,
.screen--altar .altar-panel p,
.screen--altar .altar-panel small {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
html[data-theme='dark'] .screen--altar .panel-label,
html[data-theme='dark'] .screen--altar .offer-empty,
html[data-theme='dark'] .screen--altar .theorem-empty,
html[data-theme='dark'] .screen--altar .altar-panel p,
html[data-theme='dark'] .screen--altar .altar-panel small {
  color: color-mix(in srgb, var(--ink) 76%, transparent);
}

/* Lobbies are functional screens: use rails, not giant decorative polygons. */
.duel-option::after,
.conclave-option::after {
  inset: 0 auto 0 0 !important;
  width: 0 !important;
  height: auto !important;
  clip-path: none !important;
  background: transparent !important;
  border: 0 !important;
}
.duel-option.is-selected,
.conclave-option.is-selected {
  box-shadow: inset 7px 0 0 var(--option-accent, var(--duel-accent, var(--conclave-accent)));
}

/* The selected god remains vivid, but stable copy gets first priority. */
.god-card canvas {
  opacity: .96;
  filter: saturate(1.30) contrast(1.16);
}
.god-card:hover canvas {
  opacity: 1;
  filter: saturate(1.38) contrast(1.18);
}
.god-card.is-selected canvas {
  opacity: 1;
  filter: saturate(1.46) contrast(1.20);
}

/* Large-screen UI remains legible from farther viewing distances without changing combat HUD composition. */
@media (min-width: 1800px) and (min-height: 950px) {
  .utility-bar { min-height: 42px; }
  .screen-index,
  .panel-label,
  .god-card-number,
  .god-card-doctrine,
  .resource-ledger span { letter-spacing: .16em; }
  .screen--altar .panel-label,
  .screen--altar .offer-empty,
  .screen--altar .theorem-empty { font-size: max(9px, .52vw); }
  .god-card h3 { font-size: clamp(28px, 1.9vw, 42px); }
}

/* Mobile: no stage polygon is allowed to enter functional pause/altar content. */
html.gdnf-mobile .screen--altar::after,
html.gdnf-mobile .pause-panel::after,
html.gdnf-mobile #duel-lobby::after,
html.gdnf-mobile .conclave-lobby::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .screen--menu::after,
  .screen--void::after { animation: none !important; transition: none !important; }
}