/* =========================================================================
   ZENITAR – Visual Refresh Layer
   =========================================================================
   Additive stylesheet loaded AFTER style.min.css / responsive.css /
   bootstrap*.css. It does NOT replace or duplicate the existing Pixarts
   template markup or backend logic – it only refines presentation:
   spacing, typography, hover/focus states, real responsive breakpoints,
   and a corrected hero crop on mobile.

   All colors below are taken from the site's OWN existing palette
   (verified in css/style.min.css), not invented:
     - bg:      #2e0a0a / #1a1313 / #140e0e
     - card:    #401b1b / #372e2e
     - ink:     #ecdbc0 / #ecdbc1 (headings)
     - ink-dim: #9d9494 / #a39592
     - rose:    #c37c7c (existing link/accent color)
     - red:     #d84b4b / #ce4c4c / #d44c51 (existing CTA/danger color)
     - gold:    #e6af57 / #f0a913 (existing highlight color)

   No image, logo or background is replaced. Only object-position /
   background-position / sizing / overlay / spacing is adjusted.
   ========================================================================= */

:root{
	--zen-bg:        #2e0a0a;
	--zen-bg-deep:   #1a1313;
	--zen-bg-deeper: #140e0e;
	--zen-card:      #401b1b;
	--zen-card-2:    #372e2e;
	--zen-ink:       #ecdbc0;
	--zen-ink-dim:   #a39592;
	--zen-rose:      #c37c7c;
	--zen-red:       #d84b4b;
	--zen-red-2:     #ce4c4c;
	--zen-gold:      #e6af57;
	--zen-gold-2:    #f0a913;
	--zen-border:    rgba(236,219,192,.14);
	--zen-shadow:    0 14px 34px rgba(0,0,0,.45);
	--zen-radius:    10px;
	--zen-ease:      cubic-bezier(.22,.68,0,1);
}

@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Global typography polish ---------- */
body{
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.pixarts-header .pixarts-nav ul li a,
.pixarts-footer .foot-menu a{
	transition: color .2s var(--zen-ease), opacity .2s var(--zen-ease);
	letter-spacing: .5px;
}

.pixarts-header .pixarts-nav ul li a:hover,
.pixarts-footer .foot-menu a:hover{
	color: var(--zen-gold) !important;
}

/* ---------- Hero ---------- */
.pixarts-header{
	position: relative;
}

/* Subtle bottom gradient so the 3-column content below meets the image
   cleanly instead of a hard cut, without touching the image file itself. */
.pixarts-header::after{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(46,10,10,0) 0%, rgba(46,10,10,.55) 65%, var(--zen-bg) 100%);
	pointer-events: none;
	z-index: 2;
}

.pixarts-header .pixarts-nav>.logo-head img{
	filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}

.flags-container ul li.flags a{
	display: inline-block;
	transition: transform .18s var(--zen-ease), filter .18s var(--zen-ease);
	filter: grayscale(35%) brightness(.9);
}
.flags-container ul li.flags a:hover{
	transform: translateY(-2px) scale(1.08);
	filter: grayscale(0%) brightness(1.05);
}

/* ---------- Cards (login / ranking / stats / news) ---------- */
.box-sm-v1{
	border-radius: var(--zen-radius);
	overflow: hidden;
	box-shadow: var(--zen-shadow);
	transition: box-shadow .25s var(--zen-ease);
}

.box-sm-v1 .heading{
	position: relative;
}

.box-sm-v1 .heading h2{
	letter-spacing: .5px;
}

/* Ranking / player rows */
.pix-tab.p-tbody a.lane{
	transition: background-color .18s var(--zen-ease), transform .18s var(--zen-ease), padding-left .18s var(--zen-ease);
	border-radius: 4px;
}
.pix-tab.p-tbody a.lane:hover{
	background-color: rgba(236,219,192,.06);
	padding-left: 6px;
}

/* ---------- Buttons ---------- */
.login-box button[type="submit"],
.inner.login-box button{
	transition: transform .18s var(--zen-ease), box-shadow .18s var(--zen-ease), filter .18s var(--zen-ease);
}
.login-box button[type="submit"]:hover,
.inner.login-box button:hover{
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: 0 8px 20px rgba(216,75,75,.35);
}
.login-box button[type="submit"]:active,
.inner.login-box button:active{
	transform: translateY(0);
}

