/* Train Window Sketches: a two-colour riso zine. One wide taped sheet is the carriage window,
   the prompt is a strip of torn tickets and a luggage tag, the tools are ticket-stub chips. */

:root {
  /* start.js sets this on the start screen; a reload straight into the sheet still gets the washed wallet. */
  --ak-backdrop-layer:
    linear-gradient(color-mix(in srgb, var(--ak-bg) 95%, transparent), color-mix(in srgb, var(--ak-bg) 95%, transparent)),
    url("art/carriage-wallet.jpg");
  --pad-x: clamp(4px, calc(4vw - 10px), 20px);
  --gap: clamp(4px, 1.1dvh, 10px);
  --t-h: clamp(52px, 9dvh, 80px);
  --r-h: clamp(44px, 7dvh, 64px);
  --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --tape: color-mix(in srgb, var(--ak-accent-2) 82%, transparent);
  --pencil: color-mix(in srgb, var(--ak-ink-muted) 55%, transparent);
  --ease-drift: cubic-bezier(0.22, 0.8, 0.3, 1);
}

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

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

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art), var(--ak-backdrop-layer);
  background-size: var(--ak-bg-size), cover, cover;
  background-position: 0 0, center, 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; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ---------- The play screen: upright, the sheet sits between the cards and the tools ---------- */

.play {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 720px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "mast" "strip" "window" "tools";
  justify-content: center;
  gap: var(--gap);
  padding:
    calc(var(--ac-status-h, 72px) + 2px)
    max(var(--pad-x), env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(var(--pad-x), env(safe-area-inset-left));
  touch-action: manipulation;
}

/* Sideways: the sheet on one side, the cards and tools in a column on the other. */
@media (orientation: landscape) {
  :root {
    --t-h: clamp(48px, 15dvh, 84px);
    --r-h: clamp(42px, 11dvh, 68px);
  }
  .tools .tool-row { gap: 2px; }
  .play .prompt-line { margin: 0 0 2px; font-size: 14px; }
  .play {
    grid-template-columns: minmax(0, 1fr) 356px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "window mast"
      "window strip"
      "window ."
      "window tools";
    column-gap: clamp(10px, 2.4vw, 32px);
    max-width: 1280px;
    margin: 0 auto;
  }
  .play .logo { height: 40px; }
  .play .kept { font-size: 11px; }
  /* Sideways there is no room for the hint slip, so Hint sits by the wallet and opens it as a note. */
  .play .hint-slip { display: none; }
  /* Clear of the status chips above the sheet's left half. */
  .play .pen-tab { left: auto; right: 14%; }
  .play .swatch { height: 44px; }
  /* The punched stub sits inside the sheet's bottom edge, clear of the screen's edge. */
  .play .punched { bottom: 4%; }
}

/* A short sideways phone: everything a little closer so the column fits without scrolling. */
@media (orientation: landscape) and (max-height: 400px) {
  :root {
    --t-h: clamp(44px, 12dvh, 84px);
    --r-h: clamp(36px, 10dvh, 68px);
    --gap: 3px;
  }
  .play .strip { row-gap: 3px; }
  .play .prompt-line { font-size: 13px; line-height: 1.2; padding: 2px 8px 3px; }
  .tools { gap: 3px; }
  .play { padding-bottom: max(5px, env(safe-area-inset-bottom)); }
}

/* ---------- Masthead: the small logo, where things are kept, Hint, the wallet ---------- */

.masthead {
  grid-area: mast;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}

.logo {
  display: block;
  height: clamp(34px, 6dvh, 54px);
  width: auto;
  rotate: -2deg;
}

.kept {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 12px;
  line-height: 1.25;
}

.kept.is-settled::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 5px;
  margin-left: 6px;
  border-left: 2px solid var(--ak-accent);
  border-bottom: 2px solid var(--ak-accent);
  rotate: -45deg;
  translate: 0 -3px;
}

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

