:root{--panel:#142118e6;--panel-solid:#16241a;--panel-2:#283a2af2;--border:#d6b06066;--text:#f4ecd6;--muted:#b8b09b;--gold:#e8c170;--good:#7fd98f;--bad:#ff8a78;--warn:#ffc15e;--radius:12px;--font:"Trebuchet MS", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#0d1710;margin:0;font-size:14px;overflow:hidden}#game{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:fixed;inset:0}#game:active{cursor:grabbing}body.placing #game{cursor:crosshair}#ui{pointer-events:none;z-index:2;position:fixed;inset:0}#ui>*{pointer-events:auto}[hidden]{display:none!important}button{color:inherit;font-family:inherit}.btn{border:1px solid var(--border);background:var(--panel-2);cursor:pointer;border-radius:9px;padding:7px 12px;font-size:13px;font-weight:600;transition:background .15s,transform 50ms}.btn:hover:not(:disabled){background:#3d5a40}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{color:#fff8e8;background:linear-gradient(#c98a2e,#a86b1c);border-color:#e8b35c}.btn.primary:hover:not(:disabled){background:linear-gradient(#d99a3e,#b87b2c)}.btn.danger{background:#6e2a22;border-color:#b5544a}.btn.small{padding:5px 9px;font-size:12px}.btn.icon{width:30px;height:30px;padding:0;font-size:18px;line-height:1}.icon-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;padding:4px 6px;font-size:18px}.icon-btn:hover{background:#ffffff1a}.muted{color:var(--muted)}.small{font-size:12px}.chip{white-space:nowrap;background:#0000004d;border-radius:999px;align-items:center;gap:3px;padding:2px 6px;font-size:12px;display:inline-flex}.chip.short{color:var(--bad);background:#781e1473}.hud{pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px;display:flex;position:absolute;top:8px;left:8px;right:8px}.hud-group{pointer-events:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:4px;padding:5px 8px;display:flex;box-shadow:0 4px 14px #00000059}.res{border-radius:8px;align-items:center;gap:6px;min-width:108px;padding:2px 8px;display:flex}.res+.res{border-left:1px solid #ffffff14}.res-icon{font-size:20px}.res-text{flex-direction:column;line-height:1.1;display:flex}.res-value{font-variant-numeric:tabular-nums;font-weight:700}.res-rate{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.res-rate.pos{color:var(--good)}.res-rate.neg{color:var(--bad)}.res.full .res-value{color:var(--warn)}.res.empty{background:#961e1473;animation:1s infinite alternate pulse}.hud-center{flex-direction:column;gap:2px;padding:5px 14px}.clock{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.raid-chip{color:var(--muted);font-size:12px}.raid-chip.warn{color:var(--warn);font-weight:700;animation:.7s infinite alternate pulse}.raid-chip.active{color:var(--bad);font-weight:700}.stat{font-variant-numeric:tabular-nums;white-space:nowrap;padding:2px 8px;font-weight:700}.stat.good{color:var(--good)}.stat.mid{color:var(--warn)}.stat.bad{color:var(--bad)}@keyframes pulse{0%{opacity:1}to{opacity:.55}}.build-menu{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);width:min(960px,100% - 16px);padding:6px 8px 8px;position:absolute;bottom:8px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #0006}.build-header{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tabs{flex:1;gap:4px;display:flex}.tab{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:8px;padding:6px 12px;font-weight:700}.tab.active{color:var(--gold);background:#e8c1702e}.builders{color:var(--good);font-size:12px;font-weight:700}.builders.busy{color:var(--warn)}.build-list{scrollbar-width:thin;gap:6px;padding-top:6px;display:flex;overflow-x:auto}.build-menu.collapsed .build-list{display:none}.card{cursor:pointer;background:#00000040;border:1px solid #ffffff14;border-radius:10px;flex:0 0 140px;grid-template-rows:auto auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;padding:6px 8px;transition:border-color .15s,background .15s;display:grid;position:relative}.card:hover,.card:focus-visible{border-color:var(--gold);background:#e8c17014;outline:none}.card.selected{border-color:var(--gold);background:#e8c17033}.card-icon{grid-row:span 2;font-size:26px}.card-name{font-size:13px;font-weight:700;line-height:1.1}.card-count,.card-lock{color:var(--muted);white-space:nowrap;font-size:11px}.card-cost{flex-wrap:wrap;grid-column:span 2;gap:3px;margin-top:4px;display:flex}.card.locked,.card.full{opacity:.5}.card.locked .card-lock{color:var(--warn)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);width:320px;max-height:calc(100% - 250px);padding:10px 12px 12px;position:absolute;top:76px;right:8px;overflow-y:auto;box-shadow:0 6px 20px #00000073}.panel header{align-items:center;gap:10px;display:flex}.panel header>div:nth-child(2){flex:1}.panel h2{color:var(--gold);margin:0;font-size:17px}.panel-icon{font-size:32px}.desc{color:var(--muted);margin:8px 0;font-size:12.5px;line-height:1.35}.kv{font-variant-numeric:tabular-nums;justify-content:space-between;padding:4px 0;font-size:13px;display:flex}.status{background:#00000040;border-radius:8px;margin:6px 0;padding:6px 8px;font-size:13px}.status.bad{color:var(--bad)}.status.good{color:var(--gold)}.progress{background:#0006;border-radius:99px;height:7px;margin-bottom:6px;overflow:hidden}.progress>div{background:linear-gradient(90deg,#d9a441,#f4d06f);height:100%}.progress.hp>div{background:linear-gradient(90deg,#3fae5a,#7fd98f)}.workers{align-items:center;gap:6px;margin:8px 0 2px;display:flex}.workers>span{flex:1}.workers strong{text-align:center;font-variant-numeric:tabular-nums;min-width:44px}.train{background:#00000038;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;padding:8px;display:flex}.upgrade-track{background:#00000038;border-radius:8px;flex-direction:column;gap:4px;margin-top:8px;padding:8px;display:flex}.upgrade-track .btn{margin-top:2px}.track-head{justify-content:space-between;align-items:center;display:flex}.costs{flex-wrap:wrap;gap:3px;margin-top:4px;display:flex}.queue{flex-wrap:wrap;gap:4px;display:flex}.actions{border-top:1px solid #ffffff14;margin-top:10px;padding-top:10px}.action{flex-direction:column;gap:6px;display:flex}.actions .btn{width:100%}.toasts{flex-direction:column;align-items:center;gap:5px;width:min(460px,100% - 16px);display:flex;position:absolute;top:76px;left:50%;transform:translate(-50%);pointer-events:none!important}.toast{background:var(--panel-solid);border:1px solid var(--border);border-left-width:4px;border-radius:9px;padding:7px 12px;font-size:13px;transition:opacity .4s,transform .4s;animation:.2s ease-out toast-in;box-shadow:0 4px 12px #00000059}.toast.good{border-left-color:var(--good)}.toast.bad{border-left-color:var(--bad)}.toast.info{border-left-color:var(--gold)}.toast.out{opacity:0;transform:translateY(-6px)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}.modal-backdrop{z-index:10;background:#050a0699;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.modal{background:var(--panel-solid);border:1px solid var(--border);border-radius:14px;width:min(460px,100%);max-height:90vh;padding:18px 20px;overflow-y:auto;box-shadow:0 12px 40px #0009}.modal h2{color:var(--gold);margin:0 0 10px}.modal-body{-webkit-user-select:text;user-select:text;font-size:14px;line-height:1.5}.modal-body ul{margin:6px 0;padding-left:18px}.modal-body kbd{background:#ffffff1f;border-radius:4px;padding:0 5px;font-family:inherit}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.floater{color:#fff3c4;text-shadow:0 2px 4px #000c;font-weight:800;animation:1.2s ease-out forwards float-up;position:absolute;transform:translate(-50%,-50%);pointer-events:none!important}@keyframes float-up{to{opacity:0;transform:translate(-50%,-160%)}}.cursor-tip{background:var(--panel-solid);border:1px solid var(--border);white-space:nowrap;border-radius:7px;padding:4px 8px;font-size:12px;position:absolute;pointer-events:none!important}.cursor-tip.bad{color:var(--bad)}.cursor-tip.ok{color:var(--good)}.fatal{text-align:center;background:#0d1710;place-items:center;padding:24px;display:grid;position:fixed;inset:0}@media (width<=760px){.hud{gap:4px;top:4px;left:4px;right:4px}.hud-resources{justify-content:space-between;width:100%}.res{gap:3px;min-width:0;padding:2px 4px}.res-icon{font-size:16px}.res-value{font-size:12px}.hud-center{padding:4px 8px}.clock{font-size:13px}.hud-people{padding:4px}.stat{padding:2px 4px;font-size:12px}.toasts{top:118px}.panel{z-index:5;background:var(--panel-solid);width:auto;max-height:58%;inset:auto 4px 4px}.build-menu{width:calc(100% - 8px);bottom:4px}.card{flex-basis:118px}}.stat.cloud{color:var(--muted);font-size:12px;font-weight:600}.stat.cloud.saved{color:var(--good)}.stat.cloud.error,.stat.cloud.offline{color:var(--bad)}.account{background:#00000040;border-radius:10px;align-items:center;gap:12px;margin-bottom:8px;padding:10px;display:flex}.account img{background:#333;border-radius:50%;width:44px;height:44px}.overtime{align-items:center;gap:4px;font-size:12px;font-weight:700;display:flex}.overtime strong{text-align:center;font-variant-numeric:tabular-nums;min-width:52px}.night-chip{color:var(--good)}.fire-chip{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.fire-chip.low{color:var(--warn)}.fire-chip.out{color:var(--bad);font-weight:700;animation:.8s infinite alternate pulse}.fuel-track{background:#00000073;border-radius:99px;width:90px;height:7px;overflow:hidden}.fuel-fill{background:linear-gradient(90deg,#e05a1c,#ffd76a);height:100%;transition:width .3s linear}.fuel-text{font-variant-numeric:tabular-nums}.progress.fuel>div{background:linear-gradient(90deg,#e05a1c,#ffd76a)}.btn.toggle{text-align:left;align-items:center;gap:8px;display:flex}.switch{background:#00000073;border-radius:99px;flex:none;width:28px;height:16px;transition:background .15s;position:relative;box-shadow:inset 0 0 0 1px #ffffff26}.switch:after{content:"";background:#cfd6cf;border-radius:50%;width:12px;height:12px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.btn.toggle.on .switch{background:#4b8f43}.btn.toggle.on .switch:after{background:#f2fbef;transform:translate(12px)}.season-chip{color:var(--muted);white-space:nowrap;align-items:center;gap:4px;font-size:12px;font-weight:600;display:flex}.season-chip.s-semi{color:#8fd694}.season-chip.s-kemarau{color:#e8c35a}.season-chip.s-hujan{color:#86b6d9}.season-chip.s-dingin{color:#bfe4ff;font-weight:700}.ach-list{flex-direction:column;gap:6px;max-height:46vh;margin-top:8px;display:flex;overflow-y:auto}.ach{opacity:.6;background:#ffffff0a;border-radius:10px;align-items:center;gap:10px;padding:8px 10px;display:flex}.ach.done{opacity:1;background:#c98a2e29;box-shadow:inset 0 0 0 1px #f0c67459}.ach-icon{filter:grayscale();flex:none;font-size:22px;line-height:1}.ach.done .ach-icon{filter:none}.ach-text{flex:1;min-width:0}.ach-when{text-align:right;font-variant-numeric:tabular-nums;flex:none}