*{box-sizing:border-box}html{background:#172c3b}body{margin:0;color:#452b18;font-family:Georgia,serif;background:#e9d5a8;min-height:100vh}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,.packets:focus-visible{outline:3px solid #eea52f;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.masthead{height:96px;background:#172d40 url('assets/exact-header.webp') center top/100% 1305%;border-bottom:3px solid #a77f35;display:flex;align-items:center;justify-content:center;position:relative;color:#f5d078}.masthead h1{font-size:clamp(28px,4vw,60px);margin:0;letter-spacing:.02em;text-shadow:1px 2px #241b13;background:#172e40;padding:0 18px;box-shadow:0 0 15px 10px #172e40}.brand{position:absolute;left:2%;font-size:clamp(12px,1.4vw,22px);font-style:italic;color:#f4d886;text-decoration:none;line-height:1.1;background:#172d40;border:1px solid #b99b57;border-radius:50%;padding:12px 22px;transform:rotate(-3deg)}.brand span{color:#ffe49d}#sound{position:absolute;right:18px;background:#203d41;color:#f6d58c;border:1px solid #d3ad5d;border-radius:50%;width:44px;height:44px;font-size:24px}nav{display:flex;justify-content:center;gap:16px;padding:10px;background:#694324 url('assets/carved-wood.webp') center/cover}nav a{width:clamp(150px,30vw,380px);text-align:center;text-decoration:none;color:#53311c;border:2px solid #bf974e;background:linear-gradient(110deg,#f2deb2,#fff4d4,#e9cd99);padding:10px 12px;border-radius:20px;box-shadow:0 3px 4px #26190d66;font-size:clamp(17px,2vw,29px);font-weight:bold}nav a.active{background:linear-gradient(115deg,#324c26,#557037,#273f27);color:#fff0c5;box-shadow:inset 0 0 0 2px #f2d68c,0 2px 5px #281807}nav small{display:block;font-size:10px;font-weight:normal;letter-spacing:.05em}main{max-width:1800px;margin:auto;padding:0 10px}#instruction{text-align:center;font-size:clamp(15px,1.6vw,23px);margin:10px auto;padding:10px 18px;border:1px solid #c5a164;border-radius:24px;background:#fff2cf;max-width:760px;min-height:46px}.garden-layout{display:grid;grid-template-columns:clamp(100px,12vw,185px) minmax(0,1fr) clamp(100px,12vw,185px);gap:10px}.seed-rack{background:linear-gradient(90deg,#72491f,#9a6632,#6d451f);border:3px double #b9955c;border-radius:12px;display:flex;flex-direction:column;max-height:720px;min-height:0;padding:5px;box-shadow:1px 3px 7px #35231155}.seed-rack h2{font-size:clamp(15px,1.5vw,23px);text-align:center;color:#fff1cb;margin:6px 0}.scroll-arrow{border:0;border-radius:6px;color:#fff3cb;background:#392c1c80;font-size:25px;line-height:1;height:28px;flex-shrink:0}.packets{overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#f1d398 #5f3d20;min-height:0;flex:1;max-height:600px;padding:6px 2px}.packet{display:block;width:100%;padding:8px 4px 7px;margin-bottom:11px;min-height:153px;position:relative;isolation:isolate;border:2px solid #b58b46;border-radius:3px 7px 5px 4px;background:radial-gradient(ellipse at 40% 30%,#fff9e2,#e9cd97);color:#5e351d;box-shadow:1px 3px 4px #21150777;transition:transform .15s,box-shadow .15s}.packet:before{content:'Wonder Sky\a Farm Seeds';white-space:pre;font-size:clamp(10px,1vw,15px);font-style:italic;display:block;line-height:1.05}.packet img{width:100%;height:90px;object-fit:contain;display:block;filter:drop-shadow(1px 2px 1px #735b2733)}.packet strong{display:block;font-size:clamp(12px,1.15vw,18px);text-transform:uppercase;border-top:1px solid #b9925a;padding-top:4px}.packet small{font:10px Georgia,serif;display:block;margin-top:2px}.packet[aria-pressed=true]{outline:3px solid #ffdc75;box-shadow:0 0 12px #ffe784;transform:rotate(-2deg)}.garden-center{min-width:0}.scene-scroll{overflow-x:auto;overflow-y:hidden;border:3px solid #94703f;border-radius:12px 12px 4px 4px;background:#6a4a2f}.scene{position:relative;min-width:665px;aspect-ratio:1400/950;width:100%;background:#795432}.scene canvas{width:100%;height:100%;display:block}#rowButtons{position:absolute;inset:0;pointer-events:none}.row-button{pointer-events:auto;position:absolute;width:12%;height:39%;top:35%;background:transparent;border:0;border-radius:20px;display:flex;align-items:flex-start;justify-content:center;padding:0}.row-button .marker{position:relative;display:flex;flex-direction:column;align-items:center;font-size:clamp(12px,1.4vw,21px);color:#49301a;background:linear-gradient(100deg,#cfaa6c,#f5d698,#c79b5d);border:1px solid #795227;border-radius:4px 8px 3px 7px;min-width:36px;max-width:95%;padding:4px 6px;box-shadow:1px 2px 3px #39251299}.row-button .marker:after{content:'';position:absolute;top:100%;height:22px;width:5px;background:#b88b51;z-index:-1}.marker small{font:10px Georgia,serif;white-space:nowrap;max-width:100%;overflow:hidden}.row-button.empty .marker{border:2px dashed #8a632e}.row-button.ready .marker{background:#f8e59f;border:2px solid #527444;animation:readyGlow 2s infinite}.row-button.selected{box-shadow:inset 0 0 0 3px #f7dc78;background:#ffe27c0d}.tools{display:flex;align-items:center;gap:10px;background:#f8e7bf;border:2px solid #b4945e;border-radius:4px 4px 15px 15px;padding:10px}.tools button,.card-actions button,.card-bottom button{border:2px solid #c9a253;box-shadow:inset 0 0 0 1px #f8df9d,0 2px 3px #32220d44;border-radius:24px;background:linear-gradient(120deg,#526b37,#29472e);color:#fff3ce;font-size:clamp(14px,1.6vw,23px);padding:10px 20px;min-height:46px;white-space:nowrap}.tools button[aria-pressed=true]{background:#367181;outline:3px solid #8bd5ed}.basket-summary{flex:1;text-align:center;font-style:italic;font-size:clamp(12px,1.2vw,17px)}.garden-note{display:flex;justify-content:center;gap:22px;font-style:italic;margin:12px 0;font-size:15px}.garden-note span{font-size:12px;opacity:.8}footer{display:flex;justify-content:space-between;gap:15px;padding:12px 22px;font-size:13px;background:#172e40;color:#f2d7a0}footer a{color:inherit}.drop{position:absolute;width:5px;height:12px;background:#9be3f4;border-radius:60% 40% 60% 40%;animation:rain .65s linear both;pointer-events:none}@keyframes rain{from{transform:translateY(-90px);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes readyGlow{50%{box-shadow:0 0 16px #ffef8b}}dialog{border:3px double #bc9454;border-radius:18px;background:#fff0cc;color:#4f311b;width:min(920px,94vw);max-height:95svh;padding:20px 24px;box-shadow:0 10px 70px #0008;overflow:auto}dialog::backdrop{background:#13261cbb;backdrop-filter:blur(4px)}dialog h2{text-align:center;font-style:italic;font-size:clamp(19px,3vw,30px);margin:0 28px 12px}#postcard{width:100%;height:auto;display:block;box-shadow:0 3px 9px #5d391b66;border-radius:5px}.close{position:absolute;right:8px;top:5px;border:0;background:transparent;font-size:32px;color:#563820;min-width:44px;min-height:44px}.name-label{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0;font-size:18px}.name-label input{min-height:44px;border:1px solid #b08c4c;border-radius:8px;background:#fffaf0;padding:8px 12px;font:20px Georgia,serif;width:230px}.card-actions,.card-bottom{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.card-actions button{font-size:18px}.card-bottom{margin-top:10px}.card-bottom button{font-size:14px;min-height:40px;background:#f3dfb3;color:#4d321d}#shareStatus{min-height:18px;text-align:center;font-size:14px;margin:8px 0}#basketTransition{display:none;position:fixed;z-index:100;left:50%;top:50%;width:min(450px,70vw);aspect-ratio:1;transform:translate(-50%,-50%);background:center/contain no-repeat;pointer-events:none}#basketTransition.spinning{display:block;animation:basketSpin 1.25s ease-in-out both}@keyframes basketSpin{0%{opacity:0;transform:translate(30vw,15vh) scale(.5) rotateY(0)}25%{opacity:1;transform:translate(-50%,-50%) scale(1) rotateY(0)}85%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotateY(720deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotateY(900deg)}}@media(min-width:1500px){.scene{max-height:720px}.seed-rack{max-height:787px}}@media(max-width:750px){.masthead{height:72px}.masthead h1{font-size:28px;padding:0 5px}.brand{display:none}#sound{right:8px;width:38px;height:38px}nav{gap:8px;padding:8px}nav a{width:48%;font-size:17px;padding:9px 5px}main{padding:0 5px}.garden-layout{grid-template-columns:85px minmax(0,1fr) 85px;gap:5px}.seed-rack{padding:3px;max-height:530px}.seed-rack h2{font-size:13px}.packets{max-height:430px}.packet{min-height:127px;padding:7px 2px}.packet img{height:69px}.packet:before{font-size:10px}.packet strong{font-size:11px}.packet small{font-size:8px}.tools{flex-wrap:wrap;padding:7px;gap:6px}.tools button{flex:1;font-size:14px;padding:8px 10px}.basket-summary{order:3;flex-basis:100%;font-size:12px}.garden-note{font-size:12px;flex-direction:column;align-items:center;gap:4px}#instruction{font-size:14px;padding:8px 12px}.scene{min-width:665px}.row-button .marker{font-size:16px}.marker small{font-size:9px}.card-actions button{font-size:15px;padding:9px 13px}dialog{padding:18px 12px}footer{font-size:11px;padding:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media print{body>*{display:none!important}body>dialog{display:block!important;position:static;width:100%;max-width:none;max-height:none;border:0;padding:0;background:white}dialog>*{display:none!important}dialog>#postcard{display:block!important;width:100%;box-shadow:none}@page{size:landscape;margin:12mm}}
/* Keep the garden and its tools together within the desktop viewport. */
@media(min-width:751px){.scene{height:clamp(380px,calc(100svh - 345px),720px);aspect-ratio:auto}.seed-rack{max-height:calc(100svh - 276px);min-height:450px}.packets{max-height:none}}
.packet.illustrated-packet{padding:0;border:0;background:transparent;min-height:0;box-shadow:none}.packet.illustrated-packet:before{display:none}.packet.illustrated-packet img{width:100%;height:auto;filter:none;border-radius:5px}.packet.illustrated-packet strong,.packet.illustrated-packet small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.row-button{height:60%}
/* The approved illustrated mockup is the composition reference. */
body{background:#76502c url('assets/garden/garden-bg-refined.webp') center/cover fixed}
.masthead{height:100px;background:#162e42 url('assets/garden/model-header.webp') center/100% 100% no-repeat;border:0;z-index:4}
.masthead h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.masthead .brand{left:2%;top:10px;width:205px;text-align:center;font-size:24px;padding:5px 12px;border:0;border-radius:4px;background:#172f43;box-shadow:0 0 12px 8px #172f43;transform:rotate(-3deg)}
nav{position:absolute;z-index:5;top:76px;left:19%;right:19%;height:100px;background:none;padding:0;gap:10px;align-items:stretch}
nav a,nav a.active{width:50%;padding:0;background:center/100% 100% no-repeat;border:0;border-radius:30px;box-shadow:0 3px 5px #21170877;font-size:0;color:transparent;text-shadow:none;display:flex;align-items:center;justify-content:center}
nav a.active{background-image:url('assets/garden/model-tab-garden.webp')}
nav a:not(.active){background-image:url('assets/garden/model-tab-train.webp')}
nav a small{position:absolute;top:90%;color:#ffefbf;font-size:10px;background:#48331dba;border-radius:10px;padding:1px 8px}
main{position:relative;max-width:none;padding:0}
#instruction{position:absolute;z-index:3;top:88px;left:50%;transform:translateX(-50%);margin:0;width:60%;max-width:800px;min-height:62px;padding:17px 48px;background:url('assets/garden/model-instruction.webp') center/100% 100% no-repeat;border:0;border-radius:0;font-size:clamp(15px,1.5vw,23px);font-style:italic}
.garden-layout{grid-template-columns:12% minmax(0,1fr) 12%;gap:0;background:transparent}
.garden-center{position:relative}
.scene-scroll{border:0;border-radius:0;background:transparent}
.scene{height:calc(100svh - 100px);min-height:620px;max-height:none;aspect-ratio:auto;background:transparent;min-width:665px}
.seed-rack{position:relative;z-index:3;max-height:calc(100svh - 124px);min-height:0;margin:10px 0 0;padding:0 6px;border:0;border-radius:0;box-shadow:none;background:transparent}
.seed-rack h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.packets{max-height:none;padding:5px 3px;scrollbar-width:thin;scrollbar-color:#e5c080 #4e361d66}
.packet{margin-bottom:10px}.packet.illustrated-packet{transform:rotate(-1deg)}.packet.illustrated-packet:nth-child(even){transform:rotate(1deg)}.packet.illustrated-packet[aria-pressed=true]{transform:rotate(-2deg) scale(.97)}
.scroll-arrow{height:24px;min-height:24px;background:#50371dc9;border:1px solid #c7a362;color:#ffedbe;line-height:.8}
.row-button{top:44%;height:46%;width:12%;align-items:flex-start}
.row-button .marker{background:url('assets/garden/model-marker.webp') center top/100% 100% no-repeat;border:0!important;border-radius:0;box-shadow:none;min-width:67px;min-height:100px;padding:8px 8px 42px;color:#4b2d16;font-size:25px;font-weight:bold;text-shadow:0 1px #fbe0a6}
.row-button .marker:after{display:none}.row-button .marker small{background:#f7dda8eb;border-radius:4px;padding:2px 3px;font-weight:normal;margin-top:3px;font-size:10px}.row-button.ready .marker{background-color:transparent;animation:none;filter:drop-shadow(0 0 5px #ffe98e)}
.row-button.selected{box-shadow:none;background:transparent}.row-button:focus-visible{outline:3px solid #ffe487;outline-offset:-4px}
.tools{position:absolute;z-index:3;bottom:17px;left:0;right:0;border:0;border-radius:0;background:none;box-shadow:none;padding:0 16%;justify-content:center;gap:20px}
.tools button{font-size:clamp(18px,2.3vw,32px);padding:12px 26px;border:3px double #e0bc6f;box-shadow:0 0 0 2px #61431e,inset 0 0 0 2px #fff0bd,0 3px 6px #311b0f99;min-height:60px}
#done{background:linear-gradient(110deg,#f2d8a5,#fff3d0,#e5c18b);color:#523018;min-width:260px}
.basket-summary{position:absolute;bottom:75px;left:26%;right:26%;font-size:15px;background:#fff0c9dd;padding:5px 12px;border-radius:15px;pointer-events:none}
.garden-note{position:absolute;bottom:3px;left:13%;right:13%;margin:0;font-size:11px;color:#fff0cb;text-shadow:0 1px 3px #25190a;pointer-events:none;display:none}
footer{min-height:28px;padding:7px 14px}
@media(max-width:750px){.masthead{height:72px;background-size:auto 100%}.masthead .brand{display:none}nav{top:56px;left:14%;right:14%;height:65px;gap:5px}nav a,nav a.active{border-radius:15px}nav a small{font-size:8px}#instruction{top:57px;width:72%;min-height:52px;padding:13px 24px;font-size:12px}.garden-layout{grid-template-columns:80px minmax(0,1fr) 80px}.seed-rack{max-height:calc(100svh - 100px);padding:0 3px}.scene{height:calc(100svh - 72px);min-height:590px;min-width:665px}.tools{position:relative;bottom:auto;background:#ead2a2;padding:10px 5px;gap:8px}.tools button{min-height:48px;font-size:15px;padding:8px 12px}#done{min-width:0}.basket-summary{position:static;order:3;background:none;flex-basis:100%;font-size:11px;padding:0}.row-button .marker{font-size:22px;min-width:58px;min-height:92px}.row-button .marker small{font-size:9px}footer{font-size:10px}}
.row-button .marker{background-image:url('assets/garden/blank-marker.png');padding-top:15px;font-size:25px}.row-button .marker small{margin-top:8px}.tools #water{position:relative}.tools #water:before{content:'';position:absolute;inset:-45px auto -6px -170px;width:165px;background:url('assets/garden/wateringcan.png') center/contain no-repeat;pointer-events:none}
#instruction{isolation:isolate;display:flex;align-items:center;justify-content:center;height:66px;font-size:clamp(13px,1.5vw,21px);padding:12px 65px}
#instruction:before{content:'';position:absolute;z-index:-1;inset:11px 62px;background:#fff0ce;box-shadow:0 0 8px 5px #fff0ce}
.row-button.ready .marker{background-image:url('assets/garden/blank-marker.png');background-position:center top;background-size:100% 100%;background-repeat:no-repeat}
.tools #water:before{display:none}
@media(max-width:750px){#instruction{font-size:12px;padding:10px 28px;height:56px}#instruction:before{inset:10px 30px}}
.drop{animation-duration:1s;box-shadow:0 0 3px #8dcfe988}
@media(min-width:751px){.scene{height:calc(100svh - 128px)}.seed-rack{max-height:calc(100svh - 152px)}}
/* Keep the crop itself clear; row labels sit at the side of its soil line. */
.row-button{top:30%;height:61%}
.row-button .marker,.row-button.ready .marker{position:absolute;top:51%;left:-4px;width:40px;min-width:40px;height:60px;min-height:60px;padding:8px 3px 0;font-size:18px;background-image:url('assets/garden/blank-marker.png');background-size:100% 100%;filter:drop-shadow(1px 2px 2px #38230e88)}
.row-button .marker small{position:absolute;left:50%;top:35px;transform:translateX(-50%);font-size:8px;line-height:1.1;margin:0;white-space:nowrap;padding:2px 4px;max-width:none}
#waterDrops{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.drop{width:4px;height:14px;background:linear-gradient(#c8f4ff,#69bfe5);border-radius:60% 40% 60% 40%;animation:headerRain 1.8s linear both;box-shadow:0 0 3px #aadfea88}
@keyframes headerRain{0%{transform:translateY(-20px);opacity:0}8%{opacity:.85}90%{opacity:.85}100%{transform:translateY(var(--rain-distance,520px));opacity:0}}
@media(max-width:750px){.row-button .marker,.row-button.ready .marker{min-width:37px;width:37px;min-height:55px;height:55px;font-size:17px}.row-button .marker small{font-size:8px}}
#harvestCue{position:absolute;z-index:7;top:21%;left:50%;transform:translateX(-50%);padding:14px 26px;text-align:center;color:#573116;background:linear-gradient(110deg,#f1d49a,#fff0c4,#e8ca8f);border:3px double #a67632;border-radius:14px;box-shadow:0 5px 20px #33200c66;pointer-events:none;min-width:260px;max-width:80%}
#harvestCue[hidden]{display:none}#harvestCue strong{display:block;font-size:clamp(25px,3vw,40px);font-style:italic}#harvestCue span{display:block;font-size:14px;margin-top:3px}#harvestCue.arrive{animation:harvestArrive .5s ease-out}
@keyframes harvestArrive{from{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.marker small:empty{display:none}
@font-face{font-family:HarvestScript;src:url('assets/garden/harvest-script.otf') format('opentype');font-style:normal;font-weight:400;font-display:block}

/* Place row numbers at the far end of the planting rows. */
.row-button .marker,.row-button.ready .marker{top:22%;left:50%;transform:translateX(-50%)}

.packet{cursor:grab;user-select:none;touch-action:pan-y}.packet:active{cursor:grabbing}
.packet img{pointer-events:none}
.seed-drag-ghost{position:fixed;z-index:10000;width:90px;transform:translate(-50%,-50%) rotate(-5deg);pointer-events:none;filter:drop-shadow(0 4px 5px #21150888)}
.row-button.drop-target{outline:3px dashed #ffe7a4;outline-offset:-5px;background:#fff3ba28;border-radius:20px}
.row-button .marker.has-packet{width:48px;min-width:48px;height:60px;min-height:60px;padding:0;background-image:url('assets/garden/blank-marker.png')}
.marker .planted-packet{position:absolute;left:0;bottom:50%;display:block;width:48px;height:65px;object-fit:contain;pointer-events:none}
.row-button .marker.has-packet:after{display:none}
.row-button .marker small{display:none}

/* Temporarily hide the harvest-time popup. */
#harvestCue{display:none!important}

nav a.menu-tab,nav a.menu-tab.active{background:linear-gradient(110deg,#f0d8a9,#fff1d0,#ebcf99);border:4px double #a77a3d;box-shadow:inset 0 0 0 3px #f9e5be,0 3px 5px #21170877;color:#593719;font-size:clamp(18px,2.4vw,36px);text-shadow:0 1px #fff8dc}
.menu-page main{max-width:850px;margin:100px auto 50px;padding:40px 25px;text-align:center;background:#fff0d0ed;border:4px double #a77a3d;border-radius:20px;min-height:330px}
.menu-page main h2{font-size:32px;font-style:italic}.menu-page main p{font-size:20px}.menu-page main a{display:inline-block;margin-top:35px;color:#425d32;font-size:20px}
@media(max-width:750px){nav a.menu-tab,nav a.menu-tab.active{font-size:18px}.menu-page main{margin:80px 15px 30px}}

nav a[href='garden.html']{background-image:url('assets/garden/model-tab-garden.webp')}

nav a.menu-tab,nav a.menu-tab.active{background:linear-gradient(115deg,#324c26,#557037,#273f27);border:4px double #dfb358;box-shadow:inset 0 0 0 2px #f6df9f,0 3px 5px #30190988;color:#fff0c5;font-size:clamp(20px,2.5vw,38px);text-shadow:0 2px #263a21;gap:8px;padding:3px 12px}
nav a.menu-tab img{height:90%;width:28%;object-fit:contain;filter:drop-shadow(0 2px 2px #1b260d66)}nav a.menu-tab span{white-space:nowrap}
@media(max-width:750px){nav a.menu-tab,nav a.menu-tab.active{font-size:18px;gap:3px;padding:2px 6px}}