/* ============================================================
   kvizuj.sukromnaskola.eu - Herné módy
   ============================================================ */

.game-viewport {
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    min-height: 480px;
    position: relative;
    overflow: hidden;
}

/* Režim celej obrazovky */
.game-viewport:fullscreen,
.game-viewport:-webkit-full-screen {
    border-radius: 0 !important;
    border: none !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

/* ============================================================
   PREDHERNÁ STMAVENÁ OBRAZOVKA (START OVERLAY S TLAČIDLOM HRAJ)
   ============================================================ */
.game-start-overlay {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.game-start-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.game-start-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.84) 0%, rgba(10, 15, 30, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.game-start-card {
    position: relative;
    z-index: 2;
    max-width: 480px;
    width: 100%;
    background: rgba(30, 41, 59, 0.88);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 2.2rem 2rem;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 40px rgba(67, 97, 238, 0.25);
    animation: zoomInOverlay 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.game-start-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0.75rem;
}

.game-start-title {
    font-size: clamp(1.35rem, 2.5vh, 1.75rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.85rem;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.game-start-player {
    margin-bottom: 1.25rem;
}

/* Veľké pulzujúce tlačidlo HRAJ */
.btn-big-play {
    position: relative;
    min-width: 220px;
    height: 72px;
    padding: 0 2.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 3px solid #6ee7b7;
    box-shadow: 0 0 35px rgba(16, 185, 129, 0.55), 0 10px 25px rgba(0, 0, 0, 0.35);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    margin: 0.5rem 0 1.25rem;
}

.btn-big-play:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.75), 0 15px 30px rgba(0, 0, 0, 0.45);
    border-color: #a7f3d0;
}

.btn-big-play:active {
    transform: scale(0.98);
}

.btn-big-play-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 2px solid #10b981;
    animation: bigPlayPulseRing 2s infinite ease-out;
    pointer-events: none;
}

@keyframes bigPlayPulseRing {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.18); opacity: 0; }
}

.btn-big-play-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 2;
}

.btn-big-play-icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* Výber počtu otázok v predhernom okne */
.game-start-count-wrap {
    width: 100%;
    margin: 0.2rem 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}
.game-start-count-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.game-start-count-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-items: center;
}
.start-count-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.start-count-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}
.start-count-pill.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    transform: scale(1.05);
}

.game-start-hints {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 600;
}

.start-hint-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
}

/* Horná ovládacia lišta hry */
.game-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    z-index: 10;
    flex-shrink: 0;
}

.game-modes-nav {
    display: flex;
    gap: 0.35rem;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 12px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
}

.mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mode-tab:hover {
    color: var(--text-main);
}

.mode-tab.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.game-stats-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
}

.stat-icon {
    font-size: 1.2rem;
}

.game-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-btn {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-main);
}

.icon-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Hlavná herná plocha */
.game-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    position: relative;
    background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%);
    overflow: hidden;
}

/* ------------------------------------------------------------
   1. KOLESO ŠŤASTIA
   ------------------------------------------------------------ */
.wheel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: auto;
    max-height: 100%;
}

.wheel-canvas-wrap {
    position: relative;
    width: clamp(260px, 52vh, 460px);
    height: clamp(260px, 52vh, 460px);
    max-width: 85vw;
    max-height: 56vh;
    margin-bottom: clamp(0.5rem, 1.5vh, 1.25rem);
}

#wheelCanvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 0 0 10px #ffffff, 0 0 0 14px #e2e8f0;
}

/* Ukazovateľ kolesa (šípka hore) */
.wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 36px solid #ef4444;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    z-index: 5;
}

/* Stredový pin */
.wheel-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #f8fafc, #94a3b8);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 2px 4px #fff;
    border: 3px solid #ffffff;
    z-index: 4;
}

.btn-spin {
    background: linear-gradient(135deg, #f72585, #7209b7);
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: clamp(0.6rem, 1.5vh, 0.9rem) clamp(1.2rem, 3vw, 2.2rem);
    font-size: clamp(1rem, 2.2vh, 1.25rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(247, 37, 133, 0.4);
    transition: all 0.2s ease;
}

.btn-spin:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 8px 25px rgba(247, 37, 133, 0.5);
}

.btn-spin:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ------------------------------------------------------------
   2. INTERAKTÍVNY KVÍZ
   ------------------------------------------------------------ */
.quiz-container {
    width: 100%;
    max-width: 850px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.5rem, 1.8vh, 1.25rem);
    margin: auto;
}

.quiz-progress-bar-wrap {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4361ee, #4cc9f0);
    width: 0%;
    transition: width 0.3s ease;
}

.quiz-question-box {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: clamp(0.75rem, 2vh, 1.75rem) clamp(1rem, 2.5vw, 2rem);
    text-align: center;
    box-shadow: var(--shadow-md);
    min-height: clamp(65px, 12vh, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-question-text {
    font-size: clamp(1.1rem, 2.8vh, 1.65rem);
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
}

.quiz-answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.5rem, 1.5vh, 1rem);
}

.quiz-answer-btn {
    border: none;
    border-radius: var(--radius-md);
    padding: clamp(0.6rem, 1.8vh, 1.25rem) clamp(0.75rem, 2vw, 1.25rem);
    font-size: clamp(0.95rem, 2.2vh, 1.2rem);
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    transition: all 0.15s ease;
    box-shadow: var(--shadow-md);
    position: relative;
    user-select: none;
    min-height: clamp(48px, 8.5vh, 72px);
}

