/*
////////////////////////////////////////////////////////////////////////////////////////////
///                                                                                      ///
///  Developer Interactive UIUX  2021-2022                                               ///
///  Contact Shane Brumback https://www.shanebrumback.com                                ///
///  Message me for questions about this project                                         ///
///  I am developing this Open World Multiplayer PWA Concept using                       ///
///  Three.js and AWS Web Services Serverless Technologies                               ///                           
///                                                                                      ///
///                                                                                      ///
////////////////////////////////////////////////////////////////////////////////////////////
*/

body {
	/*background-image: url("/images/super-soldier-battle-forest-mountain.jpg");*/
	background-color: black;
    font-family: 'digital-clock-font';
	display: block;
	position: fixed;
	top: -10px;
}

#inputSearchBrowser {
	min-width: 75%;
	max-width: 75%;
	font-size: 1vw;
	height: 2vw;
}


#iconSearchBrowser {
	min-width: 10%;
	max-width: 50px;
	font-size: 2vw;
	color: white;
	padding-top: 5px;
	padding-right: 5px;
}

#selectCategoryBrowser {
	min-width: 98%;
	max-width: 98%;
	font-size: 1vw;
	color: rgb(64,64,64);
}

.divInputSearch {
	display: flex;
	text-align: right;
	font-size: 1.5vw;
	vertical-align: top;
}

.divCategory {
	text-align: left;
	vertical-align: middle;
	margin: 0px;
}

#selectCategoryBrowser {
	min-width: 98%;
	max-width: 98%;
	font-size: 1vw;
	height: 2vw;
	color: rgb(64,64,64);
}


#imgReticle {
	position: fixed;
	width: 40px;
    height: 40px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#appWrapper {
	display: block;
	min-width: 100%;
	min-height: 110%;
	position: fixed;
	top: 0;
	z-index: 10000;
}

@font-face {
	font-family: 'digital-clock-font';
	src: url('/fonts/digital-font-001/digital-7.ttf');
}

#divDigitalTimerIndexPage, #divDigitalTimerGame, #divHitData, #divScoreData, #divEnemyKillsData{
	font-family: 'digital-clock-font';
	font-size: 2.5vw;
	min-width: 150px;
	max-width: 150px;
	text-align: center;
	margin: 0;
}

#divGameObjectiveInstrunctions {
	font-family: 'digital-clock-font';
	position: relative;
	top: 0px;
	left: 0px;
	font-size: 1vw;
	text-shadow: 2px 2px black;
	text-align: left;
	white-space: normal;
}

#divGameMessageData {
	font-family: 'digital-clock-font';
	font-size: 1vw;
	min-width: 150px;
	max-width: 150px;
	margin: 0;
	
}



#divScoreWrapper {
	display: flex;
	font-family: 'digital-clock-font';
	flex-direction: row;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	max-height: 100px;
	min-width: 100%;
	max-width: 100%;
	position: fixed;
	top: 15px;
	bottom: auto;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	vertical-align: middle;
}



#divGameTime {
	font-family: 'digital-clock-font';
	font-size: 1.5vw;
	text-align: center;
	margin: 0;
	border-color: lightgray;
	z-index: 9000;
	min-width: 150px;
	max-width: 150px;
	text-align: center;
	vertical-align: middle;
}

#divScore, #divGameMessage, #divHit, #divEnemyKills {
	font-family: 'digital-clock-font';
	font-size: 1.5vw;
	text-align: center;
    text-shadow: 2px 2px black;
	z-index: 9000;
	min-width: 150px;
	max-width: 150px;
    min-height: 75px;
	max-height: 75px;
	text-align: center;
	vertical-align: middle;
	white-space: normal;
}



#divTargeted {
	position: relative;
	font-size: 1.5vw;
	text-align: center;
	color: green;
	background-image: url("/images/reticle-white-score.png");
	background-repeat: no-repeat;
	background-size: 75px 75px;
	background-color: rgba(2, 7, 93, .35);
	border: 1px solid;
	border-color: lightgray;
     text-shadow: 2px 2px black;
	z-index: 9000;
	vertical-align: middle;
	min-width: 10px;
	max-width: 10px;
	text-align: center;
	vertical-align: middle;
	line-height: 75px;
	display: none;
}

#centeredTargetedText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.reticle-center-screen {
	position: fixed;
	top: 50%;
	left: 50%;
	font-size: 3vw;
	margin-top: -50px;
	margin-left: -100px;
    text-align: center;
	z-index: 9000;
}

#divProgressBar {
	display: block;
	width: 100%;
	max-width: 30%;
	color: white;
	background-color: rgba(2, 7, 93, .35);
	font-size: 1.5vw;
	border: 1px solid;
	border-color: lightgray;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
	z-index: 10000;
}




