:root {
  --hue-base: 95;
  --hue-accent: 30;

  /* cozy pastel paleta, odvozená od barvy dne (--hue-base/--hue-accent nastavuje JS) */
  --bg-1: hsl(var(--hue-base), 55%, 90%);
  --bg-2: hsl(var(--hue-accent), 70%, 82%);
  --bg-3: hsl(var(--hue-base), 45%, 96%);

  --text-color: #4b3c2e;
  --text-soft: #6b5c4a;

  --glass-bg: rgba(255, 252, 245, 0.55);
  --glass-bg-strong: rgba(255, 252, 245, 0.78);
  --glass-border: rgba(255, 255, 255, 0.75);
  --shadow-soft: 0 10px 26px rgba(120, 90, 55, 0.16);
  /* animal crossing styl - plná pastelová barva, žádné rozmazání */
  --shadow-btn: 0 3px 0 hsla(var(--hue-accent), 55%, 62%, 0.55);

  --petal-color: hsl(var(--hue-accent), 78%, 76%);
  --petal-light: hsl(var(--hue-accent), 85%, 92%);
  --petal-plucked: hsl(var(--hue-accent), 20%, 70%);
  /* stonek a střed kytky mají svou vlastní barvu podle dne, nezávislou na
     barvě lístků/pozadí - proto extrémní množství kombinací (viz app.js) */
  --stem-hue: 100;
  --center-hue: 38;
  --stem-color: hsl(var(--stem-hue), 40%, 46%);
}

* {
  box-sizing: border-box;
}

/* Obecné schování - dřív existovalo jen pro pár konkrétních prvků (tlačítka,
   modal, debug panel), takže třeba #moodNoteBox se schovávat vlastně vůbec
   neuměl a byl pořád vidět i s "Chceš mi říct proč?" navrch. */
.hidden {
  display: none !important;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  background: radial-gradient(ellipse at top, var(--bg-2), var(--bg-1) 70%);
  /* zadny vertikalni ani horizontalni scroll - vsechno se musi vejit na
     jednu obrazovku, viz .screen nize, ktery ma pevnou vysku 100dvh */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

.cursive {
  font-family: "Dancing Script", cursive;
}

/* ---------- Ambientní záře přes celou stránku ---------- */
#ambientGlow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 0%, hsla(var(--hue-accent), 90%, 88%, 0.55), transparent 70%),
    radial-gradient(50% 40% at 80% 15%, hsla(var(--hue-base), 85%, 88%, 0.35), transparent 70%);
  animation: glowDrift 16s ease-in-out infinite alternate;
}

@keyframes glowDrift {
  from { transform: translateY(0) scale(1); opacity: 0.9; }
  to { transform: translateY(2%) scale(1.05); opacity: 1; }
}

/* ---------- Plovoucí pozadí (velmi jemné, skoro neviditelné) ---------- */
#bgDecor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.16;
  background: radial-gradient(circle, hsla(var(--orb-hue), 70%, 88%, 0.9), transparent 72%);
  animation-name: floatOrb;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes floatOrb {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(3%, -4%) scale(1.06); }
}

/* ---------- Obrazovky ---------- */
.screen {
  display: none;
  position: relative;
  z-index: 1;
  /* 100svh = "small viewport height", tedy zarucena vyska i s plne
     rozbalenou listou/adresnim radkem prohlizece. Na rozdil od 100dvh se
     nezmensi az dodatecne po nacteni (kdyz se lista schova a pak zase
     objevi), takze se podle ni da bezpecne rozpocitat, kam se co vejde -
     zadny obsah nesmi tuhle vysku prekrocit, viz vh-based clamp() hodnoty
     nize a flex rozlozeni #screenMain. */
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0 20px;
}

.screen.active {
  display: flex;
}

/* Splash */
#screenSplash {
  gap: 14px;
}

#splashGreeting {
  font-size: clamp(2.6rem, 12vw, 4.2rem);
  margin: 0;
  color: var(--text-color);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  animation: splashRise 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes splashRise {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Text se odkrývá zleva jako přes masku, ne že by se jen objevil */
#splashGreetingText {
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: revealGreeting 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}

@keyframes revealGreeting {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* Pásek dní - malé čtverečky ukazující, kolikátý den v řadě si web otevřela */
#streakWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#streakStrip {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  animation: streakFadeIn 0.6s ease 0.9s forwards;
}

