/* Generals Remake — players' portal. The game's main menu (MENU2, ShellTheme/ShellSkin): a dark war room in warm
   amber light, embers in the air, steel plates in bevelled gold trim with cut corners that glow molten under the mouse,
   condensed capitals with wide tracking, a gold title over a thin gold rule ending in a diamond. */
@font-face {
	font-family: "Vazirmatn";
	src: url("fonts/Vazirmatn-wght.woff2") format("woff2-variations"), url("fonts/Vazirmatn-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

/* The molten heat of a plate (0 cold steel, 1 under the mouse): registered so it can ease in and out. */
@property --heat {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

:root {
	/* ShellTheme (Modern): Ink, PanelColor, Steel (the bronze line), SteelBright (molten), Gold, GoldDim, Text, TextDim, Hilite */
	--ink: #030304;
	--bg: #060505;
	--glass: rgba(6, 5, 5, .9);
	--bronze: #8f7345;
	--molten: #ff8f29;
	--molten-deep: #ff5c08;
	--gold: #facc73;
	--gold-dim: #b39157;
	--gold-hi: #ffeba8;
	--hot: #ffdb99;
	--text: #f2f0e8;
	--text-dim: #bdbab3;
	--text-off: #8f8b82;
	--danger: #f2543d;
	--ok: #9bd16a;
	--info: #7fb3e0;
	--field: #0b0c0e;
	--field-hot: #1c1109;
	--gold-ramp: linear-gradient(180deg, #ffeba8 0%, #e2ae55 22%, #a87732 52%, #5e3f17 72%, #c99442 100%);
	/* Bahnschrift is the game's own face (Windows ships it: nothing to download); condensed system faces elsewhere. */
	--display: "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, "Vazirmatn", sans-serif;
	--body: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
	--mono: Consolas, "Courier New", monospace;
	--track: .14em;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	font: 400 15px/1.7 var(--body);
	overflow-x: hidden;
}
html[lang="en"] body { line-height: 1.6; }

/* Backdrop: the war room, deep in shadow, warm light from above. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 143, 41, .1), transparent 70%),
		radial-gradient(ellipse at 50% 120%, rgba(255, 92, 8, .08), transparent 60%),
		linear-gradient(180deg, rgba(6, 5, 5, .5), rgba(6, 5, 5, .78) 50%, rgba(6, 5, 5, .93)),
		url("img/backdrop.jpg") center / cover no-repeat,
		var(--bg);
}
#embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--hot); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}
img { max-width: 100%; height: auto; }
bdi, .ltr { direction: ltr; unicode-bidi: isolate; }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--text-off); }
.hidden { display: none !important; }
::selection { background: rgba(250, 204, 115, .35); color: #fff; }

h1, h2, h3 {
	font-family: var(--display);
	font-weight: 600;
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: var(--track);
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0 0 .5em;
	color: var(--gold);
	text-shadow: 0 0 18px rgba(255, 143, 41, .18), 0 2px 0 rgba(0, 0, 0, .6);
}
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3 { font-family: var(--body); font-weight: 800; font-stretch: normal; letter-spacing: 0; line-height: 1.45; }
h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 19px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
main { flex: 1; padding: 34px 0 56px; overflow-x: clip; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stack > * + * { margin-top: 20px; }
.narrow { max-width: 520px; margin-inline: auto; }

/* ---------- Header: a strip of dark glass over a thin gold rule ---------- */
.top {
	position: sticky;
	top: 0;
	z-index: 20;
	background: linear-gradient(180deg, rgba(10, 9, 9, .94), rgba(6, 5, 5, .86));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.top::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold) 50%, var(--gold-dim) 82%, transparent);
	box-shadow: 0 0 10px rgba(255, 143, 41, .45);
}
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 66px; flex-wrap: wrap; padding-block: 6px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none !important; }
.brand img { width: 62px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85)) drop-shadow(0 0 10px rgba(255, 143, 41, .2)); }
.brand span {
	font: 600 19px/1 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .16em;
	color: var(--text);
	direction: ltr;
}
.brand small { display: block; margin-top: 4px; font: 600 11px/1 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; letter-spacing: .22em; color: var(--molten); text-transform: uppercase; }
html[lang="fa"] .brand small { font-family: var(--body); letter-spacing: 0; font-size: 11px; direction: rtl; }
.nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-inline-start: auto; }
.nav a, .nav button {
	position: relative;
	font: 600 14px/1 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-dim);
	background: none;
	border: 0;
	padding: 12px 12px;
	cursor: pointer;
	text-decoration: none;
	transition: color .15s, text-shadow .15s;
}
html[lang="fa"] .nav a, html[lang="fa"] .nav button { font: 600 14px/1 var(--body); letter-spacing: 0; }
.nav a:hover, .nav button:hover { color: var(--hot); text-shadow: 0 0 12px rgba(255, 143, 41, .6); text-decoration: none; }
.nav a.on { color: var(--gold); }
.nav a.on::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background: var(--gold);
	transform: rotate(45deg);
	box-shadow: 0 0 8px var(--molten);
}
.nav .who { color: var(--text-off); font-size: 13px; padding: 0 8px; }
.nav .who b { color: var(--gold); font-weight: 600; }
.nav .lang, .nav .cta {
	margin-inline-start: 6px;
	padding: 9px 14px;
	color: var(--gold);
	border: 1px solid rgba(179, 145, 87, .75);
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), #101012;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.nav .cta { color: #fff3d6; border-color: var(--gold); background: linear-gradient(0deg, rgba(255, 92, 8, .45), rgba(255, 143, 41, .08) 70%), #17110b; }
.nav .lang:hover, .nav .cta:hover { border-color: var(--gold-hi); }
.nav .lang:focus-visible, .nav .cta:focus-visible { outline: none; border-color: var(--gold-hi); box-shadow: inset 0 0 0 2px var(--gold); }
.nav .lang:lang(fa), .nav .lang[lang="fa"] { font-family: var(--body); letter-spacing: 0; }
.nav .lang[lang="en"] { font-family: var(--display); letter-spacing: .14em; }

