/* Default card size lives here (not on .card) so any ancestor -- a .hand, the
   table -- can re-scale a whole group by overriding --card-width. If .card
   re-declared it, those overrides would be ignored. */
:root { --card-width: 7rem; }

/* Structural base shared by every variant. Look-and-feel lives in the variant
   blocks below, so adding a new style = one CardVariant + one `.card--<name>`
   block here. The component never changes. Everything scales from --card-width. */
.card {
	position: relative;
	width: var(--card-width);
	aspect-ratio: 5 / 7; /* standard playing-card proportion */
	border-radius: calc(var(--card-width) * 0.08);

	font-family: "Georgia", "Times New Roman", serif;
	user-select: none;
}

/* Text colour is variant-independent. */
.card--red { color: #c0392b; }
.card--black { color: #1a1a1a; }

/* ---- structure: corner index + centre pip ---- */
.card__index {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	font-weight: 600;
}
.card__index--tl { top: 6%; left: 7%; }
.card__index--br { right: 7%; bottom: 6%; transform: rotate(180deg); }

.card__rank { font-size: calc(var(--card-width) * 0.20); }
.card__index .card__suit { font-size: calc(var(--card-width) * 0.15); }

.card__pip {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: calc(var(--card-width) * 0.5);
}

/* ============================ CLASSIC ============================ */
.card--classic {
	background: #fdfdfb;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.card--classic.card--back {
	background: repeating-linear-gradient(45deg, #2c3e7a 0 8px, #24316a 8px 16px);
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(0, 0, 0, 0.2),
		inset 0 0 0 5px #f5f5f5;
}

/* ============================= GLASS ============================= */
.card--glass {
	/* Fully transparent body. Override --glass-border for a solid-colour edge,
	   e.g. style={{ "--glass-border": "#ffd700" }}. */
	background: transparent;
	border: 1.5px solid var(--glass-border, rgba(255, 255, 255, 0.55));
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	overflow: hidden; /* clip the reflection blocks to the rounded shape */
}

/* Silly diagonal "light reflection" blocks. */
.card--glass::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		125deg,
		transparent 0 17%,
		rgba(255, 255, 255, 0.16) 17% 31%,
		transparent 31% 43%,
		rgba(255, 255, 255, 0.10) 43% 50%,
		transparent 50% 100%
	);
	pointer-events: none;
}

/* Keep symbols legible over whatever shows through the glass. */
.card--glass .card__index,
.card--glass .card__pip {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Glass back: same transparent body + reflections, just a slightly stronger edge. */
.card--glass.card--back {
	border-color: var(--glass-border, rgba(255, 255, 255, 0.7));
}

/* ============================== HAND ============================= */
/* Cards stack diagonally to the right. --stack-x is a fraction of card WIDTH
   (must exceed the index width, ~0.30, so the top-left index stays visible);
   --stack-y is a fraction of card HEIGHT (the gentle rise). --stack-dir is the
   vertical sign: -1 stacks up off a bottom-anchored first card (default), +1
   stacks down off a top-anchored one. The container is sized from --card-count so
   it wraps the whole fan and never collapses. */
.hand {
	--stack-x: 0.32;
	--stack-y: 0.13;
	--stack-dir: -1;

	position: relative;
	width: calc(var(--card-width) * (1 + (var(--card-count) - 1) * var(--stack-x)));
	height: calc(var(--card-width) * 1.4 * (1 + (var(--card-count) - 1) * var(--stack-y)));
}

/* Dealer-style fan: anchor the first card at the top and stack downward. */
.hand--down { --stack-dir: 1; }

.hand__slot {
	position: absolute;
	left: 0;
	bottom: 0;
	/* X shifts by a fraction of the card's width, Y by a fraction of its height in
	   the --stack-dir direction (translate %s are per-axis: X uses width, Y height). */
	transform: translate(
		calc(var(--i) * var(--stack-x) * 100%),
		calc(var(--i) * var(--stack-y) * var(--stack-dir) * 100%)
	);
	z-index: var(--i);
}

/* When stacking down, anchor the first card at the top instead of the bottom. */
.hand--down .hand__slot { top: 0; bottom: auto; }

/* ---- demo layout (temporary; replaced by <Table>) ---- */
.hands {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	align-items: center;
}
.hand-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.hand-label {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8rem;
	opacity: 0.85;
}