/* ============================================================
   GUESSLE REBOOT: CONSOLIDATED & CLEANED STYLES
   ============================================================ */

/* 1. Base Styles & Global Fonts */
body {
    font-family: Arial, sans-serif;
    background-color: #121213 !important;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden !important;
}

/* Main Red Container */
.bg.mx-auto {
    background-color: var(--main-color, #ab1b16) !important;
    width: 100vw !important;
    max-width: 450px !important;
    min-height: 100vh;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 10px 280px 10px !important; 
    border: none !important;
}

/* 2. Game Board & Responsive Grid */
#game-board {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 15px 0 !important;
    width: 100% !important;
}

#game-board .letter-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1.5% !important; 
    width: 100% !important;
    max-width: 440px !important;
    margin-bottom: 8px !important;
}

/* --- Updated Letter Box (Fixes "Big Letters") --- */
#game-board .letter-box {
    font-family: 'Roboto Mono', monospace !important;
    flex: 0 1 9% !important; 
    max-width: 60px !important; 
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: rgba(0,0,0,0.2) !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
    
    /* Font Size: Cap the max at 1.8rem so they don't get too big in 3-letter words */
    font-size: clamp(1rem, 5vw, 1.8rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Game Feedback States (Highest Priority Fix) --- */

/* GREEN: Correct */
#game-board .letter-box.correct, 
#game-board .letter-box.bg-success { 
    background-color: #6aaa64 !important; 
    border-color: #6aaa64 !important; 
    color: white !important;
}

/* YELLOW: Present */
#game-board .letter-box.present, 
#game-board .letter-box.bg-warning { 
    background-color: #c9b458 !important; 
    border-color: #c9b458 !important; 
    color: white !important;
}

/* GRAY: Absent */
#game-board .letter-box.absent, 
#game-board .letter-box.bg-secondary { 
    background-color: #3a3a3c !important; 
    border-color: #3a3a3c !important; 
    color: white !important;
}

/* 3. Keyboard Centering & Styles */
#keyboard-cont {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 450px !important;
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#keyboard-cont .first-row, 
#keyboard-cont .third-row {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
}

#keyboard-cont .second-row {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    width: 92% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
}


.keyboard-button {
    font-family: Arial, sans-serif;
    flex: 1 !important;
    min-width: 0 !important; 
    height: 54px !important;
    padding: 0 !important;
    margin: 0 !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 4px !important;
    color: white !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    cursor: pointer;
}

.delbut { flex: 1.5 !important; background-color: #555 !important; }
.enterbut { flex: 2 !important; background-color: #555 !important; }

/* 4. Game Result Colors */
.letter-box.correct, .bg-success { background-color: #6aaa64 !important; border-color: #6aaa64 !important; }
.letter-box.present, .bg-warning { background-color: #c9b458 !important; border-color: #c9b458 !important; }
.letter-box.absent, .bg-secondary { background-color: #3a3a3c !important; border-color: #3a3a3c !important; }

/* 5. Utility Styles from ORIG */
.subtitle-box {
    background-color: rgba(0,0,0,0.3) !important;
    border: 1px solid #f9fad9 !important;
    color: #f9fad9 !important;
    border-radius: 20px !important;
    padding: 4px 15px !important;
    width: fit-content !important;
    margin: 5px auto !important;
}

.stat-text { font-size: 0.65rem !important; font-weight: 700 !important; }
.tit { color: white !important; text-shadow: 2px 2px #000; }
.wt { color: white !important; }
.offscreen {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Progress bar colors */
#prog1 {background-color: #5a5; color: #fff}
#prog7 {background-color: #a55; color: #fff}