/* Custom Styles for Flags Quiz */

/* Custom Color Theme */
:root {
    --color-dark-slate: #455054;
    --color-teal: #308695;
    --color-pink: #D45769;
    --color-orange: #E69D45;
    --color-light-gray: #D4CFC9;
    --primary-color: #308695;
    --secondary-color: #D45769;
    --accent-color: #E69D45;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f8f8;
}

/* Main content should grow to push footer to bottom */
.section {
    flex: 1;
}

/* Override Bulma primary color */
.navbar.is-primary {
    background-color: var(--color-teal) !important;
}

.button.is-primary {
    background-color: var(--color-teal) !important;
    border-color: transparent !important;
}

.button.is-primary:hover {
    background-color: #266e7a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 134, 149, 0.3);
}

/* Navbar styling */
.navbar {
    box-shadow: 0 2px 4px rgba(69, 80, 84, 0.15);
}

.navbar-brand .title {
    padding: 0;
    margin: 0;
}

.button.is-light {
    background-color: white !important;
    color: var(--color-teal) !important;
    border: 2px solid white !important;
}

.button.is-light:hover {
    background-color: var(--color-light-gray) !important;
    color: var(--color-dark-slate) !important;
}

/* Footer styling */
.footer {
    margin-top: auto;
    padding: 2rem 1.5rem;
    background-color: var(--color-dark-slate);
    color: white;
}

.footer .content {
    color: white;
}

.footer strong {
    color: white;
}

.footer a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #d0d0d0;
}

/* Lottie Animation Container */
.lottie-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

/* Quiz Screen Styling */
#quizScreen {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#flagImage {
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;
}

.answer-button {
    transition: all 0.3s ease;
    text-align: left;
    font-size: 1.1rem;
    height: auto;
    white-space: normal;
    padding: 1.2rem;
    margin-bottom: 0.75rem;
    background-color: var(--color-light-gray);
    border: 2px solid transparent;
    color: var(--color-dark-slate);
    /* Remove touch highlighting on mobile */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* Force remove focus/active states */
    outline: none;
}

.answer-button:hover:not(:disabled):not(.is-success):not(.is-danger) {
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(69, 80, 84, 0.2);
    border-color: var(--color-teal);
}

.answer-button:focus,
.answer-button:active,
.answer-button:focus:not(:active) {
    outline: none !important;
    box-shadow: none !important;
    /* Keep original colors on focus/active for non-answered buttons */
}

.answer-button:not(.is-success):not(.is-danger):focus,
.answer-button:not(.is-success):not(.is-danger):active {
    background-color: var(--color-light-gray) !important;
    border-color: transparent !important;
    color: var(--color-dark-slate) !important;
}

.answer-button:disabled {
    cursor: not-allowed;
}

.answer-button.is-success {
    background-color: var(--color-teal) !important;
    color: white !important;
    border-color: var(--color-teal) !important;
}

.answer-button.is-danger {
    background-color: var(--color-pink) !important;
    color: white !important;
    border-color: var(--color-pink) !important;
}

/* Score and Timer Boxes */
.box.has-background-primary {
    background-color: var(--color-teal) !important;
}

.box.has-background-info {
    background-color: var(--color-orange) !important;
}

/* Modal content styling */
.modal-card-head {
    background-color: var(--color-teal) !important;
    border-bottom: none !important;
}

.modal-card-head.has-background-danger {
    background-color: var(--color-pink) !important;
}

.modal-card-title {
    color: white !important;
}

.modal-card-head .delete {
    background-color: rgba(255, 255, 255, 0.3);
}

.modal-card-head .delete:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.modal-card-body .content h3 {
    color: var(--color-teal);
    margin-top: 1.5rem;
}

.modal-card-body .content h3:first-child {
    margin-top: 0;
}

/* Game Over Modal specific styling */
#gameOverModal .box.has-background-primary {
    background-color: var(--color-teal) !important;
}

#gameOverModal .box.has-background-info {
    background-color: var(--color-orange) !important;
}

/* Language Selector Dropdown */
#languageSelectorContainer {
    display: flex;
    align-items: center;
}

#languageSelectorContainer .navbar-link {
    padding: calc(0.5em - 2px) 0.75rem;
    background-color: white !important;
    color: var(--color-teal) !important;
    border: 2px solid white !important;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

#languageSelectorContainer .navbar-link .icon {
    margin: 0;
}

#languageSelectorContainer .navbar-link span:not(.icon) {
    font-size: 1rem;
}

#languageSelectorContainer .navbar-link:hover {
    background-color: var(--color-light-gray) !important;
    color: var(--color-dark-slate) !important;
}

