.home-page{text-align:center;padding:var(--spacing-2xl) 0}.home-page h1{margin-bottom:var(--spacing-md)}.home-intro{font-size:var(--font-size-lg);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);max-width:720px;margin:0 auto var(--spacing-xl);text-align:left}.home-actions{gap:var(--spacing-md);margin-bottom:var(--spacing-2xl);justify-content:center;display:flex}.button-primary{padding:var(--spacing-md) var(--spacing-xl);background-color:var(--color-button-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--font-size-lg);transition:all var(--transition-normal);min-height:60px;font-weight:600;line-height:60px;display:inline-block}.button-primary:hover{background-color:var(--color-button-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.home-seo{text-align:left;background-color:var(--color-bg-card);max-width:720px;padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin:0 auto}.home-seo h2{margin:var(--spacing-xl) 0 var(--spacing-md);color:var(--color-accent-brown);font-size:var(--font-size-lg)}.home-seo h2:first-child{margin-top:0}.home-seo p{color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.home-seo ul{padding-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.home-seo li{margin-bottom:var(--spacing-xs)}.home-games-links a{color:var(--color-accent-brown);text-underline-offset:2px;text-decoration:underline}.home-games-links a:hover{color:var(--color-button-primary)}.games-page{padding:var(--spacing-xl) 0}.games-page h1{margin-bottom:var(--spacing-md)}.games-intro{margin:0 0 var(--spacing-xl);max-width:720px;color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.games-grid{gap:var(--spacing-xl);margin-bottom:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.games-seo{max-width:720px}.games-seo h2{margin:var(--spacing-xl) 0 var(--spacing-md);color:var(--color-accent-brown);font-size:var(--font-size-lg)}.games-seo h2:first-child{margin-top:0}.games-seo p{color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.games-seo ul{padding-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.games-seo li{margin-bottom:var(--spacing-xs)}.game-card{background-color:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.game-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.game-card h2{margin-bottom:var(--spacing-md);color:var(--color-accent-brown)}.game-card p{margin-bottom:var(--spacing-lg);color:var(--color-text-secondary)}.game-actions{gap:var(--spacing-md);flex-wrap:wrap;display:flex}.language-switcher{gap:var(--spacing-xs);background-color:var(--color-bg-secondary);padding:var(--spacing-xs);border-radius:var(--radius-md);display:flex}.language-switcher button{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);min-width:50px;min-height:40px;color:var(--color-text-secondary);transition:all var(--transition-fast);background-color:#0000;font-weight:500}.language-switcher button:hover{background-color:var(--color-bg-card)}.language-switcher button.active{background-color:var(--color-button-primary);color:#fff}.site-sections-nav h2{margin:0 0 var(--spacing-md);color:var(--color-accent-brown);font-size:var(--font-size-lg)}.site-sections-nav ul{padding-left:var(--spacing-lg);line-height:var(--line-height-relaxed);margin:0}.site-sections-nav li{margin-bottom:var(--spacing-xs)}.site-sections-nav a{color:var(--color-accent-brown);text-underline-offset:2px;text-decoration:underline}.site-sections-nav a:hover{color:var(--color-button-primary)}.instructions-page{padding:var(--spacing-xl) 0}.instructions-content{margin-top:var(--spacing-xl);gap:var(--spacing-xl);flex-direction:column;display:flex}.instruction-section{background-color:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.instruction-section h2{color:var(--color-accent-brown);margin-bottom:var(--spacing-md);font-size:var(--font-size-xl)}.instruction-section h3{color:var(--color-text-primary);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm);font-size:var(--font-size-lg)}.instruction-section p{color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-md)}.instructions-language .language-switcher{margin-top:var(--spacing-sm)}.instruction-method{margin-top:var(--spacing-lg)}.instruction-method:first-child{margin-top:0}.instruction-steps{margin-left:var(--spacing-lg);margin-top:var(--spacing-sm);color:var(--color-text-secondary)}.instruction-steps li{margin-bottom:var(--spacing-sm);line-height:var(--line-height-relaxed);padding-left:var(--spacing-xs)}@media (width<=768px){.instruction-section{padding:var(--spacing-lg)}.instruction-steps{margin-left:var(--spacing-md)}}.heart-icon{object-fit:contain;pointer-events:none;width:36px;height:36px;transition:opacity var(--transition-normal), transform var(--transition-normal);display:block}.button-like:not(.liked) .heart-icon,.button-like-detail:not(.liked) .heart-icon{opacity:.65;filter:saturate(.85)}.button-like.liked .heart-icon,.button-like-detail.liked .heart-icon{opacity:1;filter:saturate(1.15)brightness(1.05)}.button-like:hover .heart-icon,.button-like-detail:hover .heart-icon{transform:scale(1.08)}@media (width<=480px){.heart-icon{width:32px;height:32px}}.animal-card{background-color:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-normal);flex-direction:column;height:100%;display:flex;overflow:hidden}.animal-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.animal-card-link{height:100%;color:inherit;flex-direction:column;text-decoration:none;display:flex}.animal-card-image-wrapper{background-color:var(--color-bg-secondary);width:100%;padding-top:75%;position:relative;overflow:hidden}.animal-card-image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal);position:absolute;top:0;left:0}.animal-card:hover .animal-card-image{transform:scale(1.05)}.animal-card-content{padding:var(--spacing-md);gap:var(--spacing-md);flex-direction:column;flex:1;display:flex}.animal-card-name{font-size:var(--font-size-lg);color:var(--color-text-primary);text-align:center;margin:0}.animal-card-actions{gap:var(--spacing-sm);margin-top:auto;display:flex}.button-open,.button-like{padding:var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-md);text-align:center;transition:all var(--transition-normal);flex:1;justify-content:center;align-items:center;min-height:60px;font-weight:500;display:flex}.button-open{background-color:var(--color-button-primary);color:#fff;text-decoration:none}.button-open:hover{background-color:var(--color-button-primary-hover);transform:scale(1.02)}.button-like{background-color:var(--color-button-like-inactive);color:var(--color-text-primary);min-width:60px;padding:var(--spacing-sm) var(--spacing-md);flex:none}.button-like:hover{background-color:var(--color-button-secondary-hover)}.button-like.liked{background:linear-gradient(var(--color-button-like-highlight), var(--color-button-like-highlight)), var(--color-button-like-inactive);color:var(--color-text-primary);font-weight:600}.button-like.liked:hover{background:linear-gradient(var(--color-button-like-highlight-hover), var(--color-button-like-highlight-hover)), var(--color-button-secondary-hover)}@media (width<=768px){.animal-card-actions{flex-direction:column}.button-open,.button-like{width:100%}}@media (width<=480px){.animal-card-content{padding:var(--spacing-sm);gap:var(--spacing-sm)}.animal-card-name{font-size:var(--font-size-md)}.button-open,.button-like{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);min-height:50px}}.animal-shop-game{padding:var(--spacing-xl) 0}.animal-shop-header{margin-bottom:var(--spacing-xl);justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.animal-shop-header h1{margin:0}.animal-shop-seo{margin-bottom:var(--spacing-xl);max-width:720px}.animal-shop-intro{margin:0 0 var(--spacing-md);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.animal-shop-benefits-title{margin:var(--spacing-lg) 0 var(--spacing-md);color:var(--color-accent-brown);font-size:var(--font-size-lg)}.animal-shop-benefits{padding-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.animal-shop-benefits li{margin-bottom:var(--spacing-xs)}.favorites-link{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-button-secondary);color:var(--color-text-primary);border-radius:var(--radius-md);font-size:var(--font-size-md);transition:all var(--transition-normal);align-items:center;min-height:60px;font-weight:500;display:inline-flex}.favorites-link:hover{background-color:var(--color-button-secondary-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.animals-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);grid-template-columns:repeat(4,1fr);display:grid}.loading-indicator,.end-message{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary);font-size:var(--font-size-lg)}@media (width<=1024px){.animals-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.animals-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.animals-grid{gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr)}}.animal-detail-page{padding:var(--spacing-xl) 0}.back-button{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-button-secondary);color:var(--color-text-primary);border-radius:var(--radius-md);margin-bottom:var(--spacing-xl);font-size:var(--font-size-md);transition:all var(--transition-normal);cursor:pointer;min-height:60px;display:inline-block}.back-button:hover{background-color:var(--color-button-secondary-hover);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.animal-detail-content{gap:var(--spacing-2xl);grid-template-columns:1fr 1fr;align-items:start;display:grid}.animal-detail-image-wrapper{aspect-ratio:1;border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-lg);background-color:var(--color-bg-secondary);overflow:hidden}.animal-detail-image{object-fit:cover;width:100%;height:100%}.animal-detail-info{gap:var(--spacing-lg);flex-direction:column;display:flex}.animal-detail-name{font-size:var(--font-size-3xl);color:var(--color-accent-brown);margin:0}.animal-detail-description{font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);color:var(--color-text-secondary)}.animal-detail-actions{margin-top:var(--spacing-md);gap:var(--spacing-md);flex-wrap:wrap;display:flex}.button-listen-detail{padding:var(--spacing-md) var(--spacing-xl);background-color:var(--color-accent-soft-blue);color:var(--color-text-primary);border-radius:var(--radius-md);font-size:var(--font-size-lg);transition:all var(--transition-normal);min-width:200px;min-height:60px;font-weight:500}.button-listen-detail:hover{background-color:var(--color-accent-soft-green);transform:scale(1.02)}.button-like-detail{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-button-like-inactive);color:var(--color-text-primary);border-radius:var(--radius-md);font-size:var(--font-size-lg);transition:all var(--transition-normal);justify-content:center;align-items:center;min-width:60px;min-height:60px;font-weight:500;display:inline-flex}.button-like-detail:hover{background-color:var(--color-button-secondary-hover);transform:scale(1.02)}.button-like-detail.liked{background:linear-gradient(var(--color-button-like-highlight), var(--color-button-like-highlight)), var(--color-button-like-inactive);font-weight:600}.button-like-detail.liked:hover{background:linear-gradient(var(--color-button-like-highlight-hover), var(--color-button-like-highlight-hover)), var(--color-button-secondary-hover)}.animal-detail-seo{margin-top:var(--spacing-2xl);max-width:720px}.animal-detail-seo h2{margin:var(--spacing-xl) 0 var(--spacing-md);color:var(--color-accent-brown);font-size:var(--font-size-lg)}.animal-detail-seo h2:first-child{margin-top:0}.animal-detail-seo p{margin:0 0 var(--spacing-md);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.animal-detail-seo ul{padding-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.animal-detail-seo li{margin-bottom:var(--spacing-xs)}@media (width<=768px){.animal-detail-content{gap:var(--spacing-xl);grid-template-columns:1fr}.animal-detail-name{font-size:var(--font-size-2xl)}}.favorites-page{padding:var(--spacing-xl) 0}.favorites-header{margin-bottom:var(--spacing-xl);justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.favorites-header h1{margin:0}.favorites-intro{margin:0 0 var(--spacing-xl);max-width:720px;color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.favorites-seo{margin-top:var(--spacing-2xl);max-width:720px}.favorites-seo h2{margin:var(--spacing-xl) 0 var(--spacing-md);color:var(--color-accent-brown);font-size:var(--font-size-lg)}.favorites-seo h2:first-child{margin-top:0}.favorites-seo p{margin:0 0 var(--spacing-md);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.favorites-seo ul{padding-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.favorites-seo li{margin-bottom:var(--spacing-xs)}.back-link{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-button-secondary);color:var(--color-text-primary);border-radius:var(--radius-md);font-size:var(--font-size-md);transition:all var(--transition-normal);align-items:center;min-height:60px;font-weight:500;display:inline-flex}.back-link:hover{background-color:var(--color-button-secondary-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.favorites-empty{text-align:center;padding:var(--spacing-2xl);background-color:var(--color-bg-card);border-radius:var(--radius-lg)}.favorites-empty p{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.animals-grid{gap:var(--spacing-lg);grid-template-columns:repeat(4,1fr);display:grid}@media (width<=1024px){.animals-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.animals-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.animals-grid{gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr)}}.layout{flex-direction:column;min-height:100vh;display:flex}.header{background-color:var(--color-bg-card);border-bottom:1px solid var(--color-border-light);padding:var(--spacing-md) 0;box-shadow:var(--shadow-sm)}.nav{justify-content:space-between;align-items:center;gap:var(--spacing-lg);display:flex}.logo{font-size:var(--font-size-xl);color:var(--color-accent-brown);font-weight:700}.nav-links{gap:var(--spacing-lg);flex:1;justify-content:center;display:flex}.nav-links a{font-size:var(--font-size-md);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.nav-links a:hover{background-color:var(--color-bg-secondary);color:var(--color-accent-brown)}.nav-links a.active{background-color:var(--color-button-primary);color:#fff;font-weight:600}.main{padding:var(--spacing-xl) 0;flex:1}@media (width<=768px){.nav{flex-wrap:wrap}.nav-links{order:3;justify-content:space-around;width:100%}}.app{flex-direction:column;min-height:100vh;display:flex}:root{--color-bg-primary:#f5e6d3;--color-bg-secondary:linen;--color-bg-tertiary:#fdf5e6;--color-bg-card:#fff8e7;--color-bg-card-hover:#fff5e1;--color-text-primary:#6b4e3d;--color-text-secondary:#8b6f47;--color-text-light:#a68b6b;--color-accent-soft-pink:#f4c2c2;--color-accent-soft-blue:#b8d4e3;--color-accent-soft-green:#c8e6c9;--color-accent-beige:#d4a574;--color-accent-brown:#c19a6b;--color-button-primary:#d4a574;--color-button-primary-hover:#c19a6b;--color-button-secondary:#e8dcc6;--color-button-secondary-hover:#d4c4a8;--color-button-like:#e8a5a5;--color-button-like-active:#f4c2c2;--color-button-like-inactive:#e8dcc6;--color-button-like-highlight:#ff3d6b47;--color-button-like-highlight-hover:#ff3d6b61;--color-border:#d4c4a8;--color-border-light:#e8dcc6;--shadow-sm:0 2px 4px #6b4e3d1a;--shadow-md:0 4px 8px #6b4e3d26;--shadow-lg:0 8px 16px #6b4e3d33;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--font-size-xs:14px;--font-size-sm:18px;--font-size-md:20px;--font-size-lg:24px;--font-size-xl:28px;--font-size-2xl:36px;--font-size-3xl:48px;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.8;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);min-height:100vh}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}button{cursor:pointer;background:0 0;border:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:var(--line-height-tight);color:var(--color-text-primary)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}p{font-size:var(--font-size-md);line-height:var(--line-height-relaxed)}button{font-size:var(--font-size-md);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);transition:all var(--transition-normal);min-width:120px;min-height:60px;font-weight:500}button:active{transform:scale(.98)}a{transition:color var(--transition-fast)}a:hover{color:var(--color-accent-brown)}.container{width:100%;max-width:1200px;padding:0 var(--spacing-md);margin:0 auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}