/* Puppet Dance. A puppet-theatre look: lacquer red, gold and green on cream paper, or on dark maroon. */
:root {
  --bg: #fbf3e2; --paper: #fff9ec; --paper-2: #f7e8c6; --ink: #3a1b12; --muted: #76533f; --line: #cf9d3e;
  --accent: #b3261e; --accent-dk: #7d1712; --accent-2: #1f7a5c; --accent-2-dk: #14543f; --link: #17664c;
  --gold: #e2b33c; --gold-dk: #a97a12;
  --sky-1: #fdf0cf; --sky-2: #f3d290; --floor: #b98248; --floor-2: #94642f; --curtain: #b3261e; --curtain-2: #861a15;
  --string: #4a342a; --hot: #d81b78; --wood: #9a6a3a; --wood-2: #5f3d1c; --barhand: #1f9d6b; --stringhand: #2f6fde;
  --shadow: 0 6px 18px rgba(90, 40, 10, .18); --radius: 18px;
  --ph: min(42vh, 420px);   /* how tall a puppet picture may be */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1010; --paper: #2a1818; --paper-2: #3b2323; --ink: #fbeedd; --muted: #d6b79d; --line: #a8782a; --link: #6fd3ae;
    --sky-1: #2f2850; --sky-2: #1b1730; --floor: #6f4a28; --floor-2: #4c3119; --curtain: #8f1f1a; --curtain-2: #5e1310;
    --string: #eadbc3; --hot: #ff7dbd; --shadow: 0 6px 18px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg: #1c1010; --paper: #2a1818; --paper-2: #3b2323; --ink: #fbeedd; --muted: #d6b79d; --line: #a8782a; --link: #6fd3ae;
  --sky-1: #2f2850; --sky-2: #1b1730; --floor: #6f4a28; --floor-2: #4c3119; --curtain: #8f1f1a; --curtain-2: #5e1310;
  --string: #eadbc3; --hot: #ff7dbd; --shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(circle at 8% 6%, rgba(179, 38, 30, .10), transparent 38%), radial-gradient(circle at 92% 12%, rgba(226, 179, 60, .16), transparent 40%),
                    radial-gradient(circle at 50% 100%, rgba(31, 122, 92, .10), transparent 45%);
  background-attachment: fixed;
  color: var(--ink); font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 18px; line-height: 1.45; min-height: 100vh;
}
h1, h2, h3 { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: .5em 0 .2em; text-align: center; }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); margin: 0 0 .3em; }
h3 { font-size: 1.3rem; margin: 1.3em 0 .4em; }
a { color: var(--link); }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--stringhand); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- frame ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); }
.topbar .logo { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.3rem; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar .logo .mask { font-size: 1.5rem; }
.topbar .spacer, .row .spacer { flex: 1; }
.topbar .progress { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.topbar .progress a { width: 14px; height: 14px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--line); display: block; }
.topbar .progress a.done { background: var(--gold); }
.topbar .progress a.current { background: var(--accent); transform: scale(1.25); }
.iconbtn { border: 2px solid var(--line); background: var(--paper); border-radius: 12px; padding: 6px 10px; font-size: 1.1rem; min-width: 44px; min-height: 44px; }
main { max-width: 860px; margin: 0 auto; padding: 16px 16px 120px; }
.page { animation: fadeUp .4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.navbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); border-top: 2px solid var(--line); backdrop-filter: blur(8px); }
.navbar .title { font-weight: 800; color: var(--muted); font-size: .95rem; text-align: center; flex: 1; }

/* ---------- words ---------- */
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--muted); font-weight: 800; }
.kid { font-size: 1.3rem; line-height: 1.5; }
.kid p { margin: .35em 0; display: flex; gap: 6px; align-items: flex-start; }
.kid .speak { margin-top: -3px; }
.hint { color: var(--muted); font-size: .95rem; margin: .5em 0 0; }
.caption { font-size: 1.25rem; margin: .6em 0 0; min-height: 3em; }
.panel { background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); margin: 14px 0; }
.panel.tip { border-style: dashed; box-shadow: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.center { justify-content: center; }
.speak { border: none; background: transparent; font-size: 1.35rem; vertical-align: middle; padding: 4px 6px; min-width: 40px; min-height: 40px; border-radius: 10px; flex: none; }
.speak[aria-pressed="true"] { animation: wiggle .6s infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; padding: 12px 22px; min-height: 48px; font-weight: 800; font-size: 1.1rem;
  background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-dk); transition: transform .08s; text-decoration: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dk); }
