/* 26cup.org Design System — Premier League 2026/27 Edition */
/* Upgraded 2026-07-24 by QoderWork — Major visual overhaul */
:root{
  --bg:#0a0e17; --bg-elevated:#111827; --bg-card:#1a1f2e;
  --ink:#e2e8f0; --ink-soft:#94a3b8; --ink-muted:#64748b;
  --gold-50:#FFF9E6; --gold-100:#FEF0B8; --gold-200:#F5D76E;
  --gold-300:#E8C84A; --gold-400:#D4AF37; --gold-500:#C49B2F;
  --gold-600:#B8941F; --gold-700:#8A6F17; --gold-800:#5C4A10;
  --gold-900:#5C4200;
  --green-400:#22C55E; --green-500:#16A34A;
  --red-400:#EF4444; --red-500:#DC2626;
  --blue-400:#3B82F6; --blue-500:#2563EB;
  --line:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.1);
  --radius:8px; --radius-lg:12px;
  --ease-out-expo:cubic-bezier(0.22,1,0.36,1);
  --ease-out-quart:cubic-bezier(0.16,1,0.3,1);
}

/* ===== BASE ===== */
body{
  position:relative;overflow-x:hidden;
  background:var(--bg)!important;
  color:var(--ink);
}

/* ===== ENERGY FIELD — Stadium atmosphere ===== */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 600px 500px at 15% 10%, rgba(212,175,55,.08) 0%, transparent 55%),
    radial-gradient(ellipse 500px 400px at 85% 80%, rgba(212,175,55,.05) 0%, transparent 50%),
    radial-gradient(ellipse 400px 350px at 50% 40%, rgba(34,197,94,.04) 0%, transparent 55%),
    radial-gradient(ellipse 300px 250px at 70% 20%, rgba(59,130,246,.03) 0%, transparent 50%);
  background-size:200% 200%;
  animation:energyField 20s ease-in-out infinite;
}
@keyframes energyField{
  0%{background-position:0% 50%}
  25%{background-position:50% 0%}
  50%{background-position:100% 50%}
  75%{background-position:50% 100%}
  100%{background-position:0% 50%}
}

/* ===== STADIUM LIGHT BEAMS — Hero atmosphere ===== */
.hero-section{
  position:relative;
  background:
    /* Top-left floodlight */
    radial-gradient(ellipse 300px 600px at 10% -10%, rgba(212,175,55,.12) 0%, transparent 60%),
    /* Top-right floodlight */
    radial-gradient(ellipse 300px 600px at 90% -10%, rgba(212,175,55,.10) 0%, transparent 60%),
    /* Center pitch glow */
    radial-gradient(ellipse 800px 200px at 50% 120%, rgba(34,197,94,.06) 0%, transparent 70%),
    /* Base gradient */
    linear-gradient(180deg, rgba(212,175,55,.03) 0%, transparent 40%, rgba(10,14,23,1) 100%);
  border-bottom:1px solid rgba(212,175,55,.15);
  overflow:hidden;
}
.hero-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 80px,
      rgba(212,175,55,.015) 80px,
      rgba(212,175,55,.015) 81px
    );
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 70%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 70%);
}
/* Animated light sweep across hero */
.hero-section::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(212,175,55,.06) 45%, rgba(212,175,55,.10) 50%, rgba(212,175,55,.06) 55%, transparent 60%);
  animation:lightSweep 8s ease-in-out infinite;
}
@keyframes lightSweep{
  0%{left:-100%}
  40%{left:150%}
  100%{left:150%}
}

