/* The Boathouse Escape: one painted room at eye level, a caption strip of old paper under it,
   and what you carry along the bottom. The kit gives the colours and the two faces; this file
   gives the room its shape. */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
}

body { overflow: hidden; }

[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

/* ---------- the play screen ---------- */

.play {
  position: fixed;
  inset: 0;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo" "stage" "side";
  row-gap: 6px;
  padding:
    var(--ac-status-h, 72px)
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  background-color: var(--ak-bg);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* The same room, washed and out of focus, fills whatever the painting does not. */
.play::before {
  content: '';
  position: absolute;
  inset: -32px;
  z-index: -1;
  background-image: var(--ak-backdrop-layer);
  background-size: cover;
  background-position: center;
  filter: blur(12px);
}

.logo-row {
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.logo {
  display: block;
  height: 100%;
  width: auto;
}

.stage-wrap {
  grid-area: stage;
  position: relative;
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
}

/* The frame crops off the lowest water when the screen is short, so the room keeps its width: upright it
   keeps at least the top 72% of the painting (every hot spot sits above 65%), sideways the top 68%. */
.stage-frame {
  position: relative;
  overflow: hidden;
  width: min(100cqw, 104cqh, 100dvw);
  height: min(100cqh, 133.33cqw);
  box-shadow: 0 0 0 1px #000, 0 0 40px 22px var(--ak-bg);
  background: var(--ak-bg);
}

.stage-frame .stage { width: 100%; box-shadow: none; }

.stage {
  position: relative;
  container-type: inline-size;
  width: min(100cqw, 75cqh, 100dvw, 75dvh);
  aspect-ratio: 3 / 4;
  box-shadow: 0 0 0 1px #000, 0 0 40px 22px var(--ak-bg);
  transform-origin: 86% 28%;
}

.paint,
.gloom,
.shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.paint {
  background: url("art/boathouse.jpg") center / 100% 100% no-repeat;
  transition: filter 1.2s ease;
}

/* Before the lantern, the candle stub on the shelf is the only light. */
.gloom {
  background: radial-gradient(circle at 78% 25%, transparent 0, color-mix(in srgb, var(--ak-bg) 12%, transparent) 18%, color-mix(in srgb, var(--ak-bg) 32%, transparent) 65%);
  transition: opacity 3s ease;
}

.gloom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 86% 30%, color-mix(in srgb, var(--ak-accent) 16%, transparent) 0, transparent 34%);
  opacity: 0;
  transition: opacity 3s ease;
}

/* Once it hangs by the ledger, the wax-yellow moves to the hook and the water starts to shine. */
.shine {
  top: 60%;
  background:
    linear-gradient(90deg, transparent 74%, color-mix(in srgb, var(--ak-accent) 22%, transparent) 84%, transparent 94%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 4s ease;
}

.stage.is-lantern-hook .gloom { opacity: 0.45; }
.stage.is-lantern-hook .gloom::after { opacity: 1; }
.stage.is-lantern-hook .shine { opacity: 1; }

:root.ac-lights-up .paint { filter: brightness(1.4) contrast(1.05); }
:root.ac-lights-up .gloom { opacity: 0.15; }

.lap,
.lap::after {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--ak-ink) 40%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.lap { left: 0; top: 62.5%; width: 16%; height: 2.6%; }
.lap::after { content: ''; left: 570%; top: 0; width: 70%; height: 100%; }
.stage.is-lapping .lap,
.stage.is-lapping .lap::after { animation: lap-fade 2.6s ease-out; }

/* The painted-over name, which seems to surface under the lantern. */
.bow-name {
  position: absolute;
  left: 30.5%;
  top: 47.6%;
  width: 12.6%;
  height: 3.4%;
  display: grid;
  place-items: center;
  font-family: var(--ak-font-display);
  font-size: 3.4cqw;
  letter-spacing: 0.08em;
  color: var(--ak-ink-muted);
  filter: blur(1.4px);
  opacity: 0;
  transition: opacity 8s ease;
  pointer-events: none;
}

.stage.is-lantern-hook .bow-name { opacity: 0.22; }
/* As the chain drops, the name under the paint comes up plain: the word on the lock was this boat's. */
.stage.is-free .bow-name { opacity: 0.85; filter: none; color: var(--ak-ink); transition: opacity 3s ease, filter 3s ease; }

/* From the third night the candle stub is out: its pool goes dark until the lantern hangs. */
.snuff {
  position: absolute;
  left: 75.6%;
  top: 21.2%;
  width: 6%;
  height: 6%;
  background: radial-gradient(closest-side, var(--ak-bg) 35%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
}

.stage.no-candle .snuff { opacity: 0.95; }
.stage.no-candle .gloom { background: color-mix(in srgb, var(--ak-bg) 42%, transparent); }
.stage.no-labels .pin { display: none; }

/* Where the item in hand goes: a ring on the lantern or on the hook, with a small tag. */
.aim {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.aim::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ak-accent);
  border-radius: 50%;
}

.aim[data-at="lantern"] { left: 24%; top: 26%; width: 14%; height: 17%; }
.aim[data-at="hook"] { left: 80%; top: 8%; width: 16%; height: 18%; }

.aim-tag {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: 3px 8px;
  border: 1px solid var(--ak-accent);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 16px;
  white-space: nowrap;
}

.aim[data-at="lantern"] .aim-tag { left: calc(100% + 6px); }
.aim[data-at="hook"] .aim-tag { right: calc(100% + 6px); }

/* ---------- hot spots: painted things and placed pieces ---------- */

.spot {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  touch-action: manipulation;
}

.spot-chart { left: 8.5%; top: 6.5%; width: 18.5%; height: 22.5%; }
.spot-ledger { left: 57.5%; top: 9%; width: 37.5%; height: 22.5%; }
.spot-tackle { left: 37.5%; top: 37%; width: 20%; height: 9.5%; }
.spot-padlock { left: 18%; top: 47.5%; width: 12.4%; height: 13%; }
.spot-lantern { left: 25.5%; top: 27.5%; width: 11%; height: 14%; }

.stage.is-lantern-hook .spot-lantern { left: 84%; top: 22.8%; height: 14.5%; }
.stage.is-tackle-open .spot-tackle .piece { filter: brightness(0.8); }
.stage.is-lantern-hook .spot-lantern .pin,
.stage.is-lantern-hook .spot-lantern .nail { display: none; }

.piece {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  display: block;
  pointer-events: none;
}

.spot-tackle .piece { width: 100%; height: auto; }
.spot-padlock .piece { height: 100%; width: auto; transform-origin: 50% 0; }

.lantern-art {
  position: relative;
  display: block;
  aspect-ratio: 170 / 384;
  background: url("art/lantern.png") 0 0 / 200% 100% no-repeat;
}

.lantern-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("art/lantern.png") 100% 0 / 200% 100% no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.lantern-art.is-lit::after { opacity: 1; }

.spot-lantern .lantern-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 84%;
  translate: -50% 0;
  transform-origin: 50% 0;
  transition: transform 3s ease-in-out;
}

.stage.is-lantern-hook .spot-lantern .lantern-art { transform: rotate(7deg); }

/* Lit on the nail: the flame shows where it was struck, in a warm pool, before the lantern comes down. */
.spot-lantern::before {
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ak-accent) 34%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.stage.is-lighting .spot-lantern::before { opacity: 1; }
.spot-lantern .lantern-art { transition: transform 3s ease-in-out, opacity 0.9s ease; }
.stage.is-lantern-held:not(.is-lighting) .spot-lantern .lantern-art { opacity: 0; }

/* Something just came into the strip: marked until the player picks it up. */
.slot.is-new { border-style: dashed; border-color: var(--ak-accent); }
.slot.is-new .slot-name { color: var(--ak-ink); }

.nail {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 18%;
  translate: -50% 0;
  background: color-mix(in srgb, var(--ak-ink-muted) 60%, var(--ak-bg));
}

/* Small paper labels pinned beside each thing, never on it. */
.pin {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  padding: 1px 6px 2px;
  border: 1px solid var(--ak-outline);
  border-radius: 1px;
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: clamp(12px, 3.4cqw, 16px);
  line-height: 1.2;
  white-space: nowrap;
  rotate: -2deg;
  pointer-events: none;
}

.pin-below { top: calc(100% + 3px); }
.pin-above { bottom: calc(100% + 3px); rotate: 2deg; }
/* The ledger's spot reaches over to the hook, so its two labels sit under each. */
.spot-ledger .pin-ledger { left: 25%; }
.spot-ledger .pin-hook { left: 81%; }

.stage.is-aiming .spot { outline: 1px dashed color-mix(in srgb, var(--ak-accent) 70%, transparent); outline-offset: 2px; }
.stage.is-aiming .spot:focus-visible { outline: 3px solid var(--ak-focus); }

.stage.is-free .spot-padlock { opacity: 0; transform: translateY(150%); transition: transform 2.2s ease-in, opacity 2.2s ease-in; pointer-events: none; }
.stage.is-free .spot-padlock .pin { display: none; }

.fog {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--ak-ink-muted) 55%, var(--ak-bg)) 0, color-mix(in srgb, var(--ak-ink-muted) 25%, transparent) 45%, transparent 85%);
  opacity: 0;
  transition: opacity 6s ease;
  pointer-events: none;
}

