:root{
	--cell-color: #FFFCF9;
	--clicked-border-color: #750;
	--nines-game-width: 210px;
}

.nines-wrapper{
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	margin: 0 0 4rem 0;
}
.nines-title{
	font-family: var( --font-serif );
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0 0 1em 0;
}
.nines-rubric{
	font-family: var( --font-sans );
	font-size: 0.95rem;
	font-weight: 550;
	margin: 0 0 2em 0;
	font-style: italic;
}
.nines-game{
	display: flex;
	flex-direction: column;
	padding: 2rem 0 0 0;
}
.nines-metadata{
	display: flex;
	flex-direction: column;
	padding: 1rem 0 0 0;
}
.nines-target{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 1em;
	margin: 1em 0 1em 0;
	line-height: 1.4em;
	max-width: 480px;
}
.nines-target-title{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 0.5em;
	font-family: var( --font-sans );
}
.nines-target-title .title{
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 550;
}
.nines-target-title .description{
	margin-top: 1em;
	font-size: 1rem;
	font-weight: 550;
}
.nines-target-letters{
	white-space: nowrap;
}
.nines-target-letter{
	border-bottom: 2px solid transparent;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 600;
	font-size: 1.2rem;
}
.nines-target-letter-highlight{
	border-bottom: 2px solid var( --text-dark );
}
.nines-new-game-btn{
	display: flex;
	justify-content: row;
	align-items: center;
	column-gap: 0.5rem;
	border: none;
	background: none;
	cursor: pointer;
	font-weight: 800;
	font-size: 0.75rem;
	color: var( --link-dark );
	text-transform: uppercase;
}

.nines-new-game-btn::before{
	display: block;
	background-color: var( --link-dark );
	width: 24px;
	height: 24px;
	content: '';
	background-image: url( '/icons/new-light.svg' );
	Background-position: center;
	background-repeat: no-repeat;
	background-size: 18px;
	border-radius: 6px;
}
.nines-popover .popover-content{
	text-align: justify;
}
.nines-popover .popover-subtitle{ 
	text-transform: none; 
	letter-spacing: 0em; 
	font-size: 1.2em; 
	font-weight: 700; 
	color: var( --text-muted ); 
}
.nines-popover .popover-target P{
	text-align: left !important;
	font-size: 1.1em; 
}
.nines-popover .new-game-letters{
	display: block;
	margin: 2rem 0;
	font-size: 1.4em;
}
.nines-popover .new-game-letter{
	font-family: var( --font-display );
	font-weight: 500;
	margin-right: 0.1em;
}
.nines-popover .new-game-highlight-letter{
	font-weight: 700;
	font-size: 1.1em;
}
.nines-popover .new-game-letter.new-game-highlight-letter{
	border-bottom: solid 2px var( --text-dark );
	font-size: inherit;
}

.nines-game-content{
	border-radius: 12px;
	padding: 0rem;
}
.nines-game-play-area{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 3em;
}
@media( min-width: 680px ){
	.nines-game-play-area{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: 3em;
	}
}
.nines-grid-wrapper{
	width: var( --nines-game-width );
	flex-shrink: 0;
}
.nines-grid{
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	grid-template-rows: repeat( 3, minmax( 0, 1fr ) );
	width: 100%;
	aspect-ratio: 1/1;
	gap: 0.25rem;
	justify-content: center;
	align-items: center;
}
.nines-grid-cell{
	display: grid;
	place-items: center center;
	border: solid 2px var( --muted-putty );
	width: 100%;
	aspect-ratio: 1/1;
	transition: transform 0.3s ease;
	cursor: pointer;
	color: var( --text-dark );
	background-color: var( --cell-color );
	user-select: none;
	-webkit-user-select: none;
	text-transform: uppercase;
}
.nines-grid-cell:hover{
	transform: scale( 105% );
	/*background-color: var( --cell-color );
	border-color: var( --clicked-border-color );*/
	background-color: #F6F9FC;
	border-color: #69C;
}
.nines-grid-cell.clicked{
	/*background-color: var( --clicked-bg-color );
	border-color: var( --clicked-border-color );
	background-color: #F6F9FC;*/
	background-color: #F6F9FC;
	border-color: #69C;
	color: var( --clicked-text-color );
}
.nines-grid-cell.highlight{
	/*background-color: var( --muted-putty );*/
	background-color: #d7b059;
	background-color: #FFE99F;
}
.nines-grid-cell.highlight:hover{
	border-color: #970;
}
.nines-grid-cell.highlight.clicked{
	/*background-color: #f7c029;
	background-color: #f730e9;*/
	background-color: #E0ECE3;
	background-color: #CF9900;
	background-color: #9FB970;
	border-color: #AFC980;
	color: #FFF;
}
.nines-grid-cell.highlight.clicked:hover{
	border-color: #AFC980;
}
.nines-grid-letter{
	font-family: var( --font-display );
	font-size: 1.5rem;
	font-weight: 400;
	user-select: none;
	-webkit-user-select: none;
}
.nines-grid-cell.clicked .nines-grid-letter{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;	
}

/* ********* Entry area ************ */

