/* Star Circle — 'Luna's Night Voyage'
   passive/storybook science app for ~4–5 year olds. No quizzes/scoring of any kind (per Ryan's rule).
*/
:root {
  --bg-gradient-start: #0a0a1a;
  --bg-gradient-mid: #14143a;
  --accent-yellow: #fff7d0;
  --accent-pink: #ffb6c1;
  --sub: #b8c0ff;
  --text-body: 1.15em;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: linear-gradient(160deg, var(--bg-gradient-start), var(--bg-gradient-mid)); color: white; font-family: 'Fredoka','Quicksand',sans-serif; overflow-x: hidden; min-height: 100vh; touch-action: pan-x pan-y; user-select: none;
}

/* Top bar */
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 14px 2px; gap:10px;}
.top-bar h1 { font-size: clamp(1rem, 3.2vw, 1.4em); margin: 0; line-height: 1.2; text-align:left;}
.top-bar small { display:block;}
.nav-tabs { display:flex; gap:8px; align-items:center;}
.tab-emoji { margin-right:6px; font-size:1.2em;}
.tab-text { font-size:var(--text-body);}
button.tab { background:rgba(255,255,255,.1); border:none; color: var(--sub); padding:6px 10px; border-radius:999px; cursor:pointer; font-family:'Fredoka','Quicksand',sans-serif;font-size:.9em;display:inline-flex;align-items:center;}
button.tab.active { background: white; color:#1a1a3a;}
.sound-toggle { background: rgba(255,255,255,.15); border:none; color:white; width:40px; height:40px; border-radius:50%; font-size:1.3em; cursor:pointer;}
.home-btn-icon { font-size:1.6em; text-decoration:none; opacity:.8;}
.subtitle { text-align:center; color:var(--accent-yellow); margin:6px 8px 10px; }

/* VIEW: night sky circle */
#view-stars.view, #view-story.view { display:block; }
#view-stars.view[hidden], #view-story.view[hidden] { display:none !important; }

.stations-circle-container { padding-top:30px; min-height:180px; }
.station { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:86px; height:92px; border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease; text-align:center;}
.station.active .station-badge, .station.selected .station-badge { filter:brightness(1.3); }
.station:active { transform:scale(.92); box-shadow:0 0 14px rgba(255,255,255,.25), inset 0 0 10px rgba(255,255,255,.12);}
.station-badge { font-size: clamp(1.7em, 4.4vw, 2.2em); margin-bottom:-4px; line-height:1; pointer-events:none;}
.station-label { font-size:.85em; color:#e8e8ff; padding-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;}

#stars-circle { gap:clamp(16px,3.6vw,28px); justify-content:center; }

/* Shape map (constellation drawing overlay) */
#shape-map-panel {
  display:none; position:absolute; left:0; right:0; bottom:76px; background:rgba(12,12,40,.92); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:10px; touch-action:pan-y; backdrop-filter:saturate(130%); z-index:50; max-width:min(700px,calc(100vw - 16px)); margin:auto; box-shadow:0 6px 30px rgba(0,0,0,.55); transition:opacity .25s ease; opacity:0;
}
#shape-map-panel.show { display:block; opacity:1; }
.shape-map-header { display:flex; align-items:center; gap:8px; font-size:.9em; color:white; font-weight:700;}
.shape-map-close { width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#e8e8ff;font-size:.95em;cursor:pointer;padding-left:4px;}
#shape-map-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Fredoka','Quicksand',sans-serif;}

#shape-canvas { display:block; width:100%; height:190px; margin:8px auto 4px; filter:drop-shadow(0 0 8px rgba(255,247,208,.25)); }

/* Constellation shape draw-in: the line sketches itself, then each star pops in along it. */
.shape-line-draw { animation: shape-draw 1.4s ease-out forwards; }
@keyframes shape-draw { to { stroke-dashoffset: 0; } }
.shape-dot-pop { opacity:0; transform-origin:center; animation: shape-dot-pop .5s cubic-bezier(.2,.8,.3,1.4) forwards; }
@keyframes shape-dot-pop { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .shape-line-draw, .shape-dot-pop { animation: none !important; opacity:1; stroke-dashoffset:0 !important; }
}
#shape-instruction { text-align:center; color:#cfcfff; font-size:.85em; line-height:1.35; padding:0 6px; min-height:2.2em;}
#shape-caption-row { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:4px;}
#shape-fact-text { white-space:pre-wrap; max-width:100%; }

/* Caption */
.station-caption { position:absolute; left:0; right:0; bottom:14px; text-align:center; z-index:40;}
#caption-text { display:inline-block; background:rgba(10,10,26,.75); border-radius:12px; padding:10px 24px; min-width:max-content;}

/* VIEW: story reader */
.story-reader { padding:16px;}
.story-art { text-align:center; font-size: clamp(3em,9vw,4.5em); margin:6px 0 -10px;}
.story-title { text-align:center; color:white; font-size:clamp(1.1rem,3vw,1.4em);}
.story-script { min-height:120px; padding:0 14px; margin:10px auto max(10px),auto; line-height:1.65; letter-spacing:.02em; font-size:var(--text-body); text-align:center; color:#f2f2ff; max-width: 700px;}
.play-btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; background:#ffdcb6; border:none; color:#3a2a1a; padding:10px 20px; border-radius:30px; cursor:pointer;font-family:'Fredoka','Quicksand',sans-serif;font-weight:700; font-size:1.05em;}
.play-label { font-weight:700;}
.story-nav { display:flex; justify-content:center; align-items:center; gap:22px; margin-top:20px;}
.nav-story-btn { background:rgba(255,255,255,.15); border:none; color:white; border-radius:999px; padding:8px 16px; font-size:.95em; cursor:pointer; font-family:'Fredoka','Quicksand',sans-serif;display:inline-flex;align-items:center;gap:4px;}
.nav-story-btn[disabled] { opacity:.3; pointer-events:none;}
.story-counter { color:white; font-weight:700; }
.read-aloud-btn { display:block; margin:16px auto 0; background:var(--accent-pink); border:none; color:#3a101a; padding:8px 16px; border-radius:20px; font-size:.9em; font-weight:700; cursor:pointer;}

/* Focus */
button:focus-visible, #stars-circle button:focus-visible, .station:focus-within, .station svg:focus-visible { outline: 3px solid var(--accent-yellow);}