/* garden.css — iXYP + ambient theming (matches the existing glass UI system) */

.garden-ambient{
  position: relative;
  overflow: hidden;
  padding: 16px;
  min-height: 560px;
}

.garden-ambient::before{
  content:"";
  position:absolute; inset:-40px;
  background: radial-gradient(1200px 500px at 50% 10%, rgba(255,255,255,0.16), transparent 60%),
              radial-gradient(900px 420px at 20% 70%, rgba(120,180,255,0.12), transparent 65%),
              radial-gradient(900px 420px at 80% 70%, rgba(255,160,120,0.08), transparent 65%),
              linear-gradient(180deg, rgba(10,18,28,0.35), rgba(10,18,28,0.1));
  filter: blur(0px);
  z-index:0;
}

.garden-ambient.is-night::before{
  background: radial-gradient(1200px 520px at 50% 12%, rgba(210,220,255,0.14), transparent 60%),
              radial-gradient(900px 420px at 22% 75%, rgba(90,120,255,0.12), transparent 65%),
              radial-gradient(900px 420px at 78% 75%, rgba(120,90,255,0.10), transparent 65%),
              linear-gradient(180deg, rgba(4,10,22,0.62), rgba(4,10,22,0.14));
}

.garden-ambient.is-dawn::before{
  background: radial-gradient(1200px 520px at 50% 12%, rgba(255,230,210,0.18), transparent 60%),
              radial-gradient(900px 420px at 22% 75%, rgba(120,180,255,0.12), transparent 65%),
              radial-gradient(900px 420px at 78% 75%, rgba(255,170,120,0.10), transparent 65%),
              linear-gradient(180deg, rgba(12,18,26,0.42), rgba(12,18,26,0.10));
}

.garden-ambient.is-dusk::before{
  background: radial-gradient(1200px 520px at 50% 12%, rgba(255,210,210,0.14), transparent 60%),
              radial-gradient(900px 420px at 22% 75%, rgba(255,140,90,0.10), transparent 65%),
              radial-gradient(900px 420px at 78% 75%, rgba(160,90,255,0.12), transparent 65%),
              linear-gradient(180deg, rgba(10,12,22,0.52), rgba(10,12,22,0.12));
}

.garden-ambient__top{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom: 10px;
}

.ixyp-stage{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 18px 10px 8px;
  min-height: 420px;
}

.ixyp-crest{
  position: relative;
  width: min(520px, 92vw);
  height: 420px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.ixyp-svg{
  width: 360px;
  height: 420px;
  display:block;
}

.ixyp-outline{
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.25);
  stroke-width: 2;
}

.ixyp-liquid-bg{
  fill: rgba(255,255,255,0.02);
}

.ixyp-wave{
  fill: rgba(120, 190, 255, 0.55);
  opacity: 0.85;
}

.ixyp-wave--alt{
  opacity: 0.55;
}

.ixyp-gloss{
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.10);
  stroke-width: 1;
}

.ixyp-drops{
  position:absolute;
  top: 110px;
  width: 360px;
  height: 260px;
  pointer-events:none;
  overflow:hidden;
}

.ixyp-drop{
  position:absolute;
  top: -20px;
  width: 6px;
  height: 16px;
  border-radius: 10px;
  background: rgba(150, 210, 255, 0.75);
  filter: drop-shadow(0 0 10px rgba(150, 210, 255, 0.25));
  animation: ixyp-fall 1.8s linear infinite;
  opacity: 0.85;
}

@keyframes ixyp-fall{
  from{ transform: translateY(-30px); opacity: 0.0; }
  10%{ opacity: 0.8; }
  to{ transform: translateY(300px); opacity: 0.0; }
}

.ixyp-pot{
  position:absolute;
  bottom: 8px;
  width: 320px;
  height: 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
}

.ixyp-pot__rim{
  width: 320px;
  height: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
}

.ixyp-pot__body{
  width: 280px;
  height: 130px;
  border-bottom-left-radius: 44px;
  border-bottom-right-radius: 44px;
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ixyp-logo{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.18));
}

.ixyp-radiance{
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 22px;
  box-shadow: 0 0 28px rgba(255,255,255,0.12), inset 0 0 38px rgba(160, 120, 255, 0.10);
  animation: ixyp-rad 1.6s ease-in-out infinite;
  z-index: 1;
}

@keyframes ixyp-rad{
  0%,100%{ opacity: 0.35; }
  50%{ opacity: 0.65; }
}

.hidden{ display:none !important; }

