:root { --ink: #1b1b1b; --bar: #585858; --pink: #f2788f; }
/* cards may tint the page from their timeline (good night dims it) by setting --bg */
html, body { margin: 0; height: 100%; background: var(--bg, #fff); }
body {
  display: grid; place-items: center;
  font-family: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
main { width: min(92vw, 460px); display: grid; justify-items: center; }
.og main { width: 600px; }
svg { display: block; width: 100%; height: auto; overflow: visible; }
svg text { font-family: inherit; fill: var(--ink); }
.line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* the classic hand-drawn border trick: lopsided elliptical corners */
.sketchy {
  border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* hidden buttons keep their space so nothing jumps when one appears; act two's button and
   replay share a single slot, so a two-act card sits exactly where a one-act card does */
.actions { display: grid; justify-items: center; }
.actions > * { grid-area: 1 / 1; }

.again {
  font: inherit; font-size: 1.2rem; color: var(--ink); background: #fff;
  padding: .25rem 1.2rem .35rem; margin-top: .6rem; cursor: pointer;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.again.show { opacity: 1; transform: none; pointer-events: auto; }
.again:active { transform: scale(.96); }

.corner {
  position: fixed; bottom: max(10px, env(safe-area-inset-bottom));
  font-size: .95rem; text-decoration: none;
}
.credit { right: 14px; color: #bdbdbd; }
.more { left: 14px; color: #8a8a8a; }
.og .again, .og .corner { display: none; }

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