/**
 * WAR Theme - Arcade atmosphere
 *
 * A purely additive layer. It changes no layout, no spacing, no type scale and
 * no markup: every rule here decorates a surface that already exists. Removing
 * this stylesheet returns the theme to its restrained state exactly.
 *
 * Direction: a dark arcade at midnight. Glow, CRT bloom, neon reflections and
 * a little atmospheric grain - on top of the existing structure, not instead
 * of it.
 *
 * Intensity is controlled by a body class from the Customizer:
 *   .war-atmos--full   (default)
 *   .war-atmos--subtle (glow only, no scanlines or grain)
 *   .war-atmos--off    (this file effectively inert)
 */

:root {
	/* Arcade palette. The base tokens stay put; these sit alongside. */
	--war-neon-purple: #a855f7;
	--war-neon-pink: #ff2d8a;
	--war-neon-blue: #2f80ed;
	--war-neon-cyan: #22d3ee;
	--war-crt-green: #3ecf7e;
	--war-neon-orange: #ff8c1a;

	/* Glow recipes. Layered rather than one big blur: a tight core plus a
	   wide halo reads as light, a single large shadow reads as fog. */
	--war-glow-pink:
		0 0 6px rgba(255, 45, 138, 0.55),
		0 0 22px rgba(255, 45, 138, 0.25);
	--war-glow-purple:
		0 0 6px rgba(168, 85, 247, 0.5),
		0 0 24px rgba(168, 85, 247, 0.22);
	--war-glow-blue:
		0 0 6px rgba(47, 128, 237, 0.5),
		0 0 24px rgba(47, 128, 237, 0.22);
	--war-glow-green:
		0 0 6px rgba(62, 207, 126, 0.5),
		0 0 22px rgba(62, 207, 126, 0.2);
	--war-glow-yellow:
		0 0 8px rgba(245, 197, 24, 0.55),
		0 0 28px rgba(245, 197, 24, 0.28);

	--war-scanline-opacity: 0.04;
	--war-grain-opacity: 0.035;
}

/* =====================================================================
   1. Room lighting
   Two fixed layers over the whole page: a coloured wash that gives the
   black some depth, and a CRT scanline + grain veil.
   Both are pointer-events:none and paint-only, so nothing below them
   changes behaviour.
   ===================================================================== */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(78% 58% at 80% 4%, rgba(168, 85, 247, 0.3), transparent 70%),
		radial-gradient(62% 50% at 2% 28%, rgba(255, 45, 138, 0.2), transparent 72%),
		radial-gradient(85% 60% at 50% 102%, rgba(47, 128, 237, 0.22), transparent 74%),
		radial-gradient(40% 30% at 96% 62%, rgba(34, 211, 238, 0.12), transparent 72%);
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	/* Scanlines: 3px pitch. Fine enough to read as a CRT, coarse enough to
	   survive a 1x display without moire. */
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0px,
		rgba(0, 0, 0, 0) 2px,
		rgba(0, 0, 0, var(--war-scanline-opacity)) 2px,
		rgba(0, 0, 0, var(--war-scanline-opacity)) 3px
	);
	/* Vignette, so the edges of the room fall away. */
	box-shadow: inset 0 0 170px 10px rgba(0, 0, 0, 0.55);
}

/* Grain. An inline SVG turbulence rather than a texture file: no request,
   a few hundred bytes, and it scales to any viewport. */
.war-main::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: var(--war-grain-opacity);
	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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Keep real content above the wash. */
.war-header,
.war-main,
.war-footer {
	position: relative;
	z-index: 1;
}

.war-atmos--subtle body::after,
body.war-atmos--subtle::after,
body.war-atmos--subtle .war-main::before {
	display: none;
}

body.war-atmos--off::before,
body.war-atmos--off::after,
body.war-atmos--off .war-main::before {
	display: none;
}

/* =====================================================================
   2. The sign above the door
   ===================================================================== */