.check{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.check input{ transform: scale(1.05); }

.garden-controls a{ text-decoration: underline; }

/* --- Garden page tighter typography (slightly smaller than global) --- */
body{ font-size: 0.94em; }

/* --- Crest v11: squared blue panel + gold border --- */
.ixyp-crest{ width: min(560px, 96vw); height: auto; }
.crest-box{
  position: relative;
  width: min(560px, 96vw);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: radial-gradient(800px 500px at 50% 15%, rgba(80,120,255,0.18), transparent 58%),
              linear-gradient(180deg, rgba(8,14,32,0.95), rgba(6,10,26,0.92));
  border: 2px solid rgba(214, 176, 64, 0.95);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 18px 55px rgba(0,0,0,0.45);
  overflow: hidden;
}

.crest-ixyp{
  position:absolute;
  left: 50%;
  bottom: 15%; /* sits on ground (15% height) */
  transform: translateX(-50%);
  width: 62%;
  height: 49%;
  z-index: 5;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}
.ixyp-hero{ width: 100%; height: 100%; display:block; filter: drop-shadow(0 0 16px rgba(80,255,170,0.28)); }

.crest-ground{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 15%;
  background: linear-gradient(180deg, rgba(45,24,10,0.98), rgba(18,10,6,0.98));
  z-index: 6;
}

/* Plant Gauge (horizontal) */
.plant-gauge{
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: 7.5%;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.85);
  background: rgba(255,255,255,0.10);
  z-index: 7;
  overflow:hidden;
}
.plant-gauge__fill{
  height: 100%;
  width: 0%;
  background: rgba(52, 255, 120, 0.85);
  transition: width 650ms ease;
}

/* Rain (slanted) - only when hydro enabled */
.crest-rain{
  position:absolute; inset:0;
  opacity: 0;
  z-index: 1;
  pointer-events:none;
}
.crest-box.is-rain .crest-rain{ opacity: 1; }
.crest-rain::before,
.crest-rain::after{
  content:"";
  position:absolute; inset:-40% -40%;
  background-image: repeating-linear-gradient(110deg,
    rgba(190,220,255,0.0) 0px,
    rgba(190,220,255,0.0) 10px,
    rgba(190,220,255,0.28) 11px,
    rgba(190,220,255,0.28) 12px);
  transform: rotate(-12deg);
  animation: crestRain 1.25s linear infinite;
  filter: drop-shadow(0 0 6px rgba(140,210,255,0.15));
}
.crest-rain::after{ animation-duration: 0.95s; opacity: 0.55; }
@keyframes crestRain{ from{ background-position: 0 0; } to{ background-position: 0 140px; } }

/* Lunar moon + moonshine */
.crest-moonwrap{
  position:absolute;
  top: 8%;
  left: 8%;
  width: 84px;
  height: 84px;
  opacity: 0;
  z-index: 3;
  pointer-events:none;
}
.crest-box.has-moon .crest-moonwrap{ opacity: 0.90; }
.crest-moonshine{
  position:absolute; inset:-18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,245,180,0.55), rgba(255,245,180,0.0) 70%);
  opacity: 0;
  filter: blur(2px);
}
.crest-box.has-moonshine .crest-moonshine{ opacity: 1; }
.crest-moon{
  position:absolute; inset:0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0.0) 55%),
    radial-gradient(circle at 62% 42%, rgba(90,60,20,0.22), rgba(90,60,20,0.0) 32%),
    radial-gradient(circle at 36% 68%, rgba(90,60,20,0.18), rgba(90,60,20,0.0) 30%),
    radial-gradient(circle at 70% 70%, rgba(90,60,20,0.16), rgba(90,60,20,0.0) 26%),
    radial-gradient(circle, rgba(255,240,170,0.92), rgba(240,210,120,0.88));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

/* Aurora Clouds (top 15%) */
.crest-aurora{
  position:absolute;
  top:0; left:0; right:0;
  height: 15%;
  opacity: 0;
  z-index: 2;
  pointer-events:none;
  filter: blur(10px);
  background:
    radial-gradient(120px 60px at 12% 70%, rgba(150,255,240,0.40), rgba(150,255,240,0.0) 70%),
    radial-gradient(160px 70px at 35% 55%, rgba(255,160,255,0.32), rgba(255,160,255,0.0) 70%),
    radial-gradient(180px 80px at 62% 60%, rgba(255,255,170,0.25), rgba(255,255,170,0.0) 72%),
    radial-gradient(140px 60px at 85% 70%, rgba(140,200,255,0.28), rgba(140,200,255,0.0) 72%);
}
.crest-box.has-aurora .crest-aurora{ opacity: 0.63; }

/* --- Garden Overlay Menu (bottom) --- */
.garden-overlay{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  border-radius: 22px 22px 0 0;
  background: rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.16);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  backdrop-filter: blur(16px);
  box-shadow: 0 -10px 35px rgba(0,0,0,0.35);
  padding: 18px 10px 12px;
  --go-strip: 14px;
  transform: translateY(0);
  transition: transform 340ms cubic-bezier(.2,.9,.2,1);
  touch-action: none;
}
.garden-overlay:not(.is-open){
  transform: translateY(calc(100% - var(--go-strip)));
}

/* Center hump control button (protruding) */
.garden-overlay__toggle{
  position:absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  width: 92px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
  color: transparent;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.garden-overlay__toggleDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,60,60,0.95);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 14px rgba(255,60,60,0.35);
}

.garden-overlay__strip{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 2px 4px;
}