.btn.secondary { background: var(--accent-2); box-shadow: 0 4px 0 var(--accent-2-dk); }
.btn.secondary:active { box-shadow: 0 1px 0 var(--accent-2-dk); }
.btn.gold { background: var(--gold); color: #3a1b12; box-shadow: 0 4px 0 var(--gold-dk); }
.btn.gold:active { box-shadow: 0 1px 0 var(--gold-dk); }
.btn.gold.earned { background: var(--paper-2); color: var(--ink); box-shadow: 0 4px 0 var(--line); }
.btn.ghost { background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn.ghost:active { box-shadow: 0 1px 0 var(--line); }
.btn.big { font-size: 1.35rem; padding: 14px 30px; min-height: 58px; }
.chip { border: 2px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 8px 16px; min-height: 44px; font-weight: 800; }
.chip[aria-pressed="true"] { background: var(--accent-2); border-color: var(--accent-2-dk); color: #fff; }

/* ---------- the stage ---------- */
.stagebox { background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin: 14px 0; scroll-margin-top: 70px; }
.stagebox.hero { --ph: min(36vh, 330px); }
.stage { position: relative; overflow: hidden;
  background: radial-gradient(ellipse 46% 78% at 50% 100%, rgba(255, 255, 255, .42), transparent 70%),
              linear-gradient(to bottom, var(--sky-1) 0%, var(--sky-2) 89%, var(--floor) 89%, var(--floor-2) 100%); }
.stage .pelmet { position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 2; background: var(--curtain-2); border-bottom: 4px solid var(--gold);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
.stage .curtain { position: absolute; top: 0; bottom: 0; width: clamp(14px, 6%, 56px); z-index: 1;
  background: repeating-linear-gradient(90deg, var(--curtain) 0 9px, var(--curtain-2) 9px 14px); box-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.stage .curtain.l { left: 0; border-right: 3px solid var(--gold); }
.stage .curtain.r { right: 0; border-left: 3px solid var(--gold); }
.stage .puppets { display: flex; justify-content: center; }
svg.puppet { display: block; width: min(100%, calc(var(--ph) * .8)); height: auto; flex: none; }
.puppets.two svg.puppet { width: min(50%, calc(var(--ph) * .8)); }
.whobtn { position: absolute; top: 28px; left: 8px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: var(--paper); font-size: 1.4rem; padding: 0; box-shadow: var(--shadow); }
.legend { text-align: center; color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.key { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px; margin-left: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.key.bar { width: 24px; border-radius: 7px; background: var(--barhand); }
.key.str { background: var(--stringhand); }
.pulse { display: grid; grid-template-columns: 1fr 1fr auto; border-top: 3px solid var(--line); }
.pulse button { border: none; border-left: 3px solid var(--line); background: var(--paper); font-size: 1.3rem; min-width: 56px; }
.pulse span { text-align: center; padding: 8px; font-weight: 800; font-size: 1.3rem; opacity: .35; }
.pulse span.on { opacity: 1; background: var(--gold); color: #3a1b12; }

/* the box under the stage: the Practise button, or the step being read and the time to try it */
.now { position: relative; padding: 14px 16px 16px; text-align: center; }
.now.running { text-align: left; }
.nowstep { display: flex; gap: 12px; align-items: center; min-height: 5.2em; }
.nowstep p { margin: 0; font-size: 1.4rem; line-height: 1.35; font-weight: 800; }
.num, .steps li::before { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-family: "Fredoka", sans-serif; }
.turn { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; font-weight: 800; }
.turn .phase { min-width: 6.2em; }
.turn .secs { min-width: 1.4em; text-align: right; font-size: 1.5rem; font-family: "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.meter { flex: 1; height: 16px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 100%; background: var(--line); }
.now[data-phase="turn"] .meter i { background: var(--accent-2); }
.now[data-phase="turn"] .phase { color: var(--link); }
.spark { position: absolute; bottom: 12px; font-size: 1.7rem; pointer-events: none; animation: spark 1.5s ease-out both; }
@keyframes spark { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-150px) scale(1.5) rotate(40deg); opacity: 0; } }

/* ---------- steps, tiles, clips ---------- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps li { counter-increment: s; display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; font-size: 1.25rem; border: 3px solid transparent; }
.steps li::before { content: counter(s); font-size: 1rem; }
.steps li.current { background: var(--paper-2); border-color: var(--gold); }
.beatbar .chip { padding: 6px 12px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 18px 0; }
.tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius); background: var(--paper); border: 3px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; transition: transform .12s; }
.tile:hover { transform: translateY(-3px); }
.tile .ico { font-size: 2rem; line-height: 1.1; }
.tile .ttl { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.2rem; }
.tile .sub { color: var(--muted); font-size: .85rem; }
.tile .star { position: absolute; top: 10px; right: 12px; font-size: 1.4rem; color: var(--line); }
.tile.done { border-color: var(--gold); background: var(--paper-2); }
.clips { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.clip { margin: 0; background: var(--paper); border: 3px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.clipframe { position: relative; aspect-ratio: 16 / 9; background: #000; }
.clipframe iframe, .poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.poster { background-size: cover; background-position: center; display: grid; place-items: center; padding: 0; }
.poster .play { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 1.7rem; padding-left: 5px; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.clip figcaption { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 12px; }
.clip figcaption b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.15rem; }
.clip .credit { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }

/* ---------- for grown-ups ---------- */
details.fold { background: var(--paper-2); border-radius: 12px; padding: 8px 14px; margin: 14px 0; border: 2px dashed var(--line); font-size: 1rem; }
details.fold summary { cursor: pointer; font-weight: 800; padding: 4px 0; }
details.fold ul { padding-left: 1.2em; margin: .5em 0; }
details.fold li { margin: .35em 0; }
details.fold blockquote { margin: .6em 0; padding: .5em .8em; border-left: 4px solid var(--line); background: color-mix(in srgb, var(--paper) 70%, transparent); font-style: italic; }
details.fold cite { display: block; font-size: .85rem; color: var(--muted); font-style: normal; margin-top: .4em; }
details.fold .caveat { color: var(--muted); font-size: .9rem; }

/* ---------- the puppet drawing (built in puppet.js) ---------- */
.puppet.prince { --coat: #c22f2a; --coat2: #8d1f1b; --leg: #1e7a57; }
.puppet.princess { --coat: #dd5a97; --coat2: #a63a70; --leg: #7d44a8; }
.p-floor, .p-floorline { fill: none; stroke: none; }
.p-shadow { fill: rgba(0, 0, 0, .22); }
.p-leg { fill: none; stroke: var(--leg); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.p-foot { fill: #3a2418; }
.p-coat { fill: var(--coat); stroke: var(--coat2); stroke-width: 2; stroke-linejoin: round; }
.p-coat2 { fill: var(--coat2); stroke: var(--coat2); stroke-width: 2; stroke-linejoin: round; }
.p-sleeve { fill: none; stroke: var(--coat); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.p-gold { fill: none; stroke: #e9bd45; stroke-linecap: round; stroke-linejoin: round; }
.p-goldfill { fill: #e9bd45; stroke: #a97a12; stroke-width: 1; stroke-linejoin: round; }
.p-gem { fill: #2f9e77; }
.p-skin { fill: #fff5e8; stroke: #8a6a55; stroke-width: 1.5; }
.p-hair { stroke: #2a1a14; }
.p-hairfill { fill: #2a1a14; }
.p-flower { fill: #fff; stroke: #e58bb0; stroke-width: 1.2; }
.p-eye { fill: #2a1a14; }
.p-cheek { fill: #f29aa5; opacity: .7; }
.p-mouth { fill: none; stroke: #c0392b; stroke-width: 1.8; stroke-linecap: round; }
.p-coverfill { fill: #fdfdfb; stroke: #b9b2a6; stroke-width: 1.5; }
.p-covertie { stroke: #b3261e; stroke-width: 2.5; stroke-linecap: round; }
.p-string { fill: none; stroke: var(--string); stroke-width: 1.6; stroke-linecap: round; transition: opacity .2s; }
.puppet.dim .p-string:not(.hot) { opacity: .28; }
.p-string.hot { stroke: var(--hot); stroke-width: 3.6; }
.p-coilline { stroke: var(--string); stroke-width: 3; stroke-linecap: round; }
.p-bar { fill: var(--wood); stroke: var(--wood-2); stroke-width: 2; }
.p-barg.hot .p-bar { stroke: var(--hot); stroke-width: 4; }
.p-barhandg, .p-pinchg { pointer-events: none; }
.p-barhand { fill: var(--barhand); stroke: #fff; stroke-width: 2; }
.p-knuckle { stroke: rgba(255, 255, 255, .75); stroke-width: 2; stroke-linecap: round; }
.p-pinch { fill: var(--stringhand); stroke: #fff; stroke-width: 2; }
.p-pinchdot { fill: #fff; }
path.p-hit { fill: none; stroke: transparent; stroke-width: 20; pointer-events: stroke; cursor: pointer; }
rect.p-hit { fill: transparent; pointer-events: all; cursor: pointer; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .topbar { padding: 8px 10px; gap: 6px; }
  .topbar .logo { font-size: 1.1rem; }
  .topbar .progress { gap: 4px; }
  .topbar .progress a { width: 10px; height: 10px; border-width: 1.5px; }
  .iconbtn { padding: 6px 8px; }
  .navbar .btn { padding: 10px 16px; font-size: 1rem; }
  .nowstep p { font-size: 1.25rem; }
}
@media (max-width: 380px) { .topbar .logo .name, .navbar .pname { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }