:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0e1a2b;color:#fafafa;overflow:hidden}.game-container{width:100vw;height:100vh;position:relative;overflow:hidden}.game-world{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#1a3a4a,#0e2a1a 60%,#1a2a0e)}.grass-patch{position:absolute;border-radius:50%;opacity:.3;pointer-events:none}.tree{position:absolute;pointer-events:none;z-index:1}.tree-trunk{width:12px;height:30px;background:#5a3a1a;border-radius:3px;margin:0 auto}.tree-top{width:40px;height:40px;background:#2a7a3a;border-radius:50%;margin-bottom:-5px}.hud{position:absolute;top:16px;left:16px;z-index:100;display:flex;flex-direction:column;gap:8px}.hud-stat{background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:12px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.1)}.hud-stat .icon{font-size:18px}.balls-counter{display:flex;gap:4px;align-items:center}.ball-pip{width:12px;height:12px;border-radius:50%;background:#f44;border:2px solid #ffaaaa;transition:all .3s}.ball-pip.empty{background:#333;border-color:#555;opacity:.4}.collection-btn{position:absolute;top:16px;right:16px;z-index:100;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#fff;padding:10px 20px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.collection-btn:hover{background:#323250cc;transform:scale(1.05)}.player{position:absolute;z-index:10;transition:none;pointer-events:none}.player-body{width:32px;height:40px;position:relative}.player-head{width:28px;height:28px;background:#fc8;border-radius:50%;margin:0 auto;position:relative;border:2px solid #dd9944}.player-eye{position:absolute;width:4px;height:5px;background:#333;border-radius:50%;top:10px}.player-eye.left{left:7px}.player-eye.right{right:7px}.player-torso{width:24px;height:16px;background:#48f;border-radius:4px;margin:-4px auto 0;border:2px solid #2266dd}.player-hat{position:absolute;top:-8px;left:2px;width:28px;height:14px;background:#f64;border-radius:14px 14px 0 0;border:2px solid #cc4422;border-bottom:none}.creature{position:absolute;z-index:5;cursor:pointer;transition:none;pointer-events:auto}.creature:hover .creature-sprite{filter:brightness(1.3)}.creature-sprite{display:flex;flex-direction:column;align-items:center;transition:filter .15s}.creature-body{position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;border:3px solid;box-shadow:0 4px 12px #0000004d}.creature-name{font-size:10px;font-weight:700;text-align:center;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;background:#00000080;padding:1px 6px;border-radius:6px}.rarity-common .creature-body{border-color:#aaa}.rarity-uncommon .creature-body{border-color:#4c4;box-shadow:0 0 12px #44cc444d}.rarity-rare .creature-body{border-color:#48f;box-shadow:0 0 16px #48f6}.rarity-epic .creature-body{border-color:#a4f;box-shadow:0 0 20px #aa44ff80}.rarity-legendary .creature-body{border-color:#fa0;box-shadow:0 0 24px #fa09;animation:legendary-glow 1.5s ease-in-out infinite}@keyframes legendary-glow{0%,to{box-shadow:0 0 20px #ffaa0080}50%{box-shadow:0 0 35px #fa0c}}.creature.catching{animation:shake .1s linear infinite}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.catch-ball{position:absolute;z-index:50;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f66,#c22);border:3px solid #ffaaaa;pointer-events:none;box-shadow:0 2px 8px #0006}.catch-ball:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#fff;border-radius:50%;border:2px solid #ddd}.catch-progress-ring{position:absolute;z-index:60;pointer-events:none}.catch-progress-ring svg{transform:rotate(-90deg)}.catch-progress-ring circle{fill:none;stroke-width:4}.catch-progress-ring .bg{stroke:#fff3}.catch-progress-ring .fill{stroke:#4f4;stroke-linecap:round;transition:stroke-dashoffset .1s}.catch-result{position:absolute;z-index:70;font-size:24px;font-weight:900;pointer-events:none;animation:result-pop 1s ease-out forwards;text-shadow:0 2px 6px rgba(0,0,0,.5)}.catch-result.success{color:#4f8}.catch-result.fail{color:#f44}@keyframes result-pop{0%{transform:scale(.5) translateY(0);opacity:1}50%{transform:scale(1.3) translateY(-20px);opacity:1}to{transform:scale(1) translateY(-60px);opacity:0}}.sparkle{position:absolute;z-index:65;pointer-events:none;font-size:16px;animation:sparkle-fly .8s ease-out forwards}@keyframes sparkle-fly{0%{transform:translate(0) scale(0);opacity:1}50%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2)}}.collection-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:200;display:flex;justify-content:flex-end;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.collection-panel{width:420px;max-width:90vw;background:#141e30;border-left:1px solid rgba(255,255,255,.1);overflow-y:auto;padding:24px;animation:slide-in .3s ease-out}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel-header h2{font-size:22px;font-weight:700}.close-btn{background:#ffffff1a;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.close-btn:hover{background:#fff3}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.creature-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;text-align:center;transition:all .2s}.creature-card:hover{background:#ffffff14;transform:translateY(-2px)}.creature-card.locked{opacity:.3;filter:grayscale(1)}.creature-card .card-emoji{font-size:32px;margin-bottom:4px}.creature-card .card-name{font-size:11px;font-weight:600;margin-bottom:2px}.creature-card .card-rarity{font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.card-rarity.common{color:#aaa}.card-rarity.uncommon{color:#4c4}.card-rarity.rare{color:#48f}.card-rarity.epic{color:#a4f}.card-rarity.legendary{color:#fa0}.creature-card .card-count{font-size:10px;color:#ffffff80;margin-top:4px}.instructions{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:100;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 20px;border-radius:12px;font-size:12px;color:#fff9;display:flex;gap:16px;border:1px solid rgba(255,255,255,.08);white-space:nowrap}.instructions kbd{background:#ffffff26;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:11px}.restock-zone{position:absolute;bottom:60px;left:50%;transform:translate(-50%);z-index:90;background:#ffc83226;border:2px dashed rgba(255,200,50,.4);border-radius:16px;padding:8px 24px;font-size:13px;font-weight:600;color:#fc4;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.restock-zone:hover{background:#ffc83240;border-color:#ffc83299}.restock-zone.hidden{display:none}.tame-notif{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:2px solid rgba(255,200,50,.5);border-radius:20px;padding:32px 48px;text-align:center;animation:notif-pop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes notif-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.tame-notif .notif-emoji{font-size:56px;margin-bottom:8px}.tame-notif .notif-title{font-size:24px;font-weight:800;background:linear-gradient(135deg,#fc4,#f84);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.tame-notif .notif-name{font-size:16px;color:#ffffffb3;margin-bottom:12px}.tame-notif .notif-dismiss{font-size:12px;color:#fff6}.refill-notif{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:2px solid rgba(68,204,68,.5);border-radius:16px;padding:20px 36px;text-align:center;animation:notif-pop .4s cubic-bezier(.34,1.56,.64,1);font-size:18px;font-weight:700;color:#4c4}.minimap{position:absolute;bottom:60px;right:16px;z-index:100;width:140px;height:100px;background:#00000080;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;pointer-events:none}.minimap-dot{position:absolute;width:4px;height:4px;border-radius:50%}.minimap-player{background:#48f;width:6px;height:6px;z-index:2}.minimap-creature{opacity:.7}