/*
 * The Friendli Challenge, per docs/design/pages/friendli-challenge.dc.html:
 * a dark page from the header to the footer, the painted table with its
 * edges masked into it, and the card.
 */

body.fe-challenge {
	background: var(--fe-warm-dark-2);
}

.challenge {
	color: #f6e9d2;
	background: var(--fe-warm-dark-2);
}

.challenge :focus-visible {
	outline-color: var(--fe-gold);
}

/* ---------- Title ---------- */

.challenge-heading {
	background: linear-gradient(180deg, var(--fe-ink) 0%, #170818 55%, var(--fe-warm-dark-2) 100%);
	color: var(--fe-white);
	padding: 56px var(--fe-gutter) 36px;
	text-align: center;
}

.challenge-heading__title {
	margin: 0 0 18px;
	font-size: clamp(2.75rem, 1.75rem + 4vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.challenge-heading__lead {
	margin: 0;
	font-family: var(--fe-font-reading);
	font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.6;
	color: #eadfcf;
}

.challenge-heading__lead em {
	color: var(--fe-gold);
}

/* ---------- The table ---------- */

.challenge-table {
	padding: 0 0 24px;
}

.fc-scene {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
	aspect-ratio: 1672 / 941;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-composite: intersect;
}

.fc-scene__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.fc-candle {
	position: absolute;
	left: 1%;
	top: -6%;
	width: 16%;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(circle, rgba(255, 190, 110, 0.35), rgba(255, 170, 90, 0.12) 40%, transparent 70%);
	animation: fc-candle 3.2s ease-in-out infinite;
}

@keyframes fc-candle {
	0%, 100% { opacity: 0.85; transform: scale(1); }
	30% { opacity: 1; transform: scale(1.04); }
	55% { opacity: 0.75; transform: scale(0.98); }
	80% { opacity: 0.95; transform: scale(1.02); }
}

/* A real button over each painted deck: no visible box, a dashed ring on keyboard focus. */
.fc-deck {
	position: absolute;
	left: var(--l);
	top: var(--t);
	width: var(--w);
	height: var(--h);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 16px;
}

.fc-deck:disabled {
	cursor: default;
}

.fc-deck:focus {
	outline: none;
}

.fc-deck:focus-visible::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 18px;
	border: 1px dashed rgba(232, 200, 130, 0.8);
}

.fc-dust {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
}

@media (max-width: 760px) {
	.fc-scene {
		aspect-ratio: 919 / 1710;
	}

	.fc-deck {
		left: var(--lm);
		top: var(--tm);
		width: var(--wm);
		height: var(--hm);
	}

	.fc-candle {
		left: -6%;
		top: -4%;
		width: 34%;
	}
}

/* ---------- The card ---------- */

.fc-veil {
	position: fixed;
	cursor: pointer; /* a click anywhere but the card puts it back */
	-webkit-tap-highlight-color: transparent; /* no grey flash over the whole window on iOS */
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 16px;
	background: radial-gradient(ellipse at 50% 50%, rgba(25, 10, 14, 0.5), rgba(12, 4, 8, 0.85));
	-webkit-backdrop-filter: blur(5px) saturate(0.9);
	backdrop-filter: blur(5px) saturate(0.9);
	animation: fc-fade 0.4s ease both;
}

.fc-veil[hidden] {
	display: none;
}

@keyframes fc-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fc-hint {
	margin: 0;
	min-height: 1.3em; /* the line is empty on the front: the card stays put when it turns */
	line-height: 1.3;
	font-family: var(--fe-font-reading);
	font-style: italic;
	font-size: clamp(17px, 1.8vw, 23px);
	color: #fbebd0;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
	text-align: center;
}

.fc-played {
	perspective: 1800px;
}

.fc-played.from-0 { animation: fc-deal0 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
.fc-played.from-1 { animation: fc-deal1 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both; }
.fc-played.from-2 { animation: fc-deal2 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both; }

@keyframes fc-deal0 {
	0% { opacity: 0; transform: translate(-120%, 20px) scale(0.62) rotate(-4deg); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@keyframes fc-deal1 {
	0% { opacity: 0; transform: translate(0, 30px) scale(0.62); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@keyframes fc-deal2 {
	0% { opacity: 0; transform: translate(120%, 20px) scale(0.62) rotate(4deg); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

/* As wide as the design (310px) where the window allows, never taller than the window leaves room for. */
.fc-flipper {
	display: block;
	width: min(310px, 80vw, calc((100vh - 170px) * 5 / 7.2));
	width: min(310px, 80vw, calc((100dvh - 170px) * 5 / 7.2));
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	border-radius: 14px;
	container-type: inline-size; /* card text scales with the card */
}

.fc-flipper:focus-visible {
	outline: 2px solid var(--fe-gold);
	outline-offset: 8px;
}

.fc-flip-inner {
	position: relative;
	display: grid;
	aspect-ratio: 5 / 7.2;
	transition: transform 1s cubic-bezier(0.2, 0.75, 0.2, 1);
	transform-style: preserve-3d;
}

.fc-flipper.is-flipped .fc-flip-inner {
	transform: rotateY(180deg);
}

.fc-face {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 7cqi, 22px);
	text-align: center;
	padding: 14% 13%;
	border-radius: 14px;
	font-family: var(--fe-font-serif);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.65);
}

.fc-face--front {
	color: #3b1a3c;
	background: radial-gradient(ellipse at 50% 45%, #f4ead6 0%, #eadbbe 60%, #d2bc93 100%);
}

.fc-face--back {
	transform: rotateY(180deg);
	color: #f6e9d2;
	background: radial-gradient(ellipse at 50% 40%, #5a2a55 0%, #3e1b3e 55%, #2a1029 100%);
}

.fc-face .grain,
.fc-face .crumple {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 14px;
	pointer-events: none;
}

.fc-face .grain {
	mix-blend-mode: multiply;
	opacity: 0.55;
}

.crumple--front {
	mix-blend-mode: multiply;
	opacity: 0.55;
}

.crumple--back {
	mix-blend-mode: overlay;
	opacity: 0.5;
}

.fc-face .frame {
	position: absolute;
	inset: 5.5%;
	border: 1px solid #b8914a;
	border-radius: 6px;
	pointer-events: none;
}

.fc-face .frame::after {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(184, 145, 74, 0.45);
	border-radius: 4px;
}

.fc-face .corner {
	position: absolute;
	width: 12%;
	height: auto;
	color: #b8914a;
	pointer-events: none;
}

.c-tl { left: 7%; top: 5%; }
.c-tr { right: 7%; top: 5%; transform: scaleX(-1); }
.c-bl { left: 7%; bottom: 5%; transform: scaleY(-1); }
.c-br { right: 7%; bottom: 5%; transform: scale(-1, -1); }

.fc-face .star {
	position: relative;
	flex: 0 0 auto;
	color: #b8914a;
}

.fc-word {
	position: relative;
	font-size: 14px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #5e4420; /* darker than the design's #8a6a3a for contrast at 14px */
}

.fc-face--back .fc-word {
	color: var(--fe-gold-muted);
}

.fc-text {
	position: relative;
	font-size: clamp(15px, 8.7cqi, 27px); /* 27px on the 310px card */
	line-height: 1.4;
	letter-spacing: 0.005em;
}

.fc-face--back .fc-text {
	font-size: clamp(15px, 9cqi, 28px);
	line-height: 1.38;
}

.fc-turn {
	position: relative;
	font-size: 14px;
	color: #5e4420; /* darker than the design's #8a6a3a for contrast at 14px */
}

.fc-ornament {
	position: relative;
	font-size: 9px;
	letter-spacing: 9px;
	color: #b8914a;
}

.fc-again {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: var(--fe-pill);
	border: 1px solid rgba(232, 200, 130, 0.7);
	background: rgba(20, 8, 10, 0.45);
	color: #f6e9d2;
	font-family: var(--fe-font-reading);
	font-size: 19px;
	cursor: pointer;
}

.fc-again:hover {
	background: rgba(232, 200, 130, 0.12);
}

/* Out of sight for pointer and touch, who put the card back by clicking beside it (D67); shown at the foot of the window on keyboard focus. */
.fc-again:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fc-again:focus-visible {
	position: absolute;
	bottom: 10px; /* clear of the card even in a short window, where the card ends about 60px above the bottom */
	left: 50%;
	transform: translateX(-50%);
	outline: 2px solid var(--fe-gold);
	outline-offset: 4px;
}

.fc-noscript {
	max-width: 46rem;
	margin: 24px auto 0;
	padding: 0 var(--fe-gutter);
	font-family: var(--fe-font-reading);
	font-size: 1.125rem;
}

/* ---------- Closing ---------- */

.challenge-closing {
	background: linear-gradient(180deg, var(--fe-warm-dark-2) 0%, var(--fe-ink-deep) 100%);
	padding: 64px var(--fe-gutter) 120px;
	text-align: center;
}

.challenge-closing__inner {
	max-width: 720px;
	margin: 0 auto;
}

.challenge-closing__title {
	margin: 0 0 18px;
	font-size: clamp(2.25rem, 1.75rem + 2vw, 2.875rem);
	line-height: 1.12;
	color: #f6e9d2;
}

.challenge-closing__text {
	margin: 0 auto 36px;
	max-width: 30em;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: #cdbba8;
}

.challenge .challenge-closing__cta {
	min-height: 48px;
	padding: 0 26px;
	background: var(--fe-gold);
	color: var(--fe-on-gold);
	font-size: 1.0625rem;
}

.challenge .challenge-closing__cta:hover {
	background: var(--fe-gold-pale);
	color: var(--fe-on-gold);
}

@media (prefers-reduced-motion: reduce) {
	.fc-played,
	.fc-veil,
	.fc-candle {
		animation: none !important;
	}

	.fc-flip-inner {
		transition: none;
	}
}