/* half-size tiles */
.garden-tile{
  flex: 0 0 140px;
  min-height: 108px;
  padding: 10px !important;
}
.garden-tile select,
.garden-tile input[type="checkbox"],
.garden-tile .btn{
  font-size: 0.92em;
}
.garden-tile .ixyp-mini__head{
  margin-bottom: 6px;
}

 (max-width: 420px){
  .garden-tile{ flex-basis: 128px; }
  .crest-moonwrap{ width: 72px; height: 72px; }
}


/* === iXYP Sigil Plant Crest Upgrade === */
.ixyp-sigil{max-width:360px;margin:auto;display:block}
.ixyp-pot{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.35);stroke-width:2}
.ixyp-outline{fill:none;stroke:url(#iridescent);stroke-width:3;filter:drop-shadow(0 0 10px rgba(255,255,255,.25))}
.ixyp-core{fill:rgba(160,160,160,.22)}
.ixyp-fill{transition:all 1.1s ease;fill:#39ff7a}
.ixyp-blossom{fill:rgba(255,180,230,.9);opacity:0;transform:scale(.4);transform-origin:110px 34px;transition:.8s ease}
.ixyp-blossom.active{opacity:1;transform:scale(1)}
.ixyp-radiance{animation:ixypGlow 1.6s infinite alternate}
@keyframes ixypGlow{
  from{filter:drop-shadow(0 0 12px rgba(255,255,255,.35))}
  to{filter:drop-shadow(0 0 28px rgba(255,210,255,.85))}
}

/* Blossom unfold animation */
.ixyp-blossom.active{
  animation:petalBloom 1.2s ease forwards;
}
@keyframes petalBloom{
  0%{opacity:0;transform:scale(.2) rotate(-20deg)}
  60%{opacity:1;transform:scale(1.15) rotate(8deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}
/* Stronger radiance */
.ixyp-radiance{
  animation:ixypGlow 1.1s infinite alternate;
}
@keyframes ixypGlow{
  from{filter:drop-shadow(0 0 18px rgba(255,255,255,.45))}
  to{filter:drop-shadow(0 0 55px rgba(255,180,255,.95))}
}


/* === Control panel mini cards (Our Departments style, horizontal) === */
.ixyp-panel-strip{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:6px 2px 10px;
  scroll-snap-type:x mandatory;
}
.ixyp-panel-strip::-webkit-scrollbar{height:10px}
.ixyp-panel-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.ixyp-mini{
  min-width:260px;
  scroll-snap-align:start;
}
.ixyp-mini__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:10px;
}
.ixyp-mini select{width:100%}

.ixyp-dropdown{position:relative}
.ixyp-dropdown__summary{width:100%; text-align:left}
.ixyp-dropdown[open] .ixyp-dropdown__summary{box-shadow:0 0 0 2px rgba(255,255,255,.18) inset}
.ixyp-dropdown__panel{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
}

/* iXYP crest enhancements */
.ixyp-fill{transition:all 1.1s ease}
.ixyp-outline.pulse{animation:leafPulse .9s ease}
@keyframes leafPulse{
  0%{filter:drop-shadow(0 0 10px rgba(255,255,255,.25))}
  50%{filter:drop-shadow(0 0 22px rgba(180,255,220,.55))}
  100%{filter:drop-shadow(0 0 10px rgba(255,255,255,.25))}
}

/* Halo glow resonance */

/* Hydroponic drops */
.ixyp-drops{
  pointer-events:none;
  position:absolute;
  left:50%;
  top:44px;
  transform:translateX(-50%);
  width:220px;
  height:160px;
  overflow:hidden;
}
.ixyp-drops span{
  position:absolute;
  top:-18px;
  width:6px;
  height:18px;
  border-radius:999px;
  background:rgba(200,240,255,.55);
  filter:drop-shadow(0 0 10px rgba(190,240,255,.25));
  animation:dropFall 1.4s linear infinite;
  opacity:.9;
}
@keyframes dropFall{
  0%{transform:translateY(0); opacity:.0}
  15%{opacity:.9}
  100%{transform:translateY(170px); opacity:0}
}
.ixyp-drops.off{display:none}

/* Blossom unfold */
.ixyp-bloom{opacity:0; transform-origin:110px 50px; transform:scale(.3); transition:.4s ease}
.ixyp-bloom.active{opacity:1; transform:scale(1)}
.ixyp-petal{fill:rgba(255,180,230,.92); transform-origin:110px 50px}
.ixyp-bloom-core{fill:rgba(255,245,170,.95)}
.ixyp-bloom.active .p1{animation:petal1 1.0s ease forwards}
.ixyp-bloom.active .p2{animation:petal2 1.0s ease forwards}
.ixyp-bloom.active .p3{animation:petal3 1.0s ease forwards}
.ixyp-bloom.active .p4{animation:petal4 1.0s ease forwards}
.ixyp-bloom.active .p5{animation:petal5 1.0s ease forwards}

@keyframes petal1{from{transform:rotate(0) scale(.6)}to{transform:rotate(-18deg) scale(1)}}
@keyframes petal2{from{transform:rotate(0) scale(.6)}to{transform:rotate(18deg) scale(1)}}
@keyframes petal3{from{transform:translateY(6px) scale(.6)}to{transform:translateY(-3px) scale(1)}}
@keyframes petal4{from{transform:rotate(0) scale(.6)}to{transform:rotate(-35deg) scale(1)}}
@keyframes petal5{from{transform:rotate(0) scale(.6)}to{transform:rotate(35deg) scale(1)}}

/* Stronger radiance */
.ixyp-radiance{animation:ixypGlow 1.05s infinite alternate}
@keyframes ixypGlow{
  from{filter:drop-shadow(0 0 22px rgba(255,255,255,.55))}
  to{filter:drop-shadow(0 0 75px rgba(255,190,255,.98))}
}

/* Ambient moon-cycle themes (applied to #ambientRoot) */
.garden-ambient.theme-new{background:radial-gradient(1200px 420px at 50% 0%, rgba(40,70,120,.22), rgba(10,10,20,.55))}
.garden-ambient.theme-first{background:radial-gradient(1200px 420px at 50% 0%, rgba(70,100,140,.22), rgba(18,18,30,.46))}
.garden-ambient.theme-full{background:radial-gradient(1200px 420px at 50% 0%, rgba(120,140,180,.24), rgba(28,28,44,.38))}
.garden-ambient.theme-last{background:radial-gradient(1200px 420px at 50% 0%, rgba(60,90,130,.20), rgba(14,14,24,.50))}
.garden-ambient.theme-day{background:radial-gradient(1200px 420px at 50% 0%, rgba(120,170,220,.18), rgba(18,18,30,.30))}


/* Scrollable menu blocks inside cards (no overlay) */
.ixyp-scrollmenu{
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.12);
  max-height:150px;
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ixyp-scrollitem{padding:6px 8px;border-radius:12px}
.ixyp-scrollitem:hover{background:rgba(255,255,255,.06)}
.ixyp-scrollbtn{width:100%; justify-content:flex-start}
.ixyp-scrollbtn.active{box-shadow:0 0 0 2px rgba(255,255,255,.22) inset}

/* Actions layout */
.ixyp-actions{
  display:flex;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.ixyp-qty-order{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.ixyp-qty{
  display:flex;
  gap:10px;
  align-items:center;
}
.ixyp-cart-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.ixyp-cart-actions .btn{
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 8px;
  font-size: 12px;
  border-radius: 14px;
}

/* v4 tighter action row */
.ixyp-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:nowrap}
.ixyp-actions button,.ixyp-actions .ixyp-qty{flex:1}
.ixyp-qty-order{display:flex;gap:12px;align-items:center;flex:2}

/* v4 smaller rectangular mini cards */
.ixyp-mini{min-width:200px;padding:12px;border-radius:18px}

/* overlay saved list should not block */
#cartSavedMount{max-height:180px; overflow:auto;}

/* v4 action strip portrait fix */
@media (max-width: 640px){
  .ixyp-actions{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .ixyp-actions > *{
    flex:0 0 auto !important;
  }
  #applyBtn{min-width:120px}
  .ixyp-qty{min-width:170px}
  #orderBtn{min-width:140px}
}

/* v4 mini card compact (more horizontal, less vertical height) */
.ixyp-mini{min-width:220px; padding:10px 12px !important; border-radius:18px}
.ixyp-mini__head{margin-bottom:6px !important}
.ixyp-mini .muted{line-height:1.2}
.ixyp-mini select{padding:10px 12px}
.ixyp-scrollmenu{max-height:120px}

/* Final: portrait action row always visible */
@media (max-width:640px){
  .ixyp-actions{overflow:visible !important; flex-wrap:wrap !important;}
  #applyBtn,#orderBtn{min-width:0 !important; flex:1 !important; padding:10px 12px;}
  .ixyp-qty{min-width:0 !important; flex:1 !important;}
}

/* Perfect portrait action row */
@media (max-width:640px){
  .ixyp-actions{
    display:grid !important;
    grid-template-columns: 1fr auto 1fr;
    gap:14px;
    align-items:center;
  }
  #applyBtn,#orderBtn{width:100%}
}

/* ixyp-crest-minimal */
.ixyp-svg{max-width:340px;margin:0 auto;display:block}
#ixypFillRect{opacity:.85}
#ixypPlantOutline,#ixypPlantOutline{filter:drop-shadow(0 0 10px rgba(255,255,255,.08))}


/* --- v12 garden overlay refresh --- */
.garden-overlay{padding:12px 10px 10px;--go-strip:18px;overflow:visible}
.garden-overlay__toggle{top:-18px;width:38px;height:38px;left:50%;transform:translateX(-50%)}
.garden-overlay__strip{gap:12px;padding-top:10px}.garden-tile{flex:0 0 168px;min-height:88px;padding:10px!important;display:flex;flex-direction:column;justify-content:flex-start}
.garden-tile select{width:100%}.garden-tile .ixyp-mini__head{min-height:34px}.garden-tile .ixyp-scrollmenu{display:grid;gap:8px;max-height:120px;overflow:auto;padding-right:2px}.garden-tile .check{min-height:40px;padding:8px 10px;border-radius:14px}
#periodSelect,#seedSelect,#potSelect,#natureSelect,#moonSelect{min-height:42px}


/* --- v12b compact garden tuning --- */
.garden-ambient{
  padding-bottom: 10px !important;
}
.ixyp-stage{
  padding: 10px 8px 0;
  min-height: 0;
}
.ixyp-crest{
  width: min(500px, 92vw);
  margin-bottom: 0;
}
.crest-box{
  width: min(500px, 92vw);
  aspect-ratio: 1 / 0.84;
}
.crest-ixyp{
  bottom: 17%;
  width: 50%;
  height: 43%;
}
.crest-ground{ height: 13%; }
.plant-gauge{
  bottom: 5.5%;
  height: 14px;
}

.garden-overlay{
  padding: 14px 10px 10px;
}
.garden-overlay__strip{
  gap: 10px;
  align-items: stretch;
  padding: 6px 2px 2px;
}
.garden-tile{
  flex: 0 0 170px;
  min-height: 0;
  height: auto;
  padding: 10px 10px 9px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}
.garden-tile .ixyp-mini__head{
  margin-bottom: 2px;
}
.garden-tile select{
  min-height: 40px;
  margin: 0;
}
.garden-tile label.check{
  margin: 0;
}

.garden-drop{
  position: relative;
  margin-top: 0;
}
.garden-drop__summary{
  list-style: none;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  color: rgba(255,255,255,.95);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(0,0,0,.18);
}
.garden-drop__summary::-webkit-details-marker{ display:none; }
.garden-drop__summary::after{
  content: '▾';
  font-size: 14px;
  opacity: .85;
  transition: transform .24s ease;
}
.garden-drop[open] .garden-drop__summary::after{ transform: rotate(180deg); }
.garden-drop__menu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  margin-top: 0;
  max-height: 186px;
  border-radius: 16px;
  background: rgba(16,20,34,.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 42px rgba(0,0,0,.3);
}
  padding: 8px 10px;
}
  display: flex;
  align-items: center;
  gap: 8px;
}
  accent-color: #9fd87a;
}

@media (max-width: 640px){
  .garden-tile{ flex-basis: 154px; }
  .ixyp-crest, .crest-box{ width: min(440px, 94vw); }
}


/* --- v3 garden refinements --- */
.garden-ambient{
  padding: 14px 14px 10px;
  min-height: auto;
}
.garden-ambient__top{ margin-bottom: 4px; }
.ixyp-stage{
  padding: 6px 6px 0;
  min-height: auto;
}
.ixyp-crest{
  width: min(520px, 94vw);
}
.crest-box{
  width: min(500px, 92vw);
}
.crest-ixyp{ bottom: 14%; }
.crest-ground{ height: 14%; }
.plant-gauge{ bottom: 7%; }

.garden-overlay{
  padding: 14px 10px 10px;
}
.garden-overlay__toggle{
  top: -16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.garden-overlay__toggleDot,
.garden-overlay__toggleDot::before{
  display:flex;
  align-items:center;
  justify-content:center;
}
.garden-overlay__toggleDot{
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1;
  background: transparent !important;
  box-shadow: none !important;
  color: #000;
}
.garden-overlay__toggleDot::before{ content: none; }

.garden-overlay__strip{ gap: 8px; padding-top: 6px; }
.garden-tile{
  flex: 0 0 156px;
  min-height: 82px;
  padding: 10px 10px 8px !important;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.garden-tile .ixyp-mini__head{
  margin-bottom: 6px;
  min-height: 24px;
  align-items:center;
}
.garden-tile select,
.garden-drop__summary{
  width: 100%;
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.28);
  color: #fff;
  padding: 0 38px 0 12px;
  font-size: .9rem;
  font-weight: 700;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  appearance: none;
  -webkit-appearance: none;
}
.garden-drop{
  position: relative;
}
.garden-drop__summary{
  list-style: none;
  display:flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.garden-drop__summary::-webkit-details-marker{ display:none; }
.garden-drop::after{
  content: '▾';
  position:absolute;
  right: 12px;
  top: 19px;
  transform: translateY(-50%);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  pointer-events:none;
}
.garden-drop[open]::after{ content: '▴'; }
.garden-drop__menu{
  margin-top: 8px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,12,22,.86);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  max-height: 168px;
  overflow: auto;
}
.garden-drop__menu .check{
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
.garden-drop__menu .check + .check{ margin-top: 6px; }

@media (max-width: 640px){
  .garden-tile{ flex-basis: 148px; }
  .crest-box{ width: min(460px, 92vw); }
}


/* --- v4 garden/menu refinement overrides --- */
.ixyp-stage{padding:2px 4px 0 !important;}
.ixyp-crest{width:min(480px,92vw) !important;margin-bottom:-2px !important;}
.crest-box{width:min(470px,92vw) !important;aspect-ratio:1 / 0.72 !important;}
.crest-ixyp{bottom:12% !important;width:49% !important;height:46% !important;}
.crest-ground{height:10.5% !important;}
.plant-gauge{bottom:4% !important;}
.garden-overlay{padding:12px 10px 8px !important;}
.garden-overlay__strip{gap:8px !important;padding:4px 2px 0 !important;align-items:flex-end !important;}
.garden-tile{flex:0 0 154px !important;min-height:72px !important;padding:9px 10px 8px !important;gap:4px !important;}
.garden-tile .ixyp-mini__head{margin-bottom:3px !important;min-height:22px !important;}
.garden-tile select,.garden-drop__summary{min-height:36px !important;font-size:.86rem !important;}
.garden-drop{position:relative;}
.garden-drop::after{top:18px !important;}
.garden-drop__menu{top:auto !important;bottom:calc(100% + 8px) !important;margin-top:0 !important;max-height:178px !important;padding:8px !important;border-radius:16px !important;background:rgba(8,12,22,.92) !important;overflow:auto !important;}
.garden-drop__option{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;min-height:38px !important;padding:9px 10px !important;border-radius:12px !important;background:rgba(255,255,255,.06) !important;cursor:pointer;}
.garden-drop__option + .garden-drop__option{margin-top:6px;}
.garden-drop__option input{position:absolute !important;opacity:0 !important;pointer-events:none !important;}
.garden-drop__option .garden-drop__check{opacity:0;transform:scale(.9);transition:opacity .18s ease,transform .18s ease;font-size:.82rem;}
.garden-drop__option:has(input:checked){background:rgba(255,255,255,.14) !important;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;}
.garden-drop__option:has(input:checked) .garden-drop__check{opacity:1;transform:scale(1);}


/* v5 patch: branded garden capsule + overlay stability */
.ow-policy-sidebrand.garden-page-brand{padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.22);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 24px rgba(0,0,0,.14);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;}
.garden-ambient{min-height:auto !important;padding:16px 16px 10px !important;}
.garden-ambient__top{margin-bottom:4px !important;}
.ixyp-stage{padding:8px 8px 2px !important;min-height:auto !important;}
.ixyp-crest{height:auto !important;}
.crest-box{margin-bottom:0 !important;}
.garden-overlay{bottom:max(env(safe-area-inset-bottom,0px),0px) !important;overflow:visible !important;will-change:transform;}
.garden-overlay__toggle{top:-19px !important;left:50% !important;transform:translateX(-50%) !important;width:38px !important;height:38px !important;border-radius:999px !important;background:rgba(255,255,255,.22) !important;border:1px solid rgba(255,255,255,.34) !important;box-shadow:0 10px 22px rgba(0,0,0,.28) !important;color:#000 !important;display:flex !important;align-items:center !important;justify-content:center !important;z-index:5;}
.garden-overlay__toggleDot{width:auto !important;height:auto !important;background:none !important;box-shadow:none !important;line-height:1 !important;font-size:14px !important;display:block !important;color:#000 !important;}
.garden-overlay__strip{position:relative;overflow:visible !important;align-items:flex-end !important;}
.garden-tile{overflow:visible !important;}
.garden-drop{position:relative !important;overflow:visible !important;}
.garden-drop__summary{position:relative;z-index:2;}
.garden-drop__menu{z-index:90 !important;bottom:calc(100% + 8px) !important;top:auto !important;left:0 !important;right:auto !important;min-width:100% !important;max-width:260px !important;display:none;}
.garden-drop[open] .garden-drop__menu{display:block !important;}
.garden-drop__menu .garden-drop__option{position:relative;}
.garden-drop__menu .garden-drop__option input{position:absolute !important;opacity:0 !important;inset:0 !important;width:100% !important;height:100% !important;cursor:pointer !important;pointer-events:auto !important;}
.garden-drop__menu .garden-drop__option span,.garden-drop__menu .garden-drop__option b{pointer-events:none;}


/* v6 garden stability + dropdown visibility */
.garden-ambient{padding-bottom:12px !important;}
.garden-ambient .garden-ambient__top{align-items:center;justify-content:space-between;}
.ixyp-stage{margin-bottom:0 !important;padding-bottom:0 !important;}
.ixyp-crest{margin-bottom:0 !important;padding-bottom:0 !important;}
.crest-box{margin-bottom:0 !important;padding-bottom:0 !important;min-height:auto !important;}
.garden-overlay{position:fixed !important;left:12px !important;right:12px !important;bottom:12px !important;width:auto !important;max-width:none !important;transform:none;z-index:4200 !important;overflow:visible !important;}
.garden-overlay:not(.is-open){transform:translateY(calc(100% - 19px)) !important;}
.garden-overlay.is-open{transform:translateY(0) !important;}
.garden-overlay__toggle{top:-19px !important;left:50% !important;transform:translateX(-50%) !important;width:38px !important;height:38px !important;z-index:12 !important;}
.garden-overlay__strip{display:flex !important;gap:8px !important;align-items:flex-end !important;overflow-x:auto !important;overflow-y:visible !important;white-space:nowrap;padding:6px 2px 0 !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.garden-overlay__strip::-webkit-scrollbar{display:none;}
.garden-tile{flex:0 0 168px !important;min-height:86px !important;max-height:none !important;padding:10px !important;overflow:visible !important;}
.garden-drop{position:relative !important;overflow:visible !important;}
.garden-drop__summary{display:flex !important;align-items:center !important;min-height:38px !important;}
.garden-drop__menu{position:absolute !important;left:0 !important;right:auto !important;bottom:calc(100% + 8px) !important;top:auto !important;display:none;min-width:100% !important;max-width:260px !important;max-height:220px !important;overflow:auto !important;z-index:9999 !important;}
.garden-drop[open] .garden-drop__menu{display:block !important;}
.garden-drop--multi .garden-drop__menu{min-width:220px !important;}
.garden-drop__option{position:relative;display:flex !important;align-items:center !important;justify-content:space-between !important;}
.garden-drop__option input{position:absolute !important;opacity:0 !important;inset:0 !important;width:100% !important;height:100% !important;cursor:pointer !important;pointer-events:auto !important;}
.garden-drop__option span,.garden-drop__option b{pointer-events:none;}
@media (max-width:640px){.garden-overlay{left:8px !important;right:8px !important;bottom:8px !important;}.garden-tile{flex-basis:150px !important;}.garden-drop--multi .garden-drop__menu{min-width:200px !important;max-width:220px !important;}}


.garden-overlay{position:fixed !important;left:12px !important;right:12px !important;bottom:12px !important;z-index:4200 !important;overflow:visible !important;max-height:none !important;}
.garden-overlay.is-open{transform:translateY(0) !important;}
.garden-overlay:not(.is-open){transform:translateY(calc(100% - 19px)) !important;}
.garden-overlay__toggle{top:-19px !important;left:50% !important;transform:translateX(-50%) !important;width:38px !important;height:38px !important;}
.garden-overlay__toggleDot{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;height:100% !important;font-size:14px !important;line-height:1 !important;}
.garden-overlay__strip{overflow-x:auto !important;overflow-y:visible !important;align-items:flex-end !important;position:relative !important;}
.garden-drop{position:relative !important;overflow:visible !important;}
.garden-drop__menu{position:absolute !important;left:0 !important;right:auto !important;bottom:calc(100% + 8px) !important;top:auto !important;min-width:100% !important;max-width:260px !important;max-height:220px !important;overflow:auto !important;z-index:10050 !important;background:rgba(8,12,22,.96) !important;display:none !important;}
.garden-drop--multi .garden-drop__menu{min-width:220px !important;max-width:260px !important;}
.garden-drop[open] .garden-drop__menu{display:block !important;}
.garden-drop__option{position:relative !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;min-height:38px !important;padding:9px 10px !important;border-radius:12px !important;background:rgba(255,255,255,.06) !important;}
.garden-drop__option input{position:absolute !important;opacity:0 !important;inset:0 !important;width:100% !important;height:100% !important;cursor:pointer !important;pointer-events:auto !important;}
.garden-drop__option span,.garden-drop__option b{pointer-events:none !important;}
.garden-ambient,.ixyp-stage,.ixyp-crest,.crest-box{margin-bottom:0 !important;padding-bottom:0 !important;min-height:auto !important;}
@media (max-width:640px){.garden-overlay{left:8px !important;right:8px !important;bottom:8px !important;}}


.garden-overlay{
  position:fixed !important;
  left:12px !important;
  right:12px !important;
  bottom:12px !important;
  top:auto !important;
  width:auto !important;
  max-width:none !important;
  z-index:4200 !important;
  overflow:visible !important;
}
.garden-overlay:not(.is-open){transform:translateY(calc(100% - 19px)) !important;}
.garden-overlay.is-open{transform:translateY(0) !important;}
.garden-overlay__toggle{
  top:-19px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:38px !important;
  height:38px !important;
  z-index:24 !important;
}
.garden-overlay__strip{
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding-top:4px !important;
}
.garden-overlay__strip::-webkit-scrollbar{display:none !important;}
.garden-tile{min-height:84px !important;}
  position:fixed;
  display:none;
  min-width:220px;
  max-width:260px;
  max-height:220px;
  overflow:auto;
  padding:8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,12,22,.96);
  box-shadow:0 18px 38px rgba(0,0,0,.34);
  z-index:12000;
}


  display:flex !important; align-items:center !important; min-height:38px !important;
}
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  bottom:calc(100% + 8px) !important;
  top:auto !important;
  display:none !important;
  min-width:100% !important;
  max-width:260px !important;
  max-height:220px !important;
  overflow:auto !important;
  z-index:12050 !important;
  background:rgba(8,12,22,.96) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:16px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.34) !important;
  padding:8px !important;
}


.garden-drop__summary--button{
  width:100%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);
  color:#fff;
  border-radius:14px;
  min-height:40px;
  padding:10px 14px;
  text-align:left;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.garden-drop__summary--button:active{transform:scale(.99);}
  position:fixed;
  z-index:4600;
  left:12px;
  top:12px;
  width:240px;
}
  padding:10px;
  border-radius:18px;
  max-height:min(46vh, 320px);
  overflow:auto;
}
  display:flex !important;
  align-items:center !important;
  gap:10px;
  min-height:40px;
  padding:10px 12px !important;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  position:relative;
}
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* v9 vitamins & minerals select */
#vitaminSelect{width:100%;min-height:42px;border-radius:14px;padding:10px 12px;background:rgba(8,12,22,.72);color:#fff;border:1px solid rgba(255,255,255,.18);}