.stage-wrap.is-away .fog { opacity: 0.85; }

/* ---------- the caption, the strip and the quiet line ---------- */

.side {
  grid-area: side;
  position: relative;
  z-index: 6;
  justify-self: center;
  display: grid;
  gap: 6px;
  width: min(100%, 560px);
}

/* A narrow strip of foxed paper with a torn edge, typed on in a plain hand. */
.caption {
  margin: 0;
  padding: 12px 16px 11px;
  min-height: 58px;
  background:
    radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--ak-ink-muted) 9%, transparent) 0 6px, transparent 7px),
    radial-gradient(circle at 71% 78%, color-mix(in srgb, var(--ak-ink-muted) 8%, transparent) 0 9px, transparent 10px),
    radial-gradient(circle at 93% 18%, color-mix(in srgb, var(--ak-ink-muted) 7%, transparent) 0 4px, transparent 5px),
    var(--ak-surface);
  color: var(--ak-ink);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  clip-path: polygon(0 3px, 6% 0, 13% 2px, 22% 0, 31% 3px, 44% 1px, 58% 3px, 69% 0, 81% 2px, 92% 0, 100% 2px, 100% calc(100% - 2px), 88% 100%, 74% calc(100% - 3px), 61% 100%, 47% calc(100% - 2px), 33% 100%, 19% calc(100% - 3px), 8% 100%, 0 calc(100% - 2px));
}