@keyframes streakFadeIn {
  to { opacity: 1; }
}

.streak-day {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 5px;
  border: 1.5px solid hsla(var(--hue-accent), 55%, 45%, 0.35);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, width 0.4s ease, padding 0.4s ease, border-radius 0.4s ease;
}

.streak-day.filled {
  background: hsl(var(--hue-accent), 70%, 62%);
  border-color: hsl(var(--hue-accent), 70%, 55%);
}

.streak-day.future {
  border-style: dashed;
  border-color: hsla(var(--hue-accent), 40%, 45%, 0.22);
}

.streak-day.today {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.streak-day.today.pop {
  animation: streakPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes streakPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Číslo streaku se objeví přímo v dnešním čtverečku - ten se pro něj mírně
   rozšíří do pilulky, ostatní dny zůstávají malé tečky. */
.streak-num {
  display: inline-block;
  padding: 0 7px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 16px;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.streak-day.today.num-show {
  width: auto;
  height: 20px;
  border-radius: 10px;
}

.streak-day.today.num-show .streak-num {
  opacity: 1;
  transform: scale(1);
}

/* Přístup k senzorům - teď rovnou na uvítací obrazovce, ne na samostatné.
   Objeví se, jen když je ještě potřeba se zeptat, a čeká na kliknutí. */
.gate-box {
  margin-top: 18px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  padding: 22px 24px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#gateText {
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

.gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ---------- Hlavní obrazovka ----------
   Flex sloupec přes celou výšku obrazovky: datum nahoře a tlačítka dole
   mají pevnou velikost (flex: 0 0 auto, podle obsahu), kytka uprostřed
   je jediná pružná část (flex: 1 1 auto, viz #flowerStage) - takže když
   je na malém displeji nebo s vysunutou adresní řádkou míň místa, ubere
   se ho jen kytce a datum s tlačítky zůstanou vždycky celá vidět. */
/* display se NEsmi nastavovat tady - o to se stara .screen/.screen.active
   (viz vyse). ID selektor by tu mel vyssi specificitu a permanentne by
   prebil "display: none", takze by #screenMain byl videt (a zabiral misto
   v layoutu) i kdyz zrovna neni aktivni obrazovka. */
#screenMain {
  max-width: 480px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: clamp(8px, 2.5vh, 20px) 20px;
  flex-direction: column;
  align-items: center;
}

#dateLabel {
  display: block;
  margin: 0 0 clamp(6px, 2vh, 16px);
  text-transform: capitalize;
  font-family: "Playfair Display", "Nunito", serif;
  font-style: italic;
  font-size: clamp(1.2rem, min(5vw, 4.5vh), 1.7rem);
  font-weight: 700;
  color: var(--text-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

#flowerStage {
  position: relative;
  margin: clamp(2px, 1vh, 8px) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* jediná část #screenMain, která smí být pružná - datum nahoře a
     tlačítka dole (oboje flex: 0 0 auto) tak zůstanou vždy celá vidět. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  /* radeji nahoru k textu nez na stred - fixni lista tlacitek dole je
     prekryva pri centrovani nejvic, takhle je mezi zpravou a tlacitky
     vic rezervy dole pro bonusova kviticka u zeme */
  justify-content: flex-start;
  /* schvalne BEZ overflow:hidden - bonusova kviticka (viz app.js) casem
     rostou i mimo puvodni ramecek kytky az k okraji obrazovky, a to
     doopravdy vidět, ne uriznuté neviditelnou hranicí uprostred obrazovky.
     Jedinou skutecnou hranici ted dela .screen (viz vyse), ktera uz sedi
     presne na kraj obrazovky. Delku zpravy pred prasenim hlida uz beztak
     applyMessageSizeClass v app.js (zmensuje pismo, ne orezava). */
  overflow: visible;
}

/* Kužel světla přes celé okno (schválně mimo #flowerStage, viz komentář
   v index.html) - napevno na viewport, takže vždycky dosáhne až za kraj
   obrazovky, žádné oříznutí uprostřed nikde vidět není. */
#raysWrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  z-index: 0;
  /* Střed paprsků - výchozí odhad, dokud ho JS (viz alignRaysToFlowerHead
     v app.js) nepřepočítá na skutečný střed kvetoucí hlavičky kytky. */
  --ray-cx: 50%;
  --ray-cy: 40%;
  /* měkký, hodně pozvolný přechod do ztracena - víc mezikroků než jen dvě
     zastávky, ať fading není lineární a působí to přirozeněji. Elipsa je
     teď hodně přetažená přes hranice boxu (>100%), ať se i sama maska
     ztrácí až za viditelným okrajem okna, ne uvnitř něj. */
  -webkit-mask-image: radial-gradient(
    ellipse 120% 110% at var(--ray-cx) var(--ray-cy),
    #000 18%,
    rgba(0, 0, 0, 0.85) 34%,
    rgba(0, 0, 0, 0.55) 52%,
    rgba(0, 0, 0, 0.28) 70%,
    rgba(0, 0, 0, 0.1) 86%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 120% 110% at var(--ray-cx) var(--ray-cy),
    #000 18%,
    rgba(0, 0, 0, 0.85) 34%,
    rgba(0, 0, 0, 0.55) 52%,
    rgba(0, 0, 0, 0.28) 70%,
    rgba(0, 0, 0, 0.1) 86%,
    transparent 100%
  );
  /* dokud kytka nevykvete, světlo je jen tušené - rozjasní se, až se otevřou lístky */
  opacity: 0.16;
  transition: opacity 1.8s ease;
}

#raysWrap.bloomed {
  opacity: 1;
}

#rays {
  position: absolute;
  inset: -8%;
  /* pravidelné paprsky dokola, jako vycházející slunce. Stred (at ...) je
     stejná --ray-cx/--ray-cy proměnná jako u masky, ať paprsky opravdu
     vychází ze středu kytky. */
  background: repeating-conic-gradient(
    from 0deg at var(--ray-cx, 50%) var(--ray-cy, 68%),
    transparent 0deg,
    hsla(var(--hue-accent), 95%, 90%, 0.55) 2.2deg,
    hsla(var(--hue-accent), 95%, 90%, 0.55) 2.8deg,
    transparent 6deg,
    transparent 26deg
  );
  transform-origin: var(--ray-cx, 50%) var(--ray-cy, 68%);
  animation: swayRays 8s ease-in-out infinite alternate;
  transition: transform 0.2s ease-out;
  /* skutečný "feather" efekt - rozmazání každého paprsku i celkového
     okraje, ne jen postupné mizení přes masku (to samo o sobě hrany
     nerozostří, jen zprůhlední). Inset -8% dává rozmazání kam "utéct",
     ať po okrajích nevznikne ostře oříznutá hrana rozmazání samotného. */
  filter: blur(10px);
}

@media (min-width: 600px) {
  #rays {
    filter: blur(16px);
  }
}

