:root {
    /* Colors */
    --color-background: #f8f9fa;
    --color-text: #1a1a1a;
    --color-text-muted: #666;
    --color-white: #fff;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-button: #d3d6da;
    --color-button-hover: #c9c9c9;
    --color-submit: #6aaa64;
    --color-dialog-button: #666;
    --color-dark-mode-background: #333;
    --color-dark-mode-text: #e0e0e0;
    --color-dark-mode-divider: #666;
    --color-toggle-switch-on: #2196F3;

    --color-letter-box-background: white;
    --color-letter-box-border: var(--color-button);
    --color-letter-box-active-border: var(--color-text-muted);
    --color-letter-box-text: black;

    --color-correct: #6aaa64;
    --color-misplaced: #c9b458;
    --color-absent: #787c7e;

    --color-dark-absent: #2e2e2e;
    --color-dark-absent-darker: #181818; /* the keyboard's background is lighter */
    --color-hard-correct: #b95db9; /* in hard mode, correct letters stay marked as such once played */
    --color-hard-correct-text: black;
    --color-dark-hard-correct: var(--color-hard-correct);
    --color-dark-hard-correct-text: var(--color-hard-correct-text);

    --color-letter-box-correct: var(--color-correct);
    --color-letter-box-correct-text: black;
    --color-letter-box-misplaced: var(--color-misplaced);
    --color-letter-box-misplaced-text: black;
    --color-letter-box-absent: var(--color-absent);
    --color-letter-box-absent-text: black;

    --color-dark-letter-box-correct: var(--color-correct);
    --color-dark-letter-box-correct-text: var(--color-dark-absent);
    --color-dark-letter-box-misplaced: var(--color-misplaced);
    --color-dark-letter-box-misplaced-text: black;
    --color-dark-letter-box-absent: var(--color-dark-absent);
    --color-dark-letter-box-absent-text: black;

    --color-keyboard-bg: #e6e6e6;
    --color-key: #C8C8C8;
    --color-key-text: #181818;
    --color-key-hover: #666;
    --color-key-absent: #777777; /* note difference from letter box's version */
    --color-key-absent-text: #eee;
    --color-key-misplaced: #bba84a; /* note difference from letter box's version */
    --color-key-misplaced-text: #FFFFFF;
    --color-key-correct: var(--color-correct);
    --color-key-correct-text: #e0e0e0;

    --color-dark-keyboard-bg: #202020;
    --color-dark-key: #303030;
    --color-dark-key-text: #e0e0e0;
    --color-dark-key-hover: #666;
    --color-dark-key-absent: var(--color-dark-absent-darker);
    --color-dark-key-absent-text: #eee;
    --color-dark-key-misplaced: #bba84a;
    --color-dark-key-misplaced-text: #FFFFFF;
    --color-dark-key-correct: #6aaa64;
    --color-dark-key-correct-text: #e0e0e0;


    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-key-height: 2.5rem;

    /* Typography */
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.75rem;
    --letter-spacing-tight: 0.05em;
    --letter-spacing-wide: 0.1em;

    /* Layout */
    --header-height: 60px;
    --max-width-container: 600px;
    --border-radius: 4px;
    --gap-xxs: 0.25rem;
    --gap-xs: 0.5rem;
    --gap-sm: 0.75rem;
    --z-index-header: 100;
    --z-index-keyboard: 100;
    --keyboard-height: 200px;
}

html,
body {
    margin: 0;
    padding: 0;
}

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

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    color: var(--color-text);
    min-height: 100vh;
    width: 100%;

    > header {
        flex: 0 0 var(--header-height);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: var(--spacing-xs) var(--spacing-md);
        background-color: var(--color-white);
        box-shadow: 0 1px 0 var(--color-shadow);
        z-index: var(--z-index-header);
    
        .left,
        .right {
            display: flex;
            gap: var(--gap-sm);
        }
    
        .title {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
    
            & > * {
                pointer-events: auto;
            }
        }
    
        button {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text);
        
            &:hover {
                opacity: 0.8;
            }
        
            svg {
                width: 24px;
                height: 24px;
                fill: currentColor;
            }
        }
    
        .timer {
            margin: auto;
            font-family: monospace;
        }

    }
}


h1 {
    margin: 0;
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-tight);
}

a.button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: #4a4a4a;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-decoration: none;

    &:hover {
        background-color: #333;
    }

    &:active {
        transform: scale(0.98);
    }
}

.button-link {
    display: inline-block;
    padding: 0.5em 1.2em;
    background: var(--color-button);
    color: var(--color-text);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    margin: 0 0.3em;
    border: 1px solid var(--color-button);
    transition: background 0.15s, color 0.15s;
}
.button-link:hover {
    background: var(--color-button-hover);
    color: var(--color-text);
    text-decoration: none;
}

