/* Bookahoo themes. Each child picks a day theme (Storybook, Playful or Cinematic); Bedtime takes over in
   bedtime mode. Themes change shape and texture as well as colour: book covers, cards, buttons, shelves,
   the home hero and the tab bar. app.css holds the base layout; everything here is a layer on top. */

/* ================================================================ 📖 Storybook: a cosy picture-book library */
html.t-storybook {
  --bg: #F4E9D3; --bg2: #E9D9B8; --ink: #2E2118; --card: #FFFAEE; --line: rgba(46,33,24,.14);
  --accent: #D9483B; --accent-ink: #fff; --accent2: #2F6B4F; --gold: #E3A72F; --muted: #7D6A55;
  --glow: rgba(217,72,59,.24); --hl: #F7D98B; --shadow: 0 1px 0 rgba(46,33,24,.08), 0 8px 22px rgba(80,52,24,.14);
  --wood: #8A5A33; --wood-dk: #5E3B20;
  --head-font: "Fraunces", Georgia, "Times New Roman", serif;
}
html.t-storybook {
  /* the page background: a linen weave, a watercolour wash and paper grain */
  --sb-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003125 .9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .27 0 0 0 0 .14 0 0 0 -1.3 .72'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .003125' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .27 0 0 0 0 .14 0 0 0 -1.3 .68'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23h)'/%3E%3Crect width='320' height='320' filter='url(%23v)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(110,78,44,.09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110,78,44,.075) 0 1px, transparent 1px 3px);
  --sb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .24 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.t-storybook body {
  background-color: var(--bg);
  background-image:
    /* a soft colour wash over the paper: apricot light, sky blue, sage and a hint of rose */
    radial-gradient(70% 55% at 0% 0%, rgba(255,190,140,.42), transparent 70%),
    radial-gradient(55% 45% at 100% 8%, rgba(150,196,230,.3), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(160,196,150,.28), transparent 70%),
    radial-gradient(55% 45% at 100% 100%, rgba(240,160,170,.26), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .005' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .58 0 0 0 0 .38 0 0 0 0 .18 0 0 0 -.9 .62'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23w)'/%3E%3C/svg%3E"),
    var(--sb-weave), var(--sb-grain);
  background-size: auto, auto, auto, auto, 800px 800px, 320px 320px, auto, auto, 180px 180px;
  background-attachment: fixed;
}
/* headings in a soft storybook serif */
.t-storybook h1, .t-storybook h2, .t-storybook h3, .t-storybook .r-title {
  font-family: var(--head-font); font-weight: 700; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.3px; color: var(--ink); }
.t-storybook .r-title { color: var(--accent); }
.t-storybook .home-head .hello h1 { font-size: clamp(22px, 5.6vw, 34px); }
.t-storybook .shelf-head h2 { position: relative; padding-bottom: 8px; font-size: 23px; }
.t-storybook .shelf-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 8'%3E%3Cpath d='M2 5 Q 12 1 22 5 T 42 5 T 62 5 T 82 4' fill='none' stroke='%23E3A72F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.t-storybook .see-all { color: var(--accent2); }

/* covers become little hardback books standing on wooden shelves */
.t-storybook .book .cover { border-radius: 3px 10px 10px 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 3px 0 0 -1px #F8EFDC, 4px 1px 0 -1px rgba(46,33,24,.25), 0 10px 14px -6px rgba(46,33,24,.45); }
.t-storybook .book .cover::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.32) 0, rgba(255,255,255,.3) 2.6%, rgba(0,0,0,.08) 5.5%, transparent 10%, transparent 94%, rgba(0,0,0,.1)); }
.t-storybook .book:not(.movie):not(.wide)::before { content: ""; position: absolute; left: -8px; right: -8px; top: 0; z-index: -1; pointer-events: none;
  padding-top: calc(160% + 14px);  /* the cover is 5:8, so its height is 160% of the book's width */
  background: linear-gradient(180deg, #A9744A, var(--wood) 35%, var(--wood-dk)) bottom / 100% 14px no-repeat,
    linear-gradient(rgba(46,33,24,.28), transparent) bottom -10px left 0 / 100% 10px no-repeat; }
.t-storybook .book .title { margin-top: 20px; font-weight: 700; }
.t-storybook .row { padding-bottom: 20px; }
.t-storybook .book .tag, .t-storybook .book .src { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .t-storybook .book:hover .cover { transform: translateY(-6px) rotate(-1.5deg); }
}

/* the home hero is a framed illustration plate with a ribbon bookmark */
.t-storybook .feature { color: var(--ink); background: var(--card); border: 1px solid rgba(46,33,24,.2); box-shadow: var(--shadow); overflow: visible; }
.t-storybook .feature::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(46,33,24,.22); border-radius: calc(var(--r) - 5px); pointer-events: none; }
.t-storybook .feature::after { inset: -6px 34px auto auto; width: 26px; height: 64px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #B8352A, var(--accent) 45%, #B8352A); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: none; filter: drop-shadow(0 3px 2px rgba(46,33,24,.3)); }
@media (max-width: 600px) { .t-storybook .feature::after { inset: -6px auto auto 30px; height: 50px; width: 22px; } }  /* phones: tucked into the book, clear of the title */
.t-storybook .feature .kicker { color: var(--accent); font-family: Nunito, sans-serif; font-weight: 800; letter-spacing: 1.4px; opacity: 1; }
.t-storybook .feature h2 { font-size: clamp(22px, 3.2vw, 30px); }
.t-storybook .feature .fc { transform: rotate(-2.5deg); border-radius: 3px 10px 10px 3px;
  box-shadow: 4px 1px 0 -1px #F8EFDC, 5px 2px 0 -1px rgba(46,33,24,.25), 0 16px 24px rgba(80,52,24,.32); }
.t-storybook .feature .btn.primary { background: var(--accent); color: #fff; }
.t-storybook .feature .btn.ghost { background: var(--bg2); color: var(--ink); }
.t-storybook .feature .bar { background: var(--bg2); }
.t-storybook .feature .bar i { background: var(--gold); }

/* paper cards, tags and buttons */
.t-storybook .card, .t-storybook .note, .t-storybook .continue, .t-storybook .book-filters, .t-storybook .sheet .panel { border: 1px solid var(--line); }
.t-storybook .sheet .panel { background: var(--card); }
.t-storybook .chip { background: var(--card); border: 1px solid var(--line); box-shadow: 0 2px 0 rgba(46,33,24,.08); }
.t-storybook .chip[aria-pressed="true"] { background: var(--accent2); border-color: var(--accent2); color: #FFFAEE; }
.t-storybook .mood { border: 1px solid var(--line); background: var(--card); }
.t-storybook .mood .thumb { background: var(--accent); box-shadow: 0 3px 0 #A93427; }
.t-storybook .btn.primary { box-shadow: 0 4px 0 #A93427, 0 10px 18px var(--glow); }
.t-storybook .btn.primary:active { box-shadow: 0 1px 0 #A93427; transform: translateY(3px); }
.t-storybook .home-head .me, .t-storybook .theme-btn, .t-storybook .icon { border: 1px solid var(--line); }
.t-storybook .input { background: var(--card); border-color: var(--line); }
.t-storybook .tabbar { background: color-mix(in srgb, var(--card) 94%, transparent); border-top: 1px solid var(--line); }
.t-storybook .tab[aria-current="page"] { color: var(--accent); }
.t-storybook .tab[aria-current="page"] .ico { background: color-mix(in srgb, var(--gold) 30%, transparent); }
.t-storybook .r-img img { border-radius: 6px; box-shadow: 0 0 0 6px var(--card), 0 0 0 7px var(--line), 0 14px 26px rgba(80,52,24,.22); }

/* ================================================================ 🎈 Playful: bright, chunky, bouncy */
html.t-playful {
  --bg: #FFF1BF; --bg2: #FFE07A; --ink: #1B1640; --card: #FFFFFF; --line: rgba(27,22,64,.16);
  --accent: #FF3E8A; --accent-ink: #fff; --accent2: #3B5BFF; --gold: #FFD23F; --teal: #00C2A8; --orange: #FF8A00;
  --ok: #12B76A; --muted: #575288; --glow: rgba(255,62,138,.35); --hl: #B9F3FF; --shadow: 4px 5px 0 #1B1640; --r: 22px;
  --head-font: "Baloo 2", "Fredoka", ui-rounded, sans-serif;
}
/* a confetti sky: little dots, rings, triangles and squiggles scattered on lemon */
html.t-playful body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='38' cy='44' r='7' stroke='%23FF3E8A' stroke-opacity='0.29'/%3E%3Cpath d='M180 34 l14 -4 l-4 14 z' stroke='%233B5BFF' stroke-opacity='0.26'/%3E%3Cpath d='M96 130 q8 -10 16 0 t16 0 t16 0' stroke='%2300C2A8' stroke-opacity='0.33'/%3E%3Ccircle cx='222' cy='150' r='6' stroke='%23FF8A00' stroke-opacity='0.33'/%3E%3Cpath d='M40 206 l10 10 m0 -10 l-10 10' stroke='%233B5BFF' stroke-opacity='0.23'/%3E%3Cpath d='M170 222 q6 -9 12 0 t12 0' stroke='%23FF3E8A' stroke-opacity='0.26'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='132' cy='60' r='4' fill='%23FF8A00' fill-opacity='0.29'/%3E%3Ccircle cx='20' cy='128' r='3.5' fill='%233B5BFF' fill-opacity='0.23'/%3E%3Ccircle cx='238' cy='84' r='3' fill='%2300C2A8' fill-opacity='0.33'/%3E%3Ccircle cx='110' cy='200' r='4' fill='%23FF3E8A' fill-opacity='0.23'/%3E%3Ccircle cx='250' cy='238' r='3.5' fill='%233B5BFF' fill-opacity='0.20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
}
.t-playful h1, .t-playful h2, .t-playful h3, .t-playful .btn, .t-playful .tab, .t-playful .chip, .t-playful .book .title,
.t-playful .mood button, .t-playful .brand, .t-playful .r-title, .t-playful .feature .kicker { font-family: var(--head-font); font-weight: 800; letter-spacing: -.2px; }
.t-playful .home-head .hello h1 { font-size: clamp(23px, 5.8vw, 36px); }
.t-playful .card, .t-playful .feature, .t-playful .continue, .t-playful .note, .t-playful .chip, .t-playful .mood,
.t-playful .btn:not(.ghost), .t-playful .home-head .me, .t-playful .icon, .t-playful .strip, .t-playful .input,
.t-playful .theme-btn, .t-playful .book-filters, .t-playful .sheet .panel {
  border: 3px solid var(--ink); box-shadow: var(--shadow); }
.t-playful .btn:not(.ghost), .t-playful .chip, .t-playful .icon, .t-playful .home-head .me, .t-playful .theme-btn { transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.t-playful .btn:not(.ghost):active, .t-playful .chip:active, .t-playful .icon:active, .t-playful .theme-btn:active, .t-playful .home-head .me:active {
  transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.t-playful .btn.primary { background: var(--accent); }
.t-playful .btn.blue { background: var(--accent2); }
.t-playful .chip { background: var(--card); }
.t-playful .chip[aria-pressed="true"] { background: var(--accent2); color: #fff; }
.t-playful .src-chip .n, .t-playful .chip .n { opacity: .8; }
.t-playful .mood { background: var(--card); }
.t-playful .mood .thumb { background: var(--accent); border: 3px solid var(--ink); top: 3px; bottom: 3px; box-shadow: none; }
.t-playful .see-all { color: var(--accent2); font-family: var(--head-font); font-weight: 800; }

/* covers: thick outlines, hard offset shadows and a little jiggle */
.t-playful .book .cover { border: 3px solid var(--ink); border-radius: 18px; box-shadow: 5px 6px 0 var(--ink); }
.t-playful .row .book:nth-child(odd) .cover { transform: rotate(-1.6deg); }
.t-playful .row .book:nth-child(even) .cover { transform: rotate(1.4deg); }
.t-playful .book .src { border: 2px solid var(--ink); box-shadow: none; }
.t-playful .book .tag { background: var(--ink); }
.t-playful .book .title { font-size: 16px; }

/* the home hero: a bold blue poster with candy circles and halftone dots */
.t-playful .feature { color: #fff; overflow: hidden;
  background: radial-gradient(circle at 92% 18%, var(--gold) 0 46px, transparent 47px),
    radial-gradient(circle at 78% 112%, var(--accent) 0 90px, transparent 91px),
    radial-gradient(circle at 100% 70%, var(--teal) 0 38px, transparent 39px),
    radial-gradient(rgba(255,255,255,.18) 2px, transparent 2.5px) 0 0 / 14px 14px,
    var(--accent2); }
.t-playful .feature::after { content: "⭐"; background: none; width: auto; height: auto; inset: 10px 14px auto auto; border-radius: 0;
  font-size: 34px; animation: wobble 2.6s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(16deg) scale(1.12); } }
.t-playful .feature .kicker { color: var(--gold); opacity: 1; letter-spacing: 1px; font-size: 14px; }
.t-playful .feature h2 { color: #fff; font-size: clamp(24px, 3.6vw, 34px); text-shadow: 3px 3px 0 var(--ink); }
.t-playful .feature .fc { border: 3px solid var(--ink); transform: rotate(-4deg); box-shadow: 5px 6px 0 var(--ink); }
.t-playful .feature .btn.primary { background: var(--gold); color: var(--ink); }
.t-playful .feature .btn.ghost { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.t-playful .feature .bar { background: rgba(255,255,255,.35); border: 2px solid var(--ink); height: 10px; border-radius: 6px; }
.t-playful .feature .bar i { background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .t-playful .feature::after { animation: none; } }

/* shelf names are stickers, a different colour on each shelf */
.t-playful .shelf-head h2 { display: inline-block; background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; padding: 2px 14px;
  box-shadow: 3px 4px 0 var(--ink); transform: rotate(-1.5deg); }
.t-playful .shelf:nth-of-type(3n+2) .shelf-head h2 { background: var(--accent); color: #fff; transform: rotate(1deg); }
.t-playful .shelf:nth-of-type(3n) .shelf-head h2 { background: var(--teal); color: var(--ink); transform: rotate(-.8deg); }

.t-playful .tabbar { background: #fff; border-top: 3px solid var(--ink); backdrop-filter: none; }
.t-playful .tab[aria-current="page"] .ico { background: var(--gold); border: 2px solid var(--ink); }
.t-playful .tab[aria-current="page"] { color: var(--ink); }
.t-playful .r-img img { border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); }
.t-playful .r-progress { border: 2px solid var(--ink); height: 10px; }
@media (hover: hover) and (pointer: fine) {
  .t-playful .book:hover .cover { transform: rotate(0) translate(-2px, -6px) scale(1.03); box-shadow: 8px 10px 0 var(--ink); }
  .t-playful .btn:not(.ghost):hover, .t-playful .chip:hover { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--ink); }
}

/* ================================================================ 🎬 Cinematic: dark, glowing, big art */
html.t-cinematic {
  --bg: #0A0A18; --bg2: #16162E; --ink: #F4F1FF; --card: rgba(255,255,255,.06); --line: rgba(255,255,255,.1);
  --accent: #8B7BFF; --accent-ink: #fff; --accent2: #36D6E7; --gold: #FFC857; --muted: #A9A4CC;
  --glow: rgba(139,123,255,.45); --hl: rgba(54,214,231,.35); --shadow: 0 18px 40px rgba(0,0,0,.55);
  --head-font: "Outfit", "Fredoka", system-ui, sans-serif;
  color-scheme: dark;
}
/* a faded wall of dark wooden boards at the very back; the colour glows and film layers sit on top */
html.t-cinematic {
  background:
    linear-gradient(rgba(10,10,24,.55), rgba(10,10,24,.7)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.6) 0 2px, rgba(255,255,255,.04) 2px 3px, transparent 3px 132px),
    repeating-linear-gradient(90deg, rgba(150,104,70,.1) 0 132px, rgba(95,64,44,.04) 132px 264px, rgba(130,90,62,.08) 264px 396px, rgba(110,76,52,.05) 396px 528px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='400'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .0125' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='260' height='400' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 260px 400px,
    linear-gradient(#1E1612, #15100F),
    var(--bg);
  background-attachment: fixed;
}
html.t-cinematic body {
  background-color: transparent;  /* html paints the colour, so the film textures underneath show through */
  background-image:
    radial-gradient(70% 45% at 15% -5%, rgba(139,123,255,.38), transparent 70%),
    radial-gradient(55% 40% at 95% 5%, rgba(54,214,231,.22), transparent 70%),
    radial-gradient(60% 40% at 50% 110%, rgba(255,79,163,.16), transparent 70%);
  background-attachment: fixed;
}
.t-cinematic h1, .t-cinematic h2, .t-cinematic h3, .t-cinematic .btn, .t-cinematic .tab, .t-cinematic .chip,
.t-cinematic .book .title, .t-cinematic .brand, .t-cinematic .r-title { font-family: var(--head-font); letter-spacing: .1px; }
.t-cinematic .card, .t-cinematic .note, .t-cinematic .continue, .t-cinematic .chip, .t-cinematic .mood, .t-cinematic .strip,
.t-cinematic .icon, .t-cinematic .home-head .me, .t-cinematic .btn:not(.primary):not(.ghost):not(.blue) {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: none; }
.t-cinematic .sheet .panel { background: #14142A; }
.t-cinematic .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.t-cinematic .btn.primary { background: linear-gradient(135deg, #8B7BFF, #36D6E7); box-shadow: 0 10px 30px var(--glow); }
.t-cinematic .chip[aria-pressed="true"] { background: #fff; color: #0A0A18; }
.t-cinematic .book .cover { border-radius: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
@media (hover: hover) and (pointer: fine) {
  .t-cinematic .book:hover .cover { transform: translateY(-6px) scale(1.04); box-shadow: 0 22px 46px rgba(0,0,0,.7), 0 0 0 2px var(--accent2), 0 0 36px rgba(54,214,231,.35); }
}
.t-cinematic .row { grid-auto-columns: 152px; }
@media (min-width: 700px) { .t-cinematic .row { grid-auto-columns: 190px; } }
/* the home hero becomes a full-width poster with the story's art behind it */
.t-cinematic .feature { min-height: 260px; padding: 22px; grid-template-columns: 120px 1fr; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.t-cinematic .feature::before { content: ""; position: absolute; inset: -20px; z-index: -2; background: var(--art, none) center / cover; filter: blur(22px) saturate(1.3); opacity: .75; }
.t-cinematic .feature::after { inset: 0; width: auto; height: auto; border-radius: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,24,.92) 30%, rgba(10,10,24,.35)), linear-gradient(0deg, rgba(10,10,24,.8), transparent 60%); }
.t-cinematic .feature .fc { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.15), 0 0 40px rgba(139,123,255,.45); }
.t-cinematic .feature h2 { font-size: clamp(24px, 5vw, 38px); font-weight: 700; }
.t-cinematic .feature .btn.primary { background: #fff; color: #0A0A18; }
.t-cinematic .feature .btn.ghost { background: rgba(255,255,255,.14); color: #fff; }
.t-cinematic .tabbar { background: rgba(10,10,24,.72); border-color: rgba(255,255,255,.08); }
@media (min-width: 700px) { .t-cinematic .feature { grid-template-columns: 170px 1fr; min-height: 320px; padding: 30px; } }

/* faded film textures: soft grain, faint scan lines, light leaks and a dark vignette at the edges */
html.t-cinematic body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .045;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px, repeating-linear-gradient(0deg, rgba(255,255,255,.3) 0 1px, transparent 1px 5px); }
html.t-cinematic body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255,214,170,.05) 32%, transparent 44%),
    linear-gradient(115deg, transparent 58%, rgba(139,123,255,.06) 66%, transparent 74%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)); }

/* ================================================================ 🌙 Bedtime: calm night sky (extends app.css) */
html.bedtime body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 85% 8%, rgba(255,228,138,.22), transparent 18%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Ccircle cx='59' cy='29' r='0.8' fill='%23fff' fill-opacity='0.39'/%3E%3Ccircle cx='96' cy='66' r='0.5' fill='%23fff' fill-opacity='0.63'/%3E%3Ccircle cx='9' cy='78' r='0.5' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='77' cy='148' r='0.5' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='112' cy='169' r='0.7' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='174' cy='10' r='0.8' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='27' cy='23' r='0.6' fill='%23fff' fill-opacity='0.80'/%3E%3Ccircle cx='34' cy='104' r='0.8' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='98' cy='13' r='0.5' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='122' cy='77' r='0.6' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='82' cy='55' r='0.8' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='45' cy='103' r='0.7' fill='%23fff' fill-opacity='0.83'/%3E%3Ccircle cx='130' cy='53' r='0.9' fill='%23fff' fill-opacity='0.41'/%3E%3Ccircle cx='76' cy='135' r='0.6' fill='%23fff' fill-opacity='0.62'/%3E%3Ccircle cx='9' cy='120' r='0.8' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='156' cy='57' r='0.8' fill='%23fff' fill-opacity='0.68'/%3E%3C/svg%3E") 0 0 / 180px 180px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='310'%3E%3Ccircle cx='179' cy='142' r='1.2' fill='%23fff' fill-opacity='0.87'/%3E%3Ccircle cx='147' cy='205' r='0.8' fill='%23fff' fill-opacity='0.74'/%3E%3Ccircle cx='200' cy='306' r='1.2' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='120' cy='207' r='0.8' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='53' cy='38' r='0.8' fill='%23fff' fill-opacity='0.77'/%3E%3Ccircle cx='42' cy='78' r='1.0' fill='%23fff' fill-opacity='0.83'/%3E%3Ccircle cx='27' cy='139' r='1.1' fill='%23fff' fill-opacity='0.84'/%3E%3Ccircle cx='253' cy='266' r='0.9' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='112' cy='273' r='1.3' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='56' cy='73' r='0.9' fill='%23fff' fill-opacity='0.62'/%3E%3Cpath transform='translate(181 85) scale(0.60)' d='M0-5L1.2-1.2 5 0 1.2 1.2 0 5-1.2 1.2-5 0-1.2-1.2Z' fill='%23FFF4C2' fill-opacity='0.75'/%3E%3Cpath transform='translate(117 175) scale(1.08)' d='M0-5L1.2-1.2 5 0 1.2 1.2 0 5-1.2 1.2-5 0-1.2-1.2Z' fill='%23FFF4C2' fill-opacity='0.84'/%3E%3Cpath transform='translate(160 190) scale(0.94)' d='M0-5L1.2-1.2 5 0 1.2 1.2 0 5-1.2 1.2-5 0-1.2-1.2Z' fill='%23FFF4C2' fill-opacity='0.62'/%3E%3C/svg%3E") 40px 70px / 310px 310px; }
/* a second layer of stars twinkles out of step with the first */
html.bedtime body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='214' cy='186' r='1.0' fill='%23fff' fill-opacity='0.79'/%3E%3Ccircle cx='95' cy='96' r='0.7' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='17' cy='18' r='0.7' fill='%23fff' fill-opacity='0.44'/%3E%3Ccircle cx='82' cy='14' r='0.6' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='26' cy='88' r='0.6' fill='%23fff' fill-opacity='0.83'/%3E%3Ccircle cx='147' cy='37' r='0.7' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='88' cy='31' r='1.0' fill='%23fff' fill-opacity='0.90'/%3E%3Ccircle cx='112' cy='116' r='0.6' fill='%23fff' fill-opacity='0.41'/%3E%3Ccircle cx='83' cy='64' r='1.0' fill='%23fff' fill-opacity='0.44'/%3E%3Ccircle cx='7' cy='226' r='0.9' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='130' cy='8' r='0.9' fill='%23fff' fill-opacity='0.89'/%3E%3Ccircle cx='206' cy='166' r='0.7' fill='%23fff' fill-opacity='0.55'/%3E%3Cpath transform='translate(45 181) scale(0.87)' d='M0-5L1.2-1.2 5 0 1.2 1.2 0 5-1.2 1.2-5 0-1.2-1.2Z' fill='%23FFF4C2' fill-opacity='0.87'/%3E%3Cpath transform='translate(82 58) scale(1.01)' d='M0-5L1.2-1.2 5 0 1.2 1.2 0 5-1.2 1.2-5 0-1.2-1.2Z' fill='%23FFF4C2' fill-opacity='0.94'/%3E%3C/svg%3E") 110px 20px / 240px 240px; animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 1; } to { opacity: .2; } }
html.bedtime .book .cover { box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }

/* shared: headings use each theme's display font */
html[class*="t-"] h1, html[class*="t-"] h2 { font-family: var(--head-font, Fredoka), ui-rounded, sans-serif; }

/* ================================================================ desktop side rail: dark for the light themes */
@media (min-width: 1024px) {
  /* Storybook: a dark wooden bookcase side with a gold stitched edge */
  html.t-storybook .tabbar { border-right: 0;
    background: repeating-linear-gradient(92deg, rgba(255,255,255,.025) 0 3px, transparent 3px 11px, rgba(0,0,0,.05) 11px 13px, transparent 13px 26px),
      linear-gradient(90deg, #2A1C12, #3D2A1C 85%, #2C1E14);
    box-shadow: inset -6px 0 10px -6px rgba(0,0,0,.5), 4px 0 18px rgba(46,33,24,.2); }
  html.t-storybook .tabbar::after { content: ""; position: absolute; top: 14px; bottom: 14px; right: 10px; border-right: 2px dashed rgba(227,167,47,.4); pointer-events: none; }
  html.t-storybook .tabbar .brand { font-family: var(--head-font); font-variation-settings: "SOFT" 100; color: #FBEFD6; }
  html.t-storybook .tabbar .tab, html.t-storybook .tabbar .rail-only { color: rgba(251,239,214,.72); }
  html.t-storybook .tabbar .tab[aria-current="page"] { color: #FBEFD6; background: rgba(227,167,47,.18); }
  html.t-storybook .tabbar .tab[aria-current="page"] .ico { background: var(--gold); color: #2E2118; }
  /* Playful: deep ink with confetti and a pink edge */
  html.t-playful .tabbar { border-top: 0; border-right: 3px solid var(--ink); box-shadow: 5px 0 0 var(--accent);
    background: radial-gradient(rgba(255,255,255,.08) 2px, transparent 2.5px) 0 0 / 22px 22px, var(--ink); }
  html.t-playful .tabbar .brand { color: var(--gold); font-size: 22px; }
  html.t-playful .tabbar .tab, html.t-playful .tabbar .rail-only { color: rgba(255,255,255,.75); }
  html.t-playful .tabbar .tab[aria-current="page"] { color: var(--ink); background: var(--gold); border: 3px solid #fff; box-shadow: 3px 4px 0 var(--accent); }
  html.t-playful .tabbar .tab[aria-current="page"] .ico { background: #fff; border: 2px solid var(--ink); color: var(--ink); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html.t-storybook .tabbar .tab:hover, html.t-playful .tabbar .tab:not([aria-current="page"]):hover { color: #fff; }
}

/* ================================================================ theme picker */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.theme-card { position: relative; display: grid; gap: 8px; text-align: left; padding: 10px; border-radius: 18px; background: var(--card);
  border: 3px solid transparent; box-shadow: var(--shadow); transition: transform .16s var(--ease-out), border-color .2s; }
.theme-card:active { transform: scale(.97); }
.theme-card[aria-pressed="true"] { border-color: var(--accent); }
.theme-card .sw { height: 92px; border-radius: 12px; position: relative; overflow: hidden; }
.theme-card .sw i { position: absolute; bottom: 10px; width: 30px; height: 46px; border-radius: 4px 8px 8px 4px; }
.theme-card b { font-family: var(--head-font, Fredoka), sans-serif; font-size: 17px; }
.theme-card small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.sw.storybook { background: linear-gradient(#8A5A33, #5E3B20) bottom / 100% 10px no-repeat, radial-gradient(circle at 15% 0%, #FFECC4, transparent 60%), #F4E9D3; }
.sw.playful { background: radial-gradient(circle at 85% 20%, #FFD23F 0 14px, transparent 15px), radial-gradient(circle at 70% 120%, #FF3E8A 0 30px, transparent 31px), #3B5BFF; border: 3px solid #1B1640; }
.sw.cinematic { background: radial-gradient(circle at 20% 0%, #8B7BFF88, transparent 60%), radial-gradient(circle at 100% 20%, #36D6E755, transparent 60%), #0A0A18; }
.sw.bedtime { background: radial-gradient(circle at 80% 25%, #FFE48A 0 9px, transparent 10px), radial-gradient(1.5px 1.5px at 30% 30%, #fff, transparent), linear-gradient(#141233, #2A2470); }
.theme-btn { width: 52px; height: 52px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 24px; flex: none;
  transition: transform .16s var(--ease-out); }
.theme-btn:active { transform: scale(.94); }