:root {
    --bg: #0f1724;
    --card: #0b1220;
    --accent: #ffd166;
    --muted: #9aa7b2;
    --good: #16a34a;
    --bad: #ef4444;
    --scramble-color: #fff; /* default dark theme = white */
}

font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,209,102,0.06), transparent 5%), radial-gradient(900px 400px at 90% 90%, rgba(99,102,241,0.04), transparent 5%), var(--bg);
    color: #e6eef6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wrap {
    width: 100%;
    max-width: 920px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px
}

h1 {
    margin: 0;
    font-size: 20px;
    letter-spacing: 0.6px
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(2,6,23,0.6)
}

.game-top {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px
}

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

.stat {
    background: rgba(255,255,255,0.02);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted)
}

    .stat strong {
        display: block;
        color: #fff;
        font-size: 16px
    }

.board {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 14px
}

@media (max-width:820px) {
    .board {
        grid-template-columns: 1fr
    }

    .right-col {
        order: 2
    }
}

.left-col {
    padding: 12px
}

.prompt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start
}

.round-info {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%
}

.big-timer {
    font-weight: 700;
    font-size: 22px;
    color: var(--accent);
    min-width: 86px;
    text-align: center
}

.word-box {
    width: 100%;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.scramble {
    font-size: 28px;
    letter-spacing: 6px;
    font-weight: 700;
    color: var(--scramble-color);
}



.input-row {
    display: flex;
    gap: 8px;
    width: 100%
}

input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    background: transparent;
    color: #fff;
    font-size: 16px
}

button {
    border: 0;
    background: var(--accent);
    color: #0b1220;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer
}

    button.secondary {
        background: transparent;
        color: var(--accent);
        border: 1px solid rgba(255,209,102,0.12)
    }

.right-col {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.hint {
    font-size: 13px;
    color: var(--muted)
}

.message {
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 700;
    text-align: center
}

.msg-good {
    background: linear-gradient(90deg,#083d18,#0e8a3b);
    color: white
}

.msg-bad {
    background: linear-gradient(90deg,#3a0b0b,#ef4444);
    color: white
}

.highscore {
    background: rgba(255,255,255,0.02);
    padding: 12px;
    border-radius: 10px
}

.list {
    max-height: 180px;
    overflow: auto;
    margin-top: 8px
}

    .list li {
        display: flex;
        justify-content: space-between;
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 14px
    }

footer {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 13px
}

.tiny {
    font-size: 12px;
    color: var(--muted)
}

.progress {
    height: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 999px;
    overflow: hidden
}

    .progress > i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,#ffd166,#fca311);
        width: 0%
    }

.kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #061226;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--muted)
}

/* ===========================
   Splash Screen Styles
   =========================== */
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease;
}

    #splashScreen.hidden {
        opacity: 0;
        pointer-events: none;
    }

#splashVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#skipButton {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    display: none; /* hidden until 3s */
    z-index: 10000;
}

#gameContainer {
    opacity: 0;
    transition: opacity 1s ease;
}

    #gameContainer.visible {
        opacity: 1;
    }
/* ===========================
   Main Menu Styles
   =========================== */
#menuScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.8s ease;
}

    #menuScreen.visible {
        opacity: 1;
    }

.menu-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    padding: 32px 28px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    text-align: center;
    width: 100%;
    max-width: 420px;
}

.menu-title {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--accent);
}

#playerNameInput {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: #fff;
    font-size: 16px;
    text-align: center;
}

#menuScreen button {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 12px;
    font-size: 16px;
}

.menu-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.icon-btn {
    width: 45px !important;
    height: 45px !important;
    font-size: 1rem !important;
}


/* ===========================
   Modal Styles
   =========================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

    .modal-overlay.visible {
        opacity: 1;
    }

.modal-card {
    background: var(--card);
    padding: 20px;
    border-radius: 14px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .modal-header h2 {
        margin: 0;
        font-size: 20px;
        color: var(--accent);
    }


/* About Game Dialog */
/* About Dialog styled like Active Players list */
.about-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    z-index: 10000; /* make sure it's above menu (9000) */
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: none;
    flex-direction: column;
}


.about-list {
    list-style: none;
    margin: 15px 0;
    padding: 0;
    font-family: monospace;
    flex: 1;
    overflow-y: auto;
    max-height: 60vh;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #FFD700 rgba(255, 255, 255, 0.1);
}

    .about-list li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        gap: 10px;
    }

        .about-list li.about-header {
            font-weight: bold;
            color: #FFD700;
            border-bottom: 2px solid #FFD700;
            position: sticky;
            top: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 5;
        }

    .about-list .label {
        flex: 1;
        text-align: left;
        color: #FFD700;
    }

    .about-list .value {
        flex: 2;
        text-align: right;
        color: #FFFFFF;
    }

    /* WebKit scrollbar styling */
    .about-list::-webkit-scrollbar {
        width: 8px;
    }

    .about-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }

    .about-list::-webkit-scrollbar-thumb {
        background-color: #FFD700;
        border-radius: 4px;
    }

