/* =========================================================================
   Spin to Win — prize wheel
   Self-contained: no dependency on theme-polish or the colour-scheme tokens.

   Themable values are written as var(--token, <original literal>). The tokens
   are NOT declared here — the fallback carries the default — so with no theme
   stylesheet loaded this file renders exactly as it always has. Seasonal skins
   live in themes/<slug>.css and declare the tokens on a descendant selector.
   ====================================================================== */
.stw-tab,
.stw-modal,
.stw-open-btn {
	--stw-red: #dc3545;
	--stw-red-dark: #b91c2e;
	--stw-orange: #F26322;
	--stw-gold: #f4b400;

	/* The claim step flips to these for Gravity Form legibility. A seasonal theme
	   may tint them, but must never repoint them at a dark value. */
	--stw-ink: #0f172a;
	--stw-surface: #ffffff;

	/* Accent glow, as bare RGB channels so it works at any alpha — including
	   inside @keyframes, where var() resolves against the animating element.
	   Every other themable value is written as var(--token, <original literal>)
	   at its use site, so with no theme stylesheet loaded nothing changes. */
	--stw-glow-rgb: 220, 53, 69;

	--stw-radius: 18px;
	--stw-ease: cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   FLOATING TAB
   ====================================================================== */
.stw-tab {
	position: fixed;
	z-index: 1030;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .7rem 1rem;
	border: 0;
	cursor: pointer;
	color: #fff;
	font-weight: 800;
	font-size: .92rem;
	letter-spacing: .01em;
	line-height: 1;
	background: linear-gradient(135deg, var(--stw-red) 0%, var(--stw-red-dark) 100%);
	box-shadow: 0 10px 28px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .55), 0 2px 8px rgba(15, 23, 42, .2);
	animation: stw-pulse 2.6s var(--stw-ease) infinite;
	transition: transform .25s var(--stw-ease), box-shadow .25s var(--stw-ease);
	-webkit-tap-highlight-color: transparent;
}
.stw-tab:hover,
.stw-tab:focus-visible {
	transform: scale(1.05);
	box-shadow: 0 16px 38px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .65), 0 3px 10px rgba(15, 23, 42, .25);
}
/* Same reasoning as .stw-hub — the tab's own stw-pulse keyframes animate
   box-shadow, so a shadow-only ring never painted here either. */
/* ---------------------------------------------------------------------------
   FOCUS RINGS.

   A DOUBLE ring — dark inner, white outer — drawn with box-shadow. Two colours
   because these controls sit on wildly different surfaces across the themes
   (the white wheel plate on Default and Easter, a near-black shell on the rest)
   and no single colour clears 3:1 against all of them; with both, one always does.

   box-shadow rather than outline because these are circles and pills, and an
   outline with the negative offset needed to keep it on the control's own fill
   renders square in Chrome. The forced-colors block below restores a real
   outline for High Contrast mode, where shadows are not painted at all.

   !important guards an accessibility requirement, not a preference. Two things
   would otherwise erase these: a CSS animation on the same element outranks a
   normal declaration (Halloween's ember glow did exactly that to the hub), and
   theme-polish.css's `button:focus-visible:not(.btn):not(...)` is (0,3,1) and
   loads later, repainting the ring in --ui-primary — 1.96:1 on the Halloween hub.
   --------------------------------------------------------------------------- */
/* theme-polish.css's focus rule also sets `border-radius: 6px`, so every round
   control in this widget turns into a rounded rectangle the moment it is focused
   — and the ring, which follows border-radius, squares off with it. Restate each
   shape so the ring stays the shape of the control it belongs to. */