/* ---------- Form inputs ---------- */
.login-box input[type="text"],
.login-box input[type="password"]{
	transition: border-color .18s var(--zen-ease), background-color .18s var(--zen-ease);
}
.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus{
	outline: none;
	border-color: var(--zen-gold) !important;
	background-color: rgba(0,0,0,.28);
}

.login-add .lane a{
	transition: color .18s var(--zen-ease);
}
.login-add .lane a:hover{
	color: var(--zen-gold) !important;
}

/* ---------- News column ---------- */
.newsfeed{
	line-height: 1.65;
}
.newsfeed a:hover{
	color: var(--zen-gold);
}

/* ---------- Footer polish ---------- */
.pixarts-footer{
	position: relative;
}
.pixarts-footer .foot-foot .author a{
	transition: color .18s var(--zen-ease);
}
.pixarts-footer .foot-foot .author a:hover{
	color: var(--zen-gold);
}

/* =========================================================================
   RESPONSIVE — real breakpoints instead of a squeezed desktop layout
   ========================================================================= */

/* Mobile hero: keep the FULL existing header-bg.png, just re-aim the
   background-position so the "ZENITAR" wordmark (measured at ~28-33% of
   the image width) stays fully visible on narrow viewports instead of
   being cut to "...TAR". Desktop keeps its existing centered crop. */
@media (max-width: 959px){
	.pixarts-header{
		background-position: 28% top !important;
	}
}
@media (min-width: 960px){
	.pixarts-header{
		background-position: center top;
	}
}

@media (max-width: 640px){
	.g-recaptcha{
		transform: scale(.78) !important;
		-webkit-transform: scale(.78) !important;
		transform-origin: 0 0 !important;
		-webkit-transform-origin: 0 0 !important;
	}

	.flags-container ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	.box-sm-v1{
		margin-left: 12px;
		margin-right: 12px;
	}

	.pixarts-header .pixarts-nav ul{
		flex-wrap: wrap;
		height: auto !important;
		row-gap: 6px;
	}
}

/* =========================================================================
   ZENITAR – Visual Refresh Layer v2 (2026-09-21, Teil 7)
   =========================================================================
   Erweiterung von v1: v1 deckte nur die kompakten Homepage-Widgets ab
   (.login-box / .box-sm-v1). Beim Besuch der echten Unterseiten
   (/users/login, /users/register, /ranking/players, /news) wird im
   center-col derselbe Seiten-Rahmen (Header/Footer) genutzt, aber der
   Seiteninhalt selbst kommt aus pages/*.php und nutzt dort GENERISCHE
   Bootstrap-Klassen (.page-hd, .table, .btn-*, .form-control, .alert-*,
   .jumbotron), die style.min.css nur minimal anfasst - deshalb wirkten
   diese Seiten bisher praktisch unverändert.

   Das eigentliche Pixarts-Theme bringt zwar eigene, fertige Komponenten
   mit (.formbox, .ranking-big) - die wurden aber bewusst NICHT aktiviert,
   weil deren Eingabefeld-/Button-Hintergründe auf fehlende Assets zeigen
   (z.B. img/theme/input-main-bg.html, register-button.html,
   checkbox-bg.html - Platzhalter-Dateien ohne echtes Bild, kein Bug
   dieser Session). Aktivieren dieser Klassen würde Buttons/Inputs
   unsichtbar machen. Stattdessen werden hier die TATSÄCHLICH genutzten,
   funktionierenden Bootstrap-Klassen rein per CSS (keine neuen
   Bild-Assets, nichts erfunden) an die bestehende Farbsprache angeglichen.
   Kein PHP/HTML in pages/*.php wurde dafür verändert.
   ========================================================================= */

