/* ── FIFA 2026 Design System ────────────────────────────────────── */
:root {
  --bg:       #04091C;
  --bg2:      #081430;
  --bg3:      #0D1C44;
  --navy:     #001F62;
  --navy2:    #002B8A;
  --red:      #E8192C;
  --red2:     #FF2B3E;
  --gold:     #FFC72C;
  --gold2:    #E0A800;
  --green:    #00B140;
  --text:     #FFFFFF;
  --text2:    #8AAAD4;
  --border:   #142050;
  --border2:  #1E3070;
  --radius:   12px;
  --radius-sm:8px;
  --shadow:   0 8px 32px rgba(0,0,0,.6);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:14px; line-height:1.5; }
img  { display:inline-block; vertical-align:middle; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }

/* ── Header ─────────────────────────────────────────────────────── */
.header {
  background: linear-gradient(135deg, #010A20 0%, #001440 40%, #001F62 100%);
  border-bottom: 3px solid var(--red);
  padding: 0 24px;
}
.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.header-logo { display:flex; align-items:center; gap:14px; flex:1; min-width:200px; }
.logo-img { height: 52px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.header-titles h1 { font-size:1.3rem; font-weight:900; color:var(--text); letter-spacing:-.5px; line-height:1.1; }
.subtitle { font-size:.72rem; color:var(--text2); margin-top:2px; }

.prizes { display:flex; gap:10px; }
.prize  { display:flex; flex-direction:column; align-items:center; gap:3px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-sm); padding:8px 14px; }
.prize-1 { border-color:var(--gold); background:rgba(255,199,44,.08); }
.prize-2 { border-color:#C0C0C0; }
.prize-3 { border-color:#CD7F32; }
.medal  { font-size:1.2rem; }
.amount { font-weight:800; font-size:.85rem; color:var(--gold); }

.update-info { display:flex; align-items:center; gap:8px; margin-left:auto; }
#last-update { font-size:.72rem; color:var(--text2); }
#refresh-btn { background:var(--navy); color:var(--text2); border:1px solid var(--border2); border-radius:20px; padding:5px 14px; font-size:.75rem; font-weight:600; transition:all .2s; }
#refresh-btn:hover { color:var(--gold); border-color:var(--gold); }

/* ── Tabs ───────────────────────────────────────────────────────── */
.tab-nav {
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
  display:flex;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.tab-btn {
  flex:1; padding:14px 10px; font-size:.82rem; font-weight:700;
  color:var(--text2); letter-spacing:.2px;
  border-bottom:3px solid transparent; transition:all .2s;
}
.tab-btn:hover { color:var(--text); background:rgba(255,255,255,.03); }
.tab-btn.active { color:var(--red2); border-bottom-color:var(--red); background:rgba(232,25,44,.05); }

/* ── Main ───────────────────────────────────────────────────────── */
.main-content { max-width:1200px; margin:0 auto; padding:28px 16px; }
.tab-content  { display:none; }
.tab-content.active { display:block; }
.section-title { font-size:1rem; font-weight:800; color:var(--gold); margin-bottom:18px; text-transform:uppercase; letter-spacing:.8px; }

/* ── Podium ─────────────────────────────────────────────────────── */
.podium-section { margin-bottom:44px; }
.podium {
  display:flex; justify-content:center; align-items:flex-end;
  gap:16px; padding:20px 0 36px;
}
.podium-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:16px; padding:24px 20px 20px;
  cursor:pointer; transition:transform .2s, box-shadow .2s;
  min-width:160px;
}
.podium-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.pos-1 { border-color:var(--gold); background:linear-gradient(160deg,#0D1C44,#1a2d00); box-shadow:0 0 40px rgba(255,199,44,.12); padding:32px 24px 24px; z-index:1; }
.pos-2 { border-color:#A0A0A0; }
.pos-3 { border-color:#8B5C2A; }

.podium-rank { font-size:2rem; line-height:1; }
.avatar { border-radius:50%; object-fit:cover; object-position:center top; }
.avatar-lg { width:90px; height:90px; border:3px solid var(--border2); }
.pos-1 .avatar-lg { width:108px; height:108px; border-color:var(--gold); box-shadow:0 0 20px rgba(255,199,44,.3); }
.pos-2 .avatar-lg { border-color:#C0C0C0; }
.pos-3 .avatar-lg { border-color:#CD7F32; }

.podium-name  { font-weight:800; font-size:.95rem; margin-top:4px; }
.podium-pts   { font-size:1.5rem; font-weight:900; color:var(--gold); line-height:1.2; }
.podium-pts span { font-size:.65rem; font-weight:400; color:var(--text2); margin-left:2px; }
.podium-prize { background:var(--red); color:#fff; font-size:.75rem; font-weight:800; padding:4px 12px; border-radius:20px; }
.pos-1 .podium-prize { background:linear-gradient(90deg,#C9A000,var(--gold)); color:#000; }
.podium-countries { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* ── Leaderboard ────────────────────────────────────────────────── */
.leaderboard-section { overflow-x:auto; }
.leaderboard-table { width:100%; border-collapse:collapse; }
.leaderboard-table th {
  padding:10px 12px; text-align:left;
  font-size:.7rem; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.6px;
  border-bottom:2px solid var(--border2); white-space:nowrap;
}
.leaderboard-table td { padding:10px 12px; border-bottom:1px solid rgba(20,32,80,.6); vertical-align:middle; }
.leaderboard-table tbody tr { cursor:pointer; transition:background .15s; }
.leaderboard-table tbody tr:hover td { background:rgba(255,255,255,.04); }
.top-1 td { background:rgba(255,199,44,.05) !important; }
.top-2 td { background:rgba(192,192,192,.04) !important; }
.top-3 td { background:rgba(205,127,50,.04) !important; }

.rank-cell { font-size:1.1rem; width:48px; text-align:center; }
.rank-num { font-weight:700; color:var(--text2); font-size:.9rem; }
.participant-cell { display:flex; align-items:center; gap:10px; min-width:150px; }
.avatar-sm { width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:center top; flex-shrink:0; }
.participant-name { font-weight:700; }
.prize-tag { background:var(--red); color:#fff; font-size:.68rem; font-weight:800; padding:2px 8px; border-radius:20px; margin-left:6px; white-space:nowrap; }

.countries-cell { display:flex; flex-wrap:wrap; gap:4px; min-width:180px; }
.country-tag { display:inline-flex; align-items:center; gap:4px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:3px 8px; font-size:.72rem; color:var(--text2); white-space:nowrap; }
.flag { border-radius:2px; object-fit:cover; }

.pts-cell { text-align:center; color:var(--text2); white-space:nowrap; }
.pts-cell.bonus { color:var(--green); font-weight:600; }
.pts-cell.total { color:var(--text); font-size:1rem; }

/* ── Groups ─────────────────────────────────────────────────────── */
.groups-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
  gap:20px;
}
.group-card {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--radius); overflow:hidden;
}
.group-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.group-header {
  background:linear-gradient(90deg, var(--navy), var(--navy2));
  color:#fff; font-weight:900; font-size:.9rem;
  padding:10px 16px; letter-spacing:.5px; text-transform:uppercase;
  border-bottom:2px solid var(--red);
}
.group-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.group-table th {
  padding:6px 8px; color:var(--text2); font-weight:700;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--border2); text-align:center;
  background:rgba(0,0,0,.2);
}
.group-table th.g-team-h { text-align:left; }
.group-table td { padding:7px 8px; border-bottom:1px solid rgba(20,32,80,.5); text-align:center; }
.group-table tr:last-child td { border-bottom:none; }
.group-table tr.qualified td { background:rgba(0,177,64,.06); }
.group-table tr.qualified td:first-child { border-left:3px solid var(--green); }

.g-pos { color:var(--text2); font-weight:600; width:28px; }
.g-team { display:flex; align-items:center; gap:7px; text-align:left !important; }
.g-name { font-weight:600; flex:1; }
.g-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; object-position:center top; border:1.5px solid var(--gold); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.g-avatar:hover { transform:scale(1.25); box-shadow:0 0 8px rgba(255,199,44,.5); }
.g-sec { color:var(--text2); }
.g-dif { font-weight:700; }
.g-dif.pos { color:var(--green); }
.g-dif.neg { color:var(--red); }

/* ── Calendar ───────────────────────────────────────────────────── */
.calendar-filters { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.filter-btn {
  background:var(--bg2); border:1px solid var(--border2); color:var(--text2);
  border-radius:20px; padding:7px 18px; font-size:.8rem; font-weight:700; transition:all .2s;
}
.filter-btn:hover { border-color:var(--red); color:var(--text); }
.filter-btn.active { background:var(--red); color:#fff; border-color:var(--red); }

.calendar-day { margin-bottom:32px; }
.day-header {
  font-size:.78rem; font-weight:800; text-transform:capitalize;
  color:var(--gold); margin-bottom:12px; padding-bottom:8px;
  border-bottom:2px solid var(--border2); letter-spacing:.3px;
}
.match-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:8px;
  transition:border-color .2s;
}
.match-card:hover { border-color:var(--border2); }
.match-card.live    { border-color:var(--red); box-shadow:0 0 16px rgba(232,25,44,.2); }
.match-card.finished { opacity:.85; }

.match-meta { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.match-stage { font-size:.68rem; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; }
.live-badge { background:var(--red); color:#fff; font-size:.68rem; font-weight:800; padding:2px 9px; border-radius:10px; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.6} }
.match-time { margin-left:auto; font-size:.73rem; color:var(--text2); }

.match-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.match-team { display:flex; align-items:center; gap:8px; }
.match-team.home { justify-content:flex-end; }
.match-team.away { justify-content:flex-start; }
.team-info { display:flex; flex-direction:column; }
.team-info.right { align-items:flex-start; }
.match-team.home .team-info { align-items:flex-end; }
.team-name { font-weight:700; font-size:.88rem; }
.team-owner { font-size:.68rem; color:var(--gold); font-weight:700; margin-top:1px; }
.match-team.winner .team-name { color:var(--green); }

.match-score { display:flex; align-items:center; gap:4px; font-size:1.5rem; font-weight:900; min-width:76px; justify-content:center; }
.score-sep { color:var(--text2); }
.vs { font-size:.82rem; font-weight:700; color:var(--text2); background:var(--bg3); padding:5px 12px; border-radius:20px; }

/* ── Bracket ────────────────────────────────────────────────────── */
.bracket-placeholder { display:flex; flex-direction:column; align-items:center; padding:60px 20px; gap:16px; color:var(--text2); text-align:center; }
.trophy-img { height:90px; object-fit:contain; opacity:.8; }
.bracket-placeholder h3 { color:var(--text); font-size:1.05rem; }

.bracket-scroll { overflow-x:auto; padding-bottom:16px; }
.bracket-stages { display:flex; gap:0; min-width:max-content; }
.bracket-stage { display:flex; flex-direction:column; }
.bracket-stage-name {
  font-size:.7rem; font-weight:800; color:var(--text); text-transform:uppercase;
  text-align:center; padding:10px 16px; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--navy),var(--navy2));
  border-right:1px solid var(--border2); border-bottom:2px solid var(--red);
}
.bracket-matches { display:flex; flex-direction:column; justify-content:space-around; flex:1; padding:8px; gap:8px; border-right:1px solid var(--border2); min-height:200px; }
.bracket-match { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--radius-sm); overflow:hidden; min-width:190px; }
.bracket-team { display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid rgba(20,32,80,.5); }
.bracket-team:nth-child(2) { border-bottom:none; }
.bracket-winner { background:rgba(0,177,64,.12); }
.bracket-winner .bt-name { color:var(--green); font-weight:800; }
.bt-name  { flex:1; font-size:.8rem; }
.bt-score { font-weight:800; min-width:16px; text-align:right; }
.bracket-time { font-size:.62rem; color:var(--text2); padding:3px 10px; background:var(--bg3); text-align:center; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(6px);
}
.modal-overlay.visible { display:flex; }
.modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:16px; max-width:640px; width:100%; max-height:88vh; overflow-y:auto;
  position:relative; box-shadow:var(--shadow);
}
.modal-close {
  position:absolute; top:12px; right:12px; width:30px; height:30px;
  border-radius:50%; background:var(--bg3); color:var(--text2); font-size:.95rem;
  display:flex; align-items:center; justify-content:center; transition:all .2s; z-index:1;
}
.modal-close:hover { background:var(--red); color:#fff; }

.modal-header { display:flex; gap:16px; padding:24px; border-bottom:1px solid var(--border2); align-items:center; }
.avatar-modal-full {
  width: 140px;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  border: 3px solid var(--gold);
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.modal-info h2 { font-size:1.2rem; font-weight:900; margin-bottom:8px; }
.modal-medal { font-size:1.2rem; }
.modal-score-row { display:flex; gap:16px; font-size:.83rem; color:var(--text2); flex-wrap:wrap; }
.modal-score-row strong { color:var(--text); }
.modal-total strong { color:var(--gold) !important; }
.modal-prize { margin-top:8px; color:var(--red2); font-weight:800; font-size:.9rem; }

.modal-countries { padding:16px 24px 24px; display:flex; flex-direction:column; gap:14px; }
.country-block { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.country-block-header { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border2); }
.country-block-name { font-weight:700; flex:1; }
.country-pts { font-weight:900; color:var(--gold); }
.country-matches { padding:8px 14px; display:flex; flex-direction:column; gap:6px; }
.match-row { font-size:.78rem; color:var(--text2); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.match-row.empty { color:rgba(138,170,212,.4); font-style:italic; }
.mr-stage { font-weight:700; color:var(--text2); }
.mr-pts { color:var(--green); font-weight:800; }
.mr-date { color:rgba(138,170,212,.5); font-size:.68rem; margin-left:auto; }

/* ── Empty state ────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text2); }

/* ── Responsive ─────────────────────────────────────────────────── */
/* ── Tablet (≤768px) ────────────────────────────────────────────── */
@media (max-width:768px) {
  /* Header */
  .header { padding:0 12px; }
  .header-content { gap:10px; min-height:auto; padding:10px 0; }
  .logo-img { height:38px; }
  .header-titles h1 { font-size:1rem; }
  .subtitle { font-size:.65rem; }
  .prizes { gap:6px; }
  .prize { padding:5px 9px; }
  .medal { font-size:1rem; }
  .amount { font-size:.75rem; }
  .update-info { margin-left:0; width:100%; justify-content:flex-end; }

  /* Podium */
  .podium { gap:10px; }
  .podium-card { min-width:120px; padding:16px 12px 14px; }
  .pos-1 { padding:22px 16px 16px; }
  .avatar-lg { width:68px; height:68px; }
  .pos-1 .avatar-lg { width:82px; height:82px; }
  .podium-name { font-size:.85rem; }
  .podium-pts { font-size:1.2rem; }

  /* Leaderboard — hide countries column */
  .leaderboard-table th:nth-child(3),
  .leaderboard-table td:nth-child(3) { display:none; }

  /* Groups */
  .groups-grid { grid-template-columns:1fr; }
  .g-team { white-space:normal; }
  .g-sec { display:none; }                  /* hide PG/PE/PP/GF/GC on tablet */
  .group-table th:nth-child(n+5):nth-child(-n+8),
  .group-table td:nth-child(n+5):nth-child(-n+8) { display:none; }

  /* Calendar */
  .match-teams { gap:6px; }
  .team-name { font-size:.8rem; }
  .match-score { font-size:1.1rem; min-width:54px; }

  /* Modal */
  .avatar-modal-full { width:110px; height:130px; }
  .modal-header { gap:12px; padding:18px 16px; }
}

/* ── Mobile (≤480px) ────────────────────────────────────────────── */
@media (max-width:480px) {
  /* Header — stack vertically */
  .header-content { flex-direction:column; align-items:flex-start; gap:8px; padding:10px 0; }
  .header-logo { width:100%; }
  .prizes { width:100%; justify-content:space-around; }
  .prize { flex:1; }
  .update-info { width:100%; justify-content:space-between; }

  /* Tabs — scrollable row */
  .tab-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab-nav::-webkit-scrollbar { display:none; }
  .tab-btn { font-size:.72rem; padding:12px 14px; white-space:nowrap; flex:none; }

  /* Podium — 1st full width, 2nd & 3rd side by side */
  .podium { flex-wrap:wrap; justify-content:center; gap:10px; }
  .pos-1 { width:100%; order:-1; flex-direction:row; padding:14px 16px; gap:14px; text-align:left; }
  .pos-1 .avatar-lg { width:72px; height:72px; flex-shrink:0; }
  .pos-1 .podium-rank { font-size:1.6rem; }
  .pos-1 .podium-countries { justify-content:flex-start; }
  .pos-2, .pos-3 { width:calc(50% - 5px); min-width:0; }

  /* Leaderboard — hide Grupos & Bonus, keep Total */
  .leaderboard-table th:nth-child(4),
  .leaderboard-table td:nth-child(4),
  .leaderboard-table th:nth-child(5),
  .leaderboard-table td:nth-child(5) { display:none; }
  .participant-name { font-size:.82rem; }
  .prize-tag { display:none; }               /* show prize only in modal */
  .leaderboard-table td { padding:8px 8px; }

  /* Groups — show only #, team, Pts, Dif */
  .group-table .g-sec { display:none; }

  /* Calendar — stack team names vertically */
  .match-teams { grid-template-columns:1fr auto 1fr; gap:4px; }
  .team-name { font-size:.75rem; }
  .team-owner { font-size:.62rem; }
  .match-score { font-size:1rem; min-width:46px; }
  .match-time { font-size:.65rem; }

  /* Modal */
  .modal { border-radius:16px 16px 0 0; max-height:92vh; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .avatar-modal-full { width:90px; height:110px; border-radius:10px; }
  .modal-header { padding:16px 14px; gap:12px; }
  .modal-info h2 { font-size:1rem; }
  .modal-score-row { gap:10px; font-size:.76rem; }
  .modal-countries { padding:12px 14px 20px; }
}