@keyframes swayRays {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}

/* Vzkaz kytky, jen jako text bez rámečku */
.flower-message {
  position: relative;
  z-index: 2;
  margin: 0 0 6px;
  max-width: 320px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-weight: 700;
  font-size: clamp(1.02rem, 3.4vh, 1.35rem);
  line-height: 1.45;
  color: var(--text-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 18px rgba(255, 255, 255, 0.35);
  transition: font-size 0.2s ease;
}

/* Delší hlášky by se jinak nevešly nad tlačítka - třída se nastavuje
   v app.js podle počtu znaků (viz applyMessageSizeClass). */
.flower-message.msg-m {
  font-size: clamp(0.9rem, 2.9vh, 1.15rem);
  max-width: 330px;
}
.flower-message.msg-l {
  font-size: clamp(0.8rem, 2.5vh, 1rem);
  max-width: 350px;
  line-height: 1.35;
}
.flower-message.msg-xl {
  font-size: clamp(0.7rem, 2.1vh, 0.88rem);
  max-width: 360px;
  line-height: 1.3;
}

body.birthday .flower-message {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 22px hsla(var(--hue-accent), 90%, 75%, 0.6);
}
body.halloween .flower-message {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 20px hsla(28, 90%, 55%, 0.55);
}
body.vanoce .flower-message {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 20px hsla(0, 70%, 55%, 0.4), 0 0 20px hsla(140, 55%, 45%, 0.3);
}
body.novyRok .flower-message {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 22px hsla(45, 90%, 65%, 0.55);
}

#flowerSvg {
  position: relative;
  z-index: 1;
  width: 100%;
  /* velikost kytky se řídí jen výškou obrazovky, ne délkou zprávy - ať je
     každý den stejně velká na stejném telefonu */
  max-width: clamp(180px, 42vh, 300px);
  height: auto;
  transition: transform 0.3s ease-out, filter 1.4s ease;
  /* bonusové kvítky (viz app.js) mohou růst i mimo původní rámeček kytky,
     ať se jimi dá časem zaplnit celá obrazovka */
  overflow: visible;
}