.caption-line { display: block; transition: opacity 0.6s ease; }

.hint-line {
  display: block;
  margin-top: 6px;
  padding: 6px 0 0 10px;
  border-top: 1px dashed var(--ak-outline);
  border-left: 2px solid var(--ak-accent);
  color: var(--ak-ink);
  font-size: 18px;
  font-style: italic;
}

.caption.is-last { text-align: center; }
.caption.is-last .caption-line { font-family: var(--ak-font-display); font-size: 21px; }

/* What you carry, laid on a tarred plank. */
.strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 4px 12px;
  background:
    repeating-linear-gradient(180deg, var(--ak-surface) 0 25px, var(--ak-bg) 25px 27px);
  border-top: 1px solid var(--ak-outline);
  border-bottom: 1px solid var(--ak-outline);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
}

.strip-how {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  color: var(--ak-ink);
  font-size: 16px;
  font-style: italic;
  line-height: 1.25;
}

.strip-empty {
  padding: 0 8px;
  color: var(--ak-ink-muted);
  font-style: italic;
  font-size: 16px;
}

.slot {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 72px;
  min-height: 60px;
  padding: 4px 6px 3px;
  border: 1px solid var(--ak-outline);
  border-radius: 2px;
  background: var(--ak-bg);
  transition: transform 0.6s ease, border-color 0.6s ease;
}

.slot-art {
  display: grid;
  place-items: center;
  height: 36px;
}

.slot-art img { display: block; height: 30px; width: auto; }
.slot-art .lantern-art { height: 36px; }

.slot-name {
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 13px;
  line-height: 1;
}

.slot[aria-pressed="true"] {
  border-color: var(--ak-accent);
  box-shadow: inset 0 0 0 1px var(--ak-accent);
  transform: translateY(-3px);
}

.slot[aria-pressed="true"] .slot-name { color: var(--ak-ink); }

.footline {
  margin: 0;
  min-height: 16px;
  color: var(--ak-ink);
  font-size: 15px;
  text-align: center;
}

.footline .kept { color: var(--ak-ink-muted); font-style: italic; }

.night-mark {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid var(--ak-outline);
  font-family: var(--ak-font-display);
  font-style: normal;
  letter-spacing: 0.06em;
}

.kept.is-trouble { color: var(--ak-ink); }

/* ---------- paper tags: Hint and Back ---------- */

.tag {
  position: relative;
  min-width: 52px;
  min-height: 52px;
  margin: 0;
  padding: 0 16px 0 24px;
  border: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  filter: drop-shadow(0 6px 10px #000);
}

.tag::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--ak-bg);
  box-shadow: inset 0 0 0 1px var(--ak-ink-muted);
}

.hint-tag {
  position: fixed;
  z-index: 8;
  top: calc(max(12px, env(safe-area-inset-top)) + 58px);
  right: max(12px, env(safe-area-inset-right));
  rotate: 3deg;
}

/* ---------- close-ups ---------- */

.closeup {
  grid-row: 1 / 3;
  grid-column: 1;
  position: relative;
  z-index: 5;
  display: grid;
  min-height: 0;
}

.cu-scrim {
  position: absolute;
  inset: 0;
  /* The room stays in view around the close-up: a dark pool under the object, the painting at the edges. */
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%, color-mix(in srgb, var(--ak-bg) 88%, transparent) 0, color-mix(in srgb, var(--ak-bg) 80%, transparent) 55%, transparent 100%),
    color-mix(in srgb, var(--ak-bg) 58%, transparent);
}

:root.ac-lights-up .cu-scrim { background: color-mix(in srgb, var(--ak-surface) 92%, transparent); }

.cu-body {
  position: relative;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(100%, 520px);
  max-height: 100%;
  overflow-y: auto;
  padding: 8px;
}

.cu-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.back-tag { flex: none; rotate: -3deg; }

.cu-title {
  flex: 1;
  margin: 0;
  padding-right: 64px;
  font-family: var(--ak-font-display);
  font-size: 24px;
  font-weight: var(--ak-title-weight);
  text-align: center;
}

.cu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.cu-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cu-piece {
  display: block;
  max-width: 100%;
  height: min(9dvh, 150px);
  width: auto;
  transform-origin: 50% 0;
}

.cu-lantern { height: min(26dvh, 220px); }

