/* ---------- Tokens ----------
   Soft colored-pencil palettes around the kitty in the frog hood: light paper,
   a two-color gingham, pastel buttons with dark lettering and a light menu.
   Blue is the site's own; green and pink are picked in Settings (kept in
   localStorage as froggy-theme) and set as data-theme on <html>. */

:root {
  /* blue: pond water and sky */
  --paper: #f2f8fd;
  --paper-deep: #e0eef8;
  --plate: #fbfdff;
  --card: #ffffff;
  --ink: #2a3f55;
  --ink-soft: #5b6f83;
  --line: rgba(42, 63, 85, .13);
  --shade: 42, 63, 85;           /* shadows, as r, g, b */

  --peach: #9fd0f0;              /* decoration */
  --peach-text: #3f86c4;         /* large accent type */
  --rust: #3a7bb5;               /* small accent text and outlines */
  --sage: #dcf2cf;               /* bands */
  --pink: #ffd3dd;
  --butter: #fff0a6;

  --btn: #9ccdf1;                /* pastel buttons, START */
  --btn-top: #bbdcf6;
  --btn-edge: #649fcd;
  --btn-ink: #1d3550;

  --menu: #d9eaf8;               /* the menu and the phone tab bar */
  --menu-ink: #2a3f55;
  --menu-soft: #5b6f83;
  --menu-hover: rgba(42, 63, 85, .07);
  --menu-current: rgba(255, 255, 255, .7);

  --ging-bg: #f8fcff;
  --ging-a: rgba(140, 195, 240, .32);
  --ging-b: rgba(255, 232, 140, .45);
  --ging-bg-soft: #f6fbff;
  --ging-a-soft: rgba(140, 195, 240, .17);
  --ging-b-soft: rgba(255, 232, 140, .26);
  --scrim: rgba(25, 40, 60, .35);
  --glow: rgba(159, 208, 240, .55);

  --font-display: "Sniglet", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 18px;
  --panel-radius: clamp(22px, 3.5vw, 40px);
  --shadow-sm: 0 1px 2px rgba(var(--shade), .06), 0 6px 16px -8px rgba(var(--shade), .18);
  --shadow-lg: 0 2px 4px rgba(var(--shade), .06), 0 24px 48px -20px rgba(var(--shade), .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  color-scheme: light;
}

/* green: lily pads and sunshine */
:root[data-theme="green"] {
  --paper: #f6fbef;  --paper-deep: #e6f3d8;  --plate: #fcfef9;
  --ink: #2b4434;  --ink-soft: #5d7563;  --line: rgba(43, 68, 52, .13);  --shade: 43, 68, 52;
  --peach: #a8dc8f;  --peach-text: #4c9a5c;  --rust: #3f8a50;  --sage: #d7eefa;
  --btn: #9dd8a8;  --btn-top: #b9e6c1;  --btn-edge: #66b076;  --btn-ink: #1f3a28;
  --menu: #ddf0d0;  --menu-ink: #2b4434;  --menu-soft: #5d7563;  --menu-hover: rgba(43, 68, 52, .07);
  --ging-bg: #fbfff4;  --ging-a: rgba(160, 215, 130, .34);  --ging-b: rgba(255, 232, 140, .45);
  --ging-bg-soft: #f9fdf3;  --ging-a-soft: rgba(160, 215, 130, .18);  --ging-b-soft: rgba(255, 232, 140, .26);
  --scrim: rgba(30, 50, 35, .35);  --glow: rgba(168, 220, 143, .5);
}

/* pink: strawberry milk and mint */
:root[data-theme="pink"] {
  --paper: #fdf4f7;  --paper-deep: #f7e1e9;  --plate: #fffbfc;
  --ink: #4a2e3a;  --ink-soft: #7a5b67;  --line: rgba(74, 46, 58, .13);  --shade: 74, 46, 58;
  --peach: #f4a9c0;  --peach-text: #c25479;  --rust: #b24f6e;  --sage: #d6f0d4;  --pink: #ffc9d8;
  --btn: #f6aac2;  --btn-top: #f9c6d6;  --btn-edge: #d67c9b;  --btn-ink: #4a1f30;
  --menu: #fbdfe8;  --menu-ink: #4a2e3a;  --menu-soft: #7a5b67;  --menu-hover: rgba(74, 46, 58, .07);
  --ging-bg: #fffafc;  --ging-a: rgba(245, 165, 192, .3);  --ging-b: rgba(175, 222, 175, .32);
  --ging-bg-soft: #fffafc;  --ging-a-soft: rgba(245, 165, 192, .16);  --ging-b-soft: rgba(175, 222, 175, .18);
  --scrim: rgba(60, 30, 42, .35);  --glow: rgba(244, 169, 192, .55);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pink); color: var(--ink); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.hand {
  display: inline-block;
  margin: 0;
  font: 700 1.6rem/1 var(--font-hand);
  color: var(--rust);
  rotate: -2deg;
}

.icon { width: 1.15em; height: 1.15em; }

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.skip:focus { top: 12px; }

/* a pink-and-butter gingham, woven from two sets of see-through stripes */
.gingham {
  background-color: var(--ging-bg);
  background-image:
    linear-gradient(90deg, var(--ging-a) 50%, transparent 0),
    linear-gradient(var(--ging-b) 50%, transparent 0);
  background-size: 30px 30px;
}

.plate {
  border-radius: var(--radius);
  background: var(--plate);
  box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .85em 1.45em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 700 .98rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(var(--shade), .5); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { border-color: var(--btn-edge); background: var(--btn); color: var(--btn-ink); }
.btn-small { padding: .6em 1.1em; font-size: .92rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.header-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  height: 72px;
}

.logo {
  display: inline-flex;
  align-items: flex-end;
  gap: .4rem;
  color: var(--peach-text);
  font: 400 clamp(1.35rem, 3.4vw, 1.75rem)/1 var(--font-display);
  text-decoration: none;
  white-space: nowrap;
}
.logo-mark { width: 30px; height: 30px; margin-bottom: .04em; transform-origin: 50% 100%; }
.logo:hover .logo-mark { animation: sway .9s var(--ease); }
@keyframes sway { 30% { rotate: -9deg; } 65% { rotate: 6deg; } }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); margin-left: auto; }
.nav a:not(.btn) {
  position: relative;
  color: var(--ink-soft);
  font-weight: 700;
  text-decoration: none;
}
.nav a:not(.btn):hover { color: var(--rust); }
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--peach);
  scale: 0 1;
  transform-origin: left;
  transition: scale .3s var(--ease);
}
.nav a:not(.btn):hover::after { scale: 1 1; }

@media (max-width: 900px) { .nav a:not(.btn) { display: none; } }
@media (max-width: 520px) { .nav .btn { display: none; } }
/* sign in, unlock or account: on every screen */
.nav .club-btn { display: inline-flex; flex-shrink: 0; gap: .45em; }
.club-btn .icon { width: 1.1em; height: 1.1em; }
/* on a phone, just the little person */
@media (max-width: 520px) {
  .nav .club-btn { width: 40px; height: 40px; padding: 0; }
  .club-btn .club-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(10px, 2vw, 22px) clamp(36px, 5vw, 64px); }

.hero-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(560px, 76vh, 740px);
  padding: clamp(18px, 4vw, 56px);
  border-radius: var(--panel-radius);
}

/* the plate in the middle, with START on it */
.hero-text {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  padding: clamp(28px, 4.5vw, 52px) clamp(22px, 4vw, 52px) clamp(40px, 5vw, 60px);
  text-align: center;
}
.hero-kicker { margin-bottom: .9rem; }

.hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
.hero h1 .name {
  position: relative;
  z-index: 0;
  color: var(--peach-text);
  white-space: nowrap;
}
.name-underline {
  position: absolute;
  z-index: -1;
  left: -3%;
  bottom: -.02em;
  width: 106%;
  height: .28em;
  overflow: visible;
}
.name-underline path {
  fill: none;
  stroke: var(--pink);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  animation: draw 1s .45s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.lede {
  max-width: 34ch;
  margin: 1.1rem auto 2.1rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}

/* START: big and crisp, with a pastel rainbow ring turning around it and the
   same rainbow glowing behind, breathing gently, and a shine running across
   now and then, so it's the first thing a child sees */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.start {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  border-radius: 999px;
  color: var(--btn-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  animation: breathe 2.4s ease-in-out infinite;
}
.start::before,
.start::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  background: conic-gradient(from var(--spin), #f2899a, #fbb36b, #fbe29a, #a7d17f, #8fcdea, #a98bdf, #f2899a);
  animation: spin 4s linear infinite;
}
.start::before { z-index: -1; }
.start::after { z-index: -2; filter: blur(18px); animation: spin 4s linear infinite, glow 2.4s ease-in-out infinite; }
.start-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: .42em;
  overflow: hidden;
  padding: .3em 1em .32em .55em;
  border-radius: 999px;
  background: linear-gradient(var(--btn-top), var(--btn));
  font: 400 clamp(2.2rem, 5.4vw, 3.5rem)/1 var(--font-display);
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 var(--btn-edge);
  transition: transform .2s var(--spring);
}
.start-play {
  display: grid;
  place-items: center;
  width: .86em;
  height: .86em;
  border-radius: 50%;
  background: #fff;
}
.start-play::before {
  content: "";
  margin-left: .07em;
  border-left: .3em solid var(--btn-edge);
  border-top: .19em solid transparent;
  border-bottom: .19em solid transparent;
}
.start-face::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: shine 3.6s ease-in-out infinite;
}
.start:hover .start-face { transform: translateY(-2px); }
.start:active .start-face { transform: scale(.96); }
.start:focus-visible { outline: none; }
.start:focus-visible .start-face { outline: 4px solid var(--ink); outline-offset: 10px; }

