input.filterSlider {
	flex: 1; /* let input take remaining space */
	padding: 10px 12px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}
#loginMessage {
	color: #d00;
}

#rlfilters {
	display: inline-block;
	width: 100%;
	padding-top: 0.25em;
	padding-left: 0.25em;
}
#rlfilters.hidden {
	display: none;
}

#gachaCards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px;
}
/* ===================== */
/* Card container        */
/* ===================== */
.gacha-card {
	width: 240px;
	display: flex;
	flex-direction: column;
	background: linear-gradient(#262626, #222);
	border: 1px solid #333;
	border-radius: 12px;
	color: #e6e6e6;
	font-family: "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
	overflow: hidden; /* keep header/background clipped */
}

/* ===================== */
/* Header (top corners only) */
/* ===================== */
.card-header {
	padding: 10px 12px;
	text-align: center;
	font-weight: 600;
	font-size: 0.95rem;
	background: #1e1e1e;
	border-bottom: 1px solid #333;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

/* ===================== */
/* Type highlights       */
/* ===================== */
/* ===================== */
/* Standard cards: very dark muted headers (~10% lightness) */
.gacha-card.standard:nth-child(5n + 1) .card-header {
	background-color: hsl(180, 20%, 10%);
} /* dark teal */
.gacha-card.standard:nth-child(5n + 2) .card-header {
	background-color: hsl(300, 20%, 10%);
} /* dark purple */
.gacha-card.standard:nth-child(5n + 3) .card-header {
	background-color: hsl(60, 20%, 10%);
} /* dark olive */
.gacha-card.standard:nth-child(5n + 4) .card-header {
	background-color: hsl(120, 20%, 10%);
} /* dark green */
.gacha-card.standard:nth-child(5n + 5) .card-header {
	background-color: hsl(30, 20%, 10%);
} /* dark brown */
.gacha-card.standard .card-header {
	color: #e0e0e0; /* slightly lighter muted text */
	font-weight: 600;
}

/* ===================== */
/* Kernel cards: ultra-subtle muted blue, same darkness as other cards */
.gacha-card.kernel {
	background: linear-gradient(
		#212429,
		/* very dark, mostly neutral with tiny hint of blue */ #1c1e23
			/* slightly darker bottom */
	);
	border: 1px solid #333; /* subtle edge like other cards */
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); /* subtle depth */
}

.gacha-card.kernel .card-header {
	background-color: #1a2e4f; /* slightly stronger dark blue header for readability */
	color: #66ccff;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* subtle 3D lift */
	border-bottom: 1px solid #13203b; /* subtle separation from body */
}

.gacha-card.limited {
	background: linear-gradient(
		#26231c,
		/* very dark brown top — mostly neutral, just a hint of gold */ #1f1c16
			/* darker bottom */
	);
	border: 1px solid #333; /* subtle edge */
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); /* subtle depth */
}

