/* Žádné externí závislosti — funguje offline na tabletu */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Eliminuje 300ms zpoždění dotyku na mobilech/tabletech */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --pink:   #FF6B9D;
    --purple: #A855F7;
    --blue:   #3B82F6;
    --green:  #10B981;
    --yellow: #F59E0B;
    --orange: #F97316;
    --red:    #EF4444;

    /* Systémový font — funguje offline na Android i iOS */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
}

html {
    /* Správná výška na iOS Safari (překrývání adresního řádku) */
    height: -webkit-fill-available;
}

body {
    font-family: var(--font);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: linear-gradient(135deg, #FFF0F5 0%, #FFE4F0 50%, #EDE4FF 100%);
    user-select: none;
    -webkit-user-select: none;
    /* Zabraňuje pinch-zoom na tabletu během hry */
    overflow-x: hidden;
}

/* ===== HUB ===== */
.hub-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 100px; /* spodní padding = prostor pro timer widget */
    min-height: 100vh;
}

.hub-title {
    font-size: clamp(2.2rem, 8vw, 3.8rem);
    font-weight: 900;
    color: var(--pink);
    text-shadow: 3px 3px 0 rgba(255,107,157,.2);
    margin-bottom: 8px;
    text-align: center;
}

.hub-subtitle {
    font-size: clamp(1rem, 3vw, 1.4rem);
    color: #999;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

.game-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 560px;
    width: 100%;
}

.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    border-radius: 28px;
    text-decoration: none;
    font-weight: 900;
    font-size: clamp(1rem, 3vw, 1.3rem);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
    border: none;
    color: white;
    font-family: var(--font);
    /* Velký touch target */
    min-height: 120px;
}

