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; }



/* ── Streak, share and the support line in the end-of-round panel ──────────
   The panel is `width: min(85vw, 420px)` with `max-height: 80vh` and its own
   scroll, so these three additions cannot push anything off screen — but they
   are kept compact anyway, because a panel you have to scroll to reach the
   button is a worse panel. */

#daily-result-note .daily-streak {
    margin-top: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #b8570a;             /* warm, against the panel's navy */
}
#daily-result-note .daily-streak-best {
    font-weight: 500;
    font-size: 0.82rem;
    color: #5a6b7d;
}
#daily-result-note .daily-streak-lost {
    margin-top: 4px;
    font-weight: 500;
    font-size: 0.82rem;
    color: #5a6b7d;
}

#share-result-button {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 11px;
    /* see .endgame-actions below: on a real screen this sits beside the
       primary button rather than stacked under it */
    border: 2px solid #082f59;
    border-radius: 10px;
    background: #ffffff;
    color: #082f59;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    /* The label swaps to "✓ Copied" and back. Without a fixed height the
       panel jumps by a pixel or two on every press. */
    min-height: 44px;           /* also the minimum comfortable tap target */
    transition: background-color 0.15s, transform 0.08s;
}
#share-result-button:hover { background: #eef4fb; }
#share-result-button:active { transform: translateY(1px); }
#share-result-button:focus-visible { outline: 2px solid #1e5fa8; outline-offset: 2px; }

#support-nudge {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e3e3e3;
    font-size: 0.85rem;
    color: #5a6b7d;
}
#support-nudge a {
    color: #082f59;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;        /* never break "☕ Buy me a coffee" mid-phrase */
}
#support-nudge a:hover { text-decoration: underline; }

body.dark-mode #daily-result-note .daily-streak { color: #f0a94a; }
body.dark-mode #daily-result-note .daily-streak-best,
body.dark-mode #daily-result-note .daily-streak-lost { color: #9fb0c4; }
body.dark-mode #share-result-button {
    background: #1b2733;
    color: #e8eef5;
    border-color: #3c5a7a;
}
body.dark-mode #share-result-button:hover { background: #24333f; }
body.dark-mode #support-nudge { border-top-color: #3a3a3a; color: #9fb0c4; }
body.dark-mode #support-nudge a { color: #8ab4f8; }

/* Narrow phones: the panel is already 85vw, so trim the type rather than the
   spacing — the 44px tap target on the share button stays. */
@media (max-width: 380px) {
    #share-result-button { font-size: 0.9rem; padding: 10px; }
    #support-nudge { font-size: 0.8rem; }
    #daily-result-note .daily-streak { font-size: 0.9rem; }
}

/* Short screens (a phone in landscape): the panel scrolls, but trimming the
   vertical padding keeps the button reachable without scrolling. */
@media (max-height: 560px) {
    #share-result-button { margin-top: 8px; min-height: 40px; padding: 8px; }
    #support-nudge { margin-top: 10px; padding-top: 8px; }
}


/* ── Making it all fit ────────────────────────────────────────────────────
   Measured after adding the streak, share and support lines: the panel ran
   63-272px past its own scroll box, so the support line was invisible at
   every size and on an iPhone SE the share button was below the fold too.
   Two features nobody scrolls to are two features that do not exist.

   Three changes, cheapest first: a taller ceiling, tighter spacing inside,
   and the two buttons sharing a row instead of stacking. */

.solution-content { max-height: 88vh; }

/* Share and the primary button side by side — saves a whole button's height,
   which is most of what was overflowing. */
.endgame-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.endgame-actions #share-result-button,
.endgame-actions .large-button,
.endgame-actions #next-question-button {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;                /* let them shrink rather than overflow */
}

/* The panel carries a lot before anything new was added. On short screens
   take the space out of spacing, never out of the tap targets. */
@media (max-height: 800px) {
    .solution-content { padding: 18px; }
    .solution-content h2 { font-size: 1.35rem; margin-bottom: 12px; }
    .pattern-display, .pattern-info, .score-info { padding: 9px; margin-bottom: 9px; }
    #daily-result-note { margin: 0.4rem 0 0.1rem; padding: 0.45rem 0.7rem; }
    .endgame-actions { margin-top: 9px; }
    #support-nudge { margin-top: 10px; padding-top: 9px; }
}

@media (max-height: 680px) {
    .solution-content { padding: 14px; max-height: 92vh; }
    .solution-content h2 { font-size: 1.15rem; margin-bottom: 8px; }
    .pattern-display, .pattern-info, .score-info { padding: 7px; margin-bottom: 7px; }
    .pattern-numbers { font-size: 1.1rem; }
    .pattern-info, .score-info p { font-size: 0.85rem; }
    #daily-result-note .daily-result-sub { display: none; }  /* least useful line */
}


/* The panel is a flex item of #solution-container, and flex items default to
   `min-height: auto` — which silently overrides `max-height` whenever the
   content is taller. Measured on a 360px-tall landscape phone: max-height
   computed to 331px and the panel still rendered 363px, hanging off the
   screen instead of scrolling inside itself. `min-height: 0` is what lets a
   flex item actually honour its own maximum. */
.solution-content {
    min-height: 0;
    /* And `border-box`, or `max-height` only caps the CONTENT: with 14px of
       padding and a 2px border the panel came out at 331 + 28 + 4 = 363px
       against a 331px limit, hanging 3px off a 360px-tall landscape screen.
       The limit has to include what is drawn around the content. */
    box-sizing: border-box;
}

/* A landscape phone has so little height that something must be cut. The
   pattern explanation is the most expendable: it is reference, not result,
   and it is the same information the board already showed. */
@media (orientation: landscape) and (max-height: 430px) {
    .solution-content .pattern-info { display: none; }
    .solution-content h2 { font-size: 1.05rem; }
    .pattern-display, .score-info { padding: 6px; margin-bottom: 6px; }
    .pattern-numbers { font-size: 1rem; }
}