/*
 * Age of Empires II: Definitive Edition theme for Rank.
 * Scoped to .theme-aoe so it does not affect untouched pages.
 * Applied via <body class="theme-aoe"> (already wired in the layout).
 *
 * Deep dark parchment-and-gold medieval aesthetic. Serif display face
 * (Cinzel) for headings/titles/buttons/table headers; readable serif
 * (EB Garamond) for body. All numbers use tabular figures.
 *
 * Structure mirrors oxide.css: every Bootstrap surface oxide overrides
 * is re-skinned here to the AoE palette, plus a set of reusable
 * .aoe-* component classes the dashboard view consumes.
 */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap");

.theme-aoe {
  /* ---- Tokens ---- */
  --aoe-bg:            #101a14;  /* base dark desaturated green/charcoal */
  --aoe-bg-deep:       #0b120d;  /* gradient bottom */
  --aoe-bg-raise:      #14201a;  /* raised surfaces (inputs, wells) */
  --aoe-bg-panel:      #1a271e;  /* card / panel body */
  --aoe-bg-panel-soft: #16211a;  /* softer panel variant */
  --aoe-bg-header:     #131e17;  /* panel header bar */
  --aoe-bg-hover:      #21301f;  /* row / item hover */
  --aoe-bg-active:     #283a26;  /* active tone */

  --aoe-border:        #4a4230;  /* aged bronze hairline */
  --aoe-border-strong: #6b5a2e;  /* stronger bronze */
  --aoe-border-gold:   #a5872f;  /* bright gold hairline (important panels) */

  --aoe-fg:            #e6dcc2;  /* parchment cream primary */
  --aoe-fg-secondary:  #b3a888;  /* muted olive-tan */
  --aoe-fg-tertiary:   #7d7660;  /* dim */

  --aoe-gold:          #d4af37;  /* primary gold accent */
  --aoe-gold-bright:   #e0b34d;  /* brighter gold (numbers/titles) */
  --aoe-gold-dim:      #c9a54e;  /* dim gold (labels) */
  --aoe-gold-deep:     #a5872f;  /* deep gold */
  --aoe-gold-faint:    rgba(212, 175, 55, 0.10);
  --aoe-gold-faint2:   rgba(212, 175, 55, 0.06);

  --aoe-amber:         #c68a3a;  /* warmer amber, distinct from gold (btn-warning) */
  --aoe-amber-bright:  #dc9c45;
  --aoe-amber-faint:   rgba(198, 138, 58, 0.14);
  --aoe-blue-bright:   #a9c4de;  /* lighter steel for info hover text */
  --aoe-blue-faint:    rgba(111, 147, 184, 0.14);

  --aoe-green:         #7fae5a;  /* heraldic green / positive */
  --aoe-green-dim:     #5c7f40;
  --aoe-green-faint:   rgba(127, 174, 90, 0.12);

  --aoe-red:           #c05a3e;  /* muted crimson / negative */
  --aoe-red-dim:       #8f3f2b;
  --aoe-red-faint:     rgba(192, 90, 62, 0.12);

  --aoe-blue:          #6f93b8;  /* info accent (aged steel) */

  --aoe-ink:           #1c1509;  /* dark ink for text on gold */
  --aoe-ink-green:     #10200a;  /* dark ink on green */
  --aoe-ink-red:       #200a06;  /* dark ink on crimson */

  --aoe-display:       "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --aoe-body:          "EB Garamond", Georgia, "Times New Roman", serif;

  --aoe-radius:        10px;
  --aoe-radius-sm:     6px;
  --aoe-shadow:        0 1px 0 rgba(212, 175, 55, 0.05) inset,
                       0 2px 4px rgba(0, 0, 0, 0.45),
                       0 14px 34px -12px rgba(0, 0, 0, 0.7);
  --aoe-shadow-soft:   0 1px 0 rgba(212, 175, 55, 0.04) inset,
                       0 8px 22px -10px rgba(0, 0, 0, 0.6);

  background-color: var(--aoe-bg);
  color: var(--aoe-fg);
  font-family: var(--aoe-body);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  /* Vertical gradient + faint parchment vignette, kept subtle */
  background-image:
    radial-gradient(1200px circle at 50% -10%, rgba(212, 175, 55, 0.045), transparent 55%),
    radial-gradient(900px circle at 100% 100%, rgba(127, 174, 90, 0.03), transparent 60%),
    linear-gradient(180deg, var(--aoe-bg) 0%, var(--aoe-bg-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---- Typography ---- */
.theme-aoe h1, .theme-aoe h2, .theme-aoe h3,
.theme-aoe h4, .theme-aoe h5, .theme-aoe h6 {
  font-family: var(--aoe-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--aoe-gold-dim);
}
.theme-aoe h1 { font-size: 1.9rem; letter-spacing: 0.04em; }
.theme-aoe h2 { font-size: 1.5rem; }
.theme-aoe h3 { font-size: 1.2rem; }

.theme-aoe .aoe-eyebrow,
.theme-aoe .aoe-hero__eyebrow {
  font-family: var(--aoe-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aoe-gold-dim);
}

.theme-aoe .aoe-num  { font-variant-numeric: tabular-nums; }

.theme-aoe a { color: var(--aoe-gold); text-decoration: none; }
.theme-aoe a:hover { color: var(--aoe-gold-bright); text-decoration: underline; text-underline-offset: 3px; }

.theme-aoe hr,
.theme-aoe .aoe-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aoe-border-strong) 20%, var(--aoe-gold-deep) 50%, var(--aoe-border-strong) 80%, transparent);
  margin: 1.25rem 0;
  opacity: 0.7;
}