#stemPath {
  fill: none;
  stroke: var(--stem-color);
  stroke-width: 6;
  stroke-linecap: round;
}

#leafLeft, #leafRight {
  fill: var(--stem-color);
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Trny na stonku - jen u druhů, co je mají (viz app.js), objeví se
   spolu s tím, jak roste stonek. */
.thorn {
  fill: var(--stem-color);
  filter: brightness(0.82);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.6s ease;
  /* neviditelný široký okraj kolem trnu, ať se dá trefit i na mobilu,
     aniž by to trn opticky zvětšilo */
  stroke: transparent;
  stroke-width: 14px;
}
#flowerStage.bloomed .thorn {
  opacity: 1;
}
.thorn.plucked {
  animation: thornFall 0.45s ease-in forwards;
  cursor: default;
  pointer-events: none;
}

@keyframes thornFall {
  0% { transform-box: fill-box; transform-origin: 0 0; opacity: 1; }
  100% {
    transform-box: fill-box;
    transform-origin: 0 0;
    transform: translateY(60px) rotate(50deg);
    opacity: 0;
  }
}
#leafLeft.show, #leafRight.show {
  opacity: 1;
  transform: scale(1);
  cursor: pointer;
}

/* Utržený lístek spadne dolů, podobně jako okvětní lístky, jen míří k zemi */
#leafLeft.plucked, #leafRight.plucked {
  animation: leafFall 0.75s ease-in forwards;
  cursor: default;
  pointer-events: none;
}

@keyframes leafFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(230px) rotate(70deg) scale(0.8);
    opacity: 0;
  }
}

#budCore {
  fill: hsl(var(--stem-hue), 45%, 62%);
  opacity: 0;
  r: 14px;
  transform-origin: 150px 174px;
  transition: opacity 0.4s ease, transform 0.4s ease, fill 0.6s ease, r 0.5s ease;
}
#budCore.show { opacity: 1; transform: scale(1); }

/* Jakmile se lístky začnou otvírat, poupě už nezakrývá žádný samostatný
   střed navrch - samo změní barvu (podle dne) a mírně povyroste. */
#budCore.bloomed-center {
  fill: hsl(var(--center-hue), 85%, 58%);
  r: 20px;
}

/* Některé druhy (pivoňka, zvonek, růže...) žádný samostatný barevný střed
   nemají - poupě prostě zmizí ve chvíli, kdy se kolem něj rozevřou lístky.
   Kromě opacity i r:0, ať se nic nemůže prokreslit ani při překryvu. */
#budCore.hide-center {
  opacity: 0;
  r: 0px;
}

