/* static-site/styles.css
   the showcase page for the sleepy land bot: one stylesheet, two themes, and no
   framework behind either of them, so the page is three files and a favicon and
   nothing has to be built to publish it

   the night theme is the default because the world's own palette is keyed to it,
   and the sun and moon button repaints everything by swapping the variables below
   rather than by shipping a second stylesheet

   most of what the page shows is a mockup of a discord card, and a discord card
   looks the same on both themes because the bot only ever posts to discord. the
   phase button therefore does two things: it repaints the page around the
   mockups, and it decides which phase's variant of a mockup is on screen, so
   /dream-fishing shows the day depth or the night depth depending on where the
   reader set the switch */

:root {
  --max-width: 1180px;
  --radius: 14px;
  --radius-small: 8px;
  --step-fast: 140ms;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* discord's own surfaces, which never move: the mockups are read against the
     ground the room actually reads them on, the same reason the role swatches
     below are painted on discord's background rather than the page's */
  --discord-ground: #313338;
  --discord-embed: #2b2d31;
  --discord-text: #dbdee1;
  --discord-heading: #f2f3f5;
  --discord-muted: #949ba4;
  --discord-line: #3f4147;
  --discord-blurple: #5865f2;
  --discord-green: #248046;
  --discord-red: #da373c;
  --discord-grey: #4e5058;
}

/* night, the world's own palette: the dusk violet the guide pages glow, the
   indigo behind it, and moonlight for the second accent */
