/* ==========================================================================
   Snow Day Calculator Today — Cozy Winter Night Theme
   Step 2: Mascot Emotional States & Village Green Snowball Fight
   ========================================================================== */

/* Self-hosted fonts (fonts/, license in fonts/OFL.txt). Each file is one
   "variable" font holding just the weight range we use, latin letters only.
   The version is in the file name: a new font version gets a new name, so
   _headers can let browsers cache these files for a year.
   Outfit is also preloaded in each page's <head>; keep that path in step. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fredoka-latin-v17.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/outfit-latin-v15.woff2') format('woff2');
}

:root {
  /* Twilight Sky Gradient */
  --sky-top: #0F1B3D;
  --sky-mid: #25306B;
  --sky-bottom: #5B4B8A;

  /* Aurora Glows */
  --aurora-teal: #5ED3C3;
  --aurora-blue: #7AA7FF;

  /* Moon, sunrise and clouds (the sky changes with Mr. Chill's mood) */
  --moon-face: #F3EBD3;
  --moon-glow: rgba(243, 235, 211, 0.45);
  --sunrise-mid: rgba(186, 120, 150, 0.42);
  --sunrise-low: rgba(238, 165, 125, 0.62);
  --sun-core: #F7D2A2;
  --sun-halo: #F2B585;
  --cloud: rgba(196, 210, 236, 0.2);
  --puddle: rgba(150, 196, 232, 0.72);
  --puddle-shine: rgba(232, 244, 255, 0.6);

  /* How long the sky takes to change when the mood changes */
  --mood-fade: 2.5s;

  /* Snowy Village Hills */
  --snow-front: #E8F0FA;
  --snow-mid: #CBD9EC;
  --snow-back: #9BB0D3;
  --snow-shadow: #889DC0;

  /* Warm Village Lighting */
  --glow-window: #FFB86B;
  --glow-lamp: #FFE094;
  --glow-snow-light: rgba(255, 184, 107, 0.4);

  /* Village Architecture */
  --house-wood-1: #3B4861;
  --house-wood-2: #2E384D;
  --roof-snow: #F2F7FC;
  --chimney-brick: #4E596F;
  --smoke-puff: rgba(225, 238, 255, 0.45);
  --lamp-iron: #1E2533;

  /* Mr. Chill Mascot */
  --chill-scarf: #E8554E;
  --chill-scarf-shadow: #BA332C;
  --chill-carrot: #FF8533;
  --chill-hat: #222736;
  --chill-coal: #181C26;
  --card-stick-rim: rgba(232, 240, 250, 0.55); /* frosty edge on his arms, share card only */

  /* Children Winter Clothing */
  --kid-skin: #FFDFBA;
  --coat-teal: #3AAFA9;
  --coat-coral: #E76F51;

  /* Playful Dog */
  --dog-fur: #C68B59;
  --dog-dark: #A0673B;
  --dog-belly: #E8CDB5;

  /* Frosted Glass UI Panel */
  --panel-bg: rgba(15, 27, 61, 0.72);
  --panel-border: rgba(255, 255, 255, 0.2);
  --panel-glow: rgba(122, 167, 255, 0.18);
  --panel-shadow: 0 20px 50px rgba(7, 14, 34, 0.55);
  --scrollbar-thumb: rgba(166, 184, 214, 0.28);
  --scrollbar-thumb-hover: rgba(166, 184, 214, 0.45);

  /* Typography */
  --text-pure: #FFFFFF;
  --text-soft: #E2EAF7;
  --text-muted: #A6B8D6;
  --hint-oops: #F4B6A6; /* soft coral for friendly "can't find it" messages */

  /* Form Elements Placeholder */
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgba(255, 255, 255, 0.22);
  --btn-bg: rgba(94, 211, 195, 0.22);
  --btn-border: rgba(94, 211, 195, 0.45);
  --btn-text: #B4F4EB;

  /* Snow Day Chance Meter */
  --meter-track: rgba(255, 255, 255, 0.1);
  --result-bg: rgba(8, 16, 38, 0.45);

  /* More Weather Details */
  --detail-tile-bg: rgba(255, 255, 255, 0.05);

  /* Step 7: optional question answer buttons */
  --choice-bg: rgba(255, 255, 255, 0.05);
  --choice-border: rgba(255, 255, 255, 0.18);
  --choice-hover-bg: rgba(255, 255, 255, 0.1);
  --choice-chosen-bg: rgba(94, 211, 195, 0.24);
  --choice-chosen-border: rgba(94, 211, 195, 0.7);
  --choice-chosen-text: #D6FAF4;

  /* Mr. Chill's Speech Bubble */
  --bubble-bg: rgba(15, 27, 61, 0.92);
  --bubble-border: rgba(255, 255, 255, 0.25);
  --bubble-line2: #B4F4EB;

  /* Info content: home "How it works" + FAQ, Privacy and About pages.
     Each band is a slightly different shade so the page isn't one dark sheet. */
  --info-bg: #0B1430;
  --info-band-alt: #0F1A3B;
  --info-band-hero: #18265A;
  --info-band-line: rgba(255, 255, 255, 0.06);
  --footer-bg: #070D22;
  --info-card-bg: rgba(37, 48, 107, 0.32);
  --info-card-border: rgba(255, 255, 255, 0.12);
  --info-accent: #B4F4EB;
  --info-link: #9FE3D9;
  --info-points: rgba(94, 211, 195, 0.16);
  --factor-card-bg: rgba(255, 255, 255, 0.035);
  --factor-icon-bg: rgba(94, 211, 195, 0.12);
  --faq-item-bg: rgba(255, 255, 255, 0.03);
  --faq-open-border: rgba(94, 211, 195, 0.35);
  --notice-bg: rgba(94, 211, 195, 0.06);
  --notice-border: rgba(94, 211, 195, 0.2);
  --key-points-bg: rgba(94, 211, 195, 0.07);
  --key-points-border: rgba(94, 211, 195, 0.22);
  --focus-ring: #9FE3D9;

  /* Top navigation bar (all 3 pages) */
  --nav-h: 3.75rem;
  --nav-bg: rgba(9, 16, 40, 0.94);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-current-bg: rgba(94, 211, 195, 0.12);
  --nav-dropdown-bg: #111C42;
  --nav-shadow: 0 16px 40px rgba(4, 9, 24, 0.5);

  /* Fonts */
  --font-theatrical: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   Reset & Full-Screen Scene Container
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The page scrolls: the nav bar and scene are the first screen, "How it
   works" and the FAQ sit below. Sideways overflow is cut off with "clip" on
   body (not "hidden"), because "hidden" would stop the nav bar from sticking. */
html {
  width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--info-bg);
  color: var(--text-soft);
  position: relative;
}

/* Two parts side by side: the panel on the left, the scene filling the rest.
   The sky lives here (not on body) so the longer page doesn't stretch it.
   dvh is the screen height actually visible; the vh line is a fallback.
   The nav bar's height is taken off so bar + scene fill one screen. */
.winter-scene {
  width: 100%;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-bottom) 100%);
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}

/* The scene's own box. "container-type: size" lets things inside size
   themselves from this box's width and height (the cqw / cqh units). */
.scene-area {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  container-type: size;
}

/* --------------------------------------------------------------------------
   Faint Aurora Glow
   -------------------------------------------------------------------------- */
