:root {
  --bg:#0b0f14; --card:#121821; --muted:#a3b3c5; --text:#e8f0fb;
  --primary:#5cc8ff; --accent:#9bff9b; --danger:#ff6b6b; --warning:#ffd166; --shadow:rgba(0,0,0,.5);
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,Arial;background:var(--bg);color:var(--text)}
.nav{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(18,24,33,.9);backdrop-filter:blur(6px);box-shadow:0 4px 16px var(--shadow)}
.nav a{color:var(--text);text-decoration:none;margin:0 10px}.nav .brand{font-weight:700;color:var(--primary)}
.container{max-width:1024px;margin:20px auto;padding:0 16px}.card{background:var(--card);border-radius:14px;padding:18px;box-shadow:0 8px 24px var(--shadow);margin-bottom:16px}
h1,h2,h3{margin:8px 0 12px}
button,.btn{background:var(--primary);color:#003049;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;transition:transform .05s ease,filter .2s ease}
button:active{transform:translateY(1px)} .btn.secondary{background:#2a3442;color:var(--text)} .btn.danger{background:var(--danger);color:#fff}
input,select,textarea{width:100%;padding:10px 12px;background:#0e1420;color:var(--text);border:1px solid #1f2a38;border-radius:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.grid{display:grid;gap:12px}
.center{text-align:center}.small{color:var(--muted);font-size:12px}.badge{background:#1e2938;padding:3px 8px;border-radius:999px;font-size:12px;color:var(--primary)}
.flex{display:flex;gap:8px;align-items:center}.flex-between{display:flex;justify-content:space-between;align-items:center}
.list{list-style:none;margin:0;padding:0}.list li{padding:8px 0;border-bottom:1px solid #1b2533}
.avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#243140;color:#cfeaff;font-weight:800}
.crown{color:#ffd166;margin-left:4px}
.toast{z-index:1000; position:fixed;top:-80px;left:50%;transform:translateX(-50%);background:#12263a;color:var(--text);padding:12px 16px;border-radius:10px;box-shadow:0 12px 28px var(--shadow);transition:top .4s ease}
.toast.show{top:16px}
.chat{display:grid;grid-template-rows:1fr auto;gap:8px;height:300px}.chat-messages{overflow-y:auto;border:1px solid #1b2533;border-radius:10px;padding:10px;background:#0a111b}
.chat-item{margin:6px 0}.chat-item .name{color:var(--primary);font-weight:700;margin-right:6px}.chat-item.system{color:var(--muted);font-style:italic}
.mask{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.5px}.timer{font-variant-numeric:tabular-nums}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}.modal{background:var(--card);padding:18px;border-radius:12px;width:95%;max-width:520px}.modal-backdrop.show{display:flex}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:8px 10px;border-bottom:1px solid #1b2533;text-align:left} hr{border:0;height:1px;background:#1b2533;margin:14px 0}

.player-card{background:var(--card);border:1px solid #1b2533;border-radius:12px;padding:8px;box-shadow:0 4px 12px var(--shadow)}
.player-card.good{border-color:var(--accent);background:rgba(155,255,155,0.08)}

.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.player-card{background:var(--card);border:1px solid #1b2533;border-radius:10px;padding:8px;min-height:84px;display:flex;flex-direction:column;justify-content:space-between}
.player-card.good{border-color:var(--accent);background:rgba(155,255,155,.08)}
.player-card .top{display:flex;gap:8px;align-items:center}
.player-card .meta{font-size:11px;color:var(--muted)}


.lobby-head{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* links | midden | rechts */
  align-items:center;
  gap:12px;
}
.lobby-head .left { justify-self:start; }
.lobby-head .center { justify-self:center; }
.lobby-head .right { justify-self:end; }

/* badge/pill stijl in lijn met je dark UI */
.badge.pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:9999px;
  background:#1f2937;
  color:#fff;
  font-weight:600;
  font-size:.9rem;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.badge.pill.warn{ background:#b45309; }   /* < 5 min */
.badge.pill.danger{ background:#b91c1c; } /* < 1 min */

/* responsive: stack op mobiel */
@media (max-width:640px){
  .lobby-head{
    grid-template-columns: 1fr;
    gap:8px;
    text-align:center;
  }
  .lobby-head .right{ justify-self:center; }
  .lobby-head .left{ justify-self:center; }
}

.lb-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  background: #111827; color: #fff; /* dark bubble voor emoji */
  overflow: hidden; vertical-align: middle;
  margin-right: 8px;
}
.lb-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lb-name {
  display: inline-flex; align-items: center;
}
.lb-pos {
  font-weight: 700;
}
.lb-medal {
  font-size: 18px;
}
.lb-badge {
  display:inline-block; padding:2px 8px; border-radius:9999px;
  background:#1f2937; color:#fff; font-size:.8rem; line-height:1;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 10px;
  margin-top: 5px;
}

.avatar-option {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  transition: border-color 0.2s, background 0.2s;
}

.avatar-option input {
  display: none;
}

.avatar-option input:checked + span {
  transform: scale(1.2);
}

.avatar-option input:checked + span,
.avatar-option:hover span {
  text-shadow: 0 0 4px rgba(0,0,0,.3);
}

.avatar-option input:checked ~ span,
.avatar-option:hover {
  border-color: #3b82f6;
  background: rgba(59,130,246,0.1);
}

.mask.missed { color: #e53935; }
.mask.correct { color: #2e7d32; }  

/* assets/styles.css */
.mask.spaced {
  letter-spacing: .3ch;        
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* strak onder elkaar */
}