.wallet-btn {
  position: relative;
  flex: 0 0 auto;
  display: block;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  rotate: 3deg;
  touch-action: manipulation;
}

.wallet-btn .stub-art { width: calc(46px * 384 / 204); }

.wallet-word {
  position: absolute;
  left: -6px;
  bottom: -5px;
  padding: 1px 6px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  rotate: -5deg;
  clip-path: polygon(0 8%, 30% 0, 62% 6%, 100% 0, 97% 52%, 100% 100%, 64% 94%, 28% 100%, 0 95%, 3% 50%);
}

/* A ticket stub with its window cut out, showing a sketch redrawn from its strokes. */
.stub-art {
  position: relative;
  display: block;
  aspect-ratio: 384 / 204;
}

.stub-art > img {
  display: block;
  width: 100%;
  height: 100%;
}

.stub-window {
  position: absolute;
  left: 26.5%;
  top: 11.5%;
  width: 63%;
  height: 77%;
  border-radius: 9% / 15%;
  background: var(--ak-surface);
}

/* ---------- Stamps: one little drawn mark for each stop on the line ---------- */

.stamp path {
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Chips: flat paper cut like ticket stubs, notched at both ends ---------- */

.chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 48px;
  min-height: 48px;
  padding: 2px 8px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wobble);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-mask:
    radial-gradient(circle 5px at 0 50%, #0000 96%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 5px at 0 50%, #0000 96%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 5px at 100% 50%, #0000 96%, #000) 100% 0 / 51% 100% no-repeat;
}

.chip svg { width: 20px; height: 20px; }
.chip[aria-pressed="true"] { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }
.chip:active { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }

.hint { flex: 0 0 auto; padding: 0 12px; font-weight: 600; rotate: -2deg; }

/* ---------- The prompt strip: two torn tickets, Shuffle at the end, the rule on its tag ---------- */

.strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: minmax(0, calc(var(--t-h) * 1.72)) minmax(0, calc(var(--t-h) * 1.72)) var(--t-h);
  grid-template-rows: auto var(--t-h) var(--r-h) auto;
  grid-template-areas:
    "line line line"
    "feel thing disc"
    "rule rule rule"
    "hint hint hint";
  justify-content: center;
  column-gap: clamp(4px, 2.2vw, 16px);
  row-gap: 6px;
}

/* Upright, Hint is the slip under the cards, so the masthead keeps to the logo and the wallet.
   A short phone has no room for the slip, so Hint goes back by the wallet and opens as a note. */
@media (orientation: portrait) and (min-height: 700px) {
  .masthead .hint { display: none; }
}
@media (orientation: portrait) and (max-height: 699px) {
  .play .hint-slip { display: none; }
  /* Clear of the status chips above the sheet's left half. */
  .play .pen-tab { left: auto; right: 14%; }
}

/* The hint slip: how the feeling and the rule shape the marks, always in view; a tap adds the first shapes. */
.hint-slip {
  grid-area: hint;
  justify-self: start;
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  min-height: 48px;
  margin: 0 0 0 10px;
  padding: 4px 12px 5px 8px;
  border: 2px dashed var(--ak-accent);
  border-radius: var(--wobble);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: clamp(13px, 1.8dvh, 15px);
  line-height: 1.3;
  text-align: left;
  rotate: 0.6deg;
  cursor: pointer;
  touch-action: manipulation;
}

.hint-word {
  flex: 0 0 auto;
  padding: 1px 6px;
  background: var(--ak-accent);
  color: var(--ak-btn-ink);
  font-size: 12px;
  font-weight: 600;
}

.hint-slip:active { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }

/* The three cards read as one sentence, on a torn slip of its own: where, what, and how. */
.prompt-line {
  grid-area: line;
  justify-self: start;
  max-width: 100%;
  margin: 0 0 2px 4px;
  padding: 3px 10px 4px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: clamp(13px, 1.9dvh, 16px);
  font-weight: 500;
  line-height: 1.3;
  rotate: -0.6deg;
  clip-path: polygon(0 6%, 22% 0, 51% 5%, 78% 0, 100% 4%, 99% 50%, 100% 96%, 74% 100%, 47% 95%, 20% 100%, 0 94%, 1% 48%);
}

