/**
 * Grow — CSS (Self-contained, no imports)
 * Season-based visual system for the plant-growing game.
 * Includes tokens and base resets directly to ensure compatibility.
 */

/* ══════════════════════════════════════════════════════
   DESIGN TOKENS & RESET
   ══════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --color-bg-deep:    hsl(230, 35%, 7%);
  --color-bg-surface: hsl(230, 28%, 10%);
  --color-bg-card:    hsl(230, 25%, 13%);
  --color-bg-card-hover: hsl(230, 25%, 17%);

  /* ── Text ── */
  --color-text-primary: hsl(220, 20%, 92%);
  --color-text-muted:   hsl(220, 15%, 55%);
  --color-text-dim:     hsl(220, 12%, 35%);

  /* ── Accent ── */
  --color-accent:       hsl(185, 70%, 55%);
  --color-accent-dim:   hsl(185, 60%, 40%);
  --color-accent-glow:  hsla(185, 70%, 55%, 0.35);

  /* ── Typography ── */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   clamp(0.65rem,  1.5vw, 0.75rem);
  --text-sm:   clamp(0.8rem,   2vw,   0.875rem);
  --text-base: clamp(0.9rem,   2.5vw, 1rem);
  --text-md:   clamp(1rem,     3vw,   1.125rem);
  --text-lg:   clamp(1.1rem,   3.5vw, 1.375rem);
  --text-xl:   clamp(1.3rem,   4vw,   1.75rem);
  --text-2xl:  clamp(1.6rem,   5vw,   2.25rem);
  --text-3xl:  clamp(2rem,     6vw,   3rem);

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px hsla(230, 40%, 3%, 0.4);
  --shadow-md:  0 4px 20px hsla(230, 40%, 3%, 0.5);
  --shadow-lg:  0 8px 40px hsla(230, 40%, 3%, 0.6);
  --shadow-glow: 0 0 40px var(--color-accent-glow);

  /* ── Animation ── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sin: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-deep);
  min-height: 100dvh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   SEASON DESIGN TOKENS
   ══════════════════════════════════════════════════════ */

body.season-spring {
  --ground-col:      hsl(130, 45%, 10%);
  --ground-glow-col: hsla(130, 60%, 28%, 0.5);
  --grass-col:       hsl(130, 62%, 19%);
  --trunk-col:       hsl(28, 52%, 27%);
  --lc-col:          hsl(130, 58%, 35%);
  --lc-dark-col:     hsl(140, 53%, 25%);
  --lc-bg-col:       hsla(130, 58%, 35%, 0.28);
  --flower-col:      hsl(340, 72%, 66%);
  --flower-center:   hsl(48, 88%, 65%);
  --fruit-col:       transparent;
  --fruit-col-2:     transparent;
  --bud-col:         hsl(130, 68%, 52%);
  --accent-col:      hsl(330, 72%, 65%);
  --accent-glow:     hsla(330, 72%, 65%, 0.42);
  --prog-col:        hsl(130, 68%, 46%);
  --prog-glow:       hsla(130, 68%, 46%, 0.55);
  --sdot-col:        hsl(330, 72%, 65%);
  --sdot-glow:       hsla(330, 72%, 65%, 0.55);
  --sway-angle:      0.5deg;
  --sway-duration:   6s;
}

body.season-summer {
  --ground-col:      hsl(132, 55%, 8%);
  --ground-glow-col: hsla(132, 62%, 18%, 0.5);
  --grass-col:       hsl(142, 65%, 15%);
  --trunk-col:       hsl(25, 55%, 21%);
  --lc-col:          hsl(140, 65%, 28%);
  --lc-dark-col:     hsl(150, 60%, 20%);
  --lc-bg-col:       hsla(140, 65%, 28%, 0.28);
  --flower-col:      transparent;
  --flower-center:   transparent;
  --fruit-col:       hsl(8, 82%, 50%);
  --fruit-col-2:     hsl(38, 92%, 52%);
  --bud-col:         hsl(130, 68%, 52%);
  --accent-col:      hsl(48, 90%, 58%);
  --accent-glow:     hsla(48, 90%, 58%, 0.45);
  --prog-col:        hsl(50, 90%, 54%);
  --prog-glow:       hsla(50, 90%, 54%, 0.55);
  --sdot-col:        hsl(48, 90%, 58%);
  --sdot-glow:       hsla(48, 90%, 58%, 0.55);
  --sway-angle:      0.8deg;
  --sway-duration:   5s;
}

