/* ——— Shop, Backyard, Wheat field, Farm, Kitchen & Market (/WPPSI_IV) ———
   Full screen like the play screen: the header hides and the garden fills the visible height. */

/* Lobby card */
.garden-card {
  display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 18px; align-items: center;
  width: 100%; margin-top: 18px; padding: 16px 20px 16px 16px; text-align: left;
  border-radius: var(--radius-xl); background: linear-gradient(135deg, #f1ffe6, #e2f6ff);
  box-shadow: 0 0 0 3px #8fd16a88, 0 8px 0 #5cb85c55, 0 14px 30px #2a7d3322;
  transition: transform .15s ease, box-shadow .15s ease;
}
.garden-card:hover { transform: translateY(-2px); }
.garden-card:active { transform: translateY(3px); box-shadow: 0 0 0 3px #8fd16a88, 0 3px 0 #5cb85c55; }
.garden-card-art svg { width: 100%; height: auto; display: block; border-radius: 18px; }
.garden-card-text { display: flex; flex-direction: column; gap: 4px; }
.garden-card .mode-kicker { color: #2a7d33; }
.garden-card strong { font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.15; color: var(--ink); }
.garden-card-lead { color: var(--muted); font-weight: 600; }
.garden-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.card-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px;
  background: #fff; color: var(--ink-soft); font-weight: 800; font-size: .92rem; box-shadow: 0 2px 0 #1f3a5f18;
}
.card-badge svg { width: 30px; height: auto; }
.card-badge.card-next { padding-left: 12px; }
.card-badge.card-ready { background: #fff4cc; color: #8a5a00; }
@media (max-width: 560px) { .garden-card { grid-template-columns: 1fr; } }

/* Full-screen garden */
body.in-garden { overflow: hidden; overscroll-behavior: none; }
body.in-garden .site-header,
body.in-garden .skip-link,
body.in-garden .page-atmosphere { display: none; }
body.in-garden .app-shell {
  max-width: none; height: 100vh; height: 100dvh; box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: flex; flex-direction: column;
}
body.in-garden #practice-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.garden-view {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  font-family: var(--display); color: var(--ink);
}
.garden-view.is-loading .garden-scene { opacity: .4; }
.garden-view button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Top bar */
.garden-top { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 56px; }
.garden-home {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 18px; border-radius: 999px;
  background: #fff; color: var(--ink-soft); font-weight: 800; font-size: 1.05rem; box-shadow: 0 3px 0 #1f3a5f22;
}
.garden-home span { font-size: 1.6rem; line-height: .6; }
.garden-tabs { display: flex; gap: 8px; flex: 1; justify-content: center; }
.garden-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border-radius: 999px;
  background: #ffffffcc; color: var(--ink-soft); font-weight: 900; font-size: 1.1rem; box-shadow: 0 3px 0 #1f3a5f1c;
}
.garden-tab svg { width: 40px; height: 40px; }
.garden-tab.is-active { background: #3fae49; color: #fff; box-shadow: 0 4px 0 #2a7d33; }
.garden-tab.is-calling { animation: garden-call 0.6s ease-in-out 3; }
.garden-wallet { display: flex; gap: 8px; }
.garden-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px;
  background: #fff; font-weight: 900; font-size: 1.1rem; box-shadow: 0 3px 0 #1f3a5f1c; position: relative;
}
.garden-chip svg { width: 34px; height: 34px; }
.garden-tickets svg { width: 44px; height: auto; }
.garden-ticket-bar {
  position: absolute; left: 12px; right: 12px; bottom: 3px; height: 4px; border-radius: 4px; background: #ffe7a3; overflow: hidden;
}
.garden-ticket-bar i { display: block; height: 100%; width: 0; background: #e09f00; border-radius: 4px; transition: width .4s ease; }
.garden-wheat-tickets .garden-ticket-bar { background: #f3e2b8; }
.garden-wheat-tickets .garden-ticket-bar i { background: #c98a1c; }
.garden-cow-tickets .garden-ticket-bar { background: #d6e8ff; }
.garden-cow-tickets .garden-ticket-bar i { background: #3a86ff; }
.garden-chicken-tickets .garden-ticket-bar { background: #ffdce5; }
.garden-chicken-tickets .garden-ticket-bar i { background: #e63946; }

/* Scenes */
.garden-scene {
  position: relative; flex: 1; min-height: 0; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 3px #ffffffaa, 0 10px 24px #1f3a5f22;
}

/* ——— Shop ——— */
.garden-shop {
  display: flex; flex-direction: column;
  background:
    linear-gradient(transparent 82%, #d9a35f 82%, #c98a4b 100%),
    repeating-linear-gradient(90deg, #fff3dc 0 38px, #ffeccc 38px 76px);
}
.shop-front { position: relative; flex: 0 0 auto; height: clamp(54px, 9vh, 88px); }
.garden-awning { position: absolute; inset: 0 0 auto; width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 0 #1f3a5f22); }
.garden-sign {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  padding: 6px 26px; border-radius: 16px; background: #fffaf0; border: 4px solid #a86a32;
  box-shadow: 0 4px 0 #1f3a5f33; white-space: nowrap;
}
.garden-sign span { font-size: clamp(1.3rem, 3.4vh, 2rem); font-weight: 900; color: #2a7d33; letter-spacing: .02em; }
.shop-body {
  flex: 1; min-height: 0; display: grid; gap: 12px; padding: 30px 16px 12px;
  grid-template-columns: minmax(200px, 30%) 1fr; grid-template-areas: "cast shelves";
}
.shop-cast { grid-area: cast; }
.shop-shelves { grid-area: shelves; display: flex; flex-direction: column; gap: 10px; min-height: 0; justify-content: center; }
.shelf-pair { display: flex; gap: 14px; align-items: stretch; }
.shelf-pair .shelf-tools { flex: 3 1 0; min-width: 0; }
.shelf-pair .shelf-animals { flex: 2 1 0; min-width: 0; }
.shop-animal .shop-art svg { width: clamp(76px, 11.5vh, 124px); }
.shop-animal.has-ticket .shop-art { animation: garden-wiggle 2.4s ease-in-out infinite; }
.shop-animal:nth-child(2).has-ticket .shop-art { animation-delay: .5s; }
.shop-price .price-ticket { width: 30px; }
.shop-animal .shop-price { font-size: .88rem; gap: 3px; white-space: nowrap; }
.shop-animal .shop-price .price-ticket { width: 26px; }
.sheet-art-animal svg { width: clamp(150px, 26vh, 220px); }
.sheet-full { margin: 10px 0 4px; font-weight: 900; color: #a86a32; font-size: 1.1rem; }
.sheet-buy-cow { background: #3a86ff; box-shadow: 0 6px 0 #1f5fcc; }
.sheet-buy-chicken { background: #e63946; box-shadow: 0 6px 0 #b5222f; }
.garden-cast { display: flex; align-items: flex-end; justify-content: center; gap: 0; position: relative; z-index: 4; min-height: 0; }
.cast-member { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.garden-view .tiger-host { width: clamp(96px, 17vh, 170px); }
.garden-view .girl-host { width: clamp(70px, 12vh, 120px); }
.shop-basket { position: relative; align-self: flex-end; width: clamp(64px, 10vh, 104px); margin-left: -6px; z-index: 2; }
.shop-basket .garden-basket-svg { width: 100%; height: auto; display: block; }
.shop-basket.is-bumping { animation: garden-bump .45s ease; }
.basket-items { position: absolute; left: 12%; right: 12%; top: -26%; height: 50%; display: flex; justify-content: center; align-items: flex-end; z-index: -1; }
.basket-thing { width: 40%; margin: 0 -8%; }
.basket-thing svg { width: 100%; height: auto; display: block; transform: rotate(-10deg); }
.basket-thing:nth-child(2n) svg { transform: rotate(12deg); }

.shelf { position: relative; padding: 4px 12px 22px; }
.shelf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 16px; border-radius: 6px;
  background: linear-gradient(#c98a4b, #a86a32); box-shadow: 0 6px 0 #1f3a5f22;
}
.shelf h3 { margin: 0 0 4px; font-size: clamp(1rem, 2.2vh, 1.25rem); color: #7a4b28; }
.shelf h3 small { font-size: .78em; color: var(--muted); font-weight: 700; margin-left: 6px; }
.shelf-row { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 2px 10px; position: relative; z-index: 1; }
.shelf-note { flex-basis: 100%; margin: -2px 0 2px; text-align: center; color: var(--muted); font-weight: 800; font-size: clamp(.78rem, 1.6vh, .95rem); }
.shop-item, .seed-packet {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 18px;
  transition: transform .15s ease;
}
.shop-item:active, .seed-packet:active { transform: scale(.94); }
.shop-art, .packet-art { position: relative; display: block; }
.shop-art svg { width: clamp(64px, 12.5vh, 118px); height: auto; display: block; filter: drop-shadow(0 4px 0 #1f3a5f22); }
.shop-name, .packet-name { font-weight: 900; font-size: clamp(.9rem, 1.9vh, 1.1rem); color: var(--ink); }
.shop-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #a86a00; font-size: 1rem; }
.shop-price .owned { font-style: normal; color: #2a7d33; font-size: .9rem; }
.price-coin { width: 22px; height: 22px; }
.shop-count {
  position: absolute; right: -6px; top: -4px; min-width: 30px; padding: 2px 8px; border-radius: 999px;
  background: #3fae49; color: #fff; font-size: .95rem; text-align: center; box-shadow: 0 2px 0 #2a7d33;
}
.seed-rack { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 6px; position: relative; z-index: 1; }
.packet-art svg { width: clamp(52px, 9.5vh, 86px); height: auto; display: block; filter: drop-shadow(0 4px 0 #1f3a5f22); }
.seed-rack.has-ticket .seed-packet .packet-art { animation: garden-wiggle 2.4s ease-in-out infinite; }
.seed-rack.has-ticket .seed-packet:nth-child(2n) .packet-art { animation-delay: .4s; }
.seed-rack.has-ticket .seed-packet:nth-child(3n) .packet-art { animation-delay: .8s; }

/* Speech bubbles */
.cast-bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin: 0 0 6px;
  width: max-content; max-width: min(260px, 40vw); padding: 8px 14px; border-radius: 18px;
  background: #fff; color: var(--ink); font-weight: 800; font-size: clamp(.95rem, 2vh, 1.15rem); line-height: 1.25; text-align: center;
  box-shadow: 0 0 0 3px #1f3a5f22, 0 6px 14px #1f3a5f22; z-index: 5;
}
.cast-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: #fff;
}
.cast-bubble.is-popping { animation: garden-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.cast-member.is-walking-in { animation: garden-walk-in .9s ease-out both; }
.cast-girl.is-walking-in { animation-delay: .15s; }

/* Buy card */
.garden-sheet {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: #1f3a5f55; animation: garden-fade .2s ease both;
}
.sheet-card {
  position: relative; width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 18px 22px 22px;
  border-radius: 28px; background: #fffdf7; text-align: center;
  box-shadow: 0 0 0 4px #8fd16a, 0 18px 40px #1f3a5f44; animation: garden-pop .3s cubic-bezier(.3, 1.4, .5, 1) both;
}
.sheet-close {
  position: absolute; right: 10px; top: 8px; width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.9rem; line-height: 1; color: var(--ink-soft); background: #f1f5f9;
}
.sheet-art { margin: 0 auto 4px; }
.sheet-art svg { display: block; margin: 0 auto; height: auto; }
.sheet-art-tool svg { width: clamp(110px, 20vh, 170px); }
.sheet-art-packet svg { width: clamp(90px, 16vh, 130px); }
.sheet-art-plant svg { width: clamp(110px, 20vh, 160px); }
.sheet-card h2 { margin: 2px 0 4px; font-size: clamp(1.4rem, 3.2vh, 1.9rem); }
.sheet-lead { margin: 0 0 10px; color: var(--ink-soft); font-weight: 700; font-size: 1.05rem; }
.sheet-note, .sheet-wallet { margin: 8px 0; color: var(--muted); font-weight: 800; display: flex; justify-content: center; align-items: center; gap: 6px; }
.price-ticket { width: 34px; height: auto; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.swatch { position: relative; padding: 4px; border-radius: 16px; background: #f1f5f9; transition: transform .12s ease; }
.swatch svg { width: 100%; height: auto; display: block; }
.swatch.is-picked { background: #fff4cc; box-shadow: 0 0 0 4px #ffb703; transform: translateY(-3px); }
.swatch-own {
  position: absolute; right: -4px; top: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: #3fae49; color: #fff; font-style: normal; font-weight: 900; font-size: .9rem; line-height: 24px;
}
.sheet-buy {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; margin-top: 6px; padding: 10px 26px;
  border-radius: 999px; background: #3fae49; color: #fff; font-weight: 900; font-size: 1.2rem;
  box-shadow: 0 6px 0 #2a7d33; transition: transform .12s ease, box-shadow .12s ease;
}
.sheet-buy:active { transform: translateY(4px); box-shadow: 0 2px 0 #2a7d33; }
.sheet-buy[data-short] { background: #9aa8b5; box-shadow: 0 6px 0 #6f7d8a; }
.sheet-buy:disabled { opacity: .6; }
.sheet-choice { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sheet-no { background: #fff; color: var(--ink-soft); box-shadow: 0 0 0 3px #cfd8e0, 0 6px 0 #cfd8e0; }
.sheet-yes { background: #e09f3e; box-shadow: 0 6px 0 #a86a32; }
.sheet-play { background: #3a86ff; box-shadow: 0 6px 0 #1f5fcc; }
.ticket-progress p { margin: 4px 0; font-weight: 800; color: var(--ink-soft); font-size: 1.1rem; }
.ticket-track { display: block; height: 18px; border-radius: 999px; background: #ffe7a3; overflow: hidden; box-shadow: inset 0 0 0 3px #e09f0055; }
.ticket-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb703, #e09f00); border-radius: 999px; }
.ticket-small { color: var(--muted); font-size: .95rem !important; }

/* ——— Backyard ——— */
.garden-yard {
  --horizon: 16%;
  --toolbar: clamp(84px, 12vh, 110px);
  background: linear-gradient(#bfe9ff 0%, #e5f7ff var(--horizon), #9fdc7c calc(var(--horizon) + .5%), #86cc63 60%, #79c158 100%);
}
.yard-sky { position: absolute; inset: 0 0 auto; height: var(--horizon); pointer-events: none; }
.garden-sun { position: absolute; right: 4%; top: 6%; width: clamp(54px, 10vh, 96px); height: auto; animation: garden-spin 30s linear infinite; }
.garden-cloud { position: absolute; width: clamp(80px, 13vh, 130px); height: auto; opacity: .95; }
.cloud-a { left: 6%; top: 12%; animation: garden-drift 26s ease-in-out infinite alternate; }
.cloud-b { left: 52%; top: 4%; width: clamp(60px, 9vh, 96px); animation: garden-drift 34s ease-in-out infinite alternate-reverse; }
.yard-fence { position: absolute; left: 0; right: 0; top: calc(var(--horizon) - clamp(30px, 5vh, 50px)); height: clamp(36px, 6vh, 58px); pointer-events: none; }
.garden-fence { width: 100%; height: 100%; display: block; }
.yard-ground {
  position: absolute; left: 0; right: 0; top: calc(var(--horizon) - 5%); bottom: var(--toolbar);
  display: grid; gap: 4px 6px; padding: 0 10px;
  grid-template-columns: minmax(96px, 15%) minmax(0, 1fr) minmax(96px, 15%);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "tiger plots girl";
}
.yard-cast-tiger { grid-area: tiger; }
.yard-cast-girl { grid-area: girl; }
.yard-cast { align-items: flex-end; padding-bottom: 8px; }
.yard-cast .tiger-host { width: min(100%, clamp(96px, 19vh, 180px)); }
.yard-cast .girl-host { width: min(80%, clamp(72px, 14vh, 130px)); }
/* Bubbles open toward the middle so they never run off the screen. */
.cast-tiger .cast-bubble { --tx: 0; left: -6px; transform: none; }
.cast-tiger .cast-bubble::after { left: 34%; }
.cast-girl .cast-bubble { --tx: 0; left: auto; right: -6px; transform: none; }
.cast-girl .cast-bubble::after { left: auto; right: 34%; transform: translateX(50%); }
.yard-plots {
  grid-area: plots; min-height: 0; display: grid; gap: 2px 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
}
.plot { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; border-radius: 18px; cursor: pointer; outline: none; }
.plot:focus-visible { box-shadow: 0 0 0 4px #ff6b6baa; }
.plot-art { position: relative; flex: 1; min-height: 0; }
.plot-art .garden-plant-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.plot-tags {
  position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; align-items: center; gap: 4px;
  pointer-events: none;
}
.plot-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px;
  font-weight: 900; font-size: clamp(.78rem, 1.7vh, 1rem); white-space: nowrap; color: #fff; box-shadow: 0 3px 0 #1f3a5f33;
}
.tag-dig { background: #a86a32; }
.tag-seed { background: #7b2cbf; }
.tag-water { background: #3a86ff; animation: garden-bob 1.4s ease-in-out infinite; }
.tag-grow { background: #fff; color: #2a7d33; }
.tag-ready { background: #e63946; animation: garden-bob 1.1s ease-in-out infinite; }
.grow-dots { display: inline-flex; gap: 3px; }
.grow-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d7ecd0; box-shadow: inset 0 0 0 2px #3fae49; }
.grow-dots i.on { background: #3fae49; }
.plot-food { width: 28px; display: inline-block; }
.plot-food svg { width: 100%; height: auto; display: block; }

/* A chosen tool lights up the patches it can work on. */
.garden-yard[data-active-tool="shovel"] .plot[data-status="empty"] .plot-art,
.garden-yard[data-active-tool="seed"] .plot[data-status="dug"] .plot-art,
.garden-yard[data-active-tool="can"] .plot[data-status="planted"] .plot-art,
.garden-yard[data-active-tool="can"] .plot[data-status="resting"] .plot-art,
.garden-yard[data-active-tool="food"] .plot:not(.is-fed)[data-status="planted"] .plot-art,
.garden-yard[data-active-tool="food"] .plot:not(.is-fed)[data-status="growing"] .plot-art,
.garden-yard[data-active-tool="food"] .plot:not(.is-fed)[data-status="resting"] .plot-art {
  animation: garden-glow 1.2s ease-in-out infinite;
}
.garden-yard[data-active-tool="basket"] .plot[data-status="ready"] .plot-art,
.garden-field[data-active-tool="wheat"] .plot[data-status="empty"] .plot-art {
  animation: garden-glow 1.2s ease-in-out infinite;
}

/* Fruit */
.garden-fruit { cursor: pointer; }
.garden-fruit[data-gone] { display: none; }
.fruit-pop { transform-box: fill-box; transform-origin: center; transition: transform .12s ease; }
.garden-fruit.is-pressed .fruit-pop { transform: scale(.88); }
.plot[data-status="ready"] .fruit-pop { animation: garden-fruit-sway 2.6s ease-in-out infinite; }
.plot[data-status="ready"] .garden-fruit:nth-child(2n) .fruit-pop { animation-delay: -.9s; }
.plot[data-status="ready"] .garden-fruit:nth-child(3n) .fruit-pop { animation-delay: -1.7s; }
.plot-art.is-ripening .fruit-pop { animation: garden-fruit-in .6s cubic-bezier(.3, 1.6, .5, 1) both, garden-fruit-sway 2.6s ease-in-out .6s infinite; }
.plot-art.is-ripening .garden-fruit:nth-child(2) .fruit-pop { animation-delay: .12s, .72s; }
.plot-art.is-ripening .garden-fruit:nth-child(3) .fruit-pop { animation-delay: .24s, .84s; }
.plot-art.is-ripening .garden-fruit:nth-child(4) .fruit-pop { animation-delay: .36s, .96s; }
.plot-art.is-ripening .garden-fruit:nth-child(5) .fruit-pop { animation-delay: .48s, 1.08s; }
.plot-art.is-ripening .garden-fruit:nth-child(6) .fruit-pop { animation-delay: .6s, 1.2s; }
.plant-body, .plant-seed { transform-box: fill-box; transform-origin: 50% 100%; }
.plot-art.is-growing .plant-body { animation: garden-grow 1s cubic-bezier(.3, 1.4, .5, 1) .5s both; }

/* Tool animations over a patch */
.plot-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fx-tool { position: absolute; width: 46%; left: 40%; top: 20%; }
.fx-tool svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 #1f3a5f33); }
.fx-dig .fx-tool { animation: garden-dig .5s ease-in-out 2; transform-origin: 30% 90%; }
.fx-water .fx-tool { left: 46%; top: 22%; animation: garden-pour 1.3s ease-in-out both; transform-origin: 30% 70%; }
.fx-food .fx-tool { left: 34%; top: 16%; width: 38%; animation: garden-shake .25s ease-in-out 4; }
.fx-plant .fx-tool { left: 30%; top: 22%; width: 34%; animation: garden-tip .9s ease-in-out both; transform-origin: 50% 20%; }
.fx-drops, .fx-dirt, .fx-sparkle { position: absolute; left: 30%; right: 30%; top: 46%; height: 34%; }
.fx-drops i, .fx-dirt i, .fx-sparkle i, .fx-seed { position: absolute; display: block; border-radius: 50%; }
.fx-drops i { width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #4cc9f0; top: 0; opacity: 0; animation: garden-drop .5s ease-in infinite; animation-delay: .4s; }
.fx-drops i:nth-child(1) { left: 10%; } .fx-drops i:nth-child(2) { left: 28%; animation-delay: .55s; } .fx-drops i:nth-child(3) { left: 46%; animation-delay: .7s; }
.fx-drops i:nth-child(4) { left: 64%; animation-delay: .5s; } .fx-drops i:nth-child(5) { left: 82%; animation-delay: .65s; } .fx-drops i:nth-child(6) { left: 36%; animation-delay: .8s; }
.fx-dirt i { width: 12px; height: 10px; background: #8b5a2b; bottom: 0; animation: garden-dirt .5s ease-out 2; }
.fx-dirt i:nth-child(1) { left: 20%; } .fx-dirt i:nth-child(2) { left: 40%; animation-delay: .08s; } .fx-dirt i:nth-child(3) { left: 60%; animation-delay: .16s; }
.fx-dirt i:nth-child(4) { left: 30%; animation-delay: .5s; } .fx-dirt i:nth-child(5) { left: 70%; animation-delay: .58s; }
.fx-sparkle i { width: 9px; height: 9px; background: #ffd166; top: 0; opacity: 0; animation: garden-drop .7s ease-in infinite; }
.fx-sparkle i:nth-child(2n) { background: #8fd16a; animation-delay: .2s; } .fx-sparkle i:nth-child(3n) { animation-delay: .4s; }
.fx-sparkle i:nth-child(1) { left: 12%; } .fx-sparkle i:nth-child(2) { left: 30%; } .fx-sparkle i:nth-child(3) { left: 48%; }
.fx-sparkle i:nth-child(4) { left: 66%; } .fx-sparkle i:nth-child(5) { left: 84%; } .fx-sparkle i:nth-child(6) { left: 40%; }
.fx-seed { width: 12px; height: 16px; background: #7a4b2a; left: 48%; top: 0; opacity: 0; animation: garden-drop .5s ease-in .45s both; }

/* Tool bar */
.yard-tools {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--toolbar);
  display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 22px); padding: 6px 12px;
  background: linear-gradient(#ffffffd0, #ffffffee); border-top: 4px solid #a86a32;
}
.yard-tool {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: clamp(84px, 13vw, 120px);
  padding: 4px 6px 6px; border-radius: 20px; background: #f6efe3; box-shadow: 0 4px 0 #d9c4a3; transition: transform .12s ease;
}
.yard-tool .tool-art { position: relative; display: block; }
.yard-tool .tool-art svg { width: clamp(46px, 7vh, 64px); height: clamp(46px, 7vh, 64px); display: block; }
.yard-tool .tool-name { font-weight: 900; font-size: clamp(.78rem, 1.6vh, .95rem); color: var(--ink-soft); line-height: 1.1; text-align: center; white-space: nowrap; }
.yard-tool.is-active { background: #fff4cc; box-shadow: 0 0 0 4px #ffb703, 0 6px 0 #e09f00; transform: translateY(-6px); }
.yard-tool.is-locked { opacity: .55; }
.yard-tool.is-locked .tool-art { filter: grayscale(.7); }
.tool-lock {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border-radius: 999px;
  background: #fff; color: #a86a32; font-weight: 900; font-size: .72rem; box-shadow: 0 2px 0 #1f3a5f22;
}
.tool-count {
  position: absolute; right: -10px; top: -4px; min-width: 26px; padding: 0 6px; border-radius: 999px;
  background: #3fae49; color: #fff; font-size: .9rem; text-align: center;
}
.yard-tool.is-calling { animation: garden-call .6s ease-in-out 3; }
.tool-gap { flex: 0 0 auto; align-self: stretch; margin: 10px 0; border-left: 3px dashed #d9c4a3; }
.tool-basket { background: #fff3e0; }
.tool-flour { background: #fffaf0; box-shadow: 0 4px 0 #e3cfa6; }
.tool-count-flour { background: #c98a1c; }
.yard-tool .tool-art.is-bumping, .yard-tool.is-bumping .tool-art { animation: garden-bump .45s ease; }

.seed-tray {
  --tx: -50%;
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--toolbar) + 8px); z-index: 6;
  max-width: calc(100% - 24px); padding: 6px 12px 10px; border-radius: 22px; background: #fffdf7;
  box-shadow: 0 0 0 3px #c7a6f5, 0 10px 24px #1f3a5f33; animation: garden-pop .25s ease both;
}
.tray-title { margin: 0 0 2px; text-align: center; font-weight: 900; color: #6538a8; }
.tray-row { display: flex; gap: 6px; overflow-x: auto; }
.tray-seed { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 6px; border-radius: 16px; min-width: 70px; }
.tray-seed svg { width: 52px; height: auto; display: block; }
.tray-seed span { font-weight: 900; font-size: .85rem; }
.tray-seed b { position: absolute; right: 2px; top: 0; padding: 0 6px; border-radius: 999px; background: #7b2cbf; color: #fff; font-size: .8rem; }
.tray-seed.is-picked { background: #f1e8ff; box-shadow: 0 0 0 3px #8e5bd8; }

/* Flying things and crumbs */
.garden-fly { position: fixed; z-index: 1000; pointer-events: none; }
.garden-fly svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 0 #1f3a5f33); }
.garden-fly.is-flipped svg { transform: scaleX(-1); }
.garden-crumb { position: fixed; z-index: 1001; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1.5px #2b2d4255; }

/* Tiger and Elizabeth eating */
.garden-view .tiger-host[data-mood="chomp"] .mouth-smile,
.garden-view .tiger-host[data-mood="chomp"] .mouth-big,
.garden-view .tiger-host[data-mood="chomp"] .eyes-open { opacity: 0; }
.garden-view .tiger-host[data-mood="chomp"] .eyes-happy { opacity: 1; }
.garden-view .tiger-host[data-mood="chomp"] .mouth-open { opacity: 1; transform-origin: 100px 104px; animation: garden-chomp .26s ease-in-out infinite; }
.garden-view .tiger-host[data-mood="chomp"] .tiger-head { animation: garden-munch .26s ease-in-out infinite; }
.garden-view .girl-host[data-mood="chomp"] .girl-pose-smile { display: block; transform-origin: 50% 90%; animation: garden-munch-girl .26s ease-in-out infinite; }

/* News while playing */
.garden-news {
  /* Bottom-left, beside the answer line, so it never covers the question. */
  position: absolute; left: 10px; bottom: 8px; z-index: 30; max-width: min(34%, 320px);
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 20px;
  background: #fffdf2; color: var(--ink); font-weight: 900; font-size: clamp(.85rem, 1.8vh, 1.05rem); line-height: 1.2;
  box-shadow: 0 0 0 3px #8fd16a, 0 8px 18px #1f3a5f33; animation: garden-news-in .45s cubic-bezier(.3, 1.5, .5, 1) both;
}
.garden-news.is-leaving { animation: garden-news-out .45s ease both; }
.news-art { flex: 0 0 auto; }
.news-art svg { width: 40px; height: auto; display: block; }
.garden-toast {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; padding: 10px 18px; border-radius: 16px;
  background: #1f3a5f; color: #fff; font-weight: 800;
}

/* ——— Wheat field ——— */
.garden-field {
  background: linear-gradient(#bfe9ff 0%, #fff3cf var(--horizon), #cfe58a calc(var(--horizon) + .5%), #bcd96c 60%, #a9cc5d 100%);
}
.field-windmill { position: absolute; left: 24%; bottom: -6%; width: clamp(46px, 8vh, 84px); }
.field-windmill svg { width: 100%; height: auto; display: block; }
.windmill-sails { transform-box: view-box; transform-origin: 60px 62px; animation: garden-spin 10s linear infinite; }
.tag-wheat { background: #c98a1c; }
.tag-harvest { background: #e09f00; animation: garden-bob 1.1s ease-in-out infinite; }
.field-plot[data-status="ready"] .plot-art:not(.is-growing):not(.is-cutting) .wheat-gold { animation: wheat-sway 3s ease-in-out infinite; }
.field-plot .plot-art.is-cutting .plant-body { animation: wheat-cut .6s ease-in forwards; }
.field-plot[data-status="ready"] { cursor: pointer; }

.field-plot .fx-tool { top: 38%; }
.field-plot .fx-drops, .field-plot .fx-sparkle { top: 64%; height: 26%; }
.field-plot .fx-seed { top: 46%; }

/* ——— Farm ——— */
.garden-farm {
  background: linear-gradient(#bfe9ff 0%, #e5f7ff var(--horizon), #a8de7f calc(var(--horizon) + .5%), #92d06a 60%, #82c45c 100%);
}
.farm-barn { position: absolute; left: 18%; bottom: -14%; width: clamp(72px, 13vh, 124px); }
.farm-barn svg { width: 100%; height: auto; display: block; }
.farm-pens {
  grid-area: plots; min-height: 0; display: grid; gap: 6px 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
}
.pen { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; border-radius: 18px; cursor: pointer; outline: none; }
.pen:focus-visible { box-shadow: 0 0 0 4px #ff6b6baa; }
.pen-art { position: relative; flex: 1; min-height: 0; }
.pen-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pen .plot-tags { position: static; flex: 0 0 auto; margin-top: 2px; }
.tag-buy { background: #a86a32; }
.pen[data-status="empty"] .pen-art { opacity: .8; }
.pen-product { position: absolute; z-index: 2; width: 26%; max-width: 74px; filter: drop-shadow(0 4px 0 #1f3a5f33); animation: garden-bob 1.1s ease-in-out infinite; }
.pen-product svg { width: 100%; height: auto; display: block; }
.pen-cow .pen-product { left: 4%; bottom: 0; }
.pen-chicken .pen-product { right: 8%; bottom: 2%; width: 21%; }
.pen-product.is-taken { visibility: hidden; }
.pen-art.is-ready-pop .pen-product { animation: garden-fruit-in .6s cubic-bezier(.3, 1.6, .5, 1) both, garden-bob 1.1s ease-in-out .6s infinite; }
.pen-art.is-arriving > svg { animation: farm-arrive .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.pen-art.is-happy > svg { animation: farm-hop .45s ease 2; }
.cow-head, .hen-head { transform-box: fill-box; transform-origin: 60% 90%; }
.cow-tail { transform-box: fill-box; transform-origin: 0 0; animation: cow-tail 2.6s ease-in-out infinite; }
.pen[data-status="ready"] .cow-head, .pen[data-status="ready"] .hen-head { animation: farm-nod 1.4s ease-in-out infinite; }
.pen.is-calling { animation: garden-call .6s ease-in-out 3; }
.pen-pop {
  position: absolute; left: 50%; top: 6%; z-index: 4; padding: 2px 14px; border-radius: 999px; background: #fff; color: #7a4b28;
  font-weight: 900; font-size: clamp(.95rem, 2vh, 1.2rem); white-space: nowrap; box-shadow: 0 3px 0 #1f3a5f22; pointer-events: none;
  animation: market-pop 1.2s ease-out forwards;
}
.tool-stock { background: #fffaf0; box-shadow: 0 4px 0 #e3cfa6; }
.tool-count-milk { background: #3a86ff; }
.tool-count-eggs { background: #e09f3e; }
.tool-count-flour { background: #c98a1c; }
.tool-pizza { background: #fff3f0; }
.tool-pizza.is-ready { background: #fff4cc; box-shadow: 0 0 0 4px #ffb703, 0 6px 0 #e09f00; animation: garden-bob 1.6s ease-in-out infinite; }
@keyframes farm-arrive { from { transform: translateX(-30%) scale(.6); opacity: 0; } 60% { opacity: 1; } }
@keyframes farm-hop { 50% { transform: translateY(-8%); } }
@keyframes farm-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
@keyframes cow-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(12deg); } }

/* ——— Kitchen ——— */
.garden-kitchen {
  background-color: #fff8ee;
  background-image: linear-gradient(#efe2cf 2px, transparent 2px), linear-gradient(90deg, #efe2cf 2px, transparent 2px);
  background-size: 52px 52px;
}
.garden-kitchen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11%; z-index: 0;
  background: repeating-linear-gradient(90deg, #d9a35f 0 64px, #c98a4b 64px 128px); border-top: 5px solid #a86a32;
}
.kitchen-window {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: clamp(160px, 22vw, 270px); height: clamp(76px, 12vh, 124px); overflow: hidden; z-index: 0;
  border-radius: 14px; background: linear-gradient(#bfe9ff, #e5f7ff); box-shadow: 0 0 0 8px #fff, 0 0 0 11px #c98a4b;
}
.kitchen-window::before, .kitchen-window::after { content: ""; position: absolute; background: #fff; z-index: 2; }
.kitchen-window::before { left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%); }
.kitchen-window::after { top: 50%; left: 0; right: 0; height: 6px; transform: translateY(-50%); }
.kitchen-window .garden-sun { right: 8%; top: 8%; width: 30%; }
.kitchen-window .garden-cloud { left: 6%; top: 40%; width: 36%; }
.kitchen-room {
  position: absolute; inset: 0; z-index: 1; display: grid; gap: 6px 10px; padding: 10px 10px 8px;
  grid-template-columns: minmax(104px, 14%) minmax(0, 1fr) minmax(104px, 14%);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "tiger middle girl";
}
.kitchen-cast-tiger { grid-area: tiger; }
.kitchen-cast-girl { grid-area: girl; }
.kitchen-cast { align-items: flex-end; padding-bottom: 2%; }
.kitchen-cast .tiger-host { width: min(100%, clamp(96px, 19vh, 180px)); }
.kitchen-cast .girl-host { width: min(80%, clamp(72px, 14vh, 130px)); }
/* Wall on top (with the window), then the pantry shelf, then the counter standing on the floor. */
.kitchen-middle { grid-area: middle; min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, .5fr) auto; }
.kitchen-middle .pantry { grid-row: 2; }
.kitchen-middle .kitchen-counter { grid-row: 4; }

.pantry { position: relative; padding: 2px 12px 22px; }
.pantry::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 16px; border-radius: 6px;
  background: linear-gradient(#c98a4b, #a86a32); box-shadow: 0 6px 0 #1f3a5f22;
}
.pantry h3 { margin: 0 0 2px; font-size: clamp(1rem, 2.2vh, 1.25rem); color: #7a4b28; }
.pantry h3 small { font-size: .78em; color: var(--muted); font-weight: 800; margin-left: 6px; }
.pantry-row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 8px 12px; flex-wrap: wrap; }
.pantry-flour { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 4px; border-radius: 16px; }
.pantry-flour svg { width: clamp(60px, 10vh, 92px); height: auto; display: block; filter: drop-shadow(0 4px 0 #1f3a5f22); }
.pantry-flour span { font-weight: 900; font-size: .9rem; color: var(--ink-soft); }
.pantry-flour.is-empty svg { opacity: .45; filter: grayscale(.7); }
.pantry-flour.is-bumping { animation: garden-bump .45s ease; }
.pantry-flour b, .pantry-fruit b {
  position: absolute; right: -6px; top: -2px; min-width: 26px; padding: 0 6px; border-radius: 999px;
  background: #c98a1c; color: #fff; font-size: .9rem; text-align: center;
}
.pantry-fruit b { background: #3fae49; }
.pantry-plus { align-self: center; font-size: 2rem; font-weight: 900; color: #a86a32; }
.pantry-staples { display: flex; align-items: flex-end; gap: 4px 10px; }
.pantry-staple svg { width: clamp(50px, 8.5vh, 80px); }
.pantry-staple[data-pantry-milk] b { background: #3a86ff; }
.pantry-staple[data-pantry-eggs] b { background: #e09f3e; }
.pantry-split { align-self: stretch; margin: 8px 2px 4px; border-left: 3px dashed #d9c4a3; }
.pantry-fruits { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; }
.pantry-fruit { position: relative; padding: 6px; border-radius: 18px; background: #ffffffaa; transition: transform .12s ease; }
.pantry-fruit svg { width: clamp(48px, 7.5vh, 70px); height: auto; display: block; }
.pantry-fruit.is-picked { background: #fff4cc; box-shadow: 0 0 0 4px #ffb703; transform: translateY(-4px); }
.pantry-empty {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 18px; max-width: 360px; text-align: left;
  background: #ffffffd0; color: var(--ink-soft); font-weight: 900; font-size: clamp(.85rem, 1.8vh, 1rem); box-shadow: 0 0 0 3px #e9dcc8;
}
.pantry-empty svg { width: clamp(48px, 7vh, 64px); height: auto; flex: 0 0 auto; }

/* The counter: bowl, oven and plate stand on it; the Bake button sits on the cupboard front. */
.kitchen-counter { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.counter-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2%; padding: 0 3%; position: relative; z-index: 1; margin-bottom: -6px; }
.counter-front {
  position: relative; height: clamp(84px, 14vh, 140px); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#b07a46 0 16px, #8a5a2b 16px 20px, #e0ad6c 20px); border-radius: 10px 10px 6px 6px;
  box-shadow: inset 0 0 0 3px #8a5a2b, 0 6px 0 #1f3a5f22;
}
.counter-front::before, .counter-front::after {
  content: ""; position: absolute; top: 30px; bottom: 12px; width: 24%; border-radius: 8px;
  border: 3px solid #a86a32; background: radial-gradient(circle at 88% 50%, #8a5a2b 0 5px, transparent 6px), #ebbd80;
}
.counter-front::before { left: 3%; }
.counter-front::after { right: 3%; background: radial-gradient(circle at 12% 50%, #8a5a2b 0 5px, transparent 6px), #ebbd80; }
.kitchen-bowl { position: relative; flex: 0 1 19%; max-width: 20vh; }
.kitchen-bowl > svg { width: 100%; height: auto; display: block; transform-origin: 50% 90%; }
.kitchen-bowl.is-stirring > svg { animation: bowl-stir .3s ease-in-out 3; }
.kitchen-bowl.is-bumping { animation: garden-bump .45s ease; }
.bowl-items { position: absolute; left: 26%; right: 30%; top: -26%; height: 56%; display: flex; justify-content: center; align-items: flex-end; z-index: -1; }
.bowl-fruit { width: 72%; }
.bowl-fruit svg { width: 100%; height: auto; display: block; }
.kitchen-oven { position: relative; flex: 0 1 28%; max-width: 30vh; }
.kitchen-oven > svg { width: 100%; height: auto; display: block; }
.kitchen-oven.is-baking .oven-glow { animation: oven-glow .5s ease-in-out infinite alternate; }
.oven-tray { position: absolute; left: 22%; right: 22%; top: 46%; height: 30%; display: flex; justify-content: center; align-items: flex-end; gap: 2%; pointer-events: none; }
.oven-tray svg { width: 30%; height: auto; display: block; animation: cookie-bake 1.8s ease-in forwards; }
.kitchen-plate { position: relative; flex: 0 1 31%; max-width: 36vh; padding-bottom: 2px; }
.kitchen-pizza { position: relative; flex: 0 1 19%; max-width: 21vh; display: flex; flex-direction: column; align-items: center; }
.pizza-board { width: 100%; }
.pizza-board svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 0 #1f3a5f22); }
.pizza-board.is-empty svg { opacity: .5; }
.pizza-board.is-new svg { animation: cookie-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.pizza-board .pizza-slice { cursor: pointer; }
.pizza-slice[data-gone] { display: none; }
.pizza-board .pizza-slice.is-pressed { opacity: .65; }
.pizza-count {
  display: flex; align-items: center; gap: 2px; min-height: 24px; margin: 4px 0 0; padding: 0 8px; border-radius: 999px; background: #fff; color: #a86a32;
  white-space: nowrap; font-weight: 900; font-size: clamp(.78rem, 1.6vh, .95rem); box-shadow: 0 2px 0 #1f3a5f22;
}
.pizza-count:empty { visibility: hidden; }
.pizza-count svg { width: clamp(22px, 3.4vh, 30px); height: auto; display: block; }
.pizza-count.is-bumping { animation: garden-bump .45s ease 2; }
.oven-tray .oven-pizza { width: 68%; display: block; transform: scaleY(.42); transform-origin: 50% 100%; }
/* The bamboo steamer sits on the stove while a fa gao steams. */
.oven-steamer { position: absolute; left: 24%; right: 24%; bottom: 92%; z-index: 3; pointer-events: none; animation: cookie-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.oven-steamer[hidden] { display: none; }
.oven-steamer svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 0 #1f3a5f22); }
.oven-steamer .steamer-lid { transform-box: fill-box; transform-origin: 20% 100%; transition: transform .4s ease; }
.oven-steamer.is-open .steamer-lid { transform: translate(-6%, -40%) rotate(-18deg); }
.steam-puffs { position: absolute; left: 10%; right: 10%; bottom: 70%; height: 90%; }
.steam-puffs i { position: absolute; bottom: 0; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ffffffd9; box-shadow: 0 0 0 2px #e2e8f0; animation: steam-rise 1.2s ease-out infinite; }
.steam-puffs i:nth-child(1) { left: 10%; }
.steam-puffs i:nth-child(2) { left: 40%; animation-delay: .4s; }
.steam-puffs i:nth-child(3) { left: 68%; animation-delay: .8s; }
@keyframes steam-rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-140%) scale(1.15); opacity: 0; } }
.oven-tray .oven-pizza svg { width: 100%; }
.plate-art svg { width: 100%; height: auto; display: block; }
.plate-cookies {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end;
  margin: 0 6% -9%; min-height: 3em;
}
.plate-cookie { width: 22%; margin: 0 -2% -7%; padding: 0; border: 0; background: none; flex: 0 0 auto; }
.plate-cookie svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 0 #1f3a5f22); transition: transform .12s ease; }
.plate-cookie:nth-child(2n) svg { transform: translateY(-6%) rotate(10deg); }
.plate-cookie:nth-child(3n) svg { transform: rotate(-8deg); }
.plate-cookie.is-pressed svg { transform: scale(.88); }
.plate-cookie.is-taken { visibility: hidden; }
.plate-cookie.is-new { animation: cookie-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.plate-cookie[data-new="1"] { animation-delay: .18s; }
.plate-cookie[data-new="2"] { animation-delay: .36s; }
.plate-cookie[data-new="3"] { animation-delay: .54s; }
.plate-more { align-self: center; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #a86a32; font-weight: 900; box-shadow: 0 2px 0 #1f3a5f22; }
.plate-empty { margin: 0 0 14%; width: 100%; text-align: center; color: #9aa4ae; font-weight: 900; font-size: clamp(.9rem, 1.9vh, 1.1rem); }
.counter-front { gap: clamp(8px, 1.6vw, 20px); }
.bake-btn {
  position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 12px; padding: 5px 16px 7px; border-radius: 22px;
  background: #ff8c42; color: #fff; font-weight: 900; font-size: clamp(.95rem, 2.1vh, 1.2rem); line-height: 1.1; box-shadow: 0 6px 0 #c4622a;
  transition: transform .1s ease; white-space: nowrap;
}
.bake-fagao { background: #d9902a; box-shadow: 0 6px 0 #a86a1c; }
.bake-fagao:active { box-shadow: 0 2px 0 #a86a1c; }
.bake-fagao.is-short { background: #b8c2cc; box-shadow: 0 6px 0 #8a96a3; }
.bake-pizza { background: #e63946; box-shadow: 0 6px 0 #b5222f; }
.bake-pizza:active { box-shadow: 0 2px 0 #b5222f; }
.bake-btn:not(.is-short):not(:disabled) { animation: garden-bob 1.6s ease-in-out infinite; }
.bake-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c4622a; }
.bake-btn.is-short { background: #b8c2cc; box-shadow: 0 6px 0 #8a96a3; }
.bake-pizza.is-short { background: #b8c2cc; box-shadow: 0 6px 0 #8a96a3; }
.bake-btn:disabled { filter: saturate(.5) brightness(1.05); }
.bake-ings { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px; border-radius: 999px; background: #fff; }
.bake-ings svg { width: clamp(24px, 3.6vh, 34px); height: clamp(24px, 3.6vh, 34px); display: block; }
.bake-ings i { font-style: normal; color: #a86a32; font-size: 1.3em; }

/* ——— Farmers market ——— */
.garden-market {
  display: flex; flex-direction: column;
  background: linear-gradient(#bfe9ff 0%, #e5f7ff 46%, #9fdc7c 46.5%, #86cc63 75%, #79c158 100%);
}
.market-body {
  flex: 1; min-height: 0; display: grid; gap: 10px; padding: 26px 12px 10px;
  grid-template-columns: minmax(104px, 14%) minmax(0, 1fr) minmax(128px, 17%);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "tiger stall girl";
}
.market-cast-tiger { grid-area: tiger; }
.market-cast-girl { grid-area: girl; }
.market-cast .tiger-host { width: min(100%, clamp(96px, 19vh, 180px)); }
.market-cast .girl-host { width: min(80%, clamp(72px, 14vh, 130px)); }
.market-stall { grid-area: stall; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.market-rows {
  display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas: "pizza fagao milk eggs flour" "cookie cookie cookie cookie cookie" "fruit fruit fruit fruit fruit";
}
.row-fagao { grid-area: fagao; }
.row-pizza { grid-area: pizza; }
.row-milk { grid-area: milk; }
.row-eggs { grid-area: eggs; }
.row-flour { grid-area: flour; }
/* The four one-item stalls are narrow: the price sits under the name. */
.row-pizza h3, .row-fagao h3, .row-milk h3, .row-eggs h3, .row-flour h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.row-pizza h3 small, .row-fagao h3 small, .row-milk h3 small, .row-eggs h3 small, .row-flour h3 small { margin-left: 0; white-space: nowrap; }
.row-pizza, .row-fagao, .row-milk, .row-eggs, .row-flour { padding-left: 8px; padding-right: 8px; }
.row-pizza .market-empty, .row-fagao .market-empty, .row-milk .market-empty, .row-eggs .market-empty, .row-flour .market-empty { margin: 6px 0; font-size: clamp(.72rem, 1.5vh, .88rem); }
.row-cookie { grid-area: cookie; }
.row-fruit { grid-area: fruit; }
.market-counter { display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; margin-top: -4px; }
.market-row { position: relative; padding: 6px 12px 22px; border-radius: 18px 18px 8px 8px; background: #fffaf0e6; box-shadow: 0 4px 0 #1f3a5f1a; }
.market-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(90deg, #c98a4b 0 36px, #b07a46 36px 40px); box-shadow: 0 5px 0 #1f3a5f22;
}
.market-row h3 { margin: 0 0 4px; font-size: clamp(1rem, 2.2vh, 1.25rem); color: #7a4b28; }
.market-row h3 small { margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: #e63946; color: #fff; font-size: .78em; font-weight: 900; }
.market-goods { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px 12px; min-height: clamp(64px, 10vh, 100px); padding-bottom: 4px; }
.market-good {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px 4px;
  border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #e3cfa6; transition: transform .12s ease;
}
.market-good:active { transform: translateY(3px) scale(.96); }
.market-good:disabled { opacity: .4; }
.good-art svg { width: clamp(48px, 8vh, 72px); height: clamp(48px, 8vh, 72px); display: block; }
.good-count {
  position: absolute; right: -8px; top: -6px; min-width: 26px; padding: 0 6px; border-radius: 999px;
  background: #3fae49; color: #fff; font-size: .9rem; text-align: center;
}
.price-tag { padding: 0 8px; border-radius: 999px; background: #fff4cc; color: #a86a00; font-weight: 900; font-size: clamp(.8rem, 1.7vh, .95rem); box-shadow: inset 0 0 0 2px #ffd23f; }
.market-empty { margin: 10px 0; text-align: center; color: var(--muted); font-weight: 800; font-size: clamp(.85rem, 1.8vh, 1rem); }
.market-till { position: relative; width: clamp(84px, 12vh, 124px); z-index: 3; }
.market-till > svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 0 #1f3a5f22); }
.market-till.is-bumping { animation: garden-bump .45s ease; }
.market-total { margin: 0 0 8px; padding: 2px 12px; border-radius: 999px; background: #fff; color: #2a7d33; font-weight: 900; font-size: clamp(.75rem, 1.6vh, .9rem); text-align: center; white-space: nowrap; box-shadow: 0 2px 0 #1f3a5f1a; }
.market-pop {
  position: absolute; left: 50%; top: -14px; z-index: 6; display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px 2px 4px;
  border-radius: 999px; background: #fffdf2; box-shadow: 0 0 0 3px #ffd23f, 0 6px 14px #1f3a5f33; color: #2a7d33; font-weight: 900; font-size: 1.1rem;
  white-space: nowrap; pointer-events: none; animation: market-pop 1.3s ease-out forwards;
}
.market-pop svg { width: 28px; height: 28px; display: block; }
.garden-coins.is-bumping { animation: garden-bump .45s ease; }
@keyframes market-pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -12px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

/* Wheat packet in the shop */
.wheat-packet .packet-name { color: #8a5a00; }
.wheat-packet.has-wheat-ticket .packet-art { animation: garden-wiggle 2.4s ease-in-out .6s infinite; }
.sheet-buy-wheat { background: #e09f00; box-shadow: 0 6px 0 #a86a00; }

/* A narrower landscape screen: smaller tabs and chips so all six places fit beside the wallet. */
@media (max-width: 1520px) {
  .garden-top { gap: 6px; }
  .garden-tabs { gap: 4px; }
  .garden-tab { gap: 4px; padding: 4px 10px 4px 4px; font-size: .92rem; white-space: nowrap; }
  .garden-tab svg { width: 30px; height: 30px; }
  .garden-wallet { gap: 4px; }
  .garden-chip { gap: 4px; font-size: .95rem; padding: 3px 9px 3px 4px; }
  .garden-chip svg { width: 28px; height: 28px; }
  .garden-tickets svg { width: 34px; }
  .garden-ticket-bar { left: 8px; right: 8px; }
  .garden-home { padding: 9px 12px; font-size: 1rem; }
}
@media (orientation: portrait), (max-width: 1100px) {
  .garden-top { flex-wrap: wrap; row-gap: 8px; }
  .garden-tabs { order: 3; flex-basis: 100%; }
  .garden-wallet { margin-left: auto; }
}

/* Portrait: the friends stand under the patches. */
@media (orientation: portrait) {
  .shop-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "shelves" "cast"; padding-top: 24px; }
  .shop-cast { gap: 18px; }
  .shop-art svg { width: clamp(64px, 7.5vh, 100px); }
  .shop-animal .shop-art svg { width: clamp(76px, 8.5vh, 112px); }
  .seed-rack { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .garden-shop { background: linear-gradient(transparent 86%, #d9a35f 86%, #c98a4b 100%), repeating-linear-gradient(90deg, #fff3dc 0 38px, #ffeccc 38px 76px); }
  .garden-yard { --horizon: 14%; }
  .yard-ground {
    top: 11%; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) clamp(150px, 21vh, 240px);
    grid-template-areas: "plots plots" "tiger girl";
  }
  .yard-cast-tiger { justify-content: flex-end; padding-right: 12%; }
  .yard-cast-girl { justify-content: flex-start; padding-left: 12%; }
  .garden-view .tiger-host, .yard-cast .tiger-host { width: clamp(96px, 14vh, 170px); }
  .garden-view .girl-host, .yard-cast .girl-host { width: clamp(64px, 9vh, 110px); }
  .kitchen-room {
    grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) clamp(150px, 20vh, 230px);
    grid-template-areas: "middle middle" "tiger girl";
  }
  .kitchen-cast-tiger { justify-content: flex-end; padding-right: 12%; }
  .kitchen-cast-girl { justify-content: flex-start; padding-left: 12%; }
  .kitchen-cast .tiger-host { width: clamp(96px, 14vh, 170px); }
  .kitchen-cast .girl-host { width: clamp(64px, 9vh, 110px); }
  .market-body {
    grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) clamp(150px, 20vh, 230px);
    grid-template-areas: "stall stall" "tiger girl"; padding-top: 32px;
  }
  .market-cast-tiger { justify-content: flex-end; padding-right: 12%; }
  .market-cast-girl { justify-content: flex-start; padding-left: 12%; }
  .market-counter { flex-direction: column-reverse; align-items: flex-end; gap: 4px; margin-top: 0; }
  .market-total { margin: 0; }
  .market-cast .tiger-host { width: clamp(96px, 14vh, 170px); }
  .market-cast .girl-host { width: clamp(64px, 9vh, 110px); }
  .garden-market { background: linear-gradient(#bfe9ff 0%, #e5f7ff 60%, #9fdc7c 60.5%, #86cc63 85%, #79c158 100%); }
  .garden-kitchen::after { height: calc(clamp(150px, 20vh, 230px) + 8px); }
}
@media (max-width: 700px) {
  .garden-top { flex-wrap: wrap; }
  .garden-tabs { order: 3; flex-basis: 100%; }
  .garden-tab { font-size: .95rem; }
}

@keyframes garden-pop { from { transform: translateX(var(--tx, 0)) scale(.6); opacity: 0; } to { opacity: 1; } }
.cast-bubble.is-popping { --tx: -50%; }
@keyframes garden-fade { from { opacity: 0; } }
@keyframes garden-news-in { from { opacity: 0; transform: translateY(30px) scale(.8); } }
@keyframes garden-news-out { to { opacity: 0; transform: translateY(16px); } }
@keyframes garden-walk-in { from { transform: translateX(-60px); opacity: 0; } 60% { opacity: 1; } 70% { transform: translateX(6px); } to { transform: none; } }
@keyframes garden-bump { 40% { transform: scale(1.12, .9); } 70% { transform: scale(.95, 1.05); } }
@keyframes garden-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
@keyframes garden-call { 50% { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 5px #ffb703; } }
@keyframes garden-bob { 50% { transform: translateY(-4px); } }
@keyframes garden-glow { 50% { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 4px #ffd166); } }
@keyframes garden-spin { to { transform: rotate(360deg); } }
@keyframes garden-drift { to { transform: translateX(40px); } }
@keyframes garden-fruit-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes garden-fruit-in { from { transform: scale(0); } }
@keyframes garden-grow { from { transform: scale(.05, 0); } }
@keyframes garden-dig { 0%, 100% { transform: rotate(0) translateY(0); } 40% { transform: rotate(-18deg) translateY(16px); } 70% { transform: rotate(10deg) translateY(-6px); } }
@keyframes garden-pour { 0% { transform: rotate(0); } 25%, 80% { transform: rotate(-32deg); } 100% { transform: rotate(0); } }
@keyframes garden-shake { 50% { transform: rotate(-12deg) translateY(4px); } }
@keyframes garden-tip { 0% { transform: rotate(0); } 40%, 80% { transform: rotate(150deg); } 100% { transform: rotate(150deg) translateY(-10px); opacity: 0; } }
@keyframes garden-drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
@keyframes garden-dirt { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--dx, 14px), -40px); opacity: 0; } }
.fx-dirt i:nth-child(2n) { --dx: -16px; }
@keyframes garden-chomp { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.2); } }
@keyframes garden-munch { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px) rotate(-2deg); } }
@keyframes wheat-sway { 0%, 100% { transform: skewX(-2deg); } 50% { transform: skewX(2.5deg); } }
@keyframes wheat-cut { to { transform: scaleY(0); opacity: .2; } }
@keyframes bowl-stir { 0%, 100% { transform: rotate(0); } 33% { transform: rotate(-6deg); } 66% { transform: rotate(6deg); } }
@keyframes oven-glow { from { opacity: .25; } to { opacity: .8; } }
@keyframes cookie-bake { from { filter: brightness(1.35) saturate(.25); transform: scale(.85); } to { filter: none; transform: scale(1); } }
@keyframes cookie-pop { from { transform: translateY(-40px) scale(.3); opacity: 0; } 60% { opacity: 1; } }
@keyframes garden-munch-girl { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(2%) scale(1.02, .98); } }

@media (prefers-reduced-motion: reduce) {
  .garden-view *, .garden-news { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}