/* =====================================================
   BOOTYCUP v2.0
   World Cup Match Center Styling
===================================================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:Inter,sans-serif;

color:white;

background:

radial-gradient(circle at top,#163158 0%,#08111f 35%,#03060d 100%);

overflow-x:hidden;

}



/* Stadium Grid Texture */

body:before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

background-size:70px 70px;

opacity:.18;

pointer-events:none;

}




.container{

max-width:1300px;

margin:auto;

padding:35px;

}




/* =====================================================
   HEADER
===================================================== */


.logo{

text-align:center;

animation:fadeDown .9s ease;

}



.logo img{

width:min(900px,95%);

filter:

drop-shadow(0 0 20px rgba(0,150,255,.55))
drop-shadow(0 0 45px rgba(0,110,255,.35));

}



.subtitle{

margin-top:18px;

font-size:22px;

letter-spacing:2px;

text-transform:uppercase;

color:#dddddd;

font-weight:600;

text-align:center;

}



.divider{

width:260px;

height:4px;

background:#f2c94c;

margin:28px auto 40px;

border-radius:100px;

}




/* =====================================================
   PANELS
===================================================== */


.panel{

background:rgba(17,31,54,.94);

border:2px solid rgba(242,201,76,.35);

border-radius:16px;

padding:24px;

margin-bottom:45px;

box-shadow:

0 0 35px rgba(0,0,0,.45);

transition:.35s;

animation:fadeUp .8s ease;

}



.panel:hover{

border-color:#43b7ff;

box-shadow:

0 0 35px rgba(67,183,255,.35);

}




.title{

font-family:Orbitron;

font-size:25px;

color:#f2c94c;

margin-bottom:20px;

letter-spacing:1px;

display:flex;

align-items:center;

gap:12px;

}




/* =====================================================
   COUNTDOWN DISPLAY
===================================================== */


.countdown-panel{

text-align:center;

}



.next-game{

font-family:Orbitron;

font-size:32px;

margin:20px 0;

}



.stage{

color:#f2c94c;

font-size:16px;

letter-spacing:2px;

text-transform:uppercase;

font-weight:700;

}



.timer{

display:flex;

justify-content:center;

gap:15px;

margin:30px 0;

}



.time-box{

background:#07101c;

border:2px solid rgba(67,183,255,.5);

border-radius:12px;

padding:15px;

min-width:90px;

box-shadow:

0 0 20px rgba(67,183,255,.25);

}



.time-number{

font-family:Orbitron;

font-size:42px;

font-weight:900;

color:#43b7ff;

}



.time-label{

font-size:12px;

color:#aaa;

letter-spacing:2px;

}





.kickoff{

font-size:18px;

color:#ccc;

}




/* =====================================================
   IMAGE PANELS
===================================================== */


.image{

display:block;

border-radius:14px;

overflow:hidden;

}



.image img{

width:100%;

display:block;

transition:.35s;

}



.image:hover img{

transform:scale(1.02);

}




/* =====================================================
   MATCH CENTER
===================================================== */


.matches{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:18px;

}



.match{

background:#07101c;

border-left:4px solid #f2c94c;

border-radius:12px;

padding:20px;

transition:.3s;

text-align:center;

}



.match:hover{

transform:translateY(-5px);

border-color:#43b7ff;

}



.match-stage{

color:#f2c94c;

font-size:13px;

font-weight:700;

text-transform:uppercase;

}



.match-date{

color:#aaa;

font-size:14px;

margin:10px 0;

}



.match-teams{

font-family:Orbitron;

font-size:22px;

line-height:1.8;

}




.vs{

color:#43b7ff;

font-size:14px;

}




/* =====================================================
   TICKER
===================================================== */


.ticker{

margin-top:10px;

background:#07101c;

border-top:2px solid #f2c94c;

border-bottom:2px solid #f2c94c;

overflow:hidden;

white-space:nowrap;

padding:14px 0;

font-weight:600;

}


.track{

display:inline-block;

padding-left:100%;

animation:scroll 60s linear infinite;

}

.track:hover {
    animation-play-state: paused;
    cursor: default;

}

/* =====================================================
   FOOTER
===================================================== */


.footer{

margin:35px 0;

text-align:center;

color:#c8c8c8;

font-size:15px;

}