@media (orientation: portrait) and (min-height: 760px) {
  .cu-piece { height: min(14dvh, 150px); }
}

/* On a short upright phone the lock's own controls need the room more than its picture does. */

.cu-note {
  margin: 0;
  max-width: 34ch;
  color: var(--ak-ink-muted);
  font-size: 17px;
  font-style: italic;
  text-align: center;
}

.act {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ak-ink-muted);
  border-radius: 2px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 19px;
  letter-spacing: 0.03em;
}

.cu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
}

/* A quiet link between a lock and its clue: underlined words, not a second button. */
.act.link {
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid var(--ak-ink-muted);
  border-radius: 0;
  background: none;
  font-family: var(--ak-font-body);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0;
}

/* The caption already reads the dials aloud on screen; this copy is for screen readers. */
.readout {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Digits in the plain face, so a 7 never passes for a 1. */
.readout-tackle,
.dial-face {
  margin: 0;
  padding: 0;
  text-align: center;
  caret-color: transparent;
  appearance: none;
  cursor: text;
}
.dial-face::selection { background: transparent; }
.dial-face:focus-visible,
.dial-face:focus { outline: 3px solid var(--ak-focus); outline-offset: 2px; }

.dials-tackle .dial-face {
  font-family: var(--ak-font-body);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
}

.dial-legend {
  display: flex;
  gap: 8px;
  margin-top: -4px;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 15px;
  text-align: center;
}

.dial-key { display: grid; justify-items: center; gap: 2px; }

.legend-hour { width: 56px; align-self: end; }
.legend-gap { width: 10px; }
.legend-minutes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 120px;
  border-top: 1px solid var(--ak-outline);
}
.legend-word { grid-column: 1 / 3; margin-top: -1px; color: var(--ak-ink); }
.legend-tens,
.legend-ones { font-size: 14px; }

.dial-example {
  margin: 0;
  color: var(--ak-ink);
  font-size: 15px;
  font-style: italic;
  text-align: center;
}

/* Beside the padlock's wheels: the ledger's three lines, so the clue is on the same screen as the lock. */
.ledger-note {
  max-width: 300px;
  padding: 6px 10px;
  border-left: 2px solid var(--ak-ink-muted);
  background: color-mix(in srgb, var(--ak-surface) 85%, transparent);
}
.ledger-note-head { margin: 0; color: var(--ak-ink-muted); font-size: 15px; font-style: italic; }
.ledger-note-rows { margin: 2px 0 0; padding: 0; list-style: none; font-size: 17px; line-height: 1.3; }

.ledger-gap { color: var(--ak-ink-muted); white-space: nowrap; }

/* The torn pages found on earlier nights, pinned up by the tide chart. */
.scraps {
  position: absolute;
  left: 28%;
  top: 7%;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.scrap {
  width: 3.4cqw;
  height: 4.6cqw;
  background: var(--ak-ink);
  opacity: 0.8;
  clip-path: polygon(0 0, 100% 4%, 92% 100%, 6% 94%, 0 60%);
}
.scrap:nth-child(even) { rotate: 6deg; }
.scrap:nth-child(odd) { rotate: -4deg; }

.pages-button {
  justify-self: start;
  min-height: 48px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--ak-ink-muted);
  border-radius: 2px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 15px;
  font-style: italic;
}

/* Upright, the torn pages hang as a paper tag at top left, opposite Hint, so they take no height from the room. */
@media (orientation: portrait) {
  .pages-button {
    position: fixed;
    z-index: 8;
    top: calc(max(12px, env(safe-area-inset-top)) + 58px);
    left: max(12px, env(safe-area-inset-left));
    max-width: calc(50vw - 72px);
    min-height: 48px;
    padding: 4px 10px;
    border: 0;
    line-height: 1.15;
    text-align: left;
    rotate: -3deg;
    filter: drop-shadow(0 6px 10px #000);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    padding-right: 18px;
  }
}

.torn-sheet { rotate: 0.8deg; border-color: var(--ak-ink-muted); }
.torn-text { margin: 0; font-size: 17px; line-height: 1.4; font-style: italic; }

.pages-list { margin: 0 0 8px; padding-left: 20px; font-size: 17px; line-height: 1.4; }
.pages-list li + li { margin-top: 8px; }
.dials-tackle .dial-colon { width: 10px; text-align: center; }

.dials-tackle .dial.is-off .dial-face { outline: 2px dashed var(--ak-ink); outline-offset: 3px; }

.check-note {
  margin: 0;
  min-height: 0;
  color: var(--ak-ink);
  font-size: 17px;
  font-style: italic;
  text-align: center;
}

.check-note:empty { display: none; }

.page-dark-text {
  margin: 44px 12px 0;
  color: var(--ak-ink-muted);
  font-size: 18px;
  font-style: italic;
  text-align: center;
}

/* Sideways, the first night's teaching words sit in the column, large, with an arrow toward the room. */
.coach-dock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ak-accent);
  border-radius: 2px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 20px;
  line-height: 1.25;
}

