@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;600;800&family=Creepster&family=Nosifer&family=Merriweather:ital@1&display=swap');

:root{
  --purple:#6d3bd1; --orange:#ff8a00; --ink:#0b0b10; --panel:#151523;
  --line:rgba(255,255,255,.10); --text:#f3f3f6; --brand-yellow:#FFB300;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(1200px 700px at 50% 0%, #2a1644, #0b0b10 70%);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.wrapper{min-height:100vh;display:flex;flex-direction:column}

/* Header */
.header{display:grid;grid-template-columns:220px 1fr 220px;align-items:center;gap:12px;padding:12px 20px 6px;background:linear-gradient(180deg,#140b1f, #1a1030);border-bottom:2px solid var(--line)}
.header img{max-height:70px;max-width:100%;object-fit:contain;filter: drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.header .title{text-align:center}
.header h1{margin:0;font-family:"Nosifer", system-ui;letter-spacing:.5px;font-size:clamp(18px,2.6vw,44px);color:var(--orange);text-shadow:0 0 10px rgba(255,138,0,.45), 0 0 18px rgba(255,138,0,.25)}
.header .subtitle{margin-top:6px;font-family:"Creepster", system-ui;font-size:clamp(16px,1.9vw,30px);color:#c9b7ff}

/* Top Upcoming Ticker (Left -> Right) */
.top-ticker-wrap{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(180deg,#1a1230,#24173d)}
.top-ticker{display:flex;gap:60px;white-space:nowrap;will-change:transform;padding:10px 0; animation:topscroll-lr 50s linear infinite; font-weight:800; letter-spacing:.3px; color:#efeaff}
.top-ticker .seg{display:inline-flex;align-items:center;gap:10px;opacity:.95}
.top-ticker .seg .tag{padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--orange));font-size:12px;color:white}
@keyframes topscroll-lr{from{transform:translateX(-50%)} to{transform:translateX(0)}}

/* Main equal columns */
.main{flex:1;display:grid;grid-template-columns: 1fr 1fr 1fr;gap:16px;padding:16px 16px 8px;align-items:stretch}
.panel{background:linear-gradient(180deg,#0f0f14,#14173a); border:1px solid var(--line);border-radius:16px; padding:14px; display:flex; flex-direction:column; height:56vh}
.panel .bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(90deg, rgba(109,59,209,.25), rgba(255,138,0,.25));font-weight:800;letter-spacing:.4px; margin-bottom:8px}
.panel .content{flex:1; min-height:0}

/* Leaderboard table */
.table{width:100%;border-collapse:collapse;border-radius:12px;background:#101020; display:block; height:calc(56vh - 70px); overflow:auto}
.table thead{position:sticky; top:0; background:#0f0f18}
.table thead th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:16px}
.table tbody td{padding:12px 14px;border-bottom:1px dashed var(--line);font-size:18px}
.table tbody tr:nth-child(odd){background:#121226}
.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--orange));color:white;font-size:12px;font-weight:800}

/* Live games center */
.live-grid{height:calc(56vh - 70px); display:grid; grid-template-rows: 1fr 1fr 1fr; gap:10px}
.live-card{display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px; background:linear-gradient(180deg,#181828,#101018); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:12px 14px}
.live-left{display:grid; grid-template-rows:auto auto; gap:6px}
.row{display:grid; grid-template-columns:auto 1fr auto; align-items:center}
.team-name{font-weight:900; letter-spacing:.3px; font-size: clamp(16px, 1.8vw, 24px)}
.score{ font-family:"Creepster", system-ui; color:#e1d0c7; font-size: clamp(24px, 2.6vw, 42px)}
.score.lead{ color:var(--orange); text-shadow: 0 0 14px rgba(255,138,0,.55), 0 0 24px rgba(255,138,0,.28) }
.live-sub{grid-column: 1 / -1; font-weight:700; opacity:.9; font-size: clamp(13px, 1.3vw, 18px)}
.cage-tag{ padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,var(--purple),var(--orange)); color:white;font-weight:900;white-space:nowrap}

/* Recent Final Scores (4 visible, rotated by JS) */
.finals{height:calc(56vh - 70px); display:grid; grid-template-rows: 1fr 1fr 1fr 1fr; gap:10px}
.final-card{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; background:linear-gradient(180deg,#181828,#101018); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:10px 12px; font-weight:800 }
.final-left{display:grid; grid-template-rows:auto auto; gap:4px}
.final-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center}
.final-name{font-weight:900; letter-spacing:.3px; font-size: 16px}
.final-score{font-family:"Creepster", system-ui; font-size: 24px; color:#e1d0c7}
.final-score.win{ color:var(--orange); text-shadow: 0 0 14px rgba(255,138,0,.55), 0 0 24px rgba(255,138,0,.28) }
.final-meta{grid-column:1/-1; font-size:12px; opacity:.8}
.final-badge{padding:6px 10px;border-radius:10px;background:linear-gradient(90deg,var(--purple),var(--orange));color:white;font-weight:900}

/* Sponsor badges */
.sponsor-badges{display:flex; align-items:center; justify-content:center; gap:30px; padding:8px 12px; border-top:1px solid var(--line); background:linear-gradient(180deg,#0e0b07,#1a140d)}
.sponsor-badges .badge{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background:#1c1222; border:1px solid rgba(255,255,255,.12)}
.sponsor-badges img{height:26px}

/* Bottom single-message ticker (Right->Left, slow) */
.footer{position:sticky;bottom:0;left:0;right:0;background:linear-gradient(180deg, transparent, rgba(0,0,0,.45) 30%, rgba(0,0,0,.85))}
.bottom-ticker-wrap{position:relative;overflow:hidden;border-top:1px solid var(--line);background:linear-gradient(180deg,#1a0f00,#2a1200); height:64px}
.bottom-message{position:absolute; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:14px; white-space:nowrap; padding:6px 10px; font-weight:800; letter-spacing:.3px}
.bottom-message img{height:38px}
.bottom-message .sponsor{ color: var(--brand-yellow) }
.bottom-message .slogan{ font-family: "Merriweather", serif; font-style: italic }
.bottom-message .sep{ opacity:.6; padding:0 10px }