/* V1: a quiet, illustrated star atlas. Shared components, three layout sizes. */
:root {
  --ink: #203f3b;
  --muted: #586b61;
  --paper: #f7f5ed;
  --card: #fffef9;
  --line: #e3e5d8;
  --green: #275d4f;
  --gold: #e8ba5b;
  --ok: #275d4f;
  --shadow: 0 8px 24px #203f3b08;
  --radius: 24px;
}
body { background: var(--paper); color: var(--ink); font-size: 17px; }
body::before { display: none; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: var(--ink); }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #aa771c; outline-offset: 4px;
}
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip-link { position: fixed; top: -90px; left: 16px; background: white; padding: 12px; z-index: 100; color: var(--ink); }
.skip-link:focus { top: 12px; }
.app { max-width: 1240px; padding: 24px 32px 64px; }
.top { display: flex; gap: 20px; margin-bottom: 28px; flex-wrap: nowrap; }
.brand { gap: 10px; flex: 0 0 auto; }
.mark { width: 46px; height: 46px; flex-basis: 46px; border-radius: 16px; background: var(--green); color: #f5d98b; box-shadow: none; font-size: 1.5rem; }
.titles h1 { font-size: 1.3rem; }
.brand p { font-size: .75rem; margin-top: 3px; font-weight: 600; }
.child-nav { gap: 4px; margin-left: auto; flex-wrap: nowrap; }
.nav button, .nav a, .ghost, .primary, .ok, a.ghost, a.primary { box-shadow: none; border-radius: 14px; font-size: .92rem; transition: background .15s, transform .15s; min-height: 48px; }
.nav button { padding: 10px 12px; background: transparent; font-weight: 800; white-space: nowrap; gap: 7px; }
.nav button.active { background: #e5eddc; color: #234f40; box-shadow: none; }
.nav button:hover, .ghost:hover { transform: none; background: #e9eddf; }
.parent-entry { padding: 8px 12px; border: 1px solid var(--line); background: transparent; font-size: .8rem; white-space: nowrap; }
.parent-mode .parent-entry { display: none; }
.primary, .ok, a.primary, .nav a.primary { background: var(--green); color: #fffef6; box-shadow: 0 3px 0 #183e33; }
.primary:hover, .ok:hover { background: #1e4c40; }
.ghost { background: #f0f1e8; color: var(--ink); }
.primary:disabled, .ok:disabled { background: #e0e5d9; color: #566351; box-shadow: none; }
.panel { border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); padding: 28px; }
.eyebrow { color: #687956; font-weight: 800; font-size: .67rem; letter-spacing: .16em; margin: 0 0 12px; }
.hero { margin-bottom: 32px; }
.hello { display: grid; grid-template-columns: 1.06fr 1fr; padding: 0; overflow: hidden; background: #fffef8; color: var(--ink); }
.hello::after { display: none; }
.hero-copy { padding: 32px; min-width: 0; }
.hello h2 { font-size: clamp(1.9rem, 3vw, 2.65rem); margin: 0 0 6px; }
.hello #helloSub { color: var(--muted); font-size: .95rem; font-weight: 600; }
.hello .eyebrow { margin-bottom: 16px; font-size: .67rem; }
.hero-art { position: relative; min-height: 400px; overflow: hidden; background: #214644; }
.hero-art img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.art-caption { position: absolute; bottom: 20px; left: 24px; right: 24px; border-radius: 12px; color: #fff9de; background: #183c38e8; padding: 12px; font-size: .8rem; text-align: center; font-weight: 700; }
.today-card { display: block; margin-top: 22px; border: 0; border-radius: 0; padding: 0; color: var(--ink); background: transparent; box-shadow: none; }
.today-card small { color: #6a765d; font-size: .7rem; letter-spacing: .1em; margin-bottom: 7px; }
.today-card strong { font-size: 1.45rem; font-weight: 500; line-height: 1.25; }
.today-card .today-mission { color: var(--muted); font-size: .85rem; margin: 8px 0 0; line-height: 1.5; }
.today-card .today-reward { font-size: .78rem; margin-top: 8px; color: #5e704f; }
.today-go { display: flex; justify-content: center; align-items: center; background: var(--green); color: white; border-radius: 14px; padding: 14px 20px; margin-top: 18px; min-height: 52px; box-shadow: 0 3px 0 #173f33; font-size: 1rem; }
.today-card:hover .today-go { background: #1b4a3d; }
.star-row { margin-top: 16px; gap: 12px; }
.progress { background: #e8e9dc; height: 7px; box-shadow: none; }
.progress > i { background: #bd8b31; min-width: 0; }
.star-count { font-size: .85rem; color: #556749; }
.hello .week-summary { font-size: .75rem; font-weight: 600; color: var(--muted); margin-top: 6px; }
.completion-ring { background: transparent; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .78rem; }
.completion-ring .ring-title { display: none; }
.ring-row { display: flex; flex-direction: row-reverse; gap: 6px; margin: 0; align-items: center; color: #5b6d5b; }
.ring-dot { color: #b4bfa7; }
.ring-dot.on { color: #2b654e; }
.completion-ring .ring-done { width: 100%; margin: 0; font-size: .74rem; }
.mystery-banner { display: inline-flex; align-items: center; border: 1px solid #e9d7a4; border-radius: 12px; background: #fff4d8; color: #725014; font-size: .8rem; line-height: 1.3; padding: 10px 12px; min-height: 44px; margin: 12px 0 0 !important; text-align: left; cursor: pointer; }
@keyframes mystery-discovered-twinkle {
  0%, 100% { box-shadow: 0 0 0 0 #e9c86a00; filter: brightness(1); }
  50% { box-shadow: 0 0 0 3px #e9c86a55; filter: brightness(1.04); }
}
.mystery-banner--discovered { animation: mystery-discovered-twinkle 2.2s ease-in-out 4; }
@media (prefers-reduced-motion: reduce) {
  .mystery-banner--discovered { animation: none; }
}
body.motion-paused .mystery-banner--discovered { animation: none; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 0 18px; }
.section-heading h2 { font-size: 1.65rem; margin: 0; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-note { color: var(--muted); font-size: .8rem; }
.journey-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.journey-week[open] { grid-column: 1 / -1; }
.journey-week.week-current { order: -1; }
.journey-week:not([open]) .week-head p, .journey-week:not([open]) .week-progress { display: none; }
.journey-week { padding: 20px 24px; box-shadow: none; border: 1px solid var(--line); border-radius: 18px; }
.journey-week.week-current { background: #eef1e3; border: 1px solid #ced8b7; }
.journey-week.week-done { background: #faf6e6; border-color: #e6d8ae; }
.journey-week summary { cursor: pointer; min-height: 48px; }
.journey-week:not([open]) > summary .week-head { margin: 0; }
.journey-week summary::marker { color: #6e805d; }
.journey-week:not([open]) .week-head h3 { font-size: 1rem; }
.week-head { gap: 12px; margin-bottom: 8px; }
.week-head h3 { font-size: 1.15rem; font-weight: 500; }
.week-head p { font-size: .84rem; font-weight: 600; }
.week-moon { color: #647d55; font-size: 1.5rem; }
.week-progress { background: #dde3cf; height: 5px; margin-top: 10px; }
.week-progress > i { background: #a17a2d; }
.constellation { gap: 4px; padding: 12px 0 4px; }
.constellation-star { min-width: 56px; min-height: 58px; box-shadow: none; background: #fffef9; border: 1px solid #dbe0cc; border-radius: 16px; font-weight: 700; }
.constellation-star.current { color: #fff; background: var(--green); box-shadow: 0 3px 0 #163f31; border-color: var(--green); }
.constellation-star.done { color: #805e1a; background: #fff2c8; border-color: #e6cc81; }
.constellation-star.done .node-icon { color: #87621a; }
.constellation-star.locked { opacity: 1; background: #f3f3e9; color: #7b8470; }
.constellation-line { background: #d7dec4; width: 14px; }
.quran-journey-node { display: none; }
.discovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.discovery-card { display: grid; grid-template-columns: 38% 1fr; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; text-decoration: none; overflow: hidden; }
.discovery-card img { width: 100%; height: 100%; object-fit: cover; }
.discovery-card > div { padding: 22px; }
.discovery-card small { font-size: .59rem; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
.discovery-card h3 { margin: 8px 0; font-size: 1.35rem; }
.discovery-card p { font-size: .85rem; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.discovery-card span { font-size: .85rem; font-weight: 800; }
.discovery-card:hover { border-color: #aab894; }
.page-banner { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin: -12px -12px 22px; padding: 16px; background: #f4f3e8; border-radius: 18px; }
.page-banner h2 { font-size: 2rem; }
.page-banner img { width: 240px; height: 155px; object-fit: cover; border-radius: 16px; }
.page-banner .footer-note { font-size: .95rem; font-weight: 600; max-width: 420px; }
.chest-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px; }
.memory-book-preview { grid-column: 1 / -1; padding: 22px; border: 1px solid #e1dfc6; background: #f7f3df; margin: 0 0 10px; }
.memory-book-preview h3 { font-size: 1.3rem; }
.memory-book-preview p { font-size: .9rem; }
.chest-card { border: 1px solid var(--line); padding: 20px 16px; background: #fffdf3; border-radius: 18px; box-shadow: none; min-height: 185px; }
.chest-card strong { display: block; font-size: 1.05rem; margin: 8px 0 4px; }
.chest-card small { background: #eef1e5; display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: .65rem; color: #5d7058; }
.chest-card p { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.chest-card.locked { opacity: 1; background: #f4f4ec; border-style: dashed; color: #66755f; }
.chest-card.locked .chest-icon { opacity: .65; }
.play-home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.play-mode { background: #eef1e2; color: var(--ink); box-shadow: none; border: 1px solid #d6dfc4; min-height: 108px; border-radius: 18px; padding: 22px; line-height: 1.5; }
.play-mode:first-child { background: #fff1cb; border-color: #e7d296; }
.play-weeks { grid-column: 1 / -1; }
.play-week { border: 1px solid var(--line); background: #fffef9; }
.play-box { max-width: 760px; margin: 24px auto 0; }
.game-opt { border: 1px solid #dce2d1; background: #fffef9; box-shadow: 0 2px 0 #e2e7d5; border-radius: 14px; padding: 16px 18px; min-height: 54px; font-size: 1rem; line-height: 1.45; }
.game-opt:hover:not(:disabled) { background: #f0f4e5; border-color: #9eb486; }
.game-opt.selected, .game-opt.matched { background: #e4efda; border: 2px solid #527843; box-shadow: none; }
.game-opt:disabled { opacity: .78; }
.game-q { font-size: 1.2rem; line-height: 1.5; }
.game-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.game-feedback { font-size: 1rem; line-height: 1.6; }
.game-feedback:not(:empty) { background: #f1f4e8; border-radius: 14px; padding: 16px; }
.game-feedback .good { color: #28583b; }
.game-feedback .soft { color: #586445; }
.game-error { color: #923d27; }
.game-instruction { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.lesson-resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f1f4e8; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-size: .85rem; }
.lesson-resume p { margin: 0; }
details.journey-week summary.week-head { display: flex; list-style: none; align-items: center; margin: 0; }
details.journey-week summary.week-head::-webkit-details-marker { display: none; }
details.journey-week summary.week-head::after { content: '+'; margin-left: auto; font-size: 1.5rem; color: #60734f; }
details.journey-week[open] summary.week-head::after { content: '−'; }
.hidden details.journey-week summary.week-head::after { content: none; }
.game-continue, .game-retry { margin-top: 12px; }
.game-reset, .game-undo { font-size: .85rem; }
.game-hint { background: #fff4d9; }
.order-chip { background: #e9efe0; }
.lesson, #quranPlay { max-width: 940px; margin: 0 auto; }
.lesson-page { padding: 0; }
.lesson-head h2 { font-weight: 500; line-height: 1.2; }
.step-bar { border-bottom: 1px solid var(--line); padding: 16px 0; margin: 10px 0 20px; gap: 8px; }
.step-dot { background: #eaecdf; color: #596c50; }
.step-dot.active { background: var(--green); color: white; }
.step-dot.done { background: #e5edda; color: #3f6338; }
.step-connector { background: #d9dfca; }
.step-title { font-weight: 500; font-size: 1.4rem; }
.story { background: transparent; border-radius: 0; padding: 4px 0; margin: 12px 0; max-width: 66ch; font-size: 1.2rem; line-height: 1.85; color: #30473d; }
.story p { margin-bottom: 20px; }
.listen-btn { margin: 0 0 12px; }
.step-nav { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; align-items: center; }
.memo-card { background: #edf2e5; }
.arabic { background: #f8f8ee; color: #254d40; box-shadow: none; border: 1px solid #dbe4cf; }
.promise-card { background: #f8efcf; }
.mission-card { background: #f1f3e7; }
.mission-step { box-shadow: none; border: 1px solid #d8dfc9; min-height: 52px; }
.teach-back-card { background: #edf2e4; }
.teach-back-timer { color: #3f694d; }
.chip.green { background: #e4edda; color: #3a6037; }
.chip.rose { background: #f0eddf; color: #6c6450; }
.quran-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.quran-region-label { grid-column: 1 / -1; text-align: left; color: #3d654a; font-size: 1.2rem; margin: 18px 0 4px; font-weight: 500; }
.quran-connector { display: none; }
.quran-node { width: 100%; min-height: 84px; border: 1px solid var(--line); background: #f8f8ef; border-radius: 16px; box-shadow: none; padding: 16px; }
.quran-node.open { background: #fff0c4; border-color: #e2c578; box-shadow: none; }
.quran-node.done { background: #e7efdd; border-color: #c4d5b6; }
.quran-node.locked { background: #f4f4ec; opacity: 1; color: #6b7862; border-style: dashed; }
.qnode-label { font-size: .92rem; line-height: 1.4; }
#quranBox { max-width: 720px; margin: 24px auto 0; }
.quran-next { margin-top: 16px; }
.quran-ref { background: #f3f4e9; padding: 20px; border-radius: 16px; line-height: 1.8; }
.celebrate { background: #18382fc9; overflow-y: auto; padding: 20px; }
.celebrate .pop { border-radius: 24px; background: #fffef8; box-shadow: 0 12px 50px #0c241c40; max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid #e9dfbd; }
.celebrate .pop h2 { font-size: 1.8rem; }
.celebrate .pop p { line-height: 1.6; }
.celebrate .bigstar { color: #b17c17; }
.card-toast { background: #fff8e4; border: 1px solid #e1d197; box-shadow: var(--shadow); max-width: calc(100% - 32px); width: max-content; z-index: 60; }
.gentle-hint { box-shadow: var(--shadow); border: 1px solid #dce1d0; }
.app-status { position: sticky; top: 8px; z-index: 30; margin: 0 0 16px; padding: 12px 18px; border-radius: 14px; background: #fff3d4; border: 1px solid #dccb94; font-size: .9rem; }
.auth-wrap { max-width: 480px; margin-top: 28px; }
.auth-hero .mark { margin-bottom: 16px; }
.auth-art { width: 100%; height: 160px; object-fit: cover; border-radius: 22px; margin-bottom: 20px; }
.form input, .form select { border: 1px solid #c7d2ba; border-radius: 12px; min-height: 48px; }
.form-err, .err { background: #fff0e8; color: #963a26; }

@media (min-width: 701px) and (max-width: 1100px) {
  .app { padding: 20px 24px 48px; }
  .top { flex-wrap: wrap; gap: 12px; }
  .brand { width: auto; }
  .parent-entry { margin-left: auto; }
  .child-nav { order: 3; margin: 0; width: 100%; justify-content: center; background: #eeefe5; border-radius: 16px; padding: 4px; }
  .child-nav button { flex: 1; }
  .hero-copy { padding: 26px; }
  .hello { grid-template-columns: 1.25fr 1fr; }
  .hero-art { min-height: 420px; }
  .art-caption { left: 12px; right: 12px; font-size: .7rem; }
  .discovery-card { grid-template-columns: 1fr; }
  .discovery-card img { height: 155px; }
  .quran-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play-home { gap: 10px; }
  .play-mode { padding: 16px; }
}
@media (max-width: 700px) {
  .app { padding: 16px 16px calc(100px + env(safe-area-inset-bottom)); }
  .top { flex-wrap: nowrap; margin-bottom: 18px; gap: 8px; }
  .brand { width: auto; gap: 8px; min-width: 0; }
  .mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
  .titles h1 { font-size: 1.1rem; }
  .brand p { font-size: .64rem; }
  .parent-entry { font-size: .7rem; padding: 8px; margin-left: auto; min-height: 44px; border: 0; }
  .child-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; margin: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #dce3cf; background: #fffef9fa; z-index: 35; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; backdrop-filter: blur(16px); }
  .child-nav button { flex-direction: column; min-width: 0; min-height: 58px; padding: 6px 2px; gap: 4px; font-size: .68rem; border-radius: 12px; }
  .nav-icon { width: 23px; height: 23px; }
  .nav-long { display: none; }
  .parent-nav { width: 100%; flex-wrap: wrap; }
  .parent-mode .top { flex-wrap: wrap; }
  .panel { padding: 20px; border-radius: 20px; }
  .hello { display: flex; flex-direction: column; padding: 0; }
  .hero-art { order: -1; min-height: 136px; height: 136px; }
  .hero-art img { object-position: 50% 43%; }
  .art-caption { display: none; }
  .hero-copy { padding: 22px; }
  .hello .eyebrow { font-size: .57rem; margin-bottom: 8px; }
  .hello h2 { font-size: 1.8rem; }
  .hello #helloSub { font-size: .85rem; }
  .today-card { margin-top: 18px; }
  .today-card strong { font-size: 1.3rem; }
  .today-card small { font-size: .64rem; }
  .today-card .today-mission { font-size: .8rem; }
  .today-card .today-reward { font-size: .72rem; }
  .today-go { margin-top: 14px; min-height: 50px; font-size: .95rem; }
  .completion-ring { margin-top: 18px; font-size: .72rem; gap: 8px 14px; }
  .hero { margin-bottom: 26px; }
  .section-note { display: none; }
  .section-heading h2 { font-size: 1.45rem; }
  .journey-week { padding: 16px; }
  .journey-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-week:not([open]) { padding: 12px; }
  .journey-week:not([open]) .week-moon { display: none; }
  .journey-week:not([open]) .week-head h3 { font-size: .87rem; }
  .journey-week:not([open]) .week-head small { font-size: .7rem; }
  .constellation { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .constellation-star { min-width: 48px; min-height: 54px; padding: 8px 6px; }
  .constellation-line { width: 8px; }
  .week-head p { font-size: .78rem; }
  .discovery-grid { grid-template-columns: 1fr; gap: 12px; }
  .discovery-card { grid-template-columns: 36% 1fr; }
  .discovery-card > div { padding: 18px; }
  .discovery-card h3 { font-size: 1.2rem; }
  .discovery-card p { font-size: .8rem; }
  .page-banner { margin: -4px -4px 18px; padding: 12px; gap: 8px; }
  .page-banner img { width: 96px; height: 116px; }
  .page-banner h2 { font-size: 1.55rem; }
  .page-banner .eyebrow { font-size: .54rem; letter-spacing: .08em; }
  .page-banner .footer-note { font-size: .8rem; }
  .chest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .chest-card { padding: 14px 10px; min-height: 170px; }
  .chest-card strong { font-size: .95rem; }
  .chest-card p { font-size: .75rem; }
  .memory-book-preview { padding: 16px; }
  .play-home { grid-template-columns: 1fr; gap: 12px; }
  .play-mode { min-height: 76px; padding: 18px; }
  .play-week { margin: 4px 4px 4px 0; padding: 10px 12px; }
  .lesson-head h2 { font-size: 1.55rem !important; }
  .story { font-size: 1.12rem; line-height: 1.8; }
  .step-nav { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom)); background: #fffef9f5; padding: 12px 0 0; backdrop-filter: blur(12px); z-index: 5; }
  .step-dot { width: 27px; height: 27px; font-size: .75rem; }
  .step-bar { gap: 4px; }
  .step-count { font-size: .8rem; }
  .game-opt { font-size: .95rem; padding: 14px; }
  .quran-path { grid-template-columns: 1fr; gap: 10px; }
  .quran-node { min-height: 72px; }
  .quran-region-label { font-size: 1.08rem; }
  .gentle-hint { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .celebrate { padding: 16px; }
  .celebrate .pop { max-height: calc(100dvh - 32px); }
  .app-status { top: 4px; }
}
@media (max-width: 360px) {
  .app { padding-left: 12px; padding-right: 12px; }
  .titles h1 { font-size: .97rem; }
  .parent-entry { font-size: .63rem; padding: 4px; }
  .hero-copy { padding: 18px; }
  .hero-art { height: 112px; min-height: 112px; }
  .page-banner img { width: 72px; height: 100px; }
  .panel { padding: 16px; }
  .hello { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .child-nav, .parent-entry, .discovery-grid, .hero-art, .skip-link, .app-status { display: none !important; } body { background: white; } }