:root {
	--background-color: #ffffee;
	--text-color: #121416d8;
	--border-color: lightgrey;
	--font-size:		80%;
	--button-text-color: #222;
	--button-color: #eee; 
	--cell-filled: #f3e797; 
	--cell-pending: #ffffaa;
	--cell-color: #333;
	--cell-error: #fcc;
	--cell-opacity: 1.0;
	--board-color: #daf4cd; 
}

html[data-sctheme="sclight"] { 
	--background-color: #ffffee;
	--text-color: #121416d8;
	--button-text-color: #222;
	--button-color: #eee; 
	--cell-filled: #f3e797; 
	--cell-pending: #ffffaa;
	--cell-color: #333;
	--cell-error: #fcc;
	--cell-opacity: 1.0;
	--board-color: #daf4cd;  
}

html[data-sctheme="scdark"] {
	--background-color: #777;
	--text-color: #eee;
	--button-text-color: #111;
	--button-color: #999;
	--cell-color: #333;
	--cell-filled: #EECB9E;
	--cell-pending: #EDBA77;
	--cell-opacity: 0.9;
	--img-opacity: 0.8;
	--board-color: #999; 
}

:root {
	
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p { 
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

body {
	background-color: var(--background-color);
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	color:	var(--text-color); 
}
#Page1 {
	background-color: var(--background-color);
}
#topPuzzleContainer {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display:grid;
	justify-content: center;
	background-color: var(--background-color);
    container: puz / size;
	overflow:hidden;
}

.sc_container {   
	--sc_puz: calc(100cqw / 25);
    --cell-size: round(down, var(--sc_puz), 1px);
    --puzWidth: calc(var(--cell-size)* 15);
    --puzHeight: calc(var(--cell-size)* 15);
    height: 100cqh;
    overflow: hidden; 
    display: grid;
    grid-gap: 10px; 
    grid-template-columns: var(--puzWidth) calc(100cqw - var(--puzWidth) - 20px);
    grid-template-rows: 25px calc(var(--puzHeight) / 2) calc(var(--puzHeight) / 2) auto;
    grid-template-areas:
        "ma ma"
        "bd wl"
        "bd pa"
        "tb pa";
}  
#sc_board {  
	grid-area: bd;
	width: var(--puzWidth);
	height: var(--puzHeight);
	position: relative;
}
.sc_tileBoard {
	background-size: contain;
	width: var(--puzWidth);
	height: var(--puzHeight);
	margin: 10px; 
	display: grid;
	grid-template-columns: repeat(15,1fr);
	grid-template-rows: repeat(15,1fr);
	gap: 0px 0px;
}
.sc-cell {  
	color:  var(--cell-color);
	box-sizing: border-box;
	border-right: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	width:  calc(var(--cell-size)  - 1px);
	height: calc(var(--cell-size) - 1px);
	user-select: none;
	background-color: var(--board-color);
} 
.sc-borderLeft{
	border-left: 1px solid var(--border-color);
}
.sc-borderTop{
	border-Top: 1px solid var(--border-color);
}
.puz-ltr {
	width: calc((var(--puzWidth)/15) - 3px);
	height: calc((var(--puzWidth)/15) - 3px);
	user-select: none; 
	position: relative;
	color: var(--cell-color);
	margin: 0px;
	text-align:center; 
	margin-top: -8%;
 }	 
.filled {
	background-color: var(--cell-filled);
	background-image: none !important;
}
.blankLtr {
	background-image: url("../images/circle.svg") !important;
	background-size: contain;
}
	
#currentLetters{
	text-align: center;
	display: flex;
	width: var(--puzWidth);
	min-height: calc(var(--cell-size) * 1.5);
	justify-content: center;
	grid-area: la;
	user-select:none;
}
#currentLetters > div {
	display:none;
	position:relative;
	width:100%;
	min-width:100%;
	justify-content:center;
}
.sc-ltr {
	width: 	var(--cell-size);
	height: var(--cell-size);
	border: 1px solid lightgray;
	margin: 7px;
	background-color: var(--cell-filled);
	position: relative;
	user-select: none; 
	color: var(--cell-color);
	z-index: 20;
	display:flex;
    justify-content: center;
    align-items: center;
	font-weight: bold;
    font-family: arial;	
}
 
.pending {
	background-color: var(--cell-pending);
	background-image: none !important;
} 

.sc-ltr-num { 
font-size: calc(var(--cell-size)* 0.4);
    position: absolute;
    margin-top: calc(var(--cell-size)* 0.56);
    right: 8%;
    text-align: right;
    letter-spacing: calc(var(--cell-size)* -0.05);
} 