.footer strong{

color:#f2c94c;

}




/* =====================================================
   ANIMATIONS
===================================================== */


@keyframes scroll{

from{

transform:translateX(0);

}

to{

transform:translateX(-100%);

}

}



@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-35px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}





/* =====================================================
   MOBILE
===================================================== */


@media(max-width:800px){


.container{

padding:18px;

}



.subtitle{

font-size:16px;

}



.title{

font-size:20px;

}



.next-game{

font-size:22px;

}



.timer{

gap:8px;

}



.time-box{

min-width:65px;

padding:10px;

}



.time-number{

font-size:28px;

}


}
/* =====================================================
   RANKINGS TABLE
===================================================== */


.rankings-wrap{

overflow-x:auto;

}



.rankings-table{

width:100%;

border-collapse:collapse;

font-family:Inter,sans-serif;

}



.rankings-table thead th{

font-family:Orbitron;

font-size:13px;

letter-spacing:1.5px;

text-transform:uppercase;

color:#f2c94c;

text-align:center;

padding:12px 10px;

border-bottom:2px solid rgba(242,201,76,.4);

}



.rankings-table thead th.col-name{

text-align:left;

}



.rankings-table tbody td{

text-align:center;

padding:14px 10px;

border-bottom:1px solid rgba(255,255,255,.08);

font-size:15px;

color:#e6e6e6;

}



.rankings-table tbody tr{

transition:.25s;

}



.rankings-table tbody tr:hover{

background:rgba(67,183,255,.08);

}



.rankings-table td.col-rank{

font-family:Orbitron;

font-weight:700;

color:#43b7ff;

}



.rankings-table td.col-name{

text-align:left;

font-weight:600;

}



.rankings-table td.col-pts{

font-family:Orbitron;

font-weight:900;

color:#f2c94c;

}



.rankings-table tr.rank-gold{

background:linear-gradient(90deg,rgba(242,201,76,.16),transparent);

}



.rankings-table tr.rank-gold td.col-rank{

color:#f2c94c;

}



.rankings-table tr.rank-silver{

background:linear-gradient(90deg,rgba(200,210,225,.12),transparent);

}



.rankings-table tr.rank-silver td.col-rank{

color:#cfd8e3;

}



.rankings-table tr.rank-bronze{

background:linear-gradient(90deg,rgba(205,127,50,.14),transparent);

}



.rankings-table tr.rank-bronze td.col-rank{

color:#cd7f32;

}



@media(max-width:800px){


.rankings-table thead th,
.rankings-table tbody td{

padding:10px 6px;

font-size:13px;

}


}



/* =====================================================
   PREDICTIONS TABLE
===================================================== */


.predictions-wrap{

overflow-x:auto;

}



.predictions-table{

width:100%;

border-collapse:collapse;

font-family:Inter,sans-serif;

}



.predictions-table thead th{

font-family:Orbitron;

font-size:13px;

letter-spacing:1.5px;

text-transform:uppercase;

color:#f2c94c;

text-align:left;

padding:12px 10px;

border-bottom:2px solid rgba(242,201,76,.4);

}



.predictions-table thead th.col-split{

text-align:center;

}



.predictions-table tbody td{

padding:16px 10px;

border-bottom:1px solid rgba(255,255,255,.08);

font-size:15px;

color:#e6e6e6;

vertical-align:middle;

}



.predictions-table tbody tr{

transition:.25s;

}



.predictions-table tbody tr:hover{

background:rgba(67,183,255,.08);

}



.predictions-table td.col-matchup{

font-weight:500;

}



.predictions-table td.col-pick{

font-family:Orbitron;

font-weight:700;

color:#43b7ff;

}



.predictions-table td.col-split{

min-width:140px;

text-align:center;

}



.split-bar{

width:100%;

height:8px;

border-radius:100px;

background:rgba(255,77,77,.35);

overflow:hidden;

margin-bottom:6px;

}



.split-fill{

height:100%;

background:#f2c94c;

border-radius:100px;

}



.split-label{

font-size:12px;

color:#aaa;

letter-spacing:1px;

}



@media(max-width:800px){


.predictions-table thead th,
.predictions-table tbody td{

padding:10px 6px;

font-size:13px;

}


.predictions-table td.col-split{

min-width:90px;

}


}