.about-dialog.visible {
    display: flex; /* or block, depending on your layout */
    flex-direction: column;
}

/* ===========================
   Name Entry Dialog
   =========================== */
.name-entry {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    padding: 28px 24px;
    border-radius: 15px;
    text-align: center;
    z-index: 200;
    width: 90%;
    max-width: 420px;
    display: none; /* hidden by default */
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    color: #fff;
}

.name-entry-title {
    margin: 0 0 10px;
    font-size: 20px;
    color: var(--accent);
}

#playerNameInput,
#playerCountrySelect {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(20,20,20,0.95); /* darker background */
    color: #fff;
    font-size: 16px;
    text-align: center;
    appearance: none; /* remove default arrow styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

    /* dropdown option list styling (works on most modern browsers) */
    #playerCountrySelect option {
        background: #0b1220;
        color: #fff;
    }


.menu-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

    .menu-buttons .close-btn {
        padding: 10px 16px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        background: var(--accent);
        color: #000;
        transition: background 0.2s;
    }

        .menu-buttons .close-btn:hover {
            background: #fcbf49;
        }


.menu-bottom-footer {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

    .menu-bottom-footer .explore-link {
        display: block;
        margin-top: 6px;
        color: var(--accent);
        text-decoration: none;
        font-weight: 600;
    }

        .menu-bottom-footer .explore-link:hover {
            text-decoration: underline;
        }

/* Share Dialog (inherits same base styles as about-dialog) */
.share-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    z-index: 200;
    width: 90%;
    max-width: 500px;
    display: none;
    flex-direction: column;
}

    .share-dialog.visible {
        display: flex;
        flex-direction: column;
    }

.share-content p {
    margin: 8px 0;
    text-align: left;
    font-size: 14px;
}

#shareLink {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    margin: 12px 0;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: #fff;
    text-align: center;
    font-size: 14px;
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.dialog-box {
    background: var(--card);
    padding: 20px;
    border-radius: 14px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    text-align: center;
}

/* Unified modal overlay + card (place near other modal CSS) */
.modal-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    z-index: 20000; /* high so it appears above #menuScreen */
    opacity: 0; /* start invisible */
    pointer-events: none; /* block clicks when hidden */
    transition: opacity 0.25s ease;
}

    /* Toggle this class to fade in/out and enable pointer events */
    .modal-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

.modal-card {
    background: var(--card);
    padding: 20px;
    border-radius: 12px;
    max-width: 520px;
    width: 92%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    text-align: left;
    transform: translateY(0);
    /* optional small scale/translate animation if you like:
    transform: translateY(-6px);
    transition: transform 180ms ease;
    */
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
    justify-content: center;
}

    .share-buttons .btn {
        flex: 1 1 45%;
        padding: 10px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        color: #fff;
        transition: 0.3s;
    }

/* Platform-specific styles */
.btn.copy {
    background: #666;
}

    .btn.copy:hover {
        background: #444;
    }

.btn.facebook {
    background: #1877f2;
}

    .btn.facebook:hover {
        background: #145dbf;
    }

.btn.whatsapp {
    background: #25d366;
}

    .btn.whatsapp:hover {
        background: #1da851;
    }

.btn.x {
    background: #000;
}

    .btn.x:hover {
        background: #333;
    }

.btn.instagram {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

    .btn.instagram:hover {
        opacity: 0.9;
    }

.btn.tiktok {
    background: #010101;
    position: relative;
}

    .btn.tiktok::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border-radius: 6px;
        background: linear-gradient(45deg, #25f4ee, #fe2c55);
        z-index: -1;
    }

    .btn.tiktok:hover {
        opacity: 0.9;
    }



/* Leaderboard Styling */
.scores-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    max-height: 300px;
    overflow-y: auto;
}

    .scores-list li {
        display: flex;
        justify-content: space-between;
        padding: 6px 10px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

        .scores-list li:nth-child(1) {
            font-weight: bold;
            color: gold;
        }

        .scores-list li:nth-child(2) {
            font-weight: bold;
            color: silver;
        }

        .scores-list li:nth-child(3) {
            font-weight: bold;
            color: #cd7f32;
        }



.leaderboard {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .leaderboard th, .leaderboard td {
        border: 1px solid #ccc;
        padding: 6px 8px;
        text-align: left;
    }

    .leaderboard thead {
        background: #f5f5f5;
        position: sticky;
        top: 0;
    }

/* Sidebar leaderboard */
#highScoresList .leaderboard {
    font-size: 12px;
}

#highScoresList td,
#highScoresList th {
    padding: 4px 6px;
}


#gameOverDialog .modal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#categoryDialog .dialog-footer {
    margin-top: 20px;
    text-align: right;
}


