/* Day and night: one game day lasts one real hour (dayCycle in game-core.js).
   day-cycle.js sets the --morning, --day, --evening and --night weights, --lamps, and the sun and moon positions. */
.town-map .map-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; transition: opacity 2.5s linear; }
.town-map .map-dusk { opacity: var(--evening, 0); }
.town-map .map-night { opacity: var(--night, 0); }
.town-map .map-lights { opacity: var(--lamps, 0); }
.map-building .night-art { opacity: var(--night, 0); transition: opacity 2.5s linear; }

/* Morning haze, the orange evening light and a dark edge at night. */
.map-tint { position: absolute; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; box-shadow: inset 0 0 140px rgba(6, 10, 40, calc(var(--night, 0) * .55)); }
.map-tint::before, .map-tint::after { content: ''; position: absolute; inset: 0; transition: opacity 2.5s linear; }
.map-tint::before { background: radial-gradient(ellipse at 85% -10%, #fff3c4 0, transparent 60%), linear-gradient(#ffd2a8, #ffe9c9); mix-blend-mode: soft-light; opacity: calc(var(--morning, 0) * .45); }
.map-tint::after { background: linear-gradient(200deg, #ffb066 0%, #ff8a5c 45%, #b06a9a 100%); mix-blend-mode: multiply; opacity: calc(var(--evening, 0) * .36); }
.map-birds { position: absolute; inset: 0; opacity: var(--morning, 0); transition: opacity 2.5s linear; }
.map-birds svg { position: absolute; left: -6%; width: 2.6%; fill: none; stroke: #3b4a52; stroke-width: 1.6; stroke-linecap: round; animation: bird-fly 28s linear infinite, bird-flap .45s ease-in-out infinite alternate; }
.map-birds svg:nth-child(1) { top: 16%; }
.map-birds svg:nth-child(2) { top: 12%; width: 2.1%; animation-delay: -1.2s, -.2s; }
.map-birds svg:nth-child(3) { top: 21%; width: 1.9%; animation-delay: -14s, -.3s; }
@keyframes bird-fly { from { left: -6%; } to { left: 106%; } }
@keyframes bird-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* The heading above each map is a window onto the sky. */
.sky-heading { position: relative; isolation: isolate; overflow: hidden; padding: 20px 24px; border: 1px solid #d4e3e6; border-radius: 18px; }
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky > * { position: absolute; display: block; }
.sky-layer { inset: 0; transition: opacity 2.5s linear; }
.sky-morning { background: linear-gradient(#ffd3bd, #ffeccf 65%, #fff6e2); opacity: var(--morning, 0); }
.sky-day { background: linear-gradient(#86cdf1, #c4eafb 70%, #e6f7ff); opacity: var(--day, 1); }
.sky-evening { background: linear-gradient(#ff8f57, #ffb877 55%, #ffd99c); opacity: var(--evening, 0); }
.sky-night { background: linear-gradient(#0c1534, #1e2f63 70%, #2a4079); opacity: var(--night, 0); }
.sky-stars { inset: 0; background-image: radial-gradient(1px 1px at 40% 17%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 52% 65%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 13% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 53% 74%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 9% 32%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 70% 50%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 24% 17%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 29% 7%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 35% 38%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 23% 43%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 82% 51%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 79% 47%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 51% 68%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 24% 35%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 37% 15%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 40% 4%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 75% 43%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 26% 56%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 78% 40%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 59% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 41% 37%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 12% 9%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 82% 39%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 70% 86%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 91% 47%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 29%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 54% 29%, #fff 50%, transparent 51%), radial-gradient(1.8px 1.8px at 82% 60%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 25% 49%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 97% 79%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 83% 75%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 43% 16%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 33%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 76% 82%, #fff 50%, transparent 51%); opacity: var(--night, 0); animation: sky-twinkle 3.5s ease-in-out infinite alternate; }
.sky-sun { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #fff7cc 0 38%, #ffd65a 40% 100%); box-shadow: 0 0 0 8px #ffe48a55, 0 0 34px #ffcf4a; left: calc(38% + var(--sun-x, .5) * 46% - 22px); top: calc(88% - var(--sun-y, .8) * 72% - 22px); opacity: var(--sun-show, 1); transition: opacity 2.5s linear; }
.sky-moon { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset -10px 4px 0 0 #f6eecb; filter: drop-shadow(0 0 8px #f6eecb88); left: calc(38% + var(--moon-x, .5) * 46% - 17px); top: calc(88% - var(--moon-y, .8) * 72% - 17px); opacity: var(--moon-show, 0); transition: opacity 2.5s linear; }
.sky-cloud { width: 90px; height: 26px; border-radius: 99px; background: #fff; box-shadow: 24px -12px 0 4px #fff, 52px -4px 0 0 #fff; opacity: calc((var(--day, 1) + var(--morning, 0) * .7) * .85); animation: sky-drift 70s linear infinite; }
.sky-cloud.c1 { top: 34%; }
.sky-cloud.c2 { top: 64%; transform: scale(.7); animation-delay: -38s; }
.sky-birds { inset: 0; opacity: var(--morning, 0); }
.sky-birds svg { position: absolute; width: 22px; fill: none; stroke: #4a5560; stroke-width: 1.6; stroke-linecap: round; animation: bird-fly 22s linear infinite, bird-flap .45s ease-in-out infinite alternate; }
.sky-birds svg:nth-child(1) { top: 22%; }
.sky-birds svg:nth-child(2) { top: 30%; width: 17px; animation-delay: -1.4s, -.2s; }
@keyframes sky-drift { from { left: -14%; } to { left: 108%; } }
@keyframes sky-twinkle { from { filter: brightness(.75); } to { filter: brightness(1.25); } }
.sky-heading h2, .sky-heading p, .sky-heading .eyebrow { transition: color 1.5s; }
body[data-phase="night"] .sky-heading h2, body[data-phase="night"] .sky-heading p { color: #f3f1ff; }
body[data-phase="night"] .sky-heading .eyebrow { color: #b9c8ff; }
.sky-heading .day-chip { position: relative; box-shadow: 0 2px 0 #00000014; }
@media (max-width: 650px) {
  .sky-heading { flex-wrap: wrap; padding: 16px; }
  .sky-heading .day-chip { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .map-birds, .sky-birds { display: none; }
  .sky-cloud, .sky-stars { animation: none; }
}