.aurora-glow {
  position: absolute;
  top: 0;
  width: 80%;
  height: 45%;
  border-radius: 50%;
  filter: blur(75px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
  transform: translateZ(0);
}

.aurora-teal {
  left: 5%;
  background: radial-gradient(circle, var(--aurora-teal) 0%, transparent 70%);
  animation: aurora-sway-1 16s ease-in-out infinite alternate;
}

.aurora-blue {
  right: 5%;
  top: 5%;
  background: radial-gradient(circle, var(--aurora-blue) 0%, transparent 70%);
  animation: aurora-sway-2 20s ease-in-out infinite alternate;
}

@keyframes aurora-sway-1 {
  0% { transform: translateY(0) scale(1); opacity: 0.26; }
  100% { transform: translateY(20px) scale(1.15); opacity: 0.4; }
}

@keyframes aurora-sway-2 {
  0% { transform: translateY(0) scale(1.1); opacity: 0.36; }
  100% { transform: translateY(-15px) scale(0.95); opacity: 0.24; }
}

/* The glows and ribbons share one wrapper. The mood changes the wrapper's
   opacity, because the glows already animate their own opacity. */
.sky-aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Long, soft, wavy bands of northern lights */
.aurora-ribbon {
  position: absolute;
  height: 9%;
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  background: linear-gradient(90deg, transparent 0%, var(--aurora-teal) 30%, var(--aurora-blue) 70%, transparent 100%);
  filter: blur(14px);
  opacity: 0.32;
  will-change: transform;
}

.ribbon-1 {
  top: 8%;
  left: 4%;
  width: 70%;
  animation: ribbon-drift-1 22s ease-in-out infinite alternate;
}

.ribbon-2 {
  top: 18%;
  left: 30%;
  width: 62%;
  opacity: 0.24;
  animation: ribbon-drift-2 26s ease-in-out infinite alternate;
}

.ribbon-3 {
  top: 28%;
  left: 12%;
  width: 48%;
  height: 6%;
  opacity: 0.18;
  animation: ribbon-drift-3 18s ease-in-out infinite alternate;
}

@keyframes ribbon-drift-1 {
  0% { transform: rotate(-7deg) skewX(-18deg) translateX(0) scaleY(0.85); }
  100% { transform: rotate(-4deg) skewX(-10deg) translateX(5%) scaleY(1.2); }
}

@keyframes ribbon-drift-2 {
  0% { transform: rotate(5deg) skewX(15deg) translateX(0) scaleY(1.1); }
  100% { transform: rotate(8deg) skewX(22deg) translateX(-6%) scaleY(0.8); }
}

@keyframes ribbon-drift-3 {
  0% { transform: rotate(-3deg) skewX(-12deg) translateX(0) scaleY(0.9); }
  100% { transform: rotate(-6deg) skewX(-20deg) translateX(8%) scaleY(1.25); }
}

/* --------------------------------------------------------------------------
   Sunrise Sky, Moon & Clouds (they change with the mood; see "Scene Moods")
   -------------------------------------------------------------------------- */
/* A warm glow over the night sky. The page's own sky gradient can't fade
   smoothly, so this layer fades in on top of it instead. */
.sky-sunrise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--sunrise-mid) 55%, var(--sunrise-low) 100%);
}

/* A crescent: a see-through circle with only an inner shadow showing */
.moon {
  position: absolute;
  top: 9%;
  right: 13%;
  width: clamp(34px, 4.5vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset clamp(9px, 1.2vw, 17px) clamp(-5px, -0.6vw, -3px) 0 0 var(--moon-face);
  filter: drop-shadow(0 0 10px var(--moon-glow));
  transform: rotate(-20deg);
  z-index: 2;
  pointer-events: none;
}

.sky-clouds {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Each track is as wide as the scene, so translateX(100%) carries its cloud
   all the way across. The fixed starting transform spreads the clouds out
   for the still (reduced motion) version. */
.cloud-track {
  position: absolute;
  left: 0;
  width: 100%;
  will-change: transform;
  animation: cloud-drift linear infinite;
}

.track-1 { top: 7%;  transform: translateX(10%); animation-duration: 70s; animation-delay: -20s; }
.track-2 { top: 20%; transform: translateX(45%); animation-duration: 90s; animation-delay: -60s; }
.track-3 { top: 13%; transform: translateX(75%); animation-duration: 80s; animation-delay: -5s; }

/* Puffs drawn with three soft ovals in one box */
.cloud {
  width: clamp(110px, 16vw, 230px);
  aspect-ratio: 3 / 1;
  background:
    radial-gradient(ellipse 35% 60% at 30% 60%, var(--cloud) 0%, var(--cloud) 55%, transparent 100%),
    radial-gradient(ellipse 30% 70% at 55% 45%, var(--cloud) 0%, var(--cloud) 55%, transparent 100%),
    radial-gradient(ellipse 30% 50% at 78% 62%, var(--cloud) 0%, var(--cloud) 55%, transparent 100%);
  filter: blur(4px);
}

.track-2 .cloud { width: clamp(80px, 11vw, 160px); }

@keyframes cloud-drift {
  0% { transform: translateX(-30%); }
  100% { transform: translateX(110%); }
}

/* --------------------------------------------------------------------------
   Soft Twinkling Stars
   -------------------------------------------------------------------------- */
.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
  z-index: 2;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
  opacity: 0.4;
  animation: star-twinkle 4s ease-in-out infinite alternate;
}

.s1  { top: 10%; left: 12%; animation-delay: 0.2s; }
.s2  { top: 6%;  left: 30%; animation-delay: 1.5s; width: 3px; height: 3px; }
.s3  { top: 18%; left: 45%; animation-delay: 0.8s; }
.s4  { top: 12%; left: 65%; animation-delay: 2.1s; width: 2.5px; height: 2.5px; }
.s5  { top: 22%; left: 80%; animation-delay: 1.1s; }
.s6  { top: 5%;  left: 92%; animation-delay: 2.8s; }
.s7  { top: 30%; left: 7%;  animation-delay: 3.2s; }
.s8  { top: 35%; left: 24%; animation-delay: 0.5s; width: 2.5px; height: 2.5px; }
.s9  { top: 28%; left: 58%; animation-delay: 1.9s; }
.s10 { top: 32%; left: 72%; animation-delay: 2.5s; }
.s11 { top: 14%; left: 88%; animation-delay: 0.4s; }
.s12 { top: 38%; left: 95%; animation-delay: 1.7s; }

@keyframes star-twinkle {
  0%   { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 0.85; transform: scale(1.3); }
}

/* --------------------------------------------------------------------------
   Snowfall Parallax (3 Depths)
   -------------------------------------------------------------------------- */
.snowfall-depth {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.flake {
  position: absolute;
  top: -15px;
  background: #FFFFFF;
  border-radius: 50%;
  animation: snowfall linear infinite;
}

.depth-back { z-index: 3; }
.depth-back .flake { width: 2.5px; height: 2.5px; opacity: 0.35; filter: blur(0.5px); }
.fb-1 { left: 8%;  animation-duration: 17s; animation-delay: 0s; }
.fb-2 { left: 24%; animation-duration: 21s; animation-delay: 4s; }
.fb-3 { left: 42%; animation-duration: 19s; animation-delay: 2s; }
.fb-4 { left: 63%; animation-duration: 23s; animation-delay: 7s; }
.fb-5 { left: 79%; animation-duration: 18s; animation-delay: 3s; }
.fb-6 { left: 91%; animation-duration: 22s; animation-delay: 6s; }

.depth-mid { z-index: 5; }
.depth-mid .flake { width: 4.5px; height: 4.5px; opacity: 0.65; filter: blur(0.8px); }
.fm-1 { left: 16%; animation-duration: 12s; animation-delay: 1s; }
.fm-2 { left: 35%; animation-duration: 14s; animation-delay: 5s; }
.fm-3 { left: 54%; animation-duration: 11s; animation-delay: 2s; }
.fm-4 { left: 72%; animation-duration: 13s; animation-delay: 6s; }
.fm-5 { left: 86%; animation-duration: 12s; animation-delay: 3s; }

.depth-front { z-index: 10; }
.depth-front .flake { width: 7px; height: 7px; opacity: 0.85; filter: blur(1px); }
.ff-1 { left: 12%; animation-duration: 8.5s; animation-delay: 0.5s; }
.ff-2 { left: 38%; animation-duration: 9.5s; animation-delay: 4.5s; }
.ff-3 { left: 67%; animation-duration: 8.0s; animation-delay: 2.0s; }
.ff-4 { left: 88%; animation-duration: 9.0s; animation-delay: 5.5s; }

/* Heavy snow: extra flakes for Likely. No blur filter (cheaper on phones),
   and negative delays so they're already mid-fall when they fade in. */
.depth-heavy { z-index: 8; }
.depth-heavy .flake { width: 5px; height: 5px; opacity: 0.75; }
.fh-1  { left: 4%;  animation-duration: 9s;   animation-delay: -1s; }
.fh-2  { left: 11%; animation-duration: 11s;  animation-delay: -6s; width: 6.5px; height: 6.5px; }
.fh-3  { left: 19%; animation-duration: 8s;   animation-delay: -3s; }
.fh-4  { left: 27%; animation-duration: 10s;  animation-delay: -8s; }
.fh-5  { left: 33%; animation-duration: 7.5s; animation-delay: -2s; width: 6.5px; height: 6.5px; }
.fh-6  { left: 41%; animation-duration: 9.5s; animation-delay: -5s; }
.fh-7  { left: 48%; animation-duration: 8.5s; animation-delay: -7s; }
.fh-8  { left: 56%; animation-duration: 10.5s; animation-delay: -4s; width: 6.5px; height: 6.5px; }
.fh-9  { left: 61%; animation-duration: 8s;   animation-delay: -1.5s; }
.fh-10 { left: 69%; animation-duration: 9s;   animation-delay: -6.5s; }
.fh-11 { left: 76%; animation-duration: 11s;  animation-delay: -3.5s; width: 6.5px; height: 6.5px; }
.fh-12 { left: 83%; animation-duration: 7.5s; animation-delay: -5.5s; }
.fh-13 { left: 90%; animation-duration: 10s;  animation-delay: -2.5s; }
.fh-14 { left: 96%; animation-duration: 8.5s; animation-delay: -7.5s; width: 6.5px; height: 6.5px; }

@keyframes snowfall {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { transform: translateY(105vh) translateX(30px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Frosted-Glass Side Panel (left on desktop, top on phones)
   -------------------------------------------------------------------------- */
.side-panel {
  flex: 0 0 auto;
  width: clamp(330px, 30vw, 420px);
  height: 100%;
  overflow-y: auto;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow), 0 0 0 1px var(--panel-glow);
  padding: 1.75rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  text-align: center;
  z-index: 12;
  position: relative;
  /* Thin, dark scrollbar that blends into the panel */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Same look for browsers that only understand the older -webkit- rules */
.side-panel::-webkit-scrollbar {
  width: 8px;
}

.side-panel::-webkit-scrollbar-track {
  background: transparent;
}

.side-panel::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
}

.side-panel::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.app-header {
  text-align: center;
}

.app-title {
  font-family: var(--font-theatrical);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text-pure);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow: 0 4px 18px rgba(10, 16, 38, 0.7);
  margin-bottom: 0.2rem;
}

.app-subtitle {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-wrap: balance; /* even line lengths, no single word left alone */
}

/* --------------------------------------------------------------------------
   Step 3: Location Search Form & Button
   -------------------------------------------------------------------------- */
.search-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.search-bar-container {
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  gap: 0.6rem;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 14px rgba(10, 16, 38, 0.25);
}

.search-bar-container:hover {
  border-color: rgba(94, 211, 195, 0.45);
  background: rgba(255, 255, 255, 0.11);
}

.search-bar-container:focus-within {
  border-color: var(--aurora-teal);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 3px rgba(94, 211, 195, 0.22), 0 8px 22px rgba(10, 16, 38, 0.35);
}

.search-icon {
  font-size: 1.1rem;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.search-bar-container:focus-within .search-icon {
  transform: scale(1.15) rotate(-6deg);
}

.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text-pure);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 500;
  outline: none;
  padding: 0.4rem 0;
}

.search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.search-input:focus::placeholder {
  opacity: 0.45;
}

.search-btn {
  background: linear-gradient(135deg, rgba(94, 211, 195, 0.32) 0%, rgba(122, 167, 255, 0.32) 100%);
  border: 1px solid rgba(94, 211, 195, 0.55);
  color: #D6FAF4;
  font-family: var(--font-theatrical);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.1rem;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 8px rgba(15, 27, 61, 0.3);
  position: relative;
  overflow: hidden;
}

.search-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.search-btn:hover {
  background: linear-gradient(135deg, rgba(94, 211, 195, 0.48) 0%, rgba(122, 167, 255, 0.48) 100%);
  border-color: rgba(94, 211, 195, 0.85);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(94, 211, 195, 0.32);
}

.search-btn:hover::before {
  left: 100%;
}

.search-btn:hover .btn-icon {
  transform: rotate(20deg) scale(1.15);
}

.search-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px rgba(15, 27, 61, 0.4);
}

.btn-icon {
  font-size: 0.95rem;
  transition: transform 0.25s ease;
  display: inline-block;
}

.search-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: left;
  padding-left: 0.4rem;
  letter-spacing: 0.01em;
  min-height: 1.15rem;
  transition: color 0.25s ease;
}

