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

/* Custom Mangal font for SSC mode - self-hosted */
@font-face {
    font-family: 'Mangal';
    src: url('/fonts/Mangal-Regular.ttf') format('truetype');
    font-weight: normal;    /* or 400 */
    font-style: normal;
    font-display: swap;     /* Prevents invisible text while loading */
}

@font-face {
    font-family: 'Mangal';
    src: url('/fonts/Mangal-Bold.ttf') format('truetype');
    font-weight: bold;      /* or 700 */
    font-style: normal;
    font-display: swap;
}

/* === 1. GLOBAL & UTILITY STYLES === */
:root {
    --light-bg: #ffffff;
    --light-text: #606770;
    --light-primary: #1877f2;
    --light-secondary: #65676b;
    --light-container-bg: #ffffff;
    --dark-bg: #18191a;
    --dark-container-bg: #242526;
    --dark-text: #e4e6eb;
    --dark-primary: #4599ff;
    --dark-secondary: #b0b3b8;
}

.hidden { display: none !important; }

html { height: 100%; overflow-y: scroll; scroll-behavior: smooth; }

body {
    min-height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Hind', sans-serif;
    background-color: #f0f2f5;
    color: var(--light-text);
    transition: background-color 0.3s, color 0.3s;
}

.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}

/* === 2. MAIN TEST CONTAINER === */
.test-container {
    background-color: var(--light-container-bg);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    width: 100%;
    max-width: 950px;
    text-align: center;
    transition: background-color .3s, color .3s, box-shadow .3s;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
}

.test-container h1 {
    color: var(--light-primary);
    margin-bottom: 25px;
    font-family: 'Hind', sans-serif;
    font-weight: 700;
    font-size: 2rem;
}

/* Loading Indicator */
.loading-indicator {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}
.loading-indicator.active { display: block; animation: spin 1s linear infinite; }

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

/* === 3. CONFIGURATION BAR === */
.config-bar {
    justify-content: center;
    display: flex;
    margin-bottom: 25px;
    align-items: center;
    gap: 20px;
    font-size: 1.1rem;
    flex-wrap: wrap;
    background-color: #f7f8fa;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #dddfe2;
}

.config-bar p { margin: 0; font-weight: 700; color: var(--light-secondary); }

/* Difficulty Radio Buttons (Simple/SSC/CRPF) */
.difficulty-selector {
    display: flex;
    gap: 15px;
    background-color: #ffffff;
    padding: 8px 15px;
    border-radius: 8px;
    align-items: center;
    border: 1px solid #e4e6eb;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
    color: var(--light-text);
    user-select: none;
    font-size: 1rem;
    transition: color 0.2s;
}

.radio-label:hover { color: var(--light-primary); }

