/* Design system tokens — source of truth per docs/FRONTEND_GUIDELINES.md Section 2 */

:root {
    /* Primary: Azure */
    --primary-100: #F2F5FF;
    --primary-200: #B6CCFF;
    --primary-300: #79AAFF;
    --primary-400: #3D8FFF;
    --primary-500: #007BFF;
    --primary-600: #006DC9;
    --primary-700: #005893;
    --primary-800: #003D5C;
    --primary-900: #001B26;
    /* Accent: Colorado Peach */
    --accent-100: #FFFCF2;
    --accent-200: #FFEECA;
    --accent-300: #FBDAA1;
    --accent-400: #F3BE76;
    --accent-500: #E3994B;
    --accent-600: #B46727;
    --accent-700: #854115;
    --accent-800: #55250B;
    --accent-900: #260E05;
    /* Neutral */
    --neutral-100: #FAFBFC;
    --neutral-200: #EAECF0;
    --neutral-300: #DBDFE4;
    --neutral-400: #CCD1D8;
    --neutral-500: #BEC5CC;
    --neutral-600: #969DA3;
    --neutral-700: #6F7579;
    --neutral-800: #484D50;
    --neutral-900: #222526;
    /* Dark mode specific */
    --dm-background: #000000;
    --dm-container: #1A1A1A;
    --dm-surface: #0F0F0F;
    --dm-border: #333333;
    --dm-text: #E0E0E0;
    --dm-text-secondary: #999999;
    /* Spacing */
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 40px;
    /* Radius */
    --radius-input: 5px;
    --radius-button: 5px;
    --radius-container: 10px;
}

/* Fonts loaded from HTML <link> in index.php and about.php (single source of truth) */

body {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1.1em;
    background-color: var(--dm-background);
    color: var(--dm-text);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: 100%;
}

html, body {
    overflow-x: hidden;
    position: relative;
    touch-action: pan-y;
    overscroll-behavior-x: none;
}

body.light-mode {
    background-color: var(--primary-200);
    color: var(--neutral-900);
}

p {
    margin-top: 0px;
    padding: 15px;
}

h3 {
    text-align: left;
    margin-bottom: 0px;
}

#game-container,
.sp-game-container {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    padding: var(--space-sm);
    border-radius: var(--radius-container);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 840px;
    height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--space-lg);
    margin-top: var(--space-xl);
    align-items: center;
    position: relative;
}

body.light-mode #game-container,
body.light-mode .sp-game-container {
    background-color: var(--neutral-200);
    border: 1px solid var(--neutral-900);
    box-shadow: 0 0 20px rgba(0, 27, 38, 0.5);
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    font-size: 20px;
}

.button-text {
    font-weight: 500;
    letter-spacing: 0.5px;
}

#controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.control-row-alpha,
.control-row-beta,
.control-row-charli {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: calc(70% - 10px);
}

.control-row-alpha > *,
.control-row-beta > *,
.control-row-charli > * {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
}

#timer-display {
    width: 30%;
    align-self: stretch;
}

/* Desktop header layout: 3x2 controls block with timer to the right */
@media (min-width: 889px) {
    #controls {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .control-row-alpha,
    .control-row-beta,
    .control-row-charli {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        width: 150px;
        min-width: 150px;
        flex: 0 0 150px;
    }

    .control-row-alpha > *,
    .control-row-beta > *,
    .control-row-charli > * {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    #timer-display,
    .sp-timer {
        align-self: stretch;
        margin-left: auto;
        min-width: 290px;
        width: clamp(290px, 34%, 340px);
    }
}

#timer-display,
.sp-timer {
    font-size: 38px;
    color: var(--dm-text);
    background-color: var(--dm-surface);
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-container);
    border: 1px solid var(--dm-border);
    width: 30%;
    text-align: center;
    overflow: hidden;
    box-shadow: inset 0 0 8px var(--primary-600);
}

#timer-display span.colon,
.sp-timer span.colon {
    color: var(--primary-500);
}

#timer-display.timer-locked-out,
.sp-timer.timer-locked-out {
    color: #ff4d4f;
    box-shadow: inset 0 0 10px rgba(255, 77, 79, 0.6);
    border-color: #ff4d4f;
}

#timer-display.timer-locked-out span.colon,
.sp-timer.timer-locked-out span.colon {
    color: #ff4d4f;
}

body.light-mode #timer-display,
body.light-mode .sp-timer {
    background-color: var(--primary-100);
    box-shadow: inset 0 0 8px var(--primary-500);
    color: var(--dm-surface);
}

body.light-mode #timer-display span.colon,
body.light-mode .sp-timer span.colon {
    color: var(--primary-500);
}

#game-settings {
    color: var(--dm-text-secondary);
    text-align: center;
    margin-top: 120px;
}

body.light-mode #game-settings {
    color: var(--neutral-900);
    text-align: center;
    margin-top: 120px;
}

#seed-phrase-container,
.sp-panel--seed-phrase {
    background-color: var(--dm-surface);
    border: 1px solid var(--dm-border);
    padding: var(--space-sm);
    border-radius: var(--radius-container);
    margin-top: var(--space-lg);
    width: calc(100% - var(--space-lg));
    height: 350px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

body.light-mode #seed-phrase-container,
body.light-mode .sp-panel--seed-phrase {
    background-color: var(--neutral-100);
    box-shadow: 0 0 20px rgba(0, 27, 38, 0.5);
}

select,
.sp-select {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.8em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md);
    border-radius: var(--radius-input);
    width: 150px;
    text-align: center;
    appearance: none;
    padding-right: 25px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23007bff" viewBox="0 0 24 24"><path d="M12 16l6-6H6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 20px 20px;
    outline: none;
    display: block;
    text-align-last: center;
    text-align: center;
    -moz-text-align-last: center;
    -webkit-text-align-last: center;
}

