/* 激戰龍駒 website: deep blue and gold portal. Desktop: banner, then three columns (menu, page,
   login / download / status / rankings). Phone: one column (the pages also open in the game's
   WebView), large touch targets. No external fonts; images only where config.php names them. */
:root {
	--pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='none' stroke='%23e0b25a' stroke-opacity='0.065' stroke-width='1'><circle cx='0' cy='0' r='22'/><circle cx='44' cy='0' r='22'/><circle cx='0' cy='44' r='22'/><circle cx='44' cy='44' r='22'/><circle cx='22' cy='22' r='22'/></g></svg>");
	--pattern-strong: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='none' stroke='%23e0b25a' stroke-opacity='0.11' stroke-width='1'><circle cx='0' cy='0' r='22'/><circle cx='44' cy='0' r='22'/><circle cx='0' cy='44' r='22'/><circle cx='44' cy='44' r='22'/><circle cx='22' cy='22' r='22'/></g></svg>");
	--fret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><g fill='none' stroke='%23e0b25a' stroke-width='1.4'><rect x='2' y='2' width='12' height='12'/><rect x='5.5' y='5.5' width='5' height='5'/></g></svg>");
	--bg: #060c1a;
	--bg-2: #0a1426;
	--card: #0c1830;
	/* cards, menu and boxes: the stone texture (img/stone.jpg) under a dark veil so the text stays readable */
	--panel: linear-gradient(180deg, rgba(14, 26, 50, 0.72), rgba(8, 16, 34, 0.84)), url("img/stone.jpg") 0 0 / 340px 340px, var(--card);
	--card-2: #12223f;
	--line: rgba(214, 178, 102, 0.2);
	--line-strong: rgba(224, 178, 90, 0.42);
	--text: #e8eef9;
	--muted: #93a3c0;
	--gold: #e0b25a;
	--gold-light: #f6d58b;
	--gold-dark: #9a6623;
	--blue: #2f6fd6;
	--blue-light: #5d9bff;
	--blue-dark: #0c2654;
	--error: #ff8f80;
	--ok: #8fd18a;
	--serif: "Noto Serif TC", "Source Han Serif TC", "Noto Serif CJK TC", "Songti TC", "PMingLiU", "MingLiU", serif;
	--sans: -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", sans-serif;
	--radius: 12px;
	--gold-grad: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, #c18a34);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--text);
	font: 16px/1.7 var(--sans);
	background:
		radial-gradient(1400px 700px at 50% -150px, rgba(47, 111, 214, 0.3), transparent 70%),
		radial-gradient(900px 500px at 100% 20%, rgba(224, 178, 90, 0.06), transparent 70%),
		var(--pattern),
		var(--bg);
	background-attachment: fixed;
}
a { color: var(--gold); text-decoration: none; }
a:hover, a:focus-visible { color: var(--gold-light); text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: 0.02em; }
h1 { font-size: 24px; margin: 0 0 14px; }
h2 { font-size: 20px; margin: 0 0 10px; }
h3 { font-size: 17px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- banner */
.banner {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 22px 16px 72px;
	border-bottom: 1px solid var(--line-strong);
	/* the picture (img/bg.jpg): the glowing arch in the middle, darker at the bottom where the page starts */
	background:
		linear-gradient(180deg, rgba(6, 12, 26, 0.35), rgba(6, 12, 26, 0.1) 35%, rgba(6, 12, 26, 0.55) 75%, var(--bg)),
		url("img/bg.jpg") center 62% / cover no-repeat,
		var(--bg);
}
.banner::before {	/* the large faint 龍 */
	content: "龍";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -52%);
	font-family: var(--serif);
	font-size: 340px;
	line-height: 1;
	color: var(--gold);
	opacity: 0;	/* the picture takes its place */
	pointer-events: none;
}
.banner::after {	/* a 回紋 band at the bottom, fading out to the sides */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 16px;
	background: var(--fret) repeat-x left center / 16px 16px;
	border-top: 1px solid rgba(224, 178, 90, 0.55);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
	opacity: 0.55;
}
.banner-home { padding: 96px 16px 150px; }	/* tall enough to show the arch */
.banner-tagline, .brand-sub { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.banner-inner { position: relative; }
.lang-switch {	/* 繁體｜简体, top right of the banner */
	position: absolute;
	top: 12px; right: 16px;
	z-index: 2;
	display: flex;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(6, 12, 26, 0.55);
	font-size: 13px;
}
.lang-switch a { padding: 4px 12px; color: var(--muted); }
.lang-switch a:hover { color: var(--gold-light); text-decoration: none; }
.lang-switch a.active { background: rgba(224, 178, 90, 0.18); color: var(--gold-light); }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--text); }
.brand:hover, .brand:focus-visible { text-decoration: none; }
.brand .mark { flex: none; filter: drop-shadow(0 0 12px rgba(224, 178, 90, 0.35)); }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.brand-name {
	font-family: var(--serif);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.12em;
	background: linear-gradient(180deg, #fff3d0, var(--gold-light) 30%, var(--gold) 65%, var(--gold-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75)) drop-shadow(0 3px 14px rgba(47, 111, 214, 0.5));
}
.banner-home .brand-name { font-size: clamp(38px, 9vw, 64px); }
.brand-sub { font-size: 11px; letter-spacing: 0.35em; color: var(--muted); margin-top: 4px; }
.banner-tagline { margin: 16px 0 0; color: #d8e3f7; font-size: clamp(15px, 3.5vw, 19px); letter-spacing: 0.15em; }
.banner-cta {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	padding: 8px 46px;
	font: bold 18px var(--serif);
	letter-spacing: 0.3em;
	color: #1c140a;
	background: var(--gold-grad);
	border: 1px solid #f3cf82;
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(224, 178, 90, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	z-index: 2;
}
.banner-cta:hover, .banner-cta:focus-visible { color: #1c140a; text-decoration: none; filter: brightness(1.08); }

/* ---- three columns */
.portal {
	flex: 1;
	width: 100%;
	max-width: 1180px;
	margin: 22px auto 0;
	padding: 0 16px 40px;
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 250px;
	gap: 18px;
	align-items: start;
}
.content { min-width: 0; }

/* left menu */
.side-left {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 0;
	position: sticky;
	top: 12px;
}
.menu-group { padding: 4px 14px 10px; }
.menu-group + .menu-group { border-top: 1px solid var(--line); padding-top: 10px; }
.menu-group h2 {
	font-size: 17px;
	margin: 0 0 6px;
	color: var(--gold-light);
	letter-spacing: 0.1em;
}
.menu-group a {
	display: block;
	padding: 5px 10px;
	margin: 0 -10px;
	border-radius: 6px;
	color: #c9d5ea;
	font-size: 15px;
}
.menu-group a::before { content: "›"; color: var(--gold); margin-right: 8px; }
.menu-group a:hover, .menu-group a:focus-visible { background: rgba(224, 178, 90, 0.08); color: var(--gold-light); text-decoration: none; }
.menu-group a.active { background: rgba(47, 111, 214, 0.25); color: var(--gold-light); box-shadow: inset 3px 0 0 var(--gold); }

/* right column */
.side-right { display: flex; flex-direction: column; gap: 14px; }
.box {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
}
.box h2 {
	font-size: 17px;
	color: var(--gold-light);
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	letter-spacing: 0.1em;
}
.box label { margin-bottom: 10px; font-size: 14px; }
.box input[name="login"], .box input[type="password"] { padding: 9px 11px; margin-top: 4px; }
.box .links { margin-top: 10px; font-size: 13px; }
.box-user { font-family: var(--serif); font-size: 18px; margin: 0 0 4px; }
.box-coins { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.box-coins strong { color: var(--gold); font-size: 20px; }
.download-big {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 12px;
	font: bold 22px var(--serif);
	letter-spacing: 0.2em;
	color: #1c140a;
	background: var(--gold-grad);
	border: 1px solid #f3cf82;
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(224, 178, 90, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.download-big:hover, .download-big:focus-visible { color: #1c140a; text-decoration: none; filter: brightness(1.07); }
.download-icon { width: 30px; height: 30px; }
.status-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.status-list li { display: flex; justify-content: space-between; padding: 4px 0; }
.status-list .up { color: var(--ok); }
.status-list .down { color: var(--error); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot.up { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.down { background: var(--error); }

/* rankings: two tabs with radio buttons, no script */
.ranking input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.rank-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.rank-tabs label {
	flex: 1;
	margin: 0;
	padding: 5px 0;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 6px;
}
#rank-players:checked ~ .rank-tabs label[for="rank-players"],
#rank-guilds:checked ~ .rank-tabs label[for="rank-guilds"] { color: #1c140a; background: var(--gold-grad); border-color: #f3cf82; }
.rank-list { list-style: none; padding: 0; margin: 0 0 6px; font-size: 14px; }
.rank-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(214, 178, 102, 0.1); }
.rank-no {
	flex: none;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: bold;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--muted);
}
.rank-list li:nth-child(1) .rank-no { background: var(--gold-grad); color: #1c140a; }
.rank-list li:nth-child(2) .rank-no { background: #c9d2df; color: #1c140a; }
.rank-list li:nth-child(3) .rank-no { background: #c98a52; color: #1c140a; }
.rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-extra { flex: none; color: var(--muted); font-size: 12px; }
.rank-empty { color: var(--muted); justify-content: center; }
.rank-guilds { display: none; }
#rank-guilds:checked ~ .rank-players { display: none; }
#rank-guilds:checked ~ .rank-guilds { display: block; }

/* ---- cards (the page column) */
.card {
	position: relative;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 22px;
	margin-bottom: 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.card::before {	/* gold corner accents */
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 8px;
	pointer-events: none;
	background:
		linear-gradient(var(--gold), var(--gold)) top left / 14px 1px no-repeat,
		linear-gradient(var(--gold), var(--gold)) top left / 1px 14px no-repeat,
		linear-gradient(var(--gold), var(--gold)) bottom right / 14px 1px no-repeat,
		linear-gradient(var(--gold), var(--gold)) bottom right / 1px 14px no-repeat;
	opacity: 0.5;
}
.card h1 { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.card-title { display: flex; align-items: center; gap: 10px; color: var(--gold-light); }
.card-title::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--gold-grad); }
.note { color: var(--muted); font-size: 14px; }
.error, .notice-error { color: var(--error); }
.notice {
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 14px;
	font-size: 15px;
	background: rgba(143, 209, 138, 0.1);
	border: 1px solid rgba(143, 209, 138, 0.35);
	color: var(--ok);
}
.notice.notice-error { background: rgba(255, 143, 128, 0.1); border-color: rgba(255, 143, 128, 0.35); }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; margin: 14px 0 0; }

/* home */
.hero-card { padding: 0; overflow: hidden; }
.hero-art {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	padding: 24px;
	background:
		linear-gradient(0deg, rgba(6, 12, 26, 0.9), rgba(6, 12, 26, 0.15) 60%),
		radial-gradient(420px 220px at 70% 35%, rgba(47, 111, 214, 0.55), transparent 70%),
		radial-gradient(260px 160px at 20% 30%, rgba(224, 178, 90, 0.18), transparent 70%),
		var(--pattern-strong),
		linear-gradient(135deg, #0f2a57, #081329);
	background-size: cover, cover, cover, 44px 44px, cover;
	background-position: center;
}
.hero-art::before {
	content: "龍";
	position: absolute;
	right: 6%;
	top: 50%;
	transform: translateY(-55%);
	font-family: var(--serif);
	font-size: 220px;
	line-height: 1;
	color: var(--gold);
	opacity: 0.08;
}
.hero-copy { position: relative; }
.hero-kicker { color: var(--gold); letter-spacing: 0.5em; font-size: 13px; margin: 0 0 4px; }
.hero-copy h1 {
	font-size: clamp(32px, 6vw, 46px);
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	letter-spacing: 0.12em;
	background: linear-gradient(180deg, #fff3d0, var(--gold-light) 30%, var(--gold) 65%, var(--gold-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero-copy p { margin: 0; color: #d8e3f7; }
.hero-actions { display: flex; gap: 12px; padding: 16px 22px 20px; }
.hero-actions .button { flex: 1; margin: 0; }
.story { color: #c9d5ea; line-height: 1.9; margin: 0; }
.features { display: grid; grid-template-columns: 1fr; gap: 12px; }
.feature {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px;
	color: var(--text);
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color 0.15s, background 0.15s;
}
.feature:hover, .feature:focus-visible { border-color: var(--line-strong); background: rgba(47, 111, 214, 0.12); color: var(--text); text-decoration: none; }
.feature strong { display: block; font-family: var(--serif); font-size: 17px; margin-bottom: 2px; }
.feature-text { display: block; color: var(--muted); font-size: 14px; }
.seal {
	flex: none;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--gold-light);
	background: radial-gradient(circle at 35% 30%, #2357b0, var(--blue-dark));
	border: 1px solid var(--gold-dark);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(224, 178, 90, 0.08);
}
.news { list-style: none; padding: 0; margin: 0 0 12px; }
.news li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.news time { flex: none; min-width: 92px; font-size: 13px; color: var(--gold); padding-top: 2px; }
.news h3 { font-size: 16px; margin: 0 0 4px; }
.news p { color: var(--muted); font-size: 14px; margin: 0; white-space: pre-line; }
.steps { margin: 0; padding-left: 1.5em; }
.steps li { margin-bottom: 10px; padding-left: 4px; }
.steps li::marker { color: var(--gold); font-family: var(--serif); font-weight: bold; }
.steps.big li { margin-bottom: 14px; }

/* guide pages */
.guide h2 { color: var(--gold-light); margin-top: 18px; font-size: 19px; }
.bullets { margin: 0 0 8px; padding-left: 1.2em; }
.legal h2 { margin: 26px 0 8px; font-size: 18px; color: var(--gold-light); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }
.price-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; }
.price-table th, .price-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.price-table th { color: var(--muted); font-weight: normal; }
.price-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.check.agree { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 16px; font-size: 14px; }
.check.agree input { margin-top: 3px; }
.bullets li { margin-bottom: 8px; }
.bullets li::marker { color: var(--gold); }
.class-list, .system-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
.class-card, .system-card { padding: 16px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); border-radius: 10px; }
.class-card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.class-card p { color: #c9d5ea; }
.class-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.class-card dt { color: var(--gold); font-family: var(--serif); font-weight: bold; }
.class-card dd { margin: 0; color: var(--muted); font-size: 15px; }
.system-card h2 { font-size: 17px; margin: 0 0 6px; color: var(--gold-light); }
.system-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---- forms */
label { display: block; margin-bottom: 16px; font-size: 15px; }
label .note { display: block; margin-top: 4px; font-size: 13px; }
input[type="text"], input[name="login"], input[type="password"], input[type="email"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	font: 16px var(--sans);	/* 16px: phones do not zoom into the field */
	color: var(--text);
	background: rgba(3, 8, 20, 0.55);
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 178, 90, 0.18); }
button, .button {
	display: block;
	width: 100%;
	padding: 14px;
	font: bold 17px var(--sans);
	letter-spacing: 0.1em;
	text-align: center;
	color: #1c140a;
	background: var(--gold-grad);
	border: 1px solid #f3cf82;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(224, 178, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: transform 0.1s, filter 0.15s;
}
button:hover, .button:hover, button:focus-visible, .button:focus-visible { filter: brightness(1.07); color: #1c140a; text-decoration: none; }
button:active, .button:active { transform: translateY(1px); filter: brightness(0.95); }
button.small, .button.small { padding: 9px; font-size: 15px; }
.button.ghost { color: var(--gold-light); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-strong); box-shadow: none; }
.button.ghost:hover, .button.ghost:focus-visible { color: var(--gold-light); background: rgba(224, 178, 90, 0.1); }
.button + .button { margin-top: 10px; }
.topup .amount + .amount::before { content: " / "; color: var(--muted); }	/* all prices, without :has() */
.button.disabled, .button.disabled:hover { opacity: 0.5; filter: grayscale(0.4); cursor: default; pointer-events: none; }
.hero-actions .button + .button { margin-top: 0; }
.cf-turnstile { margin-bottom: 16px; min-height: 65px; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }
legend { font-family: var(--serif); font-weight: bold; margin-bottom: 10px; }
.choice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	margin-bottom: 10px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--gold); background: rgba(224, 178, 90, 0.08); }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold); }
.choice .label { flex: 1; }
.choice .price { color: var(--gold); font-weight: bold; white-space: nowrap; }
details.setting { border-top: 1px solid var(--line); padding: 14px 0 2px; }
details.setting summary {
	cursor: pointer;
	font-family: var(--serif);
	font-weight: bold;
	font-size: 17px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
details.setting summary::-webkit-details-marker { display: none; }
details.setting summary::after { content: "＋"; color: var(--gold); }
details.setting[open] summary::after { content: "－"; }

/* ---- account, top-up */
.coins { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.coins strong {
	font-family: var(--serif);
	font-size: 34px;
	background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 15px; margin: 0 0 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.orders { list-style: none; padding: 0; margin: 0; }
.orders li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.status-paid { color: var(--ok); }
.status-pending { color: var(--muted); }
.status-mismatch { color: var(--error); }
.downloads { list-style: none; padding: 0; margin: 0; }
.downloads li { margin-bottom: 18px; }

/* ---- footer */
.bottom { position: relative; border-top: 1px solid var(--line); background: rgba(3, 7, 16, 0.75); }
.bottom::before {	/* the same 回紋 band */
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 16px;
	background: var(--fret) repeat-x left center / 16px 16px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
	opacity: 0.35;
}
.bottom-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 30px 16px 28px; text-align: center; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 10px; font-size: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--gold-light); }
.bottom p { margin: 0; }

/* ---- sizes */
@media (min-width: 640px) {
	.features, .system-list { grid-template-columns: 1fr 1fr; }
	.class-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
	.portal { grid-template-columns: 180px minmax(0, 1fr); }
	.side-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
	.side-right .download-big { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.portal { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
	/* the menu becomes one scrolling row of links */
	.side-left {
		position: static;
		display: flex;
		overflow-x: auto;
		gap: 4px;
		padding: 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.side-left::-webkit-scrollbar { display: none; }
	.menu-group, .menu-group + .menu-group { display: contents; }
	.menu-group h2 { display: none; }
	.menu-group a { flex: none; margin: 0; padding: 8px 12px; white-space: nowrap; }
	.menu-group a::before { content: none; }
	.menu-group a.active { box-shadow: inset 0 -2px 0 var(--gold); }
	.banner { padding: 16px 12px 66px; }
	.banner-home { padding: 48px 12px 110px; }
	.brand-name { font-size: 26px; }
	.card { padding: 20px 16px; }
	.card.hero-card { padding: 0; }
	.hero-actions { padding: 14px 16px 18px; }
}
@media (max-width: 480px) {
	/* the 繁體｜简体 switch gets a row of its own above the logo */
	.banner { padding-top: 46px; }
	.banner-home { padding-top: 60px; }
	.lang-switch { top: 8px; right: 10px; font-size: 12px; }
	.lang-switch a { padding: 3px 10px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}