.ticket {
  position: relative;
  background: url("art/prompt-ticket.png") center / 100% 100% no-repeat;
}

.ticket.feeling { grid-area: feel; rotate: -2deg; }
.ticket.thing { grid-area: thing; rotate: 1.5deg; translate: 0 3px; }

/* A strip of tape over the sunflower band, clear of the words. */
.ticket::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 34%;
  height: 11px;
  background: var(--tape);
  translate: -50% 0;
  rotate: -3deg;
  clip-path: polygon(0 10%, 6% 0, 12% 14%, 88% 0, 94% 12%, 100% 4%, 97% 90%, 91% 100%, 85% 86%, 10% 100%, 4% 88%, 0 100%);
}

.ticket.thing::after { rotate: 4deg; left: 42%; }

.ticket-word {
  position: absolute;
  inset: 45% 15% 11% 6%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 2px 3px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.12;
}

/* Cut-out lettering: each word on its own scrap. The feeling is blue, the thing is sunflower. */
.cut {
  display: inline-block;
  padding: 0.04em 0.22em 0.08em;
  white-space: nowrap;
}

.feeling .cut {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
}

.thing .cut {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-weight: 600;
}

.cut:nth-child(odd) { rotate: -2deg; }
.cut:nth-child(even) { rotate: 2.5deg; translate: 0 1px; }
.cut:nth-child(3n) { rotate: -1deg; }

.shuffle {
  grid-area: disc;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  rotate: 4deg;
  touch-action: manipulation;
}

.shuffle img {
  display: block;
  width: calc(var(--t-h) - 16px);
  height: calc(var(--t-h) - 16px);
}

.shuffle-word {
  margin-top: -4px;
  padding: 0 5px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  rotate: -4deg;
}

.rule {
  grid-area: rule;
  display: flex;
  align-items: center;
  min-width: 0;
  rotate: -0.8deg;
}

.rule-tag {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  rotate: -8deg;
}

.rule-slip {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 82%;
  margin-left: -10px;
  padding: 4px 14px 4px 18px;
  display: flex;
  align-items: center;
  background: var(--ak-surface);
  clip-path: var(--torn-slip, none);
}

.rule-text {
  display: flex;
  align-items: center;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  color: var(--ak-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
}

/* ---------- The sheet: one wide taped carriage window ---------- */

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

.sheet {
  --p: clamp(8px, 2.6cqmin, 18px);
  position: relative;
  width: min(calc(100cqw - 16px), calc((100cqh - 2 * var(--p)) * 4 / 3 + 2 * var(--p)));
  padding: var(--p);
}

.paper {
  position: absolute;
  inset: 0;
  /* The paper takes the light outside: a new tint at every stop. */
  background-color: var(--paper, var(--ak-surface));
  background-image: radial-gradient(color-mix(in srgb, var(--ak-ink) 7%, transparent) 0.7px, transparent 1px);
  background-size: 5px 5px;
  clip-path: var(--torn-paper, none);
}

.frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px solid var(--ak-accent);
  border-radius: 20px 26px 18px 24px;
  /* The second drum lands a hair off: a sunflower frame peeking out. */
  box-shadow: -2px 2px 0 0 color-mix(in srgb, var(--ak-accent-2) 85%, transparent);
}

.pad {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.pad:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: -6px; }

.horizon {
  position: absolute;
  left: 2%;
  right: 2%;
  top: calc(200% / 3);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--pencil) 0 18px, transparent 18px 20px, var(--pencil) 20px 31px, transparent 31px 32px);
  pointer-events: none;
}

.sheet.is-horizon-off .horizon { opacity: 0; }

