/* wgf-realm-card.css - M65: the realm identity card + faction balance bar.
   The ONE realm card (wgf_realm_card.py) composed wherever realms are shown: pickers, hubs,
   realm pages. Think character card, but for a realm - name, standing, who ranks #1 here.
   Tokens only (static/css/_tokens.css); faction colors from --fc-horde / --fc-alliance; text
   over the colored bar carries the shared ink outline so it stays legible. States: default /
   hover / focus; honest empty state; a slim compact variant for dense lists. */

.wgf-realm-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  /* kit re-cut 2026-07-04: the realm "player character card" wears the in-game
     tooltip plate (near-black blue-tinted, thin light border, squared), the same
     surface as item/character tooltips. Never a warm-brown rounded panel. */
  border: 1px solid #7a7a96;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(12, 12, 30, 0.97), rgba(5, 5, 16, 0.97));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  transition: border-color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.wgf-realm-card:hover, .wgf-realm-card:focus-within {
  border-color: #9a9ab5;
  background: linear-gradient(180deg, rgba(22, 22, 44, 0.97), rgba(8, 8, 22, 0.97));
  transform: translateY(-2px);
}

.wrc-head { display: flex; align-items: baseline; }
.wrc-name {
  font-family: var(--font-game-display);
  font-size: var(--text-lg);
  font-variant: small-caps;
  letter-spacing: .03em;
  color: var(--wgf-gold-bright);
  text-decoration: none;
  text-shadow: var(--text-ink-outline);
}
.wrc-name:hover { color: var(--wgf-gold-hover); text-decoration: underline; }

/* meta rows (population, timezone) */
.wrc-meta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-text);
}
.wrc-meta__k { color: var(--wgf-muted); }
.wrc-meta__v { color: var(--wgf-text); }

/* faction balance bar */
.wrc-bar { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.wrc-bar__scope {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
}
.wrc-bar__track {
  display: flex;
  width: 100%;
  height: 20px;
  border-radius: var(--radius-control);
  overflow: hidden;
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-2);
}
.wrc-bar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.wrc-bar__seg--horde { background: var(--fc-horde); }
.wrc-bar__seg--alliance { background: var(--fc-alliance); }
.wrc-bar__pct {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  text-shadow: var(--text-ink-outline);
  white-space: nowrap;
}
.wrc-bar__legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
}
.wrc-bar__side { display: inline-flex; align-items: center; gap: var(--space-1); }
.wrc-bar__side--horde { color: var(--fc-horde); }
.wrc-bar__side--alliance { color: var(--fc-alliance); }

/* rank #1 + M+ standing lines */
.wrc-rank1, .wrc-mplus {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--wgf-text);
}
.wrc-rank1__n {
  font-family: var(--font-display);
  color: var(--wgf-gold-bright);
  font-size: var(--text-md);
}
.wrc-rank1--none, .wrc-mplus, .wrc-scope, .wrc-empty { color: var(--wgf-muted); }
.wrc-scope {
  margin: var(--space-1) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
}
.wrc-empty {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--wgf-muted);
}

/* compact variant for pickers / dense lists */
.wgf-realm-card--compact {
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
}
.wgf-realm-card--compact .wrc-name { font-size: var(--text-md); }
.wgf-realm-card--compact .wrc-bar__track { height: 12px; }
.wgf-realm-card--compact .wrc-bar__pct { font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  .wgf-realm-card { transition: none; }
  .wgf-realm-card:hover { transform: none; }
}