/* Sekai Index, wearing the game's clothes.
   Palette and chrome come from the sekai UI kit (src/lib/ui/):
   navy page, lilac content panel, white cards with inset rings and hard
   drops, teal game buttons with a halftone dot field. One accent, one
   radius, one font — still. */

:root {
	/* 1600 leaves ~1300 of content beside a future 240px sidebar. */
	--shell: 1400px;
	--gutter: 28px;
	--sidebar: 240px;
	--font: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--r: 7px;

	/* kit tokens: INK #43406B, body #3B3B45, soft rgba(67,64,107,.55) */
	--bg: #4a4770; /* page navy */
	--shellbg: #edeef6; /* lilac content panel */
	--panel: #ffffff; /* cards, inputs */
	--soft: #f2f3f9; /* hover wash, table header */
	--head: #f2f3f9;
	--text: #43406b;
	--dim: #5c5884;
	--mute: rgba(67, 64, 107, 0.55);
	--line: rgba(67, 64, 107, 0.2);
	--line-soft: rgba(67, 64, 107, 0.12);

	--ring: inset 0 0 0 1.5px rgba(67, 64, 107, 0.14);
	--ring-strong: inset 0 0 0 1.5px rgba(67, 64, 107, 0.18);
	--drop: 0 2px 0 rgba(60, 58, 95, 0.3);

	/* Bright teal is for surfaces; text links use the darker pair. */
	--accent: #3fc1c0;
	--accent-hover: #37b3b2;
	--accent-wash: #e4f5f5;
	--on-accent: #43406b;
	--link: #1e9c9b;
	--link-hover: #177f7e;

	--star: #e0a020;
	--star-bd: #ee5f9b;
	--card: #ffffff;

	/* Halftone dot field (kit defaults, h=40, white dots @ .23). */
	--halftone: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.74%22%20height%3D%2240%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M-1.98%200.99a1.98%201.98%200%201%200%203.96%200a1.98%201.98%200%201%200%20-3.96%200M10.76%200.99a1.98%201.98%200%201%200%203.96%200a1.98%201.98%200%201%200%20-3.96%200M4.39%200.99a1.98%201.98%200%201%200%203.96%200a1.98%201.98%200%201%200%20-3.96%200M1.48%204.17a1.70%201.70%200%201%200%203.41%200a1.70%201.70%200%201%200%20-3.41%200M7.85%204.17a1.70%201.70%200%201%200%203.41%200a1.70%201.70%200%201%200%20-3.41%200M-1.43%207.36a1.43%201.43%200%201%200%202.86%200a1.43%201.43%200%201%200%20-2.86%200M11.31%207.36a1.43%201.43%200%201%200%202.86%200a1.43%201.43%200%201%200%20-2.86%200M4.94%207.36a1.43%201.43%200%201%200%202.86%200a1.43%201.43%200%201%200%20-2.86%200M2.03%2010.54a1.15%201.15%200%201%200%202.31%200a1.15%201.15%200%201%200%20-2.31%200M8.40%2010.54a1.15%201.15%200%201%200%202.31%200a1.15%201.15%200%201%200%20-2.31%200%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.23%22%2F%3E%3C%2Fsvg%3E");
	/* Fine field for pills and active tabs (h=26). */
	--halftone-sm: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228.28%22%20height%3D%2226%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M-1.29%200.64a1.29%201.29%200%201%200%202.57%200a1.29%201.29%200%201%200%20-2.57%200M7.00%200.64a1.29%201.29%200%201%200%202.57%200a1.29%201.29%200%201%200%20-2.57%200M2.85%200.64a1.29%201.29%200%201%200%202.57%200a1.29%201.29%200%201%200%20-2.57%200M0.83%202.71a1.24%201.24%200%201%200%202.48%200a1.24%201.24%200%201%200%20-2.48%200M4.97%202.71a1.24%201.24%200%201%200%202.48%200a1.24%201.24%200%201%200%20-2.48%200M-1.20%204.78a1.20%201.20%200%201%200%202.39%200a1.20%201.20%200%201%200%20-2.39%200M7.09%204.78a1.20%201.20%200%201%200%202.39%200a1.20%201.20%200%201%200%20-2.39%200M2.95%204.78a1.20%201.20%200%201%200%202.39%200a1.20%201.20%200%201%200%20-2.39%200M0.92%206.85a1.15%201.15%200%201%200%202.30%200a1.15%201.15%200%201%200%20-2.30%200M5.06%206.85a1.15%201.15%200%201%200%202.30%200a1.15%201.15%200%201%200%20-2.30%200%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.23%22%2F%3E%3C%2Fsvg%3E");
	/* Ink dots at low alpha for light surfaces (skill box wash). */
	--halftone-ink: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.74%22%20height%3D%2240%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M-1.98%200.99a1.98%201.98%200%201%200%203.96%200a1.98%201.98%200%201%200%20-3.96%200M10.76%200.99a1.98%201.98%200%201%200%203.96%200a1.98%201.98%200%201%200%20-3.96%200M4.39%200.99a1.98%201.98%200%201%200%203.96%200a1.98%201.98%200%201%200%20-3.96%200M1.48%204.17a1.70%201.70%200%201%200%203.41%200a1.70%201.70%200%201%200%20-3.41%200M7.85%204.17a1.70%201.70%200%201%200%203.41%200a1.70%201.70%200%201%200%20-3.41%200M-1.43%207.36a1.43%201.43%200%201%200%202.86%200a1.43%201.43%200%201%200%20-2.86%200M11.31%207.36a1.43%201.43%200%201%200%202.86%200a1.43%201.43%200%201%200%20-2.86%200M4.94%207.36a1.43%201.43%200%201%200%202.86%200a1.43%201.43%200%201%200%20-2.86%200M2.03%2010.54a1.15%201.15%200%201%200%202.31%200a1.15%201.15%200%201%200%20-2.31%200M8.40%2010.54a1.15%201.15%200%201%200%202.31%200a1.15%201.15%200%201%200%20-2.31%200%22%20fill%3D%22%2343406B%22%20fill-opacity%3D%220.07%22%2F%3E%3C%2Fsvg%3E");
}

