/* Light (parchment) is the base; dark (night) follows the system or the toggle.
   Every text colour pair meets WCAG AA; most meet AAA. */
:root {
  --bg: #f4ecd8;
  --panel: #fffaf0;
  --text: #1f1830;
  --dim: #4f4560;
  --good: #1f4f97;
  --evil: #a01c25;
  --other: #7a5510;
  --brass: #7a5510;
  --token: #fffaf0;
  --line: #cdbf9f;
  --outsider: #0e7c74;
  --minion: #b8560f;

  --display: 'IM Fell English', Georgia, serif;
  --serif: 'Alegreya', Georgia, serif;
  --body: 'Alegreya Sans', system-ui, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #221932;
    --panel: #2d2241;
    --text: #f3e9d2;
    --dim: #cfc3aa;
    --good: #8fb4ee;
    --evil: #f08a8e;
    --other: #e0b964;
    --brass: #e0b964;
    --token: #f3e9d2;
    --line: #4a3d63;
    --outsider: #4cc2b4;
    --minion: #f2954b;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #221932;
  --panel: #2d2241;
  --text: #f3e9d2;
  --dim: #cfc3aa;
  --good: #8fb4ee;
  --evil: #f08a8e;
  --other: #e0b964;
  --brass: #e0b964;
  --token: #f3e9d2;
  --line: #4a3d63;
  --outsider: #4cc2b4;
  --minion: #f2954b;
  color-scheme: dark;
}

@media (prefers-contrast: more) {
  :root { --dim: var(--text); --line: var(--text); }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 0 16px;
  background: var(--bg);
  color: var(--text);
  font: 400 1.125rem/1.6 var(--body);
  display: flex;
  flex-direction: column;
  align-items: center;
}

