/* Dead Agents Society — parchment, ink, and one amoeba. */

@font-face { font-family: "Pixelify"; src: url("/fonts/pixelify.4a5633a0c9.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* Pixelify's 8 reads as a 3 and its 5 as an S (owner, 09-30), so its digits come from Jersey 10 (OFL, fonts/OFL-digits.txt),
   sized to Pixelify's cap height (64 vs 54 units). Declared after Pixelify's own face, so it wins for 0-9. */
@font-face { font-family: "Pixelify"; src: url("/fonts/digits.a5a4e98428.woff2") format("woff2"); font-weight: 400 700; unicode-range: U+0030-0039; size-adjust: 118.5%; font-display: swap; }
@font-face { font-family: "Caslon"; src: url("/fonts/caslon.29310efc10.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caslon"; src: url("/fonts/caslon-bold.2819c345e6.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Caslon's own italic was hard to read on phones (owner, 09-30: swashy, joined, small x-height), so the italic is
   Literata's (OFL, fonts/OFL-literata.txt), made for reading on screens; every italic on the page takes it. */
@font-face { font-family: "Caslon"; src: url("/fonts/literata-italic.1e98bfbbb4.woff2") format("woff2"); font-style: italic; font-display: swap; }

:root {
  --paper: #ece0c3;
  --paper-hi: #f4ead3;
  --paper-lo: #dccba4;
  --ink: #1c1812;
  --ink-soft: #4b4032;
  --ink-faint: #6f6149;          /* ~5:1 on paper; the old #8a7a5f was too faint to read */
  --seal: #8e2b1f;
  --px: 3px;                       /* one "pixel" of UI chrome */
  --cell: 5px;                     /* one pixel of Shifty */
  --pixel: "Pixelify", ui-monospace, monospace;
  --serif: "Caslon", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 480px) { :root { --cell: 6px; } }

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }   /* a display rule on a class must never un-hide it */
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  color: var(--ink);
  background-color: var(--paper);
  /* paper grain + a darker, foxed edge */
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(120, 84, 40, .22) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--ink); color: var(--paper-hi); }

main {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  padding: max(1.25rem, env(safe-area-inset-top)) 1rem 3rem;
  display: flex;
  flex-direction: column;
}

/* ---------- the stage ---------- */

.stage {
  position: relative;
  z-index: 3;                      /* Shifty flies over the page to the thinker's portrait */
  height: calc(var(--cell) * 28 + 3.5rem);
  transition: height .6s var(--ease), margin .6s var(--ease);
}
[data-screen="verdict"] .stage { height: calc(var(--cell) * 27); margin-bottom: calc(var(--cell) * -1.5); z-index: 2; }

.shifty {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--cell) * 32);
  height: calc(var(--cell) * 28);
  cursor: pointer;
  will-change: transform;
  transform-origin: 50% 100%;      /* it shrinks onto its feet */
  touch-action: manipulation;
}
.shifty canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--cell) * 5);
  transform: translate(-50%, 6px) scale(.9);
  transform-origin: 50% 100%;
  max-width: 13rem;
  width: max-content;
  padding: .35rem .6rem .4rem;
  background: var(--paper-hi);
  font-family: var(--pixel);
  font-size: .8rem;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease);
  box-shadow: 0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink);
}
.bubble::after { /* a stepped tail */
  content: "";
  position: absolute;
  left: calc(50% - var(--px));
  top: calc(100% + var(--px));
  width: var(--px);
  height: var(--px);
  background: var(--ink);
  box-shadow: var(--px) 0 0 var(--ink), 0 var(--px) 0 var(--ink);
}
.bubble.on { opacity: 1; transform: translate(-50%, 0) scale(1); }

.bit { /* a pixel that flies off when Shifty vanishes */
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  pointer-events: none;
}

/* ---------- screens ---------- */

.screen { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.screen.enter { opacity: 0; transform: translateY(10px); }
.screen.leave { opacity: 0; transform: translateY(-6px); transition-duration: .22s; }
.swapping .stage { transition: none; }

/* screen swaps (show() in das.js): the old view fades quickly, the new one rises in once; Shifty glides */
::view-transition-old(root) { animation: vt-out .18s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.2, .7, .2, 1) .06s both; }
::view-transition-group(shifty) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.screen.fading { opacity: 0; transform: translateY(-8px); transition: opacity .6s var(--ease), transform .7s var(--ease); }

