/* Boss cards: own implementation of a holographic card. The light position
   (--px/--py, 0..100), the rotation (--rx/--ry, deg) and the strength (--o)
   come from js/cards/tilt.js. Rarity sets the holo, the grade (S/SS/SSS)
   sets the frame material. */
@property --spin {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.card {
	--px: 50;
	--py: 50;
	--rx: 0;
	--ry: 0;
	--o: 0.25;
	--hyp: 0;
	--card-radius: 4.5cqi;
	--frame: linear-gradient(160deg, #c9ced8, #8d95a3);
	--panel-a: #fffdf8;
	--panel-b: #f1e9dc;
	--card-ink: #1f1a2e;
	container-type: inline-size;
	width: 100%;
	aspect-ratio: 5 / 7;
	perspective: 900px;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.card-tilt,
.card-flip {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.card-tilt {
	transform: rotateY(calc(var(--rx) * 1deg)) rotateX(calc(var(--ry) * 1deg));
	will-change: transform;
}

.card-face,
.card-back {
	position: absolute;
	inset: 0;
	border-radius: var(--card-radius);
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 2cqi 6cqi rgba(20, 16, 30, 0.35), 0 0 0 0.8cqi #14101f;
}

.card-face {
	padding: 3cqi;
	background: var(--frame);
	background-size: 250% 250%;
	background-position: calc(var(--px) * 1%) calc(var(--py) * 1%);
}

.card-frame {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 2cqi;
	padding: 3cqi;
	border-radius: 2.5cqi;
	background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
	color: var(--card-ink);
	font-family: var(--font, sans-serif);
	line-height: 1.15;
	overflow: hidden;
}

.card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-weight: 800;
}

.card-name {
	font-size: 9cqi;
	letter-spacing: -0.02em;
}

.card-hp {
	font-size: 7cqi;
	color: #c2262e;
}

.card-hp small {
	font-size: 0.55em;
	margin-right: 0.15em;
}

.card-art {
	position: relative;
	flex: 1;
	min-height: 0;
	border: 0.8cqi solid #14101f;
	border-radius: 2cqi;
	overflow: hidden;
	isolation: isolate;
}

.portrait {
	display: block;
	width: 100%;
	height: 100%;
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: 1.5cqi;
}

.card-title {
	margin: 0;
	font-size: 5cqi;
	font-weight: 700;
}

.card-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2cqi;
	margin: 0;
	font-size: 3.8cqi;
}

.card-stats dt {
	font-weight: 700;
	opacity: 0.7;
}

.card-stats dd {
	margin: 0.5cqi 0 0;
}

.gauge {
	display: flex;
	gap: 0.8cqi;
}

.gauge i {
	flex: 1;
	height: 2.2cqi;
	border-radius: 1cqi;
	background: rgba(20, 16, 30, 0.15);
}

.gauge i.on {
	background: #ff6b1a;
}

.card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2cqi;
	font-size: 3.6cqi;
	font-weight: 700;
}

.card-rarity {
	display: flex;
	align-items: center;
	gap: 0.6cqi;
}

.card-rarity i {
	width: 2.6cqi;
	height: 2.6cqi;
	transform: rotate(45deg);
	border: 0.5cqi solid #14101f;
	background: var(--gem, #9aa4b1);
}

.card-level {
	opacity: 0.7;
	text-align: right;
}

.card-grade {
	position: absolute;
	right: 6cqi;
	top: 17cqi;
	z-index: 3;
	padding: 0 2cqi;
	border: 0.8cqi solid #14101f;
	border-radius: 2cqi;
	background: var(--grade-bg, #ffb300);
	color: #14101f;
	font-family: var(--font, sans-serif);
	font-size: 8cqi;
	font-weight: 800;
	line-height: 1.2;
	transform: rotate(8deg);
	box-shadow: 0.8cqi 0.8cqi 0 #14101f;
}

/* ---------- Light layers ---------- */

.layer-holo,
.layer-sparkle,
.layer-glare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
}

/* Rainbow bands that slide with the tilt, over dark diagonal foil lines. */
.layer-holo {
	display: none;
	background-image:
		repeating-linear-gradient(110deg, hsl(0 100% 72%) 0%, hsl(50 100% 66%) 4%, hsl(120 90% 66%) 8%, hsl(190 100% 66%) 12%, hsl(260 100% 74%) 16%, hsl(320 100% 72%) 20%, hsl(360 100% 72%) 24%),
		repeating-linear-gradient(-45deg, #0e152e 0%, hsl(180 10% 62%) 3.8%, hsl(180 30% 70%) 4.5%, hsl(180 10% 62%) 5.2%, #0e152e 10%, #0e152e 12%);
	background-size: 400% 400%, 300% 300%;
	background-position: calc(var(--px) * 1.6%) calc(var(--py) * 1.2%), calc(var(--px) * 1%) calc(var(--py) * 1%);
	background-blend-mode: hard-light;
	mix-blend-mode: color-dodge;
	filter: brightness(0.62) contrast(1.6) saturate(1.3);
	opacity: calc(var(--o) * 0.9);
}

/* Glitter: several dot grids moving at different speeds (parallax), only
   visible around the light thanks to the mask. */
.layer-sparkle {
	display: none;
	z-index: 2;
	background-image:
		radial-gradient(circle, #fff 0 0.9px, transparent 1.5px),
		radial-gradient(circle, #fff6c2 0 0.7px, transparent 1.3px),
		radial-gradient(circle, #c9f2ff 0 1.1px, transparent 1.8px);
	background-size: 23px 19px, 13px 17px, 37px 31px;
	background-position:
		calc(var(--px) * -0.4px) calc(var(--py) * -0.3px),
		calc(var(--px) * 0.3px) calc(var(--py) * 0.5px),
		calc(var(--px) * -0.2px) calc(var(--py) * 0.2px);
	mask-image: radial-gradient(circle at calc(var(--px) * 1%) calc(var(--py) * 1%), #000 0, rgba(0, 0, 0, 0.6) 25%, transparent 60%);
	-webkit-mask-image: radial-gradient(circle at calc(var(--px) * 1%) calc(var(--py) * 1%), #000 0, rgba(0, 0, 0, 0.6) 25%, transparent 60%);
	mix-blend-mode: screen;
	opacity: var(--o);
}

/* Specular light that follows the finger. */
.layer-glare {
	z-index: 4;
	background: radial-gradient(farthest-corner circle at calc(var(--px) * 1%) calc(var(--py) * 1%), rgba(255, 255, 255, 0.75) 8%, rgba(255, 255, 255, 0.25) 26%, rgba(0, 0, 0, 0.45) 95%);
	mix-blend-mode: overlay;
	opacity: calc(var(--o) * 0.75);
}

/* ---------- Rarities ---------- */

.card.r-common {
	--gem: #9aa4b1;
	--frame: linear-gradient(160deg, #d9dde4, #8d95a3);
}

.card.r-rare {
	--gem: #2f8bff;
	--frame: linear-gradient(160deg, #7fc3ff, #2459c9);
}

.card.r-rare .card-art .layer-holo {
	display: block;
}

.card.r-epic {
	--gem: #b14dff;
	--frame: linear-gradient(160deg, #e3a6ff, #6a24b8);
	--panel-a: #241a3a;
	--panel-b: #120d22;
	--card-ink: #f7f0ff;
}

.card.r-epic .card-art .layer-holo,
.card.r-epic .layer-sparkle {
	display: block;
}

.card.r-epic .gauge i:not(.on) {
	background: rgba(255, 255, 255, 0.18);
}

/* Legendary: full art card, the illustration covers the whole frame. */
.card.r-legendary {
	--gem: #ffcf33;
	--frame: linear-gradient(160deg, #ffe7a3, #c88412);
	--card-ink: #fff8ec;
}

.card.r-legendary .card-frame {
	justify-content: space-between;
	background: none;
}

.card.r-legendary .card-art {
	position: absolute;
	inset: 0;
	border: 0;
	border-radius: 0;
	z-index: 0;
}

.card.r-legendary .card-art::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 16, 30, 0.55) 0%, transparent 22%, transparent 55%, rgba(20, 16, 30, 0.85) 80%);
}

.card.r-legendary .card-head,
.card.r-legendary .card-body {
	position: relative;
	z-index: 1;
	text-shadow: 0 0.5cqi 1.5cqi rgba(0, 0, 0, 0.6);
}

.card.r-legendary .card-hp {
	color: #ffcf33;
}

.card.r-legendary .layer-holo,
.card.r-legendary .layer-sparkle {
	display: block;
}

.card.r-legendary .layer-holo {
	z-index: 1;
	opacity: calc(var(--o) * 0.65);
	/* Keep the face readable: the foil is strongest around the character. */
	mask-image: radial-gradient(ellipse 38% 30% at 50% 42%, rgba(0, 0, 0, 0.2) 40%, #000 100%);
	-webkit-mask-image: radial-gradient(ellipse 38% 30% at 50% 42%, rgba(0, 0, 0, 0.2) 40%, #000 100%);
}

.card.r-legendary .gauge i:not(.on) {
	background: rgba(255, 255, 255, 0.25);
}

/* ---------- Grade variants (frame material) ---------- */

.card.v-S {
	--grade-bg: linear-gradient(135deg, #f4f7fa, #9aa4b1);
	--frame: linear-gradient(125deg, #7d8794 0%, #f4f7fa 22%, #9aa4b1 40%, #ffffff 55%, #8d96a3 72%, #eef2f6 88%, #7d8794 100%);
}

.card.v-SS {
	--grade-bg: linear-gradient(135deg, #fff3c4, #ffb300);
	--frame: linear-gradient(125deg, #9a6510 0%, #ffe08a 20%, #c8901f 38%, #fff6d1 54%, #b97c12 72%, #ffe9a6 88%, #9a6510 100%);
}

.card.v-SS .layer-sparkle,
.card.v-SSS .layer-sparkle {
	display: block;
}

/* SSS "secret": rainbow gold frame turning around the card, holo everywhere. */
.card.v-SSS {
	--grade-bg: linear-gradient(110deg, #ff3d7f, #ffc21a, #19b7f0);
}

.card.v-SSS .card-face {
	background: conic-gradient(from var(--spin), #ffcf33, #ff3d7f, #b14dff, #19b7f0, #2fd67b, #ffcf33);
	animation: card-spin 4s linear infinite;
}

.card.v-SSS .card-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(110deg, hsl(45 100% 70%) 0%, hsl(330 100% 75%) 6%, hsl(200 100% 70%) 12%, hsl(45 100% 70%) 18%);
	background-size: 300% 300%;
	background-position: calc(var(--px) * 1.4%) calc(var(--py) * 1%);
	mix-blend-mode: color-dodge;
	filter: brightness(0.7) contrast(1.4);
	opacity: calc(var(--o) * 0.45);
}

.card.v-SSS .card-art .layer-holo {
	display: block;
}

@keyframes card-spin {
	to {
		--spin: 360deg;
	}
}

/* ---------- Back (cards not won yet) ---------- */

.card-back {
	display: grid;
	place-items: center;
	transform: rotateY(180deg);
	background:
		radial-gradient(rgba(20, 16, 30, 0.18) 1.2px, transparent 1.4px) 0 0 / 3.5cqi 3.5cqi,
		repeating-conic-gradient(from 0deg at 50% 50%, #ff6b1a 0 10deg, #ff8c42 10deg 20deg);
	border: 3cqi solid #14101f;
}

.card.is-back .card-back {
	transform: none;
}

.card-back-logo {
	padding: 2cqi 4cqi;
	border: 1cqi solid #14101f;
	border-radius: 4cqi;
	background: #fff5e3;
	color: #1f1a2e;
	font-family: var(--font, sans-serif);
	font-size: 9cqi;
	font-weight: 800;
	transform: rotate(-6deg);
	box-shadow: 1.2cqi 1.2cqi 0 #14101f;
}

.card-back-logo b {
	margin-left: 1cqi;
	color: #ff6b1a;
}

/* Reveal: the card flips from its back when opened. */
.card.reveal .card-flip {
	animation: card-reveal 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes card-reveal {
	from {
		transform: rotateY(-180deg) scale(0.7);
	}
}

@media (prefers-reduced-motion: reduce) {
	.card.v-SSS .card-face,
	.card.reveal .card-flip {
		animation: none;
	}
}

/* ---------- Collection page ---------- */

.col-title {
	font-size: var(--fs-5);
	line-height: 1.1;
}

.col-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5) var(--sp-4);
}

.thumb {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-1);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: center;
}

.thumb .card {
	touch-action: auto;
	margin-bottom: var(--sp-2);
}

.thumb .card-tilt {
	will-change: auto;
}

.thumb-name {
	font-weight: 800;
	font-size: var(--fs-3);
	line-height: 1.1;
}

.thumb-meta {
	font-size: var(--fs-1);
	color: var(--muted);
	line-height: 1.25;
}

.viewer {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff5e3;
}

.viewer::backdrop {
	background: radial-gradient(circle at 50% 40%, rgba(40, 30, 60, 0.92), rgba(8, 6, 14, 0.97));
}

.viewer-body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
}

.viewer-close {
	position: absolute;
	top: calc(var(--sp-4) + env(safe-area-inset-top));
	right: var(--sp-4);
	color: var(--text);
}

.viewer-card {
	width: min(78vw, 340px, calc((100dvh - 260px) * 5 / 7));
}

.variants {
	display: flex;
	gap: var(--sp-2);
}

.variants button {
	min-width: 56px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	border: var(--bw) solid #050408;
	border-radius: var(--r-full);
	background: #26222f;
	color: #f7f0e4;
	font-weight: 800;
	cursor: pointer;
}

.variants button[aria-checked='true'] {
	background: var(--accent);
	color: var(--on-accent);
}

.viewer-gyro {
	background: #26222f;
	color: #f7f0e4;
	border-color: #050408;
	box-shadow: 4px 4px 0 #050408;
	font-size: var(--fs-2);
	min-height: 44px;
}

.viewer-msg {
	min-height: 1.5em;
	text-align: center;
	color: #d8cfe2;
}