body.season-autumn {
  --ground-col:      hsl(25, 38%, 10%);
  --ground-glow-col: hsla(25, 52%, 22%, 0.5);
  --grass-col:       hsl(30, 48%, 17%);
  --trunk-col:       hsl(22, 50%, 18%);
  --lc-col:          hsl(28, 78%, 40%);
  --lc-dark-col:     hsl(14, 82%, 30%);
  --lc-bg-col:       hsla(28, 78%, 40%, 0.28);
  --flower-col:      transparent;
  --flower-center:   transparent;
  --fruit-col:       transparent;
  --fruit-col-2:     transparent;
  --bud-col:         hsl(130, 68%, 52%);
  --accent-col:      hsl(30, 88%, 58%);
  --accent-glow:     hsla(30, 88%, 58%, 0.45);
  --prog-col:        hsl(28, 85%, 52%);
  --prog-glow:       hsla(28, 85%, 52%, 0.55);
  --sdot-col:        hsl(30, 88%, 58%);
  --sdot-glow:       hsla(30, 88%, 58%, 0.55);
  --sway-angle:      2.0deg;
  --sway-duration:   3s;
}

body.season-winter {
  --ground-col:      hsl(215, 28%, 12%);
  --ground-glow-col: hsla(215, 40%, 36%, 0.38);
  --grass-col:       hsl(215, 25%, 19%);
  --trunk-col:       hsl(210, 18%, 27%);
  --lc-col:          hsl(210, 28%, 48%);
  --lc-dark-col:     hsl(215, 35%, 36%);
  --lc-bg-col:       hsla(210, 28%, 48%, 0.18);
  --flower-col:      transparent;
  --flower-center:   transparent;
  --fruit-col:       transparent;
  --fruit-col-2:     transparent;
  --bud-col:         hsl(130, 68%, 52%);
  --accent-col:      hsl(200, 75%, 62%);
  --accent-glow:     hsla(200, 75%, 62%, 0.44);
  --prog-col:        hsl(200, 70%, 58%);
  --prog-glow:       hsla(200, 70%, 58%, 0.5);
  --sdot-col:        hsl(200, 75%, 62%);
  --sdot-glow:       hsla(200, 75%, 62%, 0.55);
  --sway-angle:      0.25deg;
  --sway-duration:   8s;
}

/* ══════════════════════════════════════════════════════
   GLOBAL ELEMENTS
   ══════════════════════════════════════════════════════ */

#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   SCREENS
   ══════════════════════════════════════════════════════ */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 380ms ease, transform 380ms ease;
  z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.screen.season-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-col);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  animation: s-flash 500ms ease forwards;
}
@keyframes s-flash {
  0%   { opacity: 0.22; }
  100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════════
   SKY LAYERS
   ══════════════════════════════════════════════════════ */

.sky-layers {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sky {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.spring-sky { background: linear-gradient(168deg, hsl(196,52%,6%) 0%, hsl(165,46%,4%) 48%, hsl(135,42%,3%) 100%); }
.summer-sky { background: linear-gradient(168deg, hsl(220,52%,7%) 0%, hsl(192,48%,5%) 48%, hsl(162,52%,4%) 100%); }
.autumn-sky { background: linear-gradient(168deg, hsl(15,40%,8%)  0%, hsl(6,44%,6%)   48%, hsl(355,38%,5%) 100%); }
.winter-sky { background: linear-gradient(168deg, hsl(228,48%,8%) 0%, hsl(218,52%,6%) 48%, hsl(232,58%,5%) 100%); }

body.season-spring .spring-sky { opacity: 1; }
body.season-summer .summer-sky { opacity: 1; }
body.season-autumn .autumn-sky { opacity: 1; }
body.season-winter .winter-sky { opacity: 1; }

/* ══════════════════════════════════════════════════════
   NAV BACK
   ══════════════════════════════════════════════════════ */

.nav-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsla(220, 20%, 20%, 0.5);
  border: 1px solid hsla(220, 20%, 40%, 0.18);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease, transform 200ms var(--ease-bounce);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}@media (hover: hover) and (pointer: fine) {

.nav-back:hover  { background: hsla(220,20%,30%,0.65); color: var(--color-text-primary); transform: scale(1.06); }
}

.nav-back:active { transform: scale(0.95); }

/* ══════════════════════════════════════════════════════
   INTRO SCREEN
   ══════════════════════════════════════════════════════ */

#screen-intro {
  align-items: center;
  justify-content: center;
}

.intro-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 400px;
  min-height: 100dvh;
  padding: 0 clamp(1.5rem, 6vw, 2.5rem);
}