main {
  width: 100%;
  max-width: 60rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Narrow screens stack question, result, circle, then the lists; the wrapper
   dissolves so the circle can sit between them. */
.side { display: contents; }
.intro { order: 0; }
#question-panel, .hunt-panel { order: 1; }
#result-panel { order: 2; }
.stage { order: 3; }
.path { order: 4; }
.pool { order: 5; }

/* Wide screens: panels on the left, the circle on the right, sized to the
   window height and kept in view while scrolling. */
@media (min-width: 64rem) {
  main {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(22rem, 44rem) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }

  .side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* The stage fills the space beside the panels at window height and stays in
     view; the circle is centred in it and sized to fit it. */
  /* Spans exactly from the panels' edge to the window's edge (cancelling the
     body's side padding), so the circle sits in the middle of the visible space. */
  .stage {
    margin-right: -16px;
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    container: stage / size;
  }

  .stage > .circle {
    --S: max(18rem, min(calc((100cqw - 2rem) / 1.07), calc((100cqh - 2rem) / 1.07), 980px));
    margin: 0;
  }

  .intro { padding: 0.5rem 0 1.25rem; }
  .intro h1 { margin-top: 0.75rem; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header */
.intro {
  width: 100%;
  max-width: 60rem;
  text-align: center;
  padding: 0.75rem 0 1.5rem;
}

h1 {
  font: 400 clamp(2rem, 6vw, 3rem)/1.1 var(--display);
  margin: 1.5rem auto 0.75rem;
  max-width: 18ch;
}

.intro p {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--dim);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}

.topbar a {
  color: var(--dim);
  text-underline-offset: 3px;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.topbar a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; }
.topbar a:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.theme-toggle { margin-left: auto; }

/* Question and result panels */
.panel {
  width: 100%;
  max-width: 40rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}


.question {
  margin: 1rem 0 0.5rem;
  font: 500 clamp(1.5rem, 4.5vw, 2.1rem)/1.3 var(--serif);
  text-wrap: balance;
}

.question:focus { outline: none; }

/* Personality mode asks the styled phrasing of each question. */
.question.voiced {
  font-size: clamp(1.2rem, 3.6vw, 1.55rem);
  line-height: 1.4;
  text-wrap: pretty;
}


/* The shareable quote on the result. */
.share-quote {
  margin: 1.25rem auto 0;
  max-width: 30rem;
}

.share-quote blockquote {
  margin: 0;
  font: italic 500 1.15rem/1.5 var(--serif);
}


.share-options {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.share-status {
  margin: 0.75rem 0 0;
  min-height: 1.5em;
  color: var(--dim);
}

.feedback {
  margin: 0 0 1.5rem;
  min-height: 1.6em;
  color: var(--dim);
}

.answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.secondary {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Shown so a question can be referenced when asking for changes. */
.question-id {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--dim);
}

.question-id span, .path .path-id {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9em;
  user-select: all;
}

.path .path-id { color: var(--dim); }


kbd {
  font: 500 0.9em var(--body);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
  padding: 0 0.35em;
}

/* Buttons */
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

.answer {
  min-height: 3.25rem;
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--brass);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 700 1.35rem/1.2 var(--serif);
}

/* Touch screens keep :hover after a tap, so only real pointers get it, and it's
   suppressed after answering until the pointer moves (see .settling in app.js). */
@media (hover: hover) {
  .answers:not(.settling) .answer:hover { background: var(--brass); color: var(--panel); }
}

.answer:active { background: var(--brass); color: var(--panel); }

.quiet {
  min-height: 2.75rem;
  border: 0;
  background: none;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.25rem 0.5rem;
}

.quiet:hover { color: var(--text); }
.quiet:disabled { cursor: default; text-decoration: none; opacity: 0.6; }

/* Result */
.result-art {
  width: clamp(7rem, 30vw, 10rem);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  background: var(--token);
  border: 3px solid var(--good);
  padding: 0.5rem;
}

.result-art.evil { border-color: var(--evil); }
.result-art.other { border-color: var(--other); }

.result-lead { margin: 1rem 0 0; color: var(--dim); }

.result-name {
  margin: 0;
  font: 400 clamp(2.5rem, 9vw, 3.75rem)/1.05 var(--display);
}

.result-name:focus { outline: none; }

.result-name.several { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; }

.result-team { margin: 0.5rem 0 1rem; font: 700 1.2rem/1.3 var(--serif); }
.result-team.good { color: var(--good); }
.result-team.evil { color: var(--evil); }
.result-team.other { color: var(--other); }

.result-summary {
  margin: 0 auto;
  max-width: 30rem;
  font-size: 1.2rem;
}

/* The town circle (js/circle.js): beads while many remain, seats once few do. */
.circle {
  /* Never wider than the screen or taller than the window. */
  --S: max(15rem, min(calc((100vw - 32px) / 1.07), 560px, calc(100svh - 3rem)));
  --bead: calc(var(--S) * 0.017);
  --seat: min(calc(var(--S) * 0.15), 120px);
  --ease: cubic-bezier(0.65, 0, 0.25, 1);
  position: relative;
  width: var(--S);
  aspect-ratio: 1;
  margin: 2.5rem auto 0;
  container: circle / inline-size;
}

.ring {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.ring-token {
  --d: var(--bead);
  --r: calc(var(--S) * 0.46);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  border: 0 solid var(--good);
  background: var(--good);
  overflow: hidden;
  cursor: pointer;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) scale(var(--k, 1));
  /* --dur is set to a slow float for the moment the town sits down (js/circle.js). */
  --move: var(--dur, 900ms) var(--ease);
  transition: transform var(--move), width var(--move), height var(--move), margin var(--move),
    border-width var(--move), background-color 500ms ease, opacity 500ms ease, box-shadow 400ms ease;
  transition-delay: var(--delay, 0ms);
}

.ring-token.evil { background: var(--evil); border-color: var(--evil); }
.ring-token.other { background: var(--other); border-color: var(--other); }
.ring-token.team-outsider { background: var(--outsider); border-color: var(--outsider); }
.ring-token.team-minion { background: var(--minion); border-color: var(--minion); }

/* Seated tokens imitate the physical ones: a parchment face, a large icon, the
   name curving round the bottom edge, and no team rim (the art's own colour shows
   alignment). Beads fade into the parchment as they grow. */
.ring-token::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fbf5e6 0%, #efe3c6 55%, #d6c197 100%);
  box-shadow: inset 0 0 0 1.5px rgba(74, 52, 26, 0.55), inset 0 -4px 8px rgba(74, 52, 26, 0.2);
  opacity: 0;
  transition: opacity 600ms ease;
}

.ring-art {
  position: absolute;
  left: 0;
  top: -7%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 600ms ease, filter 500ms ease;
}

.ring-name {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transition: opacity 600ms ease;
}

.ring-name text {
  font: 400 13px var(--display);
  letter-spacing: 0.03em;
  fill: #2b1d12;
}

/* The shroud laid over a dead player's token. */
.ring-token::after {
  content: '';
  position: absolute;
  left: 26%;
  right: 26%;
  top: -2%;
  height: 46%;
  background: linear-gradient(#17121d, #2e2537);
  clip-path: polygon(0 0, 100% 0, 90% 76%, 70% 100%, 50% 84%, 30% 100%, 10% 76%);
  opacity: 0;
  transform: translateY(-35%);
  transition: opacity 500ms ease, transform 500ms ease;
}

.ring-token[data-state="bead-out"] { background: var(--line); opacity: 0.55; --k: 0.8; }

.ring-token[data-state="gone"] { opacity: 0; --k: 0.2; pointer-events: none; }

.ring-token[data-state="seat"],
.ring-token[data-state="seat-out"] {
  --d: var(--seat);
  --r: calc(var(--S) * 0.39);
  background-color: #efe3c6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ring-token[data-state="seat"]::before,
.ring-token[data-state="seat-out"]::before,
.ring-token[data-state="seat"] .ring-art,
.ring-token[data-state="seat-out"] .ring-art { opacity: 1; }

@container circle (min-width: 400px) {
  .ring-token[data-state="seat"] .ring-name,
  .ring-token[data-state="seat-out"] .ring-name { opacity: 1; }
}

.ring-token[data-state="seat-out"] { --k: 0.92; }
.ring-token[data-state="seat-out"] .ring-art { filter: grayscale(0.8) brightness(0.8); }
.ring-token[data-state="seat-out"]::after { opacity: 0.9; transform: none; }

.ring-token.chosen {
  --k: 1.3;
  z-index: 1;
  outline: 3px solid var(--brass);
  outline-offset: 4px;
}

/* Daily hunt guessing: seated tokens become tappable once guessing opens. */
.circle.selectable .ring-token[data-state="seat"] { cursor: pointer; }
.circle.selectable .ring-token[data-state="seat"]:hover { --k: 1.08; }
.ring-token.selected { --k: 1.18; z-index: 1; outline: 3px dashed var(--brass); outline-offset: 4px; }

.circle-centre {
  position: absolute;
  inset: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.circle-count {
  margin: 0;
  font: 400 clamp(2.5rem, 14cqw, 4.5rem)/1 var(--display);
}

.circle-label {
  margin: 0.35rem 0 0;
  min-height: 1.5em;
  color: var(--dim);
  font: 500 1.05rem/1.3 var(--serif);
}

/* Daily hunt */
.last-answer {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--bg);
}

.last-question { margin: 0; }
.last-reply { margin: 0.25rem 0 0; font-weight: 700; }

.history {
  margin: 0.75rem 0 0;
  text-align: left;
}

.history > summary {
  cursor: pointer;
  color: var(--dim);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.history > summary { list-style: none; }
.history > summary::-webkit-details-marker { display: none; }
.history > summary::before { content: "▸"; }
.history[open] > summary::before { content: "▾"; }

.history ol { margin: 0.25rem 0 0; padding-left: 1.75rem; }
.history li { margin-bottom: 0.4rem; }
.history .reply { font-weight: 700; }
.history .path-id { color: var(--dim); font: 400 0.8rem ui-monospace, Consolas, monospace; }

/* Report a question: a small envelope link after each asked question. */
.report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin-left: 0.2rem;
  vertical-align: middle;
  color: var(--dim);
  border-radius: 4px;
}
.report svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.report:hover { color: var(--text); }
.report:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.hunt-heading {
  margin: 1.5rem 0 0.75rem;
  font: 500 1.3rem/1.3 var(--serif);
}

.hunt-heading:focus { outline: none; }

.offers {
  display: grid;
  gap: 0.6rem;
}

.offer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 2px solid var(--line);
  border-radius: 0.9rem;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  font: 500 1.08rem/1.4 var(--serif);
}

@media (hover: hover) {
  .offer:hover { border-color: var(--brass); }
}

.offer-id {
  color: var(--dim);
  font: 400 0.8rem/1.2 ui-monospace, Consolas, monospace;
}

.guessing { margin-top: 1.5rem; }
.guess-hint { margin: 0 0 0.75rem; }
.guess-hint:focus { outline: none; }

.candidates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.candidate {
  min-height: 2.75rem;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
}

.candidate.selected { border-color: var(--brass); background: var(--brass); color: var(--panel); }

.guess-locked { margin: 1rem 0 0; color: var(--dim); }
.guess-locked:empty { display: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.5rem 0 0.5rem;
}

.stats dt { grid-row: 2; color: var(--dim); font-size: 0.9rem; }
.stats dd { grid-row: 1; margin: 0; font: 400 2rem/1 var(--display); }

.countdown { margin: 0.5rem 0 0; color: var(--dim); }

.wrong-guess { color: var(--dim); }

/* Answer path */
.path {
  width: 100%;
  max-width: 40rem;
  margin-top: 2.5rem;
}

.path h2, .pool h2 {
  font: 400 1.75rem/1.2 var(--display);
  margin: 0 0 1rem;
}

.path ol { margin: 0; padding-left: 1.75rem; }
.path li { margin-bottom: 0.5rem; }
.path .reply { font-weight: 700; }
.path .left { color: var(--dim); }

/* Remaining characters, grouped by team */
.pool {
  width: 100%;
  margin-top: 3rem;
}

.pool > summary {
  cursor: pointer;
  text-align: center;
  list-style-position: inside;
}

.pool > summary h2 { display: inline; }

.pool[open] > summary { margin-bottom: 1.25rem; }

.team-group { margin-bottom: 2rem; }

.team-group h3 {
  font: 700 1.25rem/1.3 var(--serif);
  margin: 0 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}

.tokens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 1rem 0.5rem;
}

.token {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.25;
}

.token .art {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  border-radius: 50%;
  background: var(--token);
  border: 2px solid var(--good);
  padding: 0.2rem;
}

.token.evil .art { border-color: var(--evil); }

.token .ability {
  font-size: 0.95rem;
  color: var(--dim);
  max-width: 18rem;
}
.token.other .art { border-color: var(--other); }

footer {
  margin-top: auto;
  padding: 3rem 0 1.5rem;
  max-width: 34rem;
  text-align: center;
  font-size: 1rem;
  color: var(--dim);
}

/* Community Created Content badge: parchment in the light theme, dark sleeve in the dark theme. */
.ccc {
  display: block;
  width: min(14rem, 60vw);
  height: auto;
  margin: 0 auto;
}

.ccc-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ccc-light { display: none; }
  :root:not([data-theme="light"]) .ccc-dark { display: block; }
}