.petal {
  fill: url(#petalGrad);
  stroke: hsla(var(--hue-accent), 40%, 40%, 0.15);
  stroke-width: 1;
  opacity: 0;
  transform-origin: 150px 174px;
  transform: scale(0.2);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
  cursor: pointer;
  /* at po klepnuti na mobilu nenaskoci skaredy modry ctverec zvyrazneni */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
}

/* Během JS řízeného růstu (viz app.js) chceme okamžité, snímek po snímku
   přesné hodnoty, ne CSS tranzici navíc přes to - ta se zapne až po dokončení. */
.js-anim {
  transition: none !important;
}

.petal-stop-light { stop-color: var(--petal-light); }
.petal-stop-dark { stop-color: var(--petal-color); }

.petal.bloom {
  opacity: 1;
  /* každý lístek muže mít jinou cílovou velikost (růže, tulipán...),
     viz --petal-scale nastavované v applyFlowerSpecies() */
  transform: scale(var(--petal-scale, 1));
}

.petal.plucked {
  opacity: 0;
  transform: scale(0.3) rotate(35deg);
  pointer-events: none;
}

/* Bonusová kytička (odpověď na "jak se máme") - každá má vlastní --wilt
   (0 = čerstvá, ~0.9 = dost uvadlá), aby zahrada nevypadala jako kopírák */
/* Jednoduchá animace růstu (ne jen "pop" celé kytičky najednou) - nejdřív
   se nakreslí stonek (stroke-dashoffset, viz spawnBonusFlower v app.js),
   lístky a středový puntík se zvětší až s malým zpožděním po něm, ať to
   vypadá, že kvítek fakt vyrostl ze země, ne že se objevil hotový. */
.bonus-flower {
  --wilt: 0;
  filter: saturate(calc(1 - var(--wilt) * 0.5)) brightness(calc(1 - var(--wilt) * 0.12));
  transition: transform 0.6s ease-out;
}
.bonus-flower.show {
  transform: rotate(calc(var(--wilt) * 14deg * var(--tilt-dir, 1))) translateY(calc(var(--wilt) * 3px));
}
.bonus-stem {
  stroke: var(--stem-color);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.bonus-petal,
.bonus-center {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bonus-flower.show .bonus-petal,
.bonus-flower.show .bonus-center {
  opacity: 1;
  transform: scale(1);
}
.bonus-petal {
  fill: hsl(var(--hue-accent), 78%, 74%);
}
.bonus-center {
  fill: hsl(var(--center-hue), 85%, 58%);
}

/* Vedlejší kvítky u druhů kvetoucích v trsu (viz FLOWER_SPECIES.extraBlooms
   a applyFlowerSpecies v app.js) - menší, jednodušší sourozenci hlavní
   hlavičky na téže kytce, ne samostatná bonusová kytička u země. Rozkvetou
   spolu s hlavní hlavičkou (viz #flowerStage.bloomed níž), každý s trochou
   jiného zpoždění, ať to nenaskočí všechno naráz. */
.extra-bloom-group {
  opacity: 0;
  transform: scale(0.25);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#flowerStage.bloomed .extra-bloom-group {
  opacity: 1;
  transform: scale(1);
}
.extra-bloom-stem {
  stroke: var(--stem-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}
.extra-bloom-petal {
  fill: hsl(var(--hue-accent), 78%, 76%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.extra-bloom-center {
  fill: hsl(var(--center-hue), 85%, 58%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.extra-bloom-petal.plucked,
.extra-bloom-group.plucked {
  opacity: 0;
  transform: scale(0.3) rotate(30deg);
}

/* Vadnutí - točí se jen hlavní kytka (mainFlowerGroup), ne celé SVG -
   jinak by se s ní jako jeden tuhý čtverec otáčely i všechny kvítky navíc.
   Samotné natočení (vadnutí + náklon telefonem dohromady) teď nastavuje
   JS přes applyFlowerTransform() v app.js, ať se navzájem nepřebíjí -
   tady zůstává jen transform-origin, tranzice a barevný filtr. */
#mainFlowerGroup {
  transform-origin: 150px 390px;
  transition: transform 0.3s ease-out, filter 1.4s ease;
}
#flowerStage.wilting #mainFlowerGroup {
  filter: saturate(0.4) brightness(0.92);
}
#flowerStage.wilting .petal.bloom {
  transform: scale(calc(var(--petal-scale, 1) * 0.85)) translateY(10px) rotate(20deg);
}

/* Po zalití se nenarovná všechno naráz - nejdřív se srovná stonek, lístky
   se dorovnají s malým zpožděním po něm, ať to působí živě. */
#flowerStage:not(.wilting) .petal.bloom {
  transition-delay: 0.1s;
}

.hidden-note {
  opacity: 0;
  font-style: italic;
  color: var(--text-soft);
  margin-top: 6px;
  transition: opacity 0.6s ease;
}
.hidden-note:empty {
  margin-top: 0;
}
.hidden-note.show { opacity: 0.9; }

/* ---------- Ovládací prvky ---------- */
/* Tlačítka jsou teď fixed lišta přilepená dole k obrazovce, ne součást
   flexu #screenMain - takže když jich přibude (moodBtn, bonusFlowerBtn,
   bonusFlowerBtn...), nezmenšují tím prostor kytce ani se nezačnou
   zařezávat, jenom se u sebe zabalí na další řádek. Stonek kytky proto
   klidně zajde i pod ně, tlačítka jsou napůl průhledná (glass efekt). */
#controls {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-content: center;
  padding: 10px 20px max(10px, env(safe-area-inset-bottom));
}

.ctrl-btn {
  border: 1.5px solid var(--glass-border);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-color);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ctrl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 hsla(var(--hue-accent), 55%, 62%, 0.55);
}
.ctrl-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(120, 90, 55, 0.18);
}
.ctrl-btn.subtle {
  background: rgba(255, 252, 245, 0.35);
}
.ctrl-btn.hidden { display: none; }

/* "Jak se dneska máme?" a "Chci další kvítek" mají mít stejnou velikost,
   ať se pod sebou/vedle sebe netváří nesourodě jen kvůli délce textu -
   šířka se řídí tou delší z nich. */
#moodBtn,
#bonusFlowerBtn {
  min-width: 232px;
  text-align: center;
}
.ctrl-btn.just-watered {
  animation: pulse 0.6s ease;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(75, 60, 46, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
}
.modal.hidden { display: none; }

.modal-box {
  position: relative;
  background: linear-gradient(
    165deg,
    hsla(var(--hue-accent), 90%, 92%, 0.92),
    hsla(var(--hue-base), 70%, 94%, 0.88) 60%,
    hsla(var(--hue-accent), 85%, 88%, 0.9)
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid hsla(var(--hue-accent), 70%, 78%, 0.7);
  border-radius: 28px;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 30px 24px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.modal-box::before {
  content: "🌷";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  filter: drop-shadow(0 3px 4px rgba(90, 60, 30, 0.2));
}

.modal-box::after {
  content: "";
  position: absolute;
  inset: -30% -30% auto -30%;
  height: 60%;
  background: radial-gradient(circle, hsla(var(--hue-base), 90%, 92%, 0.5), transparent 70%);
  pointer-events: none;
}

#moodQuestion {
  position: relative;
  z-index: 1;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin-top: 6px;
}

#moodOptions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
#moodOptions:empty {
  margin: 0;
}

.mood-option {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid hsla(var(--hue-accent), 60%, 70%, 0.5);
}
.mood-option:nth-child(1) { background: hsla(48, 90%, 82%, 0.65); }
.mood-option:nth-child(2) { background: hsla(150, 55%, 84%, 0.6); }
.mood-option:nth-child(3) { background: hsla(260, 55%, 88%, 0.55); }
.mood-option:nth-child(4) { background: hsla(0, 0%, 92%, 0.6); }

#moodResponse {
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
#moodResponse:empty {
  margin: 0;
}