/* === Speller Bee Leaderboard Styling === */
table.leaderboard {
    width: 100%;
    border-collapse: collapse;
    font-family: monospace;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

    /* Header row */
    table.leaderboard thead th {
        background: #FF4500; /* orange header */
        color: #FFD700; /* gold text */
        font-weight: bold;
        padding: 10px;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 2;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    /* Data rows */
    table.leaderboard tbody td {
        padding: 8px 10px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        font-size: 0.9rem;
    }

        /* First column: Player */
        table.leaderboard tbody td:first-child {
            text-align: left;
            font-weight: bold;
            color: #FFD700;
        }

        /* Score + Round aligned right */
        table.leaderboard tbody td:nth-child(4),
        table.leaderboard tbody td:nth-child(5) {
            text-align: right;
        }

    /* Hover highlight */
    table.leaderboard tbody tr:hover {
        background: rgba(255, 215, 0, 0.1);
    }

/* Scrollable container */
#rankingDialog .modal-card > div {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #FFD700 rgba(255, 255, 255, 0.1);
}

    #rankingDialog .modal-card > div::-webkit-scrollbar {
        width: 8px;
    }

    #rankingDialog .modal-card > div::-webkit-scrollbar-thumb {
        background-color: #FFD700;
        border-radius: 4px;
    }

    #rankingDialog .modal-card > div::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
    }

.scores-list {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    font-family: monospace;
}

    .scores-list li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

        .scores-list li.scores-header {
            font-weight: bold;
            color: #FFD700;
            border-bottom: 2px solid #FFD700;
            position: sticky;
            top: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 5;
        }

    .scores-list .col {
        flex: 1;
        text-align: center;
    }

        .scores-list .col.name {
            text-align: left;
            color: #FFD700;
        }

        .scores-list .col.level {
            text-align: right;
        }
    /* Highlight the current player row in Global Ranking */
    .scores-list li.highlight-row {
        background: rgba(255, 215, 0, 0.15); /* soft gold background */
        font-weight: bold;
        color: #FFD700;
        border-left: 4px solid #FF8C00; /* orange accent */
    }
/* Scrollable dialog body */
.dialog-scroll {
    max-height: 60vh; /* adjust as needed */
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 6px; /* space for scrollbar */
}

/* Always keep footer visible */
.modal-card {
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* prevent card from growing offscreen */
}

/* ===========================
   Modal Styles
   =========================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

    .modal-overlay.visible {
        opacity: 1;
    }

.modal-card {
    background: var(--card);
    padding: 20px;
    border-radius: 14px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .modal-header h2 {
        margin: 0;
        font-size: 20px;
        color: var(--accent);
    }





/* Normal links */
a {
    color: var(--primary, #0066cc);
    text-decoration: none;
    transition: color 0.2s ease;
}

    /* Hover effect */
    a:hover {
        text-decoration: underline;
    }

    /* Clicked / visited links = yellow accent */
    a:visited {
        color: var(--accent, #FFD700); /* bright gold/yellow */
    }


.menu-wrap {
    position: relative; /* make it a positioning container */
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    padding: 32px 28px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    text-align: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}


/* Make menu-wrap and game card containers relative */
.menu-wrap,
.card {
    position: relative;
}

/* Bee mascot peeping */
.bee-logo {
    position: absolute;
    top: -65px; /* peeps above */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    pointer-events: none;
    animation: beeBounce 3s ease-in-out infinite;
    z-index: 20; /* above card UI but below dialogs */
}

    .bee-logo img {
        width: 100%;
        height: auto;
        display: block;
        /* animation: beeFlap 1.5s ease-in-out infinite;*/
        animation: beeBounce 3s ease-in-out infinite;
    }



/* Game title with mascot */
.game-title {
    display: flex;
    align-items: center;
    gap: 6px; /* tighter spacing */
    font-size: 22px;
    color: var(--accent);
    margin: 0;
}

    /* Smaller bee for game header */
    .game-title .bee-inline {
        height: 60px; /* reduced size */
        width: auto;
        display: inline-block;
        vertical-align: middle;
    }

/* Game canvas mascot */

.bee-game img {
    width: 100%;
    height: auto;
    display: block;
}

/* Game canvas mascot */
.bee-game {
    position: absolute;
    top: -55px; /* distance above the card */
    left: 50%; /* center horizontally */
    transform: translateX(-50%);
    width: 100px; /* adjust size for game */
    pointer-events: none;
    z-index: 25;
}

/* Wraps card + store buttons */
.menu-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* center both card and buttons */
    gap: 20px; /* space between card and buttons */
}

.store-buttons {
    margin-top: 20px; /* space below menu card */
    display: flex;
    justify-content: center;
    gap: 20px;
}

    .store-buttons a {
        display: inline-block;
        line-height: 0;
    }

    .store-buttons .store-btn {
        height: 50px;
        width: auto;
        object-fit: contain;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

        .store-buttons .store-btn:hover {
            transform: scale(1.05);
        }

.category-highlight {
    font-weight: bold;
    color: #FFD700; /* golden yellow (adjust to your theme) */
}

#voiceSelect {
    appearance: none; /* remove default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 40px; /* same size as your toggle button */
    height: 40px;
    background: #222; /* match your button background */
    color: #FFD700; /* theme yellow */
    font-size: 1rem;
    font-weight: bold;
    border: 2px solid #FFD700;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

    /* Show ▼ arrow */
    #voiceSelect::after {
        content: "▼";
        color: #FFD700;
        pointer-events: none;
    }

    /* Make sure dropdown expands when opened */
    #voiceSelect option {
        background: #111;
        color: #FFD700;
        padding: 8px;
    }

    #voiceSelect option {
        max-width: 250px; /* cap menu width */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