.war-logo img,
.war-logo svg {
	filter:
		drop-shadow(0 0 4px rgba(255, 255, 255, 0.25))
		drop-shadow(0 0 14px rgba(168, 85, 247, 0.35));
	transition: filter var(--war-t);
}

.war-logo:hover img,
.war-logo:hover svg {
	filter:
		drop-shadow(0 0 5px rgba(255, 255, 255, 0.4))
		drop-shadow(0 0 20px rgba(255, 45, 138, 0.5));
}

.war-logo__retro {
	text-shadow: var(--war-glow-purple);
}

.war-logo__bars span {
	box-shadow: 0 0 8px currentColor;
}

/* =====================================================================
   3. Arcade buttons
   The primary reads as a lit cabinet button; the secondary as a neon
   outline. Hover brightens and lifts, active depresses - a real button
   moves when you press it.
   ===================================================================== */

.war-btn--primary {
	box-shadow:
		var(--war-glow-yellow),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	text-shadow: none;
}

.war-btn--primary:hover {
	box-shadow:
		0 0 10px rgba(245, 197, 24, 0.7),
		0 0 36px rgba(245, 197, 24, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
	transform: translateY(-1px);
}

.war-btn--primary:active {
	transform: translateY(1px);
	box-shadow:
		0 0 6px rgba(245, 197, 24, 0.5),
		inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.war-btn--secondary {
	border-color: rgba(168, 85, 247, 0.55);
	box-shadow:
		0 0 0 1px rgba(168, 85, 247, 0.12),
		0 0 18px rgba(168, 85, 247, 0.14),
		inset 0 0 18px rgba(168, 85, 247, 0.07);
}

.war-btn--secondary:hover {
	border-color: var(--war-neon-purple);
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(168, 85, 247, 0.3),
		0 0 26px rgba(168, 85, 247, 0.32),
		inset 0 0 24px rgba(168, 85, 247, 0.12);
	transform: translateY(-1px);
}

.war-btn--secondary:active,
.war-btn--outline:active {
	transform: translateY(1px);
}

.war-btn--outline {
	box-shadow:
		0 0 14px rgba(245, 197, 24, 0.16),
		inset 0 0 14px rgba(245, 197, 24, 0.06);
}

.war-btn--outline:hover {
	box-shadow: var(--war-glow-yellow);
}

.war-iconbtn:hover {
	border-color: rgba(168, 85, 247, 0.5);
	box-shadow: 0 0 16px rgba(168, 85, 247, 0.28);
	color: #fff;
}

/* =====================================================================
   4. Hero
   ===================================================================== */

.war-hero__eyebrow {
	text-shadow: var(--war-glow-yellow);
}

/* Each letter of the rainbow word lights in its own colour. */
.war-hero__rainbow span {
	text-shadow: 0 0 18px currentColor;
}

.war-hero__title {
	text-shadow: 0 0 42px rgba(255, 255, 255, 0.14);
}

.war-hero__intro strong {
	text-shadow: var(--war-glow-yellow);
}

/* CRT bloom around the hero photograph. */
.war-hero__media::after {
	content: "";
	position: absolute;
	inset: -6% -4% -10% -8%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(58% 58% at 58% 42%, rgba(168, 85, 247, 0.3), transparent 68%),
		radial-gradient(48% 48% at 30% 76%, rgba(47, 128, 237, 0.2), transparent 70%);
	filter: blur(26px);
}

.war-hero__media--empty::after {
	display: none;
}

.war-hero__valuenum {
	text-shadow: 0 0 26px rgba(255, 255, 255, 0.22);
}

.war-hero__value {
	border-block-start-color: rgba(168, 85, 247, 0.22);
}

/* =====================================================================
   5. Sidebar rail - the active item is a lit tab
   ===================================================================== */

.war-rail__link.is-active {
	position: relative;
	background: linear-gradient(
		90deg,
		rgba(168, 85, 247, 0.16),
		rgba(168, 85, 247, 0.02)
	);
	box-shadow: inset 0 0 20px rgba(168, 85, 247, 0.1);
}

.war-rail__link.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: var(--war-neon-purple);
	box-shadow: var(--war-glow-purple);
}

.war-rail__link:hover {
	box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04);
}

