.weather-game-container{max-width:800px;margin:0 auto;padding:20px}.weather-game-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.header-buttons{align-items:center;gap:1rem;display:flex}.new-game-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e,#a855f7);border:none;border-radius:6px;padding:.5rem 1rem;font-weight:600;transition:all .2s;transform:scale(1);box-shadow:0 4px 15px #22c55e4d}.new-game-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #22c55e66}.home-link{background:var(--background-secondary);color:var(--text);border-radius:6px;padding:.5rem 1rem;font-weight:600;text-decoration:none}.loading-container{text-align:center;flex-direction:column;align-items:center;gap:2rem;padding:6rem;font-size:32px;display:flex}.loading-spinner{border:6px solid #f3f3f3;border-top-color:#667eea;border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}.weather-display{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;align-items:center;gap:20px;margin-bottom:20px;padding:20px;display:flex;box-shadow:0 8px 32px #0000001a}.weather-info{flex:1}.weather-title{color:#fff;margin:0 0 15px;font-size:24px;font-weight:700}.weather-details{font-size:18px;line-height:1.6}.weather-detail{margin-bottom:8px}.weather-detail:last-child{margin-bottom:0}.weather-icon-container{text-align:center;flex-shrink:0}.weather-icon{background-color:#fff3;border-radius:50%;width:80px;height:80px;padding:10px}.guesses-remaining{margin-bottom:20px;font-size:18px;font-weight:600}.guess-form{margin-bottom:20px;position:relative}.guess-input{width:100%;color:var(--text);border:2px solid #ddd;border-radius:8px;padding:12px;font-size:16px;transition:border-color .2s}.guess-input:focus{border-color:#667eea;outline:none}.guess-input:disabled{opacity:.6;cursor:not-allowed;background-color:#f5f5f5}.city-dropdown{background-color:var(--background-secondary);z-index:1000;border:1px solid #ccc;border-top:none;border-radius:0 0 8px 8px;max-height:200px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 15px #0000001a}.city-option{cursor:pointer;color:var(--text);border-bottom:1px solid #eee;padding:12px;transition:background-color .2s}.city-option:hover{background-color:var(--background)}.city-option:last-child{border-bottom:none}.city-info{color:#888;align-items:center;gap:4px;margin-left:8px;font-size:12px;display:inline-flex}.guess-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .2s;box-shadow:0 4px 15px #667eea4d}.guess-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.guess-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.guesses-container{margin-top:30px}.guesses-container h3{color:var(--primary);margin-bottom:15px;font-size:20px}.guesses-table{border-collapse:collapse;border-radius:8px;width:100%;overflow:hidden;box-shadow:0 4px 15px #0000001a}.table-header{text-align:left;background-color:var(--background-secondary);color:var(--text);border:1px solid #ddd;padding:12px 8px;font-weight:600}.table-cell{border:1px solid #ddd;padding:12px 8px;font-weight:500;transition:all .3s ease-in-out}.cell-correct{color:#2d5016;background-color:#90ee90}.cell-incorrect{color:#8b1538;background-color:#ffb6c1}.cell-close{color:#fff;background-color:#daa520}.result-container{text-align:center;background:#ffffffe6;border-radius:12px;margin-top:30px;padding:20px;transition:all .3s;animation:.6s ease-out resultFadeIn;box-shadow:0 4px 15px #0000001a}.result-container.result-win{background:linear-gradient(135deg,#22c55ee6,#16a34ae6);border:2px solid #22c55e;box-shadow:0 8px 25px #22c55e66}.result-container.result-loss{background:linear-gradient(135deg,#ef4444e6,#dc2626e6);border:2px solid #ef4444;box-shadow:0 8px 25px #ef444466}.result-text{color:var(--primary);text-shadow:1px 1px 2px #0003;margin-bottom:20px;font-size:24px;font-weight:700}.result-container.result-win .result-text,.result-container.result-loss .result-text{color:#fff;text-shadow:2px 2px 4px #0006}.highlight{background-color:#ffffff4d;border-radius:4px;padding:2px 6px;font-weight:700}@keyframes resultFadeIn{0%{opacity:0;transform:scale(.8)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.play-again-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .2s;box-shadow:0 4px 15px #22c55e4d}.play-again-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #22c55e66}.result-container.result-win .play-again-button{color:#22c55e;background:#ffffffe6;box-shadow:0 4px 15px #ffffff4d}.result-container.result-win .play-again-button:hover{background:#fff;transform:scale(1.05);box-shadow:0 6px 20px #ffffff80}.result-container.result-loss .play-again-button{color:#ef4444;background:#ffffffe6;box-shadow:0 4px 15px #ffffff4d}.result-container.result-loss .play-again-button:hover{background:#fff;transform:scale(1.05);box-shadow:0 6px 20px #ffffff80}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cellReveal{0%{opacity:0;background-color:#f0f0f0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.cell-animating-0{animation:.3s ease-in-out both cellReveal}.cell-animating-1{animation:.3s ease-in-out .2s both cellReveal}.cell-animating-2{animation:.3s ease-in-out .4s both cellReveal}.cell-animating-3{animation:.3s ease-in-out .6s both cellReveal}.cell-animating-4{animation:.3s ease-in-out .8s both cellReveal}@media (max-width:768px){.weather-game-container{padding:15px}.weather-game-header{text-align:center;flex-direction:column;gap:1rem}.weather-display{text-align:center;flex-direction:column;gap:15px}.weather-details{font-size:16px}.weather-title{font-size:20px}.table-header,.table-cell{padding:8px 4px;font-size:14px}.guesses-table{font-size:12px}.result-text{font-size:20px}}@media (max-width:480px){.weather-game-container{padding:10px}.table-header,.table-cell{padding:6px 3px;font-size:12px}.weather-title{font-size:18px}.weather-details{font-size:14px}.city-info{font-size:10px}}