/*
 * llm-training-game.css
 * Styles for the LLM Training Interactive Game
 */

.llm-training-game {
    background: var(--demo-surface);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-lg);
    padding: var(--demo-spacing-lg);
    font-family: var(--demo-font);
}

/* Training Mode Tabs */
.training-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--demo-spacing-lg);
    flex-wrap: wrap;
}

.training-tab {
    flex: 1;
    min-width: 140px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--demo-border);
    background: var(--demo-surface);
    color: var(--demo-text);
    border-radius: var(--demo-radius);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all var(--demo-transition);
}

.training-tab:hover {
    border-color: var(--demo-accent);
    background: var(--demo-surface-alt);
}

.training-tab.active {
    background: var(--demo-accent);
    border-color: var(--demo-accent);
    color: white;
}

/* Main Layout */
.game-main-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--demo-spacing-lg);
    margin-bottom: var(--demo-spacing-lg);
}

@media (max-width: 900px) {
    .game-main-layout {
        grid-template-columns: 1fr;
    }
}

/* Panel Styles */
.network-panel,
.game-panel {
    background: var(--demo-surface-alt);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius);
    padding: var(--demo-spacing);
}

.panel-title,
.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--demo-spacing);
    color: var(--demo-text);
}

/* Neural Network Visualization */
.network-container {
    background: var(--demo-bg);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-sm);
    padding: var(--demo-spacing);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* SVG Network Styles */
.llm-network-svg {
    width: 100%;
    height: 220px;
    display: block;
}

.llm-connection {
    transition: stroke 0.4s ease, stroke-width 0.4s ease, stroke-opacity 0.4s ease;
}

.llm-connection.highlighted {
    stroke-width: 4px !important;
    stroke-opacity: 1 !important;
    filter: drop-shadow(0 0 4px currentColor);
    animation: connection-pulse 0.6s ease-out;
}

.llm-node {
    transition: fill 0.4s ease, stroke 0.2s ease;
}

.llm-node.highlighted {
    stroke: #ffd700 !important;
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 8px #ffd700);
    animation: node-pulse 0.6s ease-out;
}

.llm-node-value {
    font-family: var(--demo-font-mono, monospace);
    pointer-events: none;
    transition: fill 0.3s ease;
}

.llm-layer-label {
    font-family: var(--demo-font);
    font-weight: 500;
}

@keyframes node-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes connection-pulse {
    0% {
        stroke-opacity: 0.3;
    }

    50% {
        stroke-opacity: 1;
    }

    100% {
        stroke-opacity: 0.7;
    }
}

/* Mini network for comparison */
.mini-network-svg {
    width: 100%;
    height: 80px;
    display: block;
}

/* Legend */
.network-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: var(--demo-spacing);
    flex-wrap: wrap;
    padding: 0.5rem;
    background: var(--demo-surface-alt);
    border-radius: var(--demo-radius-xs);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--demo-neutral);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--demo-border);
}