.history-nav {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.indicators-container {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: -0.8rem;
    left: 0;
    right: 0;
    gap: var(--spacing-md);

    .daily-game-indicator {
        font-size: var(--font-size-xs);
        font-weight: bold;
        letter-spacing: var(--letter-spacing-wide);
        white-space: nowrap;
        color: #254025;
    }

    .decaleptical-game-indicator {
        font-size: var(--font-size-xs);
        font-weight: bold;
        letter-spacing: var(--letter-spacing-wide);
        white-space: nowrap;
        color: #402525;
    }
    
    .hard-mode-indicator {
        font-size: var(--font-size-xs);
        font-weight: bold;
        letter-spacing: var(--letter-spacing-wide);
        white-space: nowrap;
        color: #df3131;
        display: none;

        :is(body.hard-mode &) {
            display: block !important;
        }
    }

    .dev-mode-indicator {
        font-size: var(--font-size-xs);
        font-weight: bold;
        letter-spacing: var(--letter-spacing-wide);
        white-space: nowrap;
        color: #254025;
        display: none;

        :is(body.dev-mode &) {
            display: block;
        }
    }
}

.game-container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--keyboard-height) + var(--spacing-md));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.game-board {
    width: 100%;
    max-width: var(--max-width-container);
    text-align: center;
    padding: var(--spacing-md) 0;
    z-index: 10;

    .game-words {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xxs);
    }

    .message {
        min-height: var(--spacing-md);
        margin: var(--spacing-md) 0;
        color: var(--color-text-muted);
    }

    .guess-input {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xxs);
        margin-bottom: var(--spacing-lg);
    }

    .summary {
        display: flex;
        flex-direction: column;
        gap: var(--gap-sm);
        margin: var(--spacing-md);
    }

    .daily-countdown {
        margin-bottom: var(--spacing-md);
    }

    .decaleptical-countdown {
        margin-bottom: var(--spacing-md);
    }
        
}

