/* styles.css - dark theme replica for screenshots */
:root{
  --bg:#070608;
  --panel:#0f0f11;
  --accent:#7c39ff;
  --accent-2:#cfa3ff;
  --text-primary:#FFFFFF; /* primary text */
  --text-secondary:#B0B3C6; /* secondary text */
  --text-meta:#8A8FA3; /* labels/meta */
  --win-color:#22C55E;
  --loss-color:#EF4444;
  --glass: rgba(255,255,255,0.03);
  --site-header-h: 64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;padding-top:var(--site-header-h);font-family:Montserrat,Roboto,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:linear-gradient(180deg,var(--bg),#07050b 60%); color:var(--text-primary);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:30px}
.site-header{position:fixed;top:0;left:0;right:0;height:var(--site-header-h);background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.15));backdrop-filter: blur(4px);z-index:60;border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;gap:20px}
.logo{width:56px;height:56px;border-radius:50%;background:#0e0e10;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px}
.logo .site-logo{width:100%;height:100%;object-fit:contain;border-radius:8px;display:block}
.main-nav{display:flex;gap:20px;margin-left:16px}
/* Top nav links: add subtle hover lift and purple underline that slides in from the bottom */
.main-nav a{color:#d6d6d6;text-decoration:none;font-weight:600;position:relative;padding:6px 2px;transition:color .18s, transform .18s}
.main-nav a::after{content:"";position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));bottom:-6px;border-radius:3px;transform:scaleX(0);transform-origin:left center;transition:transform .22s cubic-bezier(.2,.9,.2,1),opacity .18s}
.main-nav a:hover{color:var(--accent-2);transform:translateY(-3px)}
.main-nav a:hover::after{transform:scaleX(1);opacity:1}
.main-nav a:focus{outline:none}
.main-nav a:focus-visible{box-shadow:0 2px 8px rgba(124,57,255,0.12);transform:translateY(-3px)}
.btn{padding:10px 18px;border-radius:6px;text-decoration:none;display:inline-block}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(124,57,255,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff}
.btn.support{margin-left:auto;background:#fff;color:#111;font-weight:800;border-radius:8px;padding:10px 16px}
.nav-toggle{display:none;background:transparent;border:none;color:#fff;font-size:22px;padding:8px}

/* show nav when header has class nav-open (mobile) */
.site-header.nav-open .main-nav{display:flex;position:absolute;left:16px;top:var(--site-header-h);right:16px;background:linear-gradient(180deg, rgba(7,6,8,0.96), rgba(10,8,12,0.98));padding:14px;border-radius:8px;flex-direction:column;gap:8px}

/* HERO */
.hero{min-height:86vh;display:flex;align-items:center;position:relative;background:radial-gradient(1200px 600px at 80% 0%, rgba(124,57,255,0.18), transparent 10%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;/* hero-only background: use arena.jpg and keep it contained to the .hero block */background-image: url('images/arena.jpg');background-repeat:no-repeat;background-size:cover;background-position:center;filter:brightness(0.34) contrast(1.02);z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,4,8,0.2), rgba(6,4,8,0.9));}
.hero-inner{position:relative;z-index:2;padding-top:40px}
.hero-title{font-size:110px;line-height:0.88;margin:0 0 10px 0;letter-spacing:2px;color:#fff;font-weight:900;text-transform:uppercase;text-shadow:0 8px 30px rgba(0,0,0,0.6)}

/* Decorative background behind the hero title using an image from /photo */
.hero-title-wrap{position:relative;display:inline-block;padding:6px 12px;border-radius:8px}
.hero-title-wrap::before{content:"";position:absolute;inset:0;border-radius:8px;background-image:none;background-size:cover;background-position:center;filter:brightness(0.38) blur(2px);opacity:0;z-index:0}
.hero-title{position:relative;z-index:1}

/* Slight adjustment for very large hero text to maintain contrast */
.hero-title-wrap::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));z-index:1;pointer-events:none}
.tag{display:inline-block;background:rgba(255,255,255,0.04);padding:6px 12px;border-radius:24px;margin-bottom:18px;color:#ddd;font-weight:800}
.hero-sub{max-width:720px;color:rgba(255,255,255,0.86);font-size:18px}
.hero-actions{margin-top:20px;display:flex;gap:14px}

/* SECTION TITLES */
.section{padding:50px 0}
.section--dark{background:linear-gradient(180deg,#070608,#0b0710)}
.section-title{font-size:28px;line-height:1.05;margin:0 0 18px 0;font-weight:800}
.section-title .accent{color:var(--accent);}
.section-subtitle{font-size:14px;margin-bottom:12px;color:var(--text-secondary)}

/* CARDS GRID */
.cards-grid{display:grid;gap:24px}
.tournaments-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* discipline filter */
.discipline-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;z-index:10}
.filter-btn{flex:1 1 auto;padding:10px 16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);color:#fff;font-weight:700;border-radius:6px;cursor:pointer;transition:background .2s,border-color .2s}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#111}
.filter-btn:hover{background:rgba(124,57,255,0.08)}

.teams-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.team-card{height:220px;border-radius:14px;overflow:hidden;position:relative;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;box-shadow:0 6px 30px rgba(0,0,0,0.6);transition:transform .28s, box-shadow .28s;cursor:pointer}
.team-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(0,0,0,0.7)}
.team-card .card-gradient{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.7));}
.team-card h3{position:relative;margin:0;color:var(--text-primary);font-size:18px;z-index:2;letter-spacing:1px}
.team-card .card-btn{position:relative;z-index:2;margin-top:12px;background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:6px;text-decoration:none;color:#fff;display:inline-block;border:1px solid rgba(255,255,255,0.03)}

/* TOURNAMENTS */
.tournament-card{background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.1));border:1px solid rgba(124,57,255,0.2);border-radius:12px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,0.6);transition:transform .28s, box-shadow .28s, background .28s}
.tournament-card:hover{transform:translateY(-4px);box-shadow:0 12px 45px rgba(124,57,255,0.15);background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15))}
.tournament-card .tour-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}
.tournament-card h3{margin:0;color:var(--text-primary);font-size:16px;letter-spacing:0.5px}
.tournament-card .badge{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:4px 10px;border-radius:6px;font-weight:800;font-size:12px;color:#fff}
.tournament-card .tour-info{color:#d6d6d6}
.tournament-card .tour-info p{margin:8px 0;font-size:14px;line-height:1.4}
.tournament-card .tour-info p strong{color:var(--accent-2)}
.tournament-card-link{display:block;text-decoration:none;color:inherit;transition:transform .28s, box-shadow .28s, background .28s}
.tournament-card-link:hover .tournament-card{transform:translateY(-4px);box-shadow:0 12px 45px rgba(124,57,255,0.15);background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15))}