.nines-entry-wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: min-content;
	flex-shrink: 0;
	flex-grow: 1;
}
.nines-entry{
	display: flex;
	flex-direction: column;
	width: 100%;
}
.nines-entry LABEL{
	font-family: var( --font-sans );
	font-size: 0.9rem;
	font-weight: 550;
}
.nines-current-word-wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 1em;
	min-height: 2em;
	margin: 1em 0 1em 0;
	width: 100%;
}
.nines-current-word{
	min-width: 9em;
	flex-grow: 1;
	font-size: 1em;
	border-radius: 3px;
	background-color: var( --bg-dialog );
	text-transform: uppercase;
	padding: 0.5em;
	border: solid 1px var( --text-muted );
}
.nines-current-word:focus{
	outline: 3px solid var( --muted-putty );
}

.nines-current-word::placeholder{
	color: var( --text-dark );
}
.nines-current-word.enabled{
	font-weight: 550;
}
.nines-button{
	display: grid;
	place-items: center;
	border: none;
	pointer-events: none;
	filter: grayscale( 100% );
	background: var( --text-dark );
	color: var( --text-light );
	border-radius: 50%;
	width: 1.5em;
	aspect-ratio: 1/1;
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1em;
	cursor: pointer;
}
.nines-delete-button{
	background: var( --text-muted );
	font-size: 0.8rem;
	opacity: 0.4;
}
.nines-delete-button.enabled{
	pointer-events: auto;
	opacity: 1;
}
.nines-add-button{
	background: var( --link-dark );
	color: var( --text-light );
	font-size: 1rem;
	transition: all 0.3s ease;
}
.nines-add-button.enabled{
	filter: grayscale( 0% );
	pointer-events: auto;
	width: 2em;
}

/******* Progress *********/
/* 1. Reset the base element */
progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none; /* Removes a stubborn border in Firefox */
    
    /* Layout Dimensions */
    width: 100%;
    height: 16px;
    
    /* Elegant Vintage styling */
    background-color: var( --bg-dialog );
    border: 1px solid var( --muted-putty );
    border-radius: 4px;
}

/* 2. Style the BACKGROUND track (Blink/WebKit: Chrome, Safari, Edge) */
progress[value]::-webkit-progress-bar {
    background-color: var( --bg-dialog );
    border-radius: 4px;
}

/* 3. Style the FILL bar (Blink/WebKit: Chrome, Safari, Edge) */
progress[value]::-webkit-progress-value {
    background-color: var( --muted-putty );
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease; /* Smooth motion when a word is found! */
}

/* 4. Style the FILL bar (Gecko: Firefox) */
progress[value]::-moz-progress-bar {
    background-color: var( --muted-putty );
    border-radius: 3px 0 0 3px;
}

.nines-progress-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 1rem 0 0 0;
}
.nines-progress-label{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var( --font-sans );
	font-size: 0.75rem;
	font-weight: 750;
	text-align: left;
	text-transform: uppercase;
	width: 100%;
	margin: 0.5rem 0;
}
#nines-progress-percent{ color: var( --link-dark ); font-weight: 800; font-size: 1rem; margin: 0 0.5em 0 0.25rem; }
#nines-progress-to-go{
	font-weight: 350;
}

/* ******** WORD JAR ********* */

.nines-jar-wrapper{
	margin: 2rem 0 0 0;
	width: 100%;
}
.nines-jar-wrapper .nines-jar-title{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-family: var( --font-sans );
	font-weight: 600;
	font-size: 1rem;
	margin-right: 0.5em;
	font-style: normal;
	column-gap: 0.5rem;
}
.nines-jar-wrapper #nines-found-total{
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 1.4rem;
	color: var( --link-dark );
}
.nines-jar{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	column-gap: 0.75em;
	align-items: baseline;
	max-width: 480px;
}
.nines-jar:empty::before{
	content: 'No words yet.';
	font-family: var( --font-sans );
	font-size: 1rem;
	font-style: italic;
	opacity: 0.7;
}
.nines-found-word{
	display: inline;
	font-family: var( --font-sans );
	font-size: 1.2rem;
	font-style: italic;
	font-weight: 400;
	text-transform: capitalize;
}
.nines-found-word::after{
	content: '.';
}
.nines-solution-wrapper{
	min-height: 3em;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: 0.75rem;
}
.nines-solution-title{
	font-family: var( --font-sans );
	font-weight: 600;
	font-size: 0.9rem;
	font-style: italic;
}
.nines-solution{
	border: none;
	font-family: var( --font-sans );
	font-weight: 450;
	background: var( --solution-bg );
	color: var( --solution-bg );
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 3px;
	transition: transform 0.5s ease;
	cursor: pointer;
	padding: 0.5em;
}
.nines-solution.visible{
	color: var( --text-dark );
	transform: scale( 110% );
}

/* ********** Word lists ********** */

.nines-stats{
	font-family: var( --font-sans );
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-top: 1em;
}
.nines-word-lists {
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	margin: 2em 0;
	width: 100%;
}
.nines-word-lists .title{
	font-family: var( --font-sans );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 0.85rem;
	margin-right: 0.5em;
}
.nines-word-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	column-gap: 0.5em;
	align-items: baseline;
}
.nines-word-list > SPAN{
	font-family: var( --font-sans );
	font-size: 1rem;
	text-transform: capitalize;
}
.nines-word-list > SPAN::after{
	content: '.';
}
.nines-word-list > SPAN.found{
	font-family: var( --font-sans );
	font-size: 1rem;
	text-transform: capitalize;
	text-decoration: line-through;
	opacity: 0.3;
	font-weight: 700;
	font-style: italic;
}
.nines-all-words{
	display: none;
}