:root{--ink:#263f3c;--teal:#35665b;--mint:#8fc7a3;--cream:#f0e4bb;--paper:#edf0df;--line:#c1cfb9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang TC","Microsoft JhengHei",sans-serif}header{padding:24px 5vw;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800;font-size:22px}.brand small{font-size:11px;font-weight:400;margin-left:20px;letter-spacing:2px}.tag,.eyebrow{font-size:12px;letter-spacing:2px}.tag{border:1px solid var(--teal);padding:8px 12px}main{max-width:1320px;margin:auto;padding:0 40px}.intro{display:flex;justify-content:space-between;align-items:center;padding:36px 0 30px}.intro h1{font-family:"Songti TC",serif;font-size:40px;line-height:1.25;margin:12px 0}.intro>p{font-size:14px;line-height:1.9;color:#607568;padding-right:38px}.eyebrow{color:var(--teal)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 290px;border:1px solid var(--teal);box-shadow:6px 6px 0 #c1cfb9}.scene-panel{min-width:0;background:#dae5ce}.scene-top{padding:15px 20px;background:var(--teal);color:#f0e4bb;display:flex;justify-content:space-between;font-size:12px}.live{color:#c7e5b3}.climate{display:flex;justify-content:space-around;padding:16px;font-size:11px;background:#e4ead7}.climate b{font-family:monospace;font-size:15px;margin-left:8px}.greenhouse{height:405px;position:relative;overflow:hidden;background:#b8d3be}.windows{position:absolute;inset:0 0 100px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 7px),#719484 calc(25% - 7px),#719484 25%),linear-gradient(#badbd0,#d9e9bd);border-bottom:12px solid #779784}.windows:after{content:"";position:absolute;top:85px;left:0;right:0;border-top:6px solid #90ae96}.floor{position:absolute;inset:210px 0 0;background:repeating-linear-gradient(0deg,transparent 0,transparent 39px,#acc1a1 40px),#c7d0a5;transform:skewY(-3deg);border-top:6px solid #99ae89}.plots{position:absolute;inset:60px 5% 28px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.plot{position:relative;background:transparent;border:0;cursor:pointer;min-width:0;padding:0;isolation:isolate}.plot:after{content:"";position:absolute;bottom:13px;left:20%;width:60%;height:8px;background:#f0e4bb;opacity:0;z-index:-1}.plot.selected:after{opacity:1}.sprite{background-repeat:no-repeat;background-size:400% 400%;image-rendering:pixelated;pointer-events:none}.farm{background-image:url('assets/farm-atlas-v01-half.png?v=22')}.soil{position:absolute;width:150px;height:150px;left:50%;bottom:-10px;transform:translateX(-50%)}.plant{position:absolute;width:115px;height:115px;left:50%;bottom:23px;transform:translateX(-50%)}.bot{position:absolute;width:132px;height:132px;left:8%;top:88px;transition:left .65s,top .65s;pointer-events:none;filter:drop-shadow(0 12px 0 #476b5022)}.robot{background-image:url('assets/robot-atlas-v01-half.png');width:100%;height:100%}.scene-label{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#536f55;font-size:11px}.scene-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;font-size:12px;border-top:1px solid #adc1a5}button,select{font:inherit;color:var(--ink)}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #bd7534;outline-offset:3px}.scene-foot button{border:0;background:transparent;text-decoration:underline;padding:8px}aside{background:#f4f3e6;padding:24px;border-left:1px solid var(--teal)}h2{font-size:20px;margin:9px 0 24px}label{display:block;font-size:12px;margin:22px 0 10px}label span{float:right;color:var(--teal)}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.choices button{border:1px solid var(--line);background:transparent;padding:9px 0;font-size:12px}.choices .active{background:var(--teal);color:#fff;border-color:var(--teal)}select{width:100%;background:#edf0df;border:1px solid var(--line);padding:11px}input{width:100%;accent-color:var(--teal)}.range-label{display:flex;justify-content:space-between;font-size:10px;color:#6e7c6b}.note{font-size:11px;line-height:1.8;color:#7a8475;margin-top:23px}.library{padding:45px 0 15px}.library-heading{display:flex;justify-content:space-between;align-items:center}.library-heading>span{font-size:12px;color:#6e7c6b}.catalog-row{display:grid;grid-template-columns:120px repeat(4,1fr);align-items:center;border-top:1px solid var(--line);padding:12px 0}.catalog-row strong{font-size:13px}.sample{text-align:center;font-size:11px;color:#607568}.sample .sprite{width:94px;height:94px;margin:auto}.sample .robot{background-image:url('assets/robot-atlas-v01-half.png')}footer{display:flex;gap:22px;flex-wrap:wrap;padding:25px 0 40px;border-top:1px solid var(--line);font-size:11px}a{color:var(--teal)}@media(max-width:850px){main{padding:0 18px}.workbench{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid var(--teal)}.intro h1{font-size:32px}.intro>p{display:none}.brand small{display:none}.greenhouse{height:390px}.catalog-row{grid-template-columns:70px repeat(4,1fr)}.sample .sprite{width:65px;height:65px}.library-heading>span{font-size:10px}.soil{width:120px;height:120px}.plant{width:96px;height:96px;bottom:15px}.bot{width:110px;height:110px}.scene-top{padding:12px;font-size:10px}.climate{padding:12px 4px}.climate b{font-size:12px}.tag{font-size:10px}.library-heading h2{font-size:18px}}@media(prefers-reduced-motion:reduce){.bot{transition:none}}
/* 每格使用獨立取樣範圍，畫布保留完整種子、水流及採收物。 */
.sprite.robot,.sample .robot{background-image:none}
.robot canvas{display:block;width:100%;height:100%;image-rendering:pixelated}

[hidden]{display:none!important}
.held-item{position:absolute;left:45%;bottom:78%;width:42%;aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.held-item.lifting{left:57%;bottom:45%}
.produce-image{display:block;width:100%;height:auto;image-rendering:pixelated}
.carry-control{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px;font-size:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.carry-control button{background:var(--cream);border:1px solid var(--line);padding:7px;font-size:11px}
button:disabled,select:disabled,input:disabled{opacity:.45;cursor:not-allowed}
.produce-library{padding:20px 0 40px}
#produce-catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.produce-card{padding:22px 12px;text-align:center;border:1px solid var(--line);background:#e3e9d5}
.produce-card canvas{width:96px;height:96px;margin:auto}
.produce-card h3{font-size:15px;margin:14px 0 8px}
.produce-card p,.produce-card a{font-size:11px;line-height:1.6}
@media(max-width:600px){#produce-catalog{gap:7px}.produce-card{padding:16px 5px}.produce-card canvas{width:72px;height:72px}.produce-card p{font-size:10px}}

.bot{transition:none}
.turn-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.turn-buttons button{padding:9px 4px;background:#e3e9d5;border:1px solid var(--line);font-size:12px}
#forward{grid-column:1/-1}
.direction-note{font-size:10px;line-height:1.7;color:#607568}

/* v0.5：正方形畫布避免非等比壓縮；植株根部共用田面基準。 */
.aligned-plant{background-image:none!important}
.aligned-plant canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.plant{bottom:32px}
.held-item{left:50%;bottom:75%;width:42%}
.held-item.lifting{left:50%;bottom:43%}
@media(max-width:850px){.plant{bottom:28px}}

/* v0.6：持物與角色共用每格手掌座標。 */
.sample .robot{position:relative;overflow:visible}
.sample-cargo{position:absolute;width:42%;aspect-ratio:1;transform:translateX(-50%);pointer-events:none}


/* v0.7：土壤面填滿正方形田格，鄰格以直邊相接。 */
.plots{inset:90px 0 auto;width:min(84%,384px);height:auto;aspect-ratio:3/2;margin:0 auto}
.plot .soil{inset:0;width:100%;height:100%;transform:none}
.plot .plant{width:100%;height:100%;bottom:32%}
.plot.selected{outline:2px solid var(--cream);outline-offset:-3px;z-index:1}
.plot:after{display:none}
.tile-showcase{padding:36px 0;border-bottom:1px solid var(--line)}
.tile-showcase h2{margin-bottom:12px}
.tile-showcase>p{font-size:13px;line-height:1.8;color:#607568}
#tile-soils{max-width:400px;margin:20px 0}
.tile-arrangements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;--soil-x:33.333333%}
.tile-arrangement{margin:0;padding:18px;border:1px solid var(--line);background:#e3e9d5}
.soil-piece{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);aspect-ratio:1;width:100%;max-width:200px;margin:auto;background:linear-gradient(#c1cfb955 1px,transparent 1px),linear-gradient(90deg,#c1cfb955 1px,transparent 1px);background-size:25% 25%}
.soil-unit{width:100%;height:100%;background-position:var(--soil-x) 0}
.tile-arrangement figcaption{font-size:12px;margin-top:14px;text-align:center}
@media(max-width:700px){.tile-arrangements{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile-arrangement{padding:12px}}

/* 機器人在選取田格與植株上方顯示。 */
.bot{z-index:2}

/* v0.9：土壤與角落裝飾依 manifest 合成，保持作物圖層獨立。 */
.aligned-soil{background-image:none!important}.aligned-soil canvas{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.soil-variation-library{margin:48px 0}.soil-variation-library>p{color:var(--muted)}.soil-variation-row{display:grid;grid-template-columns:64px repeat(4,minmax(0,1fr));gap:12px;align-items:center;margin:18px 0}.soil-variation-row h3{font-size:14px}.soil-variant-card{padding:10px;background:#233c36;border:1px solid #486359;border-radius:12px;color:#f0e4bb;cursor:pointer}.soil-variant-card:hover,.soil-variant-card:focus-visible{outline:2px solid #d7a44b;outline-offset:2px}.variant-tile{position:relative!important;width:100%;height:auto;aspect-ratio:1;max-width:160px;margin:0 auto 8px}.soil-variant-card span{font-size:13px}
@media(max-width:600px){.soil-variation-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.soil-variation-row h3{grid-column:1/-1;margin:0}.soil-variant-card{padding:5px}.soil-variant-card span{font-size:11px}}

/* v0.10 掃描效果由 manifest.effectClips 決定位置、尺寸及圖層。 */
.field-effect{position:absolute;pointer-events:none;image-rendering:pixelated}.field-effect[hidden]{display:none}#actions{grid-template-columns:repeat(3,minmax(0,1fr))}.scan-library{margin:48px 0}.scan-library>p{line-height:1.8;color:var(--teal);font-size:14px}#scan-wave-samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}#scan-wave-samples figure{margin:0;text-align:center;border:1px solid var(--line);background:#35665b;border-radius:12px;padding:12px;color:var(--cream);font-size:12px}.scan-wave-sample{display:block;width:100%;height:auto;image-rendering:pixelated}@media(max-width:600px){#scan-wave-samples{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v0.11：八格頭頂雷達動作以兩列呈現。 */
.catalog-row.expanded-catalog{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.catalog-row.expanded-catalog>strong{grid-column:1/-1}.expanded-catalog .sample{min-width:0}

/* v0.13：想法泡泡的位置與播放規則來自 manifest.thoughtBubbles。 */
.thought-bubble{position:absolute;height:auto;pointer-events:none;image-rendering:pixelated}.thought-bubble[hidden]{display:none}.thought-library{margin:48px 0}.thought-library>p{font-size:14px;line-height:1.8;color:var(--teal)}#thought-samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}#thought-samples figure{margin:0;text-align:center;padding:12px;background:#35665b;border-radius:12px;color:var(--cream);font-size:12px}.thought-sample{display:block;width:100%;height:auto;max-width:150px;margin:auto;image-rendering:pixelated}@media(max-width:600px){#thought-samples{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 主畫面素材僅作展示，來源框、尺寸與文字範圍讀取 manifest。 */
.main-asset-library{margin:48px 0}.main-asset-library>p{color:var(--teal);font-size:14px;line-height:1.8}.main-sign-toggle{display:flex;align-items:center;gap:8px}.main-sign-toggle input{width:auto}#main-asset-samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.main-asset-card{padding:16px;border:1px solid var(--line);background:#e4ead7;min-width:0;text-align:center}.main-asset-card h3{font-size:14px;margin:0 0 14px}.main-asset-card p,.main-asset-card a{font-size:11px;line-height:1.7}.main-asset-image{display:block;image-rendering:pixelated;margin:auto;max-width:100%;height:auto}.main-asset-tile{grid-column:span 2}.main-asset-sign .main-asset-image{width:160px}.main-asset-tile .main-asset-image{width:auto}.main-asset-card:not(.main-asset-sign):not(.main-asset-tile) .main-asset-image{width:32px;height:32px;margin:36px auto}@media(max-width:600px){#main-asset-samples{grid-template-columns:repeat(2,minmax(0,1fr))}.main-asset-tile{grid-column:1/-1}}

/* 山谷預覽按 manifest 投影地面，直立素材由 groundY 排序。 */
.valley-library{margin:12px 0 32px}.valley-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.valley-heading h2{margin-bottom:14px}.valley-heading>span{font-size:12px;color:var(--teal);margin-bottom:18px}.valley-controls{display:flex;gap:16px;justify-content:space-between;margin:6px 0 14px}.valley-controls .choices{min-width:250px}.valley-controls #valley-views{grid-template-columns:repeat(2,1fr)}#valley-preview{display:block;width:100%;height:auto;image-rendering:pixelated;border:3px solid var(--teal);background:#cfe3d3}.lab-fold{margin:24px 0;border-top:1px solid var(--line)}.lab-fold>summary{padding:18px 0;color:var(--teal);font-size:14px;font-weight:600;cursor:pointer}.lab-fold .main-asset-library{margin-top:12px}@media(max-width:700px){.valley-heading{display:block}.valley-heading>span{display:block;margin-bottom:12px}.valley-controls{display:grid;gap:10px}.valley-controls .choices{min-width:0}}

.boundary-toggle{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 12px}.boundary-toggle input{width:auto}.boundary-library{margin:40px 0}.boundary-library>p{font-size:14px;line-height:1.8;color:var(--teal)}#boundary-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#boundary-samples figure{margin:0;border:1px solid var(--line);background:#e4ead7}#boundary-samples canvas{display:block;width:100%;height:auto;image-rendering:pixelated}#boundary-samples figcaption{padding:12px;font-size:12px;color:var(--teal)}@media(max-width:600px){#boundary-samples{grid-template-columns:1fr}}

/* v0.18：獨立的斜角場景與透明素材圖集檢視。 */
.angled-library{margin:20px 0 48px}.angled-controls{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0}.angled-controls label{display:flex;align-items:center;gap:8px;font-size:13px}.angled-controls input{width:auto}#angled-preview{display:block;width:100%;height:auto;border:3px solid var(--teal);image-rendering:pixelated}#angled-samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}#angled-samples figure{margin:0;padding:12px;border:1px solid var(--line);text-align:center;background:#dbe3d1;min-width:0}#angled-samples canvas{display:block;width:100%;height:auto;object-fit:contain;image-rendering:pixelated;background:#69965b;margin:12px auto}#angled-samples figcaption{font-size:14px;font-weight:600}#angled-samples p,#angled-samples a{font-size:11px;line-height:1.8}@media(max-width:700px){#angled-samples{grid-template-columns:repeat(2,minmax(0,1fr))}.angled-controls{gap:12px}}

/* Preserve the authored scene resolution; avoid enlarging pixel sprites on wide screens. */
#angled-preview{max-width:960px;margin-inline:auto;display:block}

.world-library{margin:40px 0 64px}.world-controls{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:20px 0}.world-controls label{display:flex;align-items:center;gap:8px;font-size:13px}.world-controls input{width:auto}.world-controls select{font:inherit;color:var(--teal);padding:8px;background:#f0e4bb;border:1px solid var(--teal)}#world-preview{width:100%;max-width:640px;height:auto;display:block;margin:16px auto;image-rendering:pixelated}.world-costs{border-collapse:collapse;width:100%;max-width:640px;margin:20px auto;font-size:13px}.world-costs th,.world-costs td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.world-costs caption{text-align:left;margin-bottom:10px}

.asset-review{margin:35px 0 55px}.asset-review>p{font-size:13px;line-height:1.9}.stuck-review{display:flex;align-items:center;gap:28px;max-width:680px}.stuck-review>canvas{width:256px;height:288px;image-rendering:pixelated;background:#dbe3d1;flex:0 0 256px}.stuck-review button,#compare-load{padding:10px 18px;background:#f0e4bb;border:1px solid var(--teal)}.compare-controls{display:flex;gap:20px}.compare-controls label{flex:1;min-width:0}.compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:600px}.compare-pair figure{margin:0;text-align:center}.compare-pair canvas{width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--teal)}.compare-pair figcaption{margin:10px;font-size:13px}@media(max-width:650px){.stuck-review{gap:12px}.stuck-review>canvas{width:160px;height:180px;flex-basis:160px}.compare-controls{display:block}}