.sc-ltr-ltr {
	font-size: calc(var(--cell-size) * 0.75);
} 
 
.tl {    
	background-image: url("../images/tl.png");
	background-size: contain;
}
.dl {
	background-image: url("../images/dl.png");
	background-size: contain;
}
.dw {
	background-image: url("../images/dw.png");
	background-size: contain;
}
.tw {
	background-image: url("../images/tw.png");
	background-size: contain;
}


#tileButtonArea {
	grid-area: tb;
	padding: 10px; 
}	
.transitionStart {
	transition: 2s;
}
.tilesSlideRight {
	animation: slideRight 2s;
}
@keyframes slideRight {
	0%   {left: 100vw;}
	100% {left:0px;}
}

.sc_boardScores {
	grid-area: pa;
	padding: 10px; 
}
.sc_playerGroup1 {
	display:none;
} 
.sc_playerName {
	margin-top: 10px;
	width:100%;
	font-weight: bold;
	font-size: 16px;
	border: 2px solid transparent;
}
.activePlayer {
	background-color: var(--cell-pending);
	border-color: var(--border-color);
	transition: 2s;
}
.sc_playerScore {
	display: grid;
    grid-template-columns: 1fr 45px;	
	font-size: 16px;
	margin-right:15;
	transition: 2s;
}
.sc_tilesLeft {
	width: var(--col2Size);
	margin-top:15px;
	display:flex;
	justify-content: space-between;
}
.sc_tilesLeft div {
    font-size: 16;
	margin-right:33px;
    font-weight: bold;
    display: inline-block; 
}
.sc_playButtons { 
	display: flex;
	width: var(--puzWidth);
	justify-content: space-evenly;
	user-select: none;
} 
.sc_buttonPlay {
	width: calc(var(--puzWidth) / 4) !important;
	min-width: 97px;
    padding-left: 2px;
    padding-right: 2px; 
}
.sc_buttonPlay:not(:disabled) {
/*	background-color: var(--background-color);*/
}
.sc_playButtons button {
	border-color: var(--border-color);
	color: var(--button-text-color) !important;
	background-color: var(--button-color);
	width: calc(var(--puzWidth) / 6.5);
	font-size: clamp(10px, calc( var(--puzWidth) / 26), 18px);
	height: calc(var(--puzWidth) / 13);
	border-radius: 4px; 
}
#lookup {
	grid-area: wl;
}
.transitionStart {
	transition: 2s;
}
.boardScores {
	width: var(--puzWidth);
	display: flex;
	justify-content: space-around; 
}
.boardScores div div {
	padding-right: 10px;
	display: inline-block;
}
.currentPlayerTiles {
	margin-left:-120px;
}
.sc_playerGroup1 .sc_playerName { 
	width:auto;
}
.currentPlayerTiles div {
	display: inline-block; 
    border: 1px solid grey; 
 	background-color: var(--cell-filled);
    width: 14px;
    margin-right: 2px;
    font-size: 14px;
	line-height: 13px;
    text-align: center;	
	height:14px; 
}

.message {
	position: absolute;
	top: 10vh;
	width: var(--puzWidth);
	text-align: center;
	transition 1s;
	opacity: 0;
	z-index: 10;
	display:none;
}
.message div {
	display: inline-block;
	background-color: #ffffdd;
	border: 3px solid yellow;
}
.waitingGif {
	display: none;
	position: absolute;
	top: calc(var(--puzWidth) / 2.3);
	left: calc(var(--puzWidth) / 2.3);
	width: calc(var(--puzWidth) / 7.5);
	height: calc(var(--puzWidth) / 7.5);
	border-top: 8px solid #3498db;
 /* Blue */
	border-left: 8px solid #40a4e8;
	border-bottom: 8px solid #4cb4f4;
	border-right: 8px solid #58c0ff;
	border-radius: 50%;
	z-index: 1000;
	animation: rotation 2s infinite linear;
	transform-origin: 50% 50%;
	color: darkblue;
}

@keyframes rotation {
  
	from {
		transform: rotate(-360deg);
	}

	to {
		transform: rotate(0deg);
	}
}

.arrow {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: var(--cell-pointer);
}

.arrowLeft {
	background-image: url("../images/arrowLeft.svg");
}

.arrowRight {
	background-image: url("../images/arrowRight.svg");
}

.arrowUp {
	background-image: url("../images/arrowUp.svg");
}