.search-hint.highlight {
  color: var(--aurora-teal);
}

.search-hint.oops {
  color: var(--hint-oops);
}

/* While Mr. Chill is looking up a place, the button rests quietly */
.search-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* Loading: "Checking…" with a slowly turning snowflake. The button stays
   readable but doesn't lift, shine or press while it waits. */
.search-btn.is-loading,
.search-btn.is-loading:hover,
.search-btn.is-loading:active {
  justify-content: center;
  opacity: 0.85;
  cursor: progress;
  transform: none;
  box-shadow: 0 2px 8px rgba(15, 27, 61, 0.3);
}

.search-btn.is-loading::before {
  display: none;
}

.search-btn.is-loading .btn-icon {
  animation: btn-snowflake-spin 2.4s linear infinite;
}

@keyframes btn-snowflake-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Step 5: Snow Day Chance Result & Meter
   -------------------------------------------------------------------------- */
.chance-result {
  width: 100%;
  background: var(--result-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  /* Each mood sets its own color below */
  --level-color: var(--chill-scarf);
}

/* The hidden attribute must win over display: flex */
.chance-result[hidden],
.chance-test-note[hidden] {
  display: none;
}

.chance-result[data-level="shiver"] { --level-color: var(--aurora-teal); }
.chance-result[data-level="wondering"] { --level-color: var(--glow-window); }
.chance-result[data-level="melting"] { --level-color: var(--chill-scarf); }

.chance-day {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.chance-number {
  font-family: var(--font-theatrical);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-pure);
  transition: color 0.4s ease;
}

.chance-label {
  font-family: var(--font-theatrical);
  font-size: 1rem;
  font-weight: 600;
  color: var(--level-color);
  transition: color 0.4s ease;
}

.chance-meter {
  width: 100%;
  height: 10px;
  margin: 0.35rem 0 0.15rem;
  background: var(--meter-track);
  border-radius: 999px;
  overflow: hidden;
}

.chance-meter-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--level-color);
  opacity: 0.85;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
}

.chance-note,
.chance-test-note {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.chance-test-note {
  color: var(--glow-window);
}

/* --------------------------------------------------------------------------
   Step 8: "Is My School Closed?" Search Link
   -------------------------------------------------------------------------- */
.school-row {
  width: 100%;
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.school-btn {
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 1rem;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  font-family: var(--font-theatrical);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.school-btn:hover {
  background: var(--choice-chosen-bg);
  border-color: var(--choice-chosen-border);
  color: var(--text-pure);
  transform: translateY(-1px);
}

.school-btn:focus-visible {
  outline: 2px solid var(--btn-border);
  outline-offset: 2px;
}

.school-btn-out {
  font-size: 0.8rem;
  opacity: 0.75;
}

.school-note {
  font-size: 0.66rem;
  line-height: 1.3;
  text-align: center;
  color: var(--text-muted);
}

/* A soft glow in the result's color, only for Maybe and Likely.
   No Chance keeps the button still. */
.chance-result[data-level="shiver"] .school-btn,
.chance-result[data-level="wondering"] .school-btn {
  animation: school-pulse 3s ease-in-out infinite;
}

@keyframes school-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--level-color) 40%, transparent); }
}