.dock-arrow { flex: none; width: 26px; height: 26px; color: var(--ak-accent); order: 2; }
.coach-dock[data-toward="down"] .dock-arrow { rotate: 90deg; }

.stamp {
  margin: 0;
  text-align: center;
  color: var(--ak-ink-muted);
  font-size: 16px;
  font-style: italic;
}

.stamp b {
  white-space: normal;
  font-family: var(--ak-font-display);
  font-style: normal;
  font-weight: 400;
  color: var(--ak-ink);
  letter-spacing: 0.08em;
}

.dial-colon {
  align-self: center;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 34px;
  line-height: 1;
}

/* Paper in the room: the tide table and the ledger page. */
.sheet {
  width: min(100%, 400px);
  padding: 14px 14px 16px;
  border: 1px solid var(--ak-outline);
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--ak-ink-muted) 9%, transparent) 0 10px, transparent 11px),
    radial-gradient(circle at 10% 88%, color-mix(in srgb, var(--ak-ink-muted) 8%, transparent) 0 7px, transparent 8px),
    var(--ak-surface);
  color: var(--ak-ink);
  rotate: -0.6deg;
}

.sheet-head {
  margin: 0 0 8px;
  font-style: italic;
  font-size: 17px;
  text-align: center;
  color: var(--ak-ink-muted);
}

.sheet table { width: 100%; border-collapse: collapse; font-size: 18px; }
.sheet th { padding: 4px 6px; border-bottom: 1px solid var(--ak-outline); color: var(--ak-ink-muted); font-family: var(--ak-font-display); font-size: 15px; font-weight: 400; text-align: left; }
.sheet td { padding: 7px 6px; border-bottom: 1px dotted var(--ak-outline); font-variant-numeric: tabular-nums; }

.ringed { position: relative; display: inline-block; }
.sheet tr.is-ringed td { font-weight: 600; }
.sheet tr.is-ringed .low-cell span,
.sheet tr.is-ringed .low-cell { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Pencil in another hand: on the chart, what the ringed time is for; on the ledger, how the page meets the chain. */
.chart-note,
.ledger-foot {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--ak-outline);
  color: var(--ak-ink);
  font-size: 17px;
  font-style: italic;
  text-align: center;
}

/* At the tackle box: the ringed time, copied from the chart, right above the dials it goes on. */
.chart-copy {
  margin: 0;
  padding: 4px 10px;
  border-left: 2px solid var(--ak-ink-muted);
  background: color-mix(in srgb, var(--ak-surface) 85%, transparent);
  color: var(--ak-ink);
  font-size: 17px;
}

.ledger-torn {
  margin: 10px 0 0;
  color: var(--ak-ink-muted);
  font-size: 16px;
  font-style: italic;
  text-align: center;
}
.ringed svg { position: absolute; left: -12px; top: -9px; width: calc(100% + 24px); height: calc(100% + 18px); overflow: visible; pointer-events: none; }
.ringed path { fill: none; stroke: var(--ak-accent-2); stroke-width: 3.5; stroke-linecap: round; }
:root.ac-lights-up .ringed path { stroke: color-mix(in srgb, var(--ak-accent-2) 70%, var(--ak-ink)); }

.page { min-height: 220px; }
.page.is-dark { min-height: 140px; }

/* Things inside a close-up that take an item: dashed once something is in hand. */
.cu-target {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px dashed transparent;
  border-radius: 2px;
  background: none;
}

.closeup.is-aiming .cu-target { border-color: var(--ak-accent); }

.hook-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 400px);
}

.hook-row .cu-note { text-align: left; }

.cu-hook { flex: none; min-width: 72px; }

.cu-hook::before {
  content: '';
  display: block;
  width: 60px;
  aspect-ratio: 140 / 240;
  background: url("art/boathouse.jpg") 95.5% 10.2% / 548.6% 426.7% no-repeat;
  border: 1px solid var(--ak-outline);
}

.hook-tag {
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 15px;
}
.page.is-dark {
  background:
    repeating-linear-gradient(180deg, transparent 0 33px, color-mix(in srgb, var(--ak-outline) 45%, transparent) 33px 34px),
    var(--ak-bg);
  border-color: var(--ak-bg);
}

.ledger-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ledger-row,
.ledger-cols {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr;
  align-items: baseline;
  padding: 8px 4px;
  border-bottom: 1px dotted var(--ak-outline);
}
.ledger-cols { color: var(--ak-ink-muted); font-family: var(--ak-font-display); font-size: 15px; border-bottom-style: solid; }
.ledger-boat { font-family: var(--ak-font-display); font-size: 24px; letter-spacing: 0.06em; }
.ledger-mark { font-style: italic; font-size: 18px; }
.ledger-gap { display: inline-block; width: 5ch; border-bottom: 1px solid var(--ak-outline); }