:root[data-theme="dark"] .ccc-light { display: none; }
:root[data-theme="dark"] .ccc-dark { display: block; }

@media (forced-colors: active) {
  .token .art, .result-art { border-color: CanvasText; }
  .answer { border-color: ButtonText; }
}


/* ===== Visual polish: town square at night, with a clocktower ===== */
:root {
  --glow: rgba(201, 162, 78, 0.24);
  --dial: #c9b994;
  --shadow: rgba(48, 30, 12, 0.32);
  --parchment: radial-gradient(circle at 50% 38%, #fbf5e6 0%, #efe3c6 55%, #d6c197 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glow: rgba(224, 185, 100, 0.15); --dial: #5a4c74; --shadow: rgba(0, 0, 0, 0.55); }
}
:root[data-theme="dark"] { --glow: rgba(224, 185, 100, 0.15); --dial: #5a4c74; --shadow: rgba(0, 0, 0, 0.55); }

/* Paper grain over the page colour (fine noise, very low contrast). */
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.26 0 0 0 0 0.14 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header: mode tabs and a title with presence, left-aligned with the panels. */
.intro { text-align: left; }
.intro h1 {
  max-width: none;
  margin: 1.5rem 0 0.5rem;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.intro p { margin: 0; max-width: 34rem; }

.topbar { justify-content: space-between; }
.modes {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}
.modes a {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  color: var(--dim);
  text-decoration: none;
}
.modes a:hover { color: var(--text); }
.modes a[aria-current="page"] { background: var(--text); color: var(--bg); font-weight: 700; }

/* Cards */
.panel {
  text-align: left;
  border-radius: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 22px 44px -30px var(--shadow);
}
.panel.result { text-align: center; }

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.card-number { font: 400 1.6rem/1 var(--display); }
.card-left { color: var(--dim); }

/* The question is spoken: a brass quotation mark, then the line, left-aligned for reading. */
.question.voiced {
  margin: 0 0 1.25rem;
  text-align: left;
  font: 500 clamp(1.2rem, 2.1vw, 1.55rem)/1.5 var(--serif);
  text-wrap: pretty;
}
.question.voiced::before {
  content: "\201C";
  display: block;
  height: 1.6rem;
  margin-bottom: 0.2rem;
  color: var(--brass);
  font: 400 4.5rem/1 var(--display);
}
.feedback { margin: 0 0 1rem; text-align: left; font-size: 1rem; }

.answer-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  font: 700 1.55rem/1 var(--serif);
}
.answer-tile kbd { font-size: 0.8rem; border-color: currentColor; }

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.card-foot kbd { font-size: 0.72em; margin-left: 0.25rem; }
.card-foot .question-id { margin: 0 0 0 auto; font-size: 0.85rem; color: var(--dim); }

/* The circle as a clock face: lamplight behind, an outer dial of minute and hour
   ticks, and a faint inner ring around the count. */
.circle::before {
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--glow), transparent 75%);
  pointer-events: none;
}
.circle::after {
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -0.45deg, var(--brass) 0 0.9deg, transparent 0.9deg 30deg),
    repeating-conic-gradient(from -0.35deg, var(--dial) 0 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 93%, #000 93.5% 99%, transparent 99.5%);
  mask: radial-gradient(circle closest-side, transparent 93%, #000 93.5% 99%, transparent 99.5%);
  opacity: 0.85;
  pointer-events: none;
}
.ring::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid var(--dial);
  opacity: 0.6;
}
.circle-count { font-size: clamp(3rem, 15cqw, 6rem); }
.circle-label { font-size: clamp(1rem, 2.6cqw, 1.3rem); }

