/* Mossvale Observatory (observatory.js): the night sky game, the closed dome by day, the star and night journals, the
   star shelf at the Owl Library, and the observatory's lights on the map. */
#observatory-screen { --sky-ink: #26305a; --sky-line: #cdd6f0; --sky-paper: #f5f7fd; }
.sky-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(210px, 1fr); gap: 18px; align-items: start; }
.sky-stage { position: relative; overflow: hidden; aspect-ratio: 800 / 460; border: 4px solid #26305a; border-radius: 20px; background: #0c1534; box-shadow: 0 6px 0 #151c3a, 0 14px 26px #0c153455; }
.sky-field { display: block; width: 100%; height: 100%; touch-action: manipulation; user-select: none; }
.sky-star { cursor: pointer; outline: none; }
.sky-hit { fill: transparent; }
.sky-dot { fill: #fff8d6; transform-box: fill-box; transform-origin: center; animation: star-twinkle 3s ease-in-out var(--twinkle, 0s) infinite alternate; transition: fill .2s; }
.sky-star:hover .sky-dot, .sky-star:focus-visible .sky-dot { transform: scale(1.6); }
.sky-star:focus-visible .sky-hit { stroke: #ffe08a; stroke-width: 1.5; stroke-dasharray: 3 3; }
.sky-star.is-lit .sky-dot { fill: #ffe08a; transform: scale(1.9); filter: drop-shadow(0 0 4px #ffe08a); animation: none; }
.sky-star.is-wrong .sky-dot { animation: star-wrong .5s ease; }
.sky-star.is-hint:not(.is-lit) .sky-dot { animation: star-hint 1s ease-in-out infinite; }
.sky-line { stroke: #ffe9a8; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px #ffe08a); animation: line-draw .6s ease-out forwards; }
@keyframes star-twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes star-wrong { 0%, 100% { fill: #fff8d6; transform: none; } 30% { fill: #ff8a7a; transform: translateX(-3px) scale(1.4); } 60% { fill: #ff8a7a; transform: translateX(3px) scale(1.4); } }
@keyframes star-hint { 50% { transform: scale(2.2); fill: #c9f0ff; } }
@keyframes line-draw { to { stroke-dashoffset: 0; } }

/* Tonight's sky event. */
.sky-event > * { display: none; }
.sky-event.is-full-moon .ev-moon { display: inline; filter: drop-shadow(0 0 18px #f6eecb); }
.sky-event.is-comet .ev-comet { display: inline; filter: drop-shadow(0 0 6px #cfe0ff); }
.sky-event.is-meteor-shower .ev-meteors { display: inline; }
.ev-meteors path { stroke: #fff3cf; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 30 300; animation: meteor 2.6s linear infinite; }
.ev-meteors path:nth-child(2) { animation-delay: -.9s; }
.ev-meteors path:nth-child(3) { animation-delay: -1.7s; }
@keyframes meteor { from { stroke-dashoffset: 30; opacity: 1; } 60% { opacity: 1; } to { stroke-dashoffset: -120; opacity: 0; } }
.sky-event.is-mysterious-light .ev-light { display: inline; filter: drop-shadow(0 0 14px #9be08a) drop-shadow(0 0 30px #6fdc8c); animation: mystery-rise 5s ease-in-out infinite; }
@keyframes mystery-rise { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-46px); opacity: 1; } }

/* By day the dome is closed; at night a panel starts a round; afterwards a result card. */
.sky-closed, .sky-overlay, .sky-result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; }
.sky-closed { background: linear-gradient(#86cdf1, #c4eafb 62%, #a9d38a 62%); }
:is(body[data-phase="evening"]) .sky-closed { background: linear-gradient(#2c3466, #6a4a82 40%, #d9707a 62%, #4f6a4a 62%); }
.sky-closed h3 { margin: 0; color: #26305a; }
:is(body[data-phase="evening"]) .sky-closed :is(h3, p, small) { color: #fff3e0 !important; }
.sky-closed p { margin: 0; color: #2f4a5a; font-weight: 800; }
.sky-closed small { max-width: 420px; color: #4f6a72; font-weight: 700; }
.sky-closed-forecast { max-width: 460px; font-weight: 700 !important; font-size: 14px; }
.sky-closed-dome { width: 120px; height: 84px; margin-bottom: 4px; border: 4px solid #26305a; border-radius: 60px 60px 6px 6px; background: linear-gradient(90deg, #c9d2dc 0 46%, #8a96a3 46% 54%, #c9d2dc 54%); box-shadow: 0 6px 0 #9aa8b4; }
.sky-overlay { background: #0c1534c4; color: #e6ecff; }
.sky-overlay h3 { margin: 0; color: #fff3cf; }
.sky-overlay p { max-width: 460px; margin: 0; color: #cdd6f0; }
.sky-overlay-event { color: #ffe08a !important; font-weight: 800; }
.sky-result { background: #0c1534d9; color: #e6ecff; animation: catch-in-sky .35s ease-out; }
.sky-result h3 { margin: 0; color: #fff3cf; }
.sky-result p { margin: 0; color: #cdd6f0; font-weight: 700; }
.sky-new { color: #9be08a !important; }
.sky-drop { color: #ffe08a !important; }
.sky-mystery { max-width: 480px; margin: 6px 0; padding: 10px 14px; border-left: 3px solid #9be08a; background: #ffffff12; color: #e6ffe6; font: italic 14px/1.45 Georgia, serif; }
@keyframes catch-in-sky { from { opacity: 0; } }
.sky-status { min-height: 1.5em; margin: 10px 0 0; color: #3f4a6a; font-weight: 800; }

.sky-side { display: grid; gap: 14px; }
.sky-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 3px solid var(--sky-line); border-radius: 18px; background: var(--sky-paper); box-shadow: 0 5px 0 #d6dcef; }
.sky-card strong { color: var(--sky-ink); font: 900 16px Nunito, system-ui, sans-serif; }
.sky-card small { color: #6a7290; font-weight: 700; }
.sky-chart { display: block; width: 100%; max-width: 200px; margin: 0 auto; aspect-ratio: 1; }
.sky-chart:empty { display: none; }
.sky-chart svg, .star-entry-art svg, .star-chart svg { display: block; width: 100%; height: 100%; }
.sky-hud { display: flex; justify-content: space-between; gap: 8px; color: #3f4a6a; font-weight: 800; }
.sky-friends .friend-stage { background: linear-gradient(#26305a 0 66%, #2f4a3a 66%); }
.night-journal { margin-top: 18px; }
.night-journal h3 { margin: 0; color: var(--sky-ink); }
.night-journal p { margin: 0; font-size: 14px; }
.night-steps { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 22px; color: #4f5a7a; font-weight: 700; font-size: 14px; }
.night-steps .is-done { color: #3f7d4f; text-decoration: line-through; text-decoration-color: #9be08a; }
.night-steps .is-current { color: var(--sky-ink); font-weight: 900; }
.night-steps .is-hidden { color: #a9b0c8; }

/* The star journal: charts for the constellations you found. */
.star-journal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.star-entry { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 3px solid var(--sky-line); border-radius: 16px; background: #fff; text-align: center; }
.star-entry-art { display: block; width: 96px; height: 96px; }
.star-entry strong { color: var(--sky-ink); font: 900 14px Nunito, system-ui, sans-serif; }
.star-entry small { color: #6a7290; font-size: 11.5px; line-height: 1.35; }
.star-entry.is-open .star-entry-art { opacity: .6; }
.star-entry.is-locked .star-entry-art { filter: grayscale(1) brightness(.5); opacity: .4; }
.star-entry.is-locked strong { color: #a9b0c8; }
.star-entry.is-found { border-color: #e8cf7a; }

/* The star shelf at the Owl Library (hidden inside the arcade cabinet). */
.star-shelf { margin-top: 26px; }
.screen.in-cabinet .star-shelf { display: none; }
.star-shelf-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.shelf-book { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 3px solid #d9cfe6; border-left-width: 9px; border-radius: 10px 16px 16px 10px; background: #fbf9ff; box-shadow: 0 4px 0 #e2daee; }
.shelf-book-icon { font-size: 28px; }
.shelf-book strong { color: #3d3f9e; font: 900 15px Nunito, system-ui, sans-serif; }
.shelf-book p { margin: 0; font-size: 13px; line-height: 1.4; }
.shelf-book small { color: #8a6414; font-weight: 800; }
.shelf-book .button, .shelf-book .text-button { margin-top: auto; padding: 8px 12px; }
.shelf-book.is-locked { opacity: .7; border-style: dashed; }
.shelf-book.is-read { border-color: #cfe1c2; background: #f6fbf2; }

/* The observatory on the map: closed and a little faded by day, lit and glowing at night. */
.place-observatory.is-closed .map-building svg { filter: saturate(.55) brightness(.92); }
.place-observatory.is-open .map-building svg { animation: observatory-glow 2.4s ease-in-out infinite alternate; }
@keyframes observatory-glow { from { filter: drop-shadow(0 0 3px #ffe08a88); } to { filter: drop-shadow(0 0 10px #ffe08a) drop-shadow(0 0 22px #9fb8e6aa); } }
.place-observatory.is-open .map-building:hover svg { filter: drop-shadow(0 0 5px #fff6c8) drop-shadow(0 6px 4px #1f3d2e55); }

/* On narrow screens the chart also sits in the corner of the sky, so you never scroll away from the stars. */
.sky-mini { position: absolute; left: 8px; top: 8px; z-index: 2; display: none; width: 23%; max-width: 110px; aspect-ratio: 1; opacity: .9; pointer-events: none; }
.sky-mini svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .sky-mini:not(:empty) { display: block; }
  .sky-layout { grid-template-columns: 1fr; }
  .sky-side { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 650px) {
  .sky-result h3, .sky-overlay h3 { font-size: 18px; }
  .sky-overlay p, .sky-closed small { font-size: 12px; }
  .sky-closed-dome { width: 80px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-dot, .ev-meteors path, .ev-light, .place-observatory.is-open .map-building svg { animation: none !important; }
  .sky-line { animation: none; stroke-dashoffset: 0; }
}