body.light-mode select,
body.light-mode .sp-select {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
}

#theme-toggle,
#back-button,
#about-button,
.sp-button--secondary {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md);
    border-radius: var(--radius-button);
    min-width: 120px;
    height: 50px;
    margin-right: 50px;
    margin-bottom: var(--space-lg);
    text-align: center;
    display: flex;
    box-sizing: border-box;
}

body.light-mode #theme-toggle,
body.light-mode #back-button,
body.light-mode #about-button,
body.light-mode .sp-button--secondary {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
}

body.light-mode #theme-toggle:hover,
body.light-mode #back-button:hover,
body.light-mode #about-button:hover,
body.light-mode .sp-button--secondary:hover {
    background-color: var(--primary-500);
    border: 1px solid var(--neutral-900);
    color: var(--neutral-100);
}

#theme-toggle:hover,
#back-button:hover,
#about-button:hover,
.sp-button--secondary:hover {
    background-color: var(--primary-500);
    border: 1px solid var(--primary-500);
}

#theme-toggle {
    align-items: center;
    justify-content: center;
    width: 160px;
}

#about-button {
    align-items: center;
    justify-content: center;
    width: 160px;
}


select:focus {
    background-color: var(--dm-surface);
}

#seed-phrase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    row-gap: 20px;
}

.word {
    display: flex;
    flex-wrap: nowrap; /* Prevent words from breaking */
    gap: 3px; /* Add spacing between letters within words */
}

.letter-box {
    position: relative;
    flex: 1 1 auto; /* Allow boxes to grow/shrink depending on space */
    width: calc(8%); /* Make each letter box responsive relative to parent container */
    max-width: 50px; /* Set an upper limit for the size */
    height: 40px;
    margin: 30px 1px; /* Adjust margins to keep spacing consistent */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.letter-box input,
.sp-letter-box input {
    font-family: 'Inclusive Sans', sans-serif;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.25vw;
    background: none;
    border: 1.5px solid var(--primary-500);
    outline: none;
    color: var(--dm-text);
    background-color: var(--dm-surface);
    border-radius: var(--radius-input);
    box-sizing: border-box;
}

body.light-mode .letter-box input,
body.light-mode .sp-letter-box input {
    background-color: var(--primary-100);
    color: var(--primary-900);
}

body.light-mode .letter-box input.correct,
body.light-mode .letter-box input.correct-initial,
body.light-mode .sp-letter-box input.correct,
body.light-mode .sp-letter-box input.correct-initial {
    color: var(--primary-900);
    background-color: var(--primary-200);
}

.letter-box input.correct,
.letter-box input.correct-initial,
.sp-letter-box input.correct,
.sp-letter-box input.correct-initial {
    color: var(--primary-500);
    background-color: var(--dm-container);
}

.arrow {
    cursor: pointer;
    user-select: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
}

.arrow-up {
    top: -28px; /* Adjust the positioning as needed */
    background-image: url('../assets/ScrollUp.svg');
}

.arrow-up:hover {
    background-image: url('../assets/ScrollUp-Hover.svg');
}

.arrow-down {
    bottom: -32px; /* Adjust the positioning as needed */
    background-image: url('../assets/ScrollDown.svg');
}

.arrow-down:hover {
    background-image: url('../assets/ScrollDown-Hover.svg');
}

/* Solve/Rescramble: only these IDs get absolute positioning; .sp-button--primary elsewhere (e.g. Start Game) must not */
#solve-button-2,
.sp-button--secondary.sp-button--rescramble {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md);
    border-radius: var(--radius-button);
    width: 150px;
    min-width: 150px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

#solve-button {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--primary-500);
    padding: var(--space-md);
    border-radius: var(--radius-button);
    width: 150px;
    min-width: 150px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#solve-button-2:hover,
.sp-button--secondary.sp-button--rescramble:hover {
    background-color: var(--dm-surface);
    cursor: pointer;
}

#solve-button:hover {
    background-color: var(--primary-500);
}

body.light-mode #solve-button-2,
body.light-mode .sp-button--secondary.sp-button--rescramble {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border: 1px solid var(--neutral-900);
}

body.light-mode #solve-button {
    background-color: var(--primary-100);
    color: var(--dm-surface);
}

body.light-mode #solve-button-2:hover,
body.light-mode .sp-button--secondary.sp-button--rescramble:hover {
    background-color: var(--neutral-100);
    cursor: pointer;
}

body.light-mode #solve-button:hover {
    background-color: var(--primary-500);
    color: var(--dm-text);
    border: 1px solid var(--dm-surface);
}

#new-game-button,
.sp-button--primary.sp-button--new-game {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.8em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--primary-500);
    padding: var(--space-md);
    border-radius: var(--radius-button);
    width: 150px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    text-align-last: center;
    text-align: center;
    -moz-text-align-last: center;
    -webkit-text-align-last: center;
}

body.light-mode #new-game-button,
body.light-mode .sp-button--primary.sp-button--new-game {
    background-color: var(--neutral-100);
    color: var(--dm-surface);
    border: 1px solid var(--primary-500);
}

#new-game-button:hover,
.sp-button--primary.sp-button--new-game:hover {
    background-color: var(--primary-500);
    border: 1px solid var(--primary-500);
    color: var(--dm-text);
}

