/* Isolated presentation for the Custom Wheel page template. */

body.acg-custom-page-view {
	background-color: #120018;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 0.8px, transparent 1.3px),
		radial-gradient(circle, rgba(255, 203, 226, 0.15) 0 1px, transparent 1.6px),
		radial-gradient(circle, rgba(210, 166, 255, 0.12) 0 0.7px, transparent 1.2px),
		radial-gradient(ellipse at 16% 18%, rgba(173, 25, 98, 0.38) 0, rgba(114, 16, 91, 0.16) 22%, transparent 48%),
		radial-gradient(ellipse at 82% 30%, rgba(89, 25, 145, 0.42) 0, rgba(72, 15, 106, 0.18) 24%, transparent 51%),
		radial-gradient(ellipse at 46% 72%, rgba(180, 28, 111, 0.3) 0, rgba(105, 11, 90, 0.13) 21%, transparent 48%),
		linear-gradient(145deg, #0c0012 0%, #26002f 48%, #100016 100%);
	background-position: 0 0, 29px 43px, 73px 19px, center, center, center, center;
	background-size: 53px 53px, 89px 89px, 149px 149px, auto, auto, auto, auto;
	background-attachment: fixed;
	color: #ffffff;
}

body.acg-custom-page-view::before {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background-image:
		conic-gradient(from 202deg at 50% 24%, transparent 0deg 7deg, rgba(255, 123, 204, 0.13) 8deg 11deg, transparent 12deg 24deg, rgba(194, 102, 255, 0.1) 25deg 30deg, transparent 31deg 43deg, rgba(255, 177, 224, 0.08) 44deg 47deg, transparent 48deg 64deg, rgba(190, 91, 242, 0.09) 65deg 69deg, transparent 70deg 360deg),
		conic-gradient(from 88deg at 50% 24%, transparent 0deg 9deg, rgba(255, 139, 211, 0.1) 10deg 14deg, transparent 15deg 29deg, rgba(182, 93, 245, 0.09) 30deg 35deg, transparent 36deg 51deg, rgba(255, 189, 228, 0.07) 52deg 55deg, transparent 56deg 360deg),
		radial-gradient(ellipse at 50% 24%, rgba(255, 59, 165, 0.25) 0, rgba(174, 35, 154, 0.16) 16%, rgba(82, 20, 117, 0.08) 31%, transparent 52%);
	mix-blend-mode: screen;
	opacity: 0.82;
}

body.acg-custom-page-view #page {
	position: relative;
	z-index: 1;
	background: transparent;
}

body.acg-custom-page-view #content,
body.acg-custom-page-view .site,
body.acg-custom-page-view .site-content,
body.acg-custom-page-view .content-area,
body.acg-custom-page-view .inside-article {
	background: transparent;
}

body.acg-custom-page-view .site-header {
	background: rgba(17, 0, 24, 0.9);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 10px 30px rgba(8, 0, 12, 0.25);
	backdrop-filter: blur(12px);
}

body.acg-custom-page-view .site-header .main-title a,
body.acg-custom-page-view .main-navigation .main-nav ul li a,
body.acg-custom-page-view .menu-toggle {
	color: #ffffff;
}

body.acg-custom-page-view .main-navigation,
body.acg-custom-page-view .main-navigation ul ul {
	background: transparent;
}

body.acg-custom-page-view .main-navigation .main-nav ul li a:hover,
body.acg-custom-page-view .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body.acg-custom-page-view .main-navigation .main-nav ul li a:focus-visible,
body.acg-custom-page-view .menu-toggle:hover,
body.acg-custom-page-view .menu-toggle:focus-visible {
	background: rgba(189, 35, 91, 0.24);
	color: #ffd5e6;
}

body.acg-custom-page-view .site-info {
	background: rgba(13, 0, 19, 0.92);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: #fcecf3;
}

body.acg-custom-page-view .site-info a {
	color: #ffd5e6;
}

