body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f7;
  color: #1d1d1f;
}
h1 { text-align: center; color: #c41e3a; }
.screen { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
button {
  background: #007aff; color: white; border: none; padding: 12px 24px;
  border-radius: 8px; font-size: 16px; cursor: pointer; margin: 8px 0;
}
button:hover { background: #0051d5; }
input { padding: 10px; margin: 5px; border: 1px solid #ccc; border-radius: 6px; width: calc(100% - 22px); max-width: 300px; }
.char-card {
  display: inline-block; width: 200px; margin: 10px; padding: 10px;
  border: 2px solid #ddd; border-radius: 8px; text-align: center; vertical-align: top;
}
.char-card img { max-width: 100%; height: 150px; object-fit: cover; border-radius: 4px; }
.char-card select, .char-card button { margin-top: 8px; }
.player { padding: 5px; background: #eee; margin: 4px; border-radius: 4px; }
.player.away { opacity: 0.55; }
button.remove { padding: 4px 10px; font-size: 13px; background: #8e8e93; margin-left: 8px; }
#you-are, #my-assignment, #my-vote, #waiting, #wait-note { margin: 8px 0; }
.reveal-item { margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 6px; }
.winner { font-size: 24px; color: #34c759; font-weight: bold; }
#char-inputs input { display: block; margin: 4px 0; }
details { margin-top: 15px; }