.arrowDown {
	background-image: url("../images/arrowDown.svg");
}
#sc_header{
	grid-area: ma;
	padding:10px; 
	background-color: #ffffee;
	margin-top: -6px;
	height:	25px;
	background-color:var(--background-color);
}
.sc_hdr1 { 
	width:100%;
	text-align:center;
}
.sc_hdrTitle { 
	display:inline-block;
	font-weight:bold;
	font-size:24px;
}
.sc_hdrMenu {
   font-size: 40px;
    font-weight: bold;
    display: inline-block;
    right: 0px;
    margin-right: 10px;
	margin-top:	-6px;
    float:right;
	position: relative;
	cursor:pointer;
	
}
.dropDownMenu {position: absolute;
	top: 50px;
	left: 0px;
	border: 1px solid var(--border-color);
	background-color:var(--background-color);
	padding: 10px;
	transition: all .7s ease;
	overflow: hidden;
	height:0px;
	width:0px;
	opacity:0;  
} 
.dropDownMenu.show {
	height: fit-content; /* Adjust as needed */
	width:  160px;
	left: -140px; 
	opacity: 1;  
	transform: translateY(0);  
	z-index: 100;  
    border-radius: 0px;
    border: 1px solid gray;	
}
.dropDownMenu .puzkeypadButton {font-size:18px;width:100%;display:block;margin-bottom:5px;margin-top:5px;}
.dropDownMenu .puzkeypadButton.active {background-color:#ffffcc;}

#hamburger {display:inline-block;float:right;position:relative;padding-right:30px,cursor:pointer;}
#hamburger svg {width:40px; height:40px;padding-right:20px;}
#hamburger svg path{
	fill: var(--text-color) !important;
}

.sc_wordListing {
	grid-area: wl;
	margin-left:10px;
}
.sc_wordsHdr {
	font-weight:bold;
	font-size: 24px;
}
.sc_wordsScroller {
	width: 90%;
    height: calc(var(--puzHeight) / 2 - 30px);
	padding: 10px; 
	overflow-y: auto;
    overflow-x: hidden;
    font-size: 14px;
	border: 2px solid var(--border-color);
	transition: 1s;
}
.sc_wordItem {
	display: flex;
	width:100%;
	justify-content: space-between;
}
.sc_word { 
	display: inline-block;
	font-size: 12px; 
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}
.sc_wordInfo {
	display: inline-block;
	font-size: 16px;
	color: blue;
}
.tooltip {
	position:absolute;
	border: 2px solid yellow;
	background-color: var(--background-color); 
	color:	var(--text-color);
}
#gameOverDialog {
	animation: gameOverAnimation1 0.5s 12 linear, gameOverAnimation2 6s 1 linear ;
	position:absolute;
	top: 50%;	
    left: 50%;
    transform: translate(-50%, -50%);}
@keyframes gameOverAnimation1 { 
	0%   {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}  
}
@keyframes gameOverAnimation2 {
	0%   {scale: 0%;
		  top: 0%;
		  left:30%;
		}
    100% {scale:100%;
		  top:50%;
		  left:30%;
		}  
}
#sc_page1Slider {
	margin-bottom:15px;
	margin-top:15px;
}
#sc_page1Slider .range-slider {
 /*   margin-top: 30vh;*/
    
}
#sc_page1Slider .rs-range {
    margin-top: 29px;
    width: 250px;
    -webkit-appearance: none;
    &:focus {
        outline: none;
    }
    &::-webkit-slider-runnable-track {
        width: 100%;
        height: 1px;
        cursor: pointer;
        box-shadow: none;
        background: #444;
        border-radius: 0px;
        border: 0px solid #010101;
    }
    &::-moz-range-track {
        width: 100%;
        height: 1px;
        cursor: pointer;
        box-shadow: none;
        background: #444;
        border-radius: 0px;
        border: 0px solid #010101;
    }
  
    &::-webkit-slider-thumb {
        box-shadow: none;
        border: 0px solid #444;
        height: 32px;
        width: 15px;
        border-radius: 5px;
        background: rgba(255,255,255,1);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -20px;
    }
  &::-moz-range-thumb{
        box-shadow: none;
        border: 0px solid #444;
        height: 32px;
        width: 15px;
        background: rgba(255,255,255,1);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -20px;
  }
  &::-moz-focus-outer {
    border: 0;
    }
}
#sc_page1Slider .rs-label {
    
    position: relative;
    transform-origin: center center;
    display: block;
    width: 35px;
    height: 35px;
    background: transparent;
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    font-weight: bold;
    padding-top: 0px;
    box-sizing: border-box;
    margin-top: 20px;
    margin-left: -36px;
    left: attr(value);
    color: var(--text-color); 
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-size: 18px;
     
}
/*********** Baseline, reset styles ***********/
#sc_page1Slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 250.5px;
}