/* Reduce gap between left and right panels specifically in tournaments section
  and make the right column wider for a more horizontal layout on desktop */
#tours .two-col{grid-template-columns:1fr 700px;gap:18px}

/* Make the panel heading slightly smaller to fit the compact list */
#tours .panel h3.section-subtitle{font-size:15px;margin:0 0 8px 0;color:var(--muted)}


/* Mini-match styling inside tournament detail */
.matches-list{display:flex;flex-direction:column;gap:10px}
.mini-match{padding:10px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04));display:block;transition:transform .18s, box-shadow .18s, border-color .18s}
.mini-match:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.45)}
.mini-match.win{box-shadow:0 10px 30px rgba(45,176,107,0.06), inset 4px 0 0 0 rgba(45,176,107,0.12)}
.mini-match.lost{box-shadow:0 10px 30px rgba(191,59,59,0.06), inset 4px 0 0 0 rgba(191,59,59,0.12)}
.mini-match.draw{box-shadow:0 8px 20px rgba(255,255,255,0.02)}

/* Score badge: colored for win/loss/draw */
.score{padding:6px 12px;border-radius:8px;color:#fff;display:inline-block;min-width:56px;text-align:center;font-weight:800;transition:background .18s, transform .18s}
.score.success{background:#27b76a}
.score.lost{background:#d14b4b}
.score.draw{background:rgba(255,255,255,0.06);color:var(--muted)}
.mini-match .muted{color:var(--muted);font-size:13px}

/* inline score style for 'Team Spirit 2:1 Opponent' */
.score-inline{display:inline-block;padding:4px 8px;border-radius:6px;margin:0 8px;font-weight:900}
.score-inline.success{background:#27b76a;color:#041b0f}
.score-inline.lost{background:#d14b4b;color:#2b0b0b}
.score-inline.draw{background:rgba(255,255,255,0.06);color:var(--muted)}

/* expandable match details */
.match-details{margin-top:10px;padding:12px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04));display:none;color:var(--muted);font-size:14px;text-align:center}
.mini-match.expanded .match-details{display:block}

/* small opponent/date block tweaks inside mini-match */
.mini-match strong{display:block;color:#fff;font-size:15px}
.mini-match .stage{color:var(--muted);font-size:13px;margin-top:2px}
.mini-match .match-date{color:rgba(255,255,255,0.86);font-size:13px;margin-top:6px}

/* NEWS */
.news-featured{display:grid;gap:24px;margin-bottom:20px}
.news-featured-main{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 15px 50px rgba(0,0,0,0.7);height:380px;display:flex;align-items:flex-end}
.news-featured-image{position:absolute;inset:0;background-size:cover;background-position:center bottom;z-index:1}
.news-featured-main::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.8));z-index:2}
.news-featured-content{position:relative;z-index:3;width:100%;padding:32px;color:#fff}
.news-featured-content h3{font-size:32px;margin:12px 0;line-height:1.2}
.news-featured-content .badge{margin-bottom:12px;display:inline-block}
.news-list-compact{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.news-item-compact{display:flex;gap:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.6);transition:transform .28s, box-shadow .28s}
.news-item-compact:hover{transform:translateY(-4px);box-shadow:0 12px 45px rgba(124,57,255,0.15)}
.news-item-image{width:140px;height:140px;flex-shrink:0;background-size:cover;background-position:center}
.news-item-content{flex:1;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.news-item-content h4{margin:0 0 6px 0;font-size:16px;color:#fff}
.news-item-content .badge{display:inline-block;width:fit-content;margin-bottom:8px}

.news-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.news-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.news-media{height:150px;background-size:cover;background-position:center;position:relative}
.news-media .badge{position:absolute;top:12px;left:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:6px 12px;border-radius:10px;font-weight:800;font-size:13px}
.news-body{padding:16px}
.news-date{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.link-more{color:var(--muted);text-decoration:none}
.center{text-align:center;margin-top:18px}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:10px 20px}

/* Generic premium panel used to center content and give a unified look */
.panel{max-width:1100px;margin:20px auto;padding:22px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));box-shadow:0 10px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.03)}

/* Compact news panel used on the homepage */
.news-panel-compact{padding:26px}
.news-panel-compact .section-title{display:block;text-align:center;margin-bottom:18px}
.news-panel-compact .news-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.news-panel-compact .news-card{border-radius:12px;overflow:hidden}
.news-panel-compact .news-media{height:180px}
.news-panel-compact .news-body{padding:18px}
.news-panel-compact .news-card h3{margin:0 0 8px 0;color:#fff;font-size:18px}
.news-panel-compact .link-more{color:var(--accent);font-weight:700}

/* Slightly reduce surrounding section padding to tighten layout for the panel */
.section#news{padding-top:40px;padding-bottom:40px}

/* News index (separate page) styles */
.news-index{max-width:820px;margin:60px auto;padding:20px;display:flex;flex-direction:column;gap:20px}
.news-index h1{text-align:center;margin-bottom:8px}
.news-index .intro{color:var(--muted);text-align:center;margin-bottom:18px}
/* Vertical list with thumbnail on left for desktop, stacked on mobile */
.news-index-card{display:flex;align-items:flex-start;gap:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));border-radius:14px;padding:14px;text-decoration:none;color:inherit;box-shadow:0 12px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.02);transition:transform .18s, box-shadow .18s}
.news-index-card:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(0,0,0,0.7)}
.news-index-thumb{width:240px;height:140px;background-size:cover;background-position:center;border-radius:8px;margin:0;flex-shrink:0}
.news-index-body{flex:1;min-width:0}
.news-index-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.news-index-title{font-size:18px;font-weight:800;margin:0;color:#fff}
.news-index-excerpt{color:rgba(255,255,255,0.9);margin-top:8px;line-height:1.6}

/* Editor helper: snippet box and quick-insert button */
.news-editor{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04));border-radius:10px;padding:12px;border:1px solid rgba(255,255,255,0.02);color:var(--muted);font-size:14px}
.news-editor .hint{color:var(--muted);margin-bottom:8px}
.news-editor .actions{display:flex;gap:8px;align-items:center}
.btn.insert{background:transparent;border:1px solid rgba(124,57,255,0.18);color:var(--accent-2);padding:8px 12px;border-radius:8px}
.code-snippet{background:rgba(0,0,0,0.26);padding:12px;border-radius:8px;color:#ddd;overflow:auto;font-family:Consolas,monospace;font-size:13px}
@media(max-width:680px){.news-index{padding:12px}.news-index-thumb{height:160px}}

@media(max-width:900px){
  .news-index-card{flex-direction:column}

/* Confetti canvas overlays the page; pointer-events none so it doesn't block interaction */
.confetti-canvas{position:fixed;inset:0;z-index:14000;pointer-events:none;display:none}

.confetti-active{display:block}
  .news-index-thumb{width:100%;height:160px}
  .news-index-meta{flex-direction:row;justify-content:space-between}
}

/* MATCHES & RANKING */
.two-col{display:grid;grid-template-columns:1fr 460px;gap:20px;align-items:start}
.matches-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.matches-list li{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px}
.match-meta{color:var(--muted);font-size:13px;margin-bottom:6px}
.match-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.match-left{display:flex;flex-direction:column;min-width:0}
.matchup{font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matchup strong{font-weight:800}
.match-meta .stage{color:var(--muted);font-size:13px}
.match-date{color:rgba(255,255,255,0.86);font-size:13px;margin-top:6px}
.match-right{text-align:right;flex-shrink:0}
.score{padding:6px 12px;border-radius:8px;color:#fff;display:inline-block;min-width:64px;text-align:center;font-weight:800}
.score.success{background:#27b76a}
.score.lost{background:#d14b4b}
.score.draw{background:rgba(255,255,255,0.06);color:var(--muted)}
.ranking-wrap{background:rgba(255,255,255,0.02);padding:14px;border-radius:12px}

/* Recent matches two-column layout: sidebar + large table */
.two-col-matches{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.disc-sidebar{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.disc-sidebar .sidebar-title{margin:0 0 12px 0;color:#fff;font-weight:800}
.disc-sidebar ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.disc-item{padding:10px 12px;border-radius:10px;cursor:pointer;background:transparent;border-left:4px solid transparent;color:var(--text-secondary);font-weight:800;display:flex;align-items:center;gap:10px;transition:background .18s, transform .18s}
.disc-item img.icon{width:28px;height:28px;object-fit:cover;border-radius:6px}
.disc-item .disc-label{flex:1}
.disc-item:hover{background:rgba(124,57,255,0.04);color:var(--text-primary);transform:translateX(4px)}
.disc-item.active{background:linear-gradient(90deg, rgba(124,57,255,0.06), rgba(207,163,255,0.04));color:var(--text-primary);border-left-color:var(--accent);box-shadow:0 8px 20px rgba(124,57,255,0.06)}
.matches-panel{background:transparent;padding:18px;border-radius:12px;border:none;box-shadow:none}
.matches-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.next-overview{display:flex;flex-direction:column;gap:8px}
.next-overview .next-label{color:var(--text-meta);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.next-match{background:transparent;padding:28px;border-radius:16px;border:2px solid rgba(124,57,255,0.06);box-shadow:0 10px 24px rgba(124,57,255,0.04), inset 0 1px 0 rgba(255,255,255,0.02);display:flex;flex-direction:column;gap:18px;position:relative;transition:all 0.25s ease}

.next-match:hover{border-color:rgba(124,57,255,0.08);box-shadow:0 12px 28px rgba(124,57,255,0.06), inset 0 1px 0 rgba(255,255,255,0.03);transform:translateY(-2px)}

.next-match::before {display:none}
.next-match .teams{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:12px 0}
.next-match .team{display:flex;align-items:center;gap:14px;flex:1}
.team-logo{width:72px;height:72px;border-radius:14px;object-fit:cover;border:2px solid rgba(124,57,255,0.06);box-shadow:0 6px 18px rgba(124,57,255,0.06)}

/* Make next-match logos circular and add a subtle hover scale */
.next-match .team-logo, .next-match-large .team-logo{border-radius:50%}
.next-match .team-logo:hover, .next-match-large .team-logo:hover{transform:scale(1.04);transition:transform .22s ease}
.next-match .team-name{font-weight:900;color:var(--text-primary);font-size:18px;letter-spacing:0.5px}
.next-match .vs{font-weight:900;color:#fff;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg, var(--accent), var(--accent-2));border:none;flex-shrink:0;font-size:14px;text-transform:uppercase;box-shadow:0 8px 24px rgba(124,57,255,0.2)}
.match-meta{display:flex;flex-direction:column;color:var(--text-secondary);font-size:13px;gap:6px;padding:8px 0;border-top:1px solid rgba(124,57,255,0.2)}
.tournament{font-weight:900;color:var(--accent);text-transform:uppercase;font-size:16px;letter-spacing:0.6px}
.match-datetime{color:var(--text-primary);font-size:16px;font-weight:700}
.matches-table-wrap{overflow:auto}
/* Recent matches history list styled as cards */
.matches-table{width:100%;border-collapse:separate;border-spacing:0;background:transparent}
.matches-table thead th{background:linear-gradient(90deg, rgba(124,57,255,0.06), rgba(0,0,0,0.02));padding:12px;text-align:left;color:#fff;font-weight:800;border-bottom:0}
.matches-table tbody td{padding:14px 16px;color:rgba(255,255,255,0.95);vertical-align:middle}
.matches-table tbody tr{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:10px;margin-bottom:10px;display:table-row}
.matches-table tbody tr + tr{margin-top:10px}

/* Make rows appear as separate cards */
.matches-table tbody{display:block}
.matches-table thead{display:none}
.matches-table tbody tr{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:12px;margin-bottom:12px}
.matches-table tbody tr td{display:inline-block;width:auto}
.matches-table tbody tr td:first-child{flex:0 0 110px;color:var(--muted);font-weight:700}
.matches-table tbody tr td:nth-child(2){flex:1 1 auto;font-weight:800;font-size:15px}
.matches-table tbody tr td:nth-child(3){flex:0 0 120px;text-align:right}

/* Score badge (pill) */
.score-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-weight:900;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);color:var(--text-primary)}
.score-badge.success{background:linear-gradient(90deg, rgba(34,197,94,0.14), rgba(34,197,94,0.22));color:var(--win-color);box-shadow:0 6px 18px rgba(34,197,94,0.06)}
.score-badge.lost{background:linear-gradient(90deg, rgba(239,68,68,0.12), rgba(239,68,68,0.18));color:var(--loss-color);box-shadow:0 6px 18px rgba(239,68,68,0.06)}
.score-badge.draw{background:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));color:var(--text-secondary)}


/* Next match section - full width */
.next-match-section{margin:80px 0;padding:0}
.next-match-header{margin-bottom:40px}
.next-match-header .section-title{font-size:28px;font-weight:800;letter-spacing:1px;margin:0}

.matches-panel-full{display:flex;flex-direction:column;gap:28px}

/* Large next match card */
.next-match-large{background:transparent;padding:40px;border-radius:20px;border:2px solid var(--accent);box-shadow:0 24px 80px rgba(124,57,255,0.1), inset 0 1px 0 rgba(124,57,255,0.15);display:flex;flex-direction:column;gap:24px;position:relative;transition:all 0.35s cubic-bezier(0.2,0.9,0.2,1)}

.next-match-large:hover{border-color:var(--accent-2);box-shadow:0 32px 100px rgba(124,57,255,0.14), inset 0 1px 0 rgba(124,57,255,0.2);transform:translateY(-6px)}

.next-match-large .teams{display:flex;align-items:center;justify-content:space-around;gap:30px;padding:24px 0;flex-wrap:wrap}

.next-match-large .team{display:flex;align-items:center;gap:18px;flex-direction:column;text-align:center;flex:1;min-width:140px}

.next-match-large .team-logo{width:100px;height:100px;border-radius:16px;object-fit:cover;border:3px solid rgba(124,57,255,0.06);box-shadow:0 10px 26px rgba(124,57,255,0.08);transition:all 0.25s}

.next-match-large .team:hover .team-logo{transform:scale(1.06);border-color:rgba(124,57,255,0.08)}

.next-match-large .team-name{font-weight:900;color:var(--text-primary);font-size:20px;letter-spacing:0.5px;margin-top:8px}

.vs-large{font-weight:900;color:#fff;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg, rgba(124,57,255,0.12), rgba(207,163,255,0.08));border:none;flex-shrink:0;font-size:15px;text-transform:uppercase;box-shadow:none;letter-spacing:0.8px}

.match-details{display:flex;flex-direction:column;gap:16px;padding:24px 0;border-top:2px solid rgba(124,57,255,0.2);border-bottom:2px solid rgba(124,57,255,0.2);text-align:center;align-items:center}

.countdown-large{display:inline-block;padding:12px 20px;border-radius:12px;background:transparent;color:var(--accent);font-weight:900;font-family:Roboto,Arial,sans-serif;font-size:18px;letter-spacing:1.2px;border:2px solid var(--accent);box-shadow:0 8px 20px rgba(124,57,255,0.15);margin:0 auto}

/* Watch button */
.watch-match{display:inline-flex;align-items:center;justify-content:center;padding:12px 36px;background:linear-gradient(135deg, rgba(124,57,255,0.14), rgba(207,163,255,0.06));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:0.6px;cursor:pointer;transition:all 0.25s ease;position:relative;overflow:hidden;width:100%;text-decoration:none;margin-top:8px}

.watch-match::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transform:translateX(-100%);transition:transform 0.6s}

.watch-match:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(124,57,255,0.35)}

.watch-match:hover::before{transform:translateX(100%)}

.watch-match:active{transform:translateY(-2px)}

/* Card glow */
.matches-panel, .next-match, .disc-sidebar{box-shadow:0px 0px 15px rgba(140,80,255,0.12)}

/* Countdown grid - hidden (using inline countdown now) */
.countdown-grid{display:none}
.cd-block{display:none}
.cd-value{display:none}
.cd-label{display:none}

/* subtle divider for panel */
.matches-panel{box-shadow:0 10px 30px rgba(2,2,6,0.6), inset 0 1px 0 rgba(255,255,255,0.02)}

@media(max-width:900px){
  .matches-table tbody tr{flex-direction:column;align-items:flex-start}
  .matches-table tbody tr td:first-child{width:auto}
  .matches-table tbody tr td:nth-child(3){text-align:left}
}

/* Disable hover/hover-transforms inside recent matches: keep layout stable on hover */
#recent-matches .disc-item:hover{
  background:rgba(124,57,255,0.04);color:var(--text-primary);transform:none
}

/* remove subtle movement on hover for recent-matches specifically */
#recent-matches .disc-item,
#recent-matches .matches-table tbody tr{
  transition:transform .18s ease, box-shadow .18s ease
}

/* Styles for new pages: about, contacts, support */
.page-content {
  padding-top: 100px;
  max-width: 900px;
  margin: 0 auto;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-text {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 50px;
  text-align: center;
  font-style: italic;
  position: relative;
}

.intro-text::before {
  content: '"';
  font-size: 60px;
  color: var(--accent);
  position: absolute;
  left: -20px;
  top: -10px;
}

.intro-text::after {
  content: '"';
  font-size: 60px;
  color: var(--accent);
  position: absolute;
  right: -20px;
  bottom: -30px;
}

.info-section {
  margin-bottom: 50px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border-left: 5px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
}

.info-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.info-section h2 {
  color: var(--accent);
  margin-bottom: 20px;
  font-size: 28px;
  position: relative;
  display: flex;
  align-items: center;
}

.info-section h2::before {
  content: '';
  margin-right: 10px;
  font-size: 24px;
}

.values-list, .contact-list, .social-links {
  list-style: none;
  padding: 0;
}

.values-list li, .contact-list li, .social-links li {
  margin-bottom: 15px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: background 0.3s ease;
}

.values-list li:hover, .contact-list li:hover, .social-links li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.values-list li:last-child, .contact-list li:last-child, .social-links li:last-child {
  border-bottom: none;
}

.social-links a, .contact-list a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.social-links a:hover, .contact-list a:hover {
  color: #ff6b6b;
  text-decoration: underline;
}

.contact-form {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.08);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-form label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 16px;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(124, 57, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.contact-form button {
  background: var(--accent);
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 10px rgba(124, 57, 255, 0.3);
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 57, 255, 0.5);
}

/* Large social buttons used on contacts page */
.social-buttons-large{display:flex;gap:12px;flex-wrap:nowrap;margin-top:12px}
.social-large{display:inline-flex;align-items:center;justify-content:center;flex:1;height:88px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));border:2px solid rgba(255,255,255,0.04);text-decoration:none;transition:transform .18s, box-shadow .18s, border-color .18s;padding:0}
.social-large img{width:48px;height:48px;object-fit:contain;display:block;border-radius:8px}
.social-large:focus,.social-large:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(124,57,255,0.12);border-color:var(--accent)}

@media (max-width:900px){
  .social-large{height:72px}
  .social-large img{width:36px;height:36px}
}

@media (max-width:600px){
  .social-buttons-large{gap:10px;flex-wrap:wrap}
  .social-large{height:60px}
  .social-large img{width:28px;height:28px}
}

/* match rows subtle hover scale */
#recent-matches .matches-table tbody tr:hover{transform:scale(1.02);box-shadow:0 10px 30px rgba(140,80,255,0.08)}

@media(max-width:900px){.two-col-matches{grid-template-columns:1fr;gap:12px}.disc-sidebar{order:2}}
.ranking{width:100%;border-collapse:collapse;margin-top:8px}
.ranking th{color:var(--muted);text-align:left;padding:12px}
.ranking td{padding:12px;border-top:1px solid rgba(255,255,255,0.02)}
.ranking .top{background:linear-gradient(90deg, rgba(124,57,255,0.98), rgba(88,33,206,0.95));color:#fff}

/* TIMELINE - brighter, energetic styling */
.timeline{position:relative;padding:48px 0 64px;overflow:visible}
.timeline .line{position:absolute;left:50%;transform:translateX(-50%);top:24px;bottom:24px;width:6px;border-radius:6px;background:linear-gradient(180deg, rgba(124,57,255,0.14), rgba(124,57,255,0.04) 40%, rgba(255,255,255,0.02) 100%);box-shadow:0 12px 40px rgba(124,57,255,0.06), inset 0 0 18px rgba(124,57,255,0.06)}

/* glowing marker */
.timeline-item::before{display:none;content:'';position:absolute;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff, var(--accent));box-shadow:0 6px 18px rgba(124,57,255,0.16),0 0 30px rgba(124,57,255,0.10);top:36px;border:3px solid rgba(255,255,255,0.06)}
.timeline-item{position:relative;width:50%;padding:26px 40px;transition:transform .28s ease, filter .28s, box-shadow .28s}
/* default hidden state: keep items invisible until JS reveals them by adding .visible
  This ensures a consistent reveal even if the browser doesn't match the media query
  or if CSS is loaded before JS runs. Users who prefer reduced motion will see
  items immediately via the override below. */
.timeline-item{opacity:0;transform:translateY(14px)}
.timeline-item.left{left:0;text-align:right;padding-right:48px}
.timeline-item.right{left:50%;padding-left:48px}

.timeline-item .card{display:inline-block;background:linear-gradient(180deg, rgba(12,10,14,0.7), rgba(10,8,14,0.88));padding:20px;border-radius:14px;max-width:480px;border-left:6px solid rgba(124,57,255,0.06); /* shadow set below for consistency */}
.timeline-item .card{display:flex;flex-direction:column;background:linear-gradient(180deg, rgba(12,10,14,0.7), rgba(10,8,14,0.88));padding:20px;border-radius:14px;width:100%;max-width:480px;border-left:none;position:relative;min-height:200px} /* shadow set below for consistency */
.timeline-item .card::before{content:'🏆';position:absolute;top:8px;font-size:36px;text-shadow:0 0 20px rgba(255,215,0,0.8),0 0 40px rgba(255,215,0,0.4),-2px -2px 8px rgba(255,215,0,0.6)}
.timeline-item.left .card::before{left:12px}
.timeline-item.right .card::before{right:12px}
.timeline-item .card h4{margin:6px 0 10px;color:#fff}
.timeline-item .card p{color:rgba(255,255,255,0.9)}
.timeline-item .card.highlight{border-left-color:var(--accent);transform:translateY(-4px);box-shadow:0 20px 60px rgba(124,57,255,0.12)}
.timeline-item .card.highlight{transform:translateY(-4px);box-shadow:0 20px 60px rgba(124,57,255,0.06)}

/* prize details inside timeline card */
.prize-details{margin-top:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));border:1px solid rgba(255,255,255,0.02);display:none}
.prize-details .prize-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:4px 0}
.prize-details .prize-row strong{color:var(--accent-2);font-weight:700}
.prize-details .prize-pool,.prize-details .prize-won{color:#fff;font-weight:800}
.prize-actions{margin-top:10px;text-align:right}
.btn.small{padding:6px 10px;font-size:13px;border-radius:8px}
.card.expanded .prize-details{display:block}

.year{font-size:44px;color:rgba(255,255,255,0.12);font-weight:900;letter-spacing:2px}

/* hover/focus effect to add energy */
.timeline-item:hover{transform:translateY(-6px);filter:brightness(1.04)}
.timeline-item:hover::before{transform:translateX(-50%) scale(1.08);box-shadow:0 10px 30px rgba(124,57,255,0.18),0 0 40px rgba(124,57,255,0.12)}

/* trophy / event emoji badge inside timeline card */
.event-emoji{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg, rgba(124,57,255,0.16), rgba(124,57,255,0.06));color:#fff;font-size:20px;margin:0 12px 8px 0;box-shadow:0 8px 30px rgba(124,57,255,0.08);border:1px solid rgba(255,255,255,0.04)}
.timeline-item.left .event-emoji{margin-left:0;margin-right:12px}
.timeline-item .card h4{display:inline-block;vertical-align:middle}

/* Remove circular emoji badge above timeline cards when user requests it */
.event-emoji{display:none !important}

/* subtle slide-in on load for items (prefers-reduced-motion respected) */
@media (prefers-reduced-motion: no-preference){
  .timeline-item{opacity:0;transform:translateY(14px);transition:transform .6s cubic-bezier(.2,.9,.2,1),opacity .6s}
  .timeline-item.left{transform-origin:right center}
  .timeline-item.right{transform-origin:left center}
  .timeline-item.visible{opacity:1;transform:translateY(0)}
}

/* If the user prefers reduced motion, do not animate — show items immediately */
@media (prefers-reduced-motion: reduce){
  .timeline-item{opacity:1;transform:none;transition:none}
  .timeline-item.visible{opacity:1;transform:none}
}

/* Make timeline items stack nicely on small screens */
@media(max-width:900px){
  .timeline{padding:24px 0}
  .timeline .line{left:8%;transform:none;width:4px}
  .timeline-item{width:100%;padding:18px 18px;text-align:left}
  .timeline-item.left,.timeline-item.right{left:0;padding-left:20%;padding-right:12px}
  .timeline-item::before{left:8%;transform:none;top:24px}
  .timeline-item .card{max-width:none}
  .year{font-size:32px}
}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,180px);gap:14px}
.media{background-size:cover;background-position:center;border-radius:8px;position:relative}
.media .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.6);border:none;color:#fff;padding:12px;border-radius:50%;font-size:18px}

