:root {
  --pink: var(--ak-accent-2);
  --hair: 1.5px;
  --fs: clamp(15px, 4.1vw, 18px);
  --cap: 11px;
  --tap: 56px;
  --slow: cubic-bezier(0.3, 0.1, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  height: 100dvh;
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

/* Sky layers: a veil that thins the picture to bare lines at the end, then the floor lines on top. */
.veil,
.horizon {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.veil {
  z-index: 1;
  background: var(--ak-bg);
  opacity: 0;
  transition: opacity 1.6s var(--slow);
}

.horizon { z-index: 2; }

.horizon line {
  stroke: var(--ak-ink);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity 1.6s var(--slow);
}

body.st-ended .veil { opacity: 0.8; }
body.st-ended .horizon line { opacity: 0.18; }

/* Play screen, upright: a slim head, the cards in one roomy scrolling column, the controls below. */
.stage {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 600px;
  height: 100dvh;
  margin: 0 auto;
  padding:
    max(8px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rail head ."
    "board board board"
    "foot foot foot";
  gap: 6px 8px;
  touch-action: manipulation;
}

.stage[hidden] { display: none; }

.rail {
  grid-area: rail;
  align-self: start;
}

.mute {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
}

.mute svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mute .mute-off { display: none; }
.mute.is-muted .mute-off { display: inline; }
.mute.is-muted .mute-on { display: none; }

.head {
  grid-area: head;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
}

.logo {
  display: block;
  height: 44px;
  width: auto;
}

/* The cards. */
.board {
  grid-area: board;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 26px;
  padding: 20px 2px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ak-ink-muted) transparent;
}

.case {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "l0"
    "l1"
    "rule"
    "so"
    "marks"
    "said"
    "why";
  padding: 18px 18px 18px;
  border: 6px solid transparent;
  border-image: url("./art/statement-card.png") 34 / 6px stretch;
  font-size: var(--fs);
  line-height: 1.4;
  transition: opacity 1.4s var(--slow);
}

.line {
  margin: 0;
  min-width: 0;
}

.line0 { grid-area: l0; }

.line1 {
  grid-area: l1;
  margin-top: 4px;
}

.so {
  grid-area: so;
  font-weight: 600;
}

.rule {
  grid-area: rule;
  display: block;
  width: 30%;
  height: 0;
  margin: 12px 0 10px;
  border-top: 1px solid var(--ak-ink-muted);
}

/* Number and pet sit on the frame's top line, verdict on its bottom line, like labels on a drawing. */
.num,
.verdict,
.case-tag {
  position: absolute;
  background: var(--ak-bg);
}

.num,
.verdict {
  padding: 0 6px;
  font-size: var(--cap);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.num {
  top: -8px;
  left: 14px;
}

.verdict {
  bottom: -8px;
  right: 16px;
  display: none;
  color: var(--ak-ink);
}

.case-tag {
  top: -21px;
  right: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 6px;
}

.pet {
  --s: 0.22px;
  display: block;
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  background: url("./art/pet-glyphs.png") no-repeat;
  background-size: calc(384 * var(--s)) calc(333 * var(--s));
  background-position: calc(var(--x) * var(--s) * -1) calc(var(--y) * var(--s) * -1);
}

/* Each pet's own box on the sheet, so no neighbour peeks in. */
.pet[data-pet="cat"] { --x: 1; --y: 0; --w: 106; --h: 148; }
.pet[data-pet="dog"] { --x: 119; --y: 10; --w: 140; --h: 139; }
.pet[data-pet="fish"] { --x: 260; --y: 30; --w: 124; --h: 114; }
.pet[data-pet="parrot"] { --x: 0; --y: 173; --w: 109; --h: 160; }
.pet[data-pet="hamster"] { --x: 127; --y: 209; --w: 114; --h: 108; }
.pet[data-pet="rabbit"] { --x: 250; --y: 165; --w: 128; --h: 159; }

/* The two answers: shape and plain words on one wide target each. */
.marks {
  grid-area: marks;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: var(--tap);
  padding: 6px 14px 6px 10px;
  border: var(--hair) solid var(--pink);
  border-radius: 999px;
  background: transparent;
  color: var(--ak-ink);
  text-align: left;
}

.mark svg {
  flex: none;
  width: 30px;
  height: 30px;
  overflow: visible;
  fill: none;
  color: var(--pink);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.mark .dot {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.mark-label {
  min-width: 0;
  font-size: clamp(13px, 3.7vw, 16px);
  font-weight: 600;
  line-height: 1.15;
}

.mark.is-chosen .dot { opacity: 1; }
.mark.is-chosen svg { stroke-width: 1.9; }

.mark.is-other {
  border-style: dashed;
  color: var(--ak-ink-muted);
}

.mark.is-other svg { opacity: 0.5; }
.mark:disabled { cursor: default; }

/* After the check: what you said, and the reason, on every card. */
.said {
  grid-area: said;
  display: none;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: var(--cap);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ak-ink);
}

.said svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 1.8;
}

.said .dot { fill: var(--ak-ink); stroke: none; }

.why {
  grid-area: why;
  display: none;
  margin: 10px 0 0;
  color: var(--ak-ink);
}

.why::before {
  content: "A way out";
  display: block;
  margin-bottom: 3px;
  font-size: var(--cap);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.case.is-valid .why::before { content: "Why it follows"; }

/* Pointers: an unmarked card after an early check, the first move, a wrong line. */
.case.is-missing {
  outline: 1px dashed var(--ak-ink);
  outline-offset: 4px;
}

.case.is-invite .marks::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: var(--hair) solid var(--pink);
  border-radius: 999px;
  pointer-events: none;
}

.is-broken {
  text-decoration: underline wavy var(--ak-ink-muted) 1px;
  text-underline-offset: 4px;
}

/* Foot: where you are, the tip, the one check. */
.foot {
  grid-area: foot;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "status status"
    "tip check";
  gap: 6px 10px;
  padding-top: 4px;
}

.foot[hidden] { display: none; }

.status {
  grid-area: status;
  min-width: 0;
  margin: 0;
  font-size: var(--cap);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.status.is-warning {
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ak-ink);
}

.tip-toggle,
.check,
.tip-close,
.got-it,
.end-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 20px;
  border: var(--hair) solid var(--pink);
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak-ink);
}

.tip-toggle { grid-area: tip; }

.tip-toggle svg,
.check svg {
  flex: none;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tip-toggle svg {
  width: 20px;
  height: 20px;
}

.tip-toggle[aria-expanded="true"] { border-style: dashed; }

.check {
  grid-area: check;
  border-style: dashed;
  color: var(--ak-ink-muted);
}

.check svg {
  width: 22px;
  height: 11px;
}

.check.is-ready {
  border-style: solid;
  color: var(--ak-ink);
}

/* The step-along chevron for the sideways strip. */
.more { display: none; }

/* The tip, kept one tap away; it stays until closed. */
.tip {
  grid-area: board;
  z-index: 6;
  align-self: end;
  display: grid;
  gap: 10px;
  margin-bottom: 6px;
  padding: 18px 20px;
  background: var(--ak-bg);
  border: var(--hair) solid var(--ak-ink-muted);
}

.tip[hidden] { display: none; }

.tip-label {
  margin: 0;
  font-size: var(--cap);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.tip-text {
  margin: 0;
  max-width: 48ch;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ak-ink);
}

.tip-close {
  justify-self: start;
  min-width: 140px;
}

/* Teaching: one worked step on a solid backing, waiting for Got it. */
.teach {
  grid-area: board;
  z-index: 5;
  align-self: center;
  display: grid;
  gap: 22px;
  padding: 26px 20px 20px;
  background: var(--ak-bg);
  border: var(--hair) solid var(--ak-ink-muted);
}

.teach[hidden] { display: none; }

.teach-card {
  --fs: 18px;
}

.teach-card .mark { cursor: default; }
.teach-card .mark-label { font-size: 15px; }

.teach-words {
  display: grid;
  gap: 12px;
}

.teach-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ak-ink);
}

.teach-text strong { font-weight: 600; }

.got-it {
  justify-self: start;
  min-width: 200px;
  font-size: 18px;
  letter-spacing: 0.18em;
}

/* Endings: the sky goes to bare lines, one sentence stays, and every card keeps its answer and its reason. */
.ending {
  grid-area: foot;
  display: grid;
  gap: 6px;
  padding: 6px 0 0;
  border-top: 1px solid var(--ak-ink-muted);
}

.ending[hidden] { display: none; }

.end-line {
  margin: 4px 0 0;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.2;
  color: var(--ak-ink);
}

.end-more {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ak-ink);
}

