:root{--bg: #12161b;--panel: #1b222b;--panel-2: #232c37;--text: #e6ebf1;--muted: #9aa7b5;--accent: #5fb06a;--border: #2c3742;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}.menu{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}.menu h1{font-size:42px;margin:0;letter-spacing:1px}.menu h1 span{color:var(--accent)}.menu p{color:var(--muted);max-width:480px;margin:0;line-height:1.5}.menu .buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:15px;cursor:pointer;min-height:44px}button:hover{background:#2b3644}button.primary{background:var(--accent);color:#0e1a10;border-color:var(--accent);font-weight:600}button.active{outline:2px solid var(--accent)}.sim{height:100%;display:flex;flex-direction:column}.sim .bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap}.sim .bar .spacer{flex:1}.sim .stage{flex:1;position:relative;overflow:hidden;background:#0d1712}.sim .stage-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}.legend .item{display:flex;align-items:center;gap:6px}.legend .item.clickable{cursor:pointer}.legend .item.clickable:hover{color:var(--text)}.legend .dot{width:12px;height:12px;border-radius:50%}.overlay{position:absolute;z-index:5;pointer-events:none}.overlay.tl{top:8px;left:10px;background:#0d171299;padding:3px 8px;border-radius:6px}.minimap{position:absolute;right:10px;bottom:10px;z-index:6;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:#0a120d}.graph{position:absolute;right:10px;top:10px;z-index:6;border:1px solid var(--border);border-radius:6px}.inspector{position:absolute;left:10px;bottom:10px;z-index:7;width:220px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px}.inspector .ins-title{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:8px}.inspector .ins-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0}.inspector .dot{width:12px;height:12px;border-radius:50%}.inspector button{width:100%;margin-top:8px;min-height:36px}.barwrap{flex:1;height:8px;background:#1a222b;border-radius:4px;overflow:hidden}.barfill{display:block;height:100%}.toasts{position:absolute;top:44px;left:50%;transform:translate(-50%);z-index:8;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.toast{background:#2a2320;border:1px solid #4a3a2a;color:#e8d08a;padding:7px 14px;border-radius:8px;font-size:13px;box-shadow:0 4px 14px #0006}.toast.extinct{background:#2f1e22;border-color:#5a2a2a;color:#f2a6a6}.toast.collapse{background:#331a1a;border-color:#6a2a2a;color:#f4b0b0;font-weight:600}.spawn-panel{background:var(--panel-2);border-bottom:1px solid var(--border);padding:8px 12px}.spawn-panel>.hint{margin-bottom:6px}.spawn-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}.spawn-row{display:flex;align-items:center;gap:8px}.spawn-row .sr-name{flex:1;font-size:14px}.spawn-row input{width:64px}.spawn-row button{min-height:34px;padding:5px 12px}.hint{font-size:12px;color:var(--muted)}.tag{font-variant-numeric:tabular-nums}.editor{height:100%;display:grid;grid-template-columns:320px 1fr;gap:0}@media (max-width: 780px){.editor{grid-template-columns:1fr;overflow:auto}}.editor .side{background:var(--panel);border-right:1px solid var(--border);padding:14px;overflow:auto}.editor .main{padding:14px 18px;overflow:auto}.editor h2{margin:4px 0 12px;font-size:20px}.preview-box{background:#0d1712;border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;justify-content:center}.preview-box canvas{image-rendering:pixelated;width:176px;height:176px}.field{margin:10px 0}.field>label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}.field .row{display:flex;align-items:center;gap:8px}.field input[type=range]{flex:1}.field .val{width:42px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{padding:6px 10px;min-height:36px;font-size:13px}select,input[type=text]{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px;font-size:14px;min-height:40px}.stats{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:12px}.stats .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px}.stats .grid .k{color:var(--muted)}.stats .grid .v{text-align:right;font-variant-numeric:tabular-nums}.msg{font-size:13px;padding:6px 8px;border-radius:6px;margin-top:6px}.msg.err{background:#3a1e22;color:#f2a6a6}.msg.warn{background:#3a331e;color:#e8d08a}.foods{display:flex;gap:6px;flex-wrap:wrap}.chip{background:#24303a;border:1px solid var(--border);border-radius:999px;padding:3px 9px;font-size:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.newworld{width:min(520px,92vw);text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px}.seg.big button{padding:12px 20px;font-size:16px}.library{height:100%;display:flex;flex-direction:column}.lib-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--border)}.lib-head h2{margin:0;font-size:20px}.lib-head .spacer{flex:1}.lib-body{flex:1;overflow:auto;padding:14px}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}.card-top{display:flex;gap:10px;align-items:center}.thumb{width:72px;height:72px;image-rendering:pixelated;background:#0d1712;border-radius:8px}.card-meta{min-width:0}.card-name{font-weight:600;font-size:15px;margin-bottom:4px;word-break:break-word}.card-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.card-actions button{padding:5px 9px;min-height:32px;font-size:12px}.card-cols{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.chip.mini{font-size:11px;padding:2px 8px;cursor:pointer;opacity:.6}.chip.mini.on{opacity:1;border-color:var(--accent);color:var(--accent)}.collections{margin-top:22px}.collections h3{font-size:16px;margin:0 0 8px}.col-row{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin-bottom:8px}.col-row .spacer{flex:1}.col-row button{padding:5px 9px;min-height:32px;font-size:12px}.settings{width:min(520px,92vw);text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px}.tutorial-card{width:min(460px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;text-align:center}.tutorial-card h2{margin:0 0 10px}.tutorial-dots{display:flex;gap:6px;justify-content:center;margin:14px 0}.tutorial-dots .d{width:8px;height:8px;border-radius:50%;background:var(--border)}.tutorial-dots .d.on{background:var(--accent)}
