/* Kindness Garden v2 — a faithful cherry-tree memory scene.
   The first pass tried to fake ink branches with linear-gradients and made the
   tree read like telephone wires. This version uses a single composed SVG tree
   silhouette, then places the existing interactive memory blooms on branch
   anchors. Life Skills behavior remains untouched. */

:root {
  --kg-paper: #f5f1e6;
  --kg-ink: #241f1c;
  --kg-rose: #d8586a;
  --kg-deep: #9f3149;
}

.garden-scene,
.garden-world {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 86% 96%, rgba(188,128,126,.14), transparent 33%),
    radial-gradient(ellipse at 17% 8%, rgba(186,178,164,.12), transparent 30%),
    linear-gradient(180deg, #faf7ef 0%, #f5f1e6 100%) !important;
  border-color: rgba(67,54,47,.22) !important;
  box-shadow: 0 10px 28px rgba(55,40,36,.10) !important;
}

.garden-scene::before,
.garden-world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .48;
  background-image:
    radial-gradient(circle at 18% 21%, rgba(83,68,55,.055) 0 1px, transparent 1.2px),
    radial-gradient(circle at 73% 64%, rgba(83,68,55,.04) 0 1px, transparent 1.2px),
    repeating-linear-gradient(82deg, transparent 0 27px, rgba(110,96,78,.018) 27px 28px, transparent 28px 58px);
  background-size: 43px 47px, 53px 51px, auto;
}

.garden-sun,
.garden-ground,
.garden-hills,
.garden-sky { display: none !important; }

.garden-scene::after,
.garden-world::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .88;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 470'%3E%3Cg fill='none' stroke='%23241f1c' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-22 493 C55 405 112 333 161 244 C209 158 229 88 250 15' stroke-width='31' opacity='.86'/%3E%3Cpath d='M16 442 C104 353 182 293 283 243 C382 194 491 167 712 154' stroke-width='15' opacity='.80'/%3E%3Cpath d='M107 342 C154 255 203 205 300 155 C393 106 500 80 690 82' stroke-width='12' opacity='.78'/%3E%3Cpath d='M183 270 C280 278 385 298 533 354 C593 377 644 402 702 438' stroke-width='10' opacity='.72'/%3E%3Cpath d='M214 214 C314 188 415 185 548 213 C611 226 658 242 706 259' stroke-width='8' opacity='.68'/%3E%3Cpath d='M246 151 C309 118 367 79 415 25' stroke-width='7' opacity='.64'/%3E%3Cpath d='M310 151 C371 125 430 123 510 138' stroke-width='5' opacity='.62'/%3E%3Cpath d='M374 112 C432 76 491 51 555 38' stroke-width='5' opacity='.60'/%3E%3Cpath d='M454 181 C520 146 594 132 685 136' stroke-width='5' opacity='.58'/%3E%3Cpath d='M318 285 C371 327 421 376 454 434' stroke-width='5' opacity='.55'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f5f1e6' stroke-linecap='round' opacity='.12'%3E%3Cpath d='M-18 487 C61 400 119 330 165 242 C210 157 232 90 251 18' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(.15px);
}

.garden-blooms,
.garden-clusters {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
}

.garden-plant {
  --petal: #d8586a;
  --petal-deep: #9f3149;
  position: absolute !important;
  width: 104px !important;
  height: 104px !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
  animation: cherry-cluster-in .55s calc(var(--plant-index) * .045s) both ease-out !important;
}

.garden-clusters .garden-plant:nth-child(1)  { left: 22% !important; top: 65% !important; }
.garden-clusters .garden-plant:nth-child(2)  { left: 40% !important; top: 52% !important; }
.garden-clusters .garden-plant:nth-child(3)  { left: 62% !important; top: 43% !important; }
.garden-clusters .garden-plant:nth-child(4)  { left: 79% !important; top: 34% !important; }
.garden-clusters .garden-plant:nth-child(5)  { left: 33% !important; top: 29% !important; }
.garden-clusters .garden-plant:nth-child(6)  { left: 54% !important; top: 23% !important; }
.garden-clusters .garden-plant:nth-child(7)  { left: 73% !important; top: 20% !important; }
.garden-clusters .garden-plant:nth-child(8)  { left: 49% !important; top: 67% !important; }
.garden-clusters .garden-plant:nth-child(9)  { left: 68% !important; top: 69% !important; }
.garden-clusters .garden-plant:nth-child(10) { left: 86% !important; top: 58% !important; }
.garden-clusters .garden-plant:nth-child(11) { left: 17% !important; top: 39% !important; }
.garden-clusters .garden-plant:nth-child(12) { left: 89% !important; top: 25% !important; }

