body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
        }

        /* Game Container Styling */
        #game-container {
            display: grid;
            gap: 10px;
            justify-content: center;
            align-content: center;
            grid-template-columns: repeat(6, 50px);
            transition: transform 0.3s ease;
            flex-direction: column;
        }

        /* Box styling */
        .box {
            width: 50px;
            height: 50px;
            border: 2px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
            border-radius: 8px;
            background-color: white;
        }

        .box:hover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }

        .box.correct {
            background-color: #28a745;
            color: white;
            border-color: #28a745;
        }

        .box.present {
            background-color: #ffc107;
            color: black;
            border-color: #ffc107;
        }

        .box.absent {
            background-color: #dc3545;
            color: white;
            border-color: #dc3545;
        }

        .box.hover-highlight {
            border-color: #007bff;
            background-color: #e3f2fd;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
        }

        .box.hint-filled {
            background-color: #17a2b8;
            color: white;
            border-color: #17a2b8;
        }

        .box.user-input {
            background-color: #f8f9fa;
            border-color: #007bff;
        }

        .box.current-row {
            opacity: 1;
        }

        .box.inactive-row {
            opacity: 1;
        }

        /* Shake animation */
        .shake {
            animation: shake 0.6s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        /* Main content container for game and drawing pad */
        #main-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;
        }

        /* Wrapper to center game and keypad vertically and horizontally */
        #game-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            height: 100vh;
        }

        /* Keypad styling */
        #keypad-container {
            display: grid;
            grid-template-columns: repeat(3, 60px);
            gap: 10px;
            margin-top: 20px;
        }

        .keypad-button {
            width: 60px;
            height: 60px;
            border: 2px solid #007bff;
            background-color: #f8f9fa;
            color: #007bff;
            font-size: 18px;
            font-weight: bold;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .keypad-button:hover {
            background-color: #007bff;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
        }

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

        .keypad-button.enter-button {
            grid-column: span 2;
            width: auto;
        }

        .keypad-button.hint-button {
            font-size: 24px;
        }

        .keypad-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

       #difficulty-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.difficulty-button {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #007bff;
    border-radius: 20px;
    background-color: #f8f9fa;
    color: #007bff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.difficulty-button:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.difficulty-button.active {
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}

.difficulty-button.active:hover {
    background-color: #0056b3;
}

        /* ----------------------------------------------------------
   CLEAN, LIGHT THEME SOLUTION MODAL (with dark-mode support)
-----------------------------------------------------------*/

/* Background overlay */
#solution-container {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
    z-index: 2000;

    background: rgba(0, 0, 0, 0.25); /* lighter overlay */
    backdrop-filter: blur(3px);

    animation: fadeInSolution 0.25s ease-out;
}

/* Modal card */
.solution-content {
    width: min(85vw, 420px);
    max-height: 80vh;
    overflow-y: auto;

    background: #ffffff;
    padding: 24px;
    border-radius: 16px;

    border: 2px solid #d8d8d8;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);

    color: #222;
    text-align: center;

    animation: popIn 0.25s ease-out;
}

/* Title */
.solution-content h2 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    color: #031427;
}

/* Pattern panel */
.pattern-display {
    background: #eef4ff;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #cdd9ff;
    margin-bottom: 12px;
}

.pattern-numbers {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #082f59;
}

/* Info block */
.pattern-info {
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    text-align: left;
    color: #444;
}

/* Score */
.score-info {
    background: #eefbf1;
    border: 1px solid #cbeed3;
    padding: 12px;
    border-radius: 10px;
}

.score-info p {
    margin: 4px 0;
    font-weight: bold;
    color: #1c5e2d;
}

/* Next question button */
#next-question-button {
    margin-top: 18px;
    padding: 12px 28px;
    border-radius: 10px;

    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1rem;

    transition: 0.25s ease;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.25);
}

#next-question-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

/* Animations */
@keyframes fadeInSolution {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ----------------------------------------------------------
   DARK MODE VERSION (auto applies when body.dark-mode exists)
-----------------------------------------------------------*/
/* Dark mode overlay */
body.dark-mode #solution-container {
    background: rgba(0, 0, 0, 0.45); /* slightly darker overlay */
    backdrop-filter: blur(3px);
}

/* Dark mode modal card */
body.dark-mode .solution-content {
    background: #1f1f1f;          /* dark neutral background instead of white */
    color: #e0e0e0;               /* light text for readability */
    border: 2px solid #444;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Dark mode title */
body.dark-mode .solution-content h2 {
    color: #cce5ff;               /* lighter blue, stands out on dark background */
}

/* Dark mode pattern panel */
body.dark-mode .pattern-display {
    background: #0d2a44;          /* dark blue instead of light blue */
    border: 1px solid #145080;    /* slightly lighter border for contrast */
}

body.dark-mode .pattern-numbers {
    color: #a6d1ff;               /* light blue text */
}

/* Dark mode info panel */
body.dark-mode .pattern-info {
    background: #2b2b2b;          /* darker gray */
    border: 1px solid #555;
    color: #cccccc;               /* light gray text */
}

/* Dark mode score panel */
body.dark-mode .score-info {
    background: #144d2a;          /* dark green */
    border: 1px solid #1c7a3a;   /* slightly brighter border */
}

body.dark-mode .score-info p {
    color: #a8e6b3;               /* light green text for readability */
}

/* Dark mode button */
body.dark-mode #next-question-button {
    background-color: #1e7e34;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.5);
}

body.dark-mode #next-question-button:hover {
    background-color: #166328;
}