/* ---------- Frames: dark glass in a band of steel between two gold lines, two big corners cut (ShellSkin "Panel") ---------- */
.panel {
	--b: 20px;
	--s: 4px;
	position: relative;
	isolation: isolate;
	padding: 24px 26px;
	min-width: 0;
}
.panel::before, .panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.panel::before {
	border: 7px solid transparent;
	background:
		radial-gradient(120% 70% at 50% -10%, rgba(255, 143, 41, .07), transparent 60%) padding-box,
		linear-gradient(180deg, rgba(17, 16, 16, .93), rgba(6, 6, 7, .95)) padding-box,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px) border-box,
		linear-gradient(180deg, #3a3d44, #1c1d22 50%, #2d3036) border-box;
	clip-path: polygon(var(--s) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--s));
}
.panel::after {
	background: var(--gold-ramp);
	clip-path: polygon(evenodd,
		var(--s) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--s), var(--s) 0,
		calc(var(--s) + .62px) 1.5px, calc(100% - var(--b) - .62px) 1.5px, calc(100% - 1.5px) calc(var(--b) + .62px), calc(100% - 1.5px) calc(100% - var(--s) - .62px), calc(100% - var(--s) - .62px) calc(100% - 1.5px), calc(var(--b) + .62px) calc(100% - 1.5px), 1.5px calc(100% - var(--b) - .62px), 1.5px calc(var(--s) + .62px), calc(var(--s) + .62px) 1.5px,
		calc(var(--s) + 2.9px) 7px, calc(100% - var(--b) - 2.9px) 7px, calc(100% - 7px) calc(var(--b) + 2.9px), calc(100% - 7px) calc(100% - var(--s) - 2.9px), calc(100% - var(--s) - 2.9px) calc(100% - 7px), calc(var(--b) + 2.9px) calc(100% - 7px), 7px calc(100% - var(--b) - 2.9px), 7px calc(var(--s) + 2.9px), calc(var(--s) + 2.9px) 7px,
		calc(var(--s) + 3.31px) 8px, calc(100% - var(--b) - 3.31px) 8px, calc(100% - 8px) calc(var(--b) + 3.31px), calc(100% - 8px) calc(100% - var(--s) - 3.31px), calc(100% - var(--s) - 3.31px) calc(100% - 8px), calc(var(--b) + 3.31px) calc(100% - 8px), 8px calc(100% - var(--b) - 3.31px), 8px calc(var(--s) + 3.31px), calc(var(--s) + 3.31px) 8px);
	opacity: .9;
}
/* Right to left the big cuts move with the text (ShellTheme.Plate). */
html[dir="rtl"] .panel::before, html[dir="rtl"] .panel::after,
html[dir="rtl"] .stat::before, html[dir="rtl"] .stat::after,
html[dir="rtl"] .hazard::after, html[dir="rtl"] .screen::after { transform: scaleX(-1); }

/* A panel's title: gold capitals over a thin gold rule that ends in a diamond (the main menu's "MAIN MENU"). */
.panel-h {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 0 0 12px;
	background: linear-gradient(90deg, rgba(179, 145, 87, .2), var(--gold-dim) 40%, var(--gold) calc(100% - 14px), transparent calc(100% - 14px)) bottom / 100% 1px no-repeat;
}
html[dir="rtl"] .panel-h { background: linear-gradient(270deg, rgba(179, 145, 87, .2), var(--gold-dim) 40%, var(--gold) calc(100% - 14px), transparent calc(100% - 14px)) bottom / 100% 1px no-repeat; }
.panel-h::after {
	content: "";
	position: absolute;
	inset-inline-end: 1px;
	bottom: -3px;
	width: 7px;
	height: 7px;
	background: var(--gold);
	transform: rotate(45deg);
	box-shadow: 0 0 8px var(--molten);
}
.panel-h h2, .panel-h h3 { margin: 0; font-size: 20px; color: var(--gold); }
html[lang="fa"] .panel-h h2, html[lang="fa"] .panel-h h3 { font-size: 18px; }
.panel-h .tag, .panel-h .tag-btn { margin-inline-start: auto; }