.stw-hub:focus-visible,
.stw-close:focus-visible { border-radius: 50% !important; }
.stw-open-btn:focus-visible { border-radius: 999px !important; }
.stw-claim:focus-visible,
.stw-emailform__input:focus-visible { border-radius: 999px !important; }
.stw-tab--right:focus-visible { border-radius: var(--stw-radius) 0 0 var(--stw-radius) !important; }
.stw-tab--left:focus-visible { border-radius: 0 var(--stw-radius) var(--stw-radius) 0 !important; }
.stw-tab--bottom:focus-visible { border-radius: 999px !important; }

.stw-tab:focus-visible { box-shadow: 0 0 0 3px #0f172a, 0 0 0 6px #ffffff, 0 16px 38px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .6) !important; }
/* The close button and the "no thanks" link sit on the themed shell, which is
   near-black on five skins and parchment on the claim step — same double ring. */
.stw-close:focus-visible,
.stw-maybe:focus-visible,
.stw-open-btn:focus-visible { box-shadow: 0 0 0 3px #0f172a, 0 0 0 6px #ffffff !important; }
.stw-maybe:focus-visible { border-radius: 6px !important; }

.stw-tab__icon { display: inline-flex; }
.stw-tab__wheel { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.stw-tab__wheel-spin { transform-origin: 16px 16px; animation: stw-minispin 7s linear infinite; }
.stw-tab__text { white-space: nowrap; }

/* Right / left vertical edge tabs */
.stw-tab--right,
.stw-tab--left {
	top: 50%;
	flex-direction: row;
}
.stw-tab--right {
	right: 0;
	transform-origin: right center;
	border-radius: var(--stw-radius) 0 0 var(--stw-radius);
	transform: translateY(-50%);
	animation-name: stw-pulse-r;
}
.stw-tab--right:hover,
.stw-tab--right:focus-visible { transform: translateY(-50%) scale(1.05); }
.stw-tab--left {
	left: 0;
	border-radius: 0 var(--stw-radius) var(--stw-radius) 0;
	transform: translateY(-50%);
	animation-name: stw-pulse-l;
}
.stw-tab--left:hover,
.stw-tab--left:focus-visible { transform: translateY(-50%) scale(1.05); }

/* Bottom-right corner pill */
.stw-tab--bottom {
	right: 18px;
	bottom: 18px;
	border-radius: 999px;
	padding: .8rem 1.15rem;
}

/* Pulse only the shadow ring — never transform — so hover-scale stays
   visible and the tab is positionally stable. */
@keyframes stw-pulse {
	0%, 100% { box-shadow: 0 10px 28px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .5), 0 0 0 0 rgba(var(--stw-glow-rgb, 220, 53, 69), .4); }
	50%      { box-shadow: 0 12px 30px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .6), 0 0 0 12px rgba(var(--stw-glow-rgb, 220, 53, 69), 0); }
}
@keyframes stw-pulse-r {
	0%, 100% { box-shadow: 0 10px 28px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .5), 0 0 0 0 rgba(var(--stw-glow-rgb, 220, 53, 69), .4); }
	50%      { box-shadow: 0 12px 30px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .6), 0 0 0 12px rgba(var(--stw-glow-rgb, 220, 53, 69), 0); }
}
@keyframes stw-pulse-l {
	0%, 100% { box-shadow: 0 10px 28px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .5), 0 0 0 0 rgba(var(--stw-glow-rgb, 220, 53, 69), .4); }
	50%      { box-shadow: 0 12px 30px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .6), 0 0 0 12px rgba(var(--stw-glow-rgb, 220, 53, 69), 0); }
}
@keyframes stw-minispin { to { transform: rotate(360deg); } }

/* =========================================================================
   MODAL SHELL  (Bootstrap modal mechanics, fully custom .stw-content)
   ====================================================================== */
.stw-modal .modal-dialog { max-width: 470px; }

