/* K-Pop Song Sorter — mobile-first. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #1a1a2e;
	color: #eee;
	font-family: Montserrat, Helvetica, Arial, sans-serif;
	min-height: 100vh;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 14px 14px 40px; }
.accent { color: #ffbcd9; }
.muted { color: #888; }
.hidden { display: none !important; }
a { color: #ffbcd9; }

header { text-align: center; margin-bottom: 14px; }
header h1 { font-weight: 800; font-size: 28px; margin: 8px 0 2px; letter-spacing: 0.5px; }
.counter-line { color: #ffbcd9; margin: 0; font-size: 14px; }

button {
	font-family: inherit;
	font-size: 15px;
	color: #eee;
	background: #26264a;
	border: 1px solid #4a4a7a;
	border-radius: 10px;
	padding: 10px 16px;
	cursor: pointer;
	touch-action: manipulation;
}
button:hover { background: #32325e; }
button:disabled { opacity: 0.45; cursor: default; }
button.big {
	font-size: 17px;
	font-weight: 600;
	padding: 14px 22px;
	background: #c2417e;
	border-color: #d96a9d;
	width: 100%;
}
button.big:hover:not(:disabled) { background: #d44f8e; }
button.ghost { background: transparent; }

/* ------------------------------ selection ------------------------------ */
/* Year shortcut: radio-style pills, "All years" first, newest year next. */
.year-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.year-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	background: #202040;
	border: 1px solid #4a4a7a;
	border-radius: 99px;
}
.year-pill[aria-pressed="true"] { background: #3a2340; border-color: #d96a9d; color: #ffbcd9; }
.year-pill .n { color: #888; font-size: 11px; font-weight: 400; }
.year-pill[aria-pressed="true"] .n { color: #d9a3bf; }
.year-hint { color: #888; font-size: 12px; margin: 0 0 10px; }

.bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.bulk-row button { font-size: 13px; padding: 6px 12px; }
.bulk-label { color: #888; font-size: 12px; margin-left: 4px; }

/* One group per line (kpopsorter-style) — scales to dozens of groups. */
#group-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}
.group-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #202040;
	border: 1px solid #4a4a7a;
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
	font-size: 15px;
}
.group-pill:has(input:checked) { background: #3a2340; border-color: #d96a9d; }
.group-pill input { accent-color: #c2417e; width: 17px; height: 17px; flex-shrink: 0; }
.group-pill .n { margin-left: auto; color: #888; font-size: 12px; flex-shrink: 0; }

/* Per-group Title/B-side boxes, shown while the group is selected. */
.sub-row { display: flex; gap: 8px; margin: 4px 0 2px 26px; }
.sub-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: #1b1b36;
	border: 1px solid #33335c;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	font-size: 13px;
}
.sub-pill:has(input:checked) { border-color: #a5628a; background: #2c1f38; }
.sub-pill input { accent-color: #c2417e; width: 14px; height: 14px; }
.sub-pill .n { color: #888; font-size: 11px; }

.start-panel { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.pool-count { font-size: 15px; color: #ffbcd9; margin: 4px 0; }

/* ------------------------------- sorting ------------------------------- */
.progress-section { text-align: center; margin-bottom: 12px; }
#progress-battle { font-size: 14px; color: #ccc; }
.progressbar {
	position: relative;
	height: 22px;
	background: #121226;
	border: 1px solid #4a4a7a;
	border-radius: 99px;
	overflow: hidden;
	margin-top: 6px;
}
#progress-fill { height: 100%; width: 0%; background: #c2417e; transition: width 0.15s; }
#progress-text {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 600;
}

.battle { display: flex; gap: 10px; margin-bottom: 12px; }
.song-card {
	flex: 1;
	padding: 0 0 10px;
	background: #202040;
	border: 1px solid #4a4a7a;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.song-card:hover { border-color: #d96a9d; background: #26264a; }
.song-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	background: #121226;
	pointer-events: none;
}
.song-card .s-title { font-weight: 600; font-size: 15px; padding: 4px 8px 0; }
.song-card .s-artist { font-size: 13px; color: #ffbcd9; }
.song-card .s-release { font-size: 12px; color: #999; padding: 0 8px; }

.sort-buttons { display: flex; gap: 8px; justify-content: center; }
.sort-buttons button { flex: 1; max-width: 160px; }
.hint { text-align: center; color: #666; font-size: 12px; }

/* ------------------------------- results ------------------------------- */
.time-taken { text-align: center; color: #ccc; font-size: 14px; }
.result-options { text-align: center; margin-bottom: 10px; font-size: 14px; color: #ccc; }
.result-options select {
	font-family: inherit; background: #121226; color: #eee;
	border: 1px solid #4a4a7a; border-radius: 6px; padding: 4px 8px;
}
#results-capture { background: #1a1a2e; padding: 6px; }
#results-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}
.result-card {
	background: #202040;
	border: 1px solid #4a4a7a;
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 8px;
}
.result-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #121226; }
.result-card .r-rank { font-weight: 800; color: #ffbcd9; font-size: 18px; margin-top: 4px; }
.result-card .r-title { font-weight: 600; font-size: 14px; padding: 0 6px; }
.result-card .r-sub { font-size: 12px; color: #999; padding: 0 6px; }

#results-table { display: flex; flex-direction: column; gap: 4px; }
.result-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #202040;
	border: 1px solid #33335c;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 14px;
}
.result-row .r-rank { color: #ffbcd9; font-weight: 700; min-width: 34px; text-align: right; }
.result-row img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: #121226; }
.result-row .r-title { font-weight: 600; }
.result-row .r-sub { color: #999; font-size: 12px; margin-left: auto; text-align: right; }

.finish-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }

.draggable-item { cursor: grab; }
.draggable-item.dragging { opacity: 0.4; }
@keyframes flash-moved {
	0% { border-color: #ffbcd9; box-shadow: 0 0 12px #d96a9d; }
	100% { border-color: #33335c; box-shadow: none; }
}
.just-moved { animation: flash-moved 1.2s ease-out; }

footer { text-align: center; margin-top: 30px; font-size: 13px; }

/* ------------------------------- overlay ------------------------------- */
.overlay {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex; align-items: center; justify-content: center;
	z-index: 10;
	padding: 20px;
}
.overlay-box {
	background: #202040;
	border: 1px solid #d96a9d;
	border-radius: 16px;
	padding: 24px;
	max-width: 380px;
	width: 100%;
	text-align: center;
}
.overlay-box h2 { margin-top: 0; }
.overlay-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

@media (min-width: 560px) {
	header h1 { font-size: 34px; }
	.song-card .s-title { font-size: 17px; }
}