/* ============================================================
   Story Friends — styles
   Goals: warm, friendly, high-contrast, big touch targets, one
   task per screen, predictable layout. Designed for a young
   learner with an intellectual disability, on a phone or tablet.

   Palette is drawn from the app icon: a warm orange world with
   teal / green / gold friends. Colors live in CSS variables; the
   handful of per-component tints reference them so the theme stays
   consistent. Animations are gentle and can be turned off via the
   prefers-reduced-motion block at the bottom.
   ============================================================ */

:root {
  --bg:        #fff6ec;     /* warm cream */
  --card:      #ffffff;
  --ink:       #2a3149;     /* deep navy from the icon outlines */
  --ink-soft:  #7c6a5b;     /* warm taupe for secondary text */
  --brand:     #ef7216;     /* the icon's signature orange */
  --brand-dk:  #b9480a;     /* deeper orange-brown for text on tints */
  --good:      #2fa86a;     /* friendly green (the hat) */
  --good-dk:   #1f8a52;
  --warn:      #f2a216;     /* golden amber (the star / pages) */
  --bad:       #e5503a;     /* warm red */
  --accent:    #2da7bd;     /* teal (the bird), for a complementary pop */
  --tint:      #ffe9d5;     /* light peach — soft brand background */
  --tint-2:    #ffdcc0;     /* deeper peach — tracks & borders */
  --line:      #f3e7da;     /* hairline divider */
  --evidence:  #ffe9a8;     /* highlight color for the "proof" sentence */
  --shadow:    0 6px 18px rgba(120, 60, 20, 0.16);
  --radius:    22px;
  --tap:       64px;        /* minimum touch target */
  --maxw:      640px;
  font-size: 18px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* App-like feel: no long-press text selection / callout menu on buttons or text. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* A soft warm wash behind everything, echoing the icon's glow. */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #ffe9d2 0%, rgba(255,233,210,0) 60%),
    var(--bg);
  background-attachment: fixed;
}

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);
  display: flex;
  flex-direction: column;
}

/* ---------- Generic building blocks ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.stack > * + * { margin-top: 16px; }

.grow { flex: 1 1 auto; }

.center { text-align: center; }

h1 { font-size: 1.7rem; margin: 0 0 4px; }
h2 { font-size: 1.3rem; margin: 0 0 8px; }
p  { margin: 0 0 10px; }

.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f3801c 0%, #e15c0c 100%);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .08s ease, filter .15s ease;
  text-align: center;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.secondary { background: var(--tint); color: var(--brand-dk); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink-soft); box-shadow: none; min-height: 48px; font-size: 1rem; }
.btn.good { background: linear-gradient(180deg, #36b877 0%, #1f9259 100%); }
.btn.small-btn { width: auto; min-height: 48px; padding: 10px 18px; font-size: 1rem; }

.btn-row { display: flex; gap: 12px; }
.btn-row .btn { flex: 1; }

/* The main Play button gently glows to invite a tap (paused while pressed). */
.btn.good { animation: invite 2.6s ease-in-out infinite; }
.btn.good:active { animation: none; transform: scale(0.97); }

/* ---------- Top bar (progress + listen) ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.progressbar {
  flex: 1;
  height: 16px;
  background: var(--tint-2);
  border-radius: 999px;
  overflow: hidden;
}
.progressbar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #ffa64d);
  border-radius: 999px;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.iconbtn {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--tint);
  color: var(--brand-dk);
  font-size: 1.4rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .15s ease;
}
.iconbtn:active { transform: scale(0.92); }
.iconbtn.speaking { background: var(--accent); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }

/* ---------- Passage ---------- */

.passage {
  font-size: 1.35rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.passage .sent {
  border-radius: 8px;
  padding: 1px 3px;
  transition: background .25s ease;
}
.passage .sent.evidence { background: var(--evidence); box-shadow: 0 0 0 3px var(--evidence); animation: glow-evidence .6s ease; }
.passage .sent.reading  { background: #fff1dc; }

.passage-title { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 6px; font-weight: 700; }

/* ---------- Question + choices ---------- */

.qprompt { font-size: 1.35rem; font-weight: 700; margin: 4px 0 6px; }
.skill-chip {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand-dk);
  background: var(--tint);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 6px;
}

.choices { display: grid; gap: 14px; margin-top: 8px; }
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--tap);
  width: 100%;
  padding: 16px 18px;
  border: 3px solid var(--tint-2);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  /* each choice rises in, staggered by position (see nth-child below) */
  animation: rise .34s both;
}
.choice:hover { border-color: var(--brand); box-shadow: 0 4px 12px rgba(239,114,22,.16); }
.choice:active { transform: scale(0.98); }
.choices .choice:nth-child(1) { animation-delay: .04s; }
.choices .choice:nth-child(2) { animation-delay: .12s; }
.choices .choice:nth-child(3) { animation-delay: .20s; }
.choices .choice:nth-child(4) { animation-delay: .28s; }
.choice .emoji { font-size: 1.7rem; flex: none; }
/* Bundled Twemoji SVGs (see js/emoji.js). Sized in em so each glyph scales
   with whatever font-size its surrounding text uses. */