/* =====================================================
   MATCH CARD STATES
===================================================== */


/* Upcoming Match */

.upcoming-card{

border-left:4px solid #f2c94c;

}



/* Live Match */

.live-card{

border-left:4px solid #ff4d4d;

background:

linear-gradient(

135deg,

rgba(80,15,15,.85),

rgba(7,16,28,.95)

);


box-shadow:

0 0 25px rgba(255,77,77,.35);


animation:livePulse 2s infinite;

}



.live-card .match-stage:first-child{

color:#ff4d4d;

font-weight:900;

}



/* Live Pulse Animation */

@keyframes livePulse{


0%{

box-shadow:

0 0 10px rgba(255,77,77,.25);

}


50%{

box-shadow:

0 0 35px rgba(255,77,77,.65);

}


100%{

box-shadow:

0 0 10px rgba(255,77,77,.25);

}


}


/* =====================================================
   EASTER EGGS
===================================================== */


/* ---------- Easter Egg 1: Overload Mode ---------- */

.overload-banner{

position:fixed;
top:0;
left:0;
right:0;

background:linear-gradient(90deg,#ff4d4d,#f2c94c,#ff4d4d);
background-size:200% 100%;

animation:overloadGradient 1.5s linear infinite;

color:#07101c;
text-align:center;
padding:18px 10px;
font-family:Orbitron;

z-index:9999;

transform:translateY(-100%);
transition:transform .5s ease;

box-shadow:0 0 30px rgba(255,77,77,.6);

}


.overload-banner.show{

transform:translateY(0);

}


.overload-line1{

font-size:20px;
font-weight:900;
letter-spacing:1px;

}


.overload-line2{

font-size:13px;
font-weight:700;
margin-top:4px;
letter-spacing:2px;
text-transform:uppercase;

}


@keyframes overloadGradient{

from{ background-position:0% 0; }
to{ background-position:200% 0; }

}


body.overload-active .logo img{

filter:

drop-shadow(0 0 35px rgba(255,77,77,.9))
drop-shadow(0 0 65px rgba(242,201,76,.75))
drop-shadow(0 0 90px rgba(67,183,255,.6));

animation:overloadPulse 1s infinite;

}


@keyframes overloadPulse{

0%,100%{ transform:scale(1); }
50%{ transform:scale(1.03); }

}


body.overload-active .panel{

animation:neonBorder 1.2s linear infinite;

}


@keyframes neonBorder{

0%{ border-color:#f2c94c; box-shadow:0 0 25px rgba(242,201,76,.6); }
33%{ border-color:#43b7ff; box-shadow:0 0 25px rgba(67,183,255,.6); }
66%{ border-color:#ff4d4d; box-shadow:0 0 25px rgba(255,77,77,.6); }
100%{ border-color:#f2c94c; box-shadow:0 0 25px rgba(242,201,76,.6); }

}




/* ---------- Confetti (shared by Penalty Shootout) ---------- */

.confetti-piece{

position:fixed;
top:-20px;
width:10px;
height:16px;
opacity:.9;

z-index:9999;
pointer-events:none;

animation:confettiFall linear forwards;

}


@keyframes confettiFall{

from{ top:-20px; opacity:1; }
to{ top:110vh; opacity:.4; }

}




/* ---------- Easter Egg 3: Ticker Broadcast Modes ---------- */

.ticker{

cursor:pointer;
transition:.3s;

}


.ticker.mode-breaking{

background:#3a0d0d;
border-top:2px solid #ff4d4d;
border-bottom:2px solid #ff4d4d;

}


.ticker.mode-breaking .track{

color:#ffdada;
font-weight:800;

}


.ticker.mode-sportscenter{

background:#000000;
border-top:2px solid #f2c94c;
border-bottom:2px solid #f2c94c;

}


.ticker.mode-sportscenter .track{

color:#f2c94c;

}


/* ---------- Easter Egg 4: BOOTY Click Counter ---------- */

#bootyWord{

transition:.2s;

}


#bootyWord:hover{

color:#43b7ff;

}


.booty-counter{

margin-top:12px;

font-size:13px;

letter-spacing:1px;

color:#888;

opacity:0;

height:0;

overflow:hidden;

transition:opacity .3s ease;

}


.booty-counter.show{

opacity:1;

height:auto;

}


.booty-counter.joke{

color:#f2c94c;

font-weight:700;

}


.booty-counter.pop{

animation:counterPop .3s ease;

}


@keyframes counterPop{

0%{ transform:scale(0.85); }
50%{ transform:scale(1.08); }
100%{ transform:scale(1); }

}


/* ---------- Easter Egg 5: Footer & Secret Video ---------- */

#bootyAmp{

transition:.2s;

}


#bootyAmp:hover{

color:#f2c94c;

}


.video-overlay{

position:fixed;
inset:0;

background:rgba(3,6,13,.92);

display:flex;
align-items:center;
justify-content:center;

z-index:10000;

opacity:0;

transition:opacity .3s ease;

}


.video-overlay.show{

opacity:1;

}


.video-overlay.closing{

opacity:0;

}


.video-frame{

position:relative;

max-width:90vw;
max-height:85vh;

border-radius:14px;

overflow:hidden;

box-shadow:

0 0 50px rgba(67,183,255,.35),
0 0 90px rgba(0,0,0,.6);

}


.video-player{

display:block;

max-width:90vw;
max-height:85vh;

background:#000;

}


.video-close-btn{

position:absolute;

top:12px;
right:12px;

width:38px;
height:38px;

border:2px solid rgba(242,201,76,.6);
border-radius:50%;

background:rgba(7,16,28,.85);
color:#f2c94c;

font-size:18px;
font-weight:700;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

opacity:0;
pointer-events:none;

transition:opacity .35s ease,transform .2s ease,border-color .2s ease;

}


.video-close-btn.show{

opacity:1;

pointer-events:auto;

}


.video-close-btn:hover{

border-color:#43b7ff;
color:#43b7ff;

transform:scale(1.08);

}


/* ---------- Easter Egg 6: Trophy Double-Click ---------- */

#trophyIcon{

display:inline-block;

transition:.2s;

}


