/* style.css — clean, colorful UI */
:root{
  --bg:#0f1724; --panel:#0b1220; --accent:#36c3ff; --muted:#9aa6b2; --glass:rgba(255,255,255,0.03);
}
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#071226 0%, #081826 60%);color:#e6eef6}
header{padding:28px 24px;text-align:center}
header h1{margin:0;font-size:2rem;letter-spacing:0.6px}
.tag{color:var(--muted);margin-top:6px}
.buttons{margin-top:12px}
.buttons button{background:linear-gradient(90deg,var(--accent),#7de2ff);border:0;padding:10px 14px;border-radius:8px;margin:6px;color:#05202b;font-weight:700;cursor:pointer}
main{display:flex;gap:16px;padding:18px}
#menu{display:flex;flex-direction:column;gap:8px;width:180px}
#menu button{background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:8px;color:#cfe9ff;cursor:pointer}
#menu button.active{background:linear-gradient(90deg,#052a39,#0e4b5b);box-shadow:0 4px 18px rgba(10,60,80,0.35)}
#screens{flex:1}
.screen{display:none}
.screen.active{display:block}
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);margin-top:12px}
.games{display:flex;gap:12px}
.game-card{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;flex:1}
.hidden{display:none}
button[data-game], .start-lesson{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:8px 10px;border-radius:8px;cursor:pointer}
#game-area, #lesson-player{margin-top:14px}
footer{padding:18px;text-align:center;color:var(--muted)}
input[type=text]{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.code{font-family:monospace;background:rgba(0,0,0,0.3);padding:8px;border-radius:6px;color:#bfefff}
.note{color:var(--muted)}
@media(max-width:900px){main{flex-direction:column}#menu{flex-direction:row;overflow:auto;width:auto}}