/* lightbox styles for embedded video playback (YouTube) */
.lightbox{position:fixed;inset:0;background:rgba(2,2,4,0.82);display:flex;align-items:center;justify-content:center;z-index:12000;padding:24px}
.lightbox-inner{position:relative;max-width:1200px;width:100%;outline:none}
.lightbox-close{position:absolute;right:-6px;top:-6px;background:rgba(0,0,0,0.6);color:#fff;border:0;border-radius:8px;padding:8px 10px;font-size:16px;cursor:pointer;z-index:2}
.video-wrap{position:relative;padding-top:56.25%;background:#000;border-radius:10px;overflow:hidden}
.video-wrap iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0}

@media(max-width:700px){
  .lightbox{padding:12px}
  .lightbox-close{right:6px;top:6px}
}

/* FOOTER */
.site-footer{padding:60px 0 0;background:linear-gradient(180deg,rgba(7,6,8,0.4),#050406);border-top:1px solid rgba(124,57,255,0.2)}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;padding:60px 0}
.footer-col h4{margin:0 0 16px 0;color:#fff;font-weight:800;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.footer-col p{color:var(--muted);line-height:1.6;margin:0}
.footer-nav{list-style:none;padding:0;margin:0}
.footer-nav li{margin-bottom:12px}
.footer-nav a{color:var(--muted);text-decoration:none;transition:color .24s,padding-left .24s;display:inline-block}
.footer-nav a:hover{color:var(--accent-2);padding-left:4px}
.socials{display:flex;gap:12px;margin-top:16px}
.soc-link{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);border:1px solid rgba(124,57,255,0.2);border-radius:8px;color:#fff;font-size:18px;text-decoration:none;transition:all .24s;backdrop-filter:blur(2px)}
.soc-icon{width:20px;height:20px;object-fit:contain;display:block}
.soc-link:hover{background:rgba(124,57,255,0.15);border-color:var(--accent);color:var(--accent-2);transform:translateY(-3px)}
.footer-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(124,57,255,0.2),transparent);margin:40px 0}
.copyright-section{display:flex;justify-content:space-between;align-items:center;padding:30px 0;flex-wrap:wrap;gap:20px}
.copyright{color:var(--muted);font-size:13px}
.footer-links-small{display:flex;gap:24px}
.footer-links-small a{color:var(--muted);text-decoration:none;font-size:12px;transition:color .24s}
.footer-links-small a:hover{color:var(--accent-2)}

/* purple thin scrollbar for modern browsers */
*::-webkit-scrollbar{width:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:999px}

@media(max-width:900px){
  .hero-title{font-size:46px}
  .two-col{grid-template-columns:1fr}
  .timeline .line{left:8%}
  .timeline-item{width:100%;padding-left:12%;padding-right:12%;text-align:left}
  .timeline-item.left{left:0}
  .timeline-item.right{left:0}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .nav-toggle{display:block}
  .main-nav{display:none}
}

/* Responsive */
@media(max-width:900px){
  .hero-title{font-size:56px}
  .two-col{grid-template-columns:1fr}
  .timeline .line{left:8%}
  .timeline-item{width:100%;padding-left:12%;padding-right:12%;text-align:left}
  .timeline-item.left{left:0}
  .timeline-item.right{left:0}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .nav-toggle{display:block}
  .main-nav{display:none}
}

/* Slightly reduce top spacing for pages and back links */
main.container{padding-top:calc(var(--site-header-h) + 8px) !important}
main.container > a.btn.ghost:first-child{display:inline-block;margin-top:8px;margin-bottom:8px}

/* Mobile footer: center columns and socials for a tidy centered footer */
@media(max-width:900px){
  .footer-inner{display:grid;gap:20px;align-items:center;text-align:center;padding:30px 0}
  .footer-inner .footer-col{justify-content:center;align-items:center;text-align:center}
  .footer-inner .socials{justify-content:center;display:flex}
  .footer-col p{margin:0 auto;max-width:320px}
  .footer-nav{padding:0;display:block}
  .footer-nav li{display:block;margin:8px 0}

  .copyright-section{flex-direction:column;align-items:center;text-align:center;padding:20px 0}
  .footer-links-small{justify-content:center;display:flex;gap:12px}
}

/* Expander clone used for card expand animation */
.expander{background-repeat:no-repeat;background-size:cover;background-position:center;overflow:hidden;border-radius:12px;display:block}
.expander .expander-inner h2{margin:0}

.expander::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.6));pointer-events:none}