@media (min-width: 769px) {
	body.acg-custom-page-view:not(.acg-header-ad-active) .inside-header {
		min-height: 0;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	body.acg-custom-page-view:not(.acg-header-ad-active) .main-navigation .main-nav ul li a,
	body.acg-custom-page-view:not(.acg-header-ad-active) .main-navigation .menu-bar-item > a {
		line-height: 36px;
	}
}

.acg-custom {
	--acg-custom-berry: #bd235b;
	--acg-custom-plum: #4b173c;
	--acg-custom-muted: #dbc8d5;
	--acg-custom-gold: #f6c94c;
	--acg-custom-focus: #ffe067;
	--acg-custom-panel: rgba(24, 3, 34, 0.8);
	--acg-custom-border: rgba(255, 171, 208, 0.34);
	box-sizing: border-box;
	max-width: 1320px;
	min-width: 0;
	margin: clamp(1rem, 3vw, 2.5rem) auto;
	padding: clamp(0.75rem, 3vw, 2.25rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
	color: #ffffff;
	background: transparent;
	overflow-wrap: anywhere;
}

.acg-custom *,
.acg-custom *::before,
.acg-custom *::after {
	box-sizing: border-box;
}

.acg-custom .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.acg-custom [data-custom-wheel] {
	min-width: 0;
}

.acg-custom h1,
.acg-custom h2,
.acg-custom h3 {
	color: #ffffff;
}

.acg-custom h1 {
	margin: 0 0 0.6rem;
	font-size: clamp(2rem, 5vw, 3.65rem);
	line-height: 1.08;
	text-wrap: balance;
}

.acg-custom h2 {
	margin-top: 0;
	font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.acg-custom h3 {
	margin-top: 0;
	font-size: 1.15rem;
}

.acg-custom button,
.acg-custom input,
.acg-custom textarea {
	font: inherit;
}

.acg-custom button {
	min-height: 44px;
	border: 2px solid #c84a82;
	border-radius: 0.65rem;
	background: rgba(25, 2, 35, 0.84);
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.acg-custom button:hover:not(:disabled) {
	border-color: #ff9fc6;
	background: rgba(111, 17, 71, 0.9);
}

.acg-custom button:disabled {
	border-color: rgba(216, 199, 209, 0.4);
	background: rgba(35, 10, 43, 0.72);
	color: #d8c7d1;
	cursor: not-allowed;
	opacity: 0.64;
}

.acg-custom a:focus-visible,
.acg-custom button:focus-visible,
.acg-custom input:focus-visible,
.acg-custom textarea:focus-visible,
.acg-custom summary:focus-visible {
	outline: 3px solid var(--acg-custom-focus);
	outline-offset: 3px;
}

.acg-custom-copy {
	min-width: 0;
	text-align: center;
}

.acg-custom-adult-note {
	margin: 0 0 0.35rem;
	color: #ffb9d4;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.acg-custom-intro {
	margin: 0 auto 0.9rem;
	max-width: 44rem;
	color: var(--acg-custom-muted);
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.6;
}

.acg-custom-benefits {
	margin: 0;
	color: #ffe0eb;
	font-weight: 700;
}

.acg-custom-benefits span {
	padding: 0 0.25em;
	color: var(--acg-custom-gold);
}

.acg-custom-presets,
.acg-custom-editor,
.acg-custom-result,
.acg-custom-safety-note,
.acg-custom-info,
.acg-custom-examples {
	border: 1px solid var(--acg-custom-border);
	border-radius: 0.85rem;
	background: var(--acg-custom-panel);
	box-shadow: 0 10px 26px rgba(7, 0, 12, 0.24);
}

.acg-custom-presets,
.acg-custom-editor,
.acg-custom-safety-note,
.acg-custom-result {
	margin-top: 1rem;
	padding: clamp(1rem, 2.5vw, 1.4rem);
}

.acg-custom-preset-buttons,
.acg-custom-editor-actions,
.acg-custom-actions,
.acg-custom-scenario-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
}

.acg-custom-preset {
	padding: 0.6rem 0.9rem;
}

.acg-custom-preset.is-active {
	border-color: #ffb3d1;
	background: #861b4b;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(236, 61, 136, 0.65);
}

.acg-custom-preset-description {
	margin: 1rem 0 0.4rem;
	color: #fcecf3;
}

.acg-custom-preset-help,
.acg-custom-help,
.acg-custom-count {
	margin: 0.4rem 0 0;
	color: var(--acg-custom-muted);
}

.acg-custom-editor label {
	display: block;
	margin-top: 1rem;
	font-weight: 700;
}

.acg-custom-editor input[type="text"],
.acg-custom-editor textarea {
	width: 100%;
	margin-top: 0.35rem;
	border: 1px solid rgba(255, 171, 208, 0.5);
	border-radius: 0.55rem;
	background: rgba(10, 0, 16, 0.72);
	color: #ffffff;
}

.acg-custom-editor input[type="text"] {
	min-height: 44px;
	padding: 0.6rem 0.75rem;
}

.acg-custom-editor textarea {
	min-height: 10rem;
	padding: 0.75rem;
	resize: vertical;
}

.acg-custom-error {
	min-height: 1.5em;
	margin: 0.45rem 0 0;
	color: #ffd1e2;
	font-weight: 700;
}

.acg-custom-editor-actions {
	margin-top: 1rem;
}

.acg-custom-editor-actions button,
.acg-custom-scenario-actions button {
	padding: 0.6rem 0.9rem;
}

.acg-custom-wheel-stage {
	position: relative;
	width: min(100%, 430px);
	margin: clamp(1rem, 4vw, 1.5rem) auto;
	padding: 0.25rem;
	aspect-ratio: 1;
	overflow: visible;
}

.acg-custom-wheel-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.36));
}

