/* ========================= */
/* ROOT THEME VARIABLES */
/* ========================= */

:root{

--gold:#ffd84d;
--purple:#8247e5;
--pink:#ff6ad5;

--bg:#f5f6ff;
--panel:rgba(255,255,255,0.75);
--border:#e7c20e;

}

/* ========================= */
/* BASE */
/* ========================= */

body{
margin:0;

background:linear-gradient(180deg,#ffffff,#eef1ff);

color:#222;

font-family:'Titan One', sans-serif;
}

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

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;

background:rgba(255,255,255,.85);
backdrop-filter:blur(10px);

border-bottom:1px solid var(--border);
}

.brand{
font-size:28px;
color:var(--purple);
letter-spacing:1px;
}

#stakeAmount{
margin-bottom:15px; /* space below input */
}

#stakeBtn{
margin-top:10px; /* extra space above button */
}

.stat-gif{
width:60px;
height:60px;
object-fit:contain;
display:block;
margin:0 auto 8px;
}

/* ========================= */
/* NEON BORDER ANIMATION */
/* ========================= */

.btn{
position:relative;
z-index:1;
overflow:hidden;
}

.btn::before{
content:"";
position:absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;

background:linear-gradient(
90deg,
#ff00cc,
#3333ff,
#00ffcc,
#ffcc00,
#ff00cc
);

background-size:400%;
border-radius:12px;

z-index:-1;

animation:neonRotate 4s linear infinite;
}

.btn::after{
content:"";
position:absolute;
top:2px;
left:2px;
right:2px;
bottom:2px;
background:linear-gradient(45deg,#8247e5,#a855f7);
border-radius:10px;
z-index:-1;
}

/* CLOCKWISE ANIMATION */
@keyframes neonRotate{
0%{background-position:0% 50%;}
100%{background-position:400% 50%;}
}


/* ========================= */
/* HERO */
/* ========================= */

.hero{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

padding:60px 20px;

max-width:1100px;
margin:auto;
}

.hero img{
max-width:420px;
width:100%;
margin-top:20px;
}

.hero-left h1{
font-size:42px;
color:var(--purple);
}

.hero-left h2{
font-size:30px;
color:#9859cf;
}

.hero-left p{
opacity:.8;
}


.footer-links img{
width:20px;
height:20px;
vertical-align:middle;
margin-right:6px;

}


#refLink{
width:90%;
max-width:420px;

padding:14px 16px;

border-radius:12px;
border:2px solid #8247e5;

background:#0a0a14;
color:#00ffd5;

font-family:monospace;
font-size:15px;
letter-spacing:1px;

text-align:center;

/* 🔥 subtle glow (no animation) */
box-shadow:0 0 10px rgba(0,255,213,0.25);

/* make it feel like a link */
cursor:pointer;
}

/* when user clicks */
#refLink:focus{
outline:none;
border-color:#00ffd5;
box-shadow:0 0 15px rgba(0,255,213,0.6);
}

/* ========================= */
/* GAME TITLE */
/* ========================= */