* {
	box-sizing: border-box;
}

html {
	background: var(--bg);
}

body {
	margin: 0;
	/* Navy page with a faint white dot lattice, like the game's backdrop. */
	background: var(--bg);
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.1px, transparent 1.2px);
	background-size: 16px 16px;
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

h1,
h2,
h3 {
	font-weight: 700;
	margin: 0;
}

/* ---------- shell ---------- */

.shell {
	max-width: var(--shell);
	margin: 14px auto;
	min-height: calc(100dvh - 28px);
	display: flex;
	flex-direction: column;
	background: var(--shellbg);
	border: 3px solid #fff;
	border-radius: 14px;
	box-shadow: var(--drop);
}

/**
 * Reserved for a future sidebar: drop a <aside class="rail"> as the first child
 * of .withrail and the content column reflows without touching anything else.
 */
.withrail {
	display: grid;
	grid-template-columns: var(--sidebar) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 900px) {
	.withrail {
		grid-template-columns: minmax(0, 1fr);
	}
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 60px;
	padding: 0 var(--gutter);
	background: var(--shellbg);
	border-bottom: 1.5px solid var(--line-soft);
	border-radius: 11px 11px 0 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text);
	white-space: nowrap;
}

.brand:hover {
	color: var(--text);
	text-decoration: none;
}

.nav {
	display: flex;
	gap: 6px;
	flex: 1;
}

/* Nav tabs are the kit's Tabs: white pills, teal when active. */
.nav a {
	padding: 6px 14px;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring);
	color: var(--text);
	font-weight: 500;
	font-size: 13px;
	transition: transform 0.12s, box-shadow 0.12s;
}

.nav a:hover {
	color: var(--text);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--ring-strong), 0 2px 0 rgba(60, 58, 95, 0.18);
}

.nav a.on {
	background: var(--accent);
	background-image: var(--halftone-sm);
	background-repeat: repeat-x;
	color: #fff;
	box-shadow: 0 2px 0 rgba(60, 58, 95, 0.24), inset 0 0 0 1.5px rgba(0, 0, 0, 0.1);
}

.nav a.on:hover {
	transform: none;
	box-shadow: 0 2px 0 rgba(60, 58, 95, 0.24), inset 0 0 0 1.5px rgba(0, 0, 0, 0.1);
}