/* v9 vitamins & minerals select */
#vitaminSelect{width:100%;min-height:42px;border-radius:14px;padding:10px 12px;background:rgba(8,12,22,.72);color:#fff;border:1px solid rgba(255,255,255,.18);font:inherit;font-weight:700;}
#vitaminSelect:focus,#vitaminSelect:hover{outline:none;border-color:rgba(255,255,255,.34);box-shadow:0 8px 22px rgba(0,0,0,.18);}

/* v9 hotfix4 vitamins portal + garden toggle restore */
.vm-select-wrap{position:relative;overflow:visible !important;}
.garden-overlay__toggle{cursor:pointer !important;pointer-events:auto !important;}
.garden-overlay{overflow:visible !important;}


/* v9 hotfix6 vitamins multi-select + overlay toggle */
.garden-overlay{transition:transform .32s cubic-bezier(.22,.8,.2,1) !important;}
.garden-overlay__toggle{cursor:pointer !important;pointer-events:auto !important;transition:transform .22s ease, box-shadow .22s ease !important;}
.garden-overlay__toggle:active{transform:translateX(-50%) scale(.96) !important;}
.garden-overlay:not(.is-open) .garden-overlay__toggleDot{transform:rotate(0deg);}
.garden-overlay.is-open .garden-overlay__toggleDot{transform:rotate(0deg);}
#vitaminTrigger{
  width:100%;min-height:42px;border-radius:14px;padding:10px 12px;
  background:rgba(8,12,22,.72);color:#fff;border:1px solid rgba(255,255,255,.18);
  font:inherit;font-weight:700;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#vitaminTrigger::after{content:'▾';font-size:14px;opacity:.86;flex:0 0 auto;}