/* Read by screen readers, invisible on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Step 9: Share Button & Download Fallback
   -------------------------------------------------------------------------- */
.share-row {
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.share-btn,
.copy-text-btn {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  font-family: var(--font-theatrical);
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.share-btn {
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 1rem;
  font-size: 0.92rem;
}

.share-btn:hover:not(:disabled),
.copy-text-btn:hover {
  background: var(--choice-chosen-bg);
  border-color: var(--choice-chosen-border);
  color: var(--text-pure);
  transform: translateY(-1px);
}

.share-btn:focus-visible,
.copy-text-btn:focus-visible {
  outline: 2px solid var(--btn-border);
  outline-offset: 2px;
}

/* While the card is being drawn, the button rests quietly */
.share-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.share-fallback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.share-fallback[hidden] {
  display: none;
}

.share-status {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: left;
}

.copy-text-btn {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Step 7: Sharpen Your Prediction (optional tap-to-answer questions)
   -------------------------------------------------------------------------- */
.sharpen {
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--panel-border);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sharpen-title {
  font-family: var(--font-theatrical);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
}

.sharpen-optional {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--text-muted);
}

.sharpen-question {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sharpen-label {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Three answers side by side */
.sharpen-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.sharpen-btn {
  min-height: 34px;
  padding: 0.3rem 0.25rem;
  background: var(--choice-bg);
  border: 1px solid var(--choice-border);
  border-radius: 10px;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.sharpen-btn:hover {
  background: var(--choice-hover-bg);
  color: var(--text-pure);
}

.sharpen-btn.chosen {
  background: var(--choice-chosen-bg);
  border-color: var(--choice-chosen-border);
  color: var(--choice-chosen-text);
}

.sharpen-btn:focus-visible {
  outline: 2px solid var(--btn-border);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Step 6: More Weather Details Fold-Out (built-in <details>: closed until clicked)
   -------------------------------------------------------------------------- */
.weather-details {
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--panel-border);
  text-align: left;
}

.weather-details-summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-soft);
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 8px;
  transition: color 0.2s ease;
}

.weather-details-summary::-webkit-details-marker {
  display: none;
}

/* A small arrow that turns when the section opens */
.weather-details-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.25s ease;
}

.weather-details[open] .weather-details-summary::before {
  transform: rotate(90deg);
}

.weather-details-summary:hover,
.weather-details[open] .weather-details-summary {
  color: var(--text-pure);
}

.weather-details-summary:focus-visible {
  outline: 2px solid var(--btn-border);
  outline-offset: 2px;
}

/* Fades and slides in gently each time the section opens */
.weather-details[open] .weather-details-body {
  animation: details-reveal 0.35s ease;
}

@keyframes details-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.weather-details-body {
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Four numbers in a 2 x 2 grid */
.weather-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin: 0;
}

.weather-stat {
  background: var(--detail-tile-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  min-width: 0;
}

.weather-stat dt {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.weather-stat dd {
  margin: 0.1rem 0 0;
  font-family: var(--font-theatrical);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-pure);
}

.weather-timing {
  font-size: 0.82rem;
  color: var(--text-soft);
  text-align: center;
}

.weather-why-title {
  font-family: var(--font-theatrical);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0.15rem 0 0;
}

.weather-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.weather-reasons li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-soft);
  padding-bottom: 0.25rem;
  border-bottom: 1px dashed var(--panel-border);
}

.weather-reasons li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Shown when only the starting point counted */
.weather-reasons li.reason-note {
  justify-content: center;
  color: var(--text-muted);
  font-style: italic;
}

.reason-points {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--level-color);
}

.weather-window-note {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Mr. Chill's Speech Bubble (sits in the sky right above his hat)
   -------------------------------------------------------------------------- */
/* The anchor only positions: centered on Mr. Chill (x 650 of 1200 = 54.2%),
   its bottom just above his hat (y 180 of 480, so 62.5% up from the bottom). */
.speech-anchor {
  position: absolute;
  left: 54.2%;
  bottom: 62.5%;
  transform: translateX(-50%);
  z-index: 11;
  pointer-events: none;
}

.speech-bubble {
  position: relative;
  width: max-content;
  max-width: min(17rem, 90cqw);
  background: var(--bubble-bg);
  border: 1px solid var(--bubble-border);
  border-radius: 14px;
  padding: 0.55rem 0.9rem;
  margin-bottom: 10px; /* room for the tail */
  text-align: center;
  box-shadow: 0 6px 18px rgba(7, 14, 34, 0.45);
}

/* Little tail pointing down at Mr. Chill */
.speech-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--bubble-bg);
  border-right: 1px solid var(--bubble-border);
  border-bottom: 1px solid var(--bubble-border);
  transform: rotate(45deg);
}

.bubble-line1 {
  font-family: var(--font-theatrical);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-pure);
  line-height: 1.3;
}

.bubble-line2 {
  font-size: 0.8rem;
  color: var(--bubble-line2);
  line-height: 1.3;
  margin-top: 0.1rem;
}