@media(max-width:600px){
  .expander .expander-inner h2{font-size:20px}
}

/* Universal subtle purple back-glow for primary card elements */
/* Keeps existing dark shadow but adds an outer purple halo for energy */
.card, .team-card, .news-card, .tournament-card, .panel, .media, .single-article-view, .news-index-card, .narrative-panel, .narrative-milestone {
  /* combine a stronger dark shadow with a subtle purple glow */
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 36px rgba(124,57,255,0.06);
}

/* Ensure timeline-specific cards (more specific selector) also receive the purple halo */

/* Recent matches (luxury style) */
.matches-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:20px}
.match-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));padding:22px;border-radius:14px;color:#f6f7f8;border:1px solid rgba(255,255,255,0.04);position:relative;overflow:hidden;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s,filter .22s;box-shadow:0 10px 40px rgba(4,8,20,0.65), 0 0 36px var(--accent-2)}
.match-card:hover{transform:translateY(-8px);box-shadow:0 26px 70px rgba(4,8,20,0.72), 0 0 80px var(--accent-2);filter:brightness(1.03)}
.match-card::before{content:"";position:absolute;left:0;top:0;height:8px;width:100%;display:block;opacity:0.98;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.match-card .card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.match-card h3{margin:0;font-size:1.08rem;font-weight:800;letter-spacing:0.6px}
.match-card .discipline-badge{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);color:#fff;font-weight:800}
.last-matches{list-style:none;padding:0;margin:0 0 12px 0}
.last-matches li{font-size:.95rem;margin:8px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px;border-radius:8px;background:linear-gradient(180deg, rgba(124,57,255,0.02), rgba(0,0,0,0.03));border:1px solid rgba(124,57,255,0.04)}
.last-matches li .match-left{display:flex;flex-direction:column;min-width:0}
.last-matches li time{display:block;color:var(--muted);font-size:12px}
.last-matches li .muted{color:var(--muted);font-weight:700}
.score-badge{display:inline-block;min-width:56px;text-align:center;padding:6px 10px;border-radius:8px;font-weight:900;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.next-match{display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04));padding:12px;border-radius:10px;border:1px solid rgba(124,57,255,0.06)}
.next-match .next-label{font-size:.82rem;color:var(--muted)}
.next-vs a{color:#fff;text-decoration:none;font-weight:800}
.countdown{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:10px;background:transparent;color:var(--accent);font-weight:900;font-family:Roboto,Arial,sans-serif;font-size:15px;letter-spacing:1px}
/* accent stripes per discipline for premium look */
.match-card[data-disc="dota2"]::before{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.match-card[data-disc="cs2"]::before{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.match-card[data-disc="mlbb"]::before{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.match-card[data-disc="csacademy"]::before{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@media (max-width:1000px){.matches-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.matches-grid{grid-template-columns:1fr}}
.timeline-item .card {
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 36px rgba(124,57,255,0.06);
}

.timeline-item .card.highlight {
  /* keep the highlight behavior but combine dark + purple glow for consistency */
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 60px rgba(124,57,255,0.10);
}

@media (prefers-reduced-motion: no-preference){
  .card:hover, .team-card:hover, .news-card:hover, .tournament-card:hover, .panel:hover {
    box-shadow: 0 20px 70px rgba(0,0,0,0.6), 0 0 60px rgba(124,57,255,0.10);
  }
}

/* News panel styles */
.news-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));border-radius:14px;padding:18px;display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.news-list{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow:auto;padding-right:6px}
.news-list .mini-card{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;background:rgba(255,255,255,0.01);cursor:pointer;border:1px solid transparent}
.news-list .mini-card:hover{background:linear-gradient(90deg, rgba(124,57,255,0.04), rgba(0,0,0,0.06));border-color:rgba(124,57,255,0.12)}
.news-list .mini-card.active{background:linear-gradient(90deg, rgba(124,57,255,0.06), rgba(0,0,0,0.06));border-color:rgba(124,57,255,0.18);box-shadow:inset 4px 0 0 0 rgba(124,57,255,0.18)}
.mini-thumb{width:68px;height:48px;background-size:cover;background-position:center;border-radius:6px;flex-shrink:0}
.mini-meta{flex:1}
.mini-meta h4{margin:0;font-size:14px}
.mini-meta time{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.news-detail{background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));padding:18px;border-radius:10px;min-height:220px}
.donation-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,2,4,0.7);z-index:13000;padding:24px}
.donation-inner{max-width:760px;width:100%;background:linear-gradient(180deg, rgba(10,8,12,0.98), rgba(6,6,8,0.96));padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 40px 120px rgba(2,2,6,0.75)}
.donation-close{position:absolute;right:28px;top:18px;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));color:#fff;border:0;border-radius:8px;padding:6px 10px;font-size:16px;cursor:pointer}
.donation-header{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.donation-title{font-size:20px;font-weight:900;color:#fff}
.donation-sub{color:var(--muted);font-size:13px}
.donation-controls{margin-top:6px}
.donation-amount-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.donation-amount-row input[type="number"]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#fff}
.donation-amount-row select{padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#fff}
.donation-presets{display:flex;gap:8px;margin-top:10px}
.preset-btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);cursor:pointer}
.preset-btn:hover{background:rgba(124,57,255,0.06);color:#fff}
.donation-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.donation-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04));border:1px solid rgba(255,255,255,0.02)}
.donation-option .label{font-weight:800;color:#fff}
.donation-option .desc{color:var(--muted);font-size:13px}
.donation-option .action{display:flex;gap:8px}
.donation-action-btn{padding:8px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:0;cursor:pointer;font-weight:800;text-decoration:none}
.preset-links a{ text-decoration:none;color:inherit }
.donation-action-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:#fff}
.donation-disabled{opacity:0.6;pointer-events:none}

@media(max-width:700px){
  .donation-inner{padding:16px}
  .donation-amount-row{flex-direction:column;align-items:stretch}
  .donation-amount-row select{width:100%}
  .donation-presets{flex-wrap:wrap}
}

.news-detail h2{margin-top:0;font-size:20px}
.news-grid-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}

