/* The Black Orchid: a fogged glasshouse pane at night, one soft teal light on the board. */

:root {
  --fs: clamp(10px, min(3.3dvw, 1.62dvh), 17px);
  --fit: 1;
  --t: calc(var(--fs) * var(--fit));
  --gap: calc(var(--t) * 0.5);
  --iron: color-mix(in srgb, var(--ak-bg) 55%, #000);
  --brass: var(--ak-accent-2);
  --paper: var(--ak-btn-fill);
  --paper-ink: var(--ak-btn-ink);
  --slow: 0.5s;
  --spot-x: 50vw;
  /* Foxed paper for every sheet of the case file: brown age spots on the kit's surface. */
  --foxed:
    radial-gradient(circle at 13% 17%, color-mix(in srgb, var(--ak-accent-2) 13%, transparent) 0 4%, transparent 6%),
    radial-gradient(circle at 87% 62%, color-mix(in srgb, var(--ak-accent-2) 10%, transparent) 0 7%, transparent 10%),
    radial-gradient(circle at 63% 8%, color-mix(in srgb, var(--ak-accent-2) 9%, transparent) 0 2.5%, transparent 4%),
    radial-gradient(circle at 28% 90%, color-mix(in srgb, var(--ak-accent-2) 8%, transparent) 0 5%, transparent 8%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--ak-accent-2) 7%, transparent) 0 3%, transparent 5%),
    linear-gradient(172deg, color-mix(in srgb, var(--ak-accent-2) 7%, var(--ak-surface)), var(--ak-surface) 55%, color-mix(in srgb, var(--ak-bg) 40%, var(--ak-surface)));
  --spot-y: 50dvh;
}

@media (orientation: landscape) {
  :root { --fs: clamp(10px, min(1.45dvw, 2.85dvh), 16px); }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
}

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

/* The fog on the glass, the spotlight, and the house lights that come up at the end. */
.fog, .spot, .houselights { position: fixed; inset: 0; pointer-events: none; }
.fog { z-index: 1; width: 100vw; height: 100dvh; transition: opacity 2.4s ease; }
.spot {
  z-index: 1;
  inset: auto;
  left: 0;
  top: 0;
  width: 70vmin;
  height: 52vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ak-accent) 24%, transparent), color-mix(in srgb, var(--ak-accent) 8%, transparent) 60%, transparent);
  transform: translate(calc(var(--spot-x) - 35vmin), calc(var(--spot-y) - 26vmin));
}
.houselights {
  z-index: 1;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--ak-ink) 26%, transparent), color-mix(in srgb, var(--ak-ink) 10%, transparent) 70%);
}
:root.ac-lights-up .spot { opacity: 0.6; }
body.is-solved .fog { opacity: 0; }
body.is-solved .houselights { opacity: 1; }
body.is-solved .spot { opacity: 0; }

/* The play area. Upright: logo, suspects, clues, then the desk. Sideways: the board (suspects and
   clues side by side) on the left, the desk with its note and controls on the right. */
.play {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: 'logo' 'board' 'desk';
  align-content: start;
  gap: var(--gap);
  width: min(100vw, 640px);
  margin: 0 auto;
  padding:
    calc(var(--ac-status-h, 64px) + var(--gap) * 0.5)
    max(calc(var(--t) * 0.7), env(safe-area-inset-right))
    max(calc(var(--t) * 0.6), env(safe-area-inset-bottom))
    max(calc(var(--t) * 0.7), env(safe-area-inset-left));
  font-size: var(--t);
  line-height: 1.18;
  letter-spacing: -0.02em;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.play[hidden] { display: none; }
.play > .logo { grid-area: logo; }
.play.logo-up { grid-template-rows: 0 auto auto; row-gap: var(--gap); }
.play.logo-up > .logo {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: calc(72px + env(safe-area-inset-right));
  z-index: 3;
  width: auto;
  max-width: none;
}
.board { grid-area: board; }
.desk { grid-area: desk; }

.board, .desk { position: relative; min-height: 0; min-width: 0; }
.board { display: flex; flex-direction: column; gap: var(--gap); }
.desk { display: flex; flex-direction: column; gap: var(--gap); }
.board > *, .desk > * { flex-shrink: 0; }

@media (orientation: landscape) {
  .play {
    width: min(100vw, 1280px);
    grid-template-columns: minmax(0, 1fr) 25vw;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'board logo' 'board desk';
    column-gap: calc(var(--t) * 0.9);
  }
  .board { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; column-gap: calc(var(--t) * 0.6); }
  .desk > :first-child { margin-top: auto; }
}

/* Suspects: one row each, the calling card tucked against an iron glazing bar on the left.
   The card is where clues are pinned and who is chosen; the typed strip beside it is what
   they said, and a tap on it marks it a lie. */
.suspects {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--t) * 0.3);
  margin: 0;
  padding: 0 0 0 calc(var(--t) * 0.55);
  list-style: none;
}
.suspects::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--t) * -0.3);
  bottom: calc(var(--t) * -0.3);
  width: calc(var(--t) * 0.32);
  background: var(--iron);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--ak-ink) 14%, transparent);
}
.suspects li { display: flex; align-items: stretch; gap: calc(var(--t) * 0.3); min-width: 0; }