#trophyIcon:hover{

transform:scale(1.1);

}


/* ---------- Easter Egg 7: Secret Corners ---------- */

.corner-hint{

position:fixed;

width:14px;
height:14px;

border-radius:50%;

background:#f2c94c;

box-shadow:0 0 12px rgba(242,201,76,.8);

opacity:0;

pointer-events:none;

transition:opacity .2s ease;

z-index:10002;

}


.corner-hint.show{

opacity:.85;

}


.corner-hint.hint-ul{

top:14px;
left:14px;

}


.corner-hint.hint-ur{

top:14px;
right:14px;

}


.corner-hint.hint-lr{

bottom:14px;
right:14px;

}


.corner-hint.hint-ll{

bottom:14px;
left:14px;

}


.corner-gif-overlay{

position:fixed;
inset:0;

display:flex;
align-items:center;
justify-content:center;

background:rgba(3,6,13,.85);

opacity:0;

pointer-events:none;

transition:opacity .4s ease;

z-index:10003;

}


.corner-gif-overlay.show{

opacity:1;

}


.corner-gif{

max-width:80vw;
max-height:80vh;

border-radius:14px;

box-shadow:

0 0 40px rgba(242,201,76,.5),
0 0 80px rgba(0,0,0,.6);

}


/* =====================================================
   EASTER EGG 8: PENALTY SHOOTOUT
===================================================== */


/* ---------- Trigger: Predictions ⚽ ---------- */

#predictionsBall{

display:inline-block;

transition:.2s;

}


#predictionsBall:hover{

transform:scale(1.15);

}


/* ---------- Step 2: Penalty Arena Modal ---------- */

.penalty-overlay{

position:fixed;
inset:0;

background:rgba(3,6,13,.9);

display:flex;
align-items:center;
justify-content:center;

z-index:10006;

opacity:0;

pointer-events:none;

transition:opacity .3s ease;

}


.penalty-overlay.show{

opacity:1;

pointer-events:auto;

}