/* Keypad container styles */
#keypad-container {
    display: flex;
    justify-content: center; /* Center keypad horizontally */
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Wrap buttons if necessary */
    max-width: 400px;
    width: 100%;
}

.keypad-button {
    width: 50px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #031427;
    border-radius: 10px;
    background-color: #f8f9fa;
    color: #082f59;
    cursor: pointer;
    transition: all 0.3s ease;
}

.keypad-button:hover {
    background-color: #143354;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.keypad-button.enter-button {
    width: 100px;
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.keypad-button.enter-button:hover {
    background-color: #218838;
    border-color: #218838;
}

.keypad-button.hint-button {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.keypad-button.hint-button:hover {
    background-color: #e0a800;
    border-color: #e0a800;
}

.keypad-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Box Styling */
.box {
    width: 50px;
    height: 50px;
    background-color: #e0e0e0;
    border: 2px solid #b0b0b0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    text-align: center; /* Center text */
    line-height: 50px; /* Match height for proper centering */
    caret-color: black; /* Ensure the caret is visible */
    vertical-align: middle; /* Center vertically */
    transition: all 0.3s ease;
}

/* Guitar Hero-style translucent effect for user input */
.box.user-input {
    background-color: rgba(0, 123, 255, 0.3);
    border-color: rgba(0, 123, 255, 0.6);
    color: #2d527a;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
}

.box.hint-filled {
    background-color: rgba(255, 193, 7, 0.4);
    border-color: rgba(255, 193, 7, 0.7);
    color: #ffc107;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
}

.box.correct {
    background-color: #006164; /* Green */
    border-color: #006164;
    color: white;
}

.box.present {
    background-color: #EDA247; /* Yellow */
    border-color: #EDA247;
    color: white;
}

.box.absent {
    background-color: #DB4325; /* Red */
    border-color: #DB4325;
    color: white;
}

.box.hover-highlight {
    border-color: #007bff;
}


.box.active-row {
    cursor: pointer;
}


.box.inactive-row {
    opacity: 1;
}

/* Shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.box.shake {
    animation: shake 0.6s ease-in-out;
}

/* Highlight the current row */
.active-row {
    transform: scale(1.05); /* Slightly increase the size */
    background-color: #f0f0f0; /* Subtle background color */
    z-index: 1; /* Push it forward */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Highlight the active box with a glowing effect */
.highlight-box {
    border: 2px solid #00f;
    box-shadow: 0 0 10px #00f;
    animation: glow 1s infinite alternate;
}

/* Glow animation */
@keyframes glow {
    from {
        box-shadow: 0 0 5px #00f;
    }
    to {
        box-shadow: 0 0 15px #00f;
    }
}

/* Highlight the focused or hovered box */
.hover-highlight {
    border: 2px solid blue;
    box-shadow: 0 0 10px blue;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.box:focus {
    outline: none; /* Remove outline */
    caret-color: transparent; /* Hide caret while keeping focus functional */
    text-align: center; /* Ensure text is visually centered */
}

.keypad-button {
    width: 60px;
    height: 60px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 8px;
    transition: background-color 0.2s, transform 0.2s;
    font-weight: bolder;
}

.keypad-button:hover {
    background-color: #ddd;
    transform: scale(1.1);
}

.keypad-button:active {
    background-color: #bbb;
}

.keypad-button.enter-button {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
    font-weight: bold;
}

.keypad-button.enter-button:hover {
    background-color: #218838;
    border-color: #218838;
}

.keypad-button.hint-button {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
    font-size: 24px;
}

.keypad-button.hint-button:hover {
    background-color: #e0a800;
    border-color: #e0a800;
}

.keypad-button.hint-button:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    cursor: not-allowed;
}

/* Styling for inactive rows (faded effect) */
.inactive-row {
    opacity: 1; /* Make the row appear faded */
    background-color: #f5f5f5; /* Lighter background color */
    pointer-events: none; /* Disable interaction */
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Keep active row distinct */
.active-row {
    opacity: 1; /* Fully visible */
    background-color: #ffffff; /* Brighter background color */
    transform: scale(1.05); /* Slightly larger */
    z-index: 1; /* Bring to the front */
    transition: transform 0.2s ease, background-color 0.3s ease, opacity 0.3s ease;
}

/* General styles for tool buttons */
.tool-button {
    width: 50px;
    height: 50px;
    font-size: 24px; /* Adjust icon size */
    border: none;
    border-radius: 8px;
    background-color: #e0e0e0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Active button styling (pushed forward) */
.tool-button.active {
    background-color: #007bff;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Hover effect */
.tool-button:hover {
    background-color: #0056b3;
    color: white;
}

/* Inactive button styling (pushed back) */
.tool-button:not(.active) {
    background-color: #cccccc;
    transform: translateY(2px);
}

body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

/* Dark Mode Canvas */
body.dark-mode #drawing-canvas {
    background-color: #121212;
    border: 2px solid white;
}

/* Light Mode Canvas */
#drawing-canvas {
    background-color: #ffffff;
    border: 2px solid black;
}

button#dark-mode-toggle {
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px; /* Make emoji slightly larger */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Header styling */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between; /* Distribute space evenly */
    align-items: center;
    padding: 10px 20px;
    background-color: var(--header-bg, rgb(248, 249, 250));
    border-bottom: 1px solid var(--header-border, #ddd);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Logo and links container */
.header-content {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between logo and links */
}

/* Logo styling */
.logo img {
    height: 40px;
    cursor: pointer;
}


/* Navigation links */
.nav-links {
    display: flex;
    gap: 15px; /* Closer spacing between links */
}

.nav-links a {
    text-decoration: none;
    font-size: 14px;
    color: var(--header-link, #333);
    font-weight: bold;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--header-link-hover, #007bff);
}

/* Right-side controls (dark mode + notes) */
#controls-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between controls */
}

#dark-mode-toggle,
#sound-toggle {
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    line-height: 1;
    color: inherit;
    transition: transform 0.2s ease;
}

#dark-mode-toggle:hover,
#sound-toggle:hover {
    transform: scale(1.2); /* Slightly enlarge on hover */
}

#toggle-calculator {
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    transition: transform 0.2s ease;
}

#dark-mode-toggle:hover,
#toggle-calculator:hover {
    transform: scale(1.2); /* Slightly enlarge on hover */
}

/* Dark mode styles */
body.dark-mode {
    --header-bg: rgb(51, 51, 51);
    --header-border: #444;
    --header-link: #fff;
    --header-link-hover: #00bcd4;
}

#rules-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(5px); /* Blur effect for background */
    display: flex;
    justify-content: center;
    /* Not `align-items: center`. Centring a card taller than the screen
       pushes its top off the edge in both directions — at 320x568 the rules
       card started at y = -4px, putting its × behind the header where it
       could not be clicked. Aligning to the top and letting the overlay
       scroll keeps the whole card reachable; the auto block margins on the
       box below still centre it whenever there IS room. */
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Clear the header, which deliberately sits above this overlay so its
       controls stay usable. */
    padding: 60px 1rem 1rem;
    box-sizing: border-box;
    z-index: 1000; /* High z-index to ensure it's above all other elements */
}