/* Container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Toggle button (same size as mute button) */
.dropdown-toggle {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #FFD700;
    background: #222;
    color: #FFD700;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

/* Menu panel */
.dropdown-menu {
    display: none; /* hidden by default */
    position: absolute;
    top: 45px; /* below the button */
    right: 0;
    background: #111;
    border: 2px solid #FFD700;
    border-radius: 8px;
    min-width: 220px;
    max-height: 250px; /* scroll on mobile */
    overflow-y: auto;
    z-index: 999;
}

    /* Menu items */
    .dropdown-menu li {
        list-style: none;
        padding: 10px;
        color: #FFD700;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .dropdown-menu li:hover,
        .dropdown-menu li.active {
            background: #FFD700;
            color: #111;
        }

/* Mobile: make the tap area bigger */
@media (max-width: 600px) {
    .dropdown-menu {
        min-width: 100%;
        font-size: 1rem;
    }
}
/* Container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Toggle button — match your toggle theme */
.dropdown-toggle {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #FFD700; /* theme yellow */
    background: #222; /* same dark background */
    color: #FFD700; /* yellow icon */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

    /* Same hover/active feedback as your buttons */
    .dropdown-toggle:hover {
        background: #333;
    }

    .dropdown-toggle:active {
        transform: scale(0.95);
    }

/* Dropdown menu styling */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    background: #111;
    border: 2px solid #FFD700;
    border-radius: 8px;
    min-width: 220px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

    /* Menu items */
    .dropdown-menu li {
        list-style: none;
        padding: 10px;
        color: #FFD700;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .dropdown-menu li:hover,
        .dropdown-menu li.active {
            background: var(--muted);
            color: #111;
        }
/* Style for the Play Now button (leave it as is) */
.play-now-btn {
    background: #FFD700; /* example — whatever your Play button’s color is */
    color: #111;
    border: 2px solid #FFD700;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

/* Other menu buttons (ranking, how to play, etc.) */
.menu button:not(.play-now-btn) {
    background: #222; /* dark background */
    color: #FFD700; /* yellow text */
    border: 2px solid #FFD700;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}

    /* Hover effect for all menu buttons except Play Now */
    .menu button:not(.play-now-btn):hover {
        background: #FFD700; /* same fill as Play button */
        color: #111; /* dark text for contrast */
    }

    /* Active (press) feedback */
    .menu button:not(.play-now-btn):active {
        transform: scale(0.95);
        background: #e6c200; /* slightly darker yellow */
    }
/* -------------------------
   Menu button hover: use Play Now's fill
   ------------------------- */

/* Ensure Play Now keeps its intended style */
#playNowBtn {
    background: var(--accent); /* Play button color */
    color: #0b1220; /* dark text like other buttons */
    border: 2px solid var(--accent);
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
}

/* Make sure other menu buttons look like secondary by default */
.menu-wrap button:not(#playNowBtn) {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(255,209,102,0.12);
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
}

    /* Hover / focus for menu buttons except Play Now:
   fill with the same color as the Play Now button */
    .menu-wrap button:not(#playNowBtn):hover,
    .menu-wrap button:not(#playNowBtn):focus,
    .menu-wrap button.secondary:not(#playNowBtn):hover,
    .menu-wrap button.secondary:not(#playNowBtn):focus {
        background: var(--accent);
        color: #0b1220;
        border-color: var(--accent);
        transform: translateY(-1px);
    }

    /* Active (press) state for consistent feedback */
    .menu-wrap button:not(#playNowBtn):active {
        transform: scale(0.98);
        background: color-mix(in srgb, var(--accent) 80%, #000 20%); /* darker yellow if supported */
    }

    /* Accessibility: keyboard focus ring */
    .menu-wrap button:not(#playNowBtn):focus {
        outline: 3px solid rgba(255,209,102,0.18);
        outline-offset: 2px;
    }

/* Floating score feedback */
.floating-score {
    position: absolute;
    font-size: 1.4rem;
    font-weight: bold;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 9999;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

    .floating-score.good {
        color: #4CAF50; /* green for correct */
    }

    .floating-score.bad {
        color: #FF5252; /* red for wrong/deduction */
    }

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1);
    }
}
/* Timer box */
#timer {
    display: inline-flex; /* easier vertical centering */
    align-items: center; /* center text vertically */
    justify-content: center; /* center text horizontally */

    min-width: 60px; /* ensures a little padding for numbers */
    min-height: 53px; /* ✅ adjustable height */
    padding: 4px 10px; /* tweak padding around text */

    background: rgba(0, 0, 0, 0.35); /* theme style */
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.2; /* controls text spacing inside */
}



/* Scrollable Category List */
.category-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    max-height: 300px; /* ✅ Scroll if content exceeds this height */
    overflow-y: auto;
    padding-right: 6px;
}

    .category-list::-webkit-scrollbar {
        width: 8px;
    }

    .category-list::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
        border-radius: 4px;
    }

    .category-list::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 4px;
    }

#changeCategoryBtn {
    margin-right: 8px;
}

#confirmChangeCategoryDialog .modal-card p {
    margin: 16px 0;
    font-size: 15px;
    color: #e6eef6;
}




/* Make How To Play scroll area match Category dialog scrollbar */
#howToDialog .dialog-scroll,
.dialog-scroll {
    max-height: 300px; /* adjust if needed */
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255,255,255,0.05);
}

    #howToDialog .dialog-scroll::-webkit-scrollbar,
    .dialog-scroll::-webkit-scrollbar {
        width: 8px;
    }

    #howToDialog .dialog-scroll::-webkit-scrollbar-track,
    .dialog-scroll::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
        border-radius: 4px;
    }

    #howToDialog .dialog-scroll::-webkit-scrollbar-thumb,
    .dialog-scroll::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 4px;
    }
