/* style.css – Veselé Počítání */
:root {
    --pink: #ff4081;
    --blue: #2196f3;
    --green: #4caf50;
    --yellow: #ffeb3b;
    --orange: #ff9800;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;
    font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
    background: linear-gradient(135deg, #e3f2fd 0%, #fff9c4 100%);
    color: #333;
}

/* === UNIFIED GAME HEADER === */
.game-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 100px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 30px; box-sizing: border-box; z-index: 4000;
    pointer-events: none;
}
.game-header > * { pointer-events: auto; }

.btn-home, .btn-restart {
    width: 70px; height: 70px; border: none; background: transparent;
    cursor: pointer; border-radius: 20px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-home img, .btn-restart img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.btn-home:active, .btn-restart:active { transform: scale(0.9); }

.score-display {
    font-size: 2.5rem; font-weight: 900; color: var(--orange);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    pointer-events: none;
}

#level-display {
    font-size: 1.2rem; font-weight: bold; color: var(--pink);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    pointer-events: none;
}

/* === HERNÍ PLOCHA === */
#game-area {
    position: absolute; top: 100px; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px; gap: 20px;
}

/* Oblast s předměty k počítání */
#objects-area {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 15px; max-width: 700px; min-height: 200px; padding: 20px;
}

.count-object {
    font-size: 4rem; line-height: 1;
    animation: popObject 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
    transition: transform 0.2s, opacity 0.3s;
    cursor: default;
}
.count-object:hover { transform: scale(1.2) rotate(5deg); }

/* Rušivé prvky (Level 2) - už nejsou zašedlé, dítě je musí rozlišit samo */

/* Animace pro přeškrtnuté prvky (odčítání) */
.count-object.crossed {
    text-decoration: line-through;
    opacity: 0.3;
    transform: scale(0.8);
}

@keyframes popObject {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Operátor (+/-) mezi skupinami */
.operator {
    font-size: 5rem; font-weight: 900; color: var(--pink);
    text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
    margin: 0 10px;
}

/* Otázka */
#question-text {
    font-size: 2rem; font-weight: 900; color: #333;
    text-align: center; padding: 10px 30px;
    background: rgba(255,255,255,0.8); border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* === TLAČÍTKA ODPOVĚDÍ === */
#answers-area {
    display: flex; gap: 25px; justify-content: center; flex-wrap: wrap;
}

.answer-btn {
    width: 120px; height: 120px; border-radius: 50%;
    border: 5px solid transparent; font-size: 3.5rem; font-weight: 900;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 0 rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: 'Nunito', sans-serif;
    color: white;
}
.answer-btn:active { transform: translateY(8px); box-shadow: 0 0 0; }
.answer-btn:nth-child(1) { background: var(--blue); box-shadow: 0 8px 0 #1565c0; }
.answer-btn:nth-child(2) { background: var(--pink); box-shadow: 0 8px 0 #ad1457; }
.answer-btn:nth-child(3) { background: var(--green); box-shadow: 0 8px 0 #2e7d32; }

/* Správná odpověď - zelený záblesk */
.answer-btn.correct {
    background: var(--green) !important; border-color: #81c784;
    animation: pulse 0.4s ease;
}
/* Špatná odpověď - červené zatřesení */
.answer-btn.wrong {
    animation: shake 0.4s ease;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-15px); }
    40% { transform: translateX(15px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

/* === MODÁLNÍ OKNA === */
.overlay-modal {
    position: fixed; inset: 0; background: rgba(255,255,255,0.97);
    z-index: 5000; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: auto;
}
.modal-content {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 15px; text-align: center;
}

.btn-start {
    width: 180px; height: 180px; background: transparent; padding: 0;
    border: none; border-radius: 40px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.btn-start img { width: 100%; height: 100%; object-fit: cover; border-radius: 40px; }
.btn-start:active { transform: scale(0.93); }

/* === KONFETY === */
.confetti {
    position: absolute; pointer-events: none; z-index: 6000;
    border-radius: 50%;
    animation: confettiFly 1s ease-out forwards;
}
@keyframes confettiFly {
    0% { transform: translate(0,0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(720deg); opacity: 0; }
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* === RESPONSIVITA === */
@media (max-height: 700px) {
    .count-object { font-size: 3rem; }
    .count-object.distractor { font-size: 2.5rem; }
    #question-text { font-size: 1.5rem; }
    .answer-btn { width: 90px; height: 90px; font-size: 2.5rem; }
    #objects-area { min-height: 120px; gap: 10px; }
    .btn-start { width: 140px; height: 140px; }
}