@import url(./tokens.css?ver=0.1.9);

.spin-wheel-widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-space-2);
	max-inline-size: 820px;
	margin-inline: auto;

	/* Without an explicit size, a host page that places this widget as a
	   flex item alongside another sibling (e.g. a side panel) leaves the
	   browser to shrink-to-fit it from content — and since every child here
	   (.spin-wheel-toolbar, .spin-wheel-wheel) is itself
	   percentage-sized against *this* element, that percentage can't
	   resolve during the intrinsic-size pass. The fallback the browser
	   lands on is the innermost <canvas>'s default 300×150 size, well before
	   the wheel-engine's own resize() has a chance to set a real size —
	   collapsing the whole widget to a fixed 300px regardless of how much
	   room is actually available. `flex: 1 1 0%` gives it a real basis to
	   grow from instead of an indeterminate content-based one. Both are
	   no-ops outside of a flex-item context (a normal shortcode/block
	   embed), so this only changes behavior where it was actually broken.
	   `min-width` is deliberately NOT 0: below this width, aspect-ratio
	   sizing against an ever-shrinking cross-size gets unreliable across
	   engines (the wheel can end up non-square, or clamped square at the
	   wrong size, rather than just small) — better to let the sibling's
	   flex-wrap take over and drop this to its own line than keep shrinking
	   it past the point the layout can size it correctly. */
	flex: 1 1 0%;
	min-width: 280px;
}

.spin-wheel-widget:fullscreen,
.spin-wheel-widget--simulated-fullscreen {
	max-inline-size: none;
	inline-size: 100%;
	block-size: 100%;
	justify-content: center;
	background: var(--sp-bg);
	padding: var(--sp-space-4);
	box-sizing: border-box;
}

/* Fallback for embed contexts without the native Fullscreen API (a
   sandboxed iframe missing allow="fullscreen", including this widget's own
   preview inside Claude artifacts) — same visual result, driven by a class
   toggle instead of the browser API. */
.spin-wheel-widget--simulated-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

/* .spin-wheel-wheel's own max-inline-size (820px) is unconditional, so
   fullscreen — despite the widget above growing to fill the viewport —
   still capped the wheel itself at that width, leaving most of a large
   monitor empty. `!important` on inline-size/block-size is required here:
   a fixed-height embed (WheelRenderer's `height` option) sets `block-size`
   as an *inline* style, which always outranks an external stylesheet rule
   otherwise — without it, fullscreen would stay pinned to that pre-fullscreen
   height. Clearing block-size back to auto (rather than setting a value)
   is deliberate too: aspect-ratio only fills in a dimension left auto, so
   this is what lets it derive a real square from the new inline-size again. */
.spin-wheel-widget:fullscreen .spin-wheel-wheel,
.spin-wheel-widget--simulated-fullscreen .spin-wheel-wheel {
	max-inline-size: none !important;
	inline-size: min( 85vw, 85vh ) !important;
	block-size: auto !important;
}

.spin-wheel-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-space-1);
	inline-size: 100%;
}

.spin-wheel-toolbar__button,
.spin-wheel-toolbar__language {
	min-block-size: var(--sp-touch-target-min);
	padding-inline: var(--sp-space-2);
	border-radius: var(--sp-radius-md);
	border: 1px solid var(--sp-border);
	background: var(--sp-surface-solid);
	color: var(--sp-text-secondary);
	font-family: var(--sp-font-family);
	font-size: var(--sp-font-size-sm);
	cursor: pointer;
	transition: border-color var(--sp-duration-fast) var(--sp-easing-standard);
}

.spin-wheel-toolbar__button:hover,
.spin-wheel-toolbar__language:hover {
	border-color: var(--sp-primary);
	color: var(--sp-primary);
}

.spin-wheel-toolbar__button:focus-visible,
.spin-wheel-toolbar__language:focus-visible {
	outline: 3px solid var(--sp-focus-ring);
	outline-offset: 2px;
}

/* Icon-only toolbar buttons (currently just fullscreen) drop the pill's
   text padding for an equal-sided square, so the icon sits centered rather
   than looking lost inside leftover horizontal padding meant for a label. */
.spin-wheel-toolbar__button--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 0;
	inline-size: var(--sp-touch-target-min);
}

