:root{--bg: #0a0f1a;--panel: rgba(16, 24, 40, .82);--panel-solid: #0f1729;--line: rgba(120, 150, 200, .18);--text: #e6edf7;--muted: #8ea3c0;--accent: #38bdf8;--danger: #f43f5e}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Malgun Gothic,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}#app{position:fixed;inset:0;display:flex;flex-direction:column}#hud-top{flex:none;position:relative;z-index:5;background:linear-gradient(180deg,#0a0f1af5,#0a0f1adb);padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line)}#stage-wrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:none}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#hud-bottom{flex:none;position:relative;z-index:5;background:linear-gradient(0deg,#0a0f1af5,#0a0f1adb);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line)}#ui-root{position:absolute;inset:0;pointer-events:none;z-index:20}#ui-root button{pointer-events:auto}.startup-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;color:var(--muted);background:var(--bg);font-size:14px;line-height:1.5}.startup-status strong{color:var(--text);font-size:17px}.startup-status span{max-width:360px}.startup-status.startup-error{color:#fda4af}.btn{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:14px;font-weight:600;cursor:pointer;min-width:42px;min-height:38px}.btn:hover{border-color:var(--accent)}.btn.active{background:var(--accent);color:#04121f;border-color:var(--accent)}.hud-top{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.hud-time{font-size:15px;color:var(--muted)}.hud-time b{color:var(--text);font-size:17px;font-variant-numeric:tabular-nums}.controls{display:flex;gap:6px}.res-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 10px 8px}.res-card{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px 9px;text-align:left;cursor:pointer;color:var(--text);font:inherit;display:flex;flex-direction:column;gap:1px;transition:border-color .3s}.res-card:hover{border-color:var(--accent)}.res-card.danger{border-color:var(--danger);animation:danger-pulse 1.2s ease-in-out infinite}@keyframes danger-pulse{0%,to{box-shadow:0 0 #f43f5e00}50%{box-shadow:0 0 8px 1px #f43f5e73}}.res-card-name{font-size:10px;color:var(--muted);letter-spacing:.3px;white-space:nowrap}.res-card-body{display:flex;align-items:baseline;gap:4px}.res-card-val{font-size:15px;font-variant-numeric:tabular-nums}.sp-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px}.sp-chip{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 10px;cursor:pointer;color:var(--text);font-size:13px;min-height:42px;transition:border-color .15s,transform .12s}.sp-chip:hover{border-color:var(--accent);transform:translateY(-2px)}.sp-chip.empty{opacity:.45}.sp-glyph{font-size:13px;line-height:1}.sp-chip-name{color:var(--muted)}.sp-chip-count{font-size:15px;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}.modal-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#060a14b8;backdrop-filter:blur(3px);pointer-events:auto;padding:16px}.modal-overlay.hidden{display:none}.modal-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;padding:0 20px 18px;width:100%;max-width:400px;max-height:68vh;overflow-y:auto;touch-action:pan-y}.modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;margin:0 -20px 10px;padding:14px 20px 10px;background:var(--panel-solid);border-bottom:1px solid var(--line)}.modal-glyph{font-size:22px;line-height:1}.modal-title{font-size:19px;font-weight:800;flex:1}.modal-close{min-width:36px;min-height:36px;padding:4px 10px}.modal-role{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:6px}.modal-section{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin:14px 0 6px;padding-top:10px;border-top:1px solid var(--line)}.modal-rows{display:flex;flex-direction:column;gap:4px}.modal-row{display:flex;justify-content:space-between;gap:12px;font-size:13px}.modal-row span{color:var(--muted);flex:none}.modal-row b{text-align:right;font-weight:600}.modal-empty{font-size:13px;color:var(--muted)}.evo-item{padding:7px 0;border-bottom:1px dashed var(--line)}.evo-item:last-child{border-bottom:none}.evo-title{font-size:13px;font-weight:700;margin-bottom:2px}.evo-line{font-size:12px;color:var(--muted)}.choice-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#060a14b8;backdrop-filter:blur(3px)}.choice-overlay.hidden{display:none}.choice-title{font-size:20px;font-weight:700}.choice-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:0 16px;max-width:960px}.choice-card{width:260px;min-height:150px;text-align:left;background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;color:var(--text);transition:transform .12s,border-color .12s;display:flex;flex-direction:column;gap:8px}.choice-card:hover{transform:translateY(-4px);border-color:var(--accent)}.choice-cat{font-size:11px;color:var(--muted);letter-spacing:.5px;display:flex;align-items:center;gap:6px}.choice-glyph{font-size:13px}.choice-name{font-size:17px;font-weight:700}.choice-desc{font-size:13px;color:var(--muted);line-height:1.5;flex:1}.choice-rate{font-size:12px;color:var(--muted)}.choice-rate b{color:var(--text);font-variant-numeric:tabular-nums}.choice-reroll{margin-top:4px;font-size:15px;padding:10px 20px;background:var(--panel-solid);border:1px solid var(--line)}.choice-reroll:not(:disabled):hover{border-color:var(--accent)}.choice-reroll:disabled{opacity:.4;cursor:not-allowed}.choice-card{border-top:3px solid var(--sp-color, var(--accent))}.choice-card:hover{border-color:var(--sp-color, var(--accent))}.cat-photosynth{--sp-color: #4ade80}.cat-consumer{--sp-color: #60a5fa}.cat-predator{--sp-color: #f87171}.cat-decomposer{--sp-color: #facc15}.gameover-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#060a14d9;backdrop-filter:blur(4px);pointer-events:auto}.gameover-overlay.hidden{display:none}.gameover-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;padding:30px 40px;text-align:center;max-width:420px}.gameover-title{font-size:26px;font-weight:800;color:#f87171}.gameover-sub{color:var(--muted);margin:8px 0 20px}.gameover-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:22px}.gameover-stats div{display:flex;flex-direction:column;align-items:flex-start}.gameover-stats span{font-size:12px;color:var(--muted)}.gameover-stats b{font-size:20px}.btn-restart{width:100%;background:var(--accent);color:#04121f;border:none;font-size:16px;padding:12px}.start-screen{position:absolute;inset:0;pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 32%,#142033,#06101a 78%)}.start-screen.hidden{display:none}.start-card{text-align:center;max-width:420px}.start-logo{font-size:60px;line-height:1}.start-title{font-size:38px;font-weight:800;letter-spacing:5px;margin:8px 0 4px}.start-sub{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:26px}.start-actions{display:flex;flex-direction:column;gap:12px;align-items:center}.start-primary{background:var(--accent);color:#04121f;border:none;font-size:18px;font-weight:700;padding:14px 40px;min-width:220px}.start-secondary{font-size:16px;padding:12px 40px;min-width:220px}.help-list{display:flex;flex-direction:column;gap:9px}.help-row{display:flex;align-items:center;gap:12px}.help-icon{font-size:19px;width:26px;text-align:center;flex:none}.help-text{display:flex;flex-direction:column}.help-text b{font-size:14px}.help-text span{font-size:12px;color:var(--muted)}.modal-add{background:var(--sp-color, var(--accent));color:#04121f;border:none;font-weight:700;font-size:13px;padding:6px 12px;min-height:36px;white-space:nowrap}.modal-add:hover{filter:brightness(1.08);border:none}.cell-panel{position:absolute;inset:0;pointer-events:none}.cell-panel.hidden{display:none}.cell-panel .modal-card{position:absolute;left:12px;bottom:84px;width:300px;max-width:calc(100% - 24px);max-height:52vh;overflow-y:auto;pointer-events:auto}.feedback-layer{position:absolute;right:14px;bottom:74px;z-index:40;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.toast{background:var(--panel-solid);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:8px 12px;min-width:180px;max-width:260px;animation:toast-in .24s ease;opacity:1;transition:opacity .5s,transform .5s}.toast-out{opacity:0;transform:translateY(10px)}.toast-h{font-size:13px;font-weight:700;margin-bottom:3px}.toast-l{font-size:12px;color:var(--muted)}@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:none}}@media (max-width: 720px){.res-card{padding:4px 6px}.res-card-name{font-size:9px}.res-card-val{font-size:14px}.sp-bar{grid-template-columns:repeat(2,1fr)}.sp-chip{padding:9px 8px;font-size:12px}.sp-chip-name{display:inline}.choice-card{width:88vw;min-height:auto}.choice-grid{gap:10px}.feedback-layer{bottom:calc(122px + env(safe-area-inset-bottom));right:10px}.cell-panel .modal-card{left:8px;right:8px;width:auto;bottom:96px;max-height:42vh}.start-title{font-size:32px}}