.start-spark { position: absolute; fill: #ffd54f; pointer-events: none; animation: twinkle 1.6s ease-in-out infinite; }
.start-spark.s1 { width: 28px; height: 28px; top: -26px; right: -18px; }
.start-spark.s2 { width: 20px; height: 20px; bottom: -18px; left: -22px; fill: #f2899a; animation-delay: -.6s; }
.start-spark.s3 { width: 15px; height: 15px; top: -22px; left: 22%; fill: #8fcdea; animation-delay: -1.1s; }

@keyframes breathe { 50% { scale: 1.04; } }
@keyframes spin { to { --spin: 360deg; } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes shine { 0%, 55% { left: -70%; } 85%, 100% { left: 130%; } }

/* colored-in pages taped on around the plate, one in each corner */
.hero-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.card {
  position: absolute;
  width: clamp(170px, 21vw, 270px);
  margin: 0;
  padding: 10px 10px 40px;
  border-radius: 5px;
  background: var(--card);
  box-shadow: 0 2px 4px rgba(var(--shade), .1), 0 22px 40px -16px rgba(var(--shade), .45);
  text-decoration: none;
  pointer-events: auto;
  transition: transform .5s var(--spring);
  animation: bob 7s ease-in-out infinite;
}
.card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 1;
  width: 84px;
  height: 25px;
  translate: -50% 0;
  rotate: -5deg;
  background: color-mix(in srgb, var(--butter) 80%, transparent);
  box-shadow: 0 1px 2px rgba(var(--shade), .08);
}
.card-1 { left: 2.5%; top: 6%; rotate: -8deg; animation-delay: -1s; }
.card-2 { right: 2.5%; top: 5%; rotate: 7deg; animation-delay: -3.5s; }
.card-3 { left: 3.5%; bottom: 6%; rotate: 5deg; animation-delay: -5.5s; }
.card-4 { right: 3.5%; bottom: 7%; rotate: -5deg; animation-delay: -2.2s; }
.card-2::before { background: color-mix(in srgb, var(--sage) 90%, transparent); rotate: 4deg; }
.card-3::before { background: color-mix(in srgb, var(--pink) 85%, transparent); rotate: 3deg; }
.card-4::before { background: color-mix(in srgb, var(--butter) 80%, transparent); }
.card:hover { transform: translateY(-6px) scale(1.04); }
/* each page starts as a blank coloring page; then a crayon runs across it and
   the colors come in behind it, one page after another, over and over */
.card-pic { position: relative; display: block; overflow: hidden; border-radius: 3px; }
.card-pic img { width: 100%; aspect-ratio: 4 / 3; background: #fff; }
.card-color {
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(100deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  mask: linear-gradient(100deg, #000 40%, transparent 60%) 0 0 / 250% 100% no-repeat;
  animation: color-in 9s ease-in-out both infinite;
  animation-delay: var(--at);
}
.card-crayon {
  position: absolute;
  left: 125%;
  top: 40%;
  width: 34px;
  height: 42px;
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(var(--shade), .3));
  animation: crayon-across 9s ease-in-out both infinite, scribble .32s ease-in-out infinite alternate;
  animation-delay: var(--at), 0s;
}
.card-1 { --at: .5s; }
.card-2 { --at: 2.7s; }
.card-4 { --at: 4.9s; }
.card-3 { --at: 7.1s; }
@keyframes color-in {
  0%, 12% { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 1; }
  34%, 86% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; }
  96% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 0; }
  100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; }
}
@keyframes crayon-across {
  0%, 12% { left: -25%; opacity: 0; }
  14%, 31% { opacity: 1; }
  34%, 100% { left: 105%; opacity: 0; }
}
@keyframes scribble { from { translate: 0 -28px; rotate: -8deg; } to { translate: 0 28px; rotate: 8deg; } }
.card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  color: var(--ink);
  font: 700 1.45rem/1 var(--font-hand);
  text-align: center;
  rotate: -2deg;
}

@keyframes bob { 50% { translate: 0 -8px; } }

.doodle { position: absolute; fill: var(--peach); pointer-events: none; animation: twinkle 4.5s ease-in-out infinite; }
.hero-panel .d1 { width: 26px; height: 26px; top: 22px; left: 31%; }
.hero-panel .d2 { width: 18px; height: 18px; bottom: 24px; left: 64%; fill: #f2899a; animation-delay: -2s; }
@keyframes twinkle { 50% { scale: .7; rotate: 45deg; } }

/* narrower screens: the plate on top, two of the pages in a row under it */
@media (max-width: 900px) {
  .hero-panel { display: flex; flex-direction: column; align-items: center; min-height: 0; }
  .hero-art { position: relative; inset: auto; display: flex; justify-content: center; gap: 4%; width: 100%; margin-top: 26px; }
  .card { position: relative; inset: auto; width: min(44%, 240px); }
  .card-3, .card-4 { display: none; }
  .hero-panel .d1 { display: none; }
}

/* ---------- Why us ----------
   Laid out the way porkbun.com opens: the big claim, a line of what's inside,
   the star ratings, then the selling points in a row of cards. */

.why { padding-block: clamp(8px, 2vw, 24px) clamp(48px, 7vw, 96px); }
.why h2 { max-width: 20ch; font-size: clamp(2.1rem, 5vw, 3.6rem); }
.why-sub {
  max-width: 52ch;
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
}
.why-sub b { color: var(--ink); font-weight: 800; }

.rating-row { display: flex; flex-wrap: wrap; gap: 22px clamp(36px, 6vw, 72px); margin-top: clamp(26px, 3.5vw, 40px); }
.rating {
  --star: clamp(20px, 5.6vw, 26px);
  --gap: calc(var(--star) * .12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin: 0;
}
.rating p { margin: 0; }
.rating .score { font: 800 clamp(1.15rem, 2vw, 1.45rem)/1 var(--font-body); }
.rating .who { font: 400 1.25rem/1 var(--font-display); color: color-mix(in srgb, var(--colour) 60%, var(--ink)); }
.rating .from { font-size: .85rem; color: var(--ink-soft); }

.stars { position: relative; display: block; line-height: 0; }
.stars-back, .stars-front { display: flex; gap: var(--gap); }
.stars-back { color: var(--line); }
/* only as wide as the score: whole stars, then part of the next one */
.stars-front {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: calc(var(--whole) * (var(--star) + var(--gap)) + var(--part) * var(--star));
  color: var(--colour);
}
.stars svg { width: var(--star); height: var(--star); }
.stars path { fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.point {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.point p { margin: 0; color: var(--ink-soft); }
.point-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: .4rem;
  border-radius: 50%;
  background: var(--butter);
  color: var(--rust);
  fill: var(--rust);
}
.point:nth-child(3n + 2) .point-icon { background: var(--pink); }
.point:nth-child(3n) .point-icon { background: var(--sage); }
.point-icon svg { width: 28px; height: 28px; }

@media (max-width: 900px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .points { grid-template-columns: 1fr; } }

/* ---------- Ticker ---------- */

.ticker-wrap { overflow-x: clip; padding-block: 14px; }

.ticker {
  margin-inline: -24px;
  padding: 14px 0;
  overflow: hidden;
  background: var(--sage);
  color: var(--ink);
  rotate: -1deg;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
  font: 400 clamp(1.2rem, 2.2vw, 1.65rem)/1.1 var(--font-display);
}
.ticker-track span { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; white-space: nowrap; }
.ticker-track svg { width: .65em; height: .65em; fill: var(--peach); }
.ticker-track svg:nth-of-type(2n) { fill: #f2899a; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { padding-top: 0; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  margin-bottom: clamp(26px, 4vw, 48px);
}

/* ---------- The pictures ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

.chip {
  padding: .6em 1.1em;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--plate);
  color: var(--ink-soft);
  font: 700 .93rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--peach); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* the worlds: a big round button each, with its picture and its name;
   they wrap on a wide page, and make one row to swipe along on a phone */
.worlds { display: flex; flex-wrap: wrap; gap: 16px 10px; margin-bottom: 24px; }
.world {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 98px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.world-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: inset 0 0 0 2px rgba(var(--shade), .07), var(--shadow-sm);
  font-size: 2.6rem;
  line-height: 1;
  transition: transform .35s var(--spring), box-shadow .2s;
}
.world-icon img { display: block; width: 78%; height: 78%; border-radius: 26%; }
.world:hover .world-icon { transform: translateY(-3px) rotate(-5deg); }
.world:active .world-icon { transform: scale(.93); }
.world[aria-pressed="true"] .world-icon { box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--ink), var(--shadow-sm); }
.world-name { font: 400 .98rem/1.15 var(--font-display); text-align: center; }
/* what's in season wears a little tag and bobs */
.world-now {
  position: absolute;
  top: -8px;
  right: -4px;
  padding: 1px 9px 3px;
  border-radius: 999px;
  background: var(--rust);
  color: #fff;
  font-size: 1.15rem;
  rotate: 12deg;
}
.world.now .world-icon { animation: world-bob 2.4s ease-in-out infinite; }
@keyframes world-bob { 50% { transform: translateY(-4px) rotate(4deg); } }
.parts { margin-top: -8px; }
.parts[hidden] { display: none; }

@media (max-width: 700px) {
  .worlds {
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 10px var(--gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .worlds::-webkit-scrollbar { display: none; }
  .world { flex: none; width: 78px; scroll-snap-align: start; }
  .world-icon { width: 68px; height: 68px; font-size: 2.1rem; }
  .world-name { font-size: .88rem; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}

.pic { position: relative; }
.pic[hidden] { display: none; }
.pic-link {
  display: block;
  padding: 10px 10px 0;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pic:nth-child(3n + 1) .pic-link { rotate: -.6deg; }
.pic:nth-child(3n + 2) .pic-link { rotate: .5deg; }
.pic-link:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-lg); }
.pic-sheet {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  /* a faint edge, like a sheet of paper */
  box-shadow: inset 0 0 0 1px var(--line);
}
.pic-sheet img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the drawing lies over what's been colored, its white letting the color through */
.pic-lines { mix-blend-mode: multiply; }
.pic-paint[hidden] { display: none; }
.pic-name {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .7rem .3rem .8rem;
  font: 400 1.3rem/1.1 var(--font-display);
}
/* the size: one crayon for Little, two for Medium, three for Big kid */
.pic-size {
  position: absolute;
  top: 7px;
  left: 7px;
  display: flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: var(--shadow-sm);
}
.pic-size svg { width: 17px; height: 22px; }

/* a members' picture, for someone who isn't one: a faded preview and a padlock */
.locked .pic-lines { opacity: .55; }
.pic-lock {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--butter);
  color: var(--rust);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--spring);
}
.pic-lock svg { width: 22px; height: 22px; }
.locked .pic-link:hover .pic-lock { transform: rotate(-12deg) scale(1.08); }

/* make your own, from a photo: first in the grid */
.pic-make {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 230px;
  padding: 20px;
  border: 2.5px dashed var(--peach);
  border-radius: 14px;
  background: color-mix(in srgb, var(--plate) 70%, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: transform .4s var(--ease), background-color .3s, border-color .3s;
}
.grid > .pic-make[hidden] { display: none; }
.pic-make:hover { transform: translateY(-4px) rotate(.6deg); background: var(--plate); border-color: var(--rust); }
.pic-make-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--rust);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pink) 35%, transparent);
}
.pic-make-icon svg { width: 38px; height: 38px; }
.pic-make-name { font: 400 1.45rem/1.1 var(--font-display); }
.pic-remove {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 252, .92);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.pic-remove:hover { color: var(--ink); background: #fff; }
.pic-remove svg { width: 16px; height: 16px; }

/* the photo maker */
.maker-sheet {
  position: relative;
  margin: 0 auto 1.1rem;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  rotate: -1deg;
}
.maker-sheet canvas { display: block; width: 100%; max-height: 46dvh; object-fit: contain; aspect-ratio: 4 / 3; }
.maker-wait {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  margin: 0;
  background: rgba(255, 255, 255, .75);
  rotate: 0deg;
  font-size: 1.8rem;
}
.maker-sheet.working .maker-wait { display: grid; }
.maker-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto 1.3rem;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: .92rem;
}
.maker-detail span { white-space: nowrap; }
.maker-detail input { flex: 1; min-width: 0; accent-color: var(--rust); }
.maker-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.noscript { padding: 24px; border: 2px dashed var(--line); border-radius: var(--radius); text-align: center; }

/* ---------- For grown-ups: the parents community's page ---------- */

