/* Posy's World — a meadow with many bunnies.
   Concept: o machetă rotunjită (diorama) cu cer, dealuri, nori și iarbă; iepurașii sunt SVG
   generat din world.js. Culorile vin din jetoane, cu o variantă de zi și una de noapte. */

:root {
  --bg: #ffe3ec;
  --bg-glow: #fff3f7;
  --ink: #4a2f4d;
  --muted: #7d5f80;
  --outline: #4a2f4d;
  --petal: #ffffff;
  --center: #ffd36b;
  --leaf: #6fae7b;
  --shadow: rgba(60, 40, 80, .22);

  --sky-top: #ffcfe0;
  --sky-bottom: #fff0e3;
  --sun-o: 1;
  --moon-o: 0;
  --star-o: 0;
  --sun: #ffd36b;
  --moon: #fff3c4;
  --cloud: #ffffff;
  --hill-back: #cdeccb;
  --hill-mid: #b4e1b5;
  --ground-a: #a7daa3;
  --ground-b: #8fcb95;
  --grass: #6fb87a;
  --trunk: #b98a74;
  --burrow: #6b4a52;
  --bubble-bg: #ffffff;
  --bubble-ink: #4a2f4d;
  --blush-bit: #ff8fb3;
  --card-bg: #fffafc;

  --font: "Fredoka", ui-rounded, "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #251a38;
    --bg-glow: #3a2858;
    --ink: #fdeaf2;
    --muted: #c9a9d4;
    --outline: #2b1d3a;
    --shadow: rgba(0, 0, 0, .38);
    --sky-top: #1b1434;
    --sky-bottom: #46306e;
    --sun-o: 0;
    --moon-o: 1;
    --star-o: 1;
    --cloud: #5b4688;
    --hill-back: #31506a;
    --hill-mid: #284a5e;
    --ground-a: #25503f;
    --ground-b: #1c3f35;
    --grass: #3f7d62;
    --trunk: #5d4658;
    --burrow: #120c1c;
    --bubble-bg: #fdeaf2;
    --bubble-ink: #2b1d3a;
    --card-bg: #33254d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #251a38;
  --bg-glow: #3a2858;
  --ink: #fdeaf2;
  --muted: #c9a9d4;
  --outline: #2b1d3a;
  --shadow: rgba(0, 0, 0, .38);
  --sky-top: #1b1434;
  --sky-bottom: #46306e;
  --sun-o: 0;
  --moon-o: 1;
  --star-o: 1;
  --cloud: #5b4688;
  --hill-back: #31506a;
  --hill-mid: #284a5e;
  --ground-a: #25503f;
  --ground-b: #1c3f35;
  --grass: #3f7d62;
  --trunk: #5d4658;
  --burrow: #120c1c;
  --bubble-bg: #fdeaf2;
  --bubble-ink: #2b1d3a;
  --card-bg: #33254d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Fundalul stă pe html (culoare plină) și pe un strat fix, ca să acopere tot ecranul,
   inclusiv zona din spatele barelor browserului de pe telefon. */
html { background: var(--bg); }

body {
  margin: 0;
  padding-inline: 16px;
  color: var(--ink);
  font: 400 1.05rem/1.4 var(--font);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 70% at 50% 30%, var(--bg-glow) 0%, var(--bg) 64%);
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: max(24px, env(safe-area-inset-top)) 8px;
}

.intro { text-align: center; }
h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: .01em;
  text-wrap: balance;
}
.intro p { margin: 6px 0 0; color: var(--muted); text-wrap: balance; }

/* Macheta cu luminișul */
.world {
  position: relative;
  width: min(100%, 560px, calc((100dvh - 190px) * 5 / 6));
  aspect-ratio: 5 / 6;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--outline), 0 14px 0 0 var(--shadow);
  background: var(--sky-top);
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#scene { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }

.hint { margin: 6px 0 0; color: var(--muted); font-size: .98rem; text-align: center; }
.count { margin: 0; min-height: 1.5em; font-weight: 600; text-align: center; }

.foot {
  padding-block: 6px max(18px, env(safe-area-inset-bottom));
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
}

