/* Local modification (this whole file — see specs/design.md):
   every originally-bare "*"/"body"/"a"/"button" selector in this file is now scoped under
   "#app", this game's own exclusive mount root (see games/hextris/index.html and
   ../../dashboard-hextris.inc.php) — unscoped, a universal "* { margin:0; padding:0; }" reset
   alone would have wiped every margin/padding on Bulma's whole component set across the
   surrounding Camila page, not just this game's own elements. Every ID/class-scoped rule below
   this point is untouched from upstream — those already only ever matched this game's own
   markup.
   ":where(#app)" not "#app": found live — plain "#app *"/"#app a"/"#app button" carry an ID
   selector's specificity (upstream's bare "*"/"a"/"button" carried none), which then OUTRANKS
   upstream's own more-specific rules that are supposed to win against them (".overlay"'s
   "margin-left:-50%" centering trick, needed to beat the "*" reset's "margin:0", silently lost
   to "#app *" — reported live as the pause overlay rendering off-center to the right; "#restart"
   similarly, against "#app button"). ":where(...)" always contributes zero specificity regardless
   of what's inside it, so these rules still ONLY ever match inside #app, but no longer change
   which upstream rule wins a conflict — the exact cascade upstream already relied on is
   preserved. Every ":where(#app)"-scoped rule below needs this, not just this first one. */
#app {
	position:fixed;
	inset:0;
	z-index:9999;
}
:where(#app) * {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	padding:0;
	margin:0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
#HIGHSCORE {
	position:absolute;
	left:50%;
	width:250px;
	overflow:visible;
	margin-left:-175px;
	font-family:Exo;

}
#container {
	color:#232323;
	position:absolute;
	left:50%;
	top:calc(50%);
	text-align:center;
	transform:translate(-50%, -50%);
	font-family:Exo;
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
    display:none;
}
.tweet {
	font-size:2rem;
	color:#4099FF;
}
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.tweet{
		font-size:1rem;
	}
}
/* Local modification: scoped under #app (was bare "a" — see the header comment at the top of
   this file). #app is this game's own exclusive mount root in both the standalone page and the
   Camila-hosted dashboard tab (see games/hextris/index.html and ../../dashboard-hextris.inc.php),
   so this still reaches every link this game itself renders, just nothing outside it.
   ":where(#app)", not "#app" — see the top-of-file comment on why (zero specificity, preserves
   upstream's own cascade). */
:where(#app) a {
	color:#232323;
}
/* Local modification: .navbar/.navbar li deleted entirely — dead CSS in upstream (grep confirms
   no element anywhere in this game's HTML/JS ever gets class="navbar"), and also the single
   most dangerous name collision if left unscoped: Bulma's own top navigation component in the
   surrounding Camila page is called exactly ".navbar" too. */

#title {
	color:#ecf0f1;
	font-size:6vmin;
}

#score {
	font-size:4vmin;
	text-align:center;
	width:30%;
}

#highscores {
	text-align:center;
	list-style:none;
}

.not-visible {
	display:none;
}

/* Local modification: scoped under #app (was bare "button"/"button:focus") — same reasoning as
   the "a" rule above; unscoped, these would have restyled every button in the surrounding
   Camila page (nav bar, other tabs, admin chrome), not just this game's own.
   ":where(#app)", not "#app" — see the top-of-file comment on why (zero specificity, preserves
   upstream's own cascade — this is exactly what broke #restart's centering, see that comment). */
:where(#app) button {
	color:#ecf0f1;
	background-color:rgba(0,0,0,0);
	border:0;
}

:where(#app) button:focus {
	outline:0;
}

#openSideBar {
	position:fixed;
	margin-top:6px;
	width:72px;
	height:72px;
	margin-left:11px;
	z-index:3003;
	color:#232323;
	cursor:pointer;
	top:0;
	left:0;

}


#pauseBtn {
	display:none;
	position:fixed;
	margin-bottom:7px;
	width:72px;
	height:72px;
	margin-right:11px;
	z-index:3000;
	color:#232323;
	cursor:pointer;
	right:0;
	bottom:0;
	z-index:99;
}

#restartBtn {
	display:none;
	position:fixed;
	margin-bottom:7px;
	width:72px;
	height:72px;
	margin-left:11px;
	z-index:3000;
	color:#232323;
	cursor:pointer;
	bottom:0;
	z-index:99;
}
#startBtn {
	position:absolute;
	left:40%;
	top:38%;
	height:25%;
	width:25%;
	z-index:99999999;
	cursor:pointer;
}

#helpScreen {
	height:100%;
	width:100%;
	z-index:3001;
	position:fixed;
	top:0;
	margin:0;
	font-size:15px;
	text-align:center;
	display:none;
	color:#232323;
	background-color:rgba(236,240,241,1);
}

#colorBlindBtn {
	position:absolute;
	width:120px;
	height:20px;
	z-index:9999;
	left:47%;
	top:65%;
	font-size:15px;
	text-align:center;
	color:#232323;
	cursor:pointer;
}

#inst_main_body {
	padding:0px;
	font-size:1.2em;
	left:50%;
	top:50%;
	position: absolute;
	text-align:left;
	max-width:400px;
	/*margin-top:30px;*/
	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
}

#inst_main_body > a {
	font-weight:bold;
}

#inst_main_body > hr {
	width:100%;
	color:#232323;
	background-color:#232323;
	height:1px;
	border:0;
}

#inst_main_body > p {
	margin-bottom:15px;
}

#instructions_head {
	text-align:center;
	font-size:1.5em;
	padding-bottom:4px;
}


#highScoreInGameTextHeader {
	color: #bdc3c7;
	width:100%;
}

#highScoreInGameText {
	position: absolute;
	top:10px;
	text-align: center;
	width:200px;
	left:50%;
	margin-left:-100px;
}