body.light-mode #new-game-button:hover,
body.light-mode .sp-button--primary.sp-button--new-game:hover {
    background-color: var(--primary-500);
    border: 1px solid var(--dm-surface);
    color: var(--dm-text);
}

/* Rescramble + Solve: mobile/tablet = stacked above hint panel; desktop = side by side below "Your Cut" */
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Desktop only: below "Your Cut" (right column), side by side — Rescramble left, Solve right, grouped together */
@media (min-width: 889px) {
    .button-container {
        position: absolute;
        bottom: 10px;
        right: 20px;
        left: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end; /* pack both buttons to the right so they sit together */
        gap: 8px;
        width: auto;
        margin: 0;
    }

    .button-container #solve-button-2,
    .button-container #solve-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px; /* same height so they align on one baseline */
        margin: 0;
    }
}

.button-container #solve-button-2,
.button-container #solve-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-link {
    flex-wrap: nowrap;
    background-color: #f0f0f0;  /* Example background */
    color: #333;                /* Text color */
    padding: 8px 16px;          /* Padding similar to a button */
    text-align: center;
    text-decoration: none;
    border: 1px solid #ccc;     /* Border like a button */
    border-radius: 4px;         /* Optional: rounded corners */
}

.bottom-buttons {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    margin-top: var(--space-lg);
    width: 90%;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

/* Hint panel (Phase 4: replaces chat; read-only display + HINT button) */
#hint-panel,
#chat-container,
.sp-chat {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-sm);
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    width: 490px;
    height: 225px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

#hint-panel .hint-display,
#hint-panel #chat-window {
    height: calc(100% - 50px);
    margin-bottom: var(--space-sm);
}

#hint-button,
.sp-button--hint {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.95em;
    font-weight: 500;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--primary-500);
    padding: 6px var(--space-md);
    border-radius: var(--radius-button);
    min-width: 120px;
    width: 100%;
    min-height: 0;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-top: 4px;
}

#hint-button:hover,
.sp-button--hint:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
}

#hint-button .material-symbols-outlined {
    font-size: 1.25em;
}

body.light-mode #hint-panel,
body.light-mode #chat-container,
body.light-mode .sp-chat {
    background-color: var(--neutral-300);
}

body.light-mode #hint-button,
body.light-mode .sp-button--hint {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--primary-500);
}

body.light-mode #hint-button:hover,
body.light-mode .sp-button--hint:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: var(--neutral-100);
}

#chat-window,
.sp-chat__window {
    background-color: var(--dm-surface);
    border-radius: var(--radius-input);
    width: 100%;
    max-width: 100%;
    height: calc(100% - 55px);
    overflow-y: auto;
    border: 1px solid var(--dm-border);
    margin-bottom: var(--space-sm);
    box-sizing: border-box;
}

body.light-mode #chat-window,
body.light-mode .sp-chat__window {
    background-color: var(--primary-100);
    box-shadow: inset 0 0 8px var(--primary-600);
}

#chat-input-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

#chat-icon {
    width: 36px;
    height: 36px;
    margin-right: 10px;
    border-radius: 50%;
}

.avatar {
    border: 1px solid var(--primary-500);
}

body.light-mode #chat-icon {
    border: 1px solid var(--primary-500);
}

#chat-input {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-button);
    border: 1px solid var(--dm-border);
    background-color: var(--dm-container);
    color: var(--dm-text);
    margin-right: 10px;
    outline: none;
}

#chat-input::placeholder {
    color: var(--neutral-400);
}

body.light-mode #chat-input::placeholder {
    color: var(--neutral-600);
}

body.light-mode #chat-input {
    background-color: var(--primary-100);
    color: var(--dm-surface);
}

#send-button {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-container);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: 10px;
    border-radius: var(--radius-button);
    width: 30%;
    cursor: pointer;
}

#send-button:hover {
    background-color: var(--primary-500);
    border: 1px solid var(--primary-500);
}

body.light-mode #send-button {
    background-color: var(--primary-100);
    color: var(--dm-surface);
}

body.light-mode #send-button:hover {
    background-color: var(--primary-500);
    border: 1px solid var(--dm-surface);
    color: var(--neutral-100);
}

/* Chat message styles */
.message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.message.user {
    justify-content: flex-end;
}

.message.bot {
    justify-content: flex-start;
}

.message .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
}

/* Message Bubble Styles */
.message .text { 
    max-width: 70%;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid var(--dm-border);
    background-color: var(--dm-container);
    color: var(--dm-text);
}

body.light-mode .message .text {
    background-color: var(--accent-100);
    color: var(--dm-surface);
}

.message.user .text {
    border: 1px solid var(--primary-500);
    background-color: var(--dm-container);
    color: var(--neutral-100);
}

body.light-mode .message.user .text {
    background-color: var(--accent-100);
    color: var(--neutral-900);
}

#wallet-id-container,
#wallet-total-container,
#zxc-cut-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    right: 20px; /* Align to the right side */
}

#wallet-id-container {
    bottom: 200px; /* Adjusted position for Wallet ID */
}

#wallet-total-container {
    bottom: 160px; /* Adjusted position for Wallet Total */
}

#zxc-cut-container {
    bottom: 120px; /* Adjusted position for zXc's Cut */
}

#wallet-id-container label,
#wallet-total-container label,
#zxc-cut-container label {
    margin-right: 10px;
}

#wallet-id,
#wallet-total,
#zxc-cut,
.sp-input--text[readonly] {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-container);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-xs);
    border-radius: var(--radius-input);
    width: 200px;
    outline: none;
}