/* The pen tab: a scrap clipped to the sheet's top edge showing what the next stroke will look like. */
.pen-tab {
  position: absolute;
  z-index: 3;
  top: calc(var(--p) * -0.4 - 14px);
  left: 26%;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 2px 10px 2px 6px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wobble);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  rotate: -1.5deg;
  pointer-events: none;
}

.pen-sample { width: 44px; height: 18px; flex: 0 0 auto; }
.pen-sample path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pen-tab.is-erasing .pen-sample path { stroke-dasharray: 3 4; }

.sheet.is-taped .pen-tab { visibility: hidden; }

.key-pen {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--ak-ink);
  border-radius: 50%;
  pointer-events: none;
}

.key-pen.is-down { background: color-mix(in srgb, var(--ak-accent-2) 70%, transparent); }

.tape {
  position: absolute;
  z-index: 2;
  width: clamp(38px, 13%, 92px);
  height: clamp(13px, 4%, 22px);
  background: var(--tape);
  pointer-events: none;
  clip-path: polygon(0 12%, 5% 0, 10% 16%, 15% 2%, 85% 0, 90% 14%, 95% 0, 100% 10%, 98% 88%, 93% 100%, 88% 86%, 82% 100%, 18% 96%, 12% 100%, 6% 84%, 0 96%);
}

.tape-tl { top: 0; left: -2%; rotate: -36deg; }
.tape-tr { top: 0; right: -2%; rotate: 38deg; }
.tape-bl { bottom: 2%; left: -2%; rotate: 34deg; }
.tape-br { bottom: 2%; right: -2%; rotate: -33deg; }

/* On Done the print is taped down across its top. */
.tape-done {
  top: -6px;
  left: 50%;
  width: 34%;
  height: clamp(16px, 5%, 26px);
  translate: -50% 0;
  rotate: -2deg;
  opacity: 0;
}

.sheet.is-taped .tape-done { opacity: 1; }

.horizon-tab {
  position: absolute;
  z-index: 3;
  left: -6px;
  top: calc(var(--p) + (100% - 2 * var(--p)) * 2 / 3);
  translate: 0 -50%;
  flex-direction: row;
  gap: 4px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
  rotate: -3deg;
}

.horizon-tab::before {
  content: '';
  width: 12px;
  border-top: 2px solid currentColor;
}

.horizon-tab[aria-pressed="true"] { background: var(--ak-surface); color: var(--ak-ink); }
.horizon-tab[aria-pressed="false"] { border-style: dashed; background: var(--ak-bg); color: var(--ak-ink-muted); }
.horizon-tab[aria-pressed="false"]::before { border-top-style: dashed; }

/* The stub punched beside the taped print. */
.punched {
  position: absolute;
  z-index: 4;
  right: -2%;
  bottom: -4%;
  width: clamp(130px, 40%, 230px);
  rotate: 5deg;
  pointer-events: none;
}

.punch-hole {
  position: absolute;
  left: 6.5%;
  top: 38%;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ak-bg);
  box-shadow: inset 1px 2px 0 color-mix(in srgb, var(--ak-ink) 40%, transparent);
}

.stub-stamp {
  position: absolute;
  right: -8%;
  top: -14%;
  display: grid;
  place-items: center;
  width: 34%;
  aspect-ratio: 1;
  border: 2.5px dashed var(--ak-accent);
  border-radius: 50%;
  background: var(--ak-surface);
  rotate: -12deg;
}

.stub-stamp .stamp { width: 66%; height: 66%; }

.punched-label {
  display: block;
  width: max-content;
  max-width: 120%;
  margin: -6px 0 0 8%;
  padding: 2px 8px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  rotate: -3deg;
}

/* ---------- Tools: one band along the bottom edge ---------- */

