:root{
  --bg:#0b0f14;
  --card:#101824;
  --card2:#0f1722;
  --text:#e6edf3;
  --muted:#9fb0c0;
  --border:#233044;

  --red:#d94a4a;
  --blue:#4a78d9;
  --neutral:#6b7785;
  --assassin:#0a0a0a;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body.dark{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, #111a28 0%, var(--bg) 55%);
  color:var(--text);
}

.container{max-width:900px;margin:28px auto;padding:0 16px;}
.container.wide{max-width:1200px}
h1{letter-spacing:3px;font-weight:800;margin:8px 0 18px}
h2{margin:0 0 14px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
  margin:14px 0;
}
.card.small{padding:12px}

.alert, .ok{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  margin:12px 0;
}
.alert{background:rgba(217,74,74,.10)}
.ok{background:rgba(74,217,120,.10)}

.muted{color:var(--muted);font-size:12px}
.hint{color:var(--muted);font-size:13px;margin-top:10px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid label{display:block;font-size:13px;color:var(--muted)}
.grid input,.grid select{
  width:100%;margin-top:6px;
  background:var(--card2);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;border-radius:12px;
  outline:none;
}
.row{display:flex;gap:10px;align-items:center;margin-top:12px}
.row.between{justify-content:space-between}
.right{display:flex;gap:10px;align-items:center}

.btn{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{filter:brightness(1.1)}
.btn.secondary{opacity:.9}
.btn.danger{border-color:rgba(217,74,74,.5);background:rgba(217,74,74,.10)}

.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;
  padding:12px 0;
}
.code{font-size:22px;font-weight:900;letter-spacing:2px}

.players,.wordlist{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.pill.red{border-color:rgba(217,74,74,.35)}
.pill.blue{border-color:rgba(74,120,217,.35)}

.grid2{display:grid;grid-template-columns: 1.6fr 1fr;gap:14px}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr} .grid{grid-template-columns:1fr} }

.score{display:flex;gap:10px;flex-wrap:wrap}
.tag{
  font-size:12px;font-weight:800;letter-spacing:1px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
}
.tag.red{border-color:rgba(217,74,74,.45)}
.tag.blue{border-color:rgba(74,120,217,.45)}
.tag.turn{border-color:rgba(255,255,255,.20)}

.board{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
  margin-top:12px;
}
.tile{
  position:relative;
  min-height:74px;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.tile:disabled{cursor:not-allowed;opacity:.75}
.tile .word{font-weight:900;letter-spacing:.5px}
.tile .dot{
  position:absolute;right:10px;bottom:10px;
  width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(255,255,255,.20);
}
.dot.red{background:var(--red)}
.dot.blue{background:var(--blue)}
.dot.neutral{background:var(--neutral)}
.dot.assassin{background:var(--assassin)}

.tile.revealed.red{background:rgba(217,74,74,.22);border-color:rgba(217,74,74,.45)}
.tile.revealed.blue{background:rgba(74,120,217,.22);border-color:rgba(74,120,217,.45)}
.tile.revealed.neutral{background:rgba(107,119,133,.22);border-color:rgba(107,119,133,.45)}
.tile.revealed.assassin{background:rgba(10,10,10,.70);border-color:rgba(255,255,255,.18)}

.tile.spy.red:not(.revealed){box-shadow: inset 0 0 0 2px rgba(217,74,74,.25)}
.tile.spy.blue:not(.revealed){box-shadow: inset 0 0 0 2px rgba(74,120,217,.25)}
.tile.spy.neutral:not(.revealed){box-shadow: inset 0 0 0 2px rgba(107,119,133,.22)}
.tile.spy.assassin:not(.revealed){box-shadow: inset 0 0 0 2px rgba(0,0,0,.55)}

.clue{font-size:18px;font-weight:900;margin-top:6px}
.log{
  max-height:420px; overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(0,0,0,.15);
  font-size:13px;
}
.log .line{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.log .line:last-child{border-bottom:0}