.suspect {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: calc(var(--t) * 2.9) calc(var(--t) * 4.9);
  grid-template-rows: auto 1fr;
  column-gap: calc(var(--t) * 0.35);
  align-items: start;
  min-height: 48px;
  padding: calc(var(--t) * 0.2) calc(var(--t) * 0.3) calc(var(--t) * 0.2) calc(var(--t) * 0.2);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--ak-radius);
  background: var(--ak-bg);
  color: var(--ak-ink);
  text-align: left;
  transition: border-color var(--slow) ease, outline-color var(--slow) ease;
  outline: 2px dashed transparent;
  outline-offset: -2px;
}
.suspect .art {
  grid-row: 1 / span 2;
  justify-self: center;
  display: block;
  height: calc(var(--t) * 3.5);
  width: min(100%, calc(var(--t) * 3.5 * var(--ar)));
  background-image: url('art/suspect-cards.png');
  background-repeat: no-repeat;
  filter: drop-shadow(0 calc(var(--t) * 0.15) calc(var(--t) * 0.25) rgba(0, 0, 0, 0.6));
  transition: filter var(--slow) ease;
}
.suspect .name {
  display: block;
  font-family: var(--ak-font-display);
  font-size: calc(var(--t) * 0.98);
  line-height: 1.1;
  letter-spacing: 0;
}
.suspect .marks { grid-column: 2; display: flex; flex-direction: column; }
.suspect .role { display: block; color: var(--ak-ink-muted); font-family: var(--ak-font-body); font-size: 0.78em; font-style: italic; }
.suspect .pins {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: calc(var(--t) * 0.2);
}
.pin-dot {
  display: inline-grid;
  place-items: center;
  width: calc(var(--t) * 1.35);
  height: calc(var(--t) * 1.35);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--ak-accent) 0 42%, var(--brass) 45% 100%);
  color: var(--ak-choice-selected-ink);
  font-size: calc(var(--t) * 0.8);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.suspect .stamp {
  display: none;
  margin-top: calc(var(--t) * 0.2);
  padding: 0 0.3em;
  border: 1px solid var(--ak-outline);
  color: var(--ak-ink-muted);
  font-size: calc(var(--t) * 0.72);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: max-content;
}
.suspect.is-target { outline-color: color-mix(in srgb, var(--ak-accent) 60%, transparent); }
.suspect.is-drop { outline-style: solid; outline-color: var(--ak-accent); }
.suspect.is-chosen { border-left-color: var(--ak-accent); }
.suspect.is-chosen .art { filter: drop-shadow(0 0 calc(var(--t) * 0.5) color-mix(in srgb, var(--ak-accent) 85%, transparent)); }
.suspect.is-cleared .art { filter: grayscale(1) brightness(0.5); }
.suspect.is-cleared .name { color: var(--ak-ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.suspect.is-cleared .stamp { display: block; }
.suspect.is-cleared .pins:empty { display: none; }
.suspect.is-culprit .art { filter: drop-shadow(0 0 calc(var(--t) * 0.8) var(--ak-accent)); }
.suspect.is-pointed { border-left-color: var(--brass); }

.say {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: calc(var(--t) * 0.3) calc(var(--t) * 0.5);
  border: 0;
  border-left: 3px double var(--ak-outline);
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  color: var(--ak-ink);
  text-align: left;
  font-size: calc(var(--t) * 0.95);
  line-height: 1.22;
}
.say .quote { transition: color var(--slow) ease; }
.say .mark {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.35em;
  border: 1px dashed var(--ak-outline);
  color: var(--ak-ink-muted);
  font-size: calc(var(--t) * 0.72);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.say[aria-pressed='true'] .quote { text-decoration: line-through; text-decoration-color: var(--brass); text-decoration-thickness: 2px; color: var(--ak-ink-muted); }
.say[aria-pressed='true'] .mark { border-style: solid; border-color: var(--brass); background: var(--brass); color: var(--paper-ink); }
.say.is-pointed { border-left-color: var(--brass); }

/* A very short screen (a small phone sideways under browser bars): the dense-board 44px minimum. */
@media (max-height: 360px) {
  .suspect, .say { min-height: 44px; }
  .suspects { gap: 2px; }
}

/* The clue tray: paper luggage tags, flowing down two balanced columns so no row is wasted. */
.clues { columns: 2; column-gap: calc(var(--t) * 0.4); }
.clues .tag { break-inside: avoid; width: 100%; margin: 0 0 calc(var(--t) * 0.4); touch-action: none; }

.tag {
  position: relative;
  display: block;
  min-height: 48px;
  padding: calc(var(--t) * 0.35) calc(var(--t) * 0.45) calc(var(--t) * 0.35) calc(var(--t) * 0.35);
  border: 0;
  border-radius: var(--ak-radius);
  background: var(--paper);
  color: var(--paper-ink);
  text-align: left;
  clip-path: polygon(calc(var(--t) * 0.9) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--t) * 0.9));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper-ink) 18%, transparent);
  transition: transform var(--slow) ease, background-color var(--slow) ease;
}
.tag::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--ak-accent);
  transition: box-shadow var(--slow) ease;
}
.tag .side {
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--t) * 0.2);
  margin: 0 calc(var(--t) * 0.4) calc(var(--t) * 0.1) 0;
}
.tag .num {
  display: grid;
  place-items: center;
  width: calc(var(--t) * 1.45);
  height: calc(var(--t) * 1.45);
  border-radius: 50%;
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-weight: 700;
  font-size: calc(var(--t) * 0.85);
}
.tag .icon {
  display: block;
  width: calc(var(--t) * 1.9);
  height: calc(var(--t) * 2.2);
  border: 2px solid var(--ak-bg);
  background-image: url('art/clue-tags.png');
  background-repeat: no-repeat;
  background-color: var(--ak-bg);
}
.tag .begin {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.15em 0.5em 0.15em 0.6em;
  background: var(--ak-accent);
  color: var(--ak-choice-selected-ink);
  font-size: calc(var(--t) * 0.8);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  clip-path: polygon(0.5em 0, 100% 0, 100% 100%, 0 100%);
}
.tag.is-begin .begin { display: block; }
.tag.is-begin { padding-top: calc(var(--t) * 1.25); }
.tag .title { font-weight: 700; }
.tag .about {
  margin-left: 0.4em;
  padding: 0 0.3em;
  border: 1px solid color-mix(in srgb, var(--paper-ink) 45%, transparent);
  color: var(--paper-ink);
  font-size: calc(var(--t) * 0.85);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0;
  display: inline-block;
  max-width: 100%;
  line-height: 1.3;
}
.tag .title::after { content: ' \2014 '; font-weight: 400; }
.tag .glass {
  position: absolute;
  top: calc(var(--t) * -0.1);
  right: calc(var(--t) * -0.1);
  width: calc(var(--t) * 1.7);
  height: calc(var(--t) * 1.7);
  opacity: 0;
  transition: opacity var(--slow) ease;
}
.tag.is-pinned .glass { opacity: 1; }
.tag.is-held { transform: translateY(calc(var(--t) * -0.2)); }
.tag.is-held::after { box-shadow: inset 0 0 0 3px var(--ak-accent); }
.tag.is-lit::after { box-shadow: inset 0 0 0 3px var(--brass); }
.tag.is-answer::after { box-shadow: inset 0 0 0 3px var(--ak-accent); }
.tag.is-related::after { box-shadow: inset 0 0 0 3px var(--ak-accent); }
.clues.is-focused .tag:not(.is-related):not(.is-held) { opacity: 0.55; }
.clues .tag { transition: opacity var(--slow) ease, transform var(--slow) ease; }

