.wsw-game-area,
.wsw-buy-box,
.wsw-available-spins,
.wsw-prize-grid,
.wsw-wheel-shell,
.wsw-order-go-to-spin,
.wsw-product-title {
	margin: 0 0 24px;
}

.wsw-product-title h2 {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 2.2vw, 2.4rem);
	line-height: 1.1;
}

.wsw-state-message,
.wsw-available-spins__count {
	padding: 14px 16px;
	border-radius: 14px;
	background: #f5f1e9;
	border: 1px solid #e4d7c5;
	color: #33261b;
}

.wsw-available-spins,
.wsw-order-go-to-spin__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.wsw-go-to-spin.button {
	background: #1f5f4a;
	border-color: #1f5f4a;
	color: #ffffff;
}

.wsw-go-to-spin.button:hover,
.wsw-go-to-spin.button:focus {
	background: #164536;
	border-color: #164536;
	color: #ffffff;
}

.wsw-prize-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

.wsw-prize-card {
	--wsw-prize-accent: #d85b38;
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
	box-shadow: 0 8px 22px rgba(39, 23, 8, 0.08);
	border-top: 6px solid var(--wsw-prize-accent);
}

.wsw-prize-card.is-no-win {
	background: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%);
	border-top-color: #8a8a8a;
}

.wsw-prize-card__label {
	font-weight: 700;
	margin: 0 0 8px;
}

.wsw-prize-card__description {
	font-size: 0.95rem;
	color: #5b4d3d;
}

.wsw-prize-winners {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(51, 38, 27, 0.12);
}

.wsw-prize-winners__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.wsw-prize-winners__title {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.2;
}

.wsw-prize-winners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}

.wsw-winner-tile {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border-radius: 14px;
	background: linear-gradient(180deg, #fffdfa 0%, #f3ede3 100%);
	border: 1px solid rgba(163, 128, 78, 0.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.wsw-winner-tile__badge {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, #fff8d4 0%, #f2c455 55%, #c98a1e 100%);
	color: #5a3904;
	font-size: 0.95rem;
	font-weight: 700;
}

.wsw-winner-tile__content {
	min-width: 0;
}

.wsw-winner-tile__eyebrow {
	font-size: 0.68rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #86643a;
}

.wsw-winner-tile__name {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	color: #2f2418;
	word-break: break-word;
}

.wsw-prize-winners__empty,
.wsw-prize-winners__error {
	padding: 12px 14px;
	border-radius: 12px;
	background: #f5f1e9;
	border: 1px solid #e4d7c5;
	color: #5a4837;
}

.wsw-prize-winners__load-more {
	margin-top: 12px;
	background: #ffffff;
	border-color: #d5c5ad;
	color: #33261b;
}

.wsw-prize-winners__load-more:hover,
.wsw-prize-winners__load-more:focus {
	background: #f4ede2;
	border-color: #c8b291;
	color: #33261b;
}

.wsw-prize-winners__load-more[disabled] {
	opacity: 0.7;
	cursor: wait;
}

.wsw-conditional-wheel {
	margin: 0 auto 24px;
	max-width: 420px;
}

.wsw-conditional-wheel__link,
.wsw-conditional-wheel__image {
	display: block;
}

.wsw-conditional-wheel__image {
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.wsw-wheel-shell {
	--wsw-shell-particle-size: 24px;
	position: relative;
	display: grid;
	gap: 14px;
	justify-items: center;
	padding: 18px;
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, rgba(22, 12, 8, 0.28) 0%, rgba(10, 6, 5, 0.14) 100%);
}

.wsw-wheel-shell::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		conic-gradient(
			from 180deg at 50% 70%,
			rgba(250, 250, 250, 0.9) 0deg,
			rgba(238, 195, 45, 0.95) 72deg,
			rgba(236, 75, 75, 0.9) 144deg,
			rgba(112, 154, 185, 0.88) 216deg,
			rgba(77, 255, 191, 0.9) 288deg,
			rgba(250, 250, 250, 0.9) 360deg
		);
	mask:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0 2px, transparent 2.8px) 50% 50% / var(--wsw-shell-particle-size) var(--wsw-shell-particle-size),
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.8px) 0 0 / 120px 120px,
		linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
	mask-composite: intersect;
	-webkit-mask:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0 2px, transparent 2.8px) 50% 50% / var(--wsw-shell-particle-size) var(--wsw-shell-particle-size),
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.8px) 0 0 / 120px 120px,
		linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
	-webkit-mask-composite: source-in;
	opacity: 0.52;
	filter: saturate(1.05) blur(0.15px);
	pointer-events: none;
	z-index: 0;
	animation: wsw-shell-particles-drift 20s linear infinite;
}