.quiz-answer-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.ans-letter {
    background: rgba(0, 0, 0, 0.2);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* 4 farby pre kvízové možnosti */
.ans-color-0 { background: #e63946; } /* Červená */
.ans-color-1 { background: #1d3557; } /* Tmavomodrá */
.ans-color-2 { background: #e76f51; } /* Oranžová */
.ans-color-3 { background: #2a9d8f; } /* Tyrkysová */

.quiz-answer-btn.correct {
    background: #10b981 !important;
    animation: pulseCorrect 0.6s ease;
}

.quiz-answer-btn.wrong {
    background: #ef4444 !important;
    animation: shakeWrong 0.5s ease;
    opacity: 0.7;
}

.quiz-answer-btn:disabled {
    cursor: default;
}

@keyframes pulseCorrect {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

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

/* ------------------------------------------------------------
   3. PEXESO / SPÁJAČKA
   ------------------------------------------------------------ */
.memory-container {
    width: 100%;
    max-width: 900px;
    max-height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(85px, 12vw, 130px), 1fr));
    gap: clamp(0.35rem, 1vh, 0.85rem);
    perspective: 1000px;
    max-height: 100%;
}

.memory-card {
    height: clamp(65px, 11vh, 115px);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.memory-card.flipped {
    transform: rotateY(180deg);
}

.memory-card.match-highlight {
    animation: matchPulse 0.4s ease infinite alternate;
}

@keyframes matchPulse {
    0% { transform: rotateY(180deg) scale(1); box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }
    100% { transform: rotateY(180deg) scale(1.08); box-shadow: 0 0 25px rgba(16, 185, 129, 0.9); }
}

/* Po odplávaní zostane v mriežke prázdne miesto s jemnou fajkou */
.memory-card.matched {
    pointer-events: none;
    transform: none !important;
    border: 2px dashed #86efac;
    background: rgba(240, 253, 244, 0.6);
    box-shadow: none;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-card.matched .memory-card-face {
    display: none !important;
}

.memory-card.matched::after {
    content: "✓";
    font-size: 2.2rem;
    font-weight: 800;
    color: #10b981;
    opacity: 0.6;
}

.memory-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    box-shadow: var(--shadow-md);
    user-select: none;
}

.memory-card-back {
    background: linear-gradient(135deg, #4361ee, #3a0ca3);
    color: #ffffff;
    font-size: 2rem;
    border: 3px solid #ffffff;
}

.memory-card-front {
    background: #ffffff;
    color: var(--text-main);
    transform: rotateY(180deg);
    border: 3px solid #4361ee;
    font-weight: 700;
    font-size: 1.05rem;
    word-break: break-word;
}

/* Plávajúce karty pre animáciu nájdenej dvojice */
.memory-match-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.floating-match-card {
    position: absolute;
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 3.5px solid #10b981;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: #1e293b;
    padding: 1rem;
    word-break: break-word;
    box-sizing: border-box;
    transition: all 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.25);
    z-index: 101;
}

.floating-match-badge {
    position: absolute;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.55rem 1.4rem;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 102;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.3);
    border: 2px solid #ffffff;
}

.floating-match-badge.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.floating-match-card.float-away,
.floating-match-badge.float-away {
    transform: translateY(-550px) scale(0.55) rotate(6deg) !important;
    opacity: 0 !important;
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease !important;
}

/* ------------------------------------------------------------
   4. OTVOR KRABIČKU (OPEN THE BOX)
   ------------------------------------------------------------ */
.box-container {
    width: 100%;
    max-width: 900px;
    margin: auto;
}

.box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
}

.mystery-box {
    height: 130px;
    background: linear-gradient(135deg, #f72585, #b5179e);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 16px rgba(181, 23, 158, 0.3), inset 0 2px 4px rgba(255,255,255,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    font-weight: 800;
    transition: all 0.2s ease;
    position: relative;
    border: 3px solid rgba(255, 255, 255, 0.4);
}

.mystery-box:hover:not(.opened) {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 22px rgba(181, 23, 158, 0.45);
}

.box-number {
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.2);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.mystery-box.opened {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    box-shadow: none;
    cursor: default;
    transform: none;
}

.mystery-box.opened .box-number {
    background: #cbd5e1;
    color: #64748b;
}

/* Modálne okno s vylosovanou položkou / výsledkom */
.result-dialog {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: clamp(0.85rem, 2vh, 1.6rem);
    max-width: 480px;
    width: min(90%, 480px);
    text-align: center;
    box-shadow: var(--shadow-xl);
    animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    max-height: 96%;
    overflow: hidden;
}

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

.result-title {
    font-size: clamp(1.15rem, 2.4vh, 1.5rem);
    font-weight: 800;
    margin-bottom: 0.35rem;
    color: var(--text-main);
}

.result-highlight {
    font-size: clamp(1.2rem, 2.8vh, 1.75rem);
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-light);
    padding: clamp(0.55rem, 1.6vh, 0.9rem);
    border-radius: var(--radius-md);
    margin: clamp(0.45rem, 1.4vh, 0.85rem) 0;
    word-break: break-word;
}

.result-actions {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* ============================================================
   KONIEC HRY / VYHODNOTENIE (GAME OVER BEZ SKROLOVANIA)
   ============================================================ */
.game-over-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: clamp(0.5rem, 1.6vh, 1.15rem) clamp(0.85rem, 2vw, 1.5rem) !important;
    text-align: center;
    max-width: 490px;
    width: min(92%, 490px);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--border-color);
    max-height: 98% !important;
    overflow: hidden !important; /* Striktne bez skrolovania */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    box-sizing: border-box;
}

.game-over-card .game-over-icon {
    font-size: clamp(1.5rem, 3.2vh, 2.1rem) !important;
    margin-bottom: 0.1rem !important;
    line-height: 1 !important;
}

.game-over-card h2,
.game-over-card h3 {
    font-size: clamp(1.05rem, 2.2vh, 1.35rem) !important;
    font-weight: 800 !important;
    margin: 0.1rem 0 0.15rem !important;
    line-height: 1.2 !important;
    color: var(--text-main);
}

.game-over-card > p {
    margin: 0.1rem 0 0.2rem !important;
    font-size: clamp(0.74rem, 1.5vh, 0.84rem) !important;
    color: var(--text-muted);
    line-height: 1.25 !important;
}

.game-over-card .game-over-score {
    font-size: clamp(1.35rem, 2.8vh, 1.85rem) !important;
    font-weight: 900 !important;
    color: var(--primary);
    margin: clamp(0.12rem, 0.5vh, 0.3rem) 0 !important;
    line-height: 1.1 !important;
}

.game-over-card p[style*="font-weight: 600"],
.game-over-card p[style*="font-weight:600"] {
    margin: 0.1rem 0 clamp(0.2rem, 0.7vh, 0.4rem) !important;
    font-size: clamp(0.74rem, 1.5vh, 0.84rem) !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}

.game-over-card div:has(> .badge) {
    margin-bottom: 0.2rem !important;
}

.game-over-card .badge {
    padding: 0.15rem 0.55rem !important;
    font-size: 0.76rem !important;
}

/* Kompaktný formulár na uloženie skóre */
.game-over-card form#saveScoreForm {
    margin: 0.15rem auto clamp(0.25rem, 0.8vh, 0.45rem) !important;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.game-over-card form#saveScoreForm .form-group {
    margin-bottom: 0 !important;
    text-align: left;
}

.game-over-card form#saveScoreForm .form-label {
    margin-bottom: 0.1rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

.game-over-card form#saveScoreForm .form-input {
    padding: 0.3rem 0.65rem !important;
    font-size: clamp(0.8rem, 1.6vh, 0.9rem) !important;
    height: clamp(30px, 3.8vh, 34px) !important;
    border-radius: var(--radius-sm) !important;
}

