*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center}#game-container{width:100%;max-width:1280px;height:720px;background:#1a1a2e;border-radius:16px;overflow:hidden;box-shadow:0 25px 50px -12px #00000080;position:relative}#loading-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;background:linear-gradient(135deg,#667eea,#764ba2)}#loading-screen h1{font-size:4rem;color:#fff;margin-bottom:1rem;text-shadow:0 4px 8px rgba(0,0,0,.3)}#loading-screen p{font-size:1.5rem;color:#e0e7ff}#dog-select{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;background:#f8fafc}#dog-select h1{font-size:3rem;color:#1e293b;margin-bottom:.5rem}.subtitle{font-size:1.25rem;color:#64748b;margin-bottom:2rem}.dog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;width:100%;max-width:1000px;margin-bottom:2rem}.dog-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .3s ease;cursor:pointer;border:3px solid transparent}.dog-card:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.dog-card.selected{border-color:#6366f1;background:linear-gradient(135deg,#eef2ff,#e0e7ff)}.dog-card h2{font-size:1.5rem;color:#1e293b;margin-bottom:.5rem}.dog-card .breed{font-size:.875rem;color:#64748b;margin-bottom:1rem}.dog-card .trait{font-weight:600;color:#334155;margin-bottom:.25rem}.dog-card .trait-desc{font-size:.875rem;color:#94a3b8}#start-adventure-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 3rem;font-size:1.25rem;font-weight:600;border-radius:9999px;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 15px -3px #667eea66}#start-adventure-btn:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #667eea80}#start-adventure-btn.hidden{display:none}.controls-legend{margin-top:1.5rem;background:#fff;border-radius:16px;padding:1rem 1.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;color:#334155}.controls-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.controls-row .key{display:inline-block;min-width:1.4em;padding:.1em .55em;background:#1e293b;color:#fff;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;text-align:center;border-radius:6px}.controls-row .auto{display:inline-block;padding:.1em .55em;background:#dcfce7;color:#166534;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;border-radius:6px}.controls-row .label{color:#475569}#game-view{position:relative;width:100%;height:100%}canvas{display:block;width:100%;height:100%}#hud-overlay{position:absolute;top:0;left:0;right:0;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;pointer-events:none}#happiness-bar-container{background:#ffffffe6;padding:.75rem 1.5rem;border-radius:9999px;box-shadow:0 4px 6px -1px #0000001a}#happiness-label{font-weight:700;color:#334155;margin-right:1rem}#happiness-bar{width:200px;height:8px;background:#e2e8f0;border-radius:9999px;overflow:hidden}#happiness-fill{height:100%;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e);width:100%;transition:width .4s cubic-bezier(.22,1,.36,1)}#zone-indicator{color:#fff;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.5);transition:opacity .3s ease,transform .3s ease}.hud-btn{background:#ffffffe6;border:none;padding:.75rem;border-radius:9999px;cursor:pointer;font-size:1.5rem;box-shadow:0 4px 6px -1px #0000001a}.hud-btn:hover{background:#fff}.hidden{display:none!important}.screen:not(.hidden){animation:screen-fade-in .4s ease-out both}@keyframes screen-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.screen:not(.hidden){animation:none}}