/* =====================================
PULAUTOTOQ GAMING DASHBOARD
ARCADE MACHINE STYLE
===================================== */


@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap');



:root{


--bg:
#070711;


--bg-card:
#151525;


--bg-card2:
#1d1d35;


--purple:
#8b5cf6;


--cyan:
#00eaff;


--gold:
#ffc107;


--white:
#ffffff;


--gray:
#9ca3af;


}




*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Orbitron',sans-serif;

}



body{


background:


radial-gradient(
circle at top,
#25254b,
#070711 45%
);


color:white;

min-height:100vh;


}





/* =====================
GLOBAL LINK
===================== */


a{

text-decoration:none;

color:white;

}



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


.dashboard{


display:flex;

min-height:100vh;


}



/* =====================
SIDEBAR
===================== */


.sidebar{


width:260px;


background:


linear-gradient(
180deg,
#10101d,
#070711
);


border-right:

1px solid rgba(255,255,255,.08);



padding:25px;



position:fixed;


height:100vh;


}



.logo{


font-size:25px;

font-weight:900;


color:var(--gold);


text-align:center;


margin-bottom:35px;


text-shadow:

0 0 15px #ffc107;


}




.menu a{


display:flex;


align-items:center;


gap:12px;


padding:14px;


margin-bottom:10px;


border-radius:14px;


color:#ddd;


transition:.3s;


}



.menu a:hover{


background:

rgba(139,92,246,.25);


box-shadow:

0 0 15px rgba(139,92,246,.4);


color:white;


}




/* =====================
MAIN AREA
===================== */


.main{


margin-left:260px;


width:100%;


padding:25px;


}




/* =====================
TOP NAV
===================== */


.topbar{


height:80px;


background:

rgba(255,255,255,.05);


border:

1px solid rgba(255,255,255,.1);



border-radius:20px;


display:flex;


justify-content:space-between;


align-items:center;


padding:20px;


margin-bottom:25px;


backdrop-filter:blur(10px);


}



/* =====================
PLAYER PROFILE
===================== */


.player{


display:flex;


align-items:center;


gap:15px;


}



.avatar{


width:50px;

height:50px;


border-radius:50%;


background:

linear-gradient(
135deg,
var(--purple),
var(--cyan)
);


display:flex;


align-items:center;


justify-content:center;


font-weight:bold;


}





.login-btn{


background:

linear-gradient(
90deg,
#ffc107,
#ff9800
);


color:black;


padding:

12px 25px;


border-radius:30px;


font-weight:bold;


}



/* =====================
ARCADE CARD
===================== */


.arcade-card{


background:


linear-gradient(
145deg,
#1b1b32,
#10101c
);


border:

1px solid rgba(255,255,255,.1);



border-radius:22px;


padding:25px;


box-shadow:


0 0 30px rgba(139,92,246,.2);



margin-bottom:25px;


}



/* =====================
BUTTON
===================== */


.arcade-button{


display:inline-block;


background:


linear-gradient(
90deg,
#ffc107,
#ff9800
);


padding:

14px 35px;


border-radius:50px;


color:black;


font-weight:900;


cursor:pointer;


}



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


.section-title{


font-size:25px;


margin-bottom:20px;


color:white;


text-shadow:


0 0 15px rgba(0,234,255,.5);


}



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


footer{


text-align:center;


padding:25px;


color:#aaa;


}



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


@media(max-width:768px){


.sidebar{


position:relative;


width:100%;


height:auto;


}



.dashboard{


display:block;


}



.main{


margin-left:0;


padding:15px;


}


.topbar{


flex-direction:column;


height:auto;


gap:15px;


}



.menu{


display:flex;


overflow:auto;


}



.menu a{


min-width:140px;


}


}

/* =========================
HOME PAGE
========================= */


.hero-arcade{


background:

linear-gradient(
135deg,
#8b5cf6,
#00eaff
);


padding:40px;


border-radius:30px;


display:flex;


justify-content:space-between;


align-items:center;


margin-bottom:30px;


}



.hero-arcade h1{


font-size:42px;


}



.hero-icon{


font-size:100px;


}




.home-grid{


display:grid;


grid-template-columns:

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


gap:20px;


margin-bottom:30px;


}




.home-card,


.game-preview{


background:


linear-gradient(
145deg,
#19192d,
#0d0d18
);



padding:30px;


border-radius:25px;


text-align:center;


border:

1px solid rgba(255,255,255,.1);



transition:.3s;


}




.home-card:hover,


.game-preview:hover{


transform:translateY(-8px);


box-shadow:

0 0 25px rgba(139,92,246,.5);


}





.game-preview{


font-size:35px;


}



.game-preview h3{


font-size:20px;


margin:15px 0;


}




.game-preview a{


display:inline-block;


margin-top:15px;


padding:10px 25px;


background:#ffc107;


color:black;


border-radius:30px;


font-size:14px;


}





.voucher-mini{


display:grid;


grid-template-columns:

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


gap:15px;


}



.voucher-mini div{


padding:20px;


text-align:center;


border-radius:20px;


background:

rgba(0,234,255,.15);


}





.status-grid{


display:grid;


grid-template-columns:

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


gap:20px;


}




.review-mini{


display:grid;


grid-template-columns:

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


gap:20px;


}



.review-mini div{


background:#151525;


padding:25px;


border-radius:20px;


text-align:center;


}



.promo-home{


margin-top:30px;


padding:40px;


border-radius:30px;


text-align:center;


background:

linear-gradient(
135deg,
#ff9800,
#ffc107
);


color:black;


}



@media(max-width:768px){


.hero-arcade{


flex-direction:column;


text-align:center;


}



.hero-arcade h1{


font-size:30px;


}


}

.rank small{

display:block;

margin-top:8px;

color:#00eaff;

font-size:13px;

}


.rank p{

color:#ffc107;

font-weight:bold;

}