/* ============================================================
   DESIGN: STADIUM — bold, energetic, vibrant, chunky.
   Big condensed type, brand-colored bands, diagonal motifs,
   jersey-number ranks. Great for football / basketball / handball.
   ============================================================ */

[data-design="stadium"]{
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  --bg:       hsl(var(--brand-h) 32% 97%);
  --bg-2:     hsl(var(--brand-h) 34% 93%);
  --surface:  #ffffff;
  --surface-2:hsl(var(--brand-h) 34% 96%);
  --surface-3:hsl(var(--brand-h) 30% 90%);

  --text:     hsl(var(--brand-h) 38% 11%);
  --text-dim: hsl(var(--brand-h) 16% 36%);
  --text-mute:hsl(var(--brand-h) 12% 52%);

  --border:        hsl(var(--brand-h) 26% 86%);
  --border-strong: hsl(var(--brand-h) 28% 72%);

  --brand:        hsl(var(--brand-h) var(--brand-s) 46%);
  --brand-2:      hsl(var(--accent-h) var(--accent-s) 50%);
  --brand-soft:   hsl(var(--brand-h) var(--brand-s) 50% / .14);
  --brand-contrast: var(--brand-ink);
  --accent:       hsl(var(--accent-h) var(--accent-s) 50%);
  --accent-soft:  hsl(var(--accent-h) var(--accent-s) 50% / .16);

  --radius:16px; --radius-sm:11px; --radius-lg:22px;

  --shadow-sm:0 2px 6px hsl(var(--brand-h) 30% 30% / .12);
  --shadow:0 22px 44px -28px hsl(var(--brand-h) 40% 28% / .42);
  --shadow-lg:0 40px 80px -42px hsl(var(--brand-h) 40% 26% / .5);
  --glow:0 16px 30px -16px hsl(var(--brand-h) var(--brand-s) 46% / .55);

  --grad-brand:linear-gradient(118deg, var(--brand), var(--accent));
  --theme-color:#ffffff;
}

[data-design="stadium"] body{ background:var(--bg); }

/* dynamic diagonal field motif behind everything */
[data-design="stadium"] .app-root::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background:
    radial-gradient(60vmax 40vmax at 100% -10%, hsl(var(--accent-h) var(--accent-s) 60% / .12), transparent 60%),
    radial-gradient(60vmax 50vmax at -10% 110%, hsl(var(--brand-h) var(--brand-s) 56% / .12), transparent 60%);
}

[data-design="stadium"] .display-title{ text-transform:uppercase; letter-spacing:-.02em; font-weight:900; }
[data-design="stadium"] h1,[data-design="stadium"] h2,[data-design="stadium"] h3{ font-weight:800; }

[data-design="stadium"] .card,[data-design="stadium"] .panel,[data-design="stadium"] .match{
  background:var(--surface); border:1px solid var(--border);
}
[data-design="stadium"] .card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }

/* energetic brand bands */
[data-design="stadium"] .sidebar__brand,
[data-design="stadium"] .auth__aside,
[data-design="stadium"] .hero-band{
  background:var(--grad-brand); color:var(--brand-contrast); position:relative; overflow:hidden;
}
[data-design="stadium"] .sidebar__brand::after,
[data-design="stadium"] .auth__aside::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.06) 22px 24px);
  pointer-events:none;
}
[data-design="stadium"] .nav__item.is-active{ background:var(--brand); color:var(--brand-contrast); box-shadow:var(--glow); }
[data-design="stadium"] .nav__item.is-active .nav__ic{ opacity:1 }
[data-design="stadium"] .btn--primary{ background:var(--brand); text-transform:uppercase; letter-spacing:.03em; font-weight:800; }
[data-design="stadium"] .rank{ font-family:var(--font-display); font-weight:900; font-style:italic; }
[data-design="stadium"] .stat__value{ font-family:var(--font-display); font-weight:900; color:var(--brand-text); }
[data-design="stadium"] .badge{ text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
[data-design="stadium"] .podium__step{ border-top:5px solid var(--brand); }

/* hero band sits on a solid brand gradient — keep everything readable on it */
[data-design="stadium"] .hero-band .eyebrow,
[data-design="stadium"] .hero-band .muted{ color:var(--brand-contrast); opacity:.92; }
[data-design="stadium"] .hero-band .btn--primary{ background:var(--brand-contrast); color:var(--brand); }
[data-design="stadium"] .hero-band .chip{ background:rgba(255,255,255,.20); color:var(--brand-contrast); border-color:transparent; }
[data-design="stadium"] .hero-band .chip.is-on{ background:var(--brand-contrast); color:var(--brand); }