body.light-mode #wallet-id,
body.light-mode #wallet-total,
body.light-mode #zxc-cut,
body.light-mode .sp-input--text[readonly] {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
}

#your-cut-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    bottom: 80px; /* Adjusted position for Your Cut */
    right: 20px; /* Align to the right side */
}

#your-cut-container label {
    margin-right: 10px;
}

#your-cut {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-container);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-xs);
    border-radius: var(--radius-input);
    width: 200px;
    outline: none;
}

body.light-mode #your-cut {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--dm-border);
    border-radius: 10px;
    border: 1px solid var(--primary-500);
}

body.light-mode ::-webkit-scrollbar-thumb {
    background-color: var(--neutral-200);
    border-radius: 10px;
    border: 1px solid var(--dm-surface);
}

::-webkit-scrollbar-track {
    background-color: var(--dm-surface);
    border-radius: var(--radius-container);
    border: 1px solid var(--dm-border);
}

body.light-mode ::-webkit-scrollbar-track {
    background-color: var(--primary-300);
    border-radius: var(--radius-container);
    border: 1px solid var(--dm-surface);
}

::-webkit-scrollbar-button {
    background-color: var(--dm-surface);
    height: 12px;
    width: 12px;
}

/* Landing / login modal (per FRONTEND_GUIDELINES) */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.login-modal-container,
.sp-modal__container {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.login-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.login-modal-title {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dm-text);
    margin: 0;
}

.login-modal-description {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1rem;
    color: var(--dm-text-secondary);
    margin-bottom: var(--space-lg);
}

.login-modal-buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Start Game = Primary CTA per FRONTEND_GUIDELINES §2.4 */
.login-modal-btn-start,
.sp-button--primary.sp-button--start {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    font-weight: 500;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--primary-500);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-button);
    min-width: 150px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.login-modal-btn-start:hover,
.sp-button--primary.sp-button--start:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
}

.login-modal-btn-start .material-symbols-outlined {
    margin-right: 0.5rem;
    font-size: 1.25em;
}

/* Cancel/secondary modal button */
.login-modal-btn-cancel {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.login-modal-btn-cancel:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
}

/* Fix for password input field width in SeedPhrase modals */
.login-modal-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Change lock icon color to match container background */
.login-modal-icon .material-symbols-outlined {
    color: var(--primary-700) !important;
}

/* Blockchain Connection Modal */
.blockchain-connection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(6px);
}

.blockchain-modal-container {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(17, 17, 34, 0.95) 100%);
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    max-width: 450px;
    width: 90%;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 255, 136, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.3s ease-out;
}

.blockchain-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 255, 136, 0.2);
    border-top: 4px solid #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.blockchain-title {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #00ff88;
    margin: 0 0 1rem 0;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.blockchain-message {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1rem;
    color: #BEC5CC;
    margin: 0 0 1rem 0;
    min-height: 1.5rem;
}

.blockchain-address {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.8rem;
    color: #6c757d;
    font-family: 'Roboto Mono', monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    border-radius: 4px;
    margin-top: 1rem;
    word-break: break-all;
}

/* Alert Modal Component Styles */
.sp-modal--alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.sp-modal__container--alert {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sp-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.sp-modal__icon--alert .material-symbols-outlined {
    color: var(--accent-500);
    font-size: 2rem;
}

.sp-modal__title {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dm-text);
    margin: 0;
}

.sp-modal__message {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1rem;
    color: var(--dm-text);
    margin-bottom: var(--space-lg);
    line-height: 1.5;
}

.sp-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.sp-button--alert {
    min-width: 100px;
}

body.light-mode .sp-modal__container--alert {
    background-color: var(--neutral-200);
    border-color: var(--neutral-900);
}

body.light-mode .sp-modal__title,
body.light-mode .sp-modal__message {
    color: var(--neutral-900);
}

/* Win Modal */
.sp-modal--win {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.sp-modal__container--win {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sp-modal__icon--win .material-symbols-outlined {
    color: var(--accent-500);
    font-size: 2rem;
}

.sp-modal__actions--win {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
}

#win-modal-play-again {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--primary-500);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-button);
    min-width: 140px;
    height: 48px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#win-modal-play-again:hover {
    background-color: var(--primary-500);
}

body.light-mode .sp-modal__container--win {
    background-color: var(--neutral-200);
    border-color: var(--neutral-900);
}

body.light-mode #win-modal-play-again {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--primary-500);
}

body.light-mode #win-modal-play-again:hover {
    background-color: var(--primary-500);
    color: white;
}

/* Notification System */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #22b14c 0%, #1a9a3a 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-family: 'Inclusive Sans', sans-serif;
    font-weight: 600;
    z-index: 10002;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 300px;
    animation: notificationSlideIn 0.3s ease-out;
}