img.twemoji {
  height: 1em;
  width: 1em;
  margin: 0 .06em;
  vertical-align: -0.13em;
  display: inline-block;
}
/* Font-independent color dot for color choices (see choiceGlyph in app.js). */
.choice .emoji.swatch {
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .18);
  box-sizing: border-box;
}
.choice.correct { border-color: var(--good); background: #e9f9f1; animation: correct-pop .55s ease; }
.choice.wrong   { border-color: var(--bad);  background: #fdeae4; animation: shake .4s; }
.choice:disabled { cursor: default; }

/* ---------- Feedback banner ---------- */

.feedback {
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: pop-in .4s cubic-bezier(.2,1.3,.4,1) both;
}
.feedback.good  { background: #e9f9f1; color: var(--good-dk); }
.feedback.retry { background: #fff4e0; color: #b56a00; }
.feedback.show  { background: #f5ece2; color: var(--ink); }
.feedback .big { font-size: 1.6rem; }
.feedback.good .big { animation: cheer .6s ease; display: inline-block; }
/* "Continue →" appears under the feedback to advance; auto-advances after the
   spoken praise finishes, but this lets an impatient reader skip ahead now. */
.continue-btn { animation: pop-in .26s cubic-bezier(.2, 1.3, .4, 1) both; }

/* ---------- Home ---------- */

.hero { text-align: center; padding: 18px 0 6px; }
.hero .logo { font-size: 4rem; line-height: 1; display: inline-block; animation: bob 3.2s ease-in-out infinite; }
.stat-row { display: flex; gap: 12px; }
.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 12px;
  text-align: center;
}
.stat .num { font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: var(--brand-dk); font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: .85rem; color: var(--ink-soft); }

.sticker-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sticker {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  background: #fff7e6;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.sticker:not(.locked):hover { transform: translateY(-3px) rotate(-4deg); }
.sticker.locked { background: var(--line); filter: grayscale(1); opacity: .45; font-size: 1.4rem; box-shadow: none; }

/* ---------- Reward / summary ---------- */

.reward-stars { font-size: 3rem; letter-spacing: 6px; animation: twinkle 1.4s ease-in-out infinite; }
.confetti { font-size: 3.4rem; display: inline-block; animation: party .7s cubic-bezier(.2,1.4,.4,1); }

/* ---------- Dashboard ---------- */

.dash-section { margin-top: 18px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.bar-row .name { flex: 0 0 38%; font-weight: 600; font-size: .95rem; }
.bar-track { flex: 1; height: 14px; background: var(--tint-2); border-radius: 999px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 999px; background: var(--good); transform-origin: left center; animation: grow-bar .8s cubic-bezier(.2,.8,.2,1) both; }
.bar-fill.low { background: var(--bad); }
.bar-fill.mid { background: var(--warn); }
.bar-pct { flex: 0 0 46px; text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--ink-soft); }

.spark { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.spark .b { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 3px; }

/* ---------- Daily activity calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-month { flex: 1; text-align: center; font-weight: 800; font-size: 1.05rem; }
.cal-nav {
  flex: none; width: 44px; height: 44px;
  border: none; border-radius: 12px;
  background: var(--tint); color: var(--brand-dk);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: transform .12s ease;
}
.cal-nav:active { transform: scale(0.92); }
.cal-nav.disabled { opacity: .3; pointer-events: none; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-wd { text-align: center; font-size: .7rem; font-weight: 700; color: var(--ink-soft); padding-bottom: 2px; }
.cal-cell { position: relative; min-height: 52px; border-radius: 12px; background: #fbeee2; padding: 3px; }
.cal-cell.empty { background: transparent; }
.cal-cell.active { cursor: pointer; }
.cal-cell.today { box-shadow: 0 0 0 2px var(--brand); }
.cal-day  { position: absolute; top: 3px; left: 6px; font-size: .72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cal-sess { position: absolute; top: 3px; right: 5px; font-size: .64rem; font-weight: 800; color: var(--brand-dk); }
.cal-min  { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: .8rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* heat shades: light -> dark = more time played */
.cal-cell.h1 { background: #ffe2c4; }
.cal-cell.h2 { background: #ffc78f; }
.cal-cell.h3 { background: #f4944a; }
.cal-cell.h4 { background: #ef7216; }
.cal-cell.h3 .cal-day, .cal-cell.h3 .cal-sess, .cal-cell.h3 .cal-min,
.cal-cell.h4 .cal-day, .cal-cell.h4 .cal-sess, .cal-cell.h4 .cal-min { color: #fff; }

.cal-legend { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }
.cal-key { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-key.h1 { background: #ffe2c4; }
.cal-key.h2 { background: #ffc78f; }
.cal-key.h3 { background: #f4944a; }
.cal-key.h4 { background: #ef7216; }
.cal-detail { min-height: 1.2em; margin-top: 6px; }

.watch-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.watch-item .tag { font-size: 1.4rem; }

table.log { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.log th, table.log td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }

/* simple toggle */
.toggle { position: relative; width: 58px; height: 32px; flex: none; }
.toggle input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .track { position: absolute; inset: 0; background: #e8d8c8; border-radius: 999px; transition: background .15s; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background: #fff; border-radius: 50%; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle input:checked ~ .track { background: var(--good); }
.toggle input:checked ~ .knob { left: 29px; }

.range { width: 100%; accent-color: var(--brand); }

/* ---------- Caregiver gate (PIN) ---------- */
.pin-dots { display: flex; gap: 18px; justify-content: center; margin: 14px 0 4px; }
.pin-dot { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--brand); background: transparent; transition: background .12s ease, transform .12s ease; }
.pin-dot.filled { background: var(--brand); transform: scale(1.12); }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.pad-key {
  min-height: var(--tap);
  font-size: 1.6rem; font-weight: 700;
  border: none; border-radius: 18px;
  background: #fbe6d6; color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s ease;
}
.pad-key:active { transform: scale(0.95); }
.pad-key.blank { background: transparent; pointer-events: none; }
.pad-key.enter { background: var(--good); color: #fff; }
.pad-key.back { background: var(--tint); color: var(--brand-dk); }

.pin-field {
  font-size: 1.9rem; font-weight: 800; letter-spacing: 4px;
  min-height: 48px; display: flex; align-items: center; justify-content: center;
}

.shake { animation: shake .4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* ---------- misc ---------- */
.fade-in { animation: enter .32s cubic-bezier(.2,.9,.3,1.1); }

.spacer { height: 18px; }

/* ============================================================
   Animations — gentle, playful, never distracting. All are
   disabled by the prefers-reduced-motion block below.
   ============================================================ */

/* Screen entrance: a soft rise + settle. */
@keyframes enter {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
/* Choices fly up one after another. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* A pleased little bounce when an answer is right. */
@keyframes correct-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); }
  60%  { transform: scale(.99); }
  100% { transform: scale(1); }
}
/* Banner / sticker pop-in with a touch of overshoot. */
@keyframes pop-in {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
/* The 🎉 / 👍 in the good banner gives a happy wiggle. */
@keyframes cheer {
  0%   { transform: scale(.4) rotate(-12deg); }
  60%  { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
/* Confetti bursts in and spins a little. */
@keyframes party {
  0%   { transform: scale(.2) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
/* Reward stars twinkle. */
@keyframes twinkle {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50%     { transform: scale(1.08); filter: brightness(1.25); }
}
/* Play button glows to invite a tap. */
@keyframes invite {
  0%,100% { box-shadow: 0 6px 18px rgba(120,60,20,.16); transform: scale(1); }
  50%     { box-shadow: 0 8px 26px rgba(47,168,106,.45); transform: scale(1.015); }
}
/* The home logo gently bobs like it's floating. */
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-7px) rotate(2deg); }
}
/* Dashboard skill bars grow out from the left. */
@keyframes grow-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* The evidence sentence flashes once when highlighted. */
@keyframes glow-evidence {
  0%   { background: #fff6d6; }
  100% { background: var(--evidence); }
}
/* "Put the story away": the passage slides up and fades when she's done reading. */
.story-away { animation: story-away .28s ease forwards; }
@keyframes story-away {
  to { opacity: 0; transform: translateY(-16px) scale(.97); }
}

/* Friendly one-line instruction on the read / look-back screens. */
.read-hint { font-size: .95rem; margin: 2px 0 2px; }

/* ---------- Modal dialogs (themed confirm / alert) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(40, 22, 4, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modal-fade .15s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: #fff; border-radius: 22px; padding: 22px;
  width: 100%; max-width: 360px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  animation: pop-in .26s cubic-bezier(.2, 1.3, .4, 1);
}
.modal-card h2 { margin: 0; }
.modal-card p { margin: 0; line-height: 1.45; }
.modal-input {
  width: 100%; box-sizing: border-box; padding: 12px; font-size: 1.1rem;
  border-radius: 14px; border: 2px solid var(--tint-2);
}
.modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.modal-actions .btn { flex: 1; }
/* 3+ choices (e.g. the import name-clash prompt) stack full-width. */
.modal-actions.vertical { flex-direction: column; }
.modal-actions.vertical .btn { flex: none; }
.btn.danger { background: var(--bad); color: #fff; }

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

@media (min-width: 480px) {
  :root { font-size: 19px; }
}

/* DEV build marker — a small fixed badge in the top-left, shown only when
   CG.config.CHANNEL === 'dev' (added to <body> by app.js#markDevBuild). Sits
   above everything, ignores taps, and clears the notch/status bar. */
.dev-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 6px);
  left: calc(env(safe-area-inset-left) + 6px);
  z-index: 10000;
  padding: 3px 8px;
  border-radius: 7px;
  background: #d32f2f;
  color: #fff;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  opacity: 0.92;
  pointer-events: none;   /* never intercept a child's tap */
  user-select: none;
}