*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#050817;color:#fff;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.container{width:min(1220px,92%);margin:auto}.site-header{position:sticky;top:0;z-index:1000;background:rgba(5,8,23,.88);border-bottom:1px solid rgba(125,145,205,.12);backdrop-filter:blur(18px)}.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}.logo{display:inline-flex;align-items:center;gap:10px}.logo-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(93,144,255,.45);border-radius:10px;background:linear-gradient(145deg,rgba(49,92,190,.35),rgba(32,42,89,.4))}.logo-text{display:flex;flex-direction:column;line-height:1}.logo-text strong{font-size:15px;font-weight:900;letter-spacing:1.5px}.logo-text small{margin-top:5px;color:#9aa6c3;font-size:8px;font-weight:800;letter-spacing:2.4px}.main-nav{display:flex;align-items:center;gap:30px}.main-nav a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:28px 0;color:#9ca8c4;font-size:13px;font-weight:700;transition:.25s}.main-nav a:hover,.main-nav a.active{color:#fff}.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;border-radius:99px;background:linear-gradient(90deg,#4b8dff,#8b5cf6);box-shadow:0 0 12px rgba(79,140,255,.8)}.topup-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:116px;padding:11px 18px;border:1px solid rgba(104,143,255,.45);border-radius:9px;background:linear-gradient(135deg,#3d7fff,#704cf0);color:#fff;font-size:12px;font-weight:900;letter-spacing:.8px;box-shadow:0 8px 24px rgba(58,99,238,.24);transition:.25s}.topup-button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(58,99,238,.38)}.hero{position:relative;min-height:280px!important;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 72% 48%,rgba(47,91,210,.24),transparent 30%),radial-gradient(ellipse at 88% 80%,rgba(109,52,214,.18),transparent 35%),linear-gradient(105deg,#050817,#07102a 48%,#090b20)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(91,123,210,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(91,123,210,.045) 1px,transparent 1px);background-size:55px 55px;pointer-events:none}.hero:after{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-120px;border-radius:50%;border:1px solid rgba(79,126,255,.08);animation:orbit 16s linear infinite}.hero-background{position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(68,125,255,.035) 40.2%,transparent 40.5%);background-size:320px 320px;animation:bgmove 12s linear infinite}.hero-particles{position:absolute;inset:0;opacity:.55;background-image:radial-gradient(circle,rgba(130,175,255,.7) 1px,transparent 1.5px);background-size:110px 110px;animation:particles 14s linear infinite}.hero-inner{position:relative;z-index:2;min-height:280px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center}.hero-content{position:relative;z-index:5;padding:70px 0}.hero-label{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:#b6c9ff;font-size:12px;font-weight:900;letter-spacing:3px;text-transform:uppercase}.hero-label:before{content:"";width:28px;height:2px;background:linear-gradient(90deg,#4b8dff,transparent)}.hero h1{margin-bottom:18px;font-size:clamp(62px,8vw,108px);line-height:.9;font-weight:950;letter-spacing:-5px;text-transform:uppercase;text-shadow:0 12px 40px rgba(0,0,0,.35);animation:titlein .9s ease both}.hero-blue{color:#78b5ff;text-shadow:0 0 35px rgba(73,143,255,.4)}.hero-divider{width:min(360px,80%);display:flex;align-items:center;gap:10px;margin-bottom:22px}.hero-divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(98,139,255,.55))}.hero-divider span:last-child{background:linear-gradient(90deg,rgba(98,139,255,.55),transparent)}.hero-divider b{color:#91baff;animation:pulse 2s ease-in-out infinite}.hero-tagline{max-width:570px;margin-bottom:30px;color:#b2bdd6;font-size:13px;font-weight:700;line-height:1.9;letter-spacing:1.4px}.hero-button{position:relative;display:inline-flex;align-items:center;gap:13px;padding:14px 21px;overflow:hidden;border:1px solid rgba(118,165,255,.55);border-radius:8px;background:linear-gradient(135deg,#367dff,#5f55ef);color:#fff;font-size:11px;font-weight:900;letter-spacing:1.2px;box-shadow:0 10px 32px rgba(50,102,240,.28);transition:.25s}.hero-button:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(50,102,240,.4)}.section{position:relative;padding:100px 0}.tournaments-section{background:linear-gradient(180deg,#050817,#070b1c)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:42px}.section-heading>div>span{display:block;margin-bottom:9px;color:#719cff;font-size:10px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase}.section-heading h2{font-size:clamp(30px,4vw,44px);line-height:1;font-weight:900;letter-spacing:-1.5px}.section-heading p{max-width:440px;color:#8995b1;font-size:13px;line-height:1.8;text-align:right}.tournament-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.tournament-card{position:relative;display:flex;flex-direction:column;min-height:330px;padding:25px;overflow:hidden;border:1px solid rgba(105,126,190,.22);border-radius:14px;background:linear-gradient(145deg,rgba(20,31,67,.92),rgba(9,15,34,.95));box-shadow:0 18px 45px rgba(0,0,0,.2);transition:.35s}.tournament-card:hover{transform:translateY(-8px);border-color:rgba(88,139,255,.5);box-shadow:0 25px 60px rgba(0,0,0,.4)}.tournament-status{display:inline-flex;width:max-content;margin-bottom:15px;padding:5px 9px;border:1px solid rgba(86,139,255,.28);border-radius:5px;background:rgba(51,91,170,.16);color:#8bb0ff;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.tournament-card h3{margin-bottom:9px;font-size:21px;line-height:1.15;font-weight:900}.tournament-card p{flex:1;margin-bottom:22px;color:#8f9ab5;font-size:12px;line-height:1.7}.tournament-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}.meta-item{min-width:0;padding:11px 9px;border:1px solid rgba(100,123,178,.12);border-radius:7px;background:rgba(5,10,25,.55)}.meta-item small{display:block;margin-bottom:4px;color:#687590;font-size:8px;text-transform:uppercase}.meta-item strong{display:block;overflow:hidden;color:#dbe3f5;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.view-button{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid rgba(91,139,255,.32);border-radius:7px;background:rgba(48,86,164,.12);color:#a9c4ff;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;transition:.25s}.view-button:hover{border-color:rgba(96,151,255,.65);background:rgba(58,106,209,.22);color:#fff}.section-action{display:flex;justify-content:center;margin-top:42px}.outline-button{display:inline-flex;align-items:center;gap:11px;padding:13px 21px;border:1px solid rgba(104,136,207,.3);border-radius:7px;background:rgba(15,24,50,.65);color:#b7c5e2;font-size:10px;font-weight:900;letter-spacing:1px;transition:.25s}.outline-button:hover{transform:translateY(-2px);border-color:rgba(102,153,255,.55);color:#fff}.empty-state,.loading{grid-column:1/-1;padding:45px 20px;border:1px dashed rgba(105,126,185,.25);border-radius:12px;color:#78849f;text-align:center;font-size:13px}.sponsors-section{background:radial-gradient(circle at 50% 0%,rgba(74,94,181,.09),transparent 35%),#070b1b}.sponsors-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.sponsor-card{overflow:hidden;border:1px solid rgba(105,126,185,.2);border-radius:14px;background:linear-gradient(145deg,rgba(18,28,58,.92),rgba(8,14,31,.96));box-shadow:0 20px 50px rgba(0,0,0,.25);transition:.35s}.sponsor-card:hover{transform:translateY(-6px);border-color:rgba(94,143,255,.42)}.sponsor-photo{height:190px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(76,126,255,.15),transparent 50%),#080e22}.sponsor-photo-placeholder{width:125px;height:125px;display:grid;place-items:center;border:1px solid rgba(103,143,229,.3);border-radius:18px;background:linear-gradient(145deg,rgba(46,77,144,.35),rgba(15,25,54,.6));color:#7899db;font-size:11px;font-weight:900;letter-spacing:2px}.sponsor-info{padding:22px}.sponsor-info h3{margin-bottom:4px;font-size:20px;font-weight:900}.sponsor-info h4{margin-bottom:12px;color:#719cff;font-size:9px;font-weight:900;letter-spacing:2px}.sponsor-info p{margin-bottom:17px;color:#8d98b1;font-size:11px;line-height:1.7}.sponsor-detail{margin-top:7px;color:#b0bad0;font-size:10px}.sponsor-socials{display:flex;gap:7px;margin-top:17px}.sponsor-socials a{width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(101,126,185,.22);border-radius:7px;background:rgba(7,13,30,.65);color:#a9b7d4;transition:.2s}.sponsor-socials a:hover{border-color:rgba(96,146,255,.5);color:#fff}.site-footer{padding:36px 0;border-top:1px solid rgba(103,124,178,.13);background:#040713}.footer-inner{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:30px}.footer-center{text-align:center}.footer-center p{margin-bottom:4px;color:#9aa6bf;font-size:10px}.footer-center span{color:#5f6b85;font-size:9px}.footer-social{display:flex;justify-content:flex-end;gap:8px}.footer-social strong{margin-right:4px;color:#66728d;font-size:8px;letter-spacing:1.5px}.footer-social a{width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(95,119,176,.18);border-radius:7px;color:#8492af;font-size:11px;transition:.2s}.footer-social a:hover{transform:translateY(-2px);border-color:rgba(98,145,255,.5);color:#fff}@keyframes titlein{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes glow{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}}@keyframes ball{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-17px) rotate(5deg)}}@keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}@keyframes bgmove{from{background-position:0 0}to{background-position:320px 320px}}@keyframes particles{from{background-position:0 0}to{background-position:110px 110px}}@keyframes orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:1000px){.main-nav{gap:16px}.main-nav a{font-size:11px}.hero-inner{grid-template-columns:1fr .9fr}.hero h1{font-size:clamp(55px,8vw,80px)}.tournament-grid,.sponsors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-inner{grid-template-columns:1fr 1fr}.footer-center{grid-column:1/-1;order:3}}@media(max-width:720px){.header-inner{min-height:auto;padding:15px 0;flex-wrap:wrap}.main-nav{order:3;width:100%;justify-content:space-between}.main-nav a{padding:8px 3px;font-size:9px}.main-nav a.active:after{bottom:2px}.topup-button{min-width:90px;padding:9px 12px;font-size:10px}.hero{min-height:780px}.hero-inner{min-height:780px;display:flex;flex-direction:column;justify-content:center}.hero-content{width:100%;padding:60px 0 15px;text-align:center}.hero-label{justify-content:center;font-size:9px;letter-spacing:2px}.hero-label:before{display:none}.hero h1{font-size:clamp(52px,16vw,76px);letter-spacing:-3px}.hero-divider{margin-inline:auto}.hero-tagline{margin-inline:auto;font-size:10px}.section{padding:70px 0}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:32px}.section-heading p{margin-top:13px;text-align:left}.tournament-grid,.sponsors-grid{grid-template-columns:1fr}.tournament-card{min-height:auto}.sponsor-photo{height:210px}.footer-inner{display:flex;flex-direction:column;text-align:center}.footer-social{justify-content:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.hero{
min-height:360px!important;
padding:42px 0 38px!important;
display:flex;
align-items:center;
}
.hero-inner{
min-height:280px!important;
grid-template-columns:1fr 1fr!important;
gap:55px;
}
.hero-content{
padding:15px 0!important;
}
.hero h1{
font-size:clamp(48px,6vw,76px)!important;
letter-spacing:-3px!important;
margin-bottom:14px!important;
}
.hero-tagline{
margin-bottom:22px!important;
font-size:11px!important;
line-height:1.7!important;
}
.hero-divider{
margin-bottom:16px!important;
}
.hero-button{
padding:12px 18px!important;
}
.hero-games{
position:relative;
min-height:245px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
align-items:center;
}
.hero-games:before{
content:"";
position:absolute;
width:280px;
height:280px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle,rgba(64,126,255,.18),transparent 68%);
filter:blur(8px);
animation:gameGlow 4s ease-in-out infinite;
}
.hero-game{
position:relative;
z-index:2;
min-height:175px;
padding:20px 10px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border:1px solid rgba(105,126,190,.18);
border-radius:14px;
background:linear-gradient(145deg,rgba(19,30,65,.8),rgba(7,13,30,.88));
box-shadow:0 15px 40px rgba(0,0,0,.25);
transition:.3s ease;
}
.hero-game:hover{
transform:translateY(-6px);
border-color:rgba(93,145,255,.5);
box-shadow:0 20px 50px rgba(39,91,210,.2);
}
.game-logo{
width:72px;
height:72px;
margin-bottom:13px;
display:grid;
place-items:center;
border:1px solid rgba(103,147,235,.3);
border-radius:16px;
background:radial-gradient(circle,rgba(65,123,255,.2),rgba(10,18,42,.8));
color:#fff;
font-weight:950;
}
.efootball-logo{
color:#70a9ff;
font-size:42px;
font-style:italic;
text-shadow:0 0 25px rgba(75,142,255,.7);
}
.pubg-logo{
color:#f0d06c;
font-size:13px;
letter-spacing:1px;
}
.freefire-logo{
color:#ffb347;
font-size:11px;
line-height:1.1;
letter-spacing:1px;
}
.freefire-logo b{
display:block;
color:#ff7043;
font-size:17px;
}
.hero-game strong{
margin-bottom:4px;
color:#e8edfa;
font-size:10px;
letter-spacing:1px;
}
.hero-game>span{
color:#6f7c98;
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
}
@keyframes gameGlow{
0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.92)}
50%{opacity:.85;transform:translate(-50%,-50%) scale(1.08)}
}
@media(max-width:900px){
.hero-inner{
grid-template-columns:1fr!important;
gap:20px;
}
.hero-content{
text-align:center;
}
.hero-label{
justify-content:center;
}
.hero-divider{
margin-left:auto;
margin-right:auto;
}
.hero-tagline{
margin-left:auto;
margin-right:auto;
}
.hero-games{
min-height:170px;
}
.hero-game{
min-height:145px;
}
}
@media(max-width:600px){
.hero{
min-height:auto!important;
padding:35px 0!important;
}
.hero-games{
grid-template-columns:1fr;
gap:10px;
}
.hero-game{
min-height:110px;
flex-direction:row;
gap:12px;
justify-content:flex-start;
text-align:left;
padding:12px 16px;
}
.game-logo{
width:55px;
height:55px;
min-width:55px;
margin-bottom:0;
}
.hero-game strong,
.hero-game>span{
display:block;
}
}
/* FINAL HERO GAME SHOWCASE */
section.hero .hero-inner .hero-games{
position:relative!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
align-items:stretch!important;
min-height:0!important;
width:100%!important;
}
section.hero .hero-inner .hero-games .hero-game{
position:relative!important;
z-index:5!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
min-height:150px!important;
width:100%!important;
padding:18px 10px!important;
box-sizing:border-box!important;
border:1px solid rgba(100,140,220,.28)!important;
border-radius:14px!important;
background:linear-gradient(145deg,rgba(20,32,68,.92),rgba(7,14,34,.96))!important;
box-shadow:0 12px 35px rgba(0,0,0,.3)!important;
}
section.hero .hero-inner .hero-games .game-logo{
width:64px!important;
height:64px!important;
min-width:64px!important;
margin:0 0 10px 0!important;
display:grid!important;
place-items:center!important;
border:1px solid rgba(100,145,235,.35)!important;
border-radius:14px!important;
}
section.hero .hero-inner .hero-games .hero-game strong{
display:block!important;
color:#fff!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:1px!important;
}
section.hero .hero-inner .hero-games .hero-game>span{
display:block!important;
color:#8794b2!important;
font-size:8px!important;
margin-top:3px!important;
}
/* RESPONSIVE HERO - FINAL */
.hero{
min-height:340px!important;
padding:28px 0!important;
}
.hero-inner{
min-height:280px!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:35px!important;
}
.hero-content{
padding:10px 0!important;
}
.hero h1{
font-size:clamp(48px,5.2vw,72px)!important;
line-height:.9!important;
}
.hero-games{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
width:100%!important;
min-height:0!important;
align-items:stretch!important;
}
.hero-game{
min-width:0!important;
min-height:140px!important;
padding:14px 8px!important;
}
.game-logo{
width:58px!important;
height:58px!important;
min-width:58px!important;
margin-bottom:8px!important;
}
.hero-game strong{
font-size:9px!important;
letter-spacing:.7px!important;
white-space:nowrap!important;
}
.hero-game>span{
font-size:7px!important;
white-space:nowrap!important;
}
/* TABLET */
@media(max-width:1000px){
.hero{
min-height:320px!important;
padding:25px 0!important;
}
.hero-inner{
grid-template-columns:1fr 1fr!important;
gap:20px!important;
}
.hero h1{
font-size:clamp(42px,6vw,62px)!important;
}
.hero-games{
gap:7px!important;
}
.hero-game{
min-height:120px!important;
padding:10px 5px!important;
}
.game-logo{
width:48px!important;
height:48px!important;
min-width:48px!important;
}
}
/* MOBILE */
@media(max-width:720px){
.hero{
min-height:auto!important;
padding:32px 0 28px!important;
}
.hero-inner{
min-height:auto!important;
display:flex!important;
flex-direction:column!important;
gap:24px!important;
}
.hero-content{
width:100%!important;
padding:0!important;
text-align:center!important;
}
.hero-label{
justify-content:center!important;
}
.hero h1{
font-size:clamp(50px,15vw,68px)!important;
letter-spacing:-3px!important;
line-height:.9!important;
}
.hero-divider{
margin-left:auto!important;
margin-right:auto!important;
}
.hero-tagline{
max-width:420px!important;
margin-left:auto!important;
margin-right:auto!important;
font-size:9px!important;
}
.hero-button{
margin-left:auto!important;
margin-right:auto!important;
}
.hero-games{
width:100%!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:7px!important;
}
.hero-game{
min-height:105px!important;
padding:9px 4px!important;
border-radius:11px!important;
}
.game-logo{
width:45px!important;
height:45px!important;
min-width:45px!important;
margin-bottom:6px!important;
border-radius:10px!important;
}
.efootball-logo{
font-size:30px!important;
}
.pubg-logo{
font-size:10px!important;
}
.freefire-logo{
font-size:8px!important;
}
.freefire-logo b{
font-size:13px!important;
}
.hero-game strong{
font-size:7px!important;
letter-spacing:.4px!important;
}
.hero-game>span{
font-size:6px!important;
margin-top:2px!important;
}
}
/* SMALL PHONES */
@media(max-width:380px){
.hero{
padding:25px 0 22px!important;
}
.hero-inner{
gap:18px!important;
}
.hero h1{
font-size:46px!important;
}
.hero-tagline{
font-size:8px!important;
}
.hero-games{
gap:5px!important;
}
.hero-game{
min-height:92px!important;
padding:7px 2px!important;
}
.game-logo{
width:38px!important;
height:38px!important;
min-width:38px!important;
}
.hero-game strong{
font-size:6.5px!important;
}
.hero-game>span{
display:none!important;
}
}
/* BYC HERO - RESPONSIVE FINAL OVERRIDE */
section.hero .hero-inner{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;
align-items:center!important;
gap:28px!important;
min-height:280px!important;
}
section.hero .hero-games{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
width:100%!important;
min-width:0!important;
min-height:0!important;
}
section.hero .hero-game{
min-width:0!important;
width:auto!important;
min-height:135px!important;
}
/* TABLET */
@media(max-width:900px){
section.hero .hero-inner{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:16px!important;
}
section.hero .hero-games{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
}
section.hero .hero-game{
min-height:115px!important;
padding:9px 4px!important;
}
section.hero .game-logo{
width:45px!important;
height:45px!important;
min-width:45px!important;
}
section.hero .hero-game strong{
font-size:7px!important;
}
section.hero .hero-game>span{
font-size:6px!important;
}
}
/* MOBILE */
@media(max-width:600px){
section.hero{
min-height:auto!important;
padding:28px 0 24px!important;
}
section.hero .hero-inner{
display:flex!important;
flex-direction:column!important;
min-height:auto!important;
gap:20px!important;
}
section.hero .hero-content{
width:100%!important;
text-align:center!important;
padding:0!important;
}
section.hero .hero-label{
justify-content:center!important;
}
section.hero .hero-divider{
margin-left:auto!important;
margin-right:auto!important;
}
section.hero .hero-tagline{
margin-left:auto!important;
margin-right:auto!important;
font-size:8px!important;
}
section.hero .hero-button{
margin-left:auto!important;
margin-right:auto!important;
}
section.hero .hero-games{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:5px!important;
width:100%!important;
}
section.hero .hero-game{
min-height:92px!important;
padding:7px 2px!important;
border-radius:10px!important;
}
section.hero .game-logo{
width:38px!important;
height:38px!important;
min-width:38px!important;
margin-bottom:5px!important;
}
section.hero .efootball-logo{
font-size:27px!important;
}
section.hero .pubg-logo{
font-size:8px!important;
}
section.hero .freefire-logo{
font-size:7px!important;
}
section.hero .freefire-logo b{
font-size:11px!important;
}
section.hero .hero-game strong{
font-size:6px!important;
letter-spacing:.3px!important;
white-space:nowrap!important;
}
section.hero .hero-game>span{
display:none!important;
}
}
/* VERY SMALL PHONES */
@media(max-width:380px){
section.hero .hero-games{
gap:4px!important;
}
section.hero .hero-game{
min-height:82px!important;
}
section.hero .game-logo{
width:34px!important;
height:34px!important;
min-width:34px!important;
}
section.hero .hero-game strong{
font-size:5.5px!important;
}
}
/* GAME ROW MOBILE SAFETY */
@media(max-width:600px){section.hero .hero-games{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:5px!important;width:100%!important}section.hero .hero-games .hero-game{flex:1 1 0!important;min-width:0!important;width:auto!important}}
/* ==========================================
BYC ESPORTS HERO — FINAL
========================================== */
section.hero{
min-height:330px!important;
padding:30px 0!important;
display:flex!important;
align-items:center!important;
}
section.hero .hero-inner{
min-height:270px!important;
display:grid!important;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
align-items:center!important;
gap:35px!important;
}
section.hero .hero-content{
padding:0!important;
min-width:0!important;
}
.byc-hero-title{
margin:12px 0 16px!important;
font-size:clamp(64px,7vw,105px)!important;
line-height:.82!important;
letter-spacing:-5px!important;
font-weight:950!important;
}
.byc-hero-title span{
display:block!important;
color:#fff!important;
}
.byc-hero-title strong{
display:block!important;
color:#4d96ff!important;
font-weight:950!important;
text-shadow:0 0 35px rgba(60,130,255,.25)!important;
}
section.hero .hero-tagline{
font-size:11px!important;
line-height:1.7!important;
margin-bottom:20px!important;
max-width:520px!important;
}
section.hero .hero-games{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
gap:12px!important;
width:100%!important;
min-width:0!important;
}
section.hero .hero-game{
flex:1 1 0!important;
min-width:0!important;
min-height:150px!important;
padding:18px 8px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
border:1px solid rgba(92,137,224,.3)!important;
border-radius:14px!important;
background:linear-gradient(
145deg,
rgba(22,37,78,.92),
rgba(7,15,35,.96)
)!important;
box-shadow:0 15px 40px rgba(0,0,0,.28)!important;
transition:transform .25s ease,border-color .25s ease!important;
}
section.hero .hero-game:hover{
transform:translateY(-5px)!important;
border-color:rgba(85,145,255,.65)!important;
}
section.hero .game-logo{
width:62px!important;
height:62px!important;
min-width:62px!important;
margin-bottom:10px!important;
display:grid!important;
place-items:center!important;
border:1px solid rgba(92,139,224,.35)!important;
border-radius:14px!important;
background:rgba(8,18,43,.8)!important;
}
section.hero .efootball-logo{
color:#6fa8ff!important;
font-size:42px!important;
font-weight:950!important;
font-style:italic!important;
text-shadow:0 0 25px rgba(75,142,255,.7)!important;
}
section.hero .pubg-logo{
color:#f3cf55!important;
font-size:13px!important;
font-weight:950!important;
letter-spacing:1px!important;
}
section.hero .freefire-logo{
color:#ffc247!important;
font-size:10px!important;
line-height:1.1!important;
font-weight:950!important;
}
section.hero .freefire-logo b{
display:block!important;
color:#ff7043!important;
font-size:17px!important;
}
section.hero .hero-game strong{
display:block!important;
color:#fff!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.7px!important;
white-space:nowrap!important;
}
section.hero .hero-game>span{
display:block!important;
margin-top:3px!important;
color:#7f8da9!important;
font-size:7px!important;
letter-spacing:.5px!important;
white-space:nowrap!important;
}
/* TABLET */
@media(max-width:900px){
section.hero{
min-height:310px!important;
padding:25px 0!important;
}
section.hero .hero-inner{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:18px!important;
}
.byc-hero-title{
font-size:clamp(55px,8vw,80px)!important;
}
section.hero .hero-games{
gap:7px!important;
}
section.hero .hero-game{
min-height:125px!important;
padding:10px 4px!important;
}
section.hero .game-logo{
width:48px!important;
height:48px!important;
min-width:48px!important;
}
}
/* MOBILE */
@media(max-width:600px){
section.hero{
min-height:auto!important;
padding:30px 0 25px!important;
}
section.hero .hero-inner{
display:flex!important;
flex-direction:column!important;
min-height:auto!important;
gap:22px!important;
}
section.hero .hero-content{
width:100%!important;
text-align:center!important;
}
section.hero .hero-label{
justify-content:center!important;
}
.byc-hero-title{
margin:12px 0 14px!important;
font-size:clamp(58px,16vw,78px)!important;
letter-spacing:-4px!important;
}
section.hero .hero-divider{
margin-left:auto!important;
margin-right:auto!important;
}
section.hero .hero-tagline{
margin-left:auto!important;
margin-right:auto!important;
font-size:9px!important;
}
section.hero .hero-button{
margin-left:auto!important;
margin-right:auto!important;
}
section.hero .hero-games{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
gap:5px!important;
}
section.hero .hero-game{
flex:1 1 0!important;
min-width:0!important;
min-height:100px!important;
padding:8px 2px!important;
border-radius:10px!important;
}
section.hero .game-logo{
width:42px!important;
height:42px!important;
min-width:42px!important;
margin-bottom:6px!important;
border-radius:9px!important;
}
section.hero .efootball-logo{
font-size:28px!important;
}
section.hero .pubg-logo{
font-size:8px!important;
}
section.hero .freefire-logo{
font-size:7px!important;
}
section.hero .freefire-logo b{
font-size:12px!important;
}
section.hero .hero-game strong{
font-size:6.5px!important;
letter-spacing:.2px!important;
}
section.hero .hero-game>span{
display:none!important;
}
}
/* SMALL PHONES */
@media(max-width:380px){
section.hero{
padding:24px 0 20px!important;
}
.byc-hero-title{
font-size:52px!important;
}
section.hero .hero-games{
gap:4px!important;
}
section.hero .hero-game{
min-height:88px!important;
}
section.hero .game-logo{
width:36px!important;
height:36px!important;
min-width:36px!important;
}
section.hero .hero-game strong{
font-size:5.5px!important;
}
}
/* =========================================================
BYC ESPORTS — COLORFUL BRANDING
========================================================= */
section.hero .byc-hero-title{
position:relative!important;
margin:12px 0 20px!important;
font-size:clamp(64px,7vw,105px)!important;
line-height:.82!important;
letter-spacing:-5px!important;
font-weight:950!important;
text-transform:uppercase!important;
}
/* BYC — clean white */
section.hero .byc-hero-title span{
display:block!important;
color:#ffffff!important;
background:none!important;
-webkit-text-fill-color:#ffffff!important;
text-shadow:
0 0 12px rgba(255,255,255,.12),
0 0 35px rgba(45,126,255,.12)!important;
}
/* ESPORTS — blue → cyan → purple */
section.hero .byc-hero-title strong{
position:relative!important;
display:inline-block!important;
color:#20c7ff!important;
background:linear-gradient(
90deg,
#16bfff 0%,
#238cff 32%,
#6855ff 67%,
#c43cff 100%
)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
text-shadow:none!important;
filter:drop-shadow(0 0 18px rgba(39,137,255,.28))!important;
}
/* Colourful neon underline */
section.hero .byc-hero-title strong:after{
content:""!important;
position:absolute!important;
left:4%!important;
right:-3%!important;
bottom:-12px!important;
height:5px!important;
border-radius:999px!important;
background:linear-gradient(
90deg,
#00c8ff,
#247fff,
#754cff,
#d52cff
)!important;
box-shadow:
0 0 8px rgba(0,190,255,.7),
0 0 20px rgba(111,72,255,.45)!important;
transform:skewX(-22deg)!important;
}
/* Small blue glow behind BYC */
section.hero .hero-content:before{
content:""!important;
position:absolute!important;
width:170px!important;
height:170px!important;
left:-45px!important;
top:65px!important;
border-radius:50%!important;
background:radial-gradient(
circle,
rgba(20,130,255,.20) 0%,
rgba(20,130,255,.08) 35%,
transparent 72%
)!important;
filter:blur(15px)!important;
pointer-events:none!important;
z-index:-1!important;
}
/* More colourful CTA */
section.hero .hero-button{
background:linear-gradient(
110deg,
#08bfff 0%,
#287dff 45%,
#7148f5 100%
)!important;
border-color:rgba(80,190,255,.55)!important;
box-shadow:
0 8px 28px rgba(21,126,255,.30),
0 0 20px rgba(104,65,255,.12)!important;
}
section.hero .hero-button:hover{
box-shadow:
0 12px 35px rgba(21,126,255,.42),
0 0 28px rgba(120,65,255,.24)!important;
}
/* Game cards get subtle colourful glow */
section.hero .hero-game:nth-child(1){
box-shadow:
0 12px 35px rgba(0,120,255,.12),
inset 0 0 25px rgba(25,100,255,.035)!important;
}
section.hero .hero-game:nth-child(2){
box-shadow:
0 12px 35px rgba(255,190,40,.07),
inset 0 0 25px rgba(255,190,40,.025)!important;
}
section.hero .hero-game:nth-child(3){
box-shadow:
0 12px 35px rgba(255,90,40,.08),
inset 0 0 25px rgba(255,90,40,.025)!important;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
section.hero .byc-hero-title{
font-size:clamp(54px,8vw,82px)!important;
letter-spacing:-4px!important;
}
section.hero .byc-hero-title strong:after{
bottom:-9px!important;
height:4px!important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:600px){
section.hero .byc-hero-title{
margin:10px 0 18px!important;
font-size:clamp(55px,16vw,78px)!important;
line-height:.86!important;
letter-spacing:-3px!important;
}
section.hero .byc-hero-title strong:after{
left:3%!important;
right:-2%!important;
bottom:-8px!important;
height:3px!important;
}
section.hero .hero-content:before{
width:130px!important;
height:130px!important;
left:50%!important;
top:60px!important;
transform:translateX(-50%)!important;
}
}
/* =========================================================
SMALL PHONES
========================================================= */
@media(max-width:380px){
section.hero .byc-hero-title{
font-size:52px!important;
letter-spacing:-2.5px!important;
}
}
/* =========================================================
BYC ESPORTS — FINAL COLOR TREATMENT
========================================================= */
section.hero .byc-hero-title span{
color:#ffffff!important;
background:linear-gradient(
90deg,
#ffffff 0%,
#dcecff 45%,
#8fc5ff 100%
)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
text-shadow:
0 0 18px rgba(82,160,255,.18)!important;
}
section.hero .byc-hero-title strong{
color:#28bfff!important;
background:linear-gradient(
90deg,
#18c8ff 0%,
#358cff 42%,
#6c5cff 72%,
#a84cff 100%
)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
filter:drop-shadow(0 0 16px rgba(53,135,255,.28))!important;
}
section.hero .byc-hero-title strong:after{
background:linear-gradient(
90deg,
#19c8ff,
#388cff,
#7457ff,
#a94cff
)!important;
box-shadow:
0 0 7px rgba(24,190,255,.65),
0 0 16px rgba(112,82,255,.35)!important;
}
/* Mobile */
@media(max-width:600px){
section.hero .byc-hero-title span{
-webkit-text-fill-color:transparent!important;
}
section.hero .byc-hero-title strong{
-webkit-text-fill-color:transparent!important;
}
}
/* =========================================================
BYC ESPORTS — OVERRIDE ALL PREVIOUS HERO TEXT RULES
========================================================= */
section.hero h1.byc-hero-title span{
display:block!important;
color:#bfe4ff!important;
background:linear-gradient(90deg,#ffffff 0%,#b9ddff 55%,#66b6ff 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
text-shadow:0 0 22px rgba(55,155,255,.30)!important;
}
section.hero h1.byc-hero-title strong{
display:inline-block!important;
color:#19c9ff!important;
background:linear-gradient(
90deg,
#19c9ff 0%,
#268dff 35%,
#6658ff 68%,
#b542ff 100%
)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
filter:drop-shadow(0 0 18px rgba(61,126,255,.35))!important;
}
section.hero h1.byc-hero-title strong::after{
content:""!important;
display:block!important;
width:100%!important;
height:4px!important;
margin-top:9px!important;
border-radius:999px!important;
background:linear-gradient(
90deg,
#12cfff,
#258dff,
#7155ff,
#bd3cff
)!important;
box-shadow:
0 0 8px rgba(20,190,255,.65),
0 0 18px rgba(112,75,255,.45)!important;
}
@media(max-width:600px){
section.hero h1.byc-hero-title span,
section.hero h1.byc-hero-title strong{
-webkit-text-fill-color:transparent!important;
}
}
/* =========================================================
BYC ESPORTS — CLEAN COLOUR ACCENT
========================================================= */
section.hero h1.byc-hero-title span{
color:#ffffff!important;
background:none!important;
-webkit-background-clip:initial!important;
background-clip:initial!important;
-webkit-text-fill-color:#ffffff!important;
text-shadow:0 0 18px rgba(255,255,255,.10)!important;
}
section.hero h1.byc-hero-title strong{
color:#38a7ff!important;
background:none!important;
-webkit-background-clip:initial!important;
background-clip:initial!important;
-webkit-text-fill-color:#38a7ff!important;
text-shadow:
0 0 8px rgba(56,167,255,.45),
0 0 24px rgba(75,100,255,.25)!important;
filter:none!important;
}
section.hero h1.byc-hero-title strong::after{
content:""!important;
display:block!important;
width:72%!important;
height:4px!important;
margin-top:9px!important;
border-radius:999px!important;
background:linear-gradient(
90deg,
#19c8ff,
#367fff,
#7654ff
)!important;
box-shadow:
0 0 8px rgba(30,190,255,.65),
0 0 18px rgba(100,75,255,.35)!important;
}
@media(max-width:600px){
section.hero h1.byc-hero-title strong::after{
height:3px!important;
margin-top:7px!important;
}
}
/* =========================================================
BYC ESPORTS — PUBLIC TOURNAMENT PAGE
========================================================= */
.tournament-hero{
position:relative;
padding:78px 0 70px;
overflow:hidden;
background:
radial-gradient(circle at 78% 35%,rgba(53,168,255,.16),transparent 30%),
radial-gradient(circle at 18% 80%,rgba(99,75,220,.12),transparent 32%),
linear-gradient(135deg,#050817 0%,#08122b 52%,#070a1c 100%);
border-bottom:1px solid rgba(90,135,230,.16);
}
.tournament-hero:before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(91,123,210,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(91,123,210,.035) 1px,transparent 1px);
background-size:55px 55px;
pointer-events:none;
}
.tournament-hero .container{
position:relative;
z-index:2;
}
.back-link{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:28px;
color:#8fa1c5;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
transition:.25s;
}
.back-link:hover{
color:#fff;
transform:translateX(-3px);
}
.tournament-hero h1{
max-width:900px;
margin:0 0 14px;
color:#fff;
font-size:clamp(38px,6vw,72px);
line-height:.98;
font-weight:950;
letter-spacing:-2.5px;
text-transform:uppercase;
}
.tournament-hero #tournamentDescription{
max-width:680px;
margin-bottom:24px;
color:#9aa8c5;
font-size:14px;
line-height:1.8;
}
.tournament-status{
display:inline-flex;
align-items:center;
width:max-content;
margin-bottom:18px;
padding:7px 12px;
border:1px solid rgba(53,168,255,.35);
border-radius:999px;
background:rgba(53,168,255,.09);
color:#55b5ff;
font-size:10px;
font-weight:900;
letter-spacing:1.4px;
text-transform:uppercase;
box-shadow:0 0 22px rgba(53,168,255,.08);
}
.tournament-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
color:#c1cce1;
font-size:11px;
font-weight:800;
}
.tournament-meta > *{
padding:9px 13px;
border:1px solid rgba(105,126,190,.18);
border-radius:8px;
background:rgba(9,17,39,.7);
}
.tournament-navigation{
position:sticky;
top:78px;
z-index:900;
border-bottom:1px solid rgba(105,126,190,.15);
background:rgba(5,8,23,.94);
backdrop-filter:blur(18px);
}
.public-tabs{
display:flex;
align-items:center;
gap:4px;
overflow-x:auto;
scrollbar-width:none;
}
.public-tabs::-webkit-scrollbar{
display:none;
}
.public-tab{
position:relative;
flex:0 0 auto;
padding:18px 18px;
border:0;
background:transparent;
color:#7786a5;
font-family:inherit;
font-size:10px;
font-weight:900;
letter-spacing:1.2px;
text-transform:uppercase;
cursor:pointer;
transition:.25s;
}
.public-tab:hover{
color:#dce6fa;
}
.public-tab.active{
color:#fff;
}
.public-tab.active:after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:0;
height:3px;
border-radius:999px 999px 0 0;
background:linear-gradient(90deg,#35a8ff,#6758f5);
box-shadow:0 0 16px rgba(53,168,255,.5);
}
.tournament-content{
min-height:620px;
padding:70px 0 100px;
background:
radial-gradient(circle at 50% 0%,rgba(55,91,180,.08),transparent 35%),
#050817;
}
.public-section{
display:none;
animation:tournamentSectionIn .35s ease both;
}
.public-section.active{
display:block;
}
.public-content{
width:100%;
min-height:120px;
}
.section-heading{
margin-bottom:28px;
}
.section-heading h2{
color:#fff;
}
.section-heading p{
color:#8492af;
}
.public-content table{
width:100%;
border-collapse:collapse;
overflow:hidden;
border:1px solid rgba(105,126,190,.16);
border-radius:12px;
background:rgba(10,17,38,.72);
}
.public-content th{
padding:14px 16px;
border-bottom:1px solid rgba(105,126,190,.18);
background:rgba(24,37,75,.55);
color:#8fa8d5;
font-size:9px;
font-weight:900;
letter-spacing:1px;
text-align:left;
text-transform:uppercase;
}
.public-content td{
padding:14px 16px;
border-bottom:1px solid rgba(105,126,190,.09);
color:#c5d0e5;
font-size:11px;
}
.public-content tr:last-child td{
border-bottom:0;
}
.public-content tr:hover td{
background:rgba(53,168,255,.035);
}
.public-content > div,
.public-content > article{
border-color:rgba(105,126,190,.16)!important;
}
.loading{
border:1px dashed rgba(105,126,190,.25);
background:rgba(9,16,35,.5);
color:#71809e;
}
@keyframes tournamentSectionIn{
from{
opacity:0;
transform:translateY(8px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@media(max-width:720px){
.tournament-hero{
padding:55px 0 48px;
}
.tournament-hero h1{
font-size:clamp(34px,11vw,52px);
letter-spacing:-1.5px;
}
.tournament-hero #tournamentDescription{
font-size:12px;
}
.tournament-navigation{
top:68px;
}
.public-tab{
padding:15px 13px;
font-size:9px;
}
.public-tab.active:after{
left:9px;
right:9px;
}
.tournament-content{
padding:50px 0 75px;
}
.public-content{
overflow-x:auto;
}
.public-content table{
min-width:620px;
}
}
/* =========================================================
BYC ESPORTS — TOURNAMENT OVERVIEW
========================================================= */
.overview-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
margin-bottom:24px;
}
.overview-card{
position:relative;
min-height:145px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:24px;
overflow:hidden;
border:1px solid rgba(105,126,190,.18);
border-radius:14px;
background:
radial-gradient(circle at 100% 0%,rgba(53,168,255,.10),transparent 42%),
linear-gradient(145deg,rgba(17,29,62,.94),rgba(8,14,31,.96));
box-shadow:0 18px 45px rgba(0,0,0,.22);
transition:.3s ease;
}
.overview-card:before{
content:"";
position:absolute;
left:0;
top:0;
width:3px;
height:100%;
background:linear-gradient(180deg,#35a8ff,#6358ee);
opacity:.8;
}
.overview-card:hover{
transform:translateY(-4px);
border-color:rgba(53,168,255,.38);
box-shadow:0 22px 50px rgba(0,0,0,.34);
}
.overview-card small{
color:#8295bc;
font-size:9px;
font-weight:900;
letter-spacing:1.5px;
text-transform:uppercase;
}
.overview-card strong{
color:#fff;
font-size:42px;
line-height:1;
font-weight:950;
letter-spacing:-1px;
text-shadow:0 0 22px rgba(53,168,255,.16);
}
.overview-description{
padding:28px 30px;
border:1px solid rgba(105,126,190,.16);
border-radius:14px;
background:linear-gradient(145deg,rgba(14,23,49,.9),rgba(7,13,29,.95));
box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.overview-description h3{
margin-bottom:10px;
color:#fff;
font-size:18px;
font-weight:900;
letter-spacing:-.3px;
}
.overview-description p{
max-width:850px;
color:#8f9db9;
font-size:12px;
line-height:1.9;
}
@media(max-width:900px){
.overview-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:520px){
.overview-grid{
grid-template-columns:1fr;
}
.overview-card{
min-height:125px;
}
.overview-card strong{
font-size:36px;
}
.overview-description{
padding:22px;
}
}
/* =========================================================
BYC ESPORTS — GROUPS
========================================================= */
.public-group-card{
position:relative;
margin-bottom:20px;
overflow:hidden;
border:1px solid rgba(105,126,190,.17);
border-radius:14px;
background:
radial-gradient(circle at 100% 0%,rgba(53,168,255,.08),transparent 35%),
linear-gradient(145deg,rgba(14,24,51,.94),rgba(7,13,29,.97));
box-shadow:0 18px 45px rgba(0,0,0,.2);
}
.group-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 22px;
border-bottom:1px solid rgba(105,126,190,.14);
background:rgba(20,34,70,.45);
}
.group-header h3{
margin:0;
color:#fff;
font-size:16px;
font-weight:950;
letter-spacing:.5px;
text-transform:uppercase;
}
.group-player-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.group-player{
display:flex;
align-items:center;
gap:14px;
min-height:58px;
padding:12px 20px;
border-bottom:1px solid rgba(105,126,190,.08);
transition:.2s;
}
.group-player:nth-child(odd){
border-right:1px solid rgba(105,126,190,.08);
}
.group-player:hover{
background:rgba(53,168,255,.045);
}
.group-player > span{
width:28px;
height:28px;
flex:0 0 28px;
display:grid;
place-items:center;
border:1px solid rgba(105,126,190,.2);
border-radius:7px;
background:rgba(6,12,27,.7);
color:#7f91b5;
font-size:10px;
font-weight:900;
}
.group-player strong{
min-width:0;
overflow:hidden;
color:#dce5f7;
font-size:12px;
font-weight:800;
text-overflow:ellipsis;
white-space:nowrap;
}
/* =========================================================
BYC ESPORTS — STANDINGS
========================================================= */
.public-standing-group{
margin-bottom:26px;
overflow:hidden;
border:1px solid rgba(105,126,190,.17);
border-radius:14px;
background:linear-gradient(145deg,rgba(14,24,51,.94),rgba(7,13,29,.97));
box-shadow:0 18px 45px rgba(0,0,0,.2);
}
.public-standing-group > h3{
margin:0;
padding:18px 22px;
border-bottom:1px solid rgba(105,126,190,.14);
background:rgba(20,34,70,.45);
color:#fff;
font-size:16px;
font-weight:950;
letter-spacing:.5px;
text-transform:uppercase;
}
.public-table-wrapper{
width:100%;
overflow-x:auto;
}
.public-table{
width:100%;
min-width:650px;
border:0!important;
border-radius:0!important;
background:transparent!important;
}
.public-table th{
padding:13px 15px!important;
border-bottom:1px solid rgba(105,126,190,.16)!important;
background:rgba(6,12,27,.55)!important;
color:#8196be!important;
font-size:9px!important;
font-weight:900!important;
letter-spacing:1.2px;
text-transform:uppercase;
}
.public-table td{
padding:14px 15px!important;
border-bottom:1px solid rgba(105,126,190,.08)!important;
color:#bdc9df!important;
font-size:11px!important;
font-weight:700;
}
.public-table tbody tr:hover td{
background:rgba(53,168,255,.045)!important;
}
.public-table td:first-child{
width:48px;
color:#6f82a7!important;
font-weight:900;
}
.public-table td:nth-child(2){
color:#e7edf9!important;
font-weight:850;
}
.public-table td:last-child{
color:#fff!important;
font-size:13px!important;
font-weight:950!important;
}
@media(max-width:700px){
.group-player-list{
grid-template-columns:1fr;
}
.group-player:nth-child(odd){
border-right:0;
}
.group-player{
min-height:54px;
}
}
/* =========================================================
BYC ESPORTS — FIXTURES
========================================================= */
/* ==========================================
PUBLIC FIXTURES — COMPACT TABLE
========================================== */
.public-fixture-section-title{
margin: 0 0 18px;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255,255,255,.62);
}
.public-fixture-stage{
margin: 0 0 24px;
border: 1px solid rgba(53,168,255,.18);
border-radius: 14px;
background:
linear-gradient(
135deg,
rgba(17,38,63,.55),
rgba(5,15,29,.72)
);
overflow: hidden;
}
.public-fixture-stage-header{
min-height: 72px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: rgba(14,31,51,.72);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.public-fixture-stage-title{
display: flex;
align-items: center;
gap: 14px;
}
.public-fixture-stage-accent{
width: 5px;
height: 38px;
flex: 0 0 5px;
border-radius: 5px;
background: #35a8ff;
box-shadow: 0 0 14px rgba(53,168,255,.45);
}
.public-fixture-stage-header h3{
margin: 0;
font-size: 18px;
line-height: 1.2;
font-weight: 800;
color: #fff;
}
.public-fixture-stage-subtitle{
display: block;
margin-top: 5px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.6px;
color: rgba(255,255,255,.48);
}
.public-fixture-stage-badge{
padding: 8px 13px;
border: 1px solid rgba(53,168,255,.28);
border-radius: 999px;
background: rgba(53,168,255,.08);
color: #8dceff;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
white-space: nowrap;
}
.public-fixture-table-wrap{
width: 100%;
overflow-x: auto;
}
.public-fixture-table{
width: 100%;
min-width: 850px;
border-collapse: collapse;
table-layout: fixed;
}
.public-fixture-table th{
padding: 12px 14px;
text-align: left;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
color: rgba(141,206,255,.78);
background: rgba(5,15,28,.55);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.public-fixture-table td{
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,.055);
font-size: 13px;
}
.public-fixture-table tbody tr:last-child td{
border-bottom: 0;
}
.public-fixture-row{
transition: background .18s ease;
}
.public-fixture-row:hover{
background: rgba(53,168,255,.045);
}
.public-fixture-match-number{
width: 6%;
color: rgba(255,255,255,.58);
font-size: 12px!important;
}
.public-fixture-home,
.public-fixture-away{
width: 20%;
color: #f4f7fb;
font-weight: 700;
}
.public-fixture-score-cell{
width: 13%;
text-align: center!important;
}
.public-fixture-score{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
padding: 6px 10px;
border: 1px solid rgba(53,168,255,.30);
border-radius: 7px;
background: rgba(3,15,31,.72);
color: #fff;
font-size: 13px;
font-weight: 800;
letter-spacing: .5px;
}
.public-fixture-status-cell{
width: 17%;
}
.public-fixture-status{
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
border: 1px solid rgba(53,168,255,.25);
border-radius: 7px;
background: rgba(53,168,255,.08);
color: #8dceff;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
}
.public-fixture-status-dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: #35a8ff;
box-shadow: 0 0 7px rgba(53,168,255,.7);
}
.public-fixture-scheduled{
width: 15%;
color: rgba(255,255,255,.62);
white-space: nowrap;
}
.public-fixture-action{
width: 9%;
text-align: right!important;
}
.public-fixture-view{
color: #35a8ff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.public-fixture-view span{
margin-left: 3px;
font-size: 17px;
vertical-align: -1px;
}
@media (max-width: 768px){
.public-fixture-stage{
border-radius: 11px;
margin-bottom: 18px;
}
.public-fixture-stage-header{
padding: 12px 14px;
}
.public-fixture-stage-header h3{
font-size: 16px;
}
.public-fixture-stage-badge{
display: none;
}
.public-fixture-table{
min-width: 780px;
}
.public-fixture-table th,
.public-fixture-table td{
padding: 10px 11px;
}
}
.fixture-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.fixture-card{
position:relative;
display:grid;
grid-template-columns:1fr auto 1fr;
grid-template-rows:auto 1fr auto;
align-items:center;
gap:12px 18px;
min-height:150px;
padding:22px;
overflow:hidden;
border:1px solid rgba(105,126,190,.17);
border-radius:14px;
background:
radial-gradient(circle at 50% 100%,rgba(53,168,255,.07),transparent 45%),
linear-gradient(145deg,rgba(14,24,51,.94),rgba(7,13,29,.97));
box-shadow:0 18px 45px rgba(0,0,0,.2);
transition:.3s ease;
}
.fixture-card:hover{
transform:translateY(-4px);
border-color:rgba(53,168,255,.35);
box-shadow:0 22px 50px rgba(0,0,0,.32);
}
.fixture-number{
grid-column:1/-1;
color:#7186ae;
font-size:9px;
font-weight:900;
letter-spacing:1.4px;
text-transform:uppercase;
}
.fixture-team{
min-width:0;
color:#e5ecf9;
font-size:13px;
font-weight:850;
line-height:1.4;
overflow-wrap:anywhere;
}
.fixture-team:first-of-type{
text-align:right;
}
.fixture-team:last-of-type{
text-align:left;
}
.fixture-score{
min-width:78px;
padding:11px 13px;
border:1px solid rgba(83,137,238,.25);
border-radius:9px;
background:rgba(5,12,29,.8);
color:#fff;
font-size:22px;
font-weight:950;
line-height:1;
text-align:center;
box-shadow:0 0 20px rgba(53,168,255,.07);
}
.fixture-score span{
margin:0 4px;
color:#667999;
font-size:14px;
}
.fixture-status{
grid-column:1/-1;
justify-self:center;
padding:5px 10px;
border:1px solid rgba(105,126,190,.18);
border-radius:999px;
background:rgba(8,15,32,.7);
color:#7f91b3;
font-size:8px;
font-weight:900;
letter-spacing:1.2px;
text-transform:uppercase;
}
@media(max-width:850px){
.fixture-list{
grid-template-columns:1fr;
}
}
@media(max-width:520px){
.fixture-card{
grid-template-columns:1fr;
gap:10px;
text-align:center;
}
.fixture-team:first-of-type,
.fixture-team:last-of-type{
text-align:center;
}
.fixture-score{
justify-self:center;
grid-column:1;
grid-row:auto;
}
.fixture-number,
.fixture-status{
grid-column:1;
}
}
/* =========================================================
BYC ESPORTS — QUALIFIED PLAYERS
========================================================= */
.public-qualified-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.qualified-card{
position:relative;
display:flex;
align-items:center;
gap:16px;
min-height:82px;
padding:16px 18px;
overflow:hidden;
border:1px solid rgba(105,126,190,.17);
border-radius:14px;
background:
radial-gradient(circle at 100% 50%,rgba(53,168,255,.08),transparent 45%),
linear-gradient(145deg,rgba(14,24,51,.94),rgba(7,13,29,.97));
box-shadow:0 18px 45px rgba(0,0,0,.18);
transition:.25s ease;
}
.qualified-card:hover{
transform:translateY(-3px);
border-color:rgba(53,168,255,.32);
box-shadow:0 22px 45px rgba(0,0,0,.28);
}
.qualified-rank{
width:42px;
height:42px;
flex:0 0 42px;
display:grid;
place-items:center;
border:1px solid rgba(53,168,255,.28);
border-radius:10px;
background:rgba(5,13,30,.82);
color:#35a8ff;
font-size:14px;
font-weight:950;
box-shadow:0 0 20px rgba(53,168,255,.07);
}
.qualified-card > div{
min-width:0;
}
.qualified-card strong{
display:block;
overflow:hidden;
color:#edf3ff;
font-size:13px;
font-weight:900;
line-height:1.35;
text-overflow:ellipsis;
white-space:nowrap;
}
.qualified-card small{
display:block;
margin-top:5px;
color:#7185aa;
font-size:9px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
@media(max-width:750px){
.public-qualified-list{
grid-template-columns:1fr;
}
}
/* ==========================================
PROFESSIONAL KNOCKOUT BRACKET
========================================== */
.knockout-bracket {
display: flex;
align-items: stretch;
gap: 28px;
width: max-content;
min-width: 100%;
padding: 20px 10px 40px;
overflow-x: auto;
}
.knockout-bracket-round {
flex: 0 0 250px;
display: flex;
flex-direction: column;
min-width: 250px;
}
.knockout-bracket-round-title {
margin-bottom: 18px;
padding: 10px 14px;
border-left: 3px solid #35a8ff;
border-radius: 6px;
background: rgba(53,168,255,.08);
color: #fff;
font-size: 13px;
font-weight: 900;
letter-spacing: .8px;
text-transform: uppercase;
}
.knockout-bracket-round-matches {
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
gap: 24px;
}
.bracket-match {
position: relative;
padding: 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
background: linear-gradient(145deg, #0d1a2b, #08111d);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.bracket-match:hover {
border-color: rgba(53,168,255,.35);
}
.bracket-match-number {
margin-bottom: 8px;
color: #637b91;
font-size: 9px;
font-weight: 800;
letter-spacing: .8px;
text-transform: uppercase;
}
.bracket-team {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 34px;
padding: 7px 9px;
border-radius: 6px;
background: rgba(255,255,255,.025);
color: #aebed0;
font-size: 12px;
font-weight: 700;
}
.bracket-team + .bracket-team {
margin-top: 3px;
}
.bracket-team span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bracket-team strong {
flex: 0 0 auto;
color: #fff;
font-size: 14px;
}
.bracket-team.winner {
background: rgba(53,168,255,.10);
color: #fff;
border-left: 2px solid #35a8ff;
}
.bracket-team.winner strong {
color: #35a8ff;
}
.bracket-match-status {
margin-top: 8px;
color: #71869a;
font-size: 9px;
font-weight: 900;
letter-spacing: .8px;
text-align: right;
}
.bracket-pens {
display: block;
margin-top: 6px;
color: #35a8ff;
font-size: 9px;
font-weight: 800;
text-align: right;
}
.bracket-bye {
border-color: rgba(53,168,255,.25);
}
.bracket-bye .bracket-team strong {
color: #35a8ff;
font-size: 10px;
}
.public-champion {
margin-top: 30px;
}
/* Bracket connectors */
.knockout-bracket-round:not(:last-child) .bracket-match::after {
content: "";
position: absolute;
top: 50%;
right: -29px;
width: 28px;
height: 1px;
background: rgba(53,168,255,.35);
}
.knockout-bracket-round:not(:first-child) .bracket-match::before {
content: "";
position: absolute;
top: 50%;
left: -29px;
width: 28px;
height: 1px;
background: rgba(53,168,255,.35);
}
/* Round spacing creates the bracket progression */
.knockout-bracket-round:nth-child(2)
.knockout-bracket-round-matches {
padding-top: 55px;
padding-bottom: 55px;
}
.knockout-bracket-round:nth-child(3)
.knockout-bracket-round-matches {
padding-top: 125px;
padding-bottom: 125px;
}
.knockout-bracket-round:nth-child(4)
.knockout-bracket-round-matches {
padding-top: 265px;
padding-bottom: 265px;
}
.knockout-bracket-round:nth-child(5)
.knockout-bracket-round-matches {
padding-top: 560px;
padding-bottom: 560px;
}
@media (max-width: 900px) {
.knockout-bracket {
gap: 20px;
}
.knockout-bracket-round {
flex-basis: 220px;
min-width: 220px;
}
}
@media (max-width: 600px) {
.knockout-bracket {
padding-left: 0;
padding-right: 0;
}
.knockout-bracket-round {
flex-basis: 205px;
min-width: 205px;
}
.knockout-bracket-round-title {
font-size: 11px;
}
.bracket-team {
font-size: 11px;
}
}
/* ==========================================
KNOCKOUT BRACKET - REFINED LAYOUT
========================================== */
.knockout-bracket {
display: flex;
align-items: flex-start;
gap: 42px;
width: max-content;
min-width: 100%;
padding: 10px 20px 50px;
overflow-x: auto;
overflow-y: hidden;
}
.knockout-bracket-round {
flex: 0 0 270px;
min-width: 270px;
display: flex;
flex-direction: column;
}
.knockout-bracket-round-title {
height: 42px;
display: flex;
align-items: center;
margin-bottom: 18px;
padding: 0 14px;
border-left: 3px solid #35a8ff;
border-radius: 6px;
background: rgba(53,168,255,.08);
color: #fff;
font-size: 12px;
font-weight: 900;
letter-spacing: .9px;
text-transform: uppercase;
}
.knockout-bracket-round-matches {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Remove the previous oversized vertical spacing */
.knockout-bracket-round:nth-child(2)
.knockout-bracket-round-matches,
.knockout-bracket-round:nth-child(3)
.knockout-bracket-round-matches,
.knockout-bracket-round:nth-child(4)
.knockout-bracket-round-matches,
.knockout-bracket-round:nth-child(5)
.knockout-bracket-round-matches {
padding-top: 0;
padding-bottom: 0;
}
/* Progressive spacing */
.knockout-bracket-round:nth-child(2)
.knockout-bracket-round-matches {
padding-top: 58px;
}
.knockout-bracket-round:nth-child(3)
.knockout-bracket-round-matches {
padding-top: 155px;
}
.knockout-bracket-round:nth-child(4)
.knockout-bracket-round-matches {
padding-top: 350px;
}
.knockout-bracket-round:nth-child(5)
.knockout-bracket-round-matches {
padding-top: 740px;
}
.bracket-match {
width: 270px;
box-sizing: border-box;
}
/* Keep the bracket horizontally scrollable instead of
pushing the whole website outside the viewport */
.tournament-content {
overflow-x: hidden;
}
@media (max-width: 900px) {
.knockout-bracket {
gap: 28px;
padding-left: 10px;
padding-right: 10px;
}
.knockout-bracket-round {
flex-basis: 240px;
min-width: 240px;
}
.bracket-match {
width: 240px;
}
}
@media (max-width: 600px) {
.knockout-bracket {
gap: 20px;
}
.knockout-bracket-round {
flex-basis: 215px;
min-width: 215px;
}
.bracket-match {
width: 215px;
}
}
/* ==========================================
KNOCKOUT BRACKET — CLEAN PROFESSIONAL LAYOUT
========================================== */
.knockout-bracket {
display: flex;
align-items: flex-start;
gap: 34px;
width: max-content;
min-width: 100%;
padding: 20px 10px 60px;
overflow-x: auto;
overflow-y: hidden;
}
.knockout-bracket-round {
flex: 0 0 260px;
width: 260px;
min-width: 260px;
display: flex;
flex-direction: column;
}
.knockout-bracket-round-title {
height: 38px;
display: flex;
align-items: center;
margin-bottom: 18px;
padding: 0 12px;
border-left: 3px solid #35a8ff;
border-radius: 6px;
background: rgba(53,168,255,.08);
color: #ffffff;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.knockout-bracket-round-matches {
display: flex;
flex-direction: column;
gap: 18px;
}
/* ==========================================
MATCH CARD
========================================== */
.bracket-match {
position: relative;
width: 260px;
min-height: 116px;
box-sizing: border-box;
padding: 10px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
background: linear-gradient(
145deg,
#0d1b2d,
#08121f
);
box-shadow: 0 8px 24px rgba(0,0,0,.20);
}
.bracket-match-number {
margin-bottom: 7px;
color: #667f96;
font-size: 8px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.bracket-team {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 31px;
padding: 6px 8px;
border-radius: 5px;
background: rgba(255,255,255,.035);
color: #aebed0;
font-size: 11px;
font-weight: 700;
}
.bracket-team + .bracket-team {
margin-top: 3px;
}
.bracket-team span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bracket-team strong {
flex: 0 0 auto;
min-width: 15px;
color: #ffffff;
font-size: 13px;
text-align: right;
}
.bracket-team.winner {
background: rgba(53,168,255,.12);
color: #ffffff;
border-left: 2px solid #35a8ff;
}
.bracket-team.winner strong {
color: #35a8ff;
}
.bracket-match-status {
margin-top: 7px;
color: #647b91;
font-size: 8px;
font-weight: 900;
letter-spacing: .8px;
text-align: right;
}
.bracket-pens {
display: block;
margin-top: 4px;
color: #35a8ff;
font-size: 8px;
font-weight: 900;
text-align: right;
}
/* ==========================================
BYE
========================================== */
.bracket-bye {
border-color: rgba(53,168,255,.22);
}
.bracket-bye .bracket-team {
min-height: 45px;
}
.bracket-bye .bracket-team strong {
color: #35a8ff;
font-size: 9px;
}
/* ==========================================
ROUND POSITIONING
32 → 16 → 8 → 4 → 2 → 1
========================================== */
.knockout-bracket-round:nth-child(1)
.knockout-bracket-round-matches {
gap: 18px;
}
.knockout-bracket-round:nth-child(2)
.knockout-bracket-round-matches {
padding-top: 67px;
gap: 156px;
}
.knockout-bracket-round:nth-child(3)
.knockout-bracket-round-matches {
padding-top: 205px;
gap: 432px;
}
.knockout-bracket-round:nth-child(4)
.knockout-bracket-round-matches {
padding-top: 481px;
gap: 984px;
}
.knockout-bracket-round:nth-child(5)
.knockout-bracket-round-matches {
padding-top: 1033px;
}
/* ==========================================
CONNECTOR LINES
========================================== */
.knockout-bracket-round:not(:last-child)
.bracket-match::after {
content: "";
position: absolute;
top: 50%;
right: -35px;
width: 34px;
height: 1px;
background: rgba(53,168,255,.35);
}
.knockout-bracket-round:not(:first-child)
.bracket-match::before {
content: "";
position: absolute;
top: 50%;
left: -35px;
width: 34px;
height: 1px;
background: rgba(53,168,255,.35);
}
/* ==========================================
KEEP PAGE INSIDE VIEWPORT
========================================== */
.tournament-content {
overflow-x: hidden;
}
@media (max-width: 900px) {
.knockout-bracket {
gap: 25px;
}
.knockout-bracket-round,
.bracket-match {
width: 230px;
min-width: 230px;
}
}
@media (max-width: 600px) {
.knockout-bracket {
gap: 20px;
padding-left: 5px;
padding-right: 5px;
}
.knockout-bracket-round,
.bracket-match {
width: 210px;
min-width: 210px;
}
.bracket-team {
font-size: 10px;
}
}
/* ==========================================
FINAL KNOCKOUT BRACKET GEOMETRY
========================================== */
.knockout-bracket {
display: flex;
align-items: flex-start;
gap: 34px;
width: max-content;
min-width: 100%;
padding: 20px 10px 60px;
overflow-x: auto;
overflow-y: hidden;
}
/* Every round has the same card width */
.knockout-bracket-round {
flex: 0 0 250px;
width: 250px;
min-width: 250px;
}
.knockout-bracket-round-title {
height: 38px;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: 18px;
padding: 0 12px;
border-left: 3px solid #35a8ff;
border-radius: 6px;
background: rgba(53,168,255,.08);
color: #fff;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.knockout-bracket-round-matches {
display: flex;
flex-direction: column;
gap: 18px;
}
/* ==========================================
MATCH BOX
========================================== */
.bracket-match {
position: relative;
width: 250px;
min-height: 112px;
box-sizing: border-box;
padding: 9px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
background: linear-gradient(145deg,#0d1b2d,#08121f);
box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.bracket-match-number {
margin-bottom: 7px;
color: #607991;
font-size: 8px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.bracket-team {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 30px;
padding: 6px 8px;
border-radius: 5px;
background: rgba(255,255,255,.035);
color: #aebed0;
font-size: 10px;
font-weight: 800;
}
.bracket-team + .bracket-team {
margin-top: 3px;
}
.bracket-team span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bracket-team strong {
flex: 0 0 auto;
color: #fff;
font-size: 13px;
}
.bracket-team.winner {
background: rgba(53,168,255,.12);
border-left: 2px solid #35a8ff;
color: #fff;
}
.bracket-team.winner strong {
color: #35a8ff;
}
.bracket-match-status {
margin-top: 7px;
color: #61788e;
font-size: 8px;
font-weight: 900;
letter-spacing: .8px;
text-align: right;
}
.bracket-pens {
display: block;
margin-top: 4px;
color: #35a8ff;
font-size: 8px;
font-weight: 900;
text-align: right;
}
/* ==========================================
ROUND SPACING
Each round is centered between
the matches from the previous round.
========================================== */
.knockout-bracket-round:nth-child(1)
.knockout-bracket-round-matches {
gap: 18px;
}
.knockout-bracket-round:nth-child(2)
.knockout-bracket-round-matches {
padding-top: 65px;
gap: 148px;
}
.knockout-bracket-round:nth-child(3)
.knockout-bracket-round-matches {
padding-top: 199px;
gap: 408px;
}
.knockout-bracket-round:nth-child(4)
.knockout-bracket-round-matches {
padding-top: 467px;
gap: 928px;
}
.knockout-bracket-round:nth-child(5)
.knockout-bracket-round-matches {
padding-top: 1003px;
}
/* ==========================================
CLEAN CONNECTORS
========================================== */
.knockout-bracket-round:not(:last-child)
.bracket-match::after {
content: "";
position: absolute;
top: 50%;
right: -35px;
width: 34px;
height: 1px;
background: rgba(53,168,255,.32);
}
.knockout-bracket-round:not(:first-child)
.bracket-match::before {
content: "";
position: absolute;
top: 50%;
left: -35px;
width: 34px;
height: 1px;
background: rgba(53,168,255,.32);
}
/* ==========================================
BYE
========================================== */
.bracket-bye {
border-color: rgba(53,168,255,.22);
}
.bracket-bye .bracket-team strong {
color: #35a8ff;
font-size: 9px;
}
/* ==========================================
CHAMPION
========================================== */
.public-champion {
margin-top: 30px;
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 900px) {
.knockout-bracket {
gap: 25px;
}
.knockout-bracket-round,
.bracket-match {
width: 225px;
min-width: 225px;
}
}
@media (max-width: 600px) {
.knockout-bracket {
gap: 18px;
padding-left: 5px;
padding-right: 5px;
}
.knockout-bracket-round,
.bracket-match {
width: 210px;
min-width: 210px;
}
.bracket-team {
font-size: 9px;
}
}
/* =========================================================
BYC ESPORTS — COMPACT PROFESSIONAL KNOCKOUT BRACKET
========================================================= */
.knockout-bracket {
display: flex;
align-items: flex-start;
gap: 26px;
width: max-content;
min-width: 100%;
padding: 18px 8px 50px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
/* ---------------------------------------------------------
ROUND COLUMN
--------------------------------------------------------- */
.knockout-bracket-round {
position: relative;
flex: 0 0 220px;
width: 220px;
min-width: 220px;
}
.knockout-bracket-round-title {
height: 42px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
padding: 0 10px;
border: 1px solid rgba(53,168,255,.22);
border-left: 3px solid #35a8ff;
border-radius: 7px;
background:
linear-gradient(
135deg,
rgba(53,168,255,.12),
rgba(53,168,255,.035)
);
color: #ffffff;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
}
/* ---------------------------------------------------------
MATCH LIST
--------------------------------------------------------- */
.knockout-bracket-round-matches {
display: flex;
flex-direction: column;
justify-content: space-around;
min-height: 1120px;
}
/* ---------------------------------------------------------
MATCH CARD
--------------------------------------------------------- */
.bracket-match {
position: relative;
width: 220px;
min-height: 78px;
box-sizing: border-box;
padding: 7px;
border: 1px solid rgba(255,255,255,.075);
border-radius: 8px;
background:
linear-gradient(
145deg,
#0d1b2c,
#08121f
);
box-shadow:
0 5px 16px rgba(0,0,0,.18);
transition:
border-color .2s ease,
transform .2s ease;
}
.bracket-match:hover {
border-color: rgba(53,168,255,.35);
transform: translateY(-1px);
}
/* ---------------------------------------------------------
MATCH NUMBER
--------------------------------------------------------- */
.bracket-match-number {
margin: 0 0 5px 2px;
color: #607991;
font-size: 7px;
font-weight: 900;
letter-spacing: .9px;
text-transform: uppercase;
}
/* ---------------------------------------------------------
PLAYER ROW
--------------------------------------------------------- */
.bracket-team {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
min-height: 25px;
padding: 5px 7px;
border-radius: 4px;
background: rgba(255,255,255,.035);
color: #aebed0;
font-size: 9px;
font-weight: 800;
line-height: 1;
}
.bracket-team + .bracket-team {
margin-top: 2px;
}
.bracket-team span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bracket-team strong {
flex: 0 0 auto;
min-width: 12px;
color: #ffffff;
font-size: 11px;
text-align: right;
}
/* ---------------------------------------------------------
WINNER
--------------------------------------------------------- */
.bracket-team.winner {
border-left: 2px solid #35a8ff;
background:
linear-gradient(
90deg,
rgba(53,168,255,.16),
rgba(53,168,255,.055)
);
color: #ffffff;
}
.bracket-team.winner strong {
color: #35a8ff;
}
/* ---------------------------------------------------------
STATUS
--------------------------------------------------------- */
.bracket-match-status {
margin-top: 5px;
color: #5f758b;
font-size: 7px;
font-weight: 900;
letter-spacing: .7px;
text-align: right;
}
.bracket-pens {
display: block;
margin-top: 3px;
color: #35a8ff;
font-size: 7px;
font-weight: 900;
text-align: right;
}
/* ---------------------------------------------------------
BYE
--------------------------------------------------------- */
.bracket-bye {
border-color: rgba(53,168,255,.18);
}
.bracket-bye .bracket-team {
min-height: 35px;
}
.bracket-bye .bracket-team strong {
color: #35a8ff;
font-size: 8px;
}
/* =========================================================
BRACKET CONNECTORS
========================================================= */
.knockout-bracket-round:not(:last-child)
.bracket-match::after {
content: "";
position: absolute;
top: 50%;
right: -27px;
width: 26px;
height: 1px;
background: rgba(53,168,255,.42);
}
.knockout-bracket-round:not(:first-child)
.bracket-match::before {
content: "";
position: absolute;
top: 50%;
left: -27px;
width: 26px;
height: 1px;
background: rgba(53,168,255,.42);
}
/* =========================================================
ROUND PROGRESSION
========================================================= */
/* Round of 32 */
.knockout-bracket-round:nth-child(1)
.knockout-bracket-round-matches {
min-height: 1120px;
}
/* Round of 16 */
.knockout-bracket-round:nth-child(2)
.knockout-bracket-round-matches {
min-height: 1120px;
padding-top: 38px;
padding-bottom: 38px;
box-sizing: border-box;
}
/* Quarter Finals */
.knockout-bracket-round:nth-child(3)
.knockout-bracket-round-matches {
min-height: 1120px;
padding-top: 114px;
padding-bottom: 114px;
box-sizing: border-box;
}
/* Semi Finals */
.knockout-bracket-round:nth-child(4)
.knockout-bracket-round-matches {
min-height: 1120px;
padding-top: 266px;
padding-bottom: 266px;
box-sizing: border-box;
}
/* Final */
.knockout-bracket-round:nth-child(5)
.knockout-bracket-round-matches {
min-height: 1120px;
padding-top: 570px;
padding-bottom: 570px;
box-sizing: border-box;
}
/* =========================================================
CHAMPION
========================================================= */
.public-champion {
margin-top: 25px;
}
/* =========================================================
HORIZONTAL SCROLL — MOBILE
========================================================= */
@media (max-width: 1100px) {
.knockout-bracket {
gap: 20px;
}
.knockout-bracket-round {
flex-basis: 200px;
width: 200px;
min-width: 200px;
}
.bracket-match {
width: 200px;
}
.knockout-bracket-round-title {
font-size: 9px;
}
.bracket-team {
font-size: 8px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 600px) {
.knockout-bracket {
gap: 16px;
padding-left: 3px;
padding-right: 3px;
}
.knockout-bracket-round {
flex-basis: 180px;
width: 180px;
min-width: 180px;
}
.bracket-match {
width: 180px;
min-height: 72px;
}
.knockout-bracket-round-title {
height: 38px;
font-size: 8px;
letter-spacing: .7px;
}
.bracket-team {
min-height: 23px;
padding: 4px 6px;
font-size: 7px;
}
.bracket-team strong {
font-size: 10px;
}
.bracket-match-number {
font-size: 6px;
}
.bracket-match-status,
.bracket-pens {
font-size: 6px;
}
}
/* COMPACT KNOCKOUT MATCH BOXES */
.public-knockout-match {
width: 260px !important;
min-width: 260px !important;
max-width: 260px !important;
padding: 10px !important;
border-radius: 10px !important;
}
.knockout-player {
min-height: 34px !important;
padding: 7px 9px !important;
font-size: 12px !important;
border-radius: 5px !important;
}
.knockout-player span {
font-size: 12px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.knockout-player strong {
font-size: 13px !important;
flex-shrink: 0;
}
.public-knockout-match small {
font-size: 9px !important;
margin-bottom: 6px !important;
}
.knockout-status {
font-size: 8px !important;
margin-top: 6px !important;
}
@media (max-width: 1200px) {
.public-knockout-match {
width: 230px !important;
min-width: 230px !important;
max-width: 230px !important;
}
}
@media (max-width: 700px) {
.public-knockout-match {
width: 210px !important;
min-width: 210px !important;
max-width: 210px !important;
}
.knockout-player span {
font-size: 10px !important;
}
.knockout-player strong {
font-size: 11px !important;
}
}
/* CLEAN KNOCKOUT CONNECTOR LINES */
.public-knockout-round {
position: relative;
}
.public-knockout-matches {
position: relative;
}
/* Remove messy/default connector styling */
.public-knockout-match::before,
.public-knockout-match::after {
box-sizing: border-box;
}
/* Clean horizontal connector */
.public-knockout-match::after {
content: "";
position: absolute;
right: -28px;
top: 50%;
width: 28px;
height: 2px;
background: #159eea;
transform: translateY(-50%);
opacity: .85;
}
/* Hide connector on final column */
.public-knockout-round:last-child
.public-knockout-match::after {
display: none;
}
/* Keep cards above connector lines */
.public-knockout-match {
position: relative;
z-index: 2;
}
/* Cleaner bracket spacing */
.public-knockout-matches {
align-items: center;
}
/* Mobile */
@media (max-width: 700px) {
.public-knockout-match::after {
right: -18px;
width: 18px;
}
}
/* =========================================================
PUBLIC QUALIFICATION TABLE
========================================================= */
.public-qualification-groups {
width: 100%;
}
.public-qualification-group {
margin-bottom: 20px;
overflow: hidden;
border: 1px solid rgba(53,168,255,.20);
border-radius: 14px;
background: rgba(255,255,255,.018);
box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.public-qualification-group:last-child {
margin-bottom: 0;
}
.public-qualification-group-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
background:
linear-gradient(
135deg,
rgba(53,168,255,.10),
rgba(255,255,255,.025)
);
border-bottom: 1px solid rgba(53,168,255,.12);
}
.public-qualification-group-header h3 {
margin: 0;
color: #fff;
font-size: 16px;
font-weight: 800;
letter-spacing: .01em;
}
.public-qualification-group-header span {
color: rgba(255,255,255,.55);
font-size: 11px;
font-weight: 700;
}
.public-qualification-table-wrap {
width: 100%;
overflow-x: auto;
}
.public-qualification-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
table-layout: fixed;
}
.public-qualification-table thead {
background: rgba(53,168,255,.055);
}
.public-qualification-table th {
padding: 11px 18px;
color: rgba(255,255,255,.48);
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
text-align: left;
text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.public-qualification-table th:nth-child(1) {
width: 90px;
text-align: center;
}
.public-qualification-table th:nth-child(2) {
width: 42%;
}
.public-qualification-table th:nth-child(3) {
width: 30%;
}
.public-qualification-table th:nth-child(4) {
width: 150px;
text-align: center;
}
.public-qualification-table td {
padding: 14px 18px;
color: rgba(255,255,255,.72);
font-size: 12px;
border-bottom: 1px solid rgba(255,255,255,.045);
}
.public-qualification-table tbody tr {
transition: background .15s ease;
}
.public-qualification-table tbody tr:hover {
background: rgba(53,168,255,.045);
}
.public-qualification-table tbody tr:last-child td {
border-bottom: 0;
}
.public-qualification-rank {
text-align: center;
color: rgba(255,255,255,.65) !important;
font-weight: 800;
}
.public-qualification-player {
color: #fff !important;
font-weight: 750;
}
.public-qualification-type {
color: rgba(255,255,255,.62) !important;
}
.public-qualification-status-cell {
text-align: center;
}
.public-qualification-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 90px;
padding: 6px 12px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
}
.public-qualification-status.qualified {
color: #70c5ff;
background: rgba(53,168,255,.08);
border: 1px solid rgba(53,168,255,.30);
}
.public-qualification-status.eliminated {
color: rgba(255,255,255,.55);
background: rgba(255,255,255,.045);
border: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 700px) {
.public-qualification-group {
border-radius: 11px;
margin-bottom: 14px;
}
.public-qualification-group-header {
padding: 13px 14px;
}
.public-qualification-group-header h3 {
font-size: 14px;
}
.public-qualification-table {
min-width: 650px;
}
.public-qualification-table th,
.public-qualification-table td {
padding: 11px 12px;
}
}
/* ==========================================
PUBLIC FIXTURES — FINAL GROUP POLISH
========================================== */
.public-fixture-section-title{
display:flex;
align-items:center;
gap:12px;
margin:8px 0 16px;
font-size:12px;
font-weight:800;
letter-spacing:1.8px;
text-transform:uppercase;
color:rgba(255,255,255,.55);
}
.public-fixture-section-title::before{
content:"";
width:4px;
height:18px;
border-radius:4px;
background:#35a8ff;
box-shadow:0 0 12px rgba(53,168,255,.45);
}
.public-fixture-stage{
margin:0 0 20px;
border:1px solid rgba(53,168,255,.16);
border-radius:12px;
background:rgba(8,18,32,.72);
overflow:hidden;
}
.public-fixture-stage-header{
min-height:58px;
padding:11px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
background:linear-gradient(
90deg,
rgba(22,48,75,.78),
rgba(12,28,47,.62)
);
border-bottom:1px solid rgba(53,168,255,.14);
}
.public-fixture-stage-title{
display:flex;
align-items:center;
gap:11px;
}
.public-fixture-stage-accent{
width:3px;
height:30px;
flex:0 0 3px;
border-radius:3px;
background:#35a8ff;
box-shadow:0 0 10px rgba(53,168,255,.5);
}
.public-fixture-stage-header h3{
margin:0;
font-size:15px;
font-weight:800;
letter-spacing:.2px;
color:#fff;
}
.public-fixture-stage-subtitle{
display:block;
margin-top:3px;
font-size:9px;
font-weight:800;
letter-spacing:1.4px;
color:rgba(255,255,255,.43);
}
.public-fixture-stage-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:78px;
padding:7px 11px;
border:1px solid rgba(53,168,255,.27);
border-radius:999px;
background:rgba(53,168,255,.07);
color:#78c6ff;
font-size:9px;
font-weight:800;
letter-spacing:1.1px;
text-transform:uppercase;
}
.public-fixture-table{
width:100%;
border-collapse:collapse;
}
.public-fixture-table th{
padding:9px 13px;
background:rgba(3,11,22,.52);
border-bottom:1px solid rgba(255,255,255,.06);
color:rgba(141,206,255,.62);
font-size:9px;
font-weight:800;
letter-spacing:1.2px;
}
.public-fixture-table td{
padding:9px 13px;
height:42px;
border-bottom:1px solid rgba(255,255,255,.045);
font-size:12px;
}
.public-fixture-table tbody tr:last-child td{
border-bottom:0;
}
.public-fixture-row:hover{
background:rgba(53,168,255,.035);
}
.public-fixture-match-number{
color:rgba(255,255,255,.38);
font-size:11px!important;
}
.public-fixture-home,
.public-fixture-away{
color:#eaf3fc;
font-size:12px!important;
font-weight:700;
}
.public-fixture-score{
min-width:52px;
padding:5px 9px;
border:1px solid rgba(53,168,255,.23);
border-radius:6px;
background:rgba(3,13,27,.82);
color:#fff;
font-size:12px;
font-weight:800;
}
.public-fixture-status{
padding:5px 8px;
border:1px solid rgba(53,168,255,.20);
border-radius:6px;
background:rgba(53,168,255,.055);
color:#78c6ff;
font-size:8px;
letter-spacing:1px;
}
.public-fixture-status-dot{
width:5px;
height:5px;
}
.public-fixture-scheduled{
color:rgba(255,255,255,.43);
font-size:11px!important;
}
.public-fixture-view{
font-size:11px;
color:#55b6ff;
}
@media (max-width:768px){
.public-fixture-stage-header{
min-height:54px;
padding:10px 12px;
}
.public-fixture-stage-header h3{
font-size:14px;
}
.public-fixture-table{
min-width:760px;
}
.public-fixture-table th,
.public-fixture-table td{
padding:8px 10px;
}
}
/* Public Fixtures — MATCHES eyebrow polish */
.public-fixtures-eyebrow{
display:inline-flex;
align-items:center;
margin:0 0 18px;
padding:0;
color:rgba(255,255,255,.42);
font-size:10px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
line-height:1;
}
.public-fixtures-eyebrow::before{
content:"";
width:3px;
height:14px;
margin-right:9px;
border-radius:3px;
background:#35a8ff;
box-shadow:0 0 10px rgba(53,168,255,.5);
}
/* =========================================================
PUBLIC LEAGUE CHAMPION CARD
========================================================= */
.league-champion-card {
width: min(100%, 760px);
margin-top: 28px;
padding: 34px 36px;
box-sizing: border-box;
text-align: center;
border: 1px solid rgba(53, 168, 255, 0.22);
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(53, 168, 255, 0.08),
rgba(104, 76, 255, 0.06)
);
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.22);
}
.league-champion-trophy {
font-size: 46px;
line-height: 1;
margin-bottom: 16px;
}
.league-champion-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: #35a8ff;
margin-bottom: 8px;
}
.league-champion-name {
font-size: 26px;
font-weight: 800;
letter-spacing: 0.3px;
margin-bottom: 26px;
}
.league-champion-stats {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
.league-champion-stats > div {
padding: 12px 8px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.league-champion-stats span {
display: block;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
opacity: 0.55;
margin-bottom: 5px;
}
.league-champion-stats strong {
display: block;
font-size: 16px;
}
@media (max-width: 600px) {
.league-champion-card {
padding: 28px 18px;
}
.league-champion-name {
font-size: 22px;
}
.league-champion-stats {
grid-template-columns: repeat(3, 1fr);
}
}
/* =========================================================
PUBLIC SPONSOR SHOWCASE
========================================================= */
.sponsors-section {
position: relative;
overflow: hidden;
}
.sponsor-heading {
text-align: center;
}
.sponsor-heading > div {
width: 100%;
}
.sponsor-heading > div > span {
display: block;
margin-bottom: 10px;
color: #3bbcff;
font-size: 11px;
font-weight: 900;
letter-spacing: 4px;
}
.sponsor-heading h2 {
margin: 0;
font-size: clamp(38px, 5vw, 54px);
font-weight: 900;
}
.sponsor-heading h2::first-letter {
color: #ffffff;
}
.sponsor-heading p {
max-width: 720px;
margin: 14px auto 0;
text-align: center;
}
.sponsors-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 34px;
}
.sponsor-card {
position: relative;
min-height: 308px;
overflow: hidden;
border: 1px solid rgba(61, 139, 255, 0.30);
border-radius: 14px;
background:
radial-gradient(
circle at 50% 0%,
rgba(47, 108, 255, 0.07),
transparent 55%
),
rgba(5, 12, 29, 0.72);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 12px 30px rgba(0,0,0,0.18);
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.sponsor-card:hover {
transform: translateY(-4px);
border-color: rgba(77, 160, 255, 0.58);
box-shadow:
0 18px 42px rgba(0,0,0,0.28),
0 0 28px rgba(72, 96, 255, 0.08);
}
.sponsor-logo-area {
position: relative;
height: 148px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px 36px 10px;
}
.public-sponsor-logo {
width: 100%;
height: 108px;
object-fit: contain;
object-position: center;
}
.public-sponsor-logo-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 108px;
color: #65718f;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
}
.sponsor-website {
position: absolute;
top: 10px;
right: 10px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid rgba(77, 146, 255, 0.22);
border-radius: 9px;
background: rgba(4, 10, 24, 0.72);
color: #ffffff;
font-size: 23px;
font-weight: 700;
line-height: 1;
transition: .2s ease;
}
.sponsor-website:hover {
border-color: #4b8dff;
background: rgba(45, 92, 190, 0.18);
transform: translateY(-1px);
}
.sponsor-card-content {
padding: 6px 28px 24px;
text-align: center;
}
.sponsor-card-content h3 {
min-height: 25px;
margin: 0;
color: #f5f7ff;
font-size: 16px;
font-weight: 900;
line-height: 1.35;
text-transform: uppercase;
}
.sponsor-location {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 10px;
color: #aebbd7;
font-size: 14px;
}
.sponsor-location span:first-child {
color: #53baff;
font-size: 18px;
}
.sponsor-divider {
width: 100%;
height: 1px;
margin: 16px auto 17px;
background:
linear-gradient(
90deg,
transparent,
rgba(73, 137, 224, 0.48),
transparent
);
}
.sponsor-socials {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
min-height: 42px;
}
.sponsor-social {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(117, 143, 190, 0.34);
border-radius: 9px;
background: rgba(3, 8, 20, 0.85);
color: #ffffff;
font-size: 22px;
font-weight: 900;
transition: .2s ease;
}
.sponsor-social:hover {
transform: translateY(-2px);
}
.sponsor-facebook:hover {
border-color: #2d78ff;
background: rgba(45, 120, 255, 0.16);
}
.sponsor-instagram:hover {
border-color: #ff3c9a;
background: rgba(255, 60, 154, 0.12);
}
.sponsor-section-action {
display: flex;
justify-content: center;
margin-top: 38px;
}
.sponsor-become-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 242px;
padding: 15px 26px;
border: 1px solid transparent;
border-radius: 12px;
background:
linear-gradient(#071126, #071126) padding-box,
linear-gradient(
90deg,
#218bff,
#a43cff
) border-box;
color: #78a9ff;
font-size: 14px;
font-weight: 900;
text-decoration: none;
transition: .25s ease;
}
.sponsor-become-button b {
color: #c071ff;
font-size: 21px;
line-height: 1;
}
.sponsor-become-button:hover {
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 8px 28px rgba(64, 91, 255, 0.18);
}
.sponsor-loading,
.sponsor-empty {
grid-column: 1 / -1;
padding: 40px;
text-align: center;
color: #7f8cab;
font-size: 13px;
}
@media (max-width: 1050px) {
.sponsors-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.sponsors-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.sponsor-card {
min-height: 290px;
}
.sponsor-logo-area {
height: 145px;
}
.public-sponsor-logo {
height: 105px;
}
}
/* =========================================================
FINAL PUBLIC SPONSOR DESIGN OVERRIDE
========================================================= */
.sponsors-section .sponsors-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
width: 100% !important;
margin-top: 34px !important;
}
.sponsors-section .sponsor-card {
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: 310px !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid rgba(58, 127, 226, .38) !important;
border-radius: 14px !important;
background:
radial-gradient(
circle at 50% 0%,
rgba(42, 91, 190, .08),
transparent 58%
),
rgba(5, 12, 29, .78) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 12px 30px rgba(0,0,0,.18) !important;
}
.sponsors-section .sponsor-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(75, 150, 255, .65) !important;
}
.sponsors-section .sponsor-logo-area {
position: relative !important;
width: 100% !important;
height: 155px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px 38px 10px !important;
background: transparent !important;
}
.sponsors-section .public-sponsor-logo {
display: block !important;
width: 100% !important;
max-width: 235px !important;
height: 105px !important;
object-fit: contain !important;
object-position: center !important;
}
.sponsors-section .public-sponsor-logo-placeholder {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 105px !important;
color: #66738e !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 3px !important;
}
.sponsors-section .sponsor-website {
position: absolute !important;
top: 10px !important;
right: 10px !important;
width: 38px !important;
height: 38px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(76, 145, 245, .24) !important;
border-radius: 9px !important;
background: rgba(3, 9, 22, .82) !important;
color: #fff !important;
font-size: 23px !important;
text-decoration: none !important;
}
.sponsors-section .sponsor-card-content {
width: 100% !important;
padding: 7px 26px 20px !important;
text-align: center !important;
}
.sponsors-section .sponsor-card-content h3 {
margin: 0 !important;
min-height: 24px !important;
color: #f3f5fb !important;
font-size: 16px !important;
font-weight: 900 !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
.sponsors-section .sponsor-location {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin-top: 10px !important;
color: #aab8d4 !important;
font-size: 14px !important;
}
.sponsors-section .sponsor-location span:first-child {
color: #55baff !important;
font-size: 18px !important;
}
.sponsors-section .sponsor-divider {
width: 100% !important;
height: 1px !important;
margin: 16px 0 17px !important;
background:
linear-gradient(
90deg,
transparent,
rgba(67, 128, 215, .48),
transparent
) !important;
}
.sponsors-section .sponsor-socials {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 16px !important;
}
.sponsors-section .sponsor-social {
width: 42px !important;
height: 42px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(105, 133, 180, .38) !important;
border-radius: 9px !important;
background: rgba(3, 8, 20, .9) !important;
color: #fff !important;
font-size: 22px !important;
font-weight: 900 !important;
text-decoration: none !important;
}
.sponsors-section .sponsor-facebook:hover {
border-color: #2777ff !important;
}
.sponsors-section .sponsor-instagram:hover {
border-color: #f33d9a !important;
}
.sponsors-section .sponsor-section-action {
display: flex !important;
justify-content: center !important;
margin-top: 38px !important;
}
.sponsors-section .sponsor-become-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
min-width: 242px !important;
padding: 15px 26px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background:
linear-gradient(#071126, #071126) padding-box,
linear-gradient(90deg,#218bff,#a43cff) border-box !important;
color: #78a9ff !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 900 !important;
}
@media (max-width: 1050px) {
.sponsors-section .sponsors-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
.sponsors-section .sponsors-grid {
grid-template-columns: 1fr !important;
}
.sponsors-section .sponsor-card {
height: 300px !important;
}
}
/* =========================================================
BYC ESPORTS — FINAL SPONSOR SHOWCASE
========================================================= */
#sponsors.sponsors-section {
padding-top: 78px !important;
padding-bottom: 70px !important;
}
#sponsors .sponsor-heading {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
margin-bottom: 38px !important;
}
#sponsors .sponsor-heading > div {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
#sponsors .sponsor-heading > div > span {
display: block !important;
margin: 0 0 10px !important;
color: #32b8ff !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: 4px !important;
line-height: 1.2 !important;
}
#sponsors .sponsor-heading h2 {
margin: 0 !important;
color: #ffffff !important;
font-size: clamp(42px, 4.2vw, 58px) !important;
font-weight: 900 !important;
line-height: 1.05 !important;
letter-spacing: -2px !important;
text-align: center !important;
}
#sponsors .sponsor-heading p {
width: 100% !important;
max-width: 760px !important;
margin: 14px auto 0 !important;
color: #b7c1d8 !important;
font-size: 16px !important;
line-height: 1.5 !important;
text-align: center !important;
}
/* =========================================================
SPONSOR GRID
========================================================= */
#sponsors #sponsorsGrid {
display: grid !important;
grid-template-columns:
repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
width: 100% !important;
margin: 0 !important;
align-items: stretch !important;
}
/* =========================================================
SPONSOR CARD
========================================================= */
#sponsors #sponsorsGrid .sponsor-card {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
height: 310px !important;
min-height: 310px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
padding: 0 !important;
border: 1px solid rgba(57, 125, 221, 0.42) !important;
border-radius: 14px !important;
background:
radial-gradient(
circle at 50% 0%,
rgba(52, 100, 190, 0.09),
transparent 58%
),
rgba(5, 12, 29, 0.72) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
0 12px 30px rgba(0,0,0,0.18) !important;
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease !important;
}
#sponsors #sponsorsGrid .sponsor-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(69, 148, 255, 0.68) !important;
box-shadow:
0 18px 40px rgba(0,0,0,0.26),
0 0 24px rgba(57, 106, 255, 0.08) !important;
}
/* =========================================================
LOGO AREA
========================================================= */
#sponsors .sponsor-logo-area {
position: relative !important;
width: 100% !important;
height: 154px !important;
min-height: 154px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px 38px 8px !important;
background: transparent !important;
}
#sponsors .public-sponsor-logo {
display: block !important;
width: 100% !important;
max-width: 230px !important;
height: 105px !important;
object-fit: contain !important;
object-position: center !important;
}
#sponsors .public-sponsor-logo-placeholder {
width: 100% !important;
height: 105px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #687691 !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 3px !important;
}
/* =========================================================
WEBSITE BUTTON
========================================================= */
#sponsors .sponsor-website {
position: absolute !important;
top: 10px !important;
right: 10px !important;
width: 38px !important;
height: 38px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(76, 142, 235, 0.25) !important;
border-radius: 9px !important;
background: rgba(3, 9, 22, 0.78) !important;
color: #ffffff !important;
font-size: 22px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: 0.2s ease !important;
}
#sponsors .sponsor-website:hover {
border-color: #4c96ff !important;
background: rgba(45, 96, 200, 0.18) !important;
transform: translateY(-1px) !important;
}
/* =========================================================
CARD CONTENT
========================================================= */
#sponsors .sponsor-card-content {
width: 100% !important;
padding: 6px 25px 20px !important;
text-align: center !important;
}
#sponsors .sponsor-card-content h3 {
margin: 0 !important;
min-height: 24px !important;
color: #f4f6fc !important;
font-size: 16px !important;
font-weight: 900 !important;
line-height: 1.35 !important;
text-align: center !important;
text-transform: uppercase !important;
}
#sponsors .sponsor-location {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin-top: 9px !important;
color: #aebbd5 !important;
font-size: 14px !important;
}
#sponsors .sponsor-location span:first-child {
color: #4db8ff !important;
font-size: 17px !important;
}
/* =========================================================
DIVIDER
========================================================= */
#sponsors .sponsor-divider {
width: 100% !important;
height: 1px !important;
margin: 16px 0 17px !important;
background:
linear-gradient(
90deg,
transparent,
rgba(70, 133, 220, 0.48),
transparent
) !important;
}
/* =========================================================
SOCIAL ICONS
========================================================= */
#sponsors .sponsor-socials {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
}
#sponsors .sponsor-social {
width: 42px !important;
height: 42px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(105, 134, 181, 0.38) !important;
border-radius: 9px !important;
background: rgba(3, 8, 20, 0.9) !important;
color: #ffffff !important;
font-size: 22px !important;
font-weight: 900 !important;
text-decoration: none !important;
transition: 0.2s ease !important;
}
#sponsors .sponsor-social:hover {
transform: translateY(-2px) !important;
}
#sponsors .sponsor-facebook:hover {
border-color: #287aff !important;
}
#sponsors .sponsor-instagram:hover {
border-color: #f33d9a !important;
}
/* =========================================================
BECOME A SPONSOR
========================================================= */
#sponsors .sponsor-section-action {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 38px !important;
}
#sponsors .sponsor-become-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
min-width: 242px !important;
padding: 15px 26px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background:
linear-gradient(#071126, #071126) padding-box,
linear-gradient(
90deg,
#218bff,
#a43cff
) border-box !important;
color: #78a9ff !important;
font-size: 14px !important;
font-weight: 900 !important;
text-decoration: none !important;
transition: 0.25s ease !important;
}
#sponsors .sponsor-become-button b {
color: #c071ff !important;
font-size: 21px !important;
line-height: 1 !important;
}
#sponsors .sponsor-become-button:hover {
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow:
0 8px 28px rgba(64, 91, 255, 0.18) !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1050px) {
#sponsors #sponsorsGrid {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
#sponsors.sponsors-section {
padding-top: 60px !important;
padding-bottom: 55px !important;
}
#sponsors .sponsor-heading h2 {
font-size: 38px !important;
letter-spacing: -1px !important;
}
#sponsors .sponsor-heading p {
font-size: 14px !important;
}
#sponsors #sponsorsGrid {
grid-template-columns: 1fr !important;
}
#sponsors #sponsorsGrid .sponsor-card {
height: 300px !important;
min-height: 300px !important;
}
}
/* =========================================================
SPONSOR LOGO — LARGER LOGO, SAME CARD SIZE
========================================================= */
#sponsors .sponsor-logo-area {
height: 154px !important;
min-height: 154px !important;
padding: 12px 24px 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Increase actual sponsor logo without increasing card */
#sponsors .public-sponsor-logo {
width: auto !important;
max-width: 270px !important;
height: 130px !important;
max-height: 130px !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
}
/* Placeholder follows the same larger visual area */
#sponsors .public-sponsor-logo-placeholder {
width: 270px !important;
max-width: 100% !important;
height: 130px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Keep the rest of the card exactly where it is */
#sponsors #sponsorsGrid .sponsor-card {
height: 310px !important;
min-height: 310px !important;
}
@media (max-width: 720px) {
#sponsors .sponsor-logo-area {
height: 145px !important;
min-height: 145px !important;
}
#sponsors .public-sponsor-logo {
max-width: 240px !important;
height: 120px !important;
max-height: 120px !important;
}
#sponsors .public-sponsor-logo-placeholder {
width: 240px !important;
height: 120px !important;
}
}
/* =========================================================
SPONSOR PHOTO — TRUE EDGE-TO-EDGE
========================================================= */
/*
The sponsor card remains the SAME size.
Only the top photo is changed.
*/
#sponsors #sponsorsGrid .sponsor-card {
overflow: hidden !important;
}
/* Entire top photo area */
#sponsors #sponsorsGrid .sponsor-logo-area {
position: relative !important;
width: 100% !important;
height: 155px !important;
min-height: 155px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: hidden !important;
background: #000 !important;
}
/*
The actual image touches:
LEFT EDGE
RIGHT EDGE
TOP EDGE
BOTTOM EDGE
*/
#sponsors #sponsorsGrid .public-sponsor-logo {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
object-fit: cover !important;
object-position: center center !important;
}
/*
Remove placeholder spacing as well.
*/
#sponsors #sponsorsGrid .public-sponsor-logo-placeholder {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* =========================================================
WEBSITE BUTTON FLOATS OVER PHOTO
========================================================= */
#sponsors #sponsorsGrid .sponsor-website {
z-index: 5 !important;
top: 10px !important;
right: 10px !important;
}
/* =========================================================
KEEP LOWER CARD AREA UNCHANGED
========================================================= */
#sponsors #sponsorsGrid .sponsor-card-content {
position: relative !important;
z-index: 2 !important;
padding-top: 17px !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 720px) {
#sponsors #sponsorsGrid .sponsor-logo-area {
height: 150px !important;
min-height: 150px !important;
}
}
/* KNOCKOUT_ONLY hidden public tabs */
.public-tab[hidden],
.public-section[hidden] {
display: none !important;
}