.end-more:empty { display: none; }

.end-tally {
  margin: 2px 0 0;
  font-size: var(--cap);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.end-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.end-btn {
  flex: 1 1 0;
  padding: 0 12px;
}

body.st-revealing .check,
body.st-revealing .tip-toggle { visibility: hidden; }

body.st-revealing .verdict,
body.st-ended .verdict { display: block; }

body.st-ended .marks { display: none; }
body.st-ended .said { display: flex; }
body.st-ended .why { display: block; }
body.st-ended .case.is-right :is(.line0, .line1) { color: var(--ak-ink-muted); }

/* Sideways: mute rail, cards spread in a strip across the width, the controls and status down the right. */
@media (orientation: landscape) {
  :root {
    --fs: clamp(14px, min(3.9dvh, 1.9dvw), 18px);
  }

  body { background-position: center center; }

  .stage {
    max-width: 1320px;
    grid-template-columns: 48px minmax(0, 1fr) clamp(196px, 25%, 300px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rail board head"
      ". board ."
      ". board foot";
    column-gap: 14px;
  }

  .head {
    justify-content: flex-start;
    padding-right: 56px;
  }

  .logo { height: clamp(44px, 13dvh, 96px); }

  .board {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-auto-columns: minmax(250px, calc((100% - 40px) / 3));
    align-content: start;
    align-items: start;
    gap: 20px;
    padding: 24px 4px 14px;
    overflow: auto;
    scroll-snap-type: x proximity;
  }

  .case {
    align-content: start;
    scroll-snap-align: start;
  }

  .marks { grid-template-columns: 1fr; }

  .board.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }

  .more:not([hidden]) {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    z-index: 4;
    width: 52px;
    height: 52px;
    margin-right: -27px;
    padding: 0;
    display: grid;
    place-items: center;
    border: var(--hair) solid var(--pink);
    border-radius: 50%;
    background: var(--ak-bg);
  }

  .more svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--pink);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .more.is-back svg { transform: scaleX(-1); }

  .foot {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "status"
      "tip"
      "check";
    gap: 10px;
  }

  .check { padding: 8px 14px; letter-spacing: 0.14em; }

  .tip {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
  }

  .teach {
    grid-column: 2 / 4;
    grid-row: 2 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 22px 18px 16px;
  }

  .teach-card .marks { grid-template-columns: 1fr; }

  .ending {
    grid-row: 2 / -1;
    align-self: end;
    max-height: 100%;
    overflow-y: auto;
  }

  .end-line { font-size: clamp(20px, 2.4vw, 30px); }
  .end-more { font-size: 13px; }
  .end-actions { flex-direction: column; }
  .end-btn { flex: none; }
}