.game-over-card form#saveScoreForm button#btnSubmitScore,
.game-over-card button#btnSubmitScore {
    padding: 0.3rem 0.85rem !important;
    font-size: clamp(0.8rem, 1.6vh, 0.9rem) !important;
    height: clamp(30px, 3.8vh, 34px) !important;
    margin-top: 0.15rem !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Duel zobrazenie dvoch hráčov v game-over-card */
.game-over-card div[style*="grid-template-columns: 1fr 1fr"],
.game-over-card div[style*="grid-template-columns:1fr 1fr"] {
    gap: 0.45rem !important;
    margin-bottom: clamp(0.25rem, 0.8vh, 0.45rem) !important;
    width: 100%;
    max-width: 440px;
}

.game-over-card div[style*="grid-template-columns: 1fr 1fr"] > div,
.game-over-card div[style*="grid-template-columns:1fr 1fr"] > div {
    padding: clamp(0.3rem, 0.8vh, 0.5rem) !important;
}

.game-over-card div[style*="font-size: 1.4rem"],
.game-over-card div[style*="font-size:1.4rem"] {
    font-size: 0.95rem !important;
}

.game-over-card div[style*="font-size: 2.2rem"],
.game-over-card div[style*="font-size:2.2rem"] {
    font-size: clamp(1.25rem, 2.5vh, 1.65rem) !important;
    line-height: 1.1 !important;
}

.game-over-card div[style*="border-radius: var(--radius-md)"][style*="padding: 1.25rem"],
.game-over-card div[style*="border-radius:var(--radius-md)"][style*="padding:1.25rem"] {
    padding: clamp(0.35rem, 0.8vh, 0.55rem) !important;
    margin-bottom: clamp(0.25rem, 0.8vh, 0.45rem) !important;
}

.game-over-card #btnSaveDuelScore {
    padding: 0.3rem 0.85rem !important;
    font-size: clamp(0.8rem, 1.6vh, 0.9rem) !important;
    height: clamp(30px, 3.8vh, 34px) !important;
    margin-bottom: 0.35rem !important;
    width: 100% !important;
    max-width: 380px;
    justify-content: center !important;
}