.tools {
  grid-area: tools;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tool-row {
  display: flex;
  align-items: center;
  gap: clamp(1px, calc(2vw - 6px), 9px);
}

.tool-row .chip { flex: 1 1 auto; padding: 2px 3px; font-size: 12px; }
.tool-row .chip:nth-child(odd) { rotate: -1.5deg; }
.tool-row .chip:nth-child(even) { rotate: 1.8deg; translate: 0 2px; }

.size .dot {
  display: block;
  border-radius: 50%;
  /* The brush dots wear the chosen colour, so picking a colour shows on the sizes too. */
  background: var(--pen-ink, currentColor);
  box-shadow: 0 0 0 1.5px var(--ak-ink);
}

.size[data-size="fine"] .dot { width: 6px; height: 6px; }
.size[data-size="medium"] .dot { width: 12px; height: 12px; }
.size[data-size="broad"] .dot { width: 21px; height: 21px; }

.tool-row .done {
  flex: 1 1 auto;
  border-color: var(--ak-ink);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tool-row .done:active { background: var(--ak-btn-active); color: var(--ak-btn-ink); }

.swatches {
  display: flex;
  justify-content: space-between;
}

.swatch {
  position: relative;
  flex: 1 1 0;
  min-width: 44px;
  max-width: 64px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* Each ink is a scrap of a different cut, so no two read alike. */
.swatch::before {
  content: '';
  position: absolute;
  inset: 7px 5px;
  background: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ak-ink) 60%, transparent);
}

.swatch:nth-child(1)::before { border-radius: 50%; }
.swatch:nth-child(2)::before { border-radius: 4px; rotate: -6deg; }
.swatch:nth-child(3)::before { border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%; }
.swatch:nth-child(4)::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; }
.swatch:nth-child(5)::before { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border: 0; inset: 4px 3px; }
.swatch:nth-child(6)::before { border-radius: 2px 18px 2px 18px; }
.swatch:nth-child(7)::before { clip-path: polygon(0 12%, 100% 0, 88% 100%, 8% 90%); border: 0; }
.swatch:nth-child(8)::before { clip-path: polygon(50% 2%, 98% 96%, 2% 96%); border: 0; inset: 5px 4px; }

.swatch[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: 1px 0;
  border: 2.5px solid var(--ak-ink);
  border-radius: var(--wobble);
}

.swatch[aria-pressed="true"]::before { translate: 0 -2px; }

/* ---------- Teaching: a pulsing ring, a drawn arrow and a taped caption ---------- */

.guide {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

/* While a line is going down the teaching steps aside, so nothing hides the mark being made. */
.guide.is-drawing { visibility: hidden; }

.guide-ring {
  position: fixed;
  border: 4px solid var(--ak-accent);
  border-radius: var(--wobble);
  box-shadow: 0 0 0 3px var(--ak-surface);
}

.guide-arrow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.guide-arrow path {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-caption {
  position: fixed;
  margin: 0;
  max-width: min(340px, calc(100vw - 24px));
  padding: 12px 16px 12px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  rotate: -1deg;
}

.guide-caption.is-slim { padding: 6px 14px; }

/* ---------- Layers: the wallet and the one-time asks ---------- */

.layer {
  position: fixed;
  inset: 0;
  z-index: 33;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--ak-bg) 90%, transparent);
  touch-action: manipulation;
}

.layer.ask { z-index: 35; }
.layer .chip { padding: 0 16px; font-size: 15px; }

.wallet-case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 780px);
  max-height: 100%;
  padding: 14px clamp(10px, 3vw, 22px) 18px;
  border-radius: 16px 24px 14px 28px;
  background: var(--ak-accent);
  box-shadow: -3px 3px 0 0 color-mix(in srgb, var(--ak-accent-2) 85%, transparent);
}

.wallet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 60px;
}

.wallet-title {
  margin: 0;
  padding: 4px 12px 6px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: clamp(18px, 4.6vw, 28px);
  rotate: -2deg;
}

.wallet-close { rotate: 2deg; }

.wallet-note {
  margin: 0;
  align-self: flex-start;
  padding: 3px 10px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 15px;
  rotate: 0.8deg;
}

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

.stamp-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(74px, 22vw), 1fr));
  gap: 8px 6px;
  padding: 10px 10px 8px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  rotate: -0.4deg;
}