#divGameStatsFPS {
    position: relative;
	margin: auto;
    text-align: center;
    min-width: 300px;
 
}



h1 {
     font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	color: white;
	font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	font-size: 2vw;
	width: 100%;
	text-align: center;
	margin: 0px;
	white-space: normal;
}

h2 {
	color: white;
    font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	font-size: 1.5vw;
	width: 95%;
	margin: 0px;
}

p {
	padding: 10px;
	
	white-space: normal;
}



#divMinimizeMaximize {
	display: block;
	width: 100%;
	max-width: 300px;
	color: white;
	background-color: rgba(101, 67, 33, .45);
	font-size: 1.5vw;
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
    text-align: middle;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow-y: hidden;
	overflow-y: auto;
	padding-left: 10px;
	padding-right: 10px;
}

#GlowLink {
	font-size: 1.5vw;
	text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 3px #fff, 0 0 6px #0fa;
	margin: auto;
}

#divGamePlayerListWrapper {
    font-family: 'digital-clock-font';
	position: fixed;
	top: 0;
	right: 10px;
	left: auto;
	transform: none;
	min-width: 250px;
	max-width: 250px;
	text-align: center;
	z-index: 10000;
}

#divGamePlayerList {
   font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	display: block;
	max-width: 125px;
	min-height: 125px;
	max-height: 125px;
	color: white;
	font-size: 1.5vw;
	white-space: nowrap;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	overflow-y: hidden;
	overflow-y: auto;
    text-align: middle;
}

#sceneGameMapBottomRightWrapper {
	display: block;
	position: fixed;
	min-width: 200px;
	max-width: 200px;
	right: 0.5%; 
	bottom: 5%;
	color: white;
	text-align: center;
	background: linear-gradient(135deg, rgba(10, 11, 26, 0.67), rgba(26, 27, 63, 0.67));
	border: 1px solid rgba(57, 255, 20, 0.3);
	border-radius: 20px;
	box-shadow: 0 0 30px rgba(57, 255, 20, 0.15);
	padding: 10px;
	overflow: hidden;
}

#divGameTitleHeader {
	display: block;
	position: fixed;
	top: 1%;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	color: white;
	text-align: center;
	-webkit-transform: none;
	transform: none;
	z-index: 6000;
	margin: 0;
	padding: 0;
	font-family: 'Orbitron', sans-serif !important;
	/* The title bar spans the full width across the top and overlapped the first
	   left-menu button (Leaderboard), swallowing its hover/click. It is purely
	   decorative, so let pointer events pass through to the menu underneath. */
	pointer-events: none;
}

#divGameTitleHeader > div,
#divGameTitleHeader h1 {
	font-family: 'Orbitron', sans-serif !important;
	text-align: center !important;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

#divGameTitleHeader img {
	max-width: 100%;
	height: auto;
}

#imgLoading {
	min-width: 100%;
	min-height: 100%;
	object-fit: fill;
	position: fixed;
	top: 0;
	z-index: 0;
}

html {
	overflow: scroll;
	overflow: hidden;
	overflow-y: hidden;
}

::-webkit-scrollbar {
	width: 0; /* Remove scrollbar space */
	background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
	/*background: #FF0000;*/
}


html, body, p, label {
	height: 100%;
	margin: 0;
	
	font-size: 1vw;
}

#divFlexButtnn {
	display: flex;
	min-width: 100%;
	max-width: 100%;
	flex-direction: row;
	text-align: left;
	vertical-align: middle;
	margin: auto;
}

div{
	font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	min-width: 300px;
	max-width: 300px;
	margin-top: 10px;
	color: white;
	font-size: 1.25vw;
}

button {
	font-family: 'digital-clock-font';
	min-width: 300px;
	max-width: 300px;
	margin-top: 10px;
	color: white;
	font-size: 1.25vw;
	background-color: rgba(101, 67, 33, .90);
}

#btnSignup, #btnCloseUserMessage {
	min-width: 250px;
	max-width: 250px;
	color: black;
	font-size: 1.5vw;
}


button:hover {
	box-shadow: 0 0 7px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 15px #0fa;
}

i:hover {
	text-shadow: 0 0 7px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 15px #0fa;
}

#playGameIcon:hover {
	text-shadow: 0 0 7px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 15px #0fa;
}

#setFlyBy:hover {
	text-shadow: 0 0 7px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 15px #0fa;
}

#activePlayerNameIcon:hover {
	text-shadow: 0 0 7px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 15px #0fa;
}


td {
	margin: 0;
	min-width: 95%;
	text-align: left;
	font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	font-weight: bold;
}

input {
    font-family: 'digital-clock-font';
	margin: 0;
	min-width: 95%;
	max-width: 95%;
	text-align: left;
	font-size: 1vw;
	font-weight: bold;
}

