/* Squiggle Zoo: one scene. A navy zoo wall after closing, a taped sheet of paper in the middle,
   a caption strip under it that says what just happened, and paper chips along the bottom edge. */

:root {
  --sz-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --sz-wobble-2: 15px 255px 15px 225px / 225px 15px 255px 15px;
  --sz-tape: color-mix(in srgb, var(--ak-accent-2) 55%, transparent);
  --sz-wall: linear-gradient(color-mix(in srgb, var(--ak-bg) 89%, transparent), color-mix(in srgb, var(--ak-bg) 89%, transparent)), url("./art/zoo-wall.jpg");
  --sz-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sz-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sz-chip-w: 40px;
  --sz-blob-w: 32px;
}

/* The kit's own values, copied at zero specificity, so the page reads right while kit.css is still on
   its way (its font import can stall on a slow network). The kit's :root always wins once it lands. */
:where(:root) {
  --ak-font-display: "Permanent Marker", cursive;
  --ak-font-body: "Karla", system-ui;
  --ak-title-weight: 400;
  --ak-bg: #0F1B33;
  --ak-ink: #FFFFFF;
  --ak-ink-muted: #A8B4CC;
  --ak-accent: #FF8A3D;
  --ak-btn-fill: #FFFFFF;
  --ak-btn-ink: #0F1B33;
  --ak-btn-hover: #FF8A3D;
  --ak-btn-active: #E0712A;
  --ak-choice-bg: #182748;
  --ak-choice-ink: #FFFFFF;
  --ak-choice-border: #35466E;
  --ak-choice-selected-bg: #FF8A3D;
  --ak-choice-selected-ink: #0F1B33;
  --ak-choice-selected-border: #FF8A3D;
  --ak-focus: #FF8A3D;
  --ak-link: #FFB07A;
  --ak-radius: 10px;
  --ak-accent-2: #FFFFFF;
  --ak-surface: #182748;
  --ak-outline: #35466E;
  --ak-shadow: 0 3px 0 #06101F;
  --ak-glow: #FF8A3D;
  --ak-bg-art: linear-gradient(#FFFFFF0A 1px, transparent 1px), linear-gradient(90deg, #FFFFFF0A 1px, transparent 1px);
  --ak-bg-size: 40px 40px;
}

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

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

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--sz-wall));
  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; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 3px; }

/* ---------- the scene ---------- */

.sz-play {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "head" "stage" "caption" "band" "kept";
  row-gap: 8px;
  padding:
    calc(var(--ac-status-h, 72px) + 2px)
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.sz-play.is-waiting > * { visibility: hidden; }

/* ---------- the top line: logo, the chalk question, the ring and the keeper ---------- */

.sz-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}
.sz-logo { height: 40px; width: auto; flex: none; }
.sz-ask { flex: 1 1 auto; min-width: 0; }
.sz-chalk {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(18px, 4.8vw, 24px);
  line-height: 1.1;
  color: var(--ak-ink);
  rotate: -1.5deg;
}
.sz-curves {
  margin: 2px 0 0;
  font-family: var(--ak-font-display);
  font-size: 15px;
  line-height: 1.1;
  color: var(--ak-accent);
  rotate: -1.5deg;
}
.sz-kept { margin: 0; font-size: 12px; line-height: 1.2; color: var(--ak-ink-muted); }
.sz-kept-head { display: none; margin-top: 3px; }
.sz-kept-foot { grid-area: kept; margin-top: -4px; text-align: center; }

.sz-clock { position: relative; display: flex; align-items: flex-end; gap: 2px; flex: none; }
.sz-keeper { height: 56px; width: auto; transform-origin: 50% 100%; pointer-events: none; }
.sz-ring {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.sz-ring svg { display: block; width: 100%; height: 100%; rotate: -90deg; }
.sz-ring-track { fill: color-mix(in srgb, var(--ak-bg) 80%, transparent); stroke: color-mix(in srgb, var(--ak-ink) 22%, transparent); stroke-width: 3; }
.sz-ring-arc { fill: none; stroke: var(--ak-accent); stroke-width: 3.5; stroke-linecap: round; }
.sz-ring-word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ak-font-display);
  font-size: 12px;
  color: var(--ak-ink);
}
.sz-ring:disabled { cursor: default; }
.sz-ring:disabled .sz-ring-word { color: var(--ak-ink-muted); }