.wsw-wheel-shell::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 22px;
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0, transparent 12%),
		radial-gradient(circle at 70% 65%, rgba(255, 190, 120, 0.07) 0, transparent 14%),
		radial-gradient(circle at 40% 80%, rgba(255, 230, 180, 0.06) 0, transparent 11%),
		linear-gradient(180deg, rgba(18, 10, 6, 0.24) 0%, rgba(12, 7, 5, 0.12) 100%);
	pointer-events: none;
	z-index: 0;
	animation: wsw-shell-particles-twinkle 5s ease-in-out infinite;
}

.wsw-wheel-shell__disc {
	position: relative;
	width: min(100%, 420px);
	aspect-ratio: 1 / 1;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	animation: wsw-wheel-float 4.8s ease-in-out infinite;
	z-index: 1;
}

.wsw-wheel-shell__disc::before {
	content: none;
}

.wsw-wheel-shell__disc::after {
	content: none;
}

.wsw-wheel-shell__spinner {
	position: absolute;
	inset: 0;
	transform-origin: 50% 50%;
	will-change: transform;
	z-index: 1;
}

.wsw-wheel-shell__svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 16px 26px rgba(29, 24, 16, 0.2));
}

.wsw-wheel-shell__pointer {
	position: absolute;
	top: 50%;
	right: -10px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-right: 28px solid #d8891d;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
	z-index: 5;
	animation: wsw-pointer-pulse 1.8s ease-in-out infinite;
}

.wsw-wheel-shell__pointer::before {
	content: none;
}

.wsw-wheel-shell__pointer::after {
	content: none;
}

.wsw-wheel-shell__segment-label {
	font-size: 12px;
	font-weight: 700;
	fill: #ffffff;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	paint-order: stroke;
	stroke: rgba(0, 0, 0, 0.18);
	stroke-width: 1px;
}

.wsw-wheel-shell__center {
	position: absolute;
	inset: 50%;
	width: 140px;
	height: 140px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, #fff7db 0%, #f3b758 45%, #cb7a2c 100%);
	box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.45), 0 12px 20px rgba(0, 0, 0, 0.14);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px;
	border: 0;
	cursor: pointer;
	z-index: 3;
	animation: wsw-center-glow 2.8s ease-in-out infinite;
}

.wsw-wheel-shell__center-label {
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.1;
	color: #30210f;
}

.wsw-wheel-shell__center-subtitle {
	margin-top: 6px;
	font-size: 0.72rem;
	line-height: 1.2;
	color: #5f4520;
}

.wsw-wheel-shell__center.is-disabled,
.wsw-wheel-shell__center:disabled {
	cursor: not-allowed;
	filter: grayscale(0.1);
	opacity: 0.9;
}

.wsw-wheel-shell__message {
	max-width: 520px;
	text-align: center;
	color: #4d4031;
}

.wsw-result-modal[hidden] {
	display: none;
}

.wsw-result-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 2147483647;
}

.wsw-result-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 9, 5, 0.68);
}