.keyboard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--color-keyboard-bg);
    box-shadow: 0 -1px 0 var(--color-shadow);
    z-index: var(--z-index-keyboard);
    margin-top: var(--spacing-lg);

    .keyboard-inner {
        max-width: var(--max-width-container);
        margin: 0 auto;
        padding: var(--spacing-sm);
        background-color: var(--color-keyboard-bg);
        box-shadow: 0 -1px 0 var(--color-shadow);
        z-index: var(--z-index-keyboard);
        max-width: 100%;

        .keyboard-row {
            display: flex;
            justify-content: center;
            gap: var(--gap-xxs);
            margin-bottom: 3px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.key {
    min-width: 2.5rem;
    height: var(--spacing-key-height);
    padding: 0 var(--spacing-xs);
    border-radius: var(--border-radius);
    border: none;
    background-color: var(--color-key);
    color: var(--color-key-text);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-sm);
    min-height: 42px;

    &.wide {
        min-width: 4rem;
    }

    /* can't do this here because stupid stuff. check @media below.
    &:hover {
        background-color: var(--color-key-hover);
    }
    */

    &.initial-absent, &.absent:not(:is(.hard-mode &)) {
        background-color: var(--color-key-absent);
        color: var(--color-key-absent-text);
    }

    &.initial-misplaced, &.misplaced:not(:is(.hard-mode &)) {
        background-color: var(--color-key-misplaced);
        color: var(--color-key-misplaced-text);
    }

    &.initial-correct, &.correct:not(:is(.hard-mode &)) {
        background-color: var(--color-key-correct);
        color: var(--color-key-correct-text);
    }

    &.correct-misplaced:not(:is(.hard-mode &)) {
        background-color: var(--color-key-misplaced);
        border-color: var(--color-key-misplaced);
        color: var(--color-key-correct-text);
        position: relative;
        overflow: visible;
        z-index: 1;
    
        &::after {
            content: "";
            position: absolute;
            top: 12%;
            left: 12%;
            width: 76%;
            height: 76%;
            background-color: var(--color-key-correct);
            border-radius: var(--border-radius);
            z-index: -1;
        }
    }

    &.correct-absent:not(:is(.hard-mode &)) {
        background-color: var(--color-key-absent);
        border-color: var(--color-key-absent);
        color: var(--color-key-correct-text);
        position: relative;
        overflow: visible;
        z-index: 1;

        &::after {
            content: "";
            position: absolute;
            top: 12%;
            left: 12%;
            width: 76%;
            height: 76%;
            background-color: var(--color-key-correct);
            border-radius: var(--border-radius);
            z-index: -1;
        }
    }

    &.misplaced-absent:not(:is(.hard-mode &)) {
        background-color: var(--color-key-absent);
        border-color: var(--color-key-absent);
        color: var(--color-key-misplaced-text);
        position: relative;
        overflow: visible;
        z-index: 1;

        &::after {
            content: "";
            position: absolute;
            top: 12%;
            left: 12%;
            width: 76%;
            height: 76%;
            background-color: var(--color-key-misplaced);
            border-radius: var(--border-radius);
            z-index: -1;
        }
    }

    &.correct-misplaced-absent:not(:is(.hard-mode &)) {
        background-color: var(--color-key-absent);
        border-color: var(--color-key-absent);
        color: var(--color-key-correct-text);
        position: relative;
        overflow: visible;
        z-index: 1;

        &::before {
            content: "";
            position: absolute;
            top: 12%;
            left: 12%;
            width: 76%;
            height: 76%;
            background-color: var(--color-key-misplaced);
            border-radius: var(--border-radius);
            z-index: -1;
        }

        &::after {
            content: "";
            position: absolute;
            top: 24%;
            left: 24%;
            width: 52%;
            height: 52%;
            background-color: var(--color-key-correct);
            border-radius: var(--border-radius);
            z-index: -1;
        }
    }

    &.active {
        transform: scale(0.98);
    }
}

.spacer {
    flex: 0.5;

    &.half {
        flex: 0.5;
    }
}

.word-row {
    display: flex;
    gap: var(--gap-xxs);
    justify-content: center;
    margin-bottom: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;

    &.moving {
        transition: top 1s ease, left 1s ease, position 1s ease;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }
}

.letter-box {
    width: 3.5rem;
    height: 3.5rem;
    border: 2px solid var(--color-letter-box-border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--color-letter-box-background);
    color: var(--color-letter-box-text);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;

    &.filled {
        transform: scale(1.05);
    }

    &.absent {
        background-color: var(--color-letter-box-absent);
        border-color: var(--color-letter-box-absent);

        &:is(.user &) {
            &:is(.hard-mode &) {
                background-color: var(--color-hard-correct);
                border-color: var(--color-hard-correct);
            }
        }
    }

    &.misplaced {
        background-color: var(--color-letter-box-misplaced);
        border-color: var(--color-letter-box-misplaced);

        &:is(.user &) {
            &:is(.hard-mode &) {
                background-color: var(--color-hard-correct);
                border-color: var(--color-hard-correct);
            }
        }
    }

    &.correct {
        background-color: var(--color-letter-box-correct);
        border-color: var(--color-letter-box-correct);
        color: var(--color-letter-box-correct-text);

        &:is(.user &) {
            &:is(.hard-mode &) {
                background-color: var(--color-hard-correct);
                border-color: var(--color-hard-correct);
                color: var(--color-hard-correct-text);
            }
        }
    }

    &.correct-misplaced {
        /* note that this is reversed in terms of hard mode detection.
        this is because it's clearer to put the normal mode logic in one place. */
        
        background-color: var(--color-hard-correct);
        border-color: var(--color-hard-correct);
        color: var(--color-hard-correct-text);

        &:not(:is(.hard-mode &)) {
            background-color: var(--color-letter-box-misplaced);
            border-color: var(--color-letter-box-misplaced);
            color: var(--color-letter-box-correct-text);
            position: relative;
            overflow: visible;
            z-index: 1;

            &::after {
                content: "";
                position: absolute;
                top: 12%;
                left: 12%;
                width: 76%;
                height: 76%;
                background-color: var(--color-letter-box-correct);
                border-radius: var(--border-radius);
                z-index: -1;
            }
        }
    }

    &.correct-absent {
        background-color: var(--color-hard-correct);
        border-color: var(--color-hard-correct);
        color: var(--color-hard-correct-text);

        &:not(:is(.hard-mode &)) {
            background-color: var(--color-letter-box-absent);
            border-color: var(--color-letter-box-absent);
            color: var(--color-letter-box-correct-text);
            position: relative;
            overflow: visible;
            z-index: 1;

            &::after {
                content: "";
                position: absolute;
                top: 12%;
                left: 12%;
                width: 76%;
                height: 76%;
                background-color: var(--color-letter-box-correct);
                border-radius: var(--border-radius);
                z-index: -1;
            }
        }
    }

    &.misplaced-absent {
        background-color: var(--color-hard-correct);
        border-color: var(--color-hard-correct);
        color: var(--color-hard-correct-text);

        &:not(:is(.hard-mode &)) {
            background-color: var(--color-letter-box-absent);
            border-color: var(--color-letter-box-absent);
            color: var(--color-letter-box-misplaced-text);
            position: relative;
            overflow: visible;
            z-index: 1;

            &::after {
                content: "";
                position: absolute;
                top: 12%;
                left: 12%;
                width: 76%;
                height: 76%;
                background-color: var(--color-letter-box-misplaced);
                border-radius: var(--border-radius);
                z-index: -1;
            }
        }
    }

    &.correct-misplaced-absent {
        background-color: var(--color-hard-correct);
        border-color: var(--color-hard-correct);
        color: var(--color-hard-correct-text);

        &:not(:is(.hard-mode &)) {
            background-color: var(--color-letter-box-absent);
            border-color: var(--color-letter-box-absent);
            color: var(--color-letter-box-misplaced-text);
            position: relative;
            overflow: visible;
            z-index: 1;

            &::before {
                content: "";
                position: absolute;
                top: 12%;
                left: 12%;
                width: 76%;
                height: 76%;
                background-color: var(--color-letter-box-misplaced);
                border-radius: var(--border-radius);
                z-index: -1;
            }

            &::after {
                content: "";
                position: absolute;
                top: 24%;
                left: 24%;
                width: 52%;
                height: 52%;
                background-color: var(--color-letter-box-correct);
                border-radius: var(--border-radius);
                z-index: -1;
            }
        }
    }

    &.animate-grow {
        animation: letterGrow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    &.active {
        border-color: var(--color-letter-box-active-border);
        border-width: 2px;
    }
}

@keyframes letterGrow {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

#submit-button {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-lg);
    background-color: var(--color-submit);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover {
        background-color: #569c50;
    }

    &:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }
}

.tabs-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 2px solid var(--color-button);
    margin-bottom: 2rem;
    background: var(--color-background);
    gap: 0;
}

