:root {
  --case-black: #14161a;
  --file-panel: #1e2128;
  --file-panel-raised: #262a33;
  --hairline: #34394299;
  --paper: #e8e4d8;
  --paper-dim: #8b8f9c;
  --lamp-amber: #f2b134;
  --lamp-amber-dim: #b8871f;
  --glass-teal: #5fa8a0;
  --redact-red: #c1443c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--case-black);
  color: var(--paper);
}

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

h1, h2 {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  margin: 0 0 8px;
}

h1 { font-size: 2rem; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; color: var(--paper); }

p { margin: 0 0 12px; max-width: 60ch; }

.masthead { margin-bottom: 24px; }
.tagline { color: var(--paper-dim); font-size: 0.95rem; }

/* ---- Panels ---- */

.panel {
  background: var(--file-panel);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 16px;
}

.panel-sub { color: var(--paper-dim); font-size: 0.9rem; margin-bottom: 16px; }

.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .entry-grid { grid-template-columns: 1fr; }
}

/* ---- Forms ---- */

.stack { display: flex; flex-direction: column; gap: 6px; }

label {
  font-size: 0.85rem;
  color: var(--paper-dim);
  margin-top: 8px;
}

label:first-child { margin-top: 0; }

input[type="text"],
input[type="number"] {
  background: var(--file-panel-raised);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--paper);
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
}

input:focus,
button:focus,
.radio-chip:focus-within {
  outline: 2px solid var(--lamp-amber);
  outline-offset: 1px;
}

.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }

.radio-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--file-panel-raised);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--paper);
  margin-top: 0;
}

.radio-chip input { accent-color: var(--lamp-amber); }

.btn {
  font-family: "Space Mono", monospace;
  font-size: 0.95rem;
  border-radius: 4px;
  border: 1px solid transparent;
  padding: 12px 18px;
  cursor: pointer;
  margin-top: 14px;
  width: 100%;
}

.btn-primary {
  background: var(--lamp-amber);
  color: #1a1200;
}
.btn-primary:hover { background: var(--lamp-amber-dim); }

.btn-ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--paper);
}
.btn-ghost:hover { border-color: var(--lamp-amber); }

/* ---- Notices ---- */

.notice {
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.notice-error {
  background: color-mix(in srgb, var(--redact-red) 18%, var(--file-panel));
  border: 1px solid var(--redact-red);
  color: var(--paper);
}

/* ---- Lobby header / case stamp ---- */

.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.case-stamp {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  border: 2px solid var(--lamp-amber);
  border-radius: 6px;
  padding: 10px 20px;
  box-shadow: 0 0 24px -4px var(--lamp-amber);
}

.case-stamp-label {
  font-size: 0.7rem;
  color: var(--paper-dim);
}

.case-stamp-code {
  font-family: "Space Mono", monospace;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lamp-amber);
}

.conn-status {
  font-size: 0.85rem;
  color: var(--redact-red);
}
.conn-status.is-connected { color: var(--glass-teal); }

/* ---- Roster ---- */

.roster { list-style: none; margin: 0; padding: 0; }

.roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.roster-row:last-child { border-bottom: none; }

.roster-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper-dim);
  flex: none;
}
.roster-dot.is-connected { background: var(--glass-teal); }

.roster-name { flex: 1; overflow-wrap: anywhere; }

.roster-tag {
  font-size: 0.7rem;
  color: var(--lamp-amber);
  border: 1px solid var(--lamp-amber);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ---- Settings readout (non-host view) ---- */

.settings-readout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
}
.settings-readout dt { color: var(--paper-dim); font-size: 0.85rem; }
.settings-readout dd { margin: 0; }

.hint { color: var(--paper-dim); font-size: 0.85rem; margin: 8px 0 0; }

.roster-tag-ready {
  color: var(--glass-teal);
  border-color: var(--glass-teal);
}

.radio-chip.is-picked {
  border-color: var(--glass-teal);
  background: color-mix(in srgb, var(--glass-teal) 18%, var(--file-panel-raised));
}
.radio-chip.is-disabled { opacity: 0.6; cursor: default; }

/* ---- Custom words ---- */

#custom-word-form { flex-direction: row; }
#custom-word-form input { flex: 1; }
#custom-word-form button { width: auto; margin-top: 0; }

/* ---- Word panel ---- */

.word-panel { padding: 14px 20px; }

.word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.word-label {
  display: block;
  font-size: 0.75rem;
  color: var(--paper-dim);
}

.word-value {
  font-family: "Space Mono", monospace;
  font-size: 1.4rem;
  color: var(--lamp-amber);
  letter-spacing: 0.03em;
}

.btn-icon {
  background: var(--file-panel-raised);
  border: 1px solid var(--hairline);
  color: var(--paper);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: "Space Mono", monospace;
}
.btn-icon:hover { border-color: var(--lamp-amber); }

/* ---- Drawing screen ---- */

.turn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.drawer-name {
  font-family: "Space Mono", monospace;
  font-size: 0.95rem;
  color: var(--glass-teal);
}

.turn-timer {
  font-family: "Space Mono", monospace;
  font-size: 1.1rem;
  color: var(--lamp-amber);
  min-width: 3ch;
  text-align: right;
}

#canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border-radius: 4px;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.pen-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.pen-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.pen-swatch.is-selected { border-color: var(--lamp-amber); }

.pen-width {
  background: var(--file-panel-raised);
  border: 1px solid var(--hairline);
  color: var(--paper);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: "Space Mono", monospace;
}
.pen-width.is-selected { border-color: var(--lamp-amber); color: var(--lamp-amber); }

.ready-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  margin-top: 0;
  cursor: pointer;
}
.ready-row input { accent-color: var(--glass-teal); width: 18px; height: 18px; }

#guess-list { gap: 8px; }
#guess-list input {
  background: var(--file-panel-raised);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--paper);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 9px 12px;
}

/* ---- Reveal diagram ---- */

.reveal-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}

.reveal-node { fill: var(--file-panel-raised); stroke: var(--paper); stroke-width: 1.5; }

.reveal-node-label {
  fill: var(--paper);
  font-family: "Space Mono", monospace;
  font-size: 13px;
}

.reveal-word-label {
  fill: var(--lamp-amber);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 15px;
}

.reveal-arrow-correct { stroke: var(--glass-teal); stroke-width: 2; }
.reveal-arrow-wrong { stroke: var(--redact-red); stroke-width: 1.5; opacity: 0.85; }
.reveal-arrowhead-ok { fill: var(--glass-teal); }
.reveal-arrowhead-bad { fill: var(--redact-red); }