/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- Global Styles & Layout (Night Mode - Default) --- */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Use Poppins font */
    background-color: #0d0a1b; /* Darker, blue/purple tint */
    color: #e0e0f0; /* Lighter, slightly blue text */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.game-container {
    display: flex;
    background-color: #1a152e; /* Base color for game container, slightly lighter */
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), 0 0 15px #6a0dad50; /* Added purple glow */
    padding: 20px;
    gap: 20px;
    max-width: 1200px;
    width: 95%;
    height: 90vh;
    box-sizing: border-box;
    max-height: 95vh;
    overflow: hidden;
    
    /* Optional gradient border */
    position: relative;
    border: 2px solid transparent;
    background-image: linear-gradient(#1a152e, #1a152e), linear-gradient(to right, #6A0DAD, #2A9D8F); /* Purple to Cyan */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease;
}


/* --- Left Panel (Navigation) --- */
.left-panel {
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background-color: #2b2240; /* Left panel background, dark purple */
    border-radius: 10px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

/* LOGO STYLES */
#app-logo {
    color: #2A9D8F; /* Cyan color */
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    padding: 15px 0 25px 0; /* Space it out */
    text-shadow: 0 0 10px rgba(42, 157, 143, 0.5);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#app-logo img {
    max-width: 100px; /* Maximum logo width */
    height: auto;     /* Height maintains aspect ratio */
    display: block;   /* Image as block element */
    margin: 0 auto;   /* Center the image */
    filter: drop-shadow(0 0 8px rgba(106, 13, 173, 0.7)); /* Add purple glow */
    transition: filter 0.3s ease;
}
/* END LOGO STYLES */


.nav-button {
    background-color: #3f355c; /* Nav button color */
    color: #e0e0f0;
    border: none;
    padding: 12px 10px;
    text-align: left;
    font-size: 0.95em;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Add margin to the first button after the logo */
.left-panel .nav-button:first-of-type {
    margin-top: 10px;
}

.nav-button:hover {
    background-color: #5a4b80; /* Hover effect */
    transform: translateY(-2px);
}

.nav-button i {
    font-size: 1.1em;
    width: 20px;
    text-align: center;
    color: #8c7ae6; /* Icon color */
    transition: color 0.3s ease;
}

/* --- Center Area (Main Game Content) --- */
.center-area {
    flex-grow: 1;
    background: #110f21; /* Darker solid background */
    background-size: cover;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
    border: 2px solid #5d359e; /* Purple border */
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.game-title {
    margin-top: 0;
    color: #e0e0f0;
    text-shadow: 0 0 8px rgba(106, 13, 173, 0.7); /* Purple glow effect on title */
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* --- STYLE FOR TIMER --- */
#timer {
    font-size: 1.2em;
    color: #8c7ae6; /* Bright purple */
    text-shadow: 0 0 5px rgba(140, 122, 230, 0.5);
    margin: 5px 0 15px 0;
    flex-shrink: 0;
    font-weight: 600;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* --- HOW TO PLAY STYLES --- */
#how-to-play {
    width: 90%;
    max-width: 450px;
    background-color: rgba(43, 34, 64, 0.7); /* Match left panel */
    border: 1px dashed #5d359e;
    border-radius: 10px;
    padding: 15px 25px;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, display 0.3s ease;
}

#how-to-play h3 {
    margin-top: 0;
    text-align: center;
    color: #2A9D8F; /* Cyan */
    text-shadow: 0 0 8px rgba(42, 157, 143, 0.5);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#how-to-play ol {
    padding-left: 25px;
    font-size: 0.9em;
    line-height: 1.7;
}

#how-to-play li {
    margin-bottom: 10px;
}
/* --- END HOW TO PLAY STYLES --- */


.image-upload-section {
    margin-bottom: 20px;
    flex-shrink: 0;
    display: none; /* Hidden by default */
}

.upload-button {
    background: linear-gradient(to right, #6A0DAD, #2A9D8F); /* Purple to cyan gradient */
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    box-shadow: 0 0 10px rgba(106, 13, 173, 0.4);
}

.upload-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 15px rgba(106, 13, 173, 0.6);
}

.settings-button-top {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(63, 53, 92, 0.7); /* Darker, themed */
    color: #e0e0f0;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.settings-button-top:hover {
    background-color: rgba(84, 71, 122, 0.9);
}

/* --- Puzzle Area (Pieces & Board) --- */
.puzzle-area {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-grow: 1;
}