/* The desk: statements as one typed transcript, the note, then hint and the brass plate. */
.logo {
  display: block;
  justify-self: center;
  height: calc(var(--t) * 2.4);
  width: auto;
  max-width: 60%;
  object-fit: contain;
}
.note {
  margin: 0;
  min-height: calc(2.5em + var(--t) * 0.9);
  padding: calc(var(--t) * 0.45) calc(var(--t) * 0.6);
  border-left: 3px solid var(--brass);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-style: italic;
}
.note:empty { visibility: hidden; }
.note .how { font-style: normal; color: var(--ak-ink-muted); }
.note .how b { color: var(--ak-ink); font-weight: 700; }
.note.is-teach {
  font-size: max(18px, calc(var(--t) * 1.15));
  font-style: normal;
  line-height: 1.3;
  border-left-color: var(--ak-accent);
}
.note.is-reason {
  font-family: var(--ak-font-display);
  font-size: max(18px, calc(var(--t) * 1.3));
  font-style: normal;
  border-left-color: var(--ak-accent);
}
.note .got { display: block; margin-top: 0.2em; color: var(--ak-ink-muted); font-size: 0.85em; }

.foot { display: flex; gap: calc(var(--t) * 0.5); align-items: stretch; }
.hint-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 48px;
  min-width: 48px;
  padding: 0 calc(var(--t) * 0.9);
  border: 1px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  font-family: var(--ak-font-display);
  letter-spacing: 0.06em;
}
.hint-tab svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.plate {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: calc(var(--t) * 0.25) calc(var(--t) * 0.8);
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: var(--ak-radius);
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  box-shadow: inset 0 0 0 3px var(--ak-choice-bg), inset 0 0 0 4px color-mix(in srgb, var(--brass) 30%, transparent);
  transition: background-color var(--slow) ease, color var(--slow) ease, border-color var(--slow) ease;
}
.plate-word { font-family: var(--ak-font-display); font-size: calc(var(--t) * 1.35); letter-spacing: 0.22em; text-transform: uppercase; }
.plate-who { font-size: calc(var(--t) * 0.85); font-style: italic; }
.plate.is-warm {
  border-color: var(--brass);
  background: var(--brass);
  color: var(--paper-ink);
  box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 4px color-mix(in srgb, var(--paper-ink) 45%, transparent);
}

