/* Six Tries Game Styles */

:root {
    /* Define base sizes and gaps as CSS variables */
    --stg-tile-size: 55px;      /* Base tile size */
    --stg-tile-gap: 5px;        /* Gap between tiles */
    --stg-row-gap: 7px;         /* Gap between rows */
    --stg-key-height: 50px;     /* Base key height */
    --stg-key-h-gap: 5px;       /* Horizontal gap between keys */
    --stg-key-v-gap: 8px;       /* Vertical gap between key rows */
    --stg-border-radius: 4px;
    --stg-text-dark: #1a1a1b;
    --stg-text-light: #ffffff;
    --stg-key-bg: #dce1e3;
    --stg-key-bg-hover: #adb5bd;
    --stg-tile-border-empty: #d3d6da;
    --stg-tile-border-filled: #878a8c;
    --stg-color-correct: #6aaa64;
    --stg-color-present: #c9b458;
    --stg-color-absent: #787c7e;
    --stg-color-restart-bg: #5cb85c;
    --stg-color-restart-bg-hover: #4cae4c;
}

.six-tries-game-container {
    /* Use variables defined in :root */
    --tile-size: var(--stg-tile-size);
    --tile-gap: var(--stg-tile-gap);
    --row-gap: var(--stg-row-gap);
    --key-height: var(--stg-key-height);
    --key-h-gap: var(--stg-key-h-gap);
    --key-v-gap: var(--stg-key-v-gap);

    max-width: 520px; /* Slightly wider to accommodate gaps */
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.game-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.game-message {
    font-weight: bold;
    text-align: center;
    min-height: 25px;
    margin-bottom: 20px;
    color: var(--stg-text-dark);
    width: 100%; /* Ensure message area takes width */
}

.game-grid {
    display: grid;
    grid-template-columns: 1fr; /* Rows stack vertically */
    gap: var(--row-gap);
    margin-bottom: 25px;
    width: 100%; /* Allow grid to take width for centering row content */
    max-width: fit-content; /* Limit width to content */
    box-sizing: border-box;
    padding: 0; /* No padding needed if rows center */
    margin-left: auto;
    margin-right: auto;
}

.grid-row {
    display: grid;
    /* grid-template-columns set dynamically by JS based on length */
    /* Example: grid-template-columns: repeat(5, var(--tile-size)); */
    gap: var(--tile-gap);
    width: fit-content; /* Row width determined by tiles */
    margin-left: auto;
    margin-right: auto; /* Center the row itself */
}

.grid-tile {
    width: var(--tile-size); /* Use variable */
    height: var(--tile-size); /* Use variable */
    border: 2px solid var(--stg-tile-border-empty); /* Use variable */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--tile-size) * 0.6); /* Font size relative to tile */
    font-weight: bold;
    text-transform: uppercase;
    background-color: #fff;
    color: var(--stg-text-dark);
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.6s ease, color 0.3s ease;
    transform-style: preserve-3d;
    vertical-align: middle;
    border-radius: var(--stg-border-radius); /* Slightly rounded tiles */
}

/* Tile States */
.grid-tile.filled {
    border-color: var(--stg-tile-border-filled); /* Use variable */
    animation: pop 0.1s ease-in-out;
}
.grid-tile.correct { background-color: var(--stg-color-correct); border-color: var(--stg-color-correct); color: var(--stg-text-light); }
.grid-tile.present { background-color: var(--stg-color-present); border-color: var(--stg-color-present); color: var(--stg-text-light); }
.grid-tile.absent  { background-color: var(--stg-color-absent); border-color: var(--stg-color-absent); color: var(--stg-text-light); }


.keyboard {
    margin-top: 10px;
    width: 100%;
    max-width: 100%; /* Allow keyboard to take full width of container */
    display: flex;
    flex-direction: column;
    gap: var(--key-v-gap); /* Use variable */
    padding: 0 5px; /* Add slight padding to keyboard area */
    box-sizing: border-box;
}

.keyboard.completed { /* Class added by JS on game end for daily */
    opacity: 0.6;
    pointer-events: none; /* Disable clicks on completed keyboard */
}


.keyboard-row {
    display: flex;
    justify-content: center;
    gap: var(--key-h-gap); /* Use variable */
    width: 100%;
}

.key-button {
    font-family: inherit;
    font-weight: bold;
    border: 0;
    padding: 0 5px; /* Consistent padding */
    margin: 0;
    height: var(--key-height); /* Use variable */
    border-radius: var(--stg-border-radius);
    cursor: pointer;
    user-select: none;
    background-color: var(--stg-key-bg);
    color: var(--stg-text-dark);
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    -webkit-tap-highlight-color: rgba(0,0,0,0.3);
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 0.9rem;
    min-width: 20px; /* Ensure minimum tap area */
}
.key-button:hover {
    background-color: var(--stg-key-bg-hover);
    color: var(--stg-text-light);
}
.key-button.large {
    flex-grow: 1.5; /* Make Enter/Backspace take proportionally more space */
}
.key-button span { /* If using span for icons */
    font-size: 1.2rem;
}

