* {
	box-sizing: border-box;
}

.lucky13 {
	position: relative;
	max-width: 780px;
	margin: 100px auto;
	padding: 18px;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	background:
		radial-gradient(circle at 17% 18%, rgba(129, 140, 248, .24), transparent 25rem),
		radial-gradient(circle at 88% 12%, rgba(232, 63, 78, .12), transparent 24rem),
		linear-gradient(135deg, #ffffff 0%, #f8fafc 42%, #eef2ff 100%);
	color: #1e293b;
	text-align: center;
	font-family: "Inter", "Open Sans", Arial, Helvetica, sans-serif;
	box-shadow: 0 20px 60px rgba(15, 23, 42, .12);
	overflow: hidden;
}

.lucky13:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(99,102,241,.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(99,102,241,.07) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: linear-gradient(180deg, rgba(0,0,0,.50), transparent 82%);
	pointer-events: none;
}

.lucky13__confetti {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 80;
}

.lucky13__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.15);
	color: rgba(255,255,255,.82);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lucky13__logo {
	position: relative;
	z-index: 2;
	width: min(100%, 260px);
	margin: 0 auto 10px;
}

.lucky13__logo img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 12px 24px rgba(15,23,42,.10));
}

.lucky13__head h1 {
	margin: 0;
	font-size: clamp(34px, 6vw, 58px);
	line-height: .95;
	font-weight: 950;
	letter-spacing: 0;
	color: #0f172a;
	text-shadow: 0 18px 46px rgba(99,102,241,.14);
}

.lucky13__head h1 span {
	color: #e83f4e;
	text-shadow: 0 10px 26px rgba(232,63,78,.18);
}

.lucky13__head p {
	margin: 8px 0 14px;
	font-size: clamp(15px, 2vw, 19px);
	color: #64748b;
}

.lucky13__board {
	position: relative;
	height: 590px;
	border-radius: 18px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 8%, rgba(99,102,241,.20), transparent 28%),
		radial-gradient(circle at 50% 92%, rgba(232,63,78,.10), transparent 26%),
		linear-gradient(180deg, rgba(255,255,255,.92), rgba(238,242,255,.72));
	border: 1px solid #dbe3f4;
	box-shadow:
		inset 0 0 44px rgba(255,255,255,.54),
		inset 0 -34px 65px rgba(99,102,241,.08),
		0 18px 50px rgba(99,102,241,.12);
}

.lucky13__board:before {
	content: "";
	position: absolute;
	inset: 16px;
	border-radius: 16px;
	border: 1px solid rgba(99,102,241,.12);
	pointer-events: none;
	z-index: 2;
}

.lucky13__top-glow {
	position: absolute;
	left: 50%;
	top: 25px;
	width: 210px;
	height: 120px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(99,102,241,.24), rgba(232,63,78,.12) 42%, transparent 72%);
	filter: blur(2px);
	z-index: 1;
}

.lucky13__token {
	position: absolute;
	top: 30px;
	left: 50%;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 28%, #fff 0%, #fee2e2 12%, transparent 27%),
		linear-gradient(135deg, #ff7b81, #e83f4e 60%, #b91c1c);
	display: flex;
	align-items: center;
		justify-content: center;
	font-size: 30px;
	font-weight: 950;
	z-index: 18;
	box-shadow:
		0 0 24px rgba(232,63,78,.58),
		0 0 60px rgba(232,63,78,.28),
		inset 0 0 15px rgba(255,255,255,.38);
	will-change: transform, top, left, opacity;
	transform: translate(-50%, -150px) scale(.82);
	opacity: 0;
	pointer-events: none;
}

.lucky13__token.is-loaded {
	animation: lucky13TokenInsert .78s cubic-bezier(.2, 1.35, .3, 1) forwards;
}

@keyframes lucky13TokenInsert {
	0% {
		opacity: 0;
		transform: translate(-50%, -150px) scale(.7) rotate(-45deg);
	}
	68% {
		opacity: 1;
		transform: translate(-50%, 10px) scale(1.1) rotate(10deg);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, 0) scale(1) rotate(0deg);
	}
}