/* ---------- the sheet of paper, the biggest thing on screen ---------- */

.sz-stage {
  grid-area: stage;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  container-type: size;
}
.sz-sheet,
.sz-wall { grid-area: 1 / 1; }

.sz-sheet {
  position: relative;
  width: min(100cqw, 100cqh * 340 / 384);
  aspect-ratio: 340 / 384;
  background: url("./art/paper-sheet.png") center / 100% 100% no-repeat;
}
/* The paper's own area inside the picture, measured off the painted sheet. */
.sz-draw {
  position: absolute;
  left: 9.12%;
  top: 7.55%;
  width: 81.76%;
  height: 85.42%;
}
.sz-draw canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#inkLayer { touch-action: none; cursor: crosshair; border-radius: 4px; }
#inkLayer:focus-visible { outline-offset: 2px; }
.sz-cursor {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid var(--ak-accent);
  border-radius: 50%;
  pointer-events: none;
}
.sz-cursor::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--ak-btn-ink);
  opacity: 0;
}
.sz-cursor.is-down::after { opacity: 1; }

.sz-nametape {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: min(86%, 384px);
  aspect-ratio: 384 / 84;
  translate: -50% 0;
  display: grid;
  place-items: center;
  padding: 0 9%;
  background: url("./art/name-tape.png") center / 100% 100% no-repeat;
  rotate: -1.5deg;
}
.sz-nametape span {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--ak-font-display);
  font-size: clamp(16px, 5.4cqw, 28px);
  line-height: 1;
  color: var(--ak-btn-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- the caption strip: one plain line that changes with every move ---------- */

.sz-caption {
  grid-area: caption;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 8px 6px 16px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--sz-wobble);
  background: var(--ak-surface);
  rotate: -0.6deg;
}
.sz-caption::before,
.sz-caption::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 42px;
  height: 16px;
  background: var(--sz-tape);
  pointer-events: none;
}
.sz-caption::before { left: -10px; rotate: -24deg; }
.sz-caption::after { right: -10px; rotate: 20deg; }
.sz-caption-text {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(18px, 4.6vw, 21px);
  line-height: 1.22;
  color: var(--ak-ink);
}
.sz-caption[data-kind="guide"] { border-color: var(--ak-accent); border-width: 3px; }
.sz-caption[data-kind="guide"] .sz-caption-text { font-size: clamp(18px, 4.8vw, 22px); }
.sz-caption[data-kind="oops"] .sz-caption-text { text-decoration: underline wavy var(--ak-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sz-caption[data-kind="final"] { border-color: var(--ak-accent); }
.sz-caption[data-kind="final"] .sz-caption-text { font-size: clamp(20px, 5.2vw, 26px); text-align: center; }

.sz-stuck {
  flex: none;
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--ak-btn-ink);
  border-radius: var(--sz-wobble-2);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 17px;
  rotate: 3deg;
  cursor: pointer;
}
.sz-stuck:active { background: var(--ak-btn-active); }

/* ---------- the band along the bottom edge: tools, then the name, then next ---------- */

.sz-band {
  grid-area: band;
  display: grid;
  min-height: 112px;
}
.sz-band > * { grid-area: 1 / 1; }

.sz-tools { display: grid; gap: 4px; align-content: end; }
.sz-chips,
.sz-colours { display: flex; justify-content: center; }
.sz-chips { gap: 4px; }
.sz-colours { gap: 0; }

.sz-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 64px;
  min-height: 48px;
  padding: 2px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.sz-chip-art {
  display: block;
  width: var(--sz-chip-w);
  height: calc(var(--sz-chip-w) * 85 / 74);
  background-image: url("./art/tool-chips.png");
  background-size: calc(var(--sz-chip-w) * 384 / 74) calc(var(--sz-chip-w) * 149 / 74);
  background-position: calc(var(--x, 0) * var(--sz-chip-w) / -74) 0;
  background-repeat: no-repeat;
}
.sz-chip-size .sz-chip-art { background: none; rotate: -4deg; }
.sz-chip-size .sz-chip-art svg { display: block; width: 100%; height: 100%; }
.sz-chip-word {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ak-ink);
  white-space: nowrap;
}
.sz-chip[aria-pressed="true"] .sz-chip-art { translate: 0 -4px; }
.sz-chip[aria-pressed="true"]::after,
.sz-blob[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 30px;
  height: 4px;
  translate: -50% 0;
  border-radius: var(--sz-wobble);
  background: var(--ak-accent);
}
.sz-chip.is-idle .sz-chip-art { opacity: 0.38; filter: grayscale(1); }
.sz-chip.is-idle .sz-chip-word { color: var(--ak-ink-muted); }