.intro-inner > .nav-back {
  position: absolute;
  top: max(env(safe-area-inset-top), 1.4rem);
  left: clamp(1.5rem, 5vw, 2rem);
}

.intro-plant-preview {
  margin-top: clamp(4.5rem, 16vw, 6.5rem);
  margin-bottom: clamp(1.5rem, 5vw, 2rem);
  animation: intro-float 4s ease-in-out infinite;
}
@keyframes intro-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%       { transform: translateY(-11px) rotate(1.5deg); }
}

.intro-svg {
  width: clamp(130px, 44vw, 175px);
  height: auto;
  filter: drop-shadow(0 0 22px hsla(130, 62%, 38%, 0.32));
}

/* Intro SVG element colors (always spring palette) */
.i-ground      { fill: hsl(130, 45%, 10%); }
.i-ground-glow { fill: hsla(130, 60%, 28%, 0.4); }
.i-trunk       { stroke: hsl(28, 52%, 27%); }
.i-branch      { stroke: hsl(28, 52%, 27%); }
.i-leaf-bg     { fill: hsla(130, 58%, 35%, 0.28); }
.i-leaf        { fill: hsl(130, 58%, 35%); }
.i-crown       { fill: hsl(140, 53%, 25%); }
.i-flower      { fill: hsl(340, 72%, 66%); }

.intro-game-num {
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(130, 68%, 46%);
  margin-bottom: 0.4rem;
}
.intro-title {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 14vw, 5.5rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--color-text-primary) 0%, hsl(130, 65%, 60%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.intro-desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: clamp(1.8rem, 7vw, 2.8rem);
}
.intro-desc em {
  font-style: normal;
  color: hsl(130, 68%, 58%);
}
.intro-footer {
  margin-top: auto;
  padding-bottom: max(env(safe-area-inset-bottom), 1.8rem);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
  background: linear-gradient(135deg, hsl(130, 58%, 34%), hsl(160, 55%, 27%));
  color: hsl(130, 80%, 88%);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  padding: 0.95rem 2rem;
  border-radius: var(--radius-full);
  border: 1px solid hsla(130, 60%, 50%, 0.28);
  box-shadow: 0 0 26px hsla(130, 65%, 38%, 0.38), inset 0 1px 0 hsla(130, 80%, 70%, 0.18);
  cursor: pointer;
  transition: transform 200ms var(--ease-bounce), box-shadow 200ms ease;
}@media (hover: hover) and (pointer: fine) {

.start-btn:hover  { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 44px hsla(130,65%,38%,0.55), inset 0 1px 0 hsla(130,80%,70%,0.18); }
}

.start-btn:active { transform: scale(0.97); }
.intro-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Mood teaser row */
.intro-mood-teaser {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
  background: hsla(220, 25%, 14%, 0.55);
  border: 1px solid hsla(220, 25%, 40%, 0.14);
  border-radius: var(--radius-full);
  padding: 0.45rem 1.1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: clamp(0.8rem, 3vw, 1.2rem);
}
.mood-teaser-label {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mood-teaser-sep {
  color: var(--color-text-dim);
  font-size: var(--text-xs);
}
.mood-teaser-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: hsl(130, 68%, 62%);
  transition: color 400ms ease;
}
.mood-teaser-tempo {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 300;
}

/* ══════════════════════════════════════════════════════
   PLAY SCREEN LAYOUT
   ══════════════════════════════════════════════════════ */