.notification.error {
    background: linear-gradient(135deg, #e8413a 0%, #c82333 100%);
}

.notification.warning {
    background: linear-gradient(135deg, #ffaa00 0%, #e69500 100%);
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Timer Input Modal - uses same structure as alert modal */
.sp-modal--timer-input {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.sp-modal__container--timer-input {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sp-modal__icon--timer .material-symbols-outlined {
    color: var(--primary-500);
    font-size: 2rem;
}

.sp-modal--timer-input .sp-modal__description {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1rem;
    color: var(--dm-text);
    margin-bottom: var(--space-lg);
    line-height: 1.5;
}

/* Timer Input Field */
.sp-input--timer {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md);
    border-radius: var(--radius-input);
    width: 100%;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    margin-bottom: var(--space-sm);
}

.sp-input--timer:focus {
    border-color: var(--primary-500);
}

.sp-input--timer::placeholder {
    color: var(--neutral-600);
}

/* Timer Input Modal - Helper Text */
.sp-modal__helper-text {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.85em;
    color: var(--neutral-600);
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* Timer Input Modal - Actions */
.sp-modal__actions--timer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
}

/* Timer modal buttons - use same styling as alert modal */
/* Use ID selectors for higher specificity to override sp-button--primary/secondary */
#timer-input-cancel,
#timer-input-confirm {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-button);
    width: 140px;
    height: 48px;
    min-width: 140px;
    max-width: 140px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    margin: 0;
}

#timer-input-cancel:hover,
#timer-input-confirm:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
}

/* Primary action button (Set Timer) */
#timer-input-confirm {
    border: 1px solid var(--primary-500);
}

#timer-input-confirm:hover {
    background-color: var(--primary-500);
}

/* Light mode for timer buttons */
body.light-mode #timer-input-cancel,
body.light-mode #timer-input-confirm {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--neutral-400);
}

body.light-mode #timer-input-cancel:hover,
body.light-mode #timer-input-confirm:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: var(--neutral-100);
}

body.light-mode #timer-input-confirm {
    border-color: var(--primary-500);
}

/* Remove the old sp-button--timer light mode rules since we're using IDs now */
body.light-mode .sp-button--timer {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--neutral-400);
}

body.light-mode .sp-button--timer:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: var(--neutral-100);
}

body.light-mode #timer-input-confirm.sp-button--timer {
    border-color: var(--primary-500);
}

/* New Game Confirm Modal */
.sp-modal--new-game-confirm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.sp-modal__container--new-game-confirm {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sp-modal__icon--warning .material-symbols-outlined {
    color: var(--accent-500);
    font-size: 2rem;
}

.sp-modal--new-game-confirm .sp-modal__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-sm);
    background-color: var(--dm-surface);
    border-radius: var(--radius-input);
}

.sp-modal--new-game-confirm .sp-modal__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-500);
}

.sp-modal--new-game-confirm .sp-modal__checkbox label {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--dm-text);
    cursor: pointer;
    user-select: none;
}

.sp-modal__actions--new-game-confirm {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
}

#new-game-confirm-cancel,
#new-game-confirm-confirm {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-button);
    width: 140px;
    height: 48px;
    min-width: 140px;
    max-width: 140px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    margin: 0;
}

#new-game-confirm-confirm {
    border: 1px solid var(--primary-500);
}

#new-game-confirm-cancel:hover,
#new-game-confirm-confirm:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
}

body.light-mode .sp-modal__container--new-game-confirm {
    background-color: var(--neutral-200);
    border-color: var(--neutral-900);
}

body.light-mode .sp-modal--new-game-confirm .sp-modal__title,
body.light-mode .sp-modal--new-game-confirm .sp-modal__message {
    color: var(--neutral-900);
}

body.light-mode .sp-modal--new-game-confirm .sp-modal__checkbox {
    background-color: var(--neutral-100);
}

body.light-mode .sp-modal--new-game-confirm .sp-modal__checkbox label {
    color: var(--neutral-900);
}

body.light-mode #new-game-confirm-cancel,
body.light-mode #new-game-confirm-confirm {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--neutral-400);
}

body.light-mode #new-game-confirm-confirm {
    border-color: var(--primary-500);
}

body.light-mode #new-game-confirm-cancel:hover,
body.light-mode #new-game-confirm-confirm:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: var(--neutral-100);
}

/* Lockout Countdown Modal */
.sp-modal--lockout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.sp-modal__container--lockout {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sp-modal__icon--lockout .material-symbols-outlined {
    color: #ff4d4f;
    font-size: 2rem;
}

.sp-lockout-timer {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ff4d4f;
    text-align: center;
    background-color: var(--dm-surface);
    border: 1px solid #ff4d4f;
    border-radius: var(--radius-input);
    padding: var(--space-sm);
    margin-bottom: var(--space-lg);
    letter-spacing: 0.05em;
}

.sp-modal__actions--lockout {
    display: flex;
    justify-content: center;
}

#lockout-modal-confirm {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid #ff4d4f;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-button);
    width: 140px;
    height: 48px;
    min-width: 140px;
    max-width: 140px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    margin: 0;
}

#lockout-modal-confirm:hover {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #ffffff;
}

body.light-mode .sp-modal__container--lockout {
    background-color: var(--neutral-200);
    border-color: var(--neutral-900);
}

body.light-mode .sp-modal--lockout .sp-modal__title,
body.light-mode .sp-modal--lockout .sp-modal__message {
    color: var(--neutral-900);
}

body.light-mode .sp-lockout-timer {
    background-color: var(--neutral-100);
}

body.light-mode #lockout-modal-confirm {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
}

/* Light Mode Overrides - Timer Input Modal */
body.light-mode .sp-modal__container--timer-input {
    background-color: var(--neutral-200);
    border-color: var(--neutral-900);
}

body.light-mode .sp-modal--timer-input .sp-modal__title,
body.light-mode .sp-modal--timer-input .sp-modal__description {
    color: var(--neutral-900);
}

body.light-mode .sp-input--timer {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--neutral-400);
}

body.light-mode .sp-input--timer:focus {
    border-color: var(--primary-500);
}

body.light-mode .sp-modal__helper-text {
    color: var(--neutral-700);
}

body.light-mode .sp-button--timer {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--neutral-400);
}

