/* ============================================================
   app.css — Learning Camp
   Visual language: premium kids' brand. Saturated warm palette,
   gradient hero blocks, bold rounded display type, soft layered
   depth. No black outlines, no hard offset shadows — those read
   as homemade, which is what put parents off the old look.

   Print geometry (.sheet and everything inside it) is calibrated
   in millimetres and is deliberately left alone: it must stay
   identical on screen and on paper.
   ============================================================ */
:root{
  /* brand */
  --brand:#6C4CF1; --brand-2:#9B6BFF; --brand-ink:#4B2FD6;
  --grad-brand:linear-gradient(135deg,#6C4CF1 0%,#9B6BFF 100%);
  --grad-hero:linear-gradient(135deg,#6C4CF1 0%,#8B5CF6 45%,#FF7BC5 100%);
  --grad-sun:linear-gradient(135deg,#FFB627 0%,#FF8A3D 100%);
  --grad-mint:linear-gradient(135deg,#21C7A8 0%,#3DD9A0 100%);
  --grad-sky:linear-gradient(135deg,#38B6FF 0%,#5AA9FF 100%);

  /* playful accents (kept for game logic that reads them) */
  --red:#FF5D73; --orange:#FF9A3D; --yellow:#FFB627; --green:#21C7A8;
  --teal:#19C6C6; --blue:#38B6FF; --indigo:#6C4CF1; --purple:#9B6BFF;
  --pink:#FF7BC5; --brown:#B9805B; --lime:#8BD450;

  /* ink & surfaces */
  --ink:#241B4A; --ink-2:#4B4173; --ink-soft:#6B639B   /* 5.41:1 on white; was #7A72A3 at 4.41, under AA */;
  --line:#EEEAFA; --line-2:#E2DCF5;
  --bg:#FBF8FF; --card:#FFFFFF; --card-2:#F7F3FF;
  /* translucent bar backgrounds — must be themed, not literal white */
  --card-glass:rgba(255,255,255,.86); --card-glass-2:rgba(255,255,255,.6);
  --hi-soft:#FFF6E3;
  /* A veil lifts a surface off the one behind it. In light that is a
     white wash; in dark a white wash would glow, so it becomes a faint
     light film over the dark ground instead. --scrim is for overlays
     that must actually HIDE what is behind them. */
  --veil:rgba(255,255,255,.75); --veil-soft:rgba(255,255,255,.5);
  --scrim:rgba(255,255,255,.94);
  --star-ink:#8A5E00;

  /* depth */
  --sh-1:0 1px 3px rgba(36,27,74,.05), 0 6px 16px rgba(36,27,74,.07);
  --sh-2:0 4px 10px rgba(36,27,74,.07), 0 16px 36px rgba(36,27,74,.11);
  --sh-3:0 10px 24px rgba(36,27,74,.10), 0 28px 60px rgba(36,27,74,.14);
  --sh-brand:0 8px 22px rgba(108,76,241,.34);

  /* shape */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px;

  /* Fredoka and Nunito carry no Devanagari, so every stack ends with a
     Hindi face. Browsers fall back per character, which means Latin
     still renders in the brand type while अ आ इ come from the Hindi
     font — instead of the empty boxes you get when the device has
     nothing to fall back to. --hi is for Hindi-only text. */
  --hi:'Noto Sans Devanagari','Kohinoor Devanagari','Nirmala UI','Mangal','Devanagari MT',sans-serif;
  --head:'Fredoka','Baloo 2','Trebuchet MS',system-ui,'Noto Sans Devanagari','Kohinoor Devanagari','Nirmala UI','Mangal',sans-serif;
  --body:'Nunito','Segoe UI',system-ui,-apple-system,'Noto Sans Devanagari','Kohinoor Devanagari','Nirmala UI','Mangal',sans-serif;
  --ease:cubic-bezier(.34,1.3,.5,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* --- tablet/touch behaviour: taps act, they don't scroll or zoom --- */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{overscroll-behavior:none}
button,.tile,.token,.node,.bin,.card,.chip,.btn,.memcard,.key,.bubble,.swatch,.opt,
.dpad button,.pagestrip button,.icon-btn,.star-pill,.mainnav a,.dictcard,.agebtn,.unitbtn{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}
.tracebox,.tracebox svg,.bubblefield,.mazewrap,.mazewrap svg,.piano,.memgrid,
.stage .tiles,.matchwrap{touch-action:none}
.gamebar h1,.prompt,.howto,.score,.pill{-webkit-user-select:none;user-select:none}

body{
  background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.5;
  background-image:
    radial-gradient(60rem 40rem at 8% -10%, rgba(155,107,255,.16), transparent 60%),
    radial-gradient(50rem 34rem at 100% 0%, rgba(56,182,255,.14), transparent 60%),
    radial-gradient(50rem 40rem at 50% 108%, rgba(33,199,168,.13), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,h4,.btn,.tab{font-family:var(--head);letter-spacing:-.01em}
h1,h2,h3{margin:0 0 .35em;line-height:1.1;font-weight:600}
a{color:var(--brand-ink)}
img,svg{max-width:100%}
button{font-family:var(--body)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:10px}
#printRoot{display:none}
.print-only{display:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--card);padding:8px 12px;border-radius:10px;z-index:99}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px clamp(12px,3vw,26px);background:var(--card-glass);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--head);font-weight:600}
.brand-mark{
  font-size:26px;line-height:1;width:44px;height:44px;display:grid;place-items:center;
  background:var(--grad-hero);border-radius:14px;box-shadow:var(--sh-brand);
}
.brand-text{font-size:23px;letter-spacing:-.02em;color:var(--ink)}
.brand-text em{
  font-style:normal;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.mainnav a{
  text-decoration:none;font-family:var(--head);font-weight:500;font-size:15.5px;color:var(--ink-2);
  padding:9px 14px;border-radius:999px;white-space:nowrap;transition:background .16s,color .16s;
}
.mainnav a:hover{background:var(--card-2);color:var(--ink)}
.mainnav a[aria-current="page"]{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.topright{display:flex;gap:8px;align-items:center}
.star-pill{
  display:flex;align-items:center;gap:6px;font-family:var(--head);font-weight:600;font-size:16px;
  background:linear-gradient(135deg,#FFF3D6,#FFE6B8);color:#7A4F00;border:0;border-radius:999px;
  padding:9px 15px;cursor:pointer;box-shadow:var(--sh-1);
}
.icon-btn{
  width:44px;height:44px;border-radius:14px;border:0;background:var(--card);font-size:19px;cursor:pointer;
  box-shadow:var(--sh-1);display:grid;place-items:center;text-decoration:none;color:inherit;
  transition:transform .14s var(--ease),box-shadow .14s;
}
.icon-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.icon-btn[aria-pressed="false"]{opacity:.45;box-shadow:none}
.icon-btn.paid{background:var(--grad-sun);color:#5A3200}
.arcadebtn[aria-pressed="true"]{
  background:linear-gradient(135deg,#241B4A,#4B2FD6);color:#fff;
  box-shadow:0 0 0 3px rgba(155,107,255,.35),var(--sh-2);
}
.arcadebtn[aria-pressed="false"]{opacity:1}
.star-pill:active,.icon-btn:active{transform:translateY(1px)}

/* capital / small switch */
.caseswitch{display:flex;gap:0;border-radius:999px;overflow:hidden;background:var(--card);box-shadow:var(--sh-1)}
.casebtn{
  border:0;background:transparent;font-family:var(--head);font-weight:600;font-size:14.5px;
  padding:10px 14px;cursor:pointer;color:var(--ink-soft);white-space:nowrap;transition:all .16s;
}
.casebtn[aria-pressed="true"]{background:var(--grad-brand);color:#fff}
/* the button carries both a long and a short label; only one shows */
.casebtn .lbl-short{display:none}

/* ---------------- focus banner ---------------- */
.focusbar{
  position:sticky;top:66px;z-index:45;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  max-width:1180px;margin:12px auto 0;padding:11px 18px;border-radius:var(--r);
  background:linear-gradient(135deg,#FFF6E3,#FFEAF4);box-shadow:var(--sh-1);font-size:15px;
}
.focusbar .tag{
  font-family:var(--head);font-weight:600;background:var(--grad-brand);color:#fff;
  border-radius:999px;padding:3px 12px;font-size:12.5px;
}
.focusbar b{font-family:var(--head);font-size:17px;font-weight:600}
.focusbar .ltrs{
  font-family:var(--head);letter-spacing:3px;color:var(--ink-soft);flex:1;min-width:60px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------------- layout ---------------- */
#view{display:block;max-width:1180px;margin:0 auto;padding:22px clamp(12px,3vw,26px) 80px}
.foot{text-align:center;color:var(--ink-soft);font-size:14px;padding:0 16px 28px}

/* ---------------- hero ---------------- */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(24px,4.4vw,44px);
  background:var(--grad-hero);color:#fff;box-shadow:var(--sh-3);margin-bottom:26px;
}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);
}
.hero::before{width:26rem;height:26rem;top:-12rem;right:-6rem}
.hero::after{width:20rem;height:20rem;bottom:-12rem;left:-4rem}
.hero h1{font-size:clamp(30px,5.6vw,54px);font-weight:600;position:relative;color:#fff}
.hero h1 span{
  background:linear-gradient(135deg,#FFD86B,#FFB0D6);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p{margin:10px 0 0;max-width:58ch;font-size:clamp(16px,1.9vw,19px);color:rgba(255,255,255,.92);position:relative}
.hero .heroart{
  position:absolute;right:clamp(-10px,1vw,20px);bottom:-18px;font-size:clamp(64px,13vw,150px);
  opacity:.95;pointer-events:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.22));
}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;position:relative}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;border:0;background:var(--card);color:var(--ink);
  border-radius:999px;padding:12px 20px;font-size:16px;font-weight:600;font-family:var(--head);
  cursor:pointer;box-shadow:var(--sh-1);text-decoration:none;
  transition:transform .14s var(--ease),box-shadow .16s,filter .16s;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.btn.primary{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.btn.go{background:var(--grad-mint);color:#06302A;box-shadow:0 8px 20px rgba(33,199,168,.34)}
.btn.alt{background:var(--grad-sky);color:#062A42;box-shadow:0 8px 20px rgba(56,182,255,.32)}
.btn.ghost{background:var(--card-glass-2);color:var(--ink-2);box-shadow:none;border:1px solid var(--line-2)}
.btn.sm{padding:8px 14px;font-size:14.5px}
.btn.big{font-size:19px;padding:15px 28px}
.btn[disabled]{opacity:.45;pointer-events:none}
.hero .btn{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
.hero .btn:hover{background:rgba(255,255,255,.26)}
.hero .btn.primary{background:#fff;color:var(--brand-ink);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.hero .btn.go{background:var(--grad-mint);color:#06302A}
.hero .btn.alt{background:rgba(255,255,255,.16);color:#fff}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}

/* ---------------- chips & filters ---------------- */
.chiprow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:12px 0}
.chiprow .lbl{font-family:var(--head);font-weight:600;color:var(--ink-soft);font-size:15px}
.chip{
  border:0;background:var(--card);color:var(--ink-2);border-radius:999px;padding:7px 13px;
  font-family:var(--head);font-weight:500;font-size:14px;cursor:pointer;box-shadow:var(--sh-1);
  transition:transform .14s var(--ease),box-shadow .16s;
}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.chip.c-letters[aria-pressed="true"]{background:linear-gradient(135deg,#FF5D73,#FF8A9B)}
.chip.c-numbers[aria-pressed="true"]{background:var(--grad-sky)}
.chip.c-words[aria-pressed="true"]{background:linear-gradient(135deg,#9B6BFF,#C79BFF)}
.chip.c-shapes[aria-pressed="true"]{background:var(--grad-mint)}
.chip.c-world[aria-pressed="true"]{background:linear-gradient(135deg,#19C6C6,#4BD9D9)}
.chip.c-writing[aria-pressed="true"]{background:var(--grad-sun)}
.chip.c-hindi[aria-pressed="true"]{background:linear-gradient(135deg,#FF7BC5,#FFA1D6)}
.chip.c-thinking[aria-pressed="true"]{background:linear-gradient(135deg,#6C4CF1,#9B6BFF)}
.search{
  border:1px solid var(--line-2);border-radius:999px;padding:11px 18px;font-size:15.5px;
  font-family:var(--body);min-width:210px;background:var(--card);box-shadow:var(--sh-1);
}
.search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(108,76,241,.14)}

/* ---------------- section heads ---------------- */
.sectionhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:34px 0 14px}
.sectionhead h2{font-size:clamp(23px,3.4vw,32px);font-weight:600}
.sectionhead p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* ---------------- cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.card{
  display:flex;flex-direction:column;text-align:left;text-decoration:none;cursor:pointer;
  border:0;border-radius:var(--r-lg);background:var(--card);overflow:hidden;padding:0;
  font:inherit;color:inherit;box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .2s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.card:active{transform:translateY(-1px)}
.card .thumb{
  height:132px;display:grid;place-items:center;font-size:62px;position:relative;
  background:var(--tint,#EFEAFF);
  text-shadow:0 6px 12px rgba(36,27,74,.18);
  /* --tint is themed by K.tintFor before it reaches here, so the tile is
     pale by day and deep at night; ordinary themed ink reads on both. */
  color:var(--ink);
}
.card .thumb::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 55%);
  pointer-events:none;
}
.card .thumb .sub{
  position:absolute;left:10px;top:10px;font-size:11.5px;font-family:var(--head);font-weight:600;
  background:var(--scrim);color:var(--ink-2);border-radius:999px;padding:4px 10px;z-index:1;
}
.card .thumb .age{
  position:absolute;right:10px;top:10px;font-size:11.5px;font-family:var(--head);font-weight:600;
  background:rgba(36,27,74,.82);color:#fff;border-radius:999px;padding:4px 10px;z-index:1;
}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.card h3{font-size:19px;margin:0;font-weight:600}
.card p{margin:0;font-size:14.5px;color:var(--ink-soft);flex:1;line-height:1.45}
.card .meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;
  font-family:var(--head);font-weight:500;color:var(--ink-soft);
}
.card .stars{color:var(--star-ink)}   /* 5.70:1; was #C98A00 at 2.95 */
.card.locked .thumb{filter:grayscale(.5) opacity(.8)}
.card.locked h3{color:var(--ink-soft)}
.lockpill{
  position:absolute;right:10px;bottom:10px;font-size:16px;background:var(--card);border-radius:999px;
  width:34px;height:34px;display:grid;place-items:center;box-shadow:var(--sh-1);z-index:1;
}

/* ---------------- game chrome ---------------- */
.gamebar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
  border-radius:var(--r);background:var(--card);padding:12px 16px;box-shadow:var(--sh-1);
}
.gamebar h1{font-size:clamp(20px,3vw,27px);margin:0;flex:1;min-width:150px;font-weight:600}
.gamebar h1.trhead small{display:block;font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink-soft)}
.gamebar .pill{
  font-family:var(--head);font-weight:600;font-size:15px;border-radius:999px;padding:7px 15px;
  background:linear-gradient(135deg,#E8FBF6,#D6F7EE);color:#0B6B58;white-space:nowrap;
}
.gamebar .pill.warn{background:linear-gradient(135deg,#FFF3E0,#FFE7CC);color:#8A4B00}
.stage{
  border-radius:var(--r-lg);background:var(--card);padding:clamp(16px,2.8vw,30px);
  box-shadow:var(--sh-2);min-height:340px;position:relative;overflow:hidden;
}
.howto{color:var(--ink-soft);margin:0 0 14px;font-size:16px}
.prompt{font-family:var(--head);font-weight:600;font-size:clamp(22px,4vw,36px);text-align:center;margin:0 0 16px}
.prompt small{display:block;font-family:var(--body);font-weight:600;font-size:16px;color:var(--ink-soft);margin-top:4px}
.center{text-align:center}
.rowwrap{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.toolrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.big-emoji{font-size:clamp(66px,14vw,124px);line-height:1;text-align:center;filter:drop-shadow(0 10px 18px rgba(36,27,74,.16))}

/* answer tiles */
.tiles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.tile{
  min-width:92px;min-height:92px;padding:12px 16px;border:0;border-radius:var(--r);background:var(--card);
  font-family:var(--head);font-weight:600;font-size:38px;cursor:pointer;box-shadow:var(--sh-1);
  display:grid;place-items:center;line-height:1;color:var(--ink);
  transition:transform .14s var(--ease),box-shadow .16s;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tile:active{transform:translateY(1px)}
.tile small{display:block;font-family:var(--body);font-size:14px;font-weight:600}
.tile.right{background:var(--grad-mint);color:#06302A;box-shadow:0 8px 20px rgba(33,199,168,.4)}
.tile.wrong{background:linear-gradient(135deg,#FFE3E7,#FFD2D9);color:#8A2231}
.tile.sel{background:var(--grad-sun);color:#5A3200}
.tile.done{background:linear-gradient(135deg,#E8FBF6,#D6F7EE);color:#0B6B58}
.tile.pic{font-size:46px}
.tile.mini{min-width:62px;min-height:62px;font-size:26px;border-radius:var(--r-sm)}
.buzz{animation:buzz .32s}
@keyframes buzz{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.pulse{animation:pulse .5s}
@keyframes pulse{50%{transform:scale(1.12)}}

/* bubbles */
.bubblefield{
  position:relative;height:min(62vh,470px);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#EAF4FF,#F6FBFF);
}
.bubble{
  position:absolute;display:grid;place-items:center;border-radius:50%;border:0;
  font-family:var(--head);font-weight:600;cursor:pointer;user-select:none;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.22);
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.14),inset 0 8px 14px rgba(255,255,255,.34),0 6px 16px rgba(36,27,74,.18);
}
.bubble.gone{animation:popout .28s forwards}
@keyframes popout{to{transform:scale(1.5);opacity:0}}

/* matching */
.matchwrap{position:relative}
.matchcols{display:flex;justify-content:space-between;gap:clamp(20px,6vw,80px)}
.matchcol{display:flex;flex-direction:column;gap:12px;flex:1;max-width:240px}
.matchcol .node{
  border:0;border-radius:var(--r);background:var(--card);padding:12px 14px;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:27px;text-align:center;position:relative;
  box-shadow:var(--sh-1);transition:transform .14s var(--ease),box-shadow .16s;
}
.matchcol .node:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.matchcol .node small{display:block;font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink-soft)}
.matchcol .node.sel{background:var(--grad-sun);color:#5A3200;box-shadow:0 8px 20px rgba(255,182,39,.42)}
.matchcol .node.done{background:linear-gradient(135deg,#E8FBF6,#D6F7EE);color:#0B6B58}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* bins & tokens */
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
.bin{
  border:2px dashed var(--line-2);border-radius:var(--r-lg);padding:12px;background:var(--card-2);min-height:160px;
}
.bin h3{text-align:center;font-size:21px;margin:0 0 10px;font-weight:600}
.bin.over{background:var(--hi-soft)}
.bin .drop{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.token{
  border:0;border-radius:var(--r-sm);background:var(--card);padding:8px 11px;cursor:grab;text-align:center;
  font-size:13px;font-weight:700;box-shadow:var(--sh-1);
}
.token i{display:block;font-size:30px;font-style:normal}
.token.sel{background:var(--grad-sky);color:#062A42}
.token.placed{background:linear-gradient(135deg,#E8FBF6,#D6F7EE)}
.tray{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;padding:16px;
  border-radius:var(--r-lg);background:var(--card-2);
}

/* tracing */
.tracebox{position:relative;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-1)}
.tracebox svg.guide{display:block;width:100%;height:auto}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  /* A rim, so a white chip on a pale page and a black chip on the night
     board are both visibly buttons rather than holes. */
  border:2px solid var(--line-2);
  box-shadow:var(--sh-1);
}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--brand)}

.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:420px;margin:0 auto}

/* memory */
.memgrid{display:grid;gap:12px;justify-content:center}
.memcard{
  aspect-ratio:1;border:0;border-radius:var(--r);background:var(--grad-brand);cursor:pointer;
  display:grid;place-items:center;font-size:clamp(26px,5vw,42px);color:#fff;box-shadow:var(--sh-1);
  transition:transform .16s var(--ease);
}
.memcard:hover{transform:translateY(-3px)}
.memcard.up{background:var(--card)}
.memcard.matched{background:linear-gradient(135deg,#E8FBF6,#D6F7EE)}

/* maze */
.mazewrap{display:grid;place-items:center}
.mazewrap svg{width:min(100%,470px);height:auto;border-radius:var(--r);background:var(--card);box-shadow:var(--sh-1)}
.dpad{display:grid;grid-template-columns:repeat(3,66px);grid-template-rows:repeat(2,66px);gap:10px;justify-content:center;margin-top:16px}
.dpad button{border:0;border-radius:var(--r-sm);background:var(--card);font-size:24px;cursor:pointer;box-shadow:var(--sh-1)}
.dpad button:active{transform:translateY(2px)}

/* piano */
.piano{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.key{
  width:58px;height:158px;border:0;border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--card);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;
  font-family:var(--head);font-weight:600;cursor:pointer;box-shadow:var(--sh-1);
}
.key.on{background:var(--grad-sun);transform:translateY(3px)}

/* win overlay */
.winbox{
  position:absolute;inset:0;background:var(--scrim);display:grid;place-items:center;
  text-align:center;padding:22px;z-index:5;backdrop-filter:blur(3px);
}
/* The end of a round is the one moment that should not hurry. The panel
   fades up over most of a second and the stars settle after it, so the
   chime and the confetti are heard before anything asks for a decision. */
.winbox.calm{animation:winIn .85s cubic-bezier(.22,.61,.36,1) both}
.winbox.calm .in{animation:winRise .95s .12s cubic-bezier(.22,.61,.36,1) both}
.winbox.calm .starline{animation:starIn .7s .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes winIn{from{opacity:0}to{opacity:1}}
@keyframes winRise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes starIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.winbox .in h2{font-size:clamp(28px,6vw,46px);font-weight:600}
.winbox .in .starline{font-size:46px;letter-spacing:8px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:99}
.confetti i{position:absolute;top:-14px;width:10px;height:14px;border-radius:3px;
  animation:fall 3.8s cubic-bezier(.3,.1,.5,1) forwards;opacity:.9}
/* a slow drift with a little sway, and it fades as it goes — confetti
   that rains straight down in two seconds reads as noise */
@keyframes fall{
  0%{transform:translateY(0) rotate(0);opacity:0}
  12%{opacity:.9}
  50%{transform:translateY(52vh) translateX(14px) rotate(220deg)}
  100%{transform:translateY(105vh) translateX(-10px) rotate(400deg);opacity:0}
}

/* ---------------- talking dictionary ---------------- */
.dicthead{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:8px 0 18px}
.dictbig{
  font-family:var(--head);font-weight:600;font-size:clamp(58px,13vw,108px);line-height:1;
  border:0;border-radius:var(--r-lg);background:var(--grad-hero);color:#fff!important;
  padding:10px 30px;cursor:pointer;box-shadow:var(--sh-brand);
  transition:transform .16s var(--ease);
}
.dictbig:hover{transform:translateY(-3px) rotate(-1.5deg)}
.dictbig:active{transform:translateY(1px)}
.dictmeta{font-size:17px;color:var(--ink-soft)}
.dictmeta b{color:var(--ink)}
.dictmeta span{display:block;font-size:14.5px;margin-top:4px}
.dictgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:14px}
.dictcard{
  border:0;border-radius:var(--r);background:var(--card);padding:14px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;box-shadow:var(--sh-1);
  transition:transform .16s var(--ease),box-shadow .18s;
}
.dictcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.dictcard .pic{font-size:46px;line-height:1;filter:drop-shadow(0 6px 10px rgba(36,27,74,.14))}
.dictcard .wd{font-family:var(--head);font-weight:600;font-size:16px}
.dictcard .rom{font-size:12.5px;color:var(--ink-soft)}
.dictcard.on{background:var(--grad-sun);color:#5A3200;transform:translateY(-4px);box-shadow:0 10px 24px rgba(255,182,39,.42)}

/* ---------------- books ---------------- */
.bookbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;border-radius:var(--r);
  background:var(--card);padding:12px 16px;box-shadow:var(--sh-1);
}
.bookbar h1{margin:0;font-size:clamp(20px,3vw,26px);flex:1;min-width:140px;font-weight:600}
.pagestrip{display:flex;gap:8px;overflow:auto;padding:4px 2px 12px;scrollbar-width:thin}
.pagestrip button{
  flex:0 0 auto;border:0;background:var(--card);border-radius:var(--r-sm);padding:9px 15px;
  font-family:var(--head);font-weight:500;cursor:pointer;font-size:14px;box-shadow:var(--sh-1);color:var(--ink-2);
}
.pagestrip button[aria-current="true"]{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.pagestrip button.locked{opacity:.5}
.paper-fit{overflow:hidden}
.paper-fit .sheet{transform-origin:top left}

/* ============================================================
   A4 SHEET — print geometry, calibrated in mm. Do not restyle.
   ============================================================ */
.sheet{
  width:190mm;min-height:277mm;background:#fff;color:#111;padding:0;margin:0 auto;
  border-radius:6px;box-shadow:var(--sh-2);
  font-family:var(--body);position:relative;
}
.sheet .s-in{padding:8mm 6mm 12mm}
.sheet h2.s-title{font-family:var(--head);font-size:26px;margin:0 0 2px;color:#111}
.sheet .s-how{margin:0 0 10px;font-size:15px;color:#444}
.sheet .s-name{display:flex;gap:20px;font-size:14px;color:#555;margin-bottom:10px}
.sheet .s-name span{flex:1;border-bottom:2px dotted #bbb;min-height:1.2em}
.sheet .s-foot{position:absolute;left:6mm;right:6mm;bottom:5mm;display:flex;justify-content:space-between;
  font-size:11px;color:#999;border-top:1px solid #eee;padding-top:4px}
.sheet .s-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.sheet .s-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sheet .s-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sheet .trow{margin-bottom:6px}
.sheet .trow svg{display:block;width:100%;height:auto}
.sheet .wrow{display:flex;align-items:center;gap:3mm;padding:1.5mm 0;border-bottom:2px dotted #ddd}
.sheet .wrow .art{font-size:9mm;width:13mm;text-align:center}
.sheet .wrow .lbl{flex:1;font-size:4.6mm;color:#555}
.sheet .wbox{
  width:18mm;height:18mm;border:0.5mm dashed #999;border-radius:2mm;position:relative;flex:0 0 auto;background:#fff;
}
.sheet .wbox::after{content:"";position:absolute;left:2mm;right:2mm;top:56%;border-top:0.3mm dashed #ccc}
.sheet .wbox input{
  width:100%;height:100%;border:0;background:transparent;text-align:center;font-family:var(--head);
  font-size:11mm;font-weight:800;color:#1B7A34;
}
.sheet .wbox input:focus{outline:none;background:#FFFAE3}
.sheet .wbox.ok{border:2px solid #1B7A34}
.sheet .wbox.no{border:2px solid #C4342B}
.sheet .lineset{border-bottom:2px solid #999;height:34px;margin-bottom:14px;position:relative}
.sheet .lineset::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px dashed #ccc}
.sheet .lineset::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed #ccc}
.sheet .cell{border:2px solid #222;border-radius:10px;padding:6px;text-align:center}
.sheet .cell.dash{border-style:dashed;border-color:#999}
.sheet .pixgrid{display:grid;gap:0;width:150mm;margin:6px auto}
.sheet .pixgrid div{border:1px solid #bbb;aspect-ratio:1;display:grid;place-items:center;
  font-family:var(--head);font-weight:700;font-size:13px;color:#666}
.sheet .legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:13px}
.sheet .legend b{display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid #222;border-radius:6px;margin-right:4px}
.sheet .cutline{border-top:2px dashed #999;margin:10px 0;text-align:center;font-size:12px;color:#999}

/* ---------------- print centre ---------------- */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.pick{
  display:flex;gap:11px;align-items:flex-start;border:0;border-radius:var(--r);background:var(--card);
  padding:13px 15px;cursor:pointer;box-shadow:var(--sh-1);transition:transform .14s var(--ease);
}
.pick:hover{transform:translateY(-2px)}
.pick input{width:22px;height:22px;margin-top:3px;accent-color:var(--brand);flex:0 0 auto}
.pick b{font-family:var(--head);font-size:16px;display:block;font-weight:600}
.pick span{font-size:13.5px;color:var(--ink-soft)}
/* the poem tiles carry a tint, which is a lighter ground than a plain
   card — the softest ink only reaches ~3.5:1 there, so step it up */
.poemcard span{color:var(--ink-2)}
/* was an inline #8A93A6: 3.09:1 on white, and blind to the theme */
.sh-age{color:var(--ink-soft)}
.pick[data-on="1"]{background:linear-gradient(135deg,#F1EBFF,#FBF7FF);box-shadow:0 0 0 2px var(--brand) inset,var(--sh-1)}
.pick.locked{opacity:.6}
.stickybar{
  position:sticky;bottom:12px;z-index:20;margin-top:20px;scroll-margin-bottom:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-radius:var(--r-lg);background:var(--scrim);backdrop-filter:blur(10px);
  padding:14px 18px;box-shadow:var(--sh-3);
}
.note{
  border-left:5px solid var(--brand);background:var(--card-2);border-radius:var(--r-sm);padding:12px 16px;
  color:var(--ink-2);font-size:15px;margin:16px 0;
}
.panel{
  border:0;border-radius:var(--r-lg);background:var(--card);padding:clamp(16px,2.6vw,26px);
  box-shadow:var(--sh-1);margin-bottom:20px;
}
.panel h2{font-size:24px;font-weight:600}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-width:360px}
.field label{font-family:var(--head);font-weight:500;font-size:15px;color:var(--ink-2)}
.field input,.field select{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 14px;font-size:16px;
  font-family:var(--body);background:var(--card);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(108,76,241,.14)}

/* ============================================================
   BOOK BUILDER — the screens where a grown-up makes a book
   (js/builder.js). Every colour is a token, so night mode and the
   contrast probe cover this section for free.
   ============================================================ */
.field textarea{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 14px;font-size:15.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.55;
  background:var(--card);color:var(--ink);resize:vertical;min-height:150px;
}
.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(108,76,241,.14)}
.field.wide{max-width:none}
.fieldhint{font-size:13.5px;margin:0}
.checkline{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--ink-2);cursor:pointer}
.checkline input{width:21px;height:21px;accent-color:var(--brand);flex:0 0 auto}

.bb-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 20px;align-items:start}
.bb-fields .field.wide{grid-column:1/-1}

/* tap-to-add Devanagari, for keyboards that cannot type it */
.bb-hpad{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;max-height:150px;overflow:auto}
.bb-hkey{
  border:2px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);cursor:pointer;
  min-width:38px;height:38px;padding:0 6px;font-family:var(--hi),var(--head);font-size:18px;color:var(--ink);
}
.bb-hkey[aria-pressed="true"]{border-color:var(--brand);background:var(--card-2);font-weight:700}

/* cover pickers */
.bb-emoji,.bb-tint{
  border:2px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);
  cursor:pointer;padding:0;line-height:1;
}
.bb-emoji{width:42px;height:42px;font-size:22px}
.bb-tint{width:42px;height:32px}
.bb-emoji[aria-pressed="true"],.bb-tint[aria-pressed="true"]{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(108,76,241,.2)
}

/* the page list */
.bb-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 16px}
.bb-row{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card-2);
}
.bb-no{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--grad-brand);color:#fff;font-family:var(--head);font-weight:700;font-size:14px;
}
.bb-name{flex:1;min-width:0;display:flex;flex-direction:column}
.bb-name b{font-family:var(--head);font-weight:600;font-size:16px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-name span{font-size:13px;color:var(--ink-soft)}
.bb-acts{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.bb-empty{
  border:2px dashed var(--line-2);border-radius:var(--r-sm);padding:22px;text-align:center;color:var(--ink-soft);
}
.bb-empty b{display:block;font-family:var(--head);font-size:17px;color:var(--ink-2);margin-bottom:4px}

/* the editor: controls on the left, the real A4 page on the right */
.bb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:24px;align-items:start}
.bb-editor,.bb-preview{
  border-radius:var(--r-lg);background:var(--card);padding:clamp(16px,2.4vw,24px);box-shadow:var(--sh-1);
}
.bb-preview{position:sticky;top:86px}
.bb-pv-title{font-family:var(--head);font-weight:600;font-size:17px;margin:0 0 10px;color:var(--ink-2)}
.bb-count{margin:4px 0 12px;font-size:14.5px}
.bb-pick{text-align:left}
.card.bookmake .thumb{font-size:54px}

/* One column below 900px, with the controls first: the teacher types
   far more often than they look, and a full A4 preview above the form
   means scrolling past a whole page between every edit. */
@media (max-width:900px){
  .bb-split{grid-template-columns:1fr}
  .bb-preview{position:static}
}
@media (max-width:560px){
  .bb-row{flex-wrap:wrap}
  .bb-acts{width:100%;justify-content:flex-end}
}
table.simple{border-collapse:collapse;width:100%}
table.simple th,table.simple td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:15px}
table.simple th{font-family:var(--head);font-weight:600;color:var(--ink-soft);font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}

/* ---------------- syllabus ---------------- */
.trackbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.unit{border-radius:var(--r);margin-bottom:12px;overflow:hidden;background:var(--card-2)}
.unit>summary{
  list-style:none;cursor:pointer;padding:14px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--head);font-weight:600;font-size:17px;
}
.unit>summary::-webkit-details-marker{display:none}
.unit[open]{background:var(--card);box-shadow:var(--sh-1)}
.unit[open]>summary{border-bottom:1px solid var(--line)}
.unit .letters{font-family:var(--head);letter-spacing:3px;color:var(--ink-soft);font-size:14.5px}
.unit .pct{
  margin-left:auto;font-size:13px;font-family:var(--head);font-weight:600;
  background:linear-gradient(135deg,#E8FBF6,#D6F7EE);color:#0B6B58;border-radius:999px;padding:4px 12px;
}
.unit.locked>summary{opacity:.62}
.unit .body{padding:14px 16px}
.unit .focus{margin:0 0 12px;color:var(--ink-soft);font-size:15px}
.actrow{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.actrow:last-child{border-bottom:0}
.actrow .nm{flex:1;min-width:150px}
.actrow .nm b{font-family:var(--head);font-size:16px;display:block;font-weight:600}
.actrow .nm span{font-size:13.5px;color:var(--ink-soft)}
.actrow .tick{
  width:34px;height:34px;border-radius:var(--r-xs);border:2px solid var(--line-2);background:var(--card);
  cursor:pointer;font-size:16px;line-height:1;color:#fff;
}
.actrow .tick[aria-pressed="true"]{background:var(--grad-mint);border-color:transparent}
.bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden;margin:6px 0 14px}
.bar i{display:block;height:100%;background:var(--grad-mint);transition:width .4s var(--ease)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:12px}
.stat{border-radius:var(--r);padding:12px 14px;background:var(--card-2)}
.stat b{display:block;font-family:var(--head);font-size:24px;font-weight:600}
.stat span{font-size:13px;color:var(--ink-soft)}

/* ---------------- onboarding ---------------- */
.onb{display:grid;place-items:center;padding:10px 0 44px}
.onbcard{
  width:min(700px,100%);border-radius:var(--r-xl);background:var(--card);
  padding:clamp(24px,4.4vw,40px);box-shadow:var(--sh-3);text-align:center;
}
.onbcard.narrow{width:min(470px,100%)}
.onbcard h1{font-size:clamp(27px,5vw,42px);font-weight:600}
.onbcard h1 span{
  background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.onbart{font-size:clamp(54px,11vw,92px);line-height:1;filter:drop-shadow(0 12px 20px rgba(36,27,74,.16))}
.onbcard .lead{color:var(--ink-soft);font-size:17px;max-width:48ch;margin:8px auto 18px}
.onbfacts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.onbfacts span{
  background:var(--card-2);border-radius:999px;padding:8px 15px;font-size:14.5px;
  font-family:var(--head);font-weight:500;
}
.onbrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.onbfoot{margin:16px 0 0;color:var(--ink-soft);font-size:14.5px}
.onbdots{display:flex;gap:8px;justify-content:center;margin-top:20px}
.onbdots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block;transition:all .3s}
.onbdots i.on{background:var(--brand);width:26px;border-radius:999px}
.onbdots i.done{background:var(--green)}
.field.big{max-width:100%;text-align:left;margin:0 auto 16px}
.field.big label{font-size:15.5px}
.field.big input{font-size:19px;padding:14px 16px}
.agerow{display:flex;gap:10px;flex-wrap:wrap}
.agebtn{
  flex:1;min-width:66px;border:0;background:var(--card-2);border-radius:var(--r);padding:14px 0;
  font-family:var(--head);font-weight:600;font-size:25px;cursor:pointer;color:var(--ink-2);
  transition:transform .14s var(--ease);
}
.agebtn:hover{transform:translateY(-2px)}
.agebtn[aria-pressed="true"]{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.unitpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;text-align:left}
.unitbtn{
  border:0;background:var(--card-2);border-radius:var(--r);padding:12px 14px;cursor:pointer;
  text-align:left;font:inherit;transition:transform .14s var(--ease);
}
.unitbtn:hover{transform:translateY(-2px)}
.unitbtn b{display:block;font-family:var(--head);font-size:15.5px;font-weight:600}
.unitbtn span{font-size:13px;color:var(--ink-soft);letter-spacing:2px}
.unitbtn[aria-pressed="true"]{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.unitbtn[aria-pressed="true"] span{color:rgba(255,255,255,.85)}
.checkline{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px;font-size:16px}
.checkline input{width:22px;height:22px;accent-color:var(--brand)}
.freebox,.trialbox{border-radius:var(--r);padding:14px 18px;margin:14px 0;text-align:left;background:var(--card-2)}
.freebox b,.trialbox b{font-family:var(--head);font-size:17px;font-weight:600}
.freebox ul{margin:8px 0 0;padding-left:20px;color:var(--ink-soft);font-size:15px;line-height:1.65}
.trialbox{background:linear-gradient(135deg,#FFF6E3,#FFEAF4)}
.trialbox p{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.err{color:#C4342B;font-weight:700;margin:8px 0 0}
.tiny{font-size:12.5px;color:var(--ink-soft);margin-top:16px;line-height:1.55}
.otprow{display:flex;gap:9px;justify-content:center;margin:18px 0 4px}
.otpbox{
  width:clamp(40px,11vw,56px);height:clamp(50px,13vw,66px);border:2px solid var(--line-2);
  border-radius:var(--r-sm);text-align:center;font-family:var(--head);font-weight:600;
  font-size:clamp(22px,6vw,30px);background:var(--card);
}
.otpbox:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(108,76,241,.16)}
.linkbtn{background:none;border:0;padding:0;color:var(--brand-ink);font:inherit;text-decoration:underline;cursor:pointer}
.linkbtn[disabled]{color:var(--ink-soft);text-decoration:none;cursor:default}

/* ---------------- plans & upsell ---------------- */
.upbanner{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#FFF6E3,#FFEAF4);padding:18px 22px;margin:26px 0 8px;box-shadow:var(--sh-1);
}
.upbanner .ub-em{font-size:36px}
.upbanner div{flex:1;min-width:190px}
.upbanner b{font-family:var(--head);font-size:18px;display:block;font-weight:600}
.upbanner span{font-size:14.5px;color:var(--ink-2)}
.plangrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px;margin-top:10px}
.plan{
  border-radius:var(--r-lg);background:var(--card);padding:24px 18px;text-align:center;position:relative;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:9px;
  transition:transform .18s var(--ease),box-shadow .2s;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.plan.best{background:var(--grad-hero);color:#fff;box-shadow:var(--sh-brand);transform:translateY(-8px)}
.plan.best:hover{transform:translateY(-12px)}
.plan h3{font-size:21px;margin:0;font-weight:600}
.plan .price{font-family:var(--head);font-weight:600;font-size:40px;line-height:1.1}
.plan .price small{font-size:15px;font-weight:600;opacity:.72}
.plan .save{
  background:var(--grad-mint);color:#06302A;border-radius:999px;padding:4px 12px;font-size:13px;
  font-family:var(--head);font-weight:600;align-self:center;
}
.plan .pdesc{font-size:14.5px;opacity:.78;margin:0;flex:1}
.plan.best .pdesc{color:rgba(255,255,255,.92);opacity:1}
.plan .ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-sun);color:#5A3200;
  border-radius:999px;padding:5px 15px;font-family:var(--head);font-weight:600;font-size:12.5px;white-space:nowrap;
  box-shadow:var(--sh-1);
}
/* fixed white chip on the brand gradient: its ink must be fixed too,
   or the night palette lightens it to near-white on white */
.plan.best .btn{background:#fff;color:#4B2FD6}
table.cmp td:nth-child(2),table.cmp td:nth-child(3),
table.cmp th:nth-child(2),table.cmp th:nth-child(3){text-align:center;width:24%}
.planstate{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.planstate b{font-family:var(--head);font-size:21px;font-weight:600}
.planstate span{color:var(--ink-soft);font-size:14.5px}

/* ---------------- modal & toast ---------------- */
.modalback{
  position:fixed;inset:0;background:rgba(36,27,74,.5);backdrop-filter:blur(4px);display:grid;place-items:center;
  z-index:120;padding:16px;opacity:0;transition:opacity .22s;
}
.modalback.in{opacity:1}
.modalbox{
  position:relative;width:min(470px,100%);max-height:88vh;overflow:auto;background:var(--card);
  border-radius:var(--r-xl);padding:28px 22px;box-shadow:var(--sh-3);
  transform:translateY(14px) scale(.98);transition:transform .25s var(--ease);
}
.modalbox.wide{width:min(740px,100%)}
.modalback.in .modalbox{transform:none}
.modalx{
  position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;
  background:var(--card-2);font-size:15px;cursor:pointer;color:var(--ink-2);
}
.upsell{text-align:center}
.uphero{font-size:56px;line-height:1;filter:drop-shadow(0 10px 16px rgba(36,27,74,.18))}
.upsell h2{font-size:27px;margin:6px 0;font-weight:600}
.upmsg{color:var(--ink-soft);margin:0 0 12px}
.uplist{list-style:none;padding:0;margin:0 0 16px;text-align:left;display:inline-block}
.uplist li{padding:6px 0 6px 28px;position:relative;font-size:15.5px}
.uplist li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.uprow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:130;opacity:0;transition:all .26s var(--ease);
  background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:13px 20px;font-size:15.5px;
  max-width:min(470px,92vw);box-shadow:var(--sh-3);
}
.toast.in{opacity:1;transform:translate(-50%,0)}
.toast.good{background:linear-gradient(135deg,#0F8A6E,#12A583)}
.toast.lock{background:linear-gradient(135deg,#8A5A00,#B27400)}

/* ---------------- teacher packs ---------------- */
.whorow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:14px 0 18px}
.packgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.packcard{
  display:flex;gap:14px;align-items:flex-start;text-align:left;border:0;border-radius:var(--r-lg);
  background:var(--card-2);padding:16px 18px;cursor:pointer;font:inherit;color:inherit;
  transition:transform .16s var(--ease),box-shadow .18s;
}
.packcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);background:var(--card)}
.packcard .pk-em{font-size:34px;line-height:1;flex:0 0 auto}
.packcard .pk-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.packcard .pk-body b{font-family:var(--head);font-size:17px;font-weight:600}
.packcard .pk-body>span{font-size:13.8px;color:var(--ink-soft);line-height:1.45}
.packcard .pk-meta{
  font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--brand-ink);
  background:var(--card);border-radius:999px;padding:3px 10px;align-self:flex-start;margin-top:4px;
}
.packcard .pk-go{font-size:22px;opacity:.5;flex:0 0 auto}
.packcard:hover .pk-go{opacity:1}
.packcard.showcase{background:linear-gradient(135deg,#FFF6E3,#FFEAF4)}
.packcard.showcase .pk-meta{background:var(--veil)}

/* ============================================================
   CLASSROOM MODE — projector first.
   Type is sized in vmin so it fills whatever the school projects
   onto, and stays readable from the back row.
   ============================================================ */
body.classroom-on .topbar,body.classroom-on .foot,body.classroom-on .focusbar{display:none}
body.classroom-on #view{max-width:none;padding:0}
.cr{
  min-height:100vh;display:flex;flex-direction:column;gap:0;background:var(--card);
  background-image:radial-gradient(70rem 46rem at 10% -14%,rgba(155,107,255,.18),transparent 60%),
                   radial-gradient(56rem 38rem at 96% 6%,rgba(56,182,255,.16),transparent 60%);
}
.cr-bar{
  display:flex;align-items:center;gap:16px;padding:14px clamp(14px,2.4vw,28px);
  background:var(--scrim);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.cr-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.cr-title b{font-family:var(--head);font-size:clamp(17px,2vw,22px);font-weight:600}
.cr-title span{font-size:clamp(13px,1.4vw,16px);color:var(--ink-soft)}
.cr-x,.cr-ico{
  width:48px;height:48px;border:0;border-radius:14px;background:var(--card);box-shadow:var(--sh-1);
  font-size:20px;cursor:pointer;flex:0 0 auto;
}
.cr-steps{display:flex;gap:8px}
.cr-step{
  width:44px;height:44px;border:0;border-radius:50%;background:var(--card-2);color:var(--ink-soft);
  font-family:var(--head);font-weight:600;font-size:18px;cursor:pointer;
}
.cr-step.on{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.cr-stage{flex:1;display:grid;place-items:center;padding:clamp(14px,3vw,36px)}
.cr-foot{
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:14px clamp(14px,2.4vw,28px) 22px;
}
.cr-hint{color:var(--ink-soft);font-size:14px;margin-left:8px}

/* step 1 */
.cr-letterwrap{display:flex;align-items:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap;justify-content:center}
.cr-big{
  font-family:var(--head);font-weight:600;font-size:clamp(120px,30vmin,340px);line-height:.95;
  color:#fff;border:0;border-radius:clamp(24px,4vmin,48px);padding:.1em .22em;cursor:pointer;
  box-shadow:var(--sh-3);transition:transform .18s var(--ease);
}
.cr-big:hover{transform:scale(1.02) rotate(-1deg)}
.cr-words{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,20px)}
.cr-word{
  border:0;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-1);cursor:pointer;
  padding:clamp(12px,1.6vw,22px) clamp(16px,2vw,28px);display:flex;align-items:center;gap:14px;
  font:inherit;transition:transform .16s var(--ease);
}
.cr-word:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.cr-word.on{background:var(--grad-sun)}
.cr-word .e{font-size:clamp(38px,7vmin,76px);line-height:1}
.cr-word .t{font-family:var(--head);font-weight:600;font-size:clamp(20px,3vmin,34px)}

/* step 2 */
.cr-writewrap{display:flex;align-items:center;gap:clamp(20px,5vw,70px);flex-wrap:wrap;justify-content:center}
.cr-glyph{width:clamp(200px,34vmin,420px);height:auto}
.cr-writeside{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cr-kicker{
  margin:0;font-family:var(--head);font-weight:600;color:var(--brand-ink);
  text-transform:uppercase;letter-spacing:.08em;font-size:clamp(13px,1.6vmin,17px);
}
.cr-strokes{margin:0;font-family:var(--head);font-size:clamp(26px,4.6vmin,52px);font-weight:600}

/* step 3 */
.cr-ask{
  font-family:var(--head);font-weight:600;font-size:clamp(24px,4.4vmin,48px);text-align:center;margin:0 0 clamp(14px,2.4vw,30px);
}
.cr-find{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);width:min(1100px,92vw)}
.cr-pic{
  border:0;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-1);cursor:pointer;
  padding:clamp(12px,2vmin,24px);display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;
  transition:transform .16s var(--ease);
}
.cr-pic:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.cr-pic .e{font-size:clamp(44px,10vmin,104px);line-height:1}
.cr-pic .t{font-family:var(--head);font-weight:600;font-size:clamp(15px,2.2vmin,26px);color:var(--ink-2)}
.cr-pic.yes{background:var(--grad-mint)}
.cr-pic.no{background:linear-gradient(135deg,#FFE3E7,#FFD2D9);opacity:.75}

/* step 4 */
.cr-sheetwrap{display:flex;align-items:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;justify-content:center;max-width:1000px}
.cr-sheetart{font-size:clamp(80px,18vmin,190px);line-height:1}
.cr-sheettitle{font-family:var(--head);font-size:clamp(26px,4.4vmin,46px);margin:.15em 0;font-weight:600}
.cr-sheetnote{color:var(--ink-soft);font-size:clamp(15px,2vmin,21px);max-width:44ch;margin:0 0 18px}
.cr-sheetrow{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:700px){
  .cr-find{grid-template-columns:repeat(2,1fr)}
  .cr-words{grid-template-columns:1fr}
  .cr-steps{display:none}
}


/* ---------------- settings modal ----------------
   One place for everything a grown-up changes, so the top bar can be
   two buttons instead of six. Rows are large because this gets used
   one-handed while holding a tablet. */
.modalbox.settings{max-width:520px;text-align:left}
.set-title{margin:0 0 4px;font-size:22px}
.set-sec{margin-top:18px}
.set-sec h3{margin:0 0 2px;font-size:17px;font-weight:600}
.set-hint{margin:0 0 8px;color:var(--ink-soft);font-size:13.5px}
.set-sub{margin:12px 0 2px;font-size:14px;color:var(--ink-2)}
.set-sub b{font-weight:700}

.set-toggle{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r);
  padding:11px 14px;margin-top:8px;font:inherit;color:inherit;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.set-toggle:hover{background:var(--card-2)}
.set-tl{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.set-tl b{font-family:var(--head);font-weight:600;font-size:15.5px}
.set-tl span{color:var(--ink-soft);font-size:12.8px;line-height:1.35}
.set-sw{
  flex:0 0 auto;width:46px;height:27px;border-radius:99px;background:#D8DCE8;position:relative;
  transition:background .22s var(--ease);
}
.set-sw::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.24);transition:transform .22s var(--ease);
}
.set-toggle[aria-pressed="true"]{border-color:var(--brand)}
.set-toggle[aria-pressed="true"] .set-sw{background:var(--brand)}
.set-toggle[aria-pressed="true"] .set-sw::after{transform:translateX(19px)}

.set-acct{display:flex;align-items:center;gap:12px;background:var(--card-2);border-radius:var(--r);padding:11px 14px}
.set-av{font-size:26px;line-height:1}


/* ---------------- child lock + stars modal ---------------- */
.modalbox.pinbox,.modalbox.starbox{max-width:400px;text-align:left}
.pin-show{text-align:center;margin:14px 0 4px}
.pin-dots{font-size:30px;letter-spacing:14px;color:var(--brand)}
.pin-sum{text-align:center;font-family:var(--head);font-weight:600;font-size:34px;margin:14px 0 8px}
.pin-input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  font-size:24px;text-align:center;font-family:var(--head)
}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.pin-key{
  border:1px solid var(--line);background:var(--card);border-radius:var(--r);cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:24px;padding:14px 0;
  transition:background .18s var(--ease),transform .18s var(--ease)
}
.pin-key:hover{background:var(--card-2)}
.pin-key:active{transform:scale(.96)}
.shake{animation:shake .4s}
@keyframes shake{
  20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}
}

.sb-total{text-align:center;margin:8px 0 14px}
.sb-total b{display:block;font-family:var(--head);font-weight:600;font-size:56px;line-height:1;color:var(--ink)}
.sb-total span{color:var(--ink-soft);font-size:14px}
.sb-list{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto}
.sb-row{display:flex;align-items:center;gap:10px;background:var(--card-2);border-radius:var(--r-sm);padding:8px 11px}
.sb-em{font-size:21px;line-height:1}
.sb-row b{flex:1;font-family:var(--head);font-weight:600;font-size:14.5px}
.sb-row i{font-style:normal;font-size:13px;letter-spacing:1px}
.sb-h{margin:16px 0 6px;font-size:16px;font-weight:600}

/* ---------------- arcade ambience ----------------
   A neon frame that breathes around the whole page while arcade
   mode is on, and gets hotter as the levels climb (--arcLvl is set
   by the game shell, 0 → 1). Purely decorative: pointer-events
   none, hidden on the projector and never printed. */
body.arcade-on{
  --arcLvl:0;
  background-image:
    radial-gradient(60rem 40rem at 8% -10%, rgba(155,107,255,.28), transparent 60%),
    radial-gradient(50rem 34rem at 100% 0%, rgba(56,182,255,.22), transparent 60%),
    radial-gradient(54rem 42rem at 50% 108%, rgba(255,123,197,.24), transparent 62%);
}
body.arcade-on::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  box-shadow:
    inset 0 0 0 calc(3px + 3px * var(--arcLvl)) rgba(155,107,255,.6),
    inset 0 0 calc(26px + 54px * var(--arcLvl)) rgba(108,76,241,.42),
    inset 0 0 calc(80px + 90px * var(--arcLvl)) rgba(255,123,197,.28);
  animation:arcadeGlow calc(3.4s - 1.7s * var(--arcLvl)) ease-in-out infinite;
}
@keyframes arcadeGlow{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
body.arcade-on.classroom-on::after{display:none}

/* ---------------- tracing celebration ---------------- */
.tracewin{
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:18px;text-align:center;
  background:var(--scrim);backdrop-filter:blur(4px);
  animation:twin .28s var(--ease);
}
@keyframes twin{from{opacity:0}to{opacity:1}}
.tw-in{max-width:560px}
.tw-stars{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
.tw-stars i{
  font-size:clamp(38px,8vw,58px);font-style:normal;opacity:0;transform:scale(.3) rotate(-30deg);
  transition:all .38s var(--ease);filter:drop-shadow(0 6px 12px rgba(255,182,39,.5));
}
.tw-stars i.in{opacity:1;transform:none}
.tracewin h2{
  font-size:clamp(26px,5.4vw,40px);margin:4px 0 2px;
  background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tw-sub{color:var(--ink-soft);margin:0 0 14px;font-size:17px}
.tw-sub b{color:var(--ink);font-family:var(--head);font-size:22px}
.tw-pics{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.tw-pic{
  display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--card-2);
  border-radius:var(--r);padding:10px 12px;min-width:78px;animation:twpop .4s var(--ease) backwards;
}
.tw-pic:nth-child(1){animation-delay:.5s}
.tw-pic:nth-child(2){animation-delay:.62s}
.tw-pic:nth-child(3){animation-delay:.74s}
.tw-pic:nth-child(4){animation-delay:.86s}
@keyframes twpop{from{opacity:0;transform:translateY(14px) scale(.8)}to{opacity:1;transform:none}}
.tw-pic .e{font-size:38px;line-height:1.1}
.tw-pic .t{font-family:var(--head);font-weight:600;font-size:14px}
.tw-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------------- drag & drop ---------------- */
.dragging{opacity:.4}
.dragghost{
  position:fixed!important;z-index:150;pointer-events:none;margin:0!important;
  transform:translate(-50%,-50%) rotate(-4deg) scale(1.08);
  box-shadow:var(--sh-3)!important;opacity:.96;
}
.node.over,.bin.over{
  outline:3px dashed var(--brand);outline-offset:4px;
  background:linear-gradient(135deg,#F1EBFF,#FBF7FF);
}
.bin.over{transform:scale(1.02)}
.rubber{opacity:.85}
/* The matching columns and the tray own the whole gesture, because a
   drag STARTS in them. .bins was in this list too and should not have
   been: a bin only ever RECEIVES a drop, it never begins one. On a
   360px phone the bins and tray together covered a contiguous ~780px —
   over half the page, including the entire play area — so a child who
   put a finger on a bin to scroll down to the tokens got nothing at
   all, and the game read as frozen. */
.matchwrap,.tray{touch-action:none}
/* vertical scrolling still works over a bin; horizontal drag does not */
.bins{touch-action:pan-y}

/* ---------------- memory peek countdown ---------------- */
.memcount{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:6;
  font-family:var(--head);font-weight:600;font-size:clamp(80px,18vw,160px);
  color:#fff;-webkit-text-stroke:0;
  text-shadow:0 8px 26px rgba(36,27,74,.45);
}
.memcount.pulse{animation:memcount .9s var(--ease)}
@keyframes memcount{from{opacity:0;transform:scale(1.6)}40%{opacity:.95}to{opacity:.25;transform:scale(.9)}}

/* ---------------- arcade ---------------- */
.pill.arcade{
  background:linear-gradient(135deg,#241B4A,#4B2FD6);color:#fff;
}
.pill.arcade small{opacity:.7;font-weight:500}
.levelup{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:6;
  background:var(--scrim);backdrop-filter:blur(3px);animation:lvlin .7s cubic-bezier(.22,.61,.36,1);
  /* a celebration flash between arcade rounds, never an input trap: it
     covers the whole stage for over a second, so without this every tap
     in that window was swallowed and arcade felt like it had frozen */
  pointer-events:none;
}
.levelup b{
  display:block;font-family:var(--head);font-weight:600;font-size:clamp(30px,7vw,54px);
  background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.levelup span{display:block;font-size:18px;color:var(--ink-soft);margin-top:6px}
.levelup.record b{background:var(--grad-sun);-webkit-background-clip:text;background-clip:text}
@keyframes lvlin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------------- dev unlock badge ---------------- */
.devbadge{
  position:fixed;left:14px;bottom:14px;z-index:140;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#241B4A,#4B2FD6);color:#fff;font-family:var(--head);font-weight:600;
  font-size:13px;padding:9px 15px;box-shadow:var(--sh-2);opacity:.9;
}
.devbadge:hover{opacity:1;transform:translateY(-2px)}
body.classroom-on .devbadge{display:none}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .topbar{row-gap:8px}
  .brand{flex:1}
  .mainnav{order:3;width:100%;justify-content:space-between;flex:0 0 100%}
  .topright{order:2}
  .focusbar{top:auto;position:static}
}
/* Both strips scroll sideways instead of clipping — the bar carries a lot
   now (case switch, arcade, stars, sound, voice, account) and a phone is
   only so wide. A fade on the right edge hints there is more to reach. */
@media (max-width:760px){
  body{font-size:16px}
  .topbar{padding:10px 12px;row-gap:8px}
  /* the brand must not be greedy here, or it pushes the controls onto a
     third row and the bar eats a third of a phone screen */
  .brand{flex:0 0 auto}
  .brand-text{font-size:19px}
  .brand-mark{width:38px;height:38px;font-size:22px;border-radius:12px}
  .mainnav,.topright{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;touch-action:pan-x;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
    mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .mainnav::-webkit-scrollbar,.topright::-webkit-scrollbar{display:none}
  .mainnav>*,.topright>*{flex:0 0 auto}
  .mainnav{order:3;gap:4px;justify-content:flex-start}
  .mainnav a{font-size:14px;padding:8px 12px}
  /* a small basis, not `auto`: flexbox decides wrapping from an item's
     content width BEFORE it shrinks anything, so `auto` kicked the whole
     controls strip onto a third row on narrow phones. */
  .topright{order:2;flex:1 1 120px;min-width:0;justify-content:flex-start;gap:7px;padding-bottom:2px}
  .icon-btn{width:40px;height:40px;font-size:17px}
  .star-pill{padding:7px 12px;font-size:15px}
  .casebtn{padding:8px 11px;font-size:13.5px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
  .card .thumb{height:104px;font-size:48px}
  .card h3{font-size:17px}
  .tile{min-width:76px;min-height:76px;font-size:31px}
  .key{width:46px;height:126px}
  .dictgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .plan.best{transform:none}
}
@media (max-width:560px){
  .card p{display:none}
  .cards{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
}
/* smallest phones: the lion alone is the logo, and Big A / Small a / A a
   shrink to A / a / Aa, so the whole strip fits with no scrolling at all */
@media (max-width:430px){
  .brand-text{display:none}
  .casebtn{padding:8px 10px;font-size:14px}
  .casebtn .lbl-long{display:none}
  .casebtn .lbl-short{display:inline}
  .topbar{gap:8px}
  .icon-btn{width:38px;height:38px}
  .star-pill{padding:6px 10px}
}

/* ============================================================
   Poem Time — the poem learning screen.
   The whole point is that a toddler follows the words with their
   eyes while hearing them, so the live word is big, warm and
   unmissable, and everything else recedes.
   ============================================================ */
.poem{border-radius:var(--r-lg);padding:clamp(14px,2.4vw,22px);text-align:center}
.poem-stage{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 4px}
.poem-art{
  font-size:clamp(52px,11vw,86px);line-height:1;height:1.15em;
  display:grid;place-items:center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));
}
.poem-art.pop{animation:poemPop .5s var(--ease)}
@keyframes poemPop{
  0%{transform:scale(.4) rotate(-12deg);opacity:0}
  60%{transform:scale(1.14) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.poem-lines{width:100%;max-width:34ch;margin:0 auto;text-align:left}
.poem-line{
  font-family:var(--head);font-weight:600;font-size:clamp(19px,2.9vw,26px);
  line-height:1.55;margin:2px 0;padding:6px 10px;border-radius:var(--r-sm);
  /* the whole verse must be readable — this is a poem the child is
     following along with, not decoration behind the current line */
  color:var(--ink-2);opacity:.82;transition:all .22s var(--ease);
}
/* the line being said right now */
.poem-line.now{opacity:1;color:var(--ink);background:var(--veil);box-shadow:var(--sh-1);transform:scale(1.02)}
/* the child's turn to say it */
.poem-line.yours{
  opacity:1;background:var(--veil);
  box-shadow:0 0 0 3px var(--mint,#21C7A8) inset;animation:yourTurn 1s ease-in-out infinite;
}
@keyframes yourTurn{50%{transform:scale(1.04)}}
.pw{display:inline-block;padding:0 1px;border-radius:6px;transition:all .14s var(--ease)}
/* the word being said */
.pw.lit{background:var(--grad-sun,linear-gradient(135deg,#FFD84D,#FFB020));color:#3A2A00;transform:translateY(-2px) scale(1.07)}
/* faded out for the memory rounds */
.pw.gone{background:var(--veil-soft);color:transparent;box-shadow:0 1px 0 rgba(0,0,0,.12) inset;white-space:pre}
/* a gap waiting to be filled */
.pw.gap{background:var(--veil);border-bottom:3px solid var(--ink-soft);color:transparent;white-space:pre}
.pw.gap.asking{border-bottom-color:var(--brand);animation:yourTurn 1s ease-in-out infinite}
.poem-cue{
  min-height:1.6em;margin:6px 0 2px;font-family:var(--head);font-weight:600;
  font-size:clamp(15px,2vw,17.5px);color:var(--ink-2);
}
.poemcard{text-decoration:none;align-items:center;color:var(--ink-2)}
/* A tinted tile is a slightly lighter ground than a plain card, so the
   softest ink lands around 4.1:1 on it. Use the stronger secondary ink
   here instead of crushing the tint to grey — the hue is doing real work
   telling the poems apart. */
.poemcard b,.poemcard .poemcard-title{color:var(--ink)}
.poemcard .poemcard-stars{color:var(--ink-2)}
.poemcard-art{font-size:38px;line-height:1;flex:0 0 auto}
.poemcard-stars{display:block;letter-spacing:1px;font-size:13px;color:var(--ink-2)}



/* ---------------- the You tab's welcome ----------------
   The school gate, not a dashboard header: a greeting, the day, and
   one line about what we are doing — before anything else loads. */
.welcome{
  display:flex;align-items:center;gap:clamp(12px,2.4vw,22px);
  border-radius:var(--r-lg);padding:clamp(16px,3vw,28px);margin-bottom:12px;
  background:linear-gradient(120deg,#FFEFC9 0%,#FFD9E7 55%,#E4DBFF 100%);
  box-shadow:var(--sh-1);
}
.wc-sun{font-size:clamp(46px,9vw,76px);line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.14))}
.wc-text h1{
  margin:0;font-family:var(--head);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(26px,5.4vw,46px);line-height:1.06;color:var(--ink)
}
.wc-text p{margin:5px 0 0;color:var(--ink-2);font-size:clamp(14px,2vw,17px)}
.wc-plan{
  display:flex;flex-direction:column;gap:1px;margin-bottom:18px;
  background:var(--card);border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh-1);
  border-left:6px solid var(--brand);
}
.wc-plan b{font-family:var(--head);font-weight:600;font-size:clamp(16px,2.2vw,19px)}
.wc-plan span{color:var(--ink-soft);font-size:14.5px;letter-spacing:.02em}
@media (max-width:560px){
  .welcome{gap:11px;padding:15px}
  .wc-sun{font-size:40px}
}

/* ============================================================
   The child's reward wall — the first thing on the home screen.
   Big, warm, and about what they have won. Sized so a four-year-old
   can read the numbers across a tablet held at arm's length.
   ============================================================ */
.rewards{
  border-radius:var(--r-lg);padding:clamp(16px,3vw,26px);margin-bottom:20px;
  background:linear-gradient(150deg,#FFF6E6 0%,#FFEAF3 48%,#EFE9FF 100%);
  box-shadow:var(--sh-1);
}
.rw-hi{display:flex;align-items:center;gap:14px}
.rw-lion{font-size:clamp(40px,7vw,58px);line-height:1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.12))}
.rw-hi h2{margin:0;font-size:clamp(22px,3.6vw,31px);font-weight:600}
.rw-hi p{margin:2px 0 0;color:var(--ink-2);font-size:clamp(14px,1.9vw,16.5px)}

/* the three numbers that matter */
.rw-big{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.rw-stat{
  flex:1 1 96px;background:var(--veil);border-radius:var(--r);
  padding:12px 10px;text-align:center;backdrop-filter:blur(4px);
}
.rw-em{display:block;font-size:clamp(24px,4vw,32px);line-height:1.1}
.rw-stat b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(26px,5vw,38px);line-height:1.05;color:var(--ink)}
.rw-lbl{display:block;font-size:13px;color:var(--ink-soft);font-weight:600}

/* the next badge, as a thing to reach for */
.rw-next{margin-top:16px;background:var(--veil);border-radius:var(--r);padding:11px 14px}
.rw-nexttop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--head);font-weight:600;font-size:15.5px}
.rw-nexttop i{font-style:normal;color:var(--ink-soft);font-size:13px;white-space:nowrap}
.rw-track{height:12px;border-radius:99px;background:rgba(36,27,74,.10);margin-top:7px;overflow:hidden}
.rw-fill{height:100%;border-radius:99px;background:var(--grad-sun,linear-gradient(90deg,#FFB020,#FF7BC5));
  transition:width .5s var(--ease)}

/* the shelf: won badges shine, the rest wait in plain sight */
.rw-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.rw-badge{
  flex:1 1 74px;max-width:110px;text-align:center;padding:10px 6px;border-radius:var(--r-sm);
  background:var(--veil-soft);opacity:.42;filter:grayscale(1);transition:all .2s var(--ease);
}
.rw-badge span{display:block;font-size:clamp(22px,3.6vw,30px);line-height:1.15}
.rw-badge i{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-top:2px}
.rw-badge.on{opacity:1;filter:none;background:var(--card);box-shadow:var(--sh-1);transform:translateY(-2px)}

.rw-letters{margin-top:18px}
.rw-letters h3,.rw-wins h3{margin:0 0 7px;font-size:17px;font-weight:600}
.rw-ltrow{display:flex;gap:6px;flex-wrap:wrap}
.rw-ltrow span{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 6px;background:var(--card);
  border-radius:11px;font-family:var(--head);font-weight:600;font-size:19px;box-shadow:var(--sh-1)
}

.rw-wins{margin-top:18px}
.rw-winrow{display:flex;gap:9px;flex-wrap:wrap}
.rw-win{
  border:0;cursor:pointer;background:var(--card);border-radius:var(--r);padding:10px 12px;
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:104px;
  box-shadow:var(--sh-1);transition:transform .14s var(--ease)
}
.rw-win:hover{transform:translateY(-2px)}
.rw-winem{font-size:26px;line-height:1.1}
.rw-win b{font-family:var(--head);font-weight:600;font-size:13.5px;color:var(--ink)}
.rw-stars{font-size:12px;letter-spacing:1px}

.rw-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

@media (max-width:560px){
  .rw-badge{flex:1 1 60px}
  .rw-badge i{display:none}
  .rw-cta .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   Consent bar + advertising slots
   ============================================================ */

/* The bar sits at the BOTTOM and never covers the tab bar or the
   middle of the screen: a child who ignores it must still be able to
   play, and a modal that traps them is worse than no banner at all. */
.consentbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--card,#fff); border-top:1px solid var(--line,#e3e7ef);
  box-shadow:0 -6px 24px rgba(20,25,45,.13);
  transform:translateY(105%); transition:transform .3s var(--ease,ease);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.consentbar.in{ transform:none }
.consentbar-in{
  max-width:960px; margin:0 auto; padding:14px 16px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.consentbar-txt{ flex:1 1 320px; min-width:0 }
.consentbar-txt b{ font-family:var(--head,inherit); font-size:15.5px; display:block }
.consentbar-txt p{ margin:3px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink,#1a2233); opacity:.82 }
.consentbar-btns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
/* 44px minimum: this is tapped on a phone, often by someone holding a child */
.consentbar-btns .btn{ min-height:44px }
.consentbar-btns .btn.link{
  background:none; border:0; text-decoration:underline; padding:10px 8px;
  color:var(--brand,#4b2fd6); font-weight:600; cursor:pointer;
}
@media (max-width:520px){
  .consentbar-btns{ width:100%; }
  .consentbar-btns .btn{ flex:1 1 auto }
}

/* the per-purpose panel */
.consentpick{ padding:4px 2px }
.consentpick h2{ margin:0 0 12px; font-size:19px }
.crow{ display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line,#e3e7ef) }
.crow:first-of-type{ border-top:0 }
.crow input{ width:21px; height:21px; margin-top:2px; flex:none }
.crow b{ display:block; font-size:14.5px }
.crow i{ display:block; font-style:normal; font-size:13px; line-height:1.5; opacity:.75; margin-top:2px }

/* ---------- ad slots ---------- */

/* Always visibly an advert, always visibly not part of the app. A child
   cannot tell a banner from a game tile, so the frame and the label do
   that job for them. */
.adbox{
  position:relative; margin:16px 0; padding:16px 8px 8px;
  border:1px dashed var(--line,#e3e7ef); border-radius:12px;
  background:rgba(127,127,127,.04); overflow:hidden;
}
.adlabel{
  position:absolute; top:4px; left:8px;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; opacity:.5;
}
.adslot{ display:block; width:100%; overflow:hidden }
.adslot > *{ max-width:100% }

/* A slot the admin marked NOT child-safe. It still renders when
   deliberately enabled, but it is boxed off harder so an accidental tap
   is less likely and an operator reviewing the page can see the risk. */
.adbox-child{ border-color:#e0a83a; background:rgba(224,168,58,.06) }

.ad-test{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; border-radius:8px; background:repeating-linear-gradient(
    45deg, rgba(127,127,127,.07) 0 10px, rgba(127,127,127,.02) 10px 20px);
  font-size:12.5px; text-align:center; padding:10px;
}
.ad-test b{ font-size:13.5px }
.ad-test span{ opacity:.62 }

/* Ads are a screen thing. Never let one reach a child's worksheet. */
@media print{ .adbox, .consentbar{ display:none !important } }


/* ============================================================
   Touch targets

   The play surfaces were already fine (tiles 76px, memory cards 67px,
   d-pad 66px). Every failure was in the chrome AROUND the games — the
   mode chips, the A–Z picker, the small buttons, the modal close — and
   a child uses those just as often as the game itself. 44px is the
   floor for a finger; a four-year-old's aim is worse than an adult's,
   not better.
   ============================================================ */
.chip{ min-height:44px }
.pagestrip button{ min-height:46px }
.btn.sm{ min-height:44px }

.modalx{ width:44px; height:44px }
.casebtn{ min-height:40px }
.icon-btn{ min-width:44px; min-height:44px }

/* Poem lines that are not the current one were 2.66:1 — but the child
   is meant to read the whole verse in "Say it back" and "Fading words". */
.poem-line{ opacity:.85 }

/* The A4 preview is scaled to fit, which on a 360px phone means 0.468 —
   answer boxes came out at 32px and instruction text at an effective
   7px. Below 700px, stop shrinking and let the sheet pan sideways. */
@media (max-width:700px){
  .paper-fit{ overflow-x:auto; -webkit-overflow-scrolling:touch }
}

/* ============================================================
   Mobile: a real bottom tab bar
   ============================================================

   On a phone the top strip held nine tabs in ~350px — 902px of content
   in a horizontally scrolling rail, so five of the nine sections were
   invisible unless you happened to discover the swipe. Primary
   navigation should never be something you find by accident.

   Below 700px the same <nav> becomes a fixed bottom bar with four
   destinations and a More sheet, which is where a thumb already is and
   what every app this audience uses looks like. Above 700px nothing
   changes — the desktop layout is untouched.
   ============================================================ */
@media (max-width:700px){

  /* stop the old rail behaviour from applying */
  .mainnav{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    order:0; width:auto; flex:none;
    display:flex; gap:0; justify-content:stretch;
    overflow:visible; touch-action:auto;
    -webkit-mask-image:none; mask-image:none;
    background:var(--card,#fff);
    border-top:1px solid var(--line,#e6e3f5);
    box-shadow:0 -4px 20px rgba(30,20,70,.10);
    padding:4px 2px calc(4px + env(safe-area-inset-bottom,0));
  }

  .mainnav a{
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:6px 2px; border-radius:12px;
    font-size:10.5px; font-weight:700; line-height:1.15;
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-height:52px;                     /* thumb-sized, not text-sized */
    background:none; color:var(--ink-soft,#6B639B);
  }
  .mainnav a span{ font-size:21px; line-height:1 }

  /* the current section reads as a tab, not a pill button */
  .mainnav a[aria-current="page"]{
    background:none; color:var(--brand,#4b2fd6); box-shadow:none;
  }
  .mainnav a[aria-current="page"] span{ transform:translateY(-1px) }

  /* items moved into the More sheet */
  .mainnav a.nav-more-hidden{ display:none }

  /* the sheet itself */
  .moresheet{ padding:2px }
  .moresheet h2{ margin:0 0 12px; font-size:19px }
  .moresheet a{
    display:flex; align-items:center; gap:12px;
    padding:14px 12px; border-radius:14px; text-decoration:none;
    color:var(--ink,#241B4A); font-weight:700; font-size:16px;
    border-bottom:1px solid var(--line,#e6e3f5);
  }
  .moresheet a:last-child{ border-bottom:0 }
  .moresheet a span{ font-size:26px; line-height:1 }

  /* Nothing may be wider than the phone.

     .field carries max-width:360px with the default min-width:auto, so a
     flex item whose <select> has a long option ("Nursery — 25 mm letters
     …") refuses to shrink below its content and pushed the Print page to
     388px in a 375px viewport — the whole page then slid sideways and the
     sticky print bar drifted off. min-width:0 lets flex do its job. */
  .field{ max-width:100%; min-width:0 }
  .field select,.field input,.field textarea{ width:100%; max-width:100%; min-width:0 }

  /* the bar floats over the page, so give the page room to end */
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0)) }
  /* and keep the consent bar above it rather than underneath */
  .consentbar{ bottom:calc(60px + env(safe-area-inset-bottom,0)) }
}

/* ============================================================
   Night mode
   ============================================================

   Defined as TOKENS ONLY. Every value below already exists in :root
   above; nothing here invents a new variable, so anything that uses the
   design system follows automatically.

   Three blocks on purpose:
     :root                        light (above)
     prefers-color-scheme: dark   the device's own setting…
       :root:not([data-theme=light])   …unless the user forced light
     :root[data-theme=dark]       the user forced dark

   Contrast was measured, not guessed. On --card #1C1938:
     --ink 14.9:1 · --ink-2 9.9:1 · --ink-soft 6.0:1 · brand text 6.3:1
   The brand fill (#8B6BFF) is only 4.5:1, so text uses the lighter
   --brand-2; keep that split if you retune these.

   NOTE: app.css carries ~84 literal white surfaces that no token can
   reach. Those are handled in the block after this one, which was
   built by probing the rendered pages rather than by reading the file.
   ============================================================ */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F2EFFF; --ink-2:#C9C2E8; --ink-soft:#9C93C9;
    --line:#2E2856; --line-2:#3A3366;
    --bg:#12102A; --card:#1C1938; --card-2:#252045;
    --card-glass:rgba(28,25,56,.88); --card-glass-2:rgba(255,255,255,.06);
    --hi-soft:#4A3D1F;
    --veil:rgba(255,255,255,.08); --veil-soft:rgba(255,255,255,.05);
    --scrim:rgba(28,25,56,.94);
    --star-ink:#FFC85C;

    --brand:#8B6BFF; --brand-2:#A98CFF; --brand-ink:#A98CFF;

    /* A shadow cannot be seen on a dark ground; depth comes from a
       lighter hairline instead, plus a deeper cast for lift. */
    --sh-1:0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.045);
    --sh-2:0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.055);
    --sh-3:0 14px 38px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07);
    --sh-brand:0 8px 22px rgba(108,76,241,.45);

    color-scheme: dark;
  }
}

:root[data-theme="dark"]{
  --ink:#F2EFFF; --ink-2:#C9C2E8; --ink-soft:#9C93C9;
  --line:#2E2856; --line-2:#3A3366;
  --bg:#12102A; --card:#1C1938; --card-2:#252045;
    --card-glass:rgba(28,25,56,.88); --card-glass-2:rgba(255,255,255,.06);
    --hi-soft:#4A3D1F;
    --veil:rgba(255,255,255,.08); --veil-soft:rgba(255,255,255,.05);
    --scrim:rgba(28,25,56,.94);
    --star-ink:#FFC85C;

  --brand:#8B6BFF; --brand-2:#A98CFF; --brand-ink:#A98CFF;

  --sh-1:0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.045);
  --sh-2:0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.055);
  --sh-3:0 14px 38px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07);
  --sh-brand:0 8px 22px rgba(108,76,241,.45);

  color-scheme: dark;
}

/* ============================================================
   Drawing Box
   ============================================================ */
.hero-draw{ background:linear-gradient(135deg,#21C7A8 0%,#38B6FF 50%,#9B6BFF 100%) }

.drawstage{ margin-top:12px }

/* The page being drawn on. Deliberately the card colour rather than a
   hard white: at night a glowing white sheet is exactly what the whole
   theme exists to avoid, and every crayon still reads on it. */
.drawboard{
  position:relative; width:100%; aspect-ratio:1/1; max-height:min(62vh,520px);
  margin:12px auto 0; border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--sh-1);
  border:1px solid var(--line-2); overflow:hidden;
}
.drawsvg{ display:block; width:100%; height:100% }

/* every region is a target, so make it feel like one */
.drawsvg [data-part]{ cursor:pointer; transition:opacity .12s var(--ease) }
.drawsvg [data-part]:hover{ opacity:.82 }
/* a transparent region still has to be tappable, not just its outline */
.drawsvg [data-part][fill="transparent"]{ fill:var(--card) }

.drawcanvas{ display:block; width:100%; height:100%; cursor:crosshair }

/* the crayon box is wider here than in tracing — ten colours */
.drawswatches{ margin-top:14px; justify-content:center }
.drawpics{ justify-content:center }
.drawpics button{ font-size:24px; min-width:52px }

@media (max-width:700px){
  .drawboard{ max-height:58vh }
  .drawswatches .swatch{ width:42px; height:42px }
}

/* the picture grid — 51 pages need browsing, not scrolling past */
.drawcats{ justify-content:center; margin-top:10px }
.drawgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:8px; margin-top:10px; max-height:186px; overflow-y:auto; padding:2px;
}
.drawpick{
  position:relative; min-height:60px; border:1px solid var(--line-2);
  background:var(--card-2); border-radius:var(--r-sm); cursor:pointer;
  font-size:28px; line-height:1; display:grid; place-items:center;
  transition:transform .12s var(--ease), box-shadow .12s;
}
.drawpick:hover{ transform:translateY(-2px); box-shadow:var(--sh-1) }
.drawpick[aria-pressed="true"]{ box-shadow:0 0 0 3px var(--brand); background:var(--card) }
/* a finished page keeps a tick, so a child can see what is left to do */
.drawpick i{
  position:absolute; right:3px; bottom:2px; font-style:normal; font-size:12px;
  color:var(--good,#0f9960); font-weight:800;
}
@media (max-width:700px){
  .drawgrid{ grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); max-height:164px }
  .drawpick{ min-height:54px; font-size:25px }
}

/* Sat just under AA on the night board: the PIN dots and the hint under
   a dialog title. Both are things a parent has to read to act. */
.pin-dots{ color:var(--ink-2) }
.set-hint{ color:var(--ink-2) }
/* the book meta line ("18 printable pages") */
.card .meta span, .pk-meta, .sh-age{ color:var(--ink-2) }