* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #11141a;
  color: #eee;
  font: 16px system-ui;
}

main {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}

section {
  background: #20242c;
  border: 1px solid #555;
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
}

/* The setup page: a card of its own, before the game starts. */
.setup-page {
  max-width: 460px;
  margin: 40px auto;
  padding: 22px 26px;
}

.setup-page h2 {
  margin: 0 0 16px;
  color: #f0cf83;
  text-align: center;
}

.setup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.setup-row label {
  width: 56px;
}

.setup-row select,
.setup-row input {
  flex: 1;
  min-width: 0;
}

/* Under the setup card: How to play (collapsed) and About. */
.setup-info {
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

.setup-info h2 {
  margin: 0;
  color: #f0cf83;
}

.setup-info details[open] > summary {
  margin-bottom: 4px;
}

.setup-info h3 {
  margin: 18px 0 4px;
  color: #f0cf83;
  font-size: 1rem;
}

.setup-info p,
.setup-info ul {
  margin: 6px 0;
}

.setup-info .about h2 {
  margin-bottom: 8px;
}

.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 20px 24px;
  color: #999;
  font-size: 0.8rem;
  text-align: center;
}

.setup-page #start {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 10px;
  font-size: 1.05rem;
}

button,
select,
input {
  padding: 8px;
  margin: 4px;
  background: #151820;
  color: #fff;
  border: 1px solid #777;
  border-radius: 7px;
}

/* A button you can't press yet (Nominate with no player selected, say)
   looks it. */
button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Town square ─────────────────────────────────────────── */

.town-square-wrap {
  width: 100%;
  overflow: hidden;
  padding: 70px 65px;
}

/* The circle grows by 40px per seat (--n is set from app.js), scaled by the
   size chosen from the menu (--scale), but never past the space left for it:
   the screen width minus the page, section and town-square padding. */
.circle {
  --size: min(
    clamp(300px, calc(var(--n, 10) * 40px + 120px), 720px) * var(--scale, 1),
    calc(100vw - 210px)
  );
  width: var(--size);
  aspect-ratio: 1;
  border: 9px double #b69455;
  border-radius: 50%;
  position: relative;
  margin: auto;
  background: radial-gradient(circle, #382c2b 0 18%, #181b21 19%);
}

/* Each seat is rotated to its angle (--a), pushed out, then un-rotated. */
.seat {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Always a circle: the width sets the size, the height follows. */
  width: 92px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--a))
    translateY(calc(var(--size) * -0.4)) rotate(calc(var(--a) * -1));
  border: 2px solid #888;
  border-radius: 50%;
  background: #292e38;
  text-align: center;
  cursor: pointer;
}

.seat:disabled {
  cursor: default;
}

.token {
  display: block;
  max-width: 100%;
  font-size: 0.78rem;
  line-height: 1.15;
  color: #f0cf83;
  font-weight: 800;
}

/* Long one-word names (Investigator, Mathematician) fit on one line. */
.token.long {
  font-size: 0.64rem;
}

.human {
  border-color: #e4b95e;
}

/* A dead player's seat fades to grey, but your Good / Evil mark around it
   (its outline) stays in full colour: the fading is on the seat's border,
   background and contents, not the seat itself. The death shroud hangs over
   it for the rest of the game, from the top of the seat, behind the text,
   so you can still read what they claimed. */
.seat.dead {
  overflow: visible;
  border-color: rgba(136, 136, 136, 0.4);
  background: rgba(41, 46, 56, 0.4);
}

.seat.dead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px; /* (level with the top of the seat's border) */
  /* (In proportion to the seat, whatever its size.) */
  width: 50%;
  aspect-ratio: 54 / 76;
  transform: translateX(-50%);
  background: url("images/death-shroud.png") center top / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.seat.dead > * {
  opacity: 0.8;
  filter: grayscale(1);
}

/* (In front of the shroud, with a shadow to read against it.) */
.seat.dead > .token,
.seat.dead > small {
  position: relative;
  text-shadow: 0 0 3px #000, 0 0 6px #000;
}

.selected {
  box-shadow: 0 0 0 4px #dfb85f;
  background: #3b3428;
}

/* Raised hands and the skull sit over the token, slightly see-through (side
   by side when a player has both). */
.vote-hand,
.skull {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.65;
  pointer-events: none;
}

.seat:has(.skull) .vote-hand {
  left: 30%;
}

