/* ========================================
   KNIGHT QUEST - ESTILOS ESPECÍFICOS
   Estilos únicos para el juego Knight Quest
   ======================================== */

/* ========================================
   VARIABLES ESPECÍFICAS
   ======================================== */
:root {
    --knight-primary: #ff6b00;
    --knight-secondary: #00ff6b;
    --knight-accent: #6b00ff;
    --knight-visited: #ff0066;
    --knight-current: #00ff00;
    --knight-possible: #ffff00;
}

/* ========================================
   CONTROLES SUPERIORES
   ======================================== */
.game-top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}

.difficulty-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.difficulty-selector label {
    font-weight: 700;
    color: var(--text-accent);
    font-size: 0.9rem;
}

.difficulty-selector select {
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
    border: 1px solid var(--text-accent);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    font-family: var(--font-family);
    font-size: 0.9rem;
    cursor: pointer;
}

.difficulty-selector select:focus {
    outline: none;
    box-shadow: 0 0 10px var(--border-glow);
}

.hints-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warning-color);
    font-weight: 700;
    font-size: 0.9rem;
}

.hints-display strong {
    color: var(--warning-color);
    text-shadow: 0 0 10px var(--warning-color);
}

/* ========================================
   TABLERO ESPECÍFICO KNIGHT QUEST
   ======================================== */
/* NOTA: Los estilos base del .chessboard están definidos INLINE en index.html
   para evitar conflictos de especificidad. Aquí solo van estilos adicionales
   que NO entren en conflicto con los inline (como estados de casillas).
*/

/* Estados específicos del caballo */
.square.knight-current {
    background: linear-gradient(45deg, var(--knight-current), #40ff40) !important;
    animation: knightGlow 1s ease-in-out infinite alternate;
    color: var(--bg-primary);
    box-shadow: 0 0 25px var(--knight-current);
    position: relative;
    z-index: 10;
}

.square.knight-visited {
    background: linear-gradient(45deg, var(--knight-visited), #ff4080) !important;
    color: white;
    animation: knightVisited 0.6s ease;
    font-weight: 900;
}

.square.knight-possible {
    background: linear-gradient(45deg, var(--knight-possible), #ffff80) !important;
    cursor: pointer;
    animation: knightPossible 1.5s ease-in-out infinite;
    position: relative;
}

.square.knight-possible::before {
    content: '🎯';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    animation: targetPulse 1s ease-in-out infinite;
}

.square.knight-possible:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px var(--knight-possible);
    z-index: 5;
}

.square.knight-hint {
    background: linear-gradient(45deg, var(--knight-accent), #aa80ff) !important;
    animation: knightHint 0.5s ease 3;
    box-shadow: 0 0 30px var(--knight-accent);
    border: 3px solid var(--knight-accent);
}

.square.knight-error {
    animation: knightError 0.5s ease;
    background: var(--error-color) !important;
}

/* Animaciones específicas */
@keyframes knightGlow {
    0% { 
        box-shadow: 0 0 20px var(--knight-current);
        transform: scale(1);
    }
    100% { 
        box-shadow: 0 0 35px var(--knight-current), 0 0 50px var(--knight-current);
        transform: scale(1.05);
    }
}

@keyframes knightVisited {
    0% { transform: scale(1) rotateZ(0deg); }
    25% { transform: scale(1.2) rotateZ(5deg); }
    50% { transform: scale(1.1) rotateZ(-3deg); }
    75% { transform: scale(1.15) rotateZ(2deg); }
    100% { transform: scale(1) rotateZ(0deg); }
}

@keyframes knightPossible {
    0%, 100% { 
        opacity: 0.8; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05);
    }
}

@keyframes targetPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

@keyframes knightHint {
    0%, 100% { 
        transform: scale(1);
        border-width: 3px;
    }
    50% { 
        transform: scale(1.1);
        border-width: 5px;
    }
}

@keyframes knightError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px) rotateZ(-2deg); }
    75% { transform: translateX(8px) rotateZ(2deg); }
}

/* ========================================
   INFORMACIÓN DE PROGRESO
   ======================================== */
.progress-info {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-bar {
    width: 100%;
    height: 25px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    border: 2px solid var(--text-accent);
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--knight-primary), var(--knight-secondary));
    border-radius: 13px;
    transition: width 0.5s ease;
    width: 0%;
    position: relative;
}

.progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShine 2s ease-in-out infinite;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

