*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#f3f1e7;font-family:"Microsoft JhengHei","PingFang TC",sans-serif}
#farm{position:relative;width:100vw;height:100vh;height:100dvh;background:#f3f1e7}
canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
#loading{--load-progress:0%;position:absolute;inset:0;display:grid;place-items:safe center;padding:28px 24px;background:radial-gradient(ellipse at 50% 40%,#fbfbef 0,#f3f1e7 75%);color:#375542;overflow:auto;transition:opacity .28s ease}
#loading[hidden]{display:none}#loading.is-complete{opacity:0;pointer-events:none}
.loading-card{width:min(430px,100%);text-align:center;padding:32px 30px 26px;background:#fffef8;border:1px solid #e1e7d7;border-radius:28px;box-shadow:0 16px 60px #3654320c}
.loading-eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:4px;color:#7c8b76}
#loading-title{margin:0;font-size:28px;line-height:1.5;letter-spacing:2px;color:#244e39}
#loading-detail{min-height:48px;margin:9px 0 0;font-size:14px;line-height:1.7;color:#6b8064;text-wrap:pretty}
.loading-track{position:relative;margin:65px 4px 12px}
#progress{appearance:none;-webkit-appearance:none;display:block;border:0;border-radius:20px;overflow:hidden;width:100%;height:13px;background:#e7ebdd;box-shadow:inset 0 2px 3px #36543210}
#progress::-webkit-progress-bar{background:#e7ebdd;border-radius:20px}
#progress::-webkit-progress-value{background:linear-gradient(90deg,#83ad69,#4f8257);border-radius:20px;transition:width .22s ease}
#progress::-moz-progress-bar{background:linear-gradient(90deg,#83ad69,#4f8257);border-radius:20px}
.loading-chick{position:absolute;left:var(--load-progress);bottom:10px;width:64px;height:64px;transform:translateX(-50%);transition:left .24s ease;pointer-events:none}
.chick-shadow{position:absolute;bottom:0;left:14px;width:38px;height:7px;background:#436e3a20;border-radius:50%;animation:chick-shadow .6s ease-in-out infinite}
.loading-chick svg{display:block;position:relative;width:64px;height:64px;animation:chick-hop .6s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 2px 1px #8b722518)}
.chick-wing{transform-origin:33px 39px;animation:chick-wing .6s ease-in-out infinite}
.loading-metrics{display:flex;align-items:center;justify-content:space-between;margin:0 4px 19px;color:#78906e;font-size:12px}
#loading-percent{font-size:18px;font-weight:700;color:#497858;font-variant-numeric:tabular-nums}
.loading-items{list-style:none;margin:0;padding:14px 16px;background:#f5f7ee;border-radius:16px;text-align:left;display:grid;gap:12px}
.load-item{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#8a9680}
.item-name{display:flex;align-items:center;gap:8px;white-space:nowrap}.item-dot{display:inline-block;width:8px;height:8px;border:1px solid #a8b49a;border-radius:50%;flex:none}
.item-status{text-align:right;font-size:11px;font-variant-numeric:tabular-nums;line-height:1.5}
.load-item[data-state=active]{color:#3f714a}.load-item[data-state=active] .item-dot{background:#82a96c;border-color:#82a96c;box-shadow:0 0 0 3px #82a96c18}
.load-item[data-state=done]{color:#638059}.load-item[data-state=done] .item-dot{border:0;background:#6b9860;position:relative}
.load-item[data-state=done] .item-dot:after{content:"";position:absolute;left:2px;top:1px;width:3px;height:4px;border:solid #fff;border-width:0 1px 1px 0;transform:rotate(40deg)}
.loading-note{margin:17px 0 0;font-size:11px;line-height:1.7;color:#95a08b}
#error{position:absolute;inset:0;display:grid;place-items:center;padding:28px;background:#f3f1e7;color:#375542;text-align:center;overflow:auto}#error[hidden]{display:none}
.error-card{width:min(420px,100%);padding:32px 24px;border-radius:24px;background:#fffef8;border:1px solid #dee3d5}.error-card h2{margin:0 0 12px;font-size:23px}.error-card p{line-height:1.8;font-size:14px;color:#7c8b76}.error-card button{border:0;border-radius:13px;background:#497858;color:#fff;font:inherit;padding:14px 38px;cursor:pointer;min-height:48px}.error-card details{margin-top:18px;font-size:12px;color:#8a9680}.error-card pre{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;font:inherit}
@keyframes chick-hop{0%,100%{transform:translateY(0) rotate(-3deg)}45%{transform:translateY(-8px) rotate(3deg)}75%{transform:translateY(-1px) scaleY(.97)}}
@keyframes chick-shadow{0%,100%{transform:scaleX(1);opacity:.8}45%{transform:scaleX(.7);opacity:.4}}
@keyframes chick-wing{0%,100%{transform:rotate(-8deg)}45%{transform:rotate(17deg)}}
@media(max-width:420px){#loading{padding:18px}.loading-card{padding:26px 22px 22px;border-radius:24px}#loading-title{font-size:25px}.load-item{font-size:12px;gap:8px}.loading-items{padding:14px 12px}.item-status{font-size:10px}.loading-note{font-size:11px}}
@media(max-height:560px){.loading-card{padding:16px 24px}.loading-eyebrow{margin-bottom:4px}#loading-title{font-size:22px}#loading-detail{min-height:24px;margin-top:3px;font-size:12px}.loading-track{margin-top:47px}.loading-items{gap:6px;padding:10px 14px}.loading-metrics{margin-bottom:10px}.loading-note{margin-top:9px}}
@media(max-height:500px){#loading{padding:14px 24px}.loading-card{width:min(620px,100%);padding:14px 24px}.loading-eyebrow,.loading-note{display:none}.loading-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px}.load-item{display:block;text-align:center}.item-name{display:block;white-space:normal;font-size:11px}.item-dot{margin-right:5px}.item-status{display:block;margin-top:5px;font-size:10px;text-align:center}.loading-track{margin-top:43px}.loading-metrics{font-size:11px}}
@media(prefers-reduced-motion:reduce){.loading-chick svg,.chick-shadow,.chick-wing{animation:none}#loading,.loading-chick,#progress::-webkit-progress-value{transition:none}}
