/* ⚠️ READ _Spec_Starsoft_StyleGuide.md BEFORE making ANY changes */

:root {
	/* Layout */
	--Min_Width: 320px;
	
	/* Color Palette */
	--Gray_240: rgb(240, 240, 240);
	--Gray_220: rgb(220, 220, 220);
	--Gray_200: rgb(200, 200, 200);
	--Gray_180: rgb(180, 180, 180);
	--Gray_160: rgb(160, 160, 160);
	--Gray_140: rgb(140, 140, 140);
	--Gray_120: rgb(120, 120, 120);
	--Gray_100: rgb(100, 100, 100);
	--Gray_80: rgb(80, 80, 80);
	--Gray_70: rgb(70, 70, 70);
	--Gray_60: rgb(60, 60, 60);
	--Gray_50: rgb(50, 50, 50);
	--Gray_40: rgb(40, 40, 40);
	--Gray_30: rgb(30, 30, 30);
	--Gray_20: rgb(20, 20, 20);
	--Gray_10: rgb(10, 10, 10);
	
	
	
	--Orange_250: rgb(250, 150, 0);
	--Orange_100: rgb(100, 60, 0);
	
	--Blue_250: rgb(50, 180, 250);
	--Blue_200: rgb(100, 160, 200);
	--Blue_160: rgb(60, 120, 160);
	--Blue_130: rgb(30, 90, 130);
	
	--White_250: rgb(250, 250, 250);
	--Beige_230: rgb(230, 230, 210);
	
	/* Base Colors */
	
	--White:    rgb(250, 250, 250);
	
	--Red:      rgb(250, 50, 50);
	--Orange:   rgb(250, 100, 50);
	--Gold:     rgb(250, 200, 50);
	--Yellow:   rgb(250, 250, 50);
	--Lime:     rgb(150, 250, 50);
	--Spring:   rgb(100, 250, 100);
	--Green:    rgb(50, 250, 150);
	--Sea:      rgb(50, 200, 200);
	--Azure:    rgb(50, 150, 250);
	--Blue:     rgb(50, 100, 250);
	--Indigo:   rgb(100, 50, 250);
	--Purple:   rgb(150, 50, 250);
	--Violet:   rgb(200, 50, 250);
	--Magenta:  rgb(250, 50, 200);
	--Rose:     rgb(250, 100, 150);
	--Coral:    rgb(250, 150, 100);
	
	--Black:    rgb(0, 0, 0);

	/* Group/Faction Colors */
	--Color_CBorn:		var(--Azure);
	--Color_Chosen:		var(--Purple);
	--Color_Fallen:		var(--Sea);
	--Color_Jovian:		var(--Red);
	--Color_Mites:		var(--Spring);
	--Color_Wild:		var(--Coral);
	
	/* Group/Nav Colors */
	--Nav_Highlight:	var(--Azure);
	--Nav_Active:		var(--Sea);
	--Nav_Text:			var(--Gray_180);

	
	--Brick_250: rgb(250, 90, 90);
	--Brick_220: rgb(220, 80, 80);
	--Brick_200: rgb(180, 65, 65);
	
	--Blue_255: rgb(100, 100, 255);
	--Orange_255: rgb(255, 200, 100);
	--Purple_200: rgb(200, 100, 255);
	--Cyan_255: rgb(100, 255, 200);
	--Yellow_255: rgb(255, 240, 50);
	--Magenta_255: rgb(255, 100, 255);
	
	/* Edit Colors (Colors used in Edit-Mode for fields etc.) */
	--Color_Edit: var(--Orange);
	--Color_Edit_BG: color-mix(in srgb, var(--Orange) 20%, var(--White) 80%);
	
	/* Legacy aliases - for gradual migration */
	--min-width: var(--Min_Width);
	--color-orange: var(--Orange_250);
	--color-accent-orange: var(--Orange_250);
	--color-blue: var(--Blue_250);
	--color-hover-blue: var(--Blue_250);
	--color-white: var(--White_250);
	--color-highlight: var(--White_250);
}

/* Utility Classes */
.Hidden {
	display: none !important;
}

/* ============================================================================
   UI COMPONENTS - Reusable elements
   ============================================================================ */

/* CSS Chevron Arrows */
.chevron {
    width: 12px;
    height: 12px;
    border: solid var(--color-highlight);
    border-width: 0 6px 6px 0;
    display: inline-block;
    transition: border-color 0.2s;
}

.chevron-right {
    transform: rotate(-45deg);
}

.chevron-left {
    transform: rotate(135deg);
}