body.light-mode .sp-button--timer:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: var(--neutral-100);
}

body.light-mode #timer-input-confirm.sp-button--timer {
    border-color: var(--primary-500);
}

/* Light Mode Overrides - Blockchain Modal */

body.light-mode .blockchain-modal-container {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(233, 236, 239, 0.95) 100%);
    border-color: rgba(0, 255, 136, 0.5);
}

body.light-mode .blockchain-title {
    color: #00ff88;
}

body.light-mode .blockchain-message {
    color: #6c757d;
}

body.light-mode .blockchain-address {
    background: rgba(0, 0, 0, 0.1);
    color: #6c757d;
}

body.light-mode ::-webkit-scrollbar-button {
    background-color: #007BFF;
}

/* Scrollbar Button Styles */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
    background-color: var(--dm-surface);
}

body.light-mode ::-webkit-scrollbar-button:start:decrement,
body.light-mode ::-webkit-scrollbar-button:end:increment {
    background-color: var(--primary-300);
}

::-webkit-scrollbar-button:vertical:increment {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23007bff" viewBox="0 0 24 24"><path d="M12 16l6-6H6z"/></svg>') no-repeat center;
    background-size: 20px 20px;
}

::-webkit-scrollbar-button:vertical:decrement {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23007bff" viewBox="0 0 24 24"><path d="M12 8l-6 6h12z"/></svg>') no-repeat center;
    background-size: 20px 20px;
}

/* Hide the middle buttons */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

::-webkit-scrollbar-button:horizontal {
    display: none;
}

/* Crypto Select with Icon */
.crypto-select {
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: 15px;
    border-radius: 5px;
    width: 150px;
    text-align: center;
    appearance: none; /* Remove default arrow */
    outline: none;
    background-repeat: no-repeat;
    background-position: left 10px center, right 10px center; /* Position crypto icon on left and arrow on right */
    background-size: 20px 20px, 20px 20px; /* Size for both images */
    display: block; /* Ensures centering works consistently */
    text-align-last: center;  /* For Firefox */
    text-align: center;       /* For other browsers */
    -moz-text-align-last: center; /* For Firefox */
    -webkit-text-align-last: center; /* For Chrome and Safari */
    box-sizing: border-box;
}

/* Default image and arrow */
.crypto-select {
    background-image: url('../assets/Bitcoin.svg'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23007bff" viewBox="0 0 24 24"><path d="M12 16l6-6H6z"/></svg>');
}


.crypto-select option {
    padding-left: 35px; /* Ensure the same padding for options */
}

.crypto-select option[value="BTC"] {
    background-image: url('../assets/Bitcoin.svg');
}

.crypto-select option[value="ETH"] {
    background-image: url('../assets/Ethereum.svg');
}

.crypto-select option[value="SOL"] {
    background-image: url('../assets/Solana.svg');
}

.crypto-select option[value="XTZ"] {
    background-image: url('../assets/Tezos.svg');
}

/* About Section Styling */
#parent-about-container {
    overflow-y: auto;
    padding-right: 20px;
    padding-left: 20px;
}

#about-container {
    text-align: center;
    margin: 20px auto;
    padding: 20px;
    min-width: 840px;
    max-width: 840px;
    min-height: 650px;
    max-height: 650px;
    background-color: var(--dm-surface);
    border-radius: var(--radius-container);
    border: 1px solid var(--dm-border);
    overflow-y: auto;
}

.about-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
}

body.light-mode #about-container {
    background-color: var(--neutral-100);
    box-shadow: 0 0 20px rgba(0, 27, 38, 0.5);
}

.about-main-headline {
    font-family: 'Jersey 10', sans-serif;
    font-size: 72px;
    font-weight: 700;
    color: var(--primary-500);
}

.about-sub-headline {
    font-family: 'Jersey 10', sans-serif;
    font-size: 18px;
    color: var(--neutral-500);
    margin-bottom: 20px;
}

body.light-mode .about-sub-headline {
    color: var(--primary-900);
}

.about-bold-title {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: var(--accent-500);
    margin-bottom: 10px;
}

body.light-mode .about-bold-title {
    color: var(--primary-500);
}

.about-body-text {
    display: none;
    font-size: 18px;
    color: var(--neutral-300);
    line-height: 1.6;
    text-align: left;
    padding: 0 15px 15px 40px;
    margin-top: 0;
}

.about-body-text p {
    padding: 0;
    margin: 0;
}

body.light-mode .about-body-text p {
    color: var(--primary-900);
}

.toggle-btn {
    background: none;
    width: 10px;
    border: none;
    color: var(--dm-text);
    font-size: 20px;
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 10px;
    padding: 10px;
    outline: none;
}

.toggle-btn:hover {
    color: var(--accent-500);
}

body.light-mode .toggle-btn {
    color: var(--primary-900);
}