#languageSelectorContainer .navbar-dropdown {
    min-width: 150px;
    border: 2px solid var(--color-light-gray);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.language-option {
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-option:hover {
    background-color: var(--color-light-gray) !important;
}

.language-option .icon {
    width: 1.5rem;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    /* Navbar optimizations */
    .navbar {
        padding: 0.5rem 0;
    }
    
    .navbar-brand .title {
        font-size: 1rem !important;
        padding: 0.5rem;
    }
    
    .navbar-brand .title .fa-flag {
        font-size: 0.9rem;
    }
    
    .navbar-item {
        padding: 0.25rem 0.5rem;
    }
    
    .navbar-menu {
        display: block !important;
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }
    
    .navbar-end {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .navbar-item.has-dropdown {
        display: flex;
        align-items: center;
    }
    
    .navbar-item.has-dropdown .navbar-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: white;
        border-radius: 6px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        min-width: 150px;
        z-index: 30;
    }
    
    .navbar-item.has-dropdown.is-active .navbar-dropdown,
    .navbar-item.has-dropdown:hover .navbar-dropdown {
        display: block;
    }
    
    .navbar-end .button {
        height: 2rem;
        min-width: 2rem;
        padding: 0.25rem;
        font-size: 0.875rem;
    }
    
    .navbar-end .button .icon {
        font-size: 1rem;
    }
    
    #languageSelectorContainer .navbar-link {
        height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        gap: 0.25rem;
    }
    
    #languageSelectorContainer .navbar-link .icon {
        font-size: 0.875rem;
    }
    
    #languageSelectorContainer .navbar-link span:not(.icon) {
        font-size: 0.875rem;
    }
    
    /* Start screen optimizations */
    .section {
        padding: 1rem 1rem;
    }
    
    .box {
        padding: 1.5rem;
    }
    
    #startScreen .title {
        font-size: 1.5rem !important;
    }
    
    #startScreen .subtitle {
        font-size: 1rem !important;
    }
    
    .lottie-container lottie-player {
        width: 200px !important;
        height: 200px !important;
    }
    
    #startButton {
        font-size: 1rem !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Quiz screen optimizations */
    #quizScreen .columns {
        margin-bottom: 1rem !important;
    }
    
    #quizScreen .box {
        padding: 1rem;
    }
    
    #quizScreen .title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    #scoreDisplay, #timerDisplay {
        font-size: 1.75rem !important;
    }
    
    .box .heading {
        font-size: 0.75rem !important;
    }
    
    #flagImage {
        max-width: 180px;
    }
    
    .answer-button {
        font-size: 0.95rem !important;
        padding: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Touch-specific styles - prevents focus state after tap */
    .answer-button:active {
        background-color: var(--color-light-gray) !important;
        border-color: transparent !important;
    }
    
    /* Prevent hover effects on touch devices */
    .answer-button:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
    
    /* Footer optimizations */
    .footer {
        padding: 1.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Game Over Modal optimizations */
    .modal-content,
    .modal-card {
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
    }
    
    .modal-card-body {
        padding: 1.5rem 1rem !important;
    }
    
    .modal-card-head .modal-card-title {
        font-size: 1.25rem;
    }
    
    #gameOverModal .title {
        font-size: 1.5rem !important;
    }
    
    #gameOverModal #finalScore,
    #gameOverModal #gameDuration {
        font-size: 1.5rem !important;
    }
    
    #gameOverModal .subtitle {
        font-size: 1rem !important;
    }
    
    #gameOverButton {
        font-size: 1rem !important;
    }
}

/* Game Mode Selection Modal Styling */
.game-mode-button {
    text-align: left !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    height: auto !important;
    transition: all 0.3s ease !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.game-mode-button:hover {
    transform: translateX(10px) !important;
    box-shadow: 0 6px 12px rgba(48, 134, 149, 0.3) !important;
}

.game-mode-button span:not(.icon) {
    text-align: left;
}

.game-mode-button strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.game-mode-button small {
    display: block;
    opacity: 0.9;
    font-size: 0.8rem;
}

/* Text Question Display */
#textQuestionContainer {
    padding: 2rem;
    min-height: 192px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#textQuestion {
    color: var(--color-teal);
    font-weight: bold;
}

/* Start Screen Buttons */
#startScreen .buttons {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

#startScreen .button {
    font-size: 1rem !important;
    font-weight: 500;
}

#startScreen .button.is-large {
    min-width: 250px;
    height: auto;
    padding: 1rem 1.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

#startScreen .button.is-large .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#startScreen .button.is-large span:not(.icon) {
    text-align: center;
}

@media screen and (max-width: 768px) {
    #startScreen .buttons {
        flex-direction: column;
    }
    
    #startScreen .button.is-large {
        min-width: 100%;
        width: 100%;
        padding: 1.25rem 1rem !important;
    }
    
    .game-mode-button strong {
        font-size: 1rem;
    }
    
    .game-mode-button small {
        font-size: 0.75rem;
    }
    
    #textQuestion {
        font-size: 1.5rem !important;
    }
}