/* ==========================================================================
   ENDSCREEN Network footer strip — shared by endscreen.gg, joystickvault.com
   and gamemanx.com. Self-contained: every rule is scoped to .esn.
   Fonts: uses Chakra Petch / JetBrains Mono / Inter if the host site loads
   them, and falls back to system fonts otherwise.
   ========================================================================== */

.esn {
	--esn-void: #090a0f;
	--esn-panel: #12141f;
	--esn-line: #2a2e3f;
	--esn-text: #e0e6ed;
	--esn-muted: #8a90a6;
	--esn-endscreen: #00f0ff;   /* ENDSCREEN electric cyan */
	--esn-joystickvault: #1f9fff; /* JoystickVault blue */
	--esn-gamemanx: #ff7a1a;    /* GameManx orange */
	--esn-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
	--esn-head: "Chakra Petch", "Barlow Condensed", "Segoe UI", system-ui, sans-serif;
	--esn-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;

	background: var(--esn-void);
	border-top: 1px solid var(--esn-line);
	color: var(--esn-text);
	font-family: var(--esn-body);
	padding: 14px 16px;
}
.esn *, .esn *::before, .esn *::after { box-sizing: border-box; }
/* Compact band: label + sites stacked on the left, ENDSCREEN card on the right */
.esn__inner {
	max-width: 1170px; margin: 0 auto; display: grid; align-items: center;
	grid-template-columns: 1fr auto; grid-template-areas: "label feature" "sites feature"; gap: 6px 24px;
}
.esn__label { grid-area: label; }
.esn__feature { grid-area: feature; }
.esn__sites { grid-area: sites; }

.esn__label {
	margin: 0; font-family: var(--esn-mono); font-size: 11px; letter-spacing: .14em; line-height: 1.4;
	text-transform: uppercase; color: var(--esn-muted);
}
.esn__label b { color: var(--esn-text); font-weight: 700; }

/* Featured: ENDSCREEN (the network's lead product).
   Neutral at rest so it sits quietly on any host palette; lights up in ENDSCREEN cyan on hover/focus. */
.esn__feature {
	display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 18px;
	background: var(--esn-panel);
	border: 1px solid var(--esn-line); border-radius: 10px; padding: 8px 10px 8px 14px; max-width: 470px;
	color: var(--esn-text) !important; text-decoration: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.esn__feature:hover, .esn__feature:focus-visible {
	background: linear-gradient(90deg, rgba(0, 240, 255, .10), rgba(0, 240, 255, 0) 80%), var(--esn-panel);
	border-color: var(--esn-endscreen); box-shadow: 0 0 0 1px var(--esn-endscreen), 0 0 28px rgba(0, 240, 255, .18);
	outline: none;
}
.esn__feature-name {
	font-family: var(--esn-head); font-weight: 700; font-size: 16px; letter-spacing: .08em;
	color: var(--esn-text); text-transform: uppercase; line-height: 1.2; transition: color .18s ease;
}
.esn__feature-desc { grid-column: 1; white-space: nowrap; font-size: 12px; line-height: 1.35; color: var(--esn-muted); }
.esn__feature-cta {
	grid-column: 2; grid-row: 1 / span 2; white-space: nowrap;
	font-family: var(--esn-mono); font-weight: 700; font-size: 12px; letter-spacing: .08em;
	color: var(--esn-text); background: transparent; border: 1px solid var(--esn-line); border-radius: 7px; padding: 6px 10px;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.esn__feature:hover .esn__feature-name, .esn__feature:focus-visible .esn__feature-name { color: var(--esn-endscreen); }
.esn__feature:hover .esn__feature-cta, .esn__feature:focus-visible .esn__feature-cta {
	color: var(--esn-void); background: var(--esn-endscreen); border-color: var(--esn-endscreen);
}

/* Sister sites */
.esn__sites { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 20px; }
.esn__site { line-height: 1.5; }
.esn__site a, .esn__site span {
	font-family: var(--esn-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
	color: var(--esn-text) !important; text-decoration: none !important;
}
.esn__site a:hover strong, .esn__site a:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.esn__site strong { font-weight: 700; }
.esn__site em { font-style: normal; color: var(--esn-muted); text-transform: none; letter-spacing: .02em; }
.esn__site::before {
	content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 10px; vertical-align: 1px;
	background: var(--esn-dot, var(--esn-muted));
}
.esn__site--endscreen { --esn-dot: var(--esn-endscreen); }
.esn__site--joystickvault { --esn-dot: var(--esn-joystickvault); }
.esn__site--gamemanx { --esn-dot: var(--esn-gamemanx); }
.esn__site[aria-current] span { opacity: .6; }
.esn__site[aria-current] { order: 9; }

/* On ENDSCREEN itself there is no feature card: label and sites share one row */
.esn__inner:not(:has(.esn__feature)) { grid-template-columns: auto 1fr; grid-template-areas: "label sites"; }

@media (max-width: 900px) {
	.esn__inner { grid-template-columns: 1fr; grid-template-areas: "label" "feature" "sites"; gap: 8px; }
	.esn__feature { max-width: none; }
}
@media (max-width: 480px) {
	.esn__feature { grid-template-columns: 1fr; }
	.esn__feature-cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
	.esn__sites { flex-direction: column; gap: 2px; }
}
/* Host themes often style footer lists; keep items inline and unstyled */
.esn .esn__site { width: auto; float: none; margin: 0; padding: 0; list-style: none; background: none; border: 0; }

/* Desktop: everything on one row — label | site names | ENDSCREEN card */
@media (min-width: 901px) {
	.esn__inner { grid-template-columns: auto 1fr auto; grid-template-areas: "label sites feature"; gap: 0 28px; }
	.esn__label, .esn p.esn__label { padding: 0 !important; margin: 0 !important; }
	.esn__site em { display: none; }
	.esn__sites { flex-wrap: nowrap; gap: 0 20px; }
	.esn__feature { max-width: none; }
}
/* Site dots stay subtle until the link is hovered */
.esn__site::before { opacity: .45; transition: opacity .18s ease; }
.esn__site:hover::before, .esn__site:focus-within::before { opacity: 1; }