*{box-sizing:border-box;margin:0;padding:0}
body{
  background:radial-gradient(circle at top,#1e293b 0,#020617 45%,#000 100%);
  color:#e5e7eb;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
}
canvas{display:block}
#ui-overlay{position:fixed;inset:0;pointer-events:none;z-index:10}
.card{
  pointer-events:auto;
  background:rgba(15,23,42,.94);
  border-radius:16px;
  padding:14px 16px;
  color:#e5e7eb;
  box-shadow:0 16px 50px rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.7);
  backdrop-filter:blur(18px);
}
#join-screen{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  max-width:340px;width:92%;
}
#join-screen h1{font-size:22px;margin-bottom:6px}
.sub{font-size:12px;color:#9ca3af;margin-bottom:8px}
label{display:block;font-size:13px;margin-top:10px}
input{
  width:100%;margin-top:4px;padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.8);
  background:rgba(15,23,42,.9);
  color:#e5e7eb;font-size:14px;outline:none;
}
input:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 1px rgba(56,189,248,.7);
}
button{
  margin-top:12px;padding:8px 10px;
  background:linear-gradient(135deg,#22c55e,#22d3ee);
  color:#fff;border:none;border-radius:999px;
  font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 30px rgba(34,197,94,.5);
}
button:active{
  transform:translateY(1px);
  box-shadow:0 6px 20px rgba(34,197,94,.5);
}
.hint{font-size:11px;margin-top:10px;color:#9ca3af}
.hint code{
  background:rgba(15,23,42,.9);
  padding:2px 5px;border-radius:6px;
}
.small{padding:10px 12px;font-size:12px}
#hud{
  position:absolute;top:10px;left:10px;
  min-width:170px;
}
#info{
  position:absolute;left:10px;bottom:10px;
  max-width:260px;
}
#leaderboard{
  position:absolute;top:10px;right:10px;
  min-width:160px;
}
.lb-title{
  font-weight:700;
  font-size:13px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(148,163,184,.5);
  padding-bottom:2px;
}
.lb-row{
  font-size:11px;
  display:flex;
  justify-content:space-between;
  margin-bottom:2px;
}
.lb-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{color:#eab308;font-weight:600}
#chat-box{
  position:absolute;right:10px;bottom:10px;
  width:260px;max-height:45vh;
  display:flex;flex-direction:column;gap:6px;
}
#chat-messages{
  flex:1;overflow-y:auto;font-size:11px;padding-right:4px;
}
.chat-msg{margin-bottom:4px;word-wrap:break-word}
.chat-msg span.name{color:#38bdf8;font-weight:600}
.chat-msg span.time{color:#6b7280;font-size:10px;margin-left:4px}
.chat-input-row{display:flex;gap:4px}
.chat-input-row input{
  flex:1;margin-top:0;font-size:11px;padding:6px 8px;
}
.chat-input-row button{
  margin-top:0;padding:6px 8px;font-size:11px;white-space:nowrap;
}
.hidden{display:none}
@media(max-width:600px){
  #chat-box{width:220px;max-height:40vh}
  #hud{font-size:11px}
  #info{max-width:220px;font-size:11px}
  #leaderboard{font-size:11px;min-width:140px}
}