/* Mobile styles (for screens up to 600px wide) */
@media only screen and (max-width: 888px) {
    #game-container {
        width: 80%; /* Use the full width of the screen */
        max-width: 100%;
        height: auto; /* Let height adapt based on content */
        padding: 30px;
        margin-top: 25px;
        margin-bottom: 25px;
        box-sizing: border-box;
    }

        #new-game-button {
        font-family: 'Inclusive Sans', sans-serif;
        background-color: var(--dm-surface);
        color: var(--dm-text);
        border: 1px solid var(--primary-500);
        padding: 15px;
        border-radius: var(--radius-button);
        width: 100%;
        text-align: center;
    }
    
    #new-game-button:hover {
        background-color: var(--primary-500);
        border: 1px solid var(--primary-500);
    }


    #controls {
        flex-direction: column; /* Stack controls vertically on smaller screens */
        align-items: flex-start;
        width: 100%;
    }

    #your-cut {
        flex-direction: column; /* Stack controls vertically on smaller screens */
        align-items: flex-start;
    }


    .control-row {
        width: 100%; /* Take full width on smaller screens */
        margin-bottom: 10px;
        
    }

    .control-row-alpha, .control-row-beta, .control-row-charli {
        display: flex; /* Enables flexbox layout */
        width: 100%; /* Take full width on smaller screens */

        flex-direction: row; /* Align children elements in a row */
        align-items: center; /* Align items vertically in the center */
        justify-content: space-between; /* Distribute space between items */
        gap: 10px; /* Consistent gap between items */
    }

    .control-row-alpha > *, .control-row-beta > *, .control-row-charli > * {
        flex: 1 1 0; /* Equal width for all children */
        min-width: 0; /* Allow shrinking below content width */
    }
    

    select, button {
        width: 100%; /* Make buttons and dropdowns full-width for easier touch interaction */
        padding: 15px;
        margin: 5px 0; /* Remove horizontal margin, keep vertical */
    }

    #send-button {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #hint-panel,
    #chat-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 300px;
        position: relative;
        margin-top: 10px;
        margin-bottom: 15px;
        margin-left: 0;
        margin-right: 0;
        padding: 15px;
        box-sizing: border-box;
        order: 4; /* above wallet info on tablet/phone */
    }

    #chat-input {
        padding: 12px;
    }

    #seed-phrase-container {
        width: 95%; /* Full width on mobile */
        height: 350px; /* Let the height adapt */
        padding: 10px;
        margin-top: 10px;
    }

    #timer-display {
        font-size: 38px;
        padding: 10px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        width: 95%;
        height: 75px;
        margin-top: 10px;
        margin-bottom: 10px;
    }    

    #game-settings {
        margin-top: 120px;
    }

    .button-container {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        margin-top: 25px;
        margin-bottom: 30px;
        justify-content: center;
        align-items: stretch;
        padding: 0 5px;
        box-sizing: border-box;
    }

    /* Wallet ID, Wallet Total, zXc's Cut, Your Cut: full width on tablet/phone, below hint panel */
    #wallet-info-container {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
        box-sizing: border-box;
        order: 5; /* below hint panel on tablet/phone */
    }

    #wallet-id-container,
    #wallet-total-container,
    #zxc-cut-container,
    #your-cut-container {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
    }

    #wallet-id-container label,
    #wallet-total-container label,
    #zxc-cut-container label,
    #your-cut-container label {
        flex-shrink: 0;
    }

    #wallet-id,
    #wallet-total,
    #zxc-cut,
    #your-cut {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }
    
    #solve-button-2, #solve-button {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 15px;
        position: relative !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-sizing: border-box;
    }
    
    #solve-button-2 {
        cursor: default;
    }

    .crypto-select {
        padding: 15px;
    }

    #chat-window {
        height: calc(100% - 60px); /* Adjust height for smaller chat window */
        margin-bottom: 5px;
    }

    /* Adjust the font size of the letters and inputs */
    .letter-box input {
        font-size: 18px; /* Smaller font size for smaller screens */
        width: 35px; /* Smaller input size */
        height: 35px;
    }

    .bottom-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        max-width: none;
        margin-top: 15px;
        padding: 0 20px;
    }

    #theme-toggle,
    #about-button {
        width: 60px !important;
        height: 60px !important;
        padding: 0 !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex: 0 0 auto !important;
        min-width: auto !important;
        gap: 0 !important;
    }

    #theme-toggle .material-symbols-outlined,
    #about-button .material-symbols-outlined {
        font-size: 24px;
    }

    .bottom-buttons a,
    .bottom-buttons button {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #about-container {
        min-width: 240px;
        max-width: 840px;
        min-height: 650px;
        max-height: 650px;
        background-color: var(--dm-surface);
        border-radius: var(--radius-container);
        border: 1px solid var(--dm-border);
        overflow-y: auto;
    }

    .material-symbols-outlined {
        font-size: 18px;
    }


    .wallet-title {
        order: -1;
        margin-bottom: 15px;
    }

    .wallet-tokens-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
        gap: 15px;
        justify-items: center;
        align-items: center;
    }

    .wallet-token {
        min-width: 70px;
        padding: 8px;
        width: 100%;
        max-width: 120px;
    }

    .token-icon {
        width: 28px;
        height: 28px;
    }

    .usd-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .token-symbol {
        font-size: 0.75em;
    }

    .token-amount {
        font-size: 0.8em;
    }

    /* Mobile Responsive - Timer Input Modal */
    .sp-modal__container--timer-input {
        padding: var(--space-lg);
        margin: var(--space-md);
    }
    
    .sp-modal--timer-input .sp-modal__title {
        font-size: 1.25rem;
    }
    
    .sp-modal__actions--timer {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .sp-button--timer {
        width: 100%;
    }

    .sp-modal__actions--new-game-confirm {
        flex-direction: column;
        gap: var(--space-sm);
    }

    #new-game-confirm-cancel,
    #new-game-confirm-confirm {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    #lockout-modal-confirm {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .sp-lockout-timer {
        font-size: 1.6rem;
    }
}

