/* ===================================================
   BOLÃO COPA 2026 — Styles (BEM)
   =================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ── */
:root {
  --bg:#080808; --card:#111; --card2:#161616; --border:#242424;
  --gold:#c9a84c; --gold2:#e8c96a; --text:#ede9df; --muted:#585858;
  --red:#c1121f; --green:#1a7c3e;
  --kc:#1a7c3e; --am:#f47c20; --pr:#c8c8c8; --wb:#6b3fa0; --ms:#1a3a8a; --hd:#06b6d4;
}

/* ── Base ── */
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

/* ── Watermark ── */
#watermark {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:340px; height:auto; opacity:.055; pointer-events:none; z-index:0; filter:grayscale(20%);
}

/* ══════════════ HEADER ══════════════ */
header { background:#000; border-bottom:2px solid var(--gold); position:sticky; top:0; z-index:100; }

.header__inner {
  max-width:1100px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

.header__logo {
  font-family:'Unbounded',sans-serif; font-weight:900; font-size:1rem;
  color:#fff; letter-spacing:-.3px; line-height:1.1; white-space:nowrap;
}
.header__logo span { color:var(--gold); }
.header__logo small {
  display:block; font-family:'Inter',sans-serif; font-size:.52rem; font-weight:500;
  color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:2px;
}

/* ══════════════ NAV ══════════════ */
nav { display:flex; gap:3px; flex-wrap:wrap; flex:1; }

.nav__btn {
  background:transparent; border:1px solid transparent; color:var(--muted);
  font-family:'Inter',sans-serif; font-size:.66rem; font-weight:700;
  padding:5px 10px; cursor:pointer; border-radius:4px; letter-spacing:.4px;
  text-transform:uppercase; transition:all .15s; white-space:nowrap;
}
.nav__btn.is-active, .nav__btn:hover { color:#fff; }

.nav__btn--ranking.is-active,  .nav__btn--ranking:hover  { background:var(--ms); border-color:var(--ms); }
.nav__btn--games.is-active,    .nav__btn--games:hover    { background:var(--kc); border-color:var(--kc); }
.nav__btn--predictions.is-active,.nav__btn--predictions:hover { background:var(--am); border-color:var(--am); }
.nav__btn--tournament.is-active,.nav__btn--tournament:hover { background:var(--gold); border-color:var(--gold); color:#000!important; }
.nav__btn--account.is-active,  .nav__btn--account:hover  { background:var(--gold); border-color:var(--gold); color:#000!important; }
.nav__btn--faq.is-active,      .nav__btn--faq:hover      { background:#333; border-color:#444; }
.nav__btn--history.is-active,  .nav__btn--history:hover  { background:#2d1a4a; border-color:#6b3fa0; }
.nav__btn--admin {
  background:linear-gradient(135deg,#a07820,var(--gold))!important;
  color:#000!important; font-weight:900!important; display:none!important;
}
.nav__btn--admin.is-visible { display:inline-block!important; }
.nav__btn--admin.is-active  { outline:2px solid #fff; outline-offset:2px; }

/* ══════════════ USER AREA ══════════════ */
#us { margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.user-tag {
  background:#111; border:1px solid var(--gold); color:var(--gold);
  border-radius:99px; padding:4px 12px; font-weight:700; font-size:.73rem; cursor:pointer;
}
.points-tag {
  background:var(--gold); color:#000; border-radius:99px; padding:4px 12px;
  font-family:'Unbounded',sans-serif; font-size:.76rem; font-weight:900;
}
.admin-pill {
  background:var(--gold); color:#000; font-family:'Unbounded',sans-serif;
  font-size:.52rem; font-weight:900; padding:2px 6px; border-radius:3px;
  letter-spacing:1.5px; vertical-align:middle; margin-left:3px;
}
.unit-badge {
  display:inline-block; font-size:.65rem; font-weight:700;
  padding:2px 9px; border-radius:99px; border:1px solid;
}

/* ══════════════ MAIN / TABS ══════════════ */
main { max-width:1100px; margin:0 auto; padding:22px 20px; position:relative; z-index:1; }

.tab { display:none; }
.tab--active { display:block; }

.section-title {
  font-family:'Unbounded',sans-serif; font-size:.78rem; font-weight:900;
  color:var(--gold); letter-spacing:1px; text-transform:uppercase;
  margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.section-title::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(to right,var(--gold),transparent);
}

/* ══════════════ CARD ══════════════ */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:18px; margin-bottom:10px;
}

/* ══════════════ HERO ══════════════ */
.hero {
  background:linear-gradient(135deg,#0f0d00,#1a1400,#000);
  border:1px solid var(--gold); border-radius:10px; padding:20px 24px;
  margin-bottom:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.hero__title { font-family:'Unbounded',sans-serif; font-size:1.35rem; font-weight:900; color:#fff; line-height:1.1; }
.hero__title span { color:var(--gold); }
.hero__subtitle { font-size:.76rem; color:var(--muted); margin-top:4px; }
.hero__dates { margin-left:auto; text-align:right; }
.hero__date-value { font-family:'Unbounded',sans-serif; font-size:.85rem; font-weight:700; color:var(--gold); }
.hero__date-label { font-size:.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* ══════════════ STATS GRID ══════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:20px; }
.stats-grid__item { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px; text-align:center; }
.stats-grid__number { font-family:'Unbounded',sans-serif; font-size:1.9rem; font-weight:900; color:var(--gold); }
.stats-grid__description { font-size:.72rem; color:var(--muted); margin-top:4px; line-height:1.4; }

/* ══════════════ LEADERBOARD ══════════════ */
.leaderboard { display:flex; flex-direction:column; gap:6px; }

.leaderboard__row {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:11px 15px; display:flex; align-items:center; gap:11px; transition:border-color .2s;
}
.leaderboard__row:hover,
.leaderboard__row--me { border-color:var(--gold); }
.leaderboard__row--me { background:#1a1500; }

.leaderboard__rank { font-family:'Unbounded',sans-serif; font-size:.95rem; font-weight:900; width:30px; text-align:center; color:var(--muted); }
.leaderboard__rank--gold   { color:var(--gold); }
.leaderboard__rank--silver { color:#94a3b8; }
.leaderboard__rank--bronze { color:#cd7f32; }

.leaderboard__avatar {
  width:36px; height:36px; border-radius:50%; background:#1a1a1a;
  border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.leaderboard__info  { flex:1; }
.leaderboard__name  { font-weight:600; font-size:.85rem; }
.leaderboard__unit-tag { display:inline-block; font-size:.6rem; font-weight:700; padding:1px 7px; border-radius:99px; margin-top:3px; }
.leaderboard__points       { font-family:'Unbounded',sans-serif; font-size:1.4rem; font-weight:900; color:var(--gold); }
.leaderboard__points-label { font-size:.56rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.leaderboard__bar-bg { height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin-top:5px; }
.leaderboard__bar    { height:5px; border-radius:3px; }

/* ══════════════ UNIT FILTERS ══════════════ */
.unit-filters { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
.unit-filters__btn {
  border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--muted);
  font-family:'Inter',sans-serif; font-size:.65rem; font-weight:700; padding:5px 12px;
  cursor:pointer; text-transform:uppercase; letter-spacing:.4px; transition:all .15s;
}
.unit-filters__btn.is-active, .unit-filters__btn:hover {
  background: var(--unit-color, var(--muted));
  border-color: var(--unit-color, var(--muted));
  color: var(--unit-text, #fff);
}

/* ══════════════ MATCH CARD ══════════════ */
.match-card {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:11px 15px; display:grid; grid-template-columns:1fr auto 1fr auto;
  align-items:center; gap:8px; margin-bottom:6px; transition:border-color .2s;
}
.match-card:hover { border-color:#333; }
.match-card__team { font-weight:600; font-size:.83rem; }
.match-card__team--home { text-align:right; }
.match-card__team--away { text-align:left; }
.match-card__flag   { font-size:1.1rem; vertical-align:middle; }
.match-card__score  {
  font-family:'Unbounded',sans-serif; font-size:1.15rem; font-weight:900;
  color:var(--gold); text-align:center; min-width:68px;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.match-card__status { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.match-card__status--done { color:#4ade80; }
.match-card__status--live { color:#ef4444; }
.match-card__venue  { font-size:.68rem; color:var(--muted); margin-top:2px; }
.match-card__info   { }

/* Live dot */
.live-dot { width:7px; height:7px; border-radius:50%; background:#ef4444; display:inline-block; animation:pulse 1.2s infinite; }
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.7); }
}

/* ══════════════ BET BADGE ══════════════ */
.bet-badge {
  display:inline-flex; align-items:center; gap:3px; font-size:.62rem; font-weight:700;
  padding:2px 8px; border-radius:99px; margin-top:3px; text-transform:uppercase; letter-spacing:.3px;
}
.bet-badge--exact   { background:#1a1200; color:var(--gold); border:1px solid var(--gold); }
.bet-badge--win     { background:#0d2818; color:#4ade80; }
.bet-badge--loss    { background:#1c0808; color:#fca5a5; }
.bet-badge--pending { background:#12141a; color:#93c5fd; }

/* ══════════════ TOURNAMENT / GROUPS ══════════════ */
.groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; }

.group-table { width:100%; border-collapse:collapse; font-size:.72rem; table-layout:fixed; }
.group-table th {
  text-align:center; padding:3px 2px; color:var(--muted);
  font-size:.55rem; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border);
}
.group-table th:first-child { text-align:left; width:38%; }
.group-table td { padding:4px 2px; border-bottom:1px solid rgba(36,36,36,.6); text-align:center; }
.group-table td:first-child { text-align:left; }
.group-table tr:last-child td { border-bottom:none; }
.group-table__label { font-family:'Unbounded',sans-serif; font-size:.85rem; font-weight:900; color:var(--gold); margin-bottom:9px; letter-spacing:1px; }

/* ══════════════ SCORE INPUT ══════════════ */
.score-input-row { display:flex; align-items:center; gap:7px; margin-top:8px; font-size:.78rem; color:var(--muted); flex-wrap:wrap; }
.score-input {
  width:42px; text-align:center; background:#0a0a0a; border:1px solid var(--border);
  border-radius:6px; color:var(--text); font-size:1.05rem; font-weight:700;
  padding:5px 3px; outline:none; font-family:'Inter',sans-serif;
}
.score-input:focus { border-color:var(--gold); }

/* ══════════════ FORMS ══════════════ */
.form-group { margin-bottom:12px; }
label { display:block; font-size:.65rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
input[type=text], input[type=email], input[type=password], select {
  width:100%; background:#0a0a0a; border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:.86rem; padding:8px 11px;
  transition:border-color .15s; outline:none;
}
input:focus, select:focus { border-color:var(--gold); }
select option { background:#111; }

/* ══════════════ BUTTONS ══════════════ */
.btn {
  background:var(--gold); color:#000; border:none; border-radius:6px;
  font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700;
  padding:9px 18px; cursor:pointer; text-transform:uppercase; letter-spacing:.4px;
  transition:opacity .15s; display:inline-block;
}
.btn:hover { opacity:.82; }
.btn--sm      { padding:5px 12px; font-size:.68rem; }
.btn--outline { background:transparent; color:var(--gold); border:1px solid var(--gold); }
.btn--outline:hover { background:var(--gold); color:#000; }
.btn--danger  {
  background:transparent; color:#fca5a5; border:1px solid var(--red);
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:700;
  padding:5px 11px; cursor:pointer; border-radius:6px; transition:all .15s;
}
.btn--danger:hover { background:var(--red); color:#fff; }

/* ══════════════ AUTH ══════════════ */
.auth-toggle { text-align:center; margin-top:11px; font-size:.8rem; color:var(--muted); }
.auth-toggle a { color:var(--gold); cursor:pointer; text-decoration:underline; }

/* ══════════════ ALERTS ══════════════ */
.alert { padding:9px 13px; border-radius:6px; font-size:.8rem; margin-bottom:11px; line-height:1.5; }
.alert--info    { background:#0d1117; color:#93c5fd; border:1px solid #1e3a5f; }
.alert--success { background:#0d2818; color:#4ade80; border:1px solid #2d6a4f; }
.alert--error   { background:#1c0808; color:#fca5a5; border:1px solid #7f1d1d; }
.alert--warning { background:#1a1200; color:var(--gold); border:1px solid #4a3500; }

.divider { height:1px; background:var(--border); margin:14px 0; }

/* ══════════════ ADMIN BANNER ══════════════ */
.admin-banner {
  background:linear-gradient(135deg,#1a1200,#2a1e00); border:1px solid var(--gold);
  border-radius:10px; padding:16px 20px; display:flex; align-items:center;
  justify-content:space-between; margin-bottom:22px; gap:12px;
}
.admin-banner__title    { font-family:'Unbounded',sans-serif; font-size:1rem; font-weight:900; color:var(--gold); }
.admin-banner__subtitle { font-size:.7rem; color:var(--muted); margin-top:3px; }
.admin-banner__badge    { background:var(--gold); color:#000; font-family:'Unbounded',sans-serif; font-size:.62rem; font-weight:900; padding:5px 12px; border-radius:4px; letter-spacing:2px; flex-shrink:0; }

/* ══════════════ SECURITY GRID ══════════════ */
.security-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; margin-bottom:6px; }
.security-card { border-radius:8px; padding:13px; border:1px solid; display:flex; flex-direction:column; gap:4px; }
.security-card--ok      { background:#0a1a0d; border-color:#1d4a25; }
.security-card--warning { background:#1a1200; border-color:#4a3500; }
.security-card__icon        { font-size:1.25rem; }
.security-card__title       { font-weight:700; font-size:.82rem; }
.security-card__description { font-size:.72rem; color:var(--muted); line-height:1.5; flex:1; }
.security-card__tag { font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:99px; display:inline-block; align-self:flex-start; margin-top:2px; }
.security-card__tag--ok      { background:#0d2818; color:#4ade80; }
.security-card__tag--warning { background:#2a1e00; color:var(--gold); border:1px solid var(--gold); }

/* ══════════════ ADMIN STATS ══════════════ */
.admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:8px; margin-bottom:6px; }
.admin-stats__item   { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:13px; text-align:center; }
.admin-stats__number { font-family:'Unbounded',sans-serif; font-size:1.6rem; font-weight:900; color:var(--gold); }
.admin-stats__label  { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:3px; }

/* ══════════════ INVITE ROW ══════════════ */
.invite-row { display:flex; align-items:center; gap:8px; padding:8px 11px; background:var(--card2); border:1px solid var(--border); border-radius:7px; margin-bottom:5px; }
.invite-row__email  { flex:1; font-size:.8rem; }
.invite-row__status { font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:99px; }
.invite-row__status--pending { background:#12141a; color:#93c5fd; }
.invite-row__status--joined  { background:#0d2818; color:#4ade80; }

/* ══════════════ MODAL ══════════════ */
#modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:999; align-items:center; justify-content:center; padding:20px; }
.modal__box     { background:#161616; border:1px solid var(--gold); border-radius:12px; padding:26px; max-width:400px; width:100%; text-align:center; }
.modal__message { font-size:.88rem; color:var(--text); line-height:1.6; margin-bottom:20px; }
.modal__actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ══════════════ FAQ ══════════════ */
.faq-categories { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.faq-categories__btn {
  background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:5px;
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:700; padding:5px 13px;
  cursor:pointer; text-transform:uppercase; letter-spacing:.3px; transition:all .15s;
}
.faq-categories__btn.is-active, .faq-categories__btn:hover { background:var(--gold); color:#000; border-color:var(--gold); }

.faq-section          { display:none; }
.faq-section--active  { display:block; }

.tournament-section         { display:none; }
.tournament-section--active { display:block; }

.faq-item { background:var(--card); border:1px solid var(--border); border-radius:8px; margin-bottom:6px; overflow:hidden; }
.faq-item__question {
  padding:13px 17px; font-weight:600; font-size:.83rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; user-select:none; transition:color .15s;
}
.faq-item__question:hover { color:var(--gold); }
.faq-item__icon   { font-size:1.15rem; color:var(--gold); flex-shrink:0; font-weight:300; line-height:1; }
.faq-item__answer { display:none; padding:13px 17px; font-size:.8rem; line-height:1.7; color:var(--muted); border-top:1px solid var(--border); }
.faq-item__answer strong { color:var(--text); }

/* ══════════════ SECURITY TOOLS ══════════════ */
.security-tools { background:#0d1117; border:1px solid #1e3a5f; border-radius:8px; padding:16px; margin-bottom:16px; }
.security-tools__title { font-family:'Unbounded',sans-serif; font-size:.62rem; font-weight:900; color:#93c5fd; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
.security-tools__grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:11px; }
.security-tools__name  { font-weight:900; font-size:.75rem; color:var(--gold); margin-bottom:4px; }
.security-tools__description { font-size:.73rem; color:var(--muted); line-height:1.6; }
.security-tools__description strong { color:#93c5fd; }

/* ══════════════ MICROSOFT SSO ══════════════ */
.btn--microsoft {
  background: #2f2f2f;
  color: #fff;
  border: 1px solid #444;
  transition: background .2s, border-color .2s;
}
.btn--microsoft:hover {
  background: #3f3f3f;
  border-color: #555;
  opacity: 1;
}

.divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  margin: 16px 0;
}
.divider-text::before, .divider-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.divider-text:not(:empty)::before {
  margin-right: .5em;
}
.divider-text:not(:empty)::after {
  margin-left: .5em;
}

/* ══════════════ SKELETON LOADING & BUTTON SPINNING ══════════════ */
.skeleton {
  background: linear-gradient(90deg, #161616 25%, #242424 50%, #161616 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 6px;
  display: inline-block;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text { height: 14px; width: 100%; margin-bottom: 6px; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; }

.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spinner 0.6s linear infinite;
}

@keyframes btn-spinner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:580px) {
  .match-card { grid-template-columns:1fr auto 1fr; }
  .match-card__info { grid-column:1 / -1; text-align:center; }
  .header__inner { gap:6px; }
  .nav__btn { padding:4px 7px; font-size:.6rem; }
}