/* Components Stylesheet: Buttons, Badges, Tabs, Modals, Inputs */

/* Buttons */
/**
 * An inline text action — a button that reads as a link inside a sentence.
 *
 * "View Live Radar →" and "Read Dispatch →" in the ticker and the article
 * footnote's telemetry link are buttons now (they open a panel; there is no
 * id to anchor to), and this page has no Tailwind: `underline`,
 * `decoration-dotted` and `whitespace-nowrap` in their class lists never
 * existed. Anchors are reset to no underline site-wide, so this is the one
 * place an inline action gets its affordance.
 */
/* An outbound link inside copy — to the studio site, or a mod's declared home. */
.studio-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; transition: color 0.15s ease; }
.studio-link:hover { color: #fbbf24; }
.site-footer-brand-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; transition: color 0.15s ease, filter 0.15s ease; }
.site-footer-brand-link:hover { color: #fbbf24; filter: brightness(1.15); }

.link-inline {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}
.link-inline:hover { color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.15rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.btn-ember {
  background: linear-gradient(135deg, #f0521f, #b9380e);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 15px rgba(240, 82, 31, 0.35);
}

.btn-ember:hover {
  background: linear-gradient(135deg, #ff6b3d, #f0521f);
  box-shadow: 0 6px 22px rgba(240, 82, 31, 0.55);
  transform: translateY(-1px);
  color: #ffffff;
}

.btn-ember:active {
  transform: translateY(0);
}

.btn-runic {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(14, 116, 144, 0.3));
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
}

.btn-runic:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(14, 116, 144, 0.5));
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
}

.btn-outline {
  background: rgba(15, 23, 42, 0.7);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.badge-ember {
  background: rgba(240, 82, 31, 0.18);
  color: #ff6b3d;
  border: 1px solid rgba(240, 82, 31, 0.4);
}

.badge-gold {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge-cyan {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.badge-emerald {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-purple {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.badge-crimson {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.badge-slate {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Category Filter Chips */
.filter-chip {
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  border-color: rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.filter-chip.active {
  background: rgba(240, 82, 31, 0.2);
  color: #fbbf24;
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

/* Forms & Inputs */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.form-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #cbd5e1;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: rgba(9, 13, 21, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  color: #f8fafc;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  background: rgba(14, 20, 31, 0.98);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

/* Search Bar */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  background: rgba(11, 16, 26, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  color: #f8fafc;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
  background: rgba(15, 22, 35, 0.95);
}

.search-icon {
  position: absolute;
  left: 0.85rem;
  color: #64748b;
  pointer-events: none;
}

/* Modal Overlay & Base Structure */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 8, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 999;
  opacity: 0;
  animation: modalFadeIn 0.25s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content {
  background: #0c111c;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 16px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 158, 11, 0.15);
  position: relative;
  transform: scale(0.95) translateY(10px);
  animation: modalPopIn 0.25s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
}

.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
  transform: rotate(90deg);
}

@keyframes modalFadeIn {
  to { opacity: 1; }
}

@keyframes modalPopIn {
  to { transform: scale(1) translateY(0); }
}

/* Toast Notifications */
.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: rgba(13, 18, 28, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  color: #f8fafc;
  font-size: 0.875rem;
  pointer-events: auto;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-success { border-left: 4px solid #10b981; }
.toast-error { border-left: 4px solid #ef4444; }
.toast-info { border-left: 4px solid #38bdf8; }

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/*
 * The two colours the freshness line switches between.
 *
 * `freshnessLine()` has always returned `text-amber-400/90` when telemetry is
 * lagging and `text-rose-400/90` when it is stale, and `main.js` swaps them onto
 * the element every second. Neither class was ever defined — this site has no
 * Tailwind, only the hand-written utilities in index.html's <style> block — so
 * the line that exists to announce that the data has stopped moving announced it
 * in exactly the same colour as healthy data.
 *
 * That is why stale tiles looked identical to live ones: the tiles held their
 * last value, which is correct and unavoidable, and the one signal that would
 * have said so was invisible.
 */
.text-amber-400\/90 { color: rgba(251, 191, 36, 0.9); }
.text-rose-400\/90  { color: rgba(251, 113, 133, 0.9); }

/* ---------------------------------------------------------------------------
 * Realms (v1.6.0): the hero's per-realm connect cards, and the realm section's
 * realm tabs + panel. Each realm kind has one accent — amber for the modded
 * realm, green for the vanilla one — carried by the card's left edge, its
 * address, its tag and its tab, so the two are told apart at a glance rather
 * than by reading their names.
 * ------------------------------------------------------------------------- */
.realm-card { border-left-width: 4px; }
.realm-card--modded { border-left-color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); border-left-color: #f59e0b; }
.realm-card--vanilla { border-left-color: #10b981; border-color: rgba(16, 185, 129, 0.3); border-left-color: #10b981; }
.realm-card--modded .realm-address { color: #fcd34d; }
.realm-card--vanilla .realm-address { color: #6ee7b7; }

.realm-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
}
.realm-card--modded .realm-tag { color: #fbbf24; border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.1); }
.realm-card--vanilla .realm-tag { color: #34d399; border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.1); }

.realm-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  max-width: 56rem;
  margin: 0 auto 1.25rem;
}
.realm-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left-width: 4px;
  background: rgba(15, 23, 42, 0.6);
  color: #94a3b8;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
.realm-tab--modded { border-left-color: rgba(245, 158, 11, 0.5); }
.realm-tab--vanilla { border-left-color: rgba(16, 185, 129, 0.5); }
.realm-tab:hover { color: #f8fafc; transform: translateY(-1px); }
.realm-tab.active { color: #f8fafc; background: rgba(8, 12, 20, 0.94); }
.realm-tab--modded.active { border-color: rgba(245, 158, 11, 0.6); border-left-color: #f59e0b; box-shadow: 0 0 16px rgba(245, 158, 11, 0.2); }
.realm-tab--vanilla.active { border-color: rgba(16, 185, 129, 0.6); border-left-color: #10b981; box-shadow: 0 0 16px rgba(16, 185, 129, 0.2); }
.realm-tab-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.realm-tab-meta { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; }

.realm-panel {
  position: relative; /* above the fixed particle backdrop, like every other clickable area */
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top-width: 3px;
  border-radius: 16px;
  padding: 1.25rem;
}
@media (min-width: 640px) { .realm-panel { padding: 1.75rem; } }
.realm-panel--modded { border-top-color: #f59e0b; }
.realm-panel--vanilla { border-top-color: #10b981; }
/* The sections rendered inside a panel keep their own top borders and
 * padding, which double up here. */
.realm-panel > #realm-panel-body > section { border-top: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Header realm chips (v1.7.0): status dot + head-count per realm, in the
 * sticky bar, so both realms are readable from anywhere on the page. */
.realm-chips {
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 9999px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.realm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.realm-chip strong { color: #f8fafc; }
.realm-chip:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.05); }
.realm-chip--modded:hover { border-color: rgba(245, 158, 11, 0.5); }
.realm-chip--vanilla:hover { border-color: rgba(16, 185, 129, 0.5); }
.realm-chip--config { padding: 0.3rem 0.5rem; font-size: 0.65rem; color: #38bdf8; border-left: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 9999px 9999px 0; }

/* The chip's status dot: green up, red down/stale, amber unknown. The
 * pulse is the same "live" cue the old pill's (undefined) animate-ping meant. */
.realm-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 9999px; flex: none; }
.realm-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0.6; animation: realmPulse 1.8s ease-out infinite; }
.realm-dot--online { background: #10b981; }
.realm-dot--offline { background: #ef4444; }
.realm-dot--unknown { background: #f59e0b; }
.realm-dot--offline::after { animation: none; }
@keyframes realmPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }

/* Nothing in the sticky bar may wrap: a wrapped chip pushes the actions off
 * the right edge. Names show only where there is room for them. */
.realm-chip { white-space: nowrap; }
.realm-chip-name { display: none; }
@media (min-width: 1680px) { .realm-chip-name { display: inline; } }

/* Header brand (v1.7.3). The rune box used w-9/h-9/rounded-lg utilities
 * that the page never defined, so it collapsed to the glyph's own size and
 * sat flush against the title. Sized and spaced here instead. */
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand-rune {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-size: 1.25rem;
  color: #fbbf24;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.28), rgba(180, 83, 9, 0.4));
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  transition: transform 0.2s ease;
}
.brand:hover .brand-rune { transform: scale(1.05); }
.brand-text { display: flex; flex-direction: column; gap: 0.2rem; }
.brand-title {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-weight: 900; font-size: 1.05rem; line-height: 1.1;
  letter-spacing: 0.08em; text-transform: uppercase; color: #f8fafc; white-space: nowrap;
}
@media (min-width: 640px) { .brand-title { font-size: 1.15rem; } }
.brand-subtitle {
  font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.2;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(251, 191, 36, 0.8); white-space: nowrap;
}
@media (max-width: 1100px) { .brand-subtitle { display: none; } }

/* The header row is brand | nav | actions with space-between. When the row
 * is full, space-between leaves NO gap between neighbours — so a minimum
 * gap is set on the row itself, and the nav may shrink before the brand does. */
.top-nav-bar > .container {
  gap: 1.5rem;
  /* The bar spans the viewport, not the centred content column: the
   * column's side margins were dead space on the left while the actions
   * overflowed on the right. */
  max-width: none;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.top-nav-bar > .container > nav,
.top-nav-bar > .container > .brand,
.top-nav-bar .realm-chips { flex: none; }
.top-nav-bar .nav-link-pill { white-space: nowrap; }
/* Below 1400px the nav goes icon-only (the label is in the tooltip) so the
 * brand, nav, realm chips and actions all fit without anything shrinking
 * under its neighbour. */
@media (max-width: 1679px) {
  .top-nav-bar .nav-label { display: none; }
  .top-nav-bar .nav-link-pill { padding-left: 0.7rem; padding-right: 0.7rem; font-size: 0.95rem; }
}

/* The π. Sized like a footnote, coloured like the bar until hovered. */
.praetorian {
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-left: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(148, 163, 184, 0.28);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.praetorian:hover { color: #fbbf24; text-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }
.praetorian--in { color: rgba(251, 191, 36, 0.7); }

/* Footer (v1.8.0): the row used md:flex-row / gap-6 / w-10 utilities the
 * page never defined, so its three cells stacked and wrapped word by word. */
.site-footer { border-top: 1px solid rgba(30, 41, 59, 0.8); background: #030712; padding: 2.5rem 0; color: #94a3b8; }
.site-footer-row { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
@media (min-width: 900px) { .site-footer-row { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } }
.site-footer-brand { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.site-footer-emblem { width: 2.75rem; height: 2.75rem; object-fit: contain; filter: drop-shadow(0 0 12px rgba(240, 82, 31, 0.4)); flex: none; }
.site-footer-title { font-weight: 700; color: #e2e8f0; font-size: 0.85rem; letter-spacing: 0.08em; white-space: nowrap; }
.site-footer-sub { font-family: var(--font-mono); font-size: 0.7rem; color: #64748b; margin-top: 0.15rem; white-space: nowrap; }
.site-footer-note { font-family: var(--font-mono); font-size: 0.7rem; color: #94a3b8; max-width: 26rem; line-height: 1.5; }
.site-footer-meta { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.7rem; color: #64748b; white-space: nowrap; flex: none; }

/* Progression tier + enforcement (v1.12.0). The Wonderland mod's gear
 * ceiling as a ladder of rungs — lit to the current tier, dim above it —
 * and the server's guards as pills. One strip on the hero card (rungs
 * only) and one on the realm Overview (rungs with names); the header chip
 * carries the tier word. Emerald is the vanilla realm's colour everywhere
 * else on the page, amber the modded one's, and the strip follows its card. */
.realm-guard {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #94a3b8;
}
.realm-guard--panel {
  margin-bottom: 0;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 12, 20, 0.55);
}
.realm-guard-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.realm-guard-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.realm-guard-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: #f8fafc; letter-spacing: 0.04em; text-transform: uppercase; }
.realm-guard-text { line-height: 1.5; }
.realm-guard-key { color: #64748b; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; }
.realm-guard-tier { color: #6ee7b7; font-weight: 700; letter-spacing: 0.04em; }
.realm-card--modded .realm-guard-tier, .realm-panel--modded .realm-guard-tier { color: #fcd34d; }
.realm-guard-dim { color: #64748b; }

.tier-ladder { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; }
.tier-rung {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 7px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.tier-rung--unlocked { background: rgba(16, 185, 129, 0.55); border-color: rgba(16, 185, 129, 0.6); }
.tier-rung--current { background: #34d399; border-color: #6ee7b7; box-shadow: 0 0 8px rgba(52, 211, 153, 0.65); }
.tier-rung--gated { background: rgba(15, 23, 42, 0.6); border-color: rgba(148, 163, 184, 0.18); }
.tier-rung--open { background: rgba(148, 163, 184, 0.16); border-style: dashed; }
.realm-card--modded .tier-rung--unlocked, .realm-panel--modded .tier-rung--unlocked { background: rgba(245, 158, 11, 0.5); border-color: rgba(245, 158, 11, 0.6); }
.realm-card--modded .tier-rung--current, .realm-panel--modded .tier-rung--current { background: #fbbf24; border-color: #fcd34d; box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }

/* The named ladder on the Overview: every rung the same width, its tier
 * name beneath, the current one bright. Eight names do not fit a phone,
 * so the names turn on their side there. */
.tier-ladder--named { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; width: 100%; align-items: start; }
.tier-ladder--named .tier-rung { width: auto; height: 10px; display: flex; flex-direction: column; align-items: center; border-radius: 3px; }
.tier-rung-name { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-size: 0.58rem; letter-spacing: 0.04em; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-rung--unlocked .tier-rung-name { color: #94a3b8; }
.tier-rung--current .tier-rung-name { color: #6ee7b7; font-weight: 700; }
.realm-panel--modded .tier-rung--current .tier-rung-name { color: #fcd34d; }
.tier-ladder--named { margin-bottom: 1.35rem; }
/* Eight names do not fit a phone in one row: four rungs a row there, with
 * room under each row for its names. */
@media (max-width: 639px) {
  .tier-ladder--named { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2.1rem; margin-bottom: 2rem; }
  .tier-rung-name { white-space: normal; line-height: 1.15; }
}

.guard-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.5);
  color: #94a3b8;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.guard-pill em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: #64748b; }
.guard-pill--on { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.08); }
.guard-pill--on em { color: #34d399; }
.guard-pill--off { color: #64748b; border-style: dashed; }
.guard-pill--unknown { color: #64748b; border-style: dashed; }
.realm-card--modded .guard-pill--on, .realm-panel--modded .guard-pill--on { color: #fcd34d; border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.08); }
.realm-card--modded .guard-pill--on em, .realm-panel--modded .guard-pill--on em { color: #fbbf24; }

/* The tier word in a header chip, after the head-count. */
.realm-chip-tier { color: #6ee7b7; font-weight: 700; padding-left: 0.45rem; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.realm-chip--modded .realm-chip-tier { color: #fcd34d; }

/* ---------------------------------------------------------------------------
 * The invite-only realm (v1.13.0, Proxima Maxi). A third accent, violet, on
 * everything the two realm kinds above colour — card, tag, tab, panel, chip,
 * ladder, guards — because a second amber realm would read as the first one
 * twice, and "invite only" is what a visitor needs to see before looking for
 * an address that is not there. src/utils/realmTheme.js picks the class.
 * ------------------------------------------------------------------------- */
.realm-card--invite { border-color: rgba(139, 92, 246, 0.3); border-left-color: #8b5cf6; }
.realm-card--invite .realm-tag { color: #c4b5fd; border-color: rgba(139, 92, 246, 0.45); background: rgba(139, 92, 246, 0.1); }
.realm-tab--invite { border-left-color: rgba(139, 92, 246, 0.5); }
.realm-tab--invite.active { border-color: rgba(139, 92, 246, 0.6); border-left-color: #8b5cf6; box-shadow: 0 0 16px rgba(139, 92, 246, 0.2); }
.realm-panel--invite { border-top-color: #8b5cf6; }
.realm-chip--invite:hover { border-color: rgba(139, 92, 246, 0.5); }
.realm-chip--invite .realm-chip-tier { color: #c4b5fd; }
.realm-card--invite .realm-guard-tier, .realm-panel--invite .realm-guard-tier { color: #c4b5fd; }
.realm-card--invite .tier-rung--unlocked, .realm-panel--invite .tier-rung--unlocked { background: rgba(139, 92, 246, 0.5); border-color: rgba(139, 92, 246, 0.6); }
.realm-card--invite .tier-rung--current, .realm-panel--invite .tier-rung--current { background: #a78bfa; border-color: #c4b5fd; box-shadow: 0 0 8px rgba(167, 139, 250, 0.6); }
.realm-panel--invite .tier-rung--current .tier-rung-name { color: #c4b5fd; }
.realm-card--invite .guard-pill--on, .realm-panel--invite .guard-pill--on { color: #c4b5fd; border-color: rgba(139, 92, 246, 0.45); background: rgba(139, 92, 246, 0.08); }
.realm-card--invite .guard-pill--on em, .realm-panel--invite .guard-pill--on em { color: #a78bfa; }
.realm-tab-lock { font-size: 0.75rem; letter-spacing: 0; }

/* Where a public realm's card has its address, password and copy button. */
.realm-invite {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  border: 1px dashed rgba(139, 92, 246, 0.45);
  background: rgba(15, 10, 30, 0.6);
  color: #94a3b8;
  font-size: 0.8rem;
  line-height: 1.5;
}
.realm-invite-lock { flex: none; }
.realm-invite-word { color: #c4b5fd; font-weight: 700; }
.realm-invite--panel { max-width: 44rem; margin: 0 auto; padding: 1rem 1.25rem; font-size: 0.9rem; }

/* A part-pack realm's "reporting here" note, over its cards. */
.realm-reports {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 12, 20, 0.55);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: #cbd5e1;
}
.realm-reports-key { margin-right: 0.4rem; color: #64748b; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.realm-reports-dim { color: #64748b; }

/* The seam between a modded realm's Raven Iron panels and its Wonderland mod ones. */
.realm-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 2rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.realm-subhead-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #f8fafc; letter-spacing: 0.04em; text-transform: uppercase; }
.realm-subhead-note { font-family: var(--font-mono); font-size: 0.7rem; color: #64748b; }