.penalty-modal{

position:relative;

width:min(420px,88vw);

background:linear-gradient(160deg,#0d1b30,#07101c);

border:2px solid rgba(242,201,76,.5);

border-radius:20px;

padding:28px 24px 32px;

text-align:center;

box-shadow:

0 0 50px rgba(67,183,255,.3),
0 0 90px rgba(0,0,0,.7);

transform:translateY(30px) scale(.96);

transition:transform .35s cubic-bezier(.22,.9,.32,1.15);

}


.penalty-overlay.show .penalty-modal{

transform:translateY(0) scale(1);

}


.penalty-close{

position:absolute;

top:12px;
right:12px;

width:32px;
height:32px;

border:2px solid rgba(242,201,76,.5);
border-radius:50%;

background:rgba(7,16,28,.85);
color:#f2c94c;

font-size:15px;
font-weight:700;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

transition:.2s;

}


.penalty-close:hover{

border-color:#43b7ff;
color:#43b7ff;

transform:scale(1.08);

}


/* ---------- Lifetime Stats Bar (inside modal only) ---------- */

.penalty-stats{

display:flex;

flex-wrap:wrap;

gap:8px;

justify-content:center;

margin:6px 0 16px;

}


.stat-chip{

display:flex;

flex-direction:column;

align-items:center;

background:rgba(7,16,28,.75);

border:1px solid rgba(67,183,255,.3);

border-radius:10px;

padding:6px 10px;

min-width:64px;

}


.stat-value{

font-family:Orbitron;

font-size:16px;

font-weight:900;

color:#f2c94c;

}


.stat-label{

font-size:9px;

letter-spacing:.5px;

text-transform:uppercase;

color:#9fb0c4;

margin-top:2px;

text-align:center;

}


.penalty-goal{

font-size:40px;

margin-bottom:6px;

filter:drop-shadow(0 0 10px rgba(67,183,255,.4));

}


.penalty-pitch{

position:relative;

height:90px;

margin:10px 0 18px;

}


.penalty-keeper{

position:absolute;

top:0;
left:50%;

transform:translateX(-50%);

font-size:34px;

transition:transform .55s cubic-bezier(.3,.8,.4,1.1);

}


.penalty-keeper.keeper-left{

transform:translateX(-150%) rotate(-12deg);

}


.penalty-keeper.keeper-right{

transform:translateX(50%) rotate(12deg);

}


.penalty-keeper.keeper-center{

transform:translateX(-50%) translateY(-6px) scale(1.08);

}


.penalty-ball{

position:absolute;

bottom:0;
left:50%;

transform:translateX(-50%);

font-size:26px;

transition:transform .6s cubic-bezier(.35,.6,.4,1);

}


.penalty-ball.ball-left{

transform:translate(-320%,-64px);

}


.penalty-ball.ball-center{

transform:translate(-50%,-70px);

}


.penalty-ball.ball-right{

transform:translate(220%,-64px);

}


.penalty-prompt{

font-family:Orbitron;

font-size:15px;

letter-spacing:1px;

color:#f2c94c;

margin-bottom:14px;

min-height:20px;

}


.penalty-shot-buttons{

display:flex;

gap:10px;

justify-content:center;

transition:opacity .25s ease;

}


.shot-btn{

flex:1;

background:#0b1626;

border:2px solid rgba(67,183,255,.4);

border-radius:12px;

padding:14px 8px;

color:#e6e6e6;

cursor:pointer;

display:flex;

flex-direction:column;

align-items:center;

gap:6px;

transition:.2s;

}


.shot-btn:hover{

border-color:#43b7ff;

background:#0f1e33;

transform:translateY(-3px);

}


.shot-arrow{

font-size:20px;

}


.shot-label{

font-family:Orbitron;

font-size:11px;

letter-spacing:1px;

text-transform:uppercase;

color:#aaa;

}


.penalty-status{

margin-top:16px;

font-family:Orbitron;

font-size:13px;

letter-spacing:1px;

color:#43b7ff;

min-height:18px;

}


/* ---------- Step 4: Result Screen ---------- */

.penalty-result{

margin-top:16px;

opacity:0;

transform:translateY(10px);

transition:opacity .35s ease,transform .35s ease;

}


.penalty-result.show{

opacity:1;

transform:translateY(0);

}


.result-headline{

font-family:Orbitron;

font-size:26px;

font-weight:900;

letter-spacing:1px;

color:#f2c94c;

margin-bottom:8px;

}


.penalty-result.outcome-save .result-headline{

color:#ff4d4d;

}


.penalty-result.outcome-post .result-headline{

color:#cfd8e3;

}


.penalty-result.outcome-var .result-headline{

color:#ff4d4d;

}


.penalty-result.outcome-alien .result-headline,
.penalty-result.outcome-squirrel .result-headline{

color:#6bff6b;

}


.penalty-result.outcome-perfect .result-headline{

color:#f2c94c;

text-shadow:0 0 18px rgba(242,201,76,.8);

animation:overloadPulse 1s infinite;

}


.result-flavor{

font-size:14px;

color:#ccc;

line-height:1.5;

margin-bottom:10px;

}


.result-points{

font-family:Orbitron;

font-size:15px;

font-weight:700;

color:#43b7ff;

margin-bottom:16px;

}


.penalty-again-row{

display:flex;

gap:10px;

justify-content:center;

margin-top:10px;

}


.penalty-again-btn,
.penalty-done-btn{

font-family:Orbitron;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

padding:10px 16px;

border-radius:10px;

cursor:pointer;

transition:.2s;

}


.penalty-again-btn{

background:linear-gradient(90deg,#f2c94c,#ffdf80);

border:none;

color:#07101c;

font-weight:700;

}


.penalty-again-btn:hover{

filter:brightness(1.08);

transform:translateY(-2px);

}


.penalty-done-btn{

background:transparent;

border:2px solid rgba(255,255,255,.25);

color:#ccc;

}


.penalty-done-btn:hover{

border-color:#43b7ff;

color:#43b7ff;

}


@media(max-width:800px){

.penalty-modal{

padding:22px 16px 26px;

}


.result-headline{

font-size:21px;

}


.shot-label{

font-size:10px;

}

}


/* ---------- Corner Discovery Progress ---------- */

.corner-progress{

margin-top:8px;

font-size:13px;

letter-spacing:1px;

color:#f2c94c;

font-weight:700;

opacity:0;

height:0;

overflow:hidden;

transition:opacity .3s ease;

}


.corner-progress.show{

opacity:1;

height:auto;

}


.corner-progress.pop{

animation:counterPop .3s ease;

}


/* ---------- Master Secrets Progress ---------- */

.secrets-progress{

margin-top:8px;

font-size:13px;

letter-spacing:1px;

color:#43b7ff;

font-weight:700;

opacity:0;

height:0;

overflow:hidden;

transition:opacity .3s ease;

}


.secrets-progress.show{

opacity:1;

height:auto;

}


.secrets-progress.pop{

animation:counterPop .3s ease;

}


/* =====================================================
   TOURNAMENT COMPLETE MODE
===================================================== */

.hall-of-fame-wrap{

text-align:center;

margin:24px 0;

}


.hall-of-fame-link{

display:inline-block;

margin-top:18px;

font-family:Orbitron;

font-size:13px;

letter-spacing:1.5px;

text-transform:uppercase;

color:#f2c94c;

text-decoration:none;

border:2px solid rgba(242,201,76,.4);

border-radius:100px;

padding:8px 20px;

transition:.2s;

}


.hall-of-fame-wrap .hall-of-fame-link{

margin-top:0;

}


.hall-of-fame-link:hover{

border-color:#43b7ff;

color:#43b7ff;

background:rgba(67,183,255,.08);

}


.tournament-complete-panel{

text-align:center;

}


/* ---------- Hall of Fame ---------- */

.hof-date{

color:#aaa;

font-size:14px;

margin:-10px 0 18px;

}


/* =====================================================
   BOOTYCUP v3 — Added styles: nav, modals, forms, admin
===================================================== */

.nav-bar{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin-top:14px;
}

.nav-btn{
background:rgba(242,201,76,.08);
border:1px solid #f2c94c;
color:#f2c94c;
font-family:'Inter',sans-serif;
font-weight:600;
font-size:13px;
padding:8px 16px;
border-radius:8px;
cursor:pointer;
text-decoration:none;
display:inline-block;
transition:all .15s ease;
}

.nav-btn:hover{
background:#f2c94c;
color:#07101c;
}

.nav-btn-ghost{
border-color:#43b7ff;
color:#43b7ff;
background:rgba(67,183,255,.08);
}

.nav-btn-ghost:hover{
background:#43b7ff;
color:#07101c;
}

.nav-btn-danger{
border-color:#ff4d4d;
color:#ff4d4d;
background:rgba(255,77,77,.08);
}

.nav-btn-danger:hover{
background:#ff4d4d;
color:#07101c;
}

.nav-user{
color:#cfd8e3;
font-size:13px;
font-weight:600;
padding:8px 4px;
}

#logoImg{
cursor:pointer;
}


/* ---------- Modal ---------- */

.modal-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(7,16,28,.75);
z-index:100;
align-items:center;
justify-content:center;
}