.region {
	display: flex;
	align-items: center;
	gap: 8px;
}

.region .label {
	font-size: 12px;
	color: var(--mute);
}

.segmented {
	display: flex;
	padding: 0;
	gap: 4px;
}

.segmented a {
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring);
	color: var(--dim);
	text-decoration: none;
	transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.segmented a:hover {
	color: var(--text);
	text-decoration: none;
}

.segmented a.on {
	background: var(--accent);
	background-image: var(--halftone-sm);
	background-repeat: repeat-x;
	color: #fff;
	box-shadow: 0 2px 0 rgba(60, 58, 95, 0.24), inset 0 0 0 1.5px rgba(0, 0, 0, 0.1);
}

.page {
	flex: 1;
	padding: 20px var(--gutter) 40px;
}

.foot {
	padding: 20px var(--gutter);
	border-top: 1.5px solid var(--line-soft);
	color: var(--mute);
	font-size: 12px;
}

/* ---------- shared page furniture ---------- */

.crumb {
	font-size: 11.5px;
	color: var(--mute);
	margin-bottom: 12px;
}

.crumb a {
	color: var(--link);
}

.crumb a:hover {
	color: var(--link-hover);
}

.ptitle {
	margin-bottom: 16px;
}

.ptitle h1 {
	font-size: 23px;
}

.ptitle p {
	margin: 4px 0 0;
	color: var(--dim);
	font-size: 13px;
}

.sect {
	margin-bottom: 24px;
}

/* Section titles get the kit's diamond glyph before the label. */
.sect h2,
.split section h2,
.secthead h2 {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mute);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.sect h2::before,
.split section h2::before,
.secthead h2::before {
	content: "";
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background: var(--accent);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.mono {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}

.stars {
	color: var(--star);
	font-size: 12px;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.stars.bd {
	color: var(--star-bd);
}

/* ---------- tables ---------- */

.tw {
	border: none;
	border-radius: var(--r);
	overflow-x: auto;
	background: var(--panel);
	box-shadow: var(--ring-strong), 0 2px 0 rgba(60, 58, 95, 0.2);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

thead th {
	background: var(--head);
	text-align: left;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mute);
	padding: 9px 12px;
	border-bottom: 1.5px solid var(--line-soft);
	white-space: nowrap;
}

tbody td {
	padding: 9px 12px;
	border-bottom: 1.5px solid var(--line-soft);
	vertical-align: middle;
}

tbody tr:last-child td {
	border-bottom: 0;
}

tbody tr:hover {
	background: #f7f8fc;
}

.num {
	text-align: right;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}

/* ---------- card art ---------- */

.art {
	display: block;
	height: auto;
	aspect-ratio: 7 / 4;
	object-fit: cover;
	background: var(--soft);
	border-radius: 4px;
}

/* ---------- card list ---------- */

td.a-art {
	width: 84px;
}

td.a-art img {
	width: 84px;
}

td.a-name {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

td.a-name a,
td.e-name a {
	color: var(--text);
}

td.a-name a:hover,
td.e-name a:hover {
	color: var(--link);
}

td.a-char {
	width: 150px;
	white-space: nowrap;
}

td.a-unit {
	width: 190px;
	color: var(--dim);
	white-space: nowrap;
}

td.a-unit .sub {
	display: block;
	font-size: 11px;
	color: var(--mute);
}

td.a-unit .sub::before {
	content: "subunit ";
}

td.a-attr {
	width: 100px;
	color: var(--dim);
}

td.a-rarity {
	width: 76px;
}

td.a-power {
	width: 84px;
}

.pager {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 16px;
	font-size: 12px;
}

.pager .at {
	color: var(--mute);
	margin-right: auto;
}

/* Pager buttons are the kit's white pills. */
.pager a {
	padding: 5px 12px;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring);
	color: var(--text);
	font-weight: 500;
	transition: transform 0.12s, box-shadow 0.12s;
}

.pager a:hover {
	color: var(--link);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--ring-strong), 0 2px 0 rgba(60, 58, 95, 0.18);
}

.empty {
	padding: 48px 20px;
	text-align: center;
	border: none;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring-strong), 0 2px 0 rgba(60, 58, 95, 0.2);
}

