/* =====================================================
   BE — Countries & Nationalities
   Style aligned with Daily Routines (green theme)
   Light mode default · dark mode via body:not(.light-mode)
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    /* Daily Routines green system */
    --dr-green: #079d73;
    --dr-green-dark: #068a64;
    --dr-green-soft: #eaf8f4;
    --dr-green-border: #dcefe9;

    --bg-main: #f6fbf9;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f9f5;

    --text-main: #202636;
    --text-muted: #687184;
    --text-soft: #8a938c;

    --border: #dcefe9;

    --accent: #079d73;
    --accent-two: #0bb881;

    --success: #059669;
    --success-bg: #ecfdf5;

    --danger: #e11d48;
    --danger-bg: #fff1f2;

    --dr-shadow: 0 12px 32px rgba(7, 157, 115, 0.1);
    --dr-radius: 18px;
}


body:not(.light-mode) {
    --bg-main: #0e1311;
    --bg-card: #17201c;
    --bg-card-hover: #1e2a25;

    --text-main: #eef5f1;
    --text-muted: #9aaba3;
    --text-soft: #7a8f85;

    --border: #24463b;

    --dr-green-soft: #14352c;
    --dr-green-border: #24463b;

    --success-bg: #10352b;
    --danger-bg: #3a1520;

    --dr-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}


/* =====================================================
   BODY
===================================================== */

html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s ease, color 0.3s ease;
}

body.light-mode {
    background: var(--bg-main);
    color: var(--text-main);
}

body:not(.light-mode) {
    background: var(--bg-main);
}


/* =====================================================
   HEADER
===================================================== */

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--dr-green-border);
    position: sticky;
    top: 0;
    z-index: 40;
}

body:not(.light-mode) .game-header {
    background: rgba(14, 19, 17, 0.92);
}


.header-left {

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    overflow: hidden;

    white-space: nowrap;
}


.back-button,
.arcade-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--dr-green-border);
    background: var(--bg-card);
    color: var(--text-main);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.back-button:hover,
.arcade-button:hover {
    border-color: var(--dr-green);
    box-shadow: 0 6px 16px rgba(7, 157, 115, 0.12);
    transform: translateY(-1px);
}

.back-button:focus-visible,
.arcade-button:focus-visible {
    outline: 3px solid rgba(7, 157, 115, 0.28);
    outline-offset: 2px;
}


.hidden-nav-button {

    visibility: hidden;

    opacity: 0;

    pointer-events: none;
}


.arcade-button {

    color: var(--text-muted);

    font-size: 11px;
}


.game-title {

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    overflow: hidden;

    text-align: center;
}


.game-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--dr-green);
    color: #fff;
    font-size: 20px;
}

.game-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-title-text {
    min-width: 0;
    overflow: hidden;
    text-align: left;
}

.game-title-text h1 {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
}

.game-title-text p {
    margin: 2px 0 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}


.header-right {

    min-width: 0;

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 9px;
}