:root,
:root[data-theme="night"] {
  --bg: #0b0a14;
  --bg-elevated: #12101f;
  --card: #16142a;
  --card-hover: #1c1935;
  --border: #2a2646;
  --border-strong: #3b3570;
  --text: #e8e6f5;
  --text-muted: #a9a4c7;
  --text-faint: #7f7aa3;
  --accent: #a78bfa;
  --accent-soft: #c4b5fd;
  --accent-2: #7dd3fc;
  --accent-tint: rgba(167, 139, 250, 0.13);
  --accent-glow: rgba(167, 139, 250, 0.22);
  --code: #cdb9ff;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* day, the phase the other half of the world walks: a warm paper ground, the
   sun as the accent, the sky on the second one */
:root[data-theme="day"] {
  --bg: #fbf7f0;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --card-hover: #fffdf8;
  --border: #e6dccb;
  --border-strong: #d8c9ad;
  --text: #1a1730;
  --text-muted: #5b5473;
  --text-faint: #7d7691;
  --accent: #b45309;
  --accent-soft: #92400e;
  --accent-2: #0369a1;
  --accent-tint: rgba(245, 158, 11, 0.16);
  --accent-glow: rgba(245, 158, 11, 0.24);
  --code: #7c3aed;
  --shadow: 0 16px 32px rgba(84, 66, 34, 0.12);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* the hero glow, one soft wash of the accent behind the top of the page */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 620px;
  background:
    radial-gradient(60% 60% at 18% 0%, var(--accent-glow), transparent 70%),
    radial-gradient(50% 55% at 88% 8%, var(--accent-tint), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 var(--radius-small) var(--radius-small);
  z-index: 10;
}

.skip-link:focus {
  top: 0;
}

/* the page body and the footer keep to one width so the page has a spine */
main,
.site-footer .footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: 24px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* the bar runs the whole width and this keeps its contents on the same spine as
   the rest of the page */
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--text);
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark .moon {
  width: 22px;
  height: 22px;
}

.site-nav {
  display: flex;
  gap: 22px;
}

.site-nav a {
  color: var(--text-muted);
  font-size: 0.94rem;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition:
    border-color var(--step-fast),
    color var(--step-fast);
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* ── hero ─────────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 1;
  padding-block: 88px 56px;
  max-width: 820px;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  font-weight: 680;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero .lede {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.13rem;
  max-width: 60ch;
}

/* the live clock strip: the reader's own clock read against the anchor and the
   three hour length lib/phase-clock.config.ts pins, so the page shows the world's
   phase rather than describing it */
.phase-clock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 30px;
  padding: 16px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 640;
}

/* the pill wears the phase the world is in, so its colour is the phase's own */
.phase-pill.is-day {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #fbbf24;
}

.phase-pill.is-night {
  background: color-mix(in srgb, #6366f1 26%, transparent);
  color: #a5b4fc;
}

.phase-pill .dot {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.3;
  }
}

.phase-clock .countdown {
  color: var(--text-muted);
  font-size: 0.94rem;
}

.countdown b {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.phase-clock .turns-at {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 0.86rem;
}

/* ── sections ─────────────────────────────────────────────────── */

section {
  position: relative;
  z-index: 1;
  padding-block: 52px;
  scroll-margin-top: 80px;
}

.section-head {
  max-width: 66ch;
  margin-bottom: 30px;
}

h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.section-head p {
  margin: 0;
  color: var(--text-muted);
}

/* the sub section headings inside a section, beside the cards' own titles */
main > section > h3 {
  margin: 46px 0 12px;
  font-size: 1.18rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

/* ── the systems, one subheading and one set of cards apiece ──── */

/* the systems are set in columns rather than a grid so a short card does not
   leave a hole under a tall one beside it, and a card never splits across the
   break */
.system-grid {
  columns: 2;
  column-gap: 26px;
}

/* a system that needs the whole spine: a shelf, a chart or a set of panels that
   would be squeezed into a half column */
.system-wide {
  column-span: all;
}

.system {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
  break-inside: avoid;
}

.system-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.system-head .mark {
  font-size: 1.35rem;
  line-height: 1;
}

.system-head h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.system-head code {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--code);
}

.system-head .badge {
  margin-left: auto;
}

.caption {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 62ch;
}

/* the numbers behind each system, closed by default so the page opens as
   pictures and a reader who wants the figures asks for them */
.more {
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}

.more > summary {
  padding: 11px 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.more > summary::-webkit-details-marker {
  display: none;
}

.more > summary::before {
  content: "▸ ";
  color: var(--accent);
}

.more[open] > summary::before {
  content: "▾ ";
}

.more > summary:hover {
  color: var(--text);
}

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

/* the hairlines are drawn by each cell rather than by the gap between them, so a
   last row that does not fill the width leaves no bare strip behind it */
.values > div {
  padding: 11px 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.values dt {
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.values dd {
  margin: 3px 0 0;
  font-size: 0.97rem;
}

.sources {
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.82rem;
  font-family: var(--font-mono);
}

/* ── the discord surface ──────────────────────────────────────── */

/* a mockup sits on discord's own ground rather than the page's, because the card
   the bot sends is read there and the page's ground would flatter a colour the
   room never sees it on */
.discord {
  padding: 20px;
  background: var(--discord-ground);
  border-radius: var(--radius);
  color: var(--discord-text);
  font-size: 0.94rem;
  line-height: 1.42;
}

.discord + .discord {
  margin-top: 12px;
}

.discord-msg {
  display: flex;
  gap: 14px;
}

.discord-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: linear-gradient(150deg, #6d5bd0, #3b3570);
  border-radius: 50%;
  font-size: 1.15rem;
}

.discord-body {
  min-width: 0;
  flex: 1;
}

.discord-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.discord-name {
  color: var(--discord-heading);
  font-size: 1rem;
  font-weight: 600;
}

/* the badge discord paints beside a bot's name */
.discord-bot-tag {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  background: var(--discord-blurple);
  border-radius: 3px;
  color: #fff;
  font-size: 9px;
  line-height: 1;
}

.discord-time {
  color: var(--discord-muted);
  font-size: 0.76rem;
}

.discord-plain {
  margin: 0;
  color: var(--discord-text);
}

/* the embed itself: the colour bar down the left is the one colour the bot picks
   per card, so every mockup carries its own literal hex off its config and a card
   with no colour set falls back to discord's own grey bar */
.embed {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 14px 16px 14px 18px;
  background: var(--discord-embed);
  border-left: 4px solid var(--embed-accent, #4f545c);
  border-radius: 4px;
  max-width: 520px;
}

.embed-wide {
  max-width: none;
}

.embed-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--discord-heading);
}

.embed-title {
  color: var(--discord-heading);
  font-size: 1rem;
  font-weight: 660;
}

.embed-desc {
  margin: 0;
  color: var(--discord-text);
  font-size: 0.9rem;
}

.embed-desc em {
  font-style: italic;
}

.embed-desc strong,
.embed-field strong {
  color: var(--discord-heading);
}

.embed-fields {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.embed-field .embed-field-name {
  display: block;
  color: var(--discord-heading);
  font-size: 0.83rem;
  font-weight: 640;
}

.embed-field .embed-field-value {
  display: block;
  color: var(--discord-text);
  font-size: 0.87rem;
}

/* the drawn stand ins for the pictures the bot renders, a family tree or a chart,
   so the page shows the shape of what arrives instead of a description of it */
.embed-art {
  margin: 2px 0;
  padding: 14px;
  background: #1e1f22;
  border-radius: 4px;
  overflow-x: auto;
}

.embed-art svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* the band a gif lands on in a card that carries one, so the page shows where a
   moving picture arrives instead of describing it */
.embed-art.glyph {
  display: grid;
  place-items: center;
  height: 116px;
  background: linear-gradient(150deg, #2a2250, #14121f);
  font-size: 2.4rem;
}

.embed-footer {
  display: block;
  color: var(--discord-muted);
  font-size: 0.75rem;
}

.embed-footer .embed-footer-sep {
  opacity: 0.6;
}

/* the progress bar under the now playing card, the same twelve segments the
   gateway template lays down */
.progress-bar {
  color: var(--embed-accent, var(--discord-blurple));
  letter-spacing: 1px;
  font-size: 0.86rem;
}

.progress-bar .spent {
  color: var(--discord-muted);
  letter-spacing: 0;
}

/* the row of buttons discord puts under a card, which is where most of these
   commands are actually driven from */
.discord-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.dbutton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  background: var(--discord-grey);
  border-radius: 3px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

/* a button whose state is on, which is how the loop and party buttons read */
.dbutton-primary {
  background: var(--discord-blurple);
}

.dbutton-secondary {
  background: var(--discord-grey);
}

.dbutton-success {
  background: var(--discord-green);
}

.dbutton-danger {
  background: var(--discord-red);
}

/* ── the phase variants ───────────────────────────────────────── */

/* a mockup whose content moves with the world carries both phases in the markup
   and css shows the one the reader's switch is on, so the page needs no script
   for it. the wrapper takes the phase so the card and the action row under it
   travel together */
.phase-only {
  display: none;
}

:root[data-theme="day"] .phase-day,
:root[data-theme="night"] .phase-night {
  display: block;
}
/* ── the bazaar shelf ─────────────────────────────────────────── */

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* one ware on bella's shelf: the mark, the name, what it costs and the rung it
   waits behind, so the whole shelf is legible without a sentence about it */
.ware {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 17px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ware-accent, var(--accent));
  border-radius: var(--radius-small);
  transition: border-color var(--step-fast);
}

.ware:hover {
  border-color: var(--border-strong);
}

.ware-top {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.ware-top .mark {
  font-size: 1.1rem;
  line-height: 1;
}

.ware-name {
  font-weight: 620;
  font-size: 0.99rem;
}

.ware-note {
  color: var(--text-muted);
  font-size: 0.87rem;
}

.ware-gate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.82rem;
}

.ware-price {
  color: var(--code);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* the best ware on the shelf, held apart because its price is the whole point of
   the shelf */
.ware-hero {
  border-left-color: #fbbf24;
  background: color-mix(in srgb, #f59e0b 9%, var(--card));
}

/* ── the fishing depths ───────────────────────────────────────── */

.depths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.depth {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.depth-day {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #f59e0b 13%, var(--card)),
    var(--card)
  );
}

.depth-night {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #6366f1 18%, var(--card)),
    var(--card)
  );
}

.depth-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.depth-head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 640;
}

.depth-head .window {
  color: var(--text-faint);
  font-size: 0.82rem;
  font-family: var(--font-mono);
}

/* one species per row, the price on the right so the column is scannable */
.catch-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.catch-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.catch-list li:last-child {
  border-bottom: 0;
}

.catch-list .catch-price {
  margin-left: auto;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* ── the level ladder ─────────────────────────────────────────── */

.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rung {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--rung-day, var(--accent));
  border-radius: var(--radius-small);
}

.rung-name {
  font-weight: 640;
  font-size: 1rem;
}

.rung-level {
  color: var(--text-faint);
  font-size: 0.84rem;
}

/* ── the two paths ────────────────────────────────────────────── */

.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.path {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.path-dreamwalker {
  border-top: 3px solid #6366f1;
}

.path-beast {
  border-top: 3px solid #ef4444;
}

.path-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.path-head .mark {
  font-size: 1.5rem;
  line-height: 1;
}

.path-head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
}

.path-walks {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* the four pool rungs a path's ritual pays into */
.pool {
  display: flex;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pool li {
  flex: 1;
  padding: 8px 6px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-radius: var(--radius-small);
  text-align: center;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.pool .pool-rung {
  display: block;
  color: var(--text-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── the pillow fight wheel ───────────────────────────────────── */

.wheel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wheel li {
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.93rem;
}

.wheel .beats {
  display: block;
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 0.83rem;
}

/* ── the spirit chase board ───────────────────────────────────── */

.hop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.hop {
  padding: 6px 13px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.hop.is-live {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--text);
  font-weight: 620;
}

/* ── the tarot card ───────────────────────────────────────────── */

.tarot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tarot-art {
  display: grid;
  place-items: center;
  width: 108px;
  height: 168px;
  background: linear-gradient(155deg, #1b1733, #2f2757);
  border: 1px solid #4c3f8f;
  border-radius: 8px;
  font-size: 3rem;
}

.tarot-name {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 650;
}

.tarot-reversed {
  color: var(--text-faint);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* the chip row never carries a heading of its own, the h3 above it does */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 7px 14px;
  background: var(--accent-tint);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.chips b {
  color: var(--text);
  font-weight: 620;
}

/* ── the cycle section ────────────────────────────────────────── */

.cycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.cycle-panel {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* the two panels are the two phases, so each carries the colour that phase
   paints the guild with */
.cycle-panel.day {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #f59e0b 12%, var(--card)),
    var(--card)
  );
}

.cycle-panel.night {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #6366f1 16%, var(--card)),
    var(--card)
  );
}

.cycle-panel h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 620;
}

.room-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.96rem;
}

.room-list li {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: var(--radius-small);
}

.room-list li + li {
  margin-top: 8px;
}

.room-list .room-name {
  display: block;
}

.room-list .room-note {
  display: block;
  color: var(--text-faint);
  font-size: 0.84rem;
}

/* ── the role colours the turn repaints ───────────────────────── */

/* every name is read on discord's own background, because that is the surface the
   colour is chosen for: the page's own ground would flatter a hex the guild never
   shows it on */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: #313338;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.swatch-name {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.swatch-hexes {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.swatch-hexes code {
  color: #949ba4;
  font-size: 0.76rem;
}

.callout {
  margin-top: 22px;
  padding: 20px 24px;
  background: var(--accent-tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.callout p {
  margin: 0;
}

/* ── the command table ────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--card-hover) 60%, transparent);
}

td code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--code);
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-tint);
  border-radius: 999px;
  color: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-open {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-weight: 500;
}

/* ── under the hood ───────────────────────────────────────────── */

.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.build-grid article {
  padding: 22px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.build-grid h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 620;
}

.build-grid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
}

/* ── footer ───────────────────────────────────────────────────── */

.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
}

.site-footer .footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 32px;
  color: var(--text-faint);
  font-size: 0.92rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
}

/* the page is read on a phone as often as not, so the nav drops under the
   wordmark rather than scrolling sideways, and a mockup stops holding a width it
   cannot have */
@media (max-width: 760px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .site-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
  }

  .hero {
    padding-block: 60px 44px;
  }

  .phase-clock .turns-at {
    margin-left: 0;
  }

  .system-grid {
    columns: 1;
  }

  .discord {
    padding: 14px;
  }

  .embed {
    max-width: none;
  }

  .tarot {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .phase-pill .dot {
    animation: none;
  }
}