@media (max-width: 380px) {
  #splashGreeting { font-size: 2.4rem; }
}

/* ---------- Denní doba podle skutečného slunce (viz weather.js) ---------- */
body.phase-dawn,
body.phase-dusk {
  --bg-1: hsl(var(--hue-base), 65%, 80%);
  --bg-2: hsl(var(--hue-accent), 80%, 66%);
}

body.phase-night {
  /* obloha nahoře zůstává hodně tmavá, ale směrem dolů ke kytce se to
     rozjasní, ať noc nepůsobí jako jedna plochá tmavá plocha */
  --bg-1: hsl(calc(var(--hue-base) + 10), 38%, 38%);
  --bg-2: hsl(var(--hue-accent), 55%, 13%);
  --text-color: #f4eee0;
  --text-soft: #d9cfba;
  --glass-bg: rgba(40, 35, 52, 0.45);
  --glass-bg-strong: rgba(40, 35, 52, 0.68);
  --glass-border: rgba(255, 255, 255, 0.22);
  --shadow-btn: 0 3px 0 hsla(var(--hue-accent), 45%, 30%, 0.6);
}

/* Modál "Jak se dneska máme?" má napevno světlé pozadí (viz .modal-box
   výš), které v noční variantě s textem zesvětleným přes --text-color
   splývalo do nečitelna. V noci proto dostane vlastní tmavé pozadí a
   pastelová tlačítka nálad přepneme na tmavý text, ať zůstanou čitelná
   i na svém původním světlém podkladu. */
body.phase-night .modal-box {
  background: linear-gradient(
    165deg,
    hsla(var(--hue-accent), 45%, 20%, 0.94),
    hsla(var(--hue-base), 35%, 16%, 0.92) 60%,
    hsla(var(--hue-accent), 40%, 14%, 0.94)
  );
  border-color: hsla(var(--hue-accent), 45%, 45%, 0.45);
}
body.phase-night .modal-box::after {
  background: radial-gradient(circle, hsla(var(--hue-base), 45%, 30%, 0.35), transparent 70%);
}
body.phase-night .mood-option {
  color: #3a2f22;
}
body.phase-night #moodNoteInput {
  background: rgba(255, 255, 255, 0.82);
  color: #3a2f22;
}