/* Bubble pop animation when switching mood */
.bubble-pop {
  animation: pop-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-bounce {
  0% { transform: scale(0.94); opacity: 0.7; }
  50% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Village Green Landscape Stage & SVG Full-Width Bleed
   -------------------------------------------------------------------------- */
/* The biggest 2.5:1 box (same shape as the 1200x480 scene) that fits in the
   scene area, sitting on the bottom: every character always fits, with sky
   above. 250cqh = 2.5 x the area's height. */
.scene-frame {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: min(100cqw, 250cqh);
  aspect-ratio: 1200 / 480;
  z-index: 6;
}

/* overflow: visible lets the hills (drawn far past both edges) keep going to
   the screen edges on wide screens; .scene-area trims anything beyond. */
.village-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Step 2: Dynamic Facial Expressions (Controlled by mood classes)
   -------------------------------------------------------------------------- */
/* Faces cross-fade instead of popping in */
.chill-face-state {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Active face mapping */
.mood-shiver .face-shiver,
.mood-wondering .face-wondering,
.mood-melting .face-melting { opacity: 1; }

/* --------------------------------------------------------------------------
   Step 2: Mr. Chill Mood Animations
   -------------------------------------------------------------------------- */

/* 1. MOOD: SHIVER & SMILE (Snow Day Likely) */
.mood-shiver {
  animation: mascot-shiver-vibrate 0.45s ease-in-out infinite !important;
}

@keyframes mascot-shiver-vibrate {
  0%, 100% {
    transform: translate(585px, 230px) rotate(0deg);
  }
  25% {
    transform: translate(583.5px, 229.5px) rotate(-1.5deg);
  }
  50% {
    transform: translate(586px, 230.5px) rotate(1.2deg);
  }
  75% {
    transform: translate(584px, 231px) rotate(-0.8deg);
  }
}

.mood-shiver .chill-flutter-scarf {
  animation: scarf-flutter-fast 1.2s ease-in-out infinite alternate !important;
}

@keyframes scarf-flutter-fast {
  0% { transform: rotate(0deg) scaleX(1); }
  100% { transform: rotate(-8deg) scaleX(1.12); }
}

/* 2. MOOD: WONDERING & CALCULATING (Maybe) */
.mood-wondering {
  animation: mascot-wondering-tilt 4.5s ease-in-out infinite !important;
}

/* Starts and ends upright, so switching into this mood doesn't jump */
@keyframes mascot-wondering-tilt {
  0%, 100% {
    transform: translate(585px, 230px) rotate(0deg);
  }
  25% {
    transform: translate(585px, 230px) rotate(-2.5deg);
  }
  75% {
    transform: translate(585px, 230px) rotate(2.5deg);
  }
}

.mood-wondering .chill-carrot-nose {
  animation: nose-twitch 2.8s ease-in-out infinite;
  transform-origin: 63px 34px;
}

@keyframes nose-twitch {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-4deg); }
  55% { transform: rotate(3deg); }
}

/* 3. MOOD: MELTDOWN & SWEATING (No Chance) */
/* First sinks slowly into the slump, then the slump loop takes over
   (it starts exactly where the sinking ends, so there's no jump) */
.chill-breathing-body {
  transform-origin: 65px 210px;
}

.mood-melting .chill-breathing-body {
  animation:
    mascot-melt-in 1.5s ease-in-out,
    mascot-melting-slump 3.5s ease-in-out 1.5s infinite !important;
}

@keyframes mascot-melt-in {
  0% { transform: scale(1, 1); }
  100% { transform: scale(1.06, 0.86); }
}

/* Leaving the melting mood: script.js adds .chill-recovering for a moment
   so he springs back up instead of snapping */
.chill-recovering .chill-breathing-body {
  animation: mascot-unmelt 1.2s ease-out;
}

@keyframes mascot-unmelt {
  0% { transform: scale(1.06, 0.86); }
  70% { transform: scale(0.98, 1.03); }
  100% { transform: scale(1, 1); }
}

@keyframes mascot-melting-slump {
  0%, 100% {
    transform: scale(1.06, 0.86);
  }
  50% {
    transform: scale(1.10, 0.82);
  }
}

/* Hat slides sideways when melting (and eases back afterwards) */
.chill-hat-group {
  transform-origin: 65px 0px;
  transition: transform 0.8s ease;
}

.mood-melting .chill-hat-group {
  transform: rotate(18deg) translate(8px, 6px);
}

/* Dripping sweat droplets (hidden while the melting face fades out) */
.sweat-drop {
  opacity: 0;
}

.mood-melting .sweat-drop {
  animation: sweat-drip-fall 2.2s ease-in infinite;
}

.mood-melting .sd-1 { animation-delay: 0s; }
.mood-melting .sd-2 { animation-delay: 0.8s; }
.mood-melting .sd-3 { animation-delay: 1.4s; }

@keyframes sweat-drip-fall {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  75% {
    opacity: 0.85;
    transform: translateY(18px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(26px) scale(0.3);
  }
}

/* Small drips sliding down his body toward the puddle */
.melt-drip {
  opacity: 0;
}

.mood-melting .melt-drip {
  animation: melt-drip-slide 2.8s ease-in infinite;
}

.mood-melting .md-2 { animation-delay: 0.9s; }
.mood-melting .md-3 { animation-delay: 1.8s; }

@keyframes melt-drip-slide {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 0.9; transform: translateY(2px) scale(1); }
  80% { opacity: 0.8; transform: translateY(14px) scale(1); }
  100% { opacity: 0; transform: translateY(18px) scale(0.5); }
}

/* --------------------------------------------------------------------------
   Scene Moods: the sky, snow and village react to data-mood on .winter-scene
   (set by setMood() in script.js). Everything fades with --mood-fade.
   Layers that fade fully out also turn invisible after the fade, so the
   browser stops drawing them.
   -------------------------------------------------------------------------- */
.sky-sunrise,
.sky-aurora,
.stars-layer,
.moon,
.sky-clouds,
.snowfall-depth {
  transition:
    opacity var(--mood-fade) ease,
    visibility 0s linear 0s;
}

/* Hidden layers wait for the fade to finish before turning invisible */
.sky-sunrise,
.sky-clouds,
.winter-scene[data-mood="wondering"] .depth-front,
.winter-scene[data-mood="wondering"] .depth-heavy,
.winter-scene[data-mood="melting"] .snowfall-depth,
.winter-scene[data-mood="melting"] .moon {
  transition:
    opacity var(--mood-fade) ease,
    visibility 0s linear var(--mood-fade);
}

.sky-sunrise,
.sky-clouds {
  opacity: 0;
  visibility: hidden;
}

/* Likely needs no rules: heavy snow, the full aurora and moon are the defaults */

/* Maybe: light snow, softer aurora, a few clouds drifting by */
.winter-scene[data-mood="wondering"] .sky-aurora { opacity: 0.6; }
.winter-scene[data-mood="wondering"] .stars-layer { opacity: 0.7; }
.winter-scene[data-mood="wondering"] .depth-front,
.winter-scene[data-mood="wondering"] .depth-heavy {
  opacity: 0;
  visibility: hidden;
}
.winter-scene[data-mood="wondering"] .sky-clouds {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--mood-fade) ease, visibility 0s linear 0s;
}

/* No Chance: the snow stops, the sky warms, the moon sets, the sun rises */
.winter-scene[data-mood="melting"] .sky-aurora { opacity: 0.25; }
.winter-scene[data-mood="melting"] .stars-layer { opacity: 0.1; }
.winter-scene[data-mood="melting"] .snowfall-depth {
  opacity: 0;
  visibility: hidden;
}
.winter-scene[data-mood="melting"] .sky-sunrise {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--mood-fade) ease, visibility 0s linear 0s;
}
.winter-scene[data-mood="melting"] .moon {
  opacity: 0;
  visibility: hidden;
}

/* The sun: the outer SVG group holds its place; this inner group slides it
   up from behind the hill and back down again */
.sun-rise {
  opacity: 0;
  transform: translateY(110px);
  transition:
    opacity var(--mood-fade) ease,
    transform 5s ease-in-out;
}

.winter-scene[data-mood="melting"] .sun-rise {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--mood-fade) ease,
    transform 5s ease-out;
}

/* The puddle under Mr. Chill grows slowly once he starts melting */
.puddle-pool {
  opacity: 0;
  transform: scale(0.2, 0.4);
  transform-origin: 0px 0px;
  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}

.winter-scene[data-mood="melting"] .puddle-pool {
  opacity: 1;
  transform: scale(1, 1);
  transition:
    opacity 2s ease 1s,
    transform 5s ease-out 1s;
}

.winter-scene[data-mood="melting"] .puddle-shine {
  animation: puddle-shimmer 4s ease-in-out infinite alternate;
}

@keyframes puddle-shimmer {
  0% { opacity: 0.35; }
  100% { opacity: 0.8; }
}

/* --------------------------------------------------------------------------
   Existing Scene Animations (Background & Villagers)
   -------------------------------------------------------------------------- */
.chill-waving-arm {
  transform-origin: 112px 125px;
  animation: chill-wave 3s ease-in-out infinite alternate;
}
@keyframes chill-wave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(8deg); }
}

.chill-throwing-arm {
  transform-origin: 18px 125px;
  animation: chill-arm-throw-cycle 6s ease-in-out infinite;
}
@keyframes chill-arm-throw-cycle {
  0%, 40% { transform: rotate(0deg); }
  46% { transform: rotate(26deg); }
  50% { transform: rotate(-32deg); }
  56%, 100% { transform: rotate(0deg); }
}

.chill-held-snowball {
  transform-box: fill-box;
  transform-origin: center;
  animation: chill-snowball-hide 6s ease-in-out infinite;
}
@keyframes chill-snowball-hide {
  0%, 48% { opacity: 1; transform: scale(1); }
  50%, 94% { opacity: 0; transform: scale(0); }
  98%, 100% { opacity: 1; transform: scale(1); }
}

/* Children Animations */
.animated-child-left {
  transform-origin: 24px 115px;
  animation: child-leo-bounce 6s ease-in-out infinite;
}
@keyframes child-leo-bounce {
  0%, 100% { transform: translate(420px, 310px); }
  15% { transform: translate(420px, 303px); }
  25% { transform: translate(420px, 310px); }
  60% { transform: translate(420px, 305px); }
  75% { transform: translate(420px, 310px); }
}

.child-left-arm {
  transform-origin: 12px 68px;
  animation: child-leo-throw-cycle 6s ease-in-out infinite;
}
@keyframes child-leo-throw-cycle {
  0% { transform: rotate(0deg); }
  4% { transform: rotate(-24deg); }
  7% { transform: rotate(38deg); }
  12%, 100% { transform: rotate(0deg); }
}

.child-hand-snowball {
  transform-box: fill-box;
  transform-origin: center;
  animation: leo-snowball-hide 6s ease-in-out infinite;
}
@keyframes leo-snowball-hide {
  0%, 6% { opacity: 1; transform: scale(1); }
  7%, 92% { opacity: 0; transform: scale(0); }
  96%, 100% { opacity: 1; transform: scale(1); }
}