/* Detail content typography and layout */
.news-detail{color:var(--accent-2);position:relative;overflow:hidden}
.news-detail .news-hero{width:100%;height:220px;border-radius:8px;background-size:cover;background-position:center;margin-bottom:14px}
.news-detail article{color:#e9e9f8;background:transparent}
.news-detail article h3{color:#fff;margin:0 0 8px 0;font-size:22px}
.news-detail article .news-date{color:var(--muted);font-size:13px;margin-bottom:12px;display:block}
.news-detail article p{color:rgba(255,255,255,0.9);line-height:1.6;margin-bottom:12px}
.news-detail article a{color:var(--accent-2);text-decoration:underline}
.news-detail .source{display:block;margin-top:8px;color:var(--muted);font-size:13px}

/* Fade animation when swapping content */
.news-detail{transition:opacity .28s ease, transform .28s ease}
.news-detail.loading{opacity:0;transform:translateY(6px)}

/* active mini card */
.mini-card.active{outline:2px solid rgba(124,57,255,0.16);box-shadow:0 8px 30px rgba(124,57,255,0.06)}

@media(max-width:600px){
  .news-detail .news-hero{height:140px}
}

@media(max-width:980px){
  .news-panel{grid-template-columns:1fr}
  .news-list{max-height:240px}
}

/* Single article / blog view (premium) */
.single-article-view{max-width:1000px;margin:0 auto;padding:12px 18px;border-radius:14px;background:linear-gradient(180deg, rgba(8,8,10,0.95), rgba(6,6,8,0.95));box-shadow:0 30px 80px rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.02)}
.single-article-view .back-link{display:inline-block;color:var(--muted);text-decoration:none;margin-bottom:12px}
.single-article-view h1{font-family:Montserrat, sans-serif;font-weight:900;font-size:52px;line-height:1.02;color:#fff;margin:6px 0 8px}
.single-article-view .article-hero h1{font-size:42px;margin:0 0 8px 0}
.single-article-view .article-hero time{font-size:14px;color:rgba(255,255,255,0.9)}
.single-article-view .article-meta{color:var(--muted);font-size:13px;margin-bottom:18px}
.single-article-view .article-hero{width:100%;height:380px;background-size:cover;background-position:center;border-radius:10px;margin-bottom:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);display:flex;align-items:flex-end;position:relative;overflow:hidden}
.single-article-view .article-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.7));z-index:1}
.single-article-view .article-hero-inner{position:relative;z-index:2;width:100%;padding:28px;color:#fff}
.single-article-view .article-header{margin-bottom:20px}
.single-article-view .article-header h1{font-size:48px;margin:0 0 10px 0}
.single-article-view .article-header time{color:var(--muted);font-size:14px;display:block}
.single-article-view .article-image{margin:24px 0;text-align:center;overflow:visible;max-height:none}
.single-article-view .article-image img{max-width:680px;width:100%;height:auto;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.6);object-fit:contain;object-position:center}
.single-article-view .article-content{color:rgba(255,255,255,0.95);line-height:1.7;font-size:17px}
.single-article-view .article-content p{margin-bottom:16px}

