:root{
  --bg:#050506;
  --fg:#e9e9ef;
  --muted:#a8a8b6;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 520px at 80% 20%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 700px at 40% 120%, rgba(255,255,255,.04), transparent 55%),
    var(--bg);
  color: var(--fg);
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* important for smooth drag spawning on mobile */
}

.stars{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px at 25% 70%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,.25), transparent 60%);
  opacity:.65;
  filter: blur(.1px);
  transform: translate3d(var(--sx,0px), var(--sy,0px), 0);
  transition: transform 120ms linear;
}

.hud{
  position:fixed;
  left:16px;
  top:16px;
  z-index:10;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  max-width: min(560px, calc(100vw - 32px));
}
.hud-title{ font-weight:800; letter-spacing:.2px; font-size:14px; }
.hud-sub{ margin-top:4px; color:var(--muted); font-size:12px; line-height: 1.35; }

#field{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

/* Particle */
.flower{
  position:absolute;
  left:0; top:0;
  width:64px; height:64px;
  transform: translate3d(-9999px,-9999px,0);
  opacity:0;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

/* Entry pop */
.flower.is-born{
  animation: popIn 220ms ease-out forwards;
}
@keyframes popIn{
  from{ opacity:0; transform: translate3d(var(--x), var(--y), 0) scale(.72) rotate(var(--rot)); }
  to  { opacity:1; transform: translate3d(var(--x), var(--y), 0) scale(1) rotate(var(--rot)); }
}

/* Extra motion styles (combined with JS transform) */
.flower.fx-float{ animation: floatY 1.6s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -10px; } }

.flower.fx-wobble{ animation: wobble 1.2s ease-in-out infinite; }
@keyframes wobble{ 0%,100%{ rotate: 0deg; } 50%{ rotate: 6deg; } }

.flower.fx-pulse{ animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ scale: 1; } 50%{ scale: 1.06; } }

.flower.fx-glimmer{ animation: glimmer 1.8s ease-in-out infinite; }
@keyframes glimmer{ 0%,100%{ filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)) brightness(1); } 50%{ filter: drop-shadow(0 22px 34px rgba(0,0,0,.62)) brightness(1.08); } }

/* Slightly smaller on very small screens */
@media (max-width: 420px){
  .hud{ left:12px; top:12px; padding:10px 12px; }
  .hud-title{ font-size:13px; }
  .hud-sub{ font-size:11px; }
}

/* Cheaper than filter: drop-shadow; keep it subtle */
.flower{
  /* remove: filter: drop-shadow(...) */
  filter: none;
  /* use a cheap shadow instead (paint once) */
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
  border-radius: 999px; /* helps shadow look nicer */
}

/* Avoid animating filter (glimmer) – very expensive */
.flower.fx-glimmer{
  animation: none; /* disable */
}

/* Optional: reduce extra CSS animations on low-end devices */
@media (prefers-reduced-motion: reduce){
  .flower.fx-float,
  .flower.fx-wobble,
  .flower.fx-pulse{
    animation: none !important;
  }
}

/* Performance hint */
#field{
  contain: layout paint style;
}

/* -------------------------------------------------
   Nicer background (still mostly black)
-------------------------------------------------- */

/* Soft aurora glow */
body::before{
  content:"";
  position: fixed;
  inset:-20%;
  pointer-events:none;
  z-index: 0;
  opacity: .65;
  background:
    radial-gradient(900px 500px at 15% 80%, rgba(120,210,160,.08), transparent 60%),
    radial-gradient(700px 420px at 85% 70%, rgba(190,150,255,.07), transparent 62%),
    radial-gradient(900px 520px at 55% 20%, rgba(255,210,120,.05), transparent 62%);
  filter: blur(2px);
}

/* Very subtle grain (cheap-ish, no images) */
body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index: 1;
  opacity:.10;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 5px
    );
  mix-blend-mode: overlay;
}

/* Ensure existing layers are above background */
.stars{ z-index: 2; }
.hud{ z-index: 10; }
#field{ z-index: 6; }

/* -------------------------------------------------
   Static bottom garden
-------------------------------------------------- */

.bottom-garden{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: clamp(120px, 20vh, 240px); /* ~20% of viewport, capped */
  z-index: 4;                 /* below particles (#field is 6) */
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 768px){
  .bottom-garden{
    height: clamp(140px, 24vh, 280px); /* a bit taller on mobile */
  }
}

.bottom-gradient{
  position:absolute;
  inset:0;
  z-index: 0;
  background:
    linear-gradient(to top,
      rgba(12, 70, 24, 1) 0%,
      rgba(22, 110, 42, 1) 55%,
      rgba(54, 160, 78, 1) 100%);
}