.parents-card { display: grid; gap: 26px; max-width: 760px; padding: clamp(24px, 4vw, 44px); }
.parents-page .heart { color: #e8638a; }
.parents-join { display: flex; flex-wrap: wrap; gap: 12px; }
.notes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 1.08rem; }
.notes li { position: relative; padding-left: 30px; }
.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 16px;
  height: 16px;
  background: var(--peach);
  clip-path: path("M8 0C8.7 4.8 11.2 7.3 16 8 11.2 8.7 8.7 11.2 8 16 7.3 11.2 4.8 8.7 0 8 4.8 7.3 7.3 4.8 8 0Z");
}
.notes li:nth-child(2n)::before { background: #f2899a; }
.notes b { color: var(--ink); }


/* ---------- Footer ---------- */

.site-footer { padding-block: 0 40px; color: var(--ink-soft); font-size: .93rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer-row p { margin: 0; }
.logo-small { font-size: 1.3rem; }
.made { margin: 28px auto 0; text-align: center; font-size: .8rem; opacity: .7; }
.made a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.made a:hover { color: var(--rust); text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .name-underline path { stroke-dashoffset: 0; }
  .card-crayon { display: none; }
}

/* ==================== The coloring page ==================== */

/* Laid out like chess.com: the menu down the left, the page filling the
   middle as soon as the site opens, ready to color, and a panel on the right
   with the pictures to pick from. Below that first screen, how it works and
   the note for grown-ups, for whoever scrolls on. */

.shell { --menu-w: 320px; display: grid; grid-template-columns: var(--menu-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .35s var(--ease); }
/* while coloring, one screen and nothing to scroll, so a stray swipe can't carry the page away */
html:has(body.playing), body.playing { overflow: hidden; overscroll-behavior: none; }
.home[hidden], .board[hidden] { display: none; }

/* the menu: chocolate, with little colored drawings for icons */
.side {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100vh;
  height: 100dvh;
  width: var(--menu-w);
  padding: 14px 10px 16px;
  overflow-y: auto;
  background: var(--menu);
  color: var(--menu-ink);
  transition: transform .35s var(--ease), visibility .35s;
}
.side-title { margin: 0; font-size: inherit; }
.side-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
  color: var(--menu-ink);
  font: 400 1.18rem/1.05 var(--font-display);
  text-decoration: none;
}
.side-logo .logo-mark { width: 42px; height: 42px; flex: none; }
/* the logo, and « beside it to slide the menu away */
.side-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.side-hide, .menu-show {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--menu-soft);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.side-hide { margin-top: 8px; }
.side-hide:hover, .menu-show:hover { background: var(--menu-hover); color: var(--menu-ink); }
.side-hide svg, .menu-show svg { width: 20px; height: 20px; }
/* while it's away, » at the top left brings it back */
.menu-show { display: none; }
@media (min-width: 641px) {
  html.menu-out .shell { grid-template-columns: 0px minmax(0, 1fr); }
  html.menu-out .side { transform: translateX(-100%); visibility: hidden; }
  html.menu-out .menu-show {
    display: grid;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 31;
    width: 46px;
    height: 46px;
    background: var(--menu);
    color: var(--menu-ink);
    box-shadow: var(--shadow-sm);
  }
  html.menu-out .studio-top { padding-left: 64px; }
}
/* More pictures, with the menu already there: the categories give a hop */
.side.flash .side-cat-icon { animation: cat-hop .7s var(--spring); }
.side.flash .side-cat:nth-child(3n + 2) .side-cat-icon { animation-delay: .08s; }
.side.flash .side-cat:nth-child(3n) .side-cat-icon { animation-delay: .16s; }
@keyframes cat-hop { 40% { transform: translateY(-8px) rotate(-6deg); } }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: 800 1.02rem/1.1 var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s;
}
.side-item:hover { background: var(--menu-hover); }
.side-item[aria-current] { background: var(--menu-current); box-shadow: var(--shadow-sm); }
.side-ico { flex: none; width: 32px; height: 32px; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); transition: transform .3s var(--spring); }
.side-item:hover .side-ico { transform: rotate(-8deg) scale(1.1); }
/* the parents community, in the menu */
.side-parents .side-label { line-height: 1.25; }
.side-parents .heart { color: #e8638a; }
/* My art, under the logo, with how many pictures are in it */
.side-mine-n {
  margin-left: auto;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rust);
  color: #fff;
  font-size: .82rem;
  text-align: center;
}
.side-mine-n[hidden] { display: none; }
/* search, in the menu between "Coloring pages" and the categories */
.side-search { flex: none; height: 46px; margin: 0 0 4px; padding-inline: 14px; }
.side-search input { font-size: .98rem; }
/* the categories: round buttons three to a row, like the ones over the
   pictures, scrolling on their own between Home and the foot of the menu
   when there are more than fit, and fading out at the bottom so that shows */
.side-cats {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 140px;
  margin: 4px -10px 4px;
  padding: 0 10px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--menu-hover) transparent;
  mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
}
.side-head { margin: 14px 0 8px 12px; color: var(--menu-soft); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.side-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 4px; padding-top: 10px; }
.side-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--menu-ink);
  text-decoration: none;
}
.side-cat-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: inset 0 0 0 2px rgba(var(--shade), .07), var(--shadow-sm);
  font-size: 2.4rem;
  line-height: 1;
  transition: transform .35s var(--spring), box-shadow .2s;
}
.side-cat-icon img { display: block; width: 78%; height: 78%; border-radius: 26%; }
.side-cat:hover .side-cat-icon { transform: translateY(-3px) rotate(-5deg); }
.side-cat:active .side-cat-icon { transform: scale(.93); }
.side-cat[aria-current] .side-cat-icon { box-shadow: 0 0 0 3px var(--menu), 0 0 0 5px var(--ink), var(--shadow-sm); }
.side-cat-name { font: 400 .92rem/1.1 var(--font-display); text-align: center; }
.side-cat .world-now { top: -7px; right: 2px; padding: 0 6px 2px; font-size: .9rem; }
.side-cat.now .side-cat-icon { animation: world-bob 2.4s ease-in-out infinite; }

/* Froggy says hello, at the top of the front page */
.froggy-hello { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 1rem; }
.froggy-hello-kitty { flex: none; width: 74px; height: 74px; transform-origin: 50% 90%; animation: froggy-wave 3.2s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(var(--shade), .18)); }
.froggy-bubble {
  position: relative;
  margin: 0;
  padding: .55em .9em .6em;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--peach);
  color: var(--rust);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.1;
  text-align: left;
  rotate: -2deg;
}
.froggy-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 16px;
  height: 16px;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--card);
  box-shadow: -2px 2px 0 0 var(--peach);
}
@keyframes froggy-wave { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -9deg; } 86% { rotate: 7deg; } 93% { rotate: -4deg; } }

/* ---------- A category's page ----------
   its round icon and name, then the library showing just its pictures (no
   search, no round buttons: the menu is where the other categories are) */

.cat-page[hidden] { display: none; }
.cat-page { padding-block: clamp(28px, 5vw, 64px); min-height: 100vh; }
.cat-head { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); margin-bottom: clamp(22px, 3vw, 34px); }
.cat-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(76px, 10vw, 108px);
  height: clamp(76px, 10vw, 108px);
  border-radius: 50%;
  background: var(--tint);
  box-shadow: inset 0 0 0 2px rgba(var(--shade), .07), var(--shadow-sm);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
}
.cat-icon img { display: block; width: 78%; height: 78%; border-radius: 26%; }
.cat-icon svg { width: 56%; height: 56%; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25)); }
.cat-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.cat-count { margin: .3rem 0 0; color: var(--ink-soft); }
.cat-count b { color: var(--rust); font-size: 1.15rem; font-weight: 800; }
.cat-page .search, .cat-page .lib-count, .cat-page .worlds { display: none; }
.cat-page .parts { margin: 0 0 28px; }

/* ---------- The account page ---------- */

.account-page[hidden] { display: none; }
.account-page { padding-block: clamp(28px, 5vw, 64px); min-height: 100vh; }
.account-head { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(22px, 3vw, 34px); }
.account-kitty { flex: none; width: 84px; height: 84px; filter: drop-shadow(0 4px 6px rgba(var(--shade), .18)); }
.account-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.account-card { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: clamp(20px, 3vw, 30px); }
.account-card h2 { font-size: 1.6rem; }
.account-card p { margin: 0; color: var(--ink-soft); }
.account-card p b { color: var(--ink); }
.account-settings { grid-column: 1 / -1; align-items: stretch; }
.account-settings .set-label { margin: 0; }
.account-settings .themes { max-width: 620px; }
.chunky.account-back { width: auto; margin-top: clamp(22px, 3vw, 34px); padding-inline: 1.4em; }
html.member .member-no, html:not(.member) .member-yes { display: none; }
@media (max-width: 760px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }

/* the foot of the menu: sign up and sign in, or the account once signed in */
.side-foot { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
html.signed-in .auth-out, html:not(.signed-in) .auth-in { display: none !important; }
.side-signup { background: var(--btn); color: var(--btn-ink); box-shadow: inset 0 -3px 0 var(--btn-edge); }
.side-signup:hover { background: var(--btn-top); }

/* on phones only: the logo, and signing up or in, at the top of the front page */
.phone-top { display: none; }
.side-promise {
  margin: auto 4px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--menu-current);
  color: var(--menu-soft);
  font-size: .82rem;
  line-height: 1.45;
}
.side-promise b { color: var(--menu-ink); }
.side-made { margin: 10px 4px 0; color: var(--menu-soft); font-size: .74rem; text-align: center; }
.side-made a { color: inherit; text-underline-offset: 3px; }
.side-made a:hover { color: var(--menu-ink); }
/* how many kids are coloring right now, under Sign in, with a green "live" dot */
.side-live {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 4px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--menu-current);
  color: var(--menu-soft);
  font-size: .82rem;
  line-height: 1.25;
}
.side-live[hidden] { display: none; }
.side-live b { color: var(--menu-ink); font-size: 1rem; font-weight: 800; }
.live-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #43b54a;
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  from { box-shadow: 0 0 0 0 rgba(67, 181, 74, .55); }
  to { box-shadow: 0 0 0 8px rgba(67, 181, 74, 0); }
}
.side :focus-visible { outline-color: #ffd54f; }

/* the first screen: the page, and the pictures beside it */
.main { min-width: 0; }
.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  height: 100vh;
  height: 100dvh;
  background-color: var(--ging-bg-soft);
  background-image:
    linear-gradient(90deg, var(--ging-a-soft) 50%, transparent 0),
    linear-gradient(var(--ging-b-soft) 50%, transparent 0);
  background-size: 34px 34px;
}

.studio {
  --c: #1e63c8;          /* the color in hand */
  --swatch: clamp(24px, min(4.4vh, 2.6vw), 40px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top top" "next kit" "stage kit";
  padding-left: 10px;
  min-width: 0;
  min-height: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

.studio-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 6px 2px 20px;
}
.studio-title {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.studio-title .hand { margin-right: .1em; font-size: .9em; }
.history { display: flex; gap: 10px; margin-left: auto; }
.finish-top { display: none; }

/* ---------- Settings: the colors to color in ---------- */

.settings-card h2 { margin: .3rem 0 1.2rem; }
.set-label { margin: 0 0 .7rem; font: 800 .82rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.theme-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 10px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  font: 400 1rem/1.1 var(--font-display);
  cursor: pointer;
  transition: transform .25s var(--spring), border-color .2s;
}
.theme-pick:hover { transform: translateY(-3px); }
.theme-pick[aria-checked="true"] { border-color: var(--rust); box-shadow: 0 0 0 3px var(--glow); }
/* each one shows its own colors whatever the page is in: the menu down the
   side, the gingham, and a button */
.theme-swatch {
  position: relative;
  display: block;
  height: 84px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(90deg, var(--ga) 50%, transparent 0) 0 0 / 18px 18px,
    linear-gradient(var(--gb) 50%, transparent 0) 0 0 / 18px 18px,
    var(--bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.theme-swatch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22%; background: var(--mn); }
.theme-swatch::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 18%;
  width: 48%;
  height: 24%;
  border-radius: 999px;
  background: var(--bt);
  box-shadow: inset 0 -3px 0 var(--ed);
}
.theme-pick[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rust) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 0 0 3px var(--plate);
}

/* a chunky button, like chess.com's big green Play */
/* the note for grown-ups, in its pop-up */
.info .notes { margin: 1rem 0 0; text-align: left; }
.info-made { margin: 1.4rem 0 0; color: var(--ink-soft); font-size: .82rem; opacity: .8; }
.info-made a { color: inherit; text-underline-offset: 3px; }

.chunky {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  width: 100%;
  padding: .62em 1em .68em;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(var(--btn-top), var(--btn));
  color: var(--btn-ink);
  font: 400 1.55rem/1 var(--font-display);
  box-shadow: 0 5px 0 var(--btn-edge), 0 12px 20px -8px rgba(var(--shade), .5);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.chunky:hover { filter: brightness(1.07); }
.chunky:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-edge); }
.chunky .icon { width: .9em; height: .9em; }

.tabbar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.scrim[hidden] { display: none; }

.round {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 252, .6), var(--shadow-sm);
  cursor: pointer;
  transition: transform .2s var(--spring), opacity .2s;
}
.round svg { width: 24px; height: 24px; }
.round:hover:not(:disabled) { transform: scale(1.07); }
.round:active:not(:disabled) { transform: scale(.94); }
.round:disabled { opacity: .4; cursor: default; }

.finish { padding: .8em 1.4em; font-size: 1.05rem; box-shadow: 0 0 0 4px rgba(255, 255, 252, .6); }

/* the page, as big as fits, at the drawing's 4:3 */
.stage {
  grid-area: stage;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 8px;
  container-type: size;
}
.page {
  position: relative;
  width: min(100cqw, 100cqh * 4 / 3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(var(--shade), .08), 0 20px 50px -18px rgba(var(--shade), .4);
  isolation: isolate;
  touch-action: none;
  cursor: crosshair;
}
.page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.page canvas:last-of-type { pointer-events: none; }
.page.brush { cursor: none; }
.page.loading canvas { visibility: hidden; }

/* where a mouse is about to paint, as big as the brush */
.ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  border: 2px solid rgba(var(--shade), .6);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .8);
  pointer-events: none;
}
.ring[hidden] { display: none; }

.page-wait {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  rotate: 0deg;
  font-size: 2rem;
}
.page.loading .page-wait { display: grid; }

/* a members' picture for someone who isn't one: the drawing to look at, the
   same as any page, with a big padlock in the middle and a button for a
   grown-up under it */
.page.locked { cursor: default; }
.page.loading .page-lock { visibility: hidden; }
.page-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  translate: -50% -48px;     /* the padlock's middle on the page's middle */
  white-space: nowrap;
}
.page.locked .page-lock { display: flex; }
.page-lock-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--butter);
  color: var(--rust);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--plate) 85%, transparent), var(--shadow-lg);
}
.page-lock-badge svg { width: 48px; height: 48px; }
.page-lock-badge.wiggle { animation: wiggle .5s var(--ease); }
@keyframes wiggle { 20% { rotate: -16deg; } 45% { rotate: 12deg; } 70% { rotate: -6deg; } }
.page-lock .btn { box-shadow: var(--shadow-lg); }
@container (max-width: 520px) {
  .page-lock { gap: 10px; translate: -50% -32px; }
  .page-lock-badge { width: 64px; height: 64px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--plate) 85%, transparent), var(--shadow-lg); }
  .page-lock-badge svg { width: 32px; height: 32px; }
}

/* how many other kids are coloring this picture right now, in the corner:
   it says so, then shrinks to the dot and the number (.quiet, from app.js).
   Paint goes straight through it. */
.together {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plate) 90%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  font-size: .85rem;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  animation: pop .4s var(--spring);
}
.together[hidden] { display: none; }
.together b { color: var(--ink); font-weight: 800; }
.together-text { overflow: hidden; max-width: 24em; transition: max-width .7s var(--ease), opacity .4s, margin .7s var(--ease); }
.together.quiet .together-text { max-width: 0; margin-left: -7px; opacity: 0; }
.together.quiet { padding-right: 10px; }
.page.loading .together { visibility: hidden; }

/* on a card: how many kids are coloring it right now */
.live-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font: 800 .82rem/1 var(--font-body);
}
.live-badge .live-dot { width: 8px; height: 8px; }
.next-pic .live-badge { top: 7px; right: 7px; display: flex; gap: 4px; padding: 2px 6px 2px 4px; font: 800 .7rem/1 var(--font-body); }
.next-pic .live-badge .live-dot { display: block; width: 7px; height: 7px; padding: 0; }

/* nothing to color with on a padlocked picture */
.studio.locked .kit > * { opacity: .4; filter: grayscale(.6); }   /* on phones .kit is display: contents */
.chunky:disabled { opacity: .5; filter: grayscale(.4); cursor: default; transform: none; }

