:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--card: #111;--border: rgba(255, 255, 255, .1);--accent: #2563eb;--green: #22c55e;--amber: #f59e0b;--red: #ef4444;--pink: #ec4899}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:#fafafa}.app{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:linear-gradient(135deg,#0d2818,#0a1628);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.75rem}.header h1{font-size:1.4rem;margin:0;letter-spacing:-.02em}.subtitle{font-size:.8rem;color:#ffffff80;display:block}.header-stats{display:flex;gap:1.25rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.1rem}.stat-icon{font-size:1.1rem}.stat-val{font-size:1.2rem;font-weight:700;font-family:ui-monospace,monospace}.stat-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:#ffffff73}.message-bar{background:linear-gradient(90deg,#1a2e1a,#1a1a2e);border-bottom:1px solid var(--border);padding:.6rem 1.5rem;font-size:.85rem;color:#a7f3d0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;animation:slideDown .3s ease}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.dismiss{font-size:1.1rem;opacity:.5}.main-layout{display:flex;flex:1;overflow:hidden}.map-section{flex:1;padding:1rem 1.5rem;overflow-y:auto}.map-section h2{font-size:1rem;margin-bottom:.75rem;color:#ffffffb3}.map-controls{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-bottom:.75rem}.map-controls button{width:36px;height:36px;border:1px solid var(--border);background:var(--card);border-radius:.375rem;cursor:pointer;font-size:1rem;transition:all .15s}.map-controls button:hover{background:#222;border-color:var(--accent)}.map-controls div{display:flex;gap:.25rem}.map-grid{display:inline-block;border:1px solid var(--border);border-radius:.5rem;overflow:hidden;margin-bottom:1rem}.map-row{display:flex}.map-tile{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;transition:all .15s;position:relative}.map-tile:hover{filter:brightness(1.3);z-index:1}.map-tile.player-tile{z-index:2;animation:playerPulse 1.5s ease infinite}@keyframes playerPulse{0%,to{box-shadow:0 0 #2563eb66}50%{box-shadow:0 0 8px 2px #2563eb66}}.map-tile.has-animal{animation:animalBounce 2s ease infinite}@keyframes animalBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.water-anim{animation:waterWave 2s ease-in-out infinite;color:#60a5fa}@keyframes waterWave{0%,to{opacity:.6}50%{opacity:1}}.nearby-list{margin-top:.5rem}.nearby-list h3{font-size:.9rem;color:#fff9;margin-bottom:.5rem}.empty-hint{font-size:.8rem;color:#ffffff4d;font-style:italic}.animal-card{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:.5rem;margin-bottom:.5rem;background:#ffffff05;cursor:pointer;transition:all .2s}.animal-card:hover{background:#ffffff0d;border-color:#fff3}.animal-card.wild{border-left:3px solid var(--amber)}.animal-card.rescued{border-left:3px solid var(--green);flex-wrap:wrap}.animal-emoji{font-size:1.5rem}.animal-info{flex:1;min-width:0}.animal-info strong{display:block;font-size:.9rem}.condition-badge{display:inline-block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.15rem .4rem;border-radius:.25rem;color:#fff;margin-top:.2rem}.condition-badge.large{font-size:.75rem;padding:.25rem .6rem}.stat-bars{margin-top:.3rem}.bar-row{display:flex;align-items:center;gap:.35rem;margin-bottom:.15rem}.bar-row span:first-child{font-size:.7rem}.bar{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;max-width:80px}.bar-fill{height:100%;border-radius:3px;transition:width .5s ease}.bar-fill.health{background:linear-gradient(90deg,var(--red),var(--green))}.bar-fill.happy{background:linear-gradient(90deg,var(--amber),var(--pink))}.bar-val{font-size:.65rem;color:#fff6;font-family:ui-monospace,monospace;min-width:20px}.shelter-tag{display:inline-block;font-size:.65rem;background:#22c55e26;color:var(--green);padding:.1rem .4rem;border-radius:.2rem;margin-top:.25rem}.care-buttons{display:flex;gap:.3rem}.btn{border:1px solid var(--border);background:var(--card);color:#fafafa;padding:.35rem .65rem;border-radius:.375rem;cursor:pointer;font-size:.75rem;transition:all .15s}.btn:hover{background:#222;border-color:#ffffff40}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-rescue{background:linear-gradient(135deg,#1d4ed8,#7c3aed);border-color:transparent;font-weight:600}.btn-rescue:hover{background:linear-gradient(135deg,#2563eb,#8b5cf6)}.btn-rescue-large{background:linear-gradient(135deg,#1d4ed8,#7c3aed);border:none;color:#fff;padding:.7rem 1.5rem;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;margin-top:1rem;transition:all .2s}.btn-rescue-large:hover{transform:scale(1.03);box-shadow:0 4px 20px #2563eb4d}.btn-rescue-large:disabled{opacity:.4;transform:none;box-shadow:none}.btn-build{background:linear-gradient(135deg,#16a34a,#0d9488);border-color:transparent;font-weight:600}.btn-small{font-size:.65rem;padding:.2rem .4rem}.btn-tiny{font-size:.85rem;padding:.15rem .3rem;line-height:1}.side-panel{width:320px;background:#0d0d0d;border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}.panel-section{border-bottom:1px solid var(--border)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;cursor:pointer}.panel-header h3{font-size:.85rem;font-weight:600}.panel-body{padding:0 1rem .75rem}.build-options{padding:0 1rem .75rem;display:flex;flex-direction:column;gap:.4rem}.build-option{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--border);background:#ffffff05;border-radius:.4rem;cursor:pointer;color:#fafafa;transition:all .2s}.build-option:hover:not(:disabled){background:#22c55e1a;border-color:var(--green)}.build-option:disabled{opacity:.35;cursor:not-allowed}.build-emoji{font-size:1.4rem}.build-option strong{display:block;font-size:.85rem}.build-cost{font-size:.7rem;color:#fff6}.shelter-card{border:1px solid var(--border);border-radius:.4rem;padding:.5rem .6rem;margin-bottom:.5rem;background:#ffffff05}.shelter-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}.shelter-header strong{flex:1;font-size:.85rem}.shelter-cap{font-size:.7rem;color:#fff6;font-family:ui-monospace,monospace}.shelter-occupants{display:flex;gap:.25rem;flex-wrap:wrap;min-height:1.5rem;align-items:center}.occupant{font-size:1.1rem}.assign-area{display:flex;align-items:center;gap:.3rem;margin-top:.35rem;padding-top:.35rem;border-top:1px dashed var(--border)}.assign-label{font-size:.65rem;color:#ffffff59}.tips{padding:.75rem 1rem}.tips h3{font-size:.85rem;margin-bottom:.4rem}.tips ul{list-style:none;padding:0}.tips li{font-size:.75rem;color:#ffffff73;padding:.2rem 0 .2rem 1rem;position:relative}.tips li:before{content:"•";position:absolute;left:0;color:var(--green)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#151515;border:1px solid var(--border);border-radius:1rem;padding:2rem;max-width:380px;width:90%;text-align:center;position:relative;animation:modalPop .3s ease}@keyframes modalPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;color:#fff6;font-size:1.5rem;cursor:pointer}.modal-emoji{font-size:4rem;display:block;margin-bottom:.5rem}.modal h2{margin:0 0 .25rem;font-size:1.3rem}.modal-type{color:#ffffff80;font-size:.85rem;margin-bottom:.75rem}.modal-desc{font-size:.9rem;color:#ffffffa6;margin-top:.75rem;line-height:1.5}@media(max-width:800px){.main-layout{flex-direction:column}.side-panel{width:100%;border-left:none;border-top:1px solid var(--border)}.map-tile{width:22px;height:22px;font-size:.55rem}.header-stats{gap:.75rem}}