/* Result: the character as a large parchment token, a team badge, and the quote as speech. */
.result-art {
  width: clamp(9rem, 28vw, 12rem);
  padding: 0;
  border: 0;
  background: var(--parchment);
  box-shadow: inset 0 0 0 2px rgba(74, 52, 26, 0.5), 0 16px 34px -16px var(--shadow);
}
.result-team {
  display: inline-block;
  margin: 0.75rem 0 1rem;
  padding: 0.15rem 0.9rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 1rem;
}
.result-lead { margin-top: 1.25rem; }
.share-quote {
  position: relative;
  margin: 1.5rem auto 0;
  padding: 1.1rem 1.25rem 1rem;
  border-radius: 1rem;
  background: var(--bg);
  text-align: left;
}
.share-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.9rem;
  left: 0.9rem;
  color: var(--brass);
  font: 400 3.5rem/1 var(--display);
}

/* Daily hunt */
.last-answer { text-align: left; border-left: 4px solid var(--brass); border-radius: 0 0.75rem 0.75rem 0; }
.hunt-heading { text-align: left; }
.offer { position: relative; }
.guessing { text-align: left; }
.candidates { justify-content: flex-start; }
.candidate { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.85rem 0.2rem 0.25rem; }
.candidate-art { width: 2rem; height: 2rem; border-radius: 50%; background: var(--parchment); object-fit: contain; }
.guess-locked { text-align: left; }
.card-left span + span::before { content: "|"; margin: 0 0.5rem; opacity: 0.5; }