/* ---------- mesajul de susținere ---------- */

.support {
  width: min(100%, 560px);
  margin: 4px 0 2px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 22px;
  background: var(--card-bg);
  box-shadow: 0 0 0 3px var(--outline), 0 6px 0 0 var(--shadow);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.support span:not(.heart) { min-width: 0; }
.support .heart {
  flex: none;
  color: var(--blush-bit);
  font-size: 1.6rem;
  line-height: 1;
  animation: heartbeat 1.7s ease-in-out infinite;
}
.support .heart:last-child { animation-delay: -.85s; }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.28); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.2); }
  60%      { transform: scale(1); }
}

.party {
  appearance: none;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 1rem/1 var(--font);
  cursor: pointer;
}
.party:active { transform: translateY(2px); }
.party:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.party[hidden] { display: none; }

/* ---------- „Cunoaște iepurașii" ---------- */

.picked { margin: 0; min-height: 1.5em; text-align: center; color: var(--muted); }
.picked strong { color: var(--ink); }
.picked a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

.meet { width: min(100%, 920px); margin-top: 22px; }
.meet h2 {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  line-height: 1.1;
}
.meet-lead { margin: 6px 0 18px; text-align: center; color: var(--muted); text-wrap: balance; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 18px;
}

.card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  background: var(--card-bg);
  box-shadow: 0 0 0 3px var(--outline), 0 8px 0 0 var(--shadow);
  scroll-margin-block: 24px;
  animation: card-in .5s ease-out both;
}
.card.is-picked { animation: card-pulse 1.8s ease-out; }

.portrait {
  height: 176px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom) 60%, var(--hill-mid) 60%, var(--ground-a));
}
.portrait svg { height: 100%; width: auto; display: block; }

.card h3 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.trait { margin: 0; color: var(--muted); font-weight: 600; }