/* 3s, so two bounces line up with the 6s snowball loop */
.animated-child-right {
  transform-origin: 24px 112px;
  animation: child-mia-bounce 3s ease-in-out infinite;
}
@keyframes child-mia-bounce {
  0%, 100% { transform: translate(835px, 315px); }
  50% { transform: translate(835px, 308px); }
}

/* Mia waves most of the loop, then winds back and throws at 74-78% */
.child-right-arm {
  transform-origin: 34px 65px;
  animation: mia-arm-throw-cycle 6s ease-in-out infinite;
}
@keyframes mia-arm-throw-cycle {
  0%, 16%, 32%, 48%, 64%, 84%, 100% { transform: rotate(0deg); }
  8%, 24%, 40%, 56%, 92% { transform: rotate(-16deg); }
  70% { transform: rotate(-6deg); }
  74% { transform: rotate(22deg); }
  78% { transform: rotate(-40deg); }
}

.mia-hand-snowball {
  transform-box: fill-box;
  transform-origin: center;
  animation: mia-snowball-hide 6s ease-in-out infinite;
}
@keyframes mia-snowball-hide {
  0%, 77% { opacity: 1; transform: scale(1); }
  78%, 94% { opacity: 0; transform: scale(0); }
  98%, 100% { opacity: 1; transform: scale(1); }
}

/* Dog Animations */
.animated-dog {
  transform-origin: 26px 48px;
  animation: dog-hop-chase 6s ease-in-out infinite;
}
@keyframes dog-hop-chase {
  0%, 48% { transform: translate(735px, 360px); }
  54% { transform: translate(735px, 344px) rotate(-4deg); }
  58% { transform: translate(735px, 360px) rotate(0deg); }
  64% { transform: translate(735px, 348px) rotate(3deg); }
  70%, 100% { transform: translate(735px, 360px); }
}

.dog-wagging-tail {
  transform-origin: 5px 28px;
  animation: dog-tail-wag 0.32s ease-in-out infinite alternate;
}
@keyframes dog-tail-wag {
  0% { transform: rotate(-18deg); }
  100% { transform: rotate(24deg); }
}

.dog-head-tilt {
  transform-origin: 36px 14px;
  animation: dog-tilt 2.5s ease-in-out infinite alternate;
}
@keyframes dog-tilt {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(10deg); }
}

.dog-scarf-flutter {
  transform-origin: 33px 22px;
  animation: dog-scarf-sway 1.8s ease-in-out infinite alternate;
}
@keyframes dog-scarf-sway {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-12deg); }
}

/* Snowball Arcs: one 6s loop shared with the throwing arms.
   7-21%  Leo -> Mr. Chill   (burst 1 on Mr. Chill's left side)
   49-64% Mr. Chill -> Leo   (burst 2 on Leo's coat)
   78-90% Mia -> Mr. Chill   (burst 3 on Mr. Chill's right side)
   The outer .flight-x group moves sideways at a steady speed; the inner
   .flight-y group slows as it rises and speeds up as it falls, which
   draws a real arc. All numbers are absolute scene coordinates. */
.flight-ball { opacity: 0; }

.flight-x-1 { animation: flight-1-x 6s linear infinite; }
.flight-y-1 { animation: flight-1-y 6s infinite; }
.flight-ball-1 { animation: flight-1-show 6s linear infinite; }
@keyframes flight-1-x {
  0%, 7% { transform: translateX(423px); }
  21%, 100% { transform: translateX(612px); }
}
@keyframes flight-1-y {
  0%, 7% { transform: translateY(346px); animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); }
  14.5% { transform: translateY(268px); animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); }
  21%, 100% { transform: translateY(322px); }
}
@keyframes flight-1-show {
  0%, 6.9% { opacity: 0; }
  7%, 20.9% { opacity: 1; }
  21%, 100% { opacity: 0; }
}

.flight-x-2 { animation: flight-2-x 6s linear infinite; }
.flight-y-2 { animation: flight-2-y 6s infinite; }
.flight-ball-2 { animation: flight-2-show 6s linear infinite; }
@keyframes flight-2-x {
  0%, 49% { transform: translateX(544px); }
  64%, 100% { transform: translateX(446px); }
}
@keyframes flight-2-y {
  0%, 49% { transform: translateY(345px); animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); }
  55.7% { transform: translateY(280px); animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); }
  64%, 100% { transform: translateY(386px); }
}
@keyframes flight-2-show {
  0%, 48.9% { opacity: 0; }
  49%, 63.9% { opacity: 1; }
  64%, 100% { opacity: 0; }
}