.tab-link {
    display: inline-block;
    padding: 0.75em 2em;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-bottom 0.15s, background 0.15s;
    outline: none;
}

.tab-link.active {
    color: var(--color-text);
    border-bottom: 3px solid var(--color-submit);
    background: var(--color-white);
    cursor: default;
}

.tab-link:not(.active):hover {
    color: var(--color-text);
    background: var(--color-button-hover);
}

.tab-link.home-link {
    padding: 0.75em 1em;
    margin-left: 0;
    margin-right: 1.5em;
    display: flex;
    align-items: center;
    border-bottom: none;
    background: none;
}

.tab-link.home-link svg {
    display: block;
    stroke: var(--color-text-muted);
    transition: stroke 0.15s;
}

.tab-link.home-link:hover svg,
.tab-link.home-link:focus svg,
.tab-link.home-link.active svg {
    stroke: var(--color-submit);
}

.message-display {
    text-align: center;
    margin-top: var(--spacing-md);
}

.hidden {
    display: none !important;
}

.anim-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.anim-letter-box {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 1001;
    transition: all 0.5s ease-in-out;
}

.dev-mode-visible {
    display: block !important;
}

.dev-mode-status {
    color: #2196F3;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.normal-mode-help {
    display: block !important;
}

.hard-mode-help {
    display: none !important;
}

body.hard-mode .normal-mode-help {
    display: none !important;
}

body.hard-mode .hard-mode-help {
    display: block !important;
}

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

.shake {
    animation: shake 0.65s ease;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    
    input {
        opacity: 0;
        width: 0;
        height: 0;

        &:checked + span {
            background-color: var(--color-toggle-switch-on);
            &:before {
                transform: translateX(20px);
            }
        }
    }

    span {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;

        &:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
    }
}

button {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: #4a4a4a;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;

    &:hover {
        background-color: #333;
    }

    &:active {
        transform: scale(0.98);
    }

    &:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }

    :is(.dev-mode-controls &) {
        padding: var(--spacing-sm) var(--spacing-sm);
        margin-top: var(--spacing-sm);
        
        + button {
            margin-top: var(--spacing-sm);
        }

    }
}