i {
	padding: 1vh;
	font-size: 2vw;
	vertical-align: middle;
}


.instructionsControls {
    font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	display: block;
	min-width: 300px;
	max-width: 300px;
	color: white;
	font-size: 1vw;
	white-space: nowrap;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 10px;
	z-index: 6000;
}

#divCameraPositioningIndicatorWrapper {
	color: white;
	min-width: 300px;
	max-width: 300px;
	background-color: rgba(101, 67, 33, .45);
	font-size: 1vw;
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	z-index: 4000;
	overflow-y: auto;
	text-align: center;
}

#divCameraPositioningIndicatorContent {
	color: white;
	min-width: 95%;
	max-width: 95%;
	font-size: 1vw;
	left: 10px;
}

#icon {
	color: white;
	font-size: 60px;
}

#divCameraPositioningIndicatorTitle {
	color: white;
	font-size: 30px;
	min-width: 300px;
	max-width: 300px;
}

#TableCameraPositioningIndicator {
	color: white;
	font-size: 30px;
	min-width: 300px;
	max-width: 300px;
	text-align: center;
}


#divShowMenu {
	position: fixed;
	top: 0;
	left: 0.5%;
	min-width: 340px;
	max-width: 340px;
	height: 100%;
	color: white;
	font-size: 0.75vw;
	white-space: normal;
	vertical-align: top;
	z-index: 5000;
	text-align: left;
	padding: 12px 10px 25px 12px;
	box-sizing: border-box;
}
/* Start the collapsible bars below the centered SUPER SOLDIER BATTLE title so they
   don't overlap it on the menu/pause screen. Applied to the actual bar container
   (#divGameObjectiveInstrunctions) because #divMenuContent is absolute and ignores
   the panel's padding-top. */
#divGameObjectiveInstrunctions { padding-top: 80px !important; }
@media (max-width: 1100px) {
	#divGameObjectiveInstrunctions { padding-top: 100px !important; }
}
@media (max-width: 700px) {
	#divGameObjectiveInstrunctions { padding-top: 88px !important; }
}

#divMenuContent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto !important;
	max-width: none !important;
	height: 100%;
	color: white;
	font-size: 1vw;
	white-space: normal;
	vertical-align: top;
	z-index: 5000;
	text-align: center;
	overflow: hidden;
	overflow-y: auto;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

#divGameObjectiveInstrunctions {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	height: calc(100vh - 25px);
	max-height: calc(100vh - 25px);
	margin: 0 !important;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 10px;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: visible;
	font-size: 13px !important;
}


#tbMainMenu {
	display: block;
	min-width: 300px;
	max-width: 300px;
	color: white;
	font-size: 1vw;
	white-space: nowrap;
	vertical-align: middle;
	z-index: 5000;
	text-align: center;
}

#btnShowMenu, #btnHideMenu {
	display: none;
	min-width: 100%;
	max-width: 100%;
	color: white;
	background-color: rgba(101, 67, 33, .45);
	font-size: 1vw;
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	vertical-align: top;
	z-index: 7000;
	text-align: center;

}

#btnHideMenu {
	display: block;
	min-width: 100%;
	max-width: 100%;
	color: white;
	background-color: rgba(101, 67, 33, .45);
	font-size: 1vw;
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	z-index: 7000;
	text-align: center;
}


.btnPlayAgain {
	display: block;
	min-width: 100%;
	max-width: 100%;
	color: white;
	background-color: rgba(101, 67, 33, .45);
	font-size: 1vw;
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	z-index: 4000;
	text-align: center;
}

.btnContactMe {

	min-width: 100%;
	max-width: 100%;
	color: white;
	background-color: rgba(101, 67, 33, .45);
	font-size: 1vw;
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	z-index: 4000;
	text-align: center;
}


#btnCameraDataOn, #btnCameraDataOff {
	display: none;
	min-width: 100%;
	max-width: 100%;
	color: white;
	background-color: rgba(101, 67, 33, .45);
	font-size: 1vw;
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	z-index: 4000;
	padding: 10px;
	text-align: center;
}

#btnCameraDataOff {
	display: block;
	min-width: 300px;
	max-width: 300px;
}




.divDevelopers{
    font-family: 'digital-clock-font';
    text-shadow: 2px 2px black;
	display: block;
	color: white;
	min-width: 100%;
	max-width: 100%;
	font-size: 1.5vw;
	background-color: rgba(101, 67, 33, .45);
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;

}

#divGameLoadingData {
    font-family: 'digital-clock-font';
	display: none;
	color: white;
	font-size: 5vw;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
}

#blocker {
	min-width: 300px;
	max-width: 300px;
}

#instructions {
	font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	display: none;
	min-width: 35%;
	max-width: 420px;
	color: white;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	padding: 30px 20px;
	position: fixed;
	top: 52%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 6000;
	font-size: 0.9vw;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

