/* components/theme.css */

/* ── Core Dark Blue Palette Variables ── */
:root {
  --bg:        #0d1b2e;
  --surface:   #0f2035;
  --surface2:  #132843;
  --surface3:  #1a334f;
  --border:    #1e3a58;
  --accent:    #3b82f6;
  --text:      #e2e8f0;
  --muted:     #7a9bbf;
  --green:     #10b981;
  --red:       #ef4444;
}

/* ── Global Layout Reset ── */
body { 
  background: var(--bg); 
  color: var(--text); 
}

/* ── Professional Deep Night Gradient ── */
.gradient-bg {
  background: radial-gradient(ellipse at top, #1a365d 0%, #0d1b2e 80%),
              linear-gradient(135deg, #0f2035 0%, #0d1b2e 100%);
  background-blend-mode: screen;
  border-bottom: 1px solid var(--border);
}

.pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 0.75rem;
  min-width: 72px;
  text-align: center;
}

/* Rank badges */
.rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 0.7rem; font-weight: 700;
}
.rank-1 { background: #3d2e00; color: #f59e0b; }
.rank-2 { background: #1e2a38; color: #94a3b8; }
.rank-3 { background: #2d1800; color: #f97316; }
.rank-n { background: var(--surface3); color: var(--muted); }