body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);overflow:hidden}.App{width:100vw;height:100vh;display:flex;flex-direction:column;background:#1a1a2e;color:#fff}.App h1{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:15px 20px;text-align:center;font-size:28px;margin:0;border-bottom:2px solid #667eea}.game-container{display:flex;flex:1;gap:0}.canvas-wrapper{flex:1;position:relative;background:linear-gradient(180deg,#0f3460 0%,#16213e 100%)}.game-canvas{display:block;width:100%;height:100%;cursor:crosshair}canvas{display:block;width:100%;height:100%}.ui-panel{width:300px;background:rgba(22,33,62,.95);border-left:2px solid #667eea;padding:20px;overflow-y:auto;box-shadow:-5px 0 20px #00000080}.header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:15px 20px;text-align:center;font-size:24px;font-weight:700;border-bottom:2px solid #667eea}.section{margin:20px 0;padding:15px;background:rgba(102,126,234,.1);border-radius:8px;border-left:3px solid #667eea}.section-title{font-size:14px;font-weight:700;color:#667eea;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.button-group{display:flex;flex-direction:column;gap:8px}button{padding:10px 15px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:700;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}button:active{transform:translateY(0)}button.secondary{background:rgba(102,126,234,.2);border:1px solid #667eea}button.secondary:hover{background:rgba(102,126,234,.3)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.stat-item{background:rgba(0,0,0,.3);padding:10px;border-radius:5px;text-align:center;border:1px solid rgba(102,126,234,.3)}.stat-label{font-size:11px;color:#999;text-transform:uppercase}.stat-value{font-size:18px;font-weight:700;color:#667eea;margin-top:5px}.creatures-list{max-height:200px;overflow-y:auto;background:rgba(0,0,0,.2);border-radius:5px;padding:10px}.creature-item{padding:8px;margin:5px 0;background:rgba(102,126,234,.15);border-left:3px solid #667eea;border-radius:3px;font-size:12px;cursor:pointer;transition:all .2s ease}.creature-item:hover{background:rgba(102,126,234,.25);padding-left:12px}.creature-name{font-weight:700;color:#667eea}.creature-info{font-size:11px;color:#aaa;margin-top:3px}.info-text{font-size:12px;color:#aaa;line-height:1.5;margin-top:10px}.speed-control{margin:15px 0}.speed-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px;color:#667eea}input[type=range]{width:100%;height:6px;border-radius:3px;background:rgba(102,126,234,.2);outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 0 10px #667eea80}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 0 10px #667eea80}.tooltip{font-size:11px;color:#999;margin-top:5px;padding:8px;background:rgba(0,0,0,.3);border-radius:3px;border-left:2px solid #667eea}.ui-panel{width:300px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:20px;overflow-y:auto;box-shadow:-2px 0 10px #0003;font-family:Arial,sans-serif}.ui-panel h2{margin:0 0 20px;font-size:24px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.ui-panel h3{margin:15px 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:1px;opacity:.9}.section{margin-bottom:20px;padding:10px;background:rgba(255,255,255,.1);border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section p{margin:5px 0;font-size:13px;opacity:.95}.ui-panel button{width:100%;padding:10px 15px;margin:5px 0;background:rgba(255,255,255,.2);color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer;font-size:13px;font-weight:700;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.ui-panel button:hover{background:rgba(255,255,255,.3);border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.ui-panel button.active{background:rgba(255,255,255,.4);border-color:#fff;box-shadow:0 0 10px #ffffff80}.ui-panel button.danger{background:rgba(244,67,54,.6);border-color:#f44336cc}.ui-panel button.danger:hover{background:rgba(244,67,54,.8);border-color:#f44336}.section.info{margin-top:30px;background:rgba(255,255,255,.15);border-left:4px solid rgba(255,255,255,.5)}.section.info p{font-size:12px;line-height:1.5;margin:8px 0}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;font-family:Arial,sans-serif;background:#1a1a2e;color:#fff}body{overflow:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:rgba(102,126,234,.1)}::-webkit-scrollbar-thumb{background:rgba(102,126,234,.5);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(102,126,234,.7)}