@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(../fonts/SourceSansPro.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

* {box-sizing:border-box; -webkit-box-sizing:border-box; /*font-family:Source Sans Pro; font-family: 'Short Stack'*/font-family:monospace; user-select:none;}
html {text-size-adjust:100%; -webkit-text-size-adjust:100%; height:100%;
	--width: 500px;
}
body {background:#000; font-smoothing:antialiased;-webkit-font-smoothing:antialiased; z-index: 0; margin:0; overflow: hidden;}

#sbody {display:none; position:absolute; width:100%; height:calc(100% - 50px); overflow:hidden;}
	#sbody.install_pwa {height:calc(100% - 70px);}

#ad {position: fixed; bottom:0; z-index:1000; left:0; right:0; margin:auto; width:100%; height:50px; background:#bc6060; text-align:center;}
	#ad:before {content:'Advertisement'; top:50%; position:absolute; z-index:-1; transform:translateY(-50%); left:0; right:0; color:#9e4d4d; pointer-events:none;}
.hide_ad #ad {
	display: none;
}
.hide_ad #sbody {
	height: 100% !important;
}
.ad_foot_responsive { height: 50px;}
@media(min-width: 468px) {
	#sbody { height:calc(100% - 60px); }
		#sbody.install_pwa { height:calc(100% - 80px); }
	#ad { height: 60px; }
	.ad_foot_responsive { height: 60px; }
}
@media(min-width: 800px) {
	#sbody { height:calc(100% - 90px); }
		#sbody.install_pwa { height:calc(100% - 110px); }
	#ad { height: 90px; }
	.ad_foot_responsive { height: 90px; }
}

#install_pwa {height:20px; line-height:20px; margin:0 auto; width:fit-content; width:-moz-fit-content; width:-webkit-fit-content;}
	#install_pwa button#butInstall {border:0; padding:0 15px; height:20px; display:block; background:#000; color:#FFF; font-family:monospace; line-height:20px;}
		#install_pwa button#butInstall:hover {background:#333; cursor:pointer;}

.clear {clear:both;}

input, select {/*-webkit-appearance:none;*/ border-radius:0;}

.page {display:none; position: absolute; overflow:hidden; height:100vh; height:calc(100vh - 45px); width:100vw; top:45px; left:0px; transition: transform 250ms ease-out; background-color:#111; background-image:repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);}
.page .content {position:relative; margin:0 auto; text-align:center;}
.page.scrollable {}
.page.scrollable .content {position:absolute; top:0; padding-top:30px; width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; -webkit-transform:translate3d(0, 0, 0); -webkit-backface-visibility:hidden; -webkit-perspective:1000; -webkit-transition:-webkit-transform 200ms ease-in-out;}

.page .content.cmin {width:fit-content; width:-moz-fit-content; left:0; right:0; height:fit-content; height:-moz-fit-content; top:50%; transform:translateY(-50%); max-height:100%; background:rgba(255, 255, 255, 0.8); padding:0 5vmin 5vmin;}
	.page .content.cmin .button_toggle {width:auto;}
		
.page.show {display: block; -webkit-transform:translate3d(0, 0, 0);}
.page.show.show_bottom {transform: translateY(100%);}
.page.show.show_right {transform: translateX(100%);}
.page.show.show_left {transform: translateX(-100%);}
.page.show.shown {z-index: 1; transform: translateY(0) translateX(0); -webkit-transform:translate3d(0, 0, 0); }
.page.show.shown.show_bottom .content {text-align:center; padding-left:25px; padding-right:25px;}
.page.show.shown.show_bottom.scrollable .content {}
.page.show.hiding {z-index: 0;}
.page.show.hiding.show_bottom {transform: translateY(100%);}


#modal-overlay {position:absolute; pointer-events:none; opacity:0; background-color:#222; width:100%; height:100%; -webkit-transition: opacity 200ms ease-out, background-color 200ms ease-out; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; z-index:999;}
#modal-overlay.enabled {pointer-events:auto; opacity:0.9;}

#modal {display:none; position:absolute; z-index:1000; top:50%; right:0; left:0; margin:auto; margin-top:-50px; max-width:calc(var(--width) - 50px); width:100%; text-align:center; color:#FFF; transform:translateY(-50%);}
#modal .fa {position:absolute; right:5px; bottom:0; z-index:-1; font-size:9em; color:#ECECEC;}
#modal h1 {margin:10px 0 0 0; padding:0; text-align:center; font-size:7vh; font-weight:normal; color:#3592dd;}
	#modal h1 div {font-size:2vh; color:#FFF;}
#modal > div {margin:10px; font-size:3vh; max-height:250px; overflow:hidden; overflow-y:auto; text-align:left;}
#modal > a.botbuttons {position:absolute; color:#FFF; width:50%; height:50px; line-height:50px; text-align:center; background-color:#3592dd; left:0;}
#modal > a.botbuttons.fullwidth {width:100%;}
#modal > a.botbuttons:last-child {background-color:#DB2E2E; left:initial; right:0;}
#modal > a.botbuttons.fullwidth:last-child {background-color:#0BF;}
#modal input[type="text"] {background-color:#EFEFEF; width:100%; padding:10px; font-size:18px; opacity:0.8; border:1px solid #DDD;}
#modal #mbutton1:active, #modal #mbutton2:active, #modal #mbutton3:active {opacity:0.9;}

#modal.loading {width:175px; height:50px; line-height:50px;}
#modal.loading > div {display: none;}
#modal.loading .fa {font-size:initial; position:static; color:#999;}
#modal.loading h1 {margin:0;}
#modal.loading p, #modal.loading a {display:none !important;}


#nav-overlay {position:absolute; pointer-events:none; opacity:0; background-color:#222; width:100%; height:100%; -webkit-transition: opacity 200ms ease-out, background-color 200ms ease-out; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; z-index:99;}
	#nav-overlay.enabled {pointer-events:auto; opacity:0.7;}

#navbutton {position:absolute; top:0; right:0; z-index:100; width:50px; height:50px; line-height:50px; text-align:center; color:#FFF;
    z-index: 1000;}

