/* Scumhouse. Dark, quiet, a village after dark.
 *
 * NOTE: no global `* { box-sizing: border-box }` reset -- this repo's standing
 * rule. Anything that needs border-box says so on its own selector. */

:root {
  --ink: #e8e3d8;
  --ink-dim: #9a9384;
  --bg: #14161c;
  --panel: #1c1f27;
  --panel-2: #232733;
  --edge: #2f3542;
  --lamp: #d9a441;
  --blood: #a8443c;
  --alive: #7fa88a;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 "Iowan Old Style", Georgia, "Times New Roman", serif;
}

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0.01em; }
h1 { font-size: 1.7rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; color: var(--lamp); }
a { color: var(--lamp); }

.sh-top {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--edge); background: var(--panel);
}
.sh-brand { font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.sh-top nav { margin-left: auto; display: flex; gap: 1rem; align-items: baseline; }
.sh-who { color: var(--ink-dim); }
.sh-foot { padding: 1.5rem 1rem; border-top: 1px solid var(--edge); color: var(--ink-dim); text-align: center; }

.sh-lede { color: var(--ink-dim); max-width: 60ch; }
.sh-hint { color: var(--ink-dim); font-size: 0.9rem; max-width: 60ch; }

.sh-head { display: flex; align-items: baseline; gap: 1rem; }
.sh-clock { color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.sh-status {
  margin: 0.6rem 0 1rem; padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--edge); background: var(--panel); color: var(--ink-dim);
  font-size: 0.92rem;
}
.sh-status.ok { border-left-color: var(--alive); color: var(--ink); }
.sh-status.warn { border-left-color: var(--lamp); color: var(--ink); }
.sh-status.error { border-left-color: var(--blood); color: var(--ink); }

.sh-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .sh-cols { grid-template-columns: minmax(0, 1fr); } }

.sh-card { border: 1px solid var(--edge); border-radius: 6px; padding: 0.2rem 1rem 0.9rem; background: var(--panel); }
.sh-card:empty { display: none; }
.sh-card h3 { color: var(--lamp); margin-bottom: 0.3rem; }
.sh-card-mafia { border-color: var(--blood); }
.sh-card-mafia h3 { color: var(--blood); }

.sh-thread:empty { display: none; }
.sh-thread { max-height: 26rem; overflow-y: auto; border: 1px solid var(--edge); border-radius: 6px; background: var(--panel); padding: 0.5rem 0.9rem; }
.sh-post { padding: 0.5rem 0; border-bottom: 1px solid var(--edge); }
.sh-post:last-child { border-bottom: 0; }
.sh-post-who { font-weight: 600; }
.sh-post-when { color: var(--ink-dim); font-size: 0.82rem; margin-left: 0.5rem; }
.sh-post-body { margin: 0.25rem 0 0; white-space: pre-wrap; }

.sh-composer { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
textarea, input[type="password"], select {
  box-sizing: border-box; width: 100%;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--edge);
  border-radius: 4px; padding: 0.5rem; font: inherit; font-size: 0.95rem;
}
button {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--edge);
  border-radius: 4px; padding: 0.45rem 0.9rem; font: inherit; cursor: pointer;
}
button:hover { border-color: var(--lamp); }
button:disabled { opacity: 0.5; cursor: default; }
.sh-composer button, .sh-team button { align-self: flex-start; }

.sh-panel { margin-top: 1.4rem; border: 1px solid var(--edge); border-radius: 6px; padding: 0.2rem 1rem 1rem; background: var(--panel); }
.sh-targets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.sh-target { border-color: var(--edge); }
.sh-nolynch { color: var(--ink-dim); }

.sh-result { margin: 0.8rem 0 0; color: var(--lamp); font-size: 1.05rem; }
.sh-result:empty { display: none; }

.sh-players { list-style: none; margin: 0; padding: 0; }
.sh-players li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--edge); }
.sh-players li.dead .sh-name { color: var(--ink-dim); text-decoration: line-through; }
.sh-fate { margin-left: auto; color: var(--ink-dim); font-size: 0.8rem; text-align: right; }
.sh-votes { margin-left: auto; color: var(--lamp); font-size: 0.82rem; }

.sh-team { margin-top: 1.5rem; border: 1px solid var(--blood); border-radius: 6px; padding: 0.2rem 0.9rem 0.9rem; background: var(--panel); }
.sh-team h2 { color: var(--blood); }
.sh-team-log { max-height: 16rem; overflow-y: auto; margin-bottom: 0.5rem; }
.sh-team-msg { padding: 0.35rem 0; border-bottom: 1px solid var(--edge); }
.sh-team-msg:last-child { border-bottom: 0; }

.sh-recovery, .sh-bug { margin-top: 1.5rem; border: 1px solid var(--edge); border-radius: 6px; padding: 0.2rem 0.9rem 0.9rem; background: var(--panel); }
.sh-recovery textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; word-break: break-all; }
.sh-recovery button, .sh-bug button { margin-top: 0.5rem; }
.sh-recovery details { margin-top: 0.7rem; }
.sh-bug label { display: block; }

.sh-create { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 1rem 0 2rem; padding: 1rem; border: 1px solid var(--edge); border-radius: 6px; background: var(--panel); }
.sh-create label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-dim); }
.sh-create select { min-width: 10rem; }

.sh-games { list-style: none; margin: 0; padding: 0; }
.sh-games li { display: flex; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--edge); }
.sh-game-id { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.sh-game-state { margin-left: auto; color: var(--lamp); }
.sh-closed { color: var(--ink-dim); }
.sh-inline { margin: 0; }

.sh-setups { border-collapse: collapse; margin: 0.5rem 0 1rem; }
.sh-setups th, .sh-setups td { border: 1px solid var(--edge); padding: 0.35rem 0.8rem; text-align: center; }
.sh-setups th { color: var(--lamp); font-weight: 600; }

.sh-hash { word-break: break-all; font-size: 0.8rem; color: var(--ink-dim); }
.sh-report { border: 1px solid var(--edge); border-radius: 6px; padding: 0.2rem 1rem 1rem; margin-bottom: 1rem; background: var(--panel); }
.sh-report pre { overflow-x: auto; background: var(--panel-2); padding: 0.6rem; border-radius: 4px; font-size: 0.78rem; }
.sh-when { color: var(--ink-dim); font-size: 0.82rem; }

.sh-verify td { text-align: left; }
.sh-hashcell code { font-size: 0.68rem; word-break: break-all; }
.sh-steps { padding-left: 1.3rem; }
.sh-steps li { margin-bottom: 0.6rem; }

.sh-token {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.8rem; word-break: break-all; margin-bottom: 1rem;
}