.ledger-row,
.page .sheet-head { opacity: 0; transition: opacity 1.8s ease, filter 1.8s ease; }
.page.is-surfacing .ledger-row,
.page.is-surfacing .sheet-head { opacity: 1; }
.page.is-surfacing .ledger-row:nth-child(1) { transition-delay: 0.6s; }
.page.is-surfacing .ledger-row:nth-child(2) { transition-delay: 1.6s; }
.page.is-surfacing .ledger-row:nth-child(3) { transition-delay: 2.6s; }
.page.is-known .ledger-row,
.page.is-known .sheet-head { transition-delay: 0s !important; transition-duration: 0.6s; }

/* Dials and letter wheels. */
.dials { display: flex; justify-content: center; gap: 8px; }

.dial { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.dial-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ak-outline);
  border-radius: 2px;
  background: var(--ak-bg);
  color: var(--ak-ink);
}

.dial-btn svg { width: 20px; height: 20px; }

.dial-face {
  display: grid;
  place-items: center;
  width: 52px;
  height: 56px;
  border-radius: 2px;
  font-family: var(--ak-font-display);
  font-size: 34px;
  line-height: 1;
  touch-action: manipulation;
}

.dials-tackle .dial-face {
  width: 56px;
  border: 2px solid var(--ak-accent);
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  font-variant-numeric: tabular-nums;
}

.dials-padlock .dial-face {
  width: 48px;
  border: 1px solid var(--ak-outline);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  box-shadow: inset 0 10px 10px -8px #000, inset 0 -10px 10px -8px #000;
}

.scratches {
  margin: 0;
  max-width: 36ch;
  color: var(--ak-ink-muted);
  font-size: 15px;
  font-style: italic;
  text-align: center;
}

