/* Tilia — Elaria palette.
   Pink #E6AEC1 · Gold #C0C070 / #FFFFA0 · Lilac #A5A0AF / #776F87 · Diancie White #D0E0E0 / #FFFFFF */

:root {
	--pink: #E6AEC1;
	--pink-soft: #F4DCE5;
	--pink-deep: #C97F9B;
	--gold: #C0C070;
	--gold-soft: #FFFFA0;
	--lilac: #A5A0AF;
	--lilac-deep: #776F87;
	--ink: #453F52;
	--white: #D0E0E0;
	--white-pure: #FFFFFF;
	--bg: #F2F6F7;
	--card: #FFFFFF;
	--line: #E2E4EC;
	--shadow: 0 2px 10px rgba(119, 111, 135, .12);
	--radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: "Nunito", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main { flex: 1; }

h1, h2, h3 { font-family: "Raleway", sans-serif; color: var(--lilac-deep); line-height: 1.25; }
h1 { font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.4rem; font-weight: 700; margin-top: 2rem; }
h1 .fa-solid, h2 .fa-solid { color: var(--pink); margin-right: .35rem; }

a { color: var(--pink-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.container.narrow { max-width: 760px; }

/* ------------------------------------------------------------------ Nav */

.topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(8px);
	border-bottom: 2px solid var(--pink);
	box-shadow: var(--shadow);
}

.topnav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 54px;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: "Raleway", sans-serif;
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--lilac-deep);
}
.brand:hover { text-decoration: none; color: var(--pink-deep); }

.nav-links {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1;
	flex-wrap: wrap;
}

.nav-links a {
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--lilac-deep);
	font-weight: 600;
	font-size: .92rem;
	white-space: nowrap;
}
.nav-links a:hover { background: var(--pink-soft); text-decoration: none; }
.nav-links a.active { background: var(--pink); color: var(--white-pure); }
.nav-links a i { margin-right: 3px; }
.nav-spacer { flex: 1; }

.nav-login {
	background: #5865F2;
	color: var(--white-pure) !important;
}
.nav-login:hover { background: #4752c4 !important; }

.nav-user { display: inline-flex; align-items: center; gap: 6px; }
.nav-avatar { border-radius: 50%; border: 2px solid var(--pink); }

.nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	font-size: 1.3rem;
	color: var(--lilac-deep);
	cursor: pointer;
	padding: 8px;
}

@media (max-width: 900px) {
	.nav-toggle { display: block; }
	.nav-links {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding-bottom: 10px;
	}
	body.nav-open .nav-links { display: flex; }
	.nav-links a { padding: 10px 12px; }
	.nav-spacer { display: none; }
}

/* ------------------------------------------------------------------ Hero */

.hero {
	position: relative;
	background: url("../images/bg1.png") center / cover no-repeat;
	color: var(--white-pure);
	text-align: center;
	padding: 96px 16px;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(119, 111, 135, .75), rgba(230, 174, 193, .55));
}
.hero > * { position: relative; }
.hero h1 {
	color: var(--white-pure);
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	letter-spacing: .08em;
	margin: 0 0 .3rem;
	text-shadow: 0 2px 12px rgba(69, 63, 82, .6);
}
.hero p {
	font-size: clamp(1.05rem, 3vw, 1.4rem);
	margin: 0 0 1.6rem;
	text-shadow: 0 1px 8px rgba(69, 63, 82, .7);
}

.btn {
	display: inline-block;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--pink);
	color: var(--white-pure);
	font-family: "Nunito", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--shadow);
	transition: transform .12s, background .12s;
}
.btn:hover { background: var(--pink-deep); text-decoration: none; transform: translateY(-1px); }
.btn.btn-gold { background: var(--gold); }
.btn.btn-gold:hover { background: #a8a856; }
.btn.btn-lilac { background: var(--lilac); }
.btn.btn-lilac:hover { background: var(--lilac-deep); }
.btn.btn-discord { background: #5865F2; }
.btn.btn-discord:hover { background: #4752c4; }
.btn.btn-small { padding: 4px 12px; font-size: .85rem; box-shadow: none; }
.btn:disabled { background: var(--lilac); cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------------ Cards */

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 20px 24px;
	margin: 20px 0;
}
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 20px 0;
}
.card-grid .card { margin: 0; }

.stat-card { text-align: center; }
.stat-card .stat-value {
	font-family: "Raleway", sans-serif;
	font-size: 2rem;
	font-weight: 800;
	color: var(--pink-deep);
}
.stat-card .stat-label { color: var(--lilac-deep); font-weight: 600; }
.stat-card i { font-size: 1.4rem; color: var(--gold); }

/* ------------------------------------------------------------------ Tables */

.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); margin: 16px 0; }