.spin-wheel-logo {
	margin: 0;
	max-inline-size: 180px;
}

.spin-wheel-logo img {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

.spin-wheel-signin-gate {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-space-2);
	background: color-mix(in srgb, var(--sp-bg) 92%, transparent);
	backdrop-filter: var(--sp-blur);
	-webkit-backdrop-filter: var(--sp-blur);
	border-radius: var(--sp-radius-lg);
	text-align: center;
	padding: var(--sp-space-2);
	font-family: var(--sp-font-family);
	color: var(--sp-text-primary);
}

.spin-wheel-results-panel {
	inline-size: 100%;
	max-inline-size: 420px;
	background: var(--sp-surface-solid);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-lg);
	padding: var(--sp-space-2);
	font-family: var(--sp-font-family);
	color: var(--sp-text-primary);
}

.spin-wheel-results-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-space-1);
	margin-block-end: var(--sp-space-1);
}

.spin-wheel-results-panel__header h3 {
	margin: 0;
	font-size: var(--sp-font-size-md);
}

.spin-wheel-results-panel__header button {
	background: none;
	border: none;
	color: var(--sp-text-secondary);
	font-size: var(--sp-font-size-sm);
	cursor: pointer;
	text-decoration: underline;
}

.spin-wheel-results-panel__scores,
.spin-wheel-results-panel__history {
	list-style: none;
	margin: 0 0 var(--sp-space-1);
	padding: 0;
	max-block-size: 160px;
	overflow-y: auto;
}

.spin-wheel-results-panel__scores li {
	display: flex;
	justify-content: space-between;
	padding-block: var(--sp-space-050);
	font-variant-numeric: tabular-nums;
}

.spin-wheel-results-panel__history li {
	padding-block: var(--sp-space-050);
	border-block-start: 1px solid var(--sp-border);
	font-size: var(--sp-font-size-sm);
	color: var(--sp-text-secondary);
}

.spin-wheel-wheel {
	position: relative;
	inline-size: 100%;
	max-inline-size: 820px;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	font-family: var(--sp-font-family);

	/* Without this, some flexbox implementations size a column-flex item's
	   main-axis (block) dimension from leftover container space rather than
	   from `aspect-ratio` once the item also has a definite cross-axis
	   (inline) size — most visible in fullscreen, where the widget's column
	   suddenly has a lot of vertical space to hand out. That stretched the
	   wheel into a tall rectangle, which then made the spin button's
	   percentage-based sizing non-circular too. Pinning flex-basis/grow/
	   shrink here forces the box to always size from aspect-ratio alone. */
	flex: 0 0 auto;
}

/* Applied by WheelRenderer.php alongside an explicit inline `height` (the
   shortcode/block `height` option). `aspect-ratio` only fills in a
   dimension left `auto` — with the base rule's `inline-size: 100%` also
   definite, an explicit height had nothing left for aspect-ratio to
   resolve, so the box rendered at container-width × given-height instead
   of a square, overflowing badly in a wide-but-short host. Switching
   inline-size to auto here lets aspect-ratio derive width *from* the
   given height instead. */
.spin-wheel-wheel--fixed-height {
	inline-size: auto;
}

.spin-wheel-block-preview {
	inline-size: 100%;
	max-inline-size: 420px;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}

/* `Wheel` adds this class directly onto the same root element that already
   carries `.spin-wheel-wheel` (see wheel.ts) rather than onto a separate
   nested div — it never actually nests. So this rule must NOT set its own
   inline-size/block-size: an explicit block-size here fights the outer
   rule's `aspect-ratio: 1/1` on that same element the moment the ancestor
   chain gets a definite height (e.g. in fullscreen, where the widget is
   pinned to the viewport height) — aspect-ratio only fills in a dimension
   left `auto`, so a same-element 100% block-size silently wins and stretches
   the wheel into a non-square box, which then breaks the spin button's
   percentage-based circular sizing too. Sizing stays owned entirely by
   `.spin-wheel-wheel`; this rule only contributes the inner visual
   styling (surface, blur, radius, padding). */
