/* SET YOUR GAME'S COLOR THEME HERE */
:root {
--primary-color: #FDE12D;
--primary-hover: #E5CA26;
--hero-gradient-start: rgba(253, 225, 45, 0.1);
--hero-gradient-end: rgba(229, 202, 38, 0.1);
--section-bg-start: rgba(253, 225, 45, 0.05);
--section-bg-end: rgba(229, 202, 38, 0.05);
--primary-shadow: rgba(253, 225, 45, 0.3);
--feature-shadow: rgba(253, 225, 45, 0.15);
--focus-shadow: rgba(253, 225, 45, 0.25);
--mode-shadow: rgba(253, 225, 45, 0.2);
--btn-shadow: rgba(253, 225, 45, 0.4);
--summary-bg-start: rgba(253, 225, 45, 0.1);
--summary-bg-end: rgba(229, 202, 38, 0.05);
--accordion-icon-filter: invert(89%) sepia(94%) saturate(436%) hue-rotate(356deg) brightness(103%) contrast(98%);
--btn-text-color: #333;
--yellow-pale: #FFFDF0;
--yellow-light: #FEF4A8;
--yellow-dark: #E5CA26;
}

.game-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1rem;
}

.game-stats .stat-card {
    flex: 1;
    min-width: 0;
}

/* Difficulty Selection Pills */
.difficulty-pills {
display: flex;
gap: 1.5rem;
justify-content: center;
margin: 2rem 0;
}

.difficulty-pill-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}

.difficulty-pill-title {
font-size: 1.3rem;
font-weight: 700;
color: #212529;
margin-bottom: 0.5rem;
}

.difficulty-pill-description {
font-size: 0.95rem;
color: #6c757d;
}

/* Ensure game card shows all content */
#gameView .content-card {
overflow: visible !important;
min-height: auto !important;
max-height: none !important;
padding-bottom: 3rem !important;
}

#gameView .quiz-content {
overflow: visible !important;
}

/* Audio Container Box - Yellow Theme */
.audio-container-box {
background: linear-gradient(135deg, rgba(253, 225, 45, 0.08) 0%, rgba(229, 202, 38, 0.08) 100%);
border: 2px solid rgba(253, 225, 45, 0.3);
border-radius: 1rem;
padding: 1.5rem;
margin-bottom: 2rem;
}

/* Audio Section - 3 Columns */
.audio-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}

.audio-player-wrapper {
text-align: center;
}

.audio-label {
font-size: 1rem;
font-weight: 600;
color: #495057;
margin-bottom: 0.75rem;
}

/* Letter Cards Container */
.letter-cards-container {
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 0.5rem;
margin: 2rem auto;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
padding: 0.5rem;
}

/* Prevent wrapping with scrollbar fallback */
.letter-cards-container::-webkit-scrollbar {
height: 8px;
}

.letter-cards-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

.letter-cards-container::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}

.letter-cards-container::-webkit-scrollbar-thumb:hover {
background: var(--yellow-dark);
}

.letter-card {
width: 70px;
height: 90px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 700;
color: #333;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
flex-shrink: 0;
min-width: 45px;
}

/* Dynamic sizing for longer words */
.letter-cards-container.word-long .letter-card {
width: 55px;
height: 75px;
font-size: 2rem;
}

.letter-cards-container.word-very-long .letter-card {
width: 45px;
height: 65px;
font-size: 1.6rem;
gap: 0.3rem;
}

.letter-cards-container.word-long .letter-card input {
font-size: 2rem;
}

.letter-cards-container.word-very-long .letter-card input {
font-size: 1.6rem;
}

.letter-card.empty {
background: white;
border: 2px solid var(--primary-color);
}

.letter-card input {
width: 100%;
height: 100%;
border: 2px solid var(--primary-color);
background: white;
border-radius: 0.75rem;
text-align: center;
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
color: #333;
cursor: text;
}

.letter-card input:focus {
outline: none;
border-color: var(--yellow-dark);
box-shadow: 0 0 0 3px rgba(253, 225, 45, 0.2);
}

.letter-card input:disabled {
cursor: not-allowed;
opacity: 0.7;
}

.letter-card.correct-highlight {
background: var(--primary-color);
border: 2px solid var(--yellow-dark);
animation: highlightPulse 0.5s ease;
}

@keyframes highlightPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}

