:root{--panel: rgba(30, 22, 40, .92);--panel-edge: #4a3d5c;--panel-hi: #6b5a80;--ink: #e9dfc4;--muted: #a99db4;--accent: #8fc46a;--chosen: rgba(110, 160, 80, .28);--hunger: #d0573a;--fatigue: #5f8fd0;--err: #e07a6a}*{box-sizing:border-box}html{touch-action:none}html,body{margin:0;height:100%;overflow:hidden;background:#141019;color:var(--ink);font:15px/1.3 Pixelify Sans,ui-monospace,monospace;-webkit-user-select:none;user-select:none}#game{display:block;width:100vw;height:100vh;image-rendering:pixelated;cursor:default}#loading{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:24px}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.panel{position:absolute;pointer-events:auto;background:var(--panel);border:2px solid var(--panel-edge);box-shadow:inset 0 0 0 1px #221a2c,0 0 0 1px #0d0a12;padding:6px 10px}.top-left{top:8px;left:8px}.top-left{max-width:min(520px,calc(100vw - 200px))}.pop{margin-left:6px;white-space:nowrap}.inventory{top:60px;left:50%;transform:translate(-50%);width:min(420px,calc(100vw - 32px));background:#1e1628b8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.slots{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px}.slot{position:relative;width:44px;height:44px;display:grid;place-items:center;background:#0d0a128c;border:1px solid var(--panel-edge)}.slot.full{border-color:var(--err)}.slot img{image-rendering:pixelated;height:32px}.slot b{position:absolute;right:2px;bottom:0;font-size:13px;text-shadow:1px 1px 0 #0d0a12,-1px -1px 0 #0d0a12,1px -1px 0 #0d0a12,-1px 1px 0 #0d0a12}.slot .dur{position:absolute;left:2px;bottom:2px;height:2px;max-width:calc(100% - 4px);background:var(--accent)}.bottom:not(.bottom-tab){padding-right:40px}.bottom-fold{position:absolute;top:4px;right:6px}.bottom.bottom-tab{right:auto;cursor:pointer;color:var(--ink);font:inherit}.bottom.bottom-tab:hover{border-color:var(--panel-hi)}.top-right{top:8px;right:8px;display:flex;gap:4px}.side{top:60px;right:8px;width:300px;max-height:calc(100vh - 60px - var(--bottom-h, 90px) - 16px);overflow-y:auto}.bottom{left:8px;right:8px;bottom:8px;display:flex;flex-direction:column;gap:6px}.title{font-size:17px;font-weight:600}.title.center{text-align:center}.small-title{margin-top:8px;font-size:15px}.row{display:flex;align-items:center;gap:6px;margin:3px 0}.muted{color:var(--muted)}.small{font-size:13px}hr{border:0;border-top:1px solid var(--panel-edge);margin:8px 0}.btn,.toggle,.mini{font:inherit;color:inherit;background:#2b2138;border:2px solid var(--panel-edge);padding:2px 8px;cursor:pointer}.btn:hover,.toggle:hover,.mini:hover{border-color:var(--panel-hi)}.btn.on,.mini.on{background:#3d5a32;border-color:var(--accent)}.toggle{display:flex;align-items:center;gap:6px;width:100%;margin-top:4px}.check{display:inline-grid;place-items:center;width:14px;height:14px;border:2px solid var(--panel-hi);font-style:normal;font-size:11px;color:var(--accent)}.res{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.res img{image-rendering:pixelated;height:22px}.dot{width:10px;height:10px;background:#777}.dot.ok{background:var(--accent)}.dot.down{background:var(--err)}.unit{display:flex;gap:10px;align-items:center;margin-bottom:6px}.portrait{image-rendering:pixelated;height:72px;background:#1a1322;border:2px solid var(--panel-edge);padding:2px 6px}.name{font-size:20px;font-weight:600}.bar-row{display:grid;grid-template-columns:80px 1fr 40px;gap:6px;align-items:center;font-size:13px;margin:3px 0}.bar{height:8px;background:#1a1322;border:1px solid var(--panel-edge)}.bar i{display:block;height:100%}.bar i.hunger{background:var(--hunger)}.bar i.fatigue{background:var(--fatigue)}.num{text-align:right;font-variant-numeric:tabular-nums}.opts{width:100%;border-collapse:collapse;margin:4px 0;font-size:13px}.opts td{padding:2px 3px}.opts tr.chosen{background:var(--chosen)}.err{color:var(--err)}.roster{display:grid;grid-template-columns:1fr 1fr;gap:4px}.mini{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:6px;text-align:left;padding:3px 5px;margin:2px 0;width:100%}.mini img{grid-row:span 2;image-rendering:pixelated;height:30px}.mini .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tasks,.orders{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.task{display:inline-flex;align-items:center;gap:6px}.task.done{color:var(--muted);text-decoration:line-through}.hint{margin-left:auto}.ui-hidden .minimap{display:none}.btn.square{width:30px;padding:2px 0;text-align:center}.minimap{position:fixed;top:calc(var(--top-h, 68px) + 16px);left:8px;width:192px;height:192px;image-rendering:pixelated;border:2px solid var(--panel-edge);box-shadow:0 0 0 1px #0d0a12;background:#141019;cursor:crosshair;touch-action:none}.building-win{top:calc(var(--top-h, 68px) + 220px);left:8px;width:280px;max-height:calc(100vh - var(--top-h, 68px) - 220px - var(--bottom-h, 90px) - 16px);overflow-y:auto}.bicon{image-rendering:pixelated;height:18px;vertical-align:middle}.stock{display:flex;flex-wrap:wrap;gap:4px 10px;margin:2px 0 6px}.stock .res img,.tip .res img{height:16px}.build-menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.build-menu .sep{width:1px;height:20px;background:var(--panel-edge);margin:0 4px}.btn.tab{font-size:13px}.build-btn{position:relative;display:inline-flex;align-items:center;gap:6px}.build-btn img{image-rendering:pixelated;height:20px}.build-btn .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:0;flex-direction:column;gap:2px;white-space:nowrap;background:var(--panel);border:2px solid var(--panel-edge);padding:4px 8px;font-size:13px;text-align:left;z-index:2}.build-btn:hover .tip{display:flex}@media (max-width: 900px){.side{top:104px;width:240px;max-height:calc(100vh - 104px - var(--bottom-h, 90px) - 16px)}.side-tab{top:104px}.inventory{top:calc(var(--top-h, 68px) + 16px)}}.save{font-size:12px;color:var(--muted);margin-left:6px}.save.saved{color:var(--accent)}.save.error{color:var(--err)}.side-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.fold{padding:0 6px}.row-end{display:flex;gap:4px}.demolish{padding:0 6px;color:#e04a3a;font-size:12px}.demolish.armed{color:#fff;background:#a8322a;border-color:#e04a3a}.demolish:disabled{opacity:.35;cursor:default}.side-tab{top:60px;right:8px;display:flex;align-items:center;gap:6px;font:inherit;color:inherit;cursor:pointer}.side-tab:hover{border-color:var(--panel-hi)}.clock.night{color:#b9b4e6}.clock.dusk,.clock.dawn{color:#f0b98a}.bar i.skill{background:var(--accent)}.iicon{image-rendering:pixelated;height:16px}.roles{display:flex;flex-wrap:wrap;gap:3px;margin:2px 0 6px}.btn.role{font-size:12px;padding:1px 5px}.btn:disabled{opacity:.4;cursor:default}.recipe{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:4px 0;border-top:1px solid #2b2138;font-size:13px}.recipe>.res{flex:1 1 100%}.recipe>.btn:first-of-type{margin-left:auto}.recipe .keep{display:inline-flex;align-items:center;gap:4px}.mini-btn{font-size:12px;padding:0 5px}.recipe .res img{height:16px}.side,.building-win{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--panel-edge) transparent}.side::-webkit-scrollbar,.building-win::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-track,.building-win::-webkit-scrollbar-track{background:transparent}.side::-webkit-scrollbar-thumb,.building-win::-webkit-scrollbar-thumb{background:var(--panel-edge)}.side::-webkit-scrollbar-thumb:hover,.building-win::-webkit-scrollbar-thumb:hover{background:var(--panel-hi)}.side::-webkit-scrollbar-button,.building-win::-webkit-scrollbar-button{display:none}.night-hint{font-size:12px;color:#e8c98a;margin-top:2px}.night-hint.alarm{color:#f08070}.weather.cloudy{color:#b8c2cc}.weather.rain{color:#9cc0e8}