.spin-wheel-wheel-inner {
	display: flex;
	align-items: center;
	justify-content: center;

	/* No card/surface behind the wheel by default — the wheel itself is
	   circular, so a square backdrop card here (as this rule used to have:
	   background, blur, shadow, padding) reads as a stray white box around
	   it rather than a deliberate frame, especially with a transparent page
	   background. A configured background image/gradient/solid color is
	   applied directly (inline style, by whatever sets it) rather than via
	   this rule, so it isn't lost — this rule just no longer adds one nobody
	   asked for. */
	background: transparent;
}

.spin-wheel-canvas {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	touch-action: manipulation;
}

.spin-wheel-spin-button {
	position: absolute;

	/* Deliberately physical (top/left), not inset-block-start/inset-inline-
	   start: those are logical properties that flip meaning under RTL —
	   inset-inline-start:50% resolves to `right: 50%` there, anchoring the
	   button's *right* edge to center instead of its left. Paired with
	   `transform: translate(-50%, -50%)` (always physical, never flipped by
	   direction), that mismatch shifted the whole button left by its own
	   width in RTL — it visibly landed off the wheel's true center (which
	   the canvas-drawn hub behind it, unaffected by CSS direction, still
	   got right). Dead-center positioning has no "start/end" — it's the
	   same point regardless of direction — so it belongs on the physical
	   properties that actually stay put.
	*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-inline-size: var(--sp-touch-target-min);
	min-block-size: var(--sp-touch-target-min);
	inline-size: 27%;
	block-size: 27%;

	/* Belt-and-suspenders: equal %/min sizes above should already make this
	   a circle, but aspect-ratio guarantees it even if a themer or a future
	   layout change breaks that equality on one axis only. */
	aspect-ratio: 1 / 1;
	border-radius: var(--sp-radius-full);
	border: none;

	/* A flat fill read as a plain button sitting on the wheel rather than
	   its hub — the highlight (offset toward the upper-left, like a light
	   source) plus a deeper edge gives it the dimensionality of a real
	   physical dial or knob instead. */
	background: radial-gradient(
		circle at 35% 30%,
		color-mix(in srgb, var(--sp-primary) 45%, white) 0%,
		var(--sp-primary) 55%,
		var(--sp-primary-hover) 100%
	);
	color: var(--sp-primary-contrast);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;

	/* Fallback for browsers without container-query support (below). */
	font-size: var(--sp-font-size-sm);
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	padding: 0;
	cursor: pointer;

	/* The light ring (a second, larger 0-blur shadow) reads as a cutout
	   separating the hub from whatever segment color sits directly behind
	   it — the same reason real prize wheels ring their center hub — with
	   the soft drop shadow after it doing the actual elevation. Fixed to
	   white (not the --sp-surface-solid token) so the ring stays a
	   consistent cutout against any segment color in both light and dark
	   mode, rather than blending into a dark surface. */
	box-shadow:
		0 0 0 4px #ffffff,
		0 6px 18px rgba(79, 61, 219, 0.4);
	transition:
		transform var(--sp-duration-fast) var(--sp-easing-standard),
		box-shadow var(--sp-duration-fast) var(--sp-easing-standard);
	z-index: 2;
}

/* Text scales with the button's own rendered size (container query units),
   so "Spin" and the longer "Spinning…" state both stay legible whether the
   wheel is a 260px card or a 560px hero — a fixed px font-size can't do
   both, since it's oversized on a small wheel and lost on a large one. */
@supports (container-type: inline-size) {

	.spin-wheel-spin-button {
		container-type: inline-size;
		font-size: clamp(12px, 16cqi, 20px);
	}
}

.spin-wheel-spin-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.spin-wheel-spin-button:focus-visible {
	outline: 3px solid var(--sp-focus-ring);
	outline-offset: 3px;
}

.spin-wheel-wheel--gated .spin-wheel-canvas,
.spin-wheel-wheel--gated .spin-wheel-spin-button {
	pointer-events: none;
	filter: blur(6px);
	opacity: 0.6;
}

.spin-wheel-spin-button:hover:not(:disabled) {
	transform: translate(-50%, -50%) scale(1.05);
	background: var(--sp-primary-hover);
}

.spin-wheel-spin-button:active:not(:disabled) {
	transform: translate(-50%, -50%) scale(0.96);
}