.hero-bg{
  background:
    radial-gradient(ellipse at center top, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(ellipse at right bottom, rgba(59,130,246,.07), transparent 55%),
    radial-gradient(ellipse at left bottom, rgba(34,197,94,.07), transparent 55%);
}

/* ===== METEOR PARTICLES — Sports atmosphere ===== */
.meteor-container{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.meteor{
  position:absolute;top:-5%;width:2px;height:2px;border-radius:50%;
  background:var(--gold-400);
  box-shadow:0 0 6px 1px rgba(212,175,55,.4);
  animation:meteorFall linear infinite;
}
.meteor::after{
  content:'';position:absolute;top:50%;left:0;width:60px;height:1px;
  transform:translateY(-50%);
  background:linear-gradient(to right, rgba(212,175,55,.6), transparent);
}
.meteor.green{background:var(--green-400);box-shadow:0 0 6px 1px rgba(34,197,94,.4)}
.meteor.green::after{background:linear-gradient(to right, rgba(34,197,94,.6), transparent)}
@keyframes meteorFall{
  0%{transform:rotate(-215deg) translateX(0);opacity:0}
  10%{opacity:1}
  70%{opacity:.8}
  100%{transform:rotate(-215deg) translateX(-600px);opacity:0}
}

/* ===== FLOATING CONFETTI — Gold & green particles ===== */
@keyframes confettiFall{
  0%{transform:translateY(-10vh) rotate(0deg);opacity:0}
  10%{opacity:.7}
  90%{opacity:.5}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}
@keyframes confettiDrift{
  0%{margin-left:0}25%{margin-left:20px}75%{margin-left:-20px}100%{margin-left:0}
}
.stadium-particle{
  position:fixed;pointer-events:none;z-index:0;
  width:6px;height:6px;background:var(--gold-400);
  border-radius:50%;opacity:0;
  animation:confettiFall 10s linear infinite,confettiDrift 3s ease-in-out infinite;
}
.stadium-particle:nth-child(1){left:5%;animation-delay:0s;width:8px;height:8px}
.stadium-particle:nth-child(2){left:15%;animation-delay:2s;width:4px;height:4px}
.stadium-particle:nth-child(3){left:25%;animation-delay:4s;width:6px;height:3px;background:var(--green-400)}
.stadium-particle:nth-child(4){left:35%;animation-delay:1s;width:5px;height:5px}
.stadium-particle:nth-child(5){left:45%;animation-delay:5s;width:7px;height:4px;background:var(--gold-400)}
.stadium-particle:nth-child(6){left:55%;animation-delay:3s;width:4px;height:6px;background:var(--green-400)}
.stadium-particle:nth-child(7){left:65%;animation-delay:6s;width:6px;height:6px}
.stadium-particle:nth-child(8){left:75%;animation-delay:1.5s;width:5px;height:3px}
.stadium-particle:nth-child(9){left:85%;animation-delay:4.5s;width:7px;height:7px}
.stadium-particle:nth-child(10){left:95%;animation-delay:2.5s;width:4px;height:4px;background:var(--green-400)}

/* ===== CURSOR GLOW ===== */
.cursor-glow{
  position:fixed;pointer-events:none;z-index:9999;
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(212,175,55,.12) 0%,rgba(212,175,55,.04) 35%,transparent 60%);
  border-radius:50%;transition:opacity .3s;
  will-change:transform;
  top:0;left:0;
}

/* ===== TROPHY & SCORE ANIMATIONS ===== */
@keyframes trophyShine{
  0%,100%{opacity:.3;filter:brightness(1)}
  50%{opacity:.6;filter:brightness(1.3)}
}
.trophy-shimmer{animation:trophyShine 3s ease-in-out infinite}

@keyframes scorePop{
  0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}
}
.score-pulse{animation:scorePop .6s ease-out}

