:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: linear-gradient(160deg, #0d0b14 0%, #171226 55%, #0d0b14 100%);
  color: #e8e4f0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; justify-content: center;
}
main { max-width: 560px; width: 100%; padding: 28px 20px 40px; }
header h1 { margin: 0; font-size: 1.7rem; letter-spacing: 0.3px; }
.emoji { font-size: 1.4rem; }
.tagline { color: #b9aed6; margin: 6px 0 10px; }
.honest {
  font-size: 0.85rem; color: #9a8fbe; background: #1d1730;
  border: 1px solid #2c2350; border-radius: 10px; padding: 10px 14px;
}
.honest em { color: #c9bdf0; font-style: normal; }

.dots { display: flex; gap: 6px; margin: 18px 0 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #2c2350; }
.dot.hit { background: #4ade80; }
.dot.miss { background: #f87171; }
.round-label { font-size: 0.85rem; color: #8f84b5; margin-bottom: 14px; }

.players { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 16px; }
.player {
  background: #221a3a; border: 1px solid #3a2d63; border-radius: 14px;
  color: #e8e4f0; padding: 18px 10px; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; gap: 6px; transition: border-color 0.15s;
}
.player:hover { border-color: #7c6cf0; }
.player.playing { border-color: #a78bfa; background: #2a2048; }
.player .big { font-size: 1.5rem; }
.player.playing .big { animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.guess-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; visibility: hidden; }
.guess {
  background: linear-gradient(180deg, #6d5bd8, #5a48c0); border: 0; border-radius: 12px;
  color: #fff; font-weight: 600; padding: 13px 8px; cursor: pointer;
}
.guess:hover { filter: brightness(1.12); }

.feedback { margin-top: 16px; background: #1d1730; border-radius: 12px; padding: 16px; border: 1px solid #2c2350; }
.verdict { font-size: 1.15rem; font-weight: 700; }
.verdict.good { color: #4ade80; }
.verdict.bad { color: #f87171; }
.hint { color: #b9aed6; font-size: 0.92rem; margin: 8px 0 14px; }
.next {
  background: transparent; border: 1px solid #7c6cf0; color: #c9bdf0;
  border-radius: 10px; padding: 9px 16px; cursor: pointer;
}
.next:hover { background: #2a2048; }

.score-card { background: #1d1730; border: 1px solid #2c2350; border-radius: 16px; padding: 26px; text-align: center; }
.score-big { font-size: 3rem; font-weight: 800; color: #a78bfa; }
.score-msg { margin: 10px 0; }
.score-detail { color: #9a8fbe; font-size: 0.9rem; margin-bottom: 18px; }
.final-actions { display: flex; gap: 10px; justify-content: center; }
.final-actions button {
  background: #221a3a; border: 1px solid #3a2d63; color: #e8e4f0;
  border-radius: 10px; padding: 10px 18px; cursor: pointer;
}
#restart { background: linear-gradient(180deg, #6d5bd8, #5a48c0); border: 0; color: #fff; font-weight: 600; }

footer { margin-top: 26px; font-size: 0.78rem; color: #7d729f; }
footer a { color: #a78bfa; }
@media (max-width: 420px) {
  .players, .guess-row { grid-template-columns: 1fr; }
}