.kept { margin: 0; color: var(--ak-ink-muted); font-size: calc(var(--t) * 0.8); font-style: italic; }
.kept.is-trouble { color: var(--ak-ink); }

/* The tag's title is set apart from its text by a rule, not a dash. */
.tag .text { letter-spacing: -0.02em; }

/* The opening: start.js's lines and its way in, set on a foxed sheet of the case file, pinned in
   the dark, sealed with a wax button. Only the dressing changes; start.js still draws and runs it. */
html body #activity-start.site-shriversify .ak-scene {
  position: relative;
  box-sizing: border-box;
  width: min(calc(100% - 24px), 520px);
  min-height: 0;
  margin: max(5vh, 20px) auto;
  padding: 40px 26px 22px;
  gap: 18px;
  border: 1px solid var(--ak-outline);
  background: var(--foxed);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  rotate: -0.8deg;
}
html body #activity-start.site-shriversify .ak-scene::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ak-accent);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  translate: -50% 0;
}
html body #activity-start.site-shriversify .ak-scene .ak-head { width: 100%; padding-bottom: 14px; border-bottom: 3px double var(--ak-outline); }
html body #activity-start.site-shriversify .ak-scene-lines { gap: 12px; }
html body #activity-start.site-shriversify .ak-scene-lines::before {
  content: 'From the case file';
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-body);
  font-size: 15px;
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.14em;
}
html body #activity-start.site-shriversify .ak-scene-line { font-size: clamp(17px, 4.4vw, 22px); text-shadow: none; }
html body #activity-start.site-shriversify .ak-sheet { background: var(--foxed); }
/* The way in is a wax seal: a pressed rim, a raised ring, and the word stamped in. */
html body #activity-start.site-shriversify .ak-go {
  width: 112px;
  height: 112px;
  border: 3px solid var(--ak-btn-active);
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--ak-btn-fill) 75%, white), var(--ak-btn-fill) 52%, color-mix(in srgb, var(--ak-btn-fill) 82%, var(--ak-btn-ink)));
  color: var(--ak-btn-ink);
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--ak-btn-fill) 60%, transparent), inset 0 0 0 9px color-mix(in srgb, var(--ak-btn-ink) 30%, transparent), 0 6px 14px rgba(0, 0, 0, 0.6);
  font-family: var(--ak-font-display);
  font-size: 15px;
  letter-spacing: 0.12em;
}
/* Sideways: the title and the seal on the left of the sheet, the letter on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  html body #activity-start.site-shriversify .ak-scene {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    grid-template-areas: 'head lines' 'actions lines';
    align-items: center;
    column-gap: 26px;
    row-gap: 10px;
    width: min(calc(100% - 24px), 760px);
    margin: max(12px, 4vh) auto;
    padding: 30px 24px 16px;
  }
  html body #activity-start.site-shriversify .ak-scene .ak-head { grid-area: head; border-bottom: none; padding-bottom: 0; }
  html body #activity-start.site-shriversify .ak-scene-lines { grid-area: lines; max-width: none; padding-left: 22px; border-left: 3px double var(--ak-outline); text-align: left; }
  html body #activity-start.site-shriversify .ak-scene-actions { grid-area: actions; }
  html body #activity-start.site-shriversify .ak-scene-actions .ak-jump { order: 2; }
  html body #activity-start.site-shriversify .ak-scene-line { font-size: 17px; }
  html body #activity-start.site-shriversify .ak-go { width: 92px; height: 92px; font-size: 13px; }
}

/* The ending is the next page of the same file: the same foxed paper, a pin, the page's own
   heading, and a shadow along the edge it turns on. */
