/* Pale Maw interface primitives. Opt in by class; never restyle card faces or
   legacy screens implicitly. Component owners retain layout and lifecycle. */
:root {
  --pm-ui-ink: #292d32;
  --pm-ui-surface: #30353b;
  --pm-ui-surface-raised: #383f46;
  --pm-ui-text: #edf3f8;
  --pm-ui-muted: #becbd6;
  --pm-ui-accent: #36d0df;
  --pm-ui-on-accent: #12333e;
  --pm-ui-brass: #e0c48c;
  --pm-ui-danger: #f0b3aa;
  --pm-ui-line: #48535e;
  --pm-ui-focus: #f3d795;
  --pm-ui-surface-soft: #32383f;
  --pm-ui-danger-surface: #392d30;
  --pm-ui-scrim: #030b12b8;
  --pm-ui-shadow: #11181f38;
  --pm-ui-over-art-text: #f6f4ec;
  --pm-ui-over-art-muted: #cfdbd7;
  --pm-ui-space-1: 4px;
  --pm-ui-space-2: 8px;
  --pm-ui-space-3: 12px;
  --pm-ui-space-4: 16px;
  --pm-ui-space-5: 24px;
  --pm-ui-space-6: 32px;
  --pm-ui-gutter: 16px;
  --pm-ui-title-size: clamp(22px, 5vw, 26px);
  --pm-ui-section-size: 19px;
  --pm-ui-body-size: 16px;
  --pm-ui-meta-size: 13px;
  --pm-ui-radius: 22px;
  --pm-ui-target: 48px;
  --pm-ui-target-secondary: 44px;
  --pm-ui-press-time: 100ms;
  --pm-ui-enter-time: 220ms;
  --pm-ui-nav-time: 220ms;
  --pm-ui-card-focus-time: 260ms;
  --pm-ui-ease: cubic-bezier(.16, 1, .3, 1);
  --pm-ui-safe-top: env(safe-area-inset-top, 0px);
  --pm-ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pm-ui-safe-left: env(safe-area-inset-left, 0px);
  --pm-ui-safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
:root[data-theme=light] {
  --pm-ui-ink: #e7f0f7;
  --pm-ui-surface: #f1f7fb;
  --pm-ui-surface-raised: #e5eff7;
  --pm-ui-surface-soft: #ecf4fa;
  --pm-ui-text: #354657;
  --pm-ui-muted: #566e83;
  --pm-ui-accent: #32d0df;
  --pm-ui-on-accent: #12333e;
  --pm-ui-brass: #795d26;
  --pm-ui-danger: #9e3d36;
  --pm-ui-danger-surface: #f9e5df;
  --pm-ui-line: #c6d8e7;
  --pm-ui-focus: #875d0c;
  --pm-ui-scrim: #38516b50;
  --pm-ui-shadow: #547b9e24;
  color-scheme: light;
}
:root.strong-contrast {
  --pm-ui-ink: #020508;
  --pm-ui-surface: #020508;
  --pm-ui-surface-raised: #07111a;
  --pm-ui-text: #ffffff;
  --pm-ui-muted: #ffffff;
  --pm-ui-accent: #ffffff;
  --pm-ui-on-accent: #000000;
  --pm-ui-line: #ffffff;
  --pm-ui-focus: #fff300;
  --pm-ui-surface-soft: #07111a;
  --pm-ui-danger-surface: #020508;
}
:root.strong-contrast[data-theme=light] {
  color-scheme: light;
  --pm-ui-ink: #ffffff;
  --pm-ui-surface: #ffffff;
  --pm-ui-surface-raised: #f1f5f3;
  --pm-ui-surface-soft: #f1f5f3;
  --pm-ui-text: #000000;
  --pm-ui-muted: #000000;
  --pm-ui-accent: #000000;
  --pm-ui-on-accent: #ffffff;
  --pm-ui-line: #000000;
  --pm-ui-focus: #003cbb;
  --pm-ui-danger: #800000;
  --pm-ui-danger-surface: #ffffff;
}

.ui-screen {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  color: var(--pm-ui-text);
  padding-inline: max(var(--pm-ui-gutter), var(--pm-ui-safe-left)) max(var(--pm-ui-gutter), var(--pm-ui-safe-right));
}
.ui-heading { display: flex; align-items: center; gap: var(--pm-ui-space-3); min-width: 0; }
.ui-heading > :last-child { min-width: 0; }
.ui-title { margin: 0; font-size: var(--pm-ui-title-size); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.ui-section-title { margin: 0; font-size: var(--pm-ui-section-size); font-weight: 650; line-height: 1.25; }
.ui-body { margin: 0; font-size: var(--pm-ui-body-size); line-height: 1.5; }
.ui-meta { margin: 0; color: var(--pm-ui-muted); font-size: var(--pm-ui-meta-size); line-height: 1.45; }
.ui-row { display: flex; align-items: center; gap: var(--pm-ui-space-3); min-width: 0; }
.game-preferences > .preference-theme { grid-column: 1 / -1; }
.ui-divider { border: 0; border-top: 1px solid var(--pm-ui-line); margin-block: var(--pm-ui-space-4); }
.ui-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--pm-ui-space-2); }
.ui-actions > * { min-width: 0; }
.ui-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pm-ui-space-2);
  min-height: var(--pm-ui-target);
  min-width: var(--pm-ui-target);
  padding: var(--pm-ui-space-3) var(--pm-ui-space-4);
  border: 1px solid transparent;
  border-radius: var(--pm-ui-radius);
  font-family: inherit;
  font-size: var(--pm-ui-body-size);
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--pm-ui-press-time), border-color var(--pm-ui-press-time), box-shadow var(--pm-ui-press-time);
}
.ui-button--primary { color: var(--pm-ui-on-accent); background: var(--pm-ui-accent); }
.ui-button--secondary { color: var(--pm-ui-text); background: var(--pm-ui-surface-raised); border-color: var(--pm-ui-line); }
.ui-button--quiet { min-height: var(--pm-ui-target-secondary); color: var(--pm-ui-muted); background: transparent; }
.ui-button--danger { color: var(--pm-ui-danger); background: var(--pm-ui-danger-surface); border-color: var(--pm-ui-danger); }
.ui-button:focus-visible, .ui-disclosure > summary:focus-visible { outline: 3px solid var(--pm-ui-focus); outline-offset: 3px; }
.ui-button:active:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 0 0 2px #ffffff55; }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .55; cursor: default; }
.ui-scroll { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.ui-footer { flex: 0 0 auto; padding-block: var(--pm-ui-space-3) max(var(--pm-ui-space-3), var(--pm-ui-safe-bottom)); }
.ui-disclosure { border: 0; border-bottom: 1px solid var(--pm-ui-line); }
.ui-disclosure > summary { min-height: var(--pm-ui-target); box-sizing: border-box; padding-block: var(--pm-ui-space-3); color: var(--pm-ui-text); font-size: var(--pm-ui-body-size); line-height: 1.5; cursor: pointer; }
.ui-disclosure > :not(summary) { font-size: var(--pm-ui-body-size); line-height: 1.5; }
/* Navigation motion belongs to world-renderer/motion.mjs. These primitives do
   not mount animations, transform hit targets, or restart motion on rerender. */
@media (min-width: 390px) { :root { --pm-ui-gutter: 20px; } }
@media (prefers-reduced-motion: reduce) { .ui-button { transition: none; } }
body.calm-motion .ui-button { transition: none; }
/* Existing high-contrast text rules whiten spans. Preserve primary action
   contrast when a migrated control includes a labeled inner element. */
:root.strong-contrast .ui-button--primary :is(span,b,strong,small,em) { color: var(--pm-ui-on-accent) !important; }