html,body{margin:0;height:100%;background:#061017;overflow:hidden;font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif}#app{position:fixed;inset:0}#scene{display:block;width:100%;height:100%;touch-action:none;outline:none}:root{--bg-glass: rgba(10, 24, 32, .62);--bg-glass-strong: rgba(8, 20, 28, .82);--border-soft: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text: #eaf2f4;--text-dim: #9fb3bc;--text-faint: #6c818b;--accent: #f5c451;--accent-soft: rgba(245, 196, 81, .18);--accent-strong: #ffd86b;--teal: #3fb6a8;--teal-soft: rgba(63, 182, 168, .18);--danger: #e5766b;--night: #2a3f6a;--dawn: #f0a85a;--day: #f5c451;--dusk: #c87a4a;--shadow: 0 10px 30px rgba(0, 0, 0, .45);--radius: 14px;--radius-sm: 9px;--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif}#ui{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased;user-select:none}#ui .panel,#ui .hud,#ui .toast,#ui .offline-modal{pointer-events:auto}*{box-sizing:border-box}.hud{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(180deg,#061016d9,#06101673);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft);z-index:20;gap:12px}.hud .title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}.hud .money{font-size:26px;font-weight:700;letter-spacing:.02em;color:var(--accent);text-shadow:0 0 18px rgba(245,196,81,.35);font-variant-numeric:tabular-nums}.hud .hud-right{display:flex;align-items:center;gap:14px}.hud .stats{font-size:12px;color:var(--text-dim);text-align:right;line-height:1.35;font-variant-numeric:tabular-nums}.hud .stats .stat-strong{color:var(--teal);font-weight:600}.hud .phase{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--border-soft);background:#ffffff0a}.hud .phase .dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}.switch{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim);cursor:pointer}.switch input{display:none}.switch .track{width:38px;height:20px;border-radius:999px;background:#ffffff1a;border:1px solid var(--border-soft);position:relative;transition:background .18s ease}.switch .track:before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-dim);transition:transform .18s ease,background .18s ease}.switch input:checked+.track{background:var(--teal-soft);border-color:var(--teal)}.switch input:checked+.track:before{transform:translate(18px);background:var(--teal)}.switch input:disabled+.track{opacity:.35;cursor:not-allowed}.switch.disabled{opacity:.5;cursor:not-allowed}.panel{position:fixed;top:64px;width:320px;max-height:calc(100vh - 80px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg-glass);backdrop-filter:blur(10px);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;z-index:15;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:8px}.panel.left{left:12px;display:flex;flex-direction:column;overflow-y:visible;max-height:min(calc(100vh - 80px),460px)}.panel.right{right:12px}.panel h2{margin:2px 2px 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);display:flex;align-items:center;justify-content:space-between}.panel h2 .count{color:var(--text-dim);font-weight:500;letter-spacing:0;text-transform:none}.panel h3{margin:14px 4px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.cage-row{background:#ffffff08;border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:9px 10px;margin-bottom:8px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"head head" "bar bar" "sel harvest";gap:6px 8px}.cage-row .head{grid-area:head;display:flex;align-items:center;gap:8px;font-size:13px}.cage-row .dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 6px currentColor;flex:none}.cage-row .label{font-weight:600}.cage-row .sp{color:var(--text-dim);font-size:12px}.cage-row .bar{grid-area:bar;height:12px;position:relative;background:#00000059;border-radius:999px;overflow:hidden;border:1px solid var(--border-soft)}.cage-row .bar .fill{position:absolute;inset:0;transform-origin:left;border-radius:999px;background:linear-gradient(90deg,var(--fill-from, var(--teal)),var(--fill-to, var(--teal)));transition:transform .25s ease}.cage-row .bar .txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);font-variant-numeric:tabular-nums}.cage-row select{grid-area:sel;width:100%;background:#0000004d;color:var(--text);border:1px solid var(--border-soft);border-radius:7px;padding:5px 6px;font-size:12px;font-family:var(--font);cursor:pointer}.cage-row select:focus{outline:none;border-color:var(--teal)}.btn{font-family:var(--font);font-size:12px;font-weight:600;border:1px solid var(--border-soft);border-radius:8px;padding:7px 12px;color:var(--text);background:linear-gradient(180deg,#ffffff0f,#ffffff05);cursor:pointer;transition:transform .08s ease,background .16s ease,box-shadow .16s ease,opacity .16s;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1}.btn:hover:not(:disabled){background:linear-gradient(180deg,#ffffff1f,#ffffff0d);border-color:var(--border-strong)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.accent{background:linear-gradient(180deg,var(--accent-strong),var(--accent));color:#2a1d05;border-color:#0003;box-shadow:0 3px 10px #f5c45140}.btn.accent:hover:not(:disabled){box-shadow:0 4px 14px #f5c45166;background:linear-gradient(180deg,#ffe488,var(--accent-strong))}.btn.teal{background:linear-gradient(180deg,#5fd6c8,var(--teal));color:#05211f;border-color:#0003;box-shadow:0 3px 10px #3fb6a840}.btn.teal:hover:not(:disabled){box-shadow:0 4px 14px #3fb6a866}.btn.small{padding:5px 9px;font-size:11px}.btn.full{width:100%}.btn .cost{font-variant-numeric:tabular-nums}.cage-row .harvest{grid-area:harvest}.upgrade{display:grid;grid-template-columns:32px 1fr;gap:9px;padding:9px 10px;margin-bottom:7px;background:#ffffff08;border:1px solid var(--border-soft);border-radius:var(--radius-sm);cursor:pointer;transition:background .16s,border-color .16s,transform .08s;width:100%;text-align:left;font-family:var(--font);color:var(--text)}.upgrade:hover:not(:disabled){background:#ffffff12;border-color:var(--border-strong)}.upgrade:active:not(:disabled){transform:translateY(1px)}.upgrade:disabled{opacity:.45;cursor:not-allowed}.upgrade .icon{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}.upgrade .body{min-width:0}.upgrade .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.upgrade .name{font-size:13px;font-weight:600}.upgrade .lvl{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}.upgrade .blurb{font-size:11px;color:var(--text-faint);margin-top:2px;line-height:1.35}.upgrade .cost{font-size:12px;color:var(--accent);font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}.upgrade.maxed .lvl{color:var(--teal)}.upgrade.maxed .cost{color:var(--text-dim)}.species{display:flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:6px;background:#ffffff08;border:1px solid var(--border-soft);border-radius:var(--radius-sm)}.species .dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 6px currentColor;flex:none}.species .info{flex:1;min-width:0}.species .name{font-size:13px;font-weight:600}.species .swahili{font-size:11px;color:var(--text-faint);font-style:italic}.species .status{font-size:11px;color:var(--text-dim);margin-top:2px}.species .status.unlocked{color:var(--teal)}.species .right{display:flex;align-items:center;gap:6px}.species .radio{appearance:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--border-strong);background:#0000004d;cursor:pointer;position:relative;flex:none}.species .radio:checked{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.species .radio:checked:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#2a1d05}.species.selected-row{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft) inset}.build-section{margin-top:4px}.farm-ops{flex:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:6px}.feed-row{display:flex;align-items:center;gap:8px;font-size:11px}.feed-row .feed-label{flex:none;color:var(--text-dim);width:36px}.feed-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#ffffff1f;border-radius:4px;outline:none;cursor:pointer}.feed-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:1px solid rgba(0,0,0,.3);cursor:pointer}.feed-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:1px solid rgba(0,0,0,.3);cursor:pointer}.feed-row .feed-value{flex:none;width:32px;text-align:right;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}.wq-row{display:flex;align-items:center;gap:8px;font-size:11px}.wq-row .wq-label{flex:none;color:var(--text-dim);width:36px}.wq-bar{flex:1;height:6px;background:#00000059;border-radius:999px;overflow:hidden;border:1px solid var(--border-soft)}.wq-fill{height:100%;background:var(--teal);border-radius:999px;transition:width .3s ease,background .3s ease}.wq-row .wq-pct{flex:none;width:36px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}.event-badges{display:flex;flex-wrap:wrap;gap:4px;min-height:0}.event-badges .badge{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;white-space:nowrap;line-height:1.3}.event-badges .badge.positive{background:#3fb6a833;color:var(--teal);border:1px solid rgba(63,182,168,.3)}.event-badges .badge.negative{background:#e5766b33;color:var(--danger);border:1px solid rgba(229,118,107,.3)}.event-badges .badge.neutral{background:#f5c45126;color:var(--accent);border:1px solid rgba(245,196,81,.2)}.upg-tier{margin-left:auto;font-size:10px!important;padding:3px 7px!important;flex:none;white-space:nowrap;background:#ffffff0a!important}.upg-tier:hover:not(:disabled){background:#ffffff1a!important}.upg-tier:disabled{opacity:.35!important}.event-toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%);z-index:45;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);box-shadow:var(--shadow);backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;animation:slide-up .3s ease;text-align:center;max-width:360px}.event-toast .evt-name{display:block;font-size:12px;font-weight:700;margin-bottom:2px}.event-toast .evt-desc{display:block;font-size:11px;opacity:.8}.event-toast.positive{background:#3fb6a838;border-color:#3fb6a866}.event-toast.positive .evt-name{color:var(--teal)}.event-toast.negative{background:#e5766b38;border-color:#e5766b66}.event-toast.negative .evt-name{color:var(--danger)}.event-toast.neutral{background:#f5c4512e;border-color:#f5c4514d}.event-toast.neutral .evt-name{color:var(--accent)}@keyframes slide-up{0%{transform:translate(-50%) translateY(20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.panel.collapsible h2{cursor:pointer}.panel.collapsed{max-height:40px;overflow:hidden}.panel.collapsible .chevron{font-size:10px;transition:transform .2s ease;margin-left:auto;opacity:.5}.panel.collapsed .chevron{transform:rotate(-90deg)}.panel.left .cage-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}.panel.left .cage-list::-webkit-scrollbar{width:8px}.panel.left .cage-list::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:8px}.toast-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:#00000073;backdrop-filter:blur(4px);pointer-events:auto;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.offline-modal{background:var(--bg-glass-strong);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px;min-width:280px;max-width:90vw;text-align:center}.offline-modal h3{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.offline-modal .sub{font-size:11px;color:var(--text-faint);margin-bottom:14px}.offline-modal .row{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px solid var(--border-soft)}.offline-modal .row:last-of-type{border-bottom:none}.offline-modal .row .v{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}.offline-modal .row .v.earned{color:var(--teal)}.offline-modal .dismiss{margin-top:14px}.float-up{position:fixed;pointer-events:none;font-size:14px;font-weight:700;color:var(--accent);text-shadow:0 0 10px rgba(245,196,81,.5);z-index:60;animation:floatUp 1.1s ease-out forwards}@keyframes floatUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-46px);opacity:0}}.loader{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#061017;z-index:100;transition:opacity .5s ease}.loader.hidden{opacity:0;pointer-events:none}.loader-ring{width:52px;height:52px;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loader-label{font-size:13px;letter-spacing:.06em;color:var(--text-dim);font-family:var(--font)}.tier-group{margin-bottom:6px}.tier-group h3{margin:10px 4px 6px}.tier-group .upgrade-list{display:flex;flex-direction:column;gap:6px}.upgrade.locked-upgrade{opacity:.4;cursor:default;border-style:dashed}.upgrade.locked-upgrade:hover:not(:disabled){background:#ffffff08;border-color:var(--border-soft)}.show-locked-row{display:flex;justify-content:flex-end;margin-bottom:4px}.harvest-all{margin-bottom:6px;animation:fade-in .2s ease}.location-row{display:flex;align-items:center;gap:9px;padding:8px 10px;margin-bottom:6px;background:#ffffff08;border:1px solid var(--border-soft);border-radius:var(--radius-sm)}.location-row .info{flex:1;min-width:0}.location-row .name{font-size:13px;font-weight:600}.location-row .swahili{font-size:11px;color:var(--text-faint);font-style:italic}.location-row .status{font-size:11px;color:var(--text-dim);margin-top:2px}.location-row .status.unlocked{color:var(--teal)}.location-row{box-shadow:none}.location-row .right{display:flex;align-items:center;gap:6px}.location-row.loc-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft) inset}.loc-active{font-size:10px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.04em}@media (max-width: 720px){.hud{height:48px;padding:0 10px}.hud .title{display:none}.hud .money{font-size:20px}.hud .stats{font-size:10px}.panel{position:fixed;top:auto;left:8px;right:8px;width:auto;max-height:38vh}.panel.left{bottom:8px}.panel.right{top:56px;bottom:auto;max-height:36vh}.panel.left{max-height:40vh}.event-toast{bottom:56px;max-width:90vw}}