#toast-container {
    position: fixed;
    top: calc(var(--header-height) + 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    pointer-events: none;
    width: auto;
    max-width: 80%;

    .toast {
        background-color: #333;
        color: white;
        padding: 12px 20px;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        opacity: 0;
        text-align: center;
        font-size: var(--font-size-base);

        &.show {
            animation: fadeIn 0.3s ease-in forwards;
        }

        &.hide {
            animation: fadeOut 0.3s ease-out forwards;
        }
    }
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.margin-top {
    margin-top: var(--spacing-lg);
}

.margin-bottom {
    margin-bottom: var(--spacing-md);
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 400px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;

    &.closing {
        opacity: 0;
    }
    
    &.visible {
        display: block;
        
        & ~ .modal-backdrop {
            display: block;
        }
    }
    
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        position: relative;
        
        h2 {
            margin: 0;
            font-size: 1.5rem;
        }
        
        button.close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            color: var(--color-dialog-button);
            position: absolute;
            right: -1rem;
            top: -2.4rem;
            &:focus {
                outline: none;
            }
        }
    }
    
    section {
        margin-bottom: 1.5rem;

        p {
            margin-bottom: 1rem;
        }

        h3 {
            margin-bottom: .5rem;
        }

        h4 {
            margin-top: 1rem;
            margin-bottom: .5rem;
        }

        ul {
            margin-left: 2rem;
        }
        
        li {
            padding-top: .5rem;
        }
    }
    button {
        display: block;
        color: black;
        margin: 1rem auto 0;
        padding: 0.5rem 1rem;
        background-color: #e6e6e6;
        border: none;
        border-radius: 4px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: #d3d3d3;
        }
    }

    footer {
        margin-top: .5rem;
    }

    &#victory-modal {
        .précis {
            span:last-child {
                margin-left: .5rem;
            }
        }
            
        .summary {
            font-family: monospace;
            white-space: pre;
            text-align: center;
            margin: var(--spacing-md) 0;
            padding: var(--spacing-md);
            background-color: var(--color-background);
            border-radius: var(--border-radius);
        }
    
        .bonus-summary {
            margin: var(--spacing-md) 0;

            h3 {
                font-size: var(--font-size-sm);
                color: var(--color-text-muted);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                margin-bottom: var(--spacing-sm);
            }

            .bonus-found,
            .bonus-missed {
                margin-bottom: var(--spacing-sm);
            }

            .bonus-list {
                display: flex;
                flex-wrap: wrap;
                gap: 0.4rem;
            }

            .bonus-chip {
                font-family: monospace;
                font-size: var(--font-size-sm);
                padding: 0.2rem 0.5rem;
                border-radius: var(--border-radius);
                font-weight: bold;
                letter-spacing: 0.05em;
            }

            .bonus-chip--found {
                background-color: var(--color-misplaced);
                color: black;
            }

            .bonus-chip--missed {
                background-color: var(--color-absent);
                color: white;
            }
        }

        .copy-summary {
            width: 100%;
            padding: var(--spacing-sm);
            background-color: var(--color-submit);
            color: var(--color-white);
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: var(--font-size-base);
            transition: opacity 0.2s;

            &:hover {
                opacity: 0.9;
            }
        }
    }

    &#stats-modal {
        section {
            &.summary {
                display: flex;
                justify-content: space-around;
                margin-bottom: var(--spacing-md);

                .stats-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
    
                    .label {
                        font-size: var(--font-size-sm);
                        color: var(--color-text-muted);
                    }
    
                    .value {
                        font-size: var(--font-size-xl);
                        font-weight: bold;
                    }
                }
            }

            &.times {
                border-top: 1px solid #eee;
                padding-top: var(--spacing-md);
                
                h3 {
                    text-align: center;
                }
                
                .stats-item {
                    display: flex;
                    justify-content: space-between;
                    margin: var(--spacing-xs) 0;

                    .label {
                        font-weight: bold;
                    }
                }
            }
        }
    }

    &#settings-modal {
        section .setting-item {
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-md);
            padding-bottom: var(--spacing-md);
            
            &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }

            select {
                padding: 5px 10px;
                border-radius: 4px;
                border: 1px solid #ccc;
            }
        }
    }

    &#help-modal {
        section {
            kbd {
                background-color: #f7f7f7;
                border: 1px solid #ccc;
                border-radius: 3px;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
                color: #333;
                display: inline-block;
                font-size: 0.9rem;
                font-family: monospace;
                line-height: 1;
                padding: 0.2rem 0.4rem;
                margin: 0 0.1rem;
            }
        }
    }
}


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

    > header {
        background-color: #1e1e1e;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
        
        .daily-game-indicator {
            color: #5365e9;
        }
        
        .decaleptical-game-indicator {
            color: #6553e9;
        }
        
        .hard-mode-indicator {
            color: #df3131;
        }
        
        .icon-button {
            color: var(--color-dark-mode-text);

            &:hover {
                color: #8d8d8d;
            }
        }
    }
    
    dialog {
        background-color: var(--color-dark-mode-background);
        color: var(--color-dark-mode-text);

        &#stats-modal {
            section.summary .label {
                color: var(--color-dark-mode-text-muted);
            }
        }

        .setting-item {
            border-bottom: 1px solid #333;
        }
    
        header {
            border-bottom: 1px solid var(--color-dark-mode-divider) !important;

            button.close {
                color: #b0b0b0;
            }
        }
        
        .summary {
            background-color: #1e1e1e !important;
        }
        
        kbd {
            background-color: #333;
            border-color: #444;
            color: #e0e0e0;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
        }
    }

    .keyboard {
        background-color: var(--color-dark-keyboard-bg);

        .keyboard-inner {
            background-color: var(--color-dark-keyboard-bg);
        }
    }

    .key {
        background-color: var(--color-dark-key);
        color: var(--color-dark-key-text);

        &:hover {
            background-color: var(--color-dark-key-hover);
        }

        &.initial-absent,
        &.absent:not(:is(.hard-mode &)) {
            background-color: var(--color-dark-key-absent) !important;
            color: var(--color-dark-key-absent-text) !important;
            &:hover, &:focus, &:active {
                background-color: color-mix(in srgb, var(--color-dark-key-absent) 85%, black 15%) !important;
            }
        }

        &.initial-misplaced,
        &.misplaced:not(:is(.hard-mode &)) {
            background-color: var(--color-dark-key-misplaced) !important;
            color: var(--color-dark-key-misplaced-text) !important;
            &:hover, &:focus, &:active {
                background-color: color-mix(in srgb, var(--color-dark-key-misplaced) 85%, black 15%) !important;
            }
        }

        &.initial-correct,
        &.correct:not(:is(.hard-mode &)) {
            background-color: var(--color-dark-key-correct) !important;
            color: var(--color-dark-key-correct-text) !important;
            &:hover, &:focus, &:active {
                background-color: color-mix(in srgb, var(--color-dark-key-correct) 85%, black 15%) !important;
            }
        }

        &.correct-misplaced:not(:is(.hard-mode &)) {
            background-color: var(--color-dark-key-misplaced) !important;
            color: var(--color-dark-key-correct-text) !important;
            &:hover, &:focus, &:active {
                background-color: color-mix(in srgb, var(--color-dark-key-misplaced) 85%, black 15%) !important;
            }
            &::after {
                background-color: var(--color-dark-key-correct) !important;
            }
        }

        &.correct-absent:not(:is(.hard-mode &)) {
            background-color: var(--color-dark-key-absent) !important;
            color: var(--color-dark-key-correct-text) !important;
            &:hover, &:focus, &:active {
                background-color: color-mix(in srgb, var(--color-dark-key-correct) 85%, black 15%) !important;
            }
            &::after {
                background-color: var(--color-dark-key-correct);
            }
        }

        &.misplaced-absent:not(:is(.hard-mode &)) {
            background-color: var(--color-dark-key-absent) !important;
            color: var(--color-dark-key-absent-text) !important;
            &:hover, &:focus, &:active {
                background-color: color-mix(in srgb, var(--color-dark-key-misplaced) 85%, black 15%) !important;
            }
            &::after {
                background-color: var(--color-dark-key-misplaced);
            }
        }
    }

    .letter-box {
        &.absent {
            background-color: var(--color-dark-letter-box-absent);
            border-color: var(--color-dark-letter-box-absent);
            color: var(--color-dark-letter-box-text);
    
            &:is(.user &) {
                &:is(.hard-mode &) {
                    background-color: var(--color-dark-hard-correct);
                    border-color: var(--color-dark-hard-correct);
                    color: var(--color-dark-hard-correct-text);
                }
            }
        }
    
        &.misplaced {
            background-color: var(--color-dark-letter-box-misplaced);
            border-color: var(--color-dark-letter-box-misplaced);
            color: var(--color-dark-letter-box-misplaced-text);
    
            &:is(.user &) {
                &:is(.hard-mode &) {
                    background-color: var(--color-dark-hard-correct);
                    border-color: var(--color-dark-hard-correct);
                    color: var(--color-dark-hard-correct-text);

                }
            }
        }
    
        &.correct {
            background-color: var(--color-dark-letter-box-correct);
            border-color: var(--color-dark-letter-box-correct);
            color: var(--color-dark-letter-box-correct-text);
    
            &:is(.user &) {
                &:is(.hard-mode &) {
                    background-color: var(--color-dark-hard-correct);
                    border-color: var(--color-dark-hard-correct);
                    color: var(--color-dark-hard-correct-text);
                }
            }
        }
    
        &.correct-misplaced {
            /* note that this is reversed in terms of hard mode detection.
            this is because it's clearer to put the normal mode logic in one place. */
            
            background-color: var(--color-dark-hard-correct);
            border-color: var(--color-dark-hard-correct);
            color: var(--color-dark-hard-correct-text);

            &:not(:is(.hard-mode &)) {
                background-color: var(--color-dark-letter-box-misplaced);
                border-color: var(--color-dark-letter-box-misplaced);
                color: var(--color-dark-letter-box-misplaced-text);
    
                &::after {
                    background-color: var(--color-dark-letter-box-correct);
                }
            }
        }
    
        &.correct-absent {
            /* note that this is reversed in terms of hard mode detection.
            this is because it's clearer to put the normal mode logic in one place. */

            background-color: var(--color-dark-hard-correct);
            border-color: var(--color-dark-hard-correct);
            color: var(--color-dark-hard-correct-text);
    
            &:not(:is(.hard-mode &)) {
                background-color: var(--color-dark-letter-box-absent);
                border-color: var(--color-dark-letter-box-absent);
                color: var(--color-dark-letter-box-absent-text);
    
                &::after {
                    background-color: var(--color-dark-letter-box-correct);
                }
            }
        }
    
        &.misplaced-absent {
            /* note that this is reversed in terms of hard mode detection.
            this is because it's clearer to put the normal mode logic in one place. */

            background-color: var(--color-dark-hard-correct);
            border-color: var(--color-dark-hard-correct);
            color: var(--color-dark-hard-correct-text);
    
            &:not(:is(.hard-mode &)) {
                background-color: var(--color-dark-letter-box-absent);
                border-color: var(--color-dark-letter-box-absent);
                color: var(--color-dark-letter-box-misplaced-text);
    
                &::after {
                    background-color: var(--color-dark-letter-box-misplaced);
                    border-radius: var(--border-radius);
                    z-index: -1;
                }
            }
        }
    
        &.correct-misplaced-absent {
            /* note that this is reversed in terms of hard mode detection.
            this is because it's clearer to put the normal mode logic in one place. */

            background-color: var(--color-dark-hard-correct);
            border-color: var(--color-dark-hard-correct);
            color: var(--color-dark-hard-correct-text);
    
            &:not(:is(.hard-mode &)) {
                background-color: var(--color-dark-letter-box-absent);
                border-color: var(--color-dark-letter-box-absent);
                color: var(--color-dark-letter-box-correct-text);
               
                &::before {
                    background-color: var(--color-dark-letter-box-misplaced);
                }
    
                &::after {
                    background-color: var(--color-dark-letter-box-correct);
                }
            }
        }

    }

    .guess-input-area .letter-box {
        background-color: white !important;
        border-color: #555;
        color: #000000 !important;
    }

    h1 {
        color: #f0f0f0;
    }
    
    .toast {
        background-color: #555;
        color: #f0f0f0;
    }

}