/* the brush size: a tapering track with a dot of the color, as big as the brush */
.size {
  --v: .4;
  grid-area: size;
  position: relative;
  justify-self: center;
  align-self: center;
  width: 56px;
  height: min(300px, 56%);
  cursor: pointer;
  touch-action: none;
  /* on the whole slider, since the track's own outline would be clipped off with it */
  filter: drop-shadow(0 0 1px rgba(var(--shade), .45)) drop-shadow(0 2px 3px rgba(var(--shade), .18));
}
.size-track {
  position: absolute;
  inset: 0 6px;
  border-radius: 28px;
  background: var(--card);
  clip-path: polygon(0 0, 100% 0, 64% 100%, 36% 100%);
}
.size-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--paper-deep), transparent);
  opacity: .5;
}
.size-knob {
  --d: calc(16px + var(--v) * 26px);
  position: absolute;
  left: 50%;
  top: calc(21px + (1 - var(--v)) * (100% - 42px));
  width: var(--d);
  height: var(--d);
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px #fff, 0 2px 6px 2px rgba(var(--shade), .3);
  pointer-events: none;
}
.size:focus-visible { outline: none; }
.size:focus-visible .size-knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rust); }

/* the colors: a row under the page */
.colors {
  grid-area: colors;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px 0;
}
.swatch {
  position: relative;
  width: var(--swatch);
  height: var(--swatch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--s);
  box-shadow: inset 0 0 0 1px rgba(var(--shade), .18), 0 2px 4px rgba(var(--shade), .18);
  cursor: pointer;
  transition: transform .25s var(--spring), box-shadow .2s;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-checked="true"] {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--s), 0 4px 10px rgba(var(--shade), .3);
}
.swatch[data-light][aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink-soft), 0 4px 10px rgba(var(--shade), .3); }
/* any color at all, from a wheel */
.wheel {
  --s: #fff;
  background: conic-gradient(#e53935, #fb8c00, #fdd835, #7cb342, #4fc3f7, #1e63c8, #8e44ad, #f48fb1, #e53935);
  overflow: hidden;
}
.wheel::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--s);
  box-shadow: 0 0 0 2px #fff;
}
.wheel[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink-soft), 0 4px 10px rgba(var(--shade), .3); }

/* the any-color dialog the wheel opens: a rainbow disc and a dark-to-bright slider */
.anycolor { width: min(100vw - 24px, 400px); }
.anycolor-card h2 { margin: .3rem 0 1rem; font-size: clamp(1.6rem, 4.5vw, 2.1rem); }
.anycolor-disc {
  position: relative;
  width: min(100%, 260px, 42dvh);
  aspect-ratio: 1;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, var(--shadow-sm);
  cursor: crosshair;
  touch-action: none;
}
.anycolor-disc canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.anycolor-dim { position: absolute; inset: 0; border-radius: 50%; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.anycolor-knob {
  position: absolute;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--pick);
  box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.anycolor-light { margin-bottom: 1.2rem; }
.anycolor-light input {
  height: 22px;
  border-radius: 99px;
  background: linear-gradient(90deg, #000, var(--pick-top));
  box-shadow: inset 0 0 0 1px rgba(var(--shade), .18);
  appearance: none;
  -webkit-appearance: none;
}
.anycolor-light input::-webkit-slider-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pick); box-shadow: 0 0 0 4px #fff, 0 2px 6px rgba(0, 0, 0, .35);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.anycolor-light input::-moz-range-thumb {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--pick); box-shadow: 0 0 0 4px #fff, 0 2px 6px rgba(0, 0, 0, .35); cursor: pointer;
}
.anycolor-chip { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--pick); box-shadow: 0 0 0 2px #fff; }

/* the tools stand along the bottom; the one in hand comes up */
.tools {
  grid-area: tools;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0px, 1.2vw, 14px);
  height: 112px;
  overflow: hidden;
  padding: 0 12px;
}
.tool {
  position: relative;
  flex: none;
  width: 58px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tool svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translateY(54px);
  transition: transform .35s var(--spring);
  filter: drop-shadow(0 3px 2px rgba(var(--shade), .22));
}
.tool:hover svg { transform: translateY(44px); }
.tool[aria-checked="true"] svg { transform: translateY(8px); }
.tool:focus-visible { outline: none; }
.tool:focus-visible svg { filter: drop-shadow(0 0 0 var(--rust)) drop-shadow(0 0 3px var(--rust)); }

/* what to color next, in a row under the page */
.next {
  grid-area: next;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.next::-webkit-scrollbar { display: none; }
/* fading out at the end, so a cut-off picture reads as more to scroll to */
.next { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.next-label { flex: none; margin-right: 2px; font-size: 1.35rem; }
.next-pic {
  position: relative;
  flex: none;
  width: clamp(78px, 7.5vw, 112px);
  padding: 4px 4px 0;
  border: 0;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--spring), box-shadow .3s;
}
.next-pic:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: var(--shadow-lg); }
.next-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.next-pic.locked img { opacity: .55; }
.next-pic span { display: block; padding: 3px 2px 5px; overflow: hidden; font: 400 .82rem/1.1 var(--font-display); white-space: nowrap; text-overflow: ellipsis; }
.next-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  translate: -50% -80%;
  border-radius: 50%;
  background: var(--butter);
  color: var(--rust);
  box-shadow: var(--shadow-sm);
}
.next-lock svg { width: 15px; height: 15px; }

/* the colors and tools, in a tray to the right of the page */
@media (min-width: 641px) {
  .kit {
    --th: 38px;            /* how thick a tool is, lying down */
    grid-area: kit;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 4px 12px 2px;
    padding: 14px 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 252, .72);
    box-shadow: var(--shadow-sm);
  }
  .kit .colors {
    display: grid;
    grid-template-columns: repeat(4, var(--swatch));
    justify-content: center;
    gap: 9px;
    padding: 4px;
  }
  /* the brush size, lying across the tray between the colors and the tools */
  .kit .size { width: 100%; height: 40px; margin: -4px 0; }
  .kit .size-track { inset: 6px 0; clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 64%); }
  .kit .size-track::after { background: linear-gradient(90deg, transparent, var(--paper-deep)); }
  .kit .size-knob { left: calc(21px + var(--v) * (100% - 42px)); top: 50%; }
  .kit .tools {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    height: auto;
    padding: 0;
    overflow: visible;
  }
  .kit .tool { width: 100%; height: var(--th); }
  /* each tool drawn standing up, then laid down with its tip to the left;
     the shorter bucket moves along so all the handles line up on the right */
  .kit .tool svg {
    --push: 22px;
    width: var(--th);
    transform-origin: 0 0;
    transform: translate(calc(var(--push) + var(--extra, 0px)), var(--th)) rotate(-90deg);
    filter: drop-shadow(0 0 1.5px rgba(var(--shade), .3));
  }
  .kit .tool[data-tool="bucket"] svg { --extra: calc(var(--th) * 40 / 60); }
  .kit .tool:hover svg { --push: 12px; transform: translate(calc(var(--push) + var(--extra, 0px)), var(--th)) rotate(-90deg); }
  .kit .tool[aria-checked="true"] svg { --push: -10px; transform: translate(calc(var(--push) + var(--extra, 0px)), var(--th)) rotate(-90deg); }
  .kit .tool:focus-visible svg { filter: drop-shadow(0 0 3px var(--rust)); }
}

/* short screens (phones on their side): a smaller tray */
@media (min-width: 641px) and (max-height: 600px) {
  .studio { --swatch: 22px; }
  .kit { --th: 24px; gap: 8px; margin-bottom: 6px; padding: 8px 8px; }
  .kit .colors { grid-template-columns: repeat(6, var(--swatch)); gap: 5px; padding: 2px; }
  .kit .tools { gap: 1px; }
  .studio-top { padding-top: 6px; }
  .next { display: none; }
  .round { width: 38px; height: 38px; }
  .round svg { width: 19px; height: 19px; }
  .kit .size { height: 30px; margin: -2px 0; }
  .kit .size-knob { --d: calc(12px + var(--v) * 16px); }
}

/* narrower computers: a narrower menu, the categories still three to a
   row with their names, a little smaller */
