/*
Theme Name:    StudioTuzkaTemplate
Theme URI:      n/a
Template:       kadence
Author:         Studio Tužka
Author URI:     n/a
Description:    Custom framework založený na šabloně Kadence. Obsahuje integrovanou knihovnu Block Patternů, optimalizované moduly a vlastní layouty pro rychlejší vývoj webů. Od Studio Tužka.
Version:        1.1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================
   1. VÝUKOVÁ APLIKACE - MATEMATIKA (KOMPAKTNÍ)
   ========================================================== */

.mat-app { 
    max-width: 550px; 
    width: 95%; 
    margin: 1rem auto 2rem auto; 
    font-family: inherit; 
    color: var(--global-palette4, #333); 
}

.mat-card {
    background: var(--global-palette9, #ffffff); 
    border-radius: 20px; 
    padding: 1.5rem; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
    text-align: center; display: flex; flex-direction: column;
    align-items: center; position: relative;
}

.mat-timer { position: absolute; top: 1rem; right: 1.5rem; font-family: monospace; font-size: 0.9rem; font-weight: bold; color: var(--global-palette5, #666); display: flex; align-items: center; gap: 6px; }
.mat-progress { background: var(--global-palette8, #f0f4f8); color: var(--global-palette1, #004b4d); padding: 0.4rem 1.2rem; border-radius: 50px; font-weight: 800; font-size: 1rem; margin-bottom: 1rem; display: inline-block; }

.mat-stats { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; width: 100%; }
.mat-stat-box { display: flex; flex-direction: column; align-items: center; padding-bottom: 0.4rem; border-bottom: 3px solid transparent; min-width: 60px; }
.mat-stat-label { font-size: 0.7rem; text-transform: uppercase; font-weight: 800; color: var(--global-palette5, #666); margin-bottom: 0.3rem; }
.mat-stat-val { font-size: 1.5rem; font-weight: 900; }

.mat-text-green { color: var(--global-success, #22c55e); }
.mat-text-red { color: var(--global-danger, #ef4444); }
.mat-text-blue { color: var(--global-palette1, #004b4d); }

/* Rovnice a políčko pro doplnění */
.mat-eq { font-size: 3.5rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 1rem 0 2rem 0; gap: 0.5rem; }
.mat-eq-part { color: var(--global-palette4, #1a202c) !important; }
.mat-placeholder { color: var(--global-palette2, #ff6b6b) !important; opacity: 1 !important; font-weight: 600; }

.mat-eq-input { 
    min-width: 75px; height: 85px; 
    background: #e2e8f0 !important;
	font-weight: 600;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.08); 
    color: var(--global-palette1, #004b4d); border-radius: 16px; display: flex; justify-content: center; align-items: center; margin: 0 0.3rem; transition: all 0.2s ease; 
}
.mat-eq-input.correct { background: var(--global-success, #22c55e) !important; box-shadow: none; color: #ffffff; }
.mat-eq-input.error { background: var(--global-danger, #ef4444) !important; box-shadow: none; color: #ffffff; }

/* Klávesnice a tlačítka matematiky */
.mat-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 350px; } 
.mat-btn-num { background: var(--global-palette9, #ffffff); color: var(--global-palette1, #004b4d); border: 2px solid var(--global-palette8, #f0f4f8); font-size: 2rem; font-weight: 800; padding: 0.8rem 0; border-radius: 14px; cursor: pointer; transition: all 0.1s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.mat-btn-num:active { transform: scale(0.95); background: var(--global-palette8, #f0f4f8); }

.mat-btn-action { background: var(--global-palette8, #f0f4f8); color: var(--global-palette4, #333); border: none; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.4rem; transition: all 0.1s ease; }
.mat-btn-action span { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; margin-top: 2px; }
.mat-btn-action:active { transform: scale(0.95); }

.mat-btn-submit { background: var(--global-palette8, #e2e8f0); color: var(--global-palette5, #64748b) !important; pointer-events: none; }
.mat-btn-submit.active { background: var(--global-success, #22c55e); color: #ffffff !important; pointer-events: auto; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4); }

.mat-h1 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.2rem; color: var(--global-palette3); }
.mat-h2 { font-size: 0.9rem; font-weight: bold; text-transform: uppercase; color: var(--global-palette5); margin-bottom: 0.8rem; }

.mat-btn-primary { background: var(--global-palette1, #004b4d); color: var(--global-palette9, #ffffff); border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 800; border-radius: 50px; width: 100%; max-width: 350px; cursor: pointer; transition: all 0.2s; margin-top: 1rem; }
.mat-btn-primary:active { transform: scale(0.95); }

.mat-btn-opt { background: var(--global-palette8, #f0f4f8); color: var(--global-palette4, #333); border: none; border-bottom: 4px solid var(--global-palette7, #e2e8f0); padding: 0.6rem 0.8rem; font-size: 1.1rem; font-weight: 800; border-radius: 14px; cursor: pointer; margin: 0 4px; }
.mat-btn-opt.active { background: var(--global-palette1, #004b4d); color: var(--global-palette9, #ffffff); border-bottom-color: var(--global-palette2, #e63946); }

.mat-flex-center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ==========================================================
   2. LOGIKA (VETŘELEC) A SLABIKY (TLESKÁNÍ)
   ========================================================== */

/* Společný obal pro obě hry */
.log-app, .syl-app { max-width: 600px; margin: 1rem auto 2rem auto; width: 95%; font-family: inherit; color: var(--global-palette4, #333); }

/* Mřížky */
.log-grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; max-width: 400px; margin: 2rem auto; }
.syl-grid-3 { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; width: 100%; }

/* Herní tlačítka */
.log-item-btn { 
    background: var(--global-palette8, #f0f4f8) !important; 
    border: 4px solid var(--global-palette7, #e2e8f0) !important; 
    border-radius: 24px; 
    padding: 1.5rem; 
    aspect-ratio: 1 / 1; 
    cursor: pointer; 
    transition: all 0.2s ease;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    color: var(--global-palette1, #004b4d);
}

.syl-item-btn {
    background: var(--global-palette8, #f0f4f8) !important; 
    color: var(--global-palette1, #004b4d) !important;
    border: 4px solid var(--global-palette7, #e2e8f0) !important; 
    border-radius: 20px; 
    padding: 1.5rem; 
    cursor: pointer; 
    transition: all 0.2s ease;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ==========================================================
   3. EFEKTY A ANIMACE PRO VŠECHNY HRY
   ========================================================== */

/* --- HOVER EFEKT (POUZE PRO POČÍTAČE S MYŠÍ!) --- */
@media (hover: hover) {
    /* Jemný posun nahoru pro herní tlačítka u předškoláků */
    .log-item-btn:hover, .syl-item-btn:hover { 
        transform: translateY(-4px); 
        box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
    }
    /* Jemný posun u číselníku na matematice */
    .mat-btn-num:hover {
        border-color: var(--global-palette7, #e2e8f0); 
        transform: translateY(-2px);
    }
}

/* --- EFEKT PŘI KLIKNUTÍ/ŤUKNUTÍ (Počítače i Mobily) --- */
.log-item-btn:active, .syl-item-btn:active { 
    transform: scale(0.95); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

/* --- ANIMACE PRO VYHODNOCENÍ (SPRÁVNĚ / ŠPATNĚ) --- */
.correct-animation {
    background: var(--global-success, #22c55e) !important;
    border-color: var(--global-success, #22c55e) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3) !important;
}

.error-animation {
    background: var(--global-danger, #ef4444) !important;
    border-color: var(--global-danger, #ef4444) !important;
    color: #ffffff !important;
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Klíčové snímky pro animace */
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}





/* ==========================================================
   FINANČNÍ GRAMOTNOST (ČISTÉ A JEDNODUCHÉ MINCE)
   ========================================================== */
.money-app { max-width: 550px; width: 95%; margin: 1rem auto 2rem auto; font-family: inherit; color: var(--global-palette4, #333); }

.money-coins-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 2rem 0;
    min-height: 120px;
}

/* Základní vlastnosti tvaru */
.money-coin {
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%; 
    font-weight: 900;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    animation: popIn 0.3s ease-out;
}

/* --- BARVY: STŘÍBRO (1 Kč, 2 Kč, 5 Kč) --- */
.money-coin-1, .money-coin-2, .money-coin-5 {
    background: linear-gradient(to bottom, #f8fafc, #e2e8f0); /* Velmi jemný přechod */
    color: #475569;
    border: 3px solid #cbd5e1;
}
/* Stíny přidávající tloušťku */
.money-coin-1 { box-shadow: 0 5px 0 #94a3b8; }
.money-coin-2 { box-shadow: 0 5px 0 #94a3b8; }
.money-coin-5 { border-width: 4px; box-shadow: 0 6px 0 #94a3b8; }

/* --- BARVY: BRONZ (10 Kč) --- */
.money-coin-10 {
    background: linear-gradient(to bottom, #d97757, #c45a38);
    color: #ffffff;
    border: 4px solid #a34626;
    box-shadow: 0 6px 0 #7a3118;
}

/* --- BARVY: ZLATO (20 Kč) --- */
.money-coin-20 {
    background: linear-gradient(to bottom, #fde047, #facc15);
    color: #a16207;
    border: 5px solid #eab308;
    box-shadow: 0 7px 0 #ca8a04;
}

/* --- VELIKOSTI --- */
.money-coin-1 { width: 55px; height: 55px; font-size: 1.6rem; }
.money-coin-2 { width: 62px; height: 62px; font-size: 1.8rem; }
.money-coin-5 { width: 70px; height: 70px; font-size: 2.1rem; }
.money-coin-10 { width: 80px; height: 80px; font-size: 2.4rem; }
.money-coin-20 { width: 90px; height: 90px; font-size: 2.8rem; }

/* Jemný efekt při najetí myší (mince se trošku zhoupne dolů) */
@media (hover: hover) {
    .money-coin:hover { transform: translateY(2px); }
    .money-coin-1:hover, .money-coin-2:hover { box-shadow: 0 3px 0 #94a3b8; }
    .money-coin-5:hover { box-shadow: 0 4px 0 #94a3b8; }
    .money-coin-10:hover { box-shadow: 0 4px 0 #7a3118; }
    .money-coin-20:hover { box-shadow: 0 5px 0 #ca8a04; }
}




/* ==========================================================
 --- ROZKLAD PŘES 10 (KLIKACÍ POLÍČKA) ---
   ========================================================== */
.bridge-input {
    min-width: 55px !important; 
    height: 65px !important; 
    cursor: pointer;
    margin: 0 !important;
}

.bridge-active-box {
    box-shadow: 0 0 0 4px rgba(0, 75, 77, 0.2) !important; 
    border: 3px solid var(--global-palette1, #004b4d);
    transform: scale(1.08);
    background: #ffffff !important;
}



/* ==========================================================
 --- HRA S TVARY - přiřazení (PŘEDŠKOLÁCI) ---
* ======================================================== */

.shape-btn {
    background: #ffffff;
    border: 3px solid #cbd5e1;
    border-radius: 20px;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    width: 100px;
    height: 100px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

@media (hover: hover) {
    .shape-btn:hover {
        transform: translateY(-4px) scale(1.05);
        border-color: #94a3b8;
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    }
}

/* Animace a barvy PŘI CHYBĚ */
.shape-error {
    animation: shapeShake 0.4s cubic-bezier(.36,.07,.19,.97) both !important;
    background: #fef2f2 !important; /* Světle červené pozadí */
    border-color: #ef4444 !important; /* Ostře červený okraj */
}

@keyframes shapeShake {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}



/* ==========================================================
 --- HRA S písmeny - přiřazení (PŘEDŠKOLÁCI) ---
* ======================================================== */
.letter-btn {
    background: #ffffff;
    border: 3px solid #cbd5e1;
    border-radius: 20px;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    width: 100px;
    height: 100px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

@media (hover: hover) {
    .letter-btn:hover {
        transform: translateY(-4px) scale(1.05);
        border-color: #94a3b8;
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    }
}

.letter-error {
    animation: letterShake 0.4s cubic-bezier(.36,.07,.19,.97) both !important;
    background: #fef2f2 !important; 
    border-color: #ef4444 !important; 
}

@keyframes letterShake {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(5px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}


/* ==========================================================
   PEXESO (3D KARTIČKY)
   ========================================================== */

.memory-grid {
    display: grid; gap: 10px; justify-content: center; width: 100%;
}
/* Mřížky podle obtížnosti (24 a 36 mají teď 6 sloupců!) */
.memory-grid-16 { grid-template-columns: repeat(4, 1fr); max-width: 400px; margin: 0 auto; }
.memory-grid-24, .memory-grid-36 { grid-template-columns: repeat(6, 1fr); max-width: 550px; margin: 0 auto; }

/* Pojistka pro mobily: aby se 6 sloupců vlezlo, zmenšíme mezeru */
@media (max-width: 500px) {
    .memory-grid { gap: 5px; }
}

/* 3D Kontejner pro kartu (zbytek CSS zůstává stejný...) */
.memory-card {
    aspect-ratio: 1 / 1;
    background-color: transparent;
    cursor: pointer;
    perspective: 1000px;
}

/* Vnitřní vrstva, která se fyzicky točí */
.memory-card-inner {
    position: relative; width: 100%; height: 100%;
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* Třída pro přetočení! */
.memory-card.flipped .memory-card-inner {
    transform: rotateY(180deg);
}

/* Obě strany karty schovávají svá záda */
.memory-card-front, .memory-card-back {
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Obal (S modrým otazníkem) - ukazuje se na začátku */
.memory-card-front {
    background: linear-gradient(135deg, var(--global-palette1), var(--global-palette2));
    color: white; font-size: 2rem; font-weight: bold;
    border: 3px solid rgba(255,255,255,0.2);
}

/* Rub se zvířátkem - je hned od začátku otočený o 180 stupňů zády k nám */
.memory-card-back {
    background: #ffffff;
    transform: rotateY(180deg);
    font-size: 2.5rem;
    border: 3px solid var(--global-palette7);
}

/* Úspěšně uhodnutý pár */
.memory-card.matched .memory-card-back {
    background: #dcfce7;
    border-color: #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

/* Přizpůsobení velikosti zvířátek pro mobily */
@media (max-width: 450px) {
    .memory-card-back { font-size: 1.8rem; }
    .memory-card-front { font-size: 1.5rem; }
}