/* mondial.css — World Cup 2026 Prediction Game */

/* 25% larger fonts: scale all rem units — !important to override Bootstrap */
html { font-size: 20px !important; }
/* Ensure .small class never goes below 14px */
.small, small { font-size: 0.8rem !important; }

/* Flag images from flagcdn.com */
.flag-img { width: 50px; height: 34px; object-fit: contain; display: block; margin: 0 auto; }

:root {
  --gold: #F5A623;
  --gold-light: #FFF8E7;
  --dark: #1A2332;
  --green: #1B5E35;
  --green-light: #E8F5E9;
  --locked-bg: #2C3E50;
  --finished-bg: #F0F4F8;
}

body { font-family: 'Assistant', sans-serif; }
.fw-800 { font-weight: 800 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-600 { font-weight: 600 !important; }

/* ── Match Cards ─────────────────────────────────────────── */
.match-card {
  border: none;
  transition: transform 0.15s;
}
.match-card:hover { transform: translateY(-2px); }

/* Open: very light orange */
.match-open { background: #FFF3CD; border: 2px solid #FFD97A; box-shadow: 0 4px 16px rgba(245,166,35,0.12); }
.match-open .match-header { background: rgba(0,0,0,0.05); color: #555; }
.match-open .match-footer { background: rgba(0,0,0,0.04); color: #666; }
.match-open .team-name { color: #1A2332; }
.match-open .team-flag { font-size: 2.2rem; }

/* Locked: light gray */
.match-locked { background: #e8edf0; border: 1px solid #c9d3d9; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.match-locked .match-header { background: rgba(0,0,0,0.06); color: #555; }
.match-locked .match-footer { background: rgba(0,0,0,0.04); color: #666; }
.match-locked .team-name { color: #333; }
.match-locked .team-flag { font-size: 2.2rem; opacity: 0.8; }
.match-locked .locked-pred { font-size: 1.8rem; font-weight: 800; color: #1A2332; }

/* Finished: light */
.match-finished { background: white; border: 1px solid #dee2e6; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.match-finished .match-header { background: var(--green); color: white; }
.match-finished .match-footer { background: #f8f9fa; color: #666; }
.match-finished .team-name { color: #333; }
.match-finished .team-flag { font-size: 2rem; }

/* Team layout */
.team-col { min-width: 90px; max-width: 120px; }
.team-flag { font-size: 2.4rem; line-height: 1.1; }
.team-name { font-size: 0.95rem; line-height: 1.2; margin-top: 4px; }

/* Score stepper (replaces numeric input) */
.score-stepper {
  display: flex;
  align-items: center;
  background: white;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  overflow: hidden;
}
.step-btn {
  width: 30px;
  height: 48px;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  color: #1A2332;
  padding: 0;
  line-height: 1;
  user-select: none;
}
.step-btn:hover { background: rgba(0,0,0,0.08); }
.step-btn:active { background: rgba(0,0,0,0.15); }
.score-val {
  min-width: 38px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #1A2332;
  border-right: 1px solid rgba(0,0,0,0.1);
  border-left: 1px solid rgba(0,0,0,0.1);
  user-select: none;
}

/* Save button */
.save-btn {
  background: var(--dark);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 4px 18px;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.save-btn:hover { background: var(--green); }
.save-btn.saved { background: var(--green); }
.save-btn:disabled { opacity: 0.7; }

/* Result score */
.result-score {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: 2px;
}

/* Prediction badge */
.prediction-badge { font-size: 0.85rem; }
.pts-earned { display: block; font-weight: 700; color: var(--green); margin-top: 2px; }

/* Match header/footer */
.match-header, .match-footer {
  font-size: 0.8rem;
  padding: 4px 12px;
}

/* Date header */
.date-header { font-size: 0.85rem; letter-spacing: 0.5px; }

/* Prize banner */
.prize-banner { border: 2px solid rgba(245,166,35,0.3); }

/* Navbar brand */
.navbar-brand { font-weight: 800; font-size: 1.2rem; }

/* Admin table */
.table { font-size: 0.9rem; }