.spin-wheel-flash {
	position: absolute;
	inset: 0;
	background: #fff;
	pointer-events: none;
	z-index: 3;
	animation: sp-flash 400ms var(--sp-easing-standard);
}

@keyframes sp-flash {

	0% {
		opacity: 0;
	}

	30% {
		opacity: 0.85;
	}

	100% {
		opacity: 0;
	}
}

.spin-wheel-confetti-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.spin-wheel-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.spin-wheel-error {
	padding: var(--sp-space-2);
	border-radius: var(--sp-radius-sm);
	background: color-mix(in srgb, var(--sp-danger) 12%, transparent);
	color: var(--sp-danger);
	font-family: var(--sp-font-family);
	font-size: var(--sp-font-size-sm);
}

.spin-wheel-powered-by {
	display: block;
	margin-block-start: var(--sp-space-1);
	text-align: center;
	font-family: var(--sp-font-family);
	font-size: var(--sp-font-size-xs);
	color: var(--sp-text-secondary);
	text-decoration: none;
}

.spin-wheel-powered-by:hover,
.spin-wheel-powered-by:focus-visible {
	color: var(--sp-primary);
}

/* Winner modal */
.spin-wheel-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 31, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;

	/* Must outrank .spin-wheel-widget--simulated-fullscreen (100000) and
	   the browser's native :fullscreen top-layer, or the winner modal renders
	   visually behind the fullscreen wheel it belongs to. */
	z-index: 200000;
	padding: var(--sp-space-2);
	animation: sp-fade-in var(--sp-duration-base) var(--sp-easing-standard);
}

.spin-wheel-modal {
	position: relative;
	background: var(--sp-surface-solid);
	color: var(--sp-text-primary);
	border-radius: var(--sp-radius-lg);
	padding: var(--sp-space-5) var(--sp-space-4) var(--sp-space-4);
	max-inline-size: 380px;
	inline-size: 100%;
	box-shadow: var(--sp-shadow);
	animation: sp-modal-in var(--sp-duration-slow) var(--sp-easing-spring);
	text-align: center;
}

.spin-wheel-modal button.spin-wheel-modal__close {
	position: absolute;
	inset-block-start: var(--sp-space-2);
	inset-inline-end: var(--sp-space-2);
	inline-size: 36px;
	block-size: 36px;
	min-inline-size: 0;
	min-block-size: 0;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sp-radius-full);
	background: transparent;
	color: var(--sp-text-secondary);
}

.spin-wheel-modal button.spin-wheel-modal__close:hover {
	background: color-mix(in srgb, var(--sp-text-secondary) 14%, transparent);
	color: var(--sp-text-primary);
}

.spin-wheel-modal__badge {
	inline-size: 68px;
	block-size: 68px;
	margin: 0 auto var(--sp-space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sp-radius-full);
	color: var(--sp-primary-contrast);
	background: radial-gradient(circle at 32% 28%, var(--sp-primary-hover), var(--sp-primary));
	box-shadow:
		0 0 0 8px color-mix(in srgb, var(--sp-primary) 12%, transparent),
		0 10px 24px color-mix(in srgb, var(--sp-primary) 35%, transparent);
	animation: sp-badge-pop var(--sp-duration-slow) var(--sp-easing-spring) both;
	animation-delay: 80ms;
}

.spin-wheel-modal__eyebrow {
	margin: 0 0 var(--sp-space-050);
	font-size: var(--sp-font-size-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sp-primary);
}

.spin-wheel-modal__name {
	font-size: var(--sp-font-size-2xl);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 var(--sp-space-1);
	overflow-wrap: break-word;
}

.spin-wheel-modal button {
	min-block-size: var(--sp-touch-target-min);
	min-inline-size: var(--sp-touch-target-min);
	padding-inline: var(--sp-space-3);
	border-radius: var(--sp-radius-md);
	border: none;
	background: var(--sp-primary);
	color: var(--sp-primary-contrast);
	font-weight: 600;
	cursor: pointer;
	margin: var(--sp-space-1);
}

.spin-wheel-modal button:focus-visible {
	outline: 3px solid var(--sp-focus-ring);
	outline-offset: 3px;
}