#rules-box { margin-block: auto; }

#rules-box {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 26px 24px 22px;
    border-radius: 18px;
    width: 88%;
    max-width: 460px;
    /* Two shadows: a tight one for the edge and a wide soft one for depth.
       A single hard shadow made the card look pasted onto the page. */
    box-shadow: 0 2px 6px rgba(3, 20, 39, 0.12),
                0 18px 48px rgba(3, 20, 39, 0.28);
    position: relative;
    text-align: center;
}

/* ── Welcome card contents ────────────────────────────────────────────────
   The rules used to be a bulleted list ending in "click the X to start",
   which is a help dialog rather than a front door. Numbered steps carry the
   order, the two modes get a card each so the choice is visible before the
   board is, and a real button beats telling someone to find the ×.
   Scoped to these classes so the multiplayer rules box, still a plain list,
   is unaffected. */
.rules-steps {
    list-style: none;
    margin: 18px 0 16px;
    padding: 0;
    text-align: left;
}

.rules-steps li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 0.92rem;
    line-height: 1.45;
}

.rules-step-num {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #082f59;
    color: #fff;
    font-size: 0.78rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* The hint row is an aside, not a fourth step — an emoji on a plain ground
   rather than another number in the sequence. */
.rules-step-hint {
    background: #fdf3d4;
    font-size: 0.85rem;
}

.rules-steps em { font-style: normal; font-weight: bold; }

.rules-modes {
    display: flex;
    gap: 9px;
    margin: 0 0 10px;
    text-align: left;
}

.rules-mode {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #d8e2ee;
    border-radius: 11px;
    background: #f4f8fc;
}

.rules-mode-name {
    display: block;
    font-weight: bold;
    font-size: 0.86rem;
    margin-bottom: 2px;
}

.rules-mode-sub {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.75;
}

.rules-switch-note {
    font-size: 0.76rem !important;
    opacity: 0.65;
    margin: 0 0 18px !important;
}

#rules-start {
    display: block;
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: 12px;
    background: #082f59;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.08s;
}
#rules-start:hover { background: #0d3f75; }
#rules-start:active { transform: translateY(1px); }
#rules-start:focus-visible { outline: 2px solid #1e5fa8; outline-offset: 2px; }

body.dark-mode .rules-step-num { background: #1e5fa8; }
body.dark-mode .rules-step-hint { background: #4a3f1a; }
body.dark-mode .rules-mode { background: #262626; border-color: #3a3a3a; }
body.dark-mode #rules-start { background: #1e5fa8; }
body.dark-mode #rules-start:hover { background: #2a74c9; }

/* ? button for rules */
#rules-toggle {
    font-size: 40px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
}

#rules-box h2 {
    margin: 0 0 10px;
}

#rules-box p, #rules-box ul {
    margin: 10px 0;
    font-size: 1rem;
}

#rules-box ul {
    list-style-type: disc;
    padding-left: 20px;
    text-align: left;
}

#close-rules {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

#close-rules:hover {
    color: red;
}


#donation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(5px); /* Blur effect for background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* High z-index to ensure it's above all other elements */
}

/* Matches #rules-box: the two overlays are siblings and looked mismatched
   side by side when this one still had the older 10px/flat-shadow styling. */
#donation-box {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 26px 24px 22px;
    border-radius: 18px;
    width: 88%;
    max-width: 460px;
    box-shadow: 0 2px 6px rgba(3, 20, 39, 0.12),
                0 18px 48px rgba(3, 20, 39, 0.28);
    position: relative;
    text-align: center;
}

/* The Buy Me a Coffee link. Built natively rather than with their official
   button asset or widget: the CSP allows img-src 'self' data: only, so an
   image or iframe from their CDN would be blocked outright. */