/* ---- Navbar ---- */
.theme-aoe .navbar {
  background-color: var(--aoe-bg-deep) !important;
  border-bottom: 1px solid var(--aoe-border);
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.06);
  padding: 0.55rem 0;
}
.theme-aoe .navbar .navbar-brand {
  font-family: var(--aoe-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--aoe-gold) !important;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.theme-aoe .navbar .nav-link {
  font-family: var(--aoe-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aoe-fg-secondary) !important;
  padding: 0.4rem 0.85rem;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.theme-aoe .navbar .nav-link:hover { color: var(--aoe-gold) !important; }
.theme-aoe .navbar .nav-link.active {
  color: var(--aoe-gold) !important;
  border-bottom-color: var(--aoe-gold-deep);
}
.theme-aoe .navbar .dropdown-toggle::after { color: var(--aoe-gold-deep); }
.theme-aoe .navbar-toggler {
  border-color: var(--aoe-border-strong);
  color: var(--aoe-gold);
}
.theme-aoe .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d4af37' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.theme-aoe .navbar .form-control {
  background: var(--aoe-bg-raise);
  border: 1px solid var(--aoe-border);
  color: var(--aoe-fg);
  font-family: var(--aoe-body);
  font-size: 0.9rem;
}
.theme-aoe .navbar .form-control::placeholder { color: var(--aoe-fg-tertiary); }
.theme-aoe .navbar .form-control:focus {
  background: var(--aoe-bg-raise);
  border-color: var(--aoe-gold-deep);
  box-shadow: 0 0 0 1px var(--aoe-gold-deep);
  color: var(--aoe-fg);
}

/* ---- Footer ---- */
.theme-aoe footer.bg-light {
  background-color: var(--aoe-bg-deep) !important;
  border-top: 1px solid var(--aoe-border);
  color: var(--aoe-fg-tertiary);
}
.theme-aoe footer .text-muted { color: var(--aoe-fg-tertiary) !important; }

/* ---- Cards / Panels ---- */
.theme-aoe .card,
.theme-aoe .aoe-panel {
  background-color: var(--aoe-bg-panel);
  border: 1px solid var(--aoe-border-strong);
  border-radius: var(--aoe-radius);
  color: var(--aoe-fg);
  box-shadow: var(--aoe-shadow);
  overflow: hidden;
}
.theme-aoe .aoe-panel--soft {
  background-color: var(--aoe-bg-panel-soft);
  border-color: var(--aoe-border);
  box-shadow: var(--aoe-shadow-soft);
}
.theme-aoe .card-header,
.theme-aoe .aoe-panel__header {
  background-color: var(--aoe-bg-header);
  border-bottom: 1px solid var(--aoe-gold-deep);
  font-family: var(--aoe-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aoe-gold-dim);
  padding: 0.65rem 1rem;
}
.theme-aoe .card-body,
.theme-aoe .aoe-panel__body { padding: 1.1rem 1.1rem; }
.theme-aoe .card-footer {
  background-color: rgba(0, 0, 0, 0.22);
  border-top: 1px solid var(--aoe-border);
  color: var(--aoe-fg-tertiary);
}

/* Panel title with optional leading ornamental glyph */
.theme-aoe .aoe-panel__title {
  font-family: var(--aoe-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aoe-gold-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.theme-aoe .aoe-panel__title::before {
  content: "\2756"; /* ornamental lozenge */
  color: var(--aoe-gold-deep);
  font-size: 0.75em;
  opacity: 0.8;
}
.theme-aoe .aoe-panel__title > i,
.theme-aoe .aoe-panel__title > .bi { color: var(--aoe-gold-deep); }

/* ---- Hero banner ---- */
.theme-aoe .aoe-hero {
  text-align: center;
  padding: 2.25rem 1.5rem 2rem;
  border-top: 2px solid var(--aoe-gold-deep);
  border-bottom: 2px solid var(--aoe-gold-deep);
  background:
    radial-gradient(900px circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 65%),
    linear-gradient(180deg, rgba(26, 39, 30, 0.5), rgba(11, 18, 13, 0.4));
  position: relative;
}
.theme-aoe .aoe-hero__eyebrow {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--aoe-gold-dim);
}
.theme-aoe .aoe-hero__title {
  font-family: var(--aoe-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aoe-gold-bright);
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.4), 0 2px 2px rgba(0, 0, 0, 0.6);
  margin: 0;
}
.theme-aoe .aoe-hero__subtitle {
  font-family: var(--aoe-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aoe-gold-dim);
  margin: 0.75rem 0 0;
}
.theme-aoe .aoe-hero__meta {
  margin-top: 1rem;
  font-family: var(--aoe-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--aoe-fg-tertiary);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.theme-aoe .aoe-hero__meta > * + *::before {
  content: "\2758"; /* light vertical bar */
  color: var(--aoe-gold-deep);
  margin-right: 0.9rem;
  opacity: 0.7;
}

/* ---- Stat tile ---- */
.theme-aoe .aoe-stat {
  border: 1px solid var(--aoe-border-strong);
  padding: 1rem 1.1rem;
  background: var(--aoe-bg-panel);
  border-radius: var(--aoe-radius);
  box-shadow: var(--aoe-shadow-soft);
  position: relative;
  overflow: hidden;
}
.theme-aoe .aoe-stat::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 120px; height: 120px;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.07), transparent 70%);
  pointer-events: none;
}
.theme-aoe .aoe-stat--accent { border-left: 3px solid var(--aoe-gold); }
.theme-aoe .aoe-stat__label {
  font-family: var(--aoe-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aoe-fg-tertiary);
}
.theme-aoe .aoe-stat__value {
  font-family: var(--aoe-display);
  font-size: 1.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--aoe-gold-bright);
  line-height: 1.1;
  margin-top: 0.2rem;
}

