body{

margin:0;
padding:0;

background:#000;

color:white;

font-family:Arial, Helvetica, sans-serif;
}

.container{

max-width:900px;

margin:auto;

padding:40px 30px;
}

h1{

text-align:center;

font-size:70px;

margin-bottom:10px;
}

h2{

text-align:center;

font-size:40px;

margin-bottom:30px;
}

#timer,
#adminTimer{

font-size:120px;

font-weight:bold;

text-align:center;

color:#00ff99;

margin:30px 0;
}

input{

width:100%;

padding:22px;

margin-bottom:18px;

border:none;

border-radius:14px;

background:#111;

color:white;

font-size:26px;

box-sizing:border-box;
}

input::placeholder{

color:#666;
}

button{

width:100%;

padding:22px;

margin-bottom:18px;

border:none;

border-radius:14px;

background:#e5e5e5;

color:black;

font-size:26px;

font-weight:bold;

cursor:pointer;

transition:0.2s;
}

button:hover{

transform:scale(1.02);
}

.answer-card{

background:#111;

padding:28px;

border-radius:20px;

margin-top:30px;
}

.answer-card h3{

margin-top:0;

font-size:32px;
}

.score-options{

display:flex;

flex-direction:column;

gap:18px;
}

.score-row{

display:flex;

justify-content:space-between;

align-items:center;

background:#1a1a1a;

padding:18px 20px;

border-radius:14px;
}

.score-left{

display:flex;

flex-direction:column;

gap:6px;
}

.score-label{

font-size:18px;

font-weight:bold;
}

.score-answer{

font-size:16px;

color:#cfcfcf;
}

.score-row input[type="checkbox"]{

width:32px;
height:32px;

cursor:pointer;
}

.participants-box{

background:#111;

padding:28px;

border-radius:20px;

margin-top:40px;

margin-bottom:30px;
}

.participant-row{

display:grid;

grid-template-columns:
1fr
1fr
auto;

align-items:center;

padding:18px 0;

border-bottom:1px solid #2a2a2a;

gap:20px;
}

.participant-name{

font-size:20px;

font-weight:bold;
}

.participant-points{

font-size:20px;

font-weight:bold;

color:#00ff99;

text-align:center;
}

.participant-actions{

display:flex;

align-items:center;

justify-content:flex-end;

gap:12px;
}

.participant-status{

font-size:18px;

font-weight:bold;
}

.remove-user-btn{

background:#ff4d4d;
color:white;

border:none;

width:34px;
height:34px;

border-radius:8px;

font-size:18px;
font-weight:bold;

cursor:pointer;

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

padding:0;

margin:0;

transition:0.2s;
}

.remove-user-btn:hover{

background:#ff2222;

transform:scale(1.08);
}

.jump-box{

display:flex;

gap:12px;

margin-bottom:18px;
}

.jump-box input{

margin:0;
}

.jump-box button{

width:220px;

margin:0;
}

.logged-user{

text-align:center;

font-size:24px;

margin-bottom:30px;

color:#bdbdbd;
}

.logged-user strong{

color:#00ff99;
}

.my-position{

background:#111;

padding:20px;

border-radius:18px;

margin-bottom:30px;

text-align:center;
}

#myPosition{

font-size:28px;

font-weight:bold;

margin-bottom:12px;

color:#00ff99;
}

#myPoints{

font-size:24px;

color:#fff;
}

#statusMessage{

text-align:center;

font-size:24px;

margin-top:20px;

font-weight:bold;

color:#00ff99;
}

@media(max-width:768px){

h1{

font-size:52px;
}

h2{

font-size:34px;
}

#timer,
#adminTimer{

font-size:90px;
}

button,
input{

font-size:22px;
}

.participant-row{

grid-template-columns:1fr;

gap:12px;
}

.participant-points{

text-align:left;
}

.participant-actions{

justify-content:space-between;
}

.jump-box{

flex-direction:column;
}

.jump-box button{

width:100%;
}

#myPosition{

font-size:22px;
}

#myPoints{

font-size:20px;
}

  .top-bar{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:20px;
}

.top-bar h1{

margin:0;

flex:1;

text-align:left;
}

.logout-btn{

width:auto;

padding:12px 22px;

margin:0;

background:#ff4d4d;

color:white;

font-size:18px;

border-radius:12px;
}

.logout-btn:hover{

background:#ff2222;
}

@media(max-width:768px){

.top-bar{

flex-direction:column;

align-items:stretch;
}

.top-bar h1{

text-align:center;
}

.logout-btn{

width:100%;
}
}