/**
 * WP Typing Test — Keyboard Fix & Game Container Styles
 *
 * पहले ये styles frontend.js की addKeyboardFixStyles() function में
 * JavaScript के जरिए <style> tag inject करती थी।
 * अब इन्हें PHP (wptt_enqueue_keyboard_fix_css) के जरिए enqueue किया जाता है।
 */

/* ── Virtual-keyboard visibility ─────────────────────────────────────────── */
.keyboard-visible .wptt-filter-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #f8f9fa;
}

.wptt-filter.dropdown-open {
    z-index: 10000;
    position: relative;
}

/* ── Game container ───────────────────────────────────────────────────────── */
#wptt-game-container {
    position: relative;
    width: 100%;
    height: 500px;
    background: #222;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 4px solid #333;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    display: none; /* Hidden by default; JS adds wptt-mode-game class */
}

.wptt-mode-game #wptt-text-display {
    display: none !important;
}

.wptt-mode-game #wptt-game-container {
    display: block !important;
}

/* ── Game UI overlay ──────────────────────────────────────────────────────── */
#wptt-game-ui {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-family: monospace;
    font-size: 18px;
    pointer-events: none;
    z-index: 10;
    text-shadow: 1px 1px 2px black;
}

#wptt-game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    z-index: 20;
}

/* ── Notification toast ───────────────────────────────────────────────────── */
.wptt-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    font-weight: 500;
    animation: wptt-slide-in 0.3s ease;
    max-width: 300px;
    color: white;
}

@keyframes wptt-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ── Shake animation ──────────────────────────────────────────────────────── */
.shake {
    animation: wptt-shake 0.3s ease-in-out;
}

@keyframes wptt-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* ── Backspace block button states ───────────────────────────────────────── */
.backspace-blocked {
    background: #ffebee !important;
    border-color: #f44336 !important;
    color: #d32f2f !important;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.2) !important;
}

.backspace-allowed {
    background: #e8f5e9 !important;
    border-color: #4caf50 !important;
    color: #2e7d32 !important;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2) !important;
}

/* ── Score pop animation ─────────────────────────────────────────────────── */
.score-pop {
    animation: wptt-score-pop 0.42s ease;
}

@keyframes wptt-score-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); color: #ffd700; }
    100% { transform: scale(1); }
}

/* ── Guest result notice ──────────────────────────────────────────────────── */
#wptt-guest-result-notice {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    border: 1.5px solid #ffc107;
    border-left: 5px solid #ff9800;
    border-radius: 8px;
    padding: 12px 18px;
    margin: 10px 0 16px;
    font-size: 0.95rem;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.18);
}

#wptt-guest-result-notice a {
    color: #0d6efd;
    font-weight: 600;
    text-decoration: underline;
}

/* ── Backspace blocked — input visual cue ────────────────────────────────── */
#wptt-input.backspace-mode-blocked {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

/* Backspace key on virtual keyboard — greyed + strikethrough when blocked */
.backspace-is-blocked .wptt-key[data-key-code="Backspace"] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    position: relative;
    text-decoration: line-through;
    background: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
    pointer-events: none !important;
}

.backspace-is-blocked .wptt-key[data-key-code="Backspace"]::after {
    content: '🚫';
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 10px;
    line-height: 1;
}