/* ---------- Buttons: brushed gunmetal plates in gold trim, a gold diamond at the end; molten under the mouse ---------- */
.btn {
	--b: 12px;
	--s: 2px;
	--heat: 0;
	--fg: var(--text);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 44px 10px 26px;
	font: 600 17px/1.2 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--fg);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: --heat .28s ease, color .2s;
	filter: drop-shadow(0 0 calc(var(--heat) * 12px) rgb(255 110 20 / calc(var(--heat) * .55)));
}
html[lang="fa"] .btn { font: 700 16px/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.btn::before, .btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.btn::before {
	background:
		radial-gradient(1.6px 1.6px at 18% 70%, rgb(255 214 140 / var(--sp)) 98%, transparent) 0 0 / 97px 41px,
		radial-gradient(1.2px 1.2px at 64% 40%, rgb(255 190 100 / var(--sp)) 98%, transparent) 0 0 / 131px 53px,
		radial-gradient(1.4px 1.4px at 40% 20%, rgb(255 236 190 / var(--sp)) 98%, transparent) 0 0 / 73px 37px,
		radial-gradient(130% 120% at 50% 135%, rgb(255 120 30 / calc(var(--heat) * .8)), transparent 62%),
		linear-gradient(0deg, rgb(255 92 8 / calc(var(--heat) * .32)), transparent 60%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #31353d 0%, #1d1f25 46%, #14151a 54%, #1f2228 100%);
	clip-path: polygon(var(--s) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--s));
}
/* The trim and the diamond (one shape: the diamond is an island inside the ring). The diamond stays at the right in both
   languages (the main menu's entries: the diamond and the text from the right edge). */
.btn::after {
	background: var(--gold-ramp);
	filter: brightness(calc(1 + var(--heat) * .45));
	clip-path: polygon(evenodd,
		var(--s) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--s), var(--s) 0,
		calc(100% - 22px) calc(50% - 4.5px), calc(100% - 17.5px) 50%, calc(100% - 22px) calc(50% + 4.5px), calc(100% - 26.5px) 50%, calc(100% - 22px) calc(50% - 4.5px), var(--s) 0,
		calc(var(--s) + .41px) 1px, calc(100% - var(--b) - .41px) 1px, calc(100% - 1px) calc(var(--b) + .41px), calc(100% - 1px) calc(100% - var(--s) - .41px), calc(100% - var(--s) - .41px) calc(100% - 1px), calc(var(--b) + .41px) calc(100% - 1px), 1px calc(100% - var(--b) - .41px), 1px calc(var(--s) + .41px), calc(var(--s) + .41px) 1px);
}
html[dir="rtl"] .btn::before { transform: scaleX(-1); }
.btn { --sp: clamp(0, (var(--heat) - .6) * 2.2, 1); }
html[dir="rtl"] .btn::after {
	clip-path: polygon(evenodd,
		calc(100% - var(--s)) 0, var(--b) 0, 0 var(--b), 0 calc(100% - var(--s)), var(--s) 100%, calc(100% - var(--b)) 100%, 100% calc(100% - var(--b)), 100% var(--s), calc(100% - var(--s)) 0,
		calc(100% - 22px) calc(50% - 4.5px), calc(100% - 17.5px) 50%, calc(100% - 22px) calc(50% + 4.5px), calc(100% - 26.5px) 50%, calc(100% - 22px) calc(50% - 4.5px), calc(100% - var(--s)) 0,
		calc(100% - var(--s) - .41px) 1px, calc(var(--b) + .41px) 1px, 1px calc(var(--b) + .41px), 1px calc(100% - var(--s) - .41px), calc(var(--s) + .41px) calc(100% - 1px), calc(100% - var(--b) - .41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--b) - .41px), calc(100% - 1px) calc(var(--s) + .41px), calc(100% - var(--s) - .41px) 1px);
}
.btn:hover, .btn:focus-visible { --heat: 1; color: var(--hot); }
.btn:hover::before, .btn:focus-visible::before { animation: sparks 1.6s linear infinite; }
.btn:active { --heat: .75; transform: translateY(1px); }
.btn:active::before { filter: brightness(.8); }
.btn[disabled], .btn[disabled]:hover { --heat: 0; filter: grayscale(1) brightness(.6); cursor: not-allowed; animation: none; }
@keyframes sparks {
	from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
	to { background-position: 6px -41px, -4px -53px, 3px -37px, 0 0, 0 0, 0 0, 0 0; }
}
/* The chosen entry: always a little molten (the main menu's lit SOLO PLAY). */
.btn-amber { --heat: .55; --fg: #fff3d6; }
.btn-amber:hover, .btn-amber:focus-visible { --heat: 1.15; color: #fff; }
.btn-olive { --fg: var(--text); }
.btn-red { --fg: #ffcfc4; }
.btn-red::after { background: linear-gradient(180deg, #ffb3a1, #c4442b 40%, #6b1d10 75%, #d0573e); }
.btn-red::before {
	background:
		radial-gradient(130% 120% at 50% 135%, rgb(242 84 61 / calc(var(--heat) * .7)), transparent 62%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #33282a 0%, #201719 46%, #171113 54%, #22191b 100%);
}
.btn-red:hover::before, .btn-red:focus-visible::before { animation: none; }
.btn-red:hover { color: #fff; filter: drop-shadow(0 0 10px rgba(242, 84, 61, .5)); }
.btn-sm { --b: 8px; min-height: 36px; padding: 6px 38px 6px 16px; font-size: 14px; }
html[lang="fa"] .btn-sm { font-size: 13.5px; }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Hero: the war room (its loop on wide screens), the main menu's panel at the right ---------- */
.hero {
	position: relative;
	min-height: min(calc(100svh - 66px), 840px);
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* Under the embers (-1), over the page's backdrop (-3). */
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.hero-media img, .hero-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 50%;
}
.hero-media video { opacity: 0; transition: opacity 1.4s ease; }
.hero-media video.on { opacity: 1; }
.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent 38%, rgba(4, 3, 3, .55) 64%, rgba(4, 3, 3, .8)),
		linear-gradient(0deg, var(--bg) 0%, rgba(6, 5, 5, .4) 22%, transparent 45%),
		linear-gradient(180deg, rgba(6, 5, 5, .6), transparent 18%),
		radial-gradient(ellipse at 34% 60%, transparent 40%, rgba(0, 0, 0, .35));
}
.hero > .wrap { position: relative; z-index: 1; display: flex; padding-block: 40px 84px; }
.hero-panel {
	--b: 26px;
	--s: 5px;
	width: min(100%, 500px);
	margin-left: auto;
	margin-right: 0;
	padding: 30px 34px 32px;
	animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-panel .panel-h { margin-bottom: 22px; }
.kicker {
	display: block;
	font: 600 15px/1.2 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	text-shadow: 0 0 14px rgba(255, 143, 41, .35);
}
html[lang="fa"] .kicker { font: 700 15px/1.4 var(--body); letter-spacing: 0; }
.hero h1 { font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 14px; color: var(--text); }
.hero h1 em { font-style: normal; color: var(--gold); text-shadow: 0 0 22px rgba(255, 143, 41, .45); }
.hero p.lead { font-size: 16px; color: var(--text-dim); margin: 0 0 24px; }
.hero .actions { flex-direction: column; align-items: stretch; gap: 12px; }
.hero .actions .btn { justify-content: flex-end; padding-right: 46px; min-height: 54px; font-size: 19px; }
html[dir="rtl"] .hero .actions .btn { justify-content: flex-start; }
html[lang="fa"] .hero .actions .btn { font-size: 17px; }
#signup-state:empty { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Notices ---------- */
.hazard {
	--b: 12px;
	position: relative;
	isolation: isolate;
	padding: 15px 20px 15px 20px;
	padding-inline-start: 62px;
	background: linear-gradient(90deg, rgba(255, 143, 41, .08), transparent 60%), rgba(12, 10, 9, .9);
	clip-path: polygon(0 0, calc(100% - var(--b)) 0, 100% var(--b), 100% 100%, var(--b) 100%, 0 calc(100% - var(--b)));
}
html[dir="rtl"] .hazard {
	background: linear-gradient(270deg, rgba(255, 143, 41, .08), transparent 60%), rgba(12, 10, 9, .9);
	clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
}
.hazard::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 42px;
	background: repeating-linear-gradient(-45deg, var(--molten) 0 8px, #140d06 8px 16px);
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, .8);
	opacity: .85;
}
.hazard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, var(--gold-dim), #5e3f17);
	clip-path: polygon(evenodd, 0 0, calc(100% - var(--b)) 0, 100% var(--b), 100% 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 0,
		1px 1px, calc(100% - var(--b) - .41px) 1px, calc(100% - 1px) calc(var(--b) + .41px), calc(100% - 1px) calc(100% - 1px), calc(var(--b) + .41px) calc(100% - 1px), 1px calc(100% - var(--b) - .41px), 1px 1px);
}
.hazard b { color: var(--gold); display: block; font: 600 16px/1.3 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; letter-spacing: .12em; text-transform: uppercase; }
html[lang="fa"] .hazard b { font: 800 15px/1.5 var(--body); letter-spacing: 0; }
.hazard p { margin: 2px 0 0; color: var(--text-dim); }
.hazard.info::before { background: repeating-linear-gradient(-45deg, var(--info) 0 8px, #0a1016 8px 16px); opacity: .7; }
.hazard.red::before { background: repeating-linear-gradient(-45deg, var(--danger) 0 8px, #170807 8px 16px); }
.hazard.red b { color: #ffb9a6; }

/* Maintenance banner under the header, on every page: a molten warning strip. */
.maint {
	position: relative;
	z-index: 19;
	background:
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, .22) 0 10px, transparent 10px 20px),
		linear-gradient(180deg, #9a3410, #5e1a08);
	box-shadow: inset 0 -1px 0 var(--molten), 0 6px 18px rgba(0, 0, 0, .55);
	color: #fde9df;
	font-size: 14px;
}
.maint .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-block: 10px; }
.maint b { font: 600 15px/1.3 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; letter-spacing: .14em; color: var(--hot); text-transform: uppercase; }
html[lang="fa"] .maint b { font-family: var(--body); font-weight: 900; letter-spacing: 0; }
.maint b::before { content: "\26A0"; margin-inline-end: 8px; }
.maint-note { flex-basis: 100%; color: #fff; font-weight: 600; unicode-bidi: plaintext; text-align: start; overflow-wrap: anywhere; }

/* ---------- Readouts ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: -70px; position: relative; z-index: 2; }
.stat {
	--b: 14px;
	--s: 2px;
	position: relative;
	isolation: isolate;
	padding: 16px 18px 14px;
	min-width: 0;
}
.stat::before, .stat::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stat::before {
	background: linear-gradient(180deg, rgba(255, 143, 41, .07), transparent 50%), linear-gradient(180deg, rgba(20, 19, 20, .94), rgba(7, 7, 8, .96));
	clip-path: polygon(var(--s) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--s));
}
.stat::after {
	background: var(--gold-ramp);
	opacity: .8;
	clip-path: polygon(evenodd,
		var(--s) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--s), var(--s) 0,
		calc(var(--s) + .41px) 1px, calc(100% - var(--b) - .41px) 1px, calc(100% - 1px) calc(var(--b) + .41px), calc(100% - 1px) calc(100% - var(--s) - .41px), calc(100% - var(--s) - .41px) calc(100% - 1px), calc(var(--b) + .41px) calc(100% - 1px), 1px calc(100% - var(--b) - .41px), 1px calc(var(--s) + .41px), calc(var(--s) + .41px) 1px);
}
.stat .v { font: 600 34px/1.1 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; letter-spacing: .04em; color: var(--gold); text-shadow: 0 0 16px rgba(255, 143, 41, .4); overflow-wrap: anywhere; }
html[lang="fa"] .stat .v { font-family: var(--body); font-weight: 800; font-size: 30px; }
.stat .k { font: 600 13px/1.3 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; color: var(--text-dim); letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
html[lang="fa"] .stat .k { font: 500 13px/1.5 var(--body); letter-spacing: 0; }
.stat .s { font-size: 12px; color: var(--text-off); }
.stat.live .v::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-inline-start: 10px;
	vertical-align: middle;
	background: var(--ok);
	transform: rotate(45deg);
	box-shadow: 0 0 10px var(--ok);
	animation: blink 1.6s infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Section titles: gold capitals, a gold rule to a diamond ---------- */
.section-title { display: flex; align-items: center; gap: 14px; margin: 52px 0 20px; }
.section-title h2 { margin: 0; }
.section-title::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-dim) 60%, rgba(179, 145, 87, .15)); box-shadow: 0 0 8px rgba(255, 143, 41, .35); }
html[dir="rtl"] .section-title::after { background: linear-gradient(270deg, var(--gold), var(--gold-dim) 60%, rgba(179, 145, 87, .15)); }
.section-title::before { content: ""; order: 2; width: 7px; height: 7px; flex: none; background: var(--gold-dim); transform: rotate(45deg); }

/* ---------- Wall screens: battle footage in glowing monitors ---------- */
.screen {
	--b: 14px;
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
	clip-path: polygon(0 0, calc(100% - var(--b)) 0, 100% var(--b), 100% 100%, var(--b) 100%, 0 calc(100% - var(--b)));
}
html[dir="rtl"] .screen { clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b)) 100%, 0 100%, 0 var(--b)); }
.screen img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); transition: transform .8s ease, filter .4s; }
.screen::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
		radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)),
		linear-gradient(180deg, rgba(255, 170, 80, .1), transparent 30%, transparent 70%, rgba(0, 0, 0, .5));
}
.screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: var(--gold-ramp);
	clip-path: polygon(evenodd, 0 0, calc(100% - var(--b)) 0, 100% var(--b), 100% 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 0,
		1.5px 1.5px, calc(100% - var(--b) - .62px) 1.5px, calc(100% - 1.5px) calc(var(--b) + .62px), calc(100% - 1.5px) calc(100% - 1.5px), calc(var(--b) + .62px) calc(100% - 1.5px), 1.5px calc(100% - var(--b) - .62px), 1.5px 1.5px);
}
.screen figcaption {
	position: absolute;
	z-index: 3;
	inset-inline-start: 16px;
	bottom: 12px;
	font: 600 15px/1.2 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold);
	text-shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, .8);
}
html[lang="fa"] .screen figcaption { font: 700 14px/1.4 var(--body); letter-spacing: 0; }
.screen figcaption::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 9px; vertical-align: 2px; background: var(--molten); transform: rotate(45deg); box-shadow: 0 0 8px var(--molten); }
.screen:hover img { transform: scale(1.04); filter: saturate(1.15) contrast(1.08) brightness(1.06); }
.front { display: grid; gap: 16px; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; }
.front .screen:first-child { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.front-glow { position: relative; }
.front-glow::before { content: ""; position: absolute; inset: -40px -20px; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(255, 143, 41, .12), transparent 65%); pointer-events: none; }