.acg-custom-sector-group {
	transform-origin: center;
	transform-box: fill-box;
}

.acg-custom-sector {
	stroke: #3f1639;
	stroke-width: 2;
}

.acg-custom-sector-0 { fill: #5b1738; }
.acg-custom-sector-1 { fill: #45205c; }
.acg-custom-sector-2 { fill: #6b2147; }
.acg-custom-sector-3 { fill: #3f245a; }
.acg-custom-sector-4 { fill: #741f4a; }
.acg-custom-sector-5 { fill: #522353; }
.acg-custom-sector-6 { fill: #642440; }
.acg-custom-sector-7 { fill: #35275b; }
.acg-custom-sector-8 { fill: #7a294f; }
.acg-custom-sector-9 { fill: #4c1e45; }
.acg-custom-sector-10 { fill: #5e2a67; }
.acg-custom-sector-11 { fill: #70223a; }
.acg-custom-sector-12 { fill: #3e294e; }
.acg-custom-sector-13 { fill: #812b5c; }
.acg-custom-sector-14 { fill: #57223b; }
.acg-custom-sector-15 { fill: #4a2c63; }
.acg-custom-sector-16 { fill: #6e2d47; }
.acg-custom-sector-17 { fill: #38204b; }

.acg-custom-sector-label {
	fill: #ffffff;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.03em;
	paint-order: stroke;
	stroke: rgba(45, 5, 38, 0.6);
	stroke-width: 1.25px;
}

.acg-custom-wheel-glow {
	stroke: rgba(255, 185, 216, 0.46);
	stroke-width: 2;
	filter: drop-shadow(0 0 5px rgba(242, 112, 174, 0.32));
	transition: stroke 180ms ease, filter 180ms ease;
}

.acg-custom-wheel-stage.is-spinning .acg-custom-wheel-glow {
	stroke: rgba(255, 213, 230, 0.92);
	filter: drop-shadow(0 0 12px rgba(255, 100, 182, 0.94));
}

.acg-custom-wheel-centre {
	stroke: rgba(75, 23, 60, 0.3);
	stroke-width: 2;
}

.acg-custom-pepper,
.acg-custom-pointer {
	pointer-events: none;
}

.acg-custom-pointer {
	fill: var(--acg-custom-gold);
	stroke: #4b173c;
	stroke-width: 2;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.38));
}

.acg-custom-actions {
	justify-content: center;
	margin: 0 0 1rem;
}

.acg-custom-actions > button {
	padding: 0.72rem 1rem;
}

.acg-custom-actions > button:first-child {
	border-color: #ff9fc6;
	background: linear-gradient(135deg, #bd235b, #861b4b);
	box-shadow: 0 7px 18px rgba(173, 21, 87, 0.38);
}

.acg-custom-share-status {
	flex-basis: 100%;
	margin: 0;
	color: var(--acg-custom-muted);
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

.acg-custom-share-status:empty {
	display: none;
}

.acg-custom-share-status.is-success {
	color: #baf7d4;
}

.acg-custom-share-status.is-error {
	color: #ffd1e2;
}

.acg-custom-share-status.is-neutral {
	color: var(--acg-custom-muted);
}

.acg-custom-sound-control {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.2rem 0.55rem;
	border: 2px solid #c84a82;
	border-radius: 0.65rem;
	background: rgba(25, 2, 35, 0.84);
}

.acg-custom-sound-control button {
	width: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0.35rem;
	border: 0;
	background: transparent;
}

.acg-custom-sound-icon {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #ffffff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.acg-custom-sound-icon > path:first-child {
	fill: #ffffff;
	stroke: none;
}

.acg-custom-volume {
	width: min(9rem, 34vw);
	accent-color: #d63977;
}

.acg-custom-result {
	min-height: 9rem;
	margin: 0;
	border-left: 4px solid var(--acg-custom-berry);
	text-align: left;
}

.acg-custom-eyebrow {
	margin: 0 0 0.35rem;
	color: #ffb9d4;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.11em;
}

.acg-custom-result h2 {
	margin-bottom: 0.45rem;
}

.acg-custom-result p:last-child {
	margin-bottom: 0;
	color: #fcecf3;
	line-height: 1.55;
}

.acg-custom-safety-note {
	margin-bottom: 0;
	border-left: 4px solid var(--acg-custom-gold);
	color: #fcecf3;
	line-height: 1.55;
}

.acg-custom-examples,
.acg-custom-info {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	padding: clamp(1rem, 3vw, 1.75rem);
}

.acg-custom-examples > p,
.acg-custom-info > p,
.acg-custom-info li {
	color: var(--acg-custom-muted);
	line-height: 1.6;
}

.acg-custom-scenario-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.acg-custom-scenario-card {
	padding: 1rem;
	border: 1px solid rgba(255, 171, 208, 0.24);
	border-radius: 0.7rem;
	background: rgba(11, 0, 18, 0.52);
}

.acg-custom-scenario-card > p {
	color: var(--acg-custom-muted);
}

.acg-custom-scenario-card ul {
	padding: 0;
	margin: 1rem 0;
	list-style: none;
}

.acg-custom-scenario-card li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.42rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.acg-custom-scenario-card li:last-child {
	border-bottom: 0;
}

.acg-custom-scenario-card li span {
	min-width: 0;
	color: #ffffff;
}

.acg-custom-scenario-card li button {
	min-width: 44px;
	padding: 0.35rem 0.55rem;
	font-size: 0.84rem;
}

.acg-custom-info ol {
	padding-left: 1.35rem;
	margin-bottom: 0;
}

.acg-custom-play-column > .acg-custom-info {
	width: 100%;
	margin-top: 1rem;
}

.acg-custom-play-column > .acg-custom-info ol {
	margin-top: 0.65rem;
}

.acg-custom-faq details {
	padding: 0.8rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.acg-custom-faq details:first-of-type {
	border-top: 0;
}

.acg-custom-faq summary {
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
}

.acg-custom-faq details p {
	margin-bottom: 0;
	color: var(--acg-custom-muted);
	line-height: 1.6;
}

@media (min-width: 640px) {
	.acg-custom-scenario-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.acg-custom {
		margin-top: 0;
		padding-top: 1rem;
	}

	.acg-custom [data-custom-wheel] {
		display: grid;
		grid-template-areas: "play settings";
		grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr);
		column-gap: clamp(1.75rem, 3vw, 3.5rem);
		align-items: stretch;
	}

	.acg-custom-settings-column,
	.acg-custom-play-column {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.acg-custom-settings-column {
		grid-area: settings;
		gap: 1rem;
	}

	.acg-custom-play-column {
		grid-area: play;
		width: min(100%, 600px);
	}

	.acg-custom-copy {
		text-align: left;
	}

	.acg-custom-intro {
		margin-right: 0;
		margin-left: 0;
	}

	.acg-custom-settings-column > .acg-custom-presets,
	.acg-custom-settings-column > .acg-custom-editor {
		margin-top: 0;
	}

	.acg-custom-settings-column > .acg-custom-editor,
	.acg-custom-play-column > .acg-custom-info {
		flex: 1 1 auto;
	}

	.acg-custom-wheel-stage {
		width: min(100%, 560px);
		margin: 0;
		padding: 0.625rem;
	}

	.acg-custom-actions {
		justify-content: flex-start;
		width: 100%;
		margin: 1rem 0;
	}

	.acg-custom-result,
	.acg-custom-safety-note {
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.acg-custom-wheel-stage {
		width: min(100%, 600px);
		max-width: 600px;
	}

	.acg-custom-scenario-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	body.acg-custom-page-view {
		background-attachment: scroll;
		background-size: 69px 69px, 107px 107px, 157px 157px, auto, auto, auto, auto;
	}

	body.acg-custom-page-view::before {
		opacity: 0.62;
		background-image:
			conic-gradient(from 202deg at 50% 20%, transparent 0deg 8deg, rgba(255, 123, 204, 0.11) 9deg 12deg, transparent 13deg 27deg, rgba(194, 102, 255, 0.08) 28deg 33deg, transparent 34deg 49deg, rgba(255, 177, 224, 0.07) 50deg 53deg, transparent 54deg 360deg),
			conic-gradient(from 88deg at 50% 20%, transparent 0deg 10deg, rgba(255, 139, 211, 0.08) 11deg 15deg, transparent 16deg 32deg, rgba(182, 93, 245, 0.07) 33deg 38deg, transparent 39deg 360deg),
			radial-gradient(ellipse at 50% 20%, rgba(255, 59, 165, 0.22) 0, rgba(174, 35, 154, 0.13) 18%, transparent 48%);
	}

	body.acg-custom-page-view .main-navigation.toggled .main-nav {
		background: #1d0328;
	}

	.acg-custom {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		padding-right: 1rem;
		padding-left: 1rem;
	}
}

@media (max-width: 480px) {
	body.acg-custom-page-view .site-main.acg-custom {
		margin-right: 0;
		margin-left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.acg-custom {
		margin-right: 0;
		margin-left: 0;
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}

	.acg-custom-wheel-stage {
		padding: 0.2rem;
	}

	.acg-custom-sector-label {
		font-size: 18px;
	}

	.acg-custom-actions,
	.acg-custom-editor-actions,
	.acg-custom-scenario-actions {
		justify-content: center;
	}

	.acg-custom-actions > button {
		flex: 1 1 10rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acg-custom .acg-custom-wheel-glow,
	.acg-custom button {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}