.ccc { width: min(11rem, 50vw); opacity: 0.9; }

.replay { margin-top: 1rem; }
.replay .answer { min-height: 2.75rem; padding: 0.4rem 1.25rem; font-size: 1.1rem; }

/* Keyboard hints mean nothing on touchscreens. */
@media (pointer: coarse) {
  .answer-tile kbd, .card-foot kbd { display: none; }
}

.yesterday-note { margin: 0 0 1rem; color: var(--dim); font-size: 1rem; }

/* Shown when the UTC day rolls over while the daily hunt is open. */
.new-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--brass);
  border-radius: 1rem;
  background: var(--panel);
}
.new-day p { margin: 0; font-weight: 700; }
.new-day .answer { min-height: 2.75rem; padding: 0.3rem 1.1rem; font-size: 1.05rem; }

/* Daily hunt: "About" explainer under the title. */
.about { margin-top: 0.9rem; max-width: 36rem; }
.about > summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-body {
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
}
.about-body p { margin: 0 0 0.75rem; color: var(--text); }
.about-body p:last-child { margin-bottom: 0; }

/* Personality result: what gave you away, and who you nearly were. */
.why { margin: 1.5rem auto 0; max-width: 32rem; text-align: left; }
.why h3 { margin: 0 0 0.5rem; font: 400 1.35rem/1.2 var(--display); }
.why ol { margin: 0; padding-left: 1.5rem; }
.why li { margin-bottom: 0.4rem; }
.why .reply { font-weight: 700; }
.nearly {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0.35rem 1rem 0.35rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
}
.nearly-art { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--parchment); object-fit: contain; filter: grayscale(0.6); }