html {
  overflow-x: hidden; /* Prevent horizontal scrolling */
  overflow-y: scroll; /* Always show vertical scrollbar */
  min-width: var(--min-width);
  scrollbar-gutter: stable; /* Reserve space for scrollbar even when content doesn't scroll */
}

body {
  height: 100%;
  width: 100%;
  max-width: 100vw;
  user-select: none; /* Prevent text/element selection site-wide */
  min-width: var(--min-width);
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden; /* Prevent double scrollbar */
  position: relative;
  background-color: var(--Gray_30); /* Match NavBar color */
}

button {
  outline: none; /* Remove focus outline on buttons */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

button:focus {
  outline: none; /* Remove focus outline on buttons */
}

button:focus-visible {
  outline: none; /* Remove focus-visible outline on buttons */
}

button:active {
  outline: none; /* Remove active outline on buttons */
}

h2 {
  margin: 0;
  padding: 0;
}

#Page_Transition_Overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--Gray_30);
  z-index: 10000;
  pointer-events: none;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
}

/* When modal is active, prevent scrolling but keep scrollbar space */
html.modal-open {
  overflow-y: hidden;
}

/* Hide support button when follow modal is active */
html.modal-open .Support_Sticky_Button {
	opacity: 0;
	pointer-events: none;
}

#content {
  margin-top: 64px;
  margin-bottom: 64px;
  min-height: calc(100vh - 128px);
}

button.active, a.active {
  color: var(--color-highlight);
  filter: brightness(10);
  background-color: transparent;
}

/* ============================================================================== */
/* Universal Button Styles */
/* ============================================================================== */

.Button_Pill {
	display: inline-flex;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	text-decoration: none;
	border: 2px solid color-mix(in srgb, var(--Button_Color) 60%, var(--Black));
	border-radius: calc(var(--Button_Height, 48px) / 2);
	color: var(--Button_Color);
	background-color: color-mix(in srgb, var(--Button_Color) 40%, var(--Black));
	cursor: pointer;
	transition: none;
	height: var(--Button_Height, 48px);
	width: calc(var(--Button_Height, 48px) * 4);
	outline: none;
	user-select: none;
	font-size: calc(var(--Button_Height, 48px) * 0.75);
	line-height: 1;
	align-items: center;
	justify-content: center;
	padding: 0 1em;
}

.Button_Pill:hover {
	border-color: color-mix(in srgb, var(--Button_Color) 60%, var(--White));
	background-color: color-mix(in srgb, var(--Button_Color) 40%, var(--Black));
	filter: brightness(1.25);
}

.Button_Pill:not(:hover) {
	transition: border-color 0.2s ease, filter 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.Button_Pill:active {
	color: var(--White);
	background-color: color-mix(in srgb, var(--Button_Color_Highlight) 80%, var(--Black));
	border-color: var(--White);
}

.Button_Pill:disabled {
	border-color: color-mix(in srgb, var(--Button_Color) 30%, var(--Black));
	cursor: not-allowed;
	filter: brightness(0.35) saturate(0.5) !important;
	pointer-events: none;
}

.Button_Pill.selected {
	color: color-mix(in srgb, var(--Button_Color) 80%, var(--White));
	border-color: color-mix(in srgb, var(--Button_Color) 80%, var(--White));
	background-color: color-mix(in srgb, var(--Button_Color) 60%, var(--Black));
	cursor: default;
	pointer-events: none;
}

/* Dropdown Button */
.Button_DropDown_Header {
	font-family: 'Orbitron', sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: var(--Gray_100);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 4px;
}

.Button_DropDown {
	--Button_Color: var(--Azure);
	position: relative;
	padding: 12px 22px;
	padding-top: 8px;
	padding-bottom: 20px;
	background-color: color-mix(in srgb, var(--Button_Color) 10%, var(--Black));
	border: 2px solid color-mix(in srgb, var(--Button_Color) 30%, var(--Black));
	border-radius: 12px 12px 0 0;
	font-family: 'Trebuchet MS', Arial, sans-serif;
	font-size: 20px;
	font-weight: Bold;
	color: color-mix(in srgb, var(--Button_Color) 80%, var(--White));
	cursor: pointer;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	width: 192px;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="%23B4B4B4" stroke-width="4" stroke-linecap="square" d="M6 9 L12 15 L18 9"/></svg>');
	background-position: center calc(100%);
	background-size: 24px 24px;
	background-repeat: no-repeat;
}

.Button_DropDown:hover {
	background-color: color-mix(in srgb, var(--Button_Color) 10%, var(--Black));
	border-color: color-mix(in srgb, var(--Button_Color) 60%, var(--Black));
}

.Button_DropDown:focus,
.Button_DropDown.open {
	outline: none;
	border-color: var(--Button_Color);
}

.Button_DropDown_Label {
	display: block;
	pointer-events: none;
	position: relative;
	top: -2px;
}

.Button_DropDown_Menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -2px;
	right: -2px;
	background-color: color-mix(in srgb, var(--Button_Color) 8%, var(--Black));
	border: 2px solid var(--Button_Color);
	border-top: none;
	border-radius: 0 0 12px 12px;
	max-height: 300px;
	overflow-y: auto;
	z-index: 1000;
}

