/* =========================
   SKY MUSTANG RACER 3D
   STYLE.CSS
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:
Arial,
sans-serif;
}

body{

overflow:hidden;

background:
linear-gradient(
to bottom,
#020111,
#000000
);

color:white;

}

/* =========================
   GAME CANVAS
========================= */

#gameCanvas{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:1;

}

/* =========================
   LOADING SCREEN
========================= */

#loadingScreen{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
135deg,
#000000,
#050520,
#000000
);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

}

.logo{

font-size:40px;

font-weight:bold;

color:#00ffff;

text-shadow:

0 0 20px cyan,

0 0 40px cyan;

margin-bottom:30px;

}

.loadingCar{

font-size:80px;

animation:
carMove 1s infinite;

}

@keyframes carMove{

0%{
transform:
translateX(-20px);
}

50%{
transform:
translateX(20px);
}

100%{
transform:
translateX(-20px);
}

}

.loadingBar{

width:70%;

height:22px;

background:#111;

border-radius:20px;

overflow:hidden;

margin-top:30px;

border:
2px solid cyan;

}

#loadingFill{

width:0%;

height:100%;

background:

linear-gradient(
90deg,
cyan,
blue
);

}

#loadingPercent{

margin-top:10px;

font-size:22px;

color:white;

}

#loadingText{

margin-top:10px;

color:#ccc;

}

#tipBox{

margin-top:20px;

padding:12px;

border-radius:12px;

background:
rgba(
255,
255,
255,
0.08
);

color:#ffd700;

}

/* =========================
   LOGIN SCREEN
========================= */

#loginScreen{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:
rgba(
0,
0,
0,
0.95
);

z-index:9999;

}

.loginBox{

padding:30px;

border-radius:20px;

background:
rgba(
255,
255,
255,
0.05
);

backdrop-filter:
blur(10px);

}

#nicknameInput{

padding:12px;

border:none;

outline:none;

border-radius:10px;

width:240px;

font-size:18px;

}

#diceBtn{

margin-left:10px;

font-size:22px;

padding:10px;

border:none;

border-radius:10px;

}

/* =========================
   LOBBY
========================= */

#lobby{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:100;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:

linear-gradient(
to bottom,
rgba(0,0,30,0.4),
rgba(0,0,0,0.8)
);

}

#profileCard{

width:320px;

padding:20px;

border-radius:20px;

background:

rgba(
255,
255,
255,
0.08
);

backdrop-filter:
blur(12px);

border:
1px solid cyan;

box-shadow:

0 0 20px cyan;

}

#profileCard div{

margin:10px 0;

font-size:18px;

}

#lobbyButtons{

margin-top:25px;

display:flex;

flex-direction:column;

gap:12px;

}

#lobbyButtons button{

padding:14px;

width:250px;

font-size:18px;

border:none;

border-radius:14px;

background:

linear-gradient(
90deg,
#00ffff,
#0066ff
);

color:white;

font-weight:bold;

}

/* =========================
   HUD
========================= */

#hud{

position:fixed;

top:15px;
left:15px;

z-index:1000;

padding:15px;

border-radius:15px;

background:

rgba(
0,
0,
0,
0.45
);

display:none;

}

#hud div{

margin:5px 0;

font-size:18px;

}

/* =========================
   CONTROLS
========================= */

#controls{

position:fixed;

bottom:25px;

width:100%;

display:flex;

justify-content:center;

gap:20px;

z-index:999;

}

#controls button{

width:70px;

height:70px;

border:none;

border-radius:50%;

font-size:28px;

background:

rgba(
255,
255,
255,
0.15
);

backdrop-filter:
blur(8px);

color:white;

}

/* =========================
   JOYSTICK
========================= */

#joyBase{

position:fixed;

left:25px;

bottom:25px;

width:140px;

height:140px;

border-radius:50%;

background:

rgba(
255,
255,
255,
0.1
);

z-index:999;

}

#joyStick{

position:absolute;

left:45px;

top:45px;

width:50px;

height:50px;

border-radius:50%;

background:cyan;

box-shadow:

0 0 20px cyan;

}

/* =========================
   LEVEL UP POPUP
========================= */

#levelPopup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:none;

justify-content:center;

align-items:center;

background:
rgba(
0,
0,
0,
0.8
);

z-index:99999;

}

.popupBox{

padding:30px;

border-radius:20px;

background:#111;

text-align:center;

box-shadow:

0 0 40px cyan;

animation:
popupScale .4s;

}

@keyframes popupScale{

from{

transform:
scale(0.5);

opacity:0;

}

to{

transform:
scale(1);

opacity:1;

}

}

/* =========================
   LUCK ROYALE
========================= */

#royalePanel{

position:fixed;

top:50%;
left:50%;

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

padding:25px;

border-radius:20px;

background:#111;

text-align:center;

z-index:9999;

box-shadow:

0 0 30px magenta;

}

#wheel{

font-size:90px;

margin:20px;

animation:
glow 2s infinite;

}

@keyframes glow{

0%{
filter:
drop-shadow(
0 0 10px cyan
);
}

50%{
filter:
drop-shadow(
0 0 25px magenta
);
}

100%{
filter:
drop-shadow(
0 0 10px cyan
);
}

}

/* =========================
   SETTINGS
========================= */

#settingsPanel{

position:fixed;

right:0;

top:0;

width:300px;

height:100%;

padding:20px;

background:
rgba(
0,
0,
0,
0.95
);

z-index:9999;

}

#settingsPanel button{

width:100%;

padding:12px;

margin-top:10px;

border:none;

border-radius:10px;

}

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

@media(max-width:768px){

.logo{

font-size:26px;

}

#profileCard{

width:90%;

}

#lobbyButtons button{

width:90vw;

}

}