/* TYYLIT - Auroran Safari */
#aurora-app {
    font-family: 'Quicksand', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    background: #f0f8ff;
    min-height: 600px;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    text-align: center;
}

/* Piilotetaan näkymät oletuksena */
.game-view { display: none; animation: fadeIn 0.5s; }
.game-view.active { display: block; }

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

h1 { color: #2c3e50; font-weight: 700; }

/* Napit */
button { 
    cursor: pointer; 
    font-family: 'Quicksand', sans-serif; 
    border: none; 
    outline: none; 
    transition: transform 0.1s; 
}
button:active { transform: scale(0.95); }

.big-btn {
    background: #fff;
    border: 4px solid #FF9800;
    border-radius: 20px;
    padding: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    width: 45%;
    margin: 10px;
    box-shadow: 0 5px 0 #E65100;
}
.big-btn .emoji { font-size: 50px; display:block; margin-bottom:10px; }

.back-btn {
    background: #e0e0e0; 
    padding: 10px 20px; 
    border-radius: 30px; 
    font-weight: bold; 
    float: left;
}

/* Kategoriat */
.category-grid { display: flex; gap: 20px; justify-content: center; margin-top: 40px; }
.cat-card {
    background: white; width: 150px; height: 150px; border-radius: 20px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-size: 20px; font-weight: bold; cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 3px solid transparent;
}
.cat-card.land { border-color: #4CAF50; color: #2E7D32; }
.cat-card.water { border-color: #2196F3; color: #1565C0; }
.cat-card.air { border-color: #03A9F4; color: #0277BD; }
.cat-card .icon { font-size: 50px; margin-bottom: 10px; }

/* Eläinlista */
.animal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }
.animal-card {
    background: white; padding: 20px; border-radius: 15px; cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,0.1); font-weight: bold; font-size: 18px;
    border: 2px solid #eee;
}
.animal-card:hover { border-color: #FF9800; background: #fff8e1; }

/* Safari Info */
.big-icon { font-size: 80px; margin: 10px 0; }
.info-box { background: white; padding: 20px; border-radius: 15px; text-align: left; font-size: 20px; line-height: 1.6; margin: 20px 0; }
.info-box p { margin-bottom: 15px; padding: 10px; border-radius: 8px; }
.fun-fact { background: #e0f7fa; border-left: 5px solid #00bcd4; }

/* Puhekorostus */
.highlight { background-color: #ffeb3b; transform: scale(1.02); transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.action-btn {
    background: #4CAF50; color: white; font-size: 24px; padding: 15px 40px; border-radius: 50px;
    font-weight: bold; box-shadow: 0 5px 0 #2E7D32; margin-top: 20px;
}

/* Quiz */
.question-box { background: #fff3e0; padding: 20px; border-radius: 15px; border: 3px solid #ffb74d; margin: 20px 0; font-size: 22px; }
.answers-grid { display: grid; gap: 15px; }
.ans-btn {
    background: white; border: 2px solid #ccc; padding: 20px; font-size: 20px; border-radius: 15px; font-weight: bold;
    box-shadow: 0 4px 0 #bbb;
}
.ans-btn.correct { background: #dcedc8; border-color: #8bc34a; }
.ans-btn.wrong { background: #ffcdd2; border-color: #e57373; }