.eyebrow {
  font-family: var(--pixel);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
.title {
  margin-top: .35rem;
  font-family: var(--pixel);
  font-weight: 600;
  font-size: clamp(1.9rem, 8.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: .045em;
  word-spacing: .08em;
  text-align: center;
  text-wrap: balance;
}
.lede {
  margin: 1rem auto 0;
  max-width: 30rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- the handle bar ---------- */

.summon {
  display: flex;
  margin: 1.75rem var(--px) 0;
  background: var(--paper-hi);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink),
    calc(var(--px) * 2) calc(var(--px) * 3) 0 rgba(60, 40, 20, .16);
}
.summon.shake { animation: shake .42s steps(6) 1; }
@keyframes shake { 0%, 100% { transform: none } 20% { transform: translateX(-6px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(2px) } }

.field { flex: 1; min-width: 0; display: flex; align-items: center; cursor: text; }
.prefix { padding-left: .8rem; font-family: var(--pixel); font-size: 1rem; color: var(--ink-faint); user-select: none; }
.field input {
  flex: 1;
  min-width: 0;
  padding: .85rem .8rem .85rem .1rem;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--pixel);
  font-size: 1.05rem;           /* >= 16px so phones don't zoom in */
  color: var(--ink);
}
.field input::placeholder { color: var(--ink-faint); opacity: .55; }

.btn {
  position: relative;
  flex: none;
  border: 0;
  padding: 0 1.1rem;
  background: var(--ink);
  color: var(--paper-hi);
  font-family: var(--pixel);
  font-size: 1rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: #3a3024; }
.btn:active { transform: translate(1px, 2px); }
.btn:focus-visible, .field:focus-within { outline: 2px dashed var(--seal); outline-offset: 5px; }
.btn[disabled] { cursor: progress; }
.btn .btn-label { display: inline-block; min-width: 4.6em; text-align: center; }
.btn.busy .btn-label::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: "" } 25% { content: "." } 50% { content: ".." } 75% { content: "..." } }

.error {
  min-height: 3.4rem;
  margin: 1rem .25rem 0;
  font-size: .98rem;
  color: var(--seal);
  text-align: center;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s, transform .3s var(--ease);
}
.error.on { opacity: 1; transform: none; }

.note { margin-top: .25rem; text-align: center; font-size: .95rem; color: var(--ink-soft); text-wrap: pretty; }
/* a thinker's card, folded under the tiles until its arrow is pressed */
.thinker-pop { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .35s; }
.thinker-pop.open { grid-template-rows: 1fr; opacity: 1; }
.thinker-pop > div { overflow: hidden; min-height: 0; }
.thinker-pop .thinker { margin: .4rem var(--px) 1.4rem; transform: translateY(-6px); transition: transform .5s var(--ease); }
.thinker-pop.open .thinker { transform: none; }


/* ---------- summoning ---------- */

.steps { list-style: none; padding: 0; margin: 1.25rem auto 0; width: fit-content; max-width: 100%; font-family: var(--pixel); font-size: .95rem; }
.steps li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  align-items: baseline;
  padding: .28rem 0;
  color: var(--ink);
  animation: stepin .4s var(--ease) both;
}
.steps li.done { color: var(--ink-faint); }
.steps .aside { display: block; font-family: var(--serif); font-style: italic; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); opacity: 0; transition: opacity .4s; }
.steps li:not(.done) .aside { display: none; }
.steps li.done .aside { opacity: 1; }
@keyframes stepin { from { opacity: 0; transform: translateY(6px) } }

.mark { position: relative; display: inline-block; width: 12px; height: 12px; transform: translateY(1px); }
.spin::before { /* a 2x2 pixel orbiting a 4x4 square */
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: currentColor;
  animation: orbit .64s steps(1) infinite;
}
@keyframes orbit { 0% { transform: translate(0, 0) } 25% { transform: translate(6px, 0) } 50% { transform: translate(6px, 6px) } 75% { transform: translate(0, 6px) } }
.check svg { display: block; width: 12px; height: 12px; fill: currentColor; shape-rendering: crispEdges; }

/* ---------- the card ---------- */

.card {
  position: relative;
  margin: 0 var(--px);
  padding: 1.5rem 1.35rem 1.1rem;
  background: var(--paper-hi);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink),
    calc(var(--px) * 3) calc(var(--px) * 4) 0 rgba(60, 40, 20, .16);
}
.card::before { /* an inner rule, like a printed border */
  content: "";
  position: absolute;
  inset: calc(var(--px) * 2);
  border: 1px solid rgba(28, 24, 18, .18);
  pointer-events: none;
}
@media (min-width: 480px) { .card { padding: 1.9rem 2rem 1.3rem; } }

