/* Game Colors */
:root {
    --correct-letter-color: #6aaa64;
    --wrong-position-color: #c9b458;
    --incorrect-letter-color: orangered;
    --empty-letter-color: transparent;
    --empty-letter-border-color: #CCCCCC;
    --game-font-family: 'Segoe UI', sans-serif;
    --background-color: #2d5016; /* Dark medium green background */
    --background-gradient-color-1: #667eea;
    --background-gradient-color-2: #764ba2;
    --keyboard-key-bg: #818384;
    --keyboard-key-text: white;
}

/* Prevent scrolling - use small viewport height */
html, body {
    margin: 0;
    width: 100%;
    height: 100svh; /* Small viewport height - excludes URL bar */
    overflow: hidden;
    overscroll-behavior: none;
    background-color: var(--background-color);
    /* Safe area insets for notched devices */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Typography */
.game-text {
    font-family: var(--game-font-family), serif; /* Font and a fallback / default */
    font-weight: bold;
}

.game-title {
    margin: 4px 0;
    font-size: 16px;
}

/* Game container - use small viewport height */
.game-container {
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--background-gradient-color-1) 0%, var(--background-gradient-color-2) 100%);
    overflow: hidden;
    color: white; /* Main font color*/
    text-align: center;
}

/* Game board - flexibly sized */
.game-board {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 20px;
}

/* Dynamic row heights based on count */
.board-normal .game-row {
    height: 60px;
}

.board-compact .game-row {
    height: 50px;
}

.board-tight .game-row {
    height: 6vh;
}
.board-tight .letter-box {
    height: 5vh
}

.game-row {
    display: flex;
    gap: 4px;
    width: 100%;
    max-width: 330px;
    margin-bottom: 6px;
}

/* (Empty) Letter box - responsive */
.letter-box {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    font-family: var(--game-font-family), serif;
    margin: 4px;
}

/* State-based styling */
.letter-box.correct {
    background: var(--correct-letter-color);
    border-color: var(--correct-letter-color);
}

.letter-box.wrong-position {
    background: var(--wrong-position-color);
    border-color: var(--wrong-position-color);
}

.letter-box.incorrect {
    background: var(--incorrect-letter-color);
    border-color: var(--incorrect-letter-color);
}

/* ----------------------------- */
/* On-Screen Keyboard Styles */
/* ----------------------------- */

/* Keyboard - add some bottom padding for safety */
.keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0 calc(2px + env(safe-area-inset-bottom)); /* Safe area at bottom */
    flex-shrink: 0;
    width: 100%;
    max-width: 500px;
    margin: 12px auto 0;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.keyboard-key {
    font-family: var(--game-font-family), serif;
    font-weight: bold;
    min-width: 28px;
    height: 50px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    padding: 0 6px;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--keyboard-key-bg);
    color: var(--keyboard-key-text);
}

.keyboard-key.wide {
    min-width: 50px;
    font-size: 12px;
}

.keyboard-key:hover {
    filter: brightness(1.1);
}

.keyboard-key:active {
    filter: brightness(0.9);
    transform: scale(0.92);
}

/* Keyboard key state colors - same as letter boxes */
.keyboard-key.correct {
    background: var(--correct-letter-color);
}

.keyboard-key.wrong-position {
    background: var(--wrong-position-color);
}

.keyboard-key.incorrect {
    background: var(--incorrect-letter-color);
}

/* ----------------------------- */
/* Mobile/responsive enhancements */
/* ----------------------------- */

/* Scale the boxes and spacing on small screens without affecting desktop layout */
@media (max-width: 480px) {
    .letter-box {
        width: 14vw;
        height: 14vw;
        font-size: 8vw;
    }
    .game-container {
        padding: 8px; /* Reduced padding on mobile */
        max-width: 94vw;
        height: 100svh; /* Ensure we use small viewport */
    }
    .keyboard {
        max-width: 100%;
        padding: 0 4px calc(8px + env(safe-area-inset-bottom)); /* Extra bottom padding */
        margin: 10px auto 0; /* Reduced top margin */
    }    
    .game-board {
        padding: 10px; /* Reduced padding to save space */
    }
    .keyboard-row {
        gap: 3px;
        margin-bottom: 6px;
    }
    .keyboard-key {
        min-width: 8vw;
        height: 44px;
        font-size: 12px;
    }
    .keyboard-key.wide {
        min-width: 13vw;
    }
}

/* Slightly larger phones / small tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .letter-box {
        width: 12vw;
        height: 12vw;
        font-size: 9vw;
    }
    .game-container {
        max-width: 90vw;
    }
    .keyboard-key {
        height: 52px;
    }
}

/* Audio initialization prompt */
.audio-init-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
}