.game-title{

font-family:'Titan One', sans-serif;

font-size:64px;

background:linear-gradient(180deg,#fff6a3,#ffd84d,#ffb300);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

-webkit-text-stroke:1px #000;

text-shadow:
2px 2px 0 #f3c803, 0 0 8px rgba(255, 216, 77, .6);

}

/* ========================= */
/* MAIN LAYOUT */
/* ========================= */

.center{
display:flex;
justify-content:center;
padding:40px 20px;
}

.center-card{

max-width:950px;
width:100%;

background:var(--panel);

border-radius:18px;

padding:35px;

border:1px solid var(--border);

backdrop-filter:blur(12px);

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

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

.panel{

background:rgba(255,255,255,.65);

padding:22px;

border-radius:14px;

border:1px solid var(--border);

margin-bottom:25px;

}

/* SECTION TITLES */

.panel h3{

font-size:34px;

background:linear-gradient(180deg,#fff6a3,#ffd84d,#ffb300);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

-webkit-text-stroke:1px #000;

text-shadow:
2px 2px 0 #e5bb27f7, 0 0 10px rgba(255, 216, 77, .6);

margin-bottom:18px;

}

/* ========================= */
/* DASHBOARD */
/* ========================= */

.dashboard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:18px;
margin-top:15px;
}

/* SMALL STAT BOX */

.dashboard .panel{

text-align:center;

background:rgba(255,255,255,.85);

}

/* ========================= */
/* STAT NUMBERS */
/* ========================= */

.stat-number{

font-size:26px;

color:#41266f;

font-weight:bold;

-webkit-text-stroke:0.6px #fff;

text-shadow:
1px 1px 0 #000,
0 0 6px rgba(130,71,229,.45);

}

/* CHEF STATS */

#chefs,
#platingSpeed,
#chefWithdrawable{

font-size:42px;

color:#00ffd5;

font-weight:bold;

-webkit-text-stroke:1px #000;

text-shadow:
0 0 10px #00ffd5,
0 0 20px #00ffd5,
2px 2px 0 #000;

animation:pulseStat 2s infinite;
}

@keyframes pulseStat{
0%{transform:scale(1);}
50%{transform:scale(1.08);}
100%{transform:scale(1);}
}

/* ========================= */
/* INPUT */
/* ========================= */

#stakeAmount,
#calcPOL{

width:80%;
padding:18px;

font-size:20px;

border-radius:10px;
border:2px solid #8247e5;

background:#0f0f1a;

color:#ffffff;

font-weight:bold;

box-shadow:0 0 10px rgba(130,71,229,0.5);

}

/* BLINK EFFECT FOR CALCULATOR */
#calcPOL{
animation:blinkDark 1.2s infinite;
}

@keyframes blinkDark{
0%{box-shadow:0 0 10px rgba(130,71,229,0.3);}
50%{box-shadow:0 0 20px rgba(255,0,200,0.9);}
100%{box-shadow:0 0 10px rgba(130,71,229,0.3);}
}

/* ========================= */
/* BUTTONS */
/* ========================= */

.btn{

background:linear-gradient(45deg,#8247e5,#a855f7);

border:none;

padding:12px 25px;

border-radius:10px;

color:white;

cursor:pointer;

font-family:'Titan One', sans-serif;

box-shadow:0 4px 12px rgba(130,71,229,.4);

transition:.2s;

}

.btn:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(130,71,229,.5);

}

/* ========================= */
/* WITHDRAW BOX */
/* ========================= */

.withdrawable-box{
margin-top:20px;
margin-bottom:15px;
}

/* ========================= */
/* REFERRAL LIST */
/* ========================= */

.rewards-dashboard{
list-style:none;
padding:0;
margin-top:15px;
}

.rewards-dashboard li{

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

padding:12px 15px;

margin-bottom:8px;

background:rgba(255,255,255,.85);

border:1px solid var(--border);

border-radius:8px;

}

/* ========================= */
/* FAQ */
/* ========================= */

.faq-item{

margin-bottom:15px;

padding:10px;

border-bottom:1px solid var(--border);

}

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

footer{

text-align:center;

padding:35px;

background:rgba(255,255,255,.85);

margin-top:40px;

}





#withdrawable{

font-size:32px;

color:#691fd1;

text-shadow:
0 0 10px #ffcc00,
0 0 20px #ff9900,
2px 2px 0 #000;

animation:pulseGold 2s infinite;
}

@keyframes pulseGold{
0%{opacity:1;}
50%{opacity:.7;}
100%{opacity:1;}
}

label{
font-size:18px;
color:#333;
margin-top:10px;
display:block;
}



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

@media(max-width:768px){

.hero img{
max-width:280px;
}

.center-card{
padding:25px;
}

.panel{
max-width:100%;
}

.dashboard{
grid-template-columns:1fr;
}

}