/* Grass blades (triangular shapes) */
.bottom-garden::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:0;
  height: 45%;
  z-index: 1;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%2290%22%20viewBox=%220%200%20180%2090%22%3E%0A%3Crect%20width=%22180%22%20height=%2290%22%20fill=%22none%22/%3E%0A%3Cg%20opacity=%220.95%22%3E%0A%20%20%3Cpolygon%20points=%220,90%2010,20%2020,90%22%20fill=%22rgba(30,140,60,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%2215,90%2028,35%2041,90%22%20fill=%22rgba(25,125,52,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%2235,90%2050,10%2065,90%22%20fill=%22rgba(35,160,70,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%2260,90%2072,32%2084,90%22%20fill=%22rgba(22,115,48,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%2278,90%2092,18%20106,90%22%20fill=%22rgba(32,150,66,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%22100,90%20112,42%20124,90%22%20fill=%22rgba(20,105,44,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%22118,90%20134,14%20150,90%22%20fill=%22rgba(36,170,74,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%22145,90%20156,36%20167,90%22%20fill=%22rgba(24,120,50,0.95)%22/%3E%0A%20%20%3Cpolygon%20points=%22160,90%20170,26%20180,90%22%20fill=%22rgba(30,140,60,0.95)%22/%3E%0A%3C/g%3E%0A%3C/svg%3E');
  background-repeat: repeat-x;
  background-size: 180px 90px;
  background-position: bottom center;
  opacity: .92;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
  transform: translateY(-6%);
}


/* a very faint "horizon glow" */
.bottom-garden::before{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom: 24px;
  height: 120px;
  background:
    radial-gradient(closest-side at 25% 70%, rgba(140,220,180,.10), transparent 70%),
    radial-gradient(closest-side at 75% 70%, rgba(210,170,255,.09), transparent 72%);
  filter: blur(10px);
  opacity:.55;
}

.bottom-flowers{
  position:absolute;
  left:0; right:0; bottom:-8px;
  height: 100%;
  display:flex;
  align-items:flex-end;
  justify-content: space-evenly;
  gap: 10px;
  padding: 0 10px 0;
  opacity: .85;
  z-index: 2;
}

.static-flower{
  width: clamp(70px, 10vw, 120px);
  height: clamp(70px, 10vw, 120px);
  opacity: .78;
  transform: translateY(18px);
  filter: blur(.0px);
}

/* Slight variation */
.static-flower:nth-child(2n){ opacity:.65; transform: translateY(26px) scale(.95); }
.static-flower:nth-child(3n){ opacity:.55; transform: translateY(30px) scale(.88); }

/* --- SVG icons (inline via background-image data URI) --- */
/* Sunflower */
.sf-sunflower{
  background-repeat:no-repeat;
  background-position: center bottom;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg transform='translate(80 78)'%3E%3Cg%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(0)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(30)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(60)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(90)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(120)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(150)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(180)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(210)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(240)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(270)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(300)' fill='rgba(235,190,70,.95)'/%3E%3Cpath d='M0 0 C-10 -22,-6 -48,0 -58 C7 -48,9 -22,0 0 Z' transform='rotate(330)' fill='rgba(235,190,70,.95)'/%3E%3C/g%3E%3Ccircle r='26' fill='rgba(180,120,40,.95)'/%3E%3Ccircle r='20' fill='rgba(90,55,20,.95)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hydrangea */
.sf-hydrangea{
  background-repeat:no-repeat;
  background-position: center bottom;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg transform='translate(80 80)'%3E%3Cg%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(0)' fill='rgba(170,205,255,.92)'/%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(45)' fill='rgba(155,195,255,.92)'/%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(90)' fill='rgba(170,205,255,.92)'/%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(135)' fill='rgba(155,195,255,.92)'/%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(180)' fill='rgba(170,205,255,.92)'/%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(225)' fill='rgba(155,195,255,.92)'/%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(270)' fill='rgba(170,205,255,.92)'/%3E%3Cpath d='M0 -14 C-10 -20,-10 -35,0 -40 C10 -35,10 -20,0 -14 Z' transform='rotate(315)' fill='rgba(155,195,255,.92)'/%3E%3C/g%3E%3Ccircle r='22' fill='rgba(90,120,180,.45)'/%3E%3Ccircle r='12' fill='rgba(255,255,255,.12)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Protea */
.sf-protea{
  background-repeat:no-repeat;
  background-position: center bottom;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg transform='translate(80 82)'%3E%3Cg%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(0)' fill='rgba(250,205,220,.92)'/%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(45)' fill='rgba(245,185,205,.92)'/%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(90)' fill='rgba(250,205,220,.92)'/%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(135)' fill='rgba(245,185,205,.92)'/%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(180)' fill='rgba(250,205,220,.92)'/%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(225)' fill='rgba(245,185,205,.92)'/%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(270)' fill='rgba(250,205,220,.92)'/%3E%3Cpath d='M0 -6 C-14 -18,-18 -44,0 -58 C18 -44,14 -18,0 -6 Z' transform='rotate(315)' fill='rgba(245,185,205,.92)'/%3E%3C/g%3E%3Cellipse rx='22' ry='26' fill='rgba(155,70,95,.55)'/%3E%3Cellipse rx='14' ry='18' fill='rgba(255,255,255,.10)'/%3E%3C/g%3E%3C/svg%3E");
}