/* Larger section titles - responsive adjustments */
@media (max-width:900px){
  .section-title{font-size:20px}
}

@media (max-width:600px){
  .section-title{font-size:18px}
}
.single-article-view .article-content img{max-width:100%;border-radius:8px}
.single-article-view .article-source{color:var(--muted);font-size:13px;margin-top:18px}

/* Players layout: large vertical photo on the left, details on the right */
.players-grid{display:flex;flex-direction:column;gap:20px}
.player-row{display:flex;gap:24px;align-items:flex-start;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06));box-shadow:0 8px 30px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.02)}
.player-photo{width:260px;height:360px;flex-shrink:0;border-radius:10px;object-fit:cover}
.player-info{flex:1;min-width:0}
.player-info h3{margin:0 0 6px 0;font-size:22px}
.player-role{color:var(--accent-2);font-weight:700;margin-bottom:8px}
.player-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.player-bio{color:rgba(255,255,255,0.92);line-height:1.6}
.player-socials{margin-top:12px;display:flex;gap:10px}
.player-socials a{color:var(--muted);text-decoration:none;border-radius:6px;padding:6px 8px;background:rgba(255,255,255,0.02)}

@media(max-width:900px){
  .player-row{flex-direction:column}
  .player-photo{width:100%;height:320px}
  .news-featured-main{height:300px}
  .news-featured-content{padding:20px}
  .news-featured-content h3{font-size:24px}
  .news-item-compact{flex-direction:column}
  .news-item-image{width:100%;height:160px}
}