@keyframes wsw-wheel-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@keyframes wsw-pointer-pulse {
	0%,
	100% {
		transform: translateY(-50%) scale(1);
	}
	50% {
		transform: translateY(-50%) scale(1.06);
	}
}

@keyframes wsw-sequin-drift {
	0% {
		background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
	}
	100% {
		background-position: 96px 48px, -64px 72px, 54px -38px, -72px -54px, 0 0;
	}
}

@keyframes wsw-sequin-twinkle {
	0%,
	100% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
}

@keyframes wsw-center-glow {
	0%,
	100% {
		box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.45), 0 12px 20px rgba(0, 0, 0, 0.14);
	}
	50% {
		box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.5), 0 16px 26px rgba(0, 0, 0, 0.2), 0 0 24px rgba(244, 187, 90, 0.22);
	}
}

@keyframes wsw-shell-particles-drift {
	0% {
		transform: rotate(0deg) scale(1.04);
	}
	100% {
		transform: rotate(360deg) scale(1.04);
	}
}

@keyframes wsw-shell-particles-twinkle {
	0%,
	100% {
		opacity: 0.45;
	}
	50% {
		opacity: 0.78;
	}
}

.wsw-result-modal__dialog {
	position: relative;
	width: min(92vw, 420px);
	margin: 0;
	padding: 28px 24px;
	border-radius: 22px;
	background: linear-gradient(180deg, #fffdfa 0%, #f3e7cf 100%);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
	text-align: center;
	overflow: hidden;
	z-index: 1;
}

.wsw-result-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	color: #30210f;
	cursor: pointer;
}

.wsw-result-modal__eyebrow {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #86643a;
	margin-bottom: 10px;
}

.wsw-result-modal__message {
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.2;
	color: #2f2418;
}

.wsw-result-modal__reference {
	margin-top: 12px;
	font-size: 0.92rem;
	color: #5b4d3d;
}

.wsw-result-modal__confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wsw-result-modal__confetti-piece {
	position: absolute;
	top: -14px;
	width: 8px;
	height: 18px;
	border-radius: 2px;
	background: #d85b38;
	animation: wsw-confetti-fall 1.6s linear forwards;
}

.wsw-result-modal__confetti-piece:nth-child(3n) {
	background: #f0a63a;
}

.wsw-result-modal__confetti-piece:nth-child(3n + 1) {
	background: #4d79a7;
}

@keyframes wsw-confetti-fall {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
		opacity: 1;
	}

	100% {
		transform: translate3d(0, 260px, 0) rotate(220deg);
		opacity: 0;
	}
}

.wsw-buy-box__form {
	display: grid;
	gap: 14px;
	padding: 18px;
	border-radius: 18px;
	background: #f8f5ef;
	border: 1px solid #eadfce;
}

.wsw-buy-box__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
	gap: 12px;
	align-items: center;
}

.wsw-quantity-control {
	display: grid;
	grid-template-columns: 48px minmax(110px, 160px) 48px;
	align-items: stretch;
	gap: 10px;
	max-width: 100%;
}

.wsw-quantity-control__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d8ccb9;
	background: #ffffff;
	border-radius: 12px;
	font-size: 1.4rem;
	line-height: 1;
	color: #33261b;
	cursor: pointer;
	padding: 0;
	min-height: 48px;
}

.wsw-quantity-control__button:hover,
.wsw-quantity-control__button:focus {
	background: #f3eadf;
}

.wsw-quantity-control__field .quantity,
.wsw-quantity-control__field .qty {
	width: 100%;
	margin: 0;
}

.wsw-quantity-control__field .qty {
	min-height: 48px;
	text-align: center;
}

.wsw-buy-box__form .single_add_to_cart_button {
	justify-self: stretch;
	width: 100%;
	min-height: 48px;
}

.wsw-skill-question {
	padding: 14px;
	border-radius: 14px;
	background: #ffffff;
	border: 1px solid #e8dece;
}

