/* Global Reset */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* Body */

body{

background: radial-gradient(circle at top,#0f172a,#020617);
font-family: "Fira Code", monospace;
color:#e2e8f0;
min-height:100vh;
padding:40px;

}

/* Main Container */

.container{

max-width:900px;
margin:auto;
padding:30px;

background:#020617;
border-radius:12px;

box-shadow:
0 0 40px rgba(0,0,0,0.8),
0 0 10px rgba(56,189,248,0.2);

}

/* Title */

h1{

text-align:center;
margin-bottom:25px;
font-size:34px;
color:#38bdf8;

text-shadow:
0 0 10px rgba(56,189,248,0.7);

}

/* Room Title */

#roomTitle{

margin-top:10px;
font-size:24px;
color:#facc15;

}

/* Stats */

#stats{

margin-bottom:20px;
font-size:16px;
color:#94a3b8;

}

/* Description */

#description{

margin:10px 0 20px 0;
padding:15px;

background:#0f172a;
border-left:4px solid #38bdf8;
border-radius:6px;

line-height:1.6;

}

/* Code Blocks */

pre{

background:#020617;
border:1px solid #334155;

padding:20px;
border-radius:8px;

overflow-x:auto;

font-size:14px;

color:#22c55e;

margin-bottom:20px;

}

/* Code Editor */

textarea{

width:100%;
height:220px;

background:#020617;
color:#22c55e;

border:1px solid #334155;
border-radius:8px;

padding:15px;

font-size:14px;
font-family:"Fira Code", monospace;

resize:vertical;

margin-bottom:15px;

}

/* Buttons */

button{

width:100%;
padding:12px;

background:linear-gradient(
90deg,
#2563eb,
#38bdf8
);

border:none;
border-radius:8px;

color:white;
font-size:16px;
font-weight:600;

cursor:pointer;

transition:all 0.2s ease;

}

/* Button Hover */

button:hover{

transform:scale(1.03);

box-shadow:
0 0 10px rgba(56,189,248,0.6);

}

/* Result Message */

#result{

margin-top:15px;

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

text-align:center;

}

/* Success */

.success{

color:#22c55e;

text-shadow:
0 0 10px rgba(34,197,94,0.5);

}

/* Failure */

.fail{

color:#ef4444;

text-shadow:
0 0 10px rgba(239,68,68,0.5);

}

/* Labels */

h3{

margin:15px 0 8px 0;
color:#38bdf8;

}

/* Scrollbar Styling */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#020617;
}

::-webkit-scrollbar-thumb{
background:#334155;
border-radius:10px;
}

/* Responsive */

@media (max-width:768px){

body{
padding:15px;
}

.container{
padding:20px;
}

textarea{
height:180px;
}

}

#editor{
height:300px;
border:1px solid #334155;
border-radius:8px;
margin-bottom:15px;
}