#bmc-link {
    display: block;
    margin: 18px 0 12px;
    padding: 13px;
    border-radius: 12px;
    background: #ffdd00;          /* Buy Me a Coffee's own yellow */
    color: #111;
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.15s, transform 0.08s;
}
#bmc-link:hover { background: #ffe94d; }
#bmc-link:active { transform: translateY(1px); }
#bmc-link:focus-visible { outline: 2px solid #082f59; outline-offset: 2px; }

.donation-note {
    font-size: 0.85rem !important;
    opacity: 0.7;
    margin-bottom: 0 !important;
}

/* The yellow stays put in dark mode — it is the recognisable part — but the
   focus ring needs to be visible against the dark card. */
body.dark-mode #bmc-link:focus-visible { outline-color: #8ab4f8; }

/* ? button for donation */
#donation-toggle {
    font-size: 40px;
    position: fixed;
    bottom: 20px;
    right: 110px;
    background: none;
    border: none;
    cursor: pointer;
}

#donation-box h2 {
    margin: 0 0 10px;
}

#donation-box p, #donation-box ul {
    margin: 10px 0;
    font-size: 1rem;
}

#donation-box ul {
    list-style-type: disc;
    padding-left: 20px;
    text-align: left;
}

#close-donation {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

#close-donation:hover {
    color: red;
}


/* Rules box for dark and light mode */
:root {
    --background-color: #fff;
    --text-color: #000;
}

body.dark-mode :root {
    --background-color: #333;
    --text-color: #fff;
}

/* Dark mode for rules overlay */
body.dark-mode #rules-box {
    background-color: #333; /* Dark background */
    color: #fff; /* Light text */
}

/* Calculator Container */
#calculator-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 20px;
}

#calculator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#calc-display {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    text-align: right;
    padding: 5px;
    border: 1px solid var(--text-color);
    border-radius: 5px;
    background-color: var(--background-color);
    color: var(--text-color);
}

#calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.calc-btn {
    padding: 15px;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.calc-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.calc-op {
    background-color: #ffcc00;
    color: #000;
}

.calc-equal {
    background-color: #4caf50;
    color: #fff;
}

.calc-clear {
    background-color: #f44336;
    color: #fff;
}

/* Dark and Light Mode Variables */
:root {
    --background-color: #fff;
    --text-color: #000;
}

body.dark-mode :root {
    --background-color: #333;
    --text-color: #fff;
}
/* Level System Styling */
/* Level and Progress Section - Above Icons */
/* Level System Styling - Updated to position under header */
#level-progress-section {
    position: fixed;
    top: 80px; /* Position under the header */
    left: 20px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 1000;
}

/* Level Display - Simplified to match general aesthetic */
#level-display {
    background-color: #f8f9fa;
    color: #007bff;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 2px solid #007bff;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#level-display:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* Progress Display */
/* Progress Display - Simplified to match general aesthetic */
#progress-display {
    background-color: #f8f9fa;
    color: #28a745;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 2px solid #28a745;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#progress-display:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
}

/* Score Display - Moved under level and progress section */
#score-display {
    background-color: #f8f9fa;
    color: #dc3545;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 2px solid #dc3545;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#score-display:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2);
}

/* Controls Container - Remove margin adjustment */
#controls-container {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Removed margin-top: 20px; */
}

/* Level Up Notification Animation */
@keyframes levelUpBounce {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    70% {
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

#level-up-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 20px 40px;
    border-radius: 15px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.4);
    z-index: 3000;
    animation: levelUpBounce 2s ease-out;
    border: 3px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mobile responsive adjustments */
@media (max-width: 7000px) {
    #level-progress-section {
        top: 10px;
        left: 10px;
    }
    
    #level-display {
        padding: 10px 18px;
        font-size: 16px;
    }
    
    #progress-display {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    #score-display {
        top: 10px;
        right: 10px;
        padding: 10px 18px;
        font-size: 16px;
    }
    
    #level-up-notification {
        padding: 15px 30px;
        font-size: 20px;
        width: 90%;
        max-width: 400px;
    }
}
/* Dark mode adjustments */
body.dark-mode #level-display {
    background-color: #333;
    color: #00bcd4;
    border-color: #00bcd4;
}

body.dark-mode #progress-display {
    background-color: #333;
    color: #4caf50;
    border-color: #4caf50;
}

body.dark-mode #score-display {
    background-color: #333;
    color: #ff6b6b;
    border-color: #ff6b6b;
}

body.dark-mode #level-display:hover,
body.dark-mode #progress-display:hover,
body.dark-mode #score-display:hover {
    background-color: #444;
}

/* Mobile responsive adjustments */
@media (max-width: 7000px) {
    #level-progress-section {
        top: 70px;
        left: 10px;
    }
    
    #level-display,
    #progress-display,
    #score-display {
        padding: 6px 12px;
        font-size: 12px;
    }
}
/* ============================================================
   SINGLE PLAYER FIX — Complete styling to match multiplayer
   
   Load order in index.html:
     <link rel="stylesheet" href="/css/styles.css">
     <link rel="stylesheet" href="/css/panel-size-fix.css">
     <link rel="stylesheet" href="/css/singleplayer-fix.css">
   
   panel-size-fix.css handles panel inner layout (flex/grid structure).
   This file handles:
     1. Layout: game-wrapper fills screen below header
     2. Box sizing: overrides hardcoded 50px from styles.css
     3. Panel + button visual styling (colors, borders, hover etc.)
     4. Zoom scaling so everything fits any screen size
   ============================================================ */

/* ── Prevent body scroll ── */
body { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════
   1. LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* game-wrapper: fixed column below header */
#game-wrapper {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 60px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    overflow: hidden !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    transform-origin: top center;
}