.dev-mode-controls {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2000;
    width: 100%;
    max-width: 15%;
    min-height: 40px;
    padding: 0.5em 1em;
    background: rgba(30, 30, 30, 0.25);
    color: black;
    border: 1px solid black;
    border-top-right-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    pointer-events: auto;
    display: none;

    :is(body.dev-mode &) {
        display: block;
    }
}

@media(hover: hover) and (pointer: fine) {
    .key:hover {
        background-color: var(--color-key-hover);
    }
}

@media (max-height: 700px) {
    .game-container {
        padding-bottom: var(--spacing-lg);
    }

    .key {
        height: var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .letter-box {
        width: 3rem;
        height: 3rem;
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 600px) {
    body > header {
        h1 {
            font-size: 1.2rem;
        }
    }

    .keyboard {
        padding: var(--spacing-xs);
    }

    .keyboard-inner {
        padding: var(--spacing-xs);
        width: 100%;
        max-width: 100%;
    }

    .keyboard-row {
        margin-bottom: 4px;
        gap: 4px;
        width: 100%;
    }

    .key {
        min-width: 2rem;
        margin: 0;
        height: 2.5rem;
        padding: 0 4px;
        flex: 1;
        letter-spacing: 0;
    }

    .key.wide {
        min-width: 3.5rem;
        flex: 1.5;
        padding: 0 2px;
    }
}

@media (max-width: 420px) {
    body > header {
        h1 {
            font-size: 1rem;
        }

        button {
            border: 1px solid var(--color-gray) !important;
            padding: 2px !important;
            svg {
                width: 18px !important;
                height: 18px !important;
            }
        }

        .timer {
            position: absolute;
            bottom: 0;
            right: 1rem;
        }
    }

    .letter-box {
        width: 2.75rem;
        height: 2.75rem;
        font-size: var(--font-size-lg);
    }

    .key {
        min-width: 0;
        font-size: var(--font-size-xs);
        height: 2.2rem;
        min-height: 38px;
        margin: 0;
        padding: 0 3px;
        flex: 1;
        letter-spacing: 0;
    }

    .key.wide {
        min-width: 0;
        font-size: 0.65rem;
        flex: 1.5;
        padding: 0 2px;
    }

    .game-container {
        padding-bottom: var(--spacing-lg);
    }

    .keyboard-row {
        gap: 3px;
        margin-bottom: 3px;
        width: 100%;
    }

    .keyboard-inner {
        padding: var(--spacing-xs) 4px;
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .keyboard {
        padding: var(--spacing-xs);
    }

    .keyboard-inner {
        padding: var(--spacing-xs) 4px;
        width: 100%;
        max-width: 100%;
    }

    .keyboard-row {
        margin: 0 auto 3px auto;
        gap: 3px;
        width: 100%;
    }

    .key {
        min-width: 0;
        height: 2.3rem;
        margin: 0;
        font-size: var(--font-size-xs);
        padding: 0 3px;
        flex: 1;
        letter-spacing: 0;
    }

    .key.wide {
        min-width: 0;
        font-size: 0.65rem;
        flex: 1.5;
        padding: 0 2px;
    }

    .spacer.half {
        flex: 0.2;
    }
}

#remaining-count {
    text-align: center;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-weight: normal;
    font-size: var(--font-size-lg);
    color: #333;
}

.word-select-button {
    display: none;
    margin: var(--spacing-md) auto;
    padding: var(--spacing-sm) var(--spacing-lg);
}

.cancel-button {
    display: none;
    margin: var(--spacing-md) auto;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: var(--border-radius);
}

/* Identity Transfer Styles */

.setting-item.account-transfer {
    flex-direction: column;
    align-items: stretch;
}

.setting-item.account-transfer label {
    margin-bottom: var(--spacing-sm);
}

.transfer-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.transfer-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-correct);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color 0.2s;
}

