/* AtlasRO: Midgard Chronicles — FluxCP theme, v2 (game-portal layout)
   Night-blue base, brass for anything you can act on, teal for live/online info.
   Art slots: themes/atlas/img/art/ (see Content DB "Art Assets"); without art the chart of Midgard fills in. */

:root {
	--night: #0A0E15;
	--night-2: #0E141E;
	--panel: #121A26;
	--panel-2: #172131;
	--line: #243146;
	--line-2: #2F3E57;
	--text: #D5DBE4;
	--muted: #8C97A9;
	--faint: #5E6A7E;
	--brass: #C9A25B;
	--brass-hi: #E7CB8C;
	--brass-lo: #7D6232;
	--teal: #4DB6C4;
	--ok: #55C58C;
	--bad: #E0644F;
	--warn: #E3B04B;

	--display: "Marcellus", "Trajan Pro", Georgia, serif;
	--ui: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;
	--body: "Barlow", "Segoe UI", system-ui, sans-serif;

	--wrap: 76rem;
	--gutter: clamp(1rem, 3.5vw, 2rem);
	--r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; min-height: 100vh; display: flex; flex-direction: column;
	background: var(--night); color: var(--text);
	font: 400 1rem/1.55 var(--body);
}
main { flex: 1 0 auto; }
img { max-width: 100%; }
a { color: var(--brass-hi); text-decoration: none; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.15; }
p { margin: 0 0 1em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--brass); color: #111; padding: .5rem .9rem; }
.skip:focus { top: .5rem; }