.sz-blob {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.sz-blob-art {
  display: block;
  width: var(--sz-blob-w);
  height: calc(var(--sz-blob-w) * 65 / 48);
  background-image: url("./art/tool-chips.png");
  background-size: calc(var(--sz-blob-w) * 384 / 48) calc(var(--sz-blob-w) * 149 / 48);
  background-position: calc(var(--x, 0) * var(--sz-blob-w) / -48) calc(var(--sz-blob-w) * 84 / -48);
  background-repeat: no-repeat;
}
.sz-blob[aria-pressed="true"] .sz-blob-art { translate: 0 -5px; scale: 1.12; }
.sz-blob[aria-pressed="true"]::before {
  content: '';
  position: absolute;
  inset: 1px 2px 5px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--sz-wobble);
}
.sz-blob[aria-pressed="true"]::after { width: 22px; bottom: 0; }

.sz-band.is-folded .sz-tools { pointer-events: none; }
.sz-band.is-folded .sz-chip,
.sz-band.is-folded .sz-blob { opacity: 0; transform: translateY(70%) scaleY(0.1); }

.sz-name { display: grid; gap: 6px; align-content: center; }
.sz-name-label { font-family: var(--ak-font-display); font-size: 17px; color: var(--ak-ink); }
.sz-name-row { display: flex; gap: 8px; align-items: center; }
.sz-name-row input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 384px;
  height: 56px;
  padding: 0 24px;
  border: 0;
  background: url("./art/name-tape.png") center / 100% 100% no-repeat;
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 20px;
  rotate: -1deg;
  user-select: text;
  -webkit-user-select: text;
}
.sz-name-row input::placeholder { color: color-mix(in srgb, var(--ak-btn-ink) 55%, transparent); }
.sz-name-row input:focus-visible { outline-offset: 0; }
.sz-name-go,
.sz-next-go {
  flex: none;
  min-height: 52px;
  padding: 0 20px;
  border: 2px solid var(--ak-btn-ink);
  border-radius: var(--sz-wobble);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 20px;
  rotate: 2deg;
  cursor: pointer;
}
.sz-name-go:active,
.sz-next-go:active { background: var(--ak-btn-active); }
.sz-next { display: grid; place-items: center; }
.sz-next-go { min-height: 60px; padding: 0 32px; font-size: 23px; rotate: -1.5deg; }

@media (hover: hover) {
  .sz-stuck:hover,
  .sz-name-go:hover,
  .sz-next-go:hover { background: var(--ak-btn-hover); }
  .sz-chip:hover .sz-chip-art,
  .sz-blob:hover .sz-blob-art { translate: 0 -3px; }
  .sz-ring:not(:disabled):hover .sz-ring-track { stroke: color-mix(in srgb, var(--ak-ink) 50%, transparent); }
}

/* ---------- name ideas: one tap to put one on the tape ---------- */

.sz-ideas { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.sz-idea {
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--ak-choice-border);
  border-radius: var(--sz-wobble-2);
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  font-family: var(--ak-font-display);
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
}
.sz-idea:nth-child(odd) { rotate: -1.5deg; }
.sz-idea:nth-child(even) { rotate: 1.2deg; }
.sz-idea:active { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }
@media (hover: hover) {
  .sz-idea:hover { border-color: var(--ak-accent); }
}

