*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#000;font-family:sans-serif}
canvas{display:block;width:100vw;height:100vh}
#topbar{position:fixed;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(0,30,60,0.92),rgba(0,30,60,0.75));backdrop-filter:blur(12px);border-bottom:1px solid rgba(100,200,255,0.2);z-index:100;padding:8px 12px}
#topbar-inner{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.app-title{font-size:16px;font-weight:700;color:#7ec8e3;white-space:nowrap}
.stat-pill{background:rgba(0,80,140,0.4);border:1px solid rgba(100,200,255,0.2);color:#a0d8ef;padding:4px 10px;border-radius:12px;font-size:12px;white-space:nowrap}
.stat-pill span{color:#fff;font-weight:bold}
.divider{width:1px;height:24px;background:rgba(100,200,255,0.2);flex-shrink:0}
.spawn-group{display:flex;align-items:center;gap:4px}
.spawn-group label{font-size:12px;color:#7ec8e3}
#species-select{background:rgba(0,60,100,0.6);border:1px solid rgba(100,200,255,0.3);color:#b0e0f5;padding:5px 8px;border-radius:8px;font-size:13px;cursor:pointer;outline:none;min-width:100px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(160,216,239,0.7)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px}
#species-select option{background:#0a2a40;color:#b0e0f5}
.btn{background:rgba(0,100,160,0.5);border:1px solid rgba(100,200,255,0.3);color:#b0e0f5;padding:5px 12px;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:all 0.15s}
.btn:active{transform:scale(0.95)}
.btn.primary{background:rgba(0,140,200,0.6);border-color:rgba(100,220,255,0.5);color:#fff}
.btn.active{background:rgba(255,180,0,0.4);border-color:rgba(255,200,0,0.6);color:#ffd700}
.btn.green{background:rgba(46,125,50,0.5);border-color:rgba(100,200,100,0.4);color:#a5d6a7}
.btn.orange{background:rgba(230,100,0,0.5);border-color:rgba(255,150,50,0.4);color:#ffcc80}
.save-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,60,100,0.9);color:#a5d6a7;padding:8px 20px;border-radius:20px;font-size:13px;border:1px solid rgba(100,200,100,0.3);z-index:300;pointer-events:none;opacity:0;transition:opacity 0.3s}
.save-toast.show{opacity:1}
.spacer{flex:1}
#mode-dot{width:8px;height:8px;border-radius:50%;background:#4fc3f7;flex-shrink:0;transition:background 0.3s}
#mode-dot.feed{background:#ffd700}
#feed-tooltip{position:fixed;pointer-events:none;z-index:200;background:rgba(0,60,100,0.85);color:#ffd700;padding:4px 12px;border-radius:8px;font-size:12px;display:none;border:1px solid rgba(255,215,0,0.3)}
@media(max-width:600px){.app-title{font-size:14px}.stat-pill{font-size:11px;padding:3px 7px}.btn{font-size:12px;padding:5px 8px}#species-select{min-width:80px}}