table.tilia {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}
table.tilia th {
	background: var(--pink);
	color: var(--white-pure);
	font-family: "Raleway", sans-serif;
	text-align: left;
	padding: 10px 12px;
	white-space: nowrap;
}
table.tilia td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
table.tilia tbody tr:nth-child(even) { background: #FAFBFD; }
table.tilia tbody tr:hover { background: var(--pink-soft); }
table.tilia .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tilia .center { text-align: center; }

.sprite { image-rendering: pixelated; vertical-align: middle; cursor: zoom-in; }

/* ------------------------------------------------------------------ Card binder */

.binder-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}
.binder-tabs a {
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--lilac-deep);
	font-weight: 700;
	font-size: .92rem;
	box-shadow: var(--shadow);
}
.binder-tabs a:hover { background: var(--pink-soft); text-decoration: none; }
.binder-tabs a.active { background: var(--pink); border-color: var(--pink); color: var(--white-pure); }
.binder-tabs .count { opacity: .75; font-weight: 400; }

.binder-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 14px;
	margin: 16px 0;
}
.binder-card {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow);
	padding: 8px;
	text-align: center;
}
.binder-card .card-qty {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	box-shadow: var(--shadow);
}
.binder-card img.card-thumb {
	width: 100%;
	height: auto;
	border-radius: 6px;
	cursor: zoom-in;
	display: block;
	background: var(--white);
}
.binder-card .card-placeholder {
	width: 100%;
	aspect-ratio: 600 / 825;
	border-radius: 6px;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lilac);
	font-size: 1.6rem;
}
.binder-card .card-name { font-size: .82rem; font-weight: 700; margin-top: 6px; line-height: 1.25; }
.binder-card .card-num { font-size: .74rem; color: var(--lilac-deep); }
.binder-card .card-id { font-family: "Courier New", monospace; font-size: .72rem; color: var(--lilac); }
.binder-card .card-id::before { content: "·"; margin: 0 3px 0 1px; color: var(--lilac); }

/* ------------------------------------------------ Card set progress bars */
.set-progress {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px 18px;
	margin: 16px 0;
}
.set-progress h3 { font-size: 1rem; margin-bottom: 12px; }
.progress-row { margin-bottom: 12px; }
.progress-row:last-child { margin-bottom: 0; }
.progress-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: .9rem;
	margin-bottom: 4px;
}
.progress-head a { font-weight: 700; color: var(--lilac-deep); }
.progress-head a:hover { color: var(--pink-deep); text-decoration: none; }
.progress-count {
	color: var(--lilac-deep);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.progress-count .fa-circle-check { color: var(--gold); margin-left: 4px; }
.progress-track {
	height: 10px;
	border-radius: 999px;
	background: var(--pink-soft);
	overflow: hidden;
}
.progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pink), var(--pink-deep));
	transition: width .4s ease;
}
.progress-row.complete .progress-fill { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }

/* ------------------------------------------------------------------ Badges */

.badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
	background: var(--white);
	color: var(--lilac-deep);
}
.badge-form { background: var(--white); }
.badge-shiny { background: var(--gold-soft); color: #7a7420; }
.badge-rift { background: #D9D4F0; color: #4d4477; }
.badge-class { background: var(--pink-soft); color: var(--pink-deep); }
.badge-nick { background: transparent; font-style: italic; }
.badge-marked { background: #CBE8CD; color: #33691E; }
.badge-protected { background: #F5C6C6; color: #99392F; }
.badge-money { background: var(--gold-soft); color: #7a7420; }

/* ------------------------------------------------------------------ Flash */

.flash {
	margin: 16px 0;
	padding: 12px 16px;
	border-radius: var(--radius);
	font-weight: 600;
	box-shadow: var(--shadow);
}
.flash-ok { background: #E3F2E4; color: #2c5e2e; border: 1px solid #b8dcba; }
.flash-error { background: #FBE3E3; color: #8f3232; border: 1px solid #ecc0c0; }
.flash i { margin-right: 6px; }

/* ------------------------------------------------------------------ Forms */

form.inline { display: inline; }

.filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: end;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px 16px;
	margin: 16px 0;
}
.filterbar label { display: flex; flex-direction: column; font-size: .82rem; font-weight: 700; color: var(--lilac-deep); gap: 3px; }
.filterbar .check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }

/* Faceted filters: labelled groups of pill checkboxes. Within a group the
   checked pills are OR-ed; separate groups are AND-ed. */
.filterbar-facets { align-items: flex-start; gap: 14px 18px; }
.filterbar-facets .fb-search { align-self: stretch; min-width: 170px; }
.filtergroup { display: flex; flex-direction: column; gap: 6px; border: none; padding: 0; margin: 0; min-inline-size: 0; }
.filtergroup legend { float: none; width: auto; padding: 0; margin: 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--lilac-deep); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.chip span {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid var(--lilac);
	background: var(--white-pure);
	color: var(--lilac-deep);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	user-select: none;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover span { border-color: var(--pink-deep); }
.chip input:checked + span { background: var(--pink); border-color: var(--pink-deep); color: var(--white-pure); }
.chip input:focus-visible + span { outline: 2px solid var(--pink-deep); outline-offset: 1px; }
.fb-actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }

input[type=text], input[type=number], select {
	font-family: "Nunito", sans-serif;
	font-size: .95rem;
	padding: 7px 10px;
	border: 1px solid var(--lilac);
	border-radius: 8px;
	background: var(--white-pure);
	color: var(--ink);
	max-width: 100%;
}
input[type=text]:focus, input[type=number]:focus, select:focus {
	outline: 2px solid var(--pink);
	border-color: var(--pink);
}

/* ------------------------------------------------------------------ Pagination */

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 20px 0;
}
.page-link {
	min-width: 36px;
	padding: 6px 10px;
	text-align: center;
	border-radius: 8px;
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--lilac-deep);
	font-weight: 700;
}
.page-link:hover { background: var(--pink-soft); text-decoration: none; }
.page-link.active { background: var(--pink); border-color: var(--pink); color: var(--white-pure); }
.page-gap { align-self: center; color: var(--lilac); }

/* ------------------------------------------------------------------ Progress bars */

.progress-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.progress-row .progress-label { width: 110px; font-weight: 700; color: var(--lilac-deep); flex-shrink: 0; }
.progress-row .progress-count { width: 90px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.progress-track { flex: 1; height: 14px; background: var(--white); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--pink), var(--pink-deep)); border-radius: 999px; }
.progress-fill.complete { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }

/* ------------------------------------------------------------------ Wallet */

.wallet {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 20px 0;
}
.wallet .wallet-item {
	flex: 1;
	min-width: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	font-family: "Raleway", sans-serif;
	font-size: 2rem;
	font-weight: 800;
	color: var(--pink-deep);
}
.wallet .wallet-item img { width: 56px; height: 56px; }
.wallet .wallet-item small { display: block; font-family: "Nunito", sans-serif; font-size: .85rem; font-weight: 600; color: var(--lilac-deep); }

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

.profile {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 24px 0 8px;
}
.profile img.avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 3px solid var(--pink);
	background: var(--white-pure);
	object-fit: cover;
}
.profile h1 { margin: 0; }
.profile .profile-meta { color: var(--lilac-deep); font-weight: 600; }
.profile .profile-meta .fa-solid { color: var(--gold); }

/* ------------------------------------------------------------------ Item list */

.category-header {
	background: var(--lilac-deep);
	color: var(--white-pure);
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 8px;
	margin: 22px 0 8px;
}

.item-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px 14px;
	margin: 6px 0;
}
.item-row .item-id { color: var(--lilac); font-weight: 700; min-width: 46px; }
.item-row .item-name { font-weight: 700; flex: 1; min-width: 180px; }
.item-row .item-name button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.item-row .item-name button:hover { color: var(--pink-deep); }
.item-row .item-price { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--pink-deep); white-space: nowrap; }
.item-row form { display: flex; gap: 6px; align-items: center; }
.item-row input[type=number] { width: 76px; }
.item-desc {
	display: none;
	flex-basis: 100%;
	background: var(--pink-soft);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: .92rem;
	white-space: pre-line;
}
.item-desc.open { display: block; }

/* ------------------------------------------------------------------ Modal (sprite zoom) */

.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(69, 63, 82, .7);
	z-index: 200;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}
.modal-overlay.open { display: flex; }
.modal-overlay img {
	max-width: min(420px, 85vw);
	max-height: 80vh;
	background: var(--white-pure);
	border-radius: var(--radius);
	padding: 16px;
}
.modal-overlay img.pixelated { image-rendering: pixelated; }

/* ------------------------------------------------------------------ Dialog modal */

.dialog-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(69, 63, 82, .7);
	z-index: 200;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.dialog-overlay.open { display: flex; }
.dialog-box {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 28px 26px;
	text-align: center;
}
.dialog-box h2 { margin-top: 0; }
.dialog-close {
	position: absolute;
	top: 8px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--lilac);
	cursor: pointer;
}
.dialog-close:hover { color: var(--pink-deep); }

/* ------------------------------------------------------------------ Footer */

.footer {
	margin-top: 40px;
	background: var(--lilac-deep);
	color: var(--white);
	font-size: .9rem;
}
.footer-inner { padding: 20px 16px; text-align: center; }
.footer a { color: var(--gold-soft); margin: 0 8px; }
.footer p { margin: 6px 0; }
.footer-fineprint { color: var(--lilac); font-size: .78rem; }

/* ------------------------------------------------------------------ Misc */

.muted { color: var(--lilac-deep); font-size: .9rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.command { background: var(--white); border-radius: 6px; padding: 1px 7px; font-family: ui-monospace, monospace; font-size: .88rem; color: var(--lilac-deep); font-weight: 700; }