*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;overflow:hidden;background:#001020;color:#fff}#app{width:100vw;height:100vh;position:relative}#gameCanvas{width:100%;height:100%;display:block}#hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#fffc;text-shadow:0 0 3px rgba(0,0,0,.5)}#score{position:absolute;top:20px;left:20px;font-size:20px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#speedIndicator{position:absolute;top:20px;left:50%;transform:translate(-50%);font-size:18px;font-weight:700;color:#0f8;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#distanceIndicator{position:absolute;top:50px;left:50%;transform:translate(-50%);font-size:16px;font-weight:700;color:#fc0;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#distanceIndicator.in-range{color:#0f0;animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}#compass{position:absolute;top:20px;right:20px;width:60px;height:60px;border:2px solid rgba(255,255,255,.5);border-radius:50%;background:#0000004d}#compass:after{content:"N";position:absolute;top:5px;left:50%;transform:translate(-50%);font-size:12px}#zoneLabel{position:absolute;top:60px;left:20px;font-size:18px;color:#ffffffe6;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#creatureLabel{position:absolute;top:52%;left:50%;transform:translate(-50%);font-size:16px;color:#ffffdce6;text-shadow:2px 2px 4px rgba(0,0,0,.5);padding:4px 8px;background:#0000004d;border-radius:4px;opacity:0;transition:opacity .2s}#creatureLabel.visible{opacity:1}#pointerLockPrompt{position:absolute;top:50%;left:50%;transform:translate(-50%,100px);font-size:20px;font-weight:700;color:#ff0;text-shadow:2px 2px 8px rgba(0,0,0,.8);background:#0009;padding:15px 30px;border-radius:10px;border:2px solid #ffff00;z-index:100;animation:pulse-prompt 2s ease-in-out infinite;pointer-events:none;transition:opacity .3s}#pointerLockPrompt.hidden{opacity:0}@keyframes pulse-prompt{0%,to{transform:translate(-50%,100px) scale(1)}50%{transform:translate(-50%,100px) scale(1.05)}}.panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#001428f2;border:2px solid rgba(100,200,255,.5);border-radius:10px;padding:20px;max-width:500px;max-height:80vh;overflow-y:auto;z-index:100;pointer-events:all}.panel.hidden{display:none}.panel h2{margin-bottom:15px;color:#40e0d0}.panel h3{margin-top:15px;margin-bottom:10px;color:#60c0ff}.panel p{margin:5px 0;line-height:1.4}.panel label{display:block;margin:10px 0}.panel button{background:#0080ff;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;margin-top:10px}.panel button:hover{background:#0060dd}#boopdexList{max-height:400px;overflow-y:auto}.boopdex-entry{background:#ffffff0d;padding:10px;margin:5px 0;border-radius:5px}.boopdex-entry h4{color:#40e0d0;margin-bottom:5px}.boopdex-entry .scientific{font-style:italic;color:#aaa;font-size:14px}.boopdex-entry .count{color:gold;font-weight:700}#mobileWarning{position:absolute;top:0;left:0;right:0;background:#ffc800e6;color:#333;padding:10px;text-align:center;z-index:200}#mobileWarning.hidden{display:none}#minimap{position:absolute;bottom:20px;right:20px;width:150px;height:150px;border:2px solid rgba(255,255,255,.3);border-radius:5px;background:#001428b3}.boop-particle{position:absolute;width:4px;height:4px;background:radial-gradient(circle,#ffff64,#ffffc800 70%);pointer-events:none;animation:sparkle .8s ease-out forwards}.boop-success{position:absolute;color:#ff0;font-size:24px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8);pointer-events:none;z-index:1000;transition:transform 1s ease-out,opacity 1s ease-out;transform:translateY(0);opacity:1}@keyframes sparkle{0%{transform:scale(0) translate(0);opacity:1}to{transform:scale(3) translate(var(--dx),var(--dy));opacity:0}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000a14f2;z-index:2000;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal.hidden{display:none}.modal-content{background:linear-gradient(135deg,#001a33,#036);border:3px solid #00ccff;border-radius:20px;padding:30px;max-width:700px;max-height:90vh;overflow-y:auto;box-shadow:0 0 50px #00c8ff80;animation:modalAppear .5s ease-out}@keyframes modalAppear{0%{transform:scale(.8) translateY(50px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.modal-content h1{color:#0fc;text-align:center;font-size:36px;margin:0 0 10px;text-shadow:0 0 20px rgba(0,255,204,.5)}.subtitle{text-align:center;color:#6cf;font-style:italic;font-size:14px;margin-bottom:20px}.modal-section{margin:20px 0;padding:15px;background:#0032644d;border-radius:10px}.modal-section h3{color:#0cf;margin-bottom:10px;font-size:20px}.modal-section p{color:#fff;line-height:1.6;margin:10px 0}.modal-section ul{color:#fff;line-height:1.8;margin-left:20px}.modal-section li{margin:8px 0}.controls-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}.controls-grid div{color:#fff;padding:5px;background:#0064c833;border-radius:5px}.controls-grid strong{color:#ff0;margin-right:10px}.start-button{display:block;margin:30px auto 20px;padding:15px 40px;background:linear-gradient(45deg,#0f8,#0cf);color:#001a33;border:none;border-radius:30px;font-size:20px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 20px #0f86}.start-button:hover{transform:scale(1.05);box-shadow:0 8px 30px #0f89;background:linear-gradient(45deg,#0fa,#0ef)}.disclaimer{text-align:center;color:#888;font-size:12px;font-style:italic;margin-top:20px}