.facts { margin: 0; display: grid; gap: 8px; }
.facts div { min-width: 0; }
.facts dt {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd { margin: 0; overflow-wrap: anywhere; }

.story { margin: 0; line-height: 1.45; text-wrap: pretty; }

.find {
  appearance: none;
  justify-self: start;
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 .95rem/1 var(--font);
  cursor: pointer;
}
.find:active { transform: translateY(2px); }
.find:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes card-pulse {
  0%   { box-shadow: 0 0 0 3px var(--outline), 0 0 0 3px var(--center), 0 8px 0 0 var(--shadow); }
  35%  { box-shadow: 0 0 0 3px var(--outline), 0 0 0 12px var(--center), 0 8px 0 0 var(--shadow); }
  100% { box-shadow: 0 0 0 3px var(--outline), 0 0 0 3px transparent, 0 8px 0 0 var(--shadow); }
}

/* ---------- peisajul ---------- */

.sun-glow { fill: var(--sun); opacity: .28; }
.sun-disc { fill: var(--sun); }
.sun, .moon, #stars { transition: opacity .7s ease; }
.sun { opacity: var(--sun-o); }
.moon { opacity: var(--moon-o); fill: var(--moon); }
#stars { opacity: var(--star-o); }
.star { fill: #fff6d6; animation: twinkle 3s ease-in-out infinite alternate; }
.celestial { cursor: pointer; }
.celestial { outline: none; }
.kbd .celestial:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.cloud { fill: var(--cloud); opacity: .95; animation: drift var(--dur, 90s) linear var(--delay, 0s) infinite; transition: fill .7s ease; }
.hill-back { fill: var(--hill-back); transition: fill .7s ease; }
.hill-mid { fill: var(--hill-mid); transition: fill .7s ease; }
.tree-trunk { fill: var(--trunk); }
.tree-leaf { fill: var(--grass); }
.mound { fill: var(--hill-mid); }
.burrow-hole { fill: var(--burrow); }
.tuft { fill: none; stroke: var(--grass); stroke-width: 3; stroke-linecap: round; }
.stem { fill: none; stroke: var(--leaf); stroke-width: 3; stroke-linecap: round; }
.mflower { transform-box: view-box; animation: sway 3s ease-in-out var(--delay, 0s) infinite alternate; }

@keyframes drift {
  from { transform: translateX(-220px); }
  to   { transform: translateX(680px); }
}
@keyframes twinkle {
  from { opacity: .25; }
  to   { opacity: 1; }
}

/* ---------- iepurașii ---------- */

.c-line { stroke: var(--outline); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.c-body { fill: var(--body); }
.c-inner { fill: var(--inner); }
.c-belly { fill: var(--belly); }
.c-blush { fill: var(--blush); opacity: .75; }
.c-ink { fill: var(--outline); }
.c-shine { fill: #fff; }
.c-nose { fill: var(--blush); stroke: var(--outline); stroke-width: 2.5; }
.c-stroke { fill: none; stroke: var(--outline); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.c-petal { fill: var(--petal); }
.c-center { fill: var(--center); stroke-width: 3; }
.c-stem { fill: none; stroke: var(--leaf); stroke-width: 5; stroke-linecap: round; }
.c-leaf { fill: var(--leaf); }
.c-shadow { fill: var(--shadow); }

.slot { cursor: pointer; outline: none; }
.kbd .slot:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }

/* Transformările se fac în unități ale desenului (câte 360 pe un iepuraș) */
.walk, .pop, .flop, .breathe, .ear, .ear-pose, .flowers, .eyes-open, .shadow, .head, .zz {
  transform-box: view-box;
}
.pop { transform-origin: 180px 310px; }
.flop { transform-origin: 268px 310px; }
.breathe { transform-origin: 180px 310px; animation: breathe 2.6s ease-in-out var(--phase, 0s) infinite alternate; }
.ear-l, .ear-l .ear-pose { transform-origin: 152px 160px; }
.ear-r, .ear-r .ear-pose { transform-origin: 208px 160px; }
.flowers { transform-origin: 262px 250px; animation: sway 2.8s ease-in-out var(--phase, 0s) infinite alternate; }
.head { animation: nod 2.2s ease-in-out infinite alternate; }
.head.h2 { animation-duration: 2.6s; animation-delay: -.7s; }
.head.h3 { animation-duration: 1.9s; animation-delay: -1.2s; }
.eyes-open { transform-origin: 180px 208px; }
.eyes-closed { opacity: 0; }
.shadow { transform-origin: 180px 313px; }
.zz { font: 600 26px var(--font); fill: var(--muted); opacity: 0; }
.zz2 { font-size: 34px; }

@keyframes breathe {
  from { transform: scale(1.012, .988); }
  to   { transform: scale(.992, 1.01); }
}
@keyframes sway {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(3.5deg); }
}
@keyframes nod {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}

/* ---------- efecte peste scenă ---------- */

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }

.petal-fall {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: var(--s);
  height: calc(var(--s) * 1.25);
  background: #fff;
  border-radius: 80% 0 80% 0;
  opacity: .75;
  animation: fall var(--dur) linear var(--delay) infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(var(--drift), 55cqh, 0) rotate(180deg); }
  100% { transform: translate3d(calc(var(--drift) * -.4), 112cqh, 0) rotate(360deg); }
}
.fx { container-type: size; }

.bit {
  position: absolute;
  font: 600 1.5rem/1 var(--font);
  font-variant-emoji: text;
  color: var(--blush-bit);
  animation: burst 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
.bit.is-flower { color: var(--center); }
@keyframes burst {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0; }
}

.bubble {
  position: absolute;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bubble-bg);
  color: var(--bubble-ink);
  font: 600 1rem/1.2 var(--font);
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--outline);
  animation: bubble 1.7s ease-out forwards;
}
@keyframes bubble {
  0%   { opacity: 0; transform: translate(-50%, -70%) scale(.6); }
  14%  { opacity: 1; transform: translate(-50%, -100%) scale(1.1); }
  24%  { transform: translate(-50%, -100%) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -135%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .star, .mflower, .breathe, .flowers, .head, .petal-fall, .support .heart { animation: none; }
  .bit, .bubble, .card { animation-duration: .01ms; }
  .sun, .moon, #stars, .cloud, .hill-back, .hill-mid { transition: none; }
}