.spin-wheel-modal__label {
	margin: 0 0 var(--sp-space-1);
	color: var(--sp-text-secondary);
	font-size: var(--sp-font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.spin-wheel-modal__hint {
	color: var(--sp-text-secondary);
	font-size: var(--sp-font-size-sm);
	cursor: pointer;
}

.spin-wheel-modal__score {
	font-variant-numeric: tabular-nums;
	color: var(--sp-text-secondary);
}

.spin-wheel-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-1);
	justify-content: center;
	margin-block-start: var(--sp-space-3);
}

.spin-wheel-modal__actions button {
	flex: 1 1 auto;
	margin: 0;
}

.spin-wheel-modal__actions button.spin-wheel-modal__again {
	order: 1;
	flex-basis: 100%;
	font-weight: 700;
}

.spin-wheel-modal__actions button.spin-wheel-modal__remove {
	order: 2;
	background: color-mix(in srgb, var(--sp-danger) 10%, transparent);
	color: var(--sp-danger);
	border: 1px solid color-mix(in srgb, var(--sp-danger) 35%, transparent);
}

.spin-wheel-modal__actions button.spin-wheel-modal__share {
	order: 3;
	background: var(--sp-surface-solid);
	color: var(--sp-primary);
	border: 1px solid var(--sp-primary);
}

@keyframes sp-fade-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes sp-modal-in {

	from {
		opacity: 0;
		transform: translateY(16px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes sp-badge-pop {

	from {
		opacity: 0;
		transform: scale(0.4) rotate(-8deg);
	}

	60% {
		opacity: 1;
		transform: scale(1.08) rotate(3deg);
	}

	to {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

@media (prefers-reduced-motion: reduce) {

	.spin-wheel-modal-overlay,
	.spin-wheel-modal,
	.spin-wheel-modal__badge,
	.spin-wheel-flash {
		animation: none;
	}
}

/* Site-wide "Sign in with Google" widget (Core\AuthBoot + frontend/site-auth.js).
   Deliberately minimal — a small header control, not a wheel-specific piece —
   so it drops cleanly into any theme header alongside other nav controls. */
.spin-wheel-auth--signed-in {
	position: relative;
}

.spin-wheel-auth__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-full);
	background: var(--sp-surface-solid);
	cursor: pointer;
	font-family: inherit;
}

.spin-wheel-auth__trigger:hover,
.spin-wheel-auth__trigger[aria-expanded="true"] {
	border-color: var(--sp-primary);
}

.spin-wheel-auth__avatar {
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--sp-radius-full);
	object-fit: cover;
	flex: none;
}

.spin-wheel-auth__name {
	font-size: var(--sp-font-size-sm);
	font-weight: 600;
	color: var(--sp-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: 120px;
}

.spin-wheel-auth__caret {
	font-size: 0.7em;
	color: var(--sp-text-secondary);
}

.spin-wheel-auth__trigger--disabled {
	cursor: default;
	opacity: 0.6;
}

.spin-wheel-auth__trigger--disabled:hover {
	border-color: var(--sp-border);
}

.spin-wheel-auth__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--sp-radius-full);
	background: var(--sp-surface-2, rgba(0, 0, 0, 0.05));
	font-size: 1rem;
	flex: none;
}

.spin-wheel-auth__menu {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	min-inline-size: 220px;
	background: var(--sp-surface-solid);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
	padding: 8px;
	z-index: 40;
}

.spin-wheel-auth__menu[hidden] {
	display: none;
}

.spin-wheel-auth__menu-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px 10px;
	border-block-end: 1px solid var(--sp-border);
	margin-block-end: 6px;
}

.spin-wheel-auth__menu-header strong {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spin-wheel-auth__menu-header small {
	font-size: var(--sp-font-size-xs);
	color: var(--sp-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spin-wheel-auth__signout {
	display: block;
	font-size: var(--sp-font-size-sm);
	color: var(--sp-text-primary);
	text-decoration: none;
	border-radius: var(--sp-radius-md);
	padding: 8px 10px;
	min-height: 36px;
	box-sizing: border-box;
}

.spin-wheel-auth__signout:hover {
	color: var(--sp-primary);
	background: var(--sp-surface);
}

.spin-wheel-auth--signed-out {
	display: flex;
	align-items: center;
	min-height: 44px;
}