@keyframes progressShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.game-tips {
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--knight-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.game-tips strong {
    color: var(--knight-secondary);
}

/* ========================================
   PANEL DE ESTADO
   ======================================== */
.status-panel {
    width: 100%;
    max-width: 600px;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.status-message {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.status-panel.success {
    border-color: var(--success-color);
    background: rgba(0, 255, 64, 0.1);
}

.status-panel.success .status-message {
    color: var(--success-color);
    font-weight: 700;
}

.status-panel.warning {
    border-color: var(--warning-color);
    background: rgba(255, 255, 0, 0.1);
}

.status-panel.warning .status-message {
    color: var(--warning-color);
}

.status-panel.error {
    border-color: var(--error-color);
    background: rgba(255, 64, 64, 0.1);
}

.status-panel.error .status-message {
    color: var(--error-color);
}

/* ========================================
   MODALES ESPECÍFICOS
   ======================================== */
.final-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--knight-secondary);
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.achievement-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.achievement-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: var(--bg-primary);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 2px solid #ffd700;
    animation: badgeGlow 2s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

/* ========================================
   LEADERBOARD
   ======================================== */
.leaderboard-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1rem;
}

.tab-btn {
    flex: 1;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-family);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.tab-btn.active {
    color: var(--knight-secondary);
    border-bottom: 3px solid var(--knight-secondary);
    background: rgba(0, 255, 107, 0.1);
}

.leaderboard-content {
    min-height: 300px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.leaderboard-item.personal {
    border-color: var(--knight-secondary);
    background: rgba(0, 255, 107, 0.1);
}

.rank {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--knight-secondary);
    min-width: 40px;
}

.rank.first { color: #ffd700; }
.rank.second { color: #c0c0c0; }
.rank.third { color: #cd7f32; }

.player-info {
    flex: 1;
    margin-left: 1rem;
}

.player-name {
    font-weight: 700;
    color: var(--text-primary);
}

.player-details {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.score-info {
    text-align: right;
}

.score {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--knight-primary);
}

.time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.empty-leaderboard {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-leaderboard .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ========================================
   HELP MODAL
   ======================================== */
.help-content h4 {
    color: var(--knight-secondary);
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1rem;
}

.help-content h4:first-child {
    margin-top: 0;
}

.help-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.help-content ul {
    margin: 0.5rem 0 1rem 1.5rem;
    line-height: 1.6;
}

.help-content li {
    margin-bottom: 0.5rem;
}

.help-content strong {
    color: var(--knight-primary);
}

/* ========================================
   RESPONSIVE PARA KNIGHT QUEST
   ======================================== */
@media (max-width: 768px) {
    .game-top-controls {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .difficulty-selector {
        justify-content: center;
    }
    
    .hints-display {
        justify-content: center;
    }

    /* NOTA: Los estilos responsive del .chessboard están en index.html inline */

    .final-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .leaderboard-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .score-info {
        text-align: left;
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* NOTA: Los estilos responsive del .chessboard están en index.html inline */

    .square {
        font-size: 0.9rem;
    }

    .final-stats {
        grid-template-columns: 1fr;
    }

    .game-stats {
        font-size: 0.8rem;
    }

    .stat {
        padding: 0.5rem 1rem;
    }
}

/* ============================================
   RANKING ANIMATION
   Animación de "descenso en el ranking" cuando termina el juego
   ============================================ */

.ranking-animation-container {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--neon-cyan, #00ffff);
    border-radius: var(--border-radius, 8px);
    padding: 0.75rem;
    margin: 0.75rem 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    max-width: 100%;
    overflow: hidden;
}

.ranking-animation-container.show {
    opacity: 1;
    transform: translateY(0);
}

.ranking-animation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
    margin-bottom: 0.75rem;
}

.ranking-animation-title {
    font-size: 0.9rem;
    color: var(--neon-cyan, #00ffff);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ranking-animation-score {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--neon-yellow, #ffff00);
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

.ranking-animation-body {
    position: relative;
    min-height: auto;
    max-height: 200px;
    overflow: hidden;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ranking-list-row {
    display: grid;
    grid-template-columns: 50px 1fr 80px;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.ranking-list-row .rank-position {
    color: var(--neon-cyan, #00ffff);
    font-weight: bold;
}

.ranking-list-row .rank-name {
    color: var(--text-secondary, #aaa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-list-row .rank-score {
    text-align: right;
    color: var(--neon-green, #00ff00);
}

/* Player row styling (inline with other rows) */
.ranking-list-row.player-row {
    background: linear-gradient(90deg, rgba(255, 0, 128, 0.3), rgba(0, 255, 255, 0.3));
    border: 2px solid var(--neon-magenta, #ff0080);
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
}

.ranking-list-row.player-row .rank-position {
    color: var(--neon-magenta, #ff0080);
    font-weight: bold;
}

.ranking-list-row.player-row .rank-name {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.ranking-list-row.player-row .rank-score {
    color: var(--neon-yellow, #ffff00);
    font-weight: bold;
}

.ranking-list-row.player-row.found-position {
    animation: pulseGlow 1s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 0, 128, 0.8), 0 0 50px rgba(0, 255, 255, 0.4);
    }
}

.ranking-animation-message {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: var(--neon-yellow, #ffff00);
    text-shadow: 0 0 15px rgba(255, 255, 0, 0.5);
    margin-top: 0.5rem;
    padding: 0.25rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.ranking-animation-message.show {
    opacity: 1;
    transform: scale(1);
}

/* Highlight para el input de nombre (ambos modales) */
#playerNameInput.highlight-input,
#playerNameInputGameOver.highlight-input {
    animation: highlightPulse 1.5s ease-in-out infinite;
    border-color: var(--neon-magenta, #ff0080) !important;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 0, 128, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
    }
}

/* Responsive para la animación */
@media (max-width: 480px) {
    .ranking-animation-container {
        padding: 0.5rem;
        margin: 0.5rem 0;
    }

    .ranking-animation-header {
        flex-direction: row;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .ranking-list-row {
        grid-template-columns: 35px 1fr 55px;
        font-size: 0.7rem;
        padding: 0.35rem;
    }

    .ranking-animation-message {
        font-size: 0.9rem;
    }
}