.game-card:hover, .game-card:active {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.game-card-icon { font-size: clamp(2.8rem, 7vw, 3.8rem); margin-bottom: 12px; line-height: 1; display: block; }
.game-card-name { text-align: center; line-height: 1.25; }

.card-barvy      { background: linear-gradient(135deg, #FF6B9D, #FF8C42); }
.card-pocitani   { background: linear-gradient(135deg, #A855F7, #6366F1); }
.card-pismena    { background: linear-gradient(135deg, #10B981, #3B82F6); }
.card-pexeso     { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.card-skladani   { background: linear-gradient(135deg, #0EA5E9, #7C3AED); }
.card-hodiny     { background: linear-gradient(135deg, #F59E0B, #D97706); }
.card-bubliny    { background: linear-gradient(135deg, #06B6D4, #0284C7); }
.card-obtahni    { background: linear-gradient(135deg, #A855F7, #EC4899); }
.card-vystrel    { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.card-vyuka      { background: linear-gradient(135deg, #10B981, #059669); }
.card-krmeni     { background: linear-gradient(135deg, #F97316, #EF4444); }
.card-anglictina { background: linear-gradient(135deg, #1E3A8A, #DC2626); }

/* ===== HERNÍ STRÁNKY — SDÍLENÉ ===== */
.game-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px 100px; /* spodní padding = prostor pro timer widget */
    min-height: 100vh;
    max-width: 580px;
    margin: 0 auto;
}

.game-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.back-btn {
    background: rgba(255,255,255,.9);
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 1rem;
    font-family: var(--font);
    font-weight: 700;
    cursor: pointer;
    color: #555;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    transition: transform .15s;
    /* Dostatečná dotyková plocha */
    min-height: 48px;
    min-width: 80px;
    text-align: center;
}
.back-btn:active { transform: scale(.97); }

.score-display {
    background: rgba(255,255,255,.9);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 900;
    font-size: 1.05rem;
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.game-title {
    font-size: clamp(1.4rem, 5vw, 2.1rem);
    font-weight: 900;
    color: var(--pink);
    margin-bottom: 12px;
    text-align: center;
}

.streak-display {
    font-size: 1.5rem;
    margin-bottom: 10px;
    min-height: 1.8rem;
    letter-spacing: 3px;
}

.question-card {
    background: white;
    border-radius: 28px;
    padding: 22px;
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 14px;
}

.question-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: #666;
    margin-bottom: 14px;
    text-align: center;
}

.answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 420px;
}

.answer-btn {
    background: #F8F9FA;
    border: 3px solid #E8E8E8;
    border-radius: 18px;
    padding: 14px 10px;
    font-size: 1.1rem;
    font-family: var(--font);
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Minimální dotyková plocha 48×48px */
    min-height: 64px;
}
.answer-btn:active:not(:disabled) { transform: scale(.97); }
.answer-btn.correct { background: #D1FAE5; border-color: #10B981; color: #065F46; animation: pulse .4s ease; }
.answer-btn.wrong   { background: #FEE2E2; border-color: #EF4444; color: #991B1B; animation: shake .4s ease; }
.answer-btn.blinking { border-color: #A855F7; animation: answerBlink .65s ease infinite; }
.answer-btn:disabled { cursor: default; }

@keyframes answerBlink {
    0%,100% { border-color: #A855F7; background: white; }
    50%     { border-color: #7C3AED; background: #EDE9FE; box-shadow: 0 0 14px 3px rgba(124,58,237,.22); }
}

/* ===== TVARY ===== */
.shape-display {
    width: 170px;
    height: 170px;
    margin: 10px 0;
    transition: transform .3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    flex-shrink: 0;
}

.shape-circle   { border-radius: 50%; }
.shape-square   { border-radius: 14px; }
.shape-triangle { clip-path: polygon(50% 4%, 2% 96%, 98% 96%); border-radius: 0; box-shadow: none; }
.shape-star     { clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); border-radius: 0; box-shadow: none; }
.shape-diamond  { clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); border-radius: 0; box-shadow: none; }

/* ===== ZÁLOŽKY MÓDU ===== */
.mode-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.75);
    padding: 6px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    flex-wrap: wrap;
    justify-content: center;
}

.mode-tab {
    padding: 11px 20px;
    border-radius: 50px;
    border: none;
    font-family: var(--font);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: all .2s;
    color: #999;
    background: transparent;
    min-height: 48px;
}
.mode-tab.active { background: white; color: var(--pink); box-shadow: 0 2px 10px rgba(0,0,0,.12); }

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.7);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ===== POČÍTÁNÍ ===== */
.emoji-display {
    font-size: 2.2rem;
    line-height: 1.5;
    text-align: center;
    min-height: 110px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.number-btn { font-size: 1.9rem; font-weight: 900; min-height: 76px; }

/* ===== PÍSMENA ===== */
.word-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}
.word-emoji { font-size: 5rem; line-height: 1; }
.word-text  { font-size: 1.7rem; font-weight: 900; color: #333; letter-spacing: 4px; }
.word-text .hl { color: var(--pink); font-size: 2.1rem; }
.letter-btn { font-size: 1.7rem; font-weight: 900; min-height: 72px; }

/* ===== PEXESO ===== */
.pexeso-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
}

.pexeso-stat {
    background: rgba(255,255,255,.9);
    border-radius: 50px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: .95rem;
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.diff-btn {
    padding: 10px 18px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,.7);
    background: rgba(255,255,255,.5);
    font-family: var(--font);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s;
    color: #666;
    min-height: 48px;
}
.diff-btn.active, .diff-btn:active { background: white; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,.1); }

.pexeso-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 480px;
}

/* Otočení karet */
.card-outer {
    aspect-ratio: 1;
    border: none;
    cursor: pointer;
    background: transparent;
    padding: 0;
    border-radius: 16px;
    perspective: 700px;
}
.card-outer:disabled { cursor: default; }

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .4s ease;
    border-radius: 16px;
}

.card-outer.flipped .card-inner,
.card-outer.matched .card-inner { transform: rotateY(180deg); }

.card-face {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-back-face {
    background: linear-gradient(135deg, #A855F7, #6366F1);
    font-size: 1.8rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.card-front-face {
    transform: rotateY(180deg);
    background: white;
    font-size: 2.4rem;
    border: 3px solid #E8E8E8;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    text-align: center;
    padding: 4px;
    overflow: hidden;
}

.card-outer.matched .card-front-face {
    background: #D1FAE5;
    border-color: #10B981;
    animation: pulse .5s ease;
}

/* ===== VÝHERNÍ OBRAZOVKA ===== */
.win-screen {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
    padding: 24px;
    text-align: center;
}
.win-screen.show { opacity: 1; pointer-events: all; }
.win-emoji { font-size: 5.5rem; margin-bottom: 12px; animation: bounceIn .6s ease forwards; }
.win-text  { font-size: 2.4rem; font-weight: 900; color: var(--pink); margin-bottom: 6px; }
.win-sub   { font-size: 1.15rem; color: #999; margin-bottom: 28px; }

.win-btn {
    background: linear-gradient(135deg, var(--pink), var(--orange));
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px 38px;
    font-family: var(--font);
    font-weight: 900;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255,107,157,.4);
    transition: transform .15s;
    margin: 6px;
    min-height: 56px;
}
.win-btn:active { transform: scale(.97); }
.win-btn.secondary { background: #f0f0f0; color: #666; box-shadow: none; }

/* ===== ANGLIČTINA ===== */
.speak-btn {
    background: rgba(255,255,255,.9);
    border: 3px solid #E8E8E8;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    margin-top: 12px;
    flex-shrink: 0;
    transition: transform .15s;
}
.speak-btn:active { transform: scale(.92); }

/* ===== ANIMACE ===== */
@keyframes pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-10px); }
    40%      { transform: translateX(10px); }
    60%      { transform: translateX(-8px); }
    80%      { transform: translateX(8px); }
}

@keyframes bounceIn {
    0%   { transform: scale(0) rotate(-10deg); }
    60%  { transform: scale(1.15) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes confettiFall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    animation: confettiFall linear forwards;
}

/* ===== TABLET — větší než 600px ===== */
@media (min-width: 600px) {
    .game-grid { max-width: 600px; gap: 22px; }
    .game-card { padding: 32px 20px; min-height: 140px; }
    .pexeso-grid { max-width: 520px; gap: 12px; }
    .answers-grid { max-width: 480px; gap: 14px; }
    .answer-btn { min-height: 72px; font-size: 1.2rem; }
    .letter-btn { font-size: 2rem; min-height: 80px; }
    .number-btn { font-size: 2.2rem; min-height: 88px; }
}

/* ===== MALÉ OBRAZOVKY ===== */
@media (max-width: 380px) {
    .game-grid { grid-template-columns: 1fr; }
    .game-card { flex-direction: row; gap: 14px; justify-content: flex-start; padding: 18px 20px; }
    .game-card-icon { margin-bottom: 0; font-size: 2.4rem; }
    .answers-grid { gap: 8px; }
    .answer-btn { padding: 12px 8px; font-size: 1rem; min-height: 56px; }
    .pexeso-grid { gap: 7px; }
}