/* Story Chain: a paper chain is the character. Each turn adds a link (moss and gold, like strips of colored paper)
   with that turn's picture, and the chain's face sits at the growing end. The card is HTML so long lines wrap. Like
   Would You Rather's boards, the card turns dark in dark mode so it doesn't glare at bedtime or in the car. */
:root {
  --accent: var(--moss);
  --sc-paper: #eef3d6;
  --on-sun: #1d2333;
  --pill-line: var(--moss);
  --pill-on: var(--moss);
  --pill-on-fg: #fff;
  --pill-focus: var(--moss);
}
@media (prefers-color-scheme: dark) {
  :root { --sc-paper: var(--card); --pill-on-fg: #121a2c; }
}
.status { min-height: 1.1em; font-weight: 400; }
.status:focus { outline: none; }
.status:focus-visible { outline: 3px solid var(--moss); outline-offset: 4px; border-radius: 8px; }
.sub { margin-top: -12px; }
.rules {
  margin: -6px 0 0; padding: 0; list-style: none; color: var(--muted); font-weight: 600; font-size: .95rem;
  display: flex; flex-direction: column; gap: 2px; text-wrap: balance;
}

/* While playing, everything above the chain shrinks so chain, card and buttons fit on a 667px-tall phone. */
.playing { gap: 10px; padding-block: 6px 20px; }
.playing h1 { font-size: 1.3rem; }
.playing .back { padding-block: 2px; }
.playing .status { font-size: 1.4rem; }

/* ----- The paper chain ----- */
.strip { display: flex; align-items: center; justify-content: center; max-width: 100%; cursor: pointer; }
.playing .strip, .ended .strip { cursor: default; }
.chain { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.chain li, .head { flex: none; width: 58px; height: 46px; margin-right: -12px; }
.chain li {
  position: relative; display: grid; place-items: center; border-radius: 999px;
  border: 6px solid var(--moss); background: var(--sc-paper); font-size: 1.45rem; line-height: 1;
}
.chain li:nth-child(even) { border-color: var(--sun); z-index: 1; }
.chain li.num { font-family: var(--display); font-size: 1.2rem; color: var(--fg); }
.head { width: 52px; height: 52px; margin-right: 0; position: relative; z-index: 2; overflow: visible; }
.head .ring { fill: var(--sc-paper); stroke: var(--moss); stroke-width: 6; }
.head .eye { fill: var(--fg); }
.head .smile { fill: none; stroke: var(--fg); stroke-width: 3.5; stroke-linecap: round; }
/* During play only the last 5 links show. At the end, the whole chain wraps onto as many rows as it needs. */
.playing .chain li:nth-last-child(n+6) { display: none; }
.ended .strip { flex-wrap: wrap; }
.ended .chain { flex-wrap: wrap; justify-content: center; row-gap: 10px; padding-left: 12px; }
.ended .head { display: none; }
.chain li.new { animation: swing-in .35s ease-out 1; }
@keyframes swing-in { from { transform: translateX(24px) rotate(25deg) scale(.6); opacity: 0; } }

/* ----- The card ----- */
.card {
  width: 100%; background: var(--sc-paper); color: var(--fg); border-radius: 18px; padding: 14px 18px 16px;
  border: 3px solid var(--moss); display: flex; flex-direction: column; gap: 6px; min-height: 9.5rem; justify-content: center;
}
.card p { margin: 0; }
.opening {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; font-weight: 800; font-size: 1.25rem; line-height: 1.25;
  padding-bottom: 10px; border-bottom: 2px dashed var(--moss);
}
.opening .pic { font-size: 2rem; line-height: 1; }
.label { color: var(--moss); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.help { font-family: var(--display); font-size: 1.7rem; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.help.thing { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 2rem; }
.help.thing .pic { font-size: 2.5em; line-height: 1; }
.help.plain { font-family: var(--body); font-weight: 800; font-size: 1.15rem; color: var(--muted); }
[data-kind="all"] { border-style: dashed; }
.swing { animation: pop .3s ease-out 1; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

/* ----- Buttons ----- */
.nav { display: flex; gap: 10px; justify-content: center; width: 100%; }
.playing .main-btn, .ended .main-btn { flex: 1.4; padding-inline: 16px; }
.alt-btn {
  flex: 1; font-family: var(--display); font-size: 1.25rem; border-radius: 999px; padding: 12px 10px; cursor: pointer;
  border: 3px solid var(--moss); background: var(--card); color: var(--fg);
}
.ended .alt-btn { font-size: 1.1rem; }
.alt-btn:focus-visible, .end-btn:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }
/* The end ends the story, so it sits apart from Next teller, with a full-size target. */
.end-btn {
  min-height: 44px; min-width: 9rem; margin-top: 8px; padding: 8px 20px; border-radius: 999px; cursor: pointer;
  font-family: var(--body); font-weight: 800; font-size: 1rem; background: none; color: var(--fg); border: 2px dashed var(--muted);
}
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .chain li.new, .swing { animation: none !important; }
}