/* BMMT HTML5 - Custom Styles */

/* Terminal character grid */
.terminal-grid {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.15em;
}

.terminal-char {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    transition: background-color 0.15s;
}

.terminal-char.correct { color: #00c853; }
.terminal-char.incorrect { color: #ff1744; }
.terminal-char.no-response { color: #546e7a; }
.terminal-char.period { color: #ffd700; }
.terminal-char.pending { color: #78909c; }
.terminal-char.active {
    background-color: rgba(233, 69, 96, 0.2);
    border-bottom: 2px solid #e94560;
}
.terminal-char.space { width: 1em; }

/* Grading marks row */
.grade-mark {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    font-size: 0.8rem;
}
.grade-mark.correct { color: #00c853; }
.grade-mark.incorrect { color: #ff1744; }
.grade-mark.no-response { color: #546e7a; }

/* Dit/Dah visual bars */
.morse-bar {
    display: inline-block;
    height: 12px;
    border-radius: 3px;
    transition: background-color 0.1s;
    vertical-align: middle;
}
.morse-bar.dit {
    width: 16px;
    background-color: #e94560;
}
.morse-bar.dah {
    width: 48px;
    background-color: #e94560;
}
.morse-bar.inactive {
    background-color: #2a3a5e;
}

/* Slide viewer */
.slide-container {
    max-width: 800px;
    margin: 0 auto;
}
.slide-image {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
}

/* Quiz options */
.quiz-option {
    cursor: pointer;
    padding: 0.75rem 1rem;
    border: 2px solid #0f3460;
    border-radius: 8px;
    transition: all 0.2s;
}
.quiz-option:hover {
    border-color: #e94560;
    background-color: rgba(233, 69, 96, 0.1);
}
.quiz-option.selected {
    border-color: #e94560;
    background-color: rgba(233, 69, 96, 0.2);
}
.quiz-option.correct-answer {
    border-color: #00c853;
    background-color: rgba(0, 200, 83, 0.2);
}
.quiz-option.wrong-answer {
    border-color: #ff1744;
    background-color: rgba(255, 23, 68, 0.2);
}

/* Menu cards */
.menu-card {
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid #0f3460;
}
.menu-card:hover {
    border-color: #e94560;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 69, 96, 0.2);
}
.menu-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.menu-card.locked:hover {
    border-color: #0f3460;
    transform: none;
    box-shadow: none;
}
.menu-card.completed {
    border-color: #00c853;
}

/* Lesson list items */
.lesson-item {
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
}
.lesson-item:hover {
    background-color: rgba(233, 69, 96, 0.1);
    border-left-color: #e94560;
}
.lesson-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.lesson-item.completed {
    border-left-color: #00c853;
}
.lesson-item.current {
    border-left-color: #ffd700;
    background-color: rgba(255, 215, 0, 0.05);
}

/* Game summary */
.score-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Keyboard helper */
.keyboard-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #0f3460;
    border-radius: 4px;
    font-size: 0.85rem;
    background-color: #1a1a2e;
    transition: all 0.15s;
}
.keyboard-key.highlight {
    background-color: #e94560;
    color: white;
    border-color: #e94560;
    transform: scale(1.1);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #0f3460; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #e94560; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(233, 69, 96, 0.3); }
    50% { box-shadow: 0 0 20px rgba(233, 69, 96, 0.6); }
}
.pulse-glow { animation: pulse-glow 2s infinite; }

/* Print styles */
@media print {
    body { background: white; color: black; }
    #header, #footer, button { display: none; }
    .terminal-char.correct { color: green; }
    .terminal-char.incorrect { color: red; }
}