.stw-content {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Bootstrap sets .modal-dialog { pointer-events: none }; .modal-content
	   normally restores it. We use .stw-content instead, so restore it here —
	   otherwise clicks fall through to the backdrop and dismiss the modal. */
	pointer-events: auto;
	border-radius: 22px;
	padding: 2rem 1.75rem 1.6rem;
	color: var(--stw-text, #fff);
	text-align: center;
	background: var(--stw-shell-bg,
		radial-gradient(120% 90% at 50% -10%, rgba(242, 99, 34, .35) 0%, rgba(242, 99, 34, 0) 55%),
		radial-gradient(120% 90% at 50% 110%, rgba(220, 53, 69, .35) 0%, rgba(220, 53, 69, 0) 55%),
		linear-gradient(160deg, #2a1437 0%, #161033 50%, #0d1b3a 100%));
	box-shadow: var(--stw-shell-shadow, 0 40px 90px -25px rgba(7, 6, 20, .8));
	transition: background .4s var(--stw-ease);
}
/* Confetti dots backdrop sparkle */
.stw-content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--stw-sparkle,
		radial-gradient(2px 2px at 20% 18%, rgba(255, 255, 255, .55) 50%, transparent 51%),
		radial-gradient(2px 2px at 78% 12%, rgba(255, 255, 255, .4) 50%, transparent 51%),
		radial-gradient(2px 2px at 12% 70%, rgba(255, 255, 255, .35) 50%, transparent 51%),
		radial-gradient(2px 2px at 88% 64%, rgba(255, 255, 255, .4) 50%, transparent 51%));
	pointer-events: none;
}

/* Light mode for the claim/form step (form legibility) */
.stw-content.stw-on-claim {
	color: var(--stw-ink);
	background: var(--stw-surface);
}
/* animation:none is load-bearing — a theme that animates this layer's opacity
   (Halloween's star field does) would otherwise outrank the opacity:0 and keep
   painting over the Gravity Form. */
.stw-content.stw-on-claim::before { opacity: 0; animation: none !important; }

.stw-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	color: var(--stw-text, #fff);
	background: var(--stw-close-bg, rgba(255, 255, 255, .14));
	cursor: pointer;
	transition: background .2s var(--stw-ease), transform .2s var(--stw-ease);
}
.stw-close:hover { background: var(--stw-close-bg-hover, rgba(255, 255, 255, .26)); transform: rotate(90deg); }
.stw-content.stw-on-claim .stw-close { color: var(--stw-ink); background: rgba(15, 23, 42, .08); }
.stw-content.stw-on-claim .stw-close:hover { background: rgba(15, 23, 42, .16); }

/* View switching + entrance. Views carry z-index 1 so the decor layer (z-index 0)
   can never land on top of copy or controls. */
.stw-view[hidden] { display: none; }
.stw-view { position: relative; z-index: 1; animation: stw-fade .4s var(--stw-ease) both; }
@keyframes stw-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.stw-head { margin-bottom: 1rem; }
.stw-headline {
	margin: 0 0 .25rem;
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.05;
	color: var(--stw-text, #fff);
	text-shadow: var(--stw-headline-shadow, 0 2px 12px rgba(0, 0, 0, .25));
}
.stw-subtext { margin: 0; font-size: .98rem; color: var(--stw-text-muted, rgba(255, 255, 255, .82)); }

/* =========================================================================
   WHEEL
   ====================================================================== */
.stw-wheelwrap {
	position: relative;
	width: 320px;
	max-width: 78vw;
	margin: .25rem auto .5rem;
	aspect-ratio: 1 / 1;
}
.stw-wheel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--stw-wheel-bg, #fff);
	box-shadow: var(--stw-wheel-ring, 0 0 0 8px rgba(255, 255, 255, .14), 0 0 0 14px rgba(255, 255, 255, .06), 0 20px 50px -12px rgba(0, 0, 0, .55));
}
.stw-wheel svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* Pointer pinned to top, does not rotate */
.stw-pointer {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	filter: var(--stw-pointer-shadow, drop-shadow(0 4px 6px rgba(0, 0, 0, .45)));
	transform-origin: 50% 90%;
}
.stw-pointer.is-tick { animation: stw-tick .12s var(--stw-ease); }
@keyframes stw-tick {
	0% { transform: translateX(-50%) rotate(0deg); }
	45% { transform: translateX(-50%) rotate(-11deg); }
	100% { transform: translateX(-50%) rotate(0deg); }
}

/* Center hub = the SPIN button */
.stw-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: 27%;
	height: 27%;
	min-width: 72px;
	min-height: 72px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: .03em;
	background: var(--stw-hub-bg, radial-gradient(circle at 35% 30%, #fff 0%, #ffe08a 18%, var(--stw-gold) 46%, #d99400 100%));
	color: var(--stw-hub-text, #3a2400);
	box-shadow: var(--stw-hub-shadow, 0 6px 18px rgba(0, 0, 0, .4), inset 0 2px 4px rgba(255, 255, 255, .7), inset 0 -4px 8px rgba(160, 100, 0, .5));
	transition: transform .18s var(--stw-ease), box-shadow .18s var(--stw-ease);
}
.stw-hub:hover { transform: translate(-50%, -50%) scale(1.07); }
.stw-hub:active { transform: translate(-50%, -50%) scale(.96); }
.stw-hub:focus-visible { box-shadow: 0 0 0 3px #0f172a, 0 0 0 6px #ffffff, 0 6px 18px rgba(0, 0, 0, .4) !important; }
.stw-hub.is-spinning { pointer-events: none; opacity: .92; }
.stw-hub__label { display: block; line-height: 1; }

.stw-fineprint { margin: .35rem 0 0; font-size: .72rem; color: var(--stw-text-faint, rgba(255, 255, 255, .55)); }

/* =========================================================================
   RESULT
   ====================================================================== */
.stw-view--result { padding: .5rem 0 .25rem; }
.stw-result__badge {
	width: 92px;
	height: 92px;
	margin: 0 auto 1rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 2.6rem;
	color: var(--stw-cta-ink, #fff);
	background: var(--stw-badge-bg, radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, var(--stw-orange), var(--stw-red)));
	box-shadow: var(--stw-badge-glow, 0 12px 30px -8px rgba(var(--stw-glow-rgb, 220, 53, 69), .65));
	animation: stw-pop .5s var(--stw-ease) both;
}
@keyframes stw-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.stw-result__headline {
	margin: 0 0 .35rem;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--stw-text, #fff);
}
.stw-result__message { margin: 0 auto 1.25rem; max-width: 30ch; color: var(--stw-text-muted, rgba(255, 255, 255, .82)); font-size: 1rem; }

.stw-claim {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 54px;
	padding: .9rem 2rem;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	color: var(--stw-cta-ink, #fff);
	font-size: 1.08rem;
	font-weight: 800;
	background: var(--stw-cta-bg, linear-gradient(135deg, var(--stw-red) 0%, var(--stw-red-dark) 100%));
	box-shadow: var(--stw-cta-glow, 0 10px 26px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .6));
	transition: transform .2s var(--stw-ease), box-shadow .2s var(--stw-ease);
	animation: stw-cta-breathe 2s var(--stw-ease) infinite;
}
.stw-claim:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .7); }
.stw-claim:focus-visible { box-shadow: 0 0 0 3px #0f172a, 0 0 0 6px #ffffff, 0 12px 28px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .6) !important; }
@keyframes stw-cta-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.stw-maybe {
	display: block;
	margin: .85rem auto 0;
	padding: .35rem .75rem;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--stw-text-link, rgba(255, 255, 255, .6));
	font-size: .85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.stw-maybe:hover { color: rgba(255, 255, 255, .9); }
.stw-content.stw-on-claim .stw-maybe { color: #64748b; }
.stw-content.stw-on-claim .stw-maybe:hover { color: var(--stw-ink); }

/* =========================================================================
   CLAIM / FORM
   ====================================================================== */
.stw-claim__head { margin-bottom: 1.1rem; }
.stw-claim__chip {
	display: inline-block;
	margin-bottom: .6rem;
	padding: .35rem .85rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--stw-cta-ink, #fff);
	background: var(--stw-chip-bg, linear-gradient(135deg, var(--stw-orange), var(--stw-red)));
	box-shadow: var(--stw-chip-glow, 0 6px 16px -4px rgba(var(--stw-glow-rgb, 220, 53, 69), .5));
}
.stw-claim__chip:empty { display: none; }
.stw-claim__headline { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; color: var(--stw-ink); }
.stw-form { text-align: left; margin-top: .5rem; }
.stw-form .gform_wrapper { margin: 0; }
.stw-form .gfield_label { font-weight: 600; }

/* =========================================================================
   EMAIL-FIRST GATE
   ====================================================================== */
.stw-view--email { padding: .5rem 0 .25rem; }
.stw-emailform { max-width: 320px; margin: 1.35rem auto 0; }
.stw-emailform__input {
	width: 100%;
	height: 52px;
	padding: 0 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--stw-input-bg, #fff);
	color: var(--stw-input-ink, var(--stw-ink));
	font-size: 1rem;
	text-align: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.stw-emailform__input:focus-visible { box-shadow: 0 0 0 3px #0f172a, 0 0 0 6px #ffffff, 0 6px 18px rgba(0, 0, 0, .25) !important; }
.stw-emailform__error { margin: .55rem 0 0; color: var(--stw-error, #fecaca); font-size: .85rem; font-weight: 600; }
.stw-emailform__btn { margin-top: .9rem; width: 100%; }

/* =========================================================================
   OPEN-THE-WHEEL BUTTON (shortcode / menu item). It sits outside the modal, so
   it is named in the token block's selector list at the top of this file — that
   is what gives it a variable scope of its own.
   ====================================================================== */
.stw-open-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	color: var(--stw-cta-ink, #fff);
	font-weight: 700;
	background: var(--stw-cta-bg, linear-gradient(135deg, var(--stw-red) 0%, var(--stw-red-dark) 100%));
	box-shadow: var(--stw-cta-glow, 0 8px 22px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .5));
	transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
.stw-open-btn:hover,
.stw-open-btn:focus { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(var(--stw-glow-rgb, 220, 53, 69), .6); color: var(--stw-cta-ink, #fff); }

/* =========================================================================
   ALREADY PLAYED
   ====================================================================== */
.stw-view--played { padding: 1rem 0; }
.stw-played__emoji { font-size: 3rem; margin-bottom: .5rem; animation: stw-pop .5s var(--stw-ease) both; }
.stw-played__headline { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 800; color: var(--stw-text, #fff); }
.stw-played__message { margin: 0 auto; max-width: 32ch; color: var(--stw-text-muted, rgba(255, 255, 255, .82)); }

/* =========================================================================
   CONFETTI canvas (created by JS, appended to body)
   ====================================================================== */
.stw-confetti {
	position: fixed;
	inset: 0;
	z-index: 1090;
	pointer-events: none;
}

/* =========================================================================
   DECOR LAYER  (seasonal themes only — renders nothing on its own)

   Two hosts inside .stw-content, which is already position:relative and
   overflow:hidden. Deliberately NO isolation/z-index on .stw-content itself:
   a new stacking context there would re-order the modal against Bootstrap's
   own backdrop. --back sits under the views, --front above the wheel but
   below the close button.
   ====================================================================== */
.stw-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	contain: layout paint style;
	--stw-fly: -660px;            /* sprite travel distance, read by theme keyframes */
	transition: opacity .35s var(--stw-ease);
}
.stw-decor * { pointer-events: none; }
.stw-decor[hidden] { display: none; }
.stw-decor--front { z-index: 5; }   /* above hub (3) and pointer (4), below close (6) */

/* Nothing decorative over the Gravity Form, and nothing flying over an input.
   visibility carries the guarantee; opacity only carries the fade. A transition
   is not reliable here — the claim step swaps a sibling view's display in the
   same frame and the opacity transition can fail to start, which would leave
   bats animating over the form. visibility is delayed by the fade duration so
   the fade still reads, and it is not delayed on the way back. */
.stw-content[data-stw-step="claim"] .stw-decor {
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--stw-ease), visibility 0s linear .35s;
}
.stw-content[data-stw-step="claim"] .stw-hub__art { display: none; }
.stw-content[data-stw-step="email"] .stw-decor--front { display: none; }

/* Effects = "Subtle (colors only)". The field promises the seasonal colours
   without the animated decoration, so drop the whole decor layer — server-rendered
   ambient art included — and stop every chrome animation a theme may have added. */
body.stw-fx-subtle .stw-decor { display: none; }
body.stw-fx-subtle .stw-content::before,
body.stw-fx-subtle .stw-headline,
body.stw-fx-subtle .stw-hub,
body.stw-fx-subtle .stw-hub__art,
body.stw-fx-subtle .stw-tab__wheel-spin { animation: none !important; }

/* Per-sprite variety comes from inline custom properties written by the JS
   builder (--x/--d/--t/--s/--o/--dx); there is no build step to generate them. */
.stw-sprite { position: absolute; left: var(--x, 50%); bottom: -40px; opacity: 0; line-height: 0; }
.stw-sprite svg { display: block; width: 100%; height: 100%; }

/* Artwork behind the SPIN label (e.g. a carved pumpkin face). */
.stw-hub__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stw-hub__art svg { display: block; width: 100%; height: 100%; }
.stw-hub__label { position: relative; z-index: 2; }

/* Forced-colors (Windows High Contrast) drops box-shadow entirely, so the ring
   above would vanish. Outline is honoured there and the square-corner rendering
   does not matter in that mode. */
@media (forced-colors: active) {
	.stw-tab:focus-visible,
	.stw-hub:focus-visible,
	.stw-claim:focus-visible,
	.stw-close:focus-visible,
	.stw-maybe:focus-visible,
	.stw-open-btn:focus-visible,
	.stw-emailform__input:focus-visible { outline: 3px solid CanvasText !important; outline-offset: 2px !important; }
}

/* =========================================================================
   RESPONSIVE — mobile bottom-sheet
   ====================================================================== */
@media (max-width: 575.98px) {
	.stw-tab { font-size: .82rem; padding: .6rem .8rem; }
	.stw-tab__text { max-width: 5.5em; white-space: normal; line-height: 1.05; }
	.stw-tab--bottom { right: 12px; bottom: 12px; }

	.stw-modal .modal-dialog {
		margin: 0;
		max-width: 100%;
		min-height: 100%;
		align-items: flex-end;
	}
	.stw-content {
		border-radius: 22px 22px 0 0;
		padding: 1.6rem 1.1rem 1.2rem;
	}
	.stw-headline { font-size: 1.45rem; }
	.stw-wheelwrap { max-width: 82vw; }
	.stw-decor { --stw-fly: -820px; }
}

@media (max-width: 360px) {
	.stw-tab--right .stw-tab__text,
	.stw-tab--left .stw-tab__text { display: none; }
}

/* =========================================================================
   REDUCED MOTION
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.stw-tab,
	.stw-tab__wheel-spin,
	.stw-claim,
	.stw-result__badge,
	.stw-played__emoji { animation: none !important; }
	.stw-view { animation-duration: .01ms; }
	.stw-pointer.is-tick { animation: none !important; }

	/* Decor: ambient layers freeze but stay visible; travel sprites are never
	   built by the JS in the first place. The blanket rule here is the backstop
	   for anything a theme file adds. */
	.stw-decor,
	.stw-decor * { animation: none !important; }
	.stw-decor { transition-duration: .01ms; }
}