/* "Quelle main gagne ?" comparator tool (quelle-main-gagne.php).
   Reuses contentDark.css's --cd-* variables and common.css's .card sprite
   (data-skin=classic / data-color / data-card) -- no extra image assets. */

.handComparator{
	background:var(--cd-card);border:1px solid var(--cd-border);border-radius:16px;
	padding:22px 18px;margin:18px 0 28px;
}
.handComparator__hands{
	display:flex;align-items:flex-start;justify-content:center;gap:18px;flex-wrap:wrap;
}
.handComparator__hand{flex:1 1 280px;min-width:240px;text-align:center}
.handComparator__hand h3{margin:0 0 12px;color:#fff;font-size:16px}
.handComparator__vs{
	align-self:center;color:var(--cd-gold);font-weight:800;font-size:14px;
	padding:8px 4px;
}
.handComparator__cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.handComparator__cell{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px}
.handComparator__cell .card{
	background-color:rgba(255,255,255,.04);border:1px solid var(--cd-border);
}
.handComparator__cell .card.is-filled{border-color:var(--cd-gold)}
.handComparator__select{
	width:100%;background:rgba(255,255,255,.04);border:1px solid var(--cd-border-strong);
	color:var(--cd-ink);border-radius:8px;padding:5px 4px;font-size:11.5px;
}
.handComparator__select option{color:#1a1a1a;background:#fff}

.handComparator__result{
	margin-top:20px;padding:14px 16px;border-radius:12px;font-weight:700;text-align:center;
	background:rgba(255,255,255,.05);border:1px solid var(--cd-border);color:var(--cd-ink);
}
.handComparator__result--win{border-color:var(--cd-gold);color:var(--cd-gold)}
.handComparator__result--tie{border-color:var(--cd-dim)}
.handComparator__result--error{border-color:var(--cd-red);color:var(--cd-red)}

.handComparator__attribution{
	text-align:center;padding:10px;font-size:12px;color:var(--cd-faint);
}
.handComparator__attribution a{color:var(--cd-gold);text-decoration:none}
.handComparator__attribution a:hover{text-decoration:underline}

@media (max-width:600px){
	.handComparator__vs{width:100%;order:2}
	.handComparator__cell{width:64px}
}