:root { color-scheme: dark; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: #0b0f14;
  color: #e8eef6;
}
#ui { max-width: 1100px; margin: 0 auto; padding: 16px; }
.screen { background: #111823; border: 1px solid #223044; border-radius: 14px; padding: 16px; }
.hidden { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
button {
  border: 1px solid #2a3b55;
  background: #1b2a3f;
  color: #e8eef6;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
button.secondary { background: #141e2d; }
button:disabled { opacity: .5; cursor: not-allowed; }
input {
  background: #0f1622;
  border: 1px solid #2a3b55;
  color: #e8eef6;
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
}
.muted { opacity: .75; }
.topbar { display:flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#game { width: 100%; height: auto; background: #0a0f17; border: 1px solid #223044; border-radius: 14px; display:block; }
.hint { margin-top: 10px; }

.chars { display:flex; gap: 10px; margin: 12px 0; }
.char {
  width: 110px; padding: 10px; border-radius: 12px;
  border: 1px solid #2a3b55; background: #0f1622;
  cursor: pointer; text-align: center;
}
.char.selected { outline: 2px solid #6aa7ff; }
.char-swatch { width: 48px; height: 48px; border-radius: 10px; margin: 0 auto 8px; border:1px solid #223044; }

#modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
}
.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 24px));
  background: #111823;
  border: 1px solid #223044;
  border-radius: 14px;
  padding: 14px;
  z-index: 50;
}
.modal-title { font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.modal-body { max-height: 70vh; overflow:auto; }
.modal-actions { display:flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

.context {
  position: fixed;
  background: #111823;
  border: 1px solid #223044;
  border-radius: 12px;
  padding: 8px;
  z-index: 60;
  min-width: 180px;
}
.context button { width: 100%; justify-content: flex-start; }