/* Scene-first layout. All illustrated objects still use generated PNG assets. */
:root {
  --soil: 54%;
  --plant-h: clamp(280px, 47vh, 440px);
  --dock-height: 100px;
  --actor-h: clamp(250px, 36vh, 345px);
  --paper: #fffaf0;
}

.world-backdrop {
  inset: 0 auto auto 0;
  width: 100%;
  height: 102.3%;
  object-fit: fill;
}
.topbar { top: 22px; left: 28px; right: 28px; }
.brand { gap: 13px; }
.brand-word { font-size: 29px; letter-spacing: -2px; }
.brand-category { font-size: 8px; letter-spacing: 1.4px; }
.brand-divider { height: 18px; }
.top-actions { gap: 8px; }
.circle-button { width: 42px; height: 42px; font-size: 18px; }
.collection-button { height: 42px; font-size: 11px; padding: 6px 14px 6px 8px; }
.collection-button img { width: 27px; height: 27px; }
.journal-quick { display: block; }
.collection-button, .circle-button {
  background: #fffaf0ef;
  border: 1px solid #fff9;
  box-shadow: 0 3px 0 #315a3810, 0 6px 18px #315a3808;
}
.scene-title, .soil-caption, .weather-chip, .save-status { display: none; }
.garden-heading {
  position: absolute;
  top: 92px;
  left: 18%;
  z-index: 8;
  pointer-events: none;
}
.garden-heading span {
  display: block;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 2px;
  color: #547568;
  margin-bottom: 7px;
}
.garden-heading h1 {
  margin: 0;
  font-size: clamp(23px, 2.5vw, 35px);
  font-weight: 650;
  letter-spacing: -1px;
  color: #315b47;
}
.sun { top: 13%; right: 13%; width: 86px; height: 86px; }
.cloud-rig { top: 19%; width: clamp(140px, 15vw, 210px); height: clamp(94px, 10vw, 140px); }
.cloud-hint { bottom: -10px; font-size: 9px; opacity: 0; }
.cloud-rig:hover .cloud-hint, .cloud-rig:focus-within .cloud-hint { opacity: .85; }
.cloud img { filter: drop-shadow(0 9px 9px #366b7918); }
.butterfly-one { top: 34%; left: 33%; }
.butterfly-two { top: 40%; left: 88%; }

/* One tool rail and one seed tray; no large instructional cards in the soil. */
.tools {
  left: 20px;
  top: 32%;
  gap: 8px;
  padding: 7px;
  border-radius: 28px;
  background: #fffaf0da;
  border: 1px solid #fff9;
  box-shadow: 0 8px 24px #3b523316;
}
.tools-label, .tool kbd { display: none; }
.tool {
  width: 53px;
  min-height: 59px;
  padding: 4px 2px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}
.tool img { width: 38px; height: 38px; }
.tool span { font-size: 7px; }
.tool:hover { transform: none; background: #eef2dc; }
.tool[aria-pressed=true] { background: #dfebcb; box-shadow: inset 0 0 0 1.5px #8aa96a; }
.tool.attention { animation: none; }
.seed-dock {
  left: 50%;
  right: auto;
  translate: -50% 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  width: min(740px, calc(100% - 48px));
  height: 100px;
  min-height: 100px;
  padding: 8px 12px;
  gap: 0;
  border-radius: 28px;
  background: #fffaf0f5;
  border: 1px solid #fffdf4;
  box-shadow: 0 4px 0 #6f482b18, 0 14px 32px #492d2929;
}
.dock-copy, .journal-button { display: none; }
.seeds { gap: 6px; }
.seed {
  height: 82px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  border-radius: 21px;
  padding: 2px 3px 6px;
}
.seed img { width: 64px; height: 60px; filter: drop-shadow(0 5px 3px #5c573019); }
.seed span { font-size: 9px; margin-top: 0; }
.seed:hover { background: #eeeeda; transform: translateY(-2px); }
.seed[aria-pressed=true] {
  transform: translateY(-3px);
  background: #e7efda;
  border-color: #a0b57f;
  box-shadow: 0 3px 0 #8b9d6230;
}
.seed[aria-pressed=true]::after { width: 14px; height: 14px; top: 4px; right: 5px; }
.tray-caption {
  position: absolute;
  bottom: -19px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 8px;
  font-weight: 550;
  color: #ffefd4c9;
  letter-spacing: .3px;
  pointer-events: none;
}
.guide {
  top: auto;
  bottom: 142px;
  left: 50%;
  translate: -50% 0;
  width: min(590px, calc(100% - 52px));
  min-height: 33px;
  height: auto;
  padding: 6px 12px;
  background: #6a472628;
  border-radius: 14px;
  box-shadow: none;
  text-align: center;
  color: #fff4df;
}
.guide-name { display: none; }
.guide p { margin: 0; font-size: 10px; line-height: 1.6; font-weight: 500; }
.action-hint {
  top: 79px;
  bottom: auto;
  left: 50%;
  max-width: 55%;
  font-size: 10px;
  padding: 8px 16px;
  background: #fffaf0ed;
  border: 1px solid #fff9;
  box-shadow: 0 3px 14px #3153370a;
}

/* Roots remain visible in the shared earth; labels sit below them, not on them. */
.plant-visual { width: calc(var(--plant-h) * .60); max-width: none; }
.plant-hit { width: 108%; }
.plant-hit::before { display: none; }
.plant-state {
  top: calc(var(--plant-h) * .35 + 8px);
  padding: 5px 7px;
  width: 78px;
  min-width: 0;
  height: 47px;
  border: none;
  background: #76502e35;
  backdrop-filter: none;
  border-radius: 15px;
  color: #fff6e2;
  translate: -50% 0;
  transform: none;
}
.plant-name { font-size: 9px; letter-spacing: .1px; }
.plant-request { margin-top: 3px; font-size: 7px; gap: 3px; }
.plant-request img { width: 13px; height: 13px; }
.moisture-track { margin-top: 3px; height: 2px; background: #fff2; }
.moisture-fill { transition: width .2s linear; }
.plot.ready .plant-state { background: #fff1c9; box-shadow: 0 3px 0 #5d472019; }
.plot.busy .plant-state { opacity: 1; background: #5a754fbd; color: #fff8e9; }
.plot.busy .plant-request img { animation: busy-pulse 1s ease-in-out infinite; }
.plot.planted:not(.growing) .plant-visual:not(.old-plant) { animation: plant-sway 8s ease-in-out infinite; }
.plot .hole { width: 68%; top: -10px; opacity: .6; }
.empty-target {
  top: -22px;
  width: 72%;
  height: 60px;
  border: 1px dashed #fff1bb65;
  background: transparent;
  color: #fff3d3;
  box-shadow: none;
}
.empty-target span { display: none; }
.empty-target b { font-size: 23px; font-weight: 300; }
.seed-selected .empty-target { background: #eefaad2b; border-color: #fff5cddd; }
.seed-selected .empty-target span { display: block; font-size: 7px; }
.care-object { width: 48px; height: 66px; top: -45px; left: 65%; }
.care-object::after { font-size: 12px; }
.bavi {
  height: var(--actor-h);
  width: calc(var(--actor-h) * .833333);
  translate: -50% -81%;
  z-index: 13;
}
.bavi img { transform-origin: 50% 81%; animation: none; }
.bavi.moving img, .bavi.acting img { animation: none; }
.bavi:not(.moving):not(.acting) img { animation: grounded-breath 5s ease-in-out infinite; }
.game[data-assets=loading] .bavi { opacity: 0; }
@keyframes grounded-breath { 50% { scale: 1.005 1.008; } }
@keyframes busy-pulse { 50% { opacity: .4; } }

@media (min-width: 1400px) {
  :root { --soil: 55%; --plant-h: min(49vh, 500px); --actor-h: min(40vh, 380px); }
  .world-backdrop { height: 104.2%; }
  .topbar { top: 30px; left: 40px; right: 40px; }
  .garden-heading { left: 18%; top: 106px; }
  .tools { left: 34px; }
  .tool { width: 63px; min-height: 68px; }
  .tool img { width: 45px; height: 45px; }
  .tool span { font-size: 8px; }
  .seed-dock { width: 840px; height: 110px; min-height: 110px; }
  .seed { height: 90px; }
  .seed img { width: 73px; height: 68px; }
  .guide { bottom: 152px; }
  .plant-state { width: 92px; height: 51px; }
  .plant-name { font-size: 11px; }
  .plant-request { font-size: 8px; }
}
@media (max-width: 760px) {
  :root { --plant-h: clamp(190px, 40vh, 310px); --actor-h: 250px; }
  .topbar { left: 15px; right: 15px; top: 16px; }
  .brand-category, .brand-divider { display: none; }
  .top-actions { gap: 5px; }
  .circle-button { width: 36px; height: 36px; }
  .collection-button { height: 36px; font-size: 10px; padding: 5px 9px; }
  .garden-heading { left: 20px; top: 81px; }
  .garden-heading h1 { font-size: 25px; }
  .tools { left: 10px; padding: 5px; border-radius: 22px; }
  .tool { width: 42px; min-height: 50px; }
  .tool img { width: 31px; height: 31px; }
  .tool span { font-size: 6px; }
  .sun { width: 64px; height: 64px; top: 17%; right: 10%; }
  .cloud-rig { width: 122px; height: 83px; top: 23%; }
  .plant-state { width: 58px; padding: 4px; }
  .plant-name { font-size: 8px; }
  .plant-request { font-size: 6px; }
  .seed-dock { width: calc(100% - 28px); }
  .seed img { width: 51px; height: 55px; }
  .seed span { font-size: 8px; }
  .seeds { gap: 2px; }
  .action-hint { top: 65px; max-width: 75%; }
}
@media (max-width: 520px) and (orientation: portrait) {
  :root { --soil: 48%; --plant-h: 215px; --actor-h: 215px; --dock-height: 170px; }
  .world-backdrop { width: 175%; left: -37.5%; height: 110%; top: -10.1%; }
  .world { background: #92623b; }
  .brand-word { font-size: 26px; }
  .collection-button>span { font-size: 0; }
  .collection-button b { border: 0; font-size: 11px; padding: 0; margin: 0; }
  .collection-button img { width: 22px; height: 22px; }
  .garden-heading { top: 88px; left: 18px; }
  .garden-heading span { font-size: 7px; }
  .garden-heading h1 { font-size: 25px; }
  .sun { top: 20%; right: 9%; width: 54px; height: 54px; }
  .cloud-rig { top: 25%; width: 104px; height: 71px; }
  .tools { top: 30%; left: 7px; padding: 3px; gap: 3px; }
  .tool { width: 38px; min-height: 45px; }
  .tool img { width: 29px; height: 29px; }
  .tool span { font-size: 5.5px; }
  .plant-visual { width: 97px; }
  .plant-state { width: 42px; height: 41px; padding: 4px 2px; top: 80px; }
  .plant-name { font-size: 7px; }
  .plant-request { font-size: 0; }
  .plant-request .need-copy { display: none; }
  .plant-request img { width: 13px; height: 13px; }
  .care-object { width: 28px; height: 45px; top: -29px; }
  .empty-target { width: 88%; height: 45px; top: -16px; }
  .seed-selected .empty-target span { font-size: 5px; }
  .seed-dock { height: 170px; min-height: 170px; padding: 7px 10px; border-radius: 27px; }
  .seeds { grid-template-columns: repeat(3, 1fr); gap: 3px 6px; }
  .seed { height: 74px; display: flex; padding: 1px 3px 4px; }
  .seed img { width: 55px; height: 53px; }
  .seed span { font-size: 9px; }
  .guide { bottom: 211px; width: calc(100% - 32px); max-height: 57px; }
  .guide p { font-size: 9px; line-height: 1.5; white-space: normal; display: block; }
  .action-hint { top: 61px; font-size: 8px; }
  .butterfly-one { top: 27%; left: 80%; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :root { --soil: 52%; --plant-h: 185px; --actor-h: 185px; --dock-height: 76px; }
  .world-backdrop { height: 110%; top: -6.1%; }
  .topbar { top: 10px; left: 18px; right: 18px; }
  .brand-word { font-size: 25px; }
  .circle-button { width: 32px; height: 32px; }
  .collection-button { height: 32px; }
  .garden-heading { display: none; }
  .garden-heading span { font-size: 6px; margin-bottom: 3px; }
  .garden-heading h1 { font-size: 20px; }
  .sun { top: 15%; width: 53px; height: 53px; }
  .cloud-rig { top: 20%; width: 111px; height: 74px; }
  .tools { top: 30%; left: 12px; padding: 4px; gap: 2px; }
  .tool { width: 38px; min-height: 39px; height: 39px; }
  .tool img { width: 25px; height: 25px; }
  .tool span { font-size: 5.5px; }
  .seed-dock { bottom: 17px; height: 76px; min-height: 76px; width: min(590px, calc(100% - 130px)); padding: 4px 8px; }
  .seed { height: 65px; border-radius: 18px; }
  .seed img { width: 43px; height: 42px; }
  .seed span { font-size: 8px; }
  .plant-state { top: 54px; height: 29px; width: 70px; padding: 3px 5px; }
  .plant-name { display: none; }
  .plant-request { margin: 0; font-size: 7px; }
  .plant-request img { width: 12px; height: 12px; }
  .guide { display: none; }
  .tray-caption { bottom: -13px; font-size: 7px; }
  .action-hint { display: block; top: 47px; font-size: 8px; }
  .care-object { width: 32px; height: 46px; top: -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bavi img, .plot .plant-visual { animation: none !important; }
}

/* Tools occupy the unused left edge of the cutaway, leaving Bavi's face clear. */
.tools { top: calc(var(--soil) + 14px); }
@media (max-height: 560px) and (orientation: landscape) {
  .tools { top: calc(var(--soil) + 8px); }
}