*{
margin:0;
padding:0;
box-sizing:border-box;
transition:background-color .4s,color .4s;
}

body{
font-family:Arial, Helvetica, sans-serif;
text-align:center;
background-size:cover;
background-position:center;
min-height:100vh;
padding:20px;
}



/* CENTER PANEL */

.centerBox{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

background:rgba(255,255,255,0.9);
padding:40px;

border-radius:18px;

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

}

.darkMode .centerBox{
background:rgba(30,30,30,.9);
}



/* USERNAME INPUT */

#username{

width:140px;

padding:12px;

border-radius:25px;

border:2px solid #aaa;

font-size:16px;

transition:width .35s;

margin-top:15px;

}

#username:focus{
width:260px;
}



/* START BUTTON */

#startButton{

font-size:28px;

padding:18px 45px;

border:none;

border-radius:14px;

background:linear-gradient(45deg,#3b82f6,#2563eb);

color:white;

cursor:pointer;

margin-top:20px;

}

#startButton:hover{
transform:scale(1.05);
}



/* GAME LAYOUT */

.container{

display:flex;
justify-content:space-between;
gap:20px;
padding:20px;

}



/* MAIN AREA */

.main{
flex:2;
}



/* CLICK BUTTON */

#clickButton{

font-size:32px;

padding:22px 55px;

border:none;

border-radius:14px;

background:linear-gradient(45deg,#3b82f6,#2563eb);

color:white;

cursor:pointer;

margin-top:20px;

}



/* LOG */

#log{

height:200px;

overflow:auto;

border:1px solid #444;

border-radius:10px;

padding:10px;

margin-bottom:20px;

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

}

.darkMode #log{
background:rgba(30,30,30,.8);
}



/* LEADERBOARD */

.leaderboard{

flex:1;

background:#eee;

padding:15px;

border-radius:10px;

box-shadow:0 4px 10px rgba(0,0,0,.2);

}

.darkMode .leaderboard{
background:#1f1f1f;
}

.leaderboard ul{
list-style:none;
margin-top:10px;
}

.leaderboard li{
padding:6px;
border-bottom:1px solid #ccc;
}



/* MODE BUTTONS */

.modeButtons{

position:fixed;

bottom:80px;
right:10px;

display:flex;
flex-direction:column;
gap:8px;

}

.modeButtons button{

padding:8px 12px;

border:none;

border-radius:8px;

cursor:pointer;

}



/* BACKGROUND BUTTON */

.backgroundControls{

position:fixed;

bottom:10px;
right:10px;

}

#bgUpload{
display:none;
}

.bgButtonLabel{

background:#3b82f6;
color:white;

padding:8px 12px;

border-radius:8px;

cursor:pointer;

}



/* THEMES */

.lightMode{
background:#f5f5f5;
color:#111;
}

.darkMode{
background:#121212;
color:#fff;
}



/* FOOTER */

.footerText{

position:fixed;

bottom:2px;
left:50%;

transform:translateX(-50%);

font-size:12px;

color:#888;

}



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

@media(max-width:800px){

.container{
flex-direction:column;
}

.main{
width:100%;
}

.leaderboard{
width:100%;
margin-top:20px;
}

#clickButton{
width:90%;
font-size:26px;
padding:20px;
}

#startButton{
width:90%;
}

.centerBox{
width:90%;
}

}


/* ADMIN PANEL */

#adminPanel{
padding:40px;
max-width:900px;
margin:auto;
}

.adminPlayerCard{

background:#ffffff;

border-radius:14px;

padding:20px;

margin-bottom:20px;

box-shadow:0 6px 15px rgba(0,0,0,0.15);

}

.darkMode .adminPlayerCard{
background:#1f1f1f;
}

.adminDelete{

background:#e63946;

color:white;

border:none;

padding:8px 14px;

border-radius:6px;

cursor:pointer;

margin-bottom:10px;

}

.adminDelete:hover{
opacity:0.8;
}

.adminHistory{

font-weight:bold;

margin-top:10px;

}

.adminPlayerCard ul{

max-height:200px;

overflow-y:auto;

padding-left:18px;

}

.adminPlayerCard li{

font-size:14px;

margin-bottom:4px;

color:#555;

}

.darkMode .adminPlayerCard li{
color:#ccc;
}