/* Faction cards: a screen of the army in battle over its name */
.faction { padding: 12px 12px 22px; text-align: start; }
.faction .screen { margin-bottom: 16px; }
.faction h3 { margin: 0 12px 4px; font-size: 22px; }
.faction p { margin: 0 12px; color: var(--text-dim); font-size: 14.5px; }
.faction.usa h3 { color: #a9cff2; }
.faction.china h3 { color: #ff9a78; }
.faction.gla h3 { color: var(--gold); }

.mode { display: flex; gap: 18px; align-items: flex-start; }
.mode .ico {
	flex: none;
	position: relative;
	width: 46px;
	height: 46px;
	margin: 4px 4px 0;
	display: grid;
	place-items: center;
	font: 600 16px/1 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .06em;
	color: var(--gold);
	z-index: 0;
}
.mode .ico::before {
	content: "";
	position: absolute;
	inset: 4px;
	z-index: -1;
	transform: rotate(45deg);
	border: 1px solid var(--gold);
	background: radial-gradient(circle at 50% 100%, rgba(255, 92, 8, .5), transparent 70%), #121115;
	box-shadow: 0 0 14px rgba(255, 143, 41, .3), inset 0 0 0 3px #0a0a0c, inset 0 0 0 4px rgba(179, 145, 87, .6);
}
.mode h3 { margin: 0 0 4px; font-size: 19px; color: var(--gold); }
html[lang="fa"] .mode h3 { font-size: 17px; }
.mode p { margin: 0; color: var(--text-dim); font-size: 14.5px; }

/* The leaderboard over the war table's map */
.holo { position: relative; padding: 4px 0 8px; }
.holo::before {
	content: "";
	position: absolute;
	inset: -60px -16px -40px;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, var(--bg), transparent 25%, transparent 75%, var(--bg)),
		linear-gradient(90deg, var(--bg), transparent 20%, transparent 80%, var(--bg)),
		url("img/holo-table.webp") center 60% / cover no-repeat;
	opacity: .55;
}
.holo .panel::before { background:
		radial-gradient(120% 70% at 50% -10%, rgba(255, 143, 41, .08), transparent 60%) padding-box,
		linear-gradient(180deg, rgba(14, 12, 11, .86), rgba(6, 6, 7, .9)) padding-box,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px) border-box,
		linear-gradient(180deg, #3a3d44, #1c1d22 50%, #2d3036) border-box; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table.board { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.board th {
	font: 600 13px/1.2 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-dim);
	text-align: start;
	padding: 8px 12px;
	border-bottom: 1px solid var(--gold-dim);
	white-space: nowrap;
}
html[lang="fa"] table.board th { font: 600 12.5px/1.4 var(--body); letter-spacing: 0; }
table.board td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 235, 168, .07); white-space: nowrap; }
table.board tbody tr { transition: background .15s; }
table.board tbody tr:hover { background: linear-gradient(90deg, rgba(255, 92, 8, .14), rgba(255, 143, 41, .04)); }
table.board td.num, table.board th.num { text-align: end; font-variant-numeric: tabular-nums; }
table.board .rank { width: 56px; font: 600 18px/1 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; color: var(--text-off); }
table.board tr.top1 .rank { color: var(--gold); text-shadow: 0 0 10px rgba(255, 143, 41, .6); }
table.board tr.top2 .rank { color: #dfe3e8; }
table.board tr.top3 .rank { color: #e0a072; }
table.board .rating { color: var(--gold); font-weight: 700; }
table.board tr.me td { background: rgba(255, 143, 41, .1); }
.pname { font-weight: 600; }
.pname small { color: var(--text-off); font-weight: 400; margin-inline-start: 6px; }
.medal { display: inline-block; width: 10px; height: 10px; margin-inline-start: 10px; vertical-align: 1px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--molten); }

/* ---------- Forms: near-black steel fields, a bronze line, gold under focus (ShellTheme LineEdit) ---------- */
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font: 600 14px/1.3 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
html[lang="fa"] .field > span { font: 600 13.5px/1.5 var(--body); letter-spacing: 0; text-transform: none; }
.field small { display: block; color: var(--text-off); font-size: 12.5px; margin-top: 6px; }
input[type=text], input[type=password], input[type=email], input[type=url], textarea, select {
	--line: var(--bronze);
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	font: 400 16px/1.3 var(--body);
	color: var(--text);
	caret-color: var(--gold);
	background:
		linear-gradient(225deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)) top right / 9px 9px no-repeat,
		linear-gradient(45deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)) bottom left / 9px 9px no-repeat,
		linear-gradient(180deg, #08090b, var(--field));
	border: 1px solid var(--line);
	border-radius: 0;
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
	outline: none;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
	transition: border-color .15s, background-color .15s;
}
html[dir="rtl"] input[type=text], html[dir="rtl"] input[type=password], html[dir="rtl"] input[type=email], html[dir="rtl"] input[type=url], html[dir="rtl"] textarea, html[dir="rtl"] select {
	background:
		linear-gradient(135deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)) top left / 9px 9px no-repeat,
		linear-gradient(315deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)) bottom right / 9px 9px no-repeat,
		linear-gradient(180deg, #08090b, var(--field));
	clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
input:hover, textarea:hover, select:hover { --line: var(--gold-dim); }
input:focus, textarea:focus, select:focus, input:focus-visible, textarea:focus-visible, select:focus-visible {
	--line: var(--gold);
	outline: none;
	background-color: var(--field-hot);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), inset 0 -10px 18px -12px rgba(255, 92, 8, .45);
}
input::placeholder, textarea::placeholder { color: #6d6a63; }
input.ltr-in { direction: ltr; text-align: left; }
html[dir="rtl"] input.ltr-in::placeholder { text-align: right; }
input[disabled], textarea[disabled], select[disabled] { opacity: .55; }

.msg { position: relative; padding: 11px 14px; margin: 0 0 18px; font-size: 14px; border-inline-start: 3px solid; background: rgba(0, 0, 0, .45); }
.msg.err { border-color: var(--danger); color: #ffc9bb; background: linear-gradient(90deg, rgba(140, 35, 15, .4), rgba(0, 0, 0, .3)); }
.msg.ok { border-color: var(--ok); color: #daf0c4; background: linear-gradient(90deg, rgba(60, 100, 30, .38), rgba(0, 0, 0, .3)); }
.msg.warn { border-color: var(--molten); color: #ffe3b8; background: linear-gradient(90deg, rgba(130, 70, 10, .38), rgba(0, 0, 0, .3)); }
html[dir="rtl"] .msg.err, html[dir="rtl"] .msg.ok, html[dir="rtl"] .msg.warn { background-image: none; }
.msg:empty { display: none; }

/* ---------- Badges ---------- */
.badge {
	display: inline-block;
	padding: 3px 10px 2px;
	font: 600 12.5px/1.4 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 1px solid;
	clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
	white-space: nowrap;
}
html[lang="fa"] .badge { font: 600 12px/1.5 var(--body); letter-spacing: 0; }
.badge.active, .badge.win, .badge.rs-fixed { color: #cdeeae; border-color: #5b8a35; background: rgba(70, 120, 40, .3); }
.badge.over, .badge.rs-open { color: var(--hot); border-color: #a77a22; background: rgba(150, 95, 20, .3); }
.badge.blocked, .badge.loss { color: #ffbcaa; border-color: #a33e25; background: rgba(140, 40, 20, .32); }
.badge.neutral, .badge.rs-wontfix, .badge.rs-duplicate { color: var(--text-dim); border-color: #4a4740; background: rgba(255, 255, 255, .04); }
.badge.rs-new { color: #cfe3f5; border-color: #3f6f98; background: rgba(50, 100, 150, .3); }
.badge.channel { color: #ffd0b8; border-color: #a35a25; background: rgba(150, 70, 20, .35); }
.tag {
	display: inline-block;
	font: 700 12px/1.5 var(--display);
	font-stretch: 87.5%; font-variation-settings: "wdth" 87.5;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #1d1305;
	background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, #d09a45);
	padding: 2px 10px;
	clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
html[lang="fa"] .tag { font: 700 12px/1.6 var(--body); letter-spacing: 0; }

/* ---------- Account ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.kv dt { color: var(--text-off); font-size: 13.5px; }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.record div { text-align: center; padding: 12px 4px 10px; background: linear-gradient(180deg, rgba(255, 143, 41, .06), rgba(0, 0, 0, .4)); border-top: 1px solid var(--gold-dim); }
.record b { display: block; font: 600 28px/1.1 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 143, 41, .35); }
html[lang="fa"] .record b { font: 800 22px/1.3 var(--body); }
.record span { font-size: 12.5px; color: var(--text-off); }
.meter { height: 8px; background: #060607; border: 1px solid var(--bronze); margin: 6px 0 16px; position: relative; overflow: hidden; }
.meter i { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, #6b1a00, var(--molten-deep) 60%, var(--molten)); box-shadow: 0 0 10px var(--molten); }
.meter.full i { background: linear-gradient(90deg, #a87732, var(--gold)); }

.device {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 14px;
	align-items: center;
	padding: 12px 14px;
	margin-bottom: 10px;
	background: rgba(0, 0, 0, .4);
	border: 1px solid rgba(255, 235, 168, .07);
	border-inline-start: 3px solid #4a4740;
}
.device.active { border-inline-start-color: var(--ok); }
.device.over { border-inline-start-color: var(--molten); }
.device.blocked { border-inline-start-color: var(--danger); }
.device .name { font-weight: 700; overflow-wrap: anywhere; }
.device .meta { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-off); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.device .why { grid-column: 1 / -1; font-size: 13px; color: #ffe3b8; margin: 0; }
.device .side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.legend { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--text-off); }
.legend li { margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; }

.match { padding: 12px 0; border-bottom: 1px solid rgba(255, 235, 168, .08); }
.match:last-child { border-bottom: 0; }
.match .head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.match .mode-name { font: 600 16px/1.2 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; }
.match .when { color: var(--text-off); font-size: 12.5px; margin-inline-start: auto; }
.teams { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: 13.5px; }
.teams .team { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.teams .team > span:first-child { color: var(--gold-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; }
.teams .vs { color: var(--text-off); font-family: var(--display); }
.pl.me { color: var(--gold); font-weight: 700; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }

/* ---------- Downloads ---------- */
.build { margin-bottom: 20px; }
.build .ver { font: 600 26px/1 var(--display); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; letter-spacing: .08em; color: var(--text); direction: ltr; unicode-bidi: isolate; }
.build .facts { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--text-off); font-size: 14px; margin: 4px 0 14px; }
.build .facts b { color: var(--text); }
.build .notes { white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; background: rgba(0, 0, 0, .4); border-inline-start: 2px solid var(--gold-dim); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; color: var(--text-dim); overflow-wrap: anywhere; }
.sha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; font-size: 12px; color: var(--text-off); }
.sha code { font-family: var(--mono); color: #d6c8a6; background: rgba(0, 0, 0, .5); border: 1px solid rgba(143, 115, 69, .4); padding: 4px 8px; overflow-wrap: anywhere; word-break: break-all; direction: ltr; flex: 1 1 260px; min-width: 0; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding-inline-start: 50px; margin-bottom: 16px; min-height: 34px; color: var(--text-dim); }
.steps li::before {
	content: counter(s);
	position: absolute;
	inset-inline-start: 2px;
	top: -2px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	font: 600 16px/1 var(--display);
	color: var(--gold);
	background: radial-gradient(circle at 50% 100%, rgba(255, 92, 8, .45), transparent 70%), #121115;
	border: 1px solid var(--gold);
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
code.cmd { font-family: var(--mono); font-size: 12px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(143, 115, 69, .35); padding: 2px 6px; direction: ltr; unicode-bidi: isolate; display: inline-block; max-width: 100%; overflow-wrap: anywhere; color: #e6d9b8; }

/* ---------- Sign-in pages: the logo in the war room's light, the form in the menu's frame ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1000px; margin: 0 auto; min-height: calc(100svh - 66px - 160px); }
.auth > .panel { max-width: 480px; width: 100%; justify-self: center; }
.auth-side { position: relative; text-align: center; }
.auth-side::before { content: ""; position: absolute; inset: -10% -10%; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(255, 143, 41, .2), transparent 62%); pointer-events: none; }
.auth-side img.logo { width: min(100%, 380px); filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .85)) drop-shadow(0 0 30px rgba(255, 120, 30, .25)); animation: rise .9s ease-out both; }
.auth-side p { color: var(--text-dim); max-width: 42ch; margin: 16px auto 0; font-size: 15.5px; }
.alt { text-align: center; margin: 18px 0 0; color: var(--text-off); font-size: 14px; }

.loading { color: var(--text-off); padding: 22px 0; text-align: center; }
.loading::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 12px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--molten); animation: pulse 1s ease-in-out infinite; vertical-align: 0; }
@keyframes pulse { 50% { opacity: .2; transform: rotate(45deg) scale(.6); } }
.empty { color: var(--text-off); text-align: center; padding: 20px 10px; border: 1px dashed rgba(179, 145, 87, .3); background: rgba(0, 0, 0, .25); }

/* ---------- News ---------- */
.news-list > * + * { margin-top: 16px; }
.news-item { padding-block: 20px; }
.news-item.pinned::before { background:
		radial-gradient(120% 70% at 50% -10%, rgba(255, 143, 41, .14), transparent 60%) padding-box,
		linear-gradient(180deg, rgba(20, 16, 13, .94), rgba(7, 6, 6, .95)) padding-box,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px) border-box,
		linear-gradient(180deg, #4a3a26, #1f1a14 50%, #3a2e20) border-box; }
.news-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.news-head h3 { margin: 0; color: var(--gold); font-size: 20px; unicode-bidi: plaintext; }
.news-head time { margin-inline-start: auto; color: var(--text-off); font-size: 12.5px; }
.news-body { margin: 0; white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; color: var(--text-dim); overflow-wrap: anywhere; }
.more { text-align: end; margin: 14px 0 0; }

/* ---------- Reports ---------- */
select { min-height: 46px; appearance: none; -webkit-appearance: none; padding-inline-end: 34px; }
select { background-image:
		linear-gradient(225deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(45deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(45deg, transparent 50%, var(--gold) 50%),
		linear-gradient(180deg, #08090b, var(--field));
	background-size: 9px 9px, 9px 9px, 7px 7px, auto;
	background-position: top right, bottom left, right 14px top 50%, 0 0;
	background-repeat: no-repeat;
}
select option { background: #121214; color: var(--text); }
html[dir="rtl"] select { background-image:
		linear-gradient(135deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(315deg, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(45deg, transparent 50%, var(--gold) 50%),
		linear-gradient(180deg, #08090b, var(--field));
	background-position: top left, bottom right, left 14px top 50%, 0 0;
}
textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.tips { margin: 0; padding-inline-start: 20px; color: var(--text-dim); font-size: 14px; }
.tips li { margin-bottom: 9px; }
.tips li::marker { color: var(--gold); content: "\25C6  "; font-size: 10px; }
.report { padding: 12px 0; border-bottom: 1px solid rgba(255, 235, 168, .08); }
.report:last-child { border-bottom: 0; }
.report .head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.report .rt { font-weight: 700; unicode-bidi: plaintext; overflow-wrap: anywhere; margin-top: 4px; }
.report .when { color: var(--text-off); font-size: 12.5px; margin-inline-start: auto; }
.report .reply { margin: 8px 0 0; padding: 8px 12px; background: rgba(0, 0, 0, .4); border-inline-start: 2px solid var(--gold-dim); font-size: 14px; white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; overflow-wrap: anywhere; }
.report .reply b { display: block; color: var(--gold); font-size: 12px; }
.state-list > * + * { margin-top: 10px; }

/* ---------- Footer ---------- */
.foot { position: relative; background: linear-gradient(180deg, rgba(8, 7, 7, .92), #040404); padding: 22px 0 26px; font-size: 13.5px; color: var(--text-off); }
.foot::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim) 20%, var(--gold) 50%, var(--gold-dim) 80%, transparent); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.foot .flags { display: flex; gap: 10px; align-items: center; }
.foot .flags img { width: 54px; height: auto; opacity: .75; filter: grayscale(.2) drop-shadow(0 2px 4px #000); }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
	.hero { min-height: 0; display: block; }
	.hero-media { position: relative; height: min(62vw, 440px); }
	.hero-media img, .hero-media video { object-position: 32% 50%; }
	.hero-media::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(6, 5, 5, .2) 40%, transparent 60%), linear-gradient(180deg, rgba(6, 5, 5, .55), transparent 25%); }
	.hero > .wrap { margin-top: -90px; padding-block: 0 80px; }
	.hero-panel { width: 100%; margin: 0; }
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -50px; }
	.auth { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
	.auth-side img.logo { width: min(56%, 230px); }
	.auth-side p { display: none; }
	.front { grid-template-columns: 1fr; }
	.front .screen:first-child { grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 560px) {
	body { font-size: 14.5px; }
	main { padding-top: 22px; }
	.top .wrap { gap: 4px; min-height: 58px; }
	.brand img { width: 48px; }
	.brand span { font-size: 16px; }
	.nav { margin-inline-start: 0; width: 100%; justify-content: center; gap: 0; }
	.nav a, .nav button { padding: 10px 6px; font-size: 13px; letter-spacing: .08em; }
	.nav .lang, .nav .cta { padding: 8px 9px; margin-inline-start: 2px; }
	.nav .who { display: none; }
	.panel { --b: 14px; padding: 20px 18px; }
	.hero-panel { --b: 18px; padding: 24px 20px 24px; }
	.hero h1 { font-size: 32px; }
	.stat { padding: 12px 14px 10px; }
	.stat .v { font-size: 26px; }
	.record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.actions .btn { flex: 1 1 auto; }
	.kv { grid-template-columns: 1fr; gap: 0; }
	.field-row { grid-template-columns: 1fr; }
	.kv dd { margin-bottom: 8px; }
	.device { grid-template-columns: 1fr; }
	.device .side { justify-content: flex-start; }
	table.board .hide-sm { display: none; }
	.section-title { margin-top: 40px; }
	.faction { padding: 10px 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.hero-media video { display: none; }
}