.lucky13__dropper {
	position: absolute;
	left: 50%;
	top: 68px;
	transform: translateX(-50%);
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid rgba(255,255,255,.34);
	border-radius: 999px;
	padding: 17px 34px 17px 18px;
	color: #fff;
	background:
		linear-gradient(135deg, rgba(99,102,241,.98), rgba(129,140,248,.98) 52%, rgba(232,63,78,.96)),
		radial-gradient(circle at top, rgba(255,255,255,.36), transparent 46%);
	cursor: pointer;
	box-shadow:
		0 18px 45px rgba(99,102,241,.24),
		0 0 54px rgba(232,63,78,.24),
		inset 0 1px 0 rgba(255,255,255,.36);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	animation: lucky13DropperPulse 1.8s ease-in-out infinite;
}

@keyframes lucky13DropperPulse {
	0%, 100% { box-shadow: 0 18px 45px rgba(99,102,241,.24), 0 0 54px rgba(232,63,78,.24), inset 0 1px 0 rgba(255,255,255,.36); }
	50% { box-shadow: 0 22px 58px rgba(99,102,241,.34), 0 0 75px rgba(232,63,78,.36), inset 0 1px 0 rgba(255,255,255,.48); }
}

.lucky13__dropper:hover {
	transform: translateX(-50%) translateY(-3px) scale(1.025);
	box-shadow:
		0 20px 48px rgba(99,102,241,.34),
		0 0 54px rgba(232,63,78,.30),
		inset 0 1px 0 rgba(255,255,255,.46);
	filter: brightness(1.06);
}

.lucky13__dropper:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: translateX(-50%);
}

.lucky13__dropper-token {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 35% 25%, #fff, transparent 28%),
		linear-gradient(135deg, #ff7b81, #e83f4e);
	color: #fff;
	font-size: 24px;
	font-weight: 950;
	box-shadow: inset 0 0 10px rgba(255,255,255,.45), 0 0 20px rgba(232,63,78,.45);
}

.lucky13__dropper strong,
.lucky13__dropper em {
	display: block;
	text-align: left;
	font-style: normal;
}

.lucky13__dropper strong {
	font-size: 23px;
	line-height: 1;
}

.lucky13__dropper em {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 650;
	color: rgba(255,255,255,.80);
}

.lucky13__pegs {
	position: absolute;
	inset: 145px 66px 154px;
	z-index: 6;
}

.lucky13__peg {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, #eef2ff 45%, #818cf8);
	box-shadow: 0 0 11px rgba(99,102,241,.35), 0 5px 10px rgba(15,23,42,.10);
}

.lucky13__slots {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 6px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	z-index: 8;
}

.lucky13__slot {
	position: relative;
	min-height: 112px;
	padding: 12px 7px 10px;
	border-radius: 20px 20px 15px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 900;
	font-size: 13px;
	line-height: 1.05;
	border: 1px solid rgba(255,255,255,.78);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.30),
		inset 0 -24px 30px rgba(0,0,0,.18),
		0 17px 30px rgba(15,23,42,.14);
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
	overflow: visible;
}

.lucky13__slot:before {
	content: "";
	position: absolute;
	top: -20px;
	left: 8%;
	width: 84%;
	height: 34px;
	background: inherit;
	border: 1px solid rgba(255,255,255,.24);
	transform: perspective(115px) rotateX(48deg);
	border-radius: 17px 17px 5px 5px;
	opacity: .93;
	box-shadow: inset 0 0 14px rgba(255,255,255,.12);
	z-index: 1;
}

.lucky13__slot:after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 17px;
	background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 45%);
	pointer-events: none;
	z-index: 1;
}

.lucky13__slot-icon,
.lucky13__slot strong,
.lucky13__slot span {
	position: relative;
	z-index: 2;
}

.lucky13__slot-icon {
	min-height: 24px;
	font-size: 21px;
	font-weight: 950;
	line-height: 1;
	text-shadow: 0 2px 8px rgba(0,0,0,.32);
}

.lucky13__slot span {
	font-size: 12px;
	font-weight: 700;
	color: rgba(255,255,255,.80);
}