#currentHighScore {
	color: #2c3e50;
	width:100%;
	margin-top: -5px;
	font-size:2em;
}

@media only screen and (max-device-width:480px) {
	#helpScreen {
		position:fixed;
		top:2px;
		padding-top:20px;
		margin:0;
		width:100%;
		height:100%;
		font-size:13px;
		text-align:center;
	}
	#inst_main_body {
		width:calc(100% - 70px);
		transform:translate(-50%, -50%);
		-webkit-transform:translate(-50%, -50%);
		-moz-transform:translate(-50%, -50%);
		-ms-transform:translate(-50%, -50%);
	}
	#instructions_head {
		padding-left:0%;
	}
	#openSideBar{
		width:60px;
		height:60px;
	}
	#pauseBtn {
		width:60px;
		height:60px;
	}
	#restartBtn {
		width:60px;
		height:60px;
	}
}

.overlay {
	position:absolute;
	height:20%;
	width:100%;
	left:50%;
	top:50%;
	margin-left:-50%;
	margin-top:-10%;
	z-index:3000;
	color:#232323;
	text-align:center;
}

.helpText {
	z-index:3001;
}

.centeredHeader {
	font-size:5vw; 
	text-align:center;
	line-height:4rem;
}

.centeredSubHeader {
	font-size:2.2rem; 
	line-height:1em;
	text-align:center;
}

.centeredSubSubHeader {
	font-size:1.4rem; 
	text-align:center;
}

#buttonCont {
	position:absolute; 
	left:50%;
	width:310px;
	margin-left:-8px;
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
}

@media only screen and (orientation:landscape) {
	#buttonCont {
		bottom:calc(50vh - 19vh - 36px);
	}
	#container {
		top:calc(50vh - 11vh);
	}
}

@media only screen and (orientation:portrait) {
	#buttonCont {
		bottom:calc(50vh - 19vw - 36px);
	}
	#container {
		top:calc(50vh - 11vw);
	}
}

@media only screen and (min-device-width:320px) and (max-device-width:600px) {
	.centeredHeader {
		font-size:2rem; 
		text-align:center;
		line-height:0.6rem;
	}

	.centeredSubHeader {
		font-size:1rem; 
		text-align:center;
	}

	.overlay {
		margin-top:-20%;
	}

	#buttonCont {
		width:280px;
	}

	@media only screen and (orientation:landscape) {
		#buttonCont {
			bottom:119px;
		}
	}

	@media only screen and (orientation:portrait) {
		#buttonCont {
			bottom:119px;
		}
	}
}
.blur {
	opacity:0.1;
}

/* Local modification: redundant with the :where(#app) * rule near the top of this file (upstream
   had two separate "* { padding:0; margin:0; }" resets) — scoped the same way (zero-specificity
   ":where(#app)", not "#app" — see that rule's own comment on why), kept as its own rule rather
   than merged, to keep this diff mechanical/line-for-line against upstream. */
:where(#app) * {
	padding:0;
	margin:0;
}

#app {
	color:#ecf0f1;
	font-family:'Exo', sans-serif;
	background-color:#ecf0f1;
}

#clickToExit {
	cursor:pointer;
}

#canvas {
	transition:all 0.5s ease;
	position:absolute;
	left:0;
	right:0;
	height:100%;
	width:100%;
	background-color:#ecf0f1;
	z-index:0;
}
#title {
	z-index:99;
	margin-top:20px;
	color:#2c3e50;
}

#gameoverscreen {
	/*display:none;*/
}

/* Local modification: "left:calc(50% - 124px)" → "left:50%" — the -124px offset was upstream's
   own layout, leaving room for the share button/rrssb row that used to sit to this button's
   right (see index.html's own comment on their removal). With nothing there anymore, the old
   offset just reads as this button sitting off-center to the left; centering it outright is the
   correct fix now that it's the only element left in #bottomContainer, not a workaround. */
#restart{
	display:none;
	cursor:pointer !important;
	margin:0;
	padding:0;
	bottom:15px;
	position:absolute;
	left:50%;
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
	margin-bottom:-3.5px;
}

/* Local modification: #socialShare rule deleted — the element it styled (the "SHARE MY SCORE!"
   Twitter popup) was removed from index.html, see that file's own comment and
   specs/design.md. */

.unselectable {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
#afterhr {
	margin:0;
	padding:0;
	margin-bottom:-10px;
	padding-bottom:-10px;
}
#app {
	overflow:hidden;
}
#gameoverscreen {
	padding:8px;
}
@font-face {
	font-family:Exo;
	font-weight:light;
	src:url("./fonts/Exo2-ExtraLight.otf") format("opentype");
}

@font-face {
	font-family:Exo;
	src:url("./fonts/Exo2-Regular.otf") format("opentype");
}

@font-face {
	font-family:Exo;
	font-weight:bold;
	src:url("./fonts/Exo2-SemiBold.otf") format("opentype");
}

.GOTitle {
	font-weight:bold;
	font-size:24.2000px;
}

.scoreNum {
	font-weight:normal ! important;
}

#cScore {
	font-size:60.5000px;
	font-weight:light;
	margin-bottom:5px;
	margin-top:-10px;
}

#highScoresTitle {
	margin-bottom:2px;
}

.score {
	font-weight:light;
	line-height:18px;
}




#bottomContainer {
	position:absolute;
	width:100%;
	bottom:0px;
}

/* Local modification: #androidBadge/#iOSBadge rules deleted — the Play Store/App Store badge
   <img>s they styled were removed from index.html along with the share buttons, see that file's
   own comment and specs/design.md. */

#authors {
	position:absolute;
	width:200px;
	bottom:0px;
	left:50%;
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
}