.theme-toggle {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: var(--bg-card);

    color: var(--text-main);

    font-size: 18px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.theme-toggle:hover {

    transform:
        translateY(-2px)
        rotate(8deg);

    background:
        rgba(7, 157, 115,0.10);
}


.theme-toggle:focus-visible {

    outline: 3px solid rgba(7, 157, 115,0.28);

    outline-offset: 2px;
}


/* =====================================================
   MAIN
===================================================== */

main {

    min-height:
        calc(100vh - 76px);

    padding:
        45px 20px 60px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;
}


.screen {

    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;

    animation:
        screenIn 0.3s ease;
}


.hidden {
    display:
        none !important;
}


@keyframes screenIn {

    from {
        opacity:
            0;

        transform:
            translateY(10px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =====================================================
   COMMON
===================================================== */

.eyebrow {

    display:
        inline-block;

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;
}


/* =====================================================
   TARGET GRAMMAR
===================================================== */

.selection-card {
    max-width: 720px;
    margin: 28px auto;
    padding: 40px 32px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--dr-green-border);
    border-radius: 24px;
    box-shadow: var(--dr-shadow);
}

.selection-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--dr-green);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 22px rgba(7, 157, 115, 0.28);
}

.eyebrow {
    display: inline-block;
    color: var(--dr-green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.selection-card h2 {
    margin: 10px 0 12px;
    font-size: clamp(28px, 5vw, 36px);
    letter-spacing: -0.8px;
    color: var(--text-main);
}

.selection-description {
    margin: 0 auto 18px;
    max-width: 420px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.selection-description strong {
    color: var(--dr-green);
}


/* =====================================================
   GRAMMAR CARDS
===================================================== */

.grammar-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        13px;

    text-align:
        left;
}


.grammar-card {

    min-height:
        155px;

    padding:
        20px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        var(--bg-card);

    color:
        var(--text-main);

    cursor:
        pointer;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    position:
        relative;

    transition:
        all 0.2s ease;
}


.grammar-card:hover:not(:disabled) {

    transform:
        translateY(-3px);

    background:
        var(--bg-card-hover);

    border-color:
        rgba(7, 157, 115,0.35);
}


.grammar-card.selected {

    border-color:
        var(--accent);

    background:
        rgba(7, 157, 115,0.07);
}


.grammar-card.selected::after {

    content:
        "✓";

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    width:
        27px;

    height:
        27px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--accent);

    color:
        white;

    font-size:
        13px;
}


.grammar-card.locked {

    opacity:
        0.45;

    cursor:
        not-allowed;
}


.grammar-card-icon {

    font-size:
        26px;

    margin-bottom:
        10px;
}


.grammar-card-title {

    font-size:
        18px;

    font-weight:
        900;
}


.grammar-card-text {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        12px;
}


.grammar-card-topic {

    margin-top:
        9px;

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


/* =====================================================
   MAIN BUTTON
===================================================== */

.main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    margin-top: 26px;
    padding: 0 28px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #0bb881, #079d73);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(7, 157, 115, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.main-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(7, 157, 115, 0.34);
    filter: brightness(1.03);
}

.main-button:active {
    transform: translateY(0);
}


/* =====================================================
   GAME
===================================================== */

.battle-container {

    width:
        100%;

    max-width:
        850px;

    margin:
        0 auto;
}


.score-bar {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        13px;
}


.score-item {

    padding:
        14px;

    text-align:
        center;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        var(--bg-card);
}


.score-item span {

    display:
        block;

    color:
        var(--text-soft);

    font-size:
        9px;

    letter-spacing:
        1.5px;
}


.score-item strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-main);

    font-size:
        23px;
}


.combo-item strong {
    color:
        var(--accent);
}


/* =====================================================
   QUESTION
===================================================== */

.question-area {

    padding:
        48px 0 32px;

    text-align:
        center;
}


.question-badge {

    display:
        inline-block;

    padding:
        7px 12px;

    border-radius:
        20px;

    background:
        rgba(7, 157, 115,0.08);

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.8px;
}


.question-area h2 {

    max-width:
        700px;

    margin:
        18px auto 0;

    color:
        var(--text-main);

    font-size:
        clamp(28px,5vw,42px);

    line-height:
        1.3;
}


#questionHint {

    margin-top:
        11px;

    color:
        var(--text-muted);

    font-size:
        13px;
}


/* =====================================================
   ANSWERS
===================================================== */

.answers-container {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        14px;
}


.answer-button {

    min-height:
        110px;

    padding:
        18px;

    border:
        2px solid var(--border);

    border-radius:
        17px;

    background:
        var(--bg-card);

    color:
        var(--text-main);

    cursor:
        pointer;

    font-size:
        20px;

    font-weight:
        800;

    line-height:
        1.35;

    position:
        relative;

    transition:
        all 0.18s ease;
}


.answer-button:hover:not(:disabled) {

    transform:
        translateY(-4px);

    border-color:
        rgba(7, 157, 115,0.50);

    background:
        var(--bg-card-hover);

    box-shadow:
        0 10px 24px
        rgba(7, 157, 115,0.08);
}


.answer-button:disabled {
    cursor:
        default;
}


/* =====================================================
   CORRECT
===================================================== */

.answer-button.correct {

    border-color:
        var(--success);

    background:
        var(--success-bg);

    color:
        #15803d;

    animation:
        correctAnswer 0.4s ease;
}


.answer-button.correct::after {

    content:
        "✓";

    position:
        absolute;

    top:
        10px;

    right:
        12px;

    color:
        #16a34a;

    font-size:
        18px;
}


/* =====================================================
   WRONG
===================================================== */

.answer-button.wrong {

    border-color:
        var(--danger);

    background:
        var(--danger-bg);

    color:
        #b91c1c;

    animation:
        wrongAnswer 0.4s ease;
}