/* ===== Daily hunt extras: par, stamp, charts, streak keeping, archive ===== */
:root { --chart: #9a650a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart: #b98425; } }
:root[data-theme="dark"] { --chart: #b98425; }

.restore-status, .archive-banner {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--brass);
  border-radius: 1rem;
  background: var(--panel);
  text-align: left;
}
.archive-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.archive-banner p { margin: 0; font-weight: 700; }
.archive-banner a { color: var(--text); }

/* Answer stamp */
.last-answer { position: relative; overflow: hidden; }
.last-answer .last-question, .last-answer .last-reply { padding-right: 4.5rem; }
.stamp {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  padding: 0 0.5rem;
  border: 3px solid currentColor;
  border-radius: 0.4rem;
  font: 400 1.4rem/1.2 var(--display);
  letter-spacing: 0.06em;
  opacity: 0;
  transform: rotate(-10deg);
  pointer-events: none;
}
.stamp-yes { color: var(--good); }
.stamp-no { color: var(--evil); }
.stamp.stamped { animation: stamp-in 520ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-24deg) scale(2.2); }
  to { opacity: 0.9; transform: rotate(-10deg) scale(1); }
}

/* Keyboard hints on the offers, only where a keyboard is likely. */
.offer-key { display: none; }
@media (hover: hover) and (pointer: fine) {
  .offer { padding-right: 2.75rem; }
  .offer-key { display: block; }
}
.offer-key {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  min-width: 1.4rem;
  padding: 0 0.3rem;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  color: var(--dim);
  font: 700 0.8rem/1.4 var(--body);
  text-align: center;
}

