@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Oswald:wght@300;400;500;600;700&display=swap');

/* ============================================================================
   WOE SERVER — "War-Forged Obsidian" dark redesign (2026-06-15)
   A true dark-mode visual identity layered on top of style.css. Loaded LAST so
   it wins the cascade. Goal: break the osRO template look entirely — deep-black
   canvas, crimson atmosphere, heraldic glass cards, a real landing hero, and
   distinctive Cinzel + Oswald typography (replacing osRO's SportyPro/Gotham).
   Semantic colors (online/offline, alerts, Facebook blue) are left untouched.
============================================================================ */

:root{
	--ink:        #08090c;   /* obsidian page base */
	--ink-2:      #0c0e13;
	--panel:      rgba(16,18,24,.55);
	--panel-solid:#111319;
	--hair:       rgba(255,255,255,.08);
	--hair-2:     rgba(255,255,255,.16);
	--ink-text:   #aeb6c2;
	--ink-bright: #f1f3f6;
	--display:   'Cinzel', Georgia, serif;
	--label:     'Oswald', 'Arial Narrow', sans-serif;
}

/* ---------------------------------------------------------------- atmosphere */
body{
	background: var(--ink) !important;
	background-image:
		radial-gradient(1300px 700px at 50% -12%, rgba(224,49,49,.13), transparent 60%),
		radial-gradient(1000px 560px at 100% 2%, rgba(206,212,218,.05), transparent 55%),
		radial-gradient(900px 700px at 0% 120%, rgba(224,49,49,.07), transparent 60%) !important;
	background-attachment: fixed !important;
}
/* fine film-grain over the whole page for depth */
body::before{
	content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	opacity:.035; mix-blend-mode:overlay;
}

/* ------------------------------------------------------------- typography */
h1, h2, h3,
.maincontent h5,
.fame-title,
.theme-heading,
.global-container h2, .global-container h3,
.content-wrap h1, .content-wrap h2{
	font-family: var(--display) !important;
	letter-spacing:.015em;
	color: var(--ink-bright);
}
.column-title{
	font-family: var(--label) !important;
	text-transform:uppercase; letter-spacing:.24em;
	font-size:.8rem !important; color:#cfd5dd !important; font-weight:500 !important;
}

/* ------------------------------------------------------------------- navbar */
.navbar.fixed-top, .bg-navbar{
	background: rgba(8,9,12,.72) !important;
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	border-bottom: 1px solid var(--hair);
}
.navbar-dark .navbar-nav .nav-link{
	font-family: var(--label) !important;
	text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; font-weight:500;
}

