.home-page{text-align:center;padding:var(--spacing-2xl) 0}.home-page h1{margin-bottom:var(--spacing-md)}.subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.home-actions{display:flex;gap:var(--spacing-md);justify-content:center}.button-primary{display:inline-block;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);font-weight:600;transition:all var(--transition-normal);min-height:60px;line-height:60px}.button-primary:hover{background-color:var(--color-button-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.games-page{padding:var(--spacing-xl) 0}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.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{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.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{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.button-secondary{display:inline-block;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);font-weight:500;transition:all var(--transition-normal);min-height:60px;line-height:60px}.button-secondary:hover{background-color:var(--color-button-secondary-hover)}.instructions-page{padding:var(--spacing-xl) 0}.instructions-content{margin-top:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xl)}.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)}.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 (max-width: 768px){.instruction-section{padding:var(--spacing-lg)}.instruction-steps{margin-left:var(--spacing-md)}}.animal-card{background-color:var(--color-bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--transition-normal);height:100%;display:flex;flex-direction:column}.animal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.animal-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}.animal-card-image-wrapper{width:100%;padding-top:75%;position:relative;overflow:hidden;background-color:var(--color-bg-secondary)}.animal-card-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.animal-card:hover .animal-card-image{transform:scale(1.05)}.animal-card-content{padding:var(--spacing-md);display:flex;flex-direction:column;flex:1;gap:var(--spacing-md)}.animal-card-name{font-size:var(--font-size-lg);color:var(--color-text-primary);margin:0;text-align:center}.animal-card-actions{display:flex;gap:var(--spacing-sm);margin-top:auto}.button-open,.button-like{flex:1;padding:var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:500;text-align:center;transition:all var(--transition-normal);min-height:60px;display:flex;align-items:center;justify-content:center}.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)}.button-like:hover{background-color:var(--color-button-secondary-hover)}.button-like.liked{background-color:var(--color-button-like-active);color:var(--color-text-primary);font-weight:600}.button-like.liked:hover{background-color:var(--color-button-like)}@media (max-width: 768px){.animal-card-actions{flex-direction:column}.button-open,.button-like{width:100%}}@media (max-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{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.animal-shop-header h1{margin:0}.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);font-weight:500;transition:all var(--transition-normal);min-height:60px;display:inline-flex;align-items:center}.favorites-link:hover{background-color:var(--color-button-secondary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.animals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.loading-indicator,.end-message{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary);font-size:var(--font-size-lg)}.animal-detail-page{padding:var(--spacing-xl) 0}.back-button{display:inline-block;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);min-height:60px;cursor:pointer}.back-button:hover{background-color:var(--color-button-secondary-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.animal-detail-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-2xl);align-items:start}.animal-detail-image-wrapper{width:100%;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background-color:var(--color-bg-secondary)}.animal-detail-image{width:100%;height:100%;object-fit:cover}.animal-detail-info{display:flex;flex-direction:column;gap:var(--spacing-lg)}.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)}.button-like-detail{padding:var(--spacing-md) var(--spacing-xl);background-color:var(--color-button-like-inactive);color:var(--color-text-primary);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:500;transition:all var(--transition-normal);min-height:60px;min-width:200px}.button-like-detail:hover{background-color:var(--color-button-secondary-hover);transform:scale(1.02)}.button-like-detail.liked{background-color:var(--color-button-like-active);font-weight:600}.button-like-detail.liked:hover{background-color:var(--color-button-like)}@media (max-width: 768px){.animal-detail-content{grid-template-columns:1fr;gap:var(--spacing-xl)}.animal-detail-name{font-size:var(--font-size-2xl)}}.favorites-page{padding:var(--spacing-xl) 0}.favorites-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.favorites-header h1{margin:0}.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);font-weight:500;transition:all var(--transition-normal);min-height:60px;display:inline-flex;align-items:center}.back-link:hover{background-color:var(--color-button-secondary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.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{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)}@media (max-width: 1024px){.animals-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.animals-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}}@media (max-width: 480px){.animals-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}}.language-switcher{display:flex;gap:var(--spacing-xs);background-color:var(--color-bg-secondary);padding:var(--spacing-xs);border-radius:var(--radius-md)}.language-switcher button{padding:var(--spacing-sm) var(--spacing-md);min-width:50px;min-height:40px;border-radius:var(--radius-sm);background-color:transparent;color:var(--color-text-secondary);font-weight:500;transition:all var(--transition-fast)}.language-switcher button:hover{background-color:var(--color-bg-card)}.language-switcher button.active{background-color:var(--color-button-primary);color:#fff}.layout{min-height:100vh;display:flex;flex-direction:column}.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{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.logo{font-size:var(--font-size-xl);font-weight:700;color:var(--color-accent-brown)}.nav-links{display:flex;gap:var(--spacing-lg);flex:1;justify-content:center}.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{flex:1;padding:var(--spacing-xl) 0}@media (max-width: 768px){.nav{flex-wrap:wrap}.nav-links{order:3;width:100%;justify-content:space-around}}.app{min-height:100vh;display:flex;flex-direction:column}:root{--color-bg-primary: #F5E6D3;--color-bg-secondary: #FAF0E6;--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-border: #D4C4A8;--color-border-light: #E8DCC6;--shadow-sm: 0 2px 4px rgba(107, 78, 61, .1);--shadow-md: 0 4px 8px rgba(107, 78, 61, .15);--shadow-lg: 0 8px 16px rgba(107, 78, 61, .2);--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{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{cursor:pointer;border:none;background:none}a{text-decoration:none;color:inherit}ul,ol{list-style:none}#root{min-height:100vh;display:flex;flex-direction:column}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);font-weight:500;min-height:60px;min-width:120px}button:active{transform:scale(.98)}a{transition:color var(--transition-fast)}a:hover{color:var(--color-accent-brown)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}