#instructions h2 {
	font-size: 1vw;
	margin: 5px 0;
}

#instructions a {
	font-size: 0.9vw !important;
}

/* Index-page button style (.hud-btn) applied to the center-menu link buttons. */
#divMenuContent .hud-btn {
	background: linear-gradient(180deg, #1a2a3a 0%, #0d1520 100%);
	border: 1px solid #2a5a8a;
	color: #7ec8ff;
	font-size: 0.95rem !important;
	letter-spacing: 1px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	font-family: 'Rajdhani', 'Orbitron', sans-serif;
	text-decoration: none;
	text-shadow: none;
	/* Uniform size for every menu button (fixes Refresh/Sign Out being taller). */
	height: 52px !important;
	min-height: 52px !important;
	line-height: 1 !important;
	margin: 0 !important;
}

/* The Play control styled like the index START button, kept at the top. */
#divMenuContent #playGameIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* width:100% so PLAY fills the #ssbTeamMenu container and lines up with the
	   BLUE+RED row and the PLAY WITH A FRIEND button (was a fixed 280px, which
	   made it narrower than the 418px team-button row). */
	width: 100%;
	box-sizing: border-box;
	height: 64px;
	margin: 0 auto;
	background: linear-gradient(180deg, #ffe566 0%, #ffb800 40%, #e69500 100%);
	border: none;
	border-radius: 10px;
	color: #1a1200;
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-family: 'Orbitron', sans-serif !important;
	box-shadow: 0 0 20px rgba(255, 200, 0, 0.6), inset 0 1px 0 #fff8;
	cursor: pointer;
	white-space: nowrap;
	text-shadow: none;
}
/* Hide the FontAwesome play triangle glyph so only the PLAY text shows. */
#divMenuContent #playGameIcon::before {
	content: '' !important;
	margin: 0 !important;
}
#divMenuContent #playGameIcon::after {
	content: 'PLAY';
	margin: 0;
}
#divMenuContent #playGameIcon:hover {
	transform: scale(1.04);
	box-shadow: 0 0 30px rgba(255, 220, 50, 0.85);
}

/* Menu buttons moved into the narrow (260px) left objective panel: let labels
   wrap and auto-size so long text like "LEARN TO PROGRAM WITH THREE.JS" fits,
   and keep them clear of the panel's right edge. */
#ssbMenuButtons {
	width: auto !important;
	max-width: none !important;
	padding-right: 0;
	box-sizing: border-box;
}
#ssbMenuButtons .hud-btn,
#ssbMenuButtons button.hud-btn,
#ssbMenuButtons a.hud-btn {
	width: 100% !important;
	min-width: 0 !important;      /* override the generic button{min-width:300px} rule */
	max-width: 100% !important;
	height: auto !important;
	min-height: 40px !important;
	white-space: normal !important;
	line-height: 1.15 !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.3px;
	text-align: center;
	padding: 7px 8px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
#divMenuContent .hud-btn:hover {
	background: linear-gradient(180deg, #2a4a6a 0%, #1a2a40 100%);
	border-color: #4ac8ff;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 0 12px rgba(74, 200, 255, 0.4);
}

#divGamePlayerSignIn {
    font-family: 'digital-clock-font';
	display: block;
	min-width: 35%;
	max-width: 35%;
	min-height: 500px;
	max-height: 500px;
	color: white;
	text-align: left;
	background-color: rgba(101, 67, 33, .45);
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	white-space: nowrap;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 6000;
}

	#divGamePlayerSignIn:hover {
		box-shadow: 0 0 7px #fff, 0 0 5px #fff, 0 0 8px #fff, 0 0 15px #0fa;
	}

#divUserMessageWrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	margin-top: -10px;
	min-width: 100%;
	min-height: 100%;
	z-index: 10000;
}

#divUserMessage {
	display: block;
	min-width: 350px;
	max-width: 350px;
	min-height: 350px;
	color: white;
	text-align: center;
	font-size: 1.5vw;
	background-color: rgba(101, 67, 33, .45);
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	vertical-align: middle;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 6000;
}



#divGamePlayerListWrapper {
	position: fixed;
	top: 5%;
	right: 0.5%;
	left: auto;
	transform: none;
	width: 200px;
	max-width: 200px;
	min-width: 200px;
	z-index: 10000;
	text-align: center;
	box-sizing: border-box;
}

#divGamePlayerList {
	background: linear-gradient(135deg, rgba(10, 11, 26, 0.67), rgba(26, 27, 63, 0.67));
	border: 1px solid rgba(57, 255, 20, 0.3);
	border-radius: 20px;
	box-shadow: 0 0 30px rgba(57, 255, 20, 0.15);
	padding: 10px;
	color: white;
	font-size: 0.7vw;
	white-space: nowrap;
	text-align: center;
	overflow: hidden;
	width: 180px !important;
	max-width: 180px !important;
	min-width: unset !important;
	min-height: 150px;
	box-sizing: border-box;
}