/* Spodné tlačidlá Reštart / Rebríček */
.game-over-card div:has(> #btnPlayAgain),
.game-over-card div[style*="display: flex"][style*="justify-content: center"],
.game-over-card div[style*="display:flex"][style*="justify-content:center"] {
    gap: 0.45rem !important;
    margin-top: 0.15rem !important;
}

.game-over-card #btnPlayAgain,
.game-over-card a.nav-btn,
.game-over-card button.nav-btn-outline,
.game-over-card a[href*="leaderboard.php"],
.game-over-card a[href*="index.php"] {
    padding: 0.25rem 0.8rem !important;
    font-size: clamp(0.76rem, 1.5vh, 0.86rem) !important;
    height: clamp(28px, 3.6vh, 32px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   5. PREDHERNÉ LOBBY A REŽIM SÚBOJA (1 VS 1)
   ============================================================ */
.active-player-bar {
    background: #f1f5f9;
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.player-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.88rem;
}

.player-tag-p1 {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.player-tag-p2 {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.player-tag.active-turn {
    box-shadow: 0 0 12px rgba(67, 97, 238, 0.4);
    animation: turnPulse 1.2s infinite alternate;
}

.player-tag-p1.active-turn {
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.55);
    border-color: #2563eb;
    background: #dbeafe;
}

.player-tag-p2.active-turn {
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.55);
    border-color: #dc2626;
    background: #fee2e2;
}

@keyframes turnPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

.lobby-mode-switch {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.lobby-mode-btn {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.lobby-mode-btn.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.dice-btn {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: transform 0.15s;
    white-space: nowrap;
}

.dice-btn:hover {
    transform: scale(1.04);
}

@media (max-width: 640px) {
    .quiz-answers-grid {
        grid-template-columns: 1fr;
    }
    .wheel-canvas-wrap {
        width: 320px;
        height: 320px;
    }
    .game-header {
        flex-direction: column;
        align-items: stretch;
    }
    .active-player-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   1. TVORCA PÁROVACÍCH HIER / PRIRAĎOVANIE (MATCH-UP)
   ============================================================ */
.match-container {
    width: 100%;
    max-width: 960px;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.3rem, 1vh, 0.65rem);
}

.match-top-info {
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.75rem;
    display: inline-block;
    margin: 0 auto 0.15rem;
}

.match-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.25rem, 0.8vh, 0.45rem) clamp(0.4rem, 1.2vw, 0.75rem);
    width: 100%;
    max-height: 100%;
}

@media (max-width: 640px) {
    .match-grid {
        grid-template-columns: 1fr;
    }
}

.match-row-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.65rem;
    gap: 0.5rem;
    min-height: 42px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.15s ease;
}

.match-row-item.matched-correct {
    border-color: #10b981;
    background: #f0fdf4;
}

.match-row-item.matched-wrong {
    border-color: #ef4444;
    background: #fef2f2;
}

.match-term-label {
    flex: 1;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-main);
    line-height: 1.25;
    word-break: break-word;
}

.match-dropzone {
    flex: 1.15;
    min-height: 38px;
    border: 2px dashed #94a3b8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    transition: all 0.15s ease;
    padding: 2px 4px;
    cursor: pointer;
}

.match-dropzone.has-item {
    border-style: solid;
    border-color: #93c5fd;
    background: #eff6ff;
}

.match-dropzone.hover-target {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: scale(1.02);
}

.match-bank-area {
    background: #f8fafc;
    border-radius: var(--radius-md);
    padding: 0.55rem 0.85rem;
    border: 2px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.match-bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.match-bank-title {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-tiles-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 38px;
    align-items: center;
}

.match-tile {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: grab;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.match-tile:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.match-tile.selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
    transform: scale(1.04);
}

.match-tile.placed {
    width: 100%;
    justify-content: space-between;
    background: #ffffff;
    border: 1.5px solid #3b82f6;
    color: #1d4ed8;
    padding: 0.25rem 0.5rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.match-tile.placed:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.match-feedback-msg {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    animation: popIn 0.2s ease;
}
.match-feedback-msg.error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.match-feedback-msg.success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* ============================================================
   2. NÁJDI ZODPOVEDAJÚCU POLOŽKU (FIND THE MATCH)
   ============================================================ */
.findmatch-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.findmatch-prompt-card {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 1.5rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
    width: 100%;
    animation: popIn 0.3s ease;
}

.findmatch-prompt-sub {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.findmatch-prompt-text {
    font-size: 1.85rem;
    font-weight: 800;
    color: #38bdf8;
}

.findmatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    width: 100%;
}

.findmatch-card {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    position: relative;
    overflow: hidden;
}

.findmatch-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.findmatch-card.poof-correct {
    animation: popDisappear 0.5s forwards cubic-bezier(0.18, 0.89, 0.32, 1.28);
    background: #10b981;
    color: #ffffff;
    border-color: #059669;
}

.findmatch-card.shake-wrong {
    animation: shakeError 0.4s ease;
    border-color: #ef4444;
    background: #fef2f2;
}

@keyframes popDisappear {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15) rotate(4deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(-15deg); opacity: 0; pointer-events: none; }
}

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

/* ============================================================
   3. ANAGRAM (ANAGRAM)
   ============================================================ */
.anagram-container {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.anagram-clue-box {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem 2rem;
    text-align: center;
    width: 100%;
    box-shadow: var(--shadow-sm);
}

.anagram-slots-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 1rem 0;
    min-height: 64px;
}

.anagram-slot {
    width: 54px;
    height: 62px;
    border: 2px dashed #94a3b8;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    font-size: 1.75rem;
    font-weight: 800;
    transition: all 0.2s;
}

.anagram-slot.filled {
    border-style: solid;
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.06);
    color: var(--primary);
}

.anagram-slot.correct-word {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
    animation: turnPulse 0.5s;
}

.anagram-letters-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    padding: 1rem;
    background: #f1f5f9;
    border-radius: var(--radius-md);
    width: 100%;
}

.anagram-letter-tile {
    width: 52px;
    height: 60px;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    transition: all 0.15s ease;
    user-select: none;
}

.anagram-letter-tile:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
}

.anagram-letter-tile.selected {
    background: var(--primary-light);
    border-color: var(--primary);
    transform: scale(1.08);
}

.anagram-letter-tile.used {
    opacity: 0.25;
    pointer-events: none;
    transform: scale(0.9);
}

/* ============================================================
   4. DAŤ DO PORIADKU (UNJUMBLE / USPORIADANIE VETY)
   ============================================================ */
.unjumble-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.unjumble-target-area {
    min-height: 110px;
    background: #ffffff;
    border: 2px dashed #94a3b8;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-content: flex-start;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.2s;
}

.unjumble-target-area.solved-correct {
    border-style: solid;
    border-color: #10b981;
    background: #f0fdf4;
}

