:root {
  --paper: #f3f0e7;
  --paper-deep: #e8e2d4;
  --ink: #171717;
  --muted: #5b574e;
  --coral: #ef5b4c;
  --teal: #158e91;
  --acid: #d6e85f;
  --line: rgba(23, 23, 23, 0.28);
  --line-strong: rgba(23, 23, 23, 0.78);
  --serif: "Playfair Display", Georgia, serif;
  --mono: "Space Mono", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { color-scheme: light; }

body {
  margin: 0;
  background:
    linear-gradient(rgba(23, 23, 23, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  color: var(--ink);
  font-family: var(--serif);
  min-width: 320px;
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 10;
}

.site-shell {
  width: min(100%, 1440px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 4.5rem) 1.25rem;
}

.mono { font-family: var(--mono); }

button, summary {
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
}

button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}

button:disabled { cursor: default; opacity: 0.48; }

.site-header, .site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.site-header {
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding: 0.7rem 0 0.85rem;
}

.site-header div:last-child { color: var(--coral); }

main { min-width: 0; }

/* Column two carries two agents now, not one portrait with a decal on it, so it takes
   the larger share. The wordmark funds that: it is the hero's biggest consumer of
   width and height, and it reads as a masthead rather than a splash at this size. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(min(100%, 24rem), 1.08fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 0;
  padding: clamp(2.5rem, 6vw, 5rem) 0 1.5rem;
  position: relative;
}

.hero-title-block {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.hero-title {
  margin: 0;
  font-size: clamp(4.6rem, 9.4vw, 8.6rem);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.085em;
  text-transform: uppercase;
}

.hero-title span {
  color: var(--coral);
  font-style: italic;
  font-size: 0.75em;
}

.supervision-stamp {
  display: inline-block;
  margin: 2.1rem 0 0 22%;
  border: 2px solid var(--coral);
  padding: 0.55rem 0.8rem;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-3deg);
}

/* Both agents share one band. Agent 002 used to be positioned inside .agent-card and
   sized as a fraction of the cat's portrait, which made her an accessory to it no
   matter what behaviour she was given. She now has her own frame in the same row.

   The columns are proportional rather than a fixed bird width: a vw-sized bird held
   its own size while the portrait absorbed whatever space was left, so peer scale
   survived at 390px and collapsed to a third of the portrait by 1440px. Expressed as
   fractions, the ratio is the same at every width. */
.agent-band {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(0.7rem, 1.5vw, 1.5rem);
  width: 100%;
  position: relative;
  z-index: 2;
}

.perch {
  grid-column: 1;
  align-self: end;
  position: relative;
}

.agent-card {
  grid-column: 2;
  justify-self: end;
  width: 100%;
  position: relative;
  transform: rotate(1.2deg);
}

/* The two frames are peers, not twins: opposite rotations and opposite spot colours.
   Identical treatment would read as a corporate team page. */
.perch-frame {
  position: relative;
  border: 1px solid var(--line-strong);
  padding: 0.7rem 0.6rem 1.5rem;
  background: var(--paper-deep);
  box-shadow: -0.7rem 0.7rem 0 var(--coral);
  transform: rotate(-2.4deg);
}

.perch-frame::before {
  position: absolute;
  inset: 0.35rem;
  border: 1px solid rgba(23, 23, 23, 0.14);
  pointer-events: none;
  content: "";
}

/* The branch sits in the gap above the perch, which exists because the band is
   bottom-aligned and the portrait is the taller frame. Absolute, so however many birds
   arrive they cost the band no height. Long-tailed tits really do line up like this. */
.flock {
  position: absolute;
  top: -2.55rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  gap: 2.5%;
  pointer-events: none;
}

.flock::after {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -0.2rem;
  height: 1px;
  background: var(--line-strong);
  content: "";
}

.flock img {
  width: 17%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0.1rem 0.12rem 0 rgba(21, 142, 145, 0.7));
}

/* Alternating tilt so a filled branch reads as several birds rather than one repeated
   sprite. Nothing here animates: the delegation is the joke, not the swarm. */
.flock img:nth-child(even) { transform: rotate(4deg); }
.flock img:nth-child(odd) { transform: rotate(-3deg); }

.shimaenaga-button {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  transform-origin: 50% 85%;
  filter: drop-shadow(0.25rem 0.3rem 0 rgba(21, 142, 145, 0.85));
  transition: transform 180ms ease, filter 180ms ease;
}

.shimaenaga-button:hover {
  transform: translateY(-0.3rem) rotate(-1.5deg);
  filter: drop-shadow(0.35rem 0.45rem 0 rgba(239, 91, 76, 0.85));
}

.shimaenaga-button img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.shimaenaga-label {
  position: absolute;
  right: -0.35rem;
  bottom: -1.15rem;
  border: 1px solid var(--ink);
  padding: 0.25rem 0.4rem;
  background: var(--acid);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0.18rem 0.18rem 0 var(--ink);
}

.shimaenaga-button.celebrating { animation: bird-hop 620ms cubic-bezier(0.2, 0.9, 0.3, 1.25); }

/* Stillness. Declared after :hover so it wins at equal specificity, and transform-only
   so crossing the page costs the band no layout. The reduced-motion block below drops
   the transition, which leaves the arrival without the flight. */
.shimaenaga-button.arrived {
  z-index: 24;
  transform: translate(var(--arrive-x, 0px), var(--arrive-y, 0px)) scale(0.62) rotate(-4deg);
  transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0.3rem 0.4rem 0 rgba(239, 91, 76, 0.7));
}