html body #activity-chrome-ending.site-shriversify .ac-card {
  position: relative;
  background: var(--foxed);
  text-align: left;
  box-shadow: inset 10px 0 14px -10px rgba(0, 0, 0, 0.7), 0 30px 60px rgba(0, 0, 0, 0.6);
}
html body #activity-chrome-ending.site-shriversify .ac-card::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ak-accent);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  translate: -50% 0;
}
html body #activity-chrome-ending.site-shriversify .ac-number { font-size: 14px; text-align: center; }
html body #activity-chrome-ending.site-shriversify .ac-verdict { text-align: center; }
html body #activity-chrome-ending.site-shriversify .ac-line:last-child { color: var(--ak-ink); font-style: normal; font-variant: small-caps; letter-spacing: 0.04em; }

/* The lamp's ending page, sideways or on a short screen: wider and tighter, centred by its own
   margins so that if it is still taller than the screen it scrolls from the top, never cut off. */
html body #activity-chrome-ending.site-shriversify { justify-content: flex-start; }
html body #activity-chrome-ending.site-shriversify .ac-card { margin: auto; }
html body #activity-chrome-ending.site-shriversify .ac-work { width: max-content; max-width: 100%; margin: 8px auto; }
html body #activity-chrome-ending.site-shriversify .ac-work img { max-height: min(30dvh, 240px); width: auto; margin: 0 auto; }
html body #activity-chrome-ending.site-shriversify .ac-lines { line-height: 1.4; }
@media (orientation: landscape), (max-height: 720px) {
  html body #activity-chrome-ending.site-shriversify {
    padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  html body #activity-chrome-ending.site-shriversify .ac-card { width: min(100%, 720px); padding: 14px 24px 6px; }
  html body #activity-chrome-ending.site-shriversify .ac-number { margin-bottom: 2px; }
  html body #activity-chrome-ending.site-shriversify .ac-verdict { margin-bottom: 8px; padding-bottom: 8px; font-size: clamp(18px, 6dvh, 26px); }
  html body #activity-chrome-ending.site-shriversify .ac-lines { font-size: clamp(13px, 4dvh, 16px); line-height: 1.35; }
  html body #activity-chrome-ending.site-shriversify .ac-line { margin-bottom: 4px; }
  html body #activity-chrome-ending.site-shriversify .ac-actions { margin-top: 6px; }
  html body #activity-chrome-ending.site-shriversify .ac-work img { max-height: 20dvh; }
}

/* Sideways, once solved, the ending page takes the desk's column instead of covering the board:
   no dark layer, the board refits beside it, the page's words scroll inside it, its buttons stay put. */