/* ===================== */
/* Limited cards: flat dark brown for gold text readability */
.gacha-card.limited .card-header {
	background-color: #553800;
	color: gold;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Overview header: distinct but muted */
.gacha-card.overview .card-header {
	background-color: #3a3a3a; /* slightly brighter than body, visible but not bright */
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* subtle 3D effect */
	border-bottom: 1px solid #333; /* subtle separation */
}

/* ===================== */
/* Overview cards: brighter flat gray header for contrast */
.gacha-card.overview .card-header {
	background-color: #444; /* brighter than card body */
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* ===================== */
/* Status / Error cards  */
/* ===================== */

.gacha-card.status {
	width: 100%; /* span full container */
	max-width: 600px; /* keep it readable */
	margin: 40px auto; /* center with breathing room */

	background: linear-gradient(#1f1f1f, #1b1b1b);
	border-radius: 14px;
	border: 1px solid #444;

	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);

	text-align: center;
	opacity: 1;
}

/* Inner content */
.gacha-card.status .card-body {
	padding: 28px 24px;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #e6e6e6;
	white-space: pre-line; /* allow \n in messages */
}

/* Info (neutral) */
.gacha-card.status.info {
	border-color: #555;
}

.gacha-card.status.info .card-body {
	color: #d0d0d0;
}

/* Error (stronger, but not obnoxious) */
.gacha-card.status.error {
	border-color: #c44;
	background: linear-gradient(#241a1a, #1d1515);
}

.gacha-card.status.error .card-body {
	color: #ffb3b3;
}

/* ===================== */
/* Stats rows            */
/* ===================== */
.card-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	font-size: 0.85rem;
	background: #1f1f1f;
	border: 1px solid #333;
	border-radius: 6px;
}

.row span {
	font-weight: 600;
	color: #ffffff;
}

/* ===================== */
/* 6★ pulls              */
/* ===================== */
.sixstar-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 10px 10px;
	/* no border-radius here */
}

.sixstar-item {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	font-size: 0.75rem;
	background: #1b1b1b;
	border: 1px solid #333;
	border-radius: 6px; /* only local radius */
	color: #d0d0d0;
	white-space: nowrap;
}

.sixstar-pity {
	min-width: 1.6em;
	text-align: right;
	font-weight: 600;
	color: #ffcc66;
}

/* Container next to sliderBox */
.infoContainer {
	display: inline-block;
	position: relative;
	margin-left: 10px; /* spacing from sliderBox */
	vertical-align: top;
}

/* Info icon */
.infoIcon {
	font-size: 20px;
	color: #2fac78;
	cursor: pointer;
}

/* Info panel (manual) */
.infoPanel {
	display: none; /* hidden by default */
	position: absolute;
	top: 100%; /* below the icon */
	left: 0;
	width: 300px; /* adjust as needed */
	max-width: 90vw;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 12px;
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	z-index: 50;
	font-size: 14px;
	line-height: 1.4;
}

/* Show panel on hover */
.infoContainer:hover .infoPanel {
	display: block;
}

/* Optional: style scrollable content if manual is long */
.infoPanel p {
	max-height: 200px;
	overflow-y: auto;
}
/* Keep inline with your sliderBox style */
.infoContainer {
	display: inline-block;
	vertical-align: top;
	margin-left: 0.5em; /* space from sliderBox */
	position: relative;
}

.infoIcon {
	font-size: 1.2rem;
	color: var(--main-text-color);
	cursor: pointer;
	display: inline-block;
	line-height: 1.2rem;
}

/* Panel hidden by default */
.infoPanel {
	display: none;
	background: var(--main-background-color);
	border: 1px solid white;
	border-radius: 0.2em;
	padding: 0.5em;
	max-width: 25em;
	font-size: 1rem;
	line-height: 1.2rem;
	margin-top: 0.25em;
}

/* Show panel on hover */
.infoContainer:hover .infoPanel {
	display: block;
}
/* Make filterButtons a flex container so children align center vertically */
#filterButtons {
	display: flex;
	flex-wrap: wrap;
	align-items: center; /* <-- centers sliderBox and icon vertically */
	gap: 0.25em; /* optional spacing between items */
}

.infoContainer {
	display: inline-flex; /* inline + flex */
	align-items: center; /* vertically center icon with slider */
	position: relative;
}

.infoIcon {
	font-size: 1.2rem;
	color: var(--main-text-color);
	cursor: pointer;
	display: inline-block;
	line-height: 1;
}

.infoPanel {
	display: none;
	background: var(--main-background-color);
	border: 1px solid white;
	border-radius: 0.2em;
	padding: 0.5em;
	max-width: 25em;
	font-size: 1rem;
	line-height: 1.2rem;
	margin-top: 0.25em;
}

.infoContainer:hover .infoPanel {
	display: block;
}

/* ===================== */
/* Stat rows: default dark */
.gacha-card .card-rows .row {
	background-color: #2f2f2f; /* base dark for all rows */
	border: 1px solid #333;
	border-radius: 6px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	font-size: 0.85rem;
	color: #e6e6e6;
}

/* ===================== */
/* Stat rows: dark muted but clearly distinct from card background */
.gacha-card .card-rows .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	font-size: 0.85rem;
	border: 1px solid #333;
	border-radius: 6px;
	color: #e6e6e6;
}

.gacha-card .card-rows .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	font-size: 0.85rem;
	border-radius: 6px;
	color: #e6e6e6;
	background-color: rgba(70, 70, 70, 0.7);
	border: 1px solid rgba(50, 50, 50, 0.7);
}

.gacha-card .card-rows .row:nth-child(2) {
	background-color: rgba(65, 65, 65, 0.7);
}

.gacha-card .card-rows .row:nth-child(3) {
	background-color: rgba(60, 60, 60, 0.7); /* visible everywhere */
}

.gacha-card .card-rows .row span {
	font-weight: 600;
	color: #ffffff;
}

.sliderbox {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.gacha-card.status.loading .card-body {
	display: flex;
	align-items: center;
	justify-content: center; /* ← THIS was missing */
	gap: 8px;
}

.gacha-card.status.loading .card-body::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid #aaa;
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	flex-shrink: 0;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.button.danger {
	color: red;
	border-color: red;
}

.button.danger:hover {
	background: red;
}
.gacha-card .card-rows .row span[data-rarity] {
	color: rgb(var(--base-color));
}
#rlfilters img {
	height: 1.4em;
}
.button.logout {
	background: #9225;
}
img.yostar {
	filter: invert(100%);
}