#divGamePlayerList h2 {
	font-size: 11px !important;
	margin: 5px 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

#divGamePlayerList div {
	max-width: 180px;
	min-width: unset !important;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 auto !important;
}

#divGamePlayerList.gameplay-mode {
	background: none;
	border: none;
	box-shadow: none;
}

#sceneGameMapBottomRightWrapper.gameplay-mode {
	background: none;
	border: none;
	box-shadow: none;
}

#sceneGameMapBottomRight {
	min-width: 170px !important;
	max-width: 170px !important;
	width: 170px !important;
	overflow: hidden;
	margin: 0 auto !important;
}

#sceneGameMapBottomRight canvas {
	display: block;
	max-width: 170px !important;
	height: auto !important;
	width: 170px !important;
}

#instructionsModelLoaded {
    
    font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	display: none;
	width: 100%;
	max-width: 30%;
	color: white;
	background: linear-gradient(135deg, rgba(10, 11, 26, 0.67), rgba(26, 27, 63, 0.67));
	font-size: 1.5vw;
	border: 1px solid rgba(57, 255, 20, 0.3);
	border-radius: 20px;
	box-shadow: 0 0 30px rgba(57, 255, 20, 0.15);
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
	padding: 30px 20px;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10000;
}




#MenuText {
	min-width: 100%;
	max-width: 280px;
	margin: 0;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 1vw;
	white-space: normal;
}

#divSendMessage{
    font-family: 'digital-clock-font';
     text-shadow: 2px 2px black;
	display: flex;
	flex-direction: column;
	position: absolute;
	color: white;
	min-width: 95%;
	max-width: 95%;
	background-color: rgba(101, 67, 33, .45);
	border: 1px solid;
	border-color: lightgray;
	border-radius: 0;
	font-size: 1vw;
}

#txtemail, #txtcemail, #txtfname,
#txtcompanyname, #txtphonenumber,
#txtcompanyname, #txtPlayerName {
	height: 30px;
	min-width: 85%;
	max-width: 85%;
	border-radius: 20px;
	text-align: center;
}


#txtMessage {
	width: 275px;
	min-width: 85%;
	max-width: 58%;
	min-height: 200px;
	text-align: left;
	font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	font-size: 1vw;
}



#P1Value, #P2Value, #P3Value, #P4Value {
	font-size: 1.5vw;
	color: white;
	font-family: 'digital-clock-font';
	text-shadow: 2px 2px black;
	text-align: right;
}



#MenuSubTitle {
	white-space: normal;
	font-size: 1vw;
	width: 90%;
	max-width: 90%;
	height: 100%;
	max-height: 100%;
	padding: 2vh;
	vertical-align: middle;
	margin: auto;
}



#btnSendMessage, #btnCancelMessage {
	background-color: rgba(101, 67, 33, .45);
	min-width: 250px;
	max-width: 250px;
	color: white;
	font-size: 1vw; It's not doing anything
}
/*//////////////////////////////////*/

@media only screen and (max-width: 800px) {


     
#divScoreWrapper{
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    max-width: 100%;
    position: fixed;
	top: 15px;
	bottom: auto;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
    vertical-align: middle;
    margin: 0;
}

#divHit{
	font-size: 5vw;
    text-align: center;
    background-color: rgba(2, 7, 93, .35);
    border: 1px solid;
    margin: 0;
	border-color: lightgray;
	z-index: 9000;
    min-width: 150px;
    max-width: 150px;
    min-height: 100px;
    max-height: 100px;
    text-align: center;
    vertical-align: middle;
  
}

#divScore{
	font-size: 5vw;
    text-align: center;
    background-color: rgba(2, 7, 93, .35);
    border: 1px solid;
    margin: 0;
	border-color: lightgray;
	z-index: 9000;
    min-width: 150px;
    max-width: 150px;
    min-height: 100px;
    max-height: 100px;
    text-align: center;
    vertical-align: middle;
   
}
#divGameTime {
		font-size: 5vw;
		text-align: center;
		background-color: rgba(2, 7, 93, .35);
		border: 1px solid;
		margin: 0;
		border-color: lightgray;
		z-index: 9000;
		min-width: 150px;
		max-width: 150px;
		min-height: 100px;
		max-height: 100px;
		text-align: center;
		vertical-align: middle;
	}

