/* Extracted from the original single-file index.html. */

/* ── tokens ────────────────────────────────────────────────────────── */
:root{
  --blush:#FFEDF4; --milk:#FFFFFF; --ink:#5E2340; --ink-soft:#96637E;
  --bubblegum:#F992BD; --bubblegum-deep:#DC5D95; --gold:#F3C868;
  --mint:#9FE2CB; --lilac:#D3BBF0;
  --sky:#A6D5EF; --ember:#F4A259;          /* cold and hot, for the thermometer */
  --ground:var(--blush); --surface:var(--milk); --surface-2:#FFE0EC;
  --text:var(--ink); --text-soft:var(--ink-soft);
  --line:#FFC7DD; --block-face:#FFFFFF; --block-edge:#FFD2E3;
  --shadow:22px 22px 0 rgba(220,93,149,.12);
  --shadow-sm:8px 8px 0 rgba(220,93,149,.14);
  --shadow-soft:0 14px 34px rgba(220,93,149,.2);
  --sprinkle:30%;
  --focus:#8A2E63;
  /* destructive actions. Kept as tokens because a hardcoded dark red is
     invisible on a dark theme, which is exactly what happened on moss. */
  --danger:#8A2E32; --danger-line:#C0453F; --danger-bg:#FDF2F2;
  --danger-bg-hover:#F7E1E1; --danger-strong:#C0453F; --danger-on-strong:#FFF6F6;
  --step--1:clamp(.82rem,.8rem + .2vw,.94rem);
  --step-0:clamp(1rem,.96rem + .3vw,1.13rem);
  --step-1:clamp(1.25rem,1.15rem + .6vw,1.5rem);
  --step-2:clamp(1.6rem,1.4rem + 1.1vw,2.15rem);
  --step-3:clamp(2.2rem,1.7rem + 2.6vw,3.6rem);
  --wobble:255px 18px 225px 18px/18px 225px 18px 255px;
  --wobble-alt:18px 225px 18px 255px/255px 18px 225px 18px;
}
/* One light world, no dark variant — but each quest wears its own colour.
   The hub keeps whichever was last applied, so returning from a quest does
   not snap back to pink. Themes only re-point the tokens above. */

:root[data-theme="beige"]{
  --blush:#F7F1E6; --milk:#FFFDF9;
  --ink:#4A3524; --ink-soft:#8A7358;
  --bubblegum:#E9CBA4; --bubblegum-deep:#A9743F;
  --gold:#E8B34A; --mint:#BFD8C0; --lilac:#D8C6B0;
  --sky:#B7D2E2; --ember:#DE9354;
  --ground:var(--blush); --surface:var(--milk); --surface-2:#F1E7D7;
  --text:var(--ink); --text-soft:var(--ink-soft);
  --line:#E3D3B9; --block-face:var(--milk); --block-edge:#EADCC6;
  --shadow:22px 22px 0 rgba(169,116,63,.12);
  --shadow-sm:8px 8px 0 rgba(169,116,63,.14);
  --shadow-soft:0 14px 34px rgba(169,116,63,.18);
  --focus:#7A5230;
}

/* The stamp book's world: matte forest green, the one dark room on the site.
   Same tokens, re-pointed — so every component that was built for pink works
   here without knowing about it. Text goes light, paper goes green, and the
   pink accents stay pink because they still read on this ground. */

:root[data-theme="moss"]{
  --blush:#1E3227; --milk:#2A4335;
  --ink:#EDF3E7; --ink-soft:#A9BCA6;
  --bubblegum:#F0A0C0; --bubblegum-deep:#F6BCD3;
  --gold:#F3C868; --mint:#9FE2CB; --lilac:#CDB6EA;
  --sky:#9CC8E4; --ember:#EFA163;
  --ground:var(--blush); --surface:var(--milk); --surface-2:#33513F;
  --text:var(--ink); --text-soft:var(--ink-soft);
  --line:#41654E; --block-face:#33513F; --block-edge:#4C7259;
  --shadow:22px 22px 0 rgba(0,0,0,.20);
  --shadow-sm:8px 8px 0 rgba(0,0,0,.24);
  --shadow-soft:0 14px 34px rgba(0,0,0,.30);
  --sprinkle:14%;
  --focus:#D7EEDD;
  /* light red on a dark red-brown, so the button reads before it is hovered */
  --danger:#FFC7C4; --danger-line:#E09A95; --danger-bg:#3D2B2A;
  --danger-bg-hover:#4E3634; --danger-strong:#C0453F; --danger-on-strong:#FFF6F6;
}

/* The eclipse's world: twilight. Its own theme because the game changes the
   page as it runs — data-sky is set on the root while that quest is mounted,
   and each sky re-points the same tokens, so the top bar and the footer go
   dark with the picture instead of sitting there in daylight. */

:root[data-theme="dusk"]{
  --blush:#1A1636; --milk:#241E45;
  --ink:#F4ECFF; --ink-soft:#B4A9D8;
  --bubblegum:#F0A0C0; --bubblegum-deep:#FFC4DB;
  --gold:#F6C177; --mint:#9FE2CB; --lilac:#CDB6EA;
  --sky:#9CC8E4; --ember:#F0A163;
  --ground:var(--blush); --surface:var(--milk); --surface-2:#2C2552;
  --text:var(--ink); --text-soft:var(--ink-soft);
  --line:#3E3570; --block-face:#2C2552; --block-edge:#463C7C;
  --shadow:22px 22px 0 rgba(0,0,0,.28);
  --shadow-sm:8px 8px 0 rgba(0,0,0,.3);
  --shadow-soft:0 14px 34px rgba(0,0,0,.4);
  --sprinkle:10%;
  --focus:#EAD9FF;
}