.answer-button.wrong::after {

    content:
        "✕";

    position:
        absolute;

    top:
        10px;

    right:
        12px;

    color:
        #dc2626;

    font-size:
        18px;
}


.answer-button.correct-answer {

    border-color:
        var(--success);

    background:
        rgba(34,197,94,0.08);

    color:
        #15803d;
}


@keyframes correctAnswer {

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


@keyframes wrongAnswer {

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

    50% {
        transform:
            translateX(6px);
    }

    75% {
        transform:
            translateX(-4px);
    }
}


/* =====================================================
   FEEDBACK
===================================================== */

.feedback {

    min-height:
        34px;

    margin-top:
        16px;

    text-align:
        center;

    color:
        var(--text-muted);

    font-size:
        14px;

    font-weight:
        800;
}


.feedback.correct {
    color:
        var(--success);
}


.feedback.wrong {
    color:
        var(--danger);
}


/* =====================================================
   PROGRESS
===================================================== */

.progress-area {
    margin-top:
        26px;
}


.progress-label {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--text-soft);

    font-size:
        9px;

    letter-spacing:
        1px;
}


.progress-bar {

    height:
        7px;

    margin-top:
        8px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        rgba(127,127,127,0.13);
}


.progress-fill {

    width:
        0%;

    height:
        100%;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-two)
        );

    transition:
        width 0.3s ease;
}


/* =====================================================
   RESULT
===================================================== */

.result-card {
    max-width: 720px;
    margin: 20px auto;
    padding: 36px 28px;
    text-align: center;
    border: 1px solid var(--dr-green-border);
    border-radius: 24px;
    background: var(--bg-card);
    box-shadow: var(--dr-shadow);
}

.result-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--dr-green-soft);
    font-size: 28px;
}

.result-card h2 {
    margin: 8px 0 18px;
    color: var(--text-main);
    font-size: 30px;
}


.final-score {

    margin:
        25px auto;

    padding:
        18px;

    border-radius:
        16px;

    background:
        rgba(7, 157, 115,0.08);
}


.final-score span {

    display:
        block;

    color:
        var(--text-soft);

    font-size:
        9px;

    letter-spacing:
        2px;
}


.final-score strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--accent);

    font-size:
        42px;
}


.result-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        10px;
}


.result-stat {

    padding:
        15px;

    border:
        1px solid var(--border);

    border-radius:
        13px;

    background:
        rgba(7, 157, 115,0.04);
}


.result-stat strong {

    display:
        block;

    color:
        var(--text-main);

    font-size:
        22px;
}


.result-stat span {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-soft);

    font-size:
        10px;
}


/* =====================================================
   BREAKDOWN
===================================================== */

.breakdown {

    margin-top:
        18px;

    padding:
        18px;

    text-align:
        left;

    border:
        1px solid var(--border);

    border-radius:
        16px;

    background:
        rgba(7, 157, 115,0.03);
}


.breakdown h3 {

    margin-bottom:
        12px;

    color:
        var(--text-main);

    font-size:
        14px;
}


.breakdown-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        9px 0;

    border-bottom:
        1px solid var(--border);

    color:
        var(--text-muted);

    font-size:
        13px;
}


.breakdown-row:last-child {
    border-bottom:
        none;
}


.breakdown-row strong {
    color:
        var(--text-main);
}


/* =====================================================
   XP
===================================================== */

.xp-box {

    margin-top:
        15px;

    padding:
        17px;

    border-radius:
        14px;

    background:
        rgba(34,197,94,0.08);

    border:
        1px solid
        rgba(34,197,94,0.16);
}


.xp-box span {

    display:
        block;

    color:
        var(--text-soft);

    font-size:
        9px;

    letter-spacing:
        2px;
}


.xp-box strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--success);

    font-size:
        25px;
}


/* =====================================================
   RESULT BUTTONS
===================================================== */