@media (max-width: 1240px) {
  .shell { --menu-w: 276px; }
  .side-cat-grid { gap: 14px 2px; }
  .side-cat-icon { width: 64px; height: 64px; font-size: 2rem; }
  .side-cat-name { font-size: .82rem; }
}
/* tablets: narrower again */
@media (max-width: 900px) {
  .shell { --menu-w: 232px; }
  .side { padding-inline: 8px; }
  .side-cats { margin-inline: -8px; padding-inline: 8px; }
  .side-cat-grid { gap: 12px 2px; }
  .side-cat-icon { width: 54px; height: 54px; font-size: 1.7rem; }
  .side-cat-name { font-size: .74rem; }
  .side-search input { font-size: .9rem; }
}

/* Done is in the top bar everywhere */
.finish-top { display: inline-flex; }

/* phones: the menu is a bar along the bottom, like the chess.com app */
@media (max-width: 640px) {
  .phone-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--gutter) 2px;
  }
  .phone-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 400 1.3rem/1 var(--font-display); text-decoration: none; }
  .phone-logo .logo-mark { width: 38px; height: 38px; margin: 0; }
  .phone-auth { display: flex; align-items: center; gap: 14px; }
  .phone-auth .link-btn { font-size: .95rem; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* the menu slides in over the page, from Pictures */
  .shell { --menu-w: min(300px, 86vw); }
  .side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    transform: translateX(-105%);
    visibility: hidden;
    box-shadow: var(--shadow-lg);
  }
  html.menu-open .side { transform: none; visibility: visible; }
  .main { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .board { height: calc(100dvh - 62px - env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    display: flex;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--menu);
  }
  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: none;
    color: var(--menu-ink);
    font: 800 .72rem/1 var(--font-body);
    cursor: pointer;
  }
  .tab svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); }
  .tab span { white-space: nowrap; letter-spacing: -.01em; }
  @media (max-width: 400px) { .tab { font-size: .64rem; } .tab svg { width: 26px; height: 26px; } }
  .tab[aria-current] { background: var(--menu-current); }
  .kit { display: contents; }
  .studio {
    --swatch: 34px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "top" "next" "stage" "size" "colors" "tools";
  }
  .studio-top { padding: 10px 12px 2px; }
  .studio-title .hand { display: none; }
  .round { width: 42px; height: 42px; }
  .round svg { width: 21px; height: 21px; }
  .history { gap: 6px; }
  .finish { padding: .65em 1em; font-size: .95rem; }
  .size { width: min(280px, 70%); height: 40px; margin-top: 2px; }
  .size-track { inset: 6px 0; clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 64%); }
  .size-track::after { background: linear-gradient(90deg, transparent, var(--paper-deep)); }
  .size-knob { left: calc(21px + var(--v) * (100% - 42px)); top: 50%; }
  .colors { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; padding: 8px 12px; }
  .swatch { flex: none; }
  .tools { height: 90px; gap: 0; }
  .tool { width: 42px; }
  .tool svg { transform: translateY(44px); }
  .tool:hover svg { transform: translateY(38px); }
  .tool[aria-checked="true"] svg { transform: translateY(8px); }
}

/* ---------- Done ---------- */