.transfer-btn:hover {
    background-color: #4caf50;
}

.transfer-btn:active {
    transform: scale(0.98);
}

#export-identity-modal,
#import-identity-modal {
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 600px) {
    #export-identity-modal,
    #import-identity-modal {
        width: 95%;
        max-height: 95vh;
    }
}

.security-warning {
    background-color: #fff3cd;
    border: 2px solid #ff9800;
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.security-warning strong {
    display: block;
    color: #d84315;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
}

.security-warning p {
    margin: 0;
    color: #5d4037;
    line-height: 1.4;
}

#export-identity-modal .account-info {
    background-color: #f5f5f5;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

#export-identity-modal .info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
}

#export-identity-modal .info-row strong {
    color: #666;
}

.qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--spacing-lg) 0;
}

#identity-qr-canvas {
    margin-bottom: var(--spacing-md);
}

#identity-qr-canvas canvas,
#identity-qr-canvas img {
    display: block;
    max-width: 100%;
    height: auto;
}

#identity-qr-canvas .qr-error {
    padding: var(--spacing-lg);
    text-align: center;
    color: #c62828;
    background-color: #ffebee;
    border-radius: var(--border-radius);
}

.expiration-warning {
    text-align: center;
    color: #666;
}

.expiration-warning p {
    margin: var(--spacing-xs) 0;
}