/* ---------- Seiten-Banner (.page-hd, login/register/etc.) ---------- */
.page-hd{
	position: relative;
	min-height: 150px;
	border-radius: var(--zen-radius);
	overflow: hidden;
	background-size: cover !important;
	background-position: center !important;
	box-shadow: var(--zen-shadow);
	display: flex !important;
	align-items: flex-end;
}
.page-hd::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,14,14,.35) 0%, rgba(20,14,14,.88) 100%);
	pointer-events: none;
}
.page-hd::before{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--zen-gold) 50%, transparent);
	z-index: 2;
}
.page-hd .bd-c{
	position: relative;
	z-index: 2;
	padding: 18px 28px;
	width: 100%;
}
.page-hd .pre-social{
	font-size: 20px;
	letter-spacing: 1px;
	color: var(--zen-ink);
	text-shadow: 0 2px 10px rgba(0,0,0,.6);
	padding-bottom: 0;
}

/* ---------- Section-Header (.heading-main) inkl. Players/Guilds-Switch ---------- */
.center-col .heading-main{
	border-bottom: 1px solid var(--zen-border);
	padding-bottom: 12px;
	margin-bottom: 18px;
	align-items: center;
}
.center-col .heading-main strong{
	color: var(--zen-ink);
	font-size: 16px !important;
	letter-spacing: .5px;
}
.center-col .heading-main .switch .option{
	color: var(--zen-ink-dim) !important;
	transition: color .2s var(--zen-ease);
}
.center-col .heading-main .switch .option.active,
.center-col .heading-main .switch .option:hover{
	color: var(--zen-gold) !important;
}
.center-col .heading-main .switch .option.active:after{
	background: var(--zen-gold);
}

/* ---------- Formulare auf Vollseiten (Login/Register/Suche) ---------- */
.center-col .form-control,
.center-col input[type="text"],
.center-col input[type="password"],
.center-col input[type="email"]{
	background-color: rgba(0,0,0,.28) !important;
	border: 1px solid var(--zen-border) !important;
	color: var(--zen-ink) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	transition: border-color .18s var(--zen-ease), background-color .18s var(--zen-ease);
}
.center-col .form-control::placeholder{
	color: var(--zen-ink-dim);
	opacity: .8;
}
.center-col .form-control:focus,
.center-col input:focus{
	border-color: var(--zen-gold) !important;
	background-color: rgba(0,0,0,.4) !important;
	outline: none;
}
/* Browser-Autofill (z.B. Chrome) überschreibt background-color sonst mit
   einem eigenen weißen/gelben Layer, unabhängig vom CSS-Wert. */
.center-col input:-webkit-autofill,
.center-col input:-webkit-autofill:hover,
.center-col input:-webkit-autofill:focus{
	-webkit-text-fill-color: var(--zen-ink);
	-webkit-box-shadow: 0 0 0px 1000px rgba(20,14,14,.9) inset;
	box-shadow: 0 0 0px 1000px rgba(20,14,14,.9) inset;
	transition: background-color 9999s ease-in-out 0s;
}
.center-col table.table-hover td{
	color: var(--zen-ink-dim);
	border-color: var(--zen-border) !important;
	vertical-align: middle;
	padding: 10px 6px;
}

/* ---------- Buttons auf Vollseiten ---------- */
.center-col .btn{
	border-radius: 6px;
	border: none;
	letter-spacing: .5px;
	transition: transform .18s var(--zen-ease), box-shadow .18s var(--zen-ease), filter .18s var(--zen-ease);
}
.center-col .btn:hover{
	transform: translateY(-1px);
	filter: brightness(1.08);
}
.center-col .btn-success{
	background-color: #3a7a3f;
	box-shadow: 0 6px 16px rgba(58,122,63,.3);
}
.center-col .btn-danger{
	background-color: var(--zen-red);
	box-shadow: 0 6px 16px rgba(216,75,75,.3);
}
.center-col .btn-primary{
	background-color: var(--zen-rose);
	border-color: var(--zen-rose);
	box-shadow: 0 6px 16px rgba(195,124,124,.3);
}
.center-col .btn-primary:hover{
	background-color: var(--zen-gold);
}