/* ===========================
   Theme System
   =========================== */
:root {
    /* Dark theme (default) */
    --bg: #0f1724;
    --card: #0b1220;
    --accent: #ffd166;
    --muted: #9aa7b2;
    --good: #16a34a;
    --bad: #ef4444;
    --text-primary: #e6eef6;
    --text-secondary: #9aa7b2;
    --border: rgba(255,255,255,0.04);
    --shadow: rgba(2,6,23,0.6);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

[data-theme="light"] {
    /* Light theme */
    --bg: #f8fafc;
    --card: #ffffff;
    --accent: #f59e0b;
    --muted: #64748b;
    --good: #059669;
    --bad: #dc2626;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --border: rgba(0,0,0,0.08);
    --shadow: rgba(0,0,0,0.1);
}

/* Apply theme colors throughout the CSS */
body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255,209,102,0.06), transparent 5%), radial-gradient(900px 400px at 90% 90%, rgba(99,102,241,0.04), transparent 5%), var(--bg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 20px var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

[data-theme="light"] .card {
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
}

.stat {
    background: rgba(255,255,255,0.02);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted);
    border: 1px solid var(--border);
}

[data-theme="light"] .stat {
    background: rgba(0,0,0,0.02);
}

.stat strong {
    display: block;
    color: var(--text-primary);
    font-size: 16px;
}

.word-box {
    width: 100%;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border);
}

[data-theme="light"] .word-box {
    background: rgba(0,0,0,0.02);
}

input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.3s ease;
}

[data-theme="light"] input[type="text"] {
    background: rgba(0,0,0,0.02);
}

button {
    border: 0;
    background: var(--accent);
    color: var(--bg);
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

    button.secondary {
        background: transparent;
        color: var(--accent);
        border: 1px solid var(--accent);
    }

[data-theme="light"] button.secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* Modal themes */
.modal-card {
    background: var(--card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.menu-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid var(--border);
}

[data-theme="light"] .menu-wrap {
    background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
}

/* Highscore list */
.highscore {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
}

[data-theme="light"] .highscore {
    background: rgba(0,0,0,0.02);
}

/* Progress bar */
.progress {
    height: 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 999px;
    overflow: hidden;
}

[data-theme="light"] .progress {
    background: rgba(0,0,0,0.03);
}

/* Keyboard styling */
.kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--card);
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--muted);
    border: 1px solid var(--border);
}

/* Theme toggle button states */
#themeToggleBtn {
    transition: all 0.3s ease;
}

[data-theme="dark"] #themeToggleBtn::before {
    content: "";
}

[data-theme="light"] #themeToggleBtn::before {
    content: "";
}

/* Floating score feedback colors */
.floating-score.good {
    color: var(--good);
}

.floating-score.bad {
    color: var(--bad);
}

/* Message colors */
.msg-good {
    background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 70%, black 100%));
    color: white;
}

.msg-bad {
    background: linear-gradient(90deg, var(--bad), color-mix(in srgb, var(--bad) 70%, black 100%));
    color: white;
}

/* Scrollbar styling that works with both themes */
.category-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

[data-theme="light"] .category-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}

/* Confirm Change Category Dialog - Light Theme Text Color */
[data-theme="light"] #confirmChangeCategoryDialog .modal-card p {
    color: #000000 !important; /* Force black text for better readability */
    font-weight: 500; /* Slightly bolder for better contrast */
}