.unjumble-word-chip {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.9rem;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.unjumble-word-chip:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.unjumble-word-chip.in-target {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.unjumble-pool-area {
    background: #f1f5f9;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    min-height: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    border: 1px solid var(--border-color);
}

/* ============================================================
   5. DOPLŇTE VETU (CLOZE / FILL IN THE BLANKS)
   ============================================================ */
.cloze-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cloze-passage-box {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    font-size: 1.25rem;
    line-height: 2.2;
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

.cloze-slot {
    display: inline-flex;
    min-width: 110px;
    height: 38px;
    padding: 2px 8px;
    border-bottom: 3px solid #3b82f6;
    background: #eff6ff;
    border-radius: 4px;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    margin: 0 4px;
    transition: all 0.15s ease;
}

.cloze-slot:empty::before {
    content: "......";
    color: #94a3b8;
    font-weight: 400;
}

.cloze-slot.slot-active {
    background: #dbeafe;
    box-shadow: 0 0 0 2px #2563eb;
}

.cloze-slot.slot-correct {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
}

.cloze-slot.slot-wrong {
    background: #fee2e2;
    border-color: #dc2626;
    color: #991b1b;
}

.cloze-chips-pool {
    background: #f8fafc;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.cloze-chip {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 9999px;
    padding: 0.45rem 1.1rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.15s ease;
}

.cloze-chip:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.cloze-chip.selected {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.cloze-chip.used {
    opacity: 0.3;
    pointer-events: none;
}

/* ============================================================
   6. ZORADENIE SKUPINY (GROUP SORT)
   ============================================================ */
.groups-container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.groups-columns-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.group-column-box {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    min-height: 260px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.2s;
}

.group-column-box.drag-hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.group-column-header {
    background: #f8fafc;
    border-bottom: 2px solid var(--border-color);
    padding: 0.85rem 1rem;
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-main);
}

.group-column-items {
    padding: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-item-tag {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s ease;
}

.group-item-tag:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.group-item-tag.correct {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
}

.group-item-tag.wrong {
    border-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

.groups-dock-area {
    background: #f1f5f9;
    border: 2px dashed #94a3b8;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    min-height: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/* ============================================================
   7. OSEMSMEROVKA (WORD SEARCH)
   ============================================================ */
.wordsearch-container {
    width: 100%;
    max-width: 950px;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    align-items: stretch;
    justify-content: center;
}

.wordsearch-board-wrap {
    flex: 1 1 450px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: clamp(0.5rem, 1.5vh, 1rem);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 100%;
}

.wordsearch-grid {
    display: grid;
    gap: 3px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: #e2e8f0;
    padding: 5px;
    border-radius: var(--radius-md);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    max-height: 100%;
}

.wordsearch-cell {
    width: clamp(26px, 4.4vh, 38px);
    height: clamp(26px, 4.4vh, 38px);
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.85rem, 2.2vh, 1.15rem);
    font-weight: 800;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.1s ease;
}

.wordsearch-cell:hover {
    background: #f1f5f9;
    transform: scale(1.05);
}

.wordsearch-cell.selecting {
    background: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.7) !important;
    transform: scale(1.08);
    z-index: 3;
}

@keyframes wsPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); }
    50% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); background-color: #fef08a !important; color: #854d0e !important; }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.wordsearch-cell.hint-pulse {
    animation: wsPulse 1.2s ease-in-out;
    z-index: 5;
}

.wordsearch-cell.found {
    font-weight: 900;
    color: #ffffff;
}

.wordsearch-words-panel {
    flex: 1 1 240px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: clamp(0.5rem, 1.5vh, 1rem);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 100%;
    overflow-y: auto;
}

.wordsearch-word-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    border: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wordsearch-word-item:hover {
    border-color: var(--primary);
    background: #f1f5f9;
}

.wordsearch-word-item.word-found {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
    opacity: 0.95;
}

.wordsearch-word-item.word-found .wordsearch-word-plain {
    text-decoration: line-through;
    opacity: 0.65;
}

.wordsearch-clue-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.wordsearch-clue-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.wordsearch-mask {
    font-family: monospace;
    letter-spacing: 2px;
    color: #94a3b8;
    font-weight: 700;
}

.wordsearch-revealed-word {
    font-size: 0.92rem;
    font-weight: 800;
    margin-top: 0.15rem;
    animation: popIn 0.3s ease;
}

.ws-hint-btn {
    background: none;
    border: none;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    transition: transform 0.2s, opacity 0.2s;
    line-height: 1;
}

.ws-hint-btn:hover {
    transform: scale(1.2);
    opacity: 1;
}

/* ============================================================
   8. JEDNODUCHÁ KRÍŽOVKA (CROSSWORD)
   ============================================================ */
.crossword-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.crossword-grid-wrap {
    flex: 1 1 480px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: auto;
}

.crossword-grid {
    display: grid;
    gap: 2px;
    background: #334155;
    padding: 4px;
    border-radius: var(--radius-sm);
    user-select: none;
}

.crossword-cell {
    width: 38px;
    height: 38px;
    position: relative;
    background: #ffffff;
    border-radius: 2px;
    transition: background-color 0.15s;
}

.crossword-cell.blocked {
    background: #1e293b;
    cursor: default;
}

.crossword-cell-num {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #64748b;
    pointer-events: none;
    line-height: 1;
}

.crossword-cell input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-main);
    padding: 0;
    cursor: pointer;
}

.crossword-cell.highlight-word {
    background: #e0f2fe;
}

.crossword-cell.focused-cell {
    background: #bae6fd;
    box-shadow: inset 0 0 0 2px var(--primary);
}

.crossword-cell.cell-correct {
    background: #dcfce7 !important;
    color: #166534;
}

.crossword-cell.cell-wrong {
    background: #fee2e2 !important;
    color: #991b1b;
}

.crossword-clues-wrap {
    flex: 1 1 340px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: 580px;
    overflow-y: auto;
}

.crossword-clue-group h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.crossword-clue-item {
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    background: #f8fafc;
}

.crossword-clue-item:hover {
    background: #f1f5f9;
}

.crossword-clue-item.active {
    background: var(--primary-light);
    border-left-color: var(--primary);
    font-weight: 700;
}

.crossword-clue-item.solved {
    text-decoration: line-through;
    opacity: 0.6;
    border-left-color: #10b981;
}

/* ============================================================
   9. ZORAĎOVANIE NA ČASOVEJ OSI (TIMELINE)
   ============================================================ */
.timeline-container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.timeline-axis-wrap {
    position: relative;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem 2rem;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.timeline-line-bar {
    position: absolute;
    top: 50%;
    left: 2rem;
    right: 2rem;
    height: 6px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 4px;
    z-index: 1;
    transform: translateY(-50%);
}

.timeline-axis-endpoints {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.timeline-slots-row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 600px;
}

.timeline-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.timeline-slot-node {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #3b82f6;
    margin: 0.5rem 0;
    transition: all 0.2s ease;
}

.timeline-slot.drag-over .timeline-slot-node {
    transform: scale(1.3);
    border-color: #8b5cf6;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}

.timeline-slot-dropzone {
    width: 100%;
    min-height: 95px;
    background: #f8fafc;
    border: 2px dashed #94a3b8;
    border-radius: var(--radius-md);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.timeline-slot-dropzone.has-item {
    border-style: solid;
    border-color: #3b82f6;
    background: #ffffff;
}

.timeline-slot-dropzone.correct-placed {
    border-color: #10b981;
    background: #ecfdf5;
}

.timeline-slot-dropzone.wrong-placed {
    border-color: #ef4444;
    background: #fef2f2;
}

.timeline-event-card {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    cursor: grab;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.15s ease;
    text-align: center;
    width: 100%;
}

.timeline-event-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.timeline-event-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3);
}

.timeline-event-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #4f46e5;
    background: #eef2ff;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 4px;
}

