.wc-wand-gate,
.wc-wand-quiz,
.wc-wand-result,
.wc-wand-empty,
.wc-wand-gate *,
.wc-wand-quiz *,
.wc-wand-result *,
.wc-wand-empty * {
	box-sizing: border-box;
}

.wc-wand-gate,
.wc-wand-quiz,
.wc-wand-result {
	--wand-gold: #e0b45f;
	--wand-gold-rgb: 224, 180, 95;
	border: 1px solid rgba(var(--wand-gold-rgb), .22);
	border-radius: 26px;
	background:
		radial-gradient(circle at 15% 0%, rgba(var(--wand-gold-rgb), .1), transparent 36%),
		rgba(22, 16, 11, .88);
	box-shadow: 0 28px 75px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* -- gate ---------------------------------------------------------------- */

.wc-wand-gate {
	padding: 52px 28px;
	color: #efe6d6;
	text-align: center;
}

.wc-wand-gate__mark {
	display: inline-grid;
	width: 58px;
	height: 58px;
	margin-bottom: 15px;
	place-items: center;
	color: var(--wand-gold);
	border: 1px solid rgba(var(--wand-gold-rgb), .28);
	border-radius: 50%;
	background: rgba(var(--wand-gold-rgb), .08);
	box-shadow: 0 0 32px rgba(var(--wand-gold-rgb), .14);
}

.wc-wand-gate__mark svg {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wc-wand-gate h2 {
	margin: 0 0 10px;
	color: #fdf6e8;
	font-size: clamp(1.45rem, 4vw, 2.2rem);
}

.wc-wand-gate p {
	width: min(640px, 100%);
	margin: 0 auto 25px;
	color: #cdbfa9;
	line-height: 2;
}

/* -- buttons ------------------------------------------------------------- */

.wc-wand-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 24px;
	color: #1c1206 !important;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 12px;
	background: linear-gradient(135deg, #f2d79a, #d9ac52);
	box-shadow: 0 9px 28px rgba(190, 143, 60, .22);
	font-family: inherit;
	font-size: .92rem;
	font-weight: 800;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.wc-wand-button:hover,
.wc-wand-button:focus-visible {
	color: #1c1206 !important;
	border-color: rgba(255, 255, 255, .5) !important;
	background: linear-gradient(135deg, #fbe8bd, #e6bd6a) !important;
	transform: translateY(-2px);
	box-shadow: 0 13px 34px rgba(190, 143, 60, .3);
}

.wc-wand-button:disabled,
.wc-wand-button.is-loading {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.wc-wand-button--quiet {
	color: #f6e9cf !important;
	border-color: rgba(var(--wand-gold-rgb), .28);
	background: rgba(var(--wand-gold-rgb), .1) !important;
	box-shadow: none;
}

.wc-wand-button--quiet:hover,
.wc-wand-button--quiet:focus-visible {
	color: #fff6e4 !important;
	border-color: rgba(var(--wand-gold-rgb), .5) !important;
	background: rgba(var(--wand-gold-rgb), .19) !important;
}

/* -- quiz ---------------------------------------------------------------- */

.wc-wand-quiz {
	padding: 34px;
	color: #efe6d6;
}

.wc-wand-quiz__header {
	margin-bottom: 26px;
	text-align: center;
}

.wc-wand-progress {
	width: min(430px, 100%);
	height: 6px;
	margin: 0 auto 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .075);
	overflow: hidden;
}

.wc-wand-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #c9963e, #f6dfa8);
	box-shadow: 0 0 18px rgba(var(--wand-gold-rgb), .36);
	transition: width .5s ease;
}

.wc-wand-quiz__header > p:first-of-type {
	margin: 0 0 8px;
	color: var(--wand-gold);
	font-size: .74rem;
	font-weight: 700;
}

.wc-wand-quiz__scene {
	margin: 0 0 6px !important;
	color: #a9998a;
	font-size: .82rem;
	font-style: italic;
	line-height: 1.9;
}

.wc-wand-quiz__header h2 {
	margin: 0;
	color: #fdf6e8;
	font-size: clamp(1.25rem, 4vw, 1.85rem);
	line-height: 1.7;
}

.wc-wand-error {
	margin: 0 0 22px;
	padding: 12px 15px;
	color: #ffd6d2;
	border: 1px solid rgba(238, 104, 92, .25);
	border-radius: 12px;
	background: rgba(238, 104, 92, .08);
	text-align: center;
}

/* Width-capped so auto-fit tops out at four columns. The longest question has
   seven options, and on the hub's wide dialog an uncapped grid put five on the
   first row and stranded two on the second. */
.wc-wand-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 11px;
	width: min(770px, 100%);
	margin: 0 auto 26px;
	padding: 0;
	border: 0;
}

/* The fieldset needs a name for assistive technology but must not repeat the
   heading on screen. Hidden here rather than relying on style.css's
   .screen-reader-text, because this card also renders inside the hub's dialog
   where the theme's own utility class is not what positions it. */
.wc-wand-options > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.wc-wand-options label {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.wc-wand-options input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wc-wand-options label span {
	display: block;
	height: 100%;
	padding: 14px 15px;
	color: #ddd2c1;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	background: rgba(255, 255, 255, .032);
	font-size: .9rem;
	line-height: 1.8;
	transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.wc-wand-options label:hover span {
	border-color: rgba(var(--wand-gold-rgb), .32);
	transform: translateY(-2px);
}

.wc-wand-options input:focus-visible + span {
	outline: 2px solid rgba(var(--wand-gold-rgb), .58);
	outline-offset: 2px;
}

.wc-wand-options input:checked + span {
	color: #fff7e8;
	border-color: rgba(var(--wand-gold-rgb), .55);
	background: rgba(var(--wand-gold-rgb), .14);
	box-shadow: inset -3px 0 0 var(--wand-gold);
}

.wc-wand-quiz__form > .wc-wand-button {
	display: flex;
	margin: 0 auto;
}

/* -- result -------------------------------------------------------------- */

.wc-wand-result {
	display: grid;
	grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
	color: #efe6d6;
	overflow: hidden;
}

.wc-wand-result__stage {
	display: grid;
	min-height: 300px;
	padding: clamp(18px, 3vw, 34px);
	place-items: center;
	background:
		radial-gradient(circle at 50% 50%, rgba(var(--wand-gold-rgb), .13), transparent 66%),
		rgba(8, 6, 4, .3);
}

.wc-wand-figure {
	width: 100%;
	max-width: 300px;
}

.wc-wand-figure svg {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
}

.wc-wand-figure__shaft { fill: var(--wand-wood); }
.wc-wand-figure__gleam { fill: var(--wand-wood-light); opacity: .75; }
.wc-wand-figure__collar,
.wc-wand-figure__grip { fill: var(--wand-wood-dark); }

.wc-wand-figure__rings {
	fill: none;
	stroke: var(--wand-wood-light);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: .42;
}

.wc-wand-figure__stone {
	fill: var(--wand-core);
	filter: drop-shadow(0 0 7px var(--wand-core));
}

.wc-wand-figure__spark circle {
	fill: var(--wand-core);
	filter: drop-shadow(0 0 9px var(--wand-core));
	animation: wc-wand-spark 2.8s ease-in-out infinite;
}

.wc-wand-figure__spark circle:nth-child(2) { animation-delay: .35s; }
.wc-wand-figure__spark circle:nth-child(3) { animation-delay: .8s; }
.wc-wand-figure__spark circle:nth-child(4) { animation-delay: 1.3s; }

@keyframes wc-wand-spark {
	0%, 100% { opacity: .28; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-3px); }
}

.wc-wand-result__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 38px 34px;
}

.wc-wand-result__eyebrow {
	margin: 0 0 5px !important;
	color: var(--wand-gold);
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .05em;
}

.wc-wand-result h2 {
	margin: 0 0 12px;
	color: #fdf6e8;
	font-size: clamp(1.4rem, 3.4vw, 2.1rem);
	line-height: 1.55;
}

.wc-wand-result__summary {
	margin: 0 0 20px !important;
	color: #d8cab4;
	font-size: .96rem;
	line-height: 2;
}

/* Fixed at two columns rather than auto-fit: there are exactly four specs, so
   auto-fit picked three across on a wide card and left the fourth stranded on
   a row of its own. Two columns are always 2×2, and a hand-set wand with only
   a wood and a core is one tidy row. */
.wc-wand-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	width: 100%;
	margin: 0 0 18px;
}

.wc-wand-specs > div {
	padding: 11px 13px;
	border: 1px solid rgba(var(--wand-gold-rgb), .16);
	border-radius: 12px;
	background: rgba(var(--wand-gold-rgb), .05);
}

.wc-wand-specs dt {
	margin: 0 0 3px;
	color: var(--wand-gold);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.7;
}

.wc-wand-specs dd {
	margin: 0;
	color: #f4ebdb;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.8;
}

.wc-wand-result__note {
	margin: 0 !important;
	color: #b3a695;
	font-size: .82rem;
	line-height: 1.9;
}

.wc-wand-inline-form {
	margin-top: 18px;
}

/* -- empty state --------------------------------------------------------- */

.wc-wand-empty {
	padding: 22px;
	color: #cdbfa9;
	border: 1px solid rgba(224, 180, 95, .18);
	border-radius: 16px;
	background: rgba(224, 180, 95, .045);
	text-align: center;
}

.wc-wand-empty p {
	margin: 0 0 8px;
}

.wc-wand-empty a {
	color: #e0b45f;
}

/* -- profile surface ----------------------------------------------------- */


.wc-profile-wand,
.wc-wand-empty--profile {
	clear: both;
	margin-top: 34px;
}

.wc-profile-wand + .wands-data {
	margin-top: 18px;
}

/* -- user panel surface -------------------------------------------------- */

.wc-form-wand .wc-wand-result {
	grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
	border-radius: 14px;
}

.wc-form-wand .wc-wand-result__stage {
	min-height: 0;
	padding: 16px;
}

.wc-form-wand .wc-wand-result__copy {
	padding: 18px 20px;
}

.wc-form-wand .wc-wand-result h2,
.wc-form-wand .wc-wand-result__eyebrow {
	display: none;
}

.wc-form-wand .wc-wand-result__summary {
	margin: 0 0 14px !important;
	font-size: .88rem;
}

.wc-form-wand .wc-wand-empty {
	text-align: right;
}

/* -- the wood's and the core's own stories ------------------------------- */

.wc-wand-lore {
	margin-top: 16px;
	padding: 24px 26px;
	color: #cfc2ae;
	border: 1px solid rgba(224, 180, 95, .16);
	border-radius: 20px;
	background: rgba(224, 180, 95, .04);
}

.wc-wand-lore__title {
	margin: 0 0 16px !important;
	color: #e0b45f;
	font-size: .95rem !important;
	font-weight: 800;
	line-height: 1.8;
}

.wc-wand-lore__entry + .wc-wand-lore__entry {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

/* The stories come from inc/profile-data/, whose markup is a bare <strong>
   followed by one or more <p> — no wrapper of its own to hook onto. */
.wc-wand-lore__entry strong {
	display: block;
	margin-bottom: 7px;
	color: #f4ebdb;
	font-size: .95rem;
}

.wc-wand-lore__entry p {
	margin: 0 0 11px !important;
	font-size: .87rem;
	line-height: 2.1;
	text-align: justify;
}

.wc-wand-lore__entry p:last-child {
	margin-bottom: 0 !important;
}

/* -- responsive ---------------------------------------------------------- */

@media (max-width: 760px) {
	.wc-wand-quiz {
		padding: 22px 15px;
	}

	.wc-wand-options {
		grid-template-columns: 1fr;
	}

	.wc-wand-result,
	.wc-form-wand .wc-wand-result {
		grid-template-columns: 1fr;
	}

	.wc-wand-result__stage {
		min-height: 200px;
		padding: 22px;
	}

	.wc-wand-figure {
		max-width: 230px;
	}

	.wc-wand-result__copy {
		padding: 26px 20px 28px;
	}

	.wc-wand-lore {
		padding: 20px 17px;
		border-radius: 16px;
	}

	.wc-wand-lore__entry p {
		text-align: right;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-wand-figure__spark circle {
		animation: none;
		opacity: .85;
	}

	.wc-wand-progress span,
	.wc-wand-options label span,
	.wc-wand-button {
		transition-duration: .01ms !important;
	}
}