.card-label {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--pixel);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  gap: 0 .6em;
}
.card-label span:last-child { color: var(--ink); }

.who { display: flex; align-items: center; gap: .85rem; margin-top: 1.1rem; }
.avatar {
  flex: none;
  position: relative;
  width: 52px;
  height: 52px;
  background: var(--paper);
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
}
.avatar img, .avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar canvas { image-rendering: pixelated; }
.avatar [hidden] { display: none; }
.who-name { font-weight: 700; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.who-handle { font-size: 1rem; color: var(--ink-soft); }

.epithet {
  margin-top: 1.15rem;
  font-family: var(--pixel);
  font-weight: 600;
  font-size: clamp(1.45rem, 6.4vw, 1.85rem);
  line-height: 1.1;
  text-wrap: balance;
}
.comment { margin-top: .85rem; font-size: 1.1rem; line-height: 1.7; text-wrap: pretty; }

.rule { display: flex; align-items: center; gap: .7rem; margin: 1.3rem 0 1.1rem; }
.rule::before, .rule::after { content: ""; flex: 1; height: 0; border-top: 2px dotted rgba(28, 24, 18, .35); }
.rule span { width: 6px; height: 6px; background: var(--ink); transform: rotate(45deg); }

/* the quote is evidence, not the headline: smaller and softer than the verdict, set off by a rule */
.quote { padding-left: 1rem; border-left: 3px solid var(--ink); }
.q-kicker { font-family: var(--pixel); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.q-text { margin-top: .3rem; font-size: .98rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.q-text::before { content: "\201C"; margin-right: .06em; }
.q-text::after { content: "\201D"; margin-left: .04em; }
.quote footer { margin-top: .45rem; font-size: .85rem; color: var(--ink-faint); }
.quote footer i { font-style: italic; }

.fine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(28, 24, 18, .15);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}
.seal { flex: none; width: 39px; height: 39px; image-rendering: pixelated; transform: rotate(-8deg); }

.actions { display: flex; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.btn-ghost {
  padding: .7rem 1rem;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
}
.btn-ghost:hover { background: var(--paper-lo); }

/* ---------- the verdict screen: card, and who judged you ---------- */

.verdict-grid { display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  main[data-screen="verdict"] { max-width: 56rem; }
  .verdict-grid { grid-template-columns: minmax(0, 36rem) minmax(0, 17rem); justify-content: center; align-items: start; }
}

.thinker {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1rem;
  align-items: start;
  margin: 0 var(--px);
  padding: 1rem;
  background: var(--paper-hi);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink),
    calc(var(--px) * 2) calc(var(--px) * 3) 0 rgba(60, 40, 20, .16);
}
@media (min-width: 900px) { .verdict-grid .thinker { grid-template-columns: 1fr; padding: 1.1rem 1.1rem 1rem; } }
@media (min-width: 480px) { .thinker-pop .thinker { grid-template-columns: 120px 1fr; gap: 1.2rem; padding: 1.1rem; } }
.portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  image-rendering: pixelated;
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
}
.t-kicker { font-family: var(--pixel); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.t-name { margin-top: .2rem; font-family: var(--pixel); font-weight: 600; font-size: 1.25rem; line-height: 1.15; }
.t-dates { margin-top: .15rem; font-size: .9rem; color: var(--ink-soft); }
.t-line { margin-top: .6rem; font-size: .95rem; line-height: 1.6; text-wrap: pretty; }
.t-credit { margin-top: .6rem; font-size: .75rem; color: var(--ink-faint); }

/* sections of the card arrive one after another */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.revealed .reveal, .revealed.reveal { opacity: 1; transform: none; }

/* ---------- public: the intro ---------- */

.error:empty { min-height: 0; margin: 0; }
.kicker { font-family: var(--pixel); font-weight: 400; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.sub { margin-top: .2rem; font-size: .95rem; color: var(--ink-soft); }
.examples, .rules, .signin, .pick, .past { margin-top: 2.6rem; }
.examples .kicker, .examples .sub { text-align: center; }

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1.25rem;
  margin: .9rem calc(var(--px) * -1) 0;
  padding: 6px 14px 18px 6px;   /* room for the cards' drop shadow */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline: 2px dashed var(--seal); outline-offset: 2px; }
.card.mini { scroll-snap-align: center; display: flex; flex-direction: column; padding: 1.3rem 1.2rem 1rem; }
.card.mini .epithet { font-size: clamp(1.25rem, 5.6vw, 1.55rem); }
.card.mini .comment { font-size: 1rem; line-height: 1.65; }
.card.mini .avatar canvas { image-rendering: pixelated; }
.card.mini .quote { margin-bottom: auto; }
.stamp { margin-top: 1.1rem; padding-top: .7rem; border-top: 1px solid rgba(28, 24, 18, .15); font-family: var(--pixel); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--seal); }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .2rem; }
.nav-btn { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-btn:hover { background: var(--paper-lo); }
.nav-btn svg { width: 10px; height: 14px; fill: currentColor; shape-rendering: crispEdges; }
.dots { display: flex; gap: .15rem; }
.dot { width: 1.6rem; height: 2.5rem; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.dot::after { content: ""; position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); width: 8px; height: 8px; background: var(--paper-lo); box-shadow: 0 0 0 2px var(--ink-faint); transition: background .25s, transform .25s var(--ease); }
.dot[aria-current="true"]::after { background: var(--ink); box-shadow: 0 0 0 2px var(--ink); transform: scale(1.15); }
.nav-btn:focus-visible, .dot:focus-visible { outline: 2px dashed var(--seal); outline-offset: 1px; }

.rules ol { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .7rem; }
.rules details { background: var(--paper-hi); box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink); margin: 0 2px; }
.rules summary { display: grid; grid-template-columns: 1.9rem 1fr 1rem; gap: .6rem; align-items: start; padding: .8rem .9rem; cursor: pointer; list-style: none; line-height: 1.5; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary::after { content: "+"; font-family: var(--pixel); font-size: 1.2rem; line-height: 1.2; color: var(--ink-faint); transition: transform .3s var(--ease); }
.rules details[open] summary::after { transform: rotate(45deg); }
.rules summary:focus-visible { outline: 2px dashed var(--seal); outline-offset: 3px; }
.rules .n { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; background: var(--ink); color: var(--paper-hi); font-family: var(--pixel); font-size: .95rem; }
.rules b { font-weight: 700; }
#intro .when-in, #dash .when-out { display: none; }
.rules summary .when-in, .rules summary .when-out { display: contents; }
#intro .rules summary .when-in, #dash .rules summary .when-out { display: none; }

/* your page: the intro's title and description, the rules folded under them */
.dash-head { margin-bottom: 1.8rem; }
.dash-head .lede { margin-top: .8rem; }
.rules-fold { margin-top: 1.4rem; }
.rules-fold > summary { display: flex; align-items: center; justify-content: space-between; padding: .6rem 2px; cursor: pointer; list-style: none; border-bottom: 2px dotted rgba(28, 24, 18, .3); }
.rules-fold > summary::-webkit-details-marker { display: none; }
.rules-fold > summary::after { content: "+"; font-family: var(--pixel); font-size: 1.2rem; color: var(--ink-faint); transition: transform .3s var(--ease); }
.rules-fold[open] > summary::after { transform: rotate(45deg); }
.rules-fold > summary:focus-visible { outline: 2px dashed var(--seal); outline-offset: 3px; }
.rules-fold > ol { animation: stepin .35s var(--ease) both; }
.rules details p { padding: 0 1rem .95rem 3.4rem; font-size: .95rem; color: var(--ink-soft); text-wrap: pretty; animation: stepin .35s var(--ease) both; }

.signin { display: flex; flex-direction: column; align-items: center; text-align: center; }
.signin-top { font-family: var(--pixel); font-size: .95rem; color: var(--ink); margin-bottom: 1rem; text-wrap: balance; }
.btn-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: .8rem 1.8rem;
  font-size: 1.12rem;
  text-decoration: none;
  box-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(60, 40, 20, .25);
}
.btn-big .btn-label { min-width: 0; }
.fineprint { margin-top: 1rem; max-width: 30rem; font-size: .9rem; color: var(--ink-soft); }
.fineprint summary { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.fineprint p { margin-top: .5rem; text-align: left; text-wrap: pretty; }

/* ---------- public: your page ---------- */

.me {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .9rem;
  align-items: start;
  margin: 0 var(--px);
  padding: 1rem 1rem .9rem;
  background: var(--paper-hi);
  box-shadow:
    0 calc(var(--px) * -1) 0 var(--ink), 0 var(--px) 0 var(--ink),
    calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink),
    calc(var(--px) * 2) calc(var(--px) * 3) 0 rgba(60, 40, 20, .16);
  transition: opacity .4s;
}
.me .avatar { width: 64px; height: 64px; }
.me-text { min-width: 0; padding-right: 6.2rem; }
.me-name { font-weight: 700; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.me-handle { color: var(--ink-soft); }
.me-bio { margin-top: .4rem; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; text-wrap: pretty; }
.signout { position: absolute; top: .8rem; right: .8rem; }
.signout button { min-height: 2.4rem; padding: .45rem .85rem; border: 0; background: var(--ink); color: var(--paper-hi); font-family: var(--pixel); font-size: .9rem; letter-spacing: .03em; cursor: pointer;
  box-shadow: 2px 3px 0 rgba(60, 40, 20, .25); }
.signout button:hover { background: #3a3024; }
.signout button:active { transform: translate(1px, 2px); box-shadow: none; }
.signout button:focus-visible { outline: 2px dashed var(--seal); outline-offset: 4px; }

/* Forget me: quiet under the profile card; the dialog is paper and ink like the rest */
.forget-row { margin: .5rem var(--px) 0; text-align: right; }
.forget-link { border: 0; background: none; padding: .3rem 0; font-family: var(--pixel); font-size: .85rem; letter-spacing: .03em; color: var(--ink-faint);
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.forget-link:hover { color: var(--seal); }
.forget-link:focus-visible { outline: 2px dashed var(--seal); outline-offset: 3px; }
.forget-dialog { margin: auto; width: min(26rem, calc(100vw - 32px)); padding: 1.3rem 1.3rem 1rem; border: 0;   /* margin: the page's * { margin: 0 } un-centres a dialog */
  background: var(--paper-hi); color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 6px 7px 0 3px rgba(60, 40, 20, .2); font: 1rem/1.5 var(--serif); }
.forget-dialog::backdrop { background: rgba(28, 24, 18, .45); }
.forget-dialog p { margin: 0 0 .8rem; }
.forget-title { margin: 0 0 .7rem; font: 600 1.35rem/1.2 var(--pixel); letter-spacing: .03em; }
.forget-nudge { padding: .6rem .8rem; background: var(--paper); border-left: 3px solid #6f5282; }
.forget-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; align-items: center; margin-top: 1rem; }
.forget-actions .btn { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .95rem; }
.forget-go { min-height: 2.6rem; padding: .5rem .9rem; border: 2px solid var(--seal); background: transparent; color: var(--seal);
  font-family: var(--pixel); font-size: .95rem; cursor: pointer; }
.forget-go:hover { background: var(--seal); color: var(--paper-hi); }
.forget-go:disabled { opacity: .5; cursor: default; }
.forget-note:empty { display: none; }

.tiles { display: grid; gap: .7rem; margin-top: .8rem; }
.tile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  margin: 0 2px;
  background: var(--paper-hi);
  color: var(--ink);
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 4px 5px 0 rgba(60, 40, 20, .16);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.tile.chosen {
  background: #e4d8ee;   /* Shifty's violet, washed out: it's about to become this thinker */
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 5px 6px 0 rgba(60, 40, 20, .22);
}
.tile.nudge { animation: shake .42s steps(6) 1; }
.tile-pick {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: .9rem;
  align-items: center;
  padding: .7rem .4rem .7rem .7rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tile-pick:hover { background: rgba(255, 255, 255, .35); }
.tile-pick:focus-visible, .tile-more:focus-visible { outline: 2px dashed var(--seal); outline-offset: -4px; }
.tile-state { margin-top: .25rem; font-family: var(--pixel); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.tile-state .when-off { color: var(--ink-faint); }
.tile-state .when-on { display: none; padding: .15rem .45rem; background: #6f5282; color: var(--paper-hi); }
.tile.chosen .when-off { display: none; }
.tile.chosen .when-on { display: inline-block; animation: stepin .35s var(--ease) both; }
.tile-more { width: 3.2rem; border: 0; border-left: 2px dotted rgba(28, 24, 18, .3); background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.tile-more:hover { background: rgba(255, 255, 255, .35); }
.tile-more svg { width: 16px; height: 10px; fill: currentColor; shape-rendering: crispEdges; transition: transform .35s var(--ease); }
.tile.open .tile-more svg { transform: rotate(180deg); }
.tile-portrait { width: 72px; aspect-ratio: 4 / 5; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); transition: opacity .9s var(--ease), filter .9s; }
.tile.possessed .tile-portrait { opacity: .12; filter: grayscale(1); }
.tile-text { display: grid; gap: .1rem; min-width: 0; }
.tile-name { font-family: var(--pixel); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.tile-dates { font-size: .88rem; color: var(--ink-soft); }
.tile-soon { display: block; box-shadow: none; border: 2px dashed var(--ink-faint); background: transparent; color: var(--ink-faint); font-size: .92rem; font-style: italic; text-align: center; cursor: default; padding: .7rem; }
.pick .thinker-pop .thinker { margin-top: .9rem; }

.judge { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.counter {
  display: grid;
  justify-items: center;
  gap: .35rem;
  margin: 0 0 1.2rem;
  padding: .8rem 1.6rem .9rem;
  background: var(--paper-hi);
  font-family: var(--pixel);
  box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 4px 5px 0 rgba(60, 40, 20, .16);
}
.counter-label { letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--ink-faint); }
.counter-row { display: flex; align-items: center; gap: .7rem; }
.counter-text { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.pips { display: inline-flex; gap: 5px; }
.pip { width: 16px; height: 16px; box-shadow: inset 0 0 0 2px var(--ink); transition: background .4s; }
.pip.on { background: var(--seal); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--seal); }
.spent { max-width: 28rem; font-size: 1rem; color: var(--ink-soft); text-wrap: pretty; }
.spent b { color: var(--seal); }
.spent a { color: var(--ink); }
.judge .steps { margin-top: 0; text-align: left; }
.reset { margin: 1rem 0 .5rem; padding: .45rem .8rem; border: 2px dashed var(--seal); background: none; color: var(--seal); font-family: var(--pixel); font-size: .82rem; cursor: pointer; }
.reset:hover { background: var(--paper-hi); }
.reset:focus-visible { outline: 2px dashed var(--seal); outline-offset: 4px; }
.judging .reset { display: none; }
.judge .steps:empty { display: none; }
.judge .error { margin-top: .6rem; }

/* while Shifty is off judging: the rest of the page steps back */
.judging .me, .judging .past, .judging .tile-soon, .judging .pick .kicker { opacity: .35; pointer-events: none; }
.judging .past, .judging .tile-soon { transition: opacity .4s; }
.judging #judge-btn, .judging .spent { display: none; }
.judging .tile-pick, .judging .tile-more { cursor: default; }

.past > summary { display: flex; align-items: center; gap: .6rem; padding: .6rem 2px; cursor: pointer; list-style: none; }
.past > summary::-webkit-details-marker { display: none; }
.past > summary::after { content: "+"; margin-left: auto; font-family: var(--pixel); font-size: 1.2rem; color: var(--ink-faint); transition: transform .3s var(--ease); }
.past[open] > summary::after { transform: rotate(45deg); }
.past > summary:focus-visible { outline: 2px dashed var(--seal); outline-offset: 3px; }
.past-count { display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; background: var(--ink); color: var(--paper-hi); font-family: var(--pixel); font-size: .8rem; }
.past ul { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .5rem; animation: stepin .35s var(--ease) both; }
.past button {
  width: 100%;
  display: grid;
  gap: .15rem;
  padding: .75rem .9rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 2px dotted rgba(28, 24, 18, .35);
}
.past button:hover, .past button:focus-visible { background: var(--paper-hi); outline: none; }
.past-epithet { font-family: var(--pixel); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.past-meta { font-size: .88rem; color: var(--ink-soft); }

.tally { margin-top: 1rem; text-align: center; font-family: var(--pixel); font-size: .85rem; color: var(--ink-faint); }

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

/* admin copy only: the run's cost and reasoning under the card */
.admin-note { max-width: 40rem; margin: 1.6rem auto 0; padding: .8rem 1rem; border: 1px dashed currentColor; color: var(--ink-soft);   /* not opacity: it faded the web too */
  font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.admin-note p { margin: 0 0 .3rem; white-space: pre-wrap; }

/* admin copy only: past runs under the welcome screen */
.history { margin: 2.5rem var(--px) 0; font-family: var(--pixel); font-size: .88rem; }
.history-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem .75rem; margin-bottom: .6rem; }
.history-title { color: var(--ink-soft); }
.history-search { flex: 1 1 11rem; max-width: 16rem; min-width: 0; padding: .4rem .6rem; border: 0; border-radius: 0; background: var(--paper-hi);
  font: inherit; font-size: 16px; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }   /* 16px: phones zoom on smaller inputs */
.history-search:focus { outline: 2px dashed var(--seal); outline-offset: 4px; }
.history table { width: 100%; border-collapse: collapse; }
.history th { text-align: left; font-weight: 400; color: var(--ink-faint); padding: .3rem .5rem; border-bottom: 2px solid var(--ink); }
.history td { padding: .45rem .5rem; border-bottom: 1px dashed var(--paper-lo); overflow-wrap: anywhere; }
.history td:first-child { white-space: nowrap; color: var(--ink-soft); }
.history tbody tr { cursor: pointer; }
.history tbody tr:hover, .history tbody tr:focus-visible { background: var(--paper-hi); outline: none; }
.history tr.failed td { color: var(--seal); }
.history-empty { margin-top: .6rem; color: var(--ink-faint); text-align: center; }

/* feedback on the verdict: five levels, a note, sealed once sent (owner, 2026-09-30) */
.feedback { max-width: 34rem; margin: 2.2rem auto 0; padding: 1.1rem 1.1rem 1.2rem; background: var(--paper-hi); box-shadow: 0 0 0 3px var(--ink), 6px 7px 0 3px rgba(60, 40, 20, .16); }
.feedback .kicker { text-align: center; margin: 0 0 .9rem; color: var(--ink); }  /* full ink: the faint kicker was hard to read (owner) */
.fb-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.fb-level { display: grid; gap: .4rem; justify-items: center; align-content: start; border: 0; background: transparent; box-shadow: 0 0 0 2px var(--ink);
  padding: .6rem .25rem; color: var(--ink); font-family: var(--pixel); font-size: .8rem; line-height: 1.15; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fb-level:hover { background: rgba(255, 255, 255, .45); }
.fb-level:focus-visible { outline: 2px dashed var(--seal); outline-offset: 3px; }
.fb-level .pips { display: flex; gap: 2px; }
.fb-level .pips i { width: 5px; height: 5px; background: var(--ink); opacity: .18; }
.fb-level .pips i.on { opacity: 1; }
.fb-level[aria-checked="true"] { background: #6f5282; color: var(--paper-hi); }
.fb-level[aria-checked="true"] .pips i { background: var(--paper-hi); }
#fb-text { display: block; width: 100%; margin-top: .9rem; padding: .6rem .7rem; border: 2px solid var(--ink); border-radius: 0; background: var(--paper);
  color: var(--ink); font: 16px/1.4 var(--serif); resize: vertical; }
#fb-text:focus-visible { outline: 2px dashed var(--seal); outline-offset: 3px; }
#fb-send { display: flex; margin: .8rem auto 0; min-height: 2.9rem; align-items: center; }
.fb-note { min-height: 1.2em; margin: .7rem 0 0; text-align: center; font-family: var(--pixel); font-size: .85rem; color: var(--ink-soft); }
.fb-said { margin: .9rem 0 0; padding: .5rem .8rem; border-left: 3px solid var(--ink); font: italic 1rem/1.45 var(--serif); color: var(--ink-soft); }
.feedback.sealed .fb-level { cursor: default; }
.feedback.sealed .fb-level:not([aria-checked="true"]) { opacity: .35; }
.feedback.sealed .fb-level:hover:not([aria-checked="true"]) { background: transparent; }
@media (max-width: 480px) {
  .fb-levels { grid-template-columns: 1fr; gap: .4rem; }
  .fb-level { grid-template-columns: 2.4rem 1fr; justify-items: start; align-items: center; padding: .65rem .8rem; font-size: .95rem; text-align: left; }
}
.admin-note .spider { display: block; max-width: 380px; margin: .6rem auto .2rem; }

/* the note for people who have lost someone (public verdict only): a warm card of its own, not the page's paper */
.lost-card { --rose: #f8e6de; --plum: #3b2231; --blush: #7d3350;
  max-width: 34rem; margin: 1.8rem auto 0; padding: 1.2rem 1.3rem 1.4rem; text-align: center;
  background: linear-gradient(180deg, #fbeee7 0%, var(--rose) 100%); color: var(--plum);
  box-shadow: 0 0 0 3px var(--plum), 6px 7px 0 3px rgba(125, 51, 80, .18); }
.lost-card .sky { display: block; width: calc(100% + 2.6rem); height: auto; margin: -1.2rem -1.3rem 1.1rem; image-rendering: pixelated; border-bottom: 3px solid var(--plum); }
.lost-card h3 { margin: 0 0 .7rem; font: 600 1.15rem/1.3 var(--pixel); color: var(--blush); letter-spacing: .02em; }
.lost-card p { margin: 0; font: 1.05rem/1.6 var(--serif); color: var(--plum); text-align: left; }
.lost-card a { color: var(--blush); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
[data-admin] .lost-card, [data-admin] .feedback { display: none; }

/* admin: a drawer from the left over the page, with recent runs and feedback */
.drawer-tab { position: fixed; left: 0; top: 14px;   /* the empty corner beside Shifty: never over the text */ z-index: 30; writing-mode: vertical-rl; transform: rotate(180deg); padding: .9rem .45rem; border: 0;
  background: var(--ink); color: var(--paper-hi); font: .8rem var(--pixel); letter-spacing: .08em; cursor: pointer; }
.drawer-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(28, 24, 18, .35); }
.drawer { position: fixed; inset: 0 auto 0 0; z-index: 41; width: min(34rem, 100vw); overflow-y: auto; background: var(--paper-hi); box-shadow: 3px 0 0 var(--ink), 10px 0 0 rgba(60, 40, 20, .15);
  transform: translateX(-104%); transition: transform .35s var(--ease); padding: 0 1rem 2rem; }
.drawer.open { transform: none; }
.drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .4rem; padding: .9rem 0 .7rem; background: var(--paper-hi); border-bottom: 2px solid var(--ink); margin-bottom: 1rem; }
.drawer-head [role="tab"] { border: 0; background: none; padding: .5rem .7rem; font: 600 .9rem var(--pixel); color: var(--ink-faint); cursor: pointer; }
.drawer-head [role="tab"][aria-selected="true"] { color: var(--paper-hi); background: var(--ink); }
.drawer-close { margin-left: auto; border: 0; background: none; font: 1.3rem var(--pixel); cursor: pointer; color: var(--ink); padding: .2rem .5rem; }
.drawer .history { margin: 0; max-width: none; }
.drawer .fb-total { font: .85rem var(--pixel); color: var(--ink-faint); margin: 0 0 .8rem; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
.fb-batch { border: 2px solid var(--ink); background: var(--paper); padding: .9rem 1rem; display: grid; gap: .6rem; margin-bottom: 1rem; }
.fb-batch h3 { font: 600 1rem/1.3 var(--pixel); margin: 0; }
.fb-batch .note, .drawer .note { margin: 0; font: .95rem/1.45 var(--serif); color: var(--ink-soft); }
.fb-bars { display: grid; gap: .3rem; }
.fb-bar { display: grid; grid-template-columns: 8.5rem 1fr 2rem; gap: .5rem; align-items: center; font: .78rem/1.2 var(--pixel); }
.fb-bar-track { height: .7rem; background: rgba(28, 24, 18, .12); }
.fb-bar-fill { display: block; height: 100%; background: #6f5282; }
.fb-bar-n { text-align: right; }
.fb-web .spider { display: block; max-width: 380px; margin: 0 auto; }
.fb-key { text-align: center; }
.fb-reading { border-left: 3px solid #6f5282; padding-left: .8rem; font: .95rem/1.45 var(--serif); }
.fb-reading p { margin: .2rem 0; }
.fb-reading ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
.fb-sub { font: 600 .75rem/1.3 var(--pixel); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.fb-batch .fold summary { cursor: pointer; font: .85rem var(--pixel); }
.fb-comments { margin: .4rem 0 0; padding-left: 1.2rem; font: .95rem/1.45 var(--serif); }
.admin-pick { margin: 1.4rem auto 0; max-width: 34rem; }
.spider-caption { margin: .3rem auto 0; max-width: 30rem; min-height: 2.6em; font: .9rem/1.45 var(--serif); color: var(--ink-soft); text-align: center; }
.fb-gloss .fb-dl { margin: .5rem 0 0; }
.fb-gloss dt { font: 600 .8rem var(--pixel); margin-top: .5rem; }
.fb-gloss dd { margin: .1rem 0 0; font: .92rem/1.45 var(--serif); color: var(--ink-soft); }
.fb-batch abbr { text-decoration: underline dotted; cursor: help; }