.legend-negative {
    background: linear-gradient(135deg, #2196F3, #1976D2);
}

.legend-zero {
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
}

.legend-positive {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

/* Connection Legend */
.network-legend::after {
    content: '';
    display: none;
}

/* Network Stats */
.network-stats {
    margin-top: var(--demo-spacing);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    background: var(--demo-bg);
    border-radius: var(--demo-radius-xs);
}

.stat-label {
    color: var(--demo-neutral);
}

.stat-value {
    font-weight: 600;
    color: var(--demo-text);
}

.stat-value.stat-success {
    color: var(--demo-success);
}

.stat-value.stat-error {
    color: var(--demo-danger);
}

/* Progress Section */
.progress-section {
    margin-bottom: var(--demo-spacing);
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: var(--demo-text);
}

.progress-bar {
    height: 8px;
    background: var(--demo-surface-muted);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--demo-gradient-accent);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Context Display */
.context-section {
    margin-bottom: var(--demo-spacing);
}

.context-display {
    background: var(--demo-bg);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-sm);
    padding: var(--demo-spacing);
    min-height: 60px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.context-placeholder {
    color: var(--demo-neutral);
    font-style: italic;
    margin: 0;
}

.context-sentence {
    margin: 0.3rem 0;
    color: var(--demo-text);
}

.context-sentence.current {
    color: var(--demo-accent);
    font-weight: 500;
}

/* Challenge Section */
.challenge-section {
    margin-bottom: var(--demo-spacing);
}

.sentence-display {
    background: var(--demo-bg);
    border: 2px solid var(--demo-accent);
    border-radius: var(--demo-radius);
    padding: var(--demo-spacing);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--demo-spacing);
    text-align: center;
}

.word {
    display: inline;
}

.word-blank {
    display: inline-block;
    min-width: 80px;
    padding: 0.2rem 0.5rem;
    margin: 0 0.2rem;
    background: var(--demo-warning);
    color: #333;
    border-radius: var(--demo-radius-xs);
    font-weight: 600;
}

.word-incorrect {
    text-decoration: line-through;
    color: var(--demo-danger);
    background: rgba(220, 53, 69, 0.1);
    padding: 0.1rem 0.3rem;
    border-radius: var(--demo-radius-xs);
}

.word-highlight {
    background: var(--demo-accent);
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: var(--demo-radius-xs);
}

/* Options Container */
.options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.option-btn {
    padding: 0.75rem 1rem;
    border: 2px solid var(--demo-border);
    background: var(--demo-surface);
    color: var(--demo-text);
    border-radius: var(--demo-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all var(--demo-transition);
}

.option-btn:hover {
    border-color: var(--demo-accent);
    background: var(--demo-surface-alt);
    transform: translateY(-2px);
}

.option-btn:active {
    transform: translateY(0);
}

.option-btn.selected {
    border-color: var(--demo-accent);
    background: var(--demo-accent);
    color: white;
}

.option-btn.correct {
    border-color: var(--demo-success);
    background: var(--demo-success);
    color: white;
    animation: pulse-success 0.5s ease;
}

.option-btn.incorrect {
    border-color: var(--demo-danger);
    background: var(--demo-danger);
    color: white;
    animation: shake 0.4s ease;
}

.option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

@keyframes pulse-success {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Feedback Modal */
.feedback-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.feedback-modal {
    background: var(--demo-surface);
    border-radius: var(--demo-radius-lg);
    padding: var(--demo-spacing-lg);
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.feedback-icon {
    font-size: 4rem;
    margin-bottom: var(--demo-spacing);
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.feedback-content {
    margin-bottom: var(--demo-spacing-lg);
    font-size: 1rem;
    line-height: 1.6;
}

.feedback-correct {
    color: var(--demo-success);
    font-weight: 600;
    font-size: 1.2rem;
}

.feedback-incorrect {
    color: var(--demo-danger);
    font-weight: 600;
    font-size: 1.2rem;
}

.feedback-explanation {
    color: var(--demo-text);
    margin-top: var(--demo-spacing);
}

.next-btn {
    width: 100%;
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
}

/* Game Controls */
.game-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Game Complete Modal */
.game-complete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.game-complete-modal {
    background: var(--demo-surface);
    border-radius: var(--demo-radius-lg);
    padding: var(--demo-spacing-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
}

.game-complete-modal h3 {
    font-size: 1.5rem;
    margin-bottom: var(--demo-spacing-lg);
    color: var(--demo-text);
}

/* State Comparison */
.comparison-section {
    margin-bottom: var(--demo-spacing-lg);
}

.state-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.state-box {
    background: var(--demo-surface-alt);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius);
    padding: var(--demo-spacing);
    min-width: 150px;
}

.state-box h4 {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--demo-neutral);
}

.state-arrow {
    font-size: 1.5rem;
}

.mini-network {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
}

.mini-network .network-nodes {
    gap: 0.2rem;
}

.mini-network .network-node {
    width: 20px;
    height: 20px;
    font-size: 0.5rem;
}

/* Results Summary */
.results-summary {
    background: var(--demo-surface-alt);
    border-radius: var(--demo-radius);
    padding: var(--demo-spacing);
    margin-bottom: var(--demo-spacing-lg);
    text-align: left;
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--demo-border);
}

.result-item:last-child {
    border-bottom: none;
}

/* Key Message */
.key-message {
    background: linear-gradient(135deg, var(--demo-accent), color-mix(in srgb, var(--demo-accent) 80%, #000));
    color: white;
    border-radius: var(--demo-radius);
    padding: var(--demo-spacing);
    margin-bottom: var(--demo-spacing-lg);
}

.key-message p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.restart-btn {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .training-tabs {
        flex-direction: column;
    }

    .training-tab {
        min-width: 100%;
    }

    .state-comparison {
        flex-direction: column;
    }

    .state-arrow {
        transform: rotate(90deg);
    }

    .options-container {
        grid-template-columns: 1fr 1fr;
    }
}