/* Hide archive list when in single-article mode (applies when body has class) */
body.single-article-mode .news-panel{display:none}
body.single-article-mode main > .container{max-width:1200px}

@media(max-width:900px){
  .single-article-view{margin:20px;padding:20px}
  .single-article-view h1{font-size:32px}
  .single-article-view .article-hero{height:200px}
}
.quiz-section{padding:30px 30px}
.quiz-intro{text-align:center;color:rgba(255,255,255,0.8);font-size:16px;margin-bottom:24px}
.quiz-container{max-width:700px;margin:0 auto}

.quiz-progress{margin-bottom:30px}
.progress-bar{width:100%;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;margin-bottom:10px}
.progress-fill{height:100%;background:linear-gradient(90deg, var(--accent), var(--accent-2));width:20%;transition:width .3s ease}
.progress-text{font-size:13px;color:rgba(255,255,255,0.6)}

.quiz-content{margin:30px 0}
.quiz-question{margin-bottom:30px;animation:fadeIn .4s ease}
.quiz-question h3{font-size:20px;margin:0 0 20px 0;color:#fff}
.quiz-option{display:block;width:100%;padding:14px 16px;margin-bottom:10px;border:2px solid rgba(124,57,255,0.2);border-radius:10px;background:rgba(255,255,255,0.02);color:#fff;cursor:pointer;font-size:15px;transition:all .2s ease;text-align:left;white-space:normal}
.quiz-option:hover{border-color:var(--accent);background:rgba(124,57,255,0.06)}
.quiz-option.selected{border-color:var(--accent);background:rgba(124,57,255,0.12)}
.quiz-option.correct{border-color:#4caf50;background:rgba(76,175,80,0.1)}
.quiz-option.incorrect{border-color:#f44336;background:rgba(244,67,54,0.1)}
.quiz-option:disabled{cursor:not-allowed;opacity:0.6}

.quiz-nav{display:flex;gap:12px;margin-top:30px;justify-content:flex-end}
.quiz-nav button{padding:10px 18px;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s ease}
.quiz-nav .btn{background:var(--accent);color:#fff}
.quiz-nav .btn:hover{box-shadow:0 6px 18px rgba(124,57,255,0.2)}

.quiz-results{text-align:center}
.results-inner{padding:40px;background:linear-gradient(180deg, rgba(12,10,14,0.8), rgba(20,15,30,0.6));border-radius:14px;border:1px solid rgba(124,57,255,0.1)}
.results-inner h3{font-size:24px;margin-top:0;color:#fff}
.result-score{margin:30px 0}
.score-number{font-size:64px;font-weight:900;color:var(--accent);display:block}
.score-text{font-size:18px;color:rgba(255,255,255,0.7)}
.result-message{font-size:18px;color:rgba(255,255,255,0.85);margin:20px 0 30px}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}