/* ===== GRADIENT TEXT — Animated hero title ===== */
.gradient-text{
  background:linear-gradient(135deg, #D4AF37, #f59e0b, #ef4444, #D4AF37);
  background-size:300% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientFlow 6s linear infinite;
}
@keyframes gradientFlow{
  0%{background-position:0% center}
  100%{background-position:300% center}
}
.gradient-text:hover{animation-play-state:paused}

/* ===== SHIMMER BUTTON — Premium CTA ===== */
.shimmer-btn{
  position:relative;z-index:0;display:inline-flex;align-items:center;
  justify-content:center;overflow:hidden;border-radius:12px;
  border:1px solid rgba(212,175,55,.3);padding:14px 28px;
  background:linear-gradient(135deg, rgba(212,175,55,.9), rgba(184,148,31,.9));
  color:#0a0e17;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease-out-expo), box-shadow .3s;
  font-size:.95rem;letter-spacing:.02em;
}
.shimmer-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(212,175,55,.25), 0 0 60px rgba(212,175,55,.1);
}
.shimmer-btn:active{transform:translateY(1px)}
.shimmer-btn .btn-shine{
  position:absolute;inset:0;z-index:-1;overflow:hidden;filter:blur(2px);
}
.shimmer-btn .btn-shine-inner{
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation:shineSlide 3s ease-in-out infinite;
}
@keyframes shineSlide{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(100%)}
  100%{transform:translateX(100%)}
}
/* Secondary button */
.shimmer-btn-secondary{
  position:relative;display:inline-flex;align-items:center;
  justify-content:center;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);padding:14px 28px;
  background:rgba(255,255,255,.05);
  color:var(--ink);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all .3s var(--ease-out-expo);
  font-size:.95rem;
}
.shimmer-btn-secondary:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(212,175,55,.3);
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}

/* ===== BORDER BEAM — Featured card highlight ===== */
.border-beam{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
}
.border-beam::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(90deg, transparent, var(--gold-400), var(--gold-200), transparent);
  background-size:200% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:borderBeam 4s linear infinite;
  opacity:.6;
}
@keyframes borderBeam{
  0%{background-position:0% 0%}
  100%{background-position:200% 0%}
}

/* ===== STAGGERED CARD ENTRY ===== */
@keyframes cardFadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.stagger-card{
  opacity:0;
  animation:cardFadeUp .5s var(--ease-out-expo) forwards;
}
.stagger-card:nth-child(1){animation-delay:.05s}
.stagger-card:nth-child(2){animation-delay:.1s}
.stagger-card:nth-child(3){animation-delay:.15s}
.stagger-card:nth-child(4){animation-delay:.2s}
.stagger-card:nth-child(5){animation-delay:.25s}
.stagger-card:nth-child(6){animation-delay:.3s}
.stagger-card:nth-child(7){animation-delay:.35s}
.stagger-card:nth-child(8){animation-delay:.4s}

/* ===== MARQUEE — Team ticker / news scroll ===== */
.marquee-container{
  display:flex;overflow:hidden;padding:.5rem 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex;flex-shrink:0;gap:2rem;
  animation:marqueeScroll 40s linear infinite;
}
.marquee-container:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% - 2rem))}
}
.marquee-item{
  display:flex;align-items:center;gap:.5rem;
  white-space:nowrap;color:var(--ink-soft);font-size:.85rem;
}
.marquee-item .team-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}

/* ===== CARD HOVER — Enhanced gold glint ===== */
.card,
.bg-card,
.bg-gray-800\/50,
.stat-card{
  transition:all .3s var(--ease-out-expo);
}
.card:hover,
.bg-card:hover,
.bg-gray-800\/50:hover,
[class*="rounded-xl"]:hover,
[class*="rounded-2xl"]:hover,
.stat-card:hover{
  border-color:rgba(212,175,55,.25)!important;
  box-shadow:
    0 0 50px rgba(212,175,55,.06),
    0 8px 30px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(212,175,55,.08)!important;
  transform:translateY(-2px);
}

/* ===== NAVIGATION — Enhanced ===== */
nav.sticky{
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  transition:transform .3s var(--ease-out-expo), box-shadow .3s;
}
nav.sticky.scrolled{
  box-shadow:0 4px 30px rgba(0,0,0,.5), 0 1px 0 rgba(212,175,55,.1);
}
nav.sticky.nav-hidden{
  transform:translateY(-100%);
}