/* pine — the bird quest: cream ground, bark ink, cone brown and larch gold */
:root[data-theme="pine"]{
  --blush:#F6EFE3; --milk:#FFFAF1;
  --ink:#3D2B1C; --ink-soft:#6E5842;
  --bubblegum:#8A5A2B; --bubblegum-deep:#6B4420;
  --gold:#C9A227; --mint:#7FA05A; --lilac:#B08968;
  --sky:#8FB0C4; --ember:#E0945F;
  --ground:var(--blush); --surface:var(--milk); --surface-2:#EFE3D0;
  --text:var(--ink); --text-soft:var(--ink-soft);
  --line:#D9C7AC; --block-face:#EFE3D0; --block-edge:#D9C7AC;
  --shadow:22px 22px 0 rgba(61,43,28,.16);
  --shadow-sm:8px 8px 0 rgba(61,43,28,.18);
  --shadow-soft:0 14px 34px rgba(61,43,28,.18);
  --sprinkle:10%;
  --focus:#8A5A2B;
}

/* the sky the page is wearing, set by the game and removed when it unmounts */
:root[data-sky="eclipse"]{ --blush:#120F2C; --milk:#1C1740; --line:#332B60 }
:root[data-sky="night"]{
  --blush:#05061A; --milk:#0E1130; --line:#242A54;
  --ink:#EAF0FF; --ink-soft:#96A0CC;
}
:root[data-sky="glare"]{
  --blush:#FFFDF6; --milk:#FFFFFF; --line:#F1E7D0;
  --ink:#4A3A22; --ink-soft:#9A8A6E; --bubblegum-deep:#C08A5A; --focus:#8A6A3A;
}
body{transition:background-color 1.3s ease, color 1.3s ease}
@media (prefers-reduced-motion: reduce){ body{transition-duration:.25s} }

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

/* The UA rule for [hidden] is display:none, but ANY author rule that sets a
   display beats it — so .cone-mode{display:flex} silently made hidden a
   no-op. Stating it here once stops that recurring for every new component
   that toggles the attribute. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--text);
  font:400 var(--step-0)/1.65 Nunito,"Trebuchet MS",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--bubblegum) var(--sprinkle), transparent) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 22%, color-mix(in srgb,var(--lilac) var(--sprinkle), transparent) 0 5px, transparent 6px),
    radial-gradient(circle at 64% 72%, color-mix(in srgb,var(--gold) var(--sprinkle), transparent) 0 5px, transparent 6px),
    radial-gradient(circle at 28% 88%, color-mix(in srgb,var(--mint) var(--sprinkle), transparent) 0 6px, transparent 7px);
  background-size:460px 460px,540px 540px,400px 400px,500px 500px;
  overflow-x:hidden;
}
.shell{width:min(100% - 2rem,64rem); margin-inline:auto; padding-block:clamp(1.5rem,4vw,3rem) 4rem}
section{margin-block-start:clamp(3rem,7vw,5.5rem)}

h1,h2,h3,.blocknum{font-family:Grandstander,"Comic Sans MS",Nunito,sans-serif; text-wrap:balance; margin:0}
.crayon{font-family:Caveat,"Bradley Hand",cursive; font-weight:700}
.eyebrow{
  font-family:Caveat,cursive; font-weight:700; font-size:1.35rem;
  color:var(--bubblegum-deep); letter-spacing:.02em; margin:0 0 .35rem;
  display:flex; align-items:center; gap:.5rem; justify-content:center;
}
.eyebrow::before,.eyebrow::after{content:""; height:2px; width:clamp(1.5rem,8vw,4rem); background:var(--line); border-radius:2px}

/* ── tapping and focusing ──────────────────────────────────────────── */
/* The browser paints a translucent blue flash over anything tapped, and a
   blue selection over any label text dragged across. Neither belongs on this
   page — the buttons already say they were pressed, in their own colours.
   Generalised from the cone game, which asked for it first. */
button, a, label, summary, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color:transparent;
}
button, a.play-btn, summary, [role="button"], label {
  user-select:none; -webkit-user-select:none;
}
/* Kept away from anything you might actually want to select from. */
input, textarea, select { user-select:auto; -webkit-user-select:auto }

/* A mouse click leaves no ring; a keyboard still gets one. Doing it this way
   round means no control is ever left without a focus indicator, which a
   blanket outline:none on :focus would have done to the few that rely on
   this default. */
:focus:not(:focus-visible) { outline:none }
button:focus-visible, a:focus-visible, summary:focus-visible,
[role="button"]:focus-visible {
  outline:3px dashed var(--focus); outline-offset:3px;
}

/* ── the plain icon set (no emoji anywhere on this page) ───────────── */
.ico{
  width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico.solid{fill:currentColor; stroke:none}


/* ── footer ────────────────────────────────────────────────────────── */
footer{
  margin-top:clamp(3rem,7vw,5rem); text-align:center;
  font-family:Caveat,cursive; font-weight:700; font-size:1.25rem; color:var(--text-soft);
}
footer .seal{font-size:2.2rem; display:block; margin-bottom:.2rem; color:var(--bubblegum-deep)}



canvas#fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50}
.shake{animation:shake .5s}
@keyframes shake{
  10%,90%{transform:translate(-2px,1px) rotate(-.4deg)}
  30%,70%{transform:translate(5px,-3px) rotate(.7deg)}
  50%{transform:translate(-6px,2px) rotate(-.8deg)}
}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}