:root{
  --bg:#000;
  --panel:#0a0a0a;
  --gold:#d4af37;
  --gold2:#f8e08b;
  --muted:#d6c079;
  --line:rgba(212,175,55,.22);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--gold2);
  background:
    radial-gradient(circle at top, rgba(212,175,55,.12), transparent 22%),
    linear-gradient(180deg,#000 0%, #050505 100%);
}
a{text-decoration:none;color:inherit}
.container{width:min(1220px, calc(100% - 30px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{
  width:76px; height:76px; border-radius:50%; overflow:hidden; position:relative;
  border:1px solid rgba(212,175,55,.35);
  background:#000;
}
.logo img{width:100%; height:100%; object-fit:cover}
.logo:after{
  content:""; position:absolute; inset:-30%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.12) 45%, rgba(248,224,139,.9) 50%, rgba(255,255,255,.1) 55%, transparent 65%);
  transform:translateX(-150%) rotate(15deg);
  animation:shine 4s linear infinite;
}
@keyframes shine{
  from{transform:translateX(-150%) rotate(15deg)}
  to{transform:translateX(150%) rotate(15deg)}
}
.gold-shine{
  background:linear-gradient(90deg,#9a7114 0%,#d4af37 20%,#fff0ad 45%,#d4af37 70%,#9a7114 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:textshine 5s linear infinite;
}
@keyframes textshine{to{background-position:220% center}}
.navlinks{display:flex; flex-wrap:wrap; gap:12px}
.navlinks a{padding:9px 12px; border-radius:999px}
.navlinks a:hover{background:rgba(212,175,55,.08)}
.hero{padding:58px 0 30px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:center}
.card{
  background:linear-gradient(180deg, rgba(16,16,16,.96), rgba(5,5,5,.96));
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem); margin:10px 0}
.kicker{font-size:.76rem; letter-spacing:.32em; text-transform:uppercase; color:#b9891b}
.lead{color:#f3e3afc4; line-height:1.65}
.pillrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.pill{
  padding:11px 14px; border-radius:999px; border:1px solid var(--line);
  background:rgba(212,175,55,.05); color:var(--gold2)
}
.side-box{padding:22px}
.section{padding:24px 0}
.section h2{margin:0 0 8px; font-size:clamp(1.6rem,3vw,2.5rem)}
.home-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:18px;
}
.inner-card{padding:18px; border-radius:22px; border:1px solid rgba(212,175,55,.14); background:#090909}
.fixture-list,.score-list,.sponsor-list{display:grid; gap:12px}
.fixture-item,.score-item,.sponsor-item,.role-item{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:14px 16px; border:1px solid rgba(212,175,55,.14); border-radius:18px; background:#0b0b0b;
}
.meta{color:#d8c27ea0; font-size:.95rem}
.countdown{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px;
}
.time-box{
  padding:16px; border-radius:18px; border:1px solid var(--line); text-align:center; background:#0b0b0b;
}
.time-box strong{display:block; font-size:1.8rem}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  color:#0a0a0a; background:linear-gradient(180deg,#f8e08b,#c99519); font-weight:700; font-size:.85rem;
}
.live-pulse{
  display:inline-flex; align-items:center; gap:8px; font-size:.95rem; color:var(--gold2)
}
.live-pulse:before{
  content:""; width:10px; height:10px; border-radius:50%; background:#f4c74c;
  box-shadow:0 0 10px #f4c74c; animation:pulse 1.2s infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(1.25); opacity:.6}
}
.management-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.players{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.player{
  overflow:hidden; cursor:pointer; transition:.2s ease;
}
.player:hover{transform:translateY(-4px); box-shadow:0 0 24px rgba(212,175,55,.12)}
.player-top{
  aspect-ratio:4/5; position:relative;
  background:radial-gradient(circle at top, rgba(212,175,55,.16), transparent 30%), linear-gradient(180deg,#151515,#070707);
}
.number{
  position:absolute; top:12px; left:12px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:#161000; font-weight:900;
  background:linear-gradient(180deg,#f8e08b,#c99519);
}
.avatar{
  position:absolute; inset:0; display:grid; place-items:center;
}
.avatar span{
  width:68px; height:68px; border-radius:50%; border:1px solid rgba(212,175,55,.32);
  display:grid; place-items:center; font-weight:900;
}
.footer{padding:30px 0 42px; border-top:1px solid var(--line); margin-top:26px}
.socials{display:flex; flex-wrap:wrap; gap:12px}
.socials a{padding:12px 16px; border-radius:999px; border:1px solid var(--line); background:#0b0b0b}
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; place-items:center; padding:18px; z-index:50;
}
.modal.active{display:grid}
.modal-box{
  width:min(920px,100%); display:grid; grid-template-columns:.85fr 1.15fr; overflow:hidden;
}
.modal-visual{
  min-height:340px;
  background:radial-gradient(circle at top, rgba(212,175,55,.16), transparent 30%), linear-gradient(180deg,#151515,#060606);
  display:grid; place-items:center;
}
.modal-visual .avatar span{width:110px; height:110px; font-size:2rem}
.modal-body{padding:28px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.stat{padding:14px; border-radius:18px; border:1px solid var(--line); background:#0b0b0b}
button{
  margin-top:20px; padding:12px 16px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--gold2); cursor:pointer;
}
@media (max-width:980px){
  .hero-grid,.home-grid,.modal-box,.management-grid{grid-template-columns:1fr}
  .players{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .players{grid-template-columns:repeat(2,1fr)}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .nav{align-items:flex-start}
}