/* Hint Cost Modal (A2-040) */
.sp-modal--hint-cost {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.sp-modal__container--hint-cost {
    background-color: var(--dm-container);
    border: 1px solid var(--dm-border);
    border-radius: var(--radius-container);
    padding: var(--space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.sp-modal--hint-cost .sp-modal__icon .material-symbols-outlined {
    color: var(--primary-500);
    font-size: 2rem;
}

.hint-cost-display {
    text-align: center;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background-color: var(--dm-surface);
    border: 1px solid var(--primary-500);
    border-radius: var(--radius-input);
}

.hint-cost-crypto {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-500);
    margin-bottom: var(--space-xs);
}

.hint-cost-usd {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1rem;
    color: var(--dm-text-secondary);
}

.hint-cost-note {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--neutral-500);
    font-style: italic;
    margin-top: var(--space-sm);
    text-align: center;
}

.sp-modal--hint-cost .sp-modal__checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-sm);
    background-color: var(--dm-surface);
    border-radius: var(--radius-input);
}

.sp-modal--hint-cost .sp-modal__checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-500);
}

.sp-modal--hint-cost .sp-modal__checkbox label {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--dm-text);
    cursor: pointer;
    user-select: none;
}

.sp-modal__actions--hint-cost {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
}

#hint-cost-cancel,
#hint-cost-confirm {
    font-family: 'Inclusive Sans', sans-serif;
    font-size: 1em;
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-button);
    width: 140px;
    height: 48px;
    min-width: 140px;
    max-width: 140px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    margin: 0;
}

#hint-cost-confirm {
    border: 1px solid var(--primary-500);
}

#hint-cost-cancel:hover,
#hint-cost-confirm:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
}

/* Light mode for hint cost modal */
body.light-mode .sp-modal__container--hint-cost {
    background-color: var(--neutral-200);
    border-color: var(--neutral-900);
}

body.light-mode .sp-modal--hint-cost .sp-modal__title,
body.light-mode .sp-modal--hint-cost .sp-modal__description {
    color: var(--neutral-900);
}

body.light-mode .hint-cost-display {
    background-color: var(--neutral-100);
    border-color: var(--primary-500);
}

body.light-mode .hint-cost-crypto {
    color: var(--primary-500);
}

body.light-mode .hint-cost-note {
    color: var(--neutral-700);
}

body.light-mode .sp-modal--hint-cost .sp-modal__checkbox {
    background-color: var(--neutral-100);
}

body.light-mode .sp-modal--hint-cost .sp-modal__checkbox label {
    color: var(--neutral-900);
}

body.light-mode #hint-cost-cancel {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--neutral-400);
}

body.light-mode #hint-cost-confirm {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    border-color: var(--primary-500);
}

body.light-mode #hint-cost-cancel:hover,
body.light-mode #hint-cost-confirm:hover {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
    color: var(--neutral-100);
}

/* Mobile responsive for hint cost modal */
@media only screen and (max-width: 888px) {
    .sp-modal__container--hint-cost {
        padding: var(--space-lg);
        margin: var(--space-md);
    }
    
    .sp-modal__actions--hint-cost {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    #hint-cost-cancel,
    #hint-cost-confirm {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    
    .hint-cost-crypto {
        font-size: 1.25rem;
    }
}

/* v6.1: help stays above the live puzzle, which keeps its timer running. */
.settings-note { font-size: 0.75rem; opacity: 0.7; margin: 0.5rem 0; text-align: center; }
.about-dialog {
    position: fixed;
    inset: 0;
    width: min(900px, calc(100vw - 24px));
    max-width: none;
    height: min(850px, calc(100dvh - 24px));
    max-height: none;
    margin: auto;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 12px;
    background: #171717;
    color: #eee;
    box-sizing: border-box;
    overflow: hidden;
}
.about-dialog::backdrop { background: rgb(0 0 0 / 0.75); }
.about-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.about-dialog iframe { display: block; flex: 1 1 0; min-width: 0; min-height: 0; width: 100%; border: 0; }
.about-dialog #about-close {
    flex: 0 0 auto;
    align-self: flex-end;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 24px;
}
html:has(.about-dialog[open]), body:has(.about-dialog[open]) { overflow: hidden; }
body.light-mode .about-dialog { background: #f5f5f5; color: #222; }

/* Help has one document scrollbar, with no fixed-width or nested scrolling card. */
body.help-page { display: block; min-height: 100dvh; overflow-x: hidden; }
.help-page #parent-about-container { overflow: visible; width: 100%; padding: 0; box-sizing: border-box; }
.help-page #about-container {
    box-sizing: border-box;
    width: min(840px, 100%);
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding: clamp(12px, 4vw, 28px);
    overflow: visible;
}
.help-embedded #about-container { border: 0; border-radius: 0; box-shadow: none; }
.help-page .about-main-headline { font-size: clamp(36px, 10vw, 64px); line-height: 1.1; overflow-wrap: anywhere; }
.help-page .about-sub-headline { margin: 8px 0 20px; }
.help-topic { border-top: 1px solid var(--dm-border); text-align: left; }
.help-topic summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--accent-500);
    list-style: none;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary::before { content: '+'; flex: 0 0 16px; color: var(--dm-text); text-align: center; }
.help-topic[open] summary::before { content: '−'; }
.help-topic summary:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; border-radius: 4px; }
.help-topic .about-body-text { display: block; padding: 0 0 16px 28px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
body.light-mode .help-topic summary { color: var(--primary-600); }
body.light-mode .help-topic summary::before { color: var(--primary-900); }
@media (max-width: 600px) {
    .about-dialog { padding: 8px; border-radius: 10px; }
    .help-page .about-sub-headline { margin-bottom: 14px; }
}