.modal-overlay.show{
display:flex;
}

.modal-box{
background:#0d1b30;
border:1px solid #f2c94c;
border-radius:14px;
padding:26px;
width:90%;
max-width:360px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.modal-title{
font-family:'Orbitron',sans-serif;
color:#f2c94c;
font-size:18px;
font-weight:700;
margin-bottom:18px;
text-align:center;
}

.modal-field{
margin-bottom:14px;
}

.modal-field label{
display:block;
color:#cfd8e3;
font-size:12px;
margin-bottom:5px;
}

.modal-field input{
width:100%;
box-sizing:border-box;
background:#0b1626;
border:1px solid #2a3a52;
color:#e6e6e6;
border-radius:8px;
padding:10px 12px;
font-size:14px;
}

.modal-field input:focus{
outline:none;
border-color:#43b7ff;
}

.modal-error, .admin-error{
color:#ff8080;
font-size:13px;
min-height:16px;
margin:6px 0;
}

.admin-success{
color:#6bff6b;
font-size:13px;
min-height:16px;
margin:6px 0;
}

.modal-actions{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:6px;
}


/* ---------- Predictions form ---------- */

.predictions-stage-header{
font-family:'Orbitron',sans-serif;
color:#43b7ff;
font-size:14px;
letter-spacing:.05em;
text-transform:uppercase;
margin:20px 0 8px;
border-bottom:1px solid #2a3a52;
padding-bottom:6px;
}

.predictions-stage-header:first-child{
margin-top:0;
}

.prediction-row{
background:#0b1626;
border:1px solid #2a3a52;
border-radius:10px;
padding:12px 14px;
margin-bottom:10px;
}

.prediction-row-top{
display:flex;
justify-content:space-between;
align-items:baseline;
flex-wrap:wrap;
gap:6px;
margin-bottom:8px;
}

.prediction-matchup{
font-weight:600;
color:#e6e6e6;
}

.prediction-matchup .vs{
color:#f2c94c;
font-size:11px;
margin:0 4px;
}

.prediction-kickoff{
color:#9fb0c4;
font-size:12px;
}

.prediction-row-bottom{
display:flex;
align-items:center;
gap:8px;
}

.score-input{
width:56px;
background:#07101c;
border:1px solid #2a3a52;
color:#e6e6e6;
border-radius:6px;
padding:8px;
text-align:center;
font-size:15px;
}

.score-input:disabled{
opacity:.5;
}

.score-dash{
color:#9fb0c4;
}

.pred-status{
margin-top:8px;
color:#cfd8e3;
font-size:13px;
}

.pred-locked{
color:#f2c94c;
}

.pred-error{
color:#ff8080;
font-size:12px;
margin-top:4px;
}


/* ---------- Admin ---------- */

.admin-tabs{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:18px 0;
}

.admin-tab{
background:transparent;
border:1px solid #2a3a52;
color:#9fb0c4;
font-family:'Inter',sans-serif;
font-weight:600;
font-size:13px;
padding:9px 14px;
border-radius:8px;
cursor:pointer;
}

.admin-tab.active{
border-color:#f2c94c;
color:#f2c94c;
background:rgba(242,201,76,.08);
}

.admin-subsection{
margin-bottom:22px;
}

.admin-subtitle{
color:#43b7ff;
font-weight:600;
font-size:14px;
margin-bottom:6px;
}

.admin-hint{
color:#9fb0c4;
font-size:12px;
margin:4px 0 10px;
}

.admin-inline-form{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
}

.admin-inline-form input, .admin-inline-form select{
background:#07101c;
border:1px solid #2a3a52;
color:#e6e6e6;
border-radius:6px;
padding:8px 10px;
font-size:13px;
}

.admin-match-row{
background:#0b1626;
border:1px solid #2a3a52;
border-radius:10px;
padding:12px 14px;
margin-bottom:10px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.admin-match-info{
color:#e6e6e6;
font-size:13px;
}

.admin-match-result{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

.admin-checkbox{
color:#cfd8e3;
font-size:12px;
display:flex;
align-items:center;
gap:4px;
}

.admin-user-row{
background:#0b1626;
border:1px solid #2a3a52;
border-radius:10px;
padding:12px 14px;
margin-bottom:10px;
}

.admin-user-row > div:first-child{
color:#e6e6e6;
margin-bottom:8px;
}

.scoring-table{
width:100%;
border-collapse:collapse;
font-size:13px;
}

.scoring-table th, .scoring-table td{
padding:8px;
text-align:center;
border-bottom:1px solid #2a3a52;
color:#e6e6e6;
}

.scoring-table th{
color:#43b7ff;
font-weight:600;
}

.scoring-table .score-input{
width:60px;
}

.admin-textarea{
width:100%;
box-sizing:border-box;
min-height:340px;
background:#07101c;
border:1px solid #2a3a52;
color:#e6e6e6;
border-radius:8px;
padding:12px;
font-family:monospace;
font-size:12px;
margin-bottom:12px;
}


/* =====================================================
   BOOTYCUP v3.1 — Nav pills (match hall-of-fame-link style)
===================================================== */

.nav-user-row{
display:none;
text-align:center;
margin-top:14px;
}

.nav-user-link{
display:inline-block;
font-family:'Inter',sans-serif;
font-weight:600;
font-size:14px;
color:#e6e6e6;
text-decoration:none;
padding:4px 10px;
border-radius:8px;
transition:.2s;
}

.nav-user-link:hover{
color:#43b7ff;
background:rgba(67,183,255,.08);
}

.nav-bar{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-top:12px;
margin-bottom:28px;
}

.nav-pill{
display:inline-block;
font-family:Orbitron;
font-size:13px;
letter-spacing:1.5px;
text-transform:uppercase;
color:#f2c94c;
text-decoration:none;
border:2px solid rgba(242,201,76,.4);
border-radius:100px;
padding:8px 20px;
background:transparent;
cursor:pointer;
transition:.2s;
}

.nav-pill:hover{
border-color:#43b7ff;
color:#43b7ff;
background:rgba(67,183,255,.08);
}


/* ---------- Avatar picker (account page) ---------- */

.avatar-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:14px 0 6px;
}

.avatar-option{
font-size:26px;
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
border:2px solid #2a3a52;
background:#0b1626;
cursor:pointer;
transition:.15s;
}

.avatar-option:hover{
border-color:#43b7ff;
}

.avatar-option.selected{
border-color:#f2c94c;
background:rgba(242,201,76,.12);
}


/* =====================================================
   BOOTYCUP v3.2 — Match edit fields, panel filter rows
===================================================== */

.admin-match-edit-fields{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
margin-bottom:10px;
width:100%;
}

.admin-match-edit-fields select,
.admin-match-edit-fields input{
background:#07101c;
border:1px solid #2a3a52;
color:#e6e6e6;
border-radius:6px;
padding:8px 10px;
font-size:13px;
}

.admin-match-edit-fields .edit-match-error{
width:100%;
}

.admin-match-display{
flex:1;
min-width:200px;
}


/* ---------- Panel filter rows (Match Center / Prediction Ratio) ---------- */

.panel-filter-row{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:10px;
margin-bottom:16px;
}

.panel-filter-row .panel-select-left{
grid-column:1;
justify-self:start;
}

.panel-filter-row .panel-select-center{
grid-column:2;
justify-self:center;
}

.panel-select{
background:#07101c;
border:1px solid #2a3a52;
color:#e6e6e6;
border-radius:8px;
padding:8px 12px;
font-size:13px;
font-family:'Inter',sans-serif;
}


/* ---------- My Predictions filter row ---------- */

.predictions-filter-row{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
margin-bottom:14px;
}

.predictions-filter-checkbox{
display:flex;
align-items:center;
gap:6px;
color:#cfd8e3;
font-size:13px;
}

.pred-save-status{
color:#6bff6b;
font-size:12px;
margin-top:6px;
min-height:14px;
transition:opacity 1s ease;
}

.pred-save-status.fade-out{
opacity:0;
}