/* Charts */
.chart { margin: 1.5rem 0 0; text-align: left; }
.chart figcaption { margin-bottom: 0.4rem; font: 400 1.3rem/1.2 var(--display); }
.timeline { display: block; width: 100%; height: auto; overflow: visible; }
.timeline .grid { stroke: var(--line); stroke-width: 1; }
.timeline .tick { fill: var(--dim); font: 400 12.5px var(--body); }
.timeline .tick.par-end { font-style: italic; }
.timeline .par-end-mark { stroke: var(--dim); stroke-width: 1.5; }
.timeline .value { fill: var(--text); font: 700 13.5px var(--body); }
.timeline .line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.timeline .point { fill: var(--chart); stroke: var(--panel); stroke-width: 2; }
.timeline .point.hollow { fill: var(--panel); stroke: var(--chart); stroke-width: 2; }
.scores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 8rem;
}
.scores li { flex: 1 1 0; min-width: 0; max-width: 2.75rem; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.scores .bar { width: 100%; height: calc((100% - 2.6rem) * var(--f)); min-height: 4px; border-radius: 4px 4px 0 0; background: var(--line); }
.scores .today .bar { background: var(--chart); }
.scores .count { font-weight: 700; font-size: 0.85rem; line-height: 1.3rem; }
.scores .score { color: var(--dim); font-size: 0.8rem; line-height: 1.3rem; }
.scores .today .score { color: var(--text); font-weight: 700; }

/* Keep your streak, and past hunts */
.keep, .past { margin-top: 1.25rem; text-align: left; }
.keep > summary, .past > summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; gap: 0.4rem; list-style: none; }
.keep > summary::-webkit-details-marker, .past > summary::-webkit-details-marker { display: none; }
.keep > summary::before, .past > summary::before { content: "▸"; }
.keep[open] > summary::before, .past[open] > summary::before { content: "▾"; }
.keep-body p { margin: 0 0 0.6rem; }
.keep-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.keep-hint { color: var(--dim); }
.past { width: 100%; }
.past-list { list-style: none; margin: 0.25rem 0 0; padding: 0; columns: 2 16rem; column-gap: 2rem; }
.past-list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; break-inside: avoid; border-bottom: 1px solid var(--line); }
.past-list a { color: var(--text); }
.past-list a[aria-current="page"] { font-weight: 700; }
.past-result { color: var(--dim); white-space: nowrap; }

/* The hunt result framed on one screen (the list of questions may run below):
   the token beside the name, a short timeline, and the scores beside it. */