.timeline-event-date {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 2px;
}

.timeline-event-date.date-revealed {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    margin-top: 6px;
}

.timeline-event-date.date-revealed.correct {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.timeline-event-date.date-revealed.incorrect {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.timeline-event-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
}

.timeline-tray-area {
    background: #f1f5f9;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.timeline-tray-pool {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
    min-height: 80px;
}

@media (max-width: 640px) {
    .wordsearch-cell {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }
    .crossword-cell {
        width: 32px;
        height: 32px;
    }
}

/* ============================================================
   Herný mód: Obesenec (Hangman)
   ============================================================ */

.hangman-game-container {
    max-width: 900px;
    max-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.3rem, 1vh, 0.55rem);
    padding: 0.25rem;
    width: 100%;
}

.hangman-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.85rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hangman-round-badge {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
}

.hangman-lives-box {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.hangman-lives-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.hangman-hearts {
    display: flex;
    align-items: center;
    gap: 2px;
}

.hg-heart {
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

.hangman-stage-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    min-height: clamp(130px, 20vh, 185px);
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: clamp(0.4rem, 1vh, 0.75rem) clamp(0.6rem, 1.5vw, 1.25rem);
}

.hangman-gallows-box {
    width: clamp(110px, 18vh, 160px);
    height: clamp(110px, 18vh, 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f8fafc;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 4px;
}

.hangman-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hg-part {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.25s ease;
}

.hg-part.visible {
    opacity: 1;
}

.shake-gallows {
    animation: shakeHangman 0.45s ease-in-out;
}

@keyframes shakeHangman {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-2deg); }
    40% { transform: translateX(6px) rotate(2deg); }
    60% { transform: translateX(-4px) rotate(-1deg); }
    80% { transform: translateX(4px) rotate(1deg); }
}

.hangman-clue-and-word {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-align: center;
    max-width: 650px;
}

.hangman-clue-card {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    padding: 0.45rem 1rem;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05);
}

.hangman-clue-card .clue-tag {
    font-size: 0.75rem;
    font-weight: 800;
    color: #2563eb;
    text-transform: uppercase;
    white-space: nowrap;
}

.hangman-clue-card .clue-text {
    font-size: 0.96rem;
    font-weight: 700;
    color: #1e3a8a;
    line-height: 1.3;
}

.hangman-word-area {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0.25rem 0;
}

.hangman-word-group {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.hangman-slot {
    width: clamp(26px, 4vh, 38px);
    height: clamp(32px, 4.8vh, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 2.2vh, 1.4rem);
    font-weight: 800;
    border-bottom: 4px solid var(--primary);
    background: #f8fafc;
    border-radius: 6px 6px 0 0;
    text-transform: uppercase;
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    user-select: none;
    transition: all 0.2s ease;
}

.hangman-slot.revealed {
    animation: hgSlotPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #ffffff;
    color: #1e293b;
}

.hangman-slot.fixed-char {
    border-bottom: none;
    background: transparent;
    box-shadow: none;
    width: auto;
    min-width: 14px;
    font-size: 1.4rem;
    color: var(--text-muted);
}

.hangman-slot.missed {
    background: #fef2f2;
    border-bottom-color: #dc2626;
    color: #dc2626;
    animation: hgSlotPop 0.25s ease;
}

.hangman-slot.slot-won {
    background: #f0fdf4;
    border-bottom-color: #16a34a;
    color: #15803d;
}

@keyframes hgSlotPop {
    0% { transform: scale(0.6); opacity: 0; }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.hangman-feedback-msg {
    min-height: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.hangman-feedback-msg.feedback-correct {
    color: #16a34a !important;
}

.hangman-feedback-msg.feedback-wrong {
    color: #dc2626 !important;
}

.hangman-feedback-msg.feedback-won {
    color: #15803d !important;
    font-weight: 700;
}

.hangman-feedback-msg.feedback-lost {
    color: #b91c1c !important;
    font-weight: 700;
}

.hangman-action-wrap {
    margin-top: 0.2rem;
    animation: hgSlotPop 0.3s ease;
}

/* Klávesnica */
.hangman-keyboard-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.hangman-kb-row {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
}

.hangman-key {
    min-width: 32px;
    height: 38px;
    padding: 0 5px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hangman-key:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: var(--primary);
    transform: translateY(-1px);
}

.hangman-key:active:not(:disabled) {
    transform: translateY(1px);
}

.hangman-key.key-correct {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    cursor: default;
    box-shadow: none;
}

.hangman-key.key-wrong {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: default;
    text-decoration: line-through;
    opacity: 0.75;
    box-shadow: none;
}

.hangman-kb-diacritics .hangman-key {
    background: #faf5ff;
    border-color: #e9d5ff;
    color: #6b21a8;
}

.hangman-kb-diacritics .hangman-key:hover:not(:disabled) {
    background: #f3e8ff;
    border-color: #a855f7;
}

@media (max-width: 768px) {
    .hangman-stage-main {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .hangman-gallows-box {
        width: 130px;
        height: 130px;
    }

    .hangman-slot {
        width: 32px;
        height: 38px;
        font-size: 1.15rem;
    }

    .hangman-key {
        min-width: 26px;
        height: 34px;
        font-size: 0.85rem;
        padding: 0 3px;
    }
}

/* ============================================================
   Modul: Vpíšte odpoveď (Type-In / Fill-in without options)
   ============================================================ */
.typein-container {
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
}

.typein-progress-wrap {
    width: 100%;
    margin-bottom: 1.5rem;
}

.typein-progress-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.typein-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.typein-card {
    width: 100%;
    max-width: 680px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2.5vh, 2rem) clamp(1rem, 2.5vw, 2rem);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    max-height: 100%;
}

.typein-prompt {
    font-size: clamp(1.2rem, 3.2vh, 1.85rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: clamp(0.6rem, 1.8vh, 1.25rem);
    line-height: 1.35;
    word-break: break-word;
}

.typein-input-wrap {
    display: flex;
    gap: 0.65rem;
    max-width: 520px;
    margin: 0 auto 1rem;
    position: relative;
}

.typein-input {
    flex: 1;
    font-size: 1.45rem;
    font-weight: 800;
    text-align: center;
    padding: 0.85rem 1.25rem;
    border: 2.5px solid #cbd5e1;
    border-radius: var(--radius-md);
    background: #f8fafc;
    color: #0f172a;
    transition: all 0.2s ease;
    outline: none;
}

.typein-input:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
}

.typein-input.correct {
    border-color: #10b981 !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
}

.typein-input.wrong {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
    animation: typein-shake 0.4s ease;
}

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

.typein-btn-submit {
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.typein-btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(67, 97, 238, 0.4);
}

.typein-accents-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    max-width: 520px;
    margin: 0.4rem auto 1.25rem;
}

.typein-accent-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
}

.typein-accent-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: var(--primary);
    transform: scale(1.08);
}

