:root {
    --primary: #3b82f6;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gray: #6b7280;
    --light-gray: #f3f4f6;
    --dark-gray: #374151;
    --white: #ffffff;
    --black: #111827;
    --border-radius: 8px;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

/* --- BASIS STYLING --- */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; }
body { 
    background-color:var(--light-gray); 
    color:var(--black); 
    min-height:100vh; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    padding:1rem; 
    transition: background-color 0.3s; 
}
body.dark-mode { background-color:var(--dark-gray); color:var(--white); }

/* Main container with side ads */
.main-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 1rem;
    margin: 0 auto;
}

/* Game content area */
.game-content {
    flex: 0 0 600px;
    width: 600px;
}

/* Ad container styling */
.ad-container {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    border: 1px dashed var(--gray);
    min-height: 600px;
}
body.dark-mode .ad-container {
    background-color: #4b5563;
    border-color: #6b7280;
}

.ad-label {
    font-size: 0.8rem;
    color: var(--gray);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.ad-content {
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Hide side ads on mobile */
@media (max-width: 768px) {
    .ad-container {
        display: none;
    }
    
    .main-container {
        flex-direction: column;
    }
    
    .game-content {
        max-width: 100%;
    }
}

header { text-align:center; margin-bottom:1.5rem; padding:0.5rem; position:relative; }
h1 { font-size:2.2rem; color:var(--primary); margin-bottom:0.3rem; }
.tagline { font-size:1.1rem; color:var(--gray); margin-bottom:0.5rem; }
.game-info { display:flex; justify-content:space-between; margin-bottom:1rem; font-size:0.9rem; }

/* Header row with day selector and menu */
.header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }

/* Day Selector Dropdown - HIDDEN */
.day-selector { display:none; }

/* Three-dot menu - Positioned at top right */
.menu-container { position:absolute; top:0; right:0; }
.menu-btn { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--dark-gray); padding:0.5rem; line-height: 0.8; }
body.dark-mode .menu-btn { color:var(--white); }
.menu-dropdown { display:none; position:absolute; right:0; top:100%; background-color:var(--white); border-radius:var(--border-radius); box-shadow:var(--shadow); min-width:180px; z-index:100; padding:0.5rem 0; }
body.dark-mode .menu-dropdown { background-color:#4b5563; }
.menu-dropdown.show { display:block; }
.menu-item { display:block; width:100%; padding:0.8rem 1.2rem; background:none; border:none; text-align:left; cursor:pointer; font-size:1rem; color:var(--black); transition:background-color 0.2s; }
body.dark-mode .menu-item { color:var(--white); }
.menu-item:hover { background-color:var(--light-gray); }
body.dark-mode .menu-item:hover { background-color:#6b7280; }
.menu-item:disabled { opacity:0.5; cursor:not-allowed; }

.clues-container { background-color:var(--white); border-radius:var(--border-radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem; text-align:center; }
body.dark-mode .clues-container { background-color:#4b5563; }
.clues-title { font-size:1.2rem; margin-bottom:1rem; color:var(--dark-gray); }
body.dark-mode .clues-title { color:var(--white); }
.clues { display:flex; flex-wrap:wrap; justify-content:center; gap:0.8rem; margin-bottom:1.5rem; }
.clue { background-color:var(--light-gray); padding:0.8rem 1.2rem; border-radius:var(--border-radius); font-weight:600; font-size:1.1rem; box-shadow:0 2px 4px rgba(0,0,0,0.05); }
body.dark-mode .clue { background-color:#6b7280; }
.game-area { background-color:var(--white); border-radius:var(--border-radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem; }
body.dark-mode .game-area { background-color:#4b5563; }
.input-container { display:flex; gap:0.5rem; margin-bottom:1.5rem; }
input { flex:1; padding:0.8rem 1rem; border:2px solid #d1d5db; border-radius:var(--border-radius); font-size:1rem; transition:border-color 0.2s; color: var(--black); }
body.dark-mode input { background-color:#4b5563; border-color:#9ca3af; color:var(--white); }
input:focus { outline:none; border-color:var(--primary); }
button { background-color:var(--primary); color:white; border:none; border-radius:var(--border-radius); padding:0.8rem 1.5rem; font-size:1rem; font-weight:600; cursor:pointer; transition:background-color 0.2s; }
button:hover { background-color:#2563eb; }
button:disabled { background-color:#9ca3af; cursor:not-allowed; }
.hint-btn { background-color:var(--warning); }
.hint-btn:hover { background-color:#d97706; }
.guesses-container { margin-top:1.5rem; }
.guess { display:flex; align-items:center; margin-bottom:0.8rem; padding:0.8rem; border-radius:var(--border-radius); }
body.dark-mode .guess { color: var(--white); }
.guess-close { background-color:var(--success); color:white; }
body.dark-mode .guess-close { background-color:var(--success); color:white; }
.guess-related { background-color:var(--warning); color:white; }
body.dark-mode .guess-related { background-color:var(--warning); color:white; }
.guess-far { background-color:var(--gray); color:white; }
body.dark-mode .guess-far { background-color:var(--gray); color:white; }
.guess-word { font-weight:600; margin-right:0.5rem; }
.guess-feedback { font-size:0.9rem; opacity:0.9; }
.hint-container { margin-top:1rem; padding:1rem; background-color:var(--light-gray); border-radius:var(--border-radius); border-left:4px solid var(--warning); display:none; }
body.dark-mode .hint-container { background-color:#6b7280; }
.hint-title { font-weight:600; margin-bottom:0.5rem; color:var(--dark-gray); }
body.dark-mode .hint-title { color:var(--white); }
.hint-text { font-style:italic; }
.result { text-align:center; padding:1.5rem; border-radius:var(--border-radius); margin-top:1.5rem; display:none; }
.result.success { background-color:var(--success); color:white; display:block; }
.result.failure { background-color:var(--danger); color:white; display:block; }
.theme-reveal { font-size:1.5rem; font-weight:700; margin:1rem 0; }
.share-container { margin-top:1.5rem; text-align:center; }
.share-btn { background-color:var(--white); color:var(--success); margin-top:0.5rem; border: 2px solid var(--white); }
.share-btn:hover { background-color:rgba(255,255,255,0.9); }
.theme-toggle { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--dark-gray); }
body.dark-mode .theme-toggle { color:var(--white); }
.instructions { background-color:var(--white); border-radius:var(--border-radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem; font-size:0.9rem; }
body.dark-mode .instructions { background-color:#4b5563; }
.instructions h2 { margin-bottom:0.8rem; color:var(--primary); }
.instructions ul { padding-left:1.5rem; margin-bottom:1rem; }
.instructions li { margin-bottom:0.5rem; }
.color-key { display:flex; justify-content:center; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.color-item { display:flex; align-items:center; gap:0.3rem; font-size:0.8rem; }
.color-box { width:1rem; height:1rem; border-radius:3px; }
.color-green { background-color:var(--success); }
.color-yellow { background-color:var(--warning); }
.color-gray { background-color:var(--gray); }
.puzzle-date { font-style:italic; margin-bottom:1rem; color:var(--gray); font-size:0.9rem; }
body.dark-mode .puzzle-date { color:#d1d5db; }
.word-count { margin-top:0.5rem; font-size:0.9rem; color:var(--gray); display: none; }
body.dark-mode .word-count { color:#d1d5db; }

/* Modal Styling */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; }
.modal-content { background-color:var(--white); padding:2rem; border-radius:var(--border-radius); max-width:500px; width:90%; box-shadow:var(--shadow); }
body.dark-mode .modal-content { background-color:#4b5563; color:var(--white); }
.modal h2 { margin-bottom:1rem; color:var(--primary); }
.modal p { margin-bottom:1rem; }
.modal-close { background-color:var(--gray); margin-top:1rem; }
.modal-close:hover { background-color:#6b7280; }

/* Day Selection Modal */
.day-list { max-height:400px; overflow-y:auto; margin:1rem 0; }
.day-item { padding:0.8rem 1rem; border-bottom:1px solid #e5e7eb; cursor:pointer; transition:background-color 0.2s; display:flex; align-items:center; justify-content:space-between; }
body.dark-mode .day-item { border-color:#6b7280; }
.day-item:hover { background-color:var(--light-gray); }
body.dark-mode .day-item:hover { background-color:#6b7280; }
.day-item.current { background-color:var(--primary); color:white; }
.day-item.solved { background-color:var(--success); color:white; }
.day-item.failed { background-color:var(--danger); color:white; }
.day-item.locked { opacity:0.6; cursor:not-allowed; }
.day-info { flex:1; }
.day-date { font-weight:bold; }
.day-theme { font-size:0.9rem; opacity:0.8; margin-top:0.2rem; }
.day-status { margin-left:1rem; }

/* Success Screen Styling */
.success-screen { text-align:center; padding:2rem; background-color:var(--success); color:white; border-radius:var(--border-radius); margin-top:1.5rem; }
.success-title { font-size:2rem; margin-bottom:1rem; }
.success-theme { font-size:1.8rem; font-weight:700; margin:1.5rem 0; }
.success-attempts { font-size:1.2rem; margin-bottom:1.5rem; }

/* Streak styling */
.streak-container { display:flex; justify-content:center; align-items:center; gap:0.5rem; margin-top:1rem; }
.streak-icon { font-size:1.5rem; }
.streak-count { font-size:1.2rem; font-weight:bold; }

/* Stats styling - Updated to 6 blocks */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1rem 0; }
.stat-item { text-align:center; padding:1rem; background-color:var(--light-gray); border-radius:var(--border-radius); }
body.dark-mode .stat-item { background-color:#6b7280; }
.stat-value { font-size:2rem; font-weight:bold; color:var(--primary); }
body.dark-mode .stat-value { color:var(--primary); }
.stat-label { font-size:0.9rem; color:var(--gray); }
body.dark-mode .stat-label { color:#d1d5db; }

/* Progress bar */
.progress-container { margin:1rem 0; }
.progress-bar { height:8px; background-color:var(--light-gray); border-radius:4px; overflow:hidden; }
body.dark-mode .progress-bar { background-color:#6b7280; }
.progress-fill { height:100%; background-color:var(--primary); transition:width 0.3s ease; }

/* Animation for new guesses */
@keyframes slideIn {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}
.guess { animation:slideIn 0.3s ease; }

/* Ranking system styling */
.guess-ranking { display: flex; align-items: center; margin-bottom: 0.5rem; }
.rank-number { width: 25px; text-align: center; font-weight: bold; margin-right: 0.5rem; }
.rank-guess { flex: 1; display: flex; align-items: center; padding: 0.5rem; border-radius: var(--border-radius); }
.rank-feedback { margin-left: 0.5rem; font-size: 0.8rem; opacity: 0.8; }

/* Difficulty selection styling */
.difficulty-selection { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.difficulty-btn { padding: 0.8rem 1.5rem; background-color: var(--light-gray); border: 2px solid var(--gray); border-radius: var(--border-radius); cursor: pointer; transition: all 0.2s; font-weight: 600; color: var(--black); }
body.dark-mode .difficulty-btn { background-color: #4b5563; color: var(--white); border-color: #6b7280; }
.difficulty-btn:hover { background-color: var(--gray); color: white; }
body.dark-mode .difficulty-btn:hover { background-color: #6b7280; }
.difficulty-btn.active { background-color: var(--primary); color: white; border-color: var(--primary); }
body.dark-mode .difficulty-btn.active { background-color: var(--primary); color: white; border-color: var(--primary); }
.difficulty-btn.completed { background-color: var(--success); color: white; border-color: var(--success); }
body.dark-mode .difficulty-btn.completed { background-color: var(--success); color: white; border-color: var(--success); }
.difficulty-btn.failed { background-color: var(--danger); color: white; border-color: var(--danger); }
body.dark-mode .difficulty-btn.failed { background-color: var(--danger); color: white; border-color: var(--danger); }

@media (max-width:480px) {
    .clues { gap:0.5rem; }
    .clue { padding:0.6rem 1rem; font-size:1rem; }
    .input-container { flex-direction:column; }
    button { width:100%; margin-top:0.5rem; }
    .hint-btn { margin-left:0; }
    .header-row { flex-direction:column; gap:1rem; }
    .day-selector { margin-right:0; width:100%; }
    .stats-grid { grid-template-columns:1fr; }
    .difficulty-selection { flex-direction: column; }
        .game-content {
        flex: 1 1 auto;   /* laat groeien en krimpen */
        width: 100%;      /* past aan schermbreedte */
        min-width: auto;  /* geen minimale beperking */
        max-width: 100%;  /* past binnen scherm */
    }
}

/* Add these styles to your existing CSS file */

/* Language modal styling */
.language-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.language-btn {
    padding: 12px 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    color: var(--black);
}

.language-btn:hover {
    background: #f5f5f5;
    border-color: var(--primary);
}

.language-btn.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.dark-mode .language-btn {
    background: #333;
    border-color: #555;
    color: var(--white);
}

.dark-mode .language-btn:hover {
    background: #444;
    border-color: var(--primary);
}

.dark-mode .language-btn.active {
    background: var(--primary);
    color: var(--white);
}