.Button_DropDown.open .Button_DropDown_Menu {
	display: block;
}

.Button_DropDown_Item {
	padding: 12px 24px;
	text-align: center;
	color: color-mix(in srgb, var(--Button_Color) 40%, var(--Black));
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	border-bottom: 1px solid color-mix(in srgb, var(--Button_Color) 40%, var(--Black));
}

.Button_DropDown_Item:last-child {
	border-bottom: none;
}

.Button_DropDown_Item:hover {
	background-color: color-mix(in srgb, var(--Button_Color) 25%, var(--Black));
	color: var(--White_250);
}

.Button_DropDown_Item.selected {
	color: var(--White_250);
	font-size: 20px;
	font-weight: bold;
}

/* ============================================================================== */
/* Text Styles */
/* ============================================================================== */

.Text_Base {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
}

.Text_Title {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	font-size: 28px;
}

.Text_Title_Mobile {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	font-size: 20px;
}

.Text_Subtitle {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}

.Text_Body {
	font-family: Arial, sans-serif;
	font-size: 22px;
	color: var(--Gray_120);
}

.Text_List {
	list-style-type: disc;
}

.Text_List li {
	display: list-item;
}

.Text_Bright {
	color: var(--Gray_180) !important;
}

.Text_Small {
	font-size: 14px;
}

.Text_Centered {
	text-align: center;
}

/* ============================================================================== */
/* Procedural Icon Styling */
/* ============================================================================== */

.Nav_Icon_Procedural {
	background-color: var(--Gray_100);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.Nav_Icon_Procedural:hover {
	background-color: rgb(180, 180, 180);
}

.Procedural_Icon {
	filter: brightness(0) invert(1) sepia(1) saturate(0) brightness(0.71);
	transition: filter 0.3s ease;
	width: 40px;
	height: 40px;
}

.Nav_Icon_Procedural:hover .Procedural_Icon {
	filter: brightness(0) invert(1) sepia(1) saturate(0) brightness(0.392);
}

#Footer_Bar {
  text-align: center;
  padding: 16px 0;
  background-color: rgba(50, 50, 50, 255);
  color: var(--color-highlight);
  font-size: 14px;
  user-select: none;
}

/* Rights Container (Footer) */
.Footer_Container {
	display: block;
	width: 100%;
	height: 40px;
	background-color: RGBA(50, 50, 50, 255);
	clear: both;
	margin-top: auto; /* This pushes the footer to the bottom */
	flex-shrink: 0; /* Prevent footer from shrinking */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Extend footer color below - controlled by JavaScript */
.Footer_Container::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: RGBA(50, 50, 50, 255);
	z-index: -1;
	display: block;
}

/* Hide footer extension for long pages */
.Footer_Container.hide-extension::before {
	display: none;
}

/* Footer text generated by CSS */
.Footer_Container::after {
	content: "©All Rights Reserved 2025 Starsoft Entertainment, LLC.";
	display: block;
	margin: 0;
}

.Footer_Text {
	position: relative;
	text-align: center;
	white-space: nowrap;
	margin: 0 auto;
	color: var(--Gray_100);
}

/* Loader Background - Full screen dark fill with iris wipe */
.Loader_Background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10003;
	background: rgb(30, 30, 30);
	pointer-events: none;
	/* VISIBLE by default for first load */
	
	/* Hole size controlled by JS */
	--iris-size: 0%;
	-webkit-mask: radial-gradient(circle at center, transparent var(--iris-size), black var(--iris-size));
	mask: radial-gradient(circle at center, transparent var(--iris-size), black var(--iris-size));
}

/* Hide loader on subsequent loads - class added before CSS loads */
.Subsequent_Load .Loader_Background {
	display: none;
}

/* Loader Graphic - Just the spinning GIF in center */
.Loader_Graphic {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 160px;
	height: 160px;
	z-index: 10004;
	background-image: url('Shared_Bars/NavBar/Media/Loader.gif');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	transform: scale(1);
	transition: transform 0.8s ease-in-out;
	opacity: 1;
	/* VISIBLE by default for first load */
}

/* Hide loader on subsequent loads - class added before CSS loads */
.Subsequent_Load .Loader_Graphic {
	display: none;
}

