:root{--panel:#241a11e0;--panel-edge:#e2b66252;--ink:#f3e8cf;--muted:#c4ae88;--gold:#e5b552;--gold-soft:#e5b5522e;--danger:#d9553f;--ok:#7fd08a;--font:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;background:#a8cde6;margin:0;font-size:14px;overflow:hidden}#app{position:fixed;inset:0}#app canvas{touch-action:none;-webkit-touch-callout:none;display:block}button{font:inherit;color:inherit;cursor:pointer}.panel{background:var(--panel);border:1px solid var(--panel-edge);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:10px;box-shadow:0 6px 24px #140c0459}.hidden{display:none!important}#topbar{pointer-events:none;align-items:stretch;gap:10px;display:flex;position:fixed;top:12px;left:12px;right:12px}#topbar>*{pointer-events:auto}#resources{flex-wrap:wrap;align-items:center;gap:4px 14px;padding:8px 14px;display:flex}.res{white-space:nowrap;align-items:center;gap:6px;display:flex}.res i,.row i{border-radius:3px;width:12px;height:12px;display:inline-block;box-shadow:inset 0 0 0 1px #00000059}.res-name{color:var(--muted)}.res b{font-variant-numeric:tabular-nums;min-width:18px}.res.people{border-left:1px solid var(--panel-edge);padding-left:14px}#goal{align-items:center;gap:10px;min-width:260px;margin-left:auto;padding:8px 14px;display:flex}.goal-label{color:var(--muted);white-space:nowrap}.goal-bar{background:#ffffff1a;border-radius:5px;flex:1;min-width:70px;height:10px;overflow:hidden}#goal-fill{background:linear-gradient(90deg, #c2793a, var(--gold));width:0;height:100%;transition:width .3s}#goal-text{font-variant-numeric:tabular-nums;white-space:nowrap}.controls{align-items:center;gap:6px;padding:6px 8px;display:flex}#speed{gap:2px;display:flex}#speed button,#help-toggle{background:0 0;border:1px solid #0000;border-radius:6px;min-width:34px;padding:4px 9px}#speed button:hover,#help-toggle:hover{background:var(--gold-soft)}#speed button.active{background:var(--gold);color:#2a1c0e;font-weight:700}#help-toggle{border-color:var(--panel-edge);font-weight:700}#clock{font-variant-numeric:tabular-nums;white-space:nowrap;min-width:64px;padding:0 4px 0 6px}#timelapse{border:1px solid var(--panel-edge);background:0 0;border-radius:6px;padding:4px 8px}#timelapse.active{background:var(--gold);color:#2a1c0e}#guide{width:270px;padding:4px 0 6px;position:fixed;top:104px;left:12px}.guide-head{text-align:left;width:100%;color:var(--gold);background:0 0;border:none;justify-content:space-between;padding:6px 14px;font-weight:700;display:flex}#guide.collapsed ol{display:none}#guide.collapsed .chev{transform:rotate(-90deg)}#guide ol{margin:0;padding:0 14px 4px 34px;line-height:1.45}#guide li{margin:3px 0}#guide li.done{color:var(--muted);-webkit-text-decoration:line-through #c4ae8899;text-decoration:line-through #c4ae8899}#guide li.done::marker{color:var(--ok)}#info{width:270px;padding:12px 14px 14px;position:fixed;top:104px;right:12px}.info-head{justify-content:space-between;align-items:center;display:flex}#info h3{color:var(--gold);margin:0;font-size:18px}#info h3 small{color:var(--muted);font-size:13px;font-weight:400}#info-close{color:var(--muted);background:0 0;border:none;padding:2px 4px;font-size:15px}#info .desc{color:var(--muted);margin:6px 0 8px;line-height:1.35}#info .label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:10px;margin-bottom:4px;font-size:12px}#info .row{align-items:center;gap:8px;padding:2px 0;display:flex}#info .row b{font-variant-numeric:tabular-nums;margin-left:auto}#info .status{background:#ffffff0f;border-radius:6px;padding:6px 8px}#info .warn{color:#ffc9bd;background:#d9553f38;border-radius:6px;margin-bottom:6px;padding:6px 8px}.pbar{background:#ffffff1a;border-radius:4px;height:8px;margin:6px 0;overflow:hidden}.pbar div{background:var(--gold);height:100%}button.danger{color:#ffb3a4;background:0 0;border:1px solid #d9553f99;border-radius:6px;width:100%;margin-top:14px;padding:6px}button.danger:hover{background:#d9553f33}#bottom{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:12px;left:12px;right:12px}#bottom>*{pointer-events:auto}#bottom>#hint,#bottom>#toast{pointer-events:none}#toolbar{gap:4px;max-width:100%;padding:6px;display:flex;overflow-x:auto}.tool{background:#ffffff0a;border:1px solid #0000;border-radius:8px;flex-direction:column;flex-shrink:0;align-items:center;gap:3px;width:92px;padding:8px 4px 6px;display:flex;position:relative}.tool:hover{background:var(--gold-soft)}.tool.active{border-color:var(--gold);background:#e5b55247}.tool kbd{font-family:var(--font);color:var(--muted);font-size:11px;position:absolute;top:4px;left:5px}.swatch{clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%);border-radius:3px;width:22px;height:16px}.tl{white-space:nowrap;font-size:13px;font-weight:700}.ts{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:11px;overflow:hidden}button.hire{border:1px solid var(--gold);width:20px;height:20px;color:var(--gold);background:0 0;border-radius:50%;margin-left:-2px;margin-right:6px;padding:0;font-weight:700;line-height:1}button.hire:hover{background:var(--gold);color:#2a1c0e}#hint{text-align:center;max-width:720px;color:var(--muted);padding:7px 14px}#hint b{color:var(--ink)}#toast{border:1px solid var(--panel-edge);opacity:0;pointer-events:none;background:#241a11eb;border-radius:8px;padding:8px 16px;transition:opacity .2s,transform .2s;transform:translateY(6px)}#toast.show{opacity:1;transform:none}#toast.error{color:#ffc9bd;border-color:#d9553fb3}#help{width:min(460px,100vw - 32px);padding:18px 22px;line-height:1.45;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#help h2,#win h2{color:var(--gold);margin:0 0 8px}#help ul{padding-left:18px}#help button,#win button{background:var(--gold);color:#2a1c0e;border:none;border-radius:6px;margin-top:6px;padding:8px 18px;font-weight:700}#win{background:#140c0459;place-items:center;display:grid;position:fixed;inset:0}#win .panel{text-align:center;padding:22px 28px}@media (width<=1000px){.tool{width:76px}.ts{font-size:10px}}@media (width<=900px){.res-name{display:none}#goal{min-width:0}.goal-label,#guide{display:none}}
