/* ============================================
   MUSICAL MODES FLASHCARDS - APP SPECIFIC CSS
   Only styles unique to this app
   Common styles are in flashcard-common.css
   ============================================ */

/* Position flashcard-front/back as relative for absolute children */
.flashcard-front,
.flashcard-back {
    position: relative;
}

/* Question text - positioned at top */
.question-label {
    position: absolute;
    top: 2px;
    left: 12px;
    right: 40px; /* Account for 28px dog-ear + margin */
    text-align: center;
    background: linear-gradient(to bottom, var(--card) 60%, transparent);
    padding: 8px 16px 16px;
    z-index: 2;
    border-radius: 10px 0 0 0;
}

/* Flip button - positioned at bottom */
.hint-controls {
    position: absolute;
    bottom: 2px;
    left: 12px;
    right: 12px;
    z-index: 2;
    background: linear-gradient(to top, var(--card) 60%, transparent);
    padding: 16px 16px 8px;
    margin: 0;
    border-radius: 0 0 10px 10px;
}

/* Notation container - full size, centered */
.notation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.notation-container svg {
    max-width: 100%;
    height: auto;
}

/* Dark mode SVG inversion */
body.dark-mode .notation-container svg {
    filter: invert(1) hue-rotate(180deg);
}

/* Dark mode gradient backgrounds */
body.dark-mode .question-label {
    background: linear-gradient(to bottom, var(--card) 60%, transparent);
}

body.dark-mode .hint-controls {
    background: linear-gradient(to top, var(--card) 60%, transparent);
}

/* Flashcard size override */
.flashcard {
    height: 240px;
}
/* Individual mode button colors - unique to this app */
.pill[data-mode="ionian"] { border-color: #3b82f6; color: #3b82f6; }
.pill[data-mode="dorian"] { border-color: #8b5cf6; color: #8b5cf6; }
.pill[data-mode="phrygian"] { border-color: #ec4899; color: #ec4899; }
.pill[data-mode="lydian"] { border-color: #f59e0b; color: #f59e0b; }
.pill[data-mode="mixolydian"] { border-color: #10b981; color: #10b981; }
.pill[data-mode="aeolian"] { border-color: #06b6d4; color: #06b6d4; }
.pill[data-mode="locrian"] { border-color: #64748b; color: #64748b; }

/* Hover states with background fill */
.pill[data-mode="ionian"]:hover:not(:disabled) { background: #3b82f6; color: white; }
.pill[data-mode="dorian"]:hover:not(:disabled) { background: #8b5cf6; color: white; }
.pill[data-mode="phrygian"]:hover:not(:disabled) { background: #ec4899; color: white; }
.pill[data-mode="lydian"]:hover:not(:disabled) { background: #f59e0b; color: white; }
.pill[data-mode="mixolydian"]:hover:not(:disabled) { background: #10b981; color: white; }
.pill[data-mode="aeolian"]:hover:not(:disabled) { background: #06b6d4; color: white; }
.pill[data-mode="locrian"]:hover:not(:disabled) { background: #64748b; color: white; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .flashcard {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .flashcard {
        height: 200px;
    }

    .notation-container {
        overflow-x: auto;
    }
}