.war-nav .current-menu-item > a::after,
.war-nav .current_page_item > a::after,
.war-nav .war-is-current > a::after {
	box-shadow: var(--war-glow-yellow);
}

/* =====================================================================
   6. Section labels
   ===================================================================== */

.war-eyebrow {
	text-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}

.war-rule,
.war-section__head {
	border-color: rgba(168, 85, 247, 0.16);
}

/* =====================================================================
   7. The vault - game covers
   Covers get a screen-like sheen, a scanline whisper and a neon edge on
   hover. The card lift already exists; this adds the light.
   ===================================================================== */

.war-cover {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
		var(--war-panel);
}

.war-cover:hover {
	border-color: rgba(168, 85, 247, 0.45);
	box-shadow:
		var(--war-lift),
		0 0 26px rgba(168, 85, 247, 0.25);
}

.war-cover__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%),
		repeating-linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0px,
			rgba(0, 0, 0, 0) 2px,
			rgba(0, 0, 0, 0.06) 2px,
			rgba(0, 0, 0, 0.06) 3px
		);
	opacity: 0.75;
	transition: opacity var(--war-t);
}

.war-cover:hover .war-cover__media::after {
	opacity: 0.4;
}

body.war-atmos--subtle .war-cover__media::after,
body.war-atmos--off .war-cover__media::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%);
}

/* Placeholder becomes a powered-off screen rather than an empty box. */
.war-cover__placeholder {
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(168, 85, 247, 0.14), transparent 68%),
		linear-gradient(180deg, #0a0a0c, #050506);
	text-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

.war-chip {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.04);
}

.war-cover:hover .war-chip {
	border-color: rgba(168, 85, 247, 0.5);
	color: #fff;
	box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

/* =====================================================================
   8. Market - the ticker
   ===================================================================== */

.war-market__card:hover {
	border-color: rgba(62, 207, 126, 0.32);
	box-shadow:
		var(--war-lift),
		0 0 26px rgba(62, 207, 126, 0.14);
}

.war-market__label--gainer {
	text-shadow: var(--war-glow-green);
}

.war-market__label--decliner {
	text-shadow: var(--war-glow-pink);
}

.war-market__label--traded {
	text-shadow: var(--war-glow-yellow);
}

.war-market__price {
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.18);
}

/* The line itself glows, like a trace on a scope. */
.war-sparkline path {
	filter: drop-shadow(0 0 4px currentColor);
}

.war-sparkline--up path {
	filter: drop-shadow(0 0 5px rgba(62, 207, 126, 0.8));
}

.war-sparkline--down path {
	filter: drop-shadow(0 0 5px rgba(240, 68, 56, 0.8));
}

.war-sparkline--neutral path {
	filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.8));
}

.war-delta--up {
	text-shadow: var(--war-glow-green);
}

.war-delta--down {
	text-shadow: var(--war-glow-pink);
}

.war-market__thumb {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.04),
		0 6px 18px rgba(0, 0, 0, 0.6);
}

/* =====================================================================
   9. Discover tiles - four different lights
   ===================================================================== */

.war-discover__card {
	background-color: #050507;
}

.war-discover__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.9;
	transition: opacity var(--war-t);
}

.war-discover__card:nth-child(1)::after {
	background: radial-gradient(78% 90% at 88% 78%, rgba(168, 85, 247, 0.34), transparent 68%);
}

.war-discover__card:nth-child(2)::after {
	background: radial-gradient(78% 90% at 88% 78%, rgba(47, 128, 237, 0.32), transparent 68%);
}

.war-discover__card:nth-child(3)::after {
	background: radial-gradient(78% 90% at 88% 78%, rgba(62, 207, 126, 0.3), transparent 68%);
}