.seat:has(.vote-hand) .skull {
  left: 70%;
}

.unknown {
  color: #999;
}

/* An NPC who just claimed in public unprompted: a ⚠ at the top of their
   seat, which fades (see CLAIM_ALERT_* in src/data.js; app.js sets the
   timing). It waits at full strength while a dawn / dusk card is up. */
.claim-alert {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.15rem;
  line-height: 1;
  color: #ffb02e;
  text-shadow: 0 0 6px #000;
  pointer-events: none;
  animation-name: claim-alert-fade;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

.claim-alert.waiting {
  animation: none;
}

.seat.dead > .claim-alert {
  opacity: 1;
  filter: none;
}

@keyframes claim-alert-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ── Actions & logs ──────────────────────────────────────── */

#actions {
  max-width: 650px;
  margin: 12px auto;
  text-align: center;
}

/* End day: always reachable during the day. */
.day-controls {
  margin: 8px auto 0;
  text-align: center;
}

/* The Storyteller has woken you: pick players in the town square. */
.night-choice {
  max-width: 650px;
  margin: 12px auto;
  text-align: center;
  border-color: #b69455;
  background: #1a1d26;
}

.night-choice h3 {
  margin: 0 0 6px;
  color: #f0cf83;
}

#night-error {
  color: #ef6b72;
}

#selected-player {
  margin: 0 0 8px;
  color: #f0cf83;
}

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Log entries already start with "Day N" / "Night N", so no list numbers. */
#public,
#private {
  list-style: none;
  padding: 0;
}

.log-entry {
  padding: 7px 4px;
  border-bottom: 1px solid #343a45;
  white-space: pre-line;
}

/* NPC answers list each night's information on its own line. */
#answer {
  white-space: pre-line;
}