.play-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(env(safe-area-inset-top), 1rem) 1.25rem 0.7rem;
  gap: 0.75rem;
}
.hdr-spacer { width: 40px; flex-shrink: 0; }

.season-dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsla(220, 20%, 32%, 0.45);
  border: 1.5px solid hsla(220, 20%, 45%, 0.18);
  transition: background 500ms ease, box-shadow 500ms ease, transform 300ms var(--ease-bounce);
}
.sdot.active {
  background: var(--sdot-col);
  border-color: var(--sdot-col);
  box-shadow: 0 0 9px var(--sdot-glow);
  transform: scale(1.45);
}
.sdot.visited {
  background: hsla(220, 20%, 50%, 0.44);
  border-color: hsla(220, 20%, 50%, 0.28);
}

.season-info {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 1.5rem 0.5rem;
}
.s-emoji {
  font-size: 1.5rem;
  line-height: 1;
  transition: all 500ms var(--ease-bounce);
}
.s-label {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.s-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 300;
}

/* ══════════════════════════════════════════════════════
   TAP ZONE + PLANT
   ══════════════════════════════════════════════════════ */

.tap-zone {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
  z-index: 2;
}

.plant-svg {
  width: 100%;
  max-width: 360px;
  max-height: calc(100dvh - 210px);
  height: auto;
  position: relative;
  z-index: 2;
  transform-origin: 50% 93%;
  animation: gentle-sway var(--sway-duration, 6s) ease-in-out infinite;
  overflow: visible !important;
}

@keyframes gentle-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(var(--sway-angle, 0deg)); }
}
.plant-svg.tap-pulse {
  animation: tap-pulse 270ms var(--ease-bounce) forwards;
}
.plant-svg.stage-bloom {
  filter: drop-shadow(0 0 18px var(--accent-glow)) drop-shadow(0 0 5px var(--accent-glow));
  transition: filter 700ms ease;
}
@keyframes tap-pulse {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.02) translateY(-2px); }
  100% { transform: scale(1); }
}

