/* ========================= */
/* 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;
}

/* ========================= */
/* 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;
}

/* ========================= */
/* 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:24px;
font-weight:bold;
color:#7945ad;

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

text-shadow:
2px 2px 0 #000,
0 0 6px rgba(121,69,173,.7);

}

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

#stakeAmount{

width:100%;

padding:10px;

border-radius:8px;

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

background:white;

margin-top:10px;
margin-bottom:15px;

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

}

/* ========================= */
/* 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;

}

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

@media(max-width:768px){

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

.center-card{
padding:25px;
}

.panel{
max-width:100%;
}

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

}