#divTargeted{
    position: relative;
	font-size: 5vw;
    text-align: center;
    color: green;
    background-image: url("/images/reticle-001.png");
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-color: rgba(2, 7, 93, .35);
    border: 1px solid;
	border-color: lightgray;
    margin: 0;
	z-index: 9000;
    vertical-align: middle;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;  
}

	html, body, p, label {
		margin: 0;
		font-family: 'digital-clock-font';
		font-size: 4vw;
		padding: 10px;
	}

	h2 {
		color: white;
		font-family: 'digital-clock-font';
		font-size: 4vw;
		width: 95%;
		margin: 0px;
	}

    neonText {
                color: #fff;
                text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa
    }


	#btnSendMessage, #btnCancelMessage {
		background-color: rgba(101, 67, 33, .45);
		min-width: 250px;
		max-width: 250px;
		color: white;
		font-size: 4vw;
	}

	#divGameTitleHeader {
		display: none;
	}

	#GlowLink {
		font-size: 5vw;
		text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 3px #fff, 0 0 6px #0fa;
		margin: auto;
		padding: 10px;
	}

	#divCameraPositioningIndicatorWrapper, #btnCameraDataOn,
	#btnCameraDataOff {
		display: none;
	}

	div, button {
		font-family: 'digital-clock-font';
		color: white;
		min-width: 95%;
		max-width: 95%;
		margin-top: 10px;
		font-size: 5vw;
	}

	table {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0px;
	}

	#MenuText {
		min-width: 100%;
		max-width: 100%;
		margin-bottom: 10px;
		font-size: 4vw;
		padding: 10px;
	}


	#MenuSubTitle {
		white-space: normal;
		font-size: 5vw;
		width: 100%;
		max-width: 100%;
		padding: 2vh;
		vertical-align: middle;
	}



	#divCameraPositioningIndicatorWrapper {
		min-width: 100%;
		max-width: 100%;
		background-color: rgba(101, 67, 33, .45);
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		z-index: 4000;
	}

	#divCameraPositioningIndicatorContent {
		color: white;
		min-width: 95%;
		max-width: 95%;
		font-size: 5vw;
		left: 10px;
	}

	#icon {
		color: white;
		font-size: 5vw;
	}


	#TableCameraPositioningIndicator {
		text-align: center;
		min-width: 100%;
		max-width: 100%;
	}




	#divShowMenu {
		position: fixed;
		top: 0;
		left: 0;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
		max-height: 100%;
		white-space: nowrap;
		vertical-align: middle;
		z-index: 5000;
		text-align: center;
		overflow: hidden;
		overflow-y: auto;
		
	}

	#divMenuContent {
		position: absolute;
		min-width: 100%;
		max-width: 100%;
		min-height: 90%;
		max-height: 90%;
		white-space: nowrap;
		vertical-align: middle;
		z-index: 5000;
		text-align: center;
		overflow: hidden;
		overflow-y: auto;
	
	}


	#tbMainMenu {
		display: none;
		min-width: 100%;
		max-width: 100%;
		white-space: nowrap;
		vertical-align: middle;
		z-index: 5000;
		text-align: center;
	}

	#btnShowMenu, #btnHideMenu {
		display: block;
		min-width: 95%;
		max-width: 95%;
		color: white;
		font-size: 5vw;
		background-color: rgba(101, 67, 33, .45);
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		z-index: 7000;
		text-align: center;
		margin: auto;
	}

	#btnHideMenu {
		display: none;
		min-width: 95%;
		max-width: 95%;
	}



	.btnPlayAgain {
		display: block;
		color: white;
		min-width: 95%;
		max-width: 95%;
		font-size: 5vw;
		background-color: rgba(101, 67, 33, .45);
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		z-index: 4000;
		text-align: center;
	}


	#btnCameraDataOn, #btnCameraDataOff {
		display: none;
		color: white;
		min-width: 95%;
		max-width: 95%;
		font-size: 5vw;
		background-color: rgba(101, 67, 33, .45);
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		z-index: 4000;
		padding: 10px;
		text-align: center;
	}

	#btnCameraDataOff {
		display: block;
		color: white;
		min-width: 95%;
		max-width: 95%;
		font-size: 5vw;
	}


	#blocker {
		color: white;
		min-width: 100%;
		max-width: 100%;
		font-size: 5vw;
	}



	.divDevelopers {
        font-family: 'digital-clock-font';
        text-shadow: 2px 2px black;
		display: block;
		color: white;
		min-width: 95%;
		max-width: 95%;
		font-size: 5vw;
		background-color: rgba(101, 67, 33, .45);
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		text-align: center;
	}



	.instructionsControls {
        font-family: 'digital-clock-font';
		display: block;
		min-width: 95%;
		max-width: 95%;
		color: white;
		background-color: rgba(101, 67, 33, .45);
		font-size: 4vw;
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		text-align: center;
	}

	#instructionsModelLoadedWrapper, #instructionsModelLoaded {
         font-family: 'digital-clock-font';
		display: none;
		width: 100%;
		max-width: 30%;
		color: white;
		background-color: rgba(101, 67, 33, .45);
		font-size: 5vw;
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		text-align: center;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 10000;
	}


	.btnContactMe {
		display: block;
		color: white;
		min-width: 95%;
		max-width: 95%;
		font-size: 5vw;
		background-color: rgba(101, 67, 33, .45);
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		white-space: nowrap;
		vertical-align: middle;
		text-align: center;
	}

	#divSendMessage{
		display: flex;
		flex-direction: column;
		position: absolute;
		color: white;
		min-width: 90%;
		max-width: 90%;
		background-color: rgba(101, 67, 33, .45);
		border: 1px solid;
		border-color: lightgray;
		border-radius: 0;
		font-size: 6vw;
	}

	#imgLoading {
		position: fixed;
		left: -500px;
		width: 1591px;
		height: 100%;
		z-index: 0;
	}

	input {
        font-family: 'digital-clock-font';
		margin: 0;
		min-width: 95%;
		max-width: 95%;
		text-align: left;
		font-size: 6vw;
		font-weight: bold;
	}



	i {
		padding: 3vh;
		font-size: 10vw;
		vertical-align: middle;
	}

	#divGamePlayerList {
		display: none;
	}

	#divGamePlayerSignIn {
		display: none;
	}

	#divGameLoadingData {
		display: none;
	}

	#divGamePlayerList {
		display: none;
	}

	#btnDevelopers {
		display: none;
	}

	#divMinimizeMaximize, #divGamePlayerList, #divGameTitleHeader,
	#divGamePlayerSignIn, #sceneGameMapBottomRightWrapper {
		display: none;
	}

	#appWrapper {
		display: block;
		min-width: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
	}

    