.empty::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 10px;
	background: var(--text);
	opacity: 0.3;
	/* The kit's four-point sparkle. */
	clip-path: polygon(
		50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%
	);
}

.empty p {
	margin: 0 0 14px;
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
}

.empty a {
	font-weight: 600;
}

/* ---------- card detail ---------- */

.dhead {
	margin-bottom: 20px;
}

.dhead h1 {
	font-size: 25px;
	margin-bottom: 6px;
}

.dhead .facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--dim);
}

.dhead .facts .fact + .fact::before {
	content: "";
	display: inline-block;
	width: 1.5px;
	height: 12px;
	margin-right: 10px;
	background: var(--line);
	vertical-align: -2px;
}

.arts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

.arts.one {
	grid-template-columns: 1fr;
}

.arts figure {
	margin: 0;
}

.arts img {
	width: 100%;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring-strong);
}

.arts figcaption {
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--mute);
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

/* Fact rows become the kit's StatList: white card, hairline rows. */
.facts-list {
	margin: 0;
	font-size: 12.5px;
	background: #fff;
	border-radius: var(--r);
	box-shadow: var(--ring-strong), 0 2px 0 rgba(60, 58, 95, 0.2);
	overflow: hidden;
}

.facts-list .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 12px;
	border-bottom: 1.5px solid var(--line-soft);
}

.facts-list .row:last-child {
	border-bottom: 0;
}

.facts-list dt {
	color: var(--mute);
	white-space: nowrap;
}

.facts-list dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
}

.facts-list dd .stars {
	margin-right: 6px;
}

.skill-text {
	margin: 0 0 8px;
	padding: 12px 14px;
	background: var(--accent-wash);
	background-image: var(--halftone-ink);
	background-repeat: repeat-x;
	border: none;
	border-radius: var(--r);
	box-shadow: inset 0 0 0 1.5px rgba(63, 193, 192, 0.35);
	font-size: 13.5px;
	font-weight: 500;
	white-space: pre-wrap;
}

.note {
	margin: 0;
	font-size: 13px;
	color: var(--dim);
}

/* ---------- events ---------- */

td.e-banner {
	width: 132px;
}

.banner-sm {
	display: block;
	width: 132px;
	height: auto;
	aspect-ratio: 488 / 208;
	object-fit: cover;
	background: var(--soft);
	border-radius: 4px;
}

td.e-name {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

td.e-dates {
	width: 200px;
	white-space: nowrap;
}

td.e-type {
	width: 140px;
	color: var(--dim);
}

td.e-unit {
	width: 180px;
	color: var(--dim);
	white-space: nowrap;
}

.ebanner {
	display: block;
	width: 100%;
	height: auto;
	max-width: 520px;
	aspect-ratio: 488 / 208;
	object-fit: cover;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring-strong);
	margin-bottom: 20px;
	background: var(--soft);
}

/* Event status pill — the game's running/upcoming flag. Green while it
   runs, yellow before it starts, quiet gray once it's over. */
.status {
	display: inline-flex;
	align-items: center;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text);
	border: 2px solid #fff;
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12), var(--drop);
}

.status.running {
	background: #8fd44a;
	background-image: var(--halftone-sm);
	background-repeat: repeat-x;
}

.status.upcoming {
	background: #f3d169;
	background-image: var(--halftone-sm);
	background-repeat: repeat-x;
}

.status.ended {
	background: #e4e6f0;
	border-color: transparent;
	box-shadow: var(--ring);
	color: var(--mute);
}

.tile-translation {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--mute);
	line-height: 1.3;
}

.dhead .subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--dim);
}

.unit-swatch {
	width: 32px;
	height: 6px;
	border-radius: 999px;
	margin-top: 10px;
}

/* ---------- responsive ---------- */

/* Jump link to the filter panel; only useful once the panel moves below. */

@media (max-width: 900px) {
	.split,
	.arts,
	.arts.one {
		grid-template-columns: minmax(0, 1fr);
	}

	td.a-unit,
	td.a-attr,
	td.e-unit,
	td.e-type {
		display: none;
	}

	thead th.a-unit,
	thead th.a-attr,
	thead th.e-unit,
	thead th.e-type {
		display: none;
	}
}

