/* Sero website theme.
   Shared by every page, so a change here lands everywhere.

   The two fonts are the first thing in the file on purpose. Swap either line and the
   whole site follows; nothing below hardcodes a font family. */

:root {
	--font-display: "Arial Black", "Arial Bold", "Helvetica Black", Gadget, sans-serif;
	--font-body: "Verdana Pro Bold", "Verdana Pro", Verdana, Geneva, Tahoma, sans-serif;

	/* Colours lifted from the game's GameColors.cs and the RoundedRect material,
	   so the site and the app stay the same product. */
	--bg: #161616;        /* identical to the logo PNG's background, so it sits seamlessly */
	--panel: #202020;     /* RoundedRect _FillColor */
	--border: #504e4d;    /* RoundedRect _BorderColor */
	--text: #ffffff;
	--text-mute: #888888;
	--accent: #37d6f5;    /* GameColors.Selected */
	--accent-2: #338cf2;  /* GameColors.TabSelected */
	--warn: #ffd24a;
	/* Pink-purple rather than Discord's own blue-purple, so it sits closer to the magenta
	   cells in the game than to Discord's branding. */
	--discord-bg: #8d2aa9;   /* the Discord tile's pink-purple fill */
	--discord-edge: #e368f0; /* brighter pink for its border */
	--radius: 25px;       /* the app's card radius */
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	/* The bottom gap used to be 80px, which stacked with the footer's own top margin into
	   roughly 160px of empty space after the last card. On a phone that reads as the end of
	   the page and people stop scrolling before the footer. Kept small here, and the footer
	   provides its own breathing room. env() covers the home-bar area on newer iPhones. */
	padding: 0 20px calc(32px + env(safe-area-inset-bottom, 0px));
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.75;
	/* Verdana Pro Bold is a bold face, so the body would otherwise read as shouting.
	   Normal weight lets the browser pick the lightest cut available in the stack. */
	font-weight: normal;
}

.wrap {
	max-width: 820px;
	margin: 0 auto;
}

/* ---------- header ---------- */

header {
	text-align: center;
	padding: 48px 0 8px;
}

header img {
	width: 140px;
	height: 140px;
	display: inline-block;
	vertical-align: middle;
	/* The source PNG is a hard square. 15% matches the rounding baked into favicon.png so the
	   tab icon and the page logo are the same shape. */
	border-radius: 15%;
}

nav {
	margin-top: 20px;
	font-size: 14px;
}

nav a {
	color: var(--text-mute);
	text-decoration: none;
	margin: 0 10px;
	display: inline-block;
	padding: 4px 0;
}

nav a:hover,
nav a:focus {
	color: var(--accent);
}

nav a[aria-current="page"] {
	color: var(--text);
}

/* ---------- type ---------- */

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: normal; /* Arial Black is already the heaviest cut; bolding it smears on some renderers */
	line-height: 1.2;
	letter-spacing: -0.01em;
}

h1 {
	font-size: 34px;
	margin: 32px 0 8px;
	text-align: center;
}

h2 {
	font-size: 22px;
	margin: 40px 0 12px;
}

h3 {
	font-size: 17px;
	margin: 26px 0 8px;
	color: var(--accent);
}

.sub {
	text-align: center;
	color: var(--text-mute);
	font-size: 14px;
	margin: 0 0 40px;
}

p {
	margin: 0 0 16px;
}

a {
	color: var(--accent);
}

a:hover,
a:focus {
	color: var(--accent-2);
}

strong {
	color: var(--text);
}

ul {
	margin: 0 0 16px;
	padding-left: 22px;
}

li {
	margin-bottom: 8px;
}

/* ---------- cards ---------- */

.card {
	background: var(--panel);
	border: 3px solid var(--border);
	border-radius: var(--radius);
	padding: 24px 28px;
	margin: 0 0 24px;
}

.card h2:first-child,
.card h3:first-child {
	margin-top: 0;
}

.card.accent {
	border-color: var(--accent);
}

.card.warn {
	border-color: var(--warn);
}

.card.warn h2,
.card.warn h3 {
	color: var(--warn);
}

/* Numbered step list for the deletion instructions. The steps are the reason
   people land on that page, so they get their own treatment rather than a plain ol. */
ol.steps {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
}

ol.steps li {
	counter-increment: step;
	position: relative;
	padding-left: 46px;
	margin-bottom: 14px;
}

ol.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--bg);
	font-family: var(--font-display);
	font-size: 15px;
	line-height: 30px;
	text-align: center;
}

/* ---------- landing page ---------- */

/* Landing page only. The icon is itself a wordmark reading "Sero", so a "Sero.io" heading beside
   it just said the name twice. The image IS the h1 here, carrying the name in its alt text, which
   keeps the heading for search engines and screen readers without repeating it on screen. The
   other pages keep the stacked logo-then-nav header. */
.hero {
	display: flex;
	justify-content: center;
	padding: 36px 0 16px;
}

.hero h1 {
	margin: 0;
}

.hero img {
	width: 108px;
	height: 108px;
	/* Block kills the few px of descender space an inline image leaves underneath it. */
	display: block;
}

@media (min-width: 620px) {
	.hero img {
		width: 128px;
		height: 128px;
	}
}

.intro {
	text-align: center;
	font-size: 18px;
	color: var(--text-mute);
	max-width: 560px;
	margin: 0 auto 40px;
}