:root { --end-w: 34vw; }
@media (orientation: landscape) {
  body.is-solved .play { grid-template-columns: minmax(0, 1fr) var(--end-w); }
  body.is-ended .desk, body.is-ended .play > .logo { visibility: hidden; }
  body.is-ended .hatbox { opacity: 0 !important; transition: opacity 1.2s ease; }
  body.is-ended .clues .tag:not(.is-answer),
  body.is-ended .suspects li:not(:has(.is-culprit)) { opacity: 0.4; }
  body.is-ended .spot { opacity: 0; }
  html body #activity-chrome-ending.site-shriversify {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 70px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 0;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
  }
  html body #activity-chrome-ending.site-shriversify .ac-card {
    display: flex;
    flex-direction: column;
    width: var(--end-w);
    max-height: 100%;
    margin: 0;
    padding: 24px 14px 4px;
    pointer-events: auto;
  }
  html body #activity-chrome-ending.site-shriversify .ac-card > * { flex-shrink: 0; }
  html body #activity-chrome-ending.site-shriversify .ac-lines { flex-shrink: 1; min-height: 2.6em; }
  html body #activity-chrome-ending.site-shriversify .ac-lines { overflow-y: auto; font-size: clamp(12px, 3.5dvh, 13px); line-height: 1.3; scrollbar-width: thin; scrollbar-color: var(--ak-ink-muted) transparent; }
  html body #activity-chrome-ending.site-shriversify .ac-lines.has-more { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  html body #activity-chrome-ending.site-shriversify .ac-number { font-size: 12px; margin: 6px 0 2px; }
  html body #activity-chrome-ending.site-shriversify .ac-verdict { font-size: clamp(16px, 4.6dvh, 20px); }
  html body #activity-chrome-ending.site-shriversify .ac-work { margin: 4px auto; }
  html body #activity-chrome-ending.site-shriversify .ac-work img { height: min(13dvh, 56px); max-height: none; width: auto; }
  html body #activity-chrome-ending.site-shriversify .ac-actions { flex-wrap: nowrap; justify-content: space-between; gap: 6px; margin-top: 4px; }
  html body #activity-chrome-ending.site-shriversify .ac-actions button { flex: 1 1 0; padding: 0 2px; font-size: 14px; line-height: 1.1; }
}

/* The hatbox behind the glass, shown when the house lights come up. */
.hatbox {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  height: min(46dvh, 88%);
  width: auto;
  max-width: 90%;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.2s ease 0.6s;
}
.hatbox[hidden] { display: block; visibility: hidden; }
body.is-solved .hatbox { opacity: 1; visibility: visible; }
body.is-solved .clues .tag:not(.is-answer),
body.is-solved .suspects li:not(:has(.is-culprit)) { opacity: 0.6; transition: opacity 1.8s ease; }

/* A clue lifted off the tray while it is dragged to a suspect. */
.drag-ghost {
  position: fixed;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.6em 0.3em 0.3em;
  background: var(--paper);
  color: var(--paper-ink);
  font: 700 15px/1.2 var(--ak-font-body);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  translate: -50% -120%;
}
.drag-ghost .num { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--ak-bg); color: var(--ak-ink); }

/* Guided first move: a ring and an arrow over what to tap, never over the words. */
.teach { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.teach[hidden] { display: none; }
.teach-ring {
  position: fixed;
  border: 3px solid var(--ak-accent);
  border-radius: 14px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ak-bg) 70%, transparent);
}
.note-arrow {
  float: left;
  width: 1.6em;
  height: 1.6em;
  margin: 0.05em 0.5em 0 0;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Slow light, never a bounce. All of it stays still under reduced motion or Less motion. */
@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .spot { transition: transform 0.9s ease, opacity 1.2s ease; }
  :root:not(.ac-still) .houselights { transition: opacity 2.6s ease; }
  :root:not(.ac-still) .teach-ring { animation: ring-breathe 1.8s ease-in-out infinite; }
  :root:not(.ac-still) .note-arrow { transition: rotate 0.6s ease; }
  :root:not(.ac-still) .tag.is-settling { animation: tag-sway 0.9s ease-out; transform-origin: 50% 0; }
  :root:not(.ac-still) .pin-dot.is-new { animation: pin-settle 0.6s ease-out; }
  :root:not(.ac-still) body.is-solved .tag { animation: tag-settle 0.8s ease-out both; animation-delay: calc(var(--i, 0) * 120ms); }
  :root:not(.ac-still) body.is-solved .suspect .art { animation: tag-settle 0.8s ease-out both; animation-delay: calc(0.9s + var(--i, 0) * 120ms); }
  :root:not(.ac-still) .drag-ghost { transition: opacity 0.2s ease; }
  :root:not(.ac-still) .play { transition: opacity 0.5s ease; }
}

@keyframes ring-breathe {
  0%, 100% { opacity: 1; scale: 1; }
  50% { opacity: 0.55; scale: 1.04; }
}
@keyframes tag-sway {
  0% { rotate: -2.2deg; }
  45% { rotate: 1.2deg; }
  75% { rotate: -0.4deg; }
  100% { rotate: 0deg; }
}
@keyframes pin-settle {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes tag-settle {
  0% { translate: 0 -3px; }
  100% { translate: 0 0; }
}