.scratches b {
  margin: 0 0.1em;
  font-family: var(--ak-font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.found {
  display: flex;
  align-items: center;
  gap: 12px;
}

.found img { height: 56px; width: auto; }

/* ---------- teaching ---------- */

.coach {
  position: fixed;
  z-index: 9;
  width: min(240px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid var(--ak-accent);
  border-radius: 2px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 18px;
  line-height: 1.3;
  box-shadow: 0 10px 24px #000;
  pointer-events: none;
}

.coach-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--ak-surface);
  border: 1px solid var(--ak-accent);
  rotate: 45deg;
}

.coach[data-side="right"] .coach-arrow { left: -8px; top: calc(50% - 7px); border-top-color: transparent; border-right-color: transparent; }
.coach[data-side="left"] .coach-arrow { right: -8px; top: calc(50% - 7px); border-bottom-color: transparent; border-left-color: transparent; }
.coach[data-side="below"] .coach-arrow { top: -8px; left: var(--arrow-x, 50%); border-bottom-color: transparent; border-right-color: transparent; }
.coach[data-side="above"] .coach-arrow { bottom: -8px; left: var(--arrow-x, 50%); border-top-color: transparent; border-left-color: transparent; }

.coach-ring {
  position: fixed;
  z-index: 9;
  border: 2px solid var(--ak-accent);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- sideways: the room on one side, the words and the strip on the other ---------- */

@media (orientation: landscape) {
  .play {
    grid-template-columns: minmax(200px, 310px) minmax(0, 1fr) 64px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "logo stage gutter"
      "side stage gutter";
    justify-content: center;
    column-gap: 14px;
    row-gap: 8px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .logo-row {
    height: calc(var(--ac-status-h, 72px) + 58px);
    padding-top: var(--ac-status-h, 72px);
    justify-content: flex-start;
  }

  /* Sideways, the night and saves line sits beside the logo, so the column below keeps its height. */
  .footline {
    position: fixed;
    top: var(--ac-status-h, 72px);
    left: calc(max(8px, env(safe-area-inset-left)) + 92px);
    width: calc(min(310px, 100vw - 120px) - 96px);
    height: 58px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    column-gap: 0;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
  }

  .logo { height: 44px; }

  .side { gap: 4px; }
  .strip { min-height: 62px; }
  .slot { min-height: 54px; }
  .caption { min-height: 0; padding: 9px 14px 8px; }
  .coach-dock { padding: 7px 12px; font-size: 18px; }

  .stage-frame {
    width: min(100cqw, 110cqh, 100dvw, 110dvh);
    height: min(100cqh, 90.6cqw, 100dvh);
  }

  /* While the first night teaches, its card stands in for the caption's first line, so nothing is squeezed. */
  .play.is-coaching .caption-line { display: none; }
  .play.is-coaching .caption:not(.has-hint) { display: none; }
  .play.is-coaching .hint-line { margin-top: 0; padding-top: 0; border-top: 0; }

  .cu-title { font-size: 27px; }

  .side { align-self: start; width: 100%; }

  .closeup { grid-row: 1 / 3; grid-column: 2 / 4; }

  /* The torn pages are reading, not a lock: they take the column beside the room, which stays whole and playable. */
  .play.is-pages .closeup { grid-column: 1; z-index: 7; }
  .play.is-pages .side,
  .play.is-pages .logo-row { visibility: hidden; }
  .play.is-pages .cu-body { width: 100%; padding: calc(var(--ac-status-h, 72px) + 4px) 0 8px; align-self: stretch; }
  .play.is-pages .cu-scrim { background: var(--ak-bg); }
  .play.is-pages .cu-title { font-size: 24px; }
  .play.is-pages .pages-sheet { width: 100%; rotate: 0deg; }
  .play.is-pages .pages-list { font-size: 17px; }
  .play.is-pages .cu-actions .act { min-height: 52px; font-size: 19px; }

  .cu-body { width: min(100%, 640px); padding-right: 72px; gap: 4px; }

  .cu-title { padding-right: 0; }

  /* Sideways close-ups: the picture, the hasp's words and the link to the clue on the left; the dials and the check on the right. */
  .cu-content.is-wide {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "piece dials"
      "example legend"
      "example note"
      "link check";
    justify-content: center;
    align-items: center;
    column-gap: 22px;
    row-gap: 6px;
  }

  .cu-content.is-wide > .cu-controls,
  .cu-content.is-wide .cu-actions { display: contents; }

  .cu-content.is-wide > * { justify-self: center; }
  .cu-content.is-wide .cu-piece,
  .cu-content.is-wide .cu-target,
  .cu-content.is-wide > .cu-lantern { grid-area: piece; }
  .cu-content.is-wide .cu-piece { align-self: start; height: min(20dvh, 80px); }
  .cu-content.is-wide .stamp { grid-area: piece; align-self: end; max-width: 170px; }
  .cu-content.is-wide .dial-key { display: contents; }
  .cu-content.is-wide .dial-legend { grid-area: legend; }
  .cu-content.is-wide .dial-example { grid-area: example; max-width: 170px; align-self: start; }
  .cu-content.is-wide .act.link { grid-area: link; justify-self: center; }
  .cu-content.is-wide .dials,
  .cu-content.is-wide .found,
  .cu-content.is-wide .cu-controls > .cu-note { grid-area: dials; justify-self: center; }
  .cu-content.is-wide .check-note { grid-area: note; justify-self: center; max-width: 30ch; }
  .cu-content.is-wide .act:not(.link) { grid-area: check; justify-self: center; }
  .cu-content.is-wide .scratches { grid-area: scratch; justify-self: center; }
  .cu-content.is-wide .dial-btn,
  .cu-content.is-stack .dial-btn { height: 44px; }
  .cu-content.is-wide .dial-face,
  .cu-content.is-stack .dial-face { height: 50px; }

  /* The padlock sideways: no picture; the ledger's lines run across above the wheels. */
  .cu-content.is-stack { gap: 6px; }
  .cu-content.is-stack > .cu-piece { display: none; }
  .cu-content.is-stack .cu-controls { gap: 6px; }
  .cu-content.is-stack .ledger-note { max-width: 100%; padding: 4px 10px; }
  .cu-content.is-stack .ledger-note:has(.ledger-note-rows) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
  .cu-content.is-stack .ledger-note-rows { display: contents; font-size: 16px; }
  .cu-content.is-stack .ledger-note-rows li { font-size: 16px; }
  .cu-content.is-stack .scratches { font-size: 14px; }
  .cu-content.is-stack .dials { order: -1; }

  .act.link {
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--ak-ink-muted);
    font-size: 19px;
  }

  .dial-btn { height: 48px; }
  .stamp { font-size: 16px; }

  .sheet { padding: 10px 12px 12px; }
  .sheet-head { margin-bottom: 4px; }
  .sheet td { padding: 4px 6px; }
  .pin { font-size: clamp(14px, 3.6cqw, 17px); }

  .cu-piece { height: min(26dvh, 150px); }


  .cu-lantern { height: min(55dvh, 220px); }
}

/* ---------- motion, only for those who want it ---------- */

@keyframes lap-fade {
  0% { opacity: 0; }
  30% { opacity: 0.6; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes lap-ring {
    0% { opacity: 0.7; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.5); }
  }

  @keyframes gutter {
    0% { opacity: 1; }
    40% { opacity: 0.93; }
    70% { opacity: 0.98; }
    100% { opacity: 0.9; }
  }

  @keyframes shiver {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(1px); }
  }

  @keyframes sway {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-4deg); }
    55% { transform: rotate(3deg); }
    80% { transform: rotate(-1deg); }
  }

  @keyframes settle {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  @keyframes ring-breathe {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.08); opacity: 0.55; }
  }

  :root:not(.ac-still) .stage.is-lapping .lap,
  :root:not(.ac-still) .stage.is-lapping .lap::after { animation-name: lap-ring; }
  :root:not(.ac-still) .stage:not(.is-lantern-hook) .gloom { animation: gutter 5s ease-in-out infinite alternate; }
  :root:not(.ac-still) .is-shiver { animation: shiver 0.8s ease-in-out; }
  :root:not(.ac-still) .is-sway { animation: sway 1.6s ease-in-out; }
  :root:not(.ac-still) .is-settling { animation: settle 1.1s ease-out both; }
  :root:not(.ac-still) .coach-ring { animation: ring-breathe 2.4s ease-in-out infinite; }
  :root:not(.ac-still) .aim::before { animation: ring-breathe 2.4s ease-in-out infinite; }
  :root:not(.ac-still) .page .ledger-row { filter: blur(3px); }
  :root:not(.ac-still) .page.is-surfacing .ledger-row { filter: blur(0); }

  :root:not(.ac-still) .stage { transition: transform 8s cubic-bezier(0.45, 0, 0.2, 1), filter 7s ease; }
  :root:not(.ac-still) .stage-wrap.is-away .stage { transform: scale(0.4); filter: brightness(0.7); }
  /* A new night starts at full size: the room is back the moment the closing page is put away. */
  :root .stage-wrap.is-snap .stage { transition: none; }
}

