.wordle-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.wordle-game-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto auto;
    gap: 30px 30px;
    row-gap: 15px;
    align-items: start;
}

.wordle-game {
    grid-column: 1;
    grid-row: 1 / span 3;
    text-align: center;
}

.wordle-leaderboard {
    grid-column: 2;
    grid-row: 1;
}

.wordle-ads-section {
    grid-column: 2;
    grid-row: 2;
    margin: 5px 0;
    text-align: center;
}

.previous-words-section {
    grid-column: 2;
    grid-row: 3;
}

.wordle-header h1 {
    font-size: 2.5em;
    margin: 0;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #333;
}

.wordle-header p {
    margin: 10px 0 30px 0;
    color: #666;
    font-size: 1.1em;
}

.wordle-board {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 5px;
    margin: 30px 0;
    justify-content: center;
}

.wordle-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.wordle-cell {
    width: 62px;
    height: 62px;
    border: 2px solid #d3d6da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    background-color: white;
    transition: all 0.3s ease;
}

.wordle-cell.filled {
    border-color: #878a8c;
    color: #333;
}

.wordle-cell.correct {
    background-color: #6aaa64;
    border-color: #6aaa64;
    color: white;
}

.wordle-cell.present {
    background-color: #c9b458;
    border-color: #c9b458;
    color: white;
}

.wordle-cell.absent {
    background-color: #787c7e;
    border-color: #787c7e;
    color: white;
}

.wordle-keyboard {
    margin: 30px 0;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    margin: 5px 0;
    gap: 3px;
}

.key {
    background-color: #d3d6da;
    border: none;
    border-radius: 4px;
    padding: 14px 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s;
    min-width: 40px;
}

.key:hover {
    background-color: #bbb;
}

.key.wide {
    padding: 14px 20px;
    font-size: 12px;
}

.key.correct {
    background-color: #6aaa64;
    color: white;
}

.key.present {
    background-color: #c9b458;
    color: white;
}

.key.absent {
    background-color: #787c7e;
    color: white;
}