.day-break {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  color: #f0cf83;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.day-break:before,
.day-break:after {
  content: "";
  height: 1px;
  flex: 1;
  background: #b69455;
}

/* ── Final reveal ────────────────────────────────────────── */

.result-banner {
  text-align: center;
  padding: 18px;
  border: 1px solid #b69455;
  border-radius: 12px;
  background: #181b21;
}

.result-banner strong,
.result-banner span {
  display: block;
}

.result-banner strong {
  font-size: 1.5rem;
  color: #f0cf83;
}

.result-banner small {
  display: block;
  margin-top: 6px;
  color: #bbb;
}

/* Grimoire: every player, one row each (plus notes), coloured by team. Long
   text wraps so the table always fits the screen's width. */
.grimoire {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.grimoire th {
  text-align: left;
  color: #f0cf83;
  font-weight: 700;
  border-bottom: 1px solid #b69455;
  padding: 6px 8px;
}

.grimoire td {
  padding: 6px 8px;
  border-bottom: 1px solid #343a45;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.team-row-good td {
  background: #244b6855;
}

.team-row-evil td {
  background: #682d3566;
}

.grimoire-bluffs {
  margin: 10px 2px 0;
}

.grimoire-bluffs small {
  color: #bbb;
}

.grimoire tr.notes td {
  padding-top: 0;
  color: #bbb;
  font-size: 0.82rem;
}

/* The notes row belongs to the row above: no line between them. */
.grimoire tr:has(+ tr.notes) td {
  border-bottom: none;
}

.grimoire tr.is-dead td:not(:first-child) {
  color: #999;
}

.alignment {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.alignment.good {
  background: #244b68;
}

.alignment.evil {
  background: #682d35;
}

/* Timeline: collapsible Setup / Night / Day sections. */
.timeline-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tl-section {
  border-bottom: 1px solid #343a45;
}

.tl-section summary {
  padding: 8px 4px;
  cursor: pointer;
  color: #f0cf83;
  font-weight: 700;
}

.tl-section summary small {
  color: #bbb;
  font-weight: 400;
}

.events {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.event {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 5px 4px;
}

.event-tag {
  color: #b69455;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-text {
  white-space: pre-line;
}

/* The NPC talks in the timeline: collapsed until opened. */
.npc-talks summary {
  cursor: pointer;
  color: #b69455;
}

.event-detail {
  display: block;
  color: #bbb;
}

.event.key .event-tag {
  color: #f0cf83;
  font-weight: 700;
}

/* "Key moments only": hide everything else, and sections with none. */
.key-only .event:not(.key),
.key-only .tl-section:not(.has-key) {
  display: none;
}

@media (max-width: 650px) {
  main {
    padding: 10px;
  }

  /* On a phone the town square uses the full width (e.g. an iPhone 16's
     393px screen): no side padding, and the circle is capped by the width
     actually left for it (100cqw), not a guess from the screen width. */
  .town-square-wrap {
    padding: 52px 0 12px;
    container-type: inline-size;
  }

  .circle {
    --size: min(
      clamp(220px, calc(var(--n, 10) * 30px + 80px), 470px) * var(--scale, 1),
      100cqw
    );
  }

  /* Seats narrow a little with many players, so they don't pile up. */
  .seat {
    width: clamp(50px, calc(var(--size) * 2.4 / var(--n, 10)), 62px);
    padding: 2px;
    font-size: 0.68rem;
  }

  .votes-needed {
    font-size: 0.65rem;
  }

  .token,
  .token.long {
    font-size: 0.62rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vote-hand,
  .skull {
    font-size: 1.6rem;
  }

  .cols {
    grid-template-columns: 1fr;
  }

  .event {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .grimoire {
    font-size: 0.78rem;
  }

  .grimoire th,
  .grimoire td {
    padding: 5px 4px;
  }
}

/* ── Role-count popup & reset ────────────────────────────── */

.town-square-wrap {
  position: relative;
}

.town-square-toolbar {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 5;
}

/* The menu to the left of the title (town square size, and a link to report
   a bug on GitHub). */
.title-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0.67em 0;
}

.title-bar h1 {
  margin: 0;
}

.menu {
  position: relative;
}

#size-settings {
  padding: 0;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
}

.size-popup {
  right: auto;
  left: 0;
  z-index: 10;
  min-width: 170px;
}

.count-popup.size-popup small {
  margin: 0 0 8px;
}

.size-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.size-popup .size-controls strong {
  display: inline-block;
  min-width: 3.5em;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.size-controls button {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  border-color: #b69455;
  background: #2a313d;
  color: #f0cf83;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}

.menu-link {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #b69455;
  color: #f0cf83;
  text-decoration: none;
  white-space: nowrap;
}

.menu-link:hover,
.menu-link:focus-visible {
  text-decoration: underline;
}

.size-controls button:disabled {
  opacity: 0.4;
  cursor: default;
}

.info-button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 900;
  font-family: serif;
  background: #2a313d;
  border-color: #b69455;
  color: #f0cf83;
  cursor: pointer;
}

.count-popup {
  position: absolute;
  right: 0;
  top: 44px;
  min-width: 235px;
  padding: 12px;
  border: 1px solid #b69455;
  border-radius: 10px;
  background: #151820;
  box-shadow: 0 8px 24px #0008;
  text-align: center;
}

.count-popup strong {
  display: block;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
}

.count-popup small {
  display: block;
  margin-top: 6px;
  color: #bbb;
  font-size: 0.7rem;
}

.good-count {
  color: #64b5f6;
}

.evil-count {
  color: #ef6b72;
}

.reveal-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 20px auto 4px;
}

.reset-button {
  padding: 10px 22px;
  border-color: #b69455;
  color: #f0cf83;
  cursor: pointer;
}

.download-link {
  color: #f0cf83;
}

/* ── Clock tower & script sheet ──────────────────────────── */

/* Sits in the centre of the town square, scaled with the circle. */
.clocktower {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(48px, calc(var(--size) * 0.15));
  aspect-ratio: 1;
  margin: 0;
  padding: 4px;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
}

.clocktower svg {
  display: block;
  width: 100%;
  height: 100%;
}

.clocktower:hover,
.clocktower:focus-visible {
  filter: drop-shadow(0 0 10px #f0cf83);
}

.script-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: 85vh;
  padding: 18px 22px;
  overflow: auto;
  background: #20242c;
  color: #eee;
  border: 1px solid #b69455;
  border-radius: 14px;
}

.script-dialog::backdrop {
  background: #000a;
}

.script-dialog h2 {
  margin: 0;
  color: #f0cf83;
}

/* Dawn and dusk cards: pressing anywhere closes them. */
.phase-dialog {
  width: min(480px, calc(100vw - 32px));
  text-align: center;
  cursor: pointer;
}

.phase-dialog h2 {
  font-size: 1.6rem;
}

.phase-dusk {
  border-color: #6f86c9;
}

.phase-nominations {
  border-color: #c9a86f;
}

/* Before nominations open early: Start nominations, or Keep talking. */
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  text-align: center;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* The final reveal's "Who lied to you". */
.lies {
  margin: 6px 0 14px;
  padding-left: 18px;
}

.lies li {
  margin: 4px 0;
}

.lie-day {
  color: #b69455;
  font-weight: 700;
}

/* How this game simplifies a character's official ability (the
   catalogue's `note`). */
.ability-note {
  display: block;
  margin-top: 2px;
  font-size: 0.9em;
  font-style: italic;
  color: #b69455;
}

.phase-nomination {
  border-color: #f0cf83;
}

/* Someone claimed the Goblin when nominated: executed today, their team
   wins. */
.phase-goblin {
  border-color: #ef6b72;
}

.phase-goblin h2 {
  color: #ef6b72;
}

.phase-dusk h2 {
  color: #a9bcf2;
}

.phase-lines {
  margin: 14px 0;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
  line-height: 1.5;
}

.phase-lines .log-entry {
  padding: 4px 0;
  border-bottom: none;
}

.phase-hint {
  margin: 0;
  color: #999;
  font-size: 0.85rem;
}

.script-author {
  margin: 2px 0 8px;
  color: #bbb;
}

.script-dialog h3 {
  margin: 18px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #4b5260;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.team-townsfolk,
.team-outsider {
  color: #64b5f6;
}

.team-minion,
.team-demon {
  color: #ef6b72;
}

/* Fabled: the Storyteller's rules, on neither team. */
.team-fabled,
.role-fabled,
.ability-list dt.role-fabled,
.script-dialog h2.role-fabled {
  color: #f0cf83;
}

.ability-list {
  margin: 0;
}

.ability-list dt {
  margin-top: 8px;
  font-weight: 700;
  color: #f0cf83;
}

.ability-list dd {
  margin: 2px 0 0;
  color: #ddd;
}

/* The script popup's Night order / Characters button: in the top corner,
   where it stays as the sheet scrolls under it. */
.night-order-toggle {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  margin: -6px -10px 0 12px;
  padding: 5px 12px;
  border: 1px solid #b69455;
  border-radius: 999px;
  background: #2c313b;
  color: #f0cf83;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 8px #000a;
  cursor: pointer;
}

.night-order-toggle svg {
  width: 1.15em;
  height: 1.15em;
  margin-right: 3px;
  vertical-align: -0.22em;
}

.night-order-toggle:hover,
.night-order-toggle:focus-visible {
  background: #3b3428;
}

.night-order-list {
  margin: 0;
  padding-left: 1.8em;
}

.night-order-list li {
  margin-top: 7px;
  color: #ddd;
}

.night-order-list li::marker {
  color: #888;
  font-size: 0.85em;
}

.night-order-list b.role-good {
  color: #64b5f6;
}

.night-order-list b.role-evil {
  color: #ef6b72;
}

/* Dusk, Minion info, Demon info, Dawn: the Storyteller's steps. */
.night-order-list .night-step,
.night-order-list .night-step b {
  color: #f0cf83;
  font-style: italic;
}

.script-footnote {
  margin-top: 16px;
  color: #999;
  font-size: 0.8rem;
}

.script-dialog {
  cursor: pointer;
}

/* ── Role links & role popup ─────────────────────────────── */

/* Character names in text: press one to read about the role. */
.role-link {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px dotted currentColor;
  border-radius: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.role-link:hover,
.role-link:focus-visible {
  color: #f0cf83;
}

.role-dialog {
  width: min(420px, calc(100vw - 32px));
}

.role-team {
  margin: 2px 0 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

/* ── Nomination vote ─────────────────────────────────────── */

/* Clock hands fade in over the clock tower while a vote is counted. */
.clocktower {
  transition: opacity 0.4s;
}

.clock-hands {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.circle.voting .clock-hands {
  opacity: 1;
}

.circle.voting .clocktower,
.circle.voting .votes-needed {
  opacity: 0;
  pointer-events: none;
}

/* The votes needed to mark someone, just under the clock tower. */
.votes-needed {
  position: absolute;
  left: 50%;
  top: calc(50% + max(24px, var(--size) * 0.075) + 4px);
  transform: translateX(-50%);
  color: #f0cf83;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.4s;
  pointer-events: none;
}

/* Each hand grows up from the centre and rotates about it; 0deg is the top
   seat, as for the seats themselves. */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 4px;
  transition: transform 0.35s ease-in-out;
}

/* The small hand points at the nominator... */
.hand.hour {
  width: 4px;
  height: calc(var(--size) * 0.2);
  margin-left: -2px;
  background: #b69455;
}

/* ...and the large hand at the nominee, then round the voters. */
.hand.minute {
  width: 2px;
  height: calc(var(--size) * 0.33);
  margin-left: -1px;
  background: #f0cf83;
}

.clock-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #f0cf83;
}

.vote-count {
  position: absolute;
  left: 50%;
  top: calc(50% + 16px);
  transform: translateX(-50%);
  color: #f0cf83;
  font-weight: 800;
  white-space: nowrap;
}

/* Your chance to lower your hand before the votes are counted. */
.hand-toggle {
  position: absolute;
  left: 50%;
  top: calc(50% + 48px);
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 10px;
  border: 1px solid #f0cf83;
  border-radius: 6px;
  background: #2a2117;
  color: #f0cf83;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* A vote that was raised but didn't count (e.g. a Butler's). */
.vote-hand.not-counted {
  opacity: 0.3;
}

#block-status {
  margin: 0 0 6px;
  color: #f0cf83;
}

#block-status:empty {
  display: none;
}

/* A raised hand glows as the clock hand passes and counts it. */
.vote-hand.counted {
  filter: drop-shadow(0 0 6px #f0cf83);
}

/* Collapsible panels (Public log, Final reveal): the heading is the toggle. */
.panel > summary {
  cursor: pointer;
  list-style-position: inside;
}

.panel > summary h2 {
  display: inline;
}


/* Alignment colours for characters everywhere (blue good, red evil), and
   each player's own colour for their name. */
.role-good,
.token.role-good,
.ability-list dt.role-good,
.script-dialog h2.role-good {
  color: #64b5f6;
}

.role-evil,
.token.role-evil,
.ability-list dt.role-evil,
.script-dialog h2.role-evil {
  color: #ef6b72;
}

.player-name {
  font-weight: 700;
}

/* ── Your marks ─────────────────────────────────────────── */

/* Your mark rings a seat: blue (good) or red (evil), dashed so it isn't
   mistaken for anything the game tells you. */
.seat.guess-good {
  outline: 3px dashed #64b5f6;
  outline-offset: 2px;
}

.seat.guess-evil {
  outline: 3px dashed #ef6b72;
  outline-offset: 2px;
}

.mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #343a45;
}

.mark-label {
  color: #bbb;
  margin-right: 4px;
}

.mark-guess button[aria-pressed="true"] {
  background: #3b3428;
  border-color: #dfb85f;
}

.mark-guess button[data-guess="good"][aria-pressed="true"] {
  color: #64b5f6;
}

.mark-guess button[data-guess="evil"][aria-pressed="true"] {
  color: #ef6b72;
}

.mark[hidden] {
  display: none;
}

/* The end of a conversation: Share My Info, Leave conversation. */
.conversation-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.conversation-controls[hidden] {
  display: none;
}

/* Nominate, Request nomination and NPC nominations: their own row, below
   End day (once nominations have started), shown whether or not a player
   is selected. */
.nomination-controls[hidden] {
  display: none;
}

.nomination-controls {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #343a45;
}

/* The Amnesiac's day: a question or a guess about your secret ability.
   Guesses are grouped by what their information looks like; the group
   like your latest information is picked out. */
.amnesiac-controls[hidden] {
  display: none;
}

.amnesiac-controls {
  max-width: 650px;
  margin: 8px auto 0;
  padding-top: 8px;
  border-top: 1px solid #343a45;
}

.amnesiac-controls h4 {
  margin: 4px 0 6px;
  color: #f0cf83;
}

.amnesiac-questions,
.amnesiac-guesses fieldset {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.amnesiac-guesses fieldset {
  margin: 8px 0;
  border: 1px solid #343a45;
  border-radius: 10px;
}

.amnesiac-guesses fieldset.like {
  border-color: #b69455;
}

.amnesiac-guesses legend {
  padding: 0 6px;
  color: #aab;
  font-size: 14px;
}

.amnesiac-guesses .like legend {
  color: #f0cf83;
}

.amnesiac-controls button {
  flex: 1 1 260px;
  text-align: left;
}

.amnesiac-guesses summary {
  cursor: pointer;
  color: #aab;
  font-size: 14px;
}