.vitamin-portal{position:fixed;display:none;z-index:12050;padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(8,12,22,.96);box-shadow:0 18px 38px rgba(0,0,0,.34);overflow:auto;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.vitamin-portal.is-open{display:grid;grid-template-columns:1fr;gap:8px;}
.vitamin-portal .vm-option{min-height:40px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:700;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vitamin-portal .vm-option::after{content:'+';opacity:.65;font-weight:900;}
.vitamin-portal .vm-option.is-active{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;}
.vitamin-portal .vm-option.is-active::after{content:'✓';opacity:1;}


/* v9 hotfix7: unify garden tool capsules + normalize vitamins tile height */
.garden-tile select,
.garden-drop__summary,
#vitaminTrigger{
  background: rgba(8,12,22,.72) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 20px rgba(0,0,0,.18) !important;
}
.garden-tile select,
.garden-drop__summary,
#vitaminTrigger{
  min-height: 36px !important;
  height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.garden-tile--vitamins,
.garden-tile--vitamins.ixyp-mini,
.garden-tile--vitamins.garden-tile{
  flex: 0 0 168px !important;
  min-height: 86px !important;
  max-height: none !important;
  padding: 10px !important;
  overflow: visible !important;
}
.garden-tile--vitamins #vitaminTrigger{
  width: 100% !important;
  align-self: stretch !important;
}

/* round4: edge-to-edge garden overlay */
body[data-page="garden"]{ --garden-overlay-edge: max(env(safe-area-inset-bottom), 0px); }
body[data-page="garden"] .garden-overlay{ left:0 !important; right:0 !important; bottom:0 !important; width:100vw !important; border-radius:0 !important; padding:0 !important; margin:0 !important; }
body[data-page="garden"] .garden-overlay__strip{ width:100vw !important; padding:16px 18px calc(14px + var(--garden-overlay-edge)) !important; border-radius:0 !important; background:rgba(128,128,128,.50) !important; backdrop-filter:blur(18px) saturate(120%) !important; -webkit-backdrop-filter:blur(18px) saturate(120%) !important; box-shadow:0 -12px 35px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18) !important; gap:10px !important; align-items:stretch !important; }
body[data-page="garden"] .garden-overlay__toggle{ top:-20px !important; z-index:30 !important; }
body[data-page="garden"] .garden-tile{ flex:0 0 174px !important; min-height:96px !important; }
@media (max-width:640px){ body[data-page="garden"] .garden-overlay{ left:0 !important; right:0 !important; bottom:0 !important; } body[data-page="garden"] .garden-overlay__strip{ padding-left:12px !important; padding-right:12px !important; }}