#board-container {
    border: 5px solid #6A0DAD; /* Stronger purple border */
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    width: 310px; /* Fixed size */
    height: 310px; /* Fixed size */
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Fixed grid */
    grid-template-rows: repeat(3, 100px); /* Fixed grid */
    gap: 5px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7), 0 0 15px rgba(106, 13, 173, 0.5); /* Glow on board */
    border-radius: 5px;
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#piece-container {
    border: 2px dashed rgba(172, 172, 230, 0.4); /* Lighter dashed lines */
    background-color: rgba(25, 20, 48, 0.5); /* Background for pieces */
    padding: 10px;
    width: 310px; /* Fixed size */
    height: 310px; /* Fixed size */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    border-radius: 5px;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.board-slot {
    width: 100px; /* Fixed size */
    height: 100px; /* Fixed size */
    background-color: rgba(172, 172, 230, 0.08); /* More visible slots */
    border: 1px dotted rgba(172, 172, 230, 0.3);
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.puzzle-piece {
    width: 100px; /* Fixed size */
    height: 100px; /* Fixed size */
    cursor: grab;
    border: 1px solid rgba(172, 172, 230, 0.5); /* Piece border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: transform 0.1s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
    background-repeat: no-repeat;
}

.puzzle-piece:active {
    cursor: grabbing;
    transform: scale(1.08); /* Bigger on drag */
    z-index: 10;
    box-shadow: 0 0 15px rgba(106, 13, 173, 0.7); /* Glow on drag */
}

/* --- Right Panel (Original Image Preview) --- */
.right-panel {
    width: 250px;
    background-color: #2b2240; /* Same as left panel */
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.right-panel h3 {
    margin-top: 0;
    color: #e0e0f0;
    text-shadow: 0 0 5px rgba(140, 122, 230, 0.3);
    font-weight: 600;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#original-image-preview {
    width: 200px;
    height: 200px;
    border: 3px solid #6A0DAD; /* Purple preview border */
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 5px;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(106, 13, 173, 0.4);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#original-image-preview img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

/* --- LEADERBOARD STYLES --- */
#leaderboard-panel {
    width: 200px; /* Match preview width */
    height: 150px; /* Set a height */
    background-color: rgba(0, 0, 0, 0.3);
    border: 3px solid #5d359e; /* Match center panel border */
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto; 
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-top: 15px; /* Add space from goal panel */
}

#leaderboard-panel h4 {
    margin: 0 0 10px 0;
    text-align: center;
    color: #e0e0f0;
    border-bottom: 1px solid #5d359e;
    padding-bottom: 5px;
    font-weight: 600;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.leaderboard-entry {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    padding: 4px 0;
    border-bottom: 1px dashed #3f355c;
}
/* --- END OF LEADERBOARD STYLES --- */

/* --- CHARITY INFO STYLES --- */
#charity-info {
    font-size: 11px;
    text-align: center;
    line-height: 1.4;
    background-color: rgba(42, 157, 143, 0.15); /* Cyan background */
    border: 1px dashed #2A9D8F; /* Cyan border */
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    margin-top: -5px; /* Pull it up closer */
    margin-bottom: 15px;
    color: #e0e0f0;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

#charity-info strong {
    color: #fff;
    font-weight: bold;
}

#charity-info a {
    color: #34e0c9; /* Bright Cyan Link */
    text-decoration: underline;
    word-break: break-all; /* Ensure long links don't break layout */
    font-weight: 600;
}

#charity-info a:hover {
    color: #fff;
}
/* --- END OF CHARITY INFO STYLES --- */

/* --- TX HISTORY STYLES --- */
.left-panel #tx-history-panel {
    width: calc(100% - 20px); /* Fill left panel width, minus padding */
    height: 120px; /* Set a height */
    background-color: rgba(0, 0, 0, 0.3);
    border: 3px solid #5d359e;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto; 
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-top: 10px; /* Space from buttons above */
}

#tx-history-panel h4 {
    margin: 0 0 10px 0;
    text-align: center;
    color: #e0e0f0;
    border-bottom: 1px solid #5d359e;
    padding-bottom: 5px;
    font-weight: 600;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.tx-history-entry {
    font-size: 0.85em;
    padding: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-history-entry a {
    color: #2A9D8F; /* Cyan link */
    text-decoration: none;
    transition: color 0.2s ease;
}

.tx-history-entry a:hover {
    color: #34e0c9;
}

/* Hide from right panel */
.right-panel #tx-history-panel {
    display: none;
}
.right-panel #charity-goal-panel {
    display: none;
}
/* --- END OF TX HISTORY STYLES --- */