/* ---------- the close-up: the creature just named, big, with its own line ---------- */

.sz-play[data-phase="named"] .sz-stage::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: radial-gradient(closest-side, transparent 72%, color-mix(in srgb, var(--ak-bg) 75%, transparent));
  pointer-events: none;
}
.sz-play[data-phase="named"] .sz-sheet { z-index: 1; scale: 1.04; }
.sz-caption[data-kind="praise"] { border-color: var(--ak-accent); border-width: 3px; }
.sz-caption[data-kind="praise"] .sz-caption-text { font-size: clamp(19px, 5vw, 23px); }

/* ---------- the guide: a pulsing ring and an arrow, never over the target ---------- */

.sz-guide { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.sz-guide-ring {
  position: absolute;
  border: 4px solid var(--ak-accent);
  border-radius: var(--sz-wobble);
}
.sz-guide-ring.is-round { border-radius: 50%; }
.sz-guide-arrow {
  position: absolute;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sz-guide-arrow[data-point="up"] { rotate: 180deg; }

/* ---------- the zoo wall at the end: five prints pinned in a row ---------- */

.sz-wall {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: center;
  gap: 18px 10px;
  padding: 10px 4px;
}
.sz-wall .sz-print { grid-column: span 2; }
/* Small prints let a long name take two lines on its tape rather than lose a word. */
.sz-wall .sz-tape-label,
#activity-start .sz-reel-print .sz-tape-label { padding: 6% 9%; font-size: 12px; line-height: 1.05; white-space: normal; text-overflow: clip; }
.sz-wall .sz-print:nth-child(4) { grid-column: 2 / span 2; }
.sz-wall .sz-print:nth-child(5) { grid-column: 4 / span 2; }
.sz-print { position: relative; margin: 0; rotate: var(--tilt, 0deg); }
.sz-print::before {
  content: '';
  position: absolute;
  top: 3%;
  left: 50%;
  z-index: 2;
  width: 12px;
  height: 12px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--ak-accent);
  box-shadow: inset -2px -2px 0 color-mix(in srgb, var(--ak-btn-ink) 30%, transparent);
}
.sz-print-paper {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 340 / 384;
  background: url("./art/paper-sheet.png") center / 100% 100% no-repeat;
}
.sz-print-art {
  position: absolute;
  left: 9.12%;
  top: 7.55%;
  width: 81.76%;
  height: 85.42%;
}
.sz-tape-label {
  display: block;
  width: 104%;
  margin: -14% -2% 0;
  position: relative;
  padding: 7% 12%;
  background: url("./art/name-tape.png") center / 100% 100% no-repeat;
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sz-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.sz-burst span {
  position: absolute;
  width: 16px;
  height: 6px;
  margin: -3px 0 0 -8px;
  border-radius: var(--sz-wobble);
  background: var(--c);
  opacity: 0;
}

/* ---------- the in-page sheet: Clear, the reel viewer, letting a creature go ---------- */

.sz-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ak-bg) 72%, transparent);
}
.sz-modal-panel {
  position: relative;
  width: min(100%, 420px);
  max-height: 100%;
  overflow-y: auto;
  padding: 28px 22px 18px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--sz-wobble);
  background: var(--ak-surface);
  color: var(--ak-ink);
  rotate: 1.2deg;
}
.sz-modal-panel::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 92px;
  height: 22px;
  translate: -50% 0;
  background: var(--sz-tape);
  rotate: -3deg;
}
.sz-modal-title { margin: 0 0 8px; font-family: var(--ak-font-display); font-size: 26px; font-weight: 400; line-height: 1.1; }
.sz-modal-text { margin: 0 0 14px; font-size: 17px; line-height: 1.4; }
.sz-modal-art { margin: 6px auto 12px; width: min(100%, 300px, 42dvh); }
.sz-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.sz-modal-btn {
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--sz-wobble);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 18px;
  cursor: pointer;
}
.sz-modal-btn.is-danger { border-color: var(--ak-btn-ink); background: var(--ak-btn-fill); color: var(--ak-btn-ink); rotate: -1.5deg; }
.sz-modal-btn:active { background: var(--ak-btn-active); color: var(--ak-btn-ink); }
@media (hover: hover) {
  .sz-modal-btn:hover { background: var(--ak-btn-hover); color: var(--ak-btn-ink); }
}