.rhythm-ring {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 195px;
  height: 195px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-col);
  pointer-events: none;
  opacity: 0.1;
  z-index: 3;
  transition: border-color 1.2s ease;
}
.rhythm-ring.bonus {
  opacity: 1 !important;
  box-shadow: 0 0 28px 10px var(--accent-glow) !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.tap-hint {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
  z-index: 4;
  transition: opacity 600ms ease;
}
.tap-hint.hidden { opacity: 0; }
.tap-hint-icon {
  font-size: 1.8rem;
  animation: hint-float 2.3s ease-in-out infinite;
}
@keyframes hint-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.tap-hint-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════════════════ */

.play-bottom {
  position: relative;
  z-index: 5;
  padding: 0.5rem 1.5rem max(env(safe-area-inset-bottom), 1.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.prog-label {
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.prog-bar {
  width: 100%;
  height: 5px;
  background: hsla(220, 20%, 18%, 0.6);
  border-radius: 99px;
  position: relative;
  overflow: visible;
}
.prog-fill {
  height: 100%;
  width: 0%;
  background: var(--prog-col);
  border-radius: 99px;
  transition: width 320ms ease, background 1.3s ease;
  box-shadow: 0 0 10px var(--prog-glow);
  position: relative;
}
.prog-fill::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background: var(--prog-col);
  border-radius: 50%;
  box-shadow: 0 0 7px var(--prog-glow);
}
.s-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 11px;
  background: hsla(220, 20%, 48%, 0.32);
  border-radius: 1px;
}

/* ══════════════════════════════════════════════════════
   PLANT SVG ELEMENT COLOURS
   ══════════════════════════════════════════════════════ */

.pelem, .selem { transition: opacity 720ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.selem         { transition: opacity 950ms ease; }

.ground-glow { fill: var(--ground-glow-col); }
.ground-base { fill: var(--ground-col); transition: fill 1.5s ease; }
.grass       { fill: var(--grass-col);  transition: fill 1.5s ease; }

.seed      { fill: var(--trunk-col); }
.seed-root { stroke: var(--trunk-col); fill: none; stroke-linecap: round; }

.trunk  { stroke: var(--trunk-col); fill: none; stroke-linecap: round; transition: stroke 1.3s ease; }
.branch { stroke: var(--trunk-col); fill: none; stroke-linecap: round; transition: stroke 1.3s ease; }

.lc-bg     { fill: var(--lc-bg-col);   transition: fill 1.3s ease; }
.lc        { fill: var(--lc-col);       transition: fill 1.3s ease; }
body.season-winter .lc { fill: url(#winter-leaf-grad) !important; }
.crown-leaf{ fill: var(--lc-dark-col); transition: fill 1.3s ease; }
body.season-winter .crown-leaf { fill: url(#winter-leaf-grad-dark) !important; }
.crown-bg  { fill: var(--lc-bg-col);   transition: fill 1.3s ease; }
.leaf-sm   { fill: var(--lc-col);       transition: fill 1.3s ease; }
body.season-winter .leaf-sm { fill: url(#winter-leaf-grad) !important; }

.fl-o { fill: var(--flower-col);             transition: fill 900ms ease; }
.fl-i { fill: var(--flower-center, hsl(48,88%,65%)); }

.fr  { fill: var(--fruit-col);                 transition: fill 900ms ease; }
.fr2 { fill: var(--fruit-col-2, var(--fruit-col)); transition: fill 900ms ease; }

.snow        { display: none; }
.snow-crown  { display: none; }

.bud      { fill: var(--bud-col); }
.bud-glow { fill: var(--bud-col); opacity: 0.45; }

/* ══════════════════════════════════════════════════════
   COMPLETE SCREEN
   ══════════════════════════════════════════════════════ */

#screen-complete {
  align-items: center;
  justify-content: flex-start;
  background: hsl(228, 40%, 5%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.complete-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: max(env(safe-area-inset-top), 2rem) clamp(1.5rem, 6vw, 2.5rem) max(env(safe-area-inset-bottom), 2rem);
  max-width: 480px;
  width: 100%;
  gap: 0.85rem;
  min-height: 100%;
}
.cmp-emoji {
  font-size: 4.5rem;
  line-height: 1;
  animation: cmp-bounce 600ms var(--ease-bounce) 150ms both;
}
@keyframes cmp-bounce {
  from { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
.cmp-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cmp-msg {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  font-weight: 300;
  line-height: 1.65;
}
.season-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.ss-dot  { font-size: 1.6rem; line-height: 1; }
.ss-line { flex: 1; height: 1px; background: hsla(220,20%,35%,0.4); min-width: 18px; }
.next-suggestion {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-accent);
  text-align: center;
  margin: 0.25rem 0;
}
.next-suggestion:empty { display: none; }
.cmp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: linear-gradient(135deg, hsl(130,58%,34%), hsl(160,55%,27%));
  color: hsl(130, 80%, 88%);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-full);
  border: 1px solid hsla(130, 60%, 50%, 0.28);
  box-shadow: 0 0 22px hsla(130, 65%, 38%, 0.4);
  cursor: pointer;
  transition: transform 200ms var(--ease-bounce), box-shadow 200ms ease;
}@media (hover: hover) and (pointer: fine) {

.btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 0 38px hsla(130,65%,38%,0.55); }
}

.btn-primary:active { transform: scale(0.97); }
.btn-ghost {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid hsla(220, 20%, 35%, 0.22);
  display: block;
  transition: color 200ms ease, border-color 200ms ease;
}@media (hover: hover) and (pointer: fine) {

.btn-ghost:hover { color: var(--color-text-primary); border-color: hsla(220,20%,50%,0.32); }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .plant-svg.tap-pulse { animation: none; }
  .intro-plant-preview { animation: none; }
  .tap-hint-icon { animation: none; }
  .cmp-emoji { animation: none; }
  .sky { transition: none; }
}

/* ══════════════════════════════════════════════════════
   RARE EVENT BACKGROUNDS
   ══════════════════════════════════════════════════════ */

body.rare-petal-storm .spring-sky,
body.rare-petal-storm .summer-sky,
body.rare-petal-storm .autumn-sky,
body.rare-petal-storm .winter-sky {
  /* Intensified blush overlay — canvas handles extra petals */
  opacity: 0;
}
body.rare-petal-storm.season-spring .spring-sky { opacity: 1; filter: hue-rotate(5deg) saturate(1.3); }

body.rare-aurora.season-spring  .spring-sky { background: linear-gradient(168deg, hsl(260,50%,8%) 0%, hsl(185,70%,5%) 100%); opacity: 1; }
body.rare-aurora.season-summer  .summer-sky { background: linear-gradient(168deg, hsl(260,50%,8%) 0%, hsl(185,70%,5%) 100%); opacity: 1; }
body.rare-aurora.season-autumn  .autumn-sky { background: linear-gradient(168deg, hsl(260,50%,8%) 0%, hsl(185,70%,5%) 100%); opacity: 1; }
body.rare-aurora.season-winter  .winter-sky { background: linear-gradient(168deg, hsl(260,50%,8%) 0%, hsl(185,70%,5%) 100%); opacity: 1; }
body.rare-aurora #particle-canvas { filter: hue-rotate(30deg) brightness(1.2); }

body.rare-golden-hour.season-spring .spring-sky { background: linear-gradient(168deg, hsl(35,60%,9%) 0%, hsl(20,55%,6%) 100%); opacity:1; }
body.rare-golden-hour.season-summer .summer-sky { background: linear-gradient(168deg, hsl(38,65%,10%) 0%, hsl(22,58%,7%) 100%); opacity:1; }
body.rare-golden-hour.season-autumn .autumn-sky { background: linear-gradient(168deg, hsl(38,65%,10%) 0%, hsl(22,58%,7%) 100%); opacity:1; }
body.rare-golden-hour.season-winter .winter-sky { background: linear-gradient(168deg, hsl(38,65%,10%) 0%, hsl(22,58%,7%) 100%); opacity:1; }

body.rare-constellation #particle-canvas { /* stars are injected by JS */ }

/* ══════════════════════════════════════════════════════
   SESSION IDENTITY TAGS (Complete Screen)
   ══════════════════════════════════════════════════════ */

.session-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

.session-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: hsla(220, 25%, 14%, 0.6);
  border: 1px solid hsla(220, 25%, 40%, 0.14);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.9rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tag-icon { font-size: 0.85rem; }
.tag-text {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.mood-tag .tag-text { color: hsl(130, 65%, 60%); }

/* ══════════════════════════════════════════════════════
   ACHIEVEMENT GRID (Garden Keeper)
   ══════════════════════════════════════════════════════ */

.achievement-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.ach-section-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  width: 100%;
  max-width: 360px;
}

.ach-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.25rem 0.45rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform 200ms var(--ease-bounce), box-shadow 200ms ease, border-color 200ms ease;
  width: 100%;
}@media (hover: hover) and (pointer: fine) {

.ach-badge:hover { transform: translateY(-2px); }
}

.ach-badge.ach-selected {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 12px var(--accent-glow) !important;
  transform: translateY(-2px) scale(1.05);
}

/* Achievement Details Card */
.ach-detail-card {
  width: 100%;
  max-width: 360px;
  background: hsla(220, 25%, 11%, 0.6);
  border: 1px solid hsla(220, 20%, 40%, 0.12);
  border-radius: var(--radius-md);
  padding: 0.8rem 1.1rem;
  text-align: center;
  transition: all 250ms ease;
  margin-top: 0.85rem;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ach-detail-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  width: 100%;
}

.ach-detail-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ach-detail-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.ach-detail-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.ach-detail-status {
  font-size: 0.62rem;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  margin-left: auto;
  flex-shrink: 0;
}

.ach-detail-status.status-unlocked {
  background: hsla(130, 68%, 52%, 0.15);
  color: hsl(130, 68%, 68%);
  border: 1px solid hsla(130, 68%, 52%, 0.25);
}

.ach-detail-status.status-locked {
  background: hsla(220, 20%, 30%, 0.15);
  color: var(--color-text-dim);
  border: 1px solid hsla(220, 20%, 40%, 0.12);
}

.ach-detail-placeholder {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  font-style: italic;
}

/* Reset Achievements button */
.reset-ach-btn {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
  border: 1px solid transparent;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  margin-top: 0.65rem;
  opacity: 0.75;
  transition: all 200ms ease;
}@media (hover: hover) and (pointer: fine) {


.reset-ach-btn:hover {
  color: var(--color-text-muted);
  border-color: hsla(220, 20%, 40%, 0.22);
  background: hsla(220, 25%, 15%, 0.35);
  opacity: 1;
}
}

.reset-ach-btn:active {
  transform: scale(0.96);
}

.ach-locked {
  background: hsla(220, 20%, 12%, 0.5);
  border-color: hsla(220, 20%, 28%, 0.18);
  opacity: 0.5;
}
.ach-unlocked {
  background: hsla(130, 50%, 12%, 0.55);
  border-color: hsla(130, 60%, 38%, 0.28);
  box-shadow: 0 0 12px hsla(130, 65%, 38%, 0.2);
}@media (hover: hover) and (pointer: fine) {

.ach-unlocked:hover {
  box-shadow: 0 0 20px hsla(130, 65%, 38%, 0.4);
}
}

.ach-new {
  background: hsla(48, 80%, 14%, 0.7) !important;
  border-color: hsla(48, 88%, 55%, 0.4) !important;
  box-shadow: 0 0 18px hsla(48, 88%, 55%, 0.35) !important;
  animation: ach-pop 500ms var(--ease-bounce) both;
}
@keyframes ach-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.ach-icon {
  font-size: 1.35rem;
  line-height: 1;
}
.ach-label {
  font-size: 0.58rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.ach-new-tag {
  position: absolute;
  top: -5px;
  right: -4px;
  background: hsl(48, 88%, 55%);
  color: hsl(25, 80%, 15%);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION (override appended styles)
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ach-new { animation: none; }
}

/* ══════════════════════════════════════════════════════
   BADGE ANNOUNCEMENT & HINTS (Appended for premium look)
   ══════════════════════════════════════════════════════ */

.badge-announce {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(135deg, hsla(48, 88%, 15%, 0.9), hsla(38, 92%, 10%, 0.9));
  border: 1px solid hsla(48, 88%, 55%, 0.4);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  box-shadow: 0 4px 25px hsla(48, 88%, 15%, 0.4);
  margin-bottom: 0.5rem;
  animation: badge-slide-down 450ms var(--ease-bounce) both;
}

@keyframes badge-slide-down {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.badge-announce-inner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.badge-announce-headline {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: hsl(48, 88%, 65%);
  letter-spacing: 0.02em;
}

.badge-announce-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.badge-announce-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: hsla(48, 88%, 55%, 0.15);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid hsla(48, 88%, 55%, 0.25);
}

.badge-item-icon { font-size: 1rem; }
.badge-item-name {
  font-size: 0.72rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Next Badge Hint Styling */
.next-badge-hint {
  width: 100%;
  max-width: 360px;
  background: hsla(220, 25%, 12%, 0.6);
  border: 1px solid hsla(220, 25%, 35%, 0.12);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.next-badge-hint-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.nbh-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nbh-badge {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nbh-bar-wrap {
  height: 5px;
  background: hsla(220, 20%, 25%, 0.6);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  grid-column: 1 / -1;
  margin-top: 0.2rem;
}

.nbh-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, hsl(130, 68%, 46%), hsl(160, 60%, 40%));
  border-radius: 99px;
  transition: width 400ms ease;
}

.nbh-fraction {
  font-size: 0.68rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text-muted);
  justify-self: end;
}

.next-badge-complete {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(48, 88%, 65%);
  text-align: center;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   PLAY MODE SELECTION (Guided vs Flow)
   ══════════════════════════════════════════════════════ */

.mode-choice-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
}

.mode-choice-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mode-choice {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.mode-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: hsla(220, 25%, 11%, 0.75);
  border: 1px solid hsla(220, 20%, 40%, 0.16);
  border-radius: var(--radius-lg);
  padding: 1.4rem 2rem;
  color: var(--color-text-muted);
  transition: all 280ms var(--ease-bounce);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}@media (hover: hover) and (pointer: fine) {


.mode-btn:hover {
  border-color: hsla(220, 20%, 60%, 0.35);
  background: hsla(220, 25%, 16%, 0.85);
  color: var(--color-text-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
}


/* Specific Active State for Guided Mode (Green Theme) */
#mode-guided-btn.mode-btn--active {
  background: hsla(130, 60%, 8%, 0.85) !important;
  border: 2px solid hsl(130, 68%, 46%) !important;
  box-shadow: 0 0 26px hsla(130, 68%, 46%, 0.32) !important;
  color: var(--color-text-primary) !important;
}
#mode-guided-btn.mode-btn--active .mode-name {
  color: hsl(130, 68%, 70%) !important;
}
#mode-guided-btn.mode-btn--active .mode-sub {
  color: hsl(130, 35%, 82%) !important;
}

/* Specific Active State for Flow Mode (Blue Theme) */
#mode-flow-btn.mode-btn--active {
  background: hsla(200, 60%, 8%, 0.85) !important;
  border: 2px solid hsl(200, 75%, 52%) !important;
  box-shadow: 0 0 26px hsla(200, 75%, 52%, 0.32) !important;
  color: var(--color-text-primary) !important;
}
#mode-flow-btn.mode-btn--active .mode-name {
  color: hsl(200, 75%, 70%) !important;
}
#mode-flow-btn.mode-btn--active .mode-sub {
  color: hsl(200, 35%, 82%) !important;
}

.mode-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.mode-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

.mode-sub {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════
   RHYTHM TARGET RING & METRONOME GUIDE BAR
   ══════════════════════════════════════════════════════ */

.rhythm-target-ring {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 195px;
  height: 195px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 300ms ease;
}

.rhythm-guide-bar {
  display: none; /* Controlled by JS in Guided mode */
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
  margin: 0.4rem auto 0.6rem;
  padding: 0.75rem 1.1rem;
  background: hsla(220, 25%, 12%, 0.45);
  border: 1px solid hsla(220, 20%, 40%, 0.12);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}

.rhythm-guide-instruction {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.rhythm-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: hsla(220, 20%, 8%, 0.6);
  border-radius: 99px;
  border: 1px solid hsla(220, 20%, 35%, 0.12);
  overflow: visible;
  margin-top: 0.2rem;
}

.rhythm-target-zone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: hsla(220, 20%, 14%, 0.95);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  transition: all 150ms ease;
  z-index: 1;
}

.rhythm-target-zone.active {
  border-color: var(--color-accent);
  background: hsla(185, 70%, 55%, 0.25);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: translate(-50%, -50%) scale(1.15);
}

/* Seasonal colors for metronome feedback */
body.season-spring .rhythm-target-zone.active { border-color: hsl(130, 68%, 52%); background: hsla(130, 68%, 52%, 0.25); box-shadow: 0 0 14px hsla(130, 68%, 52%, 0.45); }
body.season-summer .rhythm-target-zone.active { border-color: hsl(48, 90%, 58%); background: hsla(48, 90%, 58%, 0.25); box-shadow: 0 0 14px hsla(48, 90%, 58%, 0.45); }
body.season-autumn .rhythm-target-zone.active { border-color: hsl(30, 88%, 58%); background: hsla(30, 88%, 58%, 0.25); box-shadow: 0 0 14px hsla(30, 88%, 58%, 0.45); }
body.season-winter .rhythm-target-zone.active { border-color: hsl(200, 75%, 62%); background: hsla(200, 75%, 62%, 0.25); box-shadow: 0 0 14px hsla(200, 75%, 62%, 0.45); }

.rhythm-indicator {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 2;
  transition: transform 80ms ease;
}

body.season-spring .rhythm-indicator { background: hsl(130, 68%, 68%); box-shadow: 0 0 12px hsla(130, 68%, 52%, 0.85); }
body.season-summer .rhythm-indicator { background: hsl(48, 90%, 68%); box-shadow: 0 0 12px hsla(48, 90%, 58%, 0.85); }
body.season-autumn .rhythm-indicator { background: hsl(30, 88%, 68%); box-shadow: 0 0 12px hsla(30, 88%, 58%, 0.85); }
body.season-winter .rhythm-indicator { background: hsl(200, 75%, 72%); box-shadow: 0 0 12px hsla(200, 75%, 62%, 0.85); }