/* Removes default focus */
#sc_page1Slider input[type="range"]:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
#sc_page1Slider input[type="range"]::-webkit-slider-runnable-track {
  background-color: #add8e6;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
#sc_page1Slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -16px; /* Centers thumb on the track */
  background-color: #3f924f;
  border-radius: 0.5rem;
  height: 40px;
  width: 10px;
}

#sc_page1Slider input[type="range"]:focus::-webkit-slider-thumb {
  outline: 3px solid #3f924f;
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
#sc_page1Slider input[type="range"]::-moz-range-track {
  background-color: #add8e6;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
#sc_page1Slider input[type="range"]::-moz-range-thumb {
  background-color: #3f924f;
  border: none; /*Removes extra border that FF applies*/
  border-radius: 0.5rem;
  height: 40px;
  width: 10px;
}

#sc_page1Slider input[type="range"]:focus::-moz-range-thumb{
  outline: 3px solid #3f924f;
  outline-offset: 0.125rem;
}
@container puz (aspect-ratio < 0.65) {
	.sc_container {  
		--sc_puz: calc(94cqw / 17); 
		grid-template-columns:1fr;
		grid-template-rows: 25px calc(var(--puzHeight)) calc(var(--cell-size) * 4);
		grid-template-areas:
        "ma"
        "bd"
        "tb"
        "pa";
		margin-left:-2cqw;
	}
	.sc_wordListing {
		display:none
	}
	.sc_playerGroup {
		display:none;
	} 
	.sc_playerGroup1 {
		display:block;
	} 
	.sc_tilesLeft {
		font-size: 16px;
	}
}
@container puz (aspect-ratio > 0.65) and (aspect-ratio < 0.85) {
	.sc_container {  
		--sc_puz: calc(94cqw / 19);
		grid-template-columns:1fr;
		grid-template-rows: 25px calc(var(--puzHeight)) calc(var(--cell-size) * 4);
		grid-template-areas:
        "ma"
        "bd"
        "tb"
        "pa";
		margin-left:-2cqw;
	}
	.sc_wordListing {
		display:none
	}
	.sc_playerGroup {
		display:none;
	} 
	.sc_playerGroup1 {
		display:block;
	} 
	.sc_tilesLeft {
		font-size: 16px; 
	}
}
@container puz (aspect-ratio > 1) {
	.sc_container { 
		--col2Size:  calc(clamp( 250px,30cqw,400px) - 20px);
		--col1Size:	 calc(100cqw - var(--col2Size));
		--row2Size:	 calc(70cqh - 25px);
		--puzW:  	 min(var(--row2Size),var(--col1Size));
		--sc_puz:	 calc(var(--puzW) / 15);
		grid-template-columns: var(--puzW) auto;
		grid-template-rows: 25px calc(var(--puzHeight) / 2) calc(var(--puzHeight) / 2) auto;
 	} 
	.sc_wordListing {
		width: var(--col2Size);
	}
	.sc_playerGroup {
		width: var(--col2Size);
	} 

}
/*
@container puz (aspect-ratio > 1.2) {
	.sc_container {  
		--sc_puz: calc(100cqw / 40);
		width: 80cqw;
		grid-template-rows: 25px calc(var(--puzHeight) / 2) calc(var(--puzHeight) / 2) auto;
	}
}

@container puz (aspect-ratio > 1.3) {
	.sc_container {  
		--sc_puz: calc(100cqw / 30);
		width: 80cqw;
		grid-template-rows: 25px calc(var(--puzHeight) / 2) calc(var(--puzHeight) / 2) auto;
	}
}
@container puz (aspect-ratio > 1.8) {
	.sc_container {  
		--sc_puz: calc(100cqw / 37);
		width: 65cqw;
		grid-template-rows: 25px calc(var(--puzHeight) / 2 - 20px) calc(var(--puzHeight) / 2 + 20px) auto;
	}
	.sc_wordListing {
		margin-left:50px;
	}
	.sc_boardScores {
		padding-left:50px; 
	}
	.sc_wordsScroller {
		height: calc(var(--puzHeight) / 2 - 70px);
	}
}
@container puz (aspect-ratio > 2.0) {
	.sc_container {  
		--sc_puz: calc(100cqw / 50);
		width: 55cqw;
		grid-template-rows: 25px calc(var(--puzHeight) / 2 - 20px) calc(var(--puzHeight) / 2 + 20px) auto;
	}
	.sc_wordListing {
		margin-left:50px;
	}
	.sc_boardScores {
		padding-left:50px; 
	}
	.sc_wordsScroller {
		height: calc(var(--puzHeight) / 2 - 70px);
	}
}
*/