/* ---------- the opening: the keeper's three lines as notes taped to the page ---------- */

#activity-start.site-inspicacity.is-scene .ak-head { rotate: -3deg; }
#activity-start.site-inspicacity.is-scene .ak-scene-lines {
  gap: 20px;
  width: min(100%, 460px);
  max-width: none;
  padding: 10px 6px 0;
}
#activity-start.site-inspicacity.is-scene .ak-scene-line {
  position: relative;
  padding: 18px 18px 12px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--sz-wobble);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: clamp(19px, 4.8vw, 24px);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
}
#activity-start.site-inspicacity.is-scene .ak-scene-line::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 78px;
  height: 20px;
  translate: -50% 0;
  background: var(--sz-tape);
  rotate: -4deg;
}
#activity-start.site-inspicacity.is-scene .ak-scene-line:nth-child(1) { rotate: -2.2deg; margin-right: 14px; }
#activity-start.site-inspicacity.is-scene .ak-scene-line:nth-child(2) { rotate: 1.6deg; margin-left: 18px; }
#activity-start.site-inspicacity.is-scene .ak-scene-line:nth-child(3) { rotate: -1deg; border-color: var(--ak-accent); text-decoration: none; }
#activity-start.site-inspicacity.is-scene .ak-scene-line:nth-child(2)::before { rotate: 5deg; left: 30%; }
#activity-start.site-inspicacity.is-scene .ak-scene-line:nth-child(3)::before { left: 72%; }
#activity-start.site-inspicacity.is-scene .ak-scene-actions { gap: 14px; }
#activity-start.site-inspicacity.is-scene .ak-jump {
  min-height: 56px;
  margin: 0;
  padding: 0 30px;
  border: 2px solid var(--ak-choice-selected-border);
  border-radius: var(--sz-wobble-2);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 22px;
  font-weight: 400;
  text-decoration: none;
  rotate: 1.5deg;
}
#activity-start.site-inspicacity.is-scene .ak-jump:active { background: var(--ak-btn-active); }

@media (orientation: portrait) and (max-height: 760px) {
  #activity-start.site-inspicacity.is-scene .ak-scene { gap: 16px; }
  #activity-start.site-inspicacity.is-scene .ak-scene-lines { gap: 16px; }
  #activity-start.site-inspicacity.is-scene .ak-scene-line { padding: 14px 14px 8px; font-size: 18px; }
  #activity-start.site-inspicacity.is-scene .ak-scene-actions { gap: 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  #activity-start.site-inspicacity.is-scene .ak-scene { gap: 18px; }
  #activity-start.site-inspicacity.is-scene .ak-scene-lines {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    width: min(100%, 860px);
  }
  #activity-start.site-inspicacity.is-scene .ak-scene-line { flex: 1 1 0; margin: 0; font-size: 18px; }
  #activity-start.site-inspicacity.is-scene .ak-scene-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ---------- the reel on the start screen ---------- */

#activity-start .sz-reel { margin: var(--ak-space-7, 32px) 0 0; }
#activity-start .sz-reel-title {
  margin: 0 0 10px;
  font-family: var(--ak-font-display);
  font-size: 24px;
  font-weight: 400;
  rotate: -1.5deg;
}
#activity-start .sz-reel-row {
  display: flex;
  gap: 18px;
  padding: 12px 6px 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
#activity-start .sz-reel-print {
  flex: none;
  width: 120px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
}
#activity-start .sz-reel-print:nth-child(odd) { rotate: -2deg; }
#activity-start .sz-reel-print:nth-child(even) { rotate: 2deg; }
#activity-start .sz-reel-print .sz-tape-label { font-size: 13px; }
#activity-start .sz-reel-print .sz-tape-label { padding: 6% 9%; line-height: 1.05; white-space: normal; text-overflow: clip; }
#activity-start .sz-reel-kept { margin: 2px 0 0; font-size: 14px; color: var(--ak-ink-muted); }

