/**
 * Card Collection - geocoins et Lackey Tags
 *
 * Les trois types partagent toute la logique de l'extension, seule
 * leur presentation differe :
 *
 *   carte    64 x 89 mm   rectangle vertical, ratio 0,719
 *   geocoin  35 mm        disque, ratio 1
 *   lackey   50 x 30 mm   rectangle horizontal, ratio 1,667
 *
 * Le type est porte par l'attribut data-kind, la forme par data-shape.
 *
 * @copyright (c) 2024, Verturin
 * @license GNU General Public License, version 2 (GPL-2.0)
 */

/* =============================================================
 * FORMATS PAR TYPE
 * ============================================================= */

[data-kind="geocoin"] {
	--cc-ratio: 1 / 1;
}

[data-kind="lackey"] {
	--cc-ratio: 5 / 3;
}

/* La grille s'adapte : un Lackey Tag est large et bas, un geocoin
   n'a pas besoin de la hauteur d'une carte. */
.cc-grid[data-kind="geocoin"],
.cc-grid[data-kind="lackey"] {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.cc-card[data-kind="geocoin"],
.cc-card[data-kind="lackey"],
.cc-offer-thumb[data-kind="geocoin"],
.cc-pick-thumb[data-kind="geocoin"] {
	aspect-ratio: var(--cc-ratio);
}

/* =============================================================
 * GEOCOINS : rendu circulaire
 * ============================================================= */

[data-shape="round"] {
	border-radius: 50% !important;
}

/* Le liseré de rareté suit la forme */
.cc-card[data-shape="round"]::after,
.cc-card[data-shape="round"]::before {
	border-radius: 50%;
}

/* Reflet metallique discret, pour suggerer le relief */
.cc-card[data-shape="round"]::before,
.cc-flip-face[data-shape="round"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .38), transparent 46%),
		radial-gradient(circle at 70% 78%, rgba(0, 0, 0, .16), transparent 52%);
	pointer-events: none;
}

/* Tranche du jeton */
.cc-card[data-shape="round"],
.cc-flip-face[data-shape="round"],
.cc-sheet-card[data-shape="round"] {
	box-shadow:
		inset 0 0 0 2px rgba(0, 0, 0, .14),
		0 2px 5px rgba(0, 0, 0, .18),
		0 10px 24px rgba(0, 0, 0, .16);
}

/* Le bandeau d'information ne peut pas etre colle au bord d'un disque */
.cc-card[data-shape="round"] .cc-card-info {
	inset: auto 0 0 0;
	padding: 12px 8px 14px;
	border-radius: 0 0 50% 50% / 0 0 26% 26%;
	text-align: center;
}

/* Pastilles repositionnees vers le centre haut */
.cc-card[data-shape="round"] .cc-qty {
	top: 6%;
	right: 12%;
}

.cc-card[data-shape="round"] .cc-flag {
	top: 8%;
	left: 8%;
}

/* Pochette vide ronde dans la planche */
.cc-sheet-empty[data-shape="round"] {
	border-radius: 50%;
}

/* =============================================================
 * LACKEY TAGS : rectangle horizontal
 * ============================================================= */

.cc-card[data-kind="lackey"] {
	border-radius: 8px;
}

/* Un Lackey Tag est perce pour etre accroche : on suggere l'oeillet */
.cc-card[data-kind="lackey"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 5%;
	z-index: 2;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
	pointer-events: none;
}

.cc-card[data-kind="lackey"] .cc-card-info {
	padding-left: 14%;
}

/* =============================================================
 * ONGLETS DE TYPE
 * ============================================================= */

.cc-kinds {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .06);
}

@media (prefers-color-scheme: dark) {
	.cc-kinds { background: rgba(255, 255, 255, .08); }
}

.cc-kind-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: .88em;
	font-weight: 600;
	text-decoration: none;
	color: #6b7280;
	transition: background .15s ease, color .15s ease;
}

.cc-kind-tab:hover {
	color: #1f2937;
	text-decoration: none;
}

.cc-kind-tab.is-current {
	background: #fff;
	color: #1f2937;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

@media (prefers-color-scheme: dark) {
	.cc-kind-tab.is-current {
		background: rgba(255, 255, 255, .16);
		color: #f3f4f6;
	}
}

/* Pictogramme du type, dessine en CSS */
.cc-kind-mark {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	border: 2px solid currentColor;
	opacity: .8;
}

.cc-kind-mark-card    { width: 10px; height: 14px; border-radius: 2px; }
.cc-kind-mark-geocoin { border-radius: 50%; }
.cc-kind-mark-lackey  { width: 15px; height: 9px; border-radius: 2px; }

/* =============================================================
 * FORMULAIRE : zone de depot ronde
 * ============================================================= */

.cc-drop[data-shape="round"] {
	border-radius: 50%;
}

.cc-drop[data-shape="round"] .cc-drop-hint {
	border-radius: 50%;
	padding: 20px;
}

.cc-drop[data-kind="geocoin"],
.cc-drop[data-kind="lackey"] {
	aspect-ratio: var(--cc-ratio);
}

/* =============================================================
 * IMPRESSION
 * ============================================================= */

@media print {
	.cc-sheet-card[data-kind="geocoin"] {
		width: 35mm;
		height: 35mm;
		border-radius: 50%;
	}

	.cc-sheet-card[data-kind="lackey"] {
		width: 50mm;
		height: 30mm;
	}

	.cc-sheet-page[data-kind="geocoin"] {
		grid-template-columns: repeat(5, 35mm);
	}

	.cc-sheet-page[data-kind="lackey"] {
		grid-template-columns: repeat(3, 50mm);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-kind-tab { transition: none; }
}

/* =============================================================
 * CODES TRACKABLES PAR EXEMPLAIRE
 * ============================================================= */

.cc-codes {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 10px;
	overflow: hidden;
}

.cc-code-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding: 11px 14px;
}

.cc-code-row + .cc-code-row {
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.cc-code-note-text {
	flex: 1 1 auto;
	font-size: .86em;
	color: #6b7280;
}

.cc-code-date {
	font-size: .8em;
	color: #9ca3af;
	font-variant-numeric: tabular-nums;
}

.cc-code-remove {
	margin: 0;
}

.cc-code-note {
	flex: 1 1 160px;
	padding: 9px 13px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	font: inherit;
}