.wordle-message {
    margin: 20px 0;
    font-size: 1.2em;
    font-weight: bold;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wordle-message.success {
    color: #6aaa64;
}

.wordle-message.error {
    color: #e74c3c;
}

.wordle-stats {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.wordle-stats h3 {
    margin: 0 0 20px 0;
    color: #333;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: 2em;
    font-weight: bold;
    color: #333;
}

.stat-label {
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
}

.new-game-btn {
    background-color: #6aaa64;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.new-game-btn:hover {
    background-color: #5a9954;
}

/* Timer and User Interface */
.daily-info {
    margin: 15px 0;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.wordle-timer {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    font-family: monospace;
}

.daily-status {
    font-size: 1.1em;
    font-weight: 500;
    color: #666;
}

.daily-status.can-play {
    color: #6aaa64;
}

.daily-status.already-played {
    color: #c9b458;
}

.admin-info {
    background-color: #fff3cd;
    border: 2px solid #ffeaa7;
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
    color: #856404;
    font-weight: bold;
}

.admin-info #adminWord {
    font-family: monospace;
    font-size: 1.2em;
    color: #d63031;
    letter-spacing: 2px;
}

.game-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.already-played-message {
    background-color: #fff3cd;
    border: 2px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.next-game-countdown {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

.user-info {
    background-color: #e8f5e8;
    padding: 8px 15px;
    border-radius: 4px;
    color: #2d5a2d;
    margin: 10px 0;
    font-weight: 500;
}


.score-display {
    background-color: #f0f7ff;
    border: 2px solid #6aaa64;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.final-score {
    font-size: 1.3em;
    color: #6aaa64;
    margin-bottom: 8px;
}

.leaderboard-position {
    color: #666;
    font-size: 0.9em;
}

/* Game Info Section - Shown below leaderboard when game starts */
.game-info-section {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--background-light, #f8f9fa);
    border: 1px solid var(--border-light, #ddd);
    border-radius: 8px;
}

.game-info-section .wordle-timer {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    font-family: monospace;
}

/* Dark mode styles for game info section */
.dark-mode .game-info-section {
    background-color: var(--dark-background-light);
    border-color: var(--dark-border);
}

.dark-mode .game-info-section .wordle-timer {
    color: var(--dark-text-color);
}

/* Sidebar Styles - Removed as components are now separate */

/* Leaderboard Styles - Updated to match world-news-customizer */
.wordle-leaderboard {
    background-color: var(--background-light, #f8f9fa);
    border: 1px solid var(--border-light, #ddd);
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.wordle-leaderboard h3 {
    margin: 0 0 15px 0;
    color: var(--text-dark, #333);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.leaderboard-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-light, #ddd);
}

.leaderboard-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-meta, #666);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.leaderboard-tab.active {
    color: var(--primary-color, #6aaa64);
    border-bottom: 2px solid var(--primary-color, #6aaa64);
}

.leaderboard-content {
    position: relative;
}

.leaderboard-list {
    min-height: 200px;
}

.leaderboard-item {
    padding: 15px 0;
}

.leaderboard-item:last-child {
    padding-bottom: 0;
}

/* Today's leaderboard layout */
.wordle-today-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* All-time leaderboard layout */
.wordle-alltime-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Position number styling */
.wordle-position-number {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.wordle-position-number.position-1 {
    color: #FFD700; /* Gold */
}

.wordle-position-number.position-2 {
    color: #C0C0C0; /* Silver */
}

.wordle-position-number.position-3 {
    color: #CD7F32; /* Bronze */
}

.wordle-position-number:not(.position-1):not(.position-2):not(.position-3) {
    color: var(--text-dark, #333);
}

/* Username styling */
.wordle-username {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark, #333);
    margin: 0;
    flex: 1;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove any borders from leaderboard items and their contents */
.leaderboard-item,
.leaderboard-item *,
.wordle-today-row,
.wordle-today-row *,
.wordle-alltime-row,
.wordle-alltime-row * {
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Completion time styling */
.wordle-completion-time {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-meta, #666);
    font-family: monospace;
    margin-left: auto;
}

/* Medal counts for all-time */
.wordle-medal-counts {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

.medal-number {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.medal-number.gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.medal-number.silver {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
}

.medal-number.bronze {
    background: linear-gradient(135deg, #CD7F32, #B8860B);
}

.loading {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
}

.medal {
    margin-right: 5px;
}

.medal.gold { color: #ffd700; }
.medal.silver { color: #c0c0c0; }
.medal.bronze { color: #cd7f32; }

/* Previous Words Styles - Updated to match world-news-customizer */
.previous-words-section {
    background-color: var(--background-light, #f8f9fa);
    border: 1px solid var(--border-light, #ddd);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.previous-words-section h3 {
    margin: 0 0 15px 0;
    color: var(--text-dark, #333);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-dark, #333);
}

.previous-words-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.previous-word-item {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-light, #eee);
}

.previous-word-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.previous-word-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.previous-word-text {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--primary-color, #6aaa64);
}

.previous-word-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-meta, #666);
}

.previous-word-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.8em;
    color: var(--text-meta, #666);
    margin-top: 8px;
}

.previous-word-stat {
    display: flex;
    justify-content: space-between;
}

.previous-word-stat-label {
    font-weight: 500;
}

.previous-word-stat-value {
    color: var(--text-dark, #333);
    font-weight: 600;
}

.no-previous-words {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .wordle-container {
        padding: 10px;
    }
    
    .wordle-game-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 20px;
    }
    
    .wordle-game {
        grid-column: 1;
        grid-row: 1;
        order: 1;
    }
    
    .wordle-leaderboard {
        grid-column: 1;
        grid-row: 2;
        order: 2;
    }
    
    .wordle-ads-section {
        grid-column: 1;
        grid-row: 3;
        order: 3;
        margin: 10px 0;
        min-height: 80px;
    }
    
    .wordle-ads-section .mobile-only {
        min-height: 80px;
    }
    
    .wordle-ads-section .mobile-only .adsbygoogle {
        min-height: 80px !important;
    }
    
    .previous-words-section {
        grid-column: 1;
        grid-row: 4;
        order: 4;
    }
    
    .wordle-cell {
        width: 50px;
        height: 50px;
        font-size: 1.5em;
    }
    
    .key {
        padding: 12px 8px;
        font-size: 12px;
        min-width: 35px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .wordle-timer {
        font-size: 1.2em;
    }
}

/* Dark mode styles for Wordle components */
.dark-mode .wordle-leaderboard {
    background-color: var(--dark-background-light);
    border-color: var(--dark-border);
}

.dark-mode .wordle-leaderboard h3 {
    color: var(--dark-text-color);
    border-bottom-color: var(--dark-border-accent);
}

.dark-mode .leaderboard-tabs {
    border-bottom-color: var(--dark-border);
}

.dark-mode .leaderboard-tab {
    color: var(--dark-text-meta);
}

.dark-mode .leaderboard-tab.active {
    color: var(--primary-color, #6aaa64);
}

/* Header Ad Visibility - Show on both desktop and mobile */
.wordle-container > .adsbygoogle:first-of-type {
    display: block !important;
    margin-bottom: 20px;
}

/* Mobile banner ad size constraint */
@media (max-width: 768px) {
    .wordle-container > .adsbygoogle:first-of-type,
    .wordle-container > ins.adsbygoogle:first-of-type {
        max-height: 150px !important;
        min-height: 60px !important;
        overflow: hidden !important;
        display: block !important;
    }
    
    .wordle-container > .adsbygoogle:first-of-type div,
    .wordle-container > .adsbygoogle:first-of-type iframe {
        max-height: 150px !important;
        height: 150px !important;
    }
}

/* Desktop banner ad styling */
@media (min-width: 769px) {
    .wordle-container > .adsbygoogle:first-of-type {
        display: block !important;
        margin-bottom: 30px;
        min-height: 90px;
    }
}

.dark-mode .leaderboard-item {
    border-bottom-color: var(--dark-border);
}

.dark-mode .wordle-username {
    color: var(--dark-text-color);
}

.dark-mode .wordle-completion-time {
    color: var(--dark-text-meta);
}

.dark-mode .wordle-position-number:not(.position-1):not(.position-2):not(.position-3) {
    color: var(--dark-text-color);
}

.dark-mode .previous-words-section {
    background-color: var(--dark-background-light);
    border-color: var(--dark-border);
}

.dark-mode .previous-words-section h3 {
    color: var(--dark-text-color);
    border-bottom-color: var(--dark-border-accent);
}

.dark-mode .previous-word-item {
    border-bottom-color: var(--dark-border);
}

.dark-mode .previous-word-date {
    color: var(--dark-text-meta);
}

.dark-mode .previous-word-stats {
    color: var(--dark-text-meta);
}

.dark-mode .previous-word-stat-value {
    color: var(--dark-text-color);
}


@media (max-width: 480px) {
    .wordle-cell {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
    }
    
    .key {
        padding: 10px 6px;
        font-size: 11px;
        min-width: 30px;
    }
    
}