/* Shared skin for the home, server picker, guides and full-screen map. */
@font-face
{
	font-family: "Oxanium";
	src: url("../fonts/oxanium/oxanium-variable.ttf") format("truetype");
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
}
.retroSite
{
	--surface: #edf2f4;
	--surface-raised: #f7fafb;
	--surface-muted: #dfe9ed;
	--surface-inset: #d5e1e6;
	--ink: #203a4c;
	--ink-soft: #3f596b;
	--text-muted: #4b6475;
	--line: #bdcfd7;
	--line-strong: #8fabb9;
	--portal: #0873a2;
	--portal-dark: #075a80;
	--portal-light: #77d8f1;
	--portal-pale: #d7eff7;
	--night: #102c3e;
	--night-raised: #1a3d50;
	--night-line: #44697d;
	--on-night: #edf7fa;
	--on-night-muted: #b0cbd8;
	--button-background: linear-gradient(#0d759f, #075a80);
	/* Compatibility with the shared base stylesheet. */
	--paper: var(--ink);
	--paper-dim: var(--text-muted);
	--lime-200: var(--portal-pale);
	--lime-300: var(--portal-light);
	--lime-400: var(--portal);
	--lime-500: var(--portal-dark);
	--display: "Oxanium", "Bahnschrift", "Segoe UI", sans-serif;
	--body: "Segoe UI", "Trebuchet MS", sans-serif;
	--gutter: clamp(18px, 2.2vw, 42px);
	--ad-rail-width: 184px;
	--radius: 8px;
	--radius-sm: 5px;
	--shadow: 0 5px 15px #102c3e12;
	position: relative;
	color: var(--paper);
	font: 15px/1.6 var(--body);
	background: var(--surface);
}
.retroSite::before { display: none; }
.retroSite .frame
{
	width: calc(100% - var(--ad-rail-width));
	margin-left: var(--ad-rail-width);
	min-height: 100dvh;
	overflow: clip;
	background: radial-gradient(ellipse at 15% 0, #f7fafb, transparent 65%), var(--surface);
}
.retroSite h1, .retroSite h2, .retroSite h3, .retroSite h4
{
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.025em;
	text-transform: none;
}
.retroSite :focus-visible { outline: 3px solid var(--portal); outline-offset: 4px; }
.retroSite .siteHeader
{
	top: 0;
	width: 100%;
	max-width: none;
	min-height: 78px;
	flex: none;
	margin: 0;
	padding: 10px var(--gutter);
	gap: 24px;
	border: 0;
	border-bottom: 3px solid var(--portal);
	border-radius: 0;
	color: var(--on-night);
	background: linear-gradient(var(--night-raised), var(--night));
	box-shadow: 0 2px 0 #0a202e, inset 0 1px var(--night-line);
	backdrop-filter: none;
}
.retroSite .siteLogo { gap: 7px; }
.retroLogoMark { width: 48px; height: 48px; object-fit: contain; }
.retroSite .siteLogoType { display: grid; gap: 2px; text-transform: none; }
.retroSite .siteLogoType strong { font: 700 27px/1 var(--display); letter-spacing: -.025em; transform: translateY(2px); }
.retroSite .siteLogoType strong span { color: var(--portal-light); }
.retroSite .siteLogoType small { color: var(--on-night-muted); font: 700 10px/1.4 var(--body); letter-spacing: .09em; }
.retroSite .siteNav { gap: 4px; justify-content: flex-start; margin-right: auto; margin-left: 24px; }
.retroSite .siteNav a
{
	padding: 10px 17px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 13px;
	color: var(--on-night-muted);
}
.retroSite .siteNav a:not([aria-disabled="true"]):hover { background: #ffffff0b; color: #fff; }
.retroSite .siteNav a[aria-current="page"]
{
	color: #fff;
	border-color: #438ca9;
	background: var(--portal-dark);
	box-shadow: inset 0 1px #77d8f155, 0 2px 2px #0002;
}
.retroSite .siteNav a[aria-current="page"]::after { display: none; }
.retroSite .headerActions { margin-left: auto; }
.retroSite .headerServerLink
{
	color: var(--on-night-muted);
	padding: 7px 12px;
	border: 1px solid var(--night-line);
	border-radius: 5px;
	background: #0a202e50;
	font-size: 12px;
	gap: 7px;
}
.retroSite .headerServerLink strong { color: var(--on-night); }
.retroSite .headerServerLink:hover { border-color: var(--portal-light); background: #77d8f120; }
.serverStatusDot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; background: var(--portal-light); box-shadow: 0 0 0 3px #77d8f11a; }
.headerNote { color: var(--on-night-muted); font-size: 12px; }
.headerPrivacyLink { color: var(--on-night-muted); padding: 7px; font-size: 11px; }
.retroSite .footerPrivacyLink, .retroSite .headerPrivacyLink { display: none; }
.retroSite .btn
{
	border-radius: 5px;
	font: 700 13px/1.4 var(--body);
	min-height: 43px;
	padding: 11px 19px;
	gap: 20px;
	box-shadow: inset 0 1px #ffffff35, 0 3px 0 #0002;
}
.retroSite .btn-portal
{
	color: #fff;
	border: 1px solid var(--portal-dark);
	background: var(--button-background);
	text-shadow: 0 1px #063c56;
}
.retroSite .btn:not([aria-disabled="true"]):hover { transform: translateY(-1px); filter: brightness(1.06); }
.retroSite .btn-lg { min-height: 49px; padding-inline: 23px; }
/* Match the map markers: crop a centered image enlarged by 2px. */
.retroSite .mapSpellIcon { --map-spell-icon-size: 28px; position: relative; display: block; flex: none; width: var(--map-spell-icon-size); height: var(--map-spell-icon-size); overflow: hidden; border-radius: 50%; box-shadow: 0 0 3px #10243155; }
.retroSite .mapSpellIcon img { position: absolute; top: -1px; left: -1px; display: block; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; border: 0; border-radius: 0; }
.retroSite .parchment { color: var(--paper); border-color: var(--line); background: var(--surface-raised); box-shadow: var(--shadow); }
.retroSite .wrap { width: 100%; max-width: none; }
.journalEyebrow
{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--portal-dark);
	font: 700 11px/1.5 var(--body);
	letter-spacing: .13em;
	text-transform: uppercase;
}
.journalTextLink { color: var(--portal-dark); font: 700 13px/1.5 var(--body); text-decoration: none; }
.journalTextLink:hover { text-decoration: underline; }
.retroSite .siteFooter
{
	margin-top: auto;
	padding: 25px var(--gutter) 18px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 24px;
	border-top: 1px solid var(--line);
	background: var(--surface-muted);
}
.footerSignature { font: 700 19px var(--display); text-decoration: none; }
.footerSignature span { display: block; margin-top: 5px; color: var(--text-muted); font: 12px var(--body); }
.retroSite .footerLinks { margin-left: auto; }
.retroSite .footerLinks a { color: var(--ink-soft); font-size: 11px; }
.retroSite .footerLegal { flex-basis: 100%; color: var(--text-muted); font-size: 10px; }
.siteAdRail
{
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 101;
	width: var(--ad-rail-width);
	padding: 16px 11px calc(16px + var(--ad-rail-footer-height, 0px));
	border-right: 1px solid var(--line-strong);
	color: var(--text-muted);
	background: var(--surface-inset);
}
.siteAdContent
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.siteAdLabel { flex: none; font: 9px/1.5 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.siteAdSlot
{
	position: relative;
	flex: none;
	width: 160px;
	height: max(0px, min(600px, calc(100dvh - 110px)));
	background: var(--surface-muted);
	outline: 1px dashed var(--line-strong);
}
.siteAdSlot::before { content: "Espace publicitaire"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font: 10px var(--body); writing-mode: vertical-rl; }
.siteAdSlot .adsbygoogle { position: relative; }
.siteAdSlot:has(.adsbygoogle[data-ad-status="filled"])::before { content: none; }
.siteAdNote { max-width: 140px; color: var(--text-muted); font-size: 10px; line-height: 1.6; text-align: center; }
.retroRailAd { display: none; width: 160px; height: 600px; }
@media (min-width: 761px) and (min-height: 710px) and (hover: hover) and (pointer: fine)
{
	.retroRailAd { display: block; }
	.siteAdContent { position: sticky; top: 16px; }
}
@media (max-width: 1080px)
{
	.retroSite .siteHeader { gap: 12px; }
	.retroSite .siteNav { margin-left: 0; }
	.retroSite .siteNav a { padding-inline: 12px; }
	.retroSite .headerServerLink > span:nth-child(2) { display: none; }
}
@media (max-width: 760px)
{
	.retroSite { --ad-rail-width: 0px; --gutter: 18px; }
	.retroSite .frame { width: 100%; min-height: 100dvh; margin-bottom: 0; }
	.retroSite .siteHeader { min-height: 65px; padding: 8px 14px; flex-wrap: nowrap; gap: 8px; }
	.retroLogoMark { width: 35px; height: 35px; }
	.retroSite .siteLogoType strong { font-size: 20px; }
	.retroSite .siteLogoType small, .headerNote { display: none; }
	.retroSite .siteNav { order: 0; width: auto; margin: 0 auto; padding: 0; gap: 2px; }
	.retroSite .siteNav a { font-size: 11px; padding: 8px; }
	.retroSite .headerActions { gap: 0; }
	.retroSite .headerServerLink { padding: 6px; font-size: 11px; gap: 4px; }
	.retroSite .headerServerLink .serverStatusDot { display: none; }
	.siteAdRail { display: none; }
	.retroSite .footerPrivacyLink, .retroSite .headerPrivacyLink { display: inline-flex; }
	.retroSite .footerLinks { margin-left: 0; }
}
@media (max-width: 390px)
{
	.retroSite .siteLogoType { display: none; }
}
@media (max-width: 1000px)
{
	.retroSite .siteHeader.hasGuideNav { flex-wrap: wrap; }
	.retroSite .hasGuideNav .siteNav { order: 3; width: 100%; margin: 0; justify-content: flex-start; }
}

/* Keep all guide links visible when the mobile navigation fills one row. */
@media (max-width: 760px)
{
	.retroSite .hasGuideNav .siteNav { flex-wrap: wrap; row-gap: 0; }
}