/**
 * Site-wide readability (“old man eyes”) pass.
 * Loads after Tailwind CDN so these win on size/line-height.
 */

html {
  font-size: 18px; /* was browser ~16px — scales rem-based Tailwind */
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Bump Tailwind steps that felt tiny */
.text-xs {
  font-size: 0.95rem !important;   /* ~17px at 18 root */
  line-height: 1.55 !important;
}
.text-sm {
  font-size: 1.05rem !important;   /* ~19px */
  line-height: 1.6 !important;
}
.text-base {
  font-size: 1.125rem !important;  /* ~20px */
  line-height: 1.65 !important;
}
.text-lg {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}
.text-xl {
  font-size: 1.4rem !important;
  line-height: 1.4 !important;
}
.text-2xl {
  font-size: 1.65rem !important;
  line-height: 1.3 !important;
}
.text-3xl {
  font-size: 1.95rem !important;
  line-height: 1.25 !important;
}
.text-4xl {
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
}

/* Fixed micro px classes used all over the site */
.text-\[10px\],
.text-\[11px\] {
  font-size: 0.9rem !important;    /* ~16px — was unreadable 10–11px */
  line-height: 1.5 !important;
}

/*
 * Header bar: keep compact & single-line.
 * Global text-sm bumps were wrapping “How to play”, “AI staff”, “AI units”
 * over the logo — reset nav to a tight fixed scale.
 */
nav.ro-header,
nav.bg-\[\#2c2118\],
nav[class*="border-b"] {
  font-size: 15px;
}
nav.ro-header .text-xl,
nav.bg-\[\#2c2118\] .text-xl {
  font-size: 1.125rem !important; /* ~17px pixel logo — not billboard */
  line-height: 1.1 !important;
}
nav.ro-header .text-sm,
nav.bg-\[\#2c2118\] .text-sm,
nav[class*="border-b"] .text-sm {
  font-size: 0.8125rem !important; /* ~12–13px links */
  line-height: 1.2 !important;
}
nav.ro-header .text-xs,
nav.bg-\[\#2c2118\] .text-xs,
nav[class*="border-b"] .text-xs {
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
}
nav.ro-header .text-\[10px\],
nav.ro-header .text-\[11px\],
nav.bg-\[\#2c2118\] .text-\[10px\],
nav.bg-\[\#2c2118\] .text-\[11px\],
nav[class*="border-b"] .text-\[10px\],
nav[class*="border-b"] .text-\[11px\] {
  font-size: 0.65rem !important;
  line-height: 1.15 !important;
}
/* Never let nav labels wrap mid-word into the logo */
nav.ro-header a,
nav.ro-header button,
nav.ro-header #status-pill,
nav.ro-header [data-status-mirror],
nav.bg-\[\#2c2118\] a,
nav[class*="border-b"] a {
  white-space: nowrap;
  line-height: 1.2;
}
/* Desktop link row: one line, tighter gaps */
nav.ro-header .hidden.lg\:flex,
nav.ro-header div.hidden.lg\:flex {
  flex-wrap: nowrap !important;
  gap: 0.65rem !important;
  align-items: center;
}
@media (min-width: 1280px) {
  nav.ro-header .hidden.lg\:flex,
  nav.ro-header div.hidden.lg\:flex {
    gap: 0.85rem !important;
  }
}
/* Status pill: stay one line, slightly denser */
nav.ro-header #status-pill {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
  padding: 0.2rem 0.55rem !important;
}
nav.ro-header #status-pill .text-\[11px\],
nav.ro-header #status-pill span {
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: nowrap;
}

/* Forms & chat */
input,
select,
textarea,
button {
  font-size: inherit;
}
input::placeholder,
textarea::placeholder {
  opacity: 0.75;
}

/* Chat bubbles on home */
.chat-container {
  height: 380px !important;
}
.chat-message {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  padding: 12px 16px !important;
}

/* Lists on rules / FAQ / long copy */
main li,
main p,
article p,
.prose,
details div {
  line-height: 1.65;
}

/* Comfortable max width for long text pages if not already set */
main.max-w-3xl,
.max-w-3xl.mx-auto {
  /* keep layout; size comes from root */
}

/* Slightly roomier sticky nav tags */
.pixel-font {
  letter-spacing: 0.02em;
}

/* Mobile: don’t go smaller than 16px (stops iOS zoom weirdness + helps eyes) */
@media (max-width: 640px) {
  html {
    font-size: 17px;
  }
}

/* Optional: users who want even bigger can set this in browser zoom;
   we also expose a soft preference if body has class large-type */
body.large-type {
  /* reserved — root already bumped */
}