/* ==========================================================================
   css/flair.css — brighter, friendlier "glass" look, loaded LAST.
   • glass cards (soft blur, light borders, gentle glow)
   • bigger tap targets, playful (but optional) motion
   • styles for: welcome guide, music invitation, read-aloud bar, chapter
     scenes, source badges, timeline icons, 3-step cards, sources page
   All motion is inside prefers-reduced-motion: no-preference.
   Colours below keep WCAG AA (checked by tools/contrast.js).
   ========================================================================== */
:root {
  --glass: rgba(255,255,255,.66); --glass-strong: rgba(255,255,255,.82); --glass-edge: rgba(255,255,255,.9);
  --glass-shadow: 0 10px 34px -12px rgba(52,40,120,.28), inset 0 1px 0 rgba(255,255,255,.85);
  --glow: 0 0 0 1px rgba(255,255,255,.7), 0 12px 40px -10px rgba(232,137,43,.4);
  --pink: #c2306f; --sky: #1f6fd0; --mint: #137a4a;
}
[hidden] { display: none !important; }
html[data-mode="kids"] {
  --font-display: "Nunito", "Quicksand", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif;
  --cream: #fff7e9; --parchment: #fff0d6; --parchment-2: #f5dcae;
}
html[data-mode="kids"] h1, html[data-mode="kids"] h2, html[data-mode="kids"] h3 { font-weight: 800; letter-spacing: -.005em; }
html[data-mode="kids"] .char-card .tagline, html[data-mode="kids"] .coming-hero p { font-style: normal; }
body {
  background: linear-gradient(165deg, #fff6e4 0%, #eaf5ff 42%, #f1ecff 78%, #fff1f4 100%) fixed;
}
html[data-mode="scholar"] body { background: linear-gradient(165deg, #fbf5e9 0%, #eef0fa 100%) fixed; }

/* ---------- glass surfaces ---------- */
.char-card, .tile, .parva-card, .tl-card, .sb-box, .explain, .callout, .list-box, .mini-card, .rel, .sb-cast a, .sb-toc a, .sb-mini a, .step, .fc-group, .speak-bar, .bp-timeline a, .bp-next .tile, .journey-pop {
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}
@supports not (backdrop-filter: blur(1px)) { .char-card, .tile, .parva-card, .tl-card, .sb-box, .explain, .callout, .list-box, .mini-card, .rel, .step, .speak-bar, .fc-group { background: var(--glass-strong); } }
.char-card:hover, .tile:hover, .parva-card:hover, .step:hover { box-shadow: var(--glow); border-color: #fff; }
.callout { border-radius: var(--radius-lg); padding: 1rem 1.2rem; }
.site-header { background: rgba(33,36,112,.88); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.mode-strip { background: linear-gradient(90deg, rgba(60,44,140,.92), rgba(33,36,112,.92)); }
.site-footer { background: linear-gradient(180deg, #25286f, #1a1c4f); }

/* ---------- brighter heroes ---------- */
.hero { background:
    radial-gradient(circle at 78% 24%, rgba(255,214,120,.55) 0, rgba(255,170,90,.22) 12%, transparent 30%),
    radial-gradient(ellipse at 50% 120%, rgba(255,130,150,.45) 0%, transparent 60%),
    linear-gradient(180deg, #232a86 0%, #43308f 55%, #8a3d92 100%); }
.hero .stars { opacity: .9; }
.hero .horizon { background: linear-gradient(180deg, transparent, rgba(255,160,110,.22) 70%, rgba(255,160,110,.32)); }
.coming-hero { background: radial-gradient(circle at 85% 20%, rgba(255,200,110,.35), transparent 40%), linear-gradient(150deg, #232a86, #4a3398 75%, #7a3b92); }
.coming-hero p { color: #efeaff; }
.phase-tag { background: rgba(255,255,255,.18); color: #fff; }
.eyebrow { color: #ffe9a6; }
.hero .sub { color: #f1ecff; }
.panel-dark { background: linear-gradient(150deg, #2b2f90, #4a3398); }
.mode-card { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border-color: rgba(255,255,255,.3); }

/* ---------- buttons & tap targets ---------- */
.btn { min-height: 52px; padding: .8rem 1.6rem; font-size: 1.02rem; }
.btn-primary { background: linear-gradient(180deg, #ffb24a, #f08a22); box-shadow: 0 12px 28px -10px rgba(240,138,34,.8), inset 0 1px 0 rgba(255,255,255,.55); color: #1b2559; }
.btn-primary:hover { background: linear-gradient(180deg, #ffbf68, #f39a3e); }
.btn-light { background: var(--glass-strong); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.1); }
.btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.2); }
.btn-xl { min-height: 64px; padding: 1rem 2.4rem; font-size: 1.3rem; box-shadow: 0 16px 36px -10px rgba(240,138,34,.85), 0 0 0 6px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.6); }
html[data-mode="kids"] .btn { min-height: 56px; font-size: 1.08rem; }
select, input[type="search"], input[type="text"] { min-height: 48px; border-radius: 14px; }
.chk { min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; }
.chk input { width: 20px; height: 20px; }
.icon-btn, .menu-btn, .help-btn { min-height: 44px; min-width: 44px; }
.mode-toggle label { min-height: 40px; display: inline-flex; align-items: center; padding-inline: 1rem; }
html[data-mode="kids"] .adv { display: none !important; }
body.modal-open { overflow: hidden; }

/* ---------- header help button ---------- */
.help-btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: .35rem .9rem; font: 600 .85rem var(--font-ui); cursor: pointer; }
.help-btn:hover { background: rgba(255,255,255,.26); }

/* ---------- portraits ---------- */
.portrait svg.ph { width: 100%; height: 100%; display: block; }
.ph-rays { transform-box: fill-box; }
.char-card .portrait, .detail-hero .portrait { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.detail-hero .portrait { border-radius: var(--radius-lg); box-shadow: var(--glow); border: 3px solid #fff; }
.av svg.ph { border-radius: 50%; }
.node .av { fill: #fff; stroke: #c9bfe8; stroke-width: 1.5; }
.node.is-char .av { fill: #fff6e0; }
.floaters { display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; margin: .4rem 0 1.4rem; }
.floaters span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.65); backdrop-filter: blur(6px); box-shadow: 0 0 24px rgba(255,214,120,.45); }
.floaters svg { width: 42px; height: 42px; }
.emb { width: 1.6em; height: 1.6em; }

/* ---------- 3 steps (home) ---------- */
.steps3 { margin-top: -2.2rem; position: relative; z-index: 3; }
.steps3 ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n em" "t t" "d d"; align-items: center; gap: .2rem .8rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); min-height: 140px; transition: transform .2s var(--ease), box-shadow .25s; }
.step .n { grid-area: n; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--indigo); color: #fff; font: 800 1.1rem var(--font-ui); }
.step .em { grid-area: em; font-size: 2.2rem; justify-self: end; }
.step strong { grid-area: t; font: 800 1.35rem var(--font-display); color: var(--indigo); margin-top: .3rem; }
.step > span:last-child { grid-area: d; color: var(--muted); font-size: .98rem; line-height: 1.4; }
.step:hover { transform: translateY(-4px); color: var(--ink); }

/* ---------- storybook: scene, badges, read bar ---------- */
.sb-scene { border-radius: var(--radius-lg); overflow: hidden; margin: .6rem 0 1rem; box-shadow: var(--glow); border: 3px solid #fff; aspect-ratio: 800 / 230; max-height: 240px; background: #dbe9ff; }
.sb-scene svg { width: 100%; height: 100%; display: block; }
.src-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .3rem 0 .6rem; font: 500 .88rem var(--font-ui); }
.src-badge { display: inline-flex; gap: .3rem; align-items: center; padding: .22rem .7rem; border-radius: 999px; font: 700 .78rem/1.3 var(--font-ui); border: 1px solid transparent; }
.b-text { background: #d9f4e4; color: #0d5230; border-color: #a6dcbb; }
.b-version { background: #fff0c4; color: #6d4200; border-color: #f0cf7a; }
.b-later { background: #ebe3ff; color: #44289a; border-color: #cbbcf5; }
.src-list { list-style: none; padding: 0 !important; margin: 0; }
.src-list li { display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .7rem; }
.src-list li > span:last-child { flex: 1 1 260px; }
.src-box { grid-column: 1 / -1; }
.speak-bar { border-radius: var(--radius-lg); padding: .8rem 1rem; margin: .6rem 0 1.2rem; z-index: 20; }
.speak-bar.is-speaking, .speak-bar.is-paused { position: sticky; top: 7.6rem; }
.speak-bar.unsupported { position: static; background: #fff3d6; font: 500 .95rem var(--font-ui); }
.speak-bar.unsupported p { margin: 0; }
.sp-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.sp-play .ico, .sp-stop .ico { font-size: 1.2em; }
.sp-wave { display: none; align-items: flex-end; gap: 3px; height: 22px; }
.is-speaking .sp-wave { display: inline-flex; }
.sp-wave i { width: 4px; height: 8px; background: var(--indigo-soft); border-radius: 3px; }
.sp-opts { margin-top: .5rem; font: 600 .9rem var(--font-ui); }
.sp-opts summary { cursor: pointer; padding: .4rem 0; min-height: 40px; display: flex; align-items: center; gap: .4rem; list-style: none; }
.sp-opts summary::before { content: '▸'; display: inline-block; transition: transform .2s; }
.sp-opts[open] summary::before { transform: rotate(90deg); }
.sp-opts summary::-webkit-details-marker { display: none; }
.sp-grid { display: grid; gap: .8rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: .4rem 0 .2rem; align-items: end; }
.sp-f { display: flex; flex-direction: column; gap: .25rem; font: 600 .85rem var(--font-ui); color: var(--indigo); }
.sp-f select, .sp-f input[type=range] { width: 100%; }
.sp-f input[type=range] { min-height: 44px; accent-color: var(--saffron-ink); }
.sp-status { margin: .3rem 0 0; min-height: 1.2em; }
.sent { border-radius: 6px; transition: background-color .2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sent.speaking { background: linear-gradient(180deg, #fff1a8, #ffe27a); color: #2a2118; box-shadow: 0 0 0 3px #ffe27a; }
@media (max-width: 760px) { .speak-bar.is-speaking, .speak-bar.is-paused { top: 6.6rem; } .music-ask { right: .75rem; left: .75rem; width: auto; } }

/* ---------- timeline icons ---------- */
.tl-legend { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tl-legend li { background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 999px; padding: .3rem .8rem; font: 600 .88rem var(--font-ui); box-shadow: var(--glass-shadow); }
.tl-em { font-size: 1.15em; display: inline-block; }
html[data-mode="kids"] .tl-card h3 { font-size: 1.5rem; }
html[data-mode="kids"] .tl-card p { font-size: 1.12rem; }
html[data-mode="kids"] .tl-card .tl-em { font-size: 1.5em; }

/* ---------- welcome guide ---------- */
.welcome { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgba(24,22,70,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; }
.welcome-card { position: relative; width: min(640px, 100%); background: rgba(255,255,255,.94); border: 2px solid #fff; border-radius: 28px; padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 30px 80px -20px rgba(30,20,100,.6); }
.welcome-x { position: absolute; right: .7rem; top: .6rem; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #efe9ff; color: var(--indigo); font: 700 1.7rem/1 var(--font-ui); cursor: pointer; }
.welcome-x:hover { background: #e0d6ff; }
.w-kicker { font: 800 1rem var(--font-ui); color: var(--pink); margin: 0 0 .1rem; }
.welcome-card h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-bottom: .3rem; }
.w-sub { color: var(--muted); font-size: 1.05rem; margin-bottom: 1rem; }
.w-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.w-steps a { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 18px; background: #f5f1ff; border: 1px solid #ddd2ff; text-decoration: none; color: var(--ink); min-height: 64px; }
.w-steps a:hover { background: #ece5ff; }
.w-steps .n { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--indigo); color: #fff; font: 800 1rem var(--font-ui); }
.w-steps .em { font-size: 1.9rem; flex: none; }
.w-steps strong { display: block; font: 800 1.15rem var(--font-display); color: var(--indigo); }
.w-steps span span { font-size: .95rem; line-height: 1.35; color: var(--muted); display: block; }
.w-tips { font: 500 .9rem/1.5 var(--font-ui); color: var(--muted); }
.w-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ---------- music invitation ---------- */
.music-ask { position: fixed; z-index: 120; right: 1rem; bottom: 1rem; width: min(380px, calc(100% - 2rem)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem 1.1rem; border-radius: 22px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border: 2px solid #fff; box-shadow: 0 18px 50px -12px rgba(40,30,120,.55); }
.music-ask p { margin: 0; font: 800 1.05rem var(--font-ui); color: var(--indigo); }
.music-ask .btn { min-height: 48px; padding: .5rem 1.1rem; }
.music-btn.ducked { box-shadow: 0 0 0 3px rgba(255,226,122,.8); }

/* ---------- sources page ---------- */
.src-legend { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.src-legend li { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.src-legend li > span:last-child { flex: 1 1 260px; }
.fc-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .7rem; }
.fc-row { background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 18px; padding: .8rem 1rem; box-shadow: var(--glass-shadow); }
.fc-row p { margin: .3rem 0 0; font-size: .98rem; }
.fc-top { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.fc-note { color: var(--indigo-soft); }
.fc-where { font: 600 .8rem var(--font-ui); color: var(--muted); }
.fc-group { border-radius: 18px; padding: .3rem 1rem; margin-bottom: .8rem; }
.fc-group summary { cursor: pointer; padding: .7rem 0; min-height: 48px; display: flex; align-items: center; gap: .6rem; font: 700 1.05rem var(--font-ui); }
.plain-list { padding-left: 1.2rem; }
.plain-list li { margin-bottom: .5rem; }

/* ---------- kids: relationships list ---------- */
.kid-rel .rel p { margin: .15rem 0 0; font-size: 1.02rem; }
html[data-mode="kids"] .lead { font-size: 1.25rem; line-height: 1.6; }
html[data-mode="kids"] .list-box.strength li { font-size: 1.1rem; }

/* ---------- playful motion (optional) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .floaters span { animation: bob 3.6s ease-in-out infinite; }
  @keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
  .ph-rays { animation: spin 60s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .char-card:hover .portrait svg.ph { animation: wiggle .6s ease; }
  @keyframes wiggle { 0%,100% { transform: rotate(0) scale(1.05); } 25% { transform: rotate(-1.5deg) scale(1.05); } 75% { transform: rotate(1.5deg) scale(1.05); } }
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite; pointer-events: none; }
  @keyframes sheen { 0%,60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
  .btn-xl { animation: pulse 2.8s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { box-shadow: 0 8px 22px rgba(240,138,34,.35), 0 0 0 0 rgba(255,178,74,.45); } 50% { box-shadow: 0 10px 28px rgba(240,138,34,.5), 0 0 0 10px rgba(255,178,74,0); } }
  .is-speaking .sp-wave i { animation: eq 0.9s ease-in-out infinite; }
  .sp-wave i:nth-child(2) { animation-delay: .15s !important; } .sp-wave i:nth-child(3) { animation-delay: .3s !important; } .sp-wave i:nth-child(4) { animation-delay: .45s !important; }
  @keyframes eq { 0%,100% { height: 6px; } 50% { height: 22px; } }
  .tl-card:hover .tl-em { animation: hop .5s ease; }
  @keyframes hop { 40% { transform: translateY(-6px) scale(1.2); } }
  .welcome-card { animation: pop .35s var(--ease); }
  @keyframes pop { from { transform: scale(.92) translateY(14px); opacity: 0; } }
  .music-ask { animation: rise .5s var(--ease); }
  @keyframes rise { from { transform: translateY(30px); opacity: 0; } }
  .sb-scene svg { animation: drift 24s ease-in-out infinite alternate; transform-origin: center; }
  @keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1%); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media print { .speak-bar, .welcome, .music-ask, .floaters { display: none !important; } }

/* Music menu: 8 tracks make it tall. It scrolls inside itself and the Play / volume row stays visible at the bottom. */
.music-pop { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.music-pop .music-row { position: sticky; bottom: -1.1rem; margin: 0 -1.2rem -1.1rem; padding: .7rem 1.2rem; background: var(--cream); border-top: 1px solid var(--parchment-2); border-radius: 0 0 16px 16px; z-index: 2; }
.music-pop .music-status { margin-top: .8rem; }
@media (max-width: 520px) { .music-pop { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); } }

/* Read-to-me help (no sound / no voice) */
.sp-help { margin: .7rem 0 .2rem; padding: .8rem 1rem; border-radius: 14px; background: #fff3d6; color: #2a2118; border: 2px solid #e8892b; font: 500 .95rem var(--font-ui); }
.sp-help[hidden] { display: none; }
.sp-help-msg { margin: 0 0 .6rem; }
.sp-help-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.sp-help-btns .btn, .sp-testrow .btn { min-height: 48px; }
.sp-testrow { align-items: flex-start; }