#divScoreWrapper{
	display: none;
}




}


/* ============================================================
   INDEX-STYLE UI OVERRIDES (added 2026-10-15)
   - Make ALL game-UI panels transparent with no borders.
   - Replace the old 'digital-clock-font' across the UI with the
     index page fonts (Rajdhani body text, Orbitron for the title).
   ============================================================ */

/* All HUD panels: transparent, no border, no glow. */
#divGameObjectiveInstrunctions,
#divGamePlayerList,
#divGamePlayerListWrapper,
#sceneGameMapBottomRightWrapper,
#instructionsModelLoaded,
#instructions,
#divSendMessage,
#divScoreWrapper {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Swap the old blocky digital-clock font for the index Rajdhani font
   everywhere in the game UI -- containers AND every descendant (the stats
   numbers, player list rows, labels, etc. each set the old font on their
   own selectors, so we override descendants too). Title keeps Orbitron. */
#appWrapper,
#appWrapper *,
#divMenuContent,
#divMenuContent *,
#divGameObjectiveInstrunctions,
#divGameObjectiveInstrunctions *,
#divGamePlayerListWrapper,
#divGamePlayerListWrapper *,
#divGamePlayerList,
#divGamePlayerList *,
#sceneGameMapBottomRightWrapper,
#sceneGameMapBottomRightWrapper *,
#instructions,
#instructions *,
#instructionsModelLoaded,
#instructionsModelLoaded *,
#divSendMessage,
#divSendMessage *,
#divScoreWrapper,
#divScoreWrapper *,
#divSoundMixer,
#divSoundMixer *,
#MenuText,
#divScore, #divGameMessage, #divHit, #divEnemyKills,
#divDigitalTimerGame, #divScoreData, #divEnemyKillsData, #divHitData,
#divGameMessageData, #divGameTime {
	font-family: 'Rajdhani', 'Orbitron', sans-serif !important;
}

/* Keep the big game title in Orbitron, matching the index page's
   white -> light-blue gradient text treatment. */
#divGameTitleHeader,
#divGameTitleHeader *,
#divGameTitleHeader > div,
#divGameTitleHeader h1 {
	font-family: 'Orbitron', sans-serif !important;
}
#divGameTitleHeader > div {
	background: linear-gradient(180deg, #ffffff 0%, #b0e0ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 24px rgba(0, 200, 255, 0.55);
	white-space: nowrap !important;
	font-size: clamp(1.2rem, 4.2vw, 3rem) !important;
}


/* ============================================================
   SMALLER GAME-STATS HUD (added 2026-10-15)
   Scale the bottom Life / Score / Messages / Enemy Kills HUD down
   proportionally (~75% of the previous sizes). Same layout, smaller.
   ============================================================ */
