:root {
	--bg: #ffffff;
	--card: #ffffff;
	--line: #e9e6e1;
	--text: #111111;
	--muted: #6c6c6c;
	/* --accent: #f5493e; */
}


.prizes-page {
	padding: 8px 8px 28px;
}

.prize-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 40px;
}

.prize-card {
	overflow: hidden;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	min-height:320px;
	/* box-shadow: 0 4px 14px rgba(17, 24, 39, .05); */
}

.prize-card .step-index {
	/* width: 26px;
	height: 26px; */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	/* background: var(--accent-soft);   */
	background: #F5493E;
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	margin-bottom: 12px;
	padding:10px;
	/* box-shadow: 0 4px 10px rgba(245, 73, 62, .22); */
}

.prize-card-head {
	position: relative;
	padding: 16px 0px 0px 20px;
	/* border-bottom: 1px solid #f0ede8; */
	/* background: linear-gradient(180deg, #fff 0%, #fcfcfc 100%); */
}

.prize-card-head::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--accent);
}

.prize-card-title {
	margin: 0 0 8px;
	font-size: 0.9rem;
	line-height: 1.2;
	padding: 0px 10px 0px 0px;
	/* text-transform: uppercase; */
	letter-spacing: .02em;
	/* font-weight: 800; */
	color: #323232;
}

.prize-card-body {
	/* min-height: 250px; */
	padding: 0px 10px 5px 20px;
	display: flex;
	align-items: left;
	justify-content: left;
	background: #fff;
    font-size: 0.9rem;
	color:#6b6b6b;
}

.prize-copy-wrap {
	max-width: 960px;
	margin: 0 auto;
}

.prize-main-title {
	margin: 0 0 12px;
	font-size: clamp(1.55rem, 2.6vw, 2.1rem);
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: -.02em;
	color: #6a6a6a;
}

.prize-main-copy {
	margin: 0;
	color: var(--muted);
	font-size: .90rem;
	line-height: 1.5;
}

.prize-main-copy + .prize-main-copy {
	margin-top: 8px;
}

.detail-strong {
	color: #454545;
	font-weight: 700;
}

.tv-prize {
	width: 100%;
	max-width: 250px;
	position: relative;
}

.tv-prize-badge {
	position: absolute;
	top: -8px;
	right: -2px;
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 3px solid #2f2f2f;
	background: #fff;
	color: #1f1f1f;
	font-weight: 900;
	font-size: 1rem;
	z-index: 1;
}

.tv-screen {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 2px solid #3f3f3f;
	border-bottom-width: 6px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	background: radial-gradient(circle at 24% 24%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 20%), radial-gradient(circle at 34% 56%, rgba(39,101,215,.95) 0%, rgba(58,116,221,.82) 18%, rgba(20,49,122,.86) 40%, rgba(9,23,58,.98) 72%), radial-gradient(circle at 74% 18%, rgba(255,255,255,.92) 0%, rgba(209,235,255,.54) 18%, rgba(124,181,238,.38) 34%, rgba(24,58,129,.9) 80%), linear-gradient(135deg, #ddefff 0%, #8ebde8 28%, #285dbc 55%, #0f244f 100%);
}

.tv-screen-brand {
	position: absolute;
	right: 12px;
	bottom: 10px;
	font-size: 2rem;
	color: rgba(255,255,255,.95);
	font-weight: 300;
	letter-spacing: -.03em;
}

.tv-stand {
	width: 68px;
	height: 14px;
	margin: 0 auto;
	background: linear-gradient(180deg, #363636 0%, #111 100%);
	clip-path: polygon(12% 100%, 88% 100%, 72% 0, 28% 0);
}

.cards-prize {
	position: relative;
	width: 100%;
	max-width: 220px;
	height: 180px;
}

.gift-card {
	position: absolute;
	width: 150px;
	height: 94px;
	border-radius: 10px;
	background: linear-gradient(155deg, #2d3ea8 0%, #1f2f86 100%);
	box-shadow: 0 14px 24px rgba(24, 39, 107, .18);
	color: #fff;
	padding: 14px 16px;
}

.gift-card.is-top {
	top: 4px;
	right: 10px;
	transform: rotate(-19deg);
}

.gift-card.is-bottom {
	left: 18px;
	bottom: 8px;
	transform: rotate(12deg);
}

.gift-brand {
	display: block;
	font-size: 1.2rem;
	font-style: italic;
	font-weight: 700;
	margin-bottom: 10px;
}

.gift-copy {
	display: block;
	font-size: .54rem;
	line-height: 1.25;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .9;
}

.gift-strip {
	position: absolute;
	left: 16px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	color: #111;
	border-radius: 3px;
	padding: 3px 6px;
	font-size: .5rem;
	font-weight: 900;
	text-transform: uppercase;
}

.gift-strip::before {
	content: 'CR HOY';
	color: #f5493e;
}

.gift-strip::after {
	content: 'PRO';
	color: #fff;
	background: #111;
	border-radius: 2px;
	padding: 1px 3px;
}

.book-prize {
	position: relative;
	width: 170px;
	height: 188px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.book-cover,
.book-pages,
.book-side {
	position: absolute;
	bottom: 0;
	border-radius: 2px;
	box-shadow: 0 10px 18px rgba(0, 0, 0, .08);
}

.book-cover {
	right: 10px;
	width: 96px;
	height: 154px;
	background: linear-gradient(180deg, #2fc16a 0%, #169854 100%);
	transform: skewY(-14deg);
	padding: 18px 10px;
	color: rgba(255,255,255,.94);
	font-weight: 900;
	text-transform: uppercase;
	font-size: .62rem;
	line-height: 1.15;
	letter-spacing: .04em;
}

.book-side {
	left: 26px;
	width: 52px;
	height: 148px;
	background: linear-gradient(180deg, #8bd09c 0%, #5eb67d 100%);
	transform: skewY(14deg);
}

.book-pages {
	left: 67px;
	bottom: 122px;
	width: 54px;
	height: 42px;
	background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.book-lines {
	opacity: .32;
	font-size: .42rem;
	line-height: 1.1;
}

@media (max-width: 980px) {
	.prize-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

@media (max-width: 620px) {
	.page {
		padding: 10px;
	}

	.prizes-page {
		padding: 4px 0 18px;
	}

	.prize-card-body {
		/* min-height: 216px; */

	}

	.prize-main-title {
		font-size: 1.32rem;
	}
}