.typein-feedback-banner {
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-md);
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    animation: typein-pop 0.25s ease;
}

@keyframes typein-pop {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.typein-feedback-correct {
    background: #ecfdf5;
    color: #065f46;
    border: 1.5px solid #a7f3d0;
}

.typein-feedback-wrong {
    background: #fef2f2;
    color: #991b1b;
    border: 1.5px solid #fecaca;
}

/* ============================================================
   ASISTENT ČÍTANIA (TTS / PREDČÍTANIE / ŠVVP / DYSLEXIA)
   ============================================================ */
.tts-top-btn.active {
    background: #eef2ff !important;
    color: #4361ee !important;
    border-color: #a5b4fc !important;
    box-shadow: 0 0 10px rgba(67, 97, 238, 0.25) !important;
}

.tts-speak-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    font-size: 0.95rem;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0.5rem;
    padding: 0;
    transition: all 0.15s ease;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tts-speak-inline-btn:hover {
    background: #e0e7ff;
    border-color: #818cf8;
    color: #3730a3;
    transform: scale(1.12);
}

.tts-speak-inline-btn:active {
    transform: scale(0.96);
}

.tts-speak-inline-btn.tts-is-speaking,
.dictation-btn-play.tts-is-speaking,
.dictation-action-btn.tts-is-speaking {
    background: #4361ee !important;
    border-color: #3a0ca3 !important;
    color: #ffffff !important;
    animation: ttsPulseSpeaking 1s infinite alternate;
}

@keyframes ttsPulseSpeaking {
    0% {
        box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.6);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(67, 97, 238, 0);
        transform: scale(1.08);
    }
}

/* Modifikátory pre rôzne herné prvky */
.tts-question-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-color: #cbd5e1;
}

.tts-option-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 0.8rem;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: inherit;
    flex-shrink: 0;
}

.tts-option-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #1e293b;
}

.tts-match-btn,
.tts-chip-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    font-size: 0.72rem;
    margin-left: 0.35rem;
}

/* ============================================================
   REŽIM DIKTÁTU V HRE "VPÍŠTE ODPOVEĎ" (TYPE-IN)
   ============================================================ */
.typein-mode-toggle-bar {
    display: inline-flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    margin-bottom: 0.85rem;
    gap: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.typein-mode-pill {
    padding: 0.35rem 0.95rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    font-size: 0.84rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.typein-mode-pill:hover {
    color: #1e293b;
}

.typein-mode-pill.active {
    background: #ffffff;
    color: #4361ee;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.typein-dictation-card {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 2px dashed #93c5fd;
    border-radius: var(--radius-md);
    padding: 1.15rem 1rem;
    margin-bottom: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.dictation-badge {
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid #bfdbfe;
}

.dictation-listen-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
}

.dictation-audio-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0.25rem;
}

.dictation-action-btn {
    padding: 0.55rem 1.15rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.15s ease;
    border: 1.5px solid transparent;
}

.dictation-btn-play {
    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(67, 97, 238, 0.35);
}

.dictation-btn-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(67, 97, 238, 0.45);
}

.dictation-btn-slow {
    background: #ffffff;
    color: #d97706;
    border-color: #fde68a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.dictation-btn-slow:hover {
    background: #fffbeb;
    border-color: #f59e0b;
    transform: translateY(-1px);
}

.dictation-btn-reveal {
    background: #ffffff;
    color: #64748b;
    border-color: #cbd5e1;
    font-size: 0.82rem;
    padding: 0.5rem 0.85rem;
}

.dictation-btn-reveal:hover {
    background: #f8fafc;
    color: #334155;
    border-color: #94a3b8;
}

/* ============================================================
   11. MATEMATICKÉ BLUDISKO / REŤAZOVKA V MRIEŽKE (MATH MAZE)
   ============================================================ */
.mathmaze-wrapper {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    --maze-cell-size: 56px;
    --maze-gap-h: 44px;
    --maze-gap-v: 36px;
}

.mathmaze-wrapper.maze-size-4x4 {
    --maze-cell-size: 68px;
    --maze-gap-h: 56px;
    --maze-gap-v: 46px;
}

.mathmaze-wrapper.maze-size-5x6 {
    --maze-cell-size: 60px;
    --maze-gap-h: 48px;
    --maze-gap-v: 40px;
}

.mathmaze-wrapper.maze-size-7x9 {
    --maze-cell-size: 52px;
    --maze-gap-h: 42px;
    --maze-gap-v: 34px;
}

.mathmaze-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.9rem;
    box-shadow: var(--shadow-sm);
}