/* ===== RIPPLE BG — Section accent ===== */
.ripple-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ripple-circle{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px solid rgba(212,175,55,.15);
  transform:translate(-50%,-50%) scale(1);
  animation:ripplePulse 3s ease infinite;
}
.ripple-circle:nth-child(1){width:200px;height:200px;opacity:.3;animation-delay:0s}
.ripple-circle:nth-child(2){width:300px;height:300px;opacity:.22;animation-delay:.1s}
.ripple-circle:nth-child(3){width:400px;height:400px;opacity:.15;animation-delay:.2s}
.ripple-circle:nth-child(4){width:500px;height:500px;opacity:.1;animation-delay:.3s}
.ripple-circle:nth-child(5){width:600px;height:600px;opacity:.06;animation-delay:.4s}
@keyframes ripplePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(.92)}
}

/* ===== TRUST BAR ===== */
.trust-bar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;
  padding:.75rem 1.25rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.trust-item{
  display:flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:var(--ink-soft);white-space:nowrap;
}
.trust-item strong{color:var(--gold-400);font-weight:700}

/* ===== LIVE PULSE DOT ===== */
@keyframes pulseDot{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4)}
  50%{opacity:.7;box-shadow:0 0 0 6px rgba(34,197,94,0)}
}
.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green-400);display:inline-block;
  animation:pulseDot 2s ease-in-out infinite;
}

/* ===== SECTION DIVIDER — Gradient line ===== */
.section-divider{
  height:1px;border:none;margin:3rem 0;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.2), rgba(212,175,55,.4), rgba(212,175,55,.2), transparent);
}

/* ===== STAT CARD — Number highlight ===== */
.stat-number{
  font-family:'Bebas Neue','Inter',sans-serif;
  font-size:2.5rem;line-height:1;
  background:linear-gradient(180deg, var(--gold-200), var(--gold-400));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#111827}
::-webkit-scrollbar-thumb{background:#374151;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#4b5563}

/* ===== LOADING SKELETON ===== */
@keyframes app-pulse{
  0%,100%{opacity:.3}50%{opacity:.6}
}
#app-content.rendering{
  opacity:.5;transition:opacity .15s;pointer-events:none;
}
.skeleton-block{
  background:rgba(255,255,255,.05);border-radius:.75rem;
  animation:app-pulse .8s ease-in-out infinite;
  height:200px;margin-bottom:1rem;
}

/* ===== MATCH CARDS ===== */
.match-card{
  transition:all .25s var(--ease-out-expo);cursor:pointer;
}
.match-card:hover{
  border-color:rgba(212,175,55,.4);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(212,175,55,.08),0 4px 12px rgba(0,0,0,.4);
  background:rgba(17,24,39,.9);
}

/* ===== TEAM CARDS ===== */
.team-card{
  transition:all .25s var(--ease-out-expo);
}
.team-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(212,175,55,.1),0 6px 16px rgba(0,0,0,.5);
  border-color:rgba(212,175,55,.5);
  background:rgba(17,24,39,.95);
}

/* ===== GROUP FILTER BUTTONS ===== */
.group-filter-btn{
  padding:.375rem .75rem;border-radius:.5rem;
  font-size:.875rem;font-weight:500;
  transition:all .2s;
  background:rgba(255,255,255,.05);
  color:#9ca3af;border:1px solid transparent;
}
.group-filter-btn:hover{
  background:rgba(255,255,255,.1);color:#e5e7eb;
}
.group-filter-btn.active{
  background:rgba(212,175,55,.15);color:#D4AF37;
  border-color:rgba(212,175,55,.3);
}

/* ===== NAV BUTTONS ===== */
.nav-btn{
  padding:.5rem 1rem;border-radius:.5rem;
  font-size:.875rem;font-weight:500;
  transition:all .2s;color:#9ca3af;
}
.nav-btn:hover{
  color:#e5e7eb;background:rgba(255,255,255,.05);
}
.nav-btn.nav-active{
  color:#D4AF37;background:rgba(212,175,55,.1);
}

