/* =============================================================
   Torneo Longara — design system
   - Body: Inter (geometric sans, very legible at small sizes)
   - Display: Bebas Neue (condensed, all-caps, sports-broadcast feel)
   - Tabular numerals via system font features for scores
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --c-primary: 232 119 34;       /* #E87722 orange */
  --c-secondary: 27 42 78;       /* #1B2A4E navy */
  --c-accent: 247 181 0;         /* #F7B500 gold */
  --c-text: 15 23 42;            /* slate-900 */
  --c-bg: 247 248 250;           /* slate-50 */
  --c-card: 255 255 255;
  --c-muted: 100 116 139;        /* slate-500 */
  --c-border: 226 232 240;       /* slate-200 */

  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px -2px rgba(15,23,42,.05);
  --shadow-hover: 0 6px 16px -4px rgba(15,23,42,.12), 0 12px 32px -8px rgba(15,23,42,.18);
  --shadow-live:  0 0 0 4px rgba(239,68,68,.15);

  --r-card: 16px;
  --r-pill: 999px;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: rgb(var(--c-bg));
  color: rgb(var(--c-text));
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* -------------------------------------------------------------
   Display typography
   ------------------------------------------------------------- */
.display, h1.display, h2.display, h3.display {
  font-family: "Bebas Neue", "Oswald", "Anton", "Inter Tight", "Inter", sans-serif;
  letter-spacing: 0.02em;
  font-weight: 400; /* Bebas Neue only ships at 400 */
  line-height: 0.95;
  text-transform: uppercase;
}

.display-tight { letter-spacing: 0; }
.italic-skew { font-style: italic; transform: skewX(-6deg); display: inline-block; }

/* -------------------------------------------------------------
   Tabular numerals — for any score, position, stat
   ------------------------------------------------------------- */
.tnum, .scoreboard-digit {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}
.scoreboard-digit { font-weight: 800; }

/* -------------------------------------------------------------
   Gradients — used in hero, scoreboard, bracket headers
   ------------------------------------------------------------- */
.bg-gradient-court {
  background:
    linear-gradient(135deg,
      rgb(var(--c-secondary)) 0%,
      rgb(var(--c-secondary) / .92) 45%,
      rgb(var(--c-primary) / .85) 100%);
}
.bg-gradient-flame {
  background: linear-gradient(135deg, rgb(var(--c-primary)) 0%, rgb(var(--c-accent)) 100%);
}
.bg-gradient-night {
  background: linear-gradient(180deg, rgb(15 23 42) 0%, rgb(var(--c-secondary)) 100%);
}

/* -------------------------------------------------------------
   Court-line subtle background — uses inline SVG via mask
   so it tints with theme colors
   ------------------------------------------------------------- */
.bg-court {
  background-color: rgb(var(--c-secondary));
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 50%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.025) 0 2px,
      transparent 2px 22px);
}

.bg-stripes {
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.06) 0 16px,
    rgba(255,255,255,0) 16px 28px);
}

/* -------------------------------------------------------------
   Cards
   ------------------------------------------------------------- */
.card {
  background: rgb(var(--c-card));
  border: 1px solid rgb(var(--c-border));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.card-hover {
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgb(var(--c-primary) / .35);
}

/* Team-color accent stripe — apply along left edge of a card */
.team-accent-left {
  position: relative;
  overflow: hidden;
}
.team-accent-left::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--team-color, rgb(var(--c-secondary)));
}

/* -------------------------------------------------------------
   Live badge & pulse
   ------------------------------------------------------------- */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgb(239 68 68);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: var(--r-pill);
}
.badge-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

/* -------------------------------------------------------------
   Tap targets — referee live tracker
   ------------------------------------------------------------- */
.tap-lg { min-height: 60px; min-width: 60px; font-size: 1.125rem; }
.tap-xl { min-height: 80px; min-width: 80px; font-size: 1.5rem; font-weight: 800; }

.tap-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  color: white;
  transition: transform .08s ease, filter .15s ease;
  user-select: none;
}
.tap-action:active { transform: scale(.93); }
.tap-action:hover { filter: brightness(1.07); }
.tap-action:disabled { opacity: .35; transform: none; }

/* -------------------------------------------------------------
   Standings rank zones
   ------------------------------------------------------------- */
.rank-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 14px;
}
.rank-zone-q  { background: rgb(var(--c-primary) / .12); color: rgb(var(--c-primary)); }
.rank-zone-pi { background: rgb(var(--c-accent) / .18); color: rgb(15 23 42); }
.rank-zone-out { background: rgb(241 245 249); color: rgb(100 116 139); }

/* -------------------------------------------------------------
   Bracket
   ------------------------------------------------------------- */
.bracket-card {
  background: rgb(var(--c-card));
  border: 1px solid rgb(var(--c-border));
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow-card);
  transition: transform .12s ease, box-shadow .15s ease;
}
.bracket-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.bracket-team {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px; border-radius: 10px;
}
.bracket-team.winner {
  background: linear-gradient(90deg, rgb(var(--c-accent) / .18), rgb(var(--c-primary) / .12));
  font-weight: 800;
}
.bracket-team.loser  { color: rgb(148 163 184); }

/* Bracket round headers + dotted dividers */
.bracket-round-label {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.08em;
  font-size: 14px;
  text-align: center;
  color: rgb(var(--c-muted));
}

/* -------------------------------------------------------------
   Match card variants
   ------------------------------------------------------------- */
.match-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.match-row + .match-row { border-top: 1px solid rgb(var(--c-border) / .6); }

/* Score bubble seen on home page hero, IG cards mirror in JS */
.score-bubble {
  font-family: "Bebas Neue", sans-serif;
  font-size: 56px;
  line-height: 0.85;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   Skeleton — sport-themed shimmer
   ------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, rgb(241 245 249), rgb(226 232 240), rgb(241 245 249));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 12px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -------------------------------------------------------------
   Fade-in
   ------------------------------------------------------------- */
.fade-in { animation: fade-in 250ms ease both; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------
   Scoreboard mega — used by arbitro tracker
   ------------------------------------------------------------- */
.scoreboard-mega {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(72px, 14vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------
   Hero edition number (giant translucent backdrop digit)
   ------------------------------------------------------------- */
.hero-edition-digit {
  position: absolute;
  right: -3vw;
  top: -3vw;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(280px, 40vw, 600px);
  line-height: 0.8;
  color: rgba(255,255,255,0.06);
  pointer-events: none;
  user-select: none;
  font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------
   Diagonal slice — used at section bottoms
   ------------------------------------------------------------- */
.slice-bottom {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.slice-top {
  -webkit-clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}

/* -------------------------------------------------------------
   Form polish
   ------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="datetime-local"], input[type="color"],
select, textarea {
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: rgb(var(--c-primary));
  box-shadow: 0 0 0 3px rgb(var(--c-primary) / .15);
}

/* IG share canvas */
.ig-canvas { width: 1080px; height: 1080px; transform-origin: top left; }

/* -------------------------------------------------------------
   Print
   ------------------------------------------------------------- */
@media print {
  header, footer, .no-print { display: none !important; }
  body { background: white; }
}

/* -------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}