/* ---------- the opening letter ----------
   start.js draws the case file's opening sheet. Here it gets the candle's warmth: a lit sheet with full-strength
   ink, while the boathouse around it stays dark. The extra element selectors outrank start.js's own rules. */

html body #activity-start.site-shriversify .ak-sheet {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, color-mix(in srgb, var(--ak-accent) 24%, var(--ak-surface)) 0, transparent 80%),
    color-mix(in srgb, var(--ak-accent) 7%, var(--ak-surface));
  border-color: color-mix(in srgb, var(--ak-accent) 35%, var(--ak-outline));
  box-shadow: 0 0 0 1px #000, 0 24px 60px #000, 0 0 90px -20px color-mix(in srgb, var(--ak-accent) 30%, transparent);
  color: var(--ak-ink);
}

html body #activity-start.site-shriversify .ak-tagline,
html body #activity-start.site-shriversify .ak-badge,
html body #activity-start.site-shriversify .ak-label,
html body #activity-start.site-shriversify .ak-body,
html body #activity-start.site-shriversify .ak-controls,
html body #activity-start.site-shriversify .ak-first { color: var(--ak-ink); }

html body #activity-start.site-shriversify .ak-scene-lines {
  padding: 18px 20px;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ak-accent) 9%, var(--ak-surface)) 0, color-mix(in srgb, var(--ak-surface) 85%, transparent) 60%, transparent 100%);
}

/* A short upright phone: the lock's own controls need the room more than its picture does. Last in the
   file so it wins over the base close-up rules above. */
@media (orientation: portrait) and (max-height: 700px) {
  .cu-content.is-wide > .cu-piece,
  .cu-content.is-stack > .cu-piece { display: none; }
  .cu-body,
  .cu-content,
  .cu-controls { gap: 4px; }
  .cu-head .tag { min-height: 48px; }
  .stamp { font-size: 15px; }
  .check-note { font-size: 16px; }
  .dial-example { font-size: 14px; }
  .dials .dial-btn { height: 44px; }
  .dials .dial-face { height: 48px; }
  .ledger-note { max-width: 100%; padding: 4px 10px; }
  .ledger-note:has(.ledger-note-rows) .ledger-note-head { display: none; }
  .ledger-note-rows { display: flex; flex-wrap: wrap; column-gap: 14px; font-size: 16px; }
  .scratches { font-size: 14px; }
}

/* ---------- the closing page ----------
   The extra element selectors outrank chrome.js's own rules, as for the opening letter. The story ends on
   its dry line; the note under it (the case file, the run) is set apart as a footnote. */

html body #activity-chrome-ending.site-shriversify .ac-line:last-child:not(:first-child) {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--ak-outline);
  color: var(--ak-ink);
  font-size: 16px;
  font-style: normal;
}

/* Centred when it fits, but a page taller than the screen starts at its top and scrolls, either way up. */
html body #activity-chrome-ending.site-shriversify { justify-content: flex-start; }
html body #activity-chrome-ending.site-shriversify .ac-card { flex: none; margin: auto 0; }

/* Sideways: the page lies on its side in two columns, words left and the seal and the way on right. It
   starts at the top and scrolls if it must, and the room behind goes dark rather than showing in slivers. */
@media (orientation: landscape) {
  html body #activity-chrome-ending.site-shriversify {
    padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--ak-bg) 94%, transparent);
  }

  html body #activity-chrome-ending.site-shriversify .ac-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 200px);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "number  work"
      "verdict work"
      "lines   work"
      "lines   actions";
    column-gap: 24px;
    width: min(100%, 820px);
    margin: auto 0;
    padding: 18px 22px 16px;
    text-align: left;
  }

  html body #activity-chrome-ending.site-shriversify .ac-number { grid-area: number; }
  html body #activity-chrome-ending.site-shriversify .ac-verdict { grid-area: verdict; margin-bottom: 8px; padding-bottom: 8px; font-size: 24px; }
  html body #activity-chrome-ending.site-shriversify .ac-lines { grid-area: lines; font-size: 16px; line-height: 1.4; }
  html body #activity-chrome-ending.site-shriversify .ac-work { grid-area: work; align-self: center; width: 100%; margin: 0; }
  html body #activity-chrome-ending.site-shriversify .ac-actions { grid-area: actions; flex-direction: column; align-items: center; margin-top: 10px; }
  html body #activity-chrome-ending.site-shriversify .ac-actions button { min-height: 48px; font-size: 18px; text-align: center; }
}