/* Check Button */
.check-section {
margin: 3rem 0 2rem;
text-align: center;
display: block !important;
visibility: visible !important;
position: relative;
width: 100%;
clear: both;
padding: 1rem 0;
}

.btn-check {
background: var(--primary-color) !important;
color: #333 !important;
font-size: 1.3rem;
padding: 1rem 2.5rem;
border: 2px solid var(--yellow-dark) !important;
border-radius: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: inline-block !important;
visibility: visible !important;
box-shadow: 0 4px 12px var(--primary-shadow);
position: relative;
z-index: 10;
pointer-events: auto;
}

.btn-check:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--btn-shadow);
background: var(--yellow-dark);
}

.btn-check:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
pointer-events: none;
}

.btn-check:not(:disabled) {
pointer-events: auto !important;
cursor: pointer !important;
}

/* Correct Word Display */
.correct-word-display {
margin-top: 1.5rem;
text-align: center;
}

.correct-word-label {
font-size: 1.1rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 1rem;
}

.correct-letters {
display: flex;
justify-content: center;
flex-wrap: nowrap;
gap: 0.5rem;
margin-top: 0.5rem;
overflow-x: auto;
padding: 0.5rem;
}

.correct-letters::-webkit-scrollbar {
height: 8px;
}

.correct-letters::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

.correct-letters::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}

/* Plyr customization */
.plyr {
border-radius: 0.5rem;
background: white;
}

.plyr--audio .plyr__controls {
background: rgba(253, 225, 45, 0.15);
padding: 1rem;
border-radius: 0.5rem;
}

.plyr__control--overlaid {
display: none !important;
}

.plyr__controls .plyr__volume,
.plyr__controls [data-plyr="mute"],
.plyr__controls .plyr__time,
.plyr__controls .plyr__menu,
.plyr__controls [data-plyr="settings"],
.plyr__controls [data-plyr="fullscreen"],
.plyr__controls [data-plyr="download"] {
display: none !important;
}

.plyr__control {
color: var(--yellow-dark);
}

.plyr__control:hover {
background: rgba(253, 225, 45, 0.2);
}

.plyr__control svg {
fill: var(--yellow-dark);
}

@keyframes flash-correct {
    0%, 100% {
        background-color: transparent;
        border-color: transparent;
    }
    50% {
        background-color: rgba(76, 175, 80, 0.2);
        border: 3px solid #4caf50;
    }
}

@keyframes flash-wrong {
    0%, 100% {
        background-color: transparent;
        border-color: transparent;
    }
    50% {
        background-color: rgba(244, 67, 54, 0.2);
        border: 3px solid #f44336;
    }
}

.content-card.flash-correct {
    animation: flash-correct 0.6s ease;
}

.content-card.flash-wrong {
    animation: flash-wrong 0.6s ease;
}

.flash-correct {
animation: flashCorrect 800ms ease;
}

.flash-wrong {
animation: flashWrong 800ms ease;
}

@keyframes flashCorrect {
0% { background: rgba(76,175,80,0); }
50% { background: rgba(76,175,80,0.5); }
100% { background: rgba(76,175,80,0); }
}

@keyframes flashWrong {
0% { background: rgba(244,67,54,0); }
50% { background: rgba(244,67,54,0.5); }
100% { background: rgba(244,67,54,0); }
}

.step.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.step.clickable:hover {
    transform: scale(1.05);
}

.step.clickable:hover .step-circle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #333;
}

.step.locked {
    cursor: not-allowed;
    opacity: 0.5;
}

.step.locked:hover {
    transform: none;
}

@media (max-width: 576px) {
.audio-container-box {
    padding: 1rem;
}

.letter-cards-container {
    gap: 0.3rem;
}

.letter-card {
    width: 45px;
    height: 65px;
    font-size: 1.6rem;
    border: 2px solid #e0e0e0;
}

.letter-card.empty {
    border: 2px solid var(--primary-color);
}

.letter-card input {
    font-size: 1.6rem;
    border: 2px solid var(--primary-color);
}

.letter-cards-container.word-long .letter-card {
    width: 38px;
    height: 58px;
    font-size: 1.4rem;
}

.letter-cards-container.word-very-long .letter-card {
    width: 32px;
    height: 52px;
    font-size: 1.2rem;
}

.letter-cards-container.word-long .letter-card input {
    font-size: 1.4rem;
}

.letter-cards-container.word-very-long .letter-card input {
    font-size: 1.2rem;
}

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