.stamp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.stamp-ring {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px dashed color-mix(in srgb, var(--ak-ink-muted) 60%, transparent);
  border-radius: 50%;
}

.stamp-slot.is-punched .stamp-ring { border: 2.5px solid var(--ak-accent); background: var(--ak-bg); rotate: -8deg; }
.stamp-ring .stamp { width: 24px; height: 24px; }
.stamp-name { font-size: 11px; line-height: 1.15; color: var(--ak-ink-muted); }
.stamp-slot.is-punched .stamp-name { color: var(--ak-ink); font-weight: 600; }

.pocket {
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 42vw), 1fr));
  align-content: start;
  gap: 22px 12px;
  padding: 18px 12px 22px;
  border-radius: 10px 14px 8px 12px;
  background-color: var(--ak-bg);
  background-image: repeating-linear-gradient(transparent 0 46px, color-mix(in srgb, var(--ak-accent-2) 35%, transparent) 46px 48px);
  color: var(--ak-ink);
}

.pocket-empty {
  grid-column: 1 / -1;
  margin: 12px 4px;
  font-size: 17px;
  line-height: 1.4;
}

.stub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  rotate: var(--fan, 0deg);
  touch-action: manipulation;
}

.stub:nth-child(4n + 1) { --fan: -3deg; }
.stub:nth-child(4n + 2) { --fan: 2deg; }
.stub:nth-child(4n + 3) { --fan: -1.2deg; }
.stub:nth-child(4n + 4) { --fan: 3.4deg; }

.stub-label {
  padding: 2px 6px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 13px;
  line-height: 1.3;
}

.stub-label b { font-weight: 700; font-size: 13px; }

.viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: auto;
  padding: 16px 8px 8px;
  border-radius: 10px 14px 8px 12px;
  background: var(--ak-bg);
  color: var(--ak-ink);
}

.viewer-print {
  position: relative;
  width: min(100%, 520px, calc((100dvh - 300px) * 4 / 3));
  min-width: 200px;
  padding: 10px;
  background: var(--ak-surface);
  rotate: -1.2deg;
}

.viewer-print canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border: 2px solid var(--ak-accent); border-radius: 14px; }
.viewer-tape { top: -8px; left: 50%; translate: -50% 0; width: 30%; rotate: 3deg; }
.viewer-label { margin: 6px 0 0; font-family: var(--ak-font-display); font-size: clamp(15px, 3.6vw, 20px); text-align: center; }
.viewer-prompt { margin: 0; font-size: 16px; text-align: center; }
.viewer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
#viewer-redraw { background: var(--ak-btn-fill); color: var(--ak-btn-ink); }

.ask-note {
  position: relative;
  width: min(100%, 380px);
  padding: 28px 22px 20px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  rotate: -1.5deg;
  clip-path: var(--torn-note, none);
}