/* ---------- Meldungen (.alert-*, .notification) ---------- */
.center-col .alert{
	background-color: var(--zen-card-2);
	border: none;
	border-left: 3px solid var(--zen-ink-dim);
	border-radius: 4px;
	color: var(--zen-ink);
}
.center-col .alert-danger{
	border-left-color: var(--zen-red);
}
.center-col .alert-info{
	border-left-color: var(--zen-gold);
}
.center-col .notification.notification_blue{
	background-color: var(--zen-card-2);
	border-left: 3px solid var(--zen-gold);
	border-radius: 4px;
	padding: 12px 16px;
	margin-bottom: 16px;
}
.center-col .notification .notification_text{
	color: var(--zen-ink);
}

/* ---------- Ranking-Vollseite (Spieler/Gilden-Tabelle + Suche) ---------- */
.center-col .jumbotron{
	background-color: var(--zen-card-2) !important;
	border: 1px solid var(--zen-border);
	border-radius: var(--zen-radius);
	box-shadow: var(--zen-shadow);
}
.center-col table.table{
	color: var(--zen-ink);
}
.center-col table.table thead.thead-inverse th{
	background-color: var(--zen-bg-deeper);
	color: var(--zen-gold);
	border-bottom: 1px solid var(--zen-border);
	font-weight: 600;
	letter-spacing: .5px;
}
.center-col table.table-striped tbody tr:nth-of-type(odd){
	background-color: rgba(236,219,192,.03);
}
.center-col table.table-hover tbody tr:hover{
	background-color: rgba(236,219,192,.07);
}
.center-col table.table td img{
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.center-col .level-table,
.center-col .exp-table{
	color: var(--zen-gold-2);
	font-weight: 600;
}

/* ---------- Pagination-Verbindungslinien sichtbar machen ---------- */
.center-col .pagination .buttons:before,
.center-col .pagination .buttons:after{
	background: linear-gradient(90deg, transparent, var(--zen-border));
}
.center-col .pagination .buttons a:hover b{
	color: var(--zen-gold) !important;
}

/* ---------- Dekorative Klassen-Leiste im Hero ---------- */
/* Nutzt ausschließlich vorhandene Bilder aus images/job/ (Charakterklassen-
   Icons), keine neuen Assets. Rein dekorativ, kein Layout-Bruch. Absolut
   im .pixarts-header positioniert (statt im normalen Dokumentfluss), da
   die 3-Spalten-Karten mit margin-top:-43px nach oben über den Hero-
   Rand überlappen und eine Leiste im normalen Fluss dort verdecken würden. */
.zen-class-strip{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 90px;
	z-index: 5;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 0 20px;
	opacity: .85;
	pointer-events: none;
}
.zen-class-strip img{
	pointer-events: auto;
}
.zen-class-strip img{
	width: 42px;
	height: 42px;
	object-fit: contain;
	filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)) grayscale(20%);
	transition: transform .2s var(--zen-ease), filter .2s var(--zen-ease);
}
.zen-class-strip img:hover{
	transform: translateY(-3px) scale(1.12);
	filter: drop-shadow(0 5px 10px rgba(0,0,0,.6)) grayscale(0%);
}
@media (max-width: 959px){
	.zen-class-strip{ display: none; }
}

/* =========================================================================
   ZENITAR – Visual Refresh Layer v5 (2026-09-21, Teil 7 Fortsetzung)
   =========================================================================
   Fund beim Responsive-Test (1366px, /users/login): "Registrieren" und
   "Passwort vergessen?" unter dem Anmelde-Button sind reine <a>-Tags OHNE
   Klasse und ohne Styling aus style.min.css – der Browser zeigt sie im
   Standard-Blau (rgb(0,0,238)), was im dunklen Theme fehl am Platz wirkt.
   Gleiches Muster potenziell an weiteren Stellen im center-col (z.B.
   Registrieren-Seite AGB-Links). Reine CSS-Ergänzung, kein Markup-Wechsel,
   betrifft nur unstylisierte Klartext-Links im Seiteninhalt – Buttons
   (.btn) und bereits themeable Komponenten sind über :not() ausgenommen. */
.center-col a:not(.btn):not([class]){
	color: var(--zen-rose);
	transition: color .18s var(--zen-ease);
}
.center-col a:not(.btn):not([class]):hover{
	color: var(--zen-gold);
}
.center-col a:not(.btn):not([class]):visited{
	color: var(--zen-rose);
}