.garden-blooms .garden-plant.compact { width: 66px !important; height: 66px !important; }
.garden-blooms .garden-plant.compact:nth-child(1) { left: 26% !important; top: 63% !important; }
.garden-blooms .garden-plant.compact:nth-child(2) { left: 43% !important; top: 49% !important; }
.garden-blooms .garden-plant.compact:nth-child(3) { left: 61% !important; top: 39% !important; }
.garden-blooms .garden-plant.compact:nth-child(4) { left: 77% !important; top: 31% !important; }
.garden-blooms .garden-plant.compact:nth-child(5) { left: 38% !important; top: 26% !important; }
.garden-blooms .garden-plant.compact:nth-child(6) { left: 68% !important; top: 22% !important; }

.garden-plant .plant-leaves,
.garden-plant .plant-leaves::before,
.garden-plant .plant-leaves::after { display: none !important; }

.plant-bloom.sprite-1 { --petal: #ba3448; --petal-deep: #8c1e30; }
.plant-bloom.sprite-2 { --petal: #d8586a; --petal-deep: #a23244; }
.plant-bloom.sprite-3 { --petal: #f0a894; --petal-deep: #cc705c; }
.plant-bloom.sprite-4 { --petal: #f6eee0; --petal-deep: #cc9086; }
.plant-bloom.sprite-5 { --petal: #e0e9ee; --petal-deep: #8eacba; }
.plant-bloom.sprite-6 { --petal: #e2c6de; --petal-deep: #ae88aa; }

.plant-bloom {
  position: absolute !important;
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, var(--petal-deep) 0 10%, transparent 11%),
    radial-gradient(ellipse at 50% 13%, var(--petal) 0 27%, transparent 29%),
    radial-gradient(ellipse at 86% 41%, var(--petal) 0 27%, transparent 29%),
    radial-gradient(ellipse at 72% 82%, var(--petal) 0 27%, transparent 29%),
    radial-gradient(ellipse at 28% 82%, var(--petal) 0 27%, transparent 29%),
    radial-gradient(ellipse at 14% 41%, var(--petal) 0 27%, transparent 29%) !important;
  box-shadow: 0 1px 3px rgba(71,38,42,.12) !important;
  filter: saturate(.94) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.plant-bloom::before,
.plant-bloom::after { display: none !important; }

.garden-plant .plant-bloom.bloom-1 { left: 36px !important; top: 37px !important; transform: rotate(-8deg) !important; }
.garden-plant .plant-bloom.bloom-2 { left: 17px !important; top: 24px !important; transform: scale(.86) rotate(7deg) !important; }
.garden-plant .plant-bloom.bloom-3 { left: 57px !important; top: 18px !important; transform: scale(.9) rotate(-4deg) !important; }
.garden-plant .plant-bloom.bloom-4 { left: 48px !important; top: 55px !important; transform: scale(.76) rotate(10deg) !important; }
.garden-plant .plant-bloom.bloom-5 { left: 10px !important; top: 49px !important; transform: scale(.72) rotate(-9deg) !important; }
.garden-plant .plant-bloom.bloom-6 { left: 69px !important; top: 43px !important; transform: scale(.68) rotate(5deg) !important; }
.garden-plant .plant-bloom.bloom-7 { left: 33px !important; top: 8px !important; transform: scale(.62) rotate(-2deg) !important; }

.garden-plant.compact .plant-bloom { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; pointer-events: none; }
.garden-plant.compact .plant-bloom.bloom-1 { left: 22px !important; top: 23px !important; transform: none !important; }
.garden-plant.compact .plant-bloom.bloom-2 { left: 8px !important; top: 13px !important; transform: scale(.78) !important; }
.garden-plant.compact .plant-bloom.bloom-3 { left: 38px !important; top: 9px !important; transform: scale(.82) !important; }
.garden-plant.compact .plant-bloom.bloom-4 { left: 34px !important; top: 36px !important; transform: scale(.7) !important; }

.plant-bloom:hover,
.plant-bloom:focus-visible { transform: scale(1.12) !important; outline: 2px solid rgba(159,49,73,.32) !important; outline-offset: 3px !important; }
.plant-bloom.selected { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 5px rgba(159,49,73,.38), 0 3px 10px rgba(71,38,42,.15) !important; }

.garden-plant > strong {
  position: absolute !important;
  left: 50% !important;
  top: 77px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  min-width: 78px !important;
  max-width: 108px !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(58,46,40,.14) !important;
  border-radius: 999px !important;
  background: rgba(249,246,239,.88) !important;
  color: #403833 !important;
  box-shadow: 0 2px 5px rgba(52,40,35,.04) !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap;
}
.garden-plant > strong small { display: block !important; margin-top: 1px !important; color: rgba(64,56,51,.58) !important; font-size: 8px !important; font-weight: 600 !important; }
.garden-plant.compact > strong { display: none !important; }

.garden-world .garden-clusters::before {
  content: "優\Aし\Aさ";
  white-space: pre;
  position: absolute;
  left: 22px;
  top: 38px;
  color: rgba(70,58,45,.28);
  font: 500 13px/1.55 Georgia, serif;
  pointer-events: none;
}

.planting-bloom {
  z-index: 7 !important;
  background: rgba(249,246,239,.96) !important;
  border: 1px solid rgba(72,54,48,.16) !important;
  color: #433a34 !important;
  box-shadow: 0 12px 26px rgba(70,42,44,.14) !important;
  animation: cherry-arrive 1.8s both cubic-bezier(.2,.8,.2,1) !important;
}
.planting-bloom i {
  display: inline-block !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, #9f3149 0 10%, transparent 11%),
    radial-gradient(ellipse at 50% 13%, #d85870 0 27%, transparent 29%),
    radial-gradient(ellipse at 86% 41%, #d85870 0 27%, transparent 29%),
    radial-gradient(ellipse at 72% 82%, #d85870 0 27%, transparent 29%),
    radial-gradient(ellipse at 28% 82%, #d85870 0 27%, transparent 29%),
    radial-gradient(ellipse at 14% 41%, #d85870 0 27%, transparent 29%) !important;
}

@keyframes cherry-cluster-in { from { opacity: 0; scale: .82; } to { opacity: 1; scale: 1; } }
@keyframes cherry-arrive {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.45) rotate(-10deg); }
  26% { opacity: 1; transform: translate(-50%, -5px) scale(1.08) rotate(3deg); }
  60% { transform: translate(-50%, -12px) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(.88) rotate(5deg); }
}

@media (max-width: 720px) {
  .garden-world { height: 445px !important; }
  .garden-plant { width: 92px !important; height: 92px !important; }
  .garden-clusters .garden-plant:nth-child(1) { left: 24% !important; top: 67% !important; }
  .garden-clusters .garden-plant:nth-child(2) { left: 45% !important; top: 54% !important; }
  .garden-clusters .garden-plant:nth-child(3) { left: 66% !important; top: 43% !important; }
  .garden-clusters .garden-plant:nth-child(4) { left: 82% !important; top: 31% !important; }
  .garden-clusters .garden-plant:nth-child(5) { left: 34% !important; top: 31% !important; }
  .garden-clusters .garden-plant:nth-child(6) { left: 56% !important; top: 24% !important; }
  .garden-plant > strong { top: 72px !important; font-size: 9px !important; min-width: 70px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .garden-plant,
  .planting-bloom { animation: none !important; }
  .plant-bloom { transition: none !important; }
}