/* --- STYLE FOR TESTNET WARNING --- */
#testnet-warning {
    font-size: 11px;
    text-align: center;
    line-height: 1.4;
    opacity: 0.9;
    background-color: rgba(106, 13, 173, 0.2); /* Transparent purple bg */
    border: 1px dashed #6A0DAD; /* Purple dashed border */
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    /* margin-top: 5px; (No longer needed) */
    margin-bottom: 15px;
    color: #e0e0f0; /* Lighter warning text */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

#testnet-warning strong {
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease;
}

/* --- THEME SWITCH STYLES --- */
.left-panel .theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* Push to bottom of left panel */
    margin-bottom: 10px; /* Small space from bottom */
    gap: 10px;
    width: calc(100% - 20px); /* Fill left panel width, minus padding */
    padding-top: 10px; /* Space from content above */
    border-top: 1px dashed #3f355c; /* Separator line */
    transition: border-color 0.3s ease;
}

/* Hide from right panel */
.right-panel .theme-switch-wrapper {
    display: none;
}
/* --- END MODIFICATION --- */

.theme-switch {
    position: relative;
    display: inline-block;
    width: 45px; /* Adjust width */
    height: 25px; /* Adjust height */
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #6A0DAD; /* Night mode color */
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 0 5px rgba(106, 13, 173, 0.5);
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px; /* Adjust size of the circle */
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #007bff; /* Day mode color (blue) */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input:focus + .slider {
    box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px); /* Move circle */
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 25px; /* Make it round */
}

.slider.round:before {
    border-radius: 50%; /* Make circle round */
}

.theme-switch-wrapper em {
    font-size: 0.9em;
    font-style: normal;
    color: #e0e0f0;
    transition: color 0.3s ease;
}
/* --- END THEME SWITCH STYLES --- */


/* --- STYLE FOR DISCONNECT BUTTON --- */
#disconnect-wallet-button {
    display: none;
    background-color: #e74c3c; /* Brighter red */
    margin-top: 10px;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

#disconnect-wallet-button:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
}


/* --- Win Modal Styles --- */
#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Darker overlay */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#modal-content {
    background-color: #2b2240; /* Dark purple modal bg */
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8), 0 0 20px #6A0DAD80; /* Modal glow */
    text-align: center;
    color: #e0e0f0;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

#modal-content h2 {
    margin-top: 0;
    color: #8c7ae6; /* Bright purple modal title */
    text-shadow: 0 0 10px rgba(140, 122, 230, 0.7);
    font-weight: 700;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#modal-content p {
    font-size: 1.1em;
}

#modal-final-time {
    font-size: 1.4em;
    color: #2A9D8F; /* Cyan color for the time */
    text-shadow: 0 0 8px rgba(42, 157, 143, 0.5);
    margin: 15px 0;
    font-weight: 600;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

#try-again-button, #share-twitter-button {
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.2s ease;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#try-again-button {
    background-color: #6A0DAD; /* CARV Purple */
    color: #fff;
}

#try-again-button:hover {
    background-color: #7b2e5e; /* slightly lighter */
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 15px rgba(106, 13, 173, 0.6);
}

#share-twitter-button {
    background-color: #1DA1F2; /* Twitter Blue */
    color: #fff;
    /* --- PADDING ADJUSTMENT FOR LONGER TEXT --- */
    padding: 12px 20px 12px 15px; /* Top, Right, Bottom, Left */
    /* ----------------------------------------------- */
}

#share-twitter-button:hover {
    background-color: #0c85d0;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 15px rgba(29, 161, 242, 0.6);
}


/* === INTRO MODAL STYLES === */

#intro-modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Darker overlay for intro modal */
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#intro-modal-content {
    background-color: #2b2240; /* Dark purple modal bg */
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8), 0 0 25px #2A9D8F80; /* Green/Blue glow on intro */
    text-align: center;
    color: #e0e0f0;
    max-width: 500px;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

#intro-modal-content h2 {
    margin-top: 0;
    color: #2A9D8F; /* Bright green/blue intro title */
    text-shadow: 0 0 10px rgba(42, 157, 143, 0.7);
    font-weight: 700;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#intro-modal-content p {
    font-size: 1.05em;
}

#intro-ok-button {
    background: linear-gradient(to right, #2A9D8F, #6A0DAD); /* Green to purple gradient */
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-size: 1.1em;
    margin-top: 25px;
    transition: all 0.2s ease;
    width: auto;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(42, 157, 143, 0.4);
}

#intro-ok-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 15px rgba(42, 157, 143, 0.6);
}


/* --- === NEW: DAY MODE STYLES === --- */
body.day-mode {
    background-color: #f0f2f5; /* Light grey background */
    color: #333; /* Darker text */
}

