@charset "UTF-8";

#play, #clear, #answers, #increase, #decrease{
	display: none;
	margin: 3px;
	/*width: 100px;
	padding: 0.25em 0;
	text-align: center;
	margin: 0.2em 0 0 13px;
	font-size: 100%;
	cursor: pointer;
	color: #fff;
	background-color: #ccc;*/
}

#stage {
	/*float: right;*/
	border:solid 2px blue;
}

#main_stage { 
 /* Make this a positioned parent */
	position:relative;
}
#letter_grid { 
	position:absolute; 
}

.individual_letter {
	float:left; 
	width:28px; 
	height:28px; 
	display: flex;
	align-items: center; 
	justify-content: center; 
	cursor:pointer;
	font-size: 20px;
}

/* the keyboard's square (role=gridcell, scripts/wordsearch.js) */
.letter_cell:focus { outline: none; }
.letter_cell:focus-visible .individual_letter { outline: 3px solid #1f5fae; outline-offset: -3px; border-radius: 4px; }
.individual_letter:hover { 
	background-color: #2CB431 ;
}

.wordList {
	list-style-type: none;
}
.wordNotFound::before {
    content: "\f111";
	font-family: 'FontAwesome';
	padding: 0 10px 0 0;
	font-weight: 200;
}
.wordFound::before {
    content: "\f058";
	font-family: 'FontAwesome';
	padding: 0 10px 0 0;
	font-weight: bold;
}
.wordFound {
	color: #6b6b6b; /* 5.3:1 on white - #CCC was too faint to read */
	text-decoration: line-through;
}

.firstClick {
//  padding-left: 3px;
  position: relative;
  background-color: #2CB431;
  opacity:.4;
}
/* a shaped puzzle (scripts/shapes.js): the outline behind the letters, the lines found over it, the letters on top;
   squares outside the shape stay empty */
#shape_bg { position: absolute; z-index: 0; }
#shape_bg svg { display: block; width: 100%; height: 100%; overflow: visible; }
#main_stage.is-shaped #stage { position: relative; z-index: 1; }
#main_stage.is-shaped #letter_grid { z-index: 2; }
.individual_letter.off { cursor: default; }
.individual_letter.off:hover { background: none; }
#main_stage.is-shaped #stage { border-color: transparent; }

/* the page around the game (wordsearchonline.php): buttons in the play bar, the puzzle beside its word list (under it on
   narrow screens) */
.ec-ws-bar { justify-content: flex-start; }
.ec-ws-size { display: inline-flex; gap: 6px; margin-left: auto; }
.ec-ws-game { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; justify-content: center; }
.ec-ws-stage-wrap { flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* as wide as the puzzle, so scripts/wordsearch.js can tell when it's wider than the screen and shrink the letters */
.ec-ws-stage-wrap #main_stage { display: inline-block; }
.ec-ws-list { flex: 0 0 200px; font-size: 17px; }
.ec-ws-list ul { margin: 0; padding: 0; }
/* narrow screens: the words in even columns under the puzzle */
@media (max-width: 767px) { .ec-ws-list { flex-basis: 100%; } .ec-ws-list .wordList { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; } }