.radio-label input[type="radio"] {
    accent-color: var(--light-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Time Selector Dropdown */
.time-selector {
    position: relative;
    background-color: #ffffff;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .3s;
    font-size: 1rem;
    color: var(--light-text);
    z-index: 15;
    border: 1px solid #e4e6eb;
    font-weight: 600;
    min-width: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.time-selector:hover { background-color: #f0f2f5; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background-color: var(--light-container-bg);
    border: 1px solid #dddfe2;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    min-width: 100%;
    z-index: 20;
    padding: 5px 0;
    overflow: hidden;
}

.dropdown-menu.show { display: block; animation: slideDown 0.2s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.dropdown-item {
    padding: 8px 15px;
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    color: var(--light-text);
    transition: background-color 0.2s;
}
.dropdown-item:hover { background-color: #f0f2f5; color: var(--light-primary); }

/* Volume & Icons */
.volume-control-container { display: flex; align-items: center; gap: 8px; }
.volume-slider { width: 80px; cursor: pointer; accent-color: var(--light-secondary); }
.icon-btn {
    background: none; border: none; cursor: pointer; padding: 8px;
    border-radius: 50%; transition: background-color 0.2s, transform 0.2s;
    color: var(--light-secondary); display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background-color: #e4e6eb; color: var(--light-primary); }

/* === 4. TEST AREA & TYPING DISPLAY === */
.test-area {
    position: relative;
    margin-bottom: 15px;
    contain: content;
}

/* The Box containing text to type */
.text-display {
    color: #606770;
    padding: 25px;
    border: 2px solid #e4e6eb;
    border-radius: 12px;
    height: 140px;
    overflow-y: hidden; /* JavaScript handles scrolling */
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none; /* User can't select text */
    transition: border-color .3s, color .3s, background-color .3s;
    font-family: 'Hind', sans-serif;
    font-size: 2rem;
    line-height: 1.8;
    text-align: left;
    user-select: none;
    background-color: #ffffff;
    will-change: transform, scroll-position;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}

/* FONT OVERRIDE FOR SSC/CRPF MODES */
.text-display.ssc-mode {
    font-family: 'Mangal', 'Hind', 'Noto Sans Devanagari', sans-serif;
    font-weight: 500;
}

.text-display:focus { outline: none; border-color: var(--light-primary); }

/* Character Styling */
.text-display span { display: inline; border-radius: 2px; transition: background-color 0.1s; }
span.space { padding: 0 4px; }
.current, span.space.current {
    background-color: rgba(24, 119, 242, 0.2);
    border-bottom: 3px solid var(--light-primary);
    color: #000;
}
.correct { color: #42b72a; }
.incorrect {
    color: #fa3e3e;
    background-color: rgba(250, 62, 62, 0.1);
    text-decoration: underline;
    text-decoration-color: #fa3e3e;
}

/* Overlays (Time's Up / Paused) */
.overlay-message {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, .85);
    color: #333;
    font-size: 2.2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
    backdrop-filter: blur(2px);
    flex-direction: column;
    cursor: pointer;
}
.overlay-message.show { opacity: 1; pointer-events: auto; }
.overlay-message .resume-prompt { font-size: 1.1rem; font-weight: 500; margin-top: 10px; color: #606770; }
#times-up-overlay { color: #e74c3c; cursor: default; }

/* Input Fields */
#typed-text-display {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #e4e6eb;
    box-sizing: border-box;
    font-family: 'Hind', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    font-size: 1.5rem;
    text-align: center;
    pointer-events: none; /* Read only visual */
}
.input-field { position: absolute; width: 0; height: 0; opacity: 0; z-index: -1; }

/* Highlight Key Legend */
.highlight-preview {
    margin: 10px 0;
    padding: 10px;
    background-color: #f7f8fa;
    border-radius: 8px;
    border: 1px solid #e4e6eb;
    font-size: 0.9rem;
    color: var(--light-secondary);
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
.highlight-preview .example-char { padding: 2px 6px; border-radius: 4px; font-weight: 600; font-size: 1rem; }
.highlight-preview .to-type { color: var(--light-text); border: 1px solid #ccc; }
.highlight-preview .current { background-color: rgba(24, 119, 242, 0.2); color: var(--light-primary); border-bottom: 2px solid var(--light-primary); }
.highlight-preview .correct { color: #42b72a; background-color: rgba(66, 183, 42, 0.1); }
.highlight-preview .incorrect { color: #fa3e3e; background-color: rgba(250, 62, 62, 0.1); text-decoration: underline; }

/* === 5. STATS & CONTROLS === */
.stats {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.stat {
    font-size: 1rem;
    padding: 12px 20px;
    border-radius: 10px;
    min-width: 110px;
    flex: 1;
    background-color: #ffffff;
    box-sizing: border-box;
    border: 1px solid #e4e6eb;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}
.stat:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.stat.hidden { display: none; }
.stat p { margin-bottom: 5px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; color: var(--light-secondary); font-weight: 700; }
.stat span { font-size: 2.2rem; font-weight: 700; color: var(--light-primary); font-family: 'Teko', sans-serif; line-height: 1; }
.stat span.timer-value { color: #d63384; }

/* Control Buttons */
.button-container { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }

button {
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    transition: all 0.2s ease;
    font-family: 'Hind', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

#reset-button { background-image: linear-gradient(135deg, #4caf50, #2e7d32); }
#pause-resume-button { background-image: linear-gradient(135deg, #3498db, #1877f2); }
#pause-resume-button:disabled { background-image: none; background-color: #bdc3c7; cursor: not-allowed; box-shadow: none; opacity: 0.7; }

button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, .2); }
button:active:not(:disabled) { transform: translateY(0); scale: 0.98; }

/* === 6. RESULTS SUMMARY (POPUP STYLE) === */
.results-summary-container {
    margin-top: 30px;
    padding: 30px;
    border-top: 1px solid #e4e6eb;
    background-color: #f8f9fa;
    border-radius: 12px;
    animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.results-summary-container h2 { color: var(--light-primary); margin-bottom: 25px; font-size: 2rem; }

.results-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Profile Pic Upload */
.profile-section { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.profile-pic-label { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--light-text); font-size: 0.9rem; transition: color 0.2s; }
.profile-pic-label:hover { color: var(--light-primary); }
.profile-pic-preview {
    width: 120px; height: 120px; border-radius: 50%;
    border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #e4e6eb; display: flex; align-items: center;
    justify-content: center; background-size: cover; background-position: center;
    transition: all 0.3s;
}
.profile-pic-preview i { font-size: 40px; color: #aeb0b5; }
.profile-pic-preview.has-image i { opacity: 0; }

/* Result Card */
.result-card { flex: 1; min-width: 280px; max-width: 400px; }
.final-wpm-container { text-align: center; margin-bottom: 15px; }
.final-wpm-container span { font-size: 5rem; font-weight: 700; color: #42b72a; line-height: 1; font-family: 'Teko', sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.final-wpm-container p { font-size: 1.2rem; margin: 0; color: #42b72a; font-weight: 700; letter-spacing: 1px; }

.share-name-input {
    width: 100%; padding: 10px; margin: 15px 0;
    background-color: #fff; border: 1px solid #dddfe2;
    border-radius: 6px; text-align: center; font-family: 'Hind', sans-serif;
    font-size: 1rem; transition: border 0.2s;
}
.share-name-input:focus { border-color: var(--light-primary); outline: none; }

.share-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 15px; }
.share-btn {
    width: 45px; height: 45px; border-radius: 8px;
    color: white; display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 20px; transition: transform 0.2s, opacity 0.2s;
    border: none; cursor: pointer;
}
.share-btn:hover { transform: translateY(-3px); opacity: 0.9; }
.facebook { background-color: #3b5998; }
.twitter { background-color: #1da1f2; }
.whatsapp { background-color: #25d366; }
.linkedin { background-color: #0077b5; }
.copy-link { background-color: #65676b; }

#copy-feedback { font-size: 0.8rem; color: #42b72a; opacity: 0; transition: opacity 0.5s; margin-top: 5px; height: 20px; }
#copy-feedback.visible { opacity: 1; }

.download-result-btn {
    background-image: linear-gradient(135deg, #8e44ad, #9b59b6);
    width: 100%; justify-content: center; margin-top: 10px;
}

/* === 7. SEO CONTENT BLOCKS === */
.seo-content-container {
    max-width: 950px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.seo-content-block {
    background-color: var(--light-container-bg);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #f0f0f0;
}

.seo-content-block:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, .1); }
.seo-content-block h2, .seo-content-block h3 { color: #2c3e50; margin-top: 0; border-bottom: 2px solid #f0f2f5; padding-bottom: 10px; margin-bottom: 15px; }
.seo-content-block p, .seo-content-block li { font-size: 1.05rem; line-height: 1.8; color: #4b4f56; text-align: justify; }
.seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.full-width { grid-column: 1 / -1; }

.comparison-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-family: 'Segoe UI', sans-serif; }
.comparison-table th, .comparison-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.comparison-table th { background-color: var(--light-primary); color: white; }

.setup-guide { background-color: #eef6fc; border-left: 5px solid var(--light-primary); padding: 20px; border-radius: 0 8px 8px 0; }

/* === 8. KEYBOARD SHORTCUTS MODAL === */
.shortcuts-modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); z-index: 1000;
    justify-content: center; align-items: center;
    backdrop-filter: blur(3px); animation: fadeIn 0.2s;
}
.shortcuts-modal.show { display: flex; }
.shortcuts-content {
    background-color: var(--light-container-bg); padding: 30px;
    border-radius: 12px; width: 90%; max-width: 450px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: slideUpModal 0.3s ease;
}
@keyframes slideUpModal { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

.shortcut-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee; font-size: 1.1rem; }
.shortcut-item:last-child { border-bottom: none; }
kbd {
    background-color: #f3f3f3; border: 1px solid #ccc; border-radius: 4px;
    padding: 2px 6px; font-family: monospace; font-size: 0.9em; box-shadow: 0 2px 0 #ccc;
}

body.dark-mode{background-color:var(--dark-bg);color:var(--dark-text)}body.dark-mode .test-container{background-color:var(--dark-container-bg);box-shadow:0 4px 20px rgb(0 0 0 / .4)}body.dark-mode .test-container h1{color:var(--dark-primary)}body.dark-mode .seo-content-block,body.dark-mode .shortcuts-content{background-color:var(--dark-container-bg);box-shadow:0 4px 20px rgb(0 0 0 / .4);border-color:#3e4042}body.dark-mode .config-bar{background-color:#2c2d2e;border-color:#3e4042;color:var(--dark-text)}body.dark-mode .config-bar p{color:var(--dark-secondary)}body.dark-mode .difficulty-selector{background-color:#3a3b3c;border-color:#4e4f50}body.dark-mode .radio-label{color:var(--dark-text)}body.dark-mode .radio-label:hover{color:var(--dark-primary)}body.dark-mode .radio-label input[type="radio"]{accent-color:var(--dark-primary)}body.dark-mode .time-selector{background-color:#3a3b3c;border-color:#4e4f50;color:var(--dark-text)}body.dark-mode .time-selector:hover{background-color:#4e4f50}body.dark-mode .dropdown-menu{background-color:#242526;border-color:#3e4042}body.dark-mode .dropdown-item{color:var(--dark-text)}body.dark-mode .dropdown-item:hover{background-color:#4e4f50;color:var(--dark-primary)}body.dark-mode .icon-btn{color:var(--dark-secondary)}body.dark-mode .icon-btn:hover{background-color:#3a3b3c;color:var(--dark-primary)}body.dark-mode .volume-slider{accent-color:var(--dark-primary)}body.dark-mode .text-display{background-color:#1c1c1d;border-color:#3e4042;color:#b0b3b8}body.dark-mode .text-display:focus{border-color:var(--dark-primary)}body.dark-mode .text-display span{color:#b0b3b8}body.dark-mode .current,body.dark-mode span.space.current{background-color:rgb(69 153 255 / .2);border-bottom-color:var(--dark-primary);color:#fff}body.dark-mode .correct{color:#4caf50}body.dark-mode .incorrect{color:#ff6b6b;background-color:rgb(255 107 107 / .1);text-decoration-color:#ff6b6b}body.dark-mode #typed-text-display{background-color:#18191a;border-color:#3e4042;color:var(--dark-text)}body.dark-mode .overlay-message{background-color:rgb(36 37 38 / .95);color:var(--dark-text)}body.dark-mode .overlay-message .resume-prompt{color:var(--dark-secondary)}body.dark-mode #times-up-overlay{color:#ff6b6b}body.dark-mode .stat{background-color:#242526;border-color:#3e4042;box-shadow:0 2px 5px rgb(0 0 0 / .2)}body.dark-mode .stat:hover{box-shadow:0 4px 10px rgb(0 0 0 / .3)}body.dark-mode .stat p{color:var(--dark-secondary)}body.dark-mode .stat span{color:var(--dark-primary)}body.dark-mode .stat span.timer-value{color:#ff6b6b}body.dark-mode .highlight-preview{background-color:#18191a;border-color:#3e4042;color:var(--dark-secondary)}body.dark-mode .highlight-preview .to-type{color:var(--dark-text);border-color:#4e4f50}body.dark-mode .results-summary-container{background-color:#18191a;border-top-color:#3e4042}body.dark-mode .results-summary-container h2{color:var(--dark-primary)}body.dark-mode .profile-pic-label{color:var(--dark-secondary)}body.dark-mode .profile-pic-label:hover{color:var(--dark-primary)}body.dark-mode .profile-pic-preview{background-color:#3a3b3c;border-color:#3e4042}body.dark-mode .profile-pic-preview i{color:#6c6f78}body.dark-mode .share-name-input{background-color:#242526;border-color:#3e4042;color:var(--dark-text)}body.dark-mode .share-name-input:focus{border-color:var(--dark-primary)}body.dark-mode .copy-link{background-color:#4a4d55}body.dark-mode #copy-feedback{color:#4caf50}body.dark-mode .seo-content-block{background-color:var(--dark-container-bg);border-color:#3e4042}body.dark-mode .seo-content-block h2,body.dark-mode .seo-content-block h3{color:var(--dark-primary);border-bottom-color:#3e4042}body.dark-mode .seo-content-block p,body.dark-mode .seo-content-block li{color:#b0b3b8}body.dark-mode .setup-guide{background-color:#1e252e;border-left-color:var(--dark-primary)}body.dark-mode .comparison-table th{background-color:#2c3e50;color:var(--dark-text)}body.dark-mode .comparison-table td{border-color:#3e4042;color:#b0b3b8}body.dark-mode .shortcuts-modal{background-color:rgb(0 0 0 / .8)}body.dark-mode .shortcuts-content{background-color:var(--dark-container-bg);border:1px solid #3e4042}body.dark-mode .shortcut-item{border-bottom-color:#3e4042;color:var(--dark-text)}body.dark-mode kbd{background-color:#3a3b3c;border-color:#4e4f50;color:var(--dark-text);box-shadow:0 2px 0 #222}body.dark-mode button:not(#reset-button):not(#pause-resume-button):not(.share-btn):not(.download-result-btn){background-image:linear-gradient(135deg,#3a3b3c,#2c2d2e)}body.dark-mode #reset-button{background-image:linear-gradient(135deg,#2e7d32,#1b5e20)}body.dark-mode #pause-resume-button{background-image:linear-gradient(135deg,#1976d2,#0d47a1)}body.dark-mode #pause-resume-button:disabled{background-image:none;background-color:#3a3b3c;color:#6c6f78}body.dark-mode .download-result-btn{background-image:linear-gradient(135deg,#6a1b9a,#4a148c)}@media (max-width:768px){body.dark-mode .config-bar{background-color:#2c2d2e}body.dark-mode .difficulty-selector{background-color:#3a3b3c}}@media (max-width:480px){body.dark-mode .difficulty-selector{background-color:#fff0}}

/* === 10. RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .test-container { padding: 20px; }
    .config-bar { flex-direction: column; align-items: stretch; gap: 15px; }
    .difficulty-selector { justify-content: space-between; }
    .text-display { font-size: 1.6rem; height: 120px; }
    .stats { gap: 10px; }
    .stat { min-width: 45%; padding: 10px; }
    .stat span { font-size: 1.8rem; }
    .seo-grid { grid-template-columns: 1fr; }
    .results-content { flex-direction: column; }
    .time-selector { justify-content: center; }
}

@media (max-width: 480px) {
    .test-container h1 { font-size: 1.5rem; }
    .radio-label { font-size: 0.9rem; }
    .text-display { font-size: 1.4rem; padding: 15px; }
    .stat { min-width: 100%; }
    .final-wpm-container span { font-size: 4rem; }
    .button-container { flex-direction: column; }
    button { width: 100%; justify-content: center; }
}
/* ==================== MOBILE-FIRST ENHANCEMENTS ==================== */

/* Extra small screens (phones < ~480px) - Force vertical stacking + smaller gaps */
@media (max-width: 480px) {
    .config-bar {
        flex-direction: column !important;     /* Force column even if wrap fails */
        gap: 15px;                             /* Smaller gap for breathing room */
        align-items: stretch;                  /* Items take full width */
        font-size: 1rem;                       /* Slightly smaller text for fit */
        padding: 0 10px;                       /* Add side padding if needed */
    }

    .difficulty-selector {
        flex-direction: column !important;     /* Stack radios vertically */
        gap: 12px;
        background-color: transparent;         /* Remove bg to save space or make cleaner */
        padding: 0;
        width: 100%;
        align-items: flex-start;
    }

    .radio-label {
        font-size: 1rem;
        justify-content: flex-start;
        width: 100%;
    }

    .time-selector {
        width: 100%;                           /* Full width for easier tap */
        text-align: center;
        padding: 12px;
        font-size: 1.1rem;
    }

    /* Volume + help row - make it flex row but justified */
    .volume-control-container,                /* Assuming this wraps volume */
    .config-bar > div:not(.difficulty-selector):not(.time-selector) {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    /* Make sure dropdown menu doesn't overflow screen */
    .dropdown-menu {
        min-width: 100%;
        left: 0;
        right: 0;
    }
}

/* Medium mobiles/tablets (up to 768px) - Already have some, but refine */
@media (max-width: 768px) {
    .config-bar {
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
    }

    .difficulty-selector {
        flex-wrap: wrap;                       /* Allow wrap if needed */
        justify-content: center;
    }

    /* Ensure touch targets are big enough (min 44x44px for Apple guidelines) */
    .radio-label,
    .radio-label input[type="radio"] {
        padding: 8px;
        min-height: 44px;
        min-width: 44px;
    }

    .time-selector {
        padding: 10px 15px;
    }
}