@media (max-width: 560px) {
	.page {
		padding: 14px;
	}

	.shell {
		margin: 8px;
		min-height: calc(100dvh - 16px);
	}

	.topbar {
		gap: 12px;
		padding: 0 14px;
	}

	.region .label {
		display: none;
	}

	td.a-char,
	thead th.a-char,
	td.e-banner,
	thead th.e-banner {
		display: none;
	}

	/* Squeeze the remaining columns so the row fits a phone without scrolling. */
	thead th,
	tbody td {
		padding: 8px 7px;
	}

	td.a-art,
	td.a-art img {
		width: 64px;
	}

	td.a-name {
		max-width: none;
		white-space: normal;
	}

	td.a-rarity {
		width: 62px;
	}

	td.a-power {
		width: 66px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ---------- error page ---------- */

.errpage {
	max-width: 520px;
	margin: 48px auto;
	text-align: center;
}

.errpage .code {
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--mute);
}

.errpage h1 {
	margin: 8px 0 0;
	font-size: 25px;
}

.errpage .detail {
	margin: 10px auto 0;
	max-width: 44ch;
	color: var(--dim);
	font-size: 14px;
}

.errpage .where {
	display: inline-block;
	margin: 18px 0 0;
	padding: 5px 10px;
	background: #fff;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring);
	color: var(--mute);
	word-break: break-all;
}

.errpage .acts {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.errpage .act {
	padding: 8px 16px;
	border: none;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
}

.errpage .act:hover {
	color: var(--link);
	text-decoration: none;
}

.errpage .act.primary {
	background: var(--accent);
	border: 2.5px solid #fff;
	color: var(--on-accent);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.14), var(--drop);
	background-image: var(--halftone);
	background-repeat: repeat-x;
}

.errpage .act.primary:hover {
	background-color: var(--accent-hover);
	color: var(--on-accent);
	text-decoration: none;
}

/* ---------- view toggle ---------- */

.ptitle.withview {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.viewtoggle {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.viewtoggle .label {
	font-size: 12px;
	color: var(--mute);
}

/* ---------- grids ---------- */

.grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.cardgrid {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.eventgrid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Tiles are kit Cards: white, inset ring, hard drop, lift on hover. */
.grid > li > a {
	display: block;
	position: relative;
	height: 100%;
	border: none;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--panel);
	color: var(--text);
	box-shadow: var(--ring), 0 2px 0 rgba(60, 58, 95, 0.2);
	transition: transform 0.12s, box-shadow 0.12s;
}

/* A single halftone field fades in over the top of the artwork on hover;
   over the white tile body the dots vanish. repeat-x — never tiled. */
.grid > li > a::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--halftone);
	background-repeat: repeat-x;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.grid > li > a:hover::after {
	opacity: 0.55;
}

.grid > li > a:hover {
	transform: translateY(-2px);
	box-shadow: var(--ring-strong), 0 3px 0 rgba(60, 58, 95, 0.24);
	text-decoration: none;
}

.grid img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--soft);
	border-radius: 0;
	border-bottom: 1.5px solid var(--line-soft);
}

.grid .art {
	aspect-ratio: 7 / 4;
	object-fit: cover;
}

.grid .banner {
	aspect-ratio: 488 / 208;
	object-fit: cover;
}

.tile-body {
	padding: 10px 12px 12px;
}

.tile-name {
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tile-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--dim);
}

.tile-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1.5px solid var(--line-soft);
	font-size: 12px;
	color: var(--mute);
}

.grid > li > a:hover .tile-name {
	color: var(--link);
}

/* ---------- home ---------- */

.masthead {
	padding: 8px 0 28px;
	border-bottom: 1.5px solid var(--line-soft);
	margin-bottom: 28px;
}

.masthead h1 {
	font-size: 30px;
	max-width: 20ch;
	line-height: 1.2;
}

.masthead p {
	margin: 12px 0 0;
	max-width: 58ch;
	color: var(--dim);
	font-size: 15px;
}

.masthead .acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.masthead .act {
	padding: 8px 16px;
	border: none;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
}

.masthead .act:hover {
	color: var(--link);
	text-decoration: none;
}

