:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary-color: #3498db;--secondary-color: #2c3e50;--background-color: #f5f7fa;--error-color: #e74c3c;--success-color: #2ecc71;--border-color: #ddd;--text-color: #333;--shadow: 0 2px 10px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background-color);color:var(--text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-container{display:flex;flex-direction:column;min-height:100vh}.app-header{background-color:var(--primary-color);color:#fff;padding:1.5rem;text-align:center;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center}.app-content{display:flex;flex-direction:column;gap:2rem;padding:1rem;flex:1;max-width:1200px;margin:0 auto;width:100%}@media (min-width: 768px){.app-content{padding:2rem}}@media (max-width: 576px){.breed-list-layout{flex-direction:column}.breeds-section{width:100%;margin-bottom:1rem}}.breeds-section{width:220px;min-width:180px;flex-shrink:0}.images-section{width:100%}.breed-list-layout{display:flex;flex-direction:row;gap:1rem;width:100%;flex-wrap:nowrap}.breed-detail-section{flex:1;padding:1.5rem;background-color:#fff;border:1px solid var(--border-color);border-radius:4px;font-size:1rem;box-shadow:var(--shadow)}.breed-detail-section h2{color:var(--secondary-color);margin-bottom:1.5rem;text-transform:capitalize}.breed-list-container{background-color:#fff;border-radius:8px;box-shadow:var(--shadow);padding:1.5rem}.breed-list-container h2{color:var(--secondary-color);margin-bottom:1rem}.search-container{margin-bottom:1rem}.search-input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;font-size:1rem}.breed-list{list-style-type:none;max-height:500px;overflow-y:auto;border-top:1px solid var(--border-color)}.breed-item{padding:.75rem;cursor:pointer;border-bottom:1px solid var(--border-color);transition:background-color .2s}.breed-item:hover{background-color:#3498db1a}.breed-item.selected{background-color:var(--primary-color);color:#fff}.image-display{background-color:#fff;border-radius:8px;box-shadow:var(--shadow);padding:1.5rem}.image-display h2{color:var(--secondary-color);margin-bottom:1.5rem;text-transform:capitalize}.image-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.image-card{border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s;aspect-ratio:1 / 1}.image-card:hover{transform:translateY(-5px)}.image-card img{width:100%;height:100%;object-fit:cover;display:block}.loading,.error,.select-breed-message{padding:2rem;text-align:center;font-size:1.2rem;background-color:#fff;border-radius:8px;box-shadow:var(--shadow)}.loading{color:var(--primary-color)}.error{color:var(--error-color)}.select-breed-message{color:var(--secondary-color)}.app-footer{background-color:var(--secondary-color);color:#fff;text-align:center;padding:1rem;margin-top:auto}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--background-color);padding:1rem}.login-card{background-color:#fff;border-radius:8px;box-shadow:var(--shadow);padding:2rem;width:100%;max-width:400px}.login-card h2{color:var(--secondary-color);margin-bottom:1rem;text-align:center}.login-info{text-align:center;margin-bottom:1.5rem;color:#666;font-size:.9rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--secondary-color);font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;font-size:1rem}.login-button{width:100%;padding:.75rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}.login-button:hover{background-color:#2980b9}.login-button:disabled{background-color:#95a5a6;cursor:not-allowed}.user-profile{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background-color:#0000001a;border-radius:25px}.user-avatar img{width:40px;height:40px;border-radius:50%;object-fit:cover}.user-info h3{font-size:.9rem;margin:0}.user-email{font-size:.8rem;margin:0;opacity:.8}.logout-button{background-color:transparent;border:1px solid white;color:#fff;padding:.3rem .75rem;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.8rem}.logout-button:hover{background-color:#fff;color:var(--primary-color)}.app-tabs{display:flex;justify-content:center;padding:1rem;background-color:#fff;box-shadow:0 1px 5px #0000001a}.tab-button{background:transparent;border:none;padding:.75rem 1.5rem;margin:0 .5rem;font-size:1rem;cursor:pointer;position:relative;transition:all .2s ease;color:var(--secondary-color)}.tab-button:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:transparent;transition:all .2s ease}.tab-button.active{color:var(--primary-color);font-weight:600}.tab-button.active:after{background-color:var(--primary-color)}.tab-button:hover:not(.active){color:var(--primary-color)}.random-breed-container{background-color:#fff;border-radius:8px;box-shadow:var(--shadow);padding:1.5rem;width:100%}.random-breed-container h2{color:var(--secondary-color);margin-bottom:1.5rem;text-align:center}.random-breed-button{display:block;margin:0 auto 2rem;padding:.75rem 2rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.random-breed-button:hover{background-color:#2980b9;transform:translateY(-2px)}.random-breed-button:disabled{background-color:#95a5a6;cursor:wait}.breed-display{padding:1rem}.breed-name{text-transform:capitalize;font-size:1.8rem;text-align:center;margin-bottom:1.5rem;color:var(--secondary-color)}.breed-content{display:grid;grid-template-columns:1fr;gap:.75rem}@media (min-width: 768px){.breed-content{grid-template-columns:1fr 2fr}}.breed-info{flex:1}.breed-info h4{font-size:1.3rem;color:var(--secondary-color);margin-bottom:1rem}.info-card{background-color:#f8f9fa;padding:1.5rem;border-radius:8px;box-shadow:0 1px 3px #0000001a}.info-item{margin-bottom:1rem}.info-item:last-child{margin-bottom:0}.info-label{font-weight:600;color:var(--secondary-color);margin-right:.5rem;display:block}@media (min-width: 576px){.info-label{display:inline}}.breed-images{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}@media (min-width: 768px){.breed-images{grid-template-columns:repeat(1,1fr);max-width:400px}}.random-breed-section,.breed-game-section{width:100%}.breed-game-container{background-color:#fff;border-radius:8px;box-shadow:var(--shadow);padding:1.5rem;width:100%}.breed-game-container h2{color:var(--secondary-color);margin-bottom:1.5rem;text-align:center}.game-intro{text-align:center;max-width:600px;margin:0 auto}.game-intro p{margin-bottom:1rem;line-height:1.5;color:var(--secondary-color)}.game-button{display:block;margin:2rem auto;padding:.75rem 2rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.game-button:hover{background-color:#2980b9;transform:translateY(-2px)}.last-played{font-size:.9rem;color:#777;margin-top:1rem}.game-board{max-width:800px;margin:0 auto}.score-display{display:flex;justify-content:space-between;padding:.5rem 1rem;background-color:#f8f9fa;border-radius:6px;margin-bottom:1.5rem;font-weight:600;color:var(--secondary-color)}.clues-section{margin-bottom:2rem}.clues-section h3{color:var(--secondary-color);margin-bottom:1rem}.clue-list{background-color:#f8f9fa;padding:1.5rem;border-radius:8px;box-shadow:0 1px 3px #0000001a}.clue-item{margin-bottom:1rem;display:flex;align-items:flex-start}.clue-number{background-color:var(--primary-color);color:#fff;width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:50%;margin-right:10px;flex-shrink:0}.clue-text{line-height:1.5}.clue-button{margin-top:1rem;padding:.5rem 1rem;background-color:var(--secondary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease}.clue-button:hover{background-color:#34495e}.guess-form{background-color:#f8f9fa;padding:1.5rem;border-radius:8px;box-shadow:0 1px 3px #0000001a;margin-bottom:1.5rem}.input-group label{margin-bottom:.5rem;color:var(--secondary-color);font-weight:600}.input-group input{padding:.75rem;border:1px solid var(--border-color);border-radius:4px;font-size:1rem}.submit-button{width:100%;padding:.75rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.feedback-message{padding:1rem;border-radius:4px;background-color:#3498db1a;border-left:4px solid var(--primary-color);color:var(--secondary-color);margin-bottom:1rem}.game-result{text-align:center}.game-result h3{color:var(--secondary-color);margin-bottom:1rem;font-size:1.5rem}.breed-reveal{margin:2rem auto;max-width:600px}.breed-image{margin:1rem auto;max-width:300px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}.breed-image img{width:100%;height:auto;display:block}.breed-details{margin:2rem auto;max-width:400px}.come-back-message{margin-top:2rem;color:var(--secondary-color);font-style:italic}@media (min-width: 576px){.input-group{flex-direction:row;align-items:center}.input-group label{margin-right:1rem;margin-bottom:0;width:100px}.input-group input{flex:1}}.breed-list-container{margin:0;padding:.5rem;transition:all .3s ease;min-width:200px}.search-container{margin-bottom:1rem;position:sticky;top:0;z-index:10;background:#fff;padding:.5rem 0;border-bottom:1px solid #eee}.search-input{width:100%;padding:.7rem;border:2px solid #ddd;border-radius:8px;font-size:1rem;transition:all .3s;box-shadow:0 2px 5px #0000000d}.search-input:focus{border-color:#3498db;outline:none}.breed-list{list-style:none;padding:0;margin:0;max-height:70vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.5rem}.breed-card{background:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a;overflow:hidden;transition:box-shadow .2s;border:1px solid #eee;min-height:38px}.breed-card:hover{box-shadow:0 2px 5px #00000026}.breed-card.expanded{margin-bottom:.5rem;box-shadow:0 2px 10px #0000001a}.breed-card-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:#f8f9fa;cursor:pointer;transition:background .2s}.breed-card-header:hover{background:#f1f3f5}.breed-name{margin:0;font-size:1rem;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expand-icon{color:#3498db;font-size:.8rem}.breed-thumbnail{height:120px;overflow:hidden;cursor:pointer}.breed-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.breed-thumbnail img:hover{transform:scale(1.05)}.breed-card-details{padding:.5rem .75rem}.breed-quick-info{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}.info-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #eee;padding-bottom:.3rem}.info-label{font-weight:500;color:#555}.info-value{color:#333}.info-value.rating{display:flex;align-items:center}.star{font-size:1.1rem;margin-right:2px}.star.empty{color:#ddd}.view-details-btn{margin-top:.5rem;padding:.4rem .8rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s;width:100%;font-size:.9rem}.view-details-btn:hover{background-color:#2980b9}.loading-preview{padding:1rem 0;color:#777;text-align:center;font-style:italic}@media (min-width: 768px){.breed-list{display:flex;flex-direction:column;gap:.5rem;max-height:600px}}.collapsible-section{margin-bottom:1rem;border:1px solid #eee;border-radius:4px}.collapsible-header{padding:.5rem 1rem;background-color:#f8f9fa;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-bottom:1px solid transparent;font-weight:500}.collapsible-header.active{border-bottom-color:#eee}.collapsible-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.collapsible-content.visible{max-height:1000px}.breed-stats{margin:1rem 0;padding:1rem;border-radius:8px;background:#f8f9fa;box-shadow:0 2px 8px #0000001a}.stats-section{margin-bottom:1.5rem}.stats-section h4{color:#333;margin-bottom:1rem;font-weight:600;border-bottom:2px solid #3498db;padding-bottom:.5rem;display:inline-block}.physical-stats,.rating-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.stat-item,.rating-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}.stat-label,.rating-label{font-weight:500;color:#444}.stat-value,.rating-value{color:#333}.star-rating{display:flex;align-items:center}.star{font-size:1.2rem;margin-right:2px}.star.filled{color:#f39c12}.star.empty{color:#ccc}.rating-number{margin-left:6px;font-size:.85rem;color:#666}@media (max-width: 768px){.physical-stats,.rating-stats{grid-template-columns:1fr}}.star{transition:color .2s ease}.stat-item:hover,.rating-item:hover{background-color:#3498db0d;border-radius:4px}.scoreboard-container{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:1.5rem;margin:1.5rem 0}.stats-summary{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem;justify-content:space-around}.stat-box{background-color:#f8f9fa;border-radius:8px;padding:1.2rem;min-width:120px;text-align:center;box-shadow:0 1px 5px #0000000d;transition:transform .2s}.stat-box:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a}.stat-value{display:block;font-size:2rem;font-weight:700;color:#3498db;margin-bottom:.5rem}.stat-label{font-size:.9rem;color:#555;font-weight:500}.score-history{margin-top:2rem}.history-table{width:100%;border-collapse:collapse;margin:1rem 0}.history-table th{background-color:#f1f3f5;padding:.8rem;text-align:left;font-weight:600;color:#333}.history-table td{padding:.8rem;border-bottom:1px solid #eee}.history-table tr:last-child td{border-bottom:none}.history-table tr:hover{background-color:#f8f9fa}.result{font-weight:600}.result.won{color:#27ae60}.result.lost{color:#e74c3c}.no-history-message{text-align:center;color:#777;font-style:italic;padding:2rem;background-color:#f8f9fa;border-radius:8px}.clear-history-button{display:block;margin-left:auto;margin-top:1rem;padding:.6rem 1.2rem;background-color:#e74c3c;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.clear-history-button:hover{background-color:#c0392b}@media (max-width: 768px){.stats-summary{flex-direction:column}.stat-box{width:100%}.history-table{font-size:.9rem}}.breed-game-container{max-width:900px;margin:0 auto;padding:1.5rem;background-color:#fff;border-radius:10px;box-shadow:0 3px 15px #0000001a}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;border-bottom:2px solid #f0f0f0;padding-bottom:1rem}.toggle-scoreboard-btn{padding:.6rem 1.2rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.toggle-scoreboard-btn:hover{background-color:#2980b9}.game-intro{text-align:center;padding:2rem;background-color:#f9f9f9;border-radius:8px;margin-bottom:2rem}.game-button{margin-top:1.5rem;padding:1rem 2rem;font-size:1.1rem;background-color:#27ae60;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:background-color .2s}.game-button:hover{background-color:#2ecc71}.last-played{margin-top:1rem;font-style:italic;color:#777;font-size:.9rem}.game-board{padding:1rem}.score-display{display:flex;justify-content:space-between;margin-bottom:1.5rem;background-color:#f1f8e9;padding:.8rem;border-radius:8px;font-weight:500}.clues-section{margin-bottom:2rem;background-color:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 5px #0000000d}.clue-list{margin-bottom:1rem}.clue-item{display:flex;margin-bottom:.8rem;padding:.8rem;background-color:#f8f9fa;border-radius:4px}.clue-number{background-color:#3498db;color:#fff;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-right:.8rem;font-weight:700}.clue-button{padding:.7rem 1rem;background-color:#f39c12;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.clue-button:hover{background-color:#e67e22}.breed-image{margin:1rem 0;max-height:300px;overflow:hidden;border-radius:8px}.breed-image img{width:100%;height:auto;object-fit:cover}.guess-form{margin-top:2rem}.input-group{display:flex;flex-direction:column;margin-bottom:1rem}.input-group label{margin-bottom:.5rem;font-weight:500}.input-group input{padding:.8rem;border:2px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .3s}.input-group input:focus{outline:none;border-color:#3498db}.submit-button{padding:.8rem 2rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:background-color .2s;width:100%}.submit-button:hover{background-color:#2980b9}.feedback-message{margin-top:1.5rem;padding:1rem;background-color:#f8f9fa;border-left:4px solid #3498db;font-weight:500}.game-result{text-align:center;padding:2rem;background-color:#f0f8ff;border-radius:8px;margin-top:1.5rem}.breed-reveal{margin:2rem 0}.breed-details{margin-top:2rem;text-align:left}.info-card{background-color:#f9f9f9;border-radius:8px;padding:1.5rem}.come-back-message{margin-top:2rem;font-style:italic;color:#555}.view-scoreboard-btn{margin-top:1.5rem;padding:.8rem 1.5rem;background-color:#9b59b6;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.view-scoreboard-btn:hover{background-color:#8e44ad}@media (max-width: 768px){.game-header{flex-direction:column;gap:1rem}.toggle-scoreboard-btn{width:100%}.score-display{flex-direction:column;gap:.5rem}}