/*
	Ladebildschirm – Grundaufbau. Farben setzt loading.js (Palette aus der Datenbank, <style id="swj-theme">).
	Bewusst altes CSS: Der Standard-Zweig von GMod zeigt Ladebildschirme mit Awesomium (Chromium 18) an – keine
	CSS-Variablen, kein clip-path, kein Flexbox, kein calc()/vw/clamp(); Verläufe zuerst mit -webkit-, dann Standard.
	Größen in rem: loading.js setzt die Schriftgröße von <html> passend zur Auflösung (1rem = 16px bei 1600×900).
*/

@font-face { font-family: 'SWJ Orbitron'; src: url('../fonts/Orbitron-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'SWJ Orbitron'; src: url('../fonts/Orbitron-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'SWJ Orbitron'; src: url('../fonts/Orbitron-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'SWJ Rajdhani'; src: url('../fonts/Rajdhani-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'SWJ Rajdhani'; src: url('../fonts/Rajdhani-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'SWJ Rajdhani'; src: url('../fonts/Rajdhani-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #05090d;
	color: #eafaff;
	font-family: 'SWJ Rajdhani', 'Rajdhani', 'Segoe UI', Arial, sans-serif;
	font-weight: 500;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------- Hintergrund */
#bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.slide {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	opacity: 0;
	-webkit-transition: opacity 2s linear;
	transition: opacity 2s linear;
}
.slide.on { opacity: 1; }
.shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#shade-scan {
	background: -webkit-repeating-linear-gradient(top, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px);
	background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 3px);
}

#topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #3fd8ff; }

/* ---------------------------------------------------------------- Kopf oben links */
#head { position: absolute; top: 3rem; left: 4rem; white-space: nowrap; }
#tagline {
	font-family: 'SWJ Rajdhani', 'Rajdhani', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.32em;
	line-height: 1.4;
}
.tagline-text { display: inline-block; margin: 0 0.75rem 0 0.8rem; vertical-align: middle; }
.dia {
	display: inline-block;
	width: 0.56rem;
	height: 0.56rem;
	vertical-align: middle;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.dia-jedi { background: #3fd8ff; box-shadow: 0 0 10px #3fd8ff; }
.dia-sith { background: #ff4a3d; box-shadow: 0 0 10px #ff4a3d; }
.dia-accent { background: #3fd8ff; }

#server-name {
	margin-top: 0.375rem;
	font-family: 'SWJ Orbitron', 'Orbitron', 'Arial Black', sans-serif;
	font-weight: 900;
	font-size: 5.25rem;
	letter-spacing: 0.06em;
	line-height: 1.05;
	color: #eafaff;
}
#server-name-text { display: inline-block; }
#subtitle {
	margin-top: 0.375rem;
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #9fc3d4;
}
#welcome {
	margin-top: 1.15rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 2.4rem;
	height: 2.4rem;
}
#welcome span, #welcome img { vertical-align: middle; }
#welcome-image { height: 2.4rem; max-width: 4rem; margin-right: 0.8rem; }
#welcome-dia { margin: 0 0.7rem 0 0.15rem; }
#welcome-sep { margin: 0 0.5rem; color: #9fc3d4; }
#welcome-faction { color: #eafaff; font-weight: 700; }

/* ---------------------------------------------------------------- Rahmen (SVG von loading.js, abgeschrägte Ecken) */
.panel { position: absolute; }
.panel .frame { position: absolute; top: 0; left: 0; }
.panel-inner { position: relative; z-index: 1; }
.label {
	font-family: 'SWJ Orbitron', 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.24em;
}

/* ---------------------------------------------------------------- Server-Kasten oben rechts */
#info { top: 3rem; right: 4rem; width: 21.25rem; }
#info .panel-inner { padding: 0.875rem 1.25rem 1rem; }
.panel-title {
	font-family: 'SWJ Orbitron', 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	padding-bottom: 0.5rem;
	margin-bottom: 0.2rem;
	border-bottom: 1px solid #1c6f8a;
}
.rows { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 1.06rem; }
.rows td { padding: 0.3rem 0 0; }
.rows .key { width: 7.2rem; letter-spacing: 0.14em; color: #9fc3d4; }
.rows .val { text-align: right; font-weight: 600; color: #eafaff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- Ladekasten unten */
#load { left: 4rem; right: 4rem; bottom: 3.5rem; max-width: 77.5rem; }
#load .panel-inner { padding: 1.625rem 2.75rem 1.75rem; }
.status-row, .foot-row { width: 100%; border-collapse: collapse; table-layout: fixed; }
.status-row td, .foot-row td { padding: 0; }
.status-cell { vertical-align: bottom; }
#status {
	margin-top: 0.25rem;
	font-size: 1.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #eafaff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#pct {
	width: 14rem;
	vertical-align: bottom;
	text-align: right;
	white-space: nowrap;
	font-family: 'SWJ Orbitron', 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 0.02em;
}
.bar { position: relative; height: 1rem; margin: 1rem 0; padding: 2px; border: 1px solid #1c6f8a; background: #02070b; }
#bar-fill {
	position: relative;
	width: 0;
	height: 100%;
	-webkit-transition: width 0.25s linear;
	transition: width 0.25s linear;
}
.bar-seg { position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; }
.foot-row { font-size: 1rem; letter-spacing: 0.14em; color: #9fc3d4; }
#files { width: 34%; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.5rem; }
.tip-cell { vertical-align: top; text-align: right; letter-spacing: 0.06em; }
.tip-cell .label { margin-right: 0.75rem; }
#tip { -webkit-transition: opacity 0.4s linear; transition: opacity 0.4s linear; }
#tip.fade { opacity: 0; }

/* Schmale Fenster (Vorschau im Browser): Server-Kasten unter den Titel */
@media (max-width: 900px) {
	#info { top: auto; right: auto; left: 4rem; bottom: 18rem; }
	#files { display: none; }
}