.done {
  width: min(100vw - 24px, 640px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.done::backdrop {
  background: rgba(var(--shade), .45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.done[open] { animation: pop .45s var(--spring); }
@keyframes pop { from { opacity: 0; scale: .9; } }
.done-card {
  position: relative;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: clamp(22px, 4vw, 36px);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.done-card h2 { margin: .4rem 0 1.2rem; font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
.done-pic {
  width: 100%;
  max-height: 52dvh;
  object-fit: contain;
  margin: 0 auto 1.4rem;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  rotate: -1deg;
}
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.done-close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; }
.done-close svg { width: 20px; height: 20px; }
/* the members' dialog (members.js), dressed like the Done one */
.club { width: min(100vw - 24px, 480px); }
.club-card h2 { margin: .3rem 0 .8rem; font-size: clamp(1.6rem, 4.5vw, 2.1rem); }
.club-card p { margin: 0 0 1rem; line-height: 1.5; }
.club-pic {
  width: min(60%, 220px);
  margin: 0 auto 1rem;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  rotate: -2deg;
}
.club-pic[hidden] { display: none; }
.club-perks { margin: 0 auto 1rem; padding: 0; list-style: none; text-align: left; width: fit-content; }
.club-perks li { position: relative; padding: .25rem 0 .25rem 1.7rem; }
.club-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23411e06' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.club-card .club-price { margin-bottom: 1.2rem; color: var(--rust); font: 400 1.5rem/1 var(--font-display); }
.club-form { display: grid; gap: .6rem; margin-bottom: 1rem; }
.club-form label { line-height: 1.4; }
.club-row { display: flex; gap: 8px; justify-content: center; }
.club-row input {
  flex: 1;
  min-width: 0;
  max-width: 280px;
  padding: .75em 1em;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 600 1rem/1.2 var(--font-body);
}
.club-row input:focus { border-color: var(--peach); outline: none; box-shadow: 0 0 0 3px var(--glow); }
#club-a { max-width: 110px; text-align: center; font-size: 1.2rem; }
#club-code { max-width: 170px; text-align: center; font-size: 1.3rem; letter-spacing: .25em; }
.club-go { min-width: 12em; margin-bottom: 1rem; font-size: 1.08rem; }
.club-card .club-fine { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.club-card .club-error { margin: 1rem 0 0; color: #b3261e; font-weight: 700; }
.club-card .club-error[hidden] { display: none; }
.club-card section[hidden] { display: none; }
.club.busy .club-card { cursor: progress; }
.club .btn:disabled { opacity: .55; transform: none; box-shadow: none; cursor: progress; }

/* a button that reads like a link, inside a sentence */
.link-btn { padding: 0; border: 0; background: none; color: var(--rust); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.confetti { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; }


/* ---------- Search, and the library in the menu ---------- */

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  height: 50px;
  margin: 0 0 8px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px var(--line), var(--shadow-sm);
  color: var(--ink-soft);
  cursor: text;
}
.search:focus-within { box-shadow: inset 0 0 0 2px var(--rust), 0 0 0 4px var(--glow); }
.search svg { flex: none; width: 22px; height: 22px; }
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 1.05rem/1 var(--font-body);
  outline: none;
}
.search input::placeholder { color: var(--ink-soft); opacity: .8; font-weight: 600; }
.lib-count { margin: 0 0 14px 6px; color: var(--ink-soft); font-size: .95rem; }
.lib-count b { color: var(--rust); font-size: 1.15rem; font-weight: 800; }
.search-none { margin: 0; padding: 24px 16px; color: var(--ink-soft); text-align: center; }
.picker.searching .worlds, .picker.searching .parts { display: none; }


/* ==================== The toy look ====================
   Like START: things you can press look like chunky, glossy plastic toys,
   with a shine on top, a thicker edge underneath that they press down onto,
   and a little life when a pointer comes onto them. */

/* the round category buttons, in the menu, over the pictures and on a
   category's page: shiny toy balls with an edge, the emoji standing out */
.world-icon, .side-cat-icon, .cat-icon {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 50% 115%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 55%),
    var(--tint);
  box-shadow:
    inset 0 3px 1px rgba(255, 255, 255, .7),
    inset 0 -4px 2px rgba(0, 0, 0, .07),
    0 5px 0 color-mix(in srgb, var(--tint) 66%, #5b4636),
    0 12px 18px -8px rgba(var(--shade), .4);
  text-shadow: 0 3px 3px rgba(0, 0, 0, .22);
}
.world-icon img, .side-cat-icon img, .cat-icon img { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
/* Froggy & friends: the logo's kitty, standing in its ball */
.world-icon .icon-kitty, .side-cat-icon .icon-kitty, .cat-icon .icon-kitty { width: 80%; height: 80%; margin-top: 4%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
/* a shine runs across when a pointer comes on */
.world-icon::after, .side-cat-icon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.world:hover .world-icon::after, .side-cat:hover .side-cat-icon::after { animation: toy-shine .7s ease-out; }
@keyframes toy-shine { from { left: -80%; } to { left: 140%; } }
/* pressed down onto its edge */
.world:active .world-icon, .side-cat:active .side-cat-icon {
  transform: translateY(4px) scale(.97);
  box-shadow: inset 0 3px 1px rgba(255, 255, 255, .7), inset 0 -4px 2px rgba(0, 0, 0, .07), 0 1px 0 color-mix(in srgb, var(--tint) 66%, #5b4636), 0 4px 8px -4px rgba(var(--shade), .4);
}
/* the one that's open: a ring around it */
.world[aria-pressed="true"] .world-icon, .side-cat[aria-current] .side-cat-icon {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  box-shadow:
    inset 0 3px 1px rgba(255, 255, 255, .7),
    inset 0 -4px 2px rgba(0, 0, 0, .07),
    0 5px 0 color-mix(in srgb, var(--tint) 66%, #5b4636),
    0 12px 18px -8px rgba(var(--shade), .4);
}
.side-cat-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
/* the big one at the top of a category's page breathes, like START */
.cat-icon { animation: breathe 2.8s ease-in-out infinite; }

/* buttons: plastic, with a gloss and an edge */
.btn {
  border: 0;
  background: linear-gradient(#fff, #eef3f8);
  box-shadow: inset 0 0 0 2px rgba(var(--shade), .14), inset 0 2px 0 #fff, 0 4px 0 rgba(var(--shade), .2), 0 10px 16px -8px rgba(var(--shade), .35);
}
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--btn-top), var(--btn));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .06), 0 4px 0 var(--btn-edge), 0 10px 18px -8px rgba(var(--shade), .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-20deg);
  animation: shine 4.2s ease-in-out infinite;
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(var(--shade), .14), inset 0 2px 0 #fff, 0 6px 0 rgba(var(--shade), .2), 0 14px 20px -8px rgba(var(--shade), .35); }
.btn-primary:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .06), 0 6px 0 var(--btn-edge), 0 14px 22px -8px rgba(var(--shade), .5); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(var(--shade), .14), 0 1px 0 rgba(var(--shade), .2); }
.btn-primary:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 1px 0 var(--btn-edge); }

/* the round buttons (undo, redo, start over, close) */
.round { box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 rgba(var(--shade), .06), 0 4px 0 rgba(var(--shade), .16), 0 10px 16px -8px rgba(var(--shade), .35); }
.round:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 rgba(var(--shade), .16); }

/* the little buttons inside a category (Halloween, Pets, January…) */
.chip { border: 0; background: linear-gradient(#fff, #f1f5f9); box-shadow: inset 0 0 0 1.5px var(--line), 0 3px 0 rgba(var(--shade), .14); transition: transform .15s var(--spring), box-shadow .15s, background-color .2s, color .2s; }
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px var(--line), 0 1px 0 rgba(var(--shade), .14); }
.chip[aria-pressed="true"] { background: linear-gradient(color-mix(in srgb, var(--ink) 80%, #fff), var(--ink)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 3px 0 color-mix(in srgb, var(--ink) 70%, #000); }

/* the picture cards: chunky, with an edge, that bounce up a little */
.pic-link { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 5px 0 rgba(var(--shade), .09), 0 14px 24px -12px rgba(var(--shade), .4); transition: transform .35s var(--spring), box-shadow .35s; }
.pic-link:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 9px 0 rgba(var(--shade), .09), 0 22px 30px -12px rgba(var(--shade), .45); }
.pic-link:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 0 rgba(var(--shade), .09); }
.next-pic { box-shadow: 0 4px 0 rgba(var(--shade), .09), 0 10px 16px -8px rgba(var(--shade), .35); }
.next-pic:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(var(--shade), .09); }
.plate { box-shadow: 0 6px 0 rgba(var(--shade), .05), var(--shadow-sm); }

/* the colors: shiny marbles */
.swatch { box-shadow: inset 0 -3px 2px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(var(--shade), .14), 0 3px 0 rgba(var(--shade), .16); }
.swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .8) 0 10%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}
.kit { box-shadow: inset 0 2px 0 #fff, 0 6px 0 rgba(var(--shade), .06), var(--shadow-sm); }

/* the search box: pressed into the page */
.search { box-shadow: inset 0 3px 6px rgba(var(--shade), .12), inset 0 0 0 2px var(--line), 0 2px 0 rgba(255, 255, 255, .9); }

/* the menu: a soft light down it, and a shadow along its edge */
.side {
  background: linear-gradient(170deg, color-mix(in srgb, var(--menu) 55%, #fff), var(--menu) 45%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .7), 4px 0 22px -12px rgba(var(--shade), .35);
}
.side-item:hover { background: rgba(255, 255, 255, .5); box-shadow: 0 3px 0 rgba(var(--shade), .08); }
.side-item[aria-current] { background: linear-gradient(#fff, rgba(255, 255, 255, .75)); box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(var(--shade), .1), var(--shadow-sm); }
/* Sign up: a little START, with its shine */
.side-signup {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--btn-top), var(--btn));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--btn-edge), 0 10px 16px -8px rgba(var(--shade), .45);
}
.side-signup:hover { background: linear-gradient(var(--btn-top), var(--btn)); filter: brightness(1.05); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--btn-edge), 0 10px 16px -8px rgba(var(--shade), .45); }
.side-signup:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 1px 0 var(--btn-edge); }
.side-signup::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  animation: shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
.side-mine-n { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 color-mix(in srgb, var(--rust) 70%, #000); }

/* the big page titles stand up off the paper a little */
.cat-head h1, .account-head h1 { text-shadow: 0 2px 0 #fff, 0 4px 0 rgba(var(--shade), .1); }

@media (prefers-reduced-motion: reduce) {
  .cat-icon, .btn-primary::after, .side-signup::after { animation: none; }
}

/* ---------- Froggy cheers, at the corner of the page ---------- */

.stage { position: relative; }
.cheer {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(18px) scale(.8);
  transform-origin: 15% 100%;
  transition: opacity .25s, transform .5s var(--spring);
}
.cheer.on { opacity: 1; transform: none; }
.cheer-kitty { flex: none; width: clamp(54px, 6.5vw, 80px); height: clamp(54px, 6.5vw, 80px); filter: drop-shadow(0 5px 6px rgba(var(--shade), .3)); }
.cheer-bubble {
  position: relative;
  margin: 0 0 34px;
  padding: .4em .8em .48em;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 4px 0 rgba(var(--shade), .08), var(--shadow-sm), inset 0 0 0 2px var(--peach);
  color: var(--rust);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.1;
  white-space: nowrap;
  rotate: -3deg;
}
.cheer-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  rotate: 45deg;
  background: var(--card);
  box-shadow: -2px 2px 0 0 var(--peach);
}
@media (prefers-reduced-motion: reduce) { .cheer { transform: none; transition: opacity .25s; } }

/* ---------- A switch, in Settings ---------- */

.toggle { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-size: 1.02rem; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  position: relative;
  flex: none;
  width: 58px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(#e3e8ee, #d3dae2);
  box-shadow: inset 0 3px 5px rgba(var(--shade), .2);
  transition: background-color .25s;
}
.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 30%, #eef2f6);
  box-shadow: 0 3px 0 rgba(var(--shade), .2), 0 4px 8px rgba(var(--shade), .25);
  transition: transform .3s var(--spring);
}
.toggle input:checked + .toggle-track { background: linear-gradient(var(--btn-top), var(--btn)); box-shadow: inset 0 3px 5px rgba(var(--shade), .2), inset 0 0 0 1px var(--btn-edge); }
.toggle input:checked + .toggle-track::after { transform: translateX(24px); }
.toggle input:focus-visible + .toggle-track { outline: 3px solid var(--ink); outline-offset: 3px; }
.account-froggy { grid-column: 1 / -1; }