.hunt-result .chart { margin: 0; }
.hunt-result .charts { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 30rem) {
  .panel.hunt-result { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: center; text-align: left; }
  .hunt-result > * { grid-column: 1 / -1; }
  .hunt-result > .result-art { grid-column: 1; grid-row: 1 / span 3; width: clamp(6rem, 11vw, 8rem); }
  .hunt-result > .result-lead { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  .hunt-result > .result-name { grid-column: 2; grid-row: 2; font-size: clamp(2.25rem, 4.5vw, 3.25rem); overflow-wrap: break-word; }
  .hunt-result > .result-team { grid-column: 2; grid-row: 3; justify-self: start; align-self: start; margin: 0.4rem 0 0; }
  .hunt-result > .result-summary { margin: 1rem 0 0; max-width: none; font-size: 1.1rem; }
  .hunt-result > .share-quote { margin: 1.5rem 0 0; max-width: none; padding: 0.9rem 1.25rem 0.8rem; }
  .hunt-result > .share-quote blockquote { font-size: 1.05rem; }
  .hunt-result > .stats { margin: 1.25rem 0 0; text-align: center; }
  .hunt-result .stats dd { font-size: 1.6rem; }
  .hunt-result > .share-options { justify-content: flex-start; }
}
@media (min-width: 36rem) {
  .hunt-result .charts { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; }
  .hunt-result .charts:has(> #scores-figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
}
.timeline .par-line { fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linejoin: round; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.25rem; color: var(--dim); font-size: 0.85rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-key { width: 1.5rem; height: 0.5rem; }
.legend-key .you { stroke: var(--chart); stroke-width: 2.5; }
.legend-key .par { stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 5 4; }

/* Question codes are there for reference, so they stay small and quiet
   (80% opacity still clears AA contrast on every background in both themes). */
.offer-id, .path .path-id, .history .path-id { font-size: 0.7rem; opacity: 0.8; }
.question-id, .card-foot .question-id { font-size: 0.78rem; opacity: 0.8; }
@media (prefers-contrast: more) { .offer-id, .path-id, .question-id { opacity: 1; } }
.timeline .value { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }

/* The ten-day streak line on the result. */
.streak-line { margin: 1rem 0 0; text-align: center; }
.streak-line p { margin: 0; }
.streak-text { font-weight: 700; }
.streak-cells { margin-top: 0.25rem !important; font-size: 1.35rem; letter-spacing: 0.08em; line-height: 1.4; }

/* Questions asked: the question, then its answer, how many it ruled out, its
   code and the report link, kept together on one line that wraps as a unit. */
.asked { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; row-gap: 0.15rem; }
.asked-question { flex: 1 1 16rem; }
.asked-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.45rem; margin-left: auto; max-width: 100%; }
.asked-code { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.asked-code .path-id { min-width: 0; overflow-wrap: anywhere; }
.asked .reply {
  min-width: 2.6rem;
  padding: 0 0.5rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font: 700 0.85rem/1.5 var(--body);
  text-align: center;
}
.asked .reply-yes { border-color: var(--brass); }
.asked .cut { color: var(--dim); font: 600 0.85rem/1 var(--body); font-variant-numeric: tabular-nums; }
.asked .path-id { font-size: 0.7rem; }
.asked .report { margin-left: 0.1rem; }

/* The remaining characters, as a compact disclosure inside the card. */
.pool.compact { margin-top: 1.25rem; }
.pool.compact > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--dim);
  text-align: left;
  list-style: none;
}
.pool.compact > summary::-webkit-details-marker { display: none; }
.pool.compact > summary::before { content: "▸"; }
.pool.compact[open] > summary::before { content: "▾"; }
.pool.compact > summary h2 { margin: 0; font: 600 1rem/1.3 var(--body); color: inherit; }
.pool.compact > summary:hover h2 { color: var(--text); }
.pool.compact[open] > summary { margin-bottom: 0.75rem; }
.pool.compact .team-group h3 { font-size: 1.05rem; }

/* The reveal: the copy of the winning token in flight to the result portrait. */
.reveal-flight {
  position: fixed;
  margin: 0;
  z-index: 50;
  pointer-events: none;
  transform-origin: top left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* A link home to panimu.com, at the end of the top bar, and the community badge as a link. */
.topbar .home-link {
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.topbar .home-link::after { content: "\2197"; margin-left: 0.4rem; font-size: 0.9em; transition: transform 0.2s; }
.topbar .home-link:hover { color: var(--text); border-color: var(--brass); }
.topbar .home-link:hover::after { transform: translate(2px, -2px); }
.topbar .home-link + .theme-toggle { margin-left: 0; }
@media (max-width: 30rem) {
  .topbar { column-gap: 0.5rem; }
  .topbar .home-link { margin-left: 0; min-height: 2.5rem; padding: 0 0.7rem; }
  .topbar .home-link::after { margin-left: 0.25rem; }
}
.ccc-link { display: inline-block; line-height: 0; border-radius: 0.5rem; }
.ccc-link:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; }