*{box-sizing:border-box}
body{margin:0;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#0f172a;color:#e2e8f0}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1000px;margin:0 auto;padding:16px}
.nav{display:flex;gap:16px;align-items:center;padding:10px 16px;background:#111827;position:sticky;top:0;z-index:20;border-bottom:1px solid #1f2937}
.nav a{padding:8px 12px;border-radius:8px;color:#e5e7eb}
.nav a.active,.btn{background:#4f46e5;color:#fff}
.nav .spacer{flex:1}
.card{background:#0b1220;border:1px solid #1f2937;border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);margin:12px 0}
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.input{width:100%;padding:10px 12px;border:1px solid #334155;background:#0a0f1d;color:#e2e8f0;border-radius:10px}
.label{display:block;margin-bottom:6px;color:#93a3b8}
.btn{display:inline-block;padding:10px 14px;border:none;border-radius:10px;cursor:pointer}
.btn.secondary{background:#1f2937;color:#e5e7eb}
.btn.icon{display:inline-flex;gap:8px;align-items:center}
.list{width:100%;border-collapse:collapse}
.list th,.list td{padding:10px;border-bottom:1px solid #1f2937}
.badge{display:inline-flex;align-items:center;gap:6px;background:#111827;border:1px solid #334155;color:#a3e635;padding:4px 8px;border-radius:999px;font-size:12px}
.kroon{filter: drop-shadow(0 0 6px rgba(250,204,21,.5));}
.toast{position:fixed;top:-80px;left:0;right:0;margin:auto;max-width:600px;z-index:1000;transition:transform .4s ease, top .4s ease}
.toast.show{top:16px}
.toast .inner{background:#111827;color:#fff;border:1px solid #1f2937;border-radius:12px;padding:12px 16px;box-shadow:0 6px 30px rgba(0,0,0,.4)}
.chat{display:flex;flex-direction:column;height:320px;border:1px solid #1f2937;border-radius:12px;overflow:hidden}
.chat-messages{flex:1;overflow:auto;padding:10px;background:#0a0f1d}
.chat-input{display:flex;gap:8px;border-top:1px solid #1f2937;padding:10px;background:#0b1220}
.small{font-size:12px;color:#9ca3af}
.timer{font-variant-numeric:tabular-nums;font-weight:700}
.underscores{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing:.2em}
.modal{position:fixed;inset:0;background:rgba(2,6,23,.65);display:none;align-items:center;justify-content:center;z-index:1000}
.modal.show{display:flex}
.modal .panel{background:#0b1220;border:1px solid #1f2937;border-radius:14px;max-width:640px;width:92%;padding:16px}
.pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin:8px 0}
.pagination a{padding:6px 10px;border:1px solid #334155;border-radius:8px}
.tag{font-size:12px;background:#1f2937;color:#cbd5e1;padding:2px 8px;border-radius:999px}
.flex{display:flex;gap:12px;align-items:center}
.hidden{display:none}
hr{border:none;border-top:1px solid #1f2937;margin:14px 0}
table th{text-align:left}
.chat .system{ color:#facc15; font-weight:600; }
.players-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:12px;
}
.player-card{
  display:flex; align-items:center; gap:10px;
  border:1px solid #1f2937; background:#0b1220; border-radius:12px; padding:10px;
}
.player-card .meta{font-size:12px; color:#9ca3af}



.underscores {
  display: flex;
  flex-direction: column;        /* onder elkaar */
  align-items: center;           /* horizontaal centreren */
  text-align: center;            /* tekst netjes centreren */
  min-height: 80px;             /* geef wat hoogte */
}

#artist_line,
#title_line {
  font-size: 15px;
  letter-spacing: 2px;
  margin: 6px 0;
}


.kroon { margin-left:4px; }
.admin-crown { color:#ef4444; }        /* rode kroon voor admin */
.admin-name  { color:#facc15; font-weight:600; } /* gele admin-naam */

.btnLeave {
  display: flex;
  flex-direction: column;        /* onder elkaar */
  align-items: center;           /* horizontaal centreren */
  text-align: center;            /* tekst netjes centreren */
}

.game-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* ruimte tussen elementen */
}

.game-form .form-footer {
  display: flex;
  justify-content: flex-end; /* knop rechts */
  margin-top: 0.5rem;
}