.flight-x-3 { animation: flight-3-x 6s linear infinite; }
.flight-y-3 { animation: flight-3-y 6s infinite; }
.flight-ball-3 { animation: flight-3-show 6s linear infinite; }
@keyframes flight-3-x {
  0%, 78% { transform: translateX(869px); }
  90%, 100% { transform: translateX(690px); }
}
@keyframes flight-3-y {
  0%, 78% { transform: translateY(336px); animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); }
  84.6% { transform: translateY(255px); animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); }
  90%, 100% { transform: translateY(312px); }
}
@keyframes flight-3-show {
  0%, 77.9% { opacity: 0; }
  78%, 89.9% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Impact puffs (the groups' positions are plain transform attributes;
   only the dots inside are scaled) */
.burst-group-1 .puff-dot { animation: puff-burst-1 6s ease-out infinite; }
.burst-group-2 .puff-dot { animation: puff-burst-2 6s ease-out infinite; }
.burst-group-3 .puff-dot { animation: puff-burst-3 6s ease-out infinite; }

@keyframes puff-burst-1 {
  0%, 20.9% { transform: scale(0); opacity: 0; }
  21% { transform: scale(1); opacity: 1; }
  24% { transform: scale(1.8); opacity: 0.7; }
  28%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes puff-burst-2 {
  0%, 63.9% { transform: scale(0); opacity: 0; }
  64% { transform: scale(1); opacity: 1; }
  67% { transform: scale(1.8); opacity: 0.7; }
  71%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes puff-burst-3 {
  0%, 89.9% { transform: scale(0); opacity: 0; }
  90% { transform: scale(1); opacity: 1; }
  93% { transform: scale(1.8); opacity: 0.7; }
  97%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Smoke & Lamp */
.smoke-puff-1 { animation: rise-smoke 4.2s ease-out infinite; animation-delay: 0s; }
.smoke-puff-2 { animation: rise-smoke 4.2s ease-out infinite; animation-delay: 1.4s; }
.smoke-puff-3 { animation: rise-smoke 4.2s ease-out infinite; animation-delay: 2.8s; }
@keyframes rise-smoke {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0.55; }
  60% { transform: translate(8px, -18px) scale(1.4); opacity: 0.35; }
  100% { transform: translate(16px, -36px) scale(2.1); opacity: 0; }
}

.lamp-flicker-glow {
  animation: lamp-flicker 4s ease-in-out infinite alternate;
}
@keyframes lamp-flicker {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* --------------------------------------------------------------------------
   Top navigation bar (all 3 pages; nav.js flips aria-expanded on the
   Menu and Learn buttons, and these rules show or hide the lists from it)
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nav-border);
}

.site-nav-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav-brand {
  min-width: 0;
  font-family: var(--font-theatrical);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-pure);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 8px;
}

.site-nav-mark {
  color: var(--info-accent);
}

.site-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border: none;
  border-radius: 10px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav-link:hover,
.site-nav-learn-btn[aria-expanded="true"] {
  background: var(--nav-hover-bg);
  color: var(--text-pure);
}

/* The page you're on */
.site-nav-link[aria-current="page"] {
  background: var(--nav-current-bg);
  color: var(--info-accent);
}

.site-nav-chevron,
.faq-chevron {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.site-nav-chevron {
  width: 0.75rem;
  height: 0.75rem;
}

.site-nav-learn-btn[aria-expanded="true"] .site-nav-chevron {
  transform: rotate(180deg);
}

/* "Learn" dropdown (desktop) */
.site-nav-learn {
  position: relative;
}

.site-nav-group-label,
.site-nav-toggle {
  display: none;
}

.site-nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 12rem;
  list-style: none;
  padding: 0.4rem;
  background: var(--nav-dropdown-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: var(--nav-shadow);
}

.site-nav-learn-btn[aria-expanded="true"] ~ .site-nav-sub {
  display: block;
  animation: nav-drop-in 0.18s ease;
}

@keyframes nav-drop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-nav-sublink {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-nav-sublink:hover {
  background: var(--nav-hover-bg);
  color: var(--text-pure);
}

/* One clear focus ring for every link and button in the bar and info pages */
.site-nav a:focus-visible,
.site-nav button:focus-visible,
.info-main a:focus-visible,
.faq-question:focus-visible,
.site-footer a:focus-visible,
.more-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Info content: home "How it works" + FAQ, Privacy and About pages.
   Plain, serious tone; no animations except the soft FAQ reveal.
   -------------------------------------------------------------------------- */
/* Quiet link at the bottom of the panel pointing down to the text below */
.more-link {
  margin-top: auto; /* sits at the bottom of the panel */
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.more-link:hover,
.more-link:focus-visible {
  color: var(--info-link);
  border-color: var(--info-link);
}

/* Desktop: the side panel's bottom edge fades into the first band's color
   (the snowy ground does the same with groundFadeGrad), so there's no line.
   On phones the panel sits on top of the scene, so it keeps its own edge. */
@media (min-width: 901px) {
  .side-panel {
    background: linear-gradient(180deg, var(--panel-bg) calc(100% - 64px), var(--info-bg) 100%);
    border-image: linear-gradient(180deg, var(--panel-border) calc(100% - 64px), transparent 100%) 1;
  }
}

/* Full-width bands, each a different shade. scroll-margin keeps headings
   clear of the sticky nav bar when a link jumps to them. */
.info-band {
  background: var(--info-bg);
  padding: 4rem 1rem;
  scroll-margin-top: var(--nav-h);
}

.info-band--alt {
  background: var(--info-band-alt);
  border-top: 1px solid var(--info-band-line);
  border-bottom: 1px solid var(--info-band-line);
}

.info-band--hero {
  background: linear-gradient(180deg, var(--info-band-hero) 0%, var(--info-bg) 100%);
  padding: 3.5rem 1rem 2.75rem;
}

.info-inner {
  max-width: 760px;
  margin: 0 auto;
}

.info-main p,
.info-main li {
  line-height: 1.65;
  color: var(--text-soft);
}

.info-main a {
  color: var(--info-link);
  text-underline-offset: 2px;
}

.info-main strong {
  color: var(--text-pure);
  font-weight: 600;
}

.info-main .info-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--info-accent);
  margin-bottom: 0.5rem;
}

.info-title {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-pure);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.info-title--small {
  font-size: 1.5rem;
}

.info-lead {
  font-size: 1.08rem;
  max-width: 62ch;
}

.info-main .page-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

/* "Last updated" placed under a lead paragraph instead of above it */
.info-main .page-meta--after,
.info-band--intro .page-meta {
  margin: 1rem 0 0;
}

/* Home: the short "What is a snow day calculator?" definition. Same shade as
   How it works, so the two read as one section. */
.info-main .info-band--intro {
  padding-bottom: 0;
}

.info-band--intro + .info-band {
  padding-top: 2.75rem;
}

.info-band--intro .info-lead {
  max-width: 68ch;
}

/* Method: numbered steps with round number badges */
.info-steps {
  list-style: none;
  counter-reset: info-step;
  display: grid;
  gap: 1.35rem;
  margin-top: 2.25rem;
}

.info-steps > li {
  counter-increment: info-step;
  position: relative;
  padding-left: 3rem;
}

.info-steps > li::before {
  content: counter(info-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--info-points);
  border: 1px solid var(--notice-border);
  color: var(--info-accent);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-steps h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-pure);
  line-height: 1.35;
  margin-bottom: 0.15rem;
}

/* Factor cards: Snow, Ice, Cold, Wind with their points */
.factor-heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-pure);
  margin: 3rem 0 1rem;
}

.factor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.factor-card {
  background: var(--factor-card-bg);
  border: 1px solid var(--info-card-border);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.factor-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.factor-icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--factor-icon-bg);
  color: var(--info-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.factor-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.factor-card h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-pure);
  line-height: 1.3;
}

.info-main .factor-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.factor-points {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.factor-points th,
.factor-points td {
  padding: 0.45rem 0;
  border-top: 1px solid var(--info-card-border);
}

.factor-points tr:first-child th,
.factor-points tr:first-child td {
  border-top: none;
}

.factor-points th {
  text-align: left;
  font-weight: 400;
  color: var(--text-soft);
}

.factor-points td {
  text-align: right;
  font-weight: 600;
  color: var(--info-accent);
  font-variant-numeric: tabular-nums;
}

.info-main .factor-note {
  margin-top: auto;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Plain notice box (limits of the estimate) */
.info-notice {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-left: 3px solid var(--info-accent);
}

.info-notice h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-pure);
  margin-bottom: 0.3rem;
}

.info-notice p {
  font-size: 0.95rem;
}

/* FAQ accordion: built-in <details>, so it opens with a tap, Enter or Space */
.faq-group-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 2.25rem 0 0.75rem;
}

.faq-item {
  background: var(--faq-item-bg);
  border: 1px solid var(--info-card-border);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.faq-item + .faq-item {
  margin-top: 0.6rem;
}

.faq-item[open] {
  border-color: var(--faq-open-border);
}

.faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: 12px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text-pure);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  background: var(--nav-hover-bg);
}

.faq-chevron {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--info-accent);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.15rem 1.1rem;
}

.faq-item[open] .faq-answer {
  animation: faq-reveal 0.25s ease;
}

@keyframes faq-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.faq-answer p {
  font-size: 0.97rem;
}

/* Privacy: key points summary */
.key-points {
  background: var(--key-points-bg);
  border: 1px solid var(--key-points-border);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
}

.key-points-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-pure);
  margin-bottom: 0.85rem;
}

.key-points-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
}

.key-points-list li {
  position: relative;
  padding-left: 1.75rem;
}

/* A small check mark in a soft circle, drawn with CSS */
.key-points-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--factor-icon-bg);
}

.key-points-list li::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.45rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--info-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Privacy: "On this page" list beside the numbered sections */
.info-inner--toc {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.page-toc {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}

.page-toc-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.page-toc ol {
  list-style: none;
  border-left: 1px solid var(--info-card-border);
}

.page-toc a {
  display: block;
  margin-left: -1px;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 2px solid transparent;
  font-size: 0.92rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-toc a:hover {
  color: var(--text-pure);
  border-left-color: var(--info-accent);
}

.doc-section {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.doc-section + .doc-section {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--info-card-border);
}

.doc-section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-pure);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.doc-section p + p,
.doc-section p + .doc-list {
  margin-top: 0.7rem;
}

.doc-list {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
}

.doc-list li::marker {
  color: var(--info-accent);
}

/* About: section cards */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.info-card {
  background: var(--info-card-bg);
  border: 1px solid var(--info-card-border);
  border-radius: 16px;
  padding: 1.5rem;
}

.info-card h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-pure);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.info-card p {
  font-size: 0.98rem;
}

.info-card p + p {
  margin-top: 0.7rem;
}

.info-card--notice {
  background: var(--notice-bg);
  border-color: var(--notice-border);
  border-left: 3px solid var(--info-accent);
}

/* About: the sign-off under the "Why I built this" note */
.about-signoff {
  margin-top: 1rem;
  font-family: var(--font-theatrical);
  font-weight: 500;
  color: var(--text-muted);
}

/* Shared footer, the darkest band */
.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--info-band-line);
  padding: 2.25rem 1rem 2.5rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.site-footer a {
  color: var(--info-link);
}