@keyframes bird-hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-1.7rem) rotate(-9deg) scale(1.08); }
  70% { transform: translateY(-0.35rem) rotate(3deg); }
}

.portrait-frame {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--paper-deep);
  box-shadow: 0.9rem 0.9rem 0 var(--teal);
}

.portrait-frame::before {
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(23, 23, 23, 0.14);
  pointer-events: none;
  content: "";
  z-index: 1;
}

.portrait-index {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  z-index: 3;
  padding: 0.3rem 0.45rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.hero-cat {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.hero-cat img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: contrast(1.05);
  transition: transform 180ms ease, filter 180ms ease;
}

.hero-cat:hover img { transform: scale(1.018); filter: contrast(1.09); }

.cat-kaomoji {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  min-width: 5rem;
  border: 1px solid var(--ink);
  padding: 0.45rem 0.6rem;
  background: var(--acid);
  font: 1rem/1.2 Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0.25rem 0.25rem 0 var(--ink);
  /* Pointer drift and the pet squash both animate this element. They compose
     through separate custom properties so neither clobbers the other. */
  transform:
    translate(var(--drift-x, 0px), var(--drift-y, 0px))
    scale(var(--squash, 1))
    rotate(var(--tilt, 0deg));
}

.speech-bubble {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 94%;
  min-height: 2.25rem;
  margin: 1.15rem auto 0;
  padding: 0.45rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
  transform: rotate(-1.2deg);
}

.dossier {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch;
  width: 100%;
  margin-top: 2.25rem;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(243, 240, 231, 0.9);
  position: relative;
  z-index: 3;
}

.dossier-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.65rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.status-mark { color: var(--teal); }
.status-mark span {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.dossier dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.dossier dl > div {
  display: block;
  min-width: 0;
  padding: 0.9rem 1rem;
}
.dossier dl > div + div { border-left: 1px solid var(--line); }
.dossier dt {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.dossier dd { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }

.tool-bay { margin: 0.75rem 0 0; }

.section-label {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.control-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-strong);
}

.control-row button {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 0.8rem clamp(0.75rem, 2vw, 1.5rem);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-style: italic;
  line-height: 1.25;
  text-align: left;
  /* A faint recessed field so these read as pressable rather than as more
     display-only cells like the dossier row directly above them. */
  background: var(--paper-deep);
  transition: background 150ms ease, color 150ms ease;
}

.control-row button + button { border-left: 1px solid var(--line); }
.control-row button:hover { background: var(--ink); color: var(--paper); }
/* Chaos is a toggle. It set aria-pressed but looked identical when armed. */
.control-row button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.control-row button:hover .control-index,
.control-row button[aria-pressed="true"] .control-index { color: var(--acid); }
.control-index { color: var(--coral); font-size: 0.75rem; font-style: normal; font-weight: 700; }

.fortune-box, .laser-game {
  width: min(100%, 62rem);
  margin: 1.25rem auto 0;
  border: 1px solid var(--line-strong);
  background: rgba(243, 240, 231, 0.96);
  box-shadow: 0.55rem 0.55rem 0 var(--coral);
}

/* The panel hugs the arena rather than floating a small field in a wide box. */
.laser-game { width: min(100%, 40rem); }

.fortune-box {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1rem 1.2rem 1.3rem;
}

.panel-label { color: var(--coral); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; }
.fortune-box p { margin: 0.55rem 0 0; font-size: 1.2rem; line-height: 1.45; }
.close-button { width: 44px; height: 44px; flex: 0 0 auto; font: 1.5rem Arial, sans-serif; }

.laser-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem 1.2rem;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0.35rem 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
}
#laser-status { flex: 1 1 16rem; }
.laser-head .close-button { margin-left: auto; }
/* The rule above belongs to .laser-head so the arena can be narrower than the
   panel without shortening it. A full-panel-width arena is not a game. */
.laser-arena {
  position: relative;
  width: min(100%, 37.5rem);
  height: 190px;
  margin: 0 auto;
  border-inline: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(circle at center, transparent 0 2px, rgba(23, 23, 23, 0.08) 2px 3px, transparent 3px),
    var(--paper-deep);
  background-size: 22px 22px;
}
.laser-dot { position: absolute; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.laser-dot::before {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(239, 91, 76, 0.15), 0 0 18px rgba(239, 91, 76, 0.85);
  content: "";
}

.roster { margin: clamp(2rem, 3.5vw, 3.25rem) 0 4rem; border-top: 4px solid var(--ink); }
.roster > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
  padding: 0.95rem 0;
  list-style: none;
  font-size: clamp(1.9rem, 4vw, 3.8rem);
  line-height: 1;
}
.roster > summary::-webkit-details-marker { display: none; }
/* The roster is the only door on the page. At rest it has to read as a door, not
   as a section heading sitting above the footer. */
.summary-meta { color: var(--coral); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.summary-caret { display: inline-block; margin-left: 0.6rem; transition: transform 180ms ease; }
.roster[open] .summary-caret { transform: rotate(90deg); }
.roster > summary > span:first-child {
  border-bottom: 2px solid transparent;
  transition: border-color 150ms ease;
}
.roster > summary:hover > span:first-child { border-bottom-color: var(--coral); }

.roster-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  border-block: 1px solid var(--line);
  padding: 1rem 0;
}
.roster-intro > p { margin: 0; font-size: 1.05rem; font-style: italic; }
.status-panel { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.7rem 1.5rem; font-size: 0.75rem; font-weight: 700; }
.status-panel span { color: var(--coral); }

.gallery {
  display: grid;
  /* Three columns, because the roster holds nine cards and 3x3 fills exactly. At four
     columns the ninth card sat alone on a row with three empty cells. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
  margin-top: 1.5rem;
}

/* Explicit rows so the number / glyph / status / specialty bands line up across all
   nine cards regardless of lock state. The hint absorbs the slack at the bottom. */
.gallery-item {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  min-height: 18rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.item-number { grid-row: 1; }
.item-kaomoji { grid-row: 2; }
.item-locked, .item-title { grid-row: 3; }
.item-specialty { grid-row: 4; }
.item-hint { grid-row: 5; }
.gallery-item:nth-child(-n + 3) { border-top: 1px solid var(--line); }
.item-number { color: var(--muted); font-size: 0.75rem; text-align: left; }
.item-kaomoji {
  display: grid;
  place-items: center;
  min-height: 6.5rem;
  margin: 0.75rem 0 0.2rem;
  font: clamp(1.4rem, 2.5vw, 2.2rem) Arial, sans-serif;
  white-space: nowrap;
}
.dot-glyph { color: var(--coral); font-size: 2.5rem; }
.item-locked { display: none; color: var(--coral); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.item-title { font-size: 1.1rem; font-weight: 700; }
.item-specialty { margin-top: 0.45rem; color: var(--teal); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; }
.item-hint { margin-top: 1rem; color: var(--muted); font-size: 0.9rem; font-style: italic; line-height: 1.45; }

.gallery-item.locked .item-kaomoji {
  filter: blur(7px);
  opacity: 0.18;
  transform: scale(0.84);
  user-select: none;
}
/* Locked cards keep their name secret but show what they do. The specialty lines are
   the half worth reading, and concealing both left the grid blank. */
.gallery-item.locked .item-title { display: none; }
.gallery-item.locked .item-specialty { color: var(--muted); }
.gallery-item.locked .item-locked { display: block; }
.gallery-item.just-unlocked { animation: stamp-in 480ms cubic-bezier(0.2, 0.9, 0.3, 1.25); }

@keyframes stamp-in {
  0% { opacity: 0.2; transform: scale(1.12) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.evidence-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.reset-button {
  min-height: 44px;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.4rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.reset-button:hover { color: var(--coral); border-color: var(--coral); }
.reset-button.confirming { border: 1px solid var(--coral); padding-inline: 0.75rem; color: var(--coral); }
.reset-status { color: var(--muted); font-size: 0.88rem; font-style: italic; }

.secret-banner {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 20;
  max-width: calc(100vw - 3rem);
  border: 2px solid var(--ink);
  padding: 0.9rem 1rem;
  background: var(--acid);
  box-shadow: 0.45rem 0.45rem 0 var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}
.neon-cat { position: fixed; right: 2rem; bottom: 5.5rem; z-index: 20; color: var(--coral); font: 2rem Arial, sans-serif; text-shadow: 2px 2px var(--teal); }

.site-footer {
  border-top: 4px solid var(--ink);
  padding-top: 0.9rem;
}
.site-footer div:last-child { color: var(--muted); text-transform: lowercase; }

.recruiting-page .site-header div:last-child { color: var(--teal); }

.recruiting-policy {
  width: min(100%, 58rem);
  margin: clamp(3.5rem, 9vw, 7rem) auto clamp(4rem, 9vw, 7rem);
}

.recruiting-kicker {
  margin: 0 0 1.25rem;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.recruiting-title {
  margin: 0;
  font-size: clamp(4.3rem, 10vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.78;
  text-transform: uppercase;
}

.recruiting-title span { color: var(--coral); font-style: italic; }

.recruiting-stamp {
  display: inline-block;
  margin: 1.7rem 0 2.2rem;
  border: 2px solid var(--coral);
  padding: 0.55rem 0.8rem;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
}

.recruiting-brief {
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(243, 240, 231, 0.9);
}

.recruiting-brief > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.7rem 1rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.recruiting-status { color: var(--teal); white-space: nowrap; }
.recruiting-status::before {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.recruiting-copy { padding: clamp(1.35rem, 4vw, 2.5rem); }
.recruiting-copy > *:first-child { margin-top: 0; }
.recruiting-copy > *:last-child { margin-bottom: 0; }
.recruiting-copy p,
.recruiting-copy li { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.58; }
.recruiting-copy p { margin: 0 0 1.25rem; }
.recruiting-copy ol { margin: 1.25rem 0; padding-left: 1.6rem; }
.recruiting-copy li + li { margin-top: 0.9rem; }
.recruiting-copy strong { font-weight: 700; }

.recruiting-rule {
  margin: 1.65rem 0;
  border-block: 1px solid var(--line-strong);
  padding: 0.85rem 0;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.chaos-mode {
  background:
    repeating-linear-gradient(117deg, transparent 0 4.2rem, rgba(239, 91, 76, 0.08) 4.2rem 4.35rem),
    var(--paper);
}
.chaos-mode .hero-title { text-shadow: 0.05em 0 var(--coral), -0.05em 0 var(--teal); animation: minor-malfunction 1.8s steps(2, end) infinite; }
.chaos-mode .portrait-frame { box-shadow: 0.9rem 0.9rem 0 var(--coral); }
.chaos-mode .gallery-item:nth-child(even) { transform: rotate(1.1deg); }
.chaos-mode .gallery-item:nth-child(odd) { transform: rotate(-1.1deg); }

@keyframes minor-malfunction {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(0.02em, -0.015em); }
}

/* The incident itself, as opposed to its aftermath. A single wash rather than a
   strobe, and fixed-position so it cannot contribute to document overflow. */
.chaos-igniting::after {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  content: "";
  background: var(--coral);
  animation: incident-wash 780ms ease-out forwards;
}

@keyframes incident-wash {
  0% { opacity: 0.42; }
  35% { opacity: 0.16; }
  100% { opacity: 0; }
}

.chaos-igniting .site-header { animation: incident-alarm 300ms steps(1, end) 2; }

@keyframes incident-alarm {
  0%, 49% { background: var(--coral); color: var(--paper); }
  50%, 100% { background: transparent; }
}

/* Below ~920px the wordmark and two peer-scale agents cannot share a row: a two-column
   hero left the band about 240px wide, which made both agents small rather than making
   one of them subordinate. The masthead takes its own band and the desk takes the next,
   so every width under 921px gives both agents the full measure. */
@media (max-width: 920px) {
  .hero { display: block; padding: 3rem 0 1.5rem; }
  .hero-title { font-size: clamp(3.6rem, 11vw, 7rem); }
  .agent-band {
    width: min(100%, 34rem);
    margin: 1.4rem 0 0 auto;
    gap: 0.7rem;
  }
  .perch-frame { padding: 0.55rem 0.5rem 1.35rem; box-shadow: -0.5rem 0.5rem 0 var(--coral); }
  .dossier { width: 100%; margin-top: 2rem; }
  .dossier dl { display: grid; grid-template-columns: repeat(3, 1fr); }
  .dossier dl > div { display: block; padding: 0.9rem; }
  .dossier dl > div + div { border-top: 0; border-left: 1px solid var(--line); }
  .dossier dd { margin-top: 0.5rem; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item:nth-child(-n + 4) { border-top: 0; }
  .gallery-item:nth-child(-n + 2) { border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .site-shell { padding: 0.75rem 1rem 1rem; }
  .site-header, .site-footer { gap: 0.75rem; font-size: 0.75rem; letter-spacing: 0.025em; }
  .site-header div:last-child, .site-footer div:last-child { text-align: right; }

  .hero { display: block; padding: 1.25rem 0 0.55rem; }
  .eyebrow { margin-bottom: 0.8rem; font-size: 0.75rem; }
  /* The wordmark pays for the agent band. It was clamp(4.7rem, 23vw, 7rem) over two
     lines at 0.73 leading, which is the single largest block on the first screen and
     is decorative after the first second. A masthead, not a splash. */
  .hero-title { font-size: clamp(3.3rem, 16vw, 4.9rem); line-height: 0.75; }
  .supervision-stamp { margin: 0.9rem 0 0 0.2rem; font-size: 0.75rem; }
  /* Both agents sit in one row at peer scale. The old composition pulled the portrait
     up over the stamp with a negative margin and guarded it with a calc() against
     SUPERVISION: ABSENT; neither is needed once the band owns its own row. */
  .agent-band { gap: 0.55rem; margin-top: 1rem; }
  .agent-card { width: 100%; margin: 0; transform: rotate(1deg); }
  .shimaenaga-label { right: -0.25rem; bottom: -1rem; padding: 0.15rem 0.3rem; font-size: 0.65rem; }
  .perch-frame { padding: 0.45rem 0.4rem 1.2rem; box-shadow: -0.4rem 0.4rem 0 var(--coral); }
  .portrait-frame { box-shadow: 0.5rem 0.5rem 0 var(--teal); }
  .portrait-index { top: 0.65rem; left: 0.7rem; padding: 0.22rem 0.35rem; font-size: 0.62rem; }
  .cat-kaomoji { right: 0.45rem; bottom: 0.45rem; min-width: 4.4rem; font-size: 0.88rem; }
  .speech-bubble { margin-top: 0.8rem; font-size: 0.875rem; }

  .dossier { margin-top: 1.4rem; }
  .dossier-heading { font-size: 0.75rem; }
  .dossier dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dossier dl > div { display: block; padding: 0.65rem 0.45rem; }
  .dossier dl > div + div { border-top: 0; border-left: 1px solid var(--line); }
  .dossier dt { font-size: 0.75rem; }
  .dossier dd { margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.3; }

  .section-label { font-size: 0.75rem; }
  .control-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-row button { display: block; min-height: 5.4rem; padding: 0.6rem 0.45rem; font-size: 0.875rem; }
  .control-row button + button { border-top: 0; border-left: 1px solid var(--line); }
  .control-index { display: block; width: auto; margin-bottom: 0.45rem; font-size: 0.75rem; }

  .fortune-box, .laser-game { margin-top: 0.9rem; box-shadow: 0.35rem 0.35rem 0 var(--coral); }
  .fortune-box p { font-size: 1rem; }
  .laser-head { font-size: 0.75rem; }
  .laser-arena { height: 165px; }

  .roster { margin: 3.4rem 0 3rem; }
  .roster > summary { display: block; min-height: 0; padding: 0.85rem 0; font-size: 2rem; }
  .summary-meta { display: block; margin-top: 0.6rem; font-size: 0.75rem; }
  .roster-intro { display: block; }
  .roster-intro > p { font-size: 0.95rem; }
  .status-panel { justify-content: flex-start; margin-top: 0.75rem; gap: 0.4rem 1rem; font-size: 0.75rem; }
  .gallery { margin-top: 1rem; }
  .gallery-item { min-height: 15.8rem; padding: 0.75rem 0.55rem; }
  .item-kaomoji { min-height: 5.2rem; font-size: clamp(1.12rem, 5vw, 1.55rem); }
  .item-title { font-size: 0.95rem; }
  .item-specialty { font-size: 0.75rem; }
  .item-hint { font-size: 0.875rem; }
  .item-number, .item-locked { font-size: 0.75rem; }
  .evidence-row { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .reset-button { font-size: 0.75rem; }
  .reset-status { font-size: 0.875rem; }

  .recruiting-policy { margin: 3rem 0 4rem; }
  .recruiting-title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .recruiting-stamp { margin: 1.15rem 0 1.7rem; font-size: 0.75rem; }
  .recruiting-brief > header { align-items: flex-start; padding: 0.65rem 0.7rem; font-size: 0.75rem; }
  .recruiting-copy { padding: 1.2rem 1rem; }
  .recruiting-copy p, .recruiting-copy li { font-size: 1rem; line-height: 1.55; }
}

/* Below ~375px the rhythm tightens so the dossier still clears the fold. The band
   keeps both agents side by side; stacking them would cost more height than it saves. */
@media (max-width: 375px) {
  .hero { padding: 0.5rem 0 0.4rem; }
  .eyebrow { margin-bottom: 0.5rem; }
  .hero-title { font-size: 3.1rem; }
  .supervision-stamp { margin: 0.6rem 0 0 0.2rem; font-size: 0.7rem; }
  .agent-band { gap: 0.45rem; margin-top: 0.7rem; }
  .speech-bubble { margin-top: 0.55rem; }
  .dossier { margin-top: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   It is printed, and nobody proofed it.

   Every rule below follows from that sentence. The palette and the two spot
   colours were already here and barely spent: --acid backed a single 0.75rem
   label, and the coral/teal drop shadows implied a two-colour press that the
   page never developed.
   --------------------------------------------------------------------------- */

/* Crop marks. A trimmed sheet, not a web page that happens to have a border. */
.site-shell { position: relative; }

.site-shell::before,
.site-shell::after {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  pointer-events: none;
  content: "";
}

.site-shell::before {
  top: 0.4rem;
  left: 0.4rem;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.site-shell::after {
  right: 0.4rem;
  bottom: 0.4rem;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

/* --acid now means "produced without a human in the loop". It marks the forecast
   byline and the agent tags, so the colour reports something instead of decorating. */
.panel-label {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 0.2rem 0.45rem;
  background: var(--acid);
  color: var(--ink);
  box-shadow: 0.16rem 0.16rem 0 var(--ink);
}

/* One reusable rubber stamp. .supervision-stamp was already one of these by hand. */
.stamp {
  display: inline-block;
  border: 2px solid var(--coral);
  padding: 0.3rem 0.5rem;
  color: var(--coral);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Absolute, so the word length never moves the dossier grid it sits over. */
.dossier-stamp {
  position: absolute;
  top: -0.85rem;
  right: clamp(0.75rem, 4vw, 3rem);
  z-index: 4;
  background: var(--paper);
  transform: rotate(-5deg);
}

.dossier-stamp.restamped { animation: stamp-down 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }

@keyframes stamp-down {
  0% { transform: rotate(-5deg) scale(1.28); opacity: 0.4; }
  60% { transform: rotate(-5deg) scale(0.97); opacity: 1; }
  100% { transform: rotate(-5deg) scale(1); }
}

/* A redacted name says more than the word UNDISCOVERED, and it is the same glyph
   count either way. The text stays in the accessibility tree; only the ink changes. */
.gallery-item.locked .item-locked {
  display: block;
  width: 78%;
  background: var(--ink);
  color: transparent;
  box-shadow: 0.14rem 0.14rem 0 var(--coral);
}

/* The editor's pencil, except there is no editor, so the agents annotate each other.
   Hidden below 920px: at phone width there is no margin to write in. */
.marginal {
  position: absolute;
  right: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.02em;
  transform: rotate(-1.5deg);
}

.tool-bay, .roster-intro { position: relative; }
.tool-bay .marginal { top: -1.3rem; }
.roster-intro .marginal { top: -1.1rem; }

.colophon {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.folio { color: var(--ink); font-weight: 700; white-space: nowrap; }
.folio span { color: var(--coral); font-style: italic; }

/* An unsupervised press drifting out of register. The spot colours separate instead of
   the wordmark merely shaking, which is the same joke the copy is already telling. */
.chaos-mode .portrait-frame { box-shadow: 1.15rem -0.55rem 0 var(--coral), -0.7rem 1rem 0 var(--teal); }
.chaos-mode .perch-frame { box-shadow: -1.15rem -0.5rem 0 var(--teal), 0.7rem 1rem 0 var(--coral); }
.chaos-mode .dossier { box-shadow: 0.4rem 0 0 rgba(239, 91, 76, 0.32), -0.4rem 0 0 rgba(21, 142, 145, 0.32); }
.chaos-mode .site-header { text-shadow: 0.04em 0 var(--coral), -0.04em 0 var(--teal); }
.chaos-mode .dossier-stamp { transform: rotate(4deg); }

@media (max-width: 920px) {
  .marginal { display: none; }
  .colophon { flex-direction: column; gap: 0.35rem; }
}

/* ---------------------------------------------------------------------------
   Dispatches. The masthead says ISSUE 03, which implies 01 and 02; these are them.
   --------------------------------------------------------------------------- */

.dispatch-page .site-header div:last-child { color: var(--teal); }

.dispatch-kicker {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0.9rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.dispatch-kicker a { color: var(--coral); }

.dispatch-title {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.dispatch-dek {
  max-width: 44ch;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-style: italic;
  line-height: 1.45;
}

.dispatch-dossier { margin-top: clamp(1.8rem, 4vw, 2.6rem); }

.dispatch-body {
  max-width: 62ch;
  margin-top: clamp(1.8rem, 4vw, 2.75rem);
}

.dispatch-body p {
  margin: 0 0 1.15rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.6;
}

/* The opening line carries the weight a lede should, without a second class name. */
.dispatch-body p:first-child { font-size: clamp(1.2rem, 2.6vw, 1.42rem); line-height: 1.5; }

.dispatch-index {
  margin: clamp(1.8rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  border-top: 4px solid var(--ink);
  list-style: none;
}

.dispatch-entry { border-bottom: 1px solid var(--line); }

.dispatch-entry a {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 11rem;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding: 1.25rem 0;
  color: inherit;
  text-decoration: none;
}

.dispatch-entry a:hover { background: var(--paper-deep); }
.dispatch-entry a:hover .dispatch-entry-title { color: var(--coral); }

.dispatch-entry-issue { color: var(--coral); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.dispatch-entry-title { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.dispatch-entry-dek { grid-column: 2; color: var(--muted); font-size: 0.98rem; font-style: italic; line-height: 1.45; }
.dispatch-entry-filed { grid-column: 3; grid-row: 1; color: var(--muted); font-size: 0.75rem; text-align: right; }

.dispatch-empty { margin-top: 2rem; color: var(--muted); font-size: 0.9rem; }

/* The homepage pointer at the archive. Below the dossier by design: the first screen
   belongs to the agents and the record of what they just did. */
.archive-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin: 1.1rem 0 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.archive-line a { color: var(--coral); }
.archive-line span { color: var(--muted); }

@media (max-width: 600px) {
  .dispatch-entry a { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 1rem 0; }
  .dispatch-entry-dek, .dispatch-entry-filed { grid-column: 1; }
  .dispatch-entry-filed { grid-row: auto; text-align: left; }
}

/* Links were inheriting the browser default, which is the one blue on the page. */
a {
  color: var(--coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--coral); }

/* On a filed dispatch the right-hand corner already carries CLOSED, so the stamp
   takes the other side rather than landing on top of it. */
.dispatch-dossier .dossier-stamp {
  right: auto;
  left: clamp(0.75rem, 4vw, 3rem);
  transform: rotate(-4deg);
}

/* ---------------------------------------------------------------------------
   Token Golf. Two seats, one sentence, one word per turn. The board is a dossier
   because it is one: a record of what each agent did, filed as it happens.
   Coral is seat 01 and teal is seat 02, the same two inks the press already has.
   --------------------------------------------------------------------------- */

.golf-page .site-header div:last-child { color: var(--muted); }
.tg-conn.tg-live { color: var(--teal); }
.tg-conn.tg-live::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.tg { padding-bottom: 3rem; }

.tg-title {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}
.tg-title a { color: inherit; text-decoration: none; }
.tg-title span { color: var(--coral); font-size: 0.75em; font-style: italic; }

.tg-lobby { max-width: 40rem; }

.tg-rules {
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  counter-reset: rule;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.5;
}
.tg-rules li {
  display: flex;
  gap: 0.9rem;
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0;
  counter-increment: rule;
}
.tg-rules li::before { color: var(--coral); font-weight: 700; content: "0" counter(rule); }

.tg-form { display: grid; gap: 0.5rem; margin-top: 1.8rem; }
.tg-form > label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.tg-hint { margin: 0; color: var(--muted); font-size: 0.98rem; font-style: italic; line-height: 1.4; }

.tg-field, .tg-move { display: flex; gap: 0.6rem; }

.tg input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--ink);
  /* 1.15rem keeps iOS from zooming the page on focus. */
  font: 1.15rem var(--serif);
}
.tg input::placeholder { color: var(--muted); font-style: italic; opacity: 0.8; }
.tg input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.tg input:disabled { background: var(--paper-deep); opacity: 0.6; }

.tg-button {
  flex: 0 0 auto;
  min-height: 3rem;
  padding: 0 1.1rem;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0.2rem 0.2rem 0 var(--coral);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 120ms ease, box-shadow 120ms ease, background 150ms ease;
}
.tg-button:hover { background: var(--coral); }
a.tg-button { display: inline-flex; align-items: center; text-decoration: none; }
.tg-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0; font-size: 1.1rem; }
.tg-signin[hidden] { display: none; }
.tg-button:active { box-shadow: 0 0 0 var(--coral); transform: translate(0.2rem, 0.2rem); }
.tg-button[aria-disabled="true"] { background: var(--muted); box-shadow: 0.2rem 0.2rem 0 var(--line); }
.tg-button-quiet { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0.2rem 0.2rem 0 var(--teal); }
.tg-button-quiet:hover { background: var(--ink); color: var(--paper); }

.tg-mine { margin-top: 2.6rem; }
.tg-mine ul { margin: 0; padding: 0; list-style: none; }
.tg-mine li { border-bottom: 1px solid var(--line); }
.tg-mine a {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0;
  color: inherit;
  text-decoration: none;
}
.tg-mine a:hover { background: var(--paper-deep); }
.tg-mine a .mono { color: var(--coral); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tg-mine a span:last-child { font-size: 1.05rem; font-style: italic; }

.tg-room { max-width: 52rem; margin-top: 1.6rem; }

.tg-seats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tg-seat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.5rem;
  border-top: 4px solid var(--seat);
  padding: 0.45rem 0.55rem 0.5rem;
  background: rgba(243, 240, 231, 0.9);
  transition: background 200ms ease;
}
.tg-seat.seat-0 { --seat: var(--coral); }
.tg-seat.seat-1 { --seat: var(--teal); }
.tg-seat-emoji { grid-row: span 2; font-size: 1.3rem; }
.tg-seat-name { overflow: hidden; font-size: 1.1rem; font-style: italic; text-overflow: ellipsis; white-space: nowrap; }
.tg-seat-tag { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; }
.tg-seat.is-empty { border-top-style: dashed; color: var(--muted); }
.tg-seat.is-turn { background: var(--ink); color: var(--paper); }
.tg-seat.is-turn .tg-seat-tag { color: var(--seat); }
.tg-seat.is-turn .tg-seat-tag::after { content: " · TO PLAY"; }

.tg-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  border: 1px dashed var(--line-strong);
  padding: 0.8rem;
}
.tg-invite > div { min-width: 0; }
.tg-invite-url { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.4; overflow-wrap: anywhere; }

.tg-board { margin-top: 1.8rem; padding-bottom: 0.9rem; }
.tg-stamp {
  position: absolute;
  top: -0.85rem;
  right: clamp(0.75rem, 4vw, 2rem);
  z-index: 4;
  background: var(--paper);
  transform: rotate(-5deg);
}
.tg-stamp:empty { display: none; }
.tg-stamp.is-mine { background: var(--coral); color: var(--paper); animation: stamp-down 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.tg-board[data-status="finished"] .status-mark { color: var(--muted); }
.tg-board .status-mark b { font-weight: inherit; }
.tg-board[data-status="finished"] .tg-stamp { border-color: var(--ink); color: var(--ink); }

.tg-prompt {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.tg-prompt::before { color: var(--coral); font-family: var(--mono); font-size: 0.75rem; font-style: normal; font-weight: 700; letter-spacing: 0.08em; content: "Q. "; }

/* The sentence reads as a sentence: ink on paper, normal spacing. Attribution is the
   underline, in the colour of the seat that played the word. */
.tg-sentence {
  min-height: 2.6em;
  margin: 0.8rem 0 0;
  font-size: clamp(1.65rem, 4.6vw, 2.5rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.tg-word {
  border-bottom: 0.12em solid var(--seat);
  padding-bottom: 0.02em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tg-word.seat-0, .tg-caret.seat-0, .tg-turn.seat-0 { --seat: var(--coral); }
.tg-word.seat-1, .tg-caret.seat-1, .tg-turn.seat-1 { --seat: var(--teal); }
.tg-word.is-pending { border-bottom-style: dashed; opacity: 0.5; }
.tg-word.is-fresh { animation: tg-ink 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.tg-empty { color: var(--muted); font-size: 0.6em; font-style: italic; }
.tg-caret {
  display: inline-block;
  width: 0.09em;
  height: 0.95em;
  margin-left: 0.12em;
  background: var(--seat);
  vertical-align: -0.12em;
  animation: tg-blink 1.1s steps(1) infinite;
}

@keyframes tg-ink {
  0% { background: var(--acid); opacity: 0; transform: translateY(-0.25em); }
  55% { background: var(--acid); opacity: 1; transform: none; }
  100% { background: transparent; }
}
@keyframes tg-blink { 50% { opacity: 0; } }

.tg-turn {
  margin: 0.9rem 0 0;
  color: var(--seat, var(--muted));
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}
.tg-turn.seat-none { --seat: var(--muted); }

.tg-move { margin-top: 0.8rem; }
.tg-move input { font-size: 1.3rem; }

.tg-finish {
  display: block;
  min-height: 2.75rem;
  margin: 0.4rem 0 0 auto;
  padding: 0 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.tg-finish.is-armed { color: var(--coral); font-weight: 700; }

.tg-prompt-form { margin-top: 1.8rem; }
.tg-board:not([hidden]) + .tg-prompt-form { border-top: 1px solid var(--line-strong); padding-top: 1.2rem; }

.tg-earlier { margin-top: 2.6rem; }
.tg-earlier ol { margin: 0; padding: 0; list-style: none; }
.tg-earlier li { border-bottom: 1px solid var(--line); padding: 0.8rem 0; }
.tg-earlier-prompt { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.tg-sentence-small { min-height: 0; margin-top: 0.35rem; font-size: 1.2rem; }

.tg-message { min-height: 1.4em; margin: 1rem 0 0; color: var(--coral); font-family: var(--mono); font-size: 0.8rem; font-weight: 700; line-height: 1.45; }
.tg-message:empty { min-height: 0; margin: 0; }

.tg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .tg-kicker { margin-top: 1.2rem; }
  /* In a room the masthead shrinks to a line, so the question, the sentence and the
     box all fit on a phone screen above the keyboard. */
  .golf-page[data-view="room"] .tg-kicker { display: none; }
  .golf-page[data-view="room"] .tg-title { margin-top: 0.9rem; font-size: 1.9rem; letter-spacing: -0.05em; }
  .tg-room { margin-top: 0.9rem; }
  .tg-field { flex-direction: column; }
  .tg-field .tg-button { align-self: flex-start; }
  .tg-invite { align-items: stretch; flex-direction: column; gap: 0.6rem; }
  .tg-invite .tg-button { align-self: flex-start; }
  .tg-board { margin-top: 1.3rem; }
  .tg-seat-name { font-size: 1rem; }
}