/* game-container: grid of boxes */
#game-container {
    display: grid !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
}

/* ── Panel heights — without these the 3x3 numpad grid collapses ──
   Multiplayer approach: panels use flex:1 inside #game-controls-section.
   Single-player equivalent: panels use flex:1 inside #keypad-container,
   which itself is constrained by #game-wrapper's fixed layout.           */

/* keypad-container is a fixed-height flex column — panels fill it */
#keypad-container {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* Mobile: panels fill available space inside keypad-container */
@media (max-width: 7000px) {
    #keypad-container {
        flex: 1 !important;
        min-height: 0 !important;
    }
    #mobile-keypad-panel,
    #mobile-calculator-panel,
    #mobile-drawing-panel {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Numpad: 3×3 grid fills the panel, nav row beneath */
#mobile-numpad-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex: 1 !important;
    min-height: 0 !important;
    gap: 4px !important;
}

#mobile-nav-row {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    margin-top: 4px !important;
}

/* Calculator: 4-col grid */
#mobile-calc-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    flex: 1 !important;
    min-height: 0 !important;
    gap: 4px !important;
}

/* Drawing: canvas fills, toolbar at bottom */
#mobile-drawing-canvas {
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: block !important;
}


/* ═══════════════════════════════════════════════════════════
   2. BOX SIZING (overrides hardcoded 50px in styles.css)
   ═══════════════════════════════════════════════════════════ */

.box {
    width: var(--box-size, 48px) !important;
    height: var(--box-size, 48px) !important;
    font-size: calc(var(--box-size, 48px) * 0.36) !important;
    line-height: var(--box-size, 48px) !important;
}


/* ═══════════════════════════════════════════════════════════
   3. PANEL BUTTON STYLING — matched to multiplayer look
   ═══════════════════════════════════════════════════════════ */