/* Ve dne dává textu jemnou bílou záři text-shadow, v noci se ale tahle
   záře u víceřádkových zpráv sčítá mezi řádky a vytváří kolem celého
   textu viditelný jasný obdélníkový obrys. V noci proto text nezáří,
   jen má decentní tmavý stín pro čitelnost, jako běžný text na tmavém
   pozadí. */
body.phase-night .flower-message {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
body.phase-night.birthday .flower-message {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 14px hsla(var(--hue-accent), 70%, 60%, 0.35);
}

/* ---------- Efekty počasí (jemná vrstva navrch, nikdy nesmí bránit klikání) ---------- */
#weatherFx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1.2s ease;
}

body.fx-rain #weatherFx,
body.fx-snow #weatherFx,
body.fx-stars #weatherFx,
body.fx-fog #weatherFx {
  opacity: 1;
}

/* Kapky deště jsou skutečné, náhodně generované prvky (viz app.js), ne
   jedna smyčkující se textura - každá padá jinak rychle a jinde, takže to
   nikdy nevypadá, že se to "resetuje". */
.rain-drop-fx {
  position: absolute;
  top: -12vh;
  width: 1.4px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 100%);
  animation-name: rainStreak;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes rainStreak {
  0% { transform: translateY(0) rotate(12deg); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(124vh) rotate(12deg); opacity: 0; }
}

/* Sníh a hvězdy jsou (stejně jako déšť) skutečné náhodné prvky generované
   v app.js, ne opakující se textura - proto tu nezůstala žádná pravidelná
   mřížka, jen samotný kontejner. */
.snow-flake-fx {
  position: absolute;
  top: -3vh;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  animation-name: snowDrift;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes snowDrift {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(var(--drift, 14px), 55vh); }
  92% { opacity: 1; }
  100% { transform: translate(0, 112vh); opacity: 0; }
}

.star-fx {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  animation-name: starBlink;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes starBlink {
  from { opacity: 0.25; }
  to { opacity: 0.85; }
}

body.fx-fog #weatherFx {
  opacity: 0.35;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent);
  animation: fogDrift 12s ease-in-out infinite alternate;
}
@keyframes fogDrift {
  from { transform: translateY(-4%); }
  to { transform: translateY(4%); }
}

/* ---------- Efekt zalévání ---------- */
.water-drop {
  --drop-scale: 1;
  /* jak daleko kapka padá - nastavuje JS podle skutečné velikosti kytky
     (ne podle délky zprávy), ať vždycky doletí akorát k ní, ne pryč */
  --drop-fall: 150px;
  position: absolute;
  width: 9px;
  height: 13px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(160deg, hsl(200, 85%, 78%), hsl(205, 85%, 55%));
  opacity: 0.9;
  pointer-events: none;
  z-index: 3;
  animation: dropFall 0.42s ease-in forwards;
}

@keyframes dropFall {
  0% { transform: translateY(-30px) rotate(-45deg) scale(var(--drop-scale)); opacity: 0.95; }
  85% { opacity: 0.9; }
  100% { transform: translateY(var(--drop-fall)) rotate(-45deg) scale(var(--drop-scale)); opacity: 0; }
}

.water-ripple {
  position: absolute;
  bottom: 6px;
  width: 46px;
  height: 14px;
  left: 50%;
  border-radius: 50%;
  border: 2px solid hsla(205, 80%, 65%, 0.7);
  transform: translateX(-50%) scale(0.3);
  opacity: 0.9;
  pointer-events: none;
  z-index: 3;
  animation: rippleGrow 0.7s ease-out forwards;
}

@keyframes rippleGrow {
  from { transform: translateX(-50%) scale(0.3); opacity: 0.9; }
  to { transform: translateX(-50%) scale(1.6); opacity: 0; }
}

.water-ripple-soft {
  width: 34px;
  height: 10px;
  border-width: 1.5px;
  border-color: hsla(205, 75%, 70%, 0.5);
  animation-name: rippleGrowSoft;
  animation-duration: 0.65s;
}