.war-discover__card:nth-child(4)::after {
	background: radial-gradient(78% 90% at 88% 78%, rgba(255, 140, 26, 0.32), transparent 68%);
}

.war-discover__card:hover::after {
	opacity: 1;
}

.war-discover__card:nth-child(1):hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: var(--war-lift), 0 0 30px rgba(168, 85, 247, 0.22); }
.war-discover__card:nth-child(2):hover { border-color: rgba(47, 128, 237, 0.5); box-shadow: var(--war-lift), 0 0 30px rgba(47, 128, 237, 0.22); }
.war-discover__card:nth-child(3):hover { border-color: rgba(62, 207, 126, 0.5); box-shadow: var(--war-lift), 0 0 30px rgba(62, 207, 126, 0.2); }
.war-discover__card:nth-child(4):hover { border-color: rgba(255, 140, 26, 0.5); box-shadow: var(--war-lift), 0 0 30px rgba(255, 140, 26, 0.22); }

.war-discover__title {
	text-shadow: 0 0 22px rgba(255, 255, 255, 0.2);
}

/* =====================================================================
   10. Platform spotlight
   ===================================================================== */

.war-spotlight__name {
	text-shadow:
		0 0 30px rgba(255, 255, 255, 0.2),
		0 0 60px rgba(47, 128, 237, 0.25);
}

.war-spotlight__console {
	filter: drop-shadow(0 18px 40px rgba(47, 128, 237, 0.28));
}

.war-spotlight__left::before {
	content: "";
	position: absolute;
	left: -12%;
	top: -10%;
	width: 90%;
	height: 120%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(50% 50% at 50% 50%, rgba(47, 128, 237, 0.14), transparent 70%);
	filter: blur(30px);
}

/* =====================================================================
   11. Statistics - the marquee
   ===================================================================== */

.war-stats__panel {
	background:
		radial-gradient(80% 160% at 50% 0%, rgba(168, 85, 247, 0.08), transparent 70%),
		#010101;
	box-shadow:
		0 0 40px rgba(168, 85, 247, 0.12),
		inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.war-stats__panel::before {
	opacity: 1;
	filter: saturate(1.25);
}

.war-stats__num {
	text-shadow: 0 0 24px rgba(255, 255, 255, 0.22);
}

.war-stats__item:nth-child(1) .war-stats__icon { filter: drop-shadow(0 0 8px rgba(255, 45, 138, 0.7)); }
.war-stats__item:nth-child(2) .war-stats__icon { filter: drop-shadow(0 0 8px rgba(47, 128, 237, 0.7)); }
.war-stats__item:nth-child(3) .war-stats__icon { filter: drop-shadow(0 0 8px rgba(62, 207, 126, 0.7)); }
.war-stats__item:nth-child(4) .war-stats__icon { filter: drop-shadow(0 0 8px rgba(245, 197, 24, 0.7)); }

/* =====================================================================
   12. Footer
   ===================================================================== */

.war-footer {
	border-block-start-color: rgba(168, 85, 247, 0.2);
	background: linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.05));
}

.war-footer__social a:hover {
	color: #fff;
	filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
}

/* =====================================================================
   13. Restraint
   Heavy paint is expensive on phones and hostile to motion sensitivity.
   Both get a quieter room rather than a broken one.
   ===================================================================== */

@media (max-width: 620px) {
	body::after {
		box-shadow: inset 0 0 110px 8px rgba(0, 0, 0, 0.5);
	}

	.war-main::before {
		display: none;
	}

	.war-hero__media::after,
	.war-spotlight__left::before {
		filter: blur(18px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.war-btn--primary:hover,
	.war-btn--secondary:hover,
	.war-btn--primary:active,
	.war-btn--secondary:active {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	body::after,
	.war-main::before {
		display: none;
	}

	.war-cover__media::after {
		opacity: 0.25;
	}
}