/* ===================================================================== HERO */
.woe-hero{
	position:relative; isolation:isolate; overflow:hidden;
	margin: 6px 0 34px; border:1px solid var(--hair); border-radius:6px;
	padding: clamp(3rem,7vw,6rem) clamp(1.4rem,4vw,3.6rem);
	background:
		radial-gradient(120% 150% at 12% 0%, rgba(224,49,49,.22), transparent 55%),
		radial-gradient(100% 120% at 100% 100%, rgba(206,212,218,.06), transparent 50%),
		linear-gradient(180deg, var(--ink-2), var(--ink));
	box-shadow: 0 34px 90px -44px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
/* emperium-diamond watermark */
.woe-hero::before{
	content:""; position:absolute; z-index:-1; right:-60px; top:50%;
	width:min(48vw,440px); aspect-ratio:1; transform:translateY(-50%) rotate(45deg);
	border:1px solid rgba(224,49,49,.30);
	box-shadow: inset 0 0 130px rgba(224,49,49,.20), 0 0 60px rgba(224,49,49,.10);
	opacity:.55;
}
/* diagonal blade-glint */
.woe-hero::after{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.045) 46% 47.5%, transparent 49%);
}
.woe-hero__inner{ position:relative; max-width:780px; }
.woe-hero__eyebrow{
	display:inline-flex; align-items:center; gap:.6rem;
	font-family:var(--label); text-transform:uppercase; letter-spacing:.32em;
	font-size:.72rem; font-weight:600; color:#ff8787;
	padding:.5rem .95rem; border:1px solid rgba(224,49,49,.38); border-radius:2px;
	background:rgba(224,49,49,.09);
}
.woe-hero__title{
	font-family:var(--display) !important; font-weight:900;
	font-size:clamp(2.9rem,7.4vw,5.6rem); line-height:.98; letter-spacing:.01em;
	color:#f5f7fa; margin:1.4rem 0 0; text-shadow:0 6px 44px rgba(0,0,0,.6);
}
.woe-hero__title span{
	color:#e03131; /* fallback */
	background:linear-gradient(180deg,#ff6b6b,#e03131);
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.woe-hero__lead{
	font-family:'Inter-Regular',sans-serif; color:var(--ink-text);
	font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.7; margin:1.4rem 0 0; max-width:580px;
}
.woe-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; }
.woe-hero__stats{
	display:flex; flex-wrap:wrap; gap:clamp(1.3rem,3vw,2.8rem);
	margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid var(--hair);
}
.woe-stat b{
	display:block; font-family:var(--label); font-weight:700;
	font-size:clamp(1.7rem,3vw,2.35rem); color:#fff; line-height:1;
}
.woe-stat span{
	display:block; margin-top:.45rem; font-family:var(--label);
	text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; color:#7d8694;
}

/* ---------------------------------------------------------------- buttons */
.woe-btn{
	display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
	font-family:var(--label); font-weight:600; text-transform:uppercase; letter-spacing:.12em;
	font-size:.92rem; padding:.95rem 1.7rem; border-radius:3px; text-decoration:none;
	border:1px solid transparent;
	transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}
.woe-btn--primary{
	color:#fff; background:linear-gradient(180deg,#e03131,#c92a2a);
	box-shadow:0 12px 32px -12px rgba(224,49,49,.7);
}
.woe-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(224,49,49,.8); color:#fff; filter:brightness(1.07); }
.woe-btn--ghost{ color:#e7ebf0; border-color:var(--hair-2); background:rgba(255,255,255,.025); }
.woe-btn--ghost:hover{ transform:translateY(-2px); border-color:#e03131; color:#fff; background:rgba(224,49,49,.1); }

/* nav download CTA + theme buttons adopt the militant label font */
.download-btn, .theme-button{ font-family:var(--label) !important; text-transform:uppercase; letter-spacing:.1em; }

/* ============================================ glass cards + heraldic corners */
.maincontent, .hall-of-fame, .loginpanel, .quick-links ul{
	background: var(--panel) !important;
	-webkit-backdrop-filter: blur(13px) saturate(120%);
	backdrop-filter: blur(13px) saturate(120%);
	border:1px solid var(--hair) !important;
	border-radius:5px !important;
	box-shadow:0 26px 64px -34px #000, inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.maincontent, .hall-of-fame{ position:relative; }
.maincontent::before, .hall-of-fame::before,
.maincontent::after,  .hall-of-fame::after{
	content:""; position:absolute; width:18px; height:18px; pointer-events:none;
	border:0 solid #e03131;
}
.maincontent::before, .hall-of-fame::before{ top:10px; left:10px;  border-top-width:2px; border-left-width:2px; }
.maincontent::after,  .hall-of-fame::after { bottom:10px; right:10px; border-bottom-width:2px; border-right-width:2px; }

/* section titles inside cards: carved display + crimson tick already in style.css */
.maincontent h5, .fame-title{ color:var(--ink-bright) !important; letter-spacing:.02em; }

/* leaderboard section headers (override inline body styles via !important) */
.leaderboards-section .section-title{ font-family:var(--display) !important; }
.leaderboards-section .section-tag{ font-family:var(--label) !important; letter-spacing:.22em !important; }

/* ------------------------------------------------------------------ footer */
#footer-section{
	background:linear-gradient(180deg, transparent, #06070a) !important;
	border-top:1px solid var(--hair);
}

/* --------------------------------------------------------------- responsive */
@media (max-width:767.98px){
	.woe-hero{ padding:2.6rem 1.3rem; }
	.woe-hero::before{ opacity:.32; right:-110px; }
	.woe-btn{ width:100%; justify-content:center; }
}

/* ------------------------------------------------------------ bare container
   Themed pages (main/*, donate, bank, loginpanel, …) close .global-container
   right after the <!-- Messages --> block and render their own markup below it.
   With no .content-wrap inside, that container still inherited the full-page
   treatment (100vh min-height + 80px padding + background image), so every
   themed/login/module page opened with a tall, ugly empty box above the real
   content. (style.css's .global-container:empty{display:none} never fires —
   the whitespace text nodes mean it isn't truly :empty.) header.php now tags it
   .global-container--bare; collapse it to a thin flash-message strip, and hide
   it entirely when there's no message. The .content-wrap fallback pages
   (login, create, item, ranking/*) are untagged and keep the full styling. */
.global-container.global-container--bare{
	min-height: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}
.global-container.global-container--bare:not(:has(.alert)){
	display: none;
}