/* ---- Deltas ---- */
.theme-aoe .aoe-delta {
  font-family: var(--aoe-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.theme-aoe .aoe-delta--up   { color: var(--aoe-green); }
.theme-aoe .aoe-delta--down { color: var(--aoe-red); }
.theme-aoe .aoe-delta--flat { color: var(--aoe-fg-tertiary); }
.theme-aoe .aoe-delta--up::before   { content: "\25B2"; font-size: 0.7em; }
.theme-aoe .aoe-delta--down::before { content: "\25BC"; font-size: 0.7em; }
.theme-aoe .aoe-delta--flat::before { content: "\2013"; }

/* ---- Rank medal ---- */
.theme-aoe .aoe-rank {
  font-family: var(--aoe-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--aoe-fg-tertiary);
  font-size: 0.95rem;
}
.theme-aoe .aoe-rank--gold   { color: var(--aoe-gold-bright); text-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
.theme-aoe .aoe-rank--silver { color: #c9c9c9; }
.theme-aoe .aoe-rank--bronze { color: #c08a54; }

/* ---- Badge / pill ---- */
.theme-aoe .aoe-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-family: var(--aoe-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--aoe-border-strong);
  color: var(--aoe-fg-secondary);
  background: var(--aoe-bg-raise);
  border-radius: 999px;
  line-height: 1.4;
}
.theme-aoe .aoe-badge--gold  { color: var(--aoe-gold-bright); border-color: var(--aoe-gold-deep); background: var(--aoe-gold-faint); }
.theme-aoe .aoe-badge--green { color: var(--aoe-green);       border-color: var(--aoe-green-dim); background: var(--aoe-green-faint); }
.theme-aoe .aoe-badge--red   { color: var(--aoe-red);         border-color: var(--aoe-red-dim);   background: var(--aoe-red-faint); }

/* ---- Award card ---- */
.theme-aoe .aoe-award {
  border: 1px solid var(--aoe-border-strong);
  border-radius: var(--aoe-radius-sm);
  background: var(--aoe-bg-panel-soft);
  padding: 0.85rem 1rem;
  box-shadow: var(--aoe-shadow-soft);
}
.theme-aoe .aoe-award__label {
  font-family: var(--aoe-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aoe-fg-tertiary);
}
.theme-aoe .aoe-award__value {
  font-family: var(--aoe-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--aoe-gold-bright);
  margin-top: 0.15rem;
  line-height: 1.2;
}
.theme-aoe .aoe-award__meta {
  font-family: var(--aoe-body);
  font-size: 0.85rem;
  color: var(--aoe-fg-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

/* ---- Upset row ---- */
.theme-aoe .aoe-upset {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--aoe-border);
}
.theme-aoe .aoe-upset:last-child { border-bottom: 0; }
.theme-aoe .aoe-upset__num {
  font-family: var(--aoe-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--aoe-gold-dim);
  min-width: 1.5rem;
}
.theme-aoe .aoe-upset__body { flex: 1; color: var(--aoe-fg); }
.theme-aoe .aoe-upset__tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-family: var(--aoe-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aoe-red);
  border: 1px solid var(--aoe-red-dim);
  background: var(--aoe-red-faint);
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Tables ---- */
.theme-aoe .table,
.theme-aoe table {
  color: var(--aoe-fg);
  border-color: var(--aoe-border);
  --bs-table-bg: transparent;
  --bs-table-color: var(--aoe-fg);
  --bs-table-border-color: var(--aoe-border);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--aoe-bg-hover);
  --bs-table-hover-color: var(--aoe-fg);
  font-variant-numeric: tabular-nums;
}
.theme-aoe .table > :not(caption) > * > * { background-color: transparent; }
.theme-aoe .table thead th {
  font-family: var(--aoe-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aoe-gold-dim);
  border-bottom: 1px solid var(--aoe-gold-deep);
  padding: 0.65rem 0.75rem;
}
.theme-aoe .table tbody td {
  border-bottom: 1px solid var(--aoe-border);
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  vertical-align: middle;
}
.theme-aoe .table tbody td.aoe-num,
.theme-aoe .table tbody td .aoe-num { font-variant-numeric: tabular-nums; }
.theme-aoe .table tbody tr:hover { background-color: var(--aoe-bg-hover); }
.theme-aoe .table tbody tr.is-self {
  background-color: var(--aoe-gold-faint);
  box-shadow: inset 3px 0 0 var(--aoe-gold);
}

/* ---- Buttons ---- */
.theme-aoe .btn {
  font-family: var(--aoe-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--aoe-radius-sm);
  padding: 0.5rem 1.1rem;
  border-width: 1px;
}
.theme-aoe .btn-primary {
  background: linear-gradient(180deg, var(--aoe-gold-bright), var(--aoe-gold-deep));
  border-color: var(--aoe-gold-deep);
  color: var(--aoe-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.theme-aoe .btn-primary:hover {
  background: linear-gradient(180deg, #eec766, var(--aoe-gold));
  border-color: var(--aoe-gold);
  color: var(--aoe-ink);
}
.theme-aoe .btn-secondary,
.theme-aoe .btn-outline-secondary {
  background: transparent;
  border-color: var(--aoe-border-strong);
  color: var(--aoe-fg-secondary);
}
.theme-aoe .btn-secondary:hover,
.theme-aoe .btn-outline-secondary:hover {
  background: var(--aoe-bg-hover);
  border-color: var(--aoe-gold-deep);
  color: var(--aoe-fg);
}
.theme-aoe .btn-danger {
  background: transparent;
  border-color: var(--aoe-red);
  color: var(--aoe-red);
}
.theme-aoe .btn-danger:hover {
  background: var(--aoe-red-faint);
  color: var(--aoe-red);
  border-color: var(--aoe-red);
}
.theme-aoe .btn-success {
  background: transparent;
  border-color: var(--aoe-green);
  color: var(--aoe-green);
}
.theme-aoe .btn-success:hover {
  background: var(--aoe-green-faint);
  color: var(--aoe-green);
  border-color: var(--aoe-green);
}
.theme-aoe .btn-light {
  background: var(--aoe-bg-raise);
  border-color: var(--aoe-border-strong);
  color: var(--aoe-fg);
}
.theme-aoe .btn-light:hover {
  background: var(--aoe-bg-hover);
  border-color: var(--aoe-gold-deep);
  color: var(--aoe-fg);
}
.theme-aoe .btn-outline-primary {
  background: transparent;
  border-color: var(--aoe-gold-deep);
  color: var(--aoe-gold);
}
.theme-aoe .btn-outline-primary:hover {
  background: var(--aoe-gold-faint);
  color: var(--aoe-gold-bright);
  border-color: var(--aoe-gold);
}
/* Info = aged steel blue (outline). e.g. Sync Matches, Manage Players, Map Pool */
.theme-aoe .btn-info,
.theme-aoe .btn-outline-info {
  background: transparent;
  border-color: var(--aoe-blue);
  color: var(--aoe-blue-bright);
}
.theme-aoe .btn-info:hover,
.theme-aoe .btn-info:focus-visible,
.theme-aoe .btn-outline-info:hover,
.theme-aoe .btn-outline-info:focus-visible {
  background: var(--aoe-blue-faint);
  border-color: var(--aoe-blue-bright);
  color: #d3e2f0;
}
/* Warning = filled amber, a key action (e.g. Matchmaking); distinct from gold primary */
.theme-aoe .btn-warning {
  background: linear-gradient(180deg, var(--aoe-amber-bright), var(--aoe-amber));
  border-color: var(--aoe-amber);
  color: var(--aoe-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}
.theme-aoe .btn-warning:hover,
.theme-aoe .btn-warning:focus-visible {
  background: linear-gradient(180deg, #e8ac54, var(--aoe-amber-bright));
  border-color: var(--aoe-amber-bright);
  color: var(--aoe-ink);
}
.theme-aoe .btn-outline-warning {
  background: transparent;
  border-color: var(--aoe-amber);
  color: var(--aoe-amber-bright);
}
.theme-aoe .btn-outline-warning:hover,
.theme-aoe .btn-outline-warning:focus-visible {
  background: var(--aoe-amber-faint);
  border-color: var(--aoe-amber-bright);
  color: var(--aoe-amber-bright);
}
/* Link buttons (used for Sign out in navbar) keep the nav-link look */
.theme-aoe .navbar .btn-link.nav-link {
  border: 0;
  background: transparent;
  text-transform: uppercase;
}

/* ---- Forms ---- */
.theme-aoe .form-control,
.theme-aoe .form-select {
  background: var(--aoe-bg-raise);
  border: 1px solid var(--aoe-border-strong);
  color: var(--aoe-fg);
  border-radius: var(--aoe-radius-sm);
  font-family: var(--aoe-body);
  font-size: 0.95rem;
}
.theme-aoe .form-control::placeholder { color: var(--aoe-fg-tertiary); }
.theme-aoe .form-control:focus,
.theme-aoe .form-select:focus {
  background: var(--aoe-bg-panel);
  border-color: var(--aoe-gold-deep);
  box-shadow: 0 0 0 2px var(--aoe-gold-faint);
  color: var(--aoe-fg);
}
.theme-aoe .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5872f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  /* Pin the caret so it shows once instead of tiling across the control. */
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}
.theme-aoe .form-label {
  font-family: var(--aoe-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aoe-gold-dim);
}
.theme-aoe .form-check-input:checked {
  background-color: var(--aoe-gold-deep);
  border-color: var(--aoe-gold-deep);
}
.theme-aoe .form-text { color: var(--aoe-fg-tertiary); }

/* ---- Alerts ---- */
.theme-aoe .alert {
  background: var(--aoe-bg-panel);
  border: 1px solid var(--aoe-border);
  border-left-width: 3px;
  border-radius: var(--aoe-radius-sm);
  color: var(--aoe-fg);
  font-family: var(--aoe-body);
  box-shadow: var(--aoe-shadow-soft);
}
.theme-aoe .alert-success { border-left-color: var(--aoe-green); }
.theme-aoe .alert-warning { border-left-color: var(--aoe-gold); }
.theme-aoe .alert-danger  { border-left-color: var(--aoe-red); }
.theme-aoe .alert-info    { border-left-color: var(--aoe-blue); }
.theme-aoe .alert .btn-close { filter: invert(0.85) sepia(0.4) saturate(3) hue-rotate(5deg); }

/* ---- Section header ---- */
.theme-aoe .aoe-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--aoe-gold-deep);
  margin-bottom: 1rem;
}
.theme-aoe .aoe-section__index {
  font-family: var(--aoe-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--aoe-gold-dim);
}
.theme-aoe .aoe-section__title {
  font-family: var(--aoe-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aoe-gold-dim);
}
.theme-aoe .aoe-section__meta {
  margin-left: auto;
  font-family: var(--aoe-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aoe-fg-tertiary);
}

/* ---- Misc ---- */
.theme-aoe .text-muted { color: var(--aoe-fg-tertiary) !important; }
.theme-aoe .border, .theme-aoe .border-top, .theme-aoe .border-bottom,
.theme-aoe .border-start, .theme-aoe .border-end {
  border-color: var(--aoe-border) !important;
}
.theme-aoe ::selection { background: var(--aoe-gold-faint); color: var(--aoe-fg); }
.theme-aoe .civ-icon { filter: saturate(0.85) brightness(0.95); }

/* ---- Bootstrap utility neutralisers (dark-mode safe) ---- */
.theme-aoe .bg-light,
.theme-aoe .bg-white,
.theme-aoe .bg-body,
.theme-aoe .bg-body-tertiary,
.theme-aoe .bg-body-secondary {
  background-color: var(--aoe-bg-panel) !important;
  color: var(--aoe-fg) !important;
}
/* Nested .bg-light inside a card/panel — raise a step so it stays visible */
.theme-aoe .card .bg-light,
.theme-aoe .card .bg-white,
.theme-aoe .aoe-panel .bg-light,
.theme-aoe .aoe-panel .bg-white {
  background-color: var(--aoe-bg-raise) !important;
  border: 1px solid var(--aoe-border);
}
.theme-aoe .text-dark,
.theme-aoe .text-black,
.theme-aoe .text-body,
.theme-aoe .text-body-emphasis {
  color: var(--aoe-fg) !important;
}
.theme-aoe .text-secondary,
.theme-aoe .text-body-secondary { color: var(--aoe-fg-secondary) !important; }
.theme-aoe .text-white { color: var(--aoe-fg) !important; }

/* text-dark paired with a solid coloured background — keep dark ink for contrast */
.theme-aoe .bg-warning.text-dark,
.theme-aoe .bg-warning .text-dark  { color: var(--aoe-ink) !important; }
.theme-aoe .bg-info.text-dark,
.theme-aoe .bg-info .text-dark     { color: #0b1218 !important; }
.theme-aoe .bg-primary.text-dark,
.theme-aoe .bg-primary .text-dark  { color: var(--aoe-ink) !important; }
.theme-aoe .bg-success.text-dark,
.theme-aoe .bg-success .text-dark  { color: var(--aoe-ink-green) !important; }
.theme-aoe .bg-danger.text-dark,
.theme-aoe .bg-danger .text-dark   { color: var(--aoe-ink-red) !important; }

/* Badges with solid colours — same contrast guarantee */
.theme-aoe .badge.bg-warning, .theme-aoe .badge.bg-warning * { color: var(--aoe-ink) !important; }
.theme-aoe .badge.bg-info,    .theme-aoe .badge.bg-info *    { color: #0b1218 !important; }
.theme-aoe .badge.bg-success, .theme-aoe .badge.bg-success * { color: var(--aoe-ink-green) !important; }
.theme-aoe .badge.bg-primary, .theme-aoe .badge.bg-primary * { color: var(--aoe-ink) !important; }
.theme-aoe .badge.bg-danger,  .theme-aoe .badge.bg-danger *  { color: var(--aoe-ink-red) !important; }

/* Bootstrap "subtle" backgrounds → tinted panels */
.theme-aoe .bg-primary-subtle,
.theme-aoe .bg-warning-subtle { background-color: var(--aoe-gold-faint) !important; color: var(--aoe-fg) !important; }
.theme-aoe .bg-info-subtle    { background-color: rgba(111, 147, 184, 0.12) !important; color: var(--aoe-fg) !important; }
.theme-aoe .bg-success-subtle { background-color: var(--aoe-green-faint) !important; color: var(--aoe-fg) !important; }
.theme-aoe .bg-danger-subtle  { background-color: var(--aoe-red-faint) !important; color: var(--aoe-fg) !important; }

/* Solid coloured backgrounds — keep accent but ensure readable text */
.theme-aoe .bg-primary { background-color: var(--aoe-gold-deep) !important; color: var(--aoe-ink) !important; }
.theme-aoe .bg-success { background-color: var(--aoe-green-dim) !important; color: var(--aoe-ink-green) !important; }
.theme-aoe .bg-info    { background-color: var(--aoe-blue)      !important; color: #0b1218 !important; }
.theme-aoe .bg-warning { background-color: var(--aoe-gold)      !important; color: var(--aoe-ink) !important; }
.theme-aoe .bg-danger  { background-color: var(--aoe-red)       !important; color: var(--aoe-ink-red) !important; }
.theme-aoe .bg-dark    { background-color: var(--aoe-bg-deep)   !important; color: var(--aoe-fg) !important; }
.theme-aoe .bg-secondary { background-color: var(--aoe-bg-raise) !important; color: var(--aoe-fg-secondary) !important; }

/* Jumbotron / hero — turn it into a parchment panel instead of a solid block */
.theme-aoe .jumbotron,
.theme-aoe .jumbotron.bg-primary {
  background-color: var(--aoe-bg-panel) !important;
  background-image:
    radial-gradient(800px circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
    radial-gradient(600px circle at 100% 100%, rgba(127, 174, 90, 0.04), transparent 60%);
  border: 1px solid var(--aoe-border-strong);
  border-top: 3px solid var(--aoe-gold-deep);
  border-radius: var(--aoe-radius) !important;
  box-shadow: var(--aoe-shadow);
  color: var(--aoe-fg) !important;
}
.theme-aoe .jumbotron .display-4,
.theme-aoe .jumbotron h1 { color: var(--aoe-gold-bright); font-family: var(--aoe-display); }
.theme-aoe .jumbotron .lead { color: var(--aoe-fg-secondary); }

.theme-aoe .border-light { border-color: var(--aoe-border) !important; }

.theme-aoe .text-primary { color: var(--aoe-gold) !important; }
.theme-aoe .text-success { color: var(--aoe-green) !important; }
.theme-aoe .text-info    { color: var(--aoe-blue) !important; }
.theme-aoe .text-warning { color: var(--aoe-gold-bright) !important; }
.theme-aoe .text-danger  { color: var(--aoe-red) !important; }

/* Bootstrap secondary badge */
.theme-aoe .badge.bg-secondary { background-color: var(--aoe-bg-raise) !important; color: var(--aoe-fg-secondary) !important; border: 1px solid var(--aoe-border); }
.theme-aoe .badge { font-family: var(--aoe-display); font-weight: 600; letter-spacing: 0.06em; }

/* List groups */
.theme-aoe .list-group { background: transparent; }
.theme-aoe .list-group-item {
  background-color: var(--aoe-bg-panel);
  border-color: var(--aoe-border);
  color: var(--aoe-fg);
}
.theme-aoe .list-group-item-action:hover { background-color: var(--aoe-bg-hover); color: var(--aoe-fg); }
.theme-aoe .list-group-item.active {
  background-color: var(--aoe-gold-deep);
  border-color: var(--aoe-gold-deep);
  color: var(--aoe-ink);
}

/* Pagination */
.theme-aoe .page-link {
  background: var(--aoe-bg-panel);
  border-color: var(--aoe-border);
  color: var(--aoe-fg-secondary);
  font-family: var(--aoe-display);
  font-size: 0.82rem;
  font-weight: 500;
}
.theme-aoe .page-link:hover { background: var(--aoe-bg-hover); color: var(--aoe-gold); }
.theme-aoe .page-item.active .page-link {
  background: var(--aoe-gold-deep);
  border-color: var(--aoe-gold-deep);
  color: var(--aoe-ink);
}
.theme-aoe .page-item.disabled .page-link {
  background: var(--aoe-bg-raise);
  color: var(--aoe-fg-tertiary);
  border-color: var(--aoe-border);
}

/* Nav tabs / pills */
.theme-aoe .nav-tabs { border-bottom: 1px solid var(--aoe-gold-deep); }
.theme-aoe .nav-tabs .nav-link {
  color: var(--aoe-fg-secondary);
  border: 1px solid transparent;
  font-family: var(--aoe-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.theme-aoe .nav-tabs .nav-link:hover { color: var(--aoe-gold); border-color: transparent; }
.theme-aoe .nav-tabs .nav-link.active {
  background: var(--aoe-bg-panel);
  border-color: var(--aoe-border) var(--aoe-border) var(--aoe-bg-panel);
  color: var(--aoe-gold-bright);
}
.theme-aoe .nav-pills .nav-link {
  color: var(--aoe-fg-secondary);
  font-family: var(--aoe-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.theme-aoe .nav-pills .nav-link.active { background: var(--aoe-gold-deep); color: var(--aoe-ink); }

/* Modals / Dropdowns / Offcanvas */
.theme-aoe .modal-content,
.theme-aoe .dropdown-menu,
.theme-aoe .offcanvas {
  background-color: var(--aoe-bg-panel);
  border: 1px solid var(--aoe-border-strong);
  color: var(--aoe-fg);
  border-radius: var(--aoe-radius);
  box-shadow: var(--aoe-shadow);
}
.theme-aoe .modal-header, .theme-aoe .modal-footer { border-color: var(--aoe-border); }
.theme-aoe .modal-title { color: var(--aoe-gold-dim); font-family: var(--aoe-display); }
.theme-aoe .dropdown-item { color: var(--aoe-fg); font-family: var(--aoe-body); }
.theme-aoe .dropdown-item:hover, .theme-aoe .dropdown-item:focus { background-color: var(--aoe-bg-hover); color: var(--aoe-gold); }
.theme-aoe .dropdown-divider { border-color: var(--aoe-border); }

/* Progress bars */
.theme-aoe .progress { background-color: var(--aoe-bg-raise); border: 1px solid var(--aoe-border); border-radius: var(--aoe-radius-sm); height: 0.75rem; }
.theme-aoe .progress-bar { background-color: var(--aoe-gold-deep); }

/* Code */
.theme-aoe code, .theme-aoe pre {
  background: var(--aoe-bg-raise);
  color: var(--aoe-gold-dim);
  border: 1px solid var(--aoe-border);
  border-radius: var(--aoe-radius-sm);
  padding: 0.1rem 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}
.theme-aoe pre { padding: 0.75rem 1rem; }
.theme-aoe pre code { background: transparent; border: 0; padding: 0; }