.mathmaze-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mathmaze-badge {
    font-size: 0.84rem;
    color: #334155;
}

.mathmaze-step-helper {
    font-size: 0.88rem;
    color: #0f172a;
    background: #f8fafc;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.mathmaze-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.mathmaze-size-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.mathmaze-size-selector .form-select {
    padding: 0.32rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    width: auto;
}

.mathmaze-btn {
    padding: 0.38rem 0.75rem !important;
    font-size: 0.82rem !important;
}

.mathmaze-checkpoint-banner {
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    animation: popIn 0.25s ease;
}

.mathmaze-checkpoint-banner.banner-success {
    background: #ecfdf5;
    border: 1.5px solid #6ee7b7;
    color: #065f46;
}

.mathmaze-checkpoint-banner.banner-warning {
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    color: #92400e;
}

.mathmaze-sheet {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 3px solid #38bdf8;
    border-radius: 16px;
    padding: 0.85rem 1rem 1rem;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mathmaze-sheet-header {
    width: 100%;
    text-align: center;
    border-bottom: 1.5px dashed #bae6fd;
    padding-bottom: 0.5rem;
}

.mathmaze-sheet-title {
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 1px;
    color: #1e3a8a;
    text-transform: uppercase;
}

.mathmaze-sheet-legend {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    margin-top: 0.25rem;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.start-dot {
    background: #ea580c;
    border: 2px solid #fed7aa;
}

.legend-dot.target-dot {
    background: #6366f1;
    border: 2px solid #7dd3fc;
}

.legend-box {
    width: 14px;
    height: 14px;
    border: 2px solid #334155;
    background: #ffffff;
    border-radius: 3px;
    display: inline-block;
}

.mathmaze-board-scroll {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    padding: 0.35rem 0.25rem;
}

.mathmaze-grid {
    display: grid;
    align-items: center;
    justify-items: center;
    user-select: none;
}

.maze-node {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}

.maze-node-start,
.maze-node-target {
    border-radius: 50%;
    background: var(--circle-bg, #6366f1);
    color: var(--circle-text, #ffffff);
    box-shadow: 0 0 0 4px var(--circle-ring, #bae6fd), inset 0 0 0 2.5px rgba(255, 255, 255, 0.85), 0 3px 8px rgba(15, 23, 42, 0.15);
    font-weight: 900;
    font-size: calc(var(--maze-cell-size) * 0.42);
    z-index: 2;
}

.maze-start-tag {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #ffffff;
    font-size: 0.56rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.maze-node-target.checkpoint-ok {
    box-shadow: 0 0 0 5px #10b981, 0 0 16px rgba(16, 185, 129, 0.55) !important;
    transform: scale(1.07);
}

.maze-node-target.checkpoint-mismatch {
    box-shadow: 0 0 0 5px #ef4444, 0 0 16px rgba(239, 68, 68, 0.55) !important;
    animation: shakeHangman 0.4s ease-in-out;
}

.maze-checkpoint-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.maze-node-target.checkpoint-ok .maze-checkpoint-badge {
    display: flex;
    background: #059669;
}

.maze-node-target.checkpoint-mismatch .maze-checkpoint-badge {
    display: flex;
    background: #dc2626;
}

.maze-node-input {
    background: #ffffff;
    border: 2.2px solid #334155;
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.05);
}

.maze-node-input.cell-active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.28);
    transform: scale(1.05);
    z-index: 3;
}

.maze-node-input.cell-parent-highlight,
.maze-node-start.cell-parent-highlight {
    box-shadow: 0 0 0 4px #f59e0b !important;
}

.maze-node-input.cell-correct {
    border-color: #059669;
    background: #ecfdf5;
}

.maze-node-input.cell-correct .maze-input {
    color: #065f46;
}

.maze-node-input.cell-wrong {
    border-color: #dc2626;
    background: #fef2f2;
    animation: shakeHangman 0.35s ease;
}

.maze-node-input.cell-wrong .maze-input {
    color: #991b1b;
}

.maze-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    font-size: calc(var(--maze-cell-size) * 0.38);
    font-weight: 800;
    color: #0f172a;
    padding: 0;
    font-family: inherit;
}

/* Šípky a operácie medzi políčkami */
.maze-conn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    position: relative;
    transition: color 0.15s ease, transform 0.15s ease;
}

.maze-conn.conn-active {
    color: #d97706;
    transform: scale(1.12);
    z-index: 2;
}

.maze-conn-h {
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.maze-conn-v {
    flex-direction: row;
    justify-content: center;
    gap: 2px;
    line-height: 1;
}

.maze-op-top,
.maze-num-bottom,
.maze-op-left,
.maze-num-right {
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
    line-height: 1;
}

.maze-arrow-line-h {
    width: 100%;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maze-arrow-line-v {
    width: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maze-arrow-svg-h {
    width: 100%;
    height: 12px;
    display: block;
}

.maze-arrow-svg-v {
    width: 12px;
    height: 100%;
    display: block;
}

/* Dotyková mini-klávesnica pod mriežkou */
.mathmaze-numpad {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
    width: 100%;
}

.numpad-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.numpad-btn {
    min-width: 38px;
    height: 36px;
    padding: 0 0.55rem;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e293b;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.12s ease;
}

.numpad-btn:hover {
    border-color: var(--primary);
    background: #eff6ff;
    color: var(--primary);
}

.numpad-btn:active {
    transform: translateY(1px);
}

.numpad-sign {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

.numpad-back {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.numpad-next {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    padding: 0 0.85rem;
}

.numpad-next:hover {
    background: #1d4ed8;
    color: #ffffff;
}

@media (max-width: 768px) {
    .mathmaze-wrapper.maze-size-7x9 {
        --maze-cell-size: 44px;
        --maze-gap-h: 36px;
        --maze-gap-v: 30px;
    }
    .maze-op-top, .maze-num-bottom, .maze-op-left, .maze-num-right {
        font-size: 0.7rem;
    }
}