:root{--wood-dark: #3a2214;--wood-mid: #6a4027;--wood-light: #9c6a42;--ui-gold: #d4b16d;--grass-a: #356f2a;--grass-b: #427d2f}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:radial-gradient(circle at 20% 10%,#4f8f3f,#1e311a 70%);color:#f3e5c8;font-family:"Press Start 2P",monospace}#app{min-height:100%;display:grid;place-items:center;padding:16px}#game-container{position:relative;width:min(100vw - 32px,1280px);aspect-ratio:16 / 9;border:8px solid var(--wood-dark);box-shadow:0 0 0 4px var(--wood-mid),0 18px 48px #00000073;background:linear-gradient(135deg,var(--grass-a),var(--grass-b));image-rendering:pixelated;overflow:hidden}#game-container canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:block;width:100%!important;height:100%!important;image-rendering:pixelated;image-rendering:crisp-edges}#hud-root{position:absolute;inset:auto 0 0 0;pointer-events:none}.hud{pointer-events:auto;position:absolute;z-index:20;left:0;right:0;bottom:0;background:linear-gradient(180deg,#7f522f,#5c371f);border-top:3px solid #b78952;padding:10px;display:grid;gap:8px}.hud-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hud-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #211107;background:linear-gradient(180deg,#b18855,#84522f);color:#f4e4bf;font:inherit;font-size:10px;padding:6px 8px;cursor:pointer;text-transform:uppercase}.hud-btn.active{border-color:var(--ui-gold);box-shadow:0 0 0 2px #d4b16d66 inset}.hud-pill{border:1px solid #2c190b;background:#1a0c048c;padding:8px 6px;font-size:9px;line-height:1.7}.hud-alert{color:#ffdc82}.notification-stack{position:absolute;top:10px;left:10px;z-index:30;width:min(320px,calc(100% - 20px));display:grid;gap:5px;pointer-events:none}.notification-toast{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:6px;border:2px solid #201109;background:linear-gradient(180deg,#442b1bf2,#2a180ef0);box-shadow:0 8px 18px #00000061,0 0 0 2px #ffffff14 inset;padding:5px 6px;transform:translateY(0);opacity:1;animation:toast-in .16s ease-out}.notification-toast.kind-positive{border-color:#2c5f2f;background:linear-gradient(180deg,#406230f2,#2b4322f0)}.notification-toast.kind-negative{border-color:#7a261f;background:linear-gradient(180deg,#6d2e25f2,#431814f0)}.notification-toast.kind-warning{border-color:#7d5424;background:linear-gradient(180deg,#714c22f2,#472d16f0)}.notification-toast.kind-info{border-color:#395b75;background:linear-gradient(180deg,#37536cf2,#233445f0)}.notification-toast.is-leaving{opacity:0;transform:translate(18px);transition:transform .22s ease,opacity .22s ease}.notification-emoji{width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(18,10,5,.8);background:#140c087a;font-size:14px;line-height:1}.notification-body{min-width:0}.notification-title{color:#fff0c7;font-size:7px;margin-bottom:2px}.notification-message{color:#f0e0bc;font-size:6px;line-height:1.4}@keyframes toast-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.colony-panel{position:absolute;top:10px;right:10px;z-index:25;display:block;width:min(420px,calc(100% - 20px));max-height:calc(100% - 118px);overflow-y:auto;border:2px solid #241207;background:linear-gradient(180deg,#643f24f2,#3a2214f0);box-shadow:0 0 0 2px #ba8d5959 inset,0 8px 20px #00000073;padding:8px;font-size:8px;line-height:1.55;pointer-events:auto;overflow:hidden}.colony-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.colony-fold-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #2c190b;background:linear-gradient(180deg,#b18855,#84522f);color:#f4e4bf;font:inherit;font-size:10px;padding:3px 6px;line-height:1;cursor:pointer;flex:0 0 auto}.colony-panel-body{overflow:hidden;max-height:2400px;opacity:1;transform:translateY(0);transition:max-height .26s ease,opacity .22s ease,transform .22s ease}.colony-panel.is-collapsed .colony-panel-body{max-height:0;opacity:0;transform:translateY(-8px);pointer-events:none}.colony-header{color:#ffdca0;font-size:10px;margin-bottom:6px}.colony-pop{border:1px solid #2a1609;background:#1c10089e;padding:5px 6px;margin-bottom:6px}.colony-pop strong{color:#fff2d0}.colony-roles{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.role-pill{border:1px solid #2a170c;background:linear-gradient(180deg,#8c603a,#694225);padding:3px 5px;color:#f8e9c8}.colony-res-title{color:#ffdc82;margin-bottom:4px;margin-top:6px}.work-grid{display:grid;gap:5px;margin-bottom:6px}.work-empty{border:1px solid #2a170c;background:#190d0794;color:#dbcaa8;padding:6px;margin-bottom:6px}.work-card{border:1px solid #2a170c;background:#180c06a8;padding:5px}.work-card.is-warning{border-color:#7e2b1d;box-shadow:0 0 0 1px #ae422d59 inset}.work-head{display:flex;align-items:center;gap:4px}.build-icon{width:10px;height:10px;border:1px solid #201108;box-shadow:0 0 0 1px #ffffff24 inset}.build-townhall{background:linear-gradient(180deg,#b9bbb9,#8e8f8d)}.build-woodcutter{background:linear-gradient(180deg,#9c6d43,#6b472d)}.build-quarry{background:linear-gradient(180deg,#a7adb6,#767d87)}.build-sawmill{background:linear-gradient(180deg,#9d7d53,#715634)}.build-storehouse{background:linear-gradient(180deg,#bf976e,#916b48)}.build-house{background:linear-gradient(180deg,#c8a478,#9a744f)}.build-guardpost{background:linear-gradient(180deg,#c4ccd6,#8a94a0)}.work-title{color:#f5dfb0}.work-stage{margin-left:auto;color:#d7bf92}.work-focus-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #28160a;background:linear-gradient(180deg,#c59a60,#86552e);color:#fff0ca;font:inherit;font-size:7px;padding:2px 5px;cursor:pointer}.work-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.work-gauge{width:100%;height:8px;margin-top:4px;border:1px solid #28160a;background:#100804bf}.work-gauge-fill{height:100%;background:linear-gradient(90deg,#5aa94a,#8ec864)}.work-meta{color:#d8c9a7;font-size:7px;margin-top:3px}.work-warn{color:#ffb69f;font-size:7px;margin-top:3px}.warn-title{color:#ffba9f;margin-bottom:4px}.warn-list{border:1px solid #5b281c;background:#36120c94;padding:4px;margin-bottom:6px}.warn-item{color:#ffd1c1;font-size:7px}.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.resource-card{border:1px solid #2a170c;background:#180c069e;padding:5px}.resource-head{display:flex;align-items:center;gap:4px;margin-bottom:3px}.resource-title{color:#f4deae}.resource-total{margin-left:auto;color:#fff8dc}.resource-meta{color:#dacba7;font-size:7px}.resource-icon{width:9px;height:9px;border:1px solid #120904;box-shadow:0 0 0 1px #ffffff1f inset;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:#0003}.resource-icon img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.inspect-resource-icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:#0000004d;border:1px solid #1b0f08;margin-right:4px;vertical-align:middle}.inspect-resource-icon img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.res-log{background:linear-gradient(180deg,#9a6b42,#6f492a)}.res-plank{background:linear-gradient(180deg,#c39660,#9b6d3d)}.res-stone{background:linear-gradient(180deg,#9b9c9a,#727473)}.res-food{background:linear-gradient(180deg,#82b85e,#5e8f3f)}.inspect-panel{position:absolute;left:10px;top:10px;z-index:22;max-width:min(700px,calc(100% - 20px));border:2px solid #28170c;background:linear-gradient(180deg,#54331ff2,#2d1b11f0);box-shadow:0 0 0 2px #c79c6140 inset,0 8px 20px #00000073;padding:16px;pointer-events:auto}.battle-mode-banner{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:29;border:2px solid #5a0f12;background:linear-gradient(180deg,#ac2121f0,#761313f2);box-shadow:0 0 0 2px #ff84843d inset,0 8px 16px #00000073;color:#ffd9d9;font-size:12px;letter-spacing:1px;padding:8px 12px;text-transform:uppercase;pointer-events:none}.debug-panel{position:absolute;left:10px;right:10px;top:10px;bottom:118px;z-index:28;display:flex;flex-direction:column;gap:6px;border:2px solid #211106;background:linear-gradient(180deg,#482a18f5,#26160df2);box-shadow:0 0 0 2px #bd925c57 inset,0 10px 20px #0000006b;pointer-events:auto;padding:8px}.debug-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.debug-panel-title{font-size:10px;color:#ffe1a8}.debug-panel-actions{display:flex;gap:4px}.debug-panel-actions button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #2c170b;background:linear-gradient(180deg,#af8554,#7a4d2d);color:#f6e8c8;font:inherit;font-size:7px;padding:4px 6px;cursor:pointer;text-transform:uppercase}.debug-panel-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(420px,2.6fr) minmax(220px,1fr);gap:8px;min-height:0;flex:1}.debug-panel.debug-panel-map-fullscreen .debug-panel-grid{grid-template-columns:1fr}.debug-panel.debug-panel-map-fullscreen .debug-panel-summary,.debug-panel.debug-panel-map-fullscreen .debug-panel-traces{display:none}.debug-panel.debug-panel-map-fullscreen .debug-panel-map{grid-column:1 / -1;height:100%}.debug-panel-summary,.debug-panel-map,.debug-panel-traces{border:1px solid #251408;background:#120a04e0;color:#f8ebce;min-height:0}.debug-panel-summary{display:grid;grid-template-columns:1fr;gap:3px;padding:8px;align-content:start;overflow:auto}.debug-metric{display:flex;justify-content:space-between;gap:8px;font-size:7px;line-height:1.4;border-bottom:1px dashed rgba(255,234,191,.16);padding-bottom:3px}.debug-metric strong{color:#f2d9a9;font-weight:400}.debug-panel-map{display:flex;flex-direction:column;gap:6px;padding:8px;overflow:auto}.debug-panel-map-canvas{display:block;align-self:center;border:1px solid #2c180c;background:#10100d;box-shadow:0 0 0 1px #eed19429 inset;image-rendering:pixelated;image-rendering:crisp-edges}.debug-panel-map-legend{display:grid;gap:3px;font-size:6px;line-height:1.3;color:#e0c89a}.debug-map-legend-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.debug-map-legend-row strong{color:#f4dcaf;font-weight:400}.debug-map-chip{display:inline-flex;gap:4px;align-items:center}.debug-map-swatch{width:7px;height:7px;border:1px solid rgba(0,0,0,.65);background:var(--swatch, #f7e3bd);box-shadow:0 0 0 1px #fff2d533 inset}.debug-panel-traces{padding:8px;overflow:auto}.debug-trace-title{font-size:7px;color:#f4dba8;margin-bottom:4px}.debug-trace-row{font-size:7px;line-height:1.35;color:#ebdcc0;border-bottom:1px dashed rgba(255,234,191,.15);margin-bottom:5px;padding-bottom:4px}.debug-trace-row span{color:#cab895}.inspect-header{color:#ffe2a5;font-size:20px;margin-bottom:10px}.inspect-sub{color:#e9d6ae;font-size:16px;margin-bottom:8px}.inspect-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.inspect-worker-row{border:1px solid rgba(40,23,12,.7);background:#160c0785;padding:8px;margin-bottom:8px}.inspect-chip{border:1px solid #2a170c;background:#190d07ad;color:#f6e6bf;padding:6px 8px;font-size:14px}.inspect-chip.is-muted{color:#cfbe99}.inspect-progress{width:100%;height:16px;border:1px solid #241307;background:#100905bf;margin-bottom:8px}.inspect-progress-fill{height:100%;background:linear-gradient(90deg,#58a748,#92ca63)}.inspect-action-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #2b170b;background:linear-gradient(180deg,#b08957,#7f4f2c);color:#f8e9c8;font:inherit;font-size:12px;padding:6px 10px;cursor:pointer;text-transform:uppercase}.inspect-mini-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #2b170b;background:linear-gradient(180deg,#b08957,#7f4f2c);color:#f8e9c8;font:inherit;font-size:10px;padding:4px 6px;cursor:pointer;text-transform:uppercase}.inspect-mini-btn.is-active{border-color:#6d1717;background:linear-gradient(180deg,#cf6969,#8a2f2f);color:#fff0f0;box-shadow:0 0 0 1px #ffc8c859 inset}.closeup-exit-btn{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:24;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #241208;background:linear-gradient(180deg,#c29b62,#87562f);color:#fff2d2;font-family:"Press Start 2P",monospace;font-size:11px;padding:8px 12px;cursor:pointer;box-shadow:0 0 0 2px #40210e73}.game-over-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at center,#120a0666,#080503d1);pointer-events:auto}.game-over-title{color:#ffdd9e;font-size:34px;text-shadow:0 0 18px rgba(0,0,0,.6);margin-bottom:6px}.game-over-slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.game-over-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #241208;background:linear-gradient(180deg,#c29b62,#87562f);color:#fff2d2;font-family:"Press Start 2P",monospace;font-size:11px;padding:10px 14px;cursor:pointer;min-width:280px}.game-over-btn.secondary{background:linear-gradient(180deg,#8d6e4d,#5f482f)}.welcome-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:52;display:grid;place-items:center;align-content:center;gap:14px;padding:20px;background:radial-gradient(circle at center,#22160c59,#080503e6);pointer-events:auto}.welcome-title{color:#ffdd9e;font-size:34px;text-shadow:0 0 18px rgba(0,0,0,.64)}.welcome-subtitle{max-width:620px;text-align:center;color:#f0ddb5;font-size:11px;line-height:1.8}.welcome-start-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #241208;background:linear-gradient(180deg,#c29b62,#87562f);color:#fff2d2;font-family:"Press Start 2P",monospace;font-size:12px;padding:12px 20px;cursor:pointer}.cursor-default{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='10' fill='white'/%3E%3Crect x='1' y='1' width='1' height='8' fill='white'/%3E%3Crect x='2' y='2' width='1' height='6' fill='white'/%3E%3Crect x='3' y='3' width='1' height='4' fill='white'/%3E%3Crect x='4' y='4' width='1' height='2' fill='white'/%3E%3C/svg%3E") 0 0,auto}.cursor-build{cursor:crosshair}.cursor-invalid{cursor:not-allowed}@media(max-width:920px){.hud{gap:6px;padding:8px}.hud-btn{font-size:8px;padding:5px 6px}.hud-pill{font-size:8px}.colony-panel{width:min(360px,calc(100% - 16px));top:8px;right:8px;padding:7px;max-height:calc(100% - 104px)}.notification-stack{width:min(300px,calc(100% - 16px));top:8px;left:8px}.debug-panel-grid,.resource-grid{grid-template-columns:1fr}.inspect-panel{top:8px;left:8px;max-width:min(640px,calc(100% - 16px))}.battle-mode-banner,.closeup-exit-btn{top:8px;font-size:9px;padding:6px 8px}.game-over-title{font-size:24px}.game-over-btn{min-width:210px;font-size:9px;padding:8px 10px}.welcome-title{font-size:24px}.welcome-subtitle{font-size:9px}.welcome-start-btn{font-size:10px;padding:10px 14px}}