body { background: linear-gradient(#8fd0df 0 24%,#d9efb2 24% 100%); }
header button { border-color: rgba(255,255,255,.55); background: rgba(48,103,72,.42); box-shadow: 0 6px 18px rgba(43,91,67,.14),inset 0 1px rgba(255,255,255,.24); backdrop-filter: blur(8px); }
.welcome { border: 1px solid rgba(151,117,41,.11); background: linear-gradient(135deg,#fff6c8,#ffe9a3); box-shadow: 0 16px 40px rgba(58,95,60,.13),inset 0 1px #fff; }
.status > div { border: 1px solid rgba(255,255,255,.7); background: linear-gradient(180deg,rgba(255,255,255,.86),rgba(246,252,238,.68)); box-shadow: 0 8px 22px rgba(62,90,56,.08),inset 0 1px #fff; }
.farm { border: 1px solid rgba(130,93,50,.12); background: linear-gradient(145deg,#fff3d2,#f0dfb6); box-shadow: 0 25px 65px rgba(68,87,47,.18),inset 0 1px rgba(255,255,255,.8); }
.plot { border: 1px solid rgba(84,50,28,.12); background: repeating-linear-gradient(168deg,#a9734d 0 12px,#bc865c 13px 25px); box-shadow: inset 0 -10px rgba(77,45,24,.16),inset 0 2px rgba(255,255,255,.12),0 6px 12px rgba(87,57,33,.12); }
.plot.ready { background: linear-gradient(145deg,#7dbe72,#559a59); box-shadow: inset 0 -9px rgba(39,103,47,.22),0 8px 18px rgba(64,124,68,.2); }
.seeds { gap: 12px; }.seed { min-height: 76px; border: 1px solid rgba(63,93,58,.09); background: linear-gradient(180deg,#fff,#f7faef); box-shadow: 0 9px 20px rgba(51,75,47,.08),inset 0 1px #fff; }.seed.active { border-color: #568d58; box-shadow: 0 0 0 3px rgba(86,141,88,.12),0 10px 24px rgba(51,75,47,.12); }
.crop-sprite { display: block; width: 58px; height: 58px; flex: 0 0 auto; background: url("assets/crop-atlas.png") no-repeat; background-size: 300% auto; background-position-y: center; filter: drop-shadow(0 5px 4px rgba(67,45,22,.22)); transition: transform .2s ease,filter .2s ease; }
.crop-wheat { background-position-x: 0; }.crop-carrot { background-position-x: 50%; }.crop-berry { background-position-x: 100%; }
.plot .crop-sprite { width: 72%; height: 72%; margin: -2px auto -10px; }
.plot.growing .crop-sprite { transform: scale(.62) translateY(10px); filter: saturate(.62) brightness(.82) drop-shadow(0 3px 2px rgba(67,45,22,.2)); }
.plot.ready .crop-sprite { transform: scale(1.06); filter: drop-shadow(0 7px 5px rgba(35,72,33,.28)); }
.seed:hover .crop-sprite,.seed.active .crop-sprite { transform: scale(1.08) rotate(-2deg); }
.order { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg,#4f865c,#2c5940); box-shadow: 0 18px 40px rgba(35,78,49,.2),inset 0 1px rgba(255,255,255,.15); }.order button { box-shadow: 0 5px 0 #b68f33; }
.coin-icon,.sun-icon { width: 23px; height: 23px; display: inline-grid; place-items: center; margin-right: 5px; border: 0; border-radius: 50%; vertical-align: -6px; }
.coin-icon { background: radial-gradient(circle at 35% 28%,#fff2a5,#f2bd3f 58%,#bd7622); box-shadow: inset 0 1px 1px #fff7bd,0 3px 7px rgba(159,100,23,.2); }.coin-icon svg { width: 19px; height: 19px; fill: none; stroke: #9a5b18; stroke-width: 1.8; }
.sun-icon { margin-right: 3px; background: radial-gradient(circle,#fff3a8,#ffd55d 58%,transparent 62%); }.sun-icon::after { display: none; }.sun-icon svg { width: 24px; height: 24px; fill: none; stroke: #e19b27; stroke-width: 1.7; stroke-linecap: round; }
.empty-mark { width: 52px; height: 52px; display: grid; place-items: center; border: 1px dashed rgba(255,240,204,.42); border-radius: 18px; background: rgba(255,245,213,.08); box-shadow: inset 0 1px rgba(255,255,255,.1); }.empty-mark::before,.empty-mark::after { display: none; }.empty-mark svg { width: 37px; height: 37px; fill: rgba(255,236,184,.13); stroke: #fff0c5; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(80,48,26,.25)); }
@media(max-width:520px){.crop-sprite{width:52px;height:52px}.plot .crop-sprite{width:78%;height:78%;margin-bottom:-13px}}