/* Keyboard Key States */
.key-button.correct { background-color: var(--stg-color-correct); color: var(--stg-text-light); }
.key-button.present { background-color: var(--stg-color-present); color: var(--stg-text-light); }
.key-button.absent  { background-color: var(--stg-color-absent); color: var(--stg-text-light); }


/* --- Animations --- */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake { /* Applied to grid-row */
    animation: shake 0.5s ease-in-out;
}

@keyframes dance {
  0% { transform: translateY(0px) scale(1); }
  25% { transform: translateY(-8px) scale(1.05); }
  50% { transform: translateY(0px) scale(1.1); }
  75% { transform: translateY(-4px) scale(1.05); }
  100% { transform: translateY(0px) scale(1); }
}
.grid-tile.dance { /* Applied to grid-tile */
    animation: dance 0.7s ease-in-out;
    animation-delay: var(--animation-delay, 0s); /* JS sets this variable */
}


@keyframes flip-in {
  0% { transform: rotateX(0deg); }
  49% { transform: rotateX(-90deg); }
  50% {
     transform: rotateX(-90deg);
     /* Apply final state colors just past halfway */
     background-color: var(--tile-bg-color, var(--stg-color-absent));
     border-color: var(--tile-bg-color, var(--stg-color-absent));
     color: var(--stg-text-light);
   }
  100% {
    transform: rotateX(0deg);
     background-color: var(--tile-bg-color, var(--stg-color-absent));
     border-color: var(--tile-bg-color, var(--stg-color-absent));
     color: var(--stg-text-light);
  }
}
.grid-tile.flip { /* Applied to grid-tile */
     animation: flip-in 0.6s ease forwards;
     animation-delay: var(--animation-delay, 0s); /* JS sets this variable */
     /* Define CSS variables for background color to be set by JS */
     --tile-bg-color: var(--stg-color-absent); /* Default to absent */
}
/* JS will add correct/present/absent class which triggers these overrides */
.grid-tile.flip.correct { --tile-bg-color: var(--stg-color-correct); }
.grid-tile.flip.present { --tile-bg-color: var(--stg-color-present); }
.grid-tile.flip.absent  { --tile-bg-color: var(--stg-color-absent); }


@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* Pop animation applied via .filled class */


/* Button for Restart */
.restart-button {
    margin-top: 20px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: var(--stg-color-restart-bg);
    color: var(--stg-text-light);
    border: none;
    border-radius: var(--stg-border-radius);
    font-size: 1rem;
    font-weight: bold;
}
.restart-button:hover {
    background-color: var(--stg-color-restart-bg-hover);
}


/* --- MOBILE STYLES --- */
@media (max-width: 600px) { /* Target smaller screens */

    :root {
        /* Adjust base sizes for mobile */
        --stg-tile-size: 45px;      /* Smaller tiles */
        --stg-tile-gap: 4px;
        --stg-row-gap: 5px;
        --stg-key-height: 45px;     /* Shorter keys */
        --stg-key-h-gap: 4px;       /* Slightly smaller horizontal gap */
        --stg-key-v-gap: 6px;       /* Slightly smaller vertical gap */
    }

    .six-tries-game-container {
        padding: 10px; /* Reduce padding */
         max-width: 98%; /* Allow container to be almost full width */
    }

    .game-title {
        font-size: 1.3rem; /* Slightly smaller title */
        margin-bottom: 10px;
    }

     .game-message {
        margin-bottom: 15px;
        font-size: 0.9rem;
    }

    .game-grid {
        margin-bottom: 20px;
        padding: 0; /* Remove padding inside grid */
    }

    .grid-tile {
        /* Tile size is already controlled by --stg-tile-size variable */
        font-size: calc(var(--stg-tile-size) * 0.6); /* Font size adjusts too */
        border-width: 2px; /* Ensure border width consistent */
    }

    .keyboard {
        margin-top: 5px; /* Reduce top margin */
        padding: 0 2px; /* Minimal padding */
    }

    .key-button {
        /* Key height already controlled by --stg-key-height variable */
        font-size: 0.8rem; /* Smaller key text */
        padding: 0 4px; /* Adjust padding if needed */
         font-weight: normal; /* Less bold on small screens */
    }

    .key-button.large {
        flex-grow: 1.4; /* Adjust relative size if needed */
        font-size: 0.7rem; /* Make text on large buttons smaller */
    }

     .restart-button {
        margin-top: 15px;
        padding: 8px 15px;
        font-size: 0.9rem;
    }

}

@media (max-width: 380px) { /* Even smaller screens */
     :root {
        --stg-tile-size: 40px;      /* Even smaller tiles */
        --stg-tile-gap: 3px;
        --stg-row-gap: 4px;
        --stg-key-height: 40px;     /* Even shorter keys */
        --stg-key-h-gap: 3px;
        --stg-key-v-gap: 5px;
    }
     .key-button {
         font-weight: bold; /* Maybe bring back bold? Test usability */
     }
}