.result-buttons {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


.secondary-button {

    margin-top:
        12px;

    padding:
        12px 20px;

    border:
        none;

    background:
        transparent;

    color:
        var(--text-muted);

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}


.secondary-button:hover {
    color:
        var(--text-main);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {


    main {
        padding:
            25px 13px 40px;
    }


    .selection-card {

        padding:
            30px 18px;

        margin:
            10px auto;
    }


    .selection-card h2 {
        font-size:
            31px;
    }


    .grammar-grid {
        grid-template-columns:
            1fr;
    }


    .score-bar {
        gap:
            8px;
    }


    .score-item {
        padding:
            11px 5px;
    }


    .score-item strong {
        font-size:
            19px;
    }


    .question-area {

        padding:
            35px 0 25px;
    }


    .question-area h2 {

        font-size:
            28px;
    }


    .answers-container {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .answer-button {

        min-height:
            72px;

        font-size:
            17px;
    }


    .result-card {

        padding:
            32px 18px;
    }


    .result-card h2 {

        font-size:
            31px;
    }

}
/* =====================================================
   MOBILE — GRAMMAR BATTLE
   Supports 320px / 390px / 430px
===================================================== */

@media (max-width: 600px) {

    body {
        padding: 0;
        overflow-x: hidden;
    }


    /* START */

    .screen {
        min-height: calc(100vh - 62px);
        padding: 25px 12px;
    }

    .start-card {
        padding: 30px 16px;
        border-radius: 20px;
    }

    .big-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 18px;
        font-size: 32px;
        border-radius: 18px;
    }

    .start-card h1 {
        font-size: clamp(34px, 11vw, 44px);
    }

    .start-card > p {
        font-size: 12px;
        line-height: 1.55;
    }

    .main-button {
        width: 100%;
        padding: 13px 15px;
        font-size: 11px;
    }


    /* UNIT SELECTOR */

    .unit-grid,
    .grammar-grid,
    .topic-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .unit-card,
    .grammar-card,
    .topic-card {
        min-height: 70px;
        padding: 12px;
        border-radius: 12px;
    }


    /* GAME */

    .game-container {
        width: 100%;
        max-width: none;
    }

    .score-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .score-item {
        padding: 10px 4px;
        border-radius: 10px;
    }

    .score-item span {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .score-item strong {
        font-size: 17px;
    }


    .game-instruction {
        padding: 25px 0 18px;
    }

    .game-instruction h2 {
        font-size: 21px;
    }

    .phrase {
        margin-top: 10px;
        font-size: clamp(24px, 8vw, 34px);
        line-height: 1.15;
        word-break: break-word;
    }

    .game-instruction p {
        font-size: 11px;
    }


    /* OPTIONS */

    .answers-container {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .answer-button {
        min-height: 60px;
        padding: 9px 11px;
        font-size: 15px;
        border-radius: 12px;
    }


    /* MATCHING */

    .matching-game {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        padding: 10px 6px;
    }

    .match-column {
        max-width: none;
        gap: 6px;
    }

    .match-word,
    .match-picture {
        width: min(100%, 105px);
        aspect-ratio: 1;
        height: auto;
    }

    .match-word {
        padding: 7px;
        font-size: 10px;
        border-radius: 10px;
    }

    .match-picture {
        border-radius: 10px;
    }


    /* PROGRESS */

    .progress-area {
        margin-top: 18px;
    }

    .progress-label {
        font-size: 8px;
    }

    .progress-bar {
        height: 5px;
    }


    /* RESULTS */

    .result-card {
        padding: 30px 15px;
        border-radius: 20px;
    }

    .result-card h1 {
        font-size: 30px;
    }

    .final-score strong {
        font-size: 38px;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }

    .xp-box strong {
        font-size: 22px;
    }


    /* TOUCH FRIENDLY */

    button {
        -webkit-tap-highlight-color: transparent;
    }

}


@media (max-width: 340px) {

    .answer-button {
        min-height: 56px;
        font-size: 13px;
    }

    .match-word,
    .match-picture {
        width: 91px;
    }

    .match-word {
        font-size: 9px;
    }

}

/* =====================================================
   GRAMMAR BATTLE HEADER — MOBILE
   430px / 390px / 320px
===================================================== */

@media (max-width: 700px) {

    .game-header {

        height: 62px;

        padding: 0 10px;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        gap: 8px;
    }

    .header-left {
        min-width: 0;
        max-width: 100%;
        gap: 5px;
    }

    .back-button,
    .arcade-button {
        height: 36px;
        padding: 0 9px;
        border-radius: 10px;
        font-size: 10px;
    }

    .arcade-button {
        font-size: 9px;
    }

    .game-title {
        min-width: 0;
        max-width: 100%;
        gap: 6px;
    }

    .game-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 9px;
        font-size: 15px;
    }

    .game-title-text {
        min-width: 0;
        max-width: 170px;
    }

    .game-title-text h1 {
        font-size: 14px;
    }

    .game-title-text p {
        font-size: 8px;
    }

    .header-right {
        min-width: 0;
        gap: 4px;
    }

    .theme-toggle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 10px;
        font-size: 14px;
    }
}


@media (max-width: 430px) {

    .game-header {
        padding: 0 7px;
        gap: 5px;
    }

    .header-left {
        gap: 3px;
    }

    .back-button,
    .arcade-button {
        height: 34px;
        padding: 0 7px;
        border-radius: 9px;
        font-size: 8px;
    }

    .arcade-button {
        font-size: 7.5px;
    }

    .game-title {
        gap: 4px;
    }

    .game-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 13px;
    }

    .game-title-text {
        max-width: 140px;
    }

    .game-title-text h1 {
        font-size: 12px;
    }

    .game-title-text p {
        display: none;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 13px;
    }
}


@media (max-width: 390px) {

    .game-header {
        padding: 0 6px;
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);
        gap: 4px;
    }

    .header-left {
        gap: 3px;
    }

    .back-button {
        padding: 0 6px;
        font-size: 8px;
    }

    .arcade-button {
        padding: 0 6px;
        font-size: 7px;
    }

    .game-title {
        gap: 3px;
    }

    .game-title-text {
        max-width: 110px;
    }

    .game-title-text h1 {
        font-size: 11px;
        text-align: center;
    }

    .theme-toggle {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 12px;
    }
}