#divScoreWrapper {
	min-height: 72px !important;
	max-height: 72px !important;
	top: 10px !important;
	bottom: auto !important;
}
/* Labels: Life / Score / Messages / Enemy Kills (was 1.5vw). */
#divScore, #divGameMessage, #divHit, #divEnemyKills {
	font-size: 1.1vw !important;
	min-width: 150px !important;
	max-width: 150px !important;
	text-align: center !important;
}
/* Big number values: 100% / 0 / 0 / 11 (was 2.5vw). */
#divDigitalTimerGame, #divHitData, #divScoreData, #divEnemyKillsData {
	font-size: 1.85vw !important;
	min-width: 150px !important;
	max-width: 150px !important;
	text-align: center !important;
}
/* Message line (was 1vw). Wrap and center within its own column so neither the
   static "DESTROY ENEMY GUN TURRETS" nor the longer dynamic messages overflow
   into Enemy Kills. No ellipsis clipping (that produced garbled text). */
#divGameMessageData {
	font-size: 0.78vw !important;
	min-width: 150px !important;
	max-width: 150px !important;
	width: 150px !important;
	white-space: normal !important;
	word-break: break-word !important;
	line-height: 1.25 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	padding: 2px 4px 0 !important;
	margin: 2px auto 0 !important;
	text-align: center !important;
}


/* ============================================================
   HUD COLUMN ALIGNMENT (added for Red vs Blue) + LIFE BAR.
   Make every stats column lay out identically: a fixed-height
   label row on top, then the value centered below, so the Team
   dot, Life bar, Score, and Messages all line up on the same
   baseline instead of floating at different heights.
   ============================================================ */
#divScoreWrapper > div {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	min-width: 150px !important;
	max-width: 150px !important;
	height: 72px !important;
	box-sizing: border-box !important;
	padding-top: 6px !important;
	text-align: center !important;
}
/* The label (the bare text node) sits in a fixed-height top row; the value
   block below it is vertically centered in the remaining space. */
#divScoreWrapper > div > div {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
}
/* Team dot + label centered as a row. */
#divTeamData {
	flex-direction: row !important;
}
/* LIFE as a bar instead of a number. The JS sets #ssbLifeFill width %. */
#divHitData { padding: 0 10px !important; }
#ssbLifeBar {
	width: 120px;
	height: 18px;
	border: 2px solid rgba(255,255,255,0.85);
	border-radius: 6px;
	background: rgba(0,0,0,0.55);
	box-shadow: 0 0 10px rgba(0,0,0,0.6);
	overflow: hidden;
	box-sizing: border-box;
}
#ssbLifeFill {
	height: 100%;
	width: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #39ff6a, #1ec85a);
	box-shadow: 0 0 10px rgba(57,255,106,0.6);
	transition: width 0.2s ease, background 0.2s ease;
}


/* TEAMS: the top stats bar is replaced by the bottom-left player HUD cluster
   (flag + life bar + score + kills). Hide it, but keep its child elements in the
   DOM so existing getElementById writes (aim hints, etc.) don't throw. */
#divScoreWrapper {
	display: none !important;
}


/* Collapsible left-dock sections (menu / objective / sound mixer). Each is a thin
   header bar; clicking it expands the body. Keeps the left side compact. */
.ssb-collapse {
	margin: 0 0 6px;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box;
}
.ssb-collapse-head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 14px !important;
	cursor: pointer;
	user-select: none;
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: 0.8rem;
	letter-spacing: 1px;
	color: #eaf2ff;
	/* !important so it beats the global "#divGameObjectiveInstrunctions * {background:transparent!important}" rule and matches the top HUD pill. */
	background: linear-gradient(135deg, rgba(10,11,26,0.92), rgba(26,27,63,0.92)) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 14px rgba(0,0,0,0.55) !important;
	text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.ssb-collapse-head:hover { background: linear-gradient(135deg, rgba(26,27,63,0.96), rgba(40,42,90,0.96)) !important; }
.ssb-collapse-arrow {
	font-weight: 900;
	font-size: 1rem;
	line-height: 1;
	opacity: 0.9;
}
.ssb-collapse-body {
	padding: 10px 12px 6px !important;
	margin-top: 4px;
	width: auto !important;
	max-width: none !important;
	max-height: 60vh;
	overflow-y: auto;
	overflow-x: visible;
	background: linear-gradient(135deg, rgba(10,11,26,0.9), rgba(26,27,63,0.9)) !important;
	border: 1px solid rgba(255,255,255,0.14) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 14px rgba(0,0,0,0.5) !important;
	box-sizing: border-box;
	/* ~1.2x smaller than the panel's 13px so the objective/controls text fits. */
	font-size: 11px !important;
	line-height: 1.4;
}


/* Active Players list fully removed/hidden (it flashed on/off from multiple JS
   toggles - lock/unlock handlers, a 2s setInterval, and the death-respawn path all
   set .style.display). The top HUD pill is the single on-screen HUD now. A custom
   players panel can be built later; this hard override keeps the old one gone.
   BOTH the wrapper AND the inner list are forced hidden so no JS toggle can show it. */
#divGamePlayerListWrapper,
#divGamePlayerList { display: none !important; }