/* Sideways with room to spare (desktop, tablet): all six side by side in rows, no scrolling. */
@media (orientation: landscape) and (min-height: 640px) {
  .board {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-columns: auto;
    align-content: center;
    gap: 34px 22px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.st-ended .board { align-content: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .mark.is-chosen .ring,
  .mark.is-chosen .slash {
    stroke-dasharray: 1 1;
    animation: draw-line 760ms var(--slow) both;
  }

  .mark.is-chosen .slash { animation-delay: 240ms; }
  .mark.is-chosen .dot { animation: dot-settle 900ms var(--slow) 260ms both; }

  .case.is-invite .marks::after { animation: invite 2.6s ease-in-out infinite; }

  .check.is-ready svg { animation: nudge 2.4s ease-in-out infinite; }

  body.st-solving .horizon line {
    animation: row-glow 1.3s var(--slow) both;
    animation-delay: calc(var(--row) * 95ms);
  }

  body.st-revealing .case,
  body.st-ended .case {
    animation: settle-in 700ms var(--slow) both;
    animation-delay: calc(var(--i) * 90ms);
  }

  body.st-ended .ending,
  body.st-ended :is(.said, .why) { animation: fade-up 1.2s var(--slow) both; }

  .teach:not([hidden]),
  .tip:not([hidden]) { animation: fade-up 600ms var(--slow) both; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

@keyframes draw-line {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes dot-settle {
  from { opacity: 0; transform: translate(-2px, -3px); }
  50% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@keyframes invite {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.03); }
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes row-glow {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0.18; }
}

@keyframes settle-in {
  from { transform: translateY(-3px); }
  to { transform: none; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Start screen (start.js draws it). Line-drawn sections with no emoji badges, and the sticky Play
   rides on its own solid strip of sky so it never sits on top of the copy. Tripled id beats start.js. */
#activity-start#activity-start#activity-start .ak-badge { display: none; }

#activity-start#activity-start#activity-start .ak-go,
#activity-start#activity-start#activity-start .ak-go:active {
  bottom: 18px;
  margin-top: 40px;
  box-shadow:
    0 0 0 18px var(--ak-bg),
    -50vw 0 0 18px var(--ak-bg),
    50vw 0 0 18px var(--ak-bg);
}