[data-theme="light"] .modal-card {
    color: #000000; /* Make all modal text black in light theme */
}

    [data-theme="light"] .modal-card h2 {
        color: var(--accent); /* Keep accent color for headings */
    }

/* Ensure other dialog text is also black in light theme */
[data-theme="light"] #quitDialog .modal-card p,
[data-theme="light"] #gameOverDialog .modal-card p,
[data-theme="light"] #championDialog .modal-card p,
[data-theme="light"] #howToDialog .modal-card,
[data-theme="light"] #aboutDialog .modal-card,
[data-theme="light"] #rankingDialog .modal-card,
[data-theme="light"] #shareDialog .modal-card {
    color: #000000;
}

[data-theme="light"] .modal-card .tiny,
[data-theme="light"] .modal-card .hint {
    color: #666666; /* Slightly lighter for secondary text */
}


.category-list::-webkit-scrollbar-thumb {
    background: var(--accent);
}

/* Links */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

    a:hover {
        text-decoration: underline;
    }

    a:visited {
        color: var(--accent);
    }

/* Bee animation remains the same */
.bee-logo {
    position: absolute;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    pointer-events: none;
    animation: beeBounce 3s ease-in-out infinite;
    z-index: 20;
}

/*@keyframes beeBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}*/
.card {
    margin-top: 30px; /* Push the card down from its container */
}

/* Timer text color for light theme */
[data-theme="light"] #timer {
    color: #000000 !important;
    font-weight: bold;
}

/* Ensure good contrast in both themes */
#timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 53px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--accent); /* Default color for dark theme */
}

[data-theme="light"] #timer {
    background: rgba(0, 0, 0, 0.1); /* Lighter background for light theme */
    color: #000000 !important; /* Black text for light theme */
}

/* Style the category variable with deep yellow */
.category-highlight {
    color: #FF8C00 !important; /* Deep orange-yellow */
    font-weight: bold;
}

/* Ensure it works in both themes */
[data-theme="dark"] .category-highlight {
    color: #FF8C00 !important;
}

[data-theme="light"] .category-highlight {
    color: #FF8C00 !important;
}

/* Make the hidden word dark */
.scramble {
    font-size: 28px;
    letter-spacing: 6px;
    font-weight: 700;
    color: #2D3748 !important; /* Dark gray color */
}

/* Theme support - keep dark in both themes */
[data-theme="dark"] .scramble {
    color: #2D3748 !important; /* Dark gray for dark theme */
}

[data-theme="light"] .scramble {
    color: #2D3748 !important; /* Dark gray for light theme */
}

/* Optional: Make it even darker if needed */
.scramble {
    color: #1A202C !important; /* Even darker gray */
}

/* Or use pure black */
.scramble {
    color: #000000 !important; /* Pure black */
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

    .theme-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.4s;
    }

input:checked + .slider {
    background-color: var(--accent);
}

    input:checked + .slider:before {
        transform: translateX(22px);
    }


.menu-wrap {
    margin-top: 50px; /* adjust px as needed */
}

.menu-container {
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center; /* center vertically */
    width: 100%;
    height: 100%;
}

.menu-wrap,
.store-buttons {
    width: 75%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
/* Quick override for About modal text colors */
[data-theme="light"] #aboutDialog .modal-card .about-list .label,
[data-theme="light"] #aboutDialog .modal-card .about-list .value {
    color: #000 !important;
}

[data-theme="dark"] #aboutDialog .modal-card .about-list .label,
[data-theme="dark"] #aboutDialog .modal-card .about-list .value {
    color: #fff !important;
}

/* header background for light theme */
[data-theme="light"] #aboutDialog .modal-card .about-list li.about-header {
    background: var(--card) !important;
}

#playerNameInput,
#playerCountrySelect {
    width: 100%; /* both span full width of modal-card */
    box-sizing: border-box; /* ensures padding/borders don’t add extra width */
}

[data-theme="light"] #shareUrl {
    color: #333; /* dark grey in light mode */
}

[data-theme="dark"] #shareUrl {
    color: #fff; /* white in dark mode (default) */
}
/* --- Share dialog alignment + url color fixes --- */
/* Limit both the share input and the buttons to the same inner width and center them */
.share-buttons,
#shareLink {
    width: 100%;
    max-width: 420px; /* change this value if you want the group wider/narrower */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

    /* Make each share button take about half the inner width and honor padding/gap */
    .share-buttons .btn {
        flex: 1 1 48%; /* uses two buttons per row with a small gap */
        box-sizing: border-box;
    }

/* Share URL input: grey background, left-aligned text, bounded width */
#shareLink {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 12px auto;
    background: #e9ecef; /* neutral light-grey background */
    color: #374151; /* dark-gray URL text for readability */
    border: 1px solid rgba(0,0,0,0.08);
    text-align: left; /* left-align URL text (better UX for links) */
    font-size: 14px;
    box-shadow: none;
}

/* Dark theme: keep grey-ish input but white text for contrast */
[data-theme="dark"] #shareLink {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
}