.expiration-warning .countdown {
    font-family: monospace;
    font-size: var(--font-size-lg);
    color: var(--color-correct);
}

.qr-debug {
    margin-top: var(--spacing-md);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    width: 100%;
}

.qr-debug summary {
    cursor: pointer;
    font-weight: bold;
    padding: var(--spacing-xs);
    user-select: none;
}

.qr-debug summary:hover {
    color: var(--color-correct);
}

.qr-preview {
    font-family: monospace;
    font-size: var(--font-size-xs);
    word-break: break-all;
    background-color: #f5f5f5;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    margin: var(--spacing-sm) 0;
    max-height: 100px;
    overflow-y: auto;
}

.copy-qr-data {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: #666;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    margin: var(--spacing-xs) 0;
}

.copy-qr-data:hover {
    background-color: #555;
}

.qr-debug .help-text {
    font-size: var(--font-size-xs);
    color: #666;
    margin-top: var(--spacing-sm);
    line-height: 1.4;
}

.regenerate-qr {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-base);
}

.regenerate-qr:hover {
    background-color: #1976D2;
}

/* Import modal styles */

.import-steps .step {
    display: none !important;
}

.import-steps .step.active {
    display: block !important;
}

.import-steps h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.camera-scan {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

#qr-scanner {
    width: 100%;
    max-width: 400px;
    height: auto;
    background-color: #000;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.start-camera {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-correct);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.start-camera:hover {
    background-color: #4caf50;
}

.manual-input {
    margin-top: var(--spacing-md);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
}

.manual-input summary {
    cursor: pointer;
    font-weight: bold;
    padding: var(--spacing-xs);
    user-select: none;
}

.manual-input summary:hover {
    color: var(--color-correct);
}

.manual-input textarea {
    width: 100%;
    min-height: 100px;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: var(--font-size-sm);
    resize: vertical;
}

.manual-input .use-manual {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-correct);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    width: 100%;
}

.import-preview {
    background-color: #f5f5f5;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.import-preview p {
    margin: var(--spacing-sm) 0;
}

.import-preview .warning {
    color: #ff9800;
    font-weight: bold;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid #ddd;
}

.confirm-import,
.cancel-import,
.close-import {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-base);
    margin: var(--spacing-xs);
}

.confirm-import {
    background-color: var(--color-correct);
    color: white;
}

.confirm-import:hover {
    background-color: #4caf50;
}

.cancel-import {
    background-color: #999;
    color: white;
}

.cancel-import:hover {
    background-color: #777;
}

.close-import {
    background-color: var(--color-correct);
    color: white;
    width: 100%;
}

/* Dark mode support for identity transfer */
.dark-mode {
    .security-warning {
        background-color: #3e2723;
        border-color: #ff6f00;
    }

    .security-warning strong {
        color: #ff8a65;
    }

    .security-warning p {
        color: #ffccbc;
    }

    #export-identity-modal .account-info,
    .import-preview {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }

    #export-identity-modal .info-row strong {
        color: #b0b0b0;
    }

    #identity-qr-canvas .qr-error {
        color: #ef9a9a;
        background-color: #3e2020;
    }

    .expiration-warning {
        color: #b0b0b0;
    }

    .qr-debug {
        border-color: #444;
    }

    .qr-preview {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }

    .qr-debug .help-text {
        color: #b0b0b0;
    }

    .manual-input {
        border-color: #444;
    }

    .manual-input textarea {
        background-color: #1e1e1e;
        border-color: #444;
        color: #e0e0e0;
    }

    .import-preview .warning {
        color: #ffa726;
    }
}