@keyframes rippleGrowSoft {
  from { transform: translateX(-50%) scale(0.3); opacity: 0.6; }
  to { transform: translateX(-50%) scale(1.9); opacity: 0; }
}

/* Jiskřičky, které kytku "oslaví" hned, jak se narovná po zalití */
.water-sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(48, 95%, 75%);
  box-shadow: 0 0 4px hsla(48, 95%, 70%, 0.9);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  animation: sparklePop 0.75s ease-out forwards;
}

@keyframes sparklePop {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}

/* Jemný pulz světla, který se rozlije za kytkou přesně v momentě, kdy se
   po zalití narovná - ať je to znát i mimo samotné kapky. */
.water-revive-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(100, 70%, 80%, 0.55), transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: reviveGlowPulse 0.9s ease-out forwards;
}

@keyframes reviveGlowPulse {
  0% { opacity: 0; transform: scale(0.5); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ---------- Debug ovládání dne (jen mimo ostrou doménu, viz config.js) ---------- */
#debugDayPanel {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 16, 12, 0.72);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: "Segoe UI", monospace;
  font-size: 0.78rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
#debugDayPanel.hidden { display: none; }

#debugDayPanel button {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 999px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}
#debugDayPanel #debugToday {
  width: auto;
  padding: 0 10px;
}
#debugDayPanel button:hover {
  background: rgba(255, 255, 255, 0.3);
}
#debugDayLabel {
  min-width: 52px;
  text-align: center;
}
#debugToggle {
  width: auto !important;
  padding: 0 8px !important;
}

#debugDrawer {
  position: fixed;
  top: 46px;
  right: 10px;
  z-index: 50;
  width: 220px;
  background: rgba(20, 16, 12, 0.82);
  color: #fff;
  border-radius: 16px;
  padding: 10px 12px;
  font-family: "Segoe UI", monospace;
  font-size: 0.75rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#debugDrawer.hidden { display: none; }

.debug-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.debug-label {
  opacity: 0.7;
  min-width: 46px;
}
.debug-row button {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
}
.debug-row button:hover {
  background: rgba(255, 255, 255, 0.3);
}
#debugWeatherLabel {
  flex: 1;
  text-align: center;
}
.debug-note {
  margin: 0;
  opacity: 0.65;
  font-size: 0.68rem;
  line-height: 1.3;
}
#debugSensorInfo {
  flex: 1;
  opacity: 0.85;
  line-height: 1.3;
}
.debug-mini-btn {
  margin-top: 2px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 6px 8px;
  font-size: 0.72rem;
  cursor: pointer;
}
.debug-mini-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ---------- Poznámka k náladě ---------- */
/* Odeslat je schované rovnou v poli, ať je jasné, že nepatří k ostatním
   tlačítkům pod ním - a dokud nic nenapíšeš, je vypnuté. */
#moodNoteBox {
  position: relative;
  margin: 10px 0;
}

#moodNoteLabel {
  margin: 0 0 8px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-color);
}

#moodNoteInput {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 10px 46px 14px 14px;
  resize: vertical;
  min-height: 64px;
}

#moodNoteInput:focus {
  outline: 2px solid hsla(var(--hue-accent), 70%, 60%, 0.5);
  outline-offset: 2px;
}

/* Dokud nic nenapíšeš, je to jen malá kulatá ikonka - jakmile se objeví
   text, tlačítko se rozbalí do pilulky s nápisem "Odeslat". */
.note-send-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 30px;
  width: 30px;
  padding: 0;
  border: none;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  background: hsl(var(--hue-accent), 70%, 60%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(120, 90, 55, 0.2);
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease, width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), padding 0.3s ease;
}
.note-send-icon {
  font-size: 0.9rem;
  flex: none;
}
.note-send-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.3s ease, opacity 0.2s ease;
}
.note-send-btn:not(:disabled) {
  width: auto;
  padding: 0 14px;
  justify-content: center;
}
.note-send-btn:not(:disabled) .note-send-label {
  max-width: 80px;
  opacity: 1;
}
.note-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.note-send-btn:disabled {
  background: rgba(120, 100, 80, 0.25);
  color: rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- Plynulé objevování/mizení tlačítek a textů ---------- */
.fade-target {
  transition: opacity 0.22s ease, transform 0.22s ease;
}