.lucky13__slot--purple { background: linear-gradient(180deg, #6366f1, #4338ca); }
.lucky13__slot--blue { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.lucky13__slot--gold { background: linear-gradient(180deg, #86BE27, #4d7c0f); }
.lucky13__slot--green { background: linear-gradient(180deg, #009CE2, #0369a1); }
.lucky13__slot--pink { background: linear-gradient(180deg, #ff6168, #e83f4e); }

.lucky13__slot.is-winning {
	z-index: 12;
	transform: translateY(-13px) scale(1.055);
	box-shadow:
		0 0 38px rgba(255,255,255,.44),
		0 0 75px rgba(232,63,78,.42),
		inset 0 1px 0 rgba(255,255,255,.36);
	filter: brightness(1.22);
	animation: lucky13BucketWin .82s ease-in-out infinite alternate;
}

.lucky13__slot.is-winning:before,
.lucky13__slot.is-winning:after,
.lucky13__slot.is-winning .lucky13__slot-icon,
.lucky13__slot.is-winning strong,
.lucky13__slot.is-winning span {
	z-index: 14;
}

@keyframes lucky13BucketWin {
	from { filter: brightness(1.16); }
	to { filter: brightness(1.42); }
}

.lucky13__result {
	margin-top: 14px;
	font-size: clamp(19px, 3vw, 25px);
	font-weight: 900;
	min-height: 34px;
	text-shadow: 0 0 18px rgba(168,85,247,.45);
	color: #4f46e5;
}

.lucky13__freewheel {
	margin-top: 14px;
	padding: 25px;
	border-radius: 18px;
	background: rgba(255,255,255,.86);
	border: 1px solid #dbe3f4;
	box-shadow: 0 18px 44px rgba(15,23,42,.08);
}

.lucky13__freewheel h3 {
	margin: 0;
	font-size: 28px;
	color: #0f172a;
}

.lucky13__freewheel-sub {
	margin: 8px 0 18px;
	color: #64748b;
}

.lucky13-wheel {
	position: relative;
	width: 260px;
	height: 260px;
	margin: 18px auto 22px;
}

.lucky13-wheel__pointer {
	position: absolute;
	top: -5px;
	left: 50%;
	margin-left: -14px;
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 26px solid #e83f4e;
	z-index: 6;
	filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

.lucky13-wheel__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 62px;
	height: 62px;
	margin-left: -31px;
	margin-top: -31px;
	border-radius: 50%;
	background: linear-gradient(135deg, #fef3c7, #f59e0b);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 950;
	font-size: 26px;
	z-index: 5;
	box-shadow: 0 0 22px rgba(245,158,11,.65), inset 0 0 10px rgba(255,255,255,.4);
}

.lucky13-wheel__disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		conic-gradient(
			#6366f1 0deg 45deg,
			#3b82f6 45deg 90deg,
			#86BE27 90deg 135deg,
			#009CE2 135deg 180deg,
			#818cf8 180deg 225deg,
			#0ea5e9 225deg 270deg,
			#ff6168 270deg 315deg,
			#64748b 315deg 360deg
		);
	border: 8px solid rgba(255,255,255,.24);
	box-shadow: 0 0 38px rgba(168,85,247,.48);
	transition: transform 4s cubic-bezier(.12,.72,.16,1);
}

.lucky13-wheel__disc div {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 82px;
	margin-left: -41px;
	margin-top: -16px;
	font-size: 9px;
	font-weight: 950;
	line-height: 1.04;
	transform-origin: 41px 16px;
	text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.lucky13-wheel__disc div:nth-child(1) { transform: rotate(22.5deg) translateY(-91px); }
.lucky13-wheel__disc div:nth-child(2) { transform: rotate(67.5deg) translateY(-91px); }
.lucky13-wheel__disc div:nth-child(3) { transform: rotate(112.5deg) translateY(-91px); }
.lucky13-wheel__disc div:nth-child(4) { transform: rotate(157.5deg) translateY(-91px); }
.lucky13-wheel__disc div:nth-child(5) { transform: rotate(202.5deg) translateY(-91px); }
.lucky13-wheel__disc div:nth-child(6) { transform: rotate(247.5deg) translateY(-91px); }
.lucky13-wheel__disc div:nth-child(7) { transform: rotate(292.5deg) translateY(-91px); }
.lucky13-wheel__disc div:nth-child(8) { transform: rotate(337.5deg) translateY(-91px); }

.lucky13__button {
	border: 0;
	border-radius: 999px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 950;
	color: #fff;
	background: linear-gradient(135deg, #6366f1, #818cf8);
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(124,58,237,.42);
}

.lucky13__button:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.lucky13__claimbar[hidden],
.lucky13-modal[hidden],
.lucky13-modal__claim[hidden],
.lucky13-modal__code[hidden] {
	display: none;
}

.lucky13__claimbar {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 12px auto 0;
	padding: 16px;
	border: 1px solid #dbe3f4;
	border-radius: 16px;
	background: rgba(255,255,255,.88);
	box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

.lucky13__claimbar div {
	min-width: 0;
	text-align: left;
}

.lucky13__claimbar strong,
.lucky13__claimbar span {
	display: block;
}

.lucky13__claimbar strong {
	color: #0f172a;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.15;
}

.lucky13__claimbar span {
	margin-top: 4px;
	color: #4f46e5;
	font-size: 14px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.lucky13__claimbar a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, #6366f1, #818cf8);
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	text-decoration: none;
	box-shadow: 0 12px 26px rgba(99,102,241,.20);
}

.lucky13-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: grid;
	place-items: center;
	padding: 18px;
}

.lucky13-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 8, 10, .72);
	backdrop-filter: blur(9px);
}

.lucky13-modal__confetti {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.lucky13-modal__panel {
	position: relative;
	z-index: 2;
	width: min(100%, 470px);
	padding: 32px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 20px;
	background:
		radial-gradient(circle at 50% 0%, rgba(129,140,248,.25), transparent 15rem),
		linear-gradient(145deg, #ffffff, #f8fafc 55%, #eef2ff);
	text-align: center;
	box-shadow: 0 30px 95px rgba(15,23,42,.32);
	animation: lucky13ModalIn .24s ease-out;
}

@keyframes lucky13ModalIn {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.lucky13-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	background: #ffffff;
	color: #64748b;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.lucky13-modal__icon {
	width: 82px;
	height: 82px;
	margin: 0 auto 16px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #ff7b81, #e83f4e);
	color: #fff;
	font-size: 25px;
	font-weight: 950;
	box-shadow: 0 0 36px rgba(232,63,78,.24);
}

.lucky13-modal__kicker {
	margin: 0 0 8px;
	color: #6366f1;
	font-size: 12px;
	font-weight: 950;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.lucky13-modal h2 {
	margin: 0;
	font-size: clamp(28px, 6vw, 42px);
	line-height: 1.02;
	letter-spacing: 0;
	color: #0f172a;
}

.lucky13-modal__message {
	margin: 14px 0 0;
	color: #64748b;
	font-size: 16px;
	line-height: 1.45;
}

.lucky13-modal__code {
	margin: 18px auto 0;
	padding: 13px 14px;
	border: 1px dashed #a5b4fc;
	border-radius: 8px;
	background: #eef2ff;
	color: #4f46e5;
	font-size: 17px;
	font-weight: 950;
	letter-spacing: .04em;
}

.lucky13-modal__claim {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin-top: 22px;
	padding: 0 24px;
	border-radius: 999px;
	background: linear-gradient(135deg, #6366f1, #818cf8);
	color: #fff;
	font-size: 16px;
	font-weight: 950;
	text-decoration: none;
	box-shadow: 0 14px 32px rgba(99,102,241,.24);
}

@media screen and (max-width: 700px) {
	body {
		padding: 16px 8px;
	}

	.lucky13 {
		padding: 18px;
		border-radius: 26px;
	}

	.lucky13__board {
		height: 535px;
		border-radius: 26px;
	}

	.lucky13__dropper {
		top: 62px;
		width: calc(100% - 44px);
		justify-content: center;
		padding: 13px 14px;
	}

	.lucky13__dropper strong {
		font-size: 18px;
	}

	.lucky13__pegs {
		inset: 140px 34px 134px;
	}

	.lucky13__slots {
		left: 8px;
		right: 8px;
		bottom: 6px;
		gap: 5px;
	}

	.lucky13__slot {
		font-size: 10px;
		min-height: 88px;
		padding: 12px 4px 10px;
		border-radius: 15px;
	}

	.lucky13__slot:before {
		top: -17px;
		height: 30px;
		border-radius: 10px 10px 3px 3px;
	}

	.lucky13__slot-icon {
		font-size: 18px;
	}

	.lucky13__slot span {
		font-size: 9px;
	}

	.lucky13-wheel {
		width: 235px;
		height: 235px;
	}

	.lucky13__claimbar {
		align-items: stretch;
		flex-direction: column;
	}

	.lucky13__claimbar a {
		width: 100%;
	}

	.lucky13-modal__panel {
		padding: 28px 18px;
	}
}