/* Primary actions are the kit's game button: teal, white border, halftone. */
.masthead .act.primary {
	background: var(--accent);
	border: 2.5px solid #fff;
	color: var(--on-accent);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.14), var(--drop);
	background-image: var(--halftone);
	background-repeat: repeat-x;
}

.masthead .act.primary:hover {
	background-color: var(--accent-hover);
	color: var(--on-accent);
	text-decoration: none;
}

/* The running-event banner is the kit's Toast. */
.running {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	margin-bottom: 28px;
	border: 2.5px solid #fff;
	border-radius: var(--r);
	background: var(--accent);
	background-image: var(--halftone);
	background-repeat: repeat-x;
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12), var(--drop);
	color: var(--text);
	transition: transform 0.12s, box-shadow 0.12s;
}

.running:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12), 0 3px 0 rgba(60, 58, 95, 0.32);
	text-decoration: none;
}

.running .body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.running .tag {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(67, 64, 107, 0.62);
}

.running .name {
	font-size: 15px;
	font-weight: 700;
}

.running .when {
	font-size: 12px;
	color: rgba(67, 64, 107, 0.7);
}

.secthead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.secthead h2 {
	margin-bottom: 0;
}

.secthead a {
	font-size: 12.5px;
	font-weight: 500;
}

@media (max-width: 560px) {
	.masthead h1 {
		font-size: 23px;
	}

	.cardgrid,
	.eventgrid {
		grid-template-columns: 1fr;
	}
}

/* ---------- trained preview ---------- */

.thumb {
	position: relative;
	line-height: 0;
}

.thumb .trained,
.thumb .swaphint {
	display: none;
}

/* Only pointer devices get the second image, so phones never fetch it. */
@media (hover: hover) {
	.thumb.swaps .trained {
		display: block;
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		border-radius: 0;
		opacity: 0;
		transition: opacity 0.18s ease;
	}

	.thumb.swaps:hover .trained {
		opacity: 1;
	}

	.thumb.swaps .swaphint {
		display: block;
		position: absolute;
		right: 8px;
		bottom: 8px;
		padding: 2px 7px;
		border-radius: 999px;
		background: rgb(0 0 0 / 0.62);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		line-height: 1.6;
		opacity: 0;
		transition: opacity 0.18s ease;
	}

	.thumb.swaps:hover .swaphint {
		opacity: 1;
	}
}

/* ---------- filter bar ---------- */

.filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1.5px solid var(--line-soft);
}

.filterbar .search {
	flex: 1 1 240px;
	min-width: 200px;
	max-width: 420px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 12.5px;
	color: var(--text);
	background: #fff;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring-strong), inset 0 2px 0 rgba(67, 64, 107, 0.07);
}

.filterbar .search::placeholder {
	color: var(--mute);
}

.filterbar .search:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1.5px rgba(63, 193, 192, 0.75);
}

/* The kit's Select: flat white with the small ▼ floated over the end. */
.filterbar .sortpick {
	appearance: none;
	padding: 8px 28px 8px 11px;
	font-family: inherit;
	font-size: 12.5px;
	color: var(--text);
	background: #fff;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring-strong);
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20stroke%3D%22%2343406B%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.filterbar .apply {
	padding: 8px 18px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--on-accent);
	background: var(--accent);
	border: 2.5px solid #fff;
	border-radius: var(--r);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.14), var(--drop);
	background-image: var(--halftone);
	background-repeat: repeat-x;
	cursor: pointer;
	transition: transform 60ms, box-shadow 60ms;
}

.filterbar .apply:hover {
	background-color: var(--accent-hover);
}

.filterbar .apply:active {
	transform: translateY(2px);
	box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.14), 0 0 0 rgba(60, 58, 95, 0.3);
}

.filterbar .reset {
	padding: 7px 10px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--dim);
}

.filterbar .reset:hover {
	color: var(--link);
}

.filterbar .barlabel {
	font-size: 13px;
	color: var(--mute);
}

/* ---------- gachas ---------- */

/* Logos have transparent padding around the artwork, so they use `contain`
   rather than the `cover` crop used for card art and event banners. */
.logo-sm {
	display: block;
	width: 132px;
	height: auto;
	aspect-ratio: 35 / 16;
	object-fit: contain;
	background: var(--soft);
	border-radius: 4px;
}

