:root{font-family:Arial,Helvetica,sans-serif;color:#344c3d;background:#cbd9bd;font-synthesis:none;--pine:#075337;--paper:#faf8ef;--sage:#87aa72}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
[hidden]{display:none!important}
canvas{display:block;width:100vw;height:100vh;touch-action:none}
button,select,summary{font:inherit}
button,summary{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--pine);outline-offset:4px}
header{position:absolute;top:28px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;gap:20px}
.brand{color:var(--pine);flex-shrink:0}
.brand .brand-title{margin:0;line-height:0}
.brand-logo{display:block;width:240px;height:auto}
header{align-items:flex-start}
@media(max-width:850px){.brand-logo{width:210px}}
@media(max-width:600px){.brand-logo{width:clamp(140px,43vw,190px)}}
.status{font-size:12px;background:#f8f6e8d9;border:1px solid #ffffff80;border-radius:30px;padding:14px 20px;box-shadow:0 4px 20px #3e5f3110;white-space:nowrap}
.sun{color:#b88d43;font-size:18px;margin-right:8px}.divider{padding:0 12px;opacity:.3}
.eyebrow,label{font-size:9px;font-weight:600;letter-spacing:1.8px;color:#6a7b61}
#toast{position:absolute;top:112px;left:50%;transform:translateX(-50%);max-width:min(560px,90vw);background:var(--paper);padding:14px 24px;border-radius:18px;font-size:12px;box-shadow:0 6px 30px #40523120;opacity:0;transition:opacity .3s;pointer-events:none;z-index:5}
#toast.show{opacity:1}
.dock{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:min(830px,calc(100vw - 40px));pointer-events:none;z-index:3}
.dock-shell{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:bottom center;transition:grid-template-rows .32s ease,opacity .22s ease,transform .32s ease,visibility .32s}
.dock[data-open="true"] .dock-shell{grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.dock-clip{min-height:0;overflow:hidden;padding:0 6px}
.dock-panel{max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;background:#faf8eff5;border:1px solid #ffffffe0;border-radius:22px;padding:21px 24px;box-shadow:0 8px 25px #334b331c;scrollbar-width:thin;scrollbar-color:#a5b798 transparent}
.dock-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.dock-heading h2{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:6px 0 0}
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #d8e1cd;background:#edf0e4;border-radius:10px;color:#496440;padding:10px 13px;font-size:11px;white-space:nowrap}
.secondary:hover:not(:disabled),.secondary[aria-expanded="true"]{background:#dfe8d3;border-color:#b7cba6}
#discovery-count{font-size:10px;color:#79896d}
.tasks-panel{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:18px;margin-bottom:20px;background:#ecf0e1;border:1px solid #dce4cf;border-radius:14px}
.progress-title{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-top:12px}
.track{height:5px;background:#d5dfc8;margin-top:12px;border-radius:4px;overflow:hidden}
#progress{height:100%;background:#718653;transition:width .5s}
.progress-card p{font-size:11px;line-height:1.7;color:#697d5c;margin-bottom:0}
#journal{font-size:11px;line-height:2.1;margin-top:6px;color:#647956}
.palette{display:flex;align-items:center;gap:22px}
.tool-group{flex:1}.tools{display:flex;gap:5px;margin-top:8px}
.tool{border:0;border-radius:10px;background:transparent;padding:9px 10px;color:#63725c;font-size:10px;position:relative;flex:1;min-width:60px}
.tool>span{display:block;font-size:25px;line-height:30px}
.tool.active{background:#e3e9d8;color:#3c573b;box-shadow:inset 0 0 0 1px #c3d1b4}.tool:hover{background:#e9eddf}
kbd{font-family:inherit;font-size:9px;color:#8b987c}.tool kbd{position:absolute;right:7px;top:5px}
.material-group{border-left:1px solid #dee3d5;padding-left:22px;display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:center}
label{font-size:8px;letter-spacing:1.5px}
select{border:1px solid #dce2d2;background:#f9f9f0;padding:9px;border-radius:7px;color:#4b6047;font-size:11px;width:174px;max-width:100%}
.dock-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-top:1px solid #e1e6d8;margin-top:19px;padding-top:13px}
.help{font-size:11px;color:#6a7d61;flex:1}.help summary{padding:10px 0;width:fit-content}.help-content{line-height:1.7;max-width:590px}.help-content p{margin:8px 0}
.dock-launcher{display:flex;flex-direction:column;align-items:center;margin-top:12px;gap:7px}
.logo-toggle{position:relative;display:flex;align-items:center;justify-content:center;width:76px;height:68px;padding:8px 12px 14px;background:var(--paper);border:1px solid #ffffffd9;border-radius:23px;box-shadow:0 5px 24px #25432726;pointer-events:auto;transition:background .25s,border-radius .3s,box-shadow .3s,transform .2s}
.logo-toggle:hover{transform:translateY(-3px);box-shadow:0 8px 28px #25432732}.logo-toggle:active{transform:scale(.94)}
.logo-toggle img{display:block;width:48px;height:48px;object-fit:contain;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.dock-chevron{position:absolute;bottom:7px;width:6px;height:6px;border-top:1.5px solid #6c895b;border-left:1.5px solid #6c895b;transform:rotate(45deg);transition:transform .3s}
.dock[data-open="true"] .logo-toggle{background:#e5eddc;border-radius:20px;border-color:#b7cba6}
.dock[data-open="true"] .logo-toggle img{transform:translateY(-2px) scale(.9)}
.dock[data-open="true"] .dock-chevron{transform:rotate(225deg)}
.logo-toggle.animating img{animation:logo-bob .42s ease}
.logo-toggle::after{content:"";position:absolute;inset:0;border:2px solid #8fab78;border-radius:inherit;opacity:0;pointer-events:none}
.logo-toggle.animating::after{animation:water-ripple .45s ease-out}
.dock-caption{font-size:10px;letter-spacing:.5px;color:#4a6544;text-shadow:0 1px 5px #e6eddc;pointer-events:none}.dock-caption kbd{margin-left:4px;padding:1px 4px;border:1px solid #aab99a;border-radius:4px;color:#647b56}
@keyframes logo-bob{0%,100%{translate:0 0}45%{translate:0 -5px}}
@keyframes water-ripple{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.27);opacity:0}}
@media(max-width:850px){header{left:24px;right:24px;top:22px}.brand-mark{width:56px;height:56px}.brand h1{font-size:29px}.brand p{font-size:9px;letter-spacing:0}.brand{gap:7px}.status{font-size:10px;padding:12px}.status .divider{padding:0 4px}.dock-panel{padding:18px}.palette{gap:12px}.tool{min-width:50px;padding:8px 5px}.material-group{padding-left:12px;grid-template-columns:1fr;gap:6px}.material-group label{display:none}select{width:160px}.dock-heading h2{font-size:21px}}
@media(max-width:600px){header{align-items:flex-start;left:16px;right:16px}.status{max-width:130px;text-align:center;white-space:normal}.status .divider{display:none}.status #population{display:block;margin-top:4px}.brand p{max-width:150px;line-height:1.5}.brand h1{font-size:26px}.brand-mark{width:44px;height:44px}.dock{width:calc(100vw - 16px);bottom:12px}.dock-panel{padding:15px;max-height:calc(100dvh - 195px)}.palette{flex-direction:column;align-items:stretch}.material-group{border-left:0;border-top:1px solid #dee3d5;padding:12px 0 0;grid-template-columns:45px 1fr}.material-group label{display:block}select{width:100%}.tasks-panel{grid-template-columns:1fr;gap:15px;padding:14px}.dock-heading h2{font-size:18px}.dock-heading .eyebrow{font-size:8px;letter-spacing:1px}.secondary{padding:9px;font-size:10px}.logo-toggle{width:68px;height:62px}.logo-toggle img{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.water-options{border-left:1px solid #dee3d5;padding-left:18px;width:256px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}.water-options select{width:100%}.water-options p{font-size:10px;line-height:1.5;margin:0;color:#557870}.water-options .water-growth{font-size:9px;color:#758576}.tool[data-tool="water"].active{background:#deeddf;box-shadow:inset 0 0 0 1px #9ebdb4;color:#397f7f}.dock{width:min(900px,calc(100vw - 40px))}@media(max-width:850px){.palette{flex-wrap:wrap}.tool-group{min-width:340px}.water-options{width:100%;border-left:0;border-top:1px solid #dee3d5;padding:12px 0 0}.water-options select{max-width:300px}}@media(max-width:600px){.dock{width:calc(100vw - 16px)}.tool-group{min-width:0}.tools{gap:2px}.tool{min-width:0}.material-group{width:100%}}

/* Compact dock: keep the main actions close and the village in view. */
.dock{width:min(720px,calc(100vw - 28px));bottom:12px}
.dock-panel{padding:12px 16px;border-radius:17px}
.dock-heading{margin-bottom:10px;gap:12px}
.dock-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:600;letter-spacing:.2px;margin:0}
.dock-actions{display:flex;gap:6px}.secondary{padding:7px 9px;font-size:10px;border-radius:8px}
.palette{gap:12px;flex-wrap:nowrap}.tool-group{min-width:0}.tool-group>.eyebrow{display:none}
.tools{margin-top:0;gap:3px}.tool{min-width:43px;padding:6px 5px;font-size:9px;border-radius:8px}.tool>span{font-size:23px;line-height:26px}.tool kbd{font-size:8px;right:5px;top:3px}
.material-group{padding-left:12px;grid-template-columns:39px 1fr;gap:7px}.material-group label{display:block;font-size:7px;letter-spacing:1px}select{width:150px;padding:7px;font-size:10px}
.water-options{width:218px;padding-left:12px;gap:5px;border-left:1px solid #dee3d5;border-top:0}.water-options label{font-size:7px;letter-spacing:1px}.water-options p{font-size:9px}.water-options .water-growth{font-size:8px}
.dock-bottom{margin-top:8px;padding-top:4px}.help{font-size:10px}.help summary{padding:5px 0}.help-content{max-width:none}
.tasks-panel{padding:12px;gap:15px;margin-bottom:12px}.progress-title{font-size:11px;margin-top:8px}.progress-card p{font-size:10px}#journal{font-size:10px}
.dock-launcher{margin-top:8px;gap:4px}.logo-toggle{width:62px;height:56px;border-radius:18px;padding:5px 10px 11px}.logo-toggle img{width:40px;height:40px}.dock-caption{font-size:9px}
@media(max-width:600px){.dock-panel{padding:11px 12px}.palette{flex-direction:column;gap:9px;align-items:stretch}.tools{gap:4px}.tool{min-width:0;min-height:44px}.material-group{border-left:0;border-top:1px solid #dee3d5;padding:9px 0 0;grid-template-columns:36px 1fr 32px 1fr;gap:6px}.material-group select{width:100%;min-width:0}.water-options{width:100%;border-left:0;border-top:1px solid #dee3d5;padding:9px 0 0;display:grid;grid-template-columns:1fr 1fr;align-items:center}.water-options select{width:100%}.water-options p{grid-column:1/-1}.water-options .water-growth{display:none}.dock-heading h2{font-size:12px}.logo-toggle img{width:40px;height:40px}}

.tools{flex-wrap:wrap}.tool-group{min-width:210px}.palette{flex-wrap:wrap}#role-options{max-width:100%}
@media(max-width:600px){.tool-group{width:100%;min-width:0}.tools{display:grid;grid-template-columns:repeat(4,1fr)}}