body.day-mode .game-container {
    background-color: #ffffff; /* White container */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 100, 200, 0.2); /* Lighter shadow with blue tint */
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, #007bff, #28a745); /* Blue to Green */
}

body.day-mode .left-panel,
body.day-mode .right-panel {
    background-color: #e9ecef; /* Lighter panel background */
    color: #333;
}

body.day-mode #app-logo {
    color: #007bff; /* Blue logo text */
    text-shadow: none;
}

body.day-mode #app-logo img {
    filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.5)); /* Blue glow */
}

body.day-mode .nav-button {
    background-color: #dee2e6;
    color: #333;
}

body.day-mode .nav-button:hover {
    background-color: #c9d2da;
}

body.day-mode .nav-button i {
    color: #007bff; /* Blue icons */
}

body.day-mode .center-area {
    background: #f8f9fa; /* Very light grey background */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    border-color: #007bff; /* Blue border */
}

body.day-mode .game-title {
    color: #333;
    text-shadow: none;
}

body.day-mode #timer {
    color: #007bff; /* Blue timer */
    text-shadow: none;
}

body.day-mode #how-to-play {
    background-color: rgba(233, 236, 239, 0.7);
    border-color: rgba(0, 123, 255, 0.4);
}

body.day-mode #how-to-play h3 {
    color: #007bff;
    text-shadow: none;
}

body.day-mode .upload-button {
    background: linear-gradient(to right, #007bff, #28a745); /* Blue to green gradient */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

body.day-mode .upload-button:hover {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
}

body.day-mode .settings-button-top {
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: none;
}

body.day-mode .settings-button-top:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

body.day-mode #board-container {
    border-color: #007bff; /* Blue border */
    background-color: rgba(233, 236, 239, 0.7); /* Light grey bg */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 123, 255, 0.3);
}

body.day-mode #piece-container {
    background-color: rgba(233, 236, 239, 0.5);
    border-color: rgba(0, 123, 255, 0.4);
}

body.day-mode .board-slot {
    background-color: rgba(0, 123, 255, 0.05);
    border-color: rgba(0, 123, 255, 0.3);
}

body.day-mode .puzzle-piece {
    border-color: rgba(0, 123, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.day-mode .puzzle-piece:active {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.7); /* Glow on drag */
}

body.day-mode .right-panel h3 {
    color: #333;
    text-shadow: none;
}

body.day-mode #original-image-preview {
    border-color: #007bff;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

body.day-mode #leaderboard-panel {
    background-color: rgba(233, 236, 239, 0.7);
    border-color: #007bff;
}

body.day-mode #leaderboard-panel h4 {
    color: #333;
    border-color: #dee2e6;
}

body.day-mode .leaderboard-entry {
    border-color: #dee2e6;
}

body.day-mode #charity-info {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.4);
    color: #555;
}
body.day-mode #charity-info strong {
    color: #28a745;
}
body.day-mode #charity-info a {
    color: #007bff;
}
body.day-mode #charity-info a:hover {
    color: #0056b3;
}


body.day-mode #tx-history-panel {
    background-color: rgba(233, 236, 239, 0.7);
    border-color: #007bff;
}

body.day-mode #tx-history-panel h4 {
    color: #333;
    border-color: #dee2e6;
}

body.day-mode .tx-history-entry a {
    color: #007bff;
}
body.day-mode .tx-history-entry a:hover {
    color: #0056b3;
}


body.day-mode #testnet-warning {
    background-color: rgba(0, 123, 255, 0.1);
    border-color: rgba(0, 123, 255, 0.4);
    color: #555;
}

body.day-mode #testnet-warning strong {
    color: #007bff;
}

body.day-mode .theme-switch-wrapper em {
    color: #333; /* Dark text for the label */
}

body.day-mode #modal-content {
    background-color: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 123, 255, 0.3);
    color: #333;
}

body.day-mode #modal-content h2 {
    color: #007bff;
    text-shadow: none;
}

body.day-mode #modal-final-time {
    color: #28a745; /* Green color for time */
    text-shadow: none;
}

body.day-mode #try-again-button {
    background-color: #007bff; /* Blue */
}
body.day-mode #try-again-button:hover {
    background-color: #0056b3; /* Darker Blue */
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
}

body.day-mode #intro-modal-content {
    background-color: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2), 0 0 25px rgba(0, 123, 255, 0.4);
    color: #333;
}

body.day-mode #intro-modal-content h2 {
    color: #007bff; /* Blue intro title */
    text-shadow: none;
}

body.day-mode #intro-ok-button {
    background: linear-gradient(to right, #007bff, #28a745); /* Blue to green gradient */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.4);
}
body.day-mode #intro-ok-button:hover {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.6);
}