/* Keep share buttons centered and prevent them from stretching awkwardly */
.share-dialog .share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
}


/* Make gameplay + controls align with score card width */
.left-col .card,
.right-col .card {
    max-width: 100%; /* respect the grid column */
    box-sizing: border-box;
}

/* Center canvas inside the gameplay card so it aligns with sidebar */
#gameCanvas {
    display: block;
    margin: 0 auto; /* horizontally centered */
}

/* Optional: give the left column a max width so both sides align */
.left-col {
    display: flex;
    flex-direction: column;
    align-items: center; /* center the gameplay & controls */
}

    .left-col .card {
        width: 100%;
        max-width: 320px; /* match the score card width */
    }
    /* Default: flexible but aligned */
    .left-col .card,
    .right-col .card {
        width: 100%;
        max-width: 95%; /* keep some breathing room */
        margin: 0 auto;
        box-sizing: border-box;
    }

/* Gameplay canvas follows its card */
#gameCanvas {
    width: 100%; /* responsive width */
    height: auto; /* keep aspect ratio */
    display: block;
    margin: 0 auto;
}

/* Tablet and up */
@media (min-width: 768px) {
    .left-col .card,
    .right-col .card,
    #gameCanvas {
        max-width: 420px; /* give more space on tablets */
    }
}

/* Desktop and up */
@media (min-width: 1200px) {
    .left-col .card,
    .right-col .card,
    #gameCanvas {
        max-width: 600px; /* wider gameplay, sidebar grows with it */
    }
}


/* Game Over Stats */
.stats-box {
    margin: 16px auto;
    padding: 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.6);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    max-width: 500px;
}

    .stats-box table {
        width: 100%;
        border-collapse: collapse;
    }

    .stats-box th,
    .stats-box td {
        padding: 6px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
/* 📊 Stats Table Styling */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.9rem;
}

    .stats-table th {
        text-align: left;
        padding: 6px 8px;
        font-weight: 600;
    }

    .stats-table td {
        text-align: right;
        padding: 6px 8px;
    }

.stats-box {
    color: var(--text); /* ✅ follow theme text color */
}

/* Light theme: use dark text */
[data-theme="light"] .stats-box {
    color: #000;
}

/* Dark theme: use white text */
[data-theme="dark"] .stats-box {
    color: #fff;
}

/* Optional row borders */
.stats-table tr:not(:last-child) {
    border-bottom: 1px solid rgba(128,128,128,0.3);
}


/* Game Over Dialog Button Layout */
#gameOverDialog .modal-card > div:last-child {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

#shareGameOverBtn {
    order: 1; /* Make it appear first */
}

#restartBtn {
    order: 2; /* Play Again second */
}

#menuBtn {
    order: 3; /* Main Menu third */
}

#highScoresContainer {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 6px;
}

    #highScoresContainer .stats-box {
        margin-bottom: 16px;
        background: rgba(255,255,255,0.05);
        padding: 10px;
        border-radius: 10px;
    }

    #highScoresContainer table.stats-table {
        width: 100%;
        border-collapse: collapse;
        font-family: monospace;
        color: #fff;
    }

        #highScoresContainer table.stats-table th,
        #highScoresContainer table.stats-table td {
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding: 6px;
            font-size: 13px;
        }


.rank-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: bold;
    color: #FFD700; /* gold */
    text-align: left;
}


/* Default (dark theme) already works: white text on dark background */

/* Light/white theme overrides for stats tables in all dialogs */
:root[data-theme="light"] #highScoresContainer .stats-box,
:root[data-theme="light"] #championStats .stats-box,
:root[data-theme="light"] #gameOverStats .stats-box {
    background: rgba(0, 0, 0, 0.05);
    color: #222; /* Dark text */
}

:root[data-theme="light"] #highScoresContainer table.stats-table,
:root[data-theme="light"] #championStats table.stats-table,
:root[data-theme="light"] #gameOverStats table.stats-table {
    color: #222;
}

    :root[data-theme="light"] #highScoresContainer table.stats-table th,
    :root[data-theme="light"] #highScoresContainer table.stats-table td,
    :root[data-theme="light"] #championStats table.stats-table th,
    :root[data-theme="light"] #championStats table.stats-table td,
    :root[data-theme="light"] #gameOverStats table.stats-table th,
    :root[data-theme="light"] #gameOverStats table.stats-table td {
        border-bottom: 1px solid rgba(0,0,0,0.2);
    }

.stats-box {
    margin-bottom: 16px;
    background: rgba(255,255,255,0.05); /* dark theme */
    padding: 10px;
    border-radius: 10px;
}

/* Light theme override */
:root[data-theme="light"] .stats-box {
    background: rgba(0, 0, 0, 0.05);
    color: #222;
}

#feedbackForm input,
#feedbackForm select,
#feedbackForm textarea {
    width: 100%;
    padding: 6px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

#feedbackForm textarea {
    resize: vertical;
}

