/* ============================================================
   theme.css — Eagle-Esports-inspired dark theme for Fire Battle
   Include this AFTER style.css on any page you want restyled.
   Uses CSS variables so colors are easy to tweak in one place.
   ============================================================ */

:root {
  --bg: #05070d;
  --bg-elevated: #0d1220;
  --card: #10182b;
  --card-border: #1c2740;
  --accent: #ff6a1a;
  --accent-2: #ff9d1a;
  --accent-grad: linear-gradient(135deg, #ff6a1a 0%, #ff2e63 100%);
  --text: #f5f6fa;
  --text-dim: #9aa4bf;
  --success: #22c55e;
  --danger: #ef4444;
  --radius: 16px;
  --radius-sm: 10px;
}

body.eagle-theme {
  background: radial-gradient(circle at top, #0c1226 0%, #05070d 60%);
  color: var(--text);
  font-family: "Work Sans", sans-serif;
  padding-bottom: 90px;
}

/* ---------- Header ---------- */
.eagle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: rgba(13, 18, 32, 0.9);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--card-border);
}
.eagle-header .brand { display: flex; align-items: center; gap: 10px; }
.eagle-header .brand img { width: 36px; height: 36px; border-radius: 10px; }
.eagle-header .brand h1 { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.eagle-header .brand span { display: block; font-size: 11px; color: var(--text-dim); font-weight: 400; }
.eagle-coins {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--card-border);
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.eagle-coins img { width: 20px; height: 20px; }

/* ---------- Stats strip ---------- */
.eagle-stats {
  display: flex; gap: 10px; padding: 16px; overflow-x: auto;
}
.eagle-stat-card {
  flex: 1; min-width: 100px; text-align: center;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 14px 8px;
}
.eagle-stat-card .num {
  font-size: 20px; font-weight: 800;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eagle-stat-card .lbl { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Section heading ---------- */
.eagle-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 8px;
}
.eagle-section h2 { font-size: 16px; font-weight: 700; }
.eagle-section a { font-size: 12px; color: var(--accent-2); font-weight: 600; }

/* ---------- Cards / feed ---------- */
.eagle-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 12px; }
.eagle-card {
  min-width: 220px; background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); overflow: hidden; text-align: left;
}
.eagle-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.eagle-card .body { padding: 10px 12px; }
.eagle-card .title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.eagle-card .meta { font-size: 12px; color: var(--text-dim); display: flex; justify-content: space-between; }
.eagle-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; background: var(--accent-grad); color: #fff; text-transform: uppercase;
}

/* ---------- My matches quick tiles ---------- */
.eagle-tiles { display: flex; gap: 10px; padding: 0 16px 6px; }
.eagle-tiles a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 16px 6px; color: var(--text);
}
.eagle-tiles a i {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-grad); font-size: 16px;
}
.eagle-tiles a p { font-size: 12px; font-weight: 600; }

/* ---------- Mode grid ---------- */
.eagle-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 12px; }
.eagle-mode-item {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  overflow: hidden; text-align: center; cursor: pointer;
}
.eagle-mode-item img { width: 100%; height: 100px; object-fit: cover; }
.eagle-mode-item h3 { font-size: 13px; font-weight: 700; padding: 10px 4px; }

/* ---------- Leaderboard list ---------- */
.eagle-rank-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); margin: 0 16px 8px;
}
.eagle-rank-item .rank {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; background: #1c2740; flex-shrink: 0;
}
.eagle-rank-item.top1 .rank { background: linear-gradient(135deg,#ffd700,#ff9d1a); color: #1a1200; }
.eagle-rank-item.top2 .rank { background: linear-gradient(135deg,#d9d9e3,#9aa4bf); color: #1a1a1a; }
.eagle-rank-item.top3 .rank { background: linear-gradient(135deg,#cd7f32,#a85a2e); color: #1a0f00; }
.eagle-rank-item .info { flex: 1; }
.eagle-rank-item .info .name { font-weight: 700; font-size: 14px; }
.eagle-rank-item .info .sub { font-size: 11px; color: var(--text-dim); }
.eagle-rank-item .score { text-align: right; }
.eagle-rank-item .score .pts { font-weight: 800; font-size: 14px; color: var(--accent-2); }
.eagle-rank-item .score .lbl { font-size: 10px; color: var(--text-dim); }

/* ---------- Tabs (Week/Month, Players/Teams) ---------- */
.eagle-tabs { display: flex; gap: 8px; padding: 0 16px 12px; }
.eagle-tab {
  flex: 1; text-align: center; padding: 9px 6px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--card-border);
  font-size: 13px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.eagle-tab.active { background: var(--accent-grad); color: #fff; border-color: transparent; }

/* ---------- Bottom nav ---------- */
.eagle-footer {
  position: fixed; bottom: 0; left: 0; width: 100%;
  display: flex; justify-content: space-around; align-items: center;
  background: rgba(13, 18, 32, 0.95); backdrop-filter: blur(6px);
  border-top: 1px solid var(--card-border); padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  z-index: 20;
}
.eagle-footer a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-dim); font-size: 10px; font-weight: 600; }
.eagle-footer a i { font-size: 18px; }
.eagle-footer a.active { color: var(--accent-2); }

.eagle-empty { text-align: center; color: var(--text-dim); padding: 30px 16px; font-size: 13px; }