.zworld{border:1px solid #716744;border-radius:20px;overflow:hidden;background:#253921;box-shadow:0 20px 65px #0005}
.zworld-resources{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:#1a231c;border:1px solid #716744;border-radius:12px;padding:16px 20px;margin-bottom:16px;color:#f6e8bd}.zworld-resources strong{font-size:22px}.zworld-resources small{margin-left:auto;color:#c1cfb9}.zworld-rule{color:#b6c2af;line-height:1.7;font-size:13px;margin:16px 0}.zworld-site{position:absolute;width:16%;height:21%;transform:translate(-50%,-70%)}.zworld-site-button{position:relative;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:pointer;color:#fff3ce;font:inherit;display:flex;align-items:center;justify-content:center}.zworld-site-button>img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #0003);transition:transform .15s}.zworld-site-button:hover>img{transform:translateY(-4px)}.zworld-site-button:focus-visible{outline:3px solid #fff1a2;outline-offset:4px;border-radius:12px}.zworld-plus{display:grid;place-items:center;border:2px dashed #fff0b7;background:#413d2490;border-radius:50%;height:45%;width:70%;font-size:clamp(22px,4vw,44px)}.zworld-site-label{position:absolute;top:88%;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;border:1px solid #b9a66c99;background:#152316ed;border-radius:6px;padding:5px 8px;font-size:clamp(9px,1vw,13px);line-height:1.25;box-shadow:0 3px 8px #0005}.zworld-site-label small{display:block;font-size:10px;color:#d8cfa9;margin-top:3px}.zworld-site-button.building .zworld-site-label{border-color:#efc36c}.zworld-dialog-head{display:flex;gap:20px;align-items:center}.zworld-dialog-head img{width:43%;max-height:230px;object-fit:contain;background:radial-gradient(ellipse,#3c5138,transparent 70%)}.zworld-costs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.zworld-costs>div{border:1px solid #596646;border-radius:9px;padding:14px 10px}.zworld-costs small{display:block;margin-top:7px;color:#aeb9aa}.zworld-costs .missing{border-color:#c76c63;color:#ffc2b8}.zworld-construction{padding:20px;background:#263421;border:1px solid #637449;border-radius:12px;margin:18px 0}.zworld-construction progress{width:100%;height:12px;accent-color:#d4b768;display:block;margin:14px 0}.zworld-construction small{color:#c1ceba}.zworld-active .zworld-map{overflow:visible}
@media(max-width:650px){.zworld-active{overflow:auto}.zworld-active .zworld-map{min-width:650px}.zworld-resources{gap:12px;padding:12px}.zworld-resources small{width:100%;margin:0}.zworld-resources strong{font-size:18px}.zworld-costs{gap:7px}.zworld-costs>div{padding:10px 6px;font-size:12px}.zworld-dialog-head{gap:10px}}
.zworld-map{position:relative;isolation:isolate;aspect-ratio:3/2;min-width:0}
.zworld-lighting{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit}
.zworld-night,.zworld-dusk{position:absolute;inset:0;pointer-events:none}
.zworld-night{background:linear-gradient(145deg,#172546,#06122b 65%,#122342);opacity:var(--zworld-night,0)}
.zworld-dusk{background:linear-gradient(115deg,#ffb65c,#e7847044 65%,#6d508277);opacity:var(--zworld-dusk,0)}
.zworld-lamps{position:absolute;inset:0;opacity:var(--zworld-lamps,0);pointer-events:none}
.zworld-lamp{position:absolute;width:8%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#fff4bddd 0%,#ffc96699 8%,#f3a33b55 25%,#ed93351c 48%,transparent 70%);mix-blend-mode:screen;animation:zworld-lamp-flicker 2.7s linear infinite;pointer-events:none}
.zworld-lamp:nth-child(2n){animation-duration:3.3s;animation-delay:-1.1s}.zworld-lamp:nth-child(3n){animation-duration:2.3s;animation-delay:-.7s}
@keyframes zworld-lamp-flicker{0%,100%{opacity:.85}13%{opacity:.72}19%{opacity:.94}32%{opacity:.81}46%{opacity:1}53%{opacity:.79}68%{opacity:.92}81%{opacity:.74}88%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.zworld-lamp{animation:none}}
.zworld-worldtime{position:absolute;right:12px;bottom:12px;z-index:4;pointer-events:none;padding:7px 11px;border:1px solid #c5ccbe55;border-radius:8px;background:#14201cdb;color:#f2e9cb;font-size:clamp(10px,1.2vw,13px);font-variant-numeric:tabular-nums;box-shadow:0 2px 8px #0003}
.zworld-landscape{display:block;width:100%;height:100%;object-fit:cover}
.zworld-plots{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.zworld-plot{position:absolute;transform:translate(-50%,-50%);width:11%;aspect-ratio:1.5;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed #fff2bcb3;border-radius:50%;background:#e1da9d1a;box-shadow:inset 0 0 20px #fff2ae1a;color:#fff6d2;text-shadow:0 2px 4px #263420;pointer-events:none}
.zworld-plot>span{font-size:clamp(18px,3vw,40px);line-height:1}
.zworld-plot small{font-size:clamp(6px,.65vw,10px);letter-spacing:.12em;margin-top:3px;white-space:nowrap}
.zworld-plot-1{left:24%;top:21%}.zworld-plot-2{left:49%;top:15%}.zworld-plot-3{left:73%;top:25%}.zworld-plot-4{left:20%;top:47%}.zworld-plot-5{left:79%;top:53%}.zworld-plot-6{left:35%;top:74%}.zworld-plot-7{left:63%;top:76%}
.zworld-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,#08180e44 100%);box-shadow:inset 0 0 70px #13211388}
.zworld-notice{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(380px,46%);padding:clamp(14px,2.5vw,32px);text-align:center;background:linear-gradient(150deg,#17261af5,#111b17f5);border:1px solid #c1b27899;border-radius:16px;box-shadow:0 18px 65px #07130999,inset 0 0 0 5px #decf8e08;backdrop-filter:blur(8px)}
.zworld-emblem{display:block;color:#dac78d;font-size:32px;line-height:1;margin-bottom:12px}.zworld-notice .eyebrow{color:#cfbe84;letter-spacing:.24em;font-size:10px}.zworld-notice h2{font-size:clamp(19px,2.5vw,30px);font-family:Georgia,serif;font-weight:normal;color:#fff4d3;margin:10px 0 12px}.zworld-notice p{font-size:12px;line-height:1.8;color:#bec8b5;margin:0}.zworld-soon{display:block;margin-top:20px;padding-top:15px;border-top:1px solid #d5c58b26;font-size:10px;color:#cbd8b5}.zworld-soon>span{color:#b9f57a;font-size:7px;margin-right:5px}.zworld-map-label{position:absolute;bottom:20px;left:24px;color:#fff4ce;font-family:Georgia,serif;font-size:19px;letter-spacing:.15em;text-shadow:0 2px 6px #000}.zworld-map-label span{display:block;font:10px sans-serif;letter-spacing:.04em;margin-top:5px;color:#eef0d8}
@media(max-width:650px){.zworld{border-radius:14px}.zworld-notice{width:47%;padding:12px 8px;border-radius:10px}.zworld-emblem{font-size:22px;margin-bottom:5px}.zworld-notice .eyebrow{font-size:8px}.zworld-notice h2{font-size:17px;margin:7px 0}.zworld-notice p{font-size:9px;line-height:1.5}.zworld-soon{display:none}.zworld-map-label{display:none}.zworld-plot small{font-size:6px}}
@media(max-width:650px){.zworld-notice p{display:none}}

.zg-panel{border:1px solid #617642;border-radius:12px;padding:18px;margin:18px 0;background:#20301b}.zg-panel label{display:block;margin:12px 0}.zg-panel select,.zg-panel input{display:block;width:100%;margin-top:6px;padding:10px;background:#161d15;color:#f2efda;border:1px solid #687550;border-radius:7px}.zg-panel h3{margin-top:0}.zg-offer{margin:12px 0}.zg-offer small{display:block;color:#e5bf9a;margin-top:8px}.zg-buttons,.zg-stock{display:flex;flex-wrap:wrap;gap:8px}.zg-stock span{padding:8px 12px;border:1px solid #536343;border-radius:6px}.zg-overview{margin-top:20px}.zg-overview p{line-height:1.7}.zg-overview code{color:#d6e9a4}.zg-panel p{line-height:1.6}

/* Decorative inhabitants never intercept plot clicks. All movement is local to the map. */
.zworld-residents{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.zworld-resident{position:absolute;left:var(--x0);top:var(--y0);width:3.2%;max-width:36px;min-width:18px;aspect-ratio:1;animation:zworld-roam var(--walk-time) linear var(--walk-delay) infinite;transform:translate(-50%,-85%)}
.zworld-resident-shadow{position:absolute;left:27%;bottom:3%;width:46%;height:12%;border-radius:50%;background:#18251155;filter:blur(1px)}
.zworld-resident-facing{display:block;width:100%;height:100%;animation:zworld-face var(--walk-time) steps(1,end) var(--walk-delay) infinite}
.zworld-resident img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px #172a2266);animation:zworld-step .48s ease-in-out var(--step-delay) infinite}
@keyframes zworld-roam{0%,100%{left:var(--x0);top:var(--y0)}25%{left:var(--x1);top:var(--y1)}50%{left:var(--x2);top:var(--y2)}75%{left:var(--x3);top:var(--y3)}}
@keyframes zworld-face{0%,100%{transform:scaleX(var(--f0))}25%{transform:scaleX(var(--f1))}50%{transform:scaleX(var(--f2))}75%{transform:scaleX(var(--f3))}}
@keyframes zworld-step{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.zworld-resident,.zworld-resident-facing,.zworld-resident img{animation:none}}

.zg-task-list{display:grid;gap:12px;margin:16px 0 26px}.zg-task{position:relative;isolation:isolate;overflow:hidden;border:1px solid #67894b;border-radius:12px;background:linear-gradient(110deg,#18251b,#111b17);box-shadow:inset 0 1px 0 #ffffff09,0 4px 12px #0002;min-height:76px}.zg-task-fill{position:absolute;inset:0 auto 0 0;width:var(--task-progress);background:linear-gradient(100deg,#3e652cbf,#719e3eaa);border-right:1px solid #c4ed8599;transition:width 1s linear;z-index:-1}.zg-task-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,transparent,#e2ffc70c);box-shadow:inset 0 1px #e2ffc71a}.zg-task-content{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;min-height:76px;box-sizing:border-box}.zg-task-description{text-align:left;min-width:0}.zg-task strong{display:block;color:#f5f5df;font-size:14px;line-height:1.4;text-shadow:0 1px 3px #0009}.zg-task small{display:block;color:#d0dcc4;font-size:11px;line-height:1.5;margin-top:4px}.zg-task-status{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}.zg-task-status strong{color:#e6f5bd}.zg-task.is-paused{border-color:#a58848}.zg-task.is-paused .zg-task-fill{background:repeating-linear-gradient(135deg,#84612877 0 9px,#6e542a55 9px 18px);border-right-color:#dbbb7177}.zg-task.is-paused .zg-task-status strong{color:#f1d48e}@media(max-width:500px){.zg-task-content{padding:12px;gap:10px}.zg-task strong{font-size:12px}.zg-task small{font-size:10px}.zg-task-status{max-width:42%}}@media(prefers-reduced-motion:reduce){.zg-task-fill{transition:none}}

/* Per-building artwork alignment on the village map. */
.zworld-plot-2 .zworld-site-button>img{position:relative;left:20px}
.zworld-plot-3 .zworld-site-button>img{position:relative;left:20px;top:-30px}
.zworld-plot-7 .zworld-site-button>img{position:relative;left:20px}
.zworld-plot-4 .zworld-site-button>img{position:relative;left:2px;top:20px}

.zworld-plot-6 .zworld-site-button>img{position:relative;left:-27px;top:5px}

.zworld-plot-5 .zworld-site-button>img{position:relative;top:-15px}

.zworld-plot-1 .zworld-site-button>img{position:relative;left:2px}

/* Decorative weather: clipped to the map, click-through, synced cloud/shadow paths. */
.zworld-weather{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.zworld-weather-shadows{z-index:0}.zworld-active .zworld-residents,.zworld-active .zworld-plots{z-index:1}.zworld-weather-clouds{z-index:2}
.zworld-cloud-track{position:absolute;inset:0;animation:zworld-cloud-drift 180s linear infinite;animation-delay:var(--cloud-delay,0s);opacity:0;will-change:transform,opacity}
.zworld-cloud-track-1{animation-duration:233s}
.zworld-cloud-shape{position:absolute;left:0;top:18%;width:27%;height:18%;filter:blur(7px);background:radial-gradient(ellipse at 29% 62%,#fffdf1a6 0 15%,transparent 44%),radial-gradient(ellipse at 49% 38%,#fffdf1bd 0 18%,transparent 49%),radial-gradient(ellipse at 72% 57%,#f7f5e8a1 0 17%,transparent 45%),radial-gradient(ellipse at 51% 65%,#e7eddf8c 0 22%,transparent 60%)}
.zworld-cloud-track-1 .zworld-cloud-shape{top:53%;width:22%;height:15%}
.zworld-weather-shadows .zworld-cloud-shape{margin-left:4%;margin-top:6%;filter:blur(14px);background:radial-gradient(ellipse at 30% 60%,#14231c38 0 18%,transparent 49%),radial-gradient(ellipse at 52% 42%,#14231c42 0 23%,transparent 58%),radial-gradient(ellipse at 74% 59%,#14231c30 0 17%,transparent 46%)}
@keyframes zworld-cloud-drift{0%{transform:translate(-32%,-3%);opacity:0}5%{opacity:.8}48%{opacity:.8}55%,100%{transform:translate(110%,5%);opacity:0}}
@media(prefers-reduced-motion:reduce){.zworld-weather{display:none}.zworld-cloud-track{animation:none;will-change:auto}}

/* Narrow water overlays stay inside painted streams; no full-map distortion. */
.zworld-water-effects{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}
.zworld-water-flow path{fill:none;stroke:#c5fff5;stroke-linecap:round;stroke-dasharray:1 29 8 46;opacity:.19;animation:zworld-current var(--water-time,14s) linear infinite;animation-delay:var(--water-delay,0s)}
.zworld-water-falls path{fill:none;stroke:#efffff;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 15 3 12;opacity:.35;animation:zworld-falling-water var(--water-time,2.5s) linear infinite;animation-delay:var(--water-delay,0s)}
.zworld-water-ripples ellipse{fill:none;stroke:#e0fff5;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:zworld-ripple var(--water-time,6s) ease-out infinite;animation-delay:var(--water-delay,0s)}
.zworld-water-mist ellipse{fill:#edfffa;filter:blur(5px);transform-box:fill-box;transform-origin:center;animation:zworld-mist var(--water-time,8s) ease-in-out infinite;animation-delay:var(--water-delay,0s)}
.zworld-pollen circle{fill:#fff5b5;animation:zworld-pollen var(--water-time,15s) ease-in-out infinite;animation-delay:var(--water-delay,0s)}
@keyframes zworld-current{to{stroke-dashoffset:-168}}
@keyframes zworld-falling-water{to{stroke-dashoffset:-74}}
@keyframes zworld-ripple{0%{transform:scale(.6);opacity:0}25%{opacity:.35}100%{transform:scale(1.15);opacity:0}}
@keyframes zworld-mist{0%,100%{opacity:.08;transform:translateY(1px) scale(.85)}50%{opacity:.25;transform:translateY(-4px) scale(1.1)}}
@keyframes zworld-pollen{0%,100%{transform:translate(0,0);opacity:0}25%{opacity:.55}65%{opacity:.35}90%{transform:translate(13px,-20px);opacity:0}}
@media(prefers-reduced-motion:reduce){.zworld-water-effects{display:none}.zworld-water-effects *{animation:none!important}}

/* A few small wildlife accents, anchored to landscape coordinates. */
.zworld-wildlife{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:2}
.zworld-butterfly{animation:zworld-butterfly-flight var(--water-time,22s) ease-in-out infinite;animation-delay:var(--water-delay,0s)}
.zworld-butterfly-wings{fill:#f3c572;stroke:#997055;stroke-width:.7;animation:zworld-wingbeat .42s ease-in-out infinite}
.zworld-butterfly-1 .zworld-butterfly-wings{fill:#bfadf0;stroke:#7b729c;animation-duration:.36s}
.zworld-dragonfly{animation:zworld-dragonfly-flight var(--water-time,21s) linear infinite;animation-delay:var(--water-delay,0s)}
.zworld-dragonfly-1{animation-name:zworld-dragonfly-middle}.zworld-dragonfly-2{animation-name:zworld-dragonfly-lower}
.zworld-dragonfly-wings{fill:#e8fff9;opacity:.65;animation:zworld-wingbeat .13s linear infinite}
.zworld-wind-leaf{animation:zworld-leaf-drift var(--water-time,35s) ease-in-out infinite;animation-delay:var(--water-delay,0s)}
.zworld-bird-flock{animation:zworld-birds-pass var(--water-time,157s) linear infinite;animation-delay:var(--water-delay,0s);opacity:0}
.zworld-bird{fill:none;stroke:#354843;stroke-width:2.5;stroke-linecap:round;animation:zworld-bird-wings 1.3s ease-in-out infinite}
@keyframes zworld-butterfly-flight{0%,100%{transform:translate(0,0) rotate(-12deg)}25%{transform:translate(23px,-13px) rotate(18deg)}55%{transform:translate(10px,-32px) rotate(-15deg)}80%{transform:translate(-15px,-9px) rotate(12deg)}}
@keyframes zworld-wingbeat{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.25)}}
@keyframes zworld-dragonfly-flight{0%,14%,100%{transform:translate(0,0)}17%,29%{transform:translate(-7px,25px)}33%,47%{transform:translate(-34px,53px)}50%,64%{transform:translate(-50px,71px)}68%,80%{transform:translate(-24px,39px)}84%,94%{transform:translate(-4px,14px)}}
@keyframes zworld-dragonfly-middle{0%,14%,100%{transform:translate(0,0)}18%,31%{transform:translate(13px,14px)}34%,49%{transform:translate(16px,36px)}53%,66%{transform:translate(30px,57px)}69%,82%{transform:translate(15px,32px)}86%,95%{transform:translate(10px,10px)}}
@keyframes zworld-dragonfly-lower{0%,12%,100%{transform:translate(0,0)}16%,29%{transform:translate(-10px,24px)}33%,48%{transform:translate(5px,49px)}52%,64%{transform:translate(-4px,76px)}68%,79%{transform:translate(-26px,92px)}82%,91%{transform:translate(0px,55px)}95%{transform:translate(-7px,24px)}}
@keyframes zworld-leaf-drift{0%{transform:translate(0,0) rotate(0deg);opacity:0}12%{opacity:.7}55%{transform:translate(35px,34px) rotate(140deg);opacity:.5}72%,100%{transform:translate(55px,55px) rotate(220deg);opacity:0}}
@keyframes zworld-birds-pass{0%{transform:translate(-90px,160px);opacity:0}3%{opacity:.6}30%{opacity:.6}34%,100%{transform:translate(1650px,430px);opacity:0}}
@keyframes zworld-bird-wings{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.35)}}
@media(prefers-reduced-motion:reduce){.zworld-wildlife{display:none}.zworld-wildlife *{animation:none!important}}

.zg-task-resume{padding:7px 12px;font-size:12px;white-space:nowrap}.zg-task-resume:disabled{opacity:.55;cursor:not-allowed}