/* Let's Pretend: a little theater is the character. Indigo curtains with a thin gold trim close over the stage while
   idle and at the end, and open around the story card while a story is on. The card is HTML so long lines wrap, set
   in Nunito 800 and left-aligned for reading out loud. Like the other seated games, the card's paper turns dark in
   dark mode so it doesn't glare in a dim room. */
:root {
  --accent: var(--dream);
  --lp-paper: #fbf3dc;
  --lp-stage: #2b2a5a; /* the dark behind the curtains */
  --lp-fold: color-mix(in srgb, var(--dream) 82%, #000); /* a darker stripe for the curtains' folds */
  --lp-on-dream: #fff;
  --pill-line: var(--dream);
  --pill-on: var(--dream);
  --pill-on-fg: #fff;
  --pill-focus: var(--dream);
}
@media (prefers-color-scheme: dark) {
  :root { --lp-paper: var(--card); --lp-stage: #0b0e1c; --lp-fold: color-mix(in srgb, var(--dream) 84%, #000); --lp-on-dream: #121a2c; --pill-on-fg: #121a2c; }
}
.status { min-height: 1.1em; font-weight: 400; }
.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 a story is on, everything above the stage shrinks so the card and the buttons fit on a short 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 stage padding and card gap come in a little too (the valance is 30px), so the longest story card ends above the
   dock on the iPhone SE with no twist; a twist still pushes the grown-up line under it there (CLAUDE.md, Layout). */
.playing .theater { padding: 32px 22px 12px; }
.playing .card { gap: 6px; }

/* ----- The theater ----- */
.theater {
  position: relative; width: 100%; min-height: 10rem; border-radius: 18px; overflow: hidden; background: var(--lp-stage);
  padding: 36px 26px 16px; display: grid; place-items: center; cursor: pointer;
}
.playing .theater, .ended .theater { cursor: default; }
.valance { position: absolute; top: 0; left: 0; width: 100%; height: 30px; z-index: 3; display: block; }
.valance-fill { fill: var(--dream); }
.valance-trim { stroke: var(--sun); stroke-width: 3; }
.curtain {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--dream) 0 16px, var(--lp-fold) 16px 24px);
  transition: width .4s ease-in-out;
}
.curtain.left { left: 0; border-right: 3px solid var(--sun); }
.curtain.right { right: 0; border-left: 3px solid var(--sun); }
.playing .curtain { width: 18px; }

/* ----- The story card ----- */
.card {
  position: relative; z-index: 1; width: 100%; background: var(--lp-paper); color: var(--fg); border-radius: 14px;
  padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; font-weight: 800;
}
.card p { margin: 0; }
.name { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--dream); }
.name .pic { font-size: 2rem; line-height: 1; }
.setup { font-size: 1.15rem; line-height: 1.3; }
.roles, .grown { font-size: 1rem; line-height: 1.35; }
.label { color: var(--dream); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
/* A twist is the headline now: it drops in at the top of the card and stays until the next twist or a new story. */
.twist {
  display: flex; align-items: center; gap: 10px; background: var(--dream); color: var(--lp-on-dream);
  border-radius: 10px; padding: 8px 12px; margin: -2px -2px 2px; font-size: 1.05rem; line-height: 1.3;
}
.twist .pic { font-size: 1.7rem; line-height: 1; }
.twist-label { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.ending {
  position: relative; z-index: 3; margin: 0; width: 100%; background: var(--lp-paper); color: var(--fg); border-radius: 14px;
  padding: 16px; font-weight: 800; font-size: 1.15rem; line-height: 1.35; text-wrap: balance;
}
.swing { animation: pop .3s ease-out 1; }
.drop { animation: drop .35s ease-out 1; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }

/* ----- Buttons (in the dock, game.css) ----- */
.alt-btn {
  font-family: var(--display); font-size: 1.25rem; line-height: 1.1; border-radius: 999px; padding: 4px 10px; cursor: pointer;
  border: 3px solid var(--dream); background: var(--card); color: var(--fg);
}
.alt-btn:focus-visible, .end-btn:focus-visible { outline: 3px solid var(--dream); outline-offset: 3px; }
.end-btn {
  min-height: var(--eu-pause-h); min-width: 9rem; padding: 0 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) {
  .swing, .drop { animation: none !important; }
  .curtain { transition: none; }
}

/* Eyes Up (site-wide, kit.js): a plain text card. No curtains, pictures, fills or motion; the twist is an outlined line. */
[data-eyes-up] .theater { background: none; padding: 0; min-height: 0; overflow: visible; border-radius: 0; }
[data-eyes-up] :is(.valance, .curtain, .card .pic, .twist .pic) { display: none; }
[data-eyes-up] .card, [data-eyes-up] .ending { background: var(--card); border: 2px solid var(--line); }
[data-eyes-up] :is(.name, .label) { color: var(--fg); }
[data-eyes-up] .twist { background: none; color: var(--fg); border: 2px dashed var(--muted); }
[data-eyes-up] .alt-btn { border-color: var(--muted); }
[data-eyes-up] .playing .main-btn { background: var(--muted); color: var(--bg); box-shadow: none; }
[data-eyes-up] :is(.swing, .drop) { animation: none !important; }