.hidden-correlations,
.hidden-correlations * {
	display: none;
}

.game-window {
width: 100%; 
max-width: 750px; 
justify-content: center; 
margin: auto;
text-align: center;
}

.correlations .current-date {
	font-size: 1.5rem;
	font-weight: 800;
}

.game-board {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 2%;
	margin-bottom: 20px;
	width: 100%;
	margin-left: auto;  /* Center the grid horizontally */
	margin-right: auto;  /* Center the grid horizontally */
}

.word-card {
	display: flex;
	background-color: #e6e6e6;
	border: 2px solid #e6e6e6;
	padding: 1px;
	padding-top:1.5em;
	padding-bottom:1.5em;
	border-radius: 5px;
	cursor: pointer;
	transition: transform 0.2s;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 2%;
	overflow:hidden;
	height: 5rem;
	align-content: flex-start;
    text-align: center;
    word-wrap: break-word; /* Helps with long words like "INVESTIGATE" */
}
@media screen and (min-width: 0px) and (max-width: 600px) {
	.word-card {
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-size: 0.8em;
	height: 5rem;
	overflow-y: hidden;
	overflow-x: hidden;
	table-layout: fixed;
  }
}

/* @media (max-width:600px){
	.word-card:hover {
	transform: scale(1.1);
	border-color: #7f7f7f; 
	background-color: #7f7f7f;
 }
}*/

/* Highlight selected word */
.word-card.selected {
	background-color: #7f7f7f;
	border-color: #7f7f7f;
	color: white;
}

/* Wiggle animation */
@keyframes wiggle {
	0% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	50% { transform: translateX(5px); }
	75% { transform: translateX(-5px); }
	100% { transform: translateX(0); }
}

.word-card.wiggle {
	animation: wiggle 0.3s ease-in-out;
}

.category-feedback {
	margin-top: 20px;
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

.button {
	padding: 10px 20px;
	background-color: #595959; /* Medium grey for buttons */
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-family: Arial, sans-serif;
	font-size: 1em;
	margin: 0 5px; /* Space between buttons */
}

.button:hover {
	background-color: #212121/* Darker grey when hovered */
}

/* Style for category banners */
.category-banner {
    margin-top: 5px;
    padding: 15px 10px;
	min-height: 60px; /* Use min-height, not height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 1em;
    border-radius: 5px;
    margin-bottom: 5px; /* Added a bit more gap between banners */
    text-align: center;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't push width over 100% */
}

/* Category name in larger font */
.category-banner .category-name {
	font-family: Arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	display: block;
}
@media (max-width: 600px) {
	.category-banner .category-name {
	font-size: 1.0em;
  }
	.button {
	padding: 10px 10px;
	}
}

/* Associated words below the category name */
.category-banner .words {
    font-size: 1em;
    margin-top: 5px;
    white-space: normal; /* Change from nowrap to normal */
    display: block;
}
@media (max-width: 600px) {
	.category-banner .words {
	font-size: 0.8em;  
  }
}

/* Container to hold the category banners */
#categoryBanners {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Change from center to stretch */
    margin-bottom: 15px;
    width: 100%; /* Ensure the container itself is full width */
}

@keyframes bannerPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.category-banner {
    /* ... keep your existing styles ... */
    animation: bannerPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes finalBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.victory-bounce {
    animation: finalBounce 0.5s ease-in-out 3; /* Bounces 3 times */
}

/* Style for disabled submit button */
.button:disabled {
	background-color: #e6e6e6;
	cursor: not-allowed;
}

/* Container for buttons to align them horizontally */
.button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 500px;
	min-width: 250px;
	margin-left: auto;  /* Center horizontally */
	margin-right: auto;  /* Center horizontally */
}