/* ── Number buttons (1–9) ── */
.mobile-num-btn {
    background: #1a3a5c !important;
    color: #ffffff !important;
    border: 1px solid #2a5a9c !important;
    border-radius: 8px !important;
    font-size: clamp(0.9rem, 3.5vw, 1.3rem) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background 0.1s, transform 0.08s !important;
    touch-action: manipulation !important;
}
.mobile-num-btn:hover { background: #2a5aac !important; }
.mobile-num-btn:active { background: #3a6abb !important; transform: scale(0.94) !important; }

/* ── Nav row buttons (⌫, 0, 💡, Enter) ── */
.mobile-nav-btn {
    background: #1a3a5c !important;
    color: #ffffff !important;
    border: 1px solid #2a5a9c !important;
    border-radius: 8px !important;
    font-size: clamp(0.6rem, 2.2vw, 0.85rem) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.1s, transform 0.08s !important;
    touch-action: manipulation !important;
    flex: 1 !important;
}
.mobile-nav-btn:hover { background: #2a5aac !important; }
.mobile-nav-btn:active { background: #3a6abb !important; transform: scale(0.93) !important; }

/* Enter button — green, wider */
.mobile-nav-btn.sp-enter {
    background: #1a6b3a !important;
    border-color: #2a9b5a !important;
    flex: 1 !important;
}
.mobile-nav-btn.sp-enter:hover { background: #2a8b4a !important; }
.mobile-nav-btn.sp-enter:active { background: #3a9b5a !important; }

/* Arrow buttons — compact */
.mobile-nav-btn.sp-left,
.mobile-nav-btn.sp-right {
    flex: 0 0 auto !important;
    min-width: 137px !important;
    background: #0d2840 !important;
    border-color: #1a4a7a !important;
    font-size: clamp(1rem, 5.8vw, 1rem) !important;
}
.mobile-nav-btn.sp-left:hover,
.mobile-nav-btn.sp-right:hover { background: #1a3a5c !important; }

/* Hint button — amber. Targeted by class, not by position: this used to be
   `#mobile-nav-row .mobile-nav-btn:nth-child(3)`, which meant whichever button
   happened to be third got the hint's amber styling. Once the nav row became
   Left / Enter / Right that painted the "Right →" button gold. */
.hint-nav-btn,
#mobile-hint-button {
    background: #7a5a00 !important;
    border-color: #b8860b !important;
    color: #ffd700 !important;
}
.hint-nav-btn:hover { background: #9a7a10 !important; }
.hint-nav-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ── Calculator panel ── */
#mobile-calc-display {
    background: #0d1f2d !important;
    color: #4af7c4 !important;
    border: 1px solid #2a5a9c !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: clamp(0.85rem, 3vw, 1.1rem) !important;
    font-family: monospace !important;
    letter-spacing: 0.05em !important;
}

.mobile-calc-btn {
    background: #1a3a5c !important;
    color: #ffffff !important;
    border: 1px solid #2a5a9c !important;
    border-radius: 6px !important;
    font-size: clamp(0.75rem, 2.8vw, 1rem) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background 0.1s, transform 0.07s !important;
    touch-action: manipulation !important;
}
.mobile-calc-btn:hover { background: #2a5aac !important; }
.mobile-calc-btn:active { background: #3a6abb !important; transform: scale(0.92) !important; }

.mobile-calc-btn.calc-op {
    background: #2a2a6a !important;
    border-color: #4a4ab8 !important;
}
.mobile-calc-btn.calc-op:hover { background: #3a3a8a !important; }

.mobile-calc-btn.calc-equal {
    background: #1a6b3a !important;
    border-color: #2a9b5a !important;
}
.mobile-calc-btn.calc-equal:hover { background: #2a8b4a !important; }

.mobile-calc-btn.calc-clear {
    background: #6b1a1a !important;
    border-color: #9b2a2a !important;
    color: #ffaaaa !important;
}
.mobile-calc-btn.calc-clear:hover { background: #8b2a2a !important; }

/* ── Drawing toolbar ── */
#mobile-drawing-canvas {
    background: #ffffff !important;
    border: 1px solid #2a5a9c !important;
    border-radius: 6px !important;
    cursor: crosshair !important;
    touch-action: none !important;
}

#mobile-drawing-panel > div:last-child button {
    background: #1a3a5c !important;
    color: #ffffff !important;
    border: 1px solid #2a5a9c !important;
    border-radius: 6px !important;
    font-size: clamp(0.6rem, 2.2vw, 0.8rem) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.1s, transform 0.07s !important;
    padding: 0 !important;
    height: 32px !important;
    touch-action: manipulation !important;
}
#mobile-drawing-panel > div:last-child button:hover { background: #2a5aac !important; }
#mobile-drawing-panel > div:last-child button.sp-draw-active {
    background: #0d7acc !important;
    border-color: #4ab8ff !important;
}

/* ── Cycle / Switch button ── */
#mobile-bottom-cycle-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 5px !important;
    padding: 7px 0 !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    border: 1.5px solid #2a5a9c !important;
    border-radius: 8px !important;
    background: #0d1f2d !important;
    color: #4ab8ff !important;
    cursor: pointer !important;
    letter-spacing: 0.04em !important;
    transition: background 0.15s, color 0.15s !important;
    touch-action: manipulation !important;
}
#mobile-bottom-cycle-btn:hover {
    background: #1a3a5c !important;
    color: #7dd6ff !important;
}
#mobile-bottom-cycle-btn:active {
    background: #2a5aac !important;
}


/* ── Dark mode adjustments ── */
body.dark-mode #mobile-drawing-canvas { background: #121212 !important; }
body.dark-mode .mobile-num-btn,
body.dark-mode .mobile-nav-btn,
body.dark-mode .mobile-calc-btn {
    background: #0f2035 !important;
    border-color: #1e4f8c !important;
}
body.dark-mode .mobile-num-btn:hover,
body.dark-mode .mobile-nav-btn:hover { background: #1a3a6c !important; }


/* ═══════════════════════════════════════════════════════════
   4. ZOOM — scales entire #game-wrapper to fit the screen.
   Reference total height: ~730px (boxes + keypad + gaps).
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile (≤ 7000px) ── */
@media (max-width: 7000px) {
    #game-wrapper { padding: 4px 8px !important; gap: 8px !important; }

    @media (max-height: 419px)                           { #game-wrapper { zoom: 0.466; } }
    @media (min-height: 420px) and (max-height: 449px)  { #game-wrapper { zoom: 0.500; } }
    @media (min-height: 450px) and (max-height: 479px)  { #game-wrapper { zoom: 0.534; } }
    @media (min-height: 480px) and (max-height: 509px)  { #game-wrapper { zoom: 0.575; } }
    @media (min-height: 510px) and (max-height: 539px)  { #game-wrapper { zoom: 0.616; } }
    @media (min-height: 540px) and (max-height: 569px)  { #game-wrapper { zoom: 0.657; } }
    @media (min-height: 570px) and (max-height: 599px)  { #game-wrapper { zoom: 0.699; } }
    @media (min-height: 600px) and (max-height: 629px)  { #game-wrapper { zoom: 0.740; } }
    @media (min-height: 630px) and (max-height: 659px)  { #game-wrapper { zoom: 0.781; } }
    @media (min-height: 660px) and (max-height: 689px)  { #game-wrapper { zoom: 0.822; } }
    @media (min-height: 690px) and (max-height: 719px)  { #game-wrapper { zoom: 0.863; } }
    @media (min-height: 720px) and (max-height: 749px)  { #game-wrapper { zoom: 0.904; } }
    @media (min-height: 750px) and (max-height: 779px)  { #game-wrapper { zoom: 0.945; } }
    @media (min-height: 780px) and (max-height: 809px)  { #game-wrapper { zoom: 0.986; } }
    @media (min-height: 810px) and (max-height: 839px)  { #game-wrapper { zoom: 1.027; } }
    @media (min-height: 840px) and (max-height: 869px)  { #game-wrapper { zoom: 1.068; } }
    @media (min-height: 870px)                          { #game-wrapper { zoom: 1.110; } }
}


/* KEYPAD PANEL STRUCTURE */
#mobile-keypad-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3×4 number grid */
#mobile-numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
    flex: 1;
}

/* Bottom navigation row */
#mobile-nav-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}

/* Keypad container controls panel sizing */
#keypad-container {
    width: 100%;
    max-width: 420px;
    height: 260px; /* Same height for ALL panels */
    display: flex;
    flex-direction: column;
}

/* All panels same size */
#mobile-keypad-panel,
#mobile-calculator-panel,
#mobile-drawing-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#mobile-drawing-canvas {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 1px solid #2a5a9c;
    border-radius: 6px;
    background: #ffffff;
}

#mobile-calculator-panel {
    display: flex;
    flex-direction: column;
}

#mobile-calc-buttons {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* prevent scroll cutoff */
}

body {
    display: flex;
    flex-direction: column;
}

#top-banner {
    flex: 0 0 auto;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: clamp(14px, 2.5vw, 18px);
    background: var(--banner-bg, #111);
    z-index: 100;
}

#game-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* critical for flex scaling */
}

#game-container {
    flex: 1 1 auto;
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 0;
}

#keypad-container {
    flex: 0 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
    margin-bottom: 10px; /* prevents URL bar overlap */
}

@supports (height: 100dvh) {
    body {
        height: 100dvh;
    }
}

@media (max-height: 650px) {

    .box.correct,
    .box.present,
    .box.absent {
        font-size: 0.7em;
    }

    #top-banner {
        padding-bottom: 4px;
    }

    #game-container {
        margin-bottom: 8px;
    }
}

@media (max-height: 650px) {
    #status-icons {
        position: relative;
        top: 0;
        margin-left: auto;
    }
}

@media (max-height: 700px) {
    #keypad-container {
        margin-bottom: 20px;
    }
}

#keypad-container {
    width: 100%;
    max-width: 420px;
    height: clamp(150px, 28vh, 240px);
    display: flex;
    flex-direction: column;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

#top-banner {
    flex: 0 0 auto;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

#game-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* critical */
}

#game-container {
    flex: 1 1 auto;
    display: grid;
    justify-content: center;
    align-content: center;
    min-height: 0;
}

#game-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;   /* VERY IMPORTANT */
}

#game-container {
    flex: 1 1 auto;
    min-height: 0;   /* VERY IMPORTANT */
    overflow: hidden;
}

w.box {
    width: var(--sp-box-size);
    height: var(--sp-box-size);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


/* ── Daily result note on the end-of-round card ── */
#daily-result-note {
    margin: 0.6rem 0 0.2rem;
    padding: 0.6rem 0.8rem;
    background: #eef4fb;
    border: 2px solid #082f59;
    border-radius: 12px;
    color: #082f59;
    font-weight: 700;
}
#daily-result-note p { margin: 0; }
#daily-result-note .daily-result-sub {
    margin-top: 2px;
    font-weight: 500;
    font-size: 0.78rem;
    color: #5a6b7d;
}


body.dark-mode #daily-result-note {
    background: #0d2a44;
    border-color: #1e5fa8;
    color: #cce5ff;
}
body.dark-mode #daily-result-note .daily-result-sub { color: #9fb3c8; }

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE — keep the accented keys accented

   The block above paints every .mobile-num-btn / .mobile-nav-btn /
   .mobile-calc-btn the same #0f2035 with !important, which flattened the
   hint, Enter, and the calculator's operator / equals / clear keys into the
   surrounding navy: in dark mode all four keypad buttons computed to exactly
   rgb(15,32,53). The colours below are the light-mode hues re-pitched for a
   dark background rather than new ones, so each key keeps the identity it
   has in light mode.
   ════════════════════════════════════════════════════════════════════════ */

/* Hint — amber */
body.dark-mode .hint-nav-btn,
body.dark-mode #mobile-hint-button,
body.dark-mode .mobile-num-btn[data-num="hint"] {
    background: #6f5200 !important;
    border-color: #c9971b !important;
    color: #ffd76a !important;
}
body.dark-mode .hint-nav-btn:hover,
body.dark-mode .mobile-num-btn[data-num="hint"]:hover { background: #8a6700 !important; }
body.dark-mode .hint-nav-btn:disabled { opacity: 0.4 !important; }

/* Enter — green on single player */
body.dark-mode .mobile-nav-btn.sp-enter,
body.dark-mode .enter-nav-btn {
    background: #1b6f3d !important;
    border-color: #35a86a !important;
    color: #eafff1 !important;
}
body.dark-mode .mobile-nav-btn.sp-enter:hover,
body.dark-mode .enter-nav-btn:hover { background: #24894c !important; }

/* Enter — amber on multiplayer, matching its own light-mode styling */
body.dark-mode .mobile-nav-btn.enter {
    background: #c9822f !important;
    border-color: #e6a75e !important;
    color: #1a1a1a !important;
}
body.dark-mode .mobile-nav-btn.enter:hover { background: #dd9440 !important; }

/* Calculator accents, flattened by the same rule */
body.dark-mode .mobile-calc-btn.operator,
body.dark-mode .mobile-calc-btn.calc-op {
    background: #14456f !important;
    border-color: #2f7fc4 !important;
    color: #d6e9ff !important;
}
body.dark-mode .mobile-calc-btn.equals,
body.dark-mode .mobile-calc-btn.calc-equal {
    background: #1b6f3d !important;
    border-color: #35a86a !important;
    color: #eafff1 !important;
}
body.dark-mode .mobile-calc-btn.clear,
body.dark-mode .mobile-calc-btn.calc-clear {
    background: #8b2a1c !important;
    border-color: #c4553f !important;
    color: #ffd9d1 !important;
}

/* ── Light mode: the same flattening, on the multiplayer page ────────────
   The .mobile-num-btn / .mobile-nav-btn rules above are !important and apply
   on both pages, but the accents beside them only name single player's
   classes (.sp-enter, .hint-nav-btn). Multiplayer's equivalents live in
   multiplayer.css without !important, so they lost: its Enter, hint and every
   calculator accent all computed to the same rgb(26,58,92). These restore
   multiplayer's own intended colours at the weight needed to win. */
.mobile-nav-btn.enter {
    background: #EDA247 !important;
    border-color: #EDA247 !important;
    color: #212529 !important;
}
.mobile-nav-btn.enter:hover  { background: #e0952f !important; }
.mobile-nav-btn.enter:active { background: #d4893a !important; }

.mobile-num-btn[data-num="hint"] {
    background: #7a5a00 !important;
    border-color: #b8860b !important;
    color: #ffd700 !important;
}
.mobile-num-btn[data-num="hint"]:hover { background: #9a7a10 !important; }

.mobile-calc-btn.operator {
    background: #007bff !important;
    border-color: #007bff !important;
    color: #ffffff !important;
}
.mobile-calc-btn.equals {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}
.mobile-calc-btn.clear {
    background: #DC4325 !important;
    border-color: #DC4325 !important;
    color: #ffffff !important;
}

/* Keep the header and the rules/donation overlays above the start screen. */
#site-header { z-index: 1200; }
#rules-overlay,
#donation-overlay { z-index: 1500; }

/* ════════════════════════════════════════════════════════════════════════
   MODE TOGGLE — Daily Challenge ⇄ Free Play

   Lives in the stats row beside LEVEL / PROGRESS / SCORE, because that row is
   the game's own status chrome: always visible, directly above the board, and
   already a row of pills. Styled as one of those pills so it reads as part of
   the set, and worded like the keypad's cycle button — it names the mode it
   switches TO.

   Which pills are shown depends on the mode: LEVEL and PROGRESS mean nothing
   in a one-puzzle daily, so the daily shows just the toggle and the score.
   ════════════════════════════════════════════════════════════════════════ */
/* The label names the mode you are in; the ⇄ says it can be swapped. */
/* LEVEL and PROGRESS describe a free-play run: levelling up and progress
   toward the next level. A daily is a single fixed puzzle with neither, so
   showing "Level 1 / Progress: 0/5" beside it is just wrong. (This rule was
   lost in a bulk removal of the old start-screen CSS and restored after the
   tests caught it.) */
body.mode-daily #level-display,
body.mode-daily #progress-display { display: none !important; }

/* A two-option switch, not a label. Both modes stay on screen with the
   active one filled, so it is obvious that it is a control and obvious that
   the Daily exists — neither of which was true of the single pill this
   replaced, sitting as it did in a row of read-only status chips.

   Built as a track with an inset active segment rather than two halves and a
   dividing line: the hard divider read as a seam between two separate
   buttons instead of one control with a current position. */
#mode-switch {
    font-size: 13px;          /* the buttons inherit this; breakpoints override it */
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: #e7edf5;
    border: 1px solid #d3dded;
    line-height: 1;
}

.mode-opt {
    appearance: none;
    border: 0;
    margin: 0;
    /* em, not px, and font-size inherited from the wrapper. Every breakpoint
       already resizes #mode-switch alongside the other pills; since the
       switch is a wrapper, those rules would otherwise shrink the track
       while the buttons kept their own padding and 13px type — the switch
       stayed tall while its neighbours shrank, and in landscape the row grew
       into the top row of the board. */
    padding: 0.4em 0.9em;
    font-size: inherit;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 999px;
    background: transparent;
    color: #5b6b7f;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.mode-opt:hover:not(:disabled):not(.is-active) { color: #082f59; background: #dce5f0; }

.mode-opt.is-active {
    background: #082f59;
    color: #fff;
    box-shadow: 0 1px 3px rgba(3, 20, 39, 0.3);
}

.mode-opt:focus-visible { outline: 2px solid #1e5fa8; outline-offset: 1px; }

/* Played today: still shown, so the Daily never silently disappears, but
   plainly not available until tomorrow. */
.mode-opt.is-done,
.mode-opt:disabled { opacity: 0.4; cursor: default; }

body.dark-mode #mode-switch { background: #2a2a2a; border-color: #3d3d3d; }
body.dark-mode .mode-opt { color: #9aa7b4; }
body.dark-mode .mode-opt:hover:not(:disabled):not(.is-active) { background: #343f4b; color: #cfe0f2; }
body.dark-mode .mode-opt.is-active { background: #1e5fa8; color: #fff; }


/* ════════════════════════════════════════════════════════════════════════
   WELCOME / RULES OVERLAY
   ────────────────────────────────────────────────────────────────────────
   Opening the game used to ask Daily or Free Play before anything started.
   It now begins in Free Play with this overlay as the welcome, so the first
   thing a player sees is how to play rather than a choice they have no
   context to make. The Daily is behind the toggle above the board.
   ════════════════════════════════════════════════════════════════════════ */

/* The wordmark is the site logo image itself, so it matches the header and
   follows it into dark mode (darkmode.js swaps every .site-logo-img).

   Neither logo file has an alpha channel — logo1.png carries the header's
   #f8f9fa baked in and logo2.png its #333333 — so dropping one onto the card
   leaves a visible rectangle. Rather than edit the brand asset, this is a
   plate in exactly that colour, rounded like everything else here, so the
   logo sits in a lockup instead of a seam. */
#rules-logo {
    display: block;
    height: 40px;
    width: auto;
    margin: 0 auto 0.5rem;
    padding: 8px 16px;
    background: #f8f9fa;        /* == logo1.png's baked background */
    border-radius: 12px;
    box-sizing: content-box;
}
body.dark-mode #rules-logo { background: #333333; }   /* == logo2.png's */

#rules-tagline {
    text-align: center;
    margin: 0 0 1rem;
    font-weight: bold;
    opacity: 0.75;
}

/* The header stays ABOVE this overlay so its controls remain usable while
   the rules are up. That matters more now than it did: the overlay is the
   first thing a new player sees, and the sound and dark-mode toggles are
   right there in the header. At a higher z-index the overlay swallowed the
   clicks and both buttons were dead on arrival. */
#site-header { z-index: 1200; }
#rules-overlay { z-index: 1100; }