/* Stretchy Elephant Coloring — kid-friendly, big tap targets, colorful rainbow buttons (green retired Nov 8, 2026 per Desarae) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Nunito", "PT Sans", Arial, sans-serif;
  background: #f4faf4;
  color: #21381f;
  font-size: 20px;
  line-height: 1.45;
}
h1, h2, h3, h4, h5 { font-family: "Baloo 2", cursive; }
a { color: #1e8a49; }

/* ---------- header (ported from stretchyelephant.com theme v104b) ---------- */
.se-siteheader { background: #fdf6e9; display: flex; flex-direction: column; }
.se-topbar {
  order: 1; display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; padding: 4px 3%;
}
.se-brand { display: inline-flex; align-items: center; text-decoration: none; }
.se-brand img { height: 44px; max-height: 44px; width: auto; display: block; margin: 0 10px 0 0; }
.se-brand span { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 30px; line-height: 1.1; color: #0d2b26; white-space: nowrap; }
.se-topactions { display: flex; align-items: flex-start; gap: 4px; }
.se-iconbtn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: transparent; border: 0; padding: 2px 6px; margin: 0;
  font: inherit; color: #0d2b26; text-decoration: none; cursor: pointer;
}
.se-iconbtn i { font-size: 32px; color: #0d2b26; line-height: 1; }
.se-iconlabel {
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #22384a; line-height: 1;
}
.se-banner {
  order: 2; display: block; width: 100%;
  background: #fdf6e9;
}
.se-banner-img { display: block; width: 100%; height: auto; }
@media only screen and (max-width: 480px) {
  .se-brand span { font-size: 23px; }
  .se-brand img { height: 38px; max-height: 38px; }
}

/* ---------- MORE menu overlay (ported from theme #nav-mobile) ---------- */
.side-nav {
  list-style: none; margin: 0; padding: 0 0 30px;
  position: fixed; top: 0; right: 0; left: 0; bottom: 0;
  width: 100%; height: 100%; overflow-y: auto;
  background: #e0e0f8; border: 0; z-index: 300;
}
.side-nav[hidden] { display: none; }
.side-nav li { display: block; width: 100%; }
.side-nav li > a {
  display: block; font-size: 34px; font-weight: 700; font-family: "Baloo 2", cursive;
  color: #2b3168; padding: 15px 20px; line-height: 1.35;
  text-decoration: none; background: transparent; text-align: center;
}
.side-nav .closemenu {
  background: #41528a; color: #fff; font-family: "Nunito", sans-serif;
  font-size: 22px; font-weight: 800; padding: 16px 18px; margin: 0 0 6px;
  cursor: pointer; text-transform: uppercase; text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.side-nav .closemenu i { font-size: 34px; line-height: 1; color: #fff; }
.side-nav li.se-menulogo { text-align: center; padding: 14px 0 0; }
.side-nav li.se-menulogo a { display: inline-block; padding: 0; }
.side-nav li.se-menulogo img { height: 104px; width: auto; }
.side-nav .se-soc-row { display: block; text-align: center; padding: 0 15px; }
.side-nav .se-soc {
  background: transparent; border: 2px solid #2b3168; border-radius: 50%;
  color: #2b3168; width: 46px; height: 46px; box-shadow: none; margin: 4px 3px;
}
.side-nav .se-soc i { font-size: 22px; color: #2b3168; }
.se-menusearch { display: flex; gap: 12px; width: 100%; box-sizing: border-box; margin: 0; padding: 18px 28px 26px; }
.se-menusearch input[type="text"] {
  flex: 1 1 auto; min-width: 0; height: 64px; font-size: 22px; padding: 16px 20px;
  border: 2px solid #41528a; border-radius: 10px; background: #ffffff; color: #0d2b26;
  box-sizing: border-box; outline: none; font-family: "Nunito", sans-serif;
}
.se-menusearch input[type="text"]::placeholder { color: #3d3d3d; opacity: 1; }
.se-menusearch input[type="submit"] {
  flex: 0 0 auto; height: 64px; font-size: 20px; font-weight: 800; padding: 16px 30px;
  border: 0; border-radius: 10px; background: #41528a; color: #ffffff;
  cursor: pointer; box-sizing: border-box; font-family: "Nunito", sans-serif;
}

/* ---------- gallery ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 18px 14px 30px; }
.hero { text-align: center; padding: 10px 8px 4px; }
.hero h1 { font-size: 40px; margin: 6px 0 2px; color: #0a2248; }
.tagline { font-size: 23px; font-weight: 700; color: #f35a90; margin: 2px 0; }
.hero-sub { max-width: 640px; margin: 8px auto; font-size: 20px; }

.chips {
  display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-start;
  margin: 16px 0 6px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 10px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #f5821f #fdf6e9;
}
.chips::-webkit-scrollbar { height: 8px; }
.chips::-webkit-scrollbar-thumb { background: #f5821f; border-radius: 99px; }
.chips::-webkit-scrollbar-track { background: #fdf6e9; border-radius: 99px; }
.chip {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 18px; font-weight: 800; cursor: pointer;
  border: 3px solid #5b2a86; background: #fff; color: #0a2248;
  border-radius: 999px; padding: 6px 18px 6px 8px; min-height: 54px;
}
.chip-icon {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: contain; display: block; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.85); background: #fdf6e9;
}
.chip-all { border-color: #e33e2b; color: #b02a1e; }
.chip-bible-stories { border-color: #f0a500; color: #8a5a00; }
.chip-yoga { border-color: #35a7e8; color: #14608f; }
.chip-princess-bean { border-color: #f35a90; color: #b02a5e; }
.chip-abcs { border-color: #7a4fd0; color: #4c2a9e; }
.chip-family { border-color: #2aa198; color: #14707a; }
.chip-abcs { border-color: #e07b39; color: #9a5410; }
.chip-abcs.active { background: linear-gradient(180deg, #ffb340, #f5821f); color: #fff; }
.chip-stretchy { border-color: #5b8c2a; color: #3f6219; }
.chip-family.active { background: linear-gradient(180deg, #4fd8c8, #149a8c); }
.chip-stretchy.active { background: linear-gradient(180deg, #a8d94e, #6aa519); }
.chip.active { color: #fff; box-shadow: 0 3px 0 rgba(10,34,72,.35); }
.chip-all.active { background: linear-gradient(180deg, #ff7a59, #e33e2b); }
.chip-bible-stories.active { background: linear-gradient(180deg, #ffcf4d, #f0a500); color: #4a3200; }
.chip-yoga.active { background: linear-gradient(180deg, #6ec3f5, #1f6fd1); }
.chip-princess-bean.active { background: linear-gradient(180deg, #ff9ec4, #e7549a); }
.chip-abcs.active { background: linear-gradient(180deg, #a678f0, #6d3fd4); }

.gallery-meta { text-align: center; color: #5b4a68; font-size: 17px; margin: 6px 0 4px; }

/* one horizontal scrolling row of pages per book */
.book-row { margin: 20px 0 6px; scroll-margin-top: 12px; }
.row-title { font-size: 29px; color: #0a2248; margin: 0 0 8px; }
.row-scroll {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 12px; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: #f5821f #fdf6e9;
}
.row-scroll::-webkit-scrollbar { height: 8px; }
.row-scroll::-webkit-scrollbar-thumb { background: #f5821f; border-radius: 99px; }
.row-scroll::-webkit-scrollbar-track { background: #e9f5ec; border-radius: 99px; }
.card {
  flex: 0 0 168px; scroll-snap-align: start;
  background: #e9f5ec; border-radius: 18px; padding: 10px; cursor: pointer;
  border: 3px solid transparent; text-align: center;
}
.card:hover, .card:focus { border-color: #ecb93c; outline: none; }
.card img { width: 100%; height: auto; border-radius: 10px; background: #fff; display: block; }
.card .card-label { font-weight: 700; font-size: 16.5px; margin-top: 8px; color: #0a2248; line-height: 1.25; }
.card .card-sub { font-size: 15px; color: #5b4a68; }

/* ---------- buttons (colorful filled pills — never a blue text link, never underlined) ---------- */
.btn {
  font: inherit; font-weight: 800; cursor: pointer; border: none; text-decoration: none;
  border-radius: 999px; padding: 10px 20px; min-height: 52px; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-action { color: #fff; }
#backBtn { background: linear-gradient(180deg, #8a63d2, #5b2a86); box-shadow: 0 3px 0 #3d1c5c; }
#printBtn { background: linear-gradient(180deg, #6ec3f5, #1f6fd1); box-shadow: 0 3px 0 #14508f; }
#saveBtn { background: linear-gradient(180deg, #ff9ec4, #e7549a); box-shadow: 0 3px 0 #b02a5e; }
#clearBtn { background: linear-gradient(180deg, #ff7a59, #e33e2b); box-shadow: 0 3px 0 #a02318; color: #fff; }
.btn-action:hover { filter: brightness(1.07); }
.btn-action:active { transform: translateY(2px); box-shadow: none; }
.btn-tool { background: #fff4e0; color: #8a5a00; border: 3px solid #f0a500; box-shadow: none; padding: 8px 14px; font-size: 18px; }
.btn-tool.active { background: linear-gradient(180deg, #ffcf4d, #f0a500); color: #4a3200; }
.btn-size { background: #fff; color: #5b2a86; border: 3px solid #8a63d2; padding: 6px 16px; min-height: 48px; }
.btn-size.active { background: linear-gradient(180deg, #a678f0, #6d3fd4); color: #fff; }

/* ---------- coloring view ---------- */
.color-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.color-title { font-size: 26px; color: #0a2248; margin: 0; }
.page-num { font-size: 14px; font-weight: 700; color: #5b4a8a; white-space: nowrap; }
/* the words show what they do: Smaller is small, Bigger is big and bold (Desarae, Nov 8) */
#sizeDown { font-size: 13px; font-weight: 600; }
#sizeUp { font-size: 23px; font-weight: 800; }
#nextBtn { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }

.color-layout { display: flex; flex-direction: column; gap: 14px; }
.stage-wrap {
  background: #fff; border-radius: 18px; padding: 10px; border: 3px solid #e9f5ec;
  display: flex; align-items: center; justify-content: center;
}
/* Portrait phones: cap the stage height so tall pages fit on one screen —
   a full-width 2:1 canvas fills the whole viewport and, with touch-action
   none, traps the scroll so the palette can never be reached (Desarae,
   Nov 9, 2026: "I can't scroll down" on the boy doll). Landscape/desktop
   keeps its own rule below. */
@media (orientation: portrait) and (max-width: 1023px) {
  #stage { max-height: calc(100dvh - 215px); width: auto; max-width: 100%; display: block; margin: 0 auto; }
}
#stage { max-width: 100%; height: auto; border-radius: 8px; touch-action: none; cursor: crosshair; background:#fff; }

.palette-panel {
  background: #e9f5ec; border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
/* brush picker: picture of each tool with its name underneath */
.tool-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  flex: 1 1 88px; max-width: 116px; min-height: 108px;
  background: #fff; border: 3px solid #35a7e8; border-radius: 16px;
  padding: 8px 4px 7px; cursor: pointer; font: inherit; color: #0a2248;
}
.tool-pick svg { width: 56px; height: 56px; display: block; }
.tool-pick span { font-size: 14px; font-weight: 800; line-height: 1.15; text-align: center; }
.tool-pick.active {
  background: linear-gradient(180deg, #ffcf4d, #f5821f); color: #fff;
  box-shadow: 0 3px 0 #b35c0d;
}
.tool-row, .size-row, .action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.size-label { font-weight: 700; }
.crayons { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; padding-top: 14px; padding-bottom: 12px; }
.crayon {
  height: 52px; border-radius: 12px; cursor: pointer; border: 3px solid rgba(0,0,0,.18);
  position: relative; padding: 0;
}
.crayon::before, .crayon::after { content: none; }
.crayon { overflow: hidden; } .crayon.skinned { overflow: visible; } /* skinned swatches (crayon tips, marker nibs) may stick out; plain ones may not */
.sw-deco { position: absolute; pointer-events: none; }
.sw-tip { top: -14px; left: 50%; transform: translateX(-50%); width: 24px; height: 15px; z-index: 3; }
.sw-band { left: 0; right: 0; height: 5px; filter: brightness(.62) saturate(1.15); opacity: .85; z-index: 1; }
.sw-oval { left: 50%; top: 48%; transform: translate(-50%, -50%); width: 48%; height: 25%; border-radius: 50%; background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); z-index: 1; }
.crayon.skin-marker { background: #fff; }
.sw-cap { top: -11px; left: 50%; transform: translateX(-50%); width: 58%; height: 13px; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 1.6px rgba(0,0,0,.35); z-index: 3; }
.sw-cap-clip { position: absolute; top: 2px; bottom: 2px; left: 50%; transform: translateX(-50%); width: 26%; border-radius: 3px; box-shadow: inset 0 0 0 1.6px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.3); }
.sw-waves { left: 6%; right: 6%; top: 24%; width: 88%; height: 46%; z-index: 1; }
.sw-nib { bottom: -9px; left: 50%; transform: translateX(-50%); width: 24px; height: 11px; z-index: 3; }
.sw-sparkles { inset: 0; z-index: 2; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 2px, transparent 3.5px), radial-gradient(circle at 66% 56%, rgba(255,255,255,.85) 0 1.6px, transparent 3px), radial-gradient(circle at 44% 76%, rgba(255,255,255,.9) 0 1.3px, transparent 2.6px), radial-gradient(circle at 78% 22%, rgba(255,255,255,.75) 0 1.2px, transparent 2.4px); }
.swatch-mode-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.crayon.active { border-color: #0a2248; box-shadow: 0 0 0 3px #ecb93c; }
.tip { font-size: 16px; margin: 0; color: #33502f; }

/* landscape / desktop: palette on the RIGHT */
@media (min-aspect-ratio: 1/1) and (min-width: 1024px) {
  .color-layout { flex-direction: row; align-items: flex-start; }
  .stage-wrap { flex: 1 1 auto; }
  #stage { max-height: calc(100vh - 240px); width: auto; max-width: 100%; }
  .palette-panel { flex: 0 0 264px; position: sticky; top: 12px; }
  .crayons { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- footer (ported from stretchyelephant.com theme v104b) ---------- */
.se-footer {
  /* The theme footer itself is transparent; on the site it sits over the body
     pattern below, so the footer carries that same pattern backdrop here. */
  background: #F0F1F3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCOj9I2VekPd8ZeqVV1v72OvLtYcLtcBrMZmqRSZ7k3dlleHsBda-VFOwqb9jyHh5b1NQuAcfjrai1Ur57zbjMlpc9tKZ76J_Hw5j8v-7IsYOo2YcBSJ2z7UG86_OcRmVpOGA9juEjR0/s1600/pattern-stretchy.png');
  margin-top: 10px; padding: 6px 14px 26px;
}
.se-footer .se-container { max-width: 1100px; margin: 0 auto; }
/* Footer logo SOLID (Desarae, Nov 9, 2026): full opacity on a clean white
   chip so it reads crisp over the footer's pattern backdrop. */
.se-footlogo { text-align: center; margin: 10px 0 2px; }
.se-footlogo img { height: 92px; width: auto; opacity: 1; filter: none; background: #fff; border-radius: 16px; padding: 6px 12px; box-shadow: 0 2px 8px rgba(20,60,30,.18); }
.se-footer .center { text-align: center; }
.se-footer .light { font-weight: 400; }
.se-soc-center { text-align: center; margin: 6px 0 20px; }
.se-soc-row { display: inline-block; }
.se-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 18px; margin: 0 3px;
  background: linear-gradient(160deg, #79c94e, #1e8a49);
  color: #fff !important; text-decoration: none !important; vertical-align: middle;
  box-shadow: 0 3px 8px rgba(20,60,30,.35);
}
.se-soc i { color: #fff !important; font-size: 26px; line-height: 1; }
.se-soc:hover { background: #4c8a50; }
.se-soc:focus { outline: 3px solid #b3001b; outline-offset: 2px; }
.se-reswrap { max-width: 760px; margin: 26px auto 4px; text-align: left; }
.se-resbtn {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; border-bottom: 2px solid #3b7741; color: #1d9e4b;
  font-family: "Baloo 2", cursive; font-weight: 800; font-size: 24px;
  padding: 8px 2px; cursor: pointer;
}
.se-resplus { font-size: 28px; line-height: 1; transition: transform .25s; }
.se-resbtn[aria-expanded='true'] .se-resplus { transform: rotate(45deg); }
.se-reslist { display: none; list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 34px; }
.se-reslist.se-open { display: block; }
.se-reslist li { margin: 0 0 9px; break-inside: avoid; }
.se-reslist a { color: #14532d !important; font-weight: 700; font-size: 17px; text-decoration: underline; }
@media (min-width: 821px) {
  .se-resbtn { pointer-events: none; cursor: default; }
  .se-resplus { display: none; }
  .se-reslist { display: block; columns: 3; }
}
.se-footlinks, .se-footlinks a { color: #41503f !important; }
.se-footlinks a { font-weight: 700; text-decoration: underline; }
.se-acocredit { text-align: center; margin: 8px 0 2px; font-size: 16px; color: #41503f; }
.se-acocredit a { font-weight: 700; }
.se-copyline { text-align: center; margin: 2px 0 5px; font-size: 16px; color: #41503f; }
.aco-logo { vertical-align: -4px; margin-right: 4px; }

/* ---------- print: only the artwork ---------- */
#printArea { display: none; }
@media print {
  body * { visibility: hidden; }
  #printArea { display: block; position: absolute; inset: 0; visibility: visible; }
  #printArea img { visibility: visible; width: 100%; height: auto; }
  @page { margin: 10mm; }
}

/* ---------- Nov 8 final pass: painted heading, size dots, category grid ---------- */
.se-coloring-icon { display: block; }
.size-dot { display: inline-block; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.btn-size { gap: 8px; }
/* category view: selected row becomes a full grid so every page shows */
.row-scroll.row-grid { flex-wrap: wrap; overflow-x: visible; overflow-y: visible; scroll-snap-type: none; }
.book-row[hidden] { display: none; }
/* category header images: one fixed height for every category */
.cat-img { width: 100%; height: 150px; object-fit: cover; display: block; border-radius: 18px; margin: 0 0 8px; background: #fdf6e9; }
/* row titles: small round icon + label text (the nav look, at the row top too) */
.row-title { display: flex; align-items: center; gap: 10px; }
.row-icon {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: contain; display: block; flex: 0 0 auto;
  border: 3px solid #5b2a86; background: #fdf6e9;
}
.row-title-bible-stories .row-icon { border-color: #f0a500; }
.row-title-yoga .row-icon { border-color: #35a7e8; }
.row-title-princess-bean .row-icon { border-color: #f35a90; }
.row-title-blank .row-icon { border-color: #e33e2b; }
.row-title-family .row-icon { border-color: #2aa198; }
.row-title-abcs .row-icon { border-color: #e07b39; }
.palette-label { font-weight: 800; margin: 14px 0 6px; color: #5b4a8a; font-size: 15px; }
.crayon.glitter { background-image: radial-gradient(circle at 30% 30%, #fff 0 3px, rgba(255,255,255,.0) 5px), radial-gradient(circle at 66% 56%, #fff 0 2.6px, transparent 4.4px), radial-gradient(circle at 44% 76%, #fff 0 2.2px, transparent 3.8px), radial-gradient(circle at 78% 22%, #fff 0 2px, transparent 3.4px), radial-gradient(circle at 14% 62%, #fff 0 2.4px, transparent 4px), radial-gradient(circle at 86% 82%, #fff 0 2.6px, transparent 4.4px), radial-gradient(circle at 52% 14%, #fff 0 2px, transparent 3.4px), radial-gradient(circle at 22% 88%, #fff 0 1.9px, transparent 3.2px); }
.row-title-stretchy .row-icon { border-color: #5b8c2a; }

/* --- Nov 8 fixes: tools on one scrollable line; footer socials one colorful row --- */
.tool-picker { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.tool-picker::-webkit-scrollbar { display: none; }
.tool-picker .tool-pick { flex: 0 0 auto; }
.tool-picker .btn-tool { flex: 0 0 auto; align-self: center; }
.se-footer .se-soc-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
.se-footer .se-soc { flex: 0 1 56px; margin: 0; }
.se-footer .se-soc:hover { filter: brightness(1.13); }
.se-footer .se-soc[href*="facebook.com"] { background: linear-gradient(160deg, #4e8ef7, #1663c7); }
.se-footer .se-soc[href*="instagram.com"] { background: linear-gradient(45deg, #f9a03f, #e1306c 55%, #833ab4); }
.se-footer .se-soc[href*="x.com"] { background: linear-gradient(160deg, #4a5568, #111827); }
.se-footer .se-soc[href*="tiktok.com"] { background: linear-gradient(160deg, #2dd4ee, #111827 48%, #fe2c55 135%); }
.se-footer .se-soc[href*="pinterest.com"] { background: linear-gradient(160deg, #f0524f, #bd081c); }
.se-footer .se-soc[href*="youtube.com"] { background: linear-gradient(160deg, #ff5a4e, #e62117); }
.se-footer .se-soc[href*="soundcloud.com"] { background: linear-gradient(160deg, #ffb03a, #ff5500); }
@media (max-width: 560px) {
  .se-footer .se-soc { width: 42px; height: 42px; border-radius: 13px; }
  .se-footer .se-soc i { font-size: 20px; }
}

.size-preview { display: inline-flex; align-items: center; justify-content: center; width: 38px; }
.btn-step { flex: 1 1 0; }

/* ---------- coloring view: edge-to-edge canvas on phones (Desarae, Nov 8) ---------- */
.se-topactions { align-items: center; }
#backBtn { min-height: 44px; padding: 8px 14px; font-size: 16px; margin-right: 4px; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 759px) {
  body:has(#colorView:not([hidden])) main { padding: 0 0 18px; max-width: none; }
  body:has(#colorView:not([hidden])) .color-topbar { padding: 10px 12px 0; margin-bottom: 6px; }
  body:has(#colorView:not([hidden])) .stage-wrap { border: none; border-radius: 0; padding: 0; }
  body:has(#colorView:not([hidden])) #stage { border-radius: 0; width: 100%; }
  body:has(#colorView:not([hidden])) .palette-panel { border-radius: 0; margin-top: 10px; }
}

/* ===== Page nav buttons + tools line (Desarae, Nov 8) ===== */
.topbar-btns { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
#prevBtn { background: #ede9fe; color: #5b21b6; border: 2px solid #c4b5fd; box-shadow: none; }
#nextBtn { background: linear-gradient(180deg, #8b5cf6, #7c3aed); color: #fff; border-color: #6d28d9; }
#nextBookBtn { background: linear-gradient(180deg, #ff7ab8, #e84393); color: #fff; border-color: #c2185b; }
#prevBtn, #nextBtn, #nextBookBtn { white-space: nowrap; }
.tools-line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.tools-line .tool-picker { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.tools-line .size-row { flex: 0 0 auto; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; margin: 0; padding: 8px; background: #fff; border: 2px solid #e5d9f7; border-radius: 16px; }
.tools-line .size-row .btn-step { width: 100%; }
.tools-line .size-preview { align-self: center; }

/* ===== Stamps submenu (Desarae, Nov 8) ===== */
.stamp-picker { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 8px; margin-bottom: 6px; }
.stamp-picker[hidden] { display: none; }
.stamp-pick { flex: 0 0 auto; width: 78px; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: #fff; border: 3px solid #a5d8ff; border-radius: 16px; cursor: pointer; font-family: inherit; }
.stamp-pick svg { width: 42px; height: 42px; }
.stamp-pick span { font-size: 13.5px; font-weight: 700; color: #5b21b6; }
.stamp-pick.active { background: linear-gradient(180deg, #ffd98e, #ffb03a); border-color: #e07b39; }

/* Share button with the kid-holding-a-heart picture (Desarae, Nov 8) */
#shareBtn { background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff; border-color: #be123c; }
#shareBtn .share-icon { width: 26px; height: 26px; border-radius: 8px; vertical-align: -7px; margin-right: 5px; }

/* Book-and-finger icons on the page buttons (Desarae's pick, Nov 8) */
.topbar-btns .nav-icon { height: 30px; width: 30px; object-fit: contain; background: #fff; border-radius: 8px; vertical-align: -8px; margin-right: 6px; padding: 2px; }

/* Seasonal row + chip (rotates monthly) */
.chip-seasonal { border-color: #e07b39; color: #9a5410; }
.chip-seasonal.active { background: linear-gradient(90deg, #f5821f, #35a7e8); color: #fff; }
.row-title-seasonal .row-icon { border-color: #f5821f; }

/* Nav pairs on one line; Prev and Next share a color (Desarae, Nov 8) */
#prevBtn { background: linear-gradient(180deg, #8b5cf6, #7c3aed); color: #fff; border-color: #6d28d9; }
#prevBookBtn { background: linear-gradient(180deg, #ff7ab8, #e84393); color: #fff; border-color: #c2185b; box-shadow: none; }
#prevBtn, #nextBtn, #prevBookBtn, #nextBookBtn { white-space: nowrap; }
#nextBtn { margin-left: 0; }
.topbar-btns { flex-direction: column; align-items: stretch; }
.nav-row { display: flex; gap: 8px; width: 100%; }
.nav-row .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; }
#prevBookBtn, #nextBookBtn { flex-direction: column; gap: 2px; padding-top: 7px; padding-bottom: 7px; }
.nb-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.nb-sub .nav-icon { height: 22px; width: 22px; vertical-align: 0; margin-right: 0; }
@media (max-width: 760px) { .topbar-btns { width: 100%; margin-left: 0; } }

/* Size box slightly narrower (Desarae, Nov 8) */
.tools-line .size-row { padding: 6px 5px; }
.tools-line .size-row .btn-step { padding-left: 8px; padding-right: 8px; }
#btnBigger { font-size: 20px; }

/* Random color swatch */
.crayon.random-swatch::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55); z-index: 4; pointer-events: none; }

/* One flowing palette, no section labels (Desarae, Nov 8) */
.palette-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; padding-top: 14px; padding-bottom: 12px; }
.palette-flow .crayons { display: contents; }
@media (min-aspect-ratio: 1/1) and (min-width: 1024px) { .palette-flow { grid-template-columns: repeat(4, 1fr); } }

/* ? Tips accordion */
.tips-acc { margin-top: 14px; }
.tips-btn { width: 100%; padding: 11px 18px; border-radius: 999px; border: 3px solid #b197fc; background: #fff; color: #5b2a86; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.tips-plus { font-size: 24px; line-height: 1; }
.tips-body { padding: 12px 6px 2px; }
.tips-body .tip { margin: 0 0 10px; }

/* Footer text (Desarae, Nov 10, 2026 — FINAL): no wash, no panels — at
   her word both came off ("No I don't want the tan background just
   change the text color"). The footer keeps its original bright
   elephant-pattern background and ONLY the text color changes: every
   footer line is one near-black deep green, #032117, measured against
   the real pattern image — 7.4:1 vs the dominant teal #4abdac (80% of
   the pattern; 7.3:1 vs #48BCAC) and 5.3:1 vs the pattern's darkest
   significant patch (darkest-2% mean #3c9e91). The old colors measured
   only 3.71:1 body / 3.93:1 links / 1.50:1 heading. Links keep their
   underlines; social tiles keep brand colors with white icons. */
.se-footer, .se-footer .se-footlinks, .se-footer .se-copyline, .se-footer .se-acocredit { color: #032117; }
.se-footer .se-footlinks { color: #032117 !important; }
.se-footer .se-footlinks.light { font-weight: 700; }
.se-footer .se-copyline, .se-footer .se-acocredit { font-weight: 700; }
.se-footer .se-resbtn { color: #032117; border-bottom-color: #032117; }
.se-footer a { color: #032117 !important; }
.se-footer .se-soc { color: #fff !important; }
.se-footer .se-acocredit a { font-weight: 700; text-decoration: underline; }
.se-footer .se-soc:hover { background: inherit; filter: brightness(1.13); }

/* Sounds toggle + Tips share a row */
.tips-row { display: flex; gap: 8px; }
.tips-row .tips-btn { flex: 1 1 auto; }
.sound-btn { flex: 0 0 auto; padding: 11px 16px; border-radius: 999px; border: 3px solid #f2b705; background: #fff; color: #7a4a00; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 17px; cursor: pointer; }
.sound-btn.on { background: linear-gradient(135deg, #ffd23e, #f5821f); color: #fff; border-color: #f5821f; }

/* Full-app unlock panel */
.unlock-overlay { position: fixed; inset: 0; background: rgba(43, 20, 86, .5); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 18px; }
.unlock-overlay[hidden] { display: none; }
.unlock-card { background: #fffdf7; border-radius: 24px; padding: 26px 22px; max-width: 350px; width: 100%; text-align: center; box-shadow: 0 18px 50px rgba(30, 10, 60, .35); }
.unlock-star { font-size: 44px; }
.unlock-card h3 { margin: 8px 0 6px; font-family: "Baloo 2", cursive; color: #5b2a86; font-size: 24px; }
.unlock-card p { margin: 0 0 16px; font-size: 16px; color: #444; }
.unlock-buy { display: block; background: linear-gradient(135deg, #f5821f, #e33e2b); color: #fff; border-radius: 999px; padding: 13px; font-weight: 800; font-size: 18px; text-decoration: none; margin-bottom: 10px; }
.unlock-code-btn { display: block; width: 100%; background: #fff; border: 3px solid #b197fc; color: #5b2a86; border-radius: 999px; padding: 11px; font-weight: 800; font-size: 17px; cursor: pointer; font-family: "Baloo 2", cursive; }
.unlock-close { background: none; border: 0; color: #777; font-size: 15px; margin-top: 12px; cursor: pointer; text-decoration: underline; }

/* Page never zooms; the picture zooms with its own buttons */
html { touch-action: manipulation; }
.stage-wrap.zoomed { overflow: auto; }
.zoom-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 2px; }
.zoom-btn { width: 46px; height: 42px; border-radius: 12px; border: 3px solid #35a7e8; background: #fff; font-size: 22px; font-weight: 900; color: #1f6fd1; cursor: pointer; }
.zoom-label { font-weight: 800; color: #5b2a86; min-width: 54px; text-align: center; }
/* one flowing palette (DOM merged by script) */
.palette-flow { display: block; }
.palette-flow .crayons { display: grid; }

/* Stamp picker wraps now that there are 30 stamps; Words letter picker */
.stamp-picker { flex-wrap: wrap; overflow-x: visible; }
.stamp-pick { width: 70px; min-height: 82px; }
.stamp-pick svg { width: 38px; height: 38px; }
.stamp-pick span { font-size: 12.5px; font-weight: 700; }
.word-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px 8px; margin-bottom: 6px; }
.word-picker[hidden] { display: none; }
.word-pick { width: 44px; height: 48px; border-radius: 12px; border: 3px solid #a5d8ff; background: #fff; font-family: "Baloo 2", cursive; font-weight: 900; font-size: 24px; color: #5b2a86; cursor: pointer; }
.word-pick.active { border-color: #f5821f; background: #fff4e0; }
.tool-abc { font-family: "Baloo 2", cursive; font-weight: 900; font-size: 29px; color: #7b2ff7; line-height: 1.15; display: block; }

/* FOCUS mode: art pinned top, colors in one scrolling strip, X top-right */
.focus-btn { width: auto; padding: 0 14px; font-size: 16px; margin-right: auto; color: #5b2a86; border-color: #9b59d0; }
@media (max-width: 759px) { .focus-btn { flex: 1 1 auto; width: 100%; margin-right: 0; padding: 13px 14px; font-size: 19px; } }
#focusExit { position: fixed; top: 10px; right: 10px; z-index: 80; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #b02a1e; background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff; font-size: 26px; font-weight: 900; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
body.focus-mode #focusExit { display: flex; }
body.focus-mode .zoom-row .focus-btn { visibility: hidden; }
body.focus-mode .color-layout { flex-direction: column; }
body.focus-mode .stage-wrap { position: sticky; top: 0; z-index: 30; }
body.focus-mode #stage { width: auto; max-width: 96vw; } /* Nov 9: no max-height cap here — capping the height while the width stayed full SMUSHED the art on phones */
body.focus-mode .palette-panel { display: contents; }
body.focus-mode .palette-flow { order: 0; }
body.focus-mode .palette-flow .crayons { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 10px 2px; -webkit-overflow-scrolling: touch; }
body.focus-mode .crayon { flex: 0 0 52px; }
body.focus-mode .stamp-picker { flex-wrap: nowrap; overflow-x: auto; }
body.focus-mode .word-picker { flex-wrap: nowrap; overflow-x: auto; }

/* focus order: art first, color strip second, tools after */
body.focus-mode .stage-wrap { order: -2; }
body.focus-mode .palette-flow { order: -1; }

/* Size stepper: Bigger and Smaller buttons the SAME height (Desarae, Nov 8);
   the Bigger glyph a touch smaller and lighter than before */
.tools-line .size-row .btn-step { height: 40px; display: flex; align-items: center; justify-content: center; line-height: 1.1; }
#sizeUp { font-size: 16px; font-weight: 700; }
#sizeDown { font-size: 13px; }

/* Focus mode hides ALL the chrome (Desarae, Nov 8): site header + banner,
   book title / page line, Prev/Next rows, zoom row, and the footer.
   The art starts at the very top; only the X and the colors strip remain. */
body.focus-mode #topwrap { display: none; }
body.focus-mode #colorView .topbar { display: none; }
body.focus-mode .zoom-row { display: none; }
body.focus-mode .se-footer { display: none; }
body.focus-mode .color-layout { padding-top: 0; margin-top: 0; }
/* Blank pages stretch taller in focus, using the freed space.
   Nov 9: no CSS max-height cap in focus — a cap squishes the art
   vertically (fitStageFocus already sizes the canvas uniformly). */
body.focus-mode.on-blank #stage { max-height: none; }

/* Focus also hides the action buttons and Tips/Sounds (Desarae, Nov 8) —
   they come back on exit. Footer is already fully hidden in focus. */
body.focus-mode .action-row { display: none; }
body.focus-mode .tips-row { display: none; }

/* Size stepper card: SAME height as the tool tiles beside it, and its
   Smaller/Bigger labels in the same dark navy as the tile labels
   (Desarae, Nov 8 — this supersedes the earlier button-height tweak) */
.tools-line .size-row { height: 108px; box-sizing: border-box; justify-content: space-between; }
.tools-line .size-row .btn-step { height: 30px; color: #0a2248; font-weight: 800; }
#sizeUp { font-size: 14px; }
#sizeDown { font-size: 13px; }

/* FIT FIX (Desarae, Nov 8): the editor must never be wider than the screen -
   no horizontal page scrolling, ever. Zoom scales the picture INSIDE its
   frame only. */
html, body { overflow-x: hidden; max-width: 100%; }
.se-topbar, .se-banner, .se-banner img, .topbar, .zoom-row, .color-layout,
.stage-wrap, .palette-panel, .tools-line, .action-row, .tips-row,
.topbar-btns, .nav-row { max-width: 100%; box-sizing: border-box; }
.topbar { flex-wrap: wrap; }
.topbar-btns, .topbar-btns button, .nav-row button, #pageTitle, #zoomLabel { min-width: 0; }
#pageTitle { overflow-wrap: anywhere; }
.stage-wrap { overflow: hidden; }
.stage-wrap.zoomed { overflow: auto; }
.se-topbar > * { min-width: 0; }
.palette-panel, .stage-wrap { min-width: 0; }

/* The editor title/nav bar is .color-topbar (not .topbar) - hide it in focus */
body.focus-mode .color-topbar { display: none; }

/* Size card rebuild (Desarae, Nov 8): BOTH stepper buttons always visible -
   they share the card height by flex, the dot is capped, nothing overflows */
.tools-line .size-row { height: 108px; padding: 6px; gap: 4px; justify-content: center; overflow: hidden; }
.tools-line .size-row .btn-step { flex: 1 1 0; min-height: 0; height: auto; width: 100%; }
#sizeDot { max-width: 36px; max-height: 36px; flex: 0 0 auto; }

/* Header fit at phone width: brand and actions share the bar - nothing
   spills off the right edge (verified at 390px, Desarae, Nov 8) */
@media only screen and (max-width: 480px) {
  .se-topbar { gap: 6px; }
  .se-brand { min-width: 0; flex: 0 1 auto; }
  .se-brand img { max-width: 42vw; object-fit: contain; object-position: left center; }
  .se-topactions { min-width: 0; flex: 0 0 auto; }
  .se-iconbtn { padding: 2px 4px; }
  .se-iconbtn i { font-size: 28px; }
  .se-iconlabel { font-size: 11px; }
  .se-topactions .btn-action { font-size: 14px; padding: 6px 10px; white-space: nowrap; }
}

/* Focus exit lives at the VERY BOTTOM of the focus layout (Desarae, Nov 8) -
   a full-width bar below everything, never overlaid on the art */
#focusExit { position: static; width: 100%; height: auto; border-radius: 16px; padding: 14px; margin-top: 12px; font-size: 19px; box-shadow: none; }

/* Focus: the canvas touches the edges of the screen (Desarae, Nov 8) -
   no frame, padding, or margins beside the art */
body.focus-mode .stage-wrap { padding: 0; border: none; border-radius: 0; }
body.focus-mode #stage { width: auto; max-width: 100%; max-height: none; border-radius: 0; display: block; margin: 0 auto; }

/* Focus scroll + tools fix (Desarae, Nov 9, 2026): the sticky stage
   pinned the tall art over the tools and the page would not scroll.
   In focus the art now sits in normal flow and the page scrolls —
   art first, the colors strip under it, the tools after, Exit last. */
body.focus-mode .stage-wrap { position: static; }

/* Stamp picker group labels: Clothes / Sky / Face / Fruit (Desarae, Nov 8) */
.stamp-group-label { flex: 0 0 100%; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #5b2a86; margin: 10px 0 4px; }
body.focus-mode .stamp-group-label { flex: 0 0 auto; align-self: center; margin: 0 2px; }

/* ===== accounts: login / register / saved designs ===== */
.account-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.account-msg { font-weight: 700; color: #22384a; }
.account-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.btn-acct { background: #5b2a86; color: #fff; border: none; box-shadow: 0 2px 0 #3d1a5c; padding: 9px 16px; font-size: 15px; }
/* Account bar: unmissable signed-in proof at the top of the page (Nov 10, 2026) —
   green = signed in and saving; warm amber = guest, log in to save. */
.account-bar { padding: 10px 14px; border-radius: 14px; }
.account-bar.is-in { background: #e9f7ec; border: 2px solid #43a465; }
.account-bar.is-out { background: #fff4d6; border: 2px solid #dfa50f; }
.account-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-msg { font-size: 16px; overflow-wrap: anywhere; }
.account-saves { font-size: 14px; font-weight: 600; color: #2c5b3f; }
.account-bar.is-out .account-saves { color: #6b5200; }
/* Avatar chip in the app bar replaces the full-width account bar (Desarae,
   Nov 10, 2026): round avatar next to Coloring/Games/Menu, "Free"/"Paid"
   caption under it, profile panel on tap. No account strip at the top. */
.se-siteheader { position: relative; }
.se-avatar-circle { width: 34px; height: 34px; border-radius: 50%; background: #e8e2f2; color: #5b2a86; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; border: 2px solid #5b2a86; box-sizing: border-box; line-height: 1; font-family: "Baloo 2", cursive; }
.se-avatar-circle.is-in { background: #5b2a86; color: #fff; }
.se-avatar-caption { text-transform: none; letter-spacing: .04em; }
.se-profilepanel { position: absolute; right: 3%; top: 60px; z-index: 1200; width: min(300px, 88vw); max-height: 78vh; overflow-y: auto; background: #fff; border: 2px solid #d9c8f5; border-radius: 16px; box-shadow: 0 12px 30px rgba(34,56,74,.25); padding: 14px; box-sizing: border-box; text-align: left; }
.se-avatar-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.se-avatar-circle.has-img { background: #fff; padding: 0; overflow: hidden; }
.se-profile-sub { margin: 0 0 2px; font-size: 13px; color: #66707c; font-weight: 700; word-break: break-all; }
.se-profile-sub:empty { display: none; }
.se-pf-label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: 800; color: #22404f; }
.se-pf-row { display: flex; gap: 8px; }
.se-pf-row input { flex: 1; min-width: 0; padding: 9px 10px; border: 2px solid #cfd8e3; border-radius: 10px; font-size: 16px; font-family: inherit; box-sizing: border-box; }
.se-pf-save { white-space: nowrap; }
.se-pf-msg { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: #2e7d46; min-height: 1em; }
.se-avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.se-avatar-grid button { padding: 0; border: 3px solid transparent; border-radius: 50%; background: none; cursor: pointer; line-height: 0; }
.se-avatar-grid button img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }
.se-avatar-grid button.sel { border-color: #5b2a86; }
/* Avatar popover + VIP crown + profile upgrade/security (Desarae, Nov 10, 2026):
   tapping the avatar opens a small popover ("Go to user profile" / Log Out);
   the full profile holds the fields, plan upgrade, points and security. A VIP
   avatar wears a small gold crown perched on the circle. */
.se-avatarbtn { position: relative; }
.se-avatar-crown { position: absolute; top: -7px; right: 6px; font-size: 13px; line-height: 1; transform: rotate(14deg); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); z-index: 2; }
.se-avatar-crown[hidden] { display: none; }
.se-pop-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.se-pop-ava { position: relative; flex: none; width: 46px; height: 46px; }
.se-pop-ava .se-avatar-circle { width: 46px; height: 46px; font-size: 22px; }
.se-pop-ava .se-avatar-crown { top: -9px; right: -2px; font-size: 16px; }
.se-pop-id { min-width: 0; }
.se-pop-plan { margin: 0; font-size: 13px; font-weight: 800; color: #5b2a86; }
.se-btn-alt { background: #fff; color: #5b2a86; border: 2px solid #5b2a86; box-shadow: none; }
.se-plan-link { display: block; text-align: center; text-decoration: none; margin: 0 0 8px; }
.se-sec-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 2px 0; }
.se-sec-row > span { font-size: 13.5px; font-weight: 700; color: #48525e; }
.se-mfa-qr { display: flex; justify-content: center; margin: 8px 0; }
.se-mfa-qr svg, .se-mfa-qr img { width: 150px; height: 150px; }
.se-mfa-secret { font-size: 12.5px; font-weight: 700; color: #48525e; word-break: break-all; text-align: center; margin: 0 0 6px; }
.design-rename-input { width: 100%; box-sizing: border-box; padding: 6px 8px; margin: 4px 0; border: 2px solid #cfd8e3; border-radius: 8px; font: inherit; font-size: 16px; }
.design-actions .btn-rename-design { background: #5b2a86; color: #fff; }
.se-profile-email { font-weight: 800; font-size: 16px; color: #22384a; overflow-wrap: anywhere; margin: 0 0 4px; }
.se-profile-plan { font-weight: 600; font-size: 14px; color: #22384a; margin: 0 0 10px; line-height: 1.35; }
.se-profile-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-acctrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.gallery-acctrow:empty { display: none; }
.unlock-card input { width: 100%; box-sizing: border-box; padding: 12px; margin: 6px 0; border: 2px solid #d9c8f5; border-radius: 12px; font: inherit; }
.auth-err { color: #c22626; font-weight: 700; margin: 6px 0 0; }
.plan-line { margin: 6px 0; text-align: left; }
.designs-head { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; margin: 12px 0 4px; }
.designs-title { margin: 0; color: #22384a; }
/* Back button ALWAYS left of the page title, same line (Desarae, Nov 10, 2026):
   the head row never wraps; the title shrinks a little on narrow screens. */
.designs-head .btn { flex: none; }
.designs-head .designs-title { min-width: 0; font-size: clamp(17px, 4.8vw, 24px); }
.designs-usage { font-weight: 700; color: #5b2a86; margin: 4px 0 12px; }
.designs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.design-card { background: #fff; border: 2px solid #ead9f7; border-radius: 14px; padding: 8px; }
.design-card img { width: 100%; display: block; border-radius: 8px; background: #fdf6ec; }
.design-name { font-weight: 800; margin: 6px 2px 2px; color: #22384a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-date { font-size: 12px; color: #66707a; margin: 0 2px 6px; }
.design-actions { display: flex; gap: 6px; }
.design-actions .btn { flex: 1 1 0; padding: 8px 4px; font-size: 14px; border: none; }
.btn-open-design { background: #1f9d55; color: #fff; }
.btn-del-design { background: #e8e2f2; color: #5b2a86; }
.designs-empty { font-weight: 700; color: #22384a; }

/* ===== paid: upload your own background ===== */
.upload-card { border: 3px dashed #b18fe0; background: #f7f0ff; cursor: pointer; }
.upload-thumb { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; font-size: 64px; background: #ffffff; border-radius: 8px; }

[hidden] { display: none !important; }

/* ===== modal close X + guardian note ===== */
.unlock-card { position: relative; }
.modal-x { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: none; background: #f1e7fb; color: #5b2a86; font-size: 17px; font-weight: 800; cursor: pointer; line-height: 1; }
.guardian-note { font-weight: 800; color: #c22626; margin: 2px 0 8px; }
/* Auth modal buttons are filled pills, never blue or link-like (Desarae, Nov 9, 2026) */
.unlock-card .btn-unlock { background: #5b2a86; color: #fff; box-shadow: 0 3px 0 #3d1a5c; width: 100%; margin-top: 10px; text-decoration: none; }
.unlock-card .btn-keep { background: #eef4fb; color: #22384a; box-shadow: 0 2px 0 #c8d6e4; width: 100%; margin-top: 8px; text-decoration: none; }
/* Auth field labels: above each field (Desarae, Nov 9, 2026) */
.auth-label { display: block; text-align: left; font-weight: 800; color: #22384a; font-size: 16px; margin: 12px 0 0; }
/* Clear (×) inside text fields (Desarae, Nov 9, 2026): shows when the field has text */
.field-x { position: relative; display: block; }
.field-x input { padding-right: 42px; }
.x-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: none; background: #eef4fb; color: #22384a; font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer; display: none; }
.x-clear.on { display: block; }

/* My Designs button: real filled background like the other action buttons */
#designsBtn { background: #5b2a86; color: #fff; box-shadow: 0 3px 0 #3d1a5c; }

/* No text highlighting / selection / callout anywhere while coloring (Desarae, Nov 8).
   Form inputs stay editable for the account sign-in. */
html, body, body *:not(input):not(textarea) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
* { -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }

/* zoom lives in the tools bar now (Desarae, Nov 8) */
/* tappable stamp category headers */
button.stamp-group-label { cursor: pointer; color: #5b2a86; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px 10px; background: #f4edff; border: 2px solid #9b59d0; border-radius: 14px; font-family: "Baloo 2", cursive; }
button.stamp-group-label .sg-icon { font-size: 21px; line-height: 1.1; }
button.stamp-group-label .sg-name { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
button.stamp-group-label .sg-arrow { font-size: 11px; }

.se-zoomitem { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.se-zoomtext { font-weight: 700; }
.chip-dolls { border-color: #9b59d0; color: #6c3483; }
.chip-dolls.active { background: linear-gradient(180deg, #c39bff, #9b59d0); }
.row-title-dolls .row-icon { border-color: #9b59d0; }

/* ===== Nov 9: edit row, zoom card, focus tightening, select bar ===== */
.edit-row { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.edit-row::-webkit-scrollbar { display: none; }
.edit-row .tool-pick { flex: 0 0 auto; }
.edit-row .zoom-in-edit-row { flex: 0 0 auto; align-self: center; background: #eef4fb; border: 2px solid #c7d6ea; border-radius: 14px; padding: 4px 8px; }
.zoom-card .zoom-label { text-align: center; font-weight: 800; font-size: 15px; color: #0a2248; }
.zoom-card .zoom-btn { font-size: 17px; font-weight: 800; }
.size-preview canvas { display: block; }
body.focus-mode .palette-flow .crayons { padding: 4px 2px; gap: 6px; }
body.focus-mode .stamp-picker { padding: 2px; margin: 0; }
body.focus-mode .word-picker { padding: 2px; margin: 0; }
body.focus-mode .tools-line { margin: 2px 0 4px; gap: 6px; }
body.focus-mode .edit-row { margin: 2px 0 4px; gap: 6px; }
body.focus-mode .color-layout { gap: 2px; }
#selBar { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; padding: 8px; background: #f3eafd; border: 2px dashed #5b2a86; border-radius: 14px; }
#selBar[hidden] { display: none; }
#selBar .sel-label { font-weight: 800; color: #5b2a86; margin-right: auto; }
#selBar button { border: 2px solid #5b2a86; background: #fff; color: #5b2a86; font-weight: 800; border-radius: 10px; padding: 8px 14px; cursor: pointer; }
#selBar #selDelete { border-color: #b02a1e; color: #b02a1e; }
.stamp-sub-label { flex: 0 0 100%; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #8a6db3; margin: 6px 0 -2px 10px; }
button.stamp-sub-label { cursor: pointer; background: #f3eafd; border: 0; border-radius: 8px; font: inherit; color: #6c3483; text-align: left; padding: 3px 8px; margin-left: 0; }
button.stamp-sub-label .sg-arrow { font-size: 10px; }
body.focus-mode .stamp-sub-label { flex: 0 0 auto; align-self: center; margin: 0 2px; }
.stamp-outfit-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 14px; border: 3px solid #f5821f; background: #fff4e0; font-weight: 800; font-size: 12.5px; color: #8a4a00; cursor: pointer; }
.stamp-outfit-btn .so-emoji { font-size: 22px; line-height: 1; }
.stamp-outfit-btn.on { background: #5b2a86; border-color: #5b2a86; color: #ffffff; }

/* Clear Clothes (Desarae, Nov 9): purple, sits beside the red Clear trash */
#clearClothesBtn { background: linear-gradient(180deg, #b07fe8, #7d3fc4); box-shadow: 0 3px 0 #552a86; color: #fff; }

/* ===== Puzzles (Desarae, Nov 9) ===== */
.pz-banner { display: block; width: 100%; margin: 10px 0 4px; padding: 16px; border: none; border-radius: 16px; background: linear-gradient(135deg, #7c3aed, #5b2a86); color: #fff; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(91,42,134,.35); }
.pz-banner:active { transform: scale(.99); }
.pz-intro { font-size: 17px; margin: 6px 2px 10px; }
.pz-pics { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.pz-pic { flex: 0 0 96px; border: 3px solid #d8cdea; background: #fff; border-radius: 14px; padding: 5px; cursor: pointer; font-family: "Baloo 2", cursive; font-weight: 700; font-size: 12.5px; color: #5b2a86; }
.pz-pic img { width: 100%; height: 72px; object-fit: cover; border-radius: 9px; display: block; }
.pz-pic.active { border-color: #f5821f; box-shadow: 0 0 0 2px #ffd9ae; }
.pz-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.pz-moves { font-family: "Baloo 2", cursive; font-weight: 800; color: #5b2a86; font-size: 17px; }
.pz-boardwrap { position: relative; width: min(94vw, 540px); margin: 0 auto; }
.pz-board { display: grid; gap: 3px; width: 100%; aspect-ratio: 1; }
.pz-tile { border-radius: 7px; background-repeat: no-repeat; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(60,30,90,.35); }
.pz-tile.home { box-shadow: inset 0 0 0 3px rgba(34,197,94,.65); }
.pz-tile.sel { outline: 4px solid #f5821f; outline-offset: -2px; }
.pz-peekimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; z-index: 3; }
.pz-win { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(43,16,84,.45); border-radius: 7px; z-index: 4; }
.pz-win[hidden] { display: none; }
.pz-win-card { background: #fff; border-radius: 18px; padding: 22px 26px; text-align: center; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 26px; color: #5b2a86; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.pz-win-card p { font-size: 16.5px; margin: 8px 0 14px; }
.pz-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 2px 18px; }
.pz-pick-card { border: 3px solid #d8cdea; background: #fff; border-radius: 14px; padding: 6px; cursor: pointer; font-family: "Baloo 2", cursive; font-weight: 700; font-size: 13.5px; color: #5b2a86; min-width: 0; }
.pz-pick-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; margin-bottom: 5px; }
.pz-pick-card span { display: block; line-height: 1.15; }
.pz-pick-card.active { border-color: #f5821f; box-shadow: 0 0 0 2px #ffd9ae; }
.game-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 2px 18px; }
/* Games hub view toggle (Desarae, Nov 10, 2026): the same cards in one
   horizontally scrolling row. Only the row scrolls — the container clips
   its overflow, so the page itself never gains horizontal scroll. */
.game-cards.game-cards-scroll { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.game-cards.game-cards-scroll .game-card { flex: 0 0 148px; width: 148px; scroll-snap-align: start; }
#gameCards a.game-card { text-decoration: none; }
.game-card { border: 3px solid #d8cdea; background: #fff; border-radius: 18px; padding: 10px; cursor: pointer; font-family: "Baloo 2", cursive; color: #5b2a86; min-width: 0; box-shadow: 0 4px 12px rgba(91,42,134,.18); }
.game-card:active { transform: scale(.98); }
.game-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 8px; }
.game-name { display: block; font-weight: 800; font-size: 21px; }
.game-line { display: block; font-weight: 600; font-size: 14.5px; color: #7a5aa0; margin-top: 2px; line-height: 1.25; }
.install-banner { background: linear-gradient(135deg, #7c3aed, #5b2a86); color: #fff; padding: 8px 10px; font-family: "Baloo 2", cursive; }
.install-banner[hidden] { display: none; }
.install-row { display: flex; align-items: center; gap: 9px; }
.install-icon { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; }
.install-text { flex: 1 1 auto; font-weight: 800; font-size: 16.5px; line-height: 1.15; }
.install-btn { flex: 0 0 auto; border: none; background: #f5821f; color: #fff; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 16px; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.install-x { flex: 0 0 auto; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 15px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.install-how { margin: 8px 2px 2px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.install-how[hidden] { display: none; }
@media (min-width: 821px) and (pointer: fine) { .install-banner { display: none !important; } }
.pz-refwrap { text-align: center; font-family: "Baloo 2", cursive; font-weight: 700; color: #5b2a86; margin-top: 12px; }
.pz-ref { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; vertical-align: middle; margin-left: 8px; border: 2px solid #d8cdea; }

/* ABC Flash Cards (Nov 9, 2026) */
.fc-how { font-size: 15px; font-weight: 600; color: #7a5aa0; margin: 0 2px 12px; }
.fc-modes { padding-top: 2px; }
.fc-mode { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fc-empty { text-align: center; font-weight: 700; color: #5b2a86; }
.fc-progress { text-align: center; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 18px; color: #7a5aa0; margin: 4px 0 10px; }
.fc-card { background: #fff; border: 3px solid #d8cdea; border-radius: 22px; box-shadow: 0 6px 18px rgba(91,42,134,.18); padding: 14px 12px 16px; text-align: center; cursor: pointer; max-width: 430px; margin: 0 auto; }
.fc-card:active { transform: scale(.99); }
.fc-letter { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 88px; line-height: 1; color: #5b2a86; }
.fc-img { width: min(58vw, 250px); aspect-ratio: 1; object-fit: contain; display: block; margin: 6px auto 2px; }
.fc-word { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 31px; color: #2f6134; line-height: 1.15; }
.fc-say { font-size: 18px; font-weight: 700; color: #7a5aa0; margin: 4px 0 0; }
.fc-actions { display: flex; gap: 10px; max-width: 430px; margin: 14px auto 18px; }
.fc-hear { flex: 0 0 auto; background: #efe8fa; color: #5b2a86; }
.fc-said { flex: 1 1 auto; background: #5b2a86; color: #fff; font-size: 22px; min-height: 60px; }
.fc-end-card { background: #fff; border: 3px solid #d8cdea; border-radius: 22px; box-shadow: 0 6px 18px rgba(91,42,134,.18); padding: 26px 20px 20px; text-align: center; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 28px; color: #5b2a86; max-width: 430px; margin: 10px auto 18px; }
.fc-end-card p { font-size: 17px; margin: 8px 0 4px; }
.fc-end-card .fc-actions { margin-bottom: 10px; }
.fc-end-games { background: #efe8fa; color: #5b2a86; }

/* Accessibility: skip navigation + back to top (Desarae, Nov 9, 2026) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #5b2a86; color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 0 0 14px 0; text-decoration: none; }
.skip-link:focus { left: 0; outline: 3px solid #ffd964; outline-offset: 2px; }
#mainContent:focus { outline: none; }
#toTopBtn { position: fixed; right: 14px; bottom: 14px; z-index: 1500; background: #5b2a86; color: #fff; border: none; font: inherit; font-weight: 700; padding: 10px 16px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.28); cursor: pointer; }
#toTopBtn:focus-visible { outline: 3px solid #ffd964; outline-offset: 2px; }

/* Phone portrait stage: the width MUST follow the height cap — with
   height:auto a capped canvas keeps full width and squishes the art
   (Bean doll "smashed", Desarae Nov 9, 2026). aspect-ratio + object-fit
   make the box keep the canvas's own proportions; the cap shrinks both. */
@media (orientation: portrait) and (max-width: 1023px) {
  #stage { height: auto; }
}
#stage { object-fit: contain; }

/* Focus: tools pinned to the bottom of the SCREEN (Desarae, Nov 9, 2026 —
   "I should be able to see the tools at the bottom of the screen"):
   one scrollable row, always reachable without scrolling the page.
   The layout's bottom padding keeps Exit clear of the bar at page end. */
body.focus-mode .tool-picker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #e9f5ec; border-top: 3px solid #cfe6d2;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 14px rgba(0,0,0,.12);
}
body.focus-mode .color-layout { padding-bottom: 150px; }

/* Focus tools bar, second pass (Nov 9, 2026): two traps killed the first
   attempts — sticky bottom:0 inside the column flex container can only
   stick within its parent box (never reached the screen bottom), and
   position:fixed anchors to any TRANSFORMED ancestor. Neutralize every
   transform on the tool picker's ancestor chain while Focus is on, so the
   fixed bar truly pins to the screen. The zoom layer is not an ancestor of
   the palette panel, so zoom visuals are unaffected. */
body.focus-mode #colorView, body.focus-mode .color-layout,
body.focus-mode .palette-panel, body.focus-mode .palette-flow {
  transform: none !important;
}

/* Focus close X (Desarae, Nov 9, 2026): pinned to the top-right corner of
   the screen in Focus, alongside the bottom tools bar. Same transform trap
   as the bar — its ancestors are the same chain already neutralized. */
#focusX {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px;
  z-index: 2000; height: 52px; padding: 0 20px; border-radius: 999px;
  border: 3px solid #ffffff; background: #5b2a86; color: #ffffff;
  font-size: 19px; font-weight: 900; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); display: none;
  align-items: center; justify-content: center; gap: 6px;
}
body.focus-mode #focusX { display: flex; }
/* Focus is chrome-free (her Focus spec): the install banner and the
   back-to-top pill hide too, so the Close pill owns the top right. */
body.focus-mode #installBanner { display: none !important; }
body.focus-mode #toTopBtn { display: none; }

/* Accordion row (Desarae, Nov 9, 2026): the top-level group labels sit
   SIDE BY SIDE in one row; the open group's contents flow full-width
   below the row (CSS order puts labels first, content after), and the
   builder keeps only one group open at a time. */
#stampPicker { flex-wrap: wrap; overflow-x: visible; }
#stampPicker .stamp-group-label { order: 1; flex: 1 1 0; min-width: 0; }
#stampPicker .stamp-outfit-btn { order: 2; flex: 0 0 100%; }
#stampPicker .stamp-sub-label { order: 3; }
#stampPicker .stamp-pick { order: 4; }
body.focus-mode #stampPicker .stamp-group-label { flex: 1 1 0; }

/* Color placement rule (Desarae, Nov 9, 2026): in the normal editor the
   colors live inside the COLOR accordion; in FOCUS they are ONE single
   horizontal scroll row under the art — no accordion label, and the three
   swatch groups (plain, glitter, gradients) flatten into that one row. */
body.focus-mode #colorGroupLabel { display: none; }
body.focus-mode .palette-flow {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; align-items: center;
}
body.focus-mode .palette-flow .crayons { display: contents; }

/* Active chip label must stay readable (Desarae, Nov 9, 2026): categories
   without their own .chip-<slug> rule (Baby Z was the visible case) got the
   generic white-on-white active state — white text from .chip.active over
   the default white background. Give every active chip a filled purple
   gradient so white label text always has contrast. Per-category active
   rules with their own colors are more specific and still win where defined
   BEFORE this block; this is the guaranteed fallback for all of them. */
.chip.active { background: linear-gradient(180deg, #9b6fe0, #6d3fd4); color: #fff; }
.chip-baby-z { border-color: #6d3fd4; color: #4c2a9e; }
.chip-birthday { border-color: #e7549a; color: #b02a5e; }

/* Tic Tac Toe (Nov 9, 2026) */
.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 340px; margin: 14px auto; }
.ttt-cell { aspect-ratio: 1; background: #fff; border: 3px solid #5b2a86; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; }
.ttt-cell img { max-width: 100%; max-height: 88%; object-fit: contain; }

/* Memory match game (Desarae, Nov 9, 2026) */
.mem-grid { display: grid; gap: 8px; max-width: 420px; margin: 12px auto; }
.mem-grid.g6 { grid-template-columns: repeat(4, 1fr); }
.mem-grid.g8 { grid-template-columns: repeat(4, 1fr); }
.mem-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.mem-grid.c4 { grid-template-columns: repeat(4, 1fr); }
.mem-grid.c5 { grid-template-columns: repeat(5, 1fr); }
.mem-grid.c6 { grid-template-columns: repeat(6, 1fr); }
#memLevelSeg { flex-wrap: wrap; }
#memLevelSeg button:disabled { opacity: .55; cursor: default; }
.mem-card { aspect-ratio: 1; border: 3px solid #5b2a86; border-radius: 14px; background: #efe6fb; cursor: pointer; padding: 0; overflow: hidden; position: relative; }
.mem-card .mem-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mem-card .mem-back { font-size: 34px; }
.mem-card .mem-front { background: #fff; opacity: 0; }
.mem-card .mem-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mem-card.up .mem-front, .mem-card.done .mem-front { opacity: 1; }
.mem-card.up .mem-back, .mem-card.done .mem-back { opacity: 0; }
.mem-card.done { border-color: #e3a008; background: #fff3b0; cursor: default; }
.ttt-letter { font-size: 52px; font-weight: 800; line-height: 1; }
.ttt-x { color: #e33e2b; }
.ttt-o { color: #206ecf; }
.ttt-win { background: #fff3b0; border-color: #e3a008; }
.ttt-seg { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px auto; }
.ttt-seg button { border: 2px solid #5b2a86; background: #fff; color: #4c2a9e; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.ttt-seg button.ttt-on { background: #5b2a86; color: #fff; }
.ttt-seg button.maze-locked { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
/* Shape Match (Desarae, Nov 10, 2026): Stretchy names a shape, the child
   taps the matching one of 4 big SVG cards. Same chrome as the other
   games; 2x2 grid sized to fit a phone with no horizontal scroll. */
.shape-prompt { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 8px auto 2px; max-width: 420px; }
.shape-prompt img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.shape-ask { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 26px; color: #5b2a86; margin: 0; line-height: 1.15; }
.shape-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; margin: 12px auto; padding: 0 2px; }
.shape-card { background: #fff; border: 3px solid #d8cdea; border-radius: 18px; padding: 12px 8px 10px; cursor: pointer; box-shadow: 0 4px 12px rgba(91,42,134,.18); display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.shape-card:active { transform: scale(.97); }
.shape-card svg { width: min(30vw, 110px); height: auto; display: block; }
.shape-card-name { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 20px; color: #5b2a86; text-transform: capitalize; }
.shape-card.shape-good { border-color: #e3a008; background: #fff3b0; }
.shape-card.shape-shake { animation: shape-shake .4s ease; }
@keyframes shape-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
.shape-finish { text-align: center; margin: 18px auto; max-width: 420px; }
.shape-finish-title { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 30px; color: #5b2a86; margin: 6px 0; }
.shape-finish-text { font-size: 19px; font-weight: 700; color: #4c2a9e; margin: 4px 0; }
.shape-finish-stars { font-size: 26px; letter-spacing: 2px; margin: 8px 0 14px; word-break: break-all; }

/* Shape Sorter (Desarae, Nov 10, 2026): match each solid piece to its
   dashed outline "home". Tap a piece to pick it up (it lifts and glows
   gold), then tap its home to snap it in filled with its color. Same
   2-column grid chrome as Shape Match — no horizontal scroll on a phone. */
.sorter-head { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 20px; color: #5b2a86; text-align: center; margin: 10px auto 0; max-width: 420px; }
.sorter-slots, .sorter-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; margin: 6px auto; padding: 0 2px; }
.sorter-slot { background: #faf7ff; border: 3px dashed #c9badd; border-radius: 18px; padding: 12px 8px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.sorter-slot svg { width: min(26vw, 96px); height: auto; display: block; }
.sorter-slot-name { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 19px; color: #a58fc4; text-transform: capitalize; }
.sorter-slot.sorter-done { border: 3px solid #e3a008; background: #fff3b0; cursor: default; }
.sorter-slot-name.sorter-done-name { color: #5b2a86; }
.sorter-piece { background: #fff; border: 3px solid #d8cdea; border-radius: 18px; padding: 12px 8px 10px; cursor: pointer; box-shadow: 0 4px 12px rgba(91,42,134,.18); display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; transition: transform .12s ease, border-color .12s ease, background .12s ease; touch-action: none; user-select: none; -webkit-user-select: none; }
.sorter-piece:active { transform: scale(.97); }
.sorter-piece svg { width: min(26vw, 96px); height: auto; display: block; pointer-events: none; }
.sorter-piece .shape-card-name { pointer-events: none; }
.sorter-piece.sorter-picked { border-color: #e3a008; background: #fff8d6; transform: translateY(-5px) scale(1.04); box-shadow: 0 10px 20px rgba(227,160,8,.35); }
/* a placed piece leaves the tray flow entirely, so the pieces still
   waiting shift up to fill its spot — no empty hole is left behind */
.sorter-piece.sorter-used { display: none; }
/* drag-and-drop (Desarae, Nov 10, 2026): the original piece stays in the
   tray as a pale ghost while a lifted copy follows the finger/cursor */
.sorter-piece.sorter-ghost { opacity: .35; }
.sorter-piece.sorter-dragging { position: fixed; z-index: 999; pointer-events: none; margin: 0; transform: scale(1.05); border-color: #e3a008; background: #fff8d6; box-shadow: 0 14px 28px rgba(91,42,134,.35); transition: none; }
.sorter-slot.sorter-hover { border-color: #e3a008; background: #fff8d6; }
/* win fireworks: a full-screen canvas that cleans itself up */
.sorter-fireworks { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }

/* Maze (Nov 9, 2026) */
.maze-pad { text-align: center; margin: 6px auto; }
.maze-pad .maze-arrow { font-size: 26px; width: 58px; height: 58px; margin: 3px; border: 2px solid #5b2a86; background: #fff; border-radius: 14px; cursor: pointer; }

/* Focus button centering (Desarae, Nov 9, 2026): the 🎯 Focus label sat low
   in its tall pill — center the icon + text on the button, both axes. */
.focus-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }

/* SWATCH STANDARD (Desarae, Nov 9, 2026): color swatches ALWAYS look like
   her screenshot — BIG rounded-square tiles (54px, 14px radius) in ONE
   single row in the middle of the palette, in every mode, so the colors
   are easy to see. The palette groups flatten into that one row. */
.palette-flow { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 10px 2px; -webkit-overflow-scrolling: touch; align-items: center; }
.palette-flow .crayons { display: contents; }
.palette-flow .crayon, body.focus-mode .palette-flow .crayon { flex: 0 0 54px; width: 54px; height: 54px; aspect-ratio: 1; border-radius: 14px; }

/* Brush Size tile in the Focus strip (Desarae, Nov 9, 2026: "Smaller/Bigger
   goes where brushes are") — when the size-row moves into the tool strip
   it wears the tile shape: same box as a tool tile, Smaller on top, the
   size dot in the middle, Bigger underneath. */
.tool-picker .size-row.size-tile { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #fff; border: 3px solid #35a7e8; border-radius: 14px; padding: 4px 8px; min-height: 74px; }
.tool-picker .size-row.size-tile .btn-step { font-size: 11px; font-weight: 800; padding: 2px 6px; border: none; background: none; color: #123a6b; cursor: pointer; white-space: nowrap; }
.tool-picker .size-row.size-tile .size-preview { display: flex; align-items: center; justify-content: center; }

/* Brush Size — NOT its own box (Desarae, Nov 9, 2026 clarification): in the
   Focus strip the size control drops the tile border/background entirely
   and sits inline in the brushes row — Smaller · dot · Bigger in a line,
   part of the row itself. Overrides the .size-tile box above. */
.tool-picker .size-row.size-tile { flex-direction: row; align-items: center; gap: 4px; background: transparent; border: none; border-radius: 0; padding: 0 4px; min-height: 0; }
.tool-picker .size-row.size-tile .btn-step { font-size: 12px; }

/* FACE — HORIZONTAL SCROLL ROW (Desarae, Nov 9, 2026): no accordion; the
   face pieces sit in ONE horizontal scroll row, shown whenever the Face
   tool is active. */
body.face-mode .stamp-picker { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; }
body.face-mode .stamp-picker .stamp-pick { flex: 0 0 auto; }

/* FACE ROW — reinforce (the toolbox relocates the picker into a transformed
   panel; !important keeps the Face row a single scroll row everywhere). */
body.face-mode .stamp-picker, body.face-mode .tool-panel .stamp-picker, body.focus-mode.face-mode .stamp-picker { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; }

/* FOCUS CLOTHING ROW (Desarae, Nov 9, 2026): in Focus the Closet picker is
   ONE flattened horizontal scroll row — no wrap, and the size control +
   Clear Clothes ride inside it as row items (size pinned first via a
   sticky position so it stays visible while the row scrolls). */
body.focus-mode .stamp-picker { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; }
.size-row.in-clothing-row { position: sticky; left: 0; z-index: 3; background: #e9f5ec; flex: 0 0 auto; align-self: center; padding-right: 6px; }
#clearClothesBtn.in-clothing-row { flex: 0 0 auto; align-self: center; }

/* Focus CLOSE — VERY SMALL (Desarae, Nov 9, 2026 clarification: "Don't fix
   the Close — make it very small, top right"): a compact round ✕ pinned
   top-right, NOT the big pill. Overrides the #focusX rule above. The
   centering direction belonged to the Focus button's label, not this. */
#focusX { width: 30px; height: 30px; padding: 0; font-size: 13px; border-width: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* FOCUS SIZE ROW + REACHABLE CLOSE (Desarae, Nov 10, 2026 — "The size
   slider overlaps and the bottom button to close focus is impossible
   to get to"): in Focus the brush-size control is its OWN full-width
   row in the panel flow, right under the colors strip — label, slider
   and preview dot on one line, nothing over or under it. And the
   "✕ Close Focus" pill is pinned to the bottom edge of the screen,
   just above the fixed tools bar (the bar measures ~127px tall at
   phone width), so it can always be tapped without scrolling to the
   very end of the page. */
body.focus-mode #brushSizeRow.size-strip {
  flex: 0 0 auto; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
  gap: 10px; margin: 2px 0 4px; padding: 6px 12px;
  background: #ffffff; border-top: 2px solid #e5d9f7; border-bottom: 2px solid #e5d9f7;
  position: static; z-index: auto; height: auto; overflow: visible;
}
body.focus-mode #brushSizeRow.size-strip .size-slider { flex: 1 1 auto; min-width: 0; }
body.focus-mode #focusExit {
  position: fixed; top: auto; left: 10px; right: 10px; width: auto; height: auto;
  bottom: calc(135px + env(safe-area-inset-bottom));
  z-index: 85; margin: 0; padding: 12px 14px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
body.focus-mode .color-layout { padding-bottom: 235px; }

/* COLOR — ALWAYS ONE HORIZONTAL SCROLL ROW (Desarae, Nov 9, 2026): no
   accordion anywhere; the palette is a single nowrap scroll row of the
   standard big swatches in the normal editor too, not only in Focus. */
.palette-flow { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; }
.palette-flow .crayons { display: contents; }

/* COLOR EXPAND (Desarae, Nov 9, 2026): default = one scroll row; expanded
   = wrapped see-all grid. The toggle is a small pill by the palette. */
.color-expand-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 7px 14px; background: #f4edff; border: 2px solid #9b59d0; border-radius: 999px; color: #5b2a86; font-family: "Baloo 2", cursive; font-weight: 800; font-size: 14px; cursor: pointer; }
body.colors-expanded .palette-flow { flex-wrap: wrap !important; overflow-x: visible !important; overflow-y: visible !important; }
body.colors-expanded .palette-flow .crayons { display: contents; }

/* Maze win (Desarae, Nov 9, 2026) */
.maze-congrats { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 22px; color: #5b2a86; }

/* FOCUS = EXACTLY 3 HORIZONTAL SCROLL ROWS, NO ACCORDIONS (Desarae,
   Nov 9, 2026 — "In focus the accordions go away and just have 3
   horizontal scroll menus"): row 1 = colors, row 2 = the stamps /
   clothing / face pieces (the stamp picker), row 3 = the tools, pinned
   at the bottom of the screen (rule above). In Focus every group and
   sub-group header in the picker is GONE and every piece shows inline
   in its row — no accordion can hide a piece. Normal mode keeps its
   accordions (Clothing/Face already have none). */
body.focus-mode .stamp-group-label, body.focus-mode .stamp-sub-label { display: none !important; }
body.focus-mode .stamp-pick { display: inline-flex !important; }
body.focus-mode .stamp-pick[hidden] { display: none !important; }
body.focus-mode .palette-panel { display: flex !important; flex-direction: column; }

/* ===== v1266 batch (Desarae, Nov 9, 2026) ===== */
/* "See all colors" is a SQUARE TILE inside the color palette row */
.color-expand-btn { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 14px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 23px; line-height: 1; }
/* Random Size shrinks to a tile like the other tiles */
#stampPicker #randomSizeBtn { flex: 0 0 auto; width: 70px; min-height: 82px; }
/* Closet sub menu: horizontal accordion pills (normal editor; Focus keeps its flat row) */
body:not(.focus-mode) #stampPicker .stamp-sub-label[data-gtop="Clothing"] { flex: 0 0 auto; align-self: center; margin: 2px 0; padding: 7px 13px; border: 2px solid #c9a6ec; border-radius: 999px; background: #f4edff; font-size: 12.5px; }
body:not(.focus-mode) #stampPicker .stamp-sub-label[data-gtop="Clothing"][aria-expanded="true"] { background: #5b2a86; color: #ffffff; border-color: #5b2a86; }
/* Stamps view-all tile */
#stampPicker #stampsExpandBtn { order: 0; border-color: #9b59d0; background: #f4edff; }
.stamp-expand-tile .se-emoji { font-size: 30px; line-height: 1; }

/* ===== Seasons game (Desarae, Nov 10, 2026) =====
   A big seasonal picture card over four big season buttons. All
   classes are seas- prefixed; the finish block reuses .shape-finish. */
.seas-stage { position: relative; max-width: 420px; margin: 0 auto; padding: 0 2px; }
/* In-game sound toggles (Desarae, Nov 10, 2026): sit at the right of the
   Seasons and ABC Flash Cards headers, styled by the shared .sound-btn
   look (a bit smaller so Back + title + toggle fit a phone-width header
   on one line). They flip the ONE global 'se-sounds' setting — see
   seasons.js and flashcards.js. */
.seas-sound, .abc-sound { margin-left: auto; font-size: 15px; padding: 9px 12px; }
.seas-pic { background: #fff; border: 3px solid #d8cdea; border-radius: 22px; box-shadow: 0 4px 12px rgba(91,42,134,.18); margin: 12px auto; padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.seas-emoji { font-size: 110px; line-height: 1.1; display: block; }
.seas-pic-name { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 22px; color: #5b2a86; text-transform: capitalize; }
.seas-pic.seas-pop { animation: seas-pop .55s ease; }
@keyframes seas-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07) rotate(-1.5deg); } 70% { transform: scale(1.03) rotate(1deg); } 100% { transform: scale(1); } }
.seas-spark { position: absolute; font-size: 26px; pointer-events: none; z-index: 5; animation: seas-spark .95s ease-out forwards; }
@keyframes seas-spark { 0% { opacity: 0; transform: translateY(6px) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1.25); } }
.seas-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px auto 4px; }
.seas-answer { background: #fff; border: 3px solid #d8cdea; border-radius: 18px; padding: 12px 8px 10px; cursor: pointer; box-shadow: 0 4px 12px rgba(91,42,134,.18); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-family: "Baloo 2", cursive; }
.seas-answer:active { transform: scale(.97); }
.seas-answer-emoji { font-size: 44px; line-height: 1.1; display: block; }
.seas-answer-name { font-weight: 800; font-size: 21px; color: #5b2a86; }
.seas-answer.seas-good { border-color: #e3a008; background: #fff3b0; }
.seas-answer.seas-shake { animation: seas-shake .4s ease; }
@keyframes seas-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }

/* ===== No double-tap zoom (Desarae, Nov 10, 2026) =====
   touch-action: manipulation on the page AND on everything tappable,
   so fast little fingers tapping buttons, cards and game pieces never
   zoom the page — while ordinary scrolling keeps working (manipulation
   still allows pan). The coloring canvas (#stage) and the Shape Sorter
   pieces keep their own touch-action: none — those rules are more
   specific than the element selectors below, so they still win. */
body, button, a, input, select, textarea, label,
.game-card, .shape-card, .seas-answer, .sorter-slot,
.mem-card, .pz-pic, .pz-pick-card, .pz-tile, .ttt-cell, .fc-card { touch-action: manipulation; }

/* Stretchy Points call-outs (Desarae, Nov 10, 2026): always-visible
   balance pill in the top bar, earning badges on hub cards, the rule
   line under the profile wallet, and the ABC in-game earn line. */
.se-points-chip { display: inline-flex; align-items: center; background: #fff7dd; border: 2px solid #e9b949; color: #7a5200; border-radius: 999px; padding: 3px 9px; font-size: 13.5px; font-weight: 800; white-space: nowrap; font-family: "Baloo 2", cursive; align-self: center; }
@keyframes sePointsPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.se-points-chip.se-points-pop { animation: sePointsPop .45s ease; }
#pointsChip { cursor: pointer; }
#pointsChip .se-coin, #pointsChip .se-coin-bill { vertical-align: -3px; }
#pointsChip .se-coin-gem { font-size: 14px; line-height: 1; }
/* Wallet sheet (Desarae, Nov 10, 2026): tapping the coins pill opens the
   full per-denomination breakdown; the pill stays the only footprint. */
.se-wallet-panel { position: fixed; top: 64px; right: 10px; z-index: 1300; width: min(280px, 88vw); max-height: calc(100vh - 84px); overflow-y: auto; background: #fffdf4; border: 2px solid #e9b949; border-radius: 16px; box-shadow: 0 12px 30px rgba(34,56,74,.25); padding: 12px 14px; box-sizing: border-box; text-align: left; }
.se-wallet-panel[hidden] { display: none; }
.se-wallet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.se-wallet-title { font-size: 15px; font-weight: 800; color: #7a5200; }
.se-wallet-close { background: none; border: none; font-size: 15px; font-weight: 800; cursor: pointer; color: #7a5200; padding: 2px 6px; line-height: 1; font-family: inherit; }
.game-card { position: relative; }
.game-badge { position: absolute; top: 8px; right: 8px; max-width: calc(100% - 16px); box-sizing: border-box; background: #fff7dd; border: 2px solid #e9b949; color: #7a5200; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 800; line-height: 1.35; white-space: normal; text-align: center; z-index: 2; }
.se-earn-rule { margin: 2px 0 8px; font-size: 12.5px; font-weight: 700; color: #7a5200; }
.fc-earn { margin: 2px 0 6px; text-align: center; font-family: "Baloo 2", cursive; font-size: 14.5px; font-weight: 800; color: #7a5200; }
.se-pf-row select { flex: 1; min-width: 0; padding: 9px 10px; border: 2px solid #cfd8e3; border-radius: 10px; font-size: 16px; font-family: inherit; box-sizing: border-box; background: #fff; }
.game-badge[hidden], .fc-earn[hidden] { display: none !important; }

/* Seasons multi-pick (Nov 10, 2026): a chosen season in a multi-season
   round stays lit teal until the set is complete. */
.seas-answer.seas-picked { border-color: #2a9d8f; background: #d9f2ec; box-shadow: 0 0 0 2px #2a9d8f inset, 0 4px 12px rgba(42,157,143,.25); }

/* Brush size slider (Nov 10, 2026) + Spelling / Type the Shape /
   level chips (Nov 10, 2026). */
.size-slider { flex: 1 1 auto; min-width: 90px; accent-color: #5b2a86; height: 34px; }
.size-label { font-weight: 800; color: #5b2a86; white-space: nowrap; }
.game-card { position: relative; }
.game-level { position: absolute; top: 8px; left: 8px; background: #5b2a86; color: #fff; font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.spell-stage { text-align: center; margin: 8px auto 4px; }
.spell-pic { font-size: 92px; line-height: 1.1; }
.spell-slots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 10px auto 4px; }
.spell-slot { width: 38px; height: 48px; border-bottom: 5px solid #5b2a86; font: 800 32px "Baloo 2", cursive; color: #333; display: inline-flex; align-items: flex-end; justify-content: center; }
.spell-slot.filled { color: #2a7d2e; }
.spell-slot.revealed { color: #b3541e; }
.spell-tries { font-weight: 800; color: #5b2a86; margin: 6px 0 0; }
.spell-banner { font: 800 22px "Baloo 2", cursive; color: #2a7d2e; margin: 8px 0 0; }
.spell-pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 430px; margin: 12px auto 4px; }
.spell-key { font: 800 19px "Baloo 2", cursive; padding: 11px 0; border-radius: 12px; border: 2px solid #d8cdea; background: #fff; color: #5b2a86; cursor: pointer; box-shadow: 0 2px 6px rgba(91,42,134,.15); }
.spell-key:active { transform: scale(.95); }
.spell-key.key-good { background: #d9f2dc; border-color: #2a7d2e; color: #2a7d2e; }
.spell-key.key-bad { background: #f6dede; border-color: #c0392b; color: #c0392b; opacity: .55; }
.spell-key:disabled { cursor: default; }
.spell-key.pad-go { background: #2a7d2e; border-color: #2a7d2e; color: #fff; font-size: 22px; }
.spell-key.pad-del { background: #fdf3e0; }
.ts-stage { text-align: center; }
.ts-shape { width: 170px; height: 170px; margin: 6px auto; cursor: pointer; }
.ts-shape svg { width: 100%; height: 100%; }
.ts-entry { min-height: 52px; max-width: 430px; margin: 6px auto; border: 3px solid #d8cdea; border-radius: 14px; background: #fff; font: 800 30px "Baloo 2", cursive; letter-spacing: 3px; color: #333; display: flex; align-items: center; justify-content: center; padding: 4px 10px; }
.type-entry-ph { color: #9a8fb0; font-size: 19px; letter-spacing: 0; }

/* Chore Chart (Nov 10, 2026): big tappable daily chore rows; a done
   row turns green with a check. The Grown-ups panel edits the list. */
.chore-list { max-width: 430px; margin: 10px auto 4px; display: flex; flex-direction: column; gap: 10px; }
/* Time-of-day groups (Nov 10, 2026): Anytime first, then Morning,
   Daytime, Nighttime — a small header over each group on the chart. */
.chore-group-h { font: 800 15.5px "Baloo 2", cursive; color: #8a6d1f; margin: 5px 2px -3px; }
.chore-tod-select { flex: 0 1 auto; min-width: 0; max-width: 124px; font: 700 14.5px "Nunito", sans-serif; padding: 8px 5px; border: 2px solid #d8cdea; border-radius: 10px; color: #5b2a86; background: #fff; }
.chore-tod-select:disabled { opacity: .45; }
.chore-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: 800 19px "Baloo 2", cursive; color: #5b2a86; background: #fff; border: 3px solid #d8cdea; border-radius: 16px; padding: 14px 16px; cursor: pointer; box-shadow: 0 3px 8px rgba(91,42,134,.15); }
.chore-row:active { transform: scale(.98); }
.chore-row .chore-box { flex: 0 0 auto; width: 34px; height: 34px; border: 3px solid #b9a8dd; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #2a7d2e; background: #fff; }
.chore-row.done { background: #eef8ee; border-color: #2a7d2e; color: #2a7d2e; }
.chore-row.done .chore-box { border-color: #2a7d2e; background: #d9f2dc; }
.chore-row.done .chore-name { text-decoration: line-through; }
.chore-name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.chore-alldone { text-align: center; font: 800 21px "Baloo 2", cursive; color: #2a7d2e; margin: 12px auto 2px; }
.chore-edit { max-width: 430px; margin: 8px auto 4px; background: #fffaf0; border: 2px dashed #e9b949; border-radius: 16px; padding: 12px; }
.chore-add { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.chore-add input { flex: 1 1 auto; min-width: 0; font: 700 16px "Nunito", sans-serif; padding: 10px 12px; border: 2px solid #d8cdea; border-radius: 12px; color: #333; }
.chore-edit-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #eee3c2; border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; font: 800 16px "Baloo 2", cursive; color: #5b2a86; }
.chore-del { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 2px solid #e5b4b4; background: #fdf0f0; color: #c0392b; font-size: 16px; font-weight: 800; cursor: pointer; }
.chore-del:active { transform: scale(.94); }
/* Chore Chart phase 2 (Nov 10, 2026): the REAL piggy bank. Its panel
   is pink/green and plainly labeled REAL, kept apart from the purple
   game chart and the bronze game coins so the two never blur. */
.piggy-card { max-width: 430px; margin: 14px auto 4px; background: #fdf3f7; border: 3px solid #e88bb0; border-radius: 18px; padding: 14px 16px; text-align: center; box-shadow: 0 3px 10px rgba(190,90,140,.18); }
.piggy-title { font: 800 19px "Baloo 2", cursive; color: #a03d68; margin: 0 0 2px; }
.piggy-amt { font: 800 38px "Baloo 2", cursive; color: #2a7d2e; margin: 2px 0; line-height: 1.1; }
.piggy-sub { font: 600 13.5px "Nunito", sans-serif; color: #7a5570; margin: 2px 0 0; }
/* Kid-readable callout on the chart (Nov 10, 2026): the $ amounts
   are REAL money parents pay — kept on the real (pink) side of
   the chart so it never blurs with game coins. */
.chore-real-callout { font: 800 16.5px "Baloo 2", cursive; color: #a03d68; background: #fff; border: 2px dashed #e88bb0; border-radius: 12px; padding: 8px 12px; margin: 8px auto 2px; }
.chore-real-tag { flex: 0 0 auto; font: 800 12.5px "Nunito", sans-serif; color: #2a7d2e; background: #fdf3f7; border: 2px solid #e88bb0; border-radius: 999px; padding: 3px 9px; }
.chore-val { display: inline-flex; align-items: center; gap: 3px; font: 800 16px "Baloo 2", cursive; color: #2a7d2e; }
.chore-val-input { width: 76px; font: 700 16px "Nunito", sans-serif; padding: 8px 8px; border: 2px solid #58a05c; border-radius: 10px; color: #222; background: #fff; }
.chore-add .chore-val-input { flex: 0 0 76px; }
.chore-edit-row .chore-val { flex: 0 0 auto; }
.spend-box { margin-top: 14px; background: #fdf3f7; border: 2px solid #e88bb0; border-radius: 14px; padding: 12px; }
.spend-title { font-size: 17px; }
.spend-msg { font: 700 14.5px "Nunito", sans-serif; color: #a03d68; text-align: center; margin: 4px 0 8px; min-height: 0; }
.spend-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #f3d3e0; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font: 700 15px "Nunito", sans-serif; color: #555; }
.spend-when { flex: 0 0 auto; color: #a03d68; font-weight: 800; }
.spend-note { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.spend-amt { flex: 0 0 auto; font: 800 16px "Baloo 2", cursive; color: #c0392b; }
.spend-none { margin: 2px 0; }
/* Piggy bank visual (Nov 10, 2026): the glass pig SVG at the top of
   the chart. The money pile inside is painted by chores.js from the
   real balance — real-looking US coins and bills live ONLY here. */
.piggy-stage { display: block; width: min(300px, 88%); height: auto; margin: 0 auto 2px; }
/* Parent PIN gate (Nov 10, 2026): money controls in the Grown-ups
   panel stay locked until the Parent PIN is entered for the visit. */
.pin-box { background: #fdf3f7; border: 2px solid #e88bb0; border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.pin-title { text-align: center; }
.pin-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-row input { flex: 1 1 130px; min-width: 0; font: 700 16px "Nunito", sans-serif; padding: 10px 12px; border: 2px solid #e9b7cd; border-radius: 12px; color: #333; }
.pin-open-note { color: #2a7d2e; font-weight: 800; }
.chore-val-input:disabled, .pin-row input:disabled { opacity: .45; }
/* Locked $ fields read as LOCKED, not just pale (Nov 10, 2026):
   flat grey fill and border while the Parent PIN gate is shut —
   the green border above is the "you can edit this" state. */
.chore-val-input:disabled { background: #ececec; border-color: #c9c9c9; color: #8a8a8a; opacity: .8; }
.btn:disabled { opacity: .5; cursor: default; }
/* End-of-day approvals (Nov 10, 2026): money chores wait for a
   grown-up check before the real $ lands in the piggy bank. */
.approve-box { margin-top: 14px; background: #fff7dd; border: 2px solid #e9b949; border-radius: 14px; padding: 12px; }
.approve-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #eee3c2; border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; font: 700 15px "Nunito", sans-serif; color: #555; flex-wrap: wrap; }
.approve-name { flex: 1 1 110px; min-width: 0; overflow-wrap: break-word; font-family: "Baloo 2", cursive; font-weight: 800; color: #5b2a86; }
.approve-when { flex: 0 0 auto; color: #8a6d1f; font-weight: 800; font-size: 13.5px; }
.approve-amt { flex: 0 0 auto; font: 800 16px "Baloo 2", cursive; color: #2a7d2e; }
.appr-btn, .decl-btn { flex: 0 0 auto; font: 800 14px "Nunito", sans-serif; border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.appr-btn { background: #eef8ee; border: 2px solid #2a7d2e; color: #2a7d2e; }
.decl-btn { background: #fdf0f0; border: 2px solid #e5b4b4; color: #c0392b; }
.appr-btn:active, .decl-btn:active { transform: scale(.95); }
/* Main-page Approve Chores entry (Desarae, Nov 10, 2026): sits on the
   chart under the piggy card so a parent sees waiting money chores
   without opening the Grown-ups panel first. */
.approve-entry-wrap { justify-content: center; margin: 10px 0 2px; }
.approve-entry-btn { font: 800 17px "Baloo 2", cursive; color: #7a5200; background: #fff7dd; border: 3px solid #e9b949; border-radius: 999px; padding: 11px 20px; cursor: pointer; box-shadow: 0 3px 8px rgba(122,82,0,.18); }
.approve-entry-btn:active { transform: scale(.97); }
.approve-entry-btn.has-waiting { background: #ffe9a8; border-color: #d99a06; color: #6b4500; }
/* Review Chores page (Nov 10, 2026, phase 11): the dedicated
   full-page approval view — Waiting with deadlines, Approved
   with a 24-hour Undo, Missed for expired chores — plus the
   kid-visible expiry banner on the chart. */
.review-h { margin: 18px 0 6px; font-size: 19px; color: #22384a; }
.review-days { flex: 0 0 auto; color: #b97b06; font-weight: 800; font-size: 13px; }
.undo-btn { flex: 0 0 auto; font: 800 14px "Nunito", sans-serif; border-radius: 999px; padding: 7px 13px; cursor: pointer; background: #eef3fb; border: 2px solid #7d9cc4; color: #33587e; }
.undo-btn:active { transform: scale(.95); }
.review-final { flex: 0 0 auto; font: 800 13px "Nunito", sans-serif; color: #8a8a8a; }
.missed-row { opacity: .75; }
.approve-all-wrap { justify-content: center; margin: 6px 0 4px; }
.approve-all-btn { font: 800 16px "Baloo 2", cursive; color: #6b4500; background: #ffe9a8; border: 3px solid #d99a06; border-radius: 999px; padding: 10px 22px; cursor: pointer; box-shadow: 0 3px 8px rgba(122,82,0,.18); }
.approve-all-btn:active { transform: scale(.97); }
#reviewPinSlot .pin-box { margin-top: 12px; }
.chore-expired-banner { display: flex; align-items: center; gap: 10px; background: #fff3e0; border: 2px solid #e8a33d; border-radius: 14px; padding: 10px 12px; margin: 10px 0 2px; font: 700 15px "Nunito", sans-serif; color: #7a4d00; }
.chore-expired-banner[hidden] { display: none; }
.chore-expired-banner span { flex: 1 1 auto; }
.chore-expired-ok { flex: 0 0 auto; font: 800 14px "Nunito", sans-serif; background: #ffe9a8; border: 2px solid #d99a06; color: #6b4500; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.chore-expired-ok:active { transform: scale(.95); }
.earn-title { margin-top: 12px; }
.earn-amt { flex: 0 0 auto; font: 800 16px "Baloo 2", cursive; color: #2a7d2e; }
.chore-pending-tag { flex: 0 0 auto; font: 800 12.5px "Nunito", sans-serif; color: #8a6d1f; background: #fff7dd; border: 2px solid #e9b949; border-radius: 999px; padding: 3px 9px; }
/* Top-of-chart bundle (Nov 10, 2026): game-coin total with the
   piggy bank, the kid's savings goal, and the past-days history. */
.piggy-card { position: relative; overflow: hidden; }
.chore-coins { display: inline-block; font: 800 15.5px "Baloo 2", cursive; color: #5b2a86; background: #f1eafd; border: 2px solid #b9a8dd; border-radius: 999px; padding: 3px 14px; margin: 2px 0 4px; }
.goal-box { margin-top: 10px; border-top: 2px dashed #f3d3e0; padding-top: 10px; }
.coin-goal-box { margin-top: 12px; border-top: 2px dashed #f3d3e0; padding-top: 10px; }
.coin-goal-title { font: 800 16.5px "Baloo 2", cursive; color: #a03d68; margin: 0 0 6px; }
.goal-line { font: 800 16.5px "Baloo 2", cursive; color: #a03d68; margin: 0 0 6px; }
.goal-line .goal-art { display: inline-flex; align-items: center; vertical-align: -4px; margin-right: 2px; }
.goal-line .goal-art .se-coin-gem { font-size: 17px; line-height: 1; }
.goal-bar { height: 16px; background: #fbe3ee; border: 2px solid #e88bb0; border-radius: 999px; overflow: hidden; margin: 0 auto 8px; max-width: 340px; }
.goal-fill { height: 100%; width: 0; background: linear-gradient(90deg, #7bc47f, #2a7d2e); border-radius: 999px; transition: width .6s ease; }
.goal-edit { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
.goal-edit input[type="text"] { flex: 1 1 170px; min-width: 0; font: 700 16px "Nunito", sans-serif; padding: 9px 11px; border: 2px solid #e9b7cd; border-radius: 12px; color: #333; }
.goal-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.goal-btn { font-size: 14.5px; }
/* Goal Clear buttons (Nov 10, 2026): RED and destructive — and a
   first tap only arms them (see armClear in chores.js); the
   armed state is a deeper solid red so the change is obvious. */
.goal-clear-btn { background: linear-gradient(180deg, #ff7a59, #e33e2b); box-shadow: 0 3px 0 #a02318; color: #fff; }
.goal-clear-btn.armed { background: #b02a1e; box-shadow: 0 3px 0 #6e150c; color: #fff; }
/* Goal currency kinds (Nov 10, 2026): real money / game coins / both */
.goal-kind { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; flex: 1 1 100%; }
.goal-kind-btn { font-size: 14.5px; opacity: .65; }
.goal-kind-btn.on { opacity: 1; outline: 3px solid #e88bb0; outline-offset: 1px; }
.goal-fill.full { background: linear-gradient(90deg, #ffd54f, #f2b705); }
.goal-confetti { position: absolute; bottom: 34%; font-size: 21px; pointer-events: none; z-index: 3; }
.history-box { margin-top: 14px; background: #eef6fb; border: 2px solid #a8c8e0; border-radius: 14px; padding: 12px; }
/* Tap-to-add preset chores (Nov 10, 2026) */
.chore-preset-label { font: 800 15px "Baloo 2", cursive; color: #8a6d1f; margin: 2px 0 6px; }
.chore-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chore-preset { font: 700 14.5px "Nunito", sans-serif; color: #5b2a86; background: #fff; border: 2px solid #d8cdea; border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.chore-preset:active { transform: scale(.95); }
.chore-preset.added { color: #2a7d2e; background: #eef8ee; border-color: #9ccb9e; cursor: default; opacity: .85; }
/* Brush-teeth 3x bonus (Nov 10, 2026): progress pips on the brush row,
   a gold hint pill until the third brush, then the bonus note on its
   own line so nothing squeezes at phone width. */
.chore-row.brush { flex-wrap: wrap; }
.chore-pips { flex: 0 0 auto; display: inline-flex; gap: 4px; align-items: center; }
.chore-pips .pip { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #b9a8dd; background: #fff; display: inline-block; box-sizing: border-box; }
.chore-pips .pip.on { background: #2a7d2e; border-color: #2a7d2e; }
.chore-bonus-tag { flex: 0 0 auto; font: 800 12.5px "Nunito", sans-serif; color: #8a6d1f; background: #fff7dd; border: 2px solid #e9b949; border-radius: 999px; padding: 3px 9px; }
.chore-bonus-note { flex: 1 1 100%; font: 800 16px "Baloo 2", cursive; color: #b8860b; margin-top: 2px; }

/* Number Words in Order (Nov 10, 2026): shuffled number-word chips
   are tapped (or dragged) into a line of nine spots, smallest to
   biggest. Right spots turn green and lock; wrong spots shake and
   hop back to the tray. */
.nw-line { max-width: 520px; margin: 12px auto 4px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nw-slot { flex: 0 1 auto; min-width: 76px; min-height: 64px; border: 3px dashed #b9a8dd; border-radius: 16px; background: #faf7ff; display: flex; align-items: center; justify-content: center; padding: 4px; }
.nw-slot.nw-locked { border-style: solid; border-color: #2a7d2e; background: #eef8ee; }
.nw-spotnum { font: 800 15px "Nunito", sans-serif; color: #c3b4e6; }
.nw-tray { max-width: 520px; margin: 12px auto 4px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 70px; padding: 10px; border: 2px dashed #e9b949; border-radius: 16px; background: #fffaf0; }
.nw-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; font: 800 18px "Baloo 2", cursive; color: #5b2a86; background: #fff; border: 3px solid #d8cdea; border-radius: 14px; padding: 9px 13px; cursor: pointer; box-shadow: 0 3px 8px rgba(91,42,134,.15); max-width: 168px; }
.nw-chip:active { transform: scale(.97); }
.nw-chip .nw-word { line-height: 1.15; overflow-wrap: break-word; text-align: center; }
.nw-chip .nw-num { font: 800 13px "Nunito", sans-serif; color: #2a7d2e; line-height: 1.2; overflow-wrap: break-word; text-align: center; }
.nw-chip.nw-good { background: #d9f2dc; border-color: #2a7d2e; color: #2a7d2e; cursor: default; }
/* Drag & drop + Pairs/Numbers faces (Desarae, Nov 10, 2026 late): tiles are
   dragged with a finger, so they take touch-action: none (no page scroll
   mid-drag) and no text selection; the drag clone follows the finger and
   the spot under it lights up, mirroring the Shape Sorter drag classes. */
.nw-chip { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nw-chip.nw-ghost { opacity: .35; }
.nw-chip.nw-dragging { position: fixed; z-index: 999; pointer-events: none; margin: 0; transform: scale(1.05); border-color: #e3a008; background: #fff8d6; box-shadow: 0 14px 28px rgba(91,42,134,.35); transition: none; }
.nw-slot.nw-hover { border-style: solid; border-color: #e3a008; background: #fff8d6; }
.nw-tray.nw-hover { border-color: #e3a008; background: #fff3cf; }
.nw-chip .nw-numonly { font: 800 20px "Baloo 2", cursive; line-height: 1.15; overflow-wrap: break-word; text-align: center; }
.nw-chip .nw-pairnum { font: 800 20px "Baloo 2", cursive; line-height: 1.1; overflow-wrap: break-word; text-align: center; }
.nw-chip .nw-pairword { font: 800 14px "Nunito", sans-serif; color: #2a7d2e; line-height: 1.2; overflow-wrap: break-word; text-align: center; }
.nw-chip .nw-numonly.nw-bignum, .nw-chip .nw-pairnum.nw-bignum { font-family: "Nunito", sans-serif; font-size: 13px; }
#nwLevelSeg button:disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
@keyframes nwShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.nw-chip.nw-shake { animation: nwShake .55s ease; border-color: #e5b4b4; background: #fdf0f0; }
.nw-note { max-width: 430px; margin-left: auto; margin-right: auto; }

/* Slim "Signed in as <username>" line under the header (Desarae, Nov 10, 2026 — standard on every game). */
.se-signedin-line{text-align:right;font-family:"Nunito",sans-serif;font-size:13px;font-weight:700;color:#5f7263;padding:4px 16px 0}
.se-signedin-line[hidden]{display:none}

/* My Progress page (Desarae, Nov 10, 2026): roomy per-game report
   cards — the readable home of the play-time report that used to be
   squeezed into the Profile panel. */
.prog-card { background: #fff; border: 2px solid #ead9f7; border-radius: 16px; padding: 14px 16px; margin: 0 0 12px; }
.prog-top { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.prog-icon { font-size: 30px; line-height: 1; }
.prog-name { font-size: 20px; font-weight: 800; color: #22384a; }
.prog-line { margin: 3px 0; font-size: 16.5px; font-weight: 700; color: #48525e; }
.prog-skills { margin: 6px 0 0; font-size: 15.5px; font-weight: 600; color: #5b2a86; line-height: 1.45; }
/* Standing labels (Desarae's legend, Nov 10, 2026): a small square
   that fills as the standing grows — empty = Not started, a little
   fill = Attempted, half = Familiar, full = Proficient, full deep
   purple with a crown = Mastered — beside the label word. */
.prog-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; color: #48525e; background: #f1f3f5; border-radius: 999px; padding: 5px 11px 5px 7px; white-space: nowrap; }
.prog-sq { position: relative; flex: none; width: 18px; height: 18px; border: 2.5px solid #9aa3ad; border-radius: 5px; background: #fff; overflow: hidden; }
.prog-sq i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; display: block; }
.prog-crown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; color: #ffd94d; line-height: 1; }
.prog-chip.lv1 { background: #fdf1e3; }
.prog-chip.lv1 .prog-sq { border-color: #e07b1f; }
.prog-chip.lv1 .prog-sq i { height: 30%; background: #f59e4c; }
.prog-chip.lv2 { background: #fdf1e3; }
.prog-chip.lv2 .prog-sq { border-color: #e07b1f; }
.prog-chip.lv2 .prog-sq i { height: 55%; background: #e07b1f; }
.prog-chip.lv3 { background: #efe9fa; }
.prog-chip.lv3 .prog-sq { border-color: #7a5fb5; }
.prog-chip.lv3 .prog-sq i { height: 100%; background: #b9a8e3; }
.prog-chip.lv4 { background: #e9def8; color: #5b2a86; }
.prog-chip.lv4 .prog-sq { border-color: #5b2a86; }
.prog-chip.lv4 .prog-sq i { height: 100%; background: #5b2a86; }
.prog-h { margin: 18px 0 6px; font-size: 19px; color: #22384a; }
.prog-struggle { margin: 3px 0; font-size: 16px; font-weight: 600; color: #48525e; line-height: 1.5; }