#nav {position:fixed; z-index:100; top:0; right:0; width:275px; background-color:#EFEFEF; overflow:auto; -webkit-transition: opacity 200ms ease-out; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; opacity:0; pointer-events:none;}
#nav.open {opacity:1; pointer-events:all;}
#nav ul {list-style:none; margin:0; padding:0;}
#nav ul li {line-height:45px; font-size:18px; border-bottom:solid 1px #E7E7E7;}
#nav ul li:first-child {color:#444; text-align:center; line-height:35px;}
#nav ul li a {color:#444; background-color:#FFF; text-decoration:none; padding:0 15px; display:block;}

.head {height:45px; background:black; color:#FFF; line-height:45px; font-family:monospace; font-size:20px; padding:0 15px;}

.button_wrapper {width:fit-content; width:-moz-fit-content; top:50%; position:relative; transform:translateY(-50%); margin:0 auto;}
		.button_wrapper .home_logo {color:#FFF; font-size:6vh; text-align:center; width:100%;}
	.button_wrapper .main_button {position:relative; font-size:3vh; padding:5vmin 10vmin; background-image:linear-gradient(rgba(70, 77, 85, 0.9), rgba(37, 41, 46, 0.9)); border-radius:8px; color:#FFF; box-shadow:0 10px 20px rgba(0, 0, 0, .1), 0 3px 6px rgba(0, 0, 0, .05); font-family:"Segoe UI Symbol"; border:1px solid #222; text-align:center; cursor:default; line-height:1; transition:transform 100ms;}
		.button_wrapper .main_button:hover {transform:scale(1.1); z-index:1; background-image:linear-gradient(rgba(74, 88, 105, 0.95), rgba(61, 72, 86, 0.95));}
		.button_wrapper .main_button div {font-size:2vh; opacity:0.6;}
		.button_wrapper .main_button .daily_button {position:absolute; right:-4vmin; top:50%; transform:translateY(-50%); background: linear-gradient(#464d55, #25292e); opacity:1; width:10vmin; height:10vmin; border-radius:50%; transition:transform 100ms;}
			.button_wrapper .main_button .daily_button:hover {transform:translateY(-50%) scale(1.1);}
			.button_wrapper .main_button .daily_button .daily_open {display: none;}
				.button_wrapper .main_button .daily_button.available {background: linear-gradient(#8989e0, #6c6cff);}
						.button_wrapper .main_button .daily_button.available:hover {background:linear-gradient(#89c4e0, #6caeff);}
				.button_wrapper .main_button .daily_button.available .daily_open {display: initial;}
				.button_wrapper .main_button .daily_button.available .daily_complete {display: none;}
			.button_wrapper .main_button .daily_button > span {position:absolute; top:50%; transform:translateY(-50%); left:0; right:0; margin:auto; font-size:2vmin;}

.difficulty_toggle_wrap {margin-bottom:10px;}

.difficulty_toggle {
	width: 33%;
	background:linear-gradient(#d0d3d6, #d8dde4);
	border:outset 2px #7c7c84;
	display: inline-block;
	padding:1vh;
	font-size:2vh;
	line-height:1;
	text-align:center;
	cursor:default;
	transition:transform 100ms;
}
.difficulty_toggle.selected {
	background:#6c6cff;
	background:linear-gradient(#8989e0, #6c6cff);
	border:outset 2px #7c7c84;
	color:azure;
	transform:scale(1.2);
}
#difficulty_description{
	color: white;
	margin-bottom:10px;
	text-align:center;
	font-size:2vh;
}


.button_toggle_wrap {margin-bottom:10px;}

.button_toggle {
	width: 33%;
	background:linear-gradient(#d0d3d6, #d8dde4);
	border:outset 2px #7c7c84;
	display: inline-block;
	padding:1vh;
	font-size:2vh;
	text-align:center;
	cursor:default;
	transition:transform 100ms;
}
.button_toggle.selected {
	background:#6c6cff;
	background:linear-gradient(#8989e0, #6c6cff);
	border:outset 2px #7c7c84;
	color:azure;
	transform:scale(1.2);
}


::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background-color:rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
	background-color:#777;
}
::-webkit-scrollbar-thumb:hover {
	background-color:#AAA;
}

#game_board {}

.board_column {
	width: calc(var(--width) / 8);
	float: left;
}

.board_space {
	height:calc((var(--width) - 32px) / 8);
	user-select: none;
	position: relative;
	margin: 4px 2px;
}

.board_tile {
	height:calc((var(--width) - 32px) / 8);
	width: calc((var(--width) - 32px) / 8);
	text-align: center;
	background:rgba(18, 18, 19, 0.8);
	position: absolute;
	/*overflow: hidden;*/
	color:#F8F8F8;
	border-radius:10px;
	transition:border-radius 100ms, opacity 100ms;
	opacity:0.95;
}
		.board_tile:hover {opacity:1; color:#FFF;}
	.board_tile .char {z-index:2;position:relative; top:50%; transform:translateY(-50%); font-size:calc(var(--width) / 14);}

.board_tile.selected {
	background:#818181;
	color:#FFF;
	z-index:1;
	border-radius:5px;
}

.board_tile .letter_pos_color {
    width: 100%;
    height: 100%;
    position: absolute;
	z-index:1;
    background: black;
	border-radius:5px;
    opacity: 0;
}
.board_tile.letter_number_1 .letter_pos_color{opacity: 0;}
.board_tile.letter_number_2 .letter_pos_color{opacity: 0.05;}
.board_tile.letter_number_3 .letter_pos_color{opacity: 0.10;}
.board_tile.letter_number_4 .letter_pos_color{opacity: 0.15;}
.board_tile.letter_number_5 .letter_pos_color{opacity: 0.20;}
.board_tile.letter_number_6 .letter_pos_color{opacity: 0.25;}
.board_tile.letter_number_7 .letter_pos_color{opacity: 0.30;}
.board_tile.letter_number_8 .letter_pos_color{opacity: 0.35;}
.board_tile.letter_number_9 .letter_pos_color{opacity: 0.40;}
.board_tile.letter_number_10 .letter_pos_color{opacity: 0.45;}
.board_tile.letter_number_11 .letter_pos_color{opacity: 0.50;}
.board_tile.letter_number_12 .letter_pos_color{opacity: 0.55;}
.board_tile.letter_number_13 .letter_pos_color{opacity: 0.60;}
.board_tile.letter_number_14 .letter_pos_color{opacity: 0.65;}
.board_tile.letter_number_15 .letter_pos_color{opacity: 0.70;}
.board_tile.letter_number_16 .letter_pos_color{opacity: 0.75;}
.board_tile.letter_number_17 .letter_pos_color{opacity: 0.80;}
.board_tile.letter_number_18 .letter_pos_color{opacity: 0.85;}
.board_tile.letter_number_19 .letter_pos_color{opacity: 0.90;}
.board_tile.letter_number_20 .letter_pos_color{opacity: 0.95;}

.dir_line {
	z-index:3;
	display: none;
	background:#b0ae5d;
	height:4px;
	position: absolute;
	top: 50%;
	left: 50%;
	width:40%;
	transform: rotate(0deg);
	transform-origin: left;
}
.dir_line:after {content:'<'; color:#b0ae5d; position:absolute; top:-10px; right:80%; font-size:18px; font-weight:bold;}

.line_dir_SE .dir_line, .line_dir_NE .dir_line, .line_dir_NW .dir_line, .line_dir_SW .dir_line{width:40%;}

.dir_line:has(+ .selected) {
	display: block;
}
	.submittable .board_tile.selected .dir_line {background-color:#2468bd;}
			.submittable .board_tile.selected .dir_line:after {color:#2468bd;}

		.board_tile.animate_remove .dir_line {display:none;}

.line_dir_ .dir_line {display: none !important;}
.line_dir_E .dir_line {left:85%;}
.line_dir_SE .dir_line {transform: rotate(45deg); left:85%; top:85%;}
.line_dir_S .dir_line {transform: rotate(90deg); top:85%;}
.line_dir_SW .dir_line {transform: rotate(135deg); top:85%; left:15%;}
.line_dir_W .dir_line {transform: rotate(180deg); left:15%;}
.line_dir_NW .dir_line {transform: rotate(225deg); top:10%; left:10%;}
.line_dir_N .dir_line {transform: rotate(270deg); top:10%;}
.line_dir_NE .dir_line {transform: rotate(315deg); top:10%; left:90%;}

.board_tile.animate_move {
	transform:translateY(calc(var(--width) / -8));
	animation-name: animate_move_frames;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.board_tile.animate_move2 {
	transform:translateY(calc(var(--width) / -8 * 2));
}

.board_tile.animate_move3 {
	transform:translateY(calc(var(--width) / -8 * 3));
}

.board_tile.animate_move4 {
	transform:translateY(calc(var(--width) / -8 * 4));
}

.board_tile.animate_move5 {
	transform:translateY(calc(var(--width) / -8 * 5));
}

.board_tile.animate_move6 {
	transform:translateY(calc(var(--width) / -8 * 6));
}

.board_tile.animate_move7 {
	transform:translateY(calc(var(--width) / -8 * 7));
}

.board_tile.animate_move8 {
	transform:translateY(calc(var(--width) / -8 * 8));
}

.board_tile.animate_remove {
	transform:translateY(0);
	animation-name: animate_remove_frames;
	animation-duration: 1s;
}

@keyframes animate_remove_frames {
	0%   {transform:translateY(0); opacity: 1;}
	100% {transform:translateY(calc(var(--width) / 8)) scale(5) rotate(90deg); opacity: 0;}
}

@keyframes animate_move_frames {
	0%   {}
	100% {transform:translateY(0);}
}

.character_selected{
	position: absolute;
}

.character_selected > div{
	font-size:calc(var(--width) / 14);
	color:white;
	position:absolute;
	animation-name: animate_character_selected;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	pointer-events:none;

	display:none;/*disabled*/
}

@keyframes animate_character_selected {
	0%   {opacity: 1; transform:rotate(0) translateY(0);}
	100% {opacity: 0; transform:rotate(1024deg) translateY(100px);}
}

.graph_cont {
	position: relative;
	background:rgba(0, 128, 0, 0.2);
}

.graph_cont > div {
	display: inline-block;
	background:#f0f8ff;
	width: 4%;
}

.graph_score_line {
	position: absolute;
	border-left:green 2px solid;
	height: 100px;
	bottom:6px;
	background:rgba(255, 0, 0, 0.2) !important;
	transition:transform 3s ease-in-out;
	transition-delay:0.25s;
	width:100% !important;
}

.animate .graph_score_line {
	transform:translate3d(0,0,0) !important;
}
	.animate .graph_score_line span {position:absolute; top:-3vh; line-height:3vh; background:green; padding:0 5px; transform:translateX(-50%); -moz-transform:translateX(-50%);}

.graph_max{
    background: none !important;
	position: absolute;
    right: 0;
		top:-4vh;
	width: fit-content !important;
}

.graph_min{
    background: none !important;
	position: absolute;
		left:0;
		top:-4vh;
	width: fit-content !important;
}

#game_title {color:#BFBFBF; padding:0 10px; text-transform:uppercase; font-size:11px; font-style:italic; background-color:#000; width:fit-content; width:-moz-fit-content; margin:auto; margin-bottom:-5px; border-radius:5px;}
	/*#game_title_daily:before {content:'-';}*/

#clear_word {font-size:12px; color:#BFBFBF; padding:0 10px; text-transform:uppercase; background-color:#000; width:fit-content; width:-moz-fit-content; margin:auto; border-radius:5px; position:absolute; bottom:12px; margin-left:15px; line-height:initial;}

.game_item {background:#FFF; margin-bottom:3px; border:1px solid #7e7e7e;}
	.game_item div {border-bottom:1px solid #e5e5e5;}

.sub_wrap {background:-webkit-linear-gradient(#935fb2,#432c70); padding:10px; border-bottom:5px solid #818181;}
	#submit {background:#818181; color:#EEE; padding:10px 0; border:1px solid #AAA; margin:0 auto 5px; font-size:20px; text-transform:uppercase; letter-spacing:1px; max-width:var(--width); border-radius:5px;}
			#submit:hover {opacity:0.9; cursor:default;}
		.submittable #submit {background:#24c792;}
		.submittable .board_tile.selected {background:#24c792; /*animation:animate_wobble 800ms ease-in-out infinite;*/}
		/*@keyframes animate_wobble {
			0%   {opacity:1; transform:rotate(0);}
			25%  {opacity:0.99; transform:rotate(-2deg);}
			50%  {opacity:1; transform:rotate(0);}
			75%  {opacity:0.99; transform:rotate(2deg);}
			100% {opacity:1; transform:rotate(0);}
		}*/
		#cur_word {color:#F8F8F8;}
			.submittable #cur_word {color:#24c792;}
		#cur_points {font-size:20px; line-height:50px; margin-left:20px; position:absolute;}
		.game_info {font-size:12px; position:absolute; left:0; right:0; bottom:-8px; margin:0 auto; width:fit-content; width:-moz-fit-content; line-height:initial; padding:0 5px; border-radius:5px; background-color:#255796;}

.cur_word_wrap {position:relative; font-size:60px; line-height:60px; height:60px;}
	.cur_word_wrap, .score_value_wrap {color:#FFF;}
		.score_value_wrap {float:left; width:30%;}
			.score_value_wrap #score_value {width:3em; height:3em; display:block; line-height:3em; background:#2498bd; margin:0 auto; border-radius:50%; font-size:2em;}

#word_list {
	float:left;
	width:70%;
	max-height:60px;
	overflow-y:auto;
	background:orange;
	border-radius:5px;
	margin-top:5px;
}

#word_list .word_row {display:inline-block; padding:5px 10px; background:rgba(18, 18, 19, 0.8); color:#FFF; border-radius:5px; margin:2px; float:left; cursor:default;}
	#word_list .word_row:hover {background:rgba(18, 18, 19, 1.0);}

.blink_carat {position:absolute; animation:blink_caret 1.5s step-end infinite; line-height:60px; font-size:40px;}

@keyframes blink_caret {
	from, to { color: transparent }
	50% { color: orange; }
}

.content_wrap {background:-webkit-linear-gradient(rgba(67, 44, 112, 0.5),#935fb2); border-top:5px solid #818181;}
	.content_wrap.score_word_wrap {margin:0 auto; background:none; border:none !important; width:100% !important; max-width:var(--width);}
	.submittable .sub_wrap {border-bottom:5px solid #24c792;}
	.submittable .content_wrap {border-top:5px solid #24c792;}
#game_board {overflow:hidden; margin:0 auto; max-width:fit-content; max-width:-moz-fit-content;}

/* THEMES */

body.space_theme #game.page, body.space_theme #homepage.page {background:url('/app/img/space_theme-tiny.jpg') center no-repeat; background-size:cover;}
	body.space_theme .content_wrap {width:fit-content; width:-moz-fit-content; left:0; right:0; margin:auto; border-radius:1vh 1vh 0 0;}
	body.space_theme .sub_wrap {max-width:var(--width); left:0; right:0; margin:auto; border-radius:0 0 1vh 1vh;}


/* iOS only */

/* Android only */

/* Windows only */
/*body#win*/

/* Non-phonegap builds only */

/* Smaller/Mobile devices Landscape (iPhone <= 6+ etc.) */