.ask-tape { top: 2px; left: 50%; translate: -50% 0; width: 32%; rotate: -2deg; }
.ask-title { margin: 0 0 8px; font-family: var(--ak-font-display); font-weight: var(--ak-title-weight); font-size: 19px; line-height: 1.3; }
.ask-body { margin: 0 0 16px; font-size: 16px; line-height: 1.4; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ask-yes { background: var(--ak-btn-fill); color: var(--ak-btn-ink); rotate: -1deg; }
.ask-no { rotate: 1.5deg; }

/* The pinned print on a short sideways phone: start at the top so the stub's name is never cut off. */
html body #activity-chrome-ending.site-inspicacity { justify-content: safe center; }
/* The shared status bar keeps to one short row on a phone: Studio and the stamps meter. */
html body #activity-chrome-status.site-inspicacity { font-size: 14px; }
html body #activity-chrome-status.site-inspicacity .ac-meter-bar { width: 44px; }
@media (max-width: 379px) {
  html body #activity-chrome-status.site-inspicacity { font-size: 12.5px; gap: 10px; }
}

/* The hint is a sentence to read while drawing, so the toast sets it in the body face, not capitals. */
html body #activity-chrome-toast.site-inspicacity {
  font-family: var(--ak-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

/* New sheet starts the next sheet, so it is a big, easy target everywhere. */
html body #activity-chrome-ending.site-inspicacity .ac-replay { min-height: 56px; padding: 0 26px; font-size: 17px; }

/* A short sideways screen keeps the shared pinned print whole: the words on one side, the saved
   sketch as the featured print on the other, so nothing runs off the bottom. */
@media (orientation: landscape) and (max-height: 560px) {
  html body #activity-chrome-ending.site-inspicacity {
    padding:
      max(10px, env(safe-area-inset-top))
      max(76px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
  html body #activity-chrome-ending.site-inspicacity .ac-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(14px, 3vw, 28px);
    row-gap: 6px;
    width: min(100%, 860px);
    max-height: calc(100dvh - 20px);
    padding: 22px 20px 14px;
  }
  html body #activity-chrome-ending.site-inspicacity .ac-card > * { grid-column: 1; }
  html body #activity-chrome-ending.site-inspicacity .ac-number { font-size: 13px; }
  html body #activity-chrome-ending.site-inspicacity .ac-verdict { font-size: clamp(16px, 5dvh, 22px); line-height: 1.2; }
  html body #activity-chrome-ending.site-inspicacity .ac-lines { font-size: 14px; line-height: 1.3; }
  html body #activity-chrome-ending.site-inspicacity .ac-work {
    grid-column: 2;
    grid-row: 1 / span 5;
    width: min(42vw, calc((100dvh - 96px) * 4 / 3 + 16px));
    border-width: 8px 8px 20px;
  }
  html body #activity-chrome-ending.site-inspicacity .ac-work img { width: 100%; height: auto; max-height: none; }
  html body #activity-chrome-ending.site-inspicacity .ac-replay { min-height: 52px; }
}

/* ---------- Motion: slow, drifting, like scenery past a window ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .is-dealt { animation: drift-in 900ms var(--ease-drift) both; }
  :root:not(.ac-still) .ticket.thing.is-dealt { animation-delay: 110ms; }
  :root:not(.ac-still) .rule.is-dealt { animation-delay: 220ms; }
  :root:not(.ac-still) .horizon { transition: opacity 500ms ease; }
  :root:not(.ac-still) .paper { transition: background-color 1600ms ease; }
  :root:not(.ac-still) .guide-ring { animation: ring-breathe 1800ms ease-in-out infinite alternate; }
  :root:not(.ac-still) .sheet.is-taped .tape-done { animation: tape-down 700ms var(--ease-drift) both; }
  :root:not(.ac-still) .punched:not([hidden]) { animation: stub-slide 800ms var(--ease-drift) both; }
  :root:not(.ac-still) .punched:not([hidden]) .punch-hole { animation: punch 260ms ease-out 420ms both; }
  :root:not(.ac-still) .pocket .stub { animation: fan-in 700ms var(--ease-drift) both; animation-delay: calc(var(--i, 0) * 70ms); }
  :root:not(.ac-still) .swatch::before { transition: translate 220ms ease; }
  :root:not(.ac-still) .ask-note { animation: stub-slide 420ms var(--ease-drift) both; }

  @keyframes drift-in {
    0% { opacity: 0; transform: translateX(72px); }
    55% { opacity: 1; transform: translateX(-4px) rotate(-1deg); }
    80% { transform: translateX(1px) rotate(0.5deg); }
    100% { transform: none; }
  }
  @keyframes ring-breathe { from { transform: scale(1); } to { transform: scale(1.05); } }
  @keyframes tape-down { from { opacity: 0; transform: translateY(-22px) rotate(-5deg); } to { opacity: 1; transform: none; } }
  @keyframes stub-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
  @keyframes punch { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes fan-in { from { opacity: 0; transform: translateY(26px) rotate(calc(var(--fan, 0deg) * -2)); } to { opacity: 1; transform: none; } }
}