.wsw-skill-question__label,
.wsw-skill-question__text {
	margin: 0 0 10px;
}

.wsw-skill-question__answers {
	display: grid;
	gap: 10px;
}

.wsw-skill-question__answer {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #f6f2ea;
}

.wsw-order-go-to-spin h3 {
	margin: 0 0 12px;
}

.wsw-progress-card,
.wsw-countdown-card {
	display: grid;
	gap: 14px;
	padding: 18px;
	border-radius: 18px;
	background: #f8f5ef;
	border: 1px solid #eadfce;
}

.wsw-progress-card__header,
.wsw-countdown-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.wsw-progress-card__title,
.wsw-countdown-card__title {
	margin: 0;
	font-size: 1.05rem;
}

.wsw-progress-card__summary {
	font-weight: 700;
	color: #5f4520;
}

.wsw-progress-card__bar {
	position: relative;
	height: 16px;
	border-radius: 999px;
	overflow: hidden;
	background: #e6dccd;
}

.wsw-progress-card__fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #cb7a2c 0%, #f3b758 100%);
}

.wsw-progress-card__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.wsw-progress-card__stat {
	padding: 12px;
	border-radius: 14px;
	background: #fffdf9;
	border: 1px solid #eadfce;
}

.wsw-countdown-card__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
}

.wsw-countdown-card__item {
	display: grid;
	gap: 6px;
	padding: 14px 12px;
	border-radius: 14px;
	text-align: center;
	background: #fffdf9;
	border: 1px solid #eadfce;
}

.wsw-countdown-card__value {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: #30210f;
}

.wsw-countdown-card__label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7b5f37;
}

.wsw-countdown-card__expired {
	font-weight: 700;
	color: #8a2a2a;
}

@media (max-width: 767px) {
	.wsw-wheel-shell {
		padding: 12px;
		border-radius: 22px;
	}

	.wsw-wheel-shell__disc {
		padding: 0;
	}

	.wsw-wheel-shell__spinner {
		inset: 0;
	}

	.wsw-wheel-shell__pointer {
		right: -8px;
		border-top-width: 15px;
		border-bottom-width: 15px;
		border-right-width: 24px;
	}

	.wsw-wheel-shell__pointer::before {
		content: none;
	}

	.wsw-wheel-shell__center {
		width: 112px;
		height: 112px;
		padding: 10px;
	}

	.wsw-wheel-shell__center-label {
		font-size: 0.95rem;
	}

	.wsw-wheel-shell__segment-label {
		font-size: 9px;
	}

	.wsw-quantity-control {
		grid-template-columns: 44px minmax(90px, 1fr) 44px;
		max-width: 100%;
	}

	.wsw-buy-box__actions {
		grid-template-columns: 1fr;
	}

	.wsw-progress-card__stats {
		grid-template-columns: 1fr;
	}
}

.wsw-myaccount {
	display: grid;
	gap: 24px;
}

.wsw-myaccount__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wsw-myaccount__nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border: 2px solid #000000;
	border-radius: 999px;
	background: #fbeb77;
	color: #000000;
	font-weight: 600;
	text-decoration: none;
}

.wsw-myaccount__nav-link.is-active,
.wsw-myaccount__nav-link:hover,
.wsw-myaccount__nav-link:focus {
	background: #000000;
	border-color: #000000;
	color: #fbeb77;
}

.wsw-myaccount__panel {
	background: #fbeb77;
	padding: 14px;
	border: 2px solid #000000;
	border-radius: 10px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.wsw-myaccount__panel table {
	margin-bottom: 0;
	background: transparent;
}

.wsw-myaccount__pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.wsw-myaccount__pagination .page-numbers a,
.wsw-myaccount__pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff8bf;
	color: #000000;
	text-decoration: none;
	border: 1px solid #000000;
}

.wsw-myaccount__pagination .page-numbers .current {
	background: #000000;
	color: #fbeb77;
}