/* Footer links: How it works · FAQ · Privacy · About */
.footer-nav {
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
}

.footer-nav a {
  text-decoration: none;
  border-bottom: 1px dotted var(--info-link);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--text-pure);
  border-color: var(--text-pure);
}

/* The page you're already on: quiet, not a link-looking link */
.footer-nav a[aria-current="page"] {
  color: var(--text-muted);
  border-bottom-color: transparent;
}

/* Gentle glide down to the text, only for people who don't mind motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --------------------------------------------------------------------------
   Mobile-First & Portrait Responsive Layout
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Phones and small tablets: panel on top, scene below */
  .winter-scene {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--nav-h));
  }

  .side-panel {
    width: 100%;
    height: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--panel-border);
    border-radius: 0 0 18px 18px;
    padding: 1.1rem 0.9rem 0.9rem;
    gap: 0.65rem;
  }

  /* Grows to fill the rest of the screen; the minimum leaves sky above
     the village for Mr. Chill's speech bubble */
  .scene-area {
    flex: 1 0 auto;
    min-height: 280px;
  }

  /* This box's height grows to fill the screen, so the browser can't use it
     for cqh (it reads as 0). Phones are narrow, so full width always fits. */
  .scene-frame {
    width: 100%;
  }

  /* On a wide tablet, keep the search and result from stretching edge to edge */
  .side-panel > * {
    max-width: 560px;
  }

  /* Top nav: a Menu button opens the links in a panel under the bar;
     Learn's two links show as a labelled group instead of a dropdown */
  .site-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: none;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    background: var(--nav-hover-bg);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-pure);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .site-nav-toggle[aria-expanded="true"] {
    background: var(--nav-current-bg);
  }

  /* Three short bars drawn with one line and its two shadows */
  .site-nav-toggle-icon {
    width: 16px;
    height: 2px;
    margin: 5px 0;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }

  .site-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem;
    background: var(--nav-dropdown-bg);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
  }

  .site-nav-toggle[aria-expanded="true"] + .site-nav-menu {
    display: block;
    animation: nav-drop-in 0.18s ease;
  }

  .site-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .site-nav-link {
    width: 100%;
    padding: 0.75rem 0.85rem;
    font-size: 1rem;
  }

  .site-nav-learn-btn {
    display: none;
  }

  .site-nav-group-label {
    display: block;
    padding: 0.75rem 0.85rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .site-nav-sub {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0.25rem 0.75rem;
    background: none;
    border: none;
    box-shadow: none;
  }

  .site-nav-sublink {
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
  }

  /* Privacy: "On this page" sits above the sections instead of beside them */
  .info-inner--toc {
    max-width: 760px;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .page-toc {
    position: static;
  }
}

/* Phones: slightly smaller text and tighter spacing */
@media (max-width: 650px) {
  .app-title {
    font-size: 1.55rem;
  }

  .app-subtitle {
    font-size: 0.84rem;
  }

  .bubble-line1 {
    font-size: 0.8rem;
  }

  .bubble-line2 {
    font-size: 0.74rem;
  }

  .search-bar-container {
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    gap: 0.4rem;
  }

  .search-input {
    font-size: 0.9rem;
  }

  .search-btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem;
  }

  .chance-result {
    padding: 0.65rem 0.8rem;
  }

  .chance-number {
    font-size: 2.3rem;
  }

  .weather-stat {
    padding: 0.35rem 0.5rem;
  }

  .weather-stat dd {
    font-size: 0.98rem;
  }

  .weather-reasons li {
    font-size: 0.78rem;
  }

  .sharpen-btn {
    font-size: 0.74rem;
  }

  /* Smaller blur is lighter work for phones */
  .aurora-ribbon {
    filter: blur(9px);
  }

  .site-nav-inner {
    padding: 0 1rem;
  }

  .site-nav-brand {
    font-size: 0.98rem;
  }

  .info-band {
    padding: 2.75rem 1rem;
  }

  .info-band--hero {
    padding: 2.5rem 1rem 2rem;
  }

  .info-title {
    font-size: 1.6rem;
  }

  .info-title--small {
    font-size: 1.3rem;
  }

  .info-lead {
    font-size: 1rem;
  }

  .info-steps > li {
    padding-left: 2.6rem;
  }

  .factor-grid,
  .key-points-list,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .factor-heading {
    margin-top: 2.25rem;
  }

  .info-card,
  .key-points {
    padding: 1.2rem 1.1rem;
  }

  .faq-question {
    padding: 0.9rem 1rem;
    font-size: 0.98rem;
  }

  .faq-answer {
    padding: 0 1rem 1rem;
  }
}

/* Small phones, and laptops where the side panel is narrow: the search
   button moves under the box so the placeholder text fits in full */
@media (max-width: 440px), (min-width: 901px) and (max-width: 1350px) {
  .search-bar-container {
    flex-wrap: wrap;
    padding: 0.5rem 0.65rem;
    gap: 0.5rem;
  }

  .search-input {
    width: calc(100% - 2rem);
  }

  .search-btn {
    width: 100%;
    justify-content: center;
  }

  .search-hint {
    text-align: center;
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Accessibility: Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aurora-glow,
  .star,
  .flake,
  .animated-mr-chill,
  .mood-shiver,
  .mood-wondering,
  .mood-melting .chill-breathing-body,
  .chill-waving-arm,
  .chill-throwing-arm,
  .chill-held-snowball,
  .animated-child-left,
  .child-left-arm,
  .child-hand-snowball,
  .animated-child-right,
  .child-right-arm,
  .animated-dog,
  .dog-wagging-tail,
  .dog-head-tilt,
  .dog-scarf-flutter,
  .flight-x,
  .flight-y,
  .flight-ball,
  .burst-group-1 .puff-dot,
  .burst-group-2 .puff-dot,
  .burst-group-3 .puff-dot,
  .mia-hand-snowball,
  .aurora-ribbon,
  .cloud-track,
  .melt-drip,
  .puddle-shine,
  .chill-recovering .chill-breathing-body,
  .smoke-puff-1,
  .smoke-puff-2,
  .smoke-puff-3,
  .lamp-flicker-glow,
  .sweat-drop,
  .bubble-pop,
  .school-btn,
  .chance-result[data-level] .school-btn,
  .weather-details[open] .weather-details-body,
  .site-nav-sub,
  .site-nav-menu,
  .faq-answer,
  .search-btn.is-loading .btn-icon {
    animation: none !important;
  }

  /* Loading shows only the "Checking…" text, no snowflake */
  .search-btn.is-loading .btn-icon {
    display: none;
  }

  /* Nav and FAQ arrows simply point the new way, menus simply appear */
  .site-nav-chevron,
  .faq-chevron,
  .site-nav-link,
  .site-nav-sublink,
  .site-nav-toggle,
  .faq-item,
  .faq-question,
  .page-toc a,
  .footer-nav a {
    transition: none;
  }

  .weather-details-summary::before {
    transition: none;
  }

  .flake {
    display: none;
  }

  /* The meter jumps straight to its value instead of sliding */
  .chance-meter-fill,
  .chance-number,
  .chance-label,
  .sharpen-btn,
  .share-btn,
  .school-btn,
  .copy-text-btn,
  .more-link {
    transition: none;
  }

  .share-btn:hover:not(:disabled),
  .school-btn:hover,
  .copy-text-btn:hover {
    transform: none;
  }

  .flight-x,
  .burst-group-1,
  .burst-group-2,
  .burst-group-3 {
    display: none;
  }

  /* Still sweat and drips on the melting face */
  .mood-melting .sweat-drop,
  .mood-melting .melt-drip {
    opacity: 1;
  }

  /* Mood changes still fade, but nothing slides: the sun is simply up,
     the puddle simply there, and Mr. Chill's hat simply tilted */
  .sun-rise,
  .puddle-pool,
  .chill-hat-group,
  .chill-face-state {
    transition: opacity var(--mood-fade) ease !important;
  }
}