:root { color: #53634f; background: #f8f2ef; }
.farm-shell { background: #c1ceb0; }
.farm { background: #c1ceb0 url('./scenery.svg?v=1') center / 100% 100% no-repeat; }
.farm-top { top: 2.5%; left: 5%; right: 5%; }
.coin-count { min-height: 36px; padding: 3px 12px 3px 5px; border-color: #fffdf7; background: #fffaf1f2; box-shadow: 0 3px 10px #7e77621a; }
.coin-count strong { color: #80604f; font-size: 17px; }
.coin-count svg { width: 27px; height: 27px; }
.companion { top: 20%; right: 16%; width: 27%; }
.companion img { filter: drop-shadow(0 4px 3px #77755a25); }
.reaction { color: #b5687d; border-color: #fffaf8; background: #fff2f1; box-shadow: 0 3px 8px #99677918; }
.plots { top: 39.5%; left: 9%; right: 9%; bottom: 23%; gap: 12px 12px; }
.plot { border: 3px solid #e0c8ab; border-radius: 15px; background: repeating-linear-gradient(0deg, transparent 0 12px, #815d4f20 13px 15px, #e2c9aa30 16px 17px), linear-gradient(155deg, #bda28b, #aa8771); box-shadow: 0 4px 0 #a58a72, 0 7px 8px #6f7c531c, inset 0 2px 0 #ecd5be80; }
.plot::before { background: #76513f24; }
.plot[data-status='empty']::after { color: #fff4e3; border-color: #fff4e370; background: #fff4e315; }
.plot[data-status='growing'] { border-color: #c3ae9a; background: repeating-linear-gradient(0deg, transparent 0 12px, #634a4125 13px 15px, #bda48c30 16px 17px), linear-gradient(155deg, #9c8576, #826b5d); box-shadow: 0 4px 0 #8c7565, 0 7px 8px #6f7c531c, inset 0 2px 0 #ceb9a680; }
.plot[data-status='ready'] { border-color: #fff1c2; background: repeating-linear-gradient(0deg, transparent 0 12px, #a57c5820 13px 15px, #e9d5b730 16px 17px), linear-gradient(155deg, #c7a78a, #b38b6e); box-shadow: 0 4px 0 #aa886c, 0 0 0 3px #fff4ce66, inset 0 2px 0 #ffefcf; }
.plot-bar { height: 5px; background: #534b404d; }
.plot-bar i { background: #d7dfb2; }
.water-mark { background: #f3fcfa; border-color: #fff; box-shadow: 0 2px 5px #5b8c7d26; }
.plot[data-status='locked'] { border: 2px dashed #7a906b9c; border-radius: 15px; background: #edf0dc30; box-shadow: none; color: #526a48; }
.plot.is-affordable { border: 2px solid #fff4d6; background: #f5ecd7b3; color: #775f4a; box-shadow: 0 3px 0 #88987745; }
.seed-dock { bottom: 7%; gap: 14px; padding: 9px 16px 11px; border-radius: 24px; border: 2px solid #fffbf4; background: linear-gradient(#fffaf5, #f2e3de); box-shadow: 0 4px 0 #cbb4a7, 0 7px 12px #6e775b22, inset 0 -2px 0 #ead5cf; }
.seed { border-radius: 17px; background: #d9c1b51c; }
.seed.is-selected { border-color: #b27888; background: #f0d8dc; box-shadow: 0 3px 0 #bd98a04d, inset 0 1px 0 #fff8f6; }
.seed.is-selected::after { background: #b27888; border-color: #fffaf5; }
.seed-lock { color: #765c53; background: #fffaf5; border-color: #edd8cf; }
.hint { color: #4c6345; }
.save-warning { top: 10%; color: #7d464d; }
.farm button:focus-visible { box-shadow: 0 0 0 6px #8c5c70; }
@media (hover: hover) { .seed:not(:disabled):hover { background: #f0d8dc; } }
@media (max-width: 350px) { .plots { gap: 12px 10px; } .plot, .plot[data-status='locked'] { border-radius: 12px; } .seed-dock { gap: 12px; padding-inline: 13px; } }
@media (max-width: 450px) { :root { background: #c1ceb0; } }

.harvest-mark { background: #fff7e5; border-color: #fffcf5; box-shadow: 0 2px 3px #99786033; }
.seed-lock[data-next='true']::after { background: #b27888; }
.seed.is-unlocked { animation-name: rose-unlock; }
.coin-count .is-earned { animation-name: rose-earned; }
@keyframes rose-earned { 35% { transform: scale(1.1); color: #a26776; } }
@keyframes rose-unlock { 35% { box-shadow: 0 0 0 3px #e8c5cb, 0 0 10px #fff0e4; } }