@media (max-width: 340px) {

    .game-header {
        padding: 0 5px;
        gap: 3px;
    }

    .header-left {
        gap: 2px;
    }

    .back-button {
        padding: 0 5px;
        font-size: 7px;
    }

    .arcade-button {
        padding: 0 5px;
        font-size: 6.5px;
    }

    .game-title {
        gap: 2px;
    }

    .game-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        font-size: 12px;
    }

    .game-title-text {
        max-width: 90px;
    }

    .game-title-text h1 {
        font-size: 10px;
    }

    .theme-toggle {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 11px;
    }
}


/* ===== MOBILE: keep answers on screen ===== */
@media (max-width: 700px) {
  .game-header {
    min-height: 52px !important;
    padding: 8px 12px !important;
  }
  .game-title-text h1 { font-size: 14px !important; }
  .game-title-text p { display: none !important; }
  .back-button { padding: 8px 12px !important; font-size: 13px !important; }

  main, .battle-container, .game-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .selection-card, .question-area, .result-card {
    padding: 16px 14px !important;
  }

  .score-bar {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .score-item { padding: 8px !important; }

  .question-area h2,
  .question-text,
  .prompt {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .answers-container,
  .answer-grid {
    gap: 8px !important;
  }

  .answer-button,
  .answer-option {
    padding: 12px 14px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }

  .progress-area { margin-top: 10px !important; }
}


/* Mobile: hide header while playing */
@media (max-width: 700px) {
  body.playing .game-header {
    display: none !important;
  }
}


/* ========== UNIFIED GRAMMAR BACK BUTTON ========== */
.back-button,
a.back-button,
button.back-button,
.arcade-back-btn.back-button,
.arcade-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid #dcefe9 !important;
  background: #ffffff !important;
  color: #202636 !important;
  text-decoration: none !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.back-button:hover,
a.back-button:hover,
button.back-button:hover,
.arcade-back-btn:hover {
  border-color: #079d73 !important;
  background: #ffffff !important;
  color: #202636 !important;
  box-shadow: 0 6px 16px rgba(7, 157, 115, 0.12) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

.back-button:focus-visible,
.arcade-back-btn:focus-visible {
  outline: 3px solid rgba(7, 157, 115, 0.28) !important;
  outline-offset: 2px !important;
}

html[data-theme="dark"] .back-button,
html[data-theme="dark"] .arcade-back-btn,
body:not(.light-mode) .back-button,
body.dark-mode .back-button {
  background: #17201c !important;
  border-color: #24463b !important;
  color: #eef5f1 !important;
}

html[data-theme="dark"] .back-button:hover,
body:not(.light-mode) .back-button:hover,
body.dark-mode .back-button:hover {
  border-color: #079d73 !important;
  box-shadow: 0 6px 16px rgba(7, 157, 115, 0.2) !important;
}

@media (max-width: 700px) {
  .back-button,
  .arcade-back-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
  }
}
/* ========== END UNIFIED BACK BUTTON ========== */