/* ---------- shorter phones, upright ---------- */

@media (orientation: portrait) and (max-height: 700px) {
  .sz-play { row-gap: 6px; }
  .sz-head { min-height: 48px; }
  .sz-logo { height: 32px; }
  .sz-keeper { height: 46px; }
  .sz-ring { width: 50px; height: 50px; }
  .sz-caption { min-height: 50px; }
  :root { --sz-chip-w: 36px; }
}

@media (max-width: 370px) {
  .sz-play {
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  .sz-chip { width: 58px; }
  .sz-logo { height: 30px; }
}

/* ---------- sideways: the sheet on one side, everything else on the other ---------- */

@media (orientation: landscape) {
  .sz-play {
    max-width: 1100px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "stage head" "stage ." "stage caption" "stage band";
    column-gap: 18px;
    row-gap: 6px;
  }
  .sz-kept-head { display: block; }
  .sz-kept-foot { display: none; }
  .sz-stage {
    width: min(58dvw, calc((100dvh - var(--ac-status-h, 72px) - 14px - env(safe-area-inset-bottom)) * 340 / 384));
    height: 100%;
  }
  .sz-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 6px; }
  .sz-tape-label { font-size: 11px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .sz-head { min-height: 48px; }
  .sz-logo { height: 30px; }
  .sz-keeper { height: 44px; }
  .sz-ring { width: 48px; height: 48px; }
  .sz-kept { font-size: 11px; }
  .sz-caption { min-height: 48px; padding-block: 4px; }
  .sz-caption-text { font-size: 18px; }
  .sz-band { min-height: 104px; }
  :root { --sz-chip-w: 34px; }
}

/* ---------- motion, only when the player wants it ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .sz-keeper { animation: sz-keeper-bob 2.6s ease-in-out infinite; }
  :root:not(.ac-still) .sz-keeper.is-peek { animation: sz-peek 900ms var(--sz-ease); }
  :root:not(.ac-still) .sz-keeper.is-hop { animation: sz-hop 420ms var(--sz-spring); }
  :root:not(.ac-still) .sz-keeper.is-shrug { animation: sz-shrug 520ms ease-in-out; }
  :root:not(.ac-still) .sz-keeper.is-cheer { animation: sz-cheer 700ms var(--sz-spring); }

  :root:not(.ac-still) .sz-ring.is-late .sz-ring-arc { animation: sz-late 900ms ease-in-out infinite; }
  :root:not(.ac-still) .sz-ring.is-pop { animation: sz-pop 260ms var(--sz-spring); }

  :root:not(.ac-still) .sz-caption.is-pop { animation: sz-caption-in 320ms var(--sz-spring); }
  :root:not(.ac-still) .sz-caption[data-kind="oops"].is-pop { animation: sz-shake 360ms ease-in-out; }

  :root:not(.ac-still) .sz-chip .sz-chip-art,
  :root:not(.ac-still) .sz-blob .sz-blob-art { transition: translate 180ms var(--sz-spring), scale 180ms var(--sz-spring); }
  :root:not(.ac-still) .sz-chip.is-pop .sz-chip-art,
  :root:not(.ac-still) .sz-blob.is-pop .sz-blob-art,
  :root:not(.ac-still) .sz-stuck.is-pop,
  :root:not(.ac-still) .sz-next-go.is-pop { animation: sz-squash 260ms var(--sz-spring); }
  :root:not(.ac-still) .sz-chip:active .sz-chip-art,
  :root:not(.ac-still) .sz-blob:active .sz-blob-art { scale: 0.9 1.08; }

  :root:not(.ac-still) .sz-chip,
  :root:not(.ac-still) .sz-blob {
    transform-origin: 50% 100%;
    transition: transform 260ms var(--sz-ease), opacity 200ms ease;
    transition-delay: calc(var(--i, 0) * 22ms);
  }
  :root:not(.ac-still) .sz-band.is-folded .sz-chip,
  :root:not(.ac-still) .sz-band.is-folded .sz-blob { transition-delay: calc(var(--i, 0) * 26ms); }

  :root:not(.ac-still) .sz-play[data-phase="named"] .sz-sheet { animation: sz-closeup 520ms var(--sz-spring) both; }
  :root:not(.ac-still) .sz-play[data-phase="named"] .sz-stage::before { animation: sz-dim 520ms ease-out both; }
  :root:not(.ac-still) .sz-sheet.is-pinning-away { animation: sz-pin-away 520ms var(--sz-ease) forwards; }
  :root:not(.ac-still) .sz-idea.is-pop { animation: sz-squash 260ms var(--sz-spring); }
  :root:not(.ac-still) .sz-name:not([hidden]),
  :root:not(.ac-still) .sz-next:not([hidden]) { animation: sz-rise 360ms var(--sz-spring); }
  :root:not(.ac-still) .sz-next-go { animation: sz-nudge 2.4s ease-in-out 1.2s infinite; }

  :root:not(.ac-still) .sz-draw.is-pop { animation: sz-bump 240ms var(--sz-spring); }
  :root:not(.ac-still) .sz-draw.is-wiggling { animation: sz-wiggle 700ms ease-in-out; }
  :root:not(.ac-still) .sz-draw.is-wiping #inkLayer { animation: sz-wipe 420ms var(--sz-ease); }

  :root:not(.ac-still) .sz-nametape.is-unrolling { animation: sz-unroll 500ms var(--sz-ease) both; }

  :root:not(.ac-still) .sz-guide-ring { animation: sz-pulse 1.1s ease-in-out infinite; }
  :root:not(.ac-still) .sz-guide-arrow { animation: sz-point 1.1s ease-in-out infinite; }

  :root:not(.ac-still) .sz-wall.is-pinning .sz-print {
    animation:
      sz-pin 420ms var(--sz-spring) calc(var(--i) * 170ms) both,
      sz-wobble 640ms ease-in-out calc(var(--i) * 170ms + 1000ms);
  }
  :root:not(.ac-still) .sz-wall.is-pinning .sz-print-art { animation: sz-wiggle 640ms ease-in-out calc(var(--i) * 170ms + 450ms); }
  :root:not(.ac-still) .sz-burst span { animation: sz-fly 1.3s var(--sz-ease) var(--d) forwards; }

  :root:not(.ac-still) #activity-start .sz-reel-print { transition: translate 200ms var(--sz-spring); }
  :root:not(.ac-still) #activity-start .sz-reel-print:active { translate: 0 3px; }
}

@keyframes sz-keeper-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes sz-peek { 0% { rotate: 0deg; } 35%, 70% { rotate: 14deg; translate: 3px 0; } 100% { rotate: 0deg; } }
@keyframes sz-hop { 0% { scale: 1 1; } 30% { scale: 1.12 0.86; } 60% { translate: 0 -10px; scale: 0.94 1.08; } 100% { translate: 0 0; scale: 1 1; } }
@keyframes sz-shrug { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }
@keyframes sz-cheer { 0% { scale: 1 1; } 25% { scale: 1.16 0.82; } 55% { translate: 0 -18px; scale: 0.9 1.12; rotate: -8deg; } 100% { translate: 0 0; scale: 1 1; rotate: 0deg; } }
@keyframes sz-late { 0%, 100% { stroke-width: 3.5; } 50% { stroke-width: 5.5; } }
@keyframes sz-pop { 0% { scale: 1; } 40% { scale: 0.86; } 100% { scale: 1; } }
@keyframes sz-squash { 0% { scale: 1 1; } 35% { scale: 1.14 0.84; } 70% { scale: 0.95 1.06; } 100% { scale: 1 1; } }
@keyframes sz-caption-in { 0% { translate: 0 6px; scale: 0.985; } 100% { translate: 0 0; scale: 1; } }
@keyframes sz-shake { 0%, 100% { translate: 0 0; } 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
@keyframes sz-rise { 0% { opacity: 0; translate: 0 18px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes sz-nudge { 0%, 88%, 100% { translate: 0 0; } 92% { translate: 0 -5px; } 96% { translate: 0 1px; } }
@keyframes sz-bump { 0% { scale: 1; } 40% { scale: 1.008 0.994; } 100% { scale: 1; } }
@keyframes sz-wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -2.5deg; } 45% { rotate: 2deg; } 70% { rotate: -1deg; } }
@keyframes sz-wipe { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes sz-unroll { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes sz-pulse { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.12; opacity: 0.7; } }
@keyframes sz-point { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes sz-pin {
  0% { opacity: 0; translate: 0 -46px; scale: 1.1; rotate: -9deg; }
  70% { opacity: 1; translate: 0 4px; scale: 0.97; }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: var(--tilt, 0deg); }
}
@keyframes sz-wobble { 0%, 100% { rotate: var(--tilt, 0deg); } 30% { rotate: calc(var(--tilt, 0deg) - 3deg); } 65% { rotate: calc(var(--tilt, 0deg) + 2deg); } }
@keyframes sz-fly {
  0% { opacity: 1; translate: 0 0; rotate: 0deg; }
  80% { opacity: 1; }
  100% { opacity: 0; translate: var(--dx) calc(var(--dy) + 120px); rotate: var(--r); }
}

@keyframes sz-closeup { 0% { scale: 1; } 60% { scale: 1.07; } 100% { scale: 1.04; } }
@keyframes sz-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes sz-pin-away {
  0% { scale: 1.04; translate: 0 0; rotate: 0deg; opacity: 1; }
  30% { scale: 1.08; translate: 0 6px; rotate: 2deg; }
  100% { scale: 0.18; translate: -40% -70%; rotate: -12deg; opacity: 0; }
}

/* ---------- the site's ending card: whole on a short screen, and wide when sideways ---------- */

html #activity-chrome-ending.site-inspicacity { justify-content: safe center; align-items: safe center; }

@media (orientation: portrait) and (max-height: 760px) {
  html #activity-chrome-ending.site-inspicacity { padding: 14px 12px; }
  html #activity-chrome-ending.site-inspicacity .ac-card { gap: 6px; padding: 26px 16px 14px; }
  html #activity-chrome-ending.site-inspicacity .ac-verdict { font-size: 22px; }
  html #activity-chrome-ending.site-inspicacity .ac-number { font-size: 17px; }
  html #activity-chrome-ending.site-inspicacity .ac-lines { font-size: 15px; }
  html #activity-chrome-ending.site-inspicacity .ac-work img { max-height: 30dvh; }
}

/* Sideways the card turns wide: the five prints in one row across the top, the words below with the
   buttons beside them, so nothing sits in a tall column in the middle of a wide screen. */
@media (orientation: landscape) {
  html #activity-chrome-ending.site-inspicacity {
    padding:
      max(8px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }
  html #activity-chrome-ending.site-inspicacity .ac-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "work work" "number actions" "verdict actions" "lines actions";
    align-items: center;
    column-gap: 22px;
    row-gap: 4px;
    width: min(100%, 1040px);
    padding: 22px 20px 12px;
    text-align: left;
    transform: rotate(-0.8deg);
  }
  html #activity-chrome-ending.site-inspicacity .ac-card > * { margin: 0; }
  html #activity-chrome-ending.site-inspicacity .ac-work { grid-area: work; justify-self: center; max-width: 100%; margin-bottom: 6px; }
  html #activity-chrome-ending.site-inspicacity .ac-work img { max-height: calc(100dvh - 240px); width: auto; }
  html #activity-chrome-ending.site-inspicacity .ac-number { grid-area: number; font-size: 16px; }
  html #activity-chrome-ending.site-inspicacity .ac-verdict { grid-area: verdict; font-size: clamp(19px, 2.6vw, 24px); rotate: 0deg; }
  html #activity-chrome-ending.site-inspicacity .ac-lines { grid-area: lines; font-size: 15px; line-height: 1.3; }
  /* Every name is already on its print's tape, so the row of names steps aside here. */
  html #activity-chrome-ending.site-inspicacity .ac-line:first-child { display: none; }
  html #activity-chrome-ending.site-inspicacity .ac-actions { grid-area: actions; flex-direction: column; align-items: stretch; gap: 8px; }
}