.links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 620px) {
	.links {
		grid-template-columns: 1fr 1fr;
	}
}

/* Flex rather than block so the text sits centred in a tile that is taller than its content.
   Keep the tile count even: an odd one out stretches across the full row and reads as a
   mistake rather than a design. */
.links a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 124px;
	background: var(--panel);
	border: 3px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 24px;
	text-decoration: none;
	color: var(--text);
}

.links a:hover,
.links a:focus {
	border-color: var(--accent);
}

.links .t {
	font-family: var(--font-display);
	font-size: 18px;
	display: block;
	margin-bottom: 4px;
}

.links .d {
	color: var(--text-mute);
	font-size: 14px;
	line-height: 1.5;
	display: block;
}

/* ---------- screenshot showcase ---------- */
/* The capture is landscape (roughly 2.2:1) but this page is read in portrait most of the time.
   Shrinking the whole frame to fit a phone turns the cells and names into unreadable specks,
   so on narrow screens the image is cropped to a taller slice and only shown whole once there
   is width for it. */

.shot {
	text-align: center;
	margin: 0 0 32px;
}

.shot h2 {
	margin-top: 0;
}

.shot p {
	color: var(--text-mute);
	max-width: 460px;
	margin: 0 auto 20px;
}

.shot img {
	display: block;
	width: 100%;
	height: auto;
	/* Phone portrait: crop the sides so the two players stay big enough to make out. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	/* Sits straight on the page background now, so it takes the site's own card radius.
	   The border stays: the capture is nearly black at its edges and would otherwise bleed
	   into the page background with no visible boundary. */
	border-radius: var(--radius);
	border: 3px solid var(--border);
	background: var(--bg);
}

@media (min-width: 620px) {
	.shot img {
		/* The capture's true ratio. Wide enough here to show the whole frame. */
		aspect-ratio: 2712 / 1220;
	}
}

/* ---------- discord tile ---------- */
/* One of the .links tiles rather than a card of its own, so it pairs with Support on a wide
   screen. The pink fill is the only colour in that grid, which is what stops it reading as
   one more legal link. */

/* Every selector here is qualified with .links a, not just .discord-tile. The base tile rule is
   ".links a", which is a class plus an element and therefore outranks a bare class: written as
   ".discord-tile" the pink loses to the grey panel and the tile renders as an ordinary card. */
.links a.discord-tile {
	background: var(--discord-bg);
	border-color: var(--discord-edge);
}

/* The grid's shared hover turns the border cyan, which fights the pink. */
.links a.discord-tile:hover,
.links a.discord-tile:focus {
	border-color: var(--text);
}

.links a.discord-tile .d {
	/* Not --text-mute: grey on pink goes muddy. Softened white instead. */
	color: rgba(255, 255, 255, 0.82);
}

.discord-mark {
	width: 22px;
	height: auto;
	/* White because the tile behind it is pink; a pink mark would have disappeared. */
	color: var(--text);
	/* Nudged down to sit on the text baseline rather than above it. */
	vertical-align: -3px;
	margin-right: 9px;
}

/* ---------- misc ---------- */

.mail {
	font-family: var(--font-display);
	font-size: 17px;
	word-break: break-all;
}

.note {
	color: var(--text-mute);
	font-size: 14px;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 32px 0;
}

footer {
	/* Explicit block: <footer> is HTML5, and anything that fails to recognise the element
	   falls back to inline, which is one way it can collapse out of view. */
	display: block;
	text-align: center;
	color: var(--text-mute);
	font-size: 13px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}

footer a {
	color: var(--text-mute);
	margin: 0 8px;
	display: inline-block;
	/* Links wrap onto their own lines on a narrow screen; without this they crowd together. */
	padding: 6px 0;
}

/* Long content like tables must scroll inside itself, never the page body. */
.scroll {
	overflow-x: auto;
	/* Stops the last column looking clipped when it does scroll. */
	-webkit-overflow-scrolling: touch;
}

/* ---------- subscription plan cards ---------- */
/* Mirrors the in-game Gold/Platinum purchase screen: two options side by side, the yearly
   one outlined in the accent colour with a savings badge, so the better-value option reads
   as the better-value option instead of being a number in a table column. */

.tier {
	font-family: var(--font-display);
	font-size: 16px;
	margin: 26px 0 0;
}

.plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	/* Headroom for the badge, which straddles the top edge of the highlighted card. */
	padding-top: 14px;
	margin: 0 0 8px;
}

@media (min-width: 620px) {
	.plans {
		grid-template-columns: 1fr 1fr;
	}
}

/* Darker than the surrounding .card so these read as insets rather than more of the same. */
.plan {
	position: relative;
	background: var(--bg);
	border: 3px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 22px 22px;
}

.plan.best {
	border-color: var(--accent);
}

.badge {
	position: absolute;
	top: -14px;
	right: 18px;
	background: var(--accent);
	color: var(--bg);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.plan-name {
	display: block;
	font-family: var(--font-display);
	font-size: 18px;
	margin-bottom: 8px;
}

.plan-price {
	display: block;
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.1;
}

/* Never let a price break across lines mid-figure. */
.plan-price .per {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: normal;
	color: var(--text-mute);
	margin-left: 6px;
	white-space: nowrap;
}

.plan-equiv {
	display: block;
	color: var(--accent);
	font-size: 14px;
	margin-top: 8px;
}