/* ===== MODAL ===== */
#app-modal{animation:modalFadeIn .2s ease}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
#app-modal-content{animation:modalSlideUp .25s ease}
@keyframes modalSlideUp{
  from{opacity:0;transform:translateY(20px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ===== PROBABILITY BAR ===== */
.prob-bar{
  height:8px;border-radius:4px;overflow:hidden;display:flex;
}

/* ===== FLAG IMAGES ===== */
.inline-flag{
  width:32px;height:24px;border-radius:3px;
  object-fit:cover;vertical-align:middle;
  display:inline-block;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.flag-wrap-sm .inline-flag{width:24px;height:18px}
.flag-wrap-lg .inline-flag{width:48px;height:36px}
.flag-wrap-xl .inline-flag{width:64px;height:48px}

/* ===== SELECT ===== */
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position:right .5rem center;
  background-repeat:no-repeat;background-size:1.5em 1.5em;
  padding-right:2.5rem;
}

/* ===== PREFERS-REDUCED-MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .meteor-container,.stadium-particle{display:none!important}
  .hero-section::after{display:none!important}
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  body{max-width:100%!important;margin:20px auto!important;padding:0 14px!important;font-size:.95rem!important}
  h1{font-size:1.5rem!important}
  h2{font-size:1.2rem!important;margin-top:24px!important}
  .card{padding:16px!important}
  .chart-container{padding:12px!important}
  .chart-container svg{max-width:100%!important;height:auto!important}
  nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:20px!important;padding-bottom:12px!important}
  nav a{font-size:12px!important;padding:4px 8px!important;margin-right:0!important}
  table{font-size:11px!important}
  th{padding:6px 8px!important;font-size:9px!important}
  td{padding:6px 8px!important}
  .formula{font-size:11px!important;padding:12px!important;overflow-x:auto}
  .stadium-particle,.meteor-container{display:none!important}
  footer{text-align:center!important}
  .factor-grid{grid-template-columns:repeat(2,1fr)!important}
  section{padding:16px!important}
  #today-focus-card .grid{grid-template-columns:1fr!important}
  #today-focus-card .grid > div{text-align:center!important}
  .match-card{overflow:hidden;word-break:break-word}
  .match-card .text-2xl{font-size:1.25rem!important}
  /* Larger touch targets */
  .nav-btn,.group-filter-btn{
    padding:.625rem 1rem;min-height:44px;
    display:flex;align-items:center;
  }
  /* Card grid: 1 col */
  .team-card-grid{grid-template-columns:repeat(1,1fr)!important}
  /* Charts: shorter */
  #match-goal-chart,#compare-goals{max-height:180px}
  /* Stat grid: 2 col */
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  /* Bracket: stack */
  .sim-bracket-grid{grid-template-columns:1fr!important}
  .compare-grid{grid-template-columns:1fr!important}
  /* Trust bar: wrap */
  .trust-bar{gap:.75rem;padding:.5rem .75rem}
  .trust-item{font-size:.7rem}
  /* Shimmer buttons: full width */
  .shimmer-btn,.shimmer-btn-secondary{width:100%;justify-content:center}
  /* Hero: tighter */
  .hero-section{padding:2rem 1rem!important}
  .hero-section h1{font-size:2rem!important}
  /* Modal: fullscreen */
  #app-modal-content{max-width:100%!important;margin:0!important;border-radius:0!important;max-height:100vh!important}
  /* Tables: scroll */
  .group-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .group-table-wrap table{min-width:480px}
  /* Footer: stack */
  footer .flex{flex-wrap:wrap;gap:.5rem}
  /* Disable backdrop blur on mobile */
  .backdrop-blur-xl{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media(max-width:480px){
  body{padding:4px;font-size:12px}
  .panel{padding:8px 10px}
  .btn{padding:6px 12px;font-size:11px}
  #app-modal-content{padding:12px!important}
  h1{font-size:1.5rem!important}
  h2{font-size:1.25rem!important}
  .stat-number{font-size:1.8rem}
}