/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  header {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
  }

}

* {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
}


h1 {
    display: block !important;
    visibility: visible !important;
    color: #F0F8FF !important;         /* High-contrast solid white */
    font-weight: bold !important;       /* Extra bold structural weight */
    font-size: 36px !important;        /* Thick readable scale */
    text-align: center !important;
    margin: 40px 0 20px 0 !important;  /* Pushes content away from the very top */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important; /* Bold drop shadow to cut through any background image */
    position: relative !important;
    z-index: 9999 !important;
}
p {
    display: block !important;
    visibility: visible !important;
    
    /* Visibility & Contrast */
    color: #F0F8FF !important;         /* Solid white text */
    font-weight: bold !important;       /* Makes the text thick and bold */
    font-size: 18px !important;        /* Increases standard text size for readability */
    text-align: center !important;
    
    /* Text separation & shadows */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9) !important; /* Thick shadow so text pops out over any background image pattern */
    margin: 10px auto !important;
    
    /* Layering security */
    position: relative !important;
    z-index: 9999 !important;
}

.grid {
    margin: 50px auto;
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-gap: 10px;
}

.tile {
    background-color: white;
    border: 2px solid lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    font-weight: 600;
}

.correct {
    background-color: rgb(69, 148, 69);
    color: white;
    border: none;
}

.wrong-location {
    background-color: rgb(138, 138, 48);
    color: white;
    border: none;
}

.wrong {
    background-color: rgb(65, 64, 64);
    color: white;
    border: none;
}

.game-wrapper {
    width: 450px;           
    margin: 50px auto;     
    text-align: center;    
}
.page-grid {
    display: grid !important;
    grid-template-columns: 400px 1fr !important; /* Fixed 400px column on left, rest of screen on right */
    gap: 20px !important;
    width: 100% !important;
    flex: 1; /* Fills remaining height below your header */
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
}

.side-panel {
    background: rgba(0, 0, 0, 0.65) !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    backdrop-filter: blur(5px) !important;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) !important;
    border-radius: 10px !important;
    height: fit-content !important; /* Shrinks container height to perfectly match content scale */
}

/* Fills up the rest of the right side screen space */
.empty-space {
    background: rgba(255, 255, 255, 0.1) !important; /* Translucent indicator to show exactly where it is */
    border-radius: 10px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    color: white !important;
}
#wordle-board {
    display: none;      
}