/* ---------- status strip ---------- */
.strip { background: #06090E; border-bottom: 1px solid #141C28; font: 500 .8125rem/1 var(--ui); letter-spacing: .02em; color: var(--muted); }
.strip-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); min-height: 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.strip p { margin: 0; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.strip strong { color: var(--text); font-weight: 600; }
.strip a { color: var(--text); }
.strip-time { display: inline-flex; align-items: center; gap: .55rem; }
.strip-sep { width: 1px; height: .85rem; background: var(--line-2); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.dot.is-up { background: var(--ok); box-shadow: 0 0 0 3px rgba(85, 197, 140, .18); }
.dot.is-down { background: var(--bad); box-shadow: 0 0 0 3px rgba(224, 100, 79, .18); }
.strip-account { display: flex; align-items: center; gap: 1rem; }
.strip-account a { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.strip-account a[aria-current="page"] { color: var(--brass-hi); }
.strip-cta { color: #111 !important; background: var(--brass); padding: .35rem .7rem; border-radius: 3px; }
.strip-cta:hover { background: var(--brass-hi); }
.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.lang a { padding: .3rem .45rem; color: var(--muted); letter-spacing: .05em; }
.lang a[aria-current="true"] { background: var(--line-2); color: #fff; }

/* ---------- main menu with centre crest ---------- */
.navbar {
	position: relative; z-index: 20;
	background: linear-gradient(#141D2B, #0D131C);
	border-bottom: 1px solid var(--brass-lo);
	box-shadow: 0 1px 0 rgba(201, 162, 91, .15), 0 10px 30px rgba(0, 0, 0, .45);
}
.navbar-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 3.75rem; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.nav-right { justify-content: flex-end; }
.nav ul a {
	display: block; padding: 1.2rem 0;
	font: 600 .9375rem/1 var(--ui); text-transform: uppercase; letter-spacing: .09em; color: #C7CEDA;
	border-bottom: 2px solid transparent;
}
.nav ul a:hover { color: #fff; }
.nav ul a[aria-current="page"] { color: var(--brass-hi); border-bottom-color: var(--brass); }
.crest { display: block; width: 6.5rem; height: 6.5rem; margin: 0 2rem -2.6rem; position: relative; z-index: 2; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.crest img, .crest-svg { width: 100%; height: 100%; display: block; }
.nav-button { display: none; }
.m-only { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(34rem, 72vh, 44rem); display: flex; align-items: center; overflow: hidden; background: #0B1220; }
.hero-art { position: absolute; inset: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; display: block; }
.hero-art::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 14, 21, .96) 0%, rgba(10, 14, 21, .86) 40%, rgba(10, 14, 21, .15) 75%),
		linear-gradient(0deg, var(--night) 0%, rgba(10, 14, 21, 0) 30%);
}
.hero-chart { position: absolute; inset: 0; }
.hero-chart .chart { width: 100%; height: 100%; }
.hero-chart .chart { opacity: .9; }
.hero-in { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 5rem var(--gutter) 7.5rem; }
.hero-ep { font: 600 .875rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; }
.hero-title { font: 400 clamp(3.25rem, 8vw, 6rem)/.95 var(--display); color: #F4EEDF; letter-spacing: .02em; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hero-title span { display: block; font-size: .36em; letter-spacing: .32em; text-transform: uppercase; color: var(--brass-hi); margin-top: .7rem; }
.hero-logo img { max-width: min(30rem, 90%); display: block; }
.hero-tag { font-size: 1.25rem; color: #E6EAF0; margin: 1.5rem 0 1.25rem; max-width: 30ch; }
.chips { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem; max-width: 36rem; }
.chips li { font: 600 .8125rem/1 var(--ui); letter-spacing: .04em; color: #DCE2EA; padding: .45rem .7rem; border: 1px solid rgba(201, 162, 91, .4); background: rgba(10, 14, 21, .55); border-radius: 3px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 0; }
.hero-beta { margin: 1rem 0 0; font-size: .875rem; color: var(--muted); }

/* buttons */
.btn, .button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font: 700 .9375rem/1 var(--ui); text-transform: uppercase; letter-spacing: .1em;
	padding: 1rem 1.6rem; border-radius: 4px; border: 1px solid transparent; cursor: pointer;
}
.btn-gold, .button {
	color: #1A1306; background: linear-gradient(#EBCF91, #C9A25B 55%, #A9823F);
	border-color: #8A6A33; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(201, 162, 91, .18);
}
.btn-gold:hover, .button:hover { color: #000; filter: brightness(1.08); }
.btn-line { color: var(--brass-hi); border-color: rgba(201, 162, 91, .6); background: rgba(10, 14, 21, .5); }
.btn-line:hover { color: #fff; border-color: var(--brass-hi); }

/* ---------- live panels ---------- */
.board {
	position: relative; z-index: 3; max-width: var(--wrap); margin: -4.5rem auto 0; padding: 0 var(--gutter);
	display: grid; grid-template-columns: 0.9fr 1.15fr 1fr; gap: 1.25rem; align-items: stretch;
}
.panel {
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line); border-top: 2px solid var(--brass-lo); border-radius: var(--r);
	padding: 1.25rem 1.35rem 1.1rem; display: flex; flex-direction: column;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.panel h2, .block-head h2 { font: 400 1.375rem/1.1 var(--display); color: #F1ECE0; margin-bottom: 1rem; }
.panel-link { margin-top: auto; padding-top: .9rem; font: 600 .8125rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.panel-note { margin: auto 0 0; padding-top: .8rem; font-size: .8125rem; color: var(--faint); }
.svc { list-style: none; margin: 0 0 1rem; padding: 0; }
.svc li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.svc b { font: 700 .8125rem/1.6 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stat { background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 4px; padding: .7rem .8rem; }
.stat b { display: block; font: 400 1.9rem/1 var(--display); color: #fff; }
.stat span { font-size: .8125rem; color: var(--muted); }

.woe-next { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 4px; padding: .7rem .85rem; margin-bottom: 1rem; }
.woe-next span { font-size: .8125rem; color: var(--muted); grid-column: 1; }
.woe-next b { font: 600 1.0625rem/1.2 var(--ui); color: #fff; grid-column: 1; }
.woe-next em { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 700 .9375rem/1 var(--ui); font-style: normal; color: var(--brass-hi); }
.woe-next.is-live { display: block; color: #fff; border-color: var(--bad); background: rgba(224, 100, 79, .12); font-weight: 600; }
.realms { list-style: none; margin: 0; padding: 0; }
.realms li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.realm { font-size: .875rem; color: #C4CBD6; }
.castles { display: flex; gap: .3rem; }
.castle { width: 1.6rem; height: 1.6rem; border-radius: 3px; border: 1px solid var(--line-2); background: #0B1018; display: grid; place-items: center; overflow: hidden; }
.castle.owned { border-color: var(--brass-lo); background: #1B2333; }
.castle img { width: 100%; height: 100%; image-rendering: pixelated; }
.castle i { font: 700 .75rem/1 var(--ui); font-style: normal; color: var(--brass-hi); }

.mvps { list-style: none; margin: 0; padding: 0 .4rem 0 0; max-height: 15.5rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.mvps li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .42rem 0; border-bottom: 1px solid var(--line); }
.mvp-name { font-weight: 500; font-size: .9375rem; color: #E7EBF1; }
.mvp-name small { display: block; font-size: .75rem; color: var(--faint); font-weight: 400; }
.mvps b { font: 700 .75rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.mvps b small { display: block; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); font-size: .75rem; }
.mvp-alive b { color: var(--ok); }
.mvp-dead b { color: var(--bad); }
.mvp-window b { color: var(--warn); }

/* ---------- home blocks ---------- */
.duo { max-width: var(--wrap); margin: 3.5rem auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.block { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; }
.route-block, .world { max-width: var(--wrap); margin: 1.25rem auto 0; }
.route-block, .world { margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); margin-right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }
.block-head h2 { margin-bottom: .8rem; }
.block-head a { font: 600 .8125rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.block-lede { color: var(--muted); max-width: 62ch; }
.empty { color: var(--faint); font-size: .9375rem; }

.rank-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.rank-cols h3 { font: 700 .8125rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: .7rem; }
.rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank li { counter-increment: r; display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.rank li::before { content: counter(r); font: 400 1rem/1 var(--display); color: var(--faint); text-align: center; }
.rank li:nth-child(1)::before { color: var(--brass-hi); }
.rank li:nth-child(2)::before { color: #C9D1DC; }
.rank li:nth-child(3)::before { color: #C08A5B; }
.who b { display: block; font-weight: 600; font-size: .9375rem; color: #EDF0F5; line-height: 1.25; }
.who small { font-size: .75rem; color: var(--muted); }
.val { font: 600 .875rem/1 var(--ui); color: var(--brass-hi); white-space: nowrap; }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { padding: 0 0 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.news-list li:last-child { border-bottom: 0; margin-bottom: 0; }
.news-list time { font: 600 .75rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.news-list h3 { font: 600 1.0625rem/1.3 var(--body); color: #F1F3F7; margin: .4rem 0 .3rem; }
.news-list p { font-size: .9rem; color: var(--muted); margin: 0; }

.episodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.episode {
	position: relative; overflow: hidden; min-height: 13rem; padding: 1.25rem; border-radius: var(--r);
	border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end;
	background: linear-gradient(0deg, rgba(10, 14, 21, .95) 25%, rgba(10, 14, 21, .3)), var(--art, linear-gradient(135deg, #18233A, #0D131C));
	background-size: cover; background-position: center;
}
.episode.is-open { border-color: var(--brass-lo); }
.ep-num { position: absolute; top: .4rem; right: .9rem; font: 400 5rem/1 var(--display); color: rgba(201, 162, 91, .14); }
.episode.is-open .ep-num { color: rgba(201, 162, 91, .32); }
.ep-status { font: 700 .75rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .5rem; }
.episode.is-open .ep-status { color: var(--ok); }
.episode h3 { font: 400 1.3rem/1.2 var(--display); color: #F1ECE0; margin-bottom: .4rem; }
.episode p:last-child { margin: 0; font-size: .9rem; color: var(--muted); }

.world { margin-bottom: 3.5rem; }
.world-map { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #123A52; }
.world-map .chart { display: block; width: 100%; height: auto; }

/* chart (shared by hero fallback and the world block) */
.chart .grat line { stroke: #8FB8CB; stroke-width: .8; opacity: .1; }
.chart .wl { fill: none; stroke: #8FB8CB; stroke-width: 1.1; }
.chart .land { fill: #1B4862; stroke: #CFE1EA; stroke-width: 1.8; }
.chart .contour { fill: none; stroke: #8FB8CB; stroke-width: .9; opacity: .3; }
.chart .uncharted { fill: none; stroke: #CFE1EA; stroke-width: 1.6; stroke-dasharray: 7 8; opacity: .75; }
.chart text { paint-order: stroke; stroke: #123A52; stroke-width: 6px; stroke-linejoin: round; }
.chart .region { font: italic 44px Georgia, serif; fill: #CFE1EA; opacity: .5; letter-spacing: .08em; }
.chart .future { font: italic 28px Georgia, serif; fill: #CFE1EA; opacity: .85; }
.chart .future .ep { font: 600 19px var(--ui); opacity: .75; }
.chart .town circle { fill: #E0B64F; }
.chart .town .ring { fill: none; stroke: #E0B64F; stroke-width: 1.6; }
.chart .town text { font: 600 24px var(--ui); fill: #EEF2F0; letter-spacing: .02em; }
.chart .capital text { font-size: 29px; }
.hero-chart .chart { filter: saturate(.85) brightness(.8); }

/* flash message on the home page */
.flash { max-width: var(--wrap); margin: 1rem auto 0; padding: 0 var(--gutter); }
.flash p { margin: 0; padding: .75rem 1rem; border: 1px solid rgba(77, 182, 196, .45); background: rgba(77, 182, 196, .1); border-radius: 4px; color: #E6F6F8; }

/* ---------- inner pages ---------- */
.page-head {
	height: 11rem; background: #0D1420 center 35% / cover no-repeat;
	background-image: radial-gradient(ellipse at 70% 0%, rgba(201, 162, 91, .12), transparent 60%), linear-gradient(#111A28, var(--night));
	border-bottom: 1px solid var(--line);
	position: relative;
}
.page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--night), rgba(10, 14, 21, .2)); }
.inner { position: relative; z-index: 2; max-width: var(--wrap); width: 100%; margin: -6rem auto 3.5rem; padding: 0 var(--gutter); }
.inner-panel { background: var(--night-2); border: 1px solid var(--line); border-top: 2px solid var(--brass-lo); border-radius: var(--r); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); min-height: 20rem; }

.page { max-width: 44rem; }
.page-wide { max-width: none; }
.page h1, .inner-panel > h2:first-of-type, .inner-panel > h2 {
	font: 400 clamp(1.8rem, 4vw, 2.4rem)/1.1 var(--display); color: #F4EEDF; margin: 0 0 .6rem;
}
.inner-panel > h3, .page h2 { font: 400 1.4rem/1.2 var(--display); color: #F1ECE0; margin: 2rem 0 .75rem; }
.page .lede { font-size: 1.125rem; color: var(--muted); max-width: 40ch; margin-bottom: 1.75rem; }
.page .note { border-left: 3px solid var(--brass); background: rgba(201, 162, 91, .07); padding: .75rem 1rem; max-width: 36rem; margin: 0 0 2rem; }
.page .meta { color: var(--muted); font-size: .875rem; }
.page .actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0 0 2rem; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 3rem; }
ul.plain { padding-left: 1.1rem; margin: 0; }
ul.plain li, ol.numbered li { margin-bottom: .5rem; }
ol.numbered { padding-left: 1.3rem; margin: 0; }
ol.numbered li::marker { color: var(--brass); font-weight: 600; }

.notice { border: 1px solid rgba(77, 182, 196, .45); background: rgba(77, 182, 196, .1); color: #E6F6F8; padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1.5rem; }
.error, .red { color: #F08A78; }
p.error { border: 1px solid rgba(224, 100, 79, .5); background: rgba(224, 100, 79, .1); padding: .6rem .9rem; border-radius: 4px; max-width: 34rem; margin-bottom: 1.5rem; }
.green { color: var(--ok); }

.tabs, .pagemenu { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0 0 1.75rem; border-bottom: 1px solid var(--line); }
.tabs a, .pagemenu a { font: 600 .875rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .7rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.tabs a:hover, .pagemenu a:hover { color: #fff; }
.tabs a[aria-current="page"] { color: var(--brass-hi); border-bottom-color: var(--brass); }
.pagemenu { border-bottom: 0; margin-top: -1rem; }

/* forms */
.page-form { max-width: 30rem; }
.form .field { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.form label { display: block; font: 600 .875rem/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #C7CEDA; margin-bottom: .4rem; }
.form input[type=text], .form input[type=password], .form input[type=email], .form input[type=date], .form select,
.generic-form input[type=text], .generic-form input[type=password], .generic-form select, .generic-form textarea,
.search-form input[type=text], .search-form select {
	font: inherit; color: #fff; background: #0A0F17; border: 1px solid var(--line-2); border-radius: 4px;
	padding: .75rem .85rem; width: 100%; max-width: 100%; color-scheme: dark;
}
.form input:focus, .form select:focus, .generic-form input:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.form .hint { font-size: .8125rem; color: var(--faint); margin: .4rem 0 0; }
.form-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.aside { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); }
.security-code img { display: block; margin-bottom: .5rem; border-radius: 3px; }
.generic-form button, .generic-form input[type=submit] { font: 700 .875rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #1A1306; background: linear-gradient(#EBCF91, #C9A25B 55%, #A9823F); border: 1px solid #8A6A33; padding: .8rem 1.3rem; border-radius: 4px; cursor: pointer; }

/* FluxCP default tables (rankings, castles, database, admin) */
.generic-form-table, .vertical-table, .horizontal-table { border-collapse: collapse; margin: 0 0 2rem; font-size: .9375rem; }
.generic-form-table th, .generic-form-table td { padding: .45rem 1rem .45rem 0; text-align: left; vertical-align: top; }
.generic-form-table th { font-weight: 500; white-space: nowrap; padding-top: .9rem; }
.vertical-table { width: 100%; }
.vertical-table th, .vertical-table td { text-align: left; padding: .65rem 1.25rem .65rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.vertical-table th { font-weight: 500; color: var(--muted); width: 11rem; }
.horizontal-table { width: 100%; }
.horizontal-table th { text-align: left; font: 700 .8125rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); padding: .6rem 1rem .6rem 0; }
.horizontal-table td { border-bottom: 1px solid var(--line); padding: .6rem 1rem .6rem 0; }
.horizontal-table tr:hover td { background: rgba(255, 255, 255, .02); }
.not-applicable { color: var(--faint); font-style: italic; }
.up, .online { color: var(--ok); font-weight: 600; }
.down, .offline { color: var(--bad); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.inner-panel table { max-width: 100%; }
.inner-panel img { image-rendering: auto; }

/* account overview, status page */
.facts { margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.facts > div { background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 4px; padding: .75rem .9rem; }
.facts dt { font: 600 .75rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: .3rem; }
.facts dd { margin: 0; font-size: 1.0625rem; color: #F1F3F7; }
.inline-action { font: 600 .75rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; margin-left: .6rem; }
.chars .num, .chars th.num { text-align: right; font-variant-numeric: tabular-nums; }
.char-name { font-weight: 600; color: #fff; }
.online-dot { font-weight: 500; font-size: .8125rem; color: var(--ok); margin-left: .5rem; }
.online-dot::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); margin-right: .3rem; vertical-align: .1em; }
.hint-block { font-size: .875rem; color: var(--faint); }
.status-facts { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.status-facts dd.up::before, .status-facts dd.down::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; vertical-align: .15em; }
.status-facts dd.up::before { background: var(--ok); }
.status-facts dd.down::before { background: var(--bad); }

/* ---------- footer ---------- */
.foot { background: #070A0F; border-top: 1px solid var(--brass-lo); margin-top: auto; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 3rem var(--gutter) 2rem; display: grid; grid-template-columns: 1.2fr 2fr; gap: 2.5rem; }
.foot-name { font: 400 1.75rem/1 var(--display); color: #F4EEDF; margin-bottom: .75rem; }
.foot-name span { display: block; font-size: .5em; letter-spacing: .3em; text-transform: uppercase; color: var(--brass); margin-top: .45rem; }
.foot-logo { max-width: 14rem; margin-bottom: .75rem; }
.foot-brand p:last-child { color: var(--muted); font-size: .9375rem; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.foot-cols h2 { font: 700 .8125rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: .55rem; font-size: .9375rem; }
.foot-cols a { color: #BCC4D0; }
.foot-cols a:hover { color: #fff; }
.soon { color: var(--faint); }
.foot-base { border-top: 1px solid #141C28; padding: 1.1rem var(--gutter); text-align: center; font-size: .8125rem; color: var(--faint); }
.foot-base p { margin: .2rem 0; }
.foot-base a { color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 68rem) {
	.board { grid-template-columns: 1fr 1fr; }
	.p-mvp { grid-column: 1 / -1; }
	.duo { grid-template-columns: 1fr; }
	.rank-cols { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
	.crest { margin: 0 1rem -2.2rem; width: 5.5rem; height: 5.5rem; }
	.nav ul { gap: 1.1rem; }
	.nav ul a { font-size: .875rem; letter-spacing: .06em; }
}
@media (max-width: 52rem) {
	.strip-time { display: none; }
	.strip-account > a { display: none; }
	.nav-open .m-only { display: block; }
	.hero-chart { opacity: .45; }
	.nav { grid-template-columns: auto 1fr; min-height: 3.5rem; }
	.crest { order: -1; width: 4rem; height: 4rem; margin: .25rem 0 -1.25rem; }
	.nav-button {
		display: flex; flex-direction: column; justify-content: center; gap: 4px;
		position: absolute; right: var(--gutter); top: .85rem; width: 2.5rem; height: 2.1rem; padding: 0 .55rem;
		background: transparent; border: 1px solid var(--line-2); border-radius: 4px; cursor: pointer;
	}
	.nav-button span { display: block; height: 2px; background: var(--brass-hi); }
	.nav-left, .nav-right { display: none !important; }
	.nav-open .nav-left, .nav-open .nav-right { display: flex !important; flex-direction: column; grid-column: 1 / -1; gap: 0; }
	.nav-open .nav-left { padding-top: 1.5rem; }
	.nav-open .nav ul a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
	.navbar-in { position: relative; }
	.hero { min-height: 0; }
	.hero-art::after { background: linear-gradient(0deg, var(--night) 8%, rgba(10, 14, 21, .82) 55%, rgba(10, 14, 21, .45)); }
	.hero-chart .chart { width: auto; height: 100%; position: absolute; left: 50%; transform: translateX(-58%); }
	.hero-in { padding: 3.5rem var(--gutter) 6.5rem; }
	.hero-tag { font-size: 1.1rem; }
	.board { grid-template-columns: 1fr; margin-top: -4rem; }
	.episodes { grid-template-columns: 1fr; }
	.foot-in { grid-template-columns: 1fr; }
	.foot-cols { grid-template-columns: 1fr 1fr; }
	.inner { margin-top: -3rem; }
	.page-head { height: 8rem; }
	.vertical-table, .vertical-table tbody, .vertical-table tr, .vertical-table th, .vertical-table td { display: block; }
	.vertical-table th { border-bottom: 0; padding-bottom: 0; width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
	.chart .uncharted { animation: chart-in 2.4s .4s ease-out both; }
	@keyframes chart-in { from { stroke-dashoffset: 600; opacity: 0; } to { stroke-dashoffset: 0; opacity: .75; } }
}

/* FluxCP search forms and small controls inside pages */
.search-form { display: none; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
.search-form p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0 0 .6rem; font-size: .875rem; color: var(--faint); }
.search-form label { color: var(--muted); font: 600 .8125rem/1 var(--ui); letter-spacing: .04em; }
.inner-panel .search-form input[type=text], .inner-panel .search-form select { width: auto; min-width: 9rem; max-width: 16rem; padding: .45rem .55rem; }
.toggler { margin: -.25rem 0 1rem; font: 600 .875rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.inner-panel select, .inner-panel input[type=text]:not(.form input) { font: inherit; color: #fff; background: #0A0F17; border: 1px solid var(--line-2); border-radius: 4px; padding: .4rem .55rem; color-scheme: dark; }
.inner-panel input[type=submit], .inner-panel input[type=button], .inner-panel button:not(.button):not(.nav-button) {
	font: 700 .8125rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-hi);
	background: transparent; border: 1px solid rgba(201, 162, 91, .55); border-radius: 4px; padding: .55rem .9rem; cursor: pointer;
}
.inner-panel input[type=submit]:hover, .inner-panel button:not(.button):hover { color: #fff; border-color: var(--brass-hi); }
/* FluxCP pads rankings with empty rows: hide them */
.horizontal-table tr:has(td:nth-child(2):empty), .horizontal-table tr:has(> td:only-child:empty) { display: none; }

/* WoE page */
.realm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.realm-card { background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.1rem; }
.realm-card h2 { font: 400 1.2rem/1.2 var(--display) !important; color: #F1ECE0; margin: 0 0 .6rem !important; }
.realm-card ul { list-style: none; margin: 0; padding: 0; }
.realm-card li { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .65rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.c-name { color: #E7EBF1; }
.c-guild { font: 600 .875rem/1 var(--ui); color: var(--brass-hi); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.info-list { margin: 0; }
.info-list > div { padding: .6rem 0; border-top: 1px solid var(--line); }
.info-list dt { font: 600 .75rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: .2rem; }
.info-list dd { margin: 0; color: #E7EBF1; }