.Loader_Graphic.Is_Loaded {
	transform: scale(0);
	opacity: 0;
}

@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================================== */
/* Sticky Email Signup Overlay */
/* ============================================================================== */

.Email_Signup_Overlay {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10000;
	background: rgba(30, 30, 30, 0.7);
	border: none;
	border-radius: 50%;
	padding: 16px;
	width: 220px;
	height: 220px;
	backdrop-filter: blur(10px);
	transform: translateY(0);
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Email_Signup_Overlay.hidden {
	transform: translateY(100px);
	opacity: 0;
	pointer-events: none;
}

.Email_Signup_Container {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* ============================================================================== */
/* MODAL SYSTEM - Shared modal styles */
/* ============================================================================== */

/* Modal Backdrop - Full screen overlay */
.Modal {
	display: none;
	position: fixed;
	z-index: 10000;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.85);
	align-items: center;
	justify-content: center;
}

.Modal[style*="display: block"],
.Modal[style*="display: flex"] {
	display: flex !important;
}

/* Modal Title */
.Modal_Title {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: var(--Gray_120, rgb(120, 120, 120));
	font-size: 32px;
	font-weight: bold;
	margin: 0 0 20px 0;
	text-align: center;
}

/* Modal Input - Gray input fields */
.Modal_Input {
	background: rgba(50, 50, 50, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	color: var(--White_250) !important;
	caret-color: var(--White);
	padding: 8px 12px;
	font-size: 18px !important;
	transition: border-color 0.2s;
}

.Modal_Input:focus {
	outline: none;
	border-color: var(--color-highlight, rgb(50, 180, 250));
}

.Modal_Input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

/* ============================================================================== */
/* CLOSE BUTTON - Universal style for all close buttons */
/* ============================================================================== */

.Button_Close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: transparent;
	border: 2px solid var(--Gray_100);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease;
	cursor: pointer;
	user-select: none;
	padding: 0;
}

.Button_Close::before {
	content: '';
	display: block;
	width: 34px;
	height: 34px;
	background-image: url('/Shared_Bars/NavBar/Media/Images_Icons/Icon_Close.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: brightness(0.7);
	transition: filter 0.2s ease;
}

.Button_Close:hover::before {
	filter: brightness(1.5);
}

.Email_Signup_Label {
	text-align: center;
	display: block;
	color: rgb(255, 255, 255);
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 12px;
}

/* ============================================================================== */
/* MODAL FOLLOW - Mobile Social Menu */
/* ============================================================================== */

.Modal_Follow_Backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	touch-action: none; /* Prevent touch scrolling */
}

.Modal_Follow_Backdrop.active {
	opacity: 1;
	pointer-events: all;
	touch-action: none; /* Prevent touch scrolling */
}

/* Social icons menu that expands upward */
.Modal_Follow_Icons {
	position: fixed;
	bottom: calc(12px + 160px + 3vh); /* button bottom + new button height + gap */
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto auto;
	gap: 3vh; /* 3% of viewport height */
	z-index: 10001;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.Modal_Follow_Icons.active {
	opacity: 1;
	pointer-events: all;
}

.Modal_Follow_Icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.Modal_Follow_Icons a:hover {
	transform: scale(1.2);
}

.Modal_Follow_Icons a img {
	width: 48px;
	height: 48px;
	filter: brightness(1) saturate(1);
	transition: filter 0.2s ease;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.Modal_Follow_Icons a:hover img {
	filter: brightness(1.2) saturate(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}

/* ============================================================================== */
/* MEDIA QUERIES */
/* ============================================================================== */

/* Mobile - 768px and below */
@media (max-width: 768px) {
	#content {
		margin-top: 48px;
		margin-bottom: 48px;
		min-height: calc(100vh - 96px);
	}
	
	.Button_DropDown_Header {
		font-size: 10px;
		margin-bottom: 2px;
	}

	.Button_DropDown {
		width: 96px;
		height: 24px;
		padding: 4px 4px !important;
		padding-bottom: 20px;
		font-size: 12px;
		letter-spacing: 0.5px;
		background-size: 16px 16px;
		background-position: center calc(100%);
	}
	
	.Button_DropDown_Label {
		top: 0px;
	}

	.Button_DropDown_Item {
		padding: 6px 8px;
		font-size: 10px;
	}
}

/* ============================================================================== */
/* MEDIA QUERIES */
/* ============================================================================== */

/* Small Mobile - 550px and below */
@media (max-width: 550px) {
	/* Removed display: none for #NavBar_Btn_Login - button should remain visible */
}

/* Minimum Width - 320px */
@media (max-width: 320px) {
  html {
    width: var(--min-width);
  }
  
  body {
    width: var(--min-width);
  }
}