/* Make all feedback form controls equal width */
#feedbackForm input[type="text"],
#feedbackForm input[type="email"],
#feedbackForm input[type="hidden"],
#feedbackForm select,
#feedbackForm textarea {
    width: 100%;
    box-sizing: border-box; /* include padding/border in width */
}
/* 🌍 Global Ranking Dialog Styling */
#rankingDialog.modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Dialog container */
#rankingDialog .modal-card {
    background: var(--card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    box-shadow: 0 6px 20px var(--shadow);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease-in-out;
}

/* Scroll list area */
#rankingDialog .list {
    max-height: 300px;
    overflow-y: auto;
    margin: 12px 0;
    padding: 6px 8px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
}

    /* WebKit scrollbars */
    #rankingDialog .list::-webkit-scrollbar {
        width: 8px;
    }

    #rankingDialog .list::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 10px;
    }

    #rankingDialog .list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Hover fade effect for scrollbar thumb */
    #rankingDialog .list::-webkit-scrollbar-thumb {
        opacity: 0.7;
        transition: opacity 0.2s ease-in-out;
    }

    #rankingDialog .list:hover::-webkit-scrollbar-thumb {
        opacity: 1;
    }

/* Table / List entries */
#rankingDialog .scores-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

    /* Header row */
    #rankingDialog .scores-list li.scores-header {
        position: sticky;
        top: 0;
        background: var(--card);
        color: var(--accent);
        font-weight: bold;
        border-bottom: 2px solid var(--accent);
    }

    /* Highlight the current player row */
    #rankingDialog .scores-list li.highlight-row {
        background: rgba(255, 215, 0, 0.15);
        font-weight: bold;
        color: var(--accent);
        border-left: 4px solid var(--accent);
    }

/* ✅ Light theme override for ranking dialog */
[data-theme="light"] #rankingDialog .modal-card {
    background: var(--card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

[data-theme="light"] #rankingDialog .scores-list li.scores-header {
    background: var(--card);
    color: var(--accent);
}

[data-theme="light"] #rankingDialog .scores-list li {
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}



/* Optional: Firefox scrollbar */
#rankingDialog .list {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255, 255, 255, 0.1);
}

    #rankingDialog .list::-webkit-scrollbar-thumb {
        opacity: 0.6;
        transition: opacity 0.2s ease-in-out;
    }

    #rankingDialog .list:hover::-webkit-scrollbar-thumb {
        opacity: 1;
    }

/* Ranking list: show scrollbar only when >5 items */
#rankingDialog .list {
    overflow-y: auto;
    /* default fallback height for 5 items (in case JS not run) */
    max-height: 260px; /* safe default ~ 5 * 52px */
    margin: 12px 0;
    padding: 6px 8px;
    box-sizing: border-box;
}

/* 🌍 Global Ranking list uses Highscore scrollbar styling */
#rankingDialog .list {
    overflow-y: auto;
    margin: 12px 0;
    padding: 6px 8px;
    box-sizing: border-box;
}

    /* WebKit (Chrome, Edge, Safari) */
    #rankingDialog .list::-webkit-scrollbar {
        width: 8px;
    }

    #rankingDialog .list::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 10px;
    }

    #rankingDialog .list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
    }

/* Firefox */
#rankingDialog .list {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255, 255, 255, 0.08);
}

    /* Optional: subtle fade on hover */
    #rankingDialog .list::-webkit-scrollbar-thumb {
        opacity: 0.7;
        transition: opacity 0.2s ease-in-out;
    }

    #rankingDialog .list:hover::-webkit-scrollbar-thumb {
        opacity: 1;
    }


#activePlayersDialog .modal-card {
    max-width: 600px;
}

#activePlayersList {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: monospace;
    max-height: 60vh;
    overflow-y: auto;
}

    #activePlayersList li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

        #activePlayersList li.scores-header {
            font-weight: bold;
            color: var(--accent);
            border-bottom: 2px solid var(--accent);
        }

    #activePlayersList .col {
        flex: 1;
        text-align: center;
    }
#activePlayersDialog {
    z-index: 20000; /* ensure it’s above any other overlay */
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
/* ===========================
   Active Players Dialog
   =========================== */
.active-players-container {
    max-height: 400px; /* adjust to control visible entries before scroll */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) rgba(255, 255, 255, 0.1);
}

.active-players-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

    .active-players-list li {
        display: flex;
        justify-content: space-between;
        padding: 8px 6px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

        .active-players-list li.scores-header {
            position: sticky;
            top: 0;
            background: rgba(0,0,0,0.9);
            font-weight: bold;
            color: var(--accent);
            border-bottom: 2px solid var(--accent);
        }

.active-footer {
    margin-top: 12px;
    text-align: center;
    color: var(--muted);
}

/* Scrollbar (WebKit) */
.active-players-container::-webkit-scrollbar {
    width: 8px;
}

.active-players-container::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.active-players-container::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 4px;
}