/* ===========================================================
   DRAEVOR — "Twilight Passage" (Mid Rate)
   Mood: balanced, mystic, adventurous dusk. Loaded only when the
   session's current world is Draevor (see themes/tidurro/header.php).
   =========================================================== */

body.world-draevor{
	--gold:        #7fdfd0;
	--gold-bright: #a6f2e6;
	--ink:         #e7e3fb;
	--ink-dim:     #b3aed6;
	--bg-deep:     #0a0a17;
	--panel:       rgba(22, 20, 42, 0.86);
	--panel-soft:  rgba(28, 26, 52, 0.68);
	--panel-border:rgba(155, 130, 255, 0.35);
	--line:        rgba(155, 130, 255, 0.20);
	--row-alt:     rgba(155, 130, 255, 0.045);
	--row-hover:   rgba(127, 223, 208, 0.10);
	--danger:      #ff8a9e;
	--ok:          #7fdfd0;
	--mana:        #9b82ff;
	--mana-bright: #c3b3ff;
	--mystic:      #b48cff;

	font-family: "Mulish", "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
}

/* Real full-page animated background set directly on body (proven to
   render reliably, unlike a separate fixed pseudo behind translucent
   content - see project memory). Twinkling stars kept as a lightweight
   ::before pattern layer since that's pure gradient, not a photo, and
   renders fine above body's own background. Animated via background-
   position/size, not transform (transform on body would drag content). */
body.world-draevor{
	background-color: var(--bg-deep);
	background-image:
		radial-gradient(circle at 20% 15%, rgba(155,130,255,0.20) 0%, transparent 45%),
		linear-gradient(100deg, rgba(8,7,20,0.55) 0%, rgba(8,7,20,0.30) 40%, rgba(8,7,20,0.55) 100%),
		linear-gradient(180deg, rgba(10,10,25,0.35) 0%, rgba(8,7,20,0.55) 60%, rgba(6,6,16,0.78) 100%),
		url('../img/hero/draevor-bg.jpg');
	background-size: cover, cover, cover, 260%;
	background-position: center, center, center, 80% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	filter: saturate(0.85) brightness(0.9);
	animation: draevorDrift 46s ease-in-out infinite alternate;
}
@keyframes draevorDrift{
	0%   { background-size: cover, cover, cover, 260%; background-position: center, center, center, 80% 50%; }
	100% { background-size: cover, cover, cover, 280%; background-position: center, center, center, 76% 46%; }
}
@media (prefers-reduced-motion: reduce){ body.world-draevor{ animation: none; } }
@media (max-width: 780px){ body.world-draevor{ background-attachment: scroll; } }

body.world-draevor::before{
	content: '';
	position: fixed;
	inset: -6%;
	z-index: -1;
	background-image:
		radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,0.5) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 70% 40%, rgba(255,255,255,0.4) 50%, transparent 51%),
		radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.35) 50%, transparent 51%),
		radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.3) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 55% 55%, rgba(255,255,255,0.3) 50%, transparent 51%);
	background-size: 200px 200px;
	background-repeat: repeat;
	animation: draevorStars 90s linear infinite;
}
@keyframes draevorStars{ 0%{ transform: translate(0,0); } 100%{ transform: translate(-200px,-200px); } }
@media (prefers-reduced-motion: reduce){ body.world-draevor::before{ animation: none; } }
@media (max-width: 780px){ body.world-draevor::before{ position: absolute; } }

body.world-draevor h1, body.world-draevor h2, body.world-draevor h3, body.world-draevor h4{
	font-family: "Marcellus", Georgia, serif;
	letter-spacing: 0.02em;
	text-shadow: 0 0 16px rgba(155,130,255,0.4), 0 2px 8px rgba(0,0,0,0.6);
}

body.world-draevor .hero-title{
	font-family: "Cinzel Decorative", "Marcellus", Georgia, serif;
	font-weight: 700;
	font-size: 2.1em;
}

body.world-draevor .brand-name{
	font-family: "Marcellus", Georgia, serif;
	letter-spacing: 0.03em;
}

body.world-draevor .site-topbar{
	background: linear-gradient(180deg, rgba(16,14,34,0.92), rgba(16,14,34,0.72));
	border-bottom: 1px solid var(--panel-border);
	box-shadow: 0 2px 24px rgba(127,223,208,0.10);
}

body.world-draevor .world-switcher-btn.active,
body.world-draevor .world-tab-btn.active{
	background: linear-gradient(135deg, var(--mystic), var(--gold));
	color: #100e22;
	box-shadow: 0 0 18px rgba(155,130,255,0.5);
}

/* Soft glass, rounded, centered hero — flowing rather than sharp */
body.world-draevor .hero-banner{
	border-radius: 32px;
	background: linear-gradient(160deg, rgba(155,130,255,0.14), rgba(127,223,208,0.05) 60%);
	border: 1px solid var(--panel-border);
	backdrop-filter: blur(6px);
	text-align: center;
}
body.world-draevor .hero-sparkles i{
	background: radial-gradient(circle, #c3b3ff 0%, #7fdfd0 55%, transparent 75%);
	box-shadow: 0 0 10px 2px rgba(155,130,255,0.5);
	animation-duration: 6s;
}

body.world-draevor .stat-card{
	border-radius: 999px;
	padding-left: 24px;
	padding-right: 24px;
	border-color: var(--panel-border);
}
body.world-draevor .stat-card-value{ text-shadow: 0 0 14px rgba(155,130,255,0.6); }

body.world-draevor button,
body.world-draevor input[type="submit"],
body.world-draevor .btn{
	border-radius: 999px;
	font-family: "Mulish", sans-serif;
	font-weight: 600;
}

body.world-draevor .app-sidebar{
	border-right: 1px solid var(--panel-border);
	border-radius: 0 24px 24px 0;
}

body.world-draevor .worlds-heading::after,
body.world-draevor h2::after{ content: none; }

body.world-draevor .world-card.world-mid{
	box-shadow: 0 0 24px rgba(155,130,255,0.30);
	border-radius: 24px;
	transform: scale(1.03);
}

body.world-draevor .content-panel{ background: rgba(14, 12, 28, 0.55); }
body.world-draevor .app-sidebar table,
body.world-draevor #submenu, body.world-draevor #pagemenu{ background: rgba(22, 20, 42, 0.55); }