.logo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 420px;
	aspect-ratio: 35 / 16;
	object-fit: contain;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring-strong);
	margin-bottom: 20px;
	background: var(--soft);
}

.gachagrid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.gachagrid .logo {
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: none;
	border-bottom: 1.5px solid var(--line-soft);
}

/* ---------- songs ---------- */

.jacket {
	display: block;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--soft);
	border-radius: 4px;
}

.songgrid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.grid .jacket {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

td.s-jacket {
	width: 56px;
}

td.s-jacket img {
	width: 40px;
	height: 40px;
}

td.s-title {
	min-width: 200px;
}

td.s-composer {
	color: var(--dim);
}

.song-jacket {
	max-width: 240px;
	margin: 0 0 24px;
}

.song-jacket .jacket {
	width: 100%;
}

.lvrange {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px;
}

.lvrange input[type="number"] {
	width: 64px;
	padding: 7px 10px;
	font-family: inherit;
	font-size: 12.5px;
	color: var(--text);
	background: #fff;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring-strong);
}

.lvrange span {
	font-size: 12px;
	color: var(--mute);
}

@media (max-width: 560px) {
	.songgrid {
		grid-template-columns: 1fr;
	}
}

/* ---------- narrow-screen navigation ---------- */

/**
 * Five sections plus the brand and the server switch no longer fit one line on
 * a phone. Give the nav its own scrollable row instead of letting the header
 * push the page wider than the viewport.
 */
@media (max-width: 760px) {
	.topbar {
		height: auto;
		flex-wrap: wrap;
		gap: 8px 14px;
		padding: 10px var(--gutter);
	}

	.topbar .nav {
		order: 3;
		flex: 1 0 100%;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 2px;
	}

	.topbar .nav::-webkit-scrollbar {
		display: none;
	}

	.topbar .nav a {
		white-space: nowrap;
		padding: 5px 10px;
	}

	.topbar .region {
		margin-left: auto;
	}
}

/* ---------- consolidated filter panel ---------- */

.filterpanel {
	position: relative;
	flex: 1 1 320px;
	min-width: 0;
}

.filterpanel > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 4px 12px;
	border: none;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring-strong);
	cursor: pointer;
	list-style: none;
	overflow: hidden;
}

.filterpanel > summary::-webkit-details-marker {
	display: none;
}

.filterpanel > summary:hover,
.filterpanel[open] > summary {
	box-shadow: inset 0 0 0 1.5px rgba(63, 193, 192, 0.65);
}

.filterpanel > summary::after {
	content: "";
	flex-shrink: 0;
	margin-left: auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid var(--mute);
}

.filterpanel .ftitle {
	flex-shrink: 0;
	font-size: 12.5px;
	font-weight: 500;
}

/* One line of picks; the overflow becomes a "+N more" chip, not a scrollbar. */
.filterpanel .fpicks {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
	flex-wrap: nowrap;
}

/* Active-filter pills are the kit's Chip: white, inset ring, ink text. */
.filterpanel .chip {
	flex-shrink: 0;
	padding: 2px 9px;
	border-radius: 999px;
	background: #fff;
	border: none;
	box-shadow: var(--ring);
	color: var(--text);
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

.filterpanel .chip.more {
	color: var(--dim);
}

.filterpanel .nopicks {
	font-size: 12px;
	color: var(--mute);
	white-space: nowrap;
}

.filterpanel .fpanel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 18px 22px;
	min-width: 640px;
	padding: 18px 20px;
	background: #fff;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--ring-strong), 0 14px 36px rgb(40 38 64 / 0.22);
}

.fgroup h4 {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mute);
}

.fgroup .opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}

.fgroup .opt:hover {
	color: var(--link);
}

.fgroup input[type="checkbox"] {
	accent-color: var(--accent);
	margin: 0;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.filterbar .fgroup {
	margin: 0 0 8px;
}
.filterbar .fgroup h4 {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mute);
}
.filterbar .fgroup select.sortpick {
	width: 100%;
	box-sizing: border-box;
}
.filterbar .fgroup .opt {
	padding: 3px 0;
}

.fgroup.tall {
	grid-row: span 2;
}

.fgroup .scroll {
	max-height: 240px;
	overflow-y: auto;
	padding-right: 6px;
}

@media (max-width: 760px) {
	.filterpanel {
		flex: 1 1 100%;
	}

	.filterpanel .fpanel {
		min-width: 0;
		grid-template-columns: minmax(0, 1fr);
		max-height: 70vh;
		overflow-y: auto;
	}

	.fgroup.tall {
		grid-row: auto;
	}
}

/* ---------- single card layout (no trained) ---------- */

.card-main {
	display: block;
}

.card-main.single {
	display: grid;
	grid-template-columns: 520px 1fr;
	gap: 24px;
	align-items: start;
	margin-bottom: 24px;
}

.card-main.single .arts.one {
	grid-template-columns: 1fr;
	margin-bottom: 0;
}

.card-main.single .split {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.card-main.single {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- character profile banner ---------- */

.dhead.with-banner {
	position: relative;
	overflow: hidden;
	border: none;
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--ring-strong), 0 2px 0 rgba(60, 58, 95, 0.2);
	padding: 0;
	margin-bottom: 24px;
}

.dhead.with-banner .profile-banner {
	position: absolute;
	inset: 0;
	height: 100%;
	overflow: hidden;
}

.dhead.with-banner .profile-banner .art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	opacity: 0.92;
}

.dhead.with-banner .profile-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 50%, #fff 95%);
}
.dhead.with-banner .dhead-content {
	position: relative;
	z-index: 1;
	padding: 148px 20px 16px;
}

/* Intro paragraph under the name */
.dhead .intro {
	margin: 10px 0 0;
	max-width: 60ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--dim);
}

/* ---------- card preview modal ---------- */

.card-modal {
  border: 3px solid #fff;
  border-radius: 12px;
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--panel);
  box-shadow: inset 0 0 0 1.5px rgba(67, 64, 107, 0.14), 0 6px 0 rgba(40, 38, 64, 0.22), 0 24px 64px rgba(0, 0, 0, 0.32);
  animation: modalIn 0.18s ease;
}

.card-modal::backdrop {
  background: rgba(30, 28, 50, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content {
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
  max-height: 90vh;
  overflow: auto;
}

.modal-arts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-arts:has(.trained[style*="display: none"]) {
  grid-template-columns: 1fr;
}

.modal-art {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  background: var(--soft);
}

.modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.modal-meta {
  margin: 0;
  font-size: 13px;
  color: var(--dim);
}

.modal-link {
  font-size: 13px;
  font-weight: 600;
}

/* Round white close button, the kit's IconButton. */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #fff;
  box-shadow: var(--ring), 0 1.5px 0 rgba(67, 64, 107, 0.18);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--soft);
}

@media (max-width: 600px) {
  .modal-arts {
    grid-template-columns: 1fr;
  }
}

/* ---------- card art zoom viewer (detail page) ---------- */

.art.zoomable {
  cursor: zoom-in;
}

dialog.zoom {
  width: min(96vw, 1200px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(67, 64, 107, 0.14), 0 6px 0 rgba(40, 38, 64, 0.22), 0 24px 64px rgba(0, 0, 0, 0.32);
}

dialog.zoom::backdrop {
  background: rgba(30, 28, 50, 0.55);
  backdrop-filter: blur(8px);
}

.zoom-frame {
  display: grid;
  place-items: center;
  padding: 20px;
  min-height: 40vh;
  max-height: calc(92vh - 56px);
  overflow: hidden;
}

.zoom-art {
  max-width: 100%;
  max-height: calc(92vh - 96px);
  transition: transform 0.18s ease;
}

.zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1.5px solid var(--line-soft);
  background: var(--soft);
}

.zoom-cap {
  font-size: 12.5px;
  color: var(--dim);
}

.zoom-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.zoom-btn {
  padding: 6px 11px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  border: none;
  border-radius: var(--r);
  box-shadow: var(--ring);
  cursor: pointer;
  text-decoration: none;
}

.zoom-btn:hover {
  color: var(--link);
}

@media (max-width: 600px) {
  .zoom-cap {
    display: none;
  }

  .zoom-tools {
    justify-content: center;
    width: 100%;
  }
}