/* ==================================================================
   PART 2 — THE WIDGET
   Everything below ships. It sets no background of its own, sizes
   itself from its CONTAINER rather than the viewport (so it behaves
   correctly in any Elementor column), and carries its own glows.

   Glow values are taken from subnautica.com:
     inset cyan     rgba(87,219,255,.6) 0 0 32px inset
     rotating conic glow on buttons, 5s linear infinite

   The site's radial decoration blooms are deliberately NOT here.
   They use mix-blend-mode: screen, which needs an opaque ground to
   blend against — over a transparent widget they composite into
   visible artefacts. On the live site they are section decorations,
   not card decorations, so they belong on the Elementor section
   background instead.
   ================================================================== */

.sn-vote-widget {
	container-type: inline-size;
	container-name: snvote;
	position: relative;
	isolation: isolate;
	font-family: var(--font);
	/* deliberately no background */
}

.sn-vote-widget * { box-sizing: border-box; }

/* ------------------------------------------------------------------
   THEME DEFENCE
   This widget lands inside someone else's theme. Elementor and most
   themes style bare `button` and `p`, and those selectors carry
   enough specificity to beat a single class. Two real bugs came from
   exactly that: the theme's pink button:hover showed through the
   results toggle (which never declared its own hover background), and
   the theme's paragraph margin overrode the gap under the option copy.
   Anything a theme is likely to set is reset here and re-declared
   with the widget class in front of it.
   ------------------------------------------------------------------ */
.sn-vote-widget button {
	margin: 0;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

.sn-vote-widget button:hover,
.sn-vote-widget button:focus,
.sn-vote-widget button:active,
.sn-vote-widget button:visited {
	box-shadow: none;
	text-decoration: none;
}

.sn-vote-widget p { margin: 0; }

/* Same reasoning as the results toggle: the vote button is the whole
   point of the widget and must not be repainted by the host theme. */
.sn-vote-widget .sn-vote-btn {
	background: var(--amber-deep) !important;
	border-color: transparent !important;
	color: var(--white) !important;
	/* Box model pinned so a theme's tall-button rule can't balloon the
	   primary CTA. More specific than an Elementor kit's button rule, so
	   these win even against the kit's own !important. */
	line-height: 1.3 !important;
	height: auto !important;
	min-height: 48px !important;
	/* Padding pinned to defeat a theme's blanket button padding. Constant
	   across breakpoints (font-size and letter-spacing still vary); the
	   small screens gain a slightly roomier tap target, which is welcome. */
	padding: 14px 16px !important;
}
.sn-vote-widget .sn-vote-btn:hover:not(:disabled) {
	background: var(--amber-grad) !important;
	border-color: var(--amber-bright) !important;
}
.sn-vote-widget .sn-vote-btn:focus-visible:not(:disabled) {
	background: var(--amber-grad) !important;
	border-color: var(--amber-bright) !important;
}

/* Values copied from the real rules further down, so the defence
   changes nothing about the design — it only stops a theme
   overwriting it. The chosen option keeps its amber gradient, so it
   must come AFTER the plain disabled state. */
.sn-vote-widget .sn-vote-btn:disabled {
	background: transparent !important;
	border-color: rgba(66, 127, 149, 0.9) !important;
	color: var(--faint) !important;
}

.sn-vote-widget .sn-vote-box.is-chosen .sn-vote-btn,
.sn-vote-widget .sn-vote-box.is-chosen .sn-vote-btn:disabled {
	background: var(--amber-grad) !important;
	border-color: var(--amber-bright) !important;
	color: var(--white) !important;
}

.snv {
	/* The approved design is Noto Sans, read from subnautica.com. This
	   variable used to be defined only in the blueprint's demo wrapper,
	   which never shipped — so the live widget silently used whatever
	   font the theme had. */
	--font: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
	--panel: #09384a;
	--panel-border: #427f95;
	--amber-deep: #cd6d07;
	--amber-bright: #f0b225;
	--amber-grad: linear-gradient(0deg, #cd6d07, #f0b225);
	--white: #ffffff;
	--ice: #aadae5;
	--cyan: #93eafd;
	--cyan-glow: #57dbff;
	--cyan-bloom: #a5e7f7;
	--purple-bloom: #af20df;
	--dim: rgba(255, 255, 255, 0.72);
	/* 0.45 measured ~3.8:1 on the panel — below the 4.5:1 text minimum. */
	--faint: rgba(255, 255, 255, 0.62);
	--r-xs: 4px;
	--r-sm: 8px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
	--pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Heading ---------- */

.snv .snv-head{ text-align: center; margin-bottom: 30px; }

.snv .snv-rule{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 13px;
}

.snv .snv-rule::before,
.snv .snv-rule::after{
	content: '';
	height: 1px;
	width: min(150px, 20cqw);
	background: linear-gradient(90deg, transparent, var(--panel-border));
}

.snv .snv-rule::after{ background: linear-gradient(90deg, var(--panel-border), transparent); }

.snv .snv-kicker{
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ice);
	margin: 0;
	text-shadow: 0 0 18px rgba(87, 219, 255, 0.5);
}

.snv .snv-title{
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--white);
	margin: 0;
	text-shadow: 0 0 26px rgba(87, 219, 255, 0.35);
}

/* ---------- Countdown ----------
   Days / hours / mins / secs to the close time, between the heading
   and the options. Same panel colours as the option boxes; numbers in
   tabular figures so the row doesn't twitch as the seconds change. */

.snv .snv-countdown{
	text-align: center;
	margin: -8px auto 30px;
	font-family: var(--font);
}
.snv .snv-countdown[hidden],
.snv .snv-countdown__units[hidden]{ display: none !important; }

.snv .snv-countdown .snv-countdown__label{
	margin: 0 0 12px;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ice);
}

.snv .snv-countdown__units{
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
}

.snv .snv-cd-unit{
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 70px;
	padding: 11px 8px 9px;
	background: rgba(9, 56, 74, 0.72);
	border: 1px solid var(--panel-border);
	border-radius: var(--r-sm);
	box-shadow: inset 0 0 22px rgba(87, 219, 255, 0.08), 0 0 18px rgba(87, 219, 255, 0.06);
}

.snv .snv-cd-unit b{
	display: block;
	font-family: var(--font);
	font-size: 30px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--white);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 18px rgba(87, 219, 255, 0.35);
}

.snv .snv-cd-unit i{
	display: block;
	margin-top: 7px;
	font-family: var(--font);
	font-size: 10px;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--faint);
}

.snv .snv-cd-sep{
	font-family: var(--font);
	font-size: 24px;
	font-weight: 700;
	line-height: 52px;
	color: var(--panel-border);
}

/* Final hour: the numbers turn amber. */
.snv .snv-countdown.is-final .snv-cd-unit b{ color: var(--amber-bright); text-shadow: 0 0 18px rgba(240, 178, 37, 0.35); }
.snv .snv-countdown.is-final .snv-cd-unit{ border-color: rgba(240, 178, 37, 0.55); }

/* Closed: the heading alone, in amber. */
.snv .snv-countdown.is-closed .snv-countdown__label{ margin: 0; font-size: 14px; color: var(--amber-bright); }

/* [sn_vote_countdown] placed elsewhere on the page. */
.snv.snv-countdown-standalone .snv-countdown{ margin: 0 auto; }
.snv.snv-countdown-standalone p{ margin: 0; }

/* "Vote again" (test mode): a quick dip so the reset visibly happened. */
.snv.is-reset .snv-grid{ animation: snv-reset 0.6s var(--ease-soft); }
@keyframes snv-reset{ 0%{ opacity: 1; } 35%{ opacity: 0.35; } 100%{ opacity: 1; } }

/* ---------- Grid ---------- */

.snv .snv-grid[data-count='2']{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
.snv .snv-grid[data-count='4']{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.snv .snv-grid[data-count='5'],
.snv .snv-grid[data-count='6']{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.snv .snv-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	/* Panels stretch to a shared height, and .snv-box__text carries
	   flex:1, so buttons and results line up across the row however
	   the titles wrap. */
	align-items: stretch;
}

/* Option count. Not responsive — these belong at base level. */
.snv .snv-grid[data-count='2']{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
.snv .snv-grid[data-count='4']{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.snv .snv-grid[data-count='5'],
.snv .snv-grid[data-count='6']{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Panel ---------- */

.snv .sn-vote-box{
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border: 2px solid var(--panel-border);
	border-radius: var(--r-sm);
	padding: 15px;
	transition:
		border-color 0.18s ease,
		transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s ease;
}

/* The hover glow is painted once and revealed by opacity. Animating
   box-shadow itself repaints the panel every frame, which is what
   made the hover feel like it lagged behind the cursor. */
.snv .sn-vote-box::before{
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: var(--r-sm);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.16s ease;
	box-shadow:
		inset 0 0 32px 0 rgba(87, 219, 255, 0.3),
		0 14px 30px -14px rgba(87, 219, 255, 0.45);
}

.snv .sn-vote-box:hover::before{ opacity: 1; }

/* The chosen panel's amber glow, also opacity-driven */
.snv .snv-chosen-glow{
	position: absolute;
	inset: -2px;
	border-radius: var(--r-sm);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	box-shadow:
		inset 0 0 34px 0 rgba(240, 178, 37, 0.26),
		0 0 0 1px rgba(240, 178, 37, 0.5),
		0 0 40px -6px rgba(240, 178, 37, 0.6);
}

.snv .sn-vote-box.is-chosen .snv-chosen-glow{
	opacity: 1;
	animation: snv-breathe 3.4s ease-in-out 0.9s infinite;
}

@keyframes snv-breathe {
	0%, 100% { opacity: 0.72; }
	50%      { opacity: 1; }
}

.snv .snv-grid.is-ready .sn-vote-box{ animation: snv-rise 0.7s var(--ease-out) backwards; }
.snv .snv-grid.is-ready .sn-vote-box:nth-child(2){ animation-delay: 0.1s; }
.snv .snv-grid.is-ready .sn-vote-box:nth-child(3){ animation-delay: 0.2s; }
.snv .snv-grid.is-ready .sn-vote-box:nth-child(4){ animation-delay: 0.3s; }
.snv .snv-grid.is-ready .sn-vote-box:nth-child(5){ animation-delay: 0.4s; }
.snv .snv-grid.is-ready .sn-vote-box:nth-child(6){ animation-delay: 0.5s; }

@keyframes snv-rise {
	from { transform: translateY(16px) scale(0.98); opacity: 0.5; }
	to   { transform: none; opacity: 1; }
}

/* Their inset cyan glow, brought up on hover */
.snv .sn-vote-box:hover{
	border-color: #5fa7bf;
	transform: translateY(-3px);
}

.snv.is-submitting .sn-vote-box:not(.is-pending) { opacity: 0.5; }

.snv .sn-vote-box.is-pending{
	border-color: var(--amber-bright);
	box-shadow: inset 0 0 32px 0 rgba(240, 178, 37, 0.22);
}

/* The confirm beat */
.snv .sn-vote-box.just-chosen{ animation: snv-confirm 0.9s var(--ease-out); }

@keyframes snv-confirm {
	0%   { transform: none; }
	30%  { transform: translateY(-8px) scale(1.015); }
	100% { transform: none; }
}

/* A shockwave ring leaves the chosen panel once */
.snv .sn-vote-box::after{
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: var(--r-sm);
	border: 2px solid var(--amber-bright);
	opacity: 0;
	pointer-events: none;
}

.snv .sn-vote-box.just-chosen::after{ animation: snv-shock 0.85s var(--ease-out); }

@keyframes snv-shock {
	0%   { opacity: 0.9; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.08); }
}

.snv .sn-vote-box.is-chosen{ border-color: var(--amber-bright); }

/* ---------- Image ---------- */

.snv .sn-vote-image{
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	border-radius: var(--r-xs);
	background: #06283a;
	cursor: zoom-in;
	transition: opacity 0.18s ease;
}

.snv .sn-vote-image::after{
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.16s ease;
	box-shadow: inset 0 0 28px 0 rgba(87, 219, 255, 0.45);
}
.snv .sn-vote-image:hover::after { opacity: 1; }
.snv .sn-vote-image:focus-visible::after { opacity: 1; }

/* `> img` only. A descendant `img` also caught the PNG frame overlay,
   cropping it with object-fit:cover and zooming it on hover. */
.snv .sn-vote-image .snv-ph,
.snv .sn-vote-image > img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.snv .sn-vote-image:hover .snv-ph,
.snv .sn-vote-image:hover > img { transform: scale(1.06); }
.snv .sn-vote-image:focus-visible .snv-ph,
.snv .sn-vote-image:focus-visible > img { transform: scale(1.06); }

.snv .sn-vote-image:focus-visible{ outline: 2px solid var(--amber-bright); outline-offset: 2px; }

/* Shine sweep across the artwork on hover */
.snv .snv-shine{
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
	transform: translateX(-120%);
	opacity: 0;
}

.snv .sn-vote-image:hover .snv-shine{ animation: snv-shine 0.95s var(--ease-soft); }

@keyframes snv-shine {
	0%   { transform: translateX(-120%); opacity: 1; }
	100% { transform: translateX(120%);  opacity: 1; }
}

/* Ambient bubbles — their blurred, overlay-blended decoration */
.snv .snv-bubbles{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.snv .snv-bubbles i{
	position: absolute;
	bottom: -14%;
	display: block;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85), rgba(147, 234, 253, 0.16) 62%, transparent 72%);
	filter: blur(1.2px);
	mix-blend-mode: overlay;
	opacity: 0;
	animation: snv-rise-bubble linear infinite;
}

@keyframes snv-rise-bubble {
	0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
	12%  { opacity: 0.85; }
	80%  { opacity: 0.6; }
	100% { transform: translateY(-560%) translateX(14px) scale(1.15); opacity: 0; }
}

.snv .snv-zoom{
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--white);
	background: rgba(4, 22, 31, 0.8);
	border: 1px solid rgba(147, 234, 253, 0.35);
	padding: 4px 8px;
	border-radius: var(--r-xs);
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px) scale(0.94);
	transition: opacity 0.16s ease, transform 0.22s var(--pop);
}
.snv .sn-vote-image:hover .snv-zoom { opacity: 1; transform: none; }
.snv .sn-vote-image:focus-visible .snv-zoom { opacity: 1; transform: none; }

/* ---------- Copy ---------- */

.snv .snv-box__title{
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.25px;
	text-transform: uppercase;
	color: var(--white);
	margin: 18px 0 10px;
	text-wrap: balance;
}

.snv .snv-box__text{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--dim);
	/* This element is flex:1, so its bottom margin is the entire gap
	   between the last line of copy and the button. Needs to be more
	   generous than a normal paragraph margin for that reason. */
	flex: 1;
}

/* ---------- Button ---------- */

.snv .snv-btn-wrap{ position: relative; border-radius: var(--r-xs); }

/* The space above the vote button lives HERE, on a div, rather than as
   a margin under the copy: a theme's `p` rule outranks a single class
   and was flattening it to nothing. Scoped with the widget class so it
   outranks the theme in turn. */
.sn-vote-widget .snv-btn-wrap { margin-top: 34px; }
.sn-vote-widget .snv-box__text { margin: 0; }

/* Their rotating conic glow. It has to be clipped: a wide element
   rotating about its centre sweeps out to its own diagonal, which
   would throw the streak right across the copy above. Their version
   uses overflow:hidden + contain:paint for exactly this reason. */
.snv .snv-btn-glow{
	position: absolute;
	inset: 0;
	overflow: hidden;
	contain: paint;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 0;
}

.snv .snv-btn-glow::before{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	background: conic-gradient(transparent 0deg, rgba(255, 226, 150, 0.9) 55deg, transparent 120deg);
}

.snv .sn-vote-btn:hover:not(:disabled) .snv-btn-glow,
.snv .sn-vote-box.is-chosen .snv-btn-glow{ opacity: 1; }

.snv .sn-vote-btn:hover:not(:disabled) .snv-btn-glow::before,
.snv .sn-vote-box.is-chosen .snv-btn-glow::before{
	animation: snv-spin 5s linear infinite;
}

@keyframes snv-spin {
	to { transform: translate(-50%, -50%) rotate(1turn); }
}

.snv .sn-vote-btn{
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: block;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--white);
	background: var(--amber-deep);
	border: 1px solid transparent;
	border-radius: var(--r-xs);
	padding: 13px 16px;
	width: 100%;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease, box-shadow 0.18s ease;
}

.snv .sn-vote-btn:hover:not(:disabled){
	background: var(--amber-grad);
	border-color: var(--amber-bright);
	box-shadow: 0 0 22px -4px rgba(240, 178, 37, 0.75);
}

.snv .sn-vote-btn:active:not(:disabled){ transform: scale(0.97); }
.snv .sn-vote-btn:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }
.snv .sn-vote-btn-label{ position: relative; z-index: 1; }

.snv .sn-vote-btn.is-working::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.32) 50%, transparent 80%);
	transform: translateX(-100%);
	animation: snv-sweep 0.95s linear infinite;
}

@keyframes snv-sweep { to { transform: translateX(100%); } }

.snv .sn-vote-btn:disabled{
	background: transparent;
	border-color: rgba(66, 127, 149, 0.9);
	color: var(--faint);
	cursor: default;
	box-shadow: none;
}

.snv .sn-vote-box.is-chosen .sn-vote-btn{
	background: var(--amber-grad);
	border-color: var(--amber-bright);
	color: var(--white);
}

/* ---------- Results ---------- */

.snv .sn-vote-results{
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.6s var(--ease-out);
}

.snv .sn-vote-results.is-open{ grid-template-rows: 1fr; }
.snv .sn-vote-results[hidden]{ display: none; }

.snv .snv-results-inner{
	overflow: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s ease 0.14s, transform 0.55s var(--ease-out) 0.14s;
}

.snv .sn-vote-results.is-open .snv-results-inner{ opacity: 1; transform: none; }

.snv .sn-vote-bar{
	position: relative;
	width: 100%;
	height: 10px;
	margin-top: 16px;
	background: rgba(66, 127, 149, 0.28);
	border: 1px solid rgba(66, 127, 149, 0.6);
	overflow: hidden;
}

.snv .sn-vote-bar-fill{
	display: block;
	height: 100%;
	width: 0%;
	background: var(--amber-grad);
	position: relative;
	box-shadow: 0 0 14px 0 rgba(240, 178, 37, 0.7);
}

/* The beam rides the bar's leading edge.
   It used to be a sweep on its own CSS timeline (1.15s, one easing)
   while the bar's width is driven by the counter (1.4s, a different
   easing) — so the two could never stay together. Both parts are now
   anchored to the right-hand edge of the fill, which means they move
   with it by construction and cannot drift. */

/* Bright tip */
.snv .sn-vote-bar-fill::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: #fff8e6;
	box-shadow: 0 0 12px 3px rgba(255, 220, 140, 0.95);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Comet tail trailing behind the tip */
.snv .sn-vote-bar-fill::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 52px;
	max-width: 100%;
	background: linear-gradient(90deg, rgba(255, 248, 230, 0) 0%, rgba(255, 243, 214, 0.6) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.snv .sn-vote-bar.is-filling .sn-vote-bar-fill::before,
.snv .sn-vote-bar.is-filling .sn-vote-bar-fill::after{ opacity: 1; }

.snv .snv-result-row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 10px;
	font-variant-numeric: tabular-nums;
}

.snv .sn-vote-count{ font-size: 14px; font-weight: 500; color: var(--ice); }

.snv .sn-vote-percent{
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.25px;
	color: var(--white);
	display: inline-block;
}

.snv .sn-vote-percent.is-landing{ animation: snv-land 0.5s var(--pop); }

@keyframes snv-land {
	0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(240, 178, 37, 0); }
	40%  { transform: scale(1.14); text-shadow: 0 0 22px rgba(240, 178, 37, 0.95); }
	100% { transform: scale(1);    text-shadow: 0 0 0 rgba(240, 178, 37, 0); }
}

.is-chosen .sn-vote-percent { color: var(--amber-bright); }

.snv .sn-vote-count.is-ticking{ animation: snv-tick 0.55s var(--ease-soft); }

@keyframes snv-tick {
	0%   { color: var(--ice); }
	28%  { color: #fff; text-shadow: 0 0 14px rgba(147, 234, 253, 0.9); }
	100% { color: var(--ice); text-shadow: none; }
}

/* ---------- Secondary action ----------
   A text link, not a button. It exists so people who only want the
   numbers don't cast a junk vote to unlock them — but every skip is
   a vote not cast, so it must never read as an alternative CTA. */

.snv .snv-actions{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.snv .snv-actions[hidden]{ display: none; }

/* Running total. Social proof at scale — but it only renders once the
   results are on screen AND the count clears CONFIG.minTotal, because
   "12 votes" at launch suppresses the very participation it's meant
   to drive, and launch is when the traffic spike lands. */
.snv .snv-total{
	margin: 0;
	font-family: var(--font);
	font-size: 14px;
	letter-spacing: 0.4px;
	color: var(--ice);
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.snv .snv-total[hidden]{ display: none; }
.snv .snv-total.is-in{ opacity: 1; transform: none; }

.snv .snv-total b{
	color: var(--white);
	font-weight: 700;
	text-shadow: 0 0 18px rgba(87, 219, 255, 0.45);
}

/* Shown after voting when results are withheld until close */
.snv .snv-note{
	margin: 0;
	max-width: 46ch;
	text-align: center;
	font-family: var(--font);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ice);
	opacity: 0.85;
}

.snv .snv-note[hidden]{ display: none; }

.snv .snv-results-toggle{
	position: relative;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: var(--ice);
	background: none;
	border: 0;
	border-radius: 3px;
	padding: 4px 2px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	opacity: 0.78;
	transition: color 0.16s ease, opacity 0.16s ease;
}

.snv .snv-results-toggle[hidden]{ display: none; }

/* Underline drawn as a pseudo-element so it can wipe in rather than
   snapping on, and so it never shifts the text baseline. */
.snv .snv-results-toggle::after{
	content: '';
	position: absolute;
	left: 2px;
	right: 20px;
	bottom: 1px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s var(--ease-out);
}

/* background is declared on EVERY state on purpose: leaving it out of
   :hover let the theme's own button:hover colour through.
   !important is deliberate and narrow. Themes — Elementor kits
   especially — routinely ship `button:hover { background: … !important }`,
and nothing short of !important can take that back. It is confined
   to the handful of properties a theme would repaint,
so the widget
   still owns its own look wherever it is dropped. */
.sn-vote-widget .snv-results-toggle,
.sn-vote-widget .snv-results-toggle:hover,
.sn-vote-widget .snv-results-toggle:focus,
.sn-vote-widget .snv-results-toggle:active {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	/* Box model pinned too. A theme or Elementor kit that sets a big
	   min-height, height or line-height on <button> made this link a tall
	   block with empty space below the text on mobile. Its tap size comes
	   from padding, so it stays comfortable without a rigid height. */
	/* min-height pinned to the 44px tap-target floor AND !important, so a
	   theme's larger min-height (which caused the tall, empty-looking
	   button) loses on specificity and it lands at exactly 44 — a proper
	   tap target, not a block with white space. */
	min-height: 44px !important;
	height: auto !important;
	width: auto !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	padding: 6px 14px !important;
	justify-content: center;
}
.sn-vote-widget .snv-results-toggle:focus-visible {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
}
.sn-vote-widget .snv-results-toggle:hover {
	color: var(--cyan) !important;
	opacity: 1;
}
.sn-vote-widget .snv-results-toggle:focus-visible {
	color: var(--cyan) !important;
	opacity: 1;
}

.sn-vote-widget .snv-results-toggle:focus { color: var(--ice); }

.snv .snv-results-toggle:hover::after{ transform: scaleX(1); }

.snv .snv-results-toggle:active{ opacity: 0.7; }
.snv .snv-results-toggle:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Chevron turns over when the results are showing */
.snv .snv-results-toggle svg{
	width: 10px;
	height: 10px;
	flex: none;
	transition: transform 0.3s var(--ease-out);
}

.snv .snv-results-toggle[aria-expanded='true'] svg{ transform: rotate(180deg); }

/* ---------- Lightbox ---------- */

.snv-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vmin;
	background: rgba(3, 14, 20, 0.88);
	/* Blur is constant; only opacity animates. Animating a full-viewport
	   backdrop-filter repaints the whole screen every frame — very
	   costly on the mid-range phones most of this audience will use. */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	/* hidden, not just transparent: at opacity 0 the close button was
	   still focusable and the dialog still in the accessibility tree */
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.snv-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.35s ease, visibility 0s linear 0s;
}

/* Scroll lock. This rule lived only in the legacy stylesheet, which is
   no longer loaded, so the page scrolled behind the open lightbox. */
body.sn-vote-lightbox-open { overflow: hidden; }

@media (max-width: 620px) {
	.snv-lightbox { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3, 14, 20, 0.94); }
}

/* The lightbox lives on <body>, outside the widget's theme defence. */
.snv-lightbox .snv-lightbox__close,
.snv-lightbox .snv-lightbox__close:hover,
.snv-lightbox .snv-lightbox__close:focus,
.snv-lightbox .snv-lightbox__close:active {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
}

.snv-lightbox .snv-lightbox__close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.snv .snv-lightbox__frame{
	position: relative;
	width: min(72vmin, 680px);
	aspect-ratio: 1 / 1;
	border: 2px solid var(--panel-border);
	border-radius: var(--r-sm);
	overflow: hidden;
	will-change: transform;
	box-shadow: 0 0 60px -10px rgba(87, 219, 255, 0.55);
}

.snv .snv-lightbox__frame .snv-ph,
.snv .snv-lightbox__frame img,
.snv .snv-lightbox__frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anchored to the overlay, not the frame — see the note in the script.
   z-index keeps it above the frame during the flight. */
.snv .snv-lightbox__close{
	position: absolute;
	top: 18px;
	right: 22px;
	z-index: 2;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
	opacity: 0;
	transition: color 0.2s ease, opacity 0.3s ease 0.25s;
}

.snv-lightbox.is-open .snv-lightbox__close { opacity: 1; }
.snv .snv-lightbox__close:hover{ color: #fff; }

/* The thumbnail hides while its image is "out" */
.snv .sn-vote-image.is-lifted{ opacity: 0; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.sn-vote-widget *,
	.sn-vote-widget *::before,
	.sn-vote-widget *::after,
	.snv-lightbox,
	.snv-lightbox * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.snv .snv-bubbles, .snv .snv-shine{ display: none; }
	.snv .sn-vote-btn.is-working::after{ display: none; }
}


/* ---------- Decorative PNG frame ----------
   Sits over the artwork. pointer-events:none is load-bearing: without
   it the frame swallows the click that opens the lightbox. */
.snv .sn-vote-frame{
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
	display: block;
}

.snv .sn-vote-frame-img{
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
}

/* ---------- Error / status line ---------- */
.snv .sn-vote-message{
	margin: 14px auto 0;
	max-width: 52ch;
	text-align: center;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: #ffd9d9;
	background: rgba(120, 22, 22, 0.35);
	border: 1px solid rgba(255, 140, 140, 0.45);
	border-radius: var(--r-xs);
	padding: 10px 14px;
}

/* Kept rendered and merely emptied. Toggling it from display:none to
   visible in the same tick as setting its text is announced unreliably
   by screen readers, so errors could go unheard. */
.snv .sn-vote-message:not(.is-visible){
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	min-height: 0;
}

/* ---------- Test-mode banner ----------
   Shown to every visitor while test mode is on (the page learns that
   from the results feed, so a cached page still gets it right).
   Deliberately loud: test mode skips the one-vote limit
   and Turnstile, and leaving it on by accident would be silent
   otherwise. */
.snv .sn-vote-testbar{
	margin: 0 0 18px;
	padding: 10px 14px;
	border: 1px dashed #f0b225;
	border-radius: var(--r-xs);
	background: rgba(240, 178, 37, 0.10);
	color: #ffe6b0;
	font-family: var(--font);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.snv .sn-vote-testbar strong{ color: #f0b225; }
.snv .sn-vote-testbar[hidden]{ display: none !important; }
.snv .sn-vote-testbar__admin{ display: block; margin-top: 4px; opacity: .85; }

/* ---------- Debug panel ----------
   Admin test mode only. Fixed to the corner and deliberately plain —
   it is a tool, not part of the design. */
.sn-vote-debug {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 100002;
	width: min(460px, calc(100vw - 24px));
	background: #0b1418;
	border: 1px solid #427f95;
	border-radius: 6px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: #cfe3ea;
	overflow: hidden;
}

.sn-vote-debug__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px;
	background: #12232a;
	border-bottom: 1px solid #23414d;
	font-size: 12px;
}

.sn-vote-debug__bar strong { color: #93eafd; font-weight: 600; }
.sn-vote-debug__bar span { display: flex; gap: 6px; }

.sn-vote-debug button {
	font: inherit;
	font-size: 11px;
	color: #cfe3ea;
	background: #1b333d;
	border: 1px solid #2f5a6a;
	border-radius: 3px;
	padding: 3px 9px;
	cursor: pointer;
}

.sn-vote-debug button:hover { background: #24444f; color: #fff; }

.sn-vote-debug pre {
	margin: 0;
	padding: 9px 10px;
	max-height: 230px;
	overflow: auto;
	font-size: 11px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.sn-vote-debug.is-folded pre { display: none; }

/* Folded it is only a title bar, so it can't cover a vote button. */
.sn-vote-debug__bar strong span {
	display: inline-block;
	min-width: 18px;
	margin-left: 4px;
	padding: 0 5px;
	border-radius: 8px;
	background: #2f5a6a;
	color: #cfe3ea;
	font-size: 10px;
	text-align: center;
}

@media (max-width: 600px) {
	.sn-vote-debug pre { max-height: 150px; }
}

/* Resets the widget to a fresh, unvoted state without a reload. */
.snv .sn-vote-again{
	display: inline-block;
	margin-left: 10px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: #0b1418;
	background: #f0b225;
	border: 0;
	border-radius: 3px;
	padding: 4px 12px;
	cursor: pointer;
}

.snv .sn-vote-again:hover{ background: #ffc94d; }
.sn-vote-widget .sn-vote-again, .sn-vote-widget .sn-vote-again:hover { text-transform: none !important; letter-spacing: 0.6px !important; border: 0 !important; box-shadow: none !important; }
.snv .sn-vote-again:focus-visible{ outline: 2px solid #93eafd; outline-offset: 2px; }


/* ------------------------------------------------------------------
   HARDENING
   Fixes found in the full audit. Kept together, and kept ABOVE the
   responsive block, which must stay last.
   ------------------------------------------------------------------ */

/* container-type:inline-size makes an element size to its container,
   not its content — inside a shrink-to-fit parent (an Elementor
   container set to align-items:center) the widget collapsed to 0px. */
.sn-vote-widget {
	width: 100%;
	/* Buttons, counts and the kicker otherwise inherit the theme's. */
	line-height: 1.5;
}

/* Long single words (a URL, a German compound, a hashtag) used to
   stretch a column past its share and scroll the page sideways.
   `overflow-wrap: anywhere` / `word-break` / `hyphens: auto` fixed
   that — but on this text (flex:1, inside a grid, inside a container
   query) they trigger a real rendering-engine bug on mobile: instead
   of wrapping, the engine appears to size the paragraph as if it has
   to break at every possible point, and the computed height balloons
   from ~30px to several THOUSAND px — which is what inflated the
   whole widget to ~20,000px tall with a wall of empty space below it.
   Confirmed live: toggling overflow-wrap/word-break/hyphens on this
   element reproduces the runaway height every time, on this exact
   property set, regardless of which of the three is set.
   `overflow: hidden` gives the same practical protection (a stray
   long word is clipped at the column edge instead of wrapping) without
   touching line-breaking, so it doesn't trip the bug. */
.snv .snv-box__title,
.snv .snv-box__text,
.snv .snv-title {
	overflow: hidden;
}

/* Headings and text elements set their size, weight and colour but not
   their typeface — so a theme's `h3 { font-family: … }` landed on the
   element directly and beat inheritance from the widget. Everything
   inherits the brand face from the root. (0,2,1): above an Elementor
   kit's `.elementor-kit-N h3` (0,1,1), and only font-family is touched,
   so no component rule is overridden. */
.sn-vote-widget.snv :is(h1, h2, h3, h4, h5, h6, p, button, span, b, strong, small, em, label) {
	font-family: inherit;
}

.sn-vote-widget.snv { font-family: var(--font); }
.snv-lightbox.snv :is(button) { font-family: var(--font); }

.snv .snv-kicker { line-height: 1.4; }

/* A fixed 20px line-height made a wrapped heading overlap itself. */
.snv .snv-title { line-height: 1.2; }

/* Screen-reader-only announcer for "your vote has been counted". */
.snv .snv-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* After voting, focus moves to the chosen panel so keyboard users
   aren't dropped back to the top of the page. */
.snv .sn-vote-box:focus { outline: none; }
.snv .sn-vote-box:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Touch screens have no hover. A tap "sticks" the hover state, leaving
   a lifted panel behind after the finger has gone. */
@media (hover: none) {
	.snv .sn-vote-box:hover { transform: none; border-color: var(--panel-border); }
	.snv .sn-vote-box:hover::before { opacity: 0; }
	.snv .sn-vote-image:hover .snv-ph,
	.snv .sn-vote-image:hover > img { transform: none; }
	/* 30 infinite blurred, blended animations is a real cost on a phone,
	   and most of this audience is on one. */
	.snv .snv-bubbles { display: none; }
}

/* Turnstile's challenge used to be appended, unstyled, to the very end
   of <body> — below the fold on a phone. If Cloudflare needs the visitor
   to click, it now appears in the middle of the screen. */
.sn-vote-turnstile-holder {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100003;
}

.sn-vote-turnstile-holder:empty { display: none; }

/* ------------------------------------------------------------------
   HARDENING, second sweep
   ------------------------------------------------------------------ */

/* No JavaScript (blocked, deferred by an optimiser, or an engine too old):
   say so, and don't present buttons that look live but do nothing. */
.snv .snv-nojs-msg { display: none; }
.snv.snv-nojs .snv-nojs-msg {
	display: block;
	margin: 0 auto 18px;
	max-width: 60ch;
	padding: 10px 14px;
	text-align: center;
	font-size: 14px;
	color: var(--ice);
	border: 1px dashed var(--panel-border);
	border-radius: var(--r-xs);
}
.snv.snv-nojs .snv-btn-wrap { opacity: 0.45; pointer-events: none; }
.snv.snv-nojs .sn-vote-image { cursor: default; }

/* Tap targets: 44px is the minimum a thumb reliably hits. The vote button
   inherited the theme's line-height and came out ~34px on landscape
   phones; the results toggle was ~26px. */
.snv .sn-vote-btn { min-height: 44px; line-height: 1.3; }

/* No 300ms double-tap-to-zoom wait before a tap registers. */
.snv .sn-vote-btn,
.snv .sn-vote-image,
.snv .snv-results-toggle,
.snv-lightbox .snv-lightbox__close { touch-action: manipulation; }

.snv-lightbox .snv-lightbox__close {
	min-width: 44px;
	min-height: 44px;
	/* clear of the notch in landscape when the theme uses viewport-fit=cover */
	top: max(18px, env(safe-area-inset-top));
	right: max(22px, env(safe-area-inset-right));
}

/* iOS before 16 ignores overflow:hidden on <body> alone; the script
   sets this class on <html> as well. */
html.sn-vote-lightbox-open { overflow: hidden; }
.snv-lightbox { overscroll-behavior: contain; }

/* The "Enlarge" hint only appeared on hover, so phone users never
   learned the artwork opens. */
@media (hover: none) {
	.snv .snv-zoom { opacity: 1; transform: none; }
	.snv-lightbox { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3, 14, 20, 0.94); }
}

/* Very wide screens: an 800px-wide card pushed the Vote button below the
   fold. */
.snv .snv-grid { max-width: 1280px; margin-inline: auto; }

/* 200% text zoom in a narrow column: let count and percentage wrap
   rather than collide. */
.snv .snv-result-row { flex-wrap: wrap; row-gap: 2px; }

/* ==================================================================
   RESPONSIVE — must stay LAST.
   These are container queries, which add no specificity of their own.
   They lived near the top of this file, so every base rule declared
   further down silently overrode them and the whole responsive layer
   did nothing but set the grid columns. Nothing may follow this
   block except the generated no-container-query fallback, which only
   ever applies where these rules can't.
   ================================================================== */

/* Container queries, not viewport — the widget adapts to the column
   it is dropped into, wherever that is. */
/* Tablet keeps all three side by side — the type and spacing tighten
   instead of the row breaking. */
@container snvote (max-width: 900px) {
	.snv .snv-grid[data-count='4']{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snv .snv-grid{ gap: 14px; }
	.snv .sn-vote-box{ padding: 12px; }
	.snv .snv-box__title{ font-size: 20px; margin: 14px 0 8px; }
	.snv .snv-box__text{ font-size: 16px; }
	.sn-vote-widget .snv-btn-wrap { margin-top: 30px; }
	.snv .sn-vote-btn{ font-size: 14px; padding: 11px 12px; letter-spacing: 1.2px; }
	.snv .sn-vote-percent{ font-size: 22px; }
	.snv .sn-vote-count{ font-size: 13px; }
}

@container snvote (max-width: 720px) {
.snv .snv-grid{ gap: 11px; }
	.snv .sn-vote-box{ padding: 10px; }
	.snv .snv-box__title{ font-size: 17px; letter-spacing: 0.2px; margin: 12px 0 6px; }
	.snv .snv-box__text{ font-size: 14px; line-height: 1.45; }
	.sn-vote-widget .snv-btn-wrap { margin-top: 26px; }
	.snv .sn-vote-btn{ font-size: 12px; padding: 10px 8px; letter-spacing: 0.8px; }
	.snv .sn-vote-percent{ font-size: 19px; }
	.snv .sn-vote-count{ font-size: 12px; }
	.snv .snv-zoom{ display: none; }
}

/* Phones drop to a single column */
@container snvote (max-width: 620px) {
.snv .snv-grid,
	.snv .snv-grid[data-count]{ grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 420px; margin-inline: auto; }
	.snv .snv-title{ font-size: 17px; letter-spacing: 3px; }
	.snv .sn-vote-box{ padding: 15px; }
	.snv .snv-box__title{ font-size: 21px; margin: 16px 0 9px; }
	.snv .snv-box__text{ font-size: 16px; line-height: 1.5; }
	.sn-vote-widget .snv-btn-wrap { margin-top: 28px; }
	.snv .sn-vote-btn{ font-size: 15px; padding: 13px 16px; letter-spacing: 1.4px; }
	.snv .sn-vote-percent{ font-size: 24px; }
	.snv .sn-vote-count{ font-size: 14px; }
	.snv .snv-zoom{ display: inline-flex; }
}

/* ==================================================================
   FALLBACK for browsers without container queries — iOS 15 (and every
   in-app browser on it, since they all use the system WebKit), Android
   WebView / Chrome before 105, Samsung Internet before 20.

   Without this, those phones got the DESKTOP layout: three ~100px
   columns, titles broken letter by letter, VOTE cut off.

   Viewport media queries stand in for the container ones. The widths
   are the container breakpoints plus ~40px for the page's own gutters,
   since here we can only measure the screen, not the column.
   GENERATED from the @container blocks above — change those, then
   regenerate this; don't edit it by hand. Must stay last.
   ================================================================== */

@supports not (container-type: inline-size) {
	.snv .snv-rule::before,
	.snv .snv-rule::after { width: min(150px, 20vw); }

	@media (max-width: 940px) {
		.snv .snv-grid[data-count='4']{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.snv .snv-grid{ gap: 14px; }
		.snv .sn-vote-box{ padding: 12px; }
		.snv .snv-box__title{ font-size: 20px; margin: 14px 0 8px; }
		.snv .snv-box__text{ font-size: 16px; }
		.sn-vote-widget .snv-btn-wrap { margin-top: 30px; }
		.snv .sn-vote-btn{ font-size: 14px; padding: 11px 12px; letter-spacing: 1.2px; }
		.snv .sn-vote-percent{ font-size: 22px; }
		.snv .sn-vote-count{ font-size: 13px; }
	}

	@media (max-width: 760px) {
	.snv .snv-grid{ gap: 11px; }
		.snv .sn-vote-box{ padding: 10px; }
		.snv .snv-box__title{ font-size: 17px; letter-spacing: 0.2px; margin: 12px 0 6px; }
		.snv .snv-box__text{ font-size: 14px; line-height: 1.45; }
		.sn-vote-widget .snv-btn-wrap { margin-top: 26px; }
		.snv .sn-vote-btn{ font-size: 12px; padding: 10px 8px; letter-spacing: 0.8px; }
		.snv .sn-vote-percent{ font-size: 19px; }
		.snv .sn-vote-count{ font-size: 12px; }
		.snv .snv-zoom{ display: none; }
	}

	@media (max-width: 660px) {
	.snv .snv-grid,
		.snv .snv-grid[data-count]{ grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 420px; margin-inline: auto; }
		.snv .snv-title{ font-size: 17px; letter-spacing: 3px; }
		.snv .sn-vote-box{ padding: 15px; }
		.snv .snv-box__title{ font-size: 21px; margin: 16px 0 9px; }
		.snv .snv-box__text{ font-size: 16px; line-height: 1.5; }
		.sn-vote-widget .snv-btn-wrap { margin-top: 28px; }
		.snv .sn-vote-btn{ font-size: 15px; padding: 13px 16px; letter-spacing: 1.4px; }
		.snv .sn-vote-percent{ font-size: 24px; }
		.snv .sn-vote-count{ font-size: 14px; }
		.snv .snv-zoom{ display: inline-flex; }
	}
}

/* Countdown on narrow widgets and phones. @container for a narrow widget
   on a wide page; @media for [sn_vote_countdown], which sits outside the
   widget's container. */
@container snvote (max-width: 620px) {
	.snv .snv-countdown{ margin: -10px auto 24px; }
	.snv .snv-countdown__units{ gap: 5px; }
	.snv .snv-cd-unit{ min-width: 58px; padding: 9px 5px 8px; }
	.snv .snv-cd-unit b{ font-size: 24px; }
	.snv .snv-cd-unit i{ font-size: 9px; letter-spacing: 1px; }
	.snv .snv-cd-sep{ font-size: 18px; line-height: 44px; }
}
@media (max-width: 620px) {
	.snv .snv-countdown__units{ gap: 5px; }
	.snv .snv-cd-unit{ min-width: 58px; padding: 9px 5px 8px; }
	.snv .snv-cd-unit b{ font-size: 24px; }
	.snv .snv-cd-unit i{ font-size: 9px; letter-spacing: 1px; }
	.snv .snv-cd-sep{ font-size: 18px; line-height: 44px; }
}
@media (max-width: 360px) {
	.snv .snv-cd-unit{ min-width: 52px; }
	.snv .snv-cd-sep{ display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.snv.is-reset .snv-grid{ animation: none; }
}


/* ==================================================================
   EA2 HUD THEME
   Colours and treatments from the Subnautica 2 Early Access HUD and
   the UI designer's palette:
     #000e18 very dark blue   containers, 80%
     #004ac9 mid blue         inner gradient / headers / bubbles
     #0051be / #0275ff        intense blue, holographic blue
     #92effd cyan             header text, container stroke
     #6effff bright cyan      glows
     #c8f8ff light blue       prompts, secondary text
     #27ffd4 teal             key info
     #f29f0e orange           highlight / selected fill
     #ffd43f yellow           highlight stroke, inner glow
     #673e12 brown            shadow under yellow
   Loaded after the base widget styles and overrides them; every rule
   is one step more specific so a theme or Elementor kit can't undo it.
   ================================================================== */

.snv {
	--font: 'Rubik', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;

	--ea-ink: #000e18;
	--ea-mid: #004ac9;
	--ea-blue: #0051be;
	--ea-holo: #0275ff;
	--ea-cyan: #92effd;
	--ea-bright: #6effff;
	--ea-light: #c8f8ff;
	--ea-teal: #27ffd4;
	--ea-orange: #f29f0e;
	--ea-yellow: #ffd43f;
	--ea-brown: #673e12;
	--ea-red: #df3115;

	/* Base tokens re-pointed at the EA2 palette, so everything still
	   written against them follows along. */
	--panel: rgba(0, 14, 24, 0.82);
	--panel-border: rgba(146, 239, 253, 0.26);
	--amber-deep: #f29f0e;
	--amber-bright: #ffd43f;
	--amber-grad: linear-gradient(180deg, #ffb52a 0%, #f29f0e 55%, #e58a00 100%);
	--ice: #c8f8ff;
	--cyan: #92effd;
	--cyan-glow: #6effff;
	--dim: rgba(255, 255, 255, 0.9);
	--faint: rgba(200, 248, 255, 0.55);
	--r-xs: 6px;
	--r-sm: 18px;
	--r-md: 12px;
}

/* ---------- Heading ---------- */

.sn-vote-widget.snv .snv-rule::before { background: linear-gradient(90deg, transparent, rgba(146, 239, 253, 0.7)); }
.sn-vote-widget.snv .snv-rule::after  { background: linear-gradient(90deg, rgba(146, 239, 253, 0.7), transparent); }

.sn-vote-widget.snv .snv-kicker {
	font-family: var(--font);
	font-weight: 500;
	letter-spacing: 2.4px;
	color: var(--ea-cyan);
	text-shadow: 0 0 16px rgba(110, 255, 255, 0.55);
}

/* The PDA section headers: white caps over a short orange bar. */
.sn-vote-widget.snv .snv-title {
	font-family: var(--font);
	font-weight: 600;
	letter-spacing: 3px;
	color: #ffffff;
	text-shadow: 0 0 22px rgba(110, 255, 255, 0.35);
}

.sn-vote-widget.snv .snv-title::after {
	content: '';
	display: block;
	width: 64px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: var(--ea-orange);
	box-shadow: 0 0 10px rgba(242, 159, 14, 0.6);
}

/* ---------- Countdown ---------- */

/* Label as a HUD category pill ("Equipment", "Tools"). */
.sn-vote-widget.snv .snv-countdown .snv-countdown__label,
.snv.snv-countdown-standalone .snv-countdown .snv-countdown__label {
	display: table;
	margin: 0 auto 14px;
	padding: 5px 16px 6px;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.2px;
	color: #ffffff;
	background: linear-gradient(180deg, rgba(0, 81, 190, 0.85), rgba(0, 74, 201, 0.6));
	border: 1px solid rgba(200, 248, 255, 0.55);
	border-radius: 999px;
	box-shadow: 0 0 14px rgba(2, 117, 255, 0.35);
}

.sn-vote-widget.snv .snv-cd-unit,
.snv.snv-countdown-standalone .snv-cd-unit {
	min-width: 72px;
	background: linear-gradient(180deg, rgba(0, 74, 201, 0.28), rgba(0, 74, 201, 0.04) 70%), rgba(0, 14, 24, 0.82);
	border: 2px solid rgba(146, 239, 253, 0.26);
	border-radius: var(--r-md);
	box-shadow: inset 0 0 18px rgba(2, 117, 255, 0.18);
}

.sn-vote-widget.snv .snv-cd-unit b,
.snv.snv-countdown-standalone .snv-cd-unit b {
	font-family: var(--font);
	font-weight: 500;
	color: #ffffff;
	text-shadow: 0 0 16px rgba(110, 255, 255, 0.45);
}

.sn-vote-widget.snv .snv-cd-unit i,
.snv.snv-countdown-standalone .snv-cd-unit i {
	font-family: var(--font);
	font-weight: 500;
	color: var(--ea-cyan);
}

.sn-vote-widget.snv .snv-cd-sep,
.snv.snv-countdown-standalone .snv-cd-sep { color: rgba(146, 239, 253, 0.55); font-family: var(--font); }

.sn-vote-widget.snv .snv-countdown.is-final .snv-cd-unit,
.snv.snv-countdown-standalone .snv-countdown.is-final .snv-cd-unit {
	border-color: var(--ea-yellow);
	background: linear-gradient(180deg, rgba(242, 159, 14, 0.3), rgba(242, 159, 14, 0.08) 70%), rgba(0, 14, 24, 0.82);
	box-shadow: inset 0 0 16px rgba(255, 212, 63, 0.3);
}
.sn-vote-widget.snv .snv-countdown.is-final .snv-cd-unit b,
.snv.snv-countdown-standalone .snv-countdown.is-final .snv-cd-unit b { color: var(--ea-yellow); text-shadow: 0 0 14px rgba(255, 212, 63, 0.5); }

.sn-vote-widget.snv .snv-countdown.is-closed .snv-countdown__label,
.snv.snv-countdown-standalone .snv-countdown.is-closed .snv-countdown__label {
	color: #ffffff;
	background: linear-gradient(180deg, #f7ac1f, #f29f0e);
	border-color: var(--ea-yellow);
	box-shadow: inset 0 0 10px rgba(255, 212, 63, 0.6), 0 0 16px rgba(242, 159, 14, 0.45);
}

/* ---------- Panels ----------
   HUD tooltip containers: very dark blue at 80%, a mid-blue wash
   coming down from the top, a thin cyan stroke and generous corners. */

.sn-vote-widget.snv .sn-vote-box {
	background:
		linear-gradient(180deg, rgba(0, 74, 201, 0.30) 0%, rgba(0, 74, 201, 0.06) 42%, rgba(0, 74, 201, 0) 100%),
		rgba(0, 14, 24, 0.82);
	border: 2px solid rgba(146, 239, 253, 0.26);
	border-radius: var(--r-sm);
	box-shadow: inset 0 1px 0 rgba(200, 248, 255, 0.10), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
	transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, box-shadow 0.2s ease;
}

/* The short bright tab on the top edge of every HUD tooltip. */
.sn-vote-widget.snv .sn-vote-box {
	background-image:
		linear-gradient(var(--ea-cyan), var(--ea-cyan)),
		linear-gradient(180deg, rgba(0, 74, 201, 0.30) 0%, rgba(0, 74, 201, 0.06) 42%, rgba(0, 74, 201, 0) 100%);
	background-size: 64px 3px, 100% 100%;
	background-position: 50% 0, 0 0;
	background-repeat: no-repeat;
	background-color: rgba(0, 14, 24, 0.82);
}

/* Hover: the scanner "locks on" — corner brackets close in around the
   panel, and the stroke brightens. The brackets are drawn in one
   pseudo-element from eight thin gradients, coloured by --snv-br. */
.sn-vote-widget.snv .sn-vote-box::before {
	--snv-br: rgba(200, 248, 255, 0.9);
	inset: -12px;
	border-radius: 0;
	box-shadow: none;
	background:
		linear-gradient(var(--snv-br), var(--snv-br)) left top / 18px 2px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) left top / 2px 18px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right top / 18px 2px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right top / 2px 18px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) left bottom / 18px 2px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) left bottom / 2px 18px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right bottom / 18px 2px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right bottom / 2px 18px no-repeat;
	transform: scale(1.03);
	transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sn-vote-widget.snv .sn-vote-box:hover::before { opacity: 1; transform: none; }

.sn-vote-widget.snv .sn-vote-box:hover {
	border-color: rgba(146, 239, 253, 0.7);
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(200, 248, 255, 0.14),
		inset 0 0 36px rgba(2, 117, 255, 0.28),
		0 0 28px -8px rgba(110, 255, 255, 0.45);
}

/* Selected: the HUD's orange ring with a yellow inner glow. */
.sn-vote-widget.snv .sn-vote-box.is-chosen,
.sn-vote-widget.snv .sn-vote-box.is-pending { border-color: var(--ea-orange); }

.sn-vote-widget.snv .sn-vote-box.is-chosen::before {
	--snv-br: var(--ea-yellow);
	opacity: 1;
	transform: none;
}

.sn-vote-widget.snv .snv-chosen-glow {
	border-radius: var(--r-sm);
	box-shadow:
		inset 0 0 0 1px rgba(255, 212, 63, 0.55),
		inset 0 0 34px rgba(255, 212, 63, 0.22),
		0 0 36px -6px rgba(242, 159, 14, 0.65);
}

.sn-vote-widget.snv .sn-vote-box.is-pending { box-shadow: inset 0 0 32px rgba(255, 212, 63, 0.22); }
.sn-vote-widget.snv .sn-vote-box::after { border-radius: var(--r-sm); border-color: var(--ea-yellow); }

/* ---------- Artwork ---------- */

.sn-vote-widget.snv .sn-vote-image {
	border-radius: var(--r-md);
	background: var(--ea-ink);
	box-shadow: 0 0 0 1px rgba(146, 239, 253, 0.18);
}

.sn-vote-widget.snv .sn-vote-image::after { box-shadow: inset 0 0 30px rgba(110, 255, 255, 0.45); border-radius: inherit; }
.sn-vote-widget.snv .sn-vote-image:focus-visible { outline-color: var(--ea-yellow); }

/* "Enlarge" as a HUD key prompt. */
.sn-vote-widget.snv .snv-zoom {
	font-family: var(--font);
	font-weight: 500;
	letter-spacing: 0.6px;
	text-transform: none;
	font-size: 12px;
	color: #ffffff;
	background: rgba(0, 14, 24, 0.85);
	border: 1px solid rgba(200, 248, 255, 0.6);
	border-radius: 999px;
	padding: 4px 11px;
}

/* ---------- Copy ---------- */

.sn-vote-widget.snv .snv-box__title {
	font-family: var(--font);
	font-weight: 600;
	letter-spacing: 0.6px;
	color: var(--ea-cyan);
	text-shadow: 0 0 18px rgba(110, 255, 255, 0.25);
}

.sn-vote-widget.snv .snv-box__text {
	font-family: var(--font);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- Vote button ----------
   The HUD highlight: orange fill, yellow stroke, yellow inner glow,
   white type sitting on a brown shadow. */

.sn-vote-widget.snv .snv-btn-wrap { border-radius: var(--r-md); }

.sn-vote-widget.snv .sn-vote-btn {
	font-family: var(--font) !important;
	font-weight: 600 !important;
	letter-spacing: 1.6px !important;
	background: var(--amber-grad) !important;
	border: 2px solid var(--ea-yellow) !important;
	border-radius: var(--r-md) !important;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(103, 62, 18, 0.75);
	box-shadow: inset 0 0 14px rgba(255, 212, 63, 0.55), 0 6px 18px -10px rgba(242, 159, 14, 0.9);
}

.sn-vote-widget.snv .sn-vote-btn:hover:not(:disabled),
.sn-vote-widget.snv .sn-vote-btn:focus-visible:not(:disabled) {
	background: linear-gradient(180deg, #ffc84a 0%, #f6a816 55%, #ec9300 100%) !important;
	border-color: #ffe27a !important;
	box-shadow: inset 0 0 16px rgba(255, 226, 122, 0.75), 0 0 26px -2px rgba(255, 212, 63, 0.7);
}

.sn-vote-widget.snv .sn-vote-btn:focus-visible { outline: 2px solid var(--ea-bright); outline-offset: 3px; }

.sn-vote-widget.snv .snv-btn-glow::before {
	background: conic-gradient(transparent 0deg, rgba(255, 244, 196, 0.85) 55deg, transparent 120deg);
}

/* Voted / closed: the empty HUD slot — dark, thin cyan stroke. */
.sn-vote-widget.snv .sn-vote-btn:disabled {
	background: rgba(0, 14, 24, 0.55) !important;
	border-color: rgba(146, 239, 253, 0.28) !important;
	color: rgba(200, 248, 255, 0.6) !important;
	text-shadow: none;
	box-shadow: none;
}

.sn-vote-widget.snv .sn-vote-box.is-chosen .sn-vote-btn,
.sn-vote-widget.snv .sn-vote-box.is-chosen .sn-vote-btn:disabled {
	background: var(--amber-grad) !important;
	border-color: var(--ea-yellow) !important;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(103, 62, 18, 0.75);
	box-shadow: inset 0 0 14px rgba(255, 212, 63, 0.6), 0 0 22px -4px rgba(255, 212, 63, 0.6);
}

/* ---------- Results ---------- */

.sn-vote-widget.snv .sn-vote-bar {
	height: 12px;
	border-radius: 999px;
	background: rgba(0, 14, 24, 0.9);
	border: 1px solid rgba(146, 239, 253, 0.32);
}

/* Everyone else's share: the holographic blue of the O2 gauge. */
.sn-vote-widget.snv .sn-vote-bar-fill {
	border-radius: inherit;
	background: linear-gradient(90deg, #004ac9 0%, #0275ff 60%, #6effff 100%);
	box-shadow: 0 0 12px rgba(2, 117, 255, 0.75);
}

.sn-vote-widget.snv .sn-vote-bar-fill::before { background: #ffffff; box-shadow: 0 0 12px 3px rgba(110, 255, 255, 0.95); }
.sn-vote-widget.snv .sn-vote-bar-fill::after  { background: linear-gradient(90deg, rgba(200, 248, 255, 0) 0%, rgba(200, 248, 255, 0.55) 100%); }

/* Your pick: orange into yellow. */
.sn-vote-widget.snv .sn-vote-box.is-chosen .sn-vote-bar-fill {
	background: linear-gradient(90deg, #f29f0e 0%, #ffd43f 100%);
	box-shadow: 0 0 14px rgba(242, 159, 14, 0.75);
}
.sn-vote-widget.snv .sn-vote-box.is-chosen .sn-vote-bar-fill::before { box-shadow: 0 0 12px 3px rgba(255, 212, 63, 0.95); }

.sn-vote-widget.snv .sn-vote-count { font-family: var(--font); font-weight: 500; color: var(--ea-light); }
.sn-vote-widget.snv .sn-vote-percent { font-family: var(--font); font-weight: 600; color: #ffffff; }
.sn-vote-widget.snv .sn-vote-box.is-chosen .sn-vote-percent { color: var(--ea-yellow); }

/* ---------- Below the panels ---------- */

.sn-vote-widget.snv .snv-total { font-family: var(--font); color: var(--ea-light); }
.sn-vote-widget.snv .snv-total b { color: var(--ea-teal); text-shadow: 0 0 14px rgba(39, 255, 212, 0.45); }

.sn-vote-widget.snv .snv-note { font-family: var(--font); color: var(--ea-light); }

.sn-vote-widget.snv .snv-results-toggle {
	font-family: var(--font);
	font-weight: 500;
	color: var(--ea-light);
	opacity: 0.9;
}
.sn-vote-widget.snv .snv-results-toggle:hover { color: var(--ea-bright); }

.sn-vote-widget.snv .sn-vote-message.is-visible {
	font-family: var(--font);
	color: #ffffff;
	background: rgba(0, 14, 24, 0.85);
	border: 1px solid rgba(223, 49, 21, 0.8);
	border-radius: var(--r-md);
	box-shadow: inset 0 0 18px rgba(223, 49, 21, 0.25);
}

/* ---------- Test-mode banner ---------- */

.sn-vote-widget.snv .sn-vote-testbar {
	font-family: var(--font);
	color: #ffffff;
	background: rgba(103, 62, 18, 0.45);
	border: 1px solid rgba(255, 212, 63, 0.7);
	border-radius: var(--r-md);
}
.sn-vote-widget.snv .sn-vote-testbar strong { color: var(--ea-yellow); }

.sn-vote-widget.snv .sn-vote-again,
.sn-vote-widget.snv .sn-vote-again:hover {
	font-family: var(--font);
	font-weight: 600;
	color: #ffffff;
	background: var(--amber-grad);
	border: 1px solid var(--ea-yellow) !important;
	border-radius: 999px;
	text-shadow: 0 1px 1px rgba(103, 62, 18, 0.7);
	box-shadow: inset 0 0 8px rgba(255, 212, 63, 0.55) !important;
}

/* ---------- Lightbox ---------- */

.snv.snv-lightbox .snv-lightbox__frame {
	border: 2px solid rgba(146, 239, 253, 0.55);
	border-radius: 20px;
	box-shadow: 0 0 0 1px rgba(0, 14, 24, 0.9), 0 0 70px -10px rgba(2, 117, 255, 0.7);
}

@media (hover: none) {
	.sn-vote-widget.snv .sn-vote-box:hover { transform: none; }
}


/* ==================================================================
   4.7 — TITLE-ONLY CARDS, WINNER VIEW, TEST-MODE PREVIEW SWITCH
   Layered over the EA2 HUD theme, one step more specific again
   (.sn-vote-widget.snv + state class). Has its own breakpoints and
   no-container-query fallback at the end of this block, so it doesn't
   depend on the order of anything above.
   ================================================================== */

/* ---------- Cards without a description ----------
   The design is a title only. The title takes over as the flex spacer,
   so it sits centred in the space between the artwork and the button,
   and every option's button still lines up when one title wraps. */

.sn-vote-widget.snv .sn-vote-box:not(.has-text) .snv-box__title {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-bottom: 0;
	padding: 0 6px;
}

.sn-vote-widget.snv .sn-vote-box:not(.has-text) .snv-btn-wrap { margin-top: 18px; }

/* ---------- Test-mode banner: "Winner view" switch ---------- */

.sn-vote-widget.snv .snv-preview-switch,
.sn-vote-widget.snv .snv-preview-switch:hover,
.sn-vote-widget.snv .snv-preview-switch:focus,
.sn-vote-widget.snv .snv-preview-switch:active {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 10px !important;
	padding: 3px 4px !important;
	min-height: 0 !important;
	height: auto !important;
	vertical-align: middle;
	font-family: var(--font) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.4px !important;
	text-transform: none !important;
	color: #ffffff !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 999px;
	box-shadow: none !important;
	cursor: pointer;
}

.sn-vote-widget.snv .snv-preview-switch:focus-visible { outline: 2px solid var(--ea-bright); outline-offset: 2px; }

.sn-vote-widget.snv .snv-switch {
	position: relative;
	display: inline-block;
	flex: none;
	width: 34px;
	height: 18px;
	border-radius: 999px;
	background: rgba(0, 14, 24, 0.75);
	border: 1px solid rgba(255, 212, 63, 0.7);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.sn-vote-widget.snv .snv-switch i {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(200, 248, 255, 0.85);
	transition: transform 0.22s var(--pop), background 0.2s ease;
}

.sn-vote-widget.snv .snv-preview-switch[aria-checked='true'] .snv-switch {
	background: var(--amber-grad);
	border-color: var(--ea-yellow);
	box-shadow: inset 0 0 6px rgba(255, 212, 63, 0.6);
}

.sn-vote-widget.snv .snv-preview-switch[aria-checked='true'] .snv-switch i {
	transform: translateX(16px);
	background: #ffffff;
}

/* ---------- Winner view: layout ----------
   Same boxes, reordered (the script sets `order`) and restyled. */

.sn-vote-widget.snv.is-final .snv-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 18px;
	max-width: 1000px;
	margin-inline: auto;
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner { flex: 1 1 100%; min-width: 0; margin-bottom: 12px; }
.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner { flex: 1 1 calc(50% - 18px); }

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner { flex: 1 1 260px; min-width: 0; max-width: 491px; }
.sn-vote-widget.snv.is-final .snv-grid[data-count='5'] .sn-vote-box.is-runner,
.sn-vote-widget.snv.is-final .snv-grid[data-count='6'] .sn-vote-box.is-runner { max-width: 321px; }

/* Nothing to press any more; a description isn't shown either. */
.sn-vote-widget.snv.is-final .snv-btn-wrap,
.sn-vote-widget.snv.is-final .snv-box__text { display: none; }

.sn-vote-widget.snv .snv-rank,
.sn-vote-widget.snv .snv-yours { display: none; }

.sn-vote-widget.snv.is-final .snv-rank { display: block; }
.sn-vote-widget.snv.is-final .sn-vote-box.is-chosen .snv-yours { display: block; }

/* ---------- Winner card ----------
   Artwork on the left, the result beside it. Every HUD "selected"
   treatment at full strength: yellow stroke, orange tab, scanner
   brackets locked on, breathing glow. */

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto auto 1fr;
	grid-template-areas:
		'img .'
		'img rank'
		'img title'
		'img res'
		'img yours'
		'img .';
	column-gap: 40px;
	padding: 22px;
	border-color: var(--ea-yellow);
	background-image:
		linear-gradient(var(--ea-orange), var(--ea-orange)),
		radial-gradient(70% 90% at 78% 40%, rgba(242, 159, 14, 0.16) 0%, rgba(242, 159, 14, 0) 70%),
		linear-gradient(180deg, rgba(0, 74, 201, 0.34) 0%, rgba(0, 74, 201, 0.08) 45%, rgba(0, 74, 201, 0) 100%);
	background-size: 96px 4px, 100% 100%, 100% 100%;
	background-position: 50% 0, 0 0, 0 0;
	background-repeat: no-repeat;
	box-shadow:
		inset 0 0 0 1px rgba(255, 212, 63, 0.35),
		inset 0 0 60px rgba(255, 212, 63, 0.10),
		0 0 70px -18px rgba(242, 159, 14, 0.75),
		0 24px 50px -28px rgba(0, 0, 0, 0.9);
	transform: none;
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner::before {
	--snv-br: var(--ea-yellow);
	opacity: 1;
	transform: none;
	inset: -14px;
	background:
		linear-gradient(var(--snv-br), var(--snv-br)) left top / 28px 3px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) left top / 3px 28px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right top / 28px 3px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right top / 3px 28px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) left bottom / 28px 3px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) left bottom / 3px 28px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right bottom / 28px 3px no-repeat,
		linear-gradient(var(--snv-br), var(--snv-br)) right bottom / 3px 28px no-repeat;
	filter: drop-shadow(0 0 6px rgba(255, 212, 63, 0.7));
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-chosen-glow {
	opacity: 1;
	animation: snv-breathe 3.4s ease-in-out 1.2s infinite;
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-image {
	grid-area: img;
	align-self: center;
	border-radius: 14px;
	box-shadow: 0 0 0 1px rgba(255, 212, 63, 0.45), 0 0 34px -8px rgba(242, 159, 14, 0.6);
}

/* A slow light sweep across the winning artwork every few seconds. */
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-shine {
	opacity: 1;
	animation: snv-winner-shine 6.5s var(--ease-soft) 1.8s infinite;
}

@keyframes snv-winner-shine {
	0%   { transform: translateX(-120%); }
	22%  { transform: translateX(120%); }
	100% { transform: translateX(120%); }
}

/* "WINNER" — the HUD highlight pill with a star. */
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-rank {
	grid-area: rank;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 7px 18px 7px 14px;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(103, 62, 18, 0.8);
	background: var(--amber-grad);
	border: 2px solid var(--ea-yellow);
	border-radius: 999px;
	box-shadow: inset 0 0 12px rgba(255, 212, 63, 0.6), 0 0 22px -4px rgba(255, 212, 63, 0.75);
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-rank::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
	background: #ffffff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.8-5.3 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1-5.3-4.9 7.1-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.8-5.3 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1-5.3-4.9 7.1-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 1px 1px rgba(103, 62, 18, 0.8));
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-box__title {
	grid-area: title;
	display: block;
	/* The title clips (long-word guard, see HARDENING), which also cut the
	   glow off at the text's edge. Padding gives the glow room inside the
	   clip; the matching negative margin keeps the layout unchanged. */
	margin: -16px -28px;
	padding: 16px 28px;
	text-align: left;
	font-size: 46px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 1px;
	color: #ffffff;
	text-shadow: 0 0 28px rgba(110, 255, 255, 0.45);
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-results { grid-area: res; }

/* Big share first, then the gauge, then the count. */
/* Same glow room for the big figure: the reveal wrapper clips. */
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-results-inner {
	display: flex;
	flex-direction: column;
	margin: -10px -32px -6px;
	padding: 10px 32px 6px;
}
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-result-row {
	order: -1;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: 22px;
}
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-percent {
	order: -1;
	font-size: 76px;
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -1px;
	color: var(--ea-yellow);
	text-shadow: 0 0 30px rgba(255, 212, 63, 0.45);
}
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-count {
	font-size: 18px;
	color: var(--ea-light);
}
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-bar {
	height: 16px;
	margin-top: 16px;
	border-color: rgba(255, 212, 63, 0.45);
}
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-bar-fill {
	background: linear-gradient(90deg, #f29f0e 0%, #ffd43f 100%);
	box-shadow: 0 0 16px rgba(242, 159, 14, 0.8);
}
.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-bar-fill::before { box-shadow: 0 0 12px 3px rgba(255, 212, 63, 0.95); }

/* "Your vote" — shown on whichever option this visitor picked. */
.sn-vote-widget.snv.is-final .sn-vote-box .snv-yours {
	grid-area: yours;
	justify-self: start;
	margin-top: 16px;
	padding: 4px 12px;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ea-yellow);
	border: 1px solid rgba(255, 212, 63, 0.7);
	border-radius: 999px;
	background: rgba(103, 62, 18, 0.35);
}

/* ---------- Runners-up: small, side by side, faded ---------- */

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto auto 1fr;
	grid-template-areas:
		'img .'
		'img rank'
		'img title'
		'img res'
		'img yours'
		'img .';
	column-gap: 16px;
	padding: 12px 16px 12px 12px;
	opacity: 0.55;
	filter: saturate(0.35) brightness(0.9);
	transform: none;
	transition: opacity 0.3s ease, filter 0.3s ease, border-color 0.18s ease;
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner:hover,
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner:focus-within {
	opacity: 0.9;
	filter: none;
	transform: none;
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .sn-vote-image {
	grid-area: img;
	align-self: center;
	width: 84px;
	border-radius: 10px;
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-bubbles,
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-zoom { display: none; }

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-rank {
	grid-area: rank;
	margin: 0 0 3px;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1.6px;
	color: var(--ea-cyan);
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-box__title {
	grid-area: title;
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 17px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .sn-vote-results { grid-area: res; }
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .sn-vote-bar { height: 6px; margin-top: 9px; }
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-result-row { margin-top: 6px; }
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .sn-vote-percent { font-size: 18px; color: #ffffff; }
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .sn-vote-count { font-size: 12px; }
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-yours { margin-top: 8px; padding: 2px 9px; font-size: 10px; }

/* A runner-up the visitor voted for keeps a quieter orange ring. */
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner.is-chosen::before { opacity: 0; }
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-chosen-glow { animation: none; opacity: 0; }

/* The rise-in from page load must not replay when the entrance class
   below comes off (an animation-name change restarts an animation). */
.sn-vote-widget.snv.is-final .snv-grid .sn-vote-box { animation: none; }

/* The test preview and a live close both arrive as a moment. */
.sn-vote-widget.snv.is-final-enter .snv-grid .sn-vote-box.is-winner { animation: snv-crown 1s var(--ease-out) backwards; }
.sn-vote-widget.snv.is-final-enter .snv-grid .sn-vote-box.is-runner { animation: snv-recede 0.9s var(--ease-out) 0.25s backwards; }

@keyframes snv-crown {
	0%   { transform: translateY(14px) scale(0.96); opacity: 0.2; }
	55%  { opacity: 1; }
	100% { transform: none; opacity: 1; }
}
@keyframes snv-recede {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: none; }
}

/* ---------- A tie: the joint winners side by side ----------
   Half a row each is too narrow for artwork-beside-result, so each
   joint winner stacks: artwork on top, the result centred under it. */

.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) { column-gap: 36px; }

.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-template-areas: 'img' 'rank' 'title' 'res' 'yours';
	text-align: center;
	padding: 18px 18px 24px;
}
.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .snv-rank { justify-self: center; margin: 20px 0 12px; }
.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .snv-box__title { font-size: 32px; text-align: center; }
.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .snv-result-row { align-items: center; margin-top: 14px; }
.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .sn-vote-percent { font-size: 56px; }
.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .snv-yours { justify-self: center; }

/* ---------- Winner view: narrower widgets ---------- */

@container snvote (max-width: 900px) {
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner { column-gap: 26px; padding: 18px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-box__title { font-size: 34px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-percent { font-size: 58px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-rank { font-size: 13px; padding: 6px 15px 6px 12px; margin-bottom: 12px; }
}

@container snvote (max-width: 620px) {
	.sn-vote-widget.snv.is-final .snv-grid { gap: 12px; max-width: 440px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: 'img' 'rank' 'title' 'res' 'yours';
		padding: 15px 15px 20px;
		text-align: center;
	}
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-rank { justify-self: center; margin: 18px 0 12px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-box__title { font-size: 28px; text-align: center; margin: -12px -15px; padding: 12px 15px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-results-inner { margin: -10px -15px -6px; padding: 10px 15px 6px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner { margin-bottom: 8px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-result-row { align-items: center; margin-top: 14px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-percent { font-size: 52px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-count { font-size: 15px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-yours { justify-self: center; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-runner { flex: 1 1 100%; max-width: none; grid-template-columns: 72px minmax(0, 1fr); }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .sn-vote-image { width: 72px; }
	.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-box__title { font-size: 16px; }
	.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .snv-box__title { font-size: 28px; }
	.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .sn-vote-percent { font-size: 52px; }
	.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner { padding: 15px 15px 20px; flex-basis: 100%; }
}

/* Same, for engines without container queries (see the FALLBACK note above). */
@supports not (container-type: inline-size) {
	@media (max-width: 940px) {
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner { column-gap: 26px; padding: 18px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-box__title { font-size: 34px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-percent { font-size: 58px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-rank { font-size: 13px; padding: 6px 15px 6px 12px; margin-bottom: 12px; }
	}
	@media (max-width: 660px) {
		.sn-vote-widget.snv.is-final .snv-grid { gap: 12px; max-width: 440px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner {
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto;
			grid-template-areas: 'img' 'rank' 'title' 'res' 'yours';
			padding: 15px 15px 20px;
			text-align: center;
		}
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-rank { justify-self: center; margin: 18px 0 12px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-box__title { font-size: 28px; text-align: center; margin: -12px -15px; padding: 12px 15px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-results-inner { margin: -10px -15px -6px; padding: 10px 15px 6px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner { margin-bottom: 8px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-result-row { align-items: center; margin-top: 14px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-percent { font-size: 52px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .sn-vote-count { font-size: 15px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-yours { justify-self: center; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-runner { flex: 1 1 100%; max-width: none; grid-template-columns: 72px minmax(0, 1fr); }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .sn-vote-image { width: 72px; }
		.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-box__title { font-size: 16px; }
		.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .snv-box__title { font-size: 28px; }
		.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner .sn-vote-percent { font-size: 52px; }
		.sn-vote-widget.snv.is-final .snv-grid:not([data-winners='1']) .sn-vote-box.is-winner { padding: 15px 15px 20px; flex-basis: 100%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-shine,
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner .snv-chosen-glow { animation: none; }
}


/* ==================================================================
   4.8 — CONFIRM BEFORE VOTING
   "Vote for X?" with the option's artwork, Cancel / Confirm vote.
   Lives on <body> (outside the widget's own theme defence), so every
   property a theme could touch is pinned here, with !important on the
   ones themes ship with !important themselves (button backgrounds).
   ================================================================== */

html.sn-vote-confirm-open,
body.sn-vote-confirm-open { overflow: hidden; }

.snv-confirm.snv {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: var(--font);
	line-height: 1.4;
	background: rgba(0, 8, 14, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
	overscroll-behavior: contain;
	-webkit-font-smoothing: antialiased;
}

.snv-confirm.snv.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.22s ease, visibility 0s linear 0s;
}

.snv-confirm.snv *,
.snv-confirm.snv *::before,
.snv-confirm.snv *::after { box-sizing: border-box; }

.snv-confirm.snv [hidden] { display: none !important; }

.snv-confirm.snv .snv-confirm__card {
	position: relative;
	width: 100%;
	max-width: 380px;
	padding: 26px 22px 22px;
	text-align: center;
	color: #ffffff;
	background-image:
		linear-gradient(#92effd, #92effd),
		linear-gradient(180deg, rgba(0, 74, 201, 0.34) 0%, rgba(0, 74, 201, 0.08) 45%, rgba(0, 74, 201, 0) 100%);
	background-size: 64px 3px, 100% 100%;
	background-position: 50% 0, 0 0;
	background-repeat: no-repeat;
	background-color: rgba(0, 14, 24, 0.96);
	border: 2px solid rgba(146, 239, 253, 0.45);
	border-radius: 18px;
	box-shadow: inset 0 0 40px rgba(2, 117, 255, 0.18), 0 0 60px -12px rgba(2, 117, 255, 0.6), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
	transform: translateY(10px) scale(0.96);
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.snv-confirm.snv.is-open .snv-confirm__card { transform: none; }

.snv-confirm.snv .snv-confirm__art {
	position: relative;
	width: 132px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 18px;
	overflow: hidden;
	border-radius: 14px;
	background: #000e18;
	box-shadow: 0 0 0 2px rgba(255, 212, 63, 0.75), 0 0 26px -4px rgba(242, 159, 14, 0.7);
}

.snv-confirm.snv .snv-confirm__art > * {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	margin: 0;
	transform: none !important;
}

.snv-confirm.snv .snv-confirm__art .snv-ph span { font-size: 10px !important; }

.snv-confirm.snv p { margin: 0; padding: 0; }

.snv-confirm.snv .snv-confirm__title {
	font-family: var(--font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.2px;
	text-transform: none;
	color: #ffffff;
	text-shadow: 0 0 20px rgba(110, 255, 255, 0.35);
	text-wrap: balance;
	overflow: hidden;
}

.snv-confirm.snv .snv-confirm__text {
	margin-top: 8px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #c8f8ff;
	text-wrap: balance;
}

.snv-confirm.snv .snv-confirm__count {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 14px auto 0;
	padding: 6px 14px;
	border: 1px solid rgba(110, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(87, 219, 255, 0.1);
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #92effd;
	text-wrap: balance;
}
.snv-confirm.snv .snv-confirm__count[hidden] { display: none; }

.snv-confirm.snv .snv-confirm__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 22px;
}

/* Both buttons: box model pinned against the host theme. */
.snv-confirm.snv .snv-confirm__actions button,
.snv-confirm.snv .snv-confirm__actions button:hover,
.snv-confirm.snv .snv-confirm__actions button:focus,
.snv-confirm.snv .snv-confirm__actions button:active {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	margin: 0 !important;
	min-height: 48px !important;
	height: auto !important;
	padding: 12px 10px !important;
	font-family: var(--font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.6px !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: normal !important;
	border-radius: 12px !important;
	cursor: pointer;
	touch-action: manipulation;
	transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

/* Cancel: the dark empty HUD slot. */
.snv-confirm.snv .snv-confirm__no,
.snv-confirm.snv .snv-confirm__no:focus,
.snv-confirm.snv .snv-confirm__no:active {
	color: #c8f8ff !important;
	background: rgba(0, 14, 24, 0.6) !important;
	background-color: rgba(0, 14, 24, 0.6) !important;
	border: 2px solid rgba(146, 239, 253, 0.35) !important;
	box-shadow: none !important;
}
.snv-confirm.snv .snv-confirm__no:hover {
	color: #ffffff !important;
	background: rgba(2, 117, 255, 0.16) !important;
	background-color: rgba(2, 117, 255, 0.16) !important;
	border: 2px solid rgba(146, 239, 253, 0.75) !important;
	box-shadow: none !important;
}

/* Confirm: the HUD highlight, same as the Vote button. */
.snv-confirm.snv .snv-confirm__yes,
.snv-confirm.snv .snv-confirm__yes:focus,
.snv-confirm.snv .snv-confirm__yes:active {
	color: #ffffff !important;
	background: linear-gradient(180deg, #ffb52a 0%, #f29f0e 55%, #e58a00 100%) !important;
	background-color: #f29f0e !important;
	border: 2px solid #ffd43f !important;
	text-shadow: 0 1px 2px rgba(103, 62, 18, 0.75);
	box-shadow: inset 0 0 14px rgba(255, 212, 63, 0.55), 0 6px 18px -10px rgba(242, 159, 14, 0.9) !important;
}
.snv-confirm.snv .snv-confirm__yes:hover {
	color: #ffffff !important;
	background: linear-gradient(180deg, #ffc84a 0%, #f6a816 55%, #ec9300 100%) !important;
	background-color: #f6a816 !important;
	border: 2px solid #ffe27a !important;
	box-shadow: inset 0 0 16px rgba(255, 226, 122, 0.75), 0 0 26px -2px rgba(255, 212, 63, 0.7) !important;
}

.snv-confirm.snv .snv-confirm__actions button:active { transform: scale(0.97); }
.snv-confirm.snv .snv-confirm__actions button:focus-visible { outline: 2px solid #6effff; outline-offset: 3px; }

@media (hover: none) {
	.snv-confirm.snv { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 8, 14, 0.88); }
}

@media (max-width: 360px) {
	.snv-confirm.snv .snv-confirm__card { padding: 22px 16px 16px; }
	.snv-confirm.snv .snv-confirm__title { font-size: 19px; }
	.snv-confirm.snv .snv-confirm__art { width: 108px; }
}

@media (prefers-reduced-motion: reduce) {
	.snv-confirm.snv,
	.snv-confirm.snv .snv-confirm__card { transition: none; }
	.snv-confirm.snv .snv-confirm__card { transform: none; }
}


/* ==================================================================
   4.9 — CHANGING A VOTE
   "Change my vote" / "Keep my vote" is the results-toggle text link
   (same theme defence), minus the chevron. While changing, the other
   options' Vote buttons come back; the current pick stays marked.
   ================================================================== */

.snv .snv-change-toggle::after { right: 2px; }
.sn-vote-widget.snv .snv-change-toggle[aria-pressed='true'] { color: var(--ea-yellow) !important; opacity: 1; }

/* While changing, the options they can move to get the HUD's cyan
   "available" stroke, so it's obvious which cards are live again. */
.sn-vote-widget.snv.is-changing .sn-vote-box:not(.is-chosen) {
	border-color: rgba(146, 239, 253, 0.6);
	box-shadow: inset 0 1px 0 rgba(200, 248, 255, 0.14), inset 0 0 30px rgba(2, 117, 255, 0.22), 0 0 22px -10px rgba(110, 255, 255, 0.5);
}


/* ==================================================================
   4.11 — PAGE INTRO
   Big HUD headline ("Attention Divers!") over the intro copy. The
   copy keeps the client's wording; **highlights** are the HUD teal
   key-info colour, and the last paragraph (when there are three or
   more) is the small rules line in a HUD info strip.
   ================================================================== */

.sn-vote-widget.snv .snv-head.has-intro { margin-bottom: 34px; }

.sn-vote-widget.snv .snv-head.has-intro .snv-title {
	font-size: 42px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 2.5px;
	text-shadow: 0 0 30px rgba(110, 255, 255, 0.45), 0 2px 0 rgba(0, 14, 24, 0.6);
}

.sn-vote-widget.snv .snv-head.has-intro .snv-title::after {
	width: 84px;
	height: 4px;
	margin-top: 16px;
}

.sn-vote-widget.snv .snv-intro {
	max-width: 740px;
	margin: 22px auto 0;
	text-align: center;
}

.sn-vote-widget.snv .snv-intro .snv-intro__p {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.1px;
	text-transform: none;
	color: #c8f8ff;
	text-wrap: pretty;
}

.sn-vote-widget.snv .snv-intro .snv-intro__lead {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.55;
	color: #ffffff;
	text-wrap: balance;
}

.sn-vote-widget.snv .snv-intro strong {
	font-weight: 600;
	color: var(--ea-teal);
	text-shadow: 0 0 14px rgba(39, 255, 212, 0.35);
	white-space: nowrap;
}

/* The rules line: a HUD info strip with an "i" marker. */
.sn-vote-widget.snv .snv-intro .snv-intro__rule {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	padding: 8px 18px 8px 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	color: #ffffff;
	background: rgba(0, 14, 24, 0.62);
	border: 1px solid rgba(146, 239, 253, 0.4);
	border-radius: 18px;
	box-shadow: inset 0 0 16px rgba(2, 117, 255, 0.18);
	text-wrap: balance;
}

.sn-vote-widget.snv .snv-intro .snv-intro__rule::before {
	content: 'i';
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	color: #000e18;
	background: var(--ea-cyan);
	box-shadow: 0 0 10px rgba(110, 255, 255, 0.55);
}

/* Once voting has closed (and in the test preview of it), the intro's
   "vote now / voting closes on…" copy is out of date: the headline
   leads straight into "Voting has closed" and the winner. */
.sn-vote-widget.snv.is-final .snv-intro { display: none; }
.sn-vote-widget.snv .snv-intro.snv-intro--final { display: none; }
.sn-vote-widget.snv.is-final .snv-head .snv-intro.snv-intro--final { display: block; }

/* Long option titles ("Riley Robinson bobblehead") in the winner view's
   small runner-up cards: wrap to two lines instead of being cut off. */
.sn-vote-widget.snv.is-final .sn-vote-box.is-runner .snv-box__title {
	white-space: normal;
	text-overflow: clip;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-wrap: balance;
}

@container snvote (max-width: 900px) {
	.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 34px; }
	.sn-vote-widget.snv .snv-intro .snv-intro__p { font-size: 16px; }
	.sn-vote-widget.snv .snv-intro .snv-intro__lead { font-size: 18px; }
}

@container snvote (max-width: 620px) {
	.sn-vote-widget.snv .snv-head.has-intro { margin-bottom: 28px; }
	.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 27px; letter-spacing: 1.6px; }
	.sn-vote-widget.snv .snv-head.has-intro .snv-title::after { width: 64px; height: 3px; margin-top: 12px; }
	.sn-vote-widget.snv .snv-intro { margin-top: 16px; }
	.sn-vote-widget.snv .snv-intro .snv-intro__p { font-size: 15px; line-height: 1.55; margin-bottom: 10px; }
	.sn-vote-widget.snv .snv-intro .snv-intro__lead { font-size: 16.5px; }
	.sn-vote-widget.snv .snv-intro .snv-intro__rule { font-size: 13px; padding: 8px 14px 8px 9px; gap: 9px; border-radius: 14px; }
	.sn-vote-widget.snv .snv-intro strong { white-space: normal; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 940px) {
		.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 34px; }
		.sn-vote-widget.snv .snv-intro .snv-intro__p { font-size: 16px; }
		.sn-vote-widget.snv .snv-intro .snv-intro__lead { font-size: 18px; }
	}
	@media (max-width: 660px) {
		.sn-vote-widget.snv .snv-head.has-intro { margin-bottom: 28px; }
		.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 27px; letter-spacing: 1.6px; }
		.sn-vote-widget.snv .snv-head.has-intro .snv-title::after { width: 64px; height: 3px; margin-top: 12px; }
		.sn-vote-widget.snv .snv-intro { margin-top: 16px; }
		.sn-vote-widget.snv .snv-intro .snv-intro__p { font-size: 15px; line-height: 1.55; margin-bottom: 10px; }
		.sn-vote-widget.snv .snv-intro .snv-intro__lead { font-size: 16.5px; }
		.sn-vote-widget.snv .snv-intro .snv-intro__rule { font-size: 13px; padding: 8px 14px 8px 9px; gap: 9px; border-radius: 14px; }
		.sn-vote-widget.snv .snv-intro strong { white-space: normal; }
	}
}



/* ==================================================================
   4.12 — FIT A 1080p SCREEN
   On a 1920x1080 monitor the browser leaves ~950px of page, and the
   site header takes ~190px of that. The headline, copy, countdown and
   the three option boxes (with their Vote buttons) now fit in what's
   left, with no scrolling:
     - tighter headline and intro, the intro run wider so the lead is
       one line;
     - the rules line and a slimmer countdown share one row;
     - the option boxes size themselves to the screen height (down to a
       floor), so shorter laptop screens still get as much as fits.
   Desktop widths only (widget wider than 900px). Tablets and phones
   keep the stacked layout, where scrolling is natural.
   ================================================================== */

/* ---------- Headline + intro ---------- */
.sn-vote-widget.snv .snv-head.has-intro { margin-bottom: 14px; }
.sn-vote-widget.snv .snv-head.has-intro .snv-rule { margin-bottom: 6px; }
.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 36px; }
.sn-vote-widget.snv .snv-head.has-intro .snv-title::after { margin-top: 11px; width: 76px; height: 3px; }
.sn-vote-widget.snv .snv-head .snv-intro { max-width: 1100px; margin-top: 14px; }
.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__p { font-size: 15.5px; line-height: 1.5; margin: 0; }
.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__lead { font-size: 17.5px; line-height: 1.45; margin: 0 0 4px; }

/* ---------- Countdown: label above the numbers, original size ---------- */
.sn-vote-widget.snv .snv-head.has-intro ~ .snv-countdown { margin: 0 auto 34px; }
.sn-vote-widget.snv .snv-head.has-intro ~ .snv-countdown .snv-countdown__label { margin: 0 auto 16px; }

/* ---------- Rules line, under the option boxes ---------- */
.sn-vote-widget.snv .snv-rules { display: flex; justify-content: center; margin: 34px auto 0; padding: 0 10px; }
.sn-vote-widget.snv .snv-rules .snv-intro--rule { max-width: none; margin: 0; }
.sn-vote-widget.snv .snv-rules .snv-intro .snv-intro__rule { margin: 0; }
.sn-vote-widget.snv .snv-rules + .snv-actions { margin-top: 16px; }

/* ---------- Option boxes ---------- */
.sn-vote-widget.snv:not(.is-final) .snv-grid {
	gap: 18px;
	max-width: var(--snv-fit-grid, 1100px);
}
/* Original card proportions; a slightly shorter Vote button — with a
   mouse only. Touch screens keep the 44px minimum tap target (4.12.6). */
@media (pointer: fine) and (min-width: 941px) {
	.sn-vote-widget.snv:not(.is-final) .sn-vote-btn {
		min-height: 42px !important;
		padding: 10px 16px !important;
	}
}

/* Screen-height fit: the grid's width (and so the square artwork) is
   whatever leaves the Vote buttons on screen, between a floor and the
   full width. --snv-fit-above is everything on screen that isn't the
   boxes: the site header, the heading, copy and countdown above them,
   and the rules line below them — plus a little breathing room. */
@media (min-width: 941px) {
	.sn-vote-widget.snv { --snv-fit-above: 516px; }
	.sn-vote-widget.snv:not(.is-final) .snv-grid {
		max-width: clamp(740px, calc((100vh - var(--snv-fit-above) - 160px) * 3 + 112px), 1100px);
	}
}

@container snvote (max-width: 900px) {
	.sn-vote-widget.snv .snv-head .snv-intro { max-width: 740px; }
	.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
	.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__lead { font-size: 18px; }
	.sn-vote-widget.snv:not(.is-final) .snv-grid { max-width: none; gap: 14px; }
	.sn-vote-widget.snv:not(.is-final) .snv-box__title { font-size: 20px; }
	.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 32px; }
}

@container snvote (max-width: 620px) {
	.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__p { font-size: 15px; }
	.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__lead { font-size: 16.5px; }
	.sn-vote-widget.snv:not(.is-final) .snv-grid { max-width: 420px; }
	.sn-vote-widget.snv:not(.is-final) .sn-vote-box { padding: 15px; }
	.sn-vote-widget.snv:not(.is-final) .snv-box__title { font-size: 21px; }
	.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 27px; letter-spacing: 1.6px; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 940px) {
		.sn-vote-widget.snv .snv-head .snv-intro { max-width: 740px; }
		.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
		.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__lead { font-size: 18px; }
		.sn-vote-widget.snv:not(.is-final) .snv-grid { max-width: none; gap: 14px; }
		.sn-vote-widget.snv:not(.is-final) .snv-box__title { font-size: 20px; }
		.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 32px; }
	}
	@media (max-width: 660px) {
		.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__p { font-size: 15px; }
		.sn-vote-widget.snv .snv-head .snv-intro .snv-intro__lead { font-size: 16.5px; }
		.sn-vote-widget.snv:not(.is-final) .snv-grid { max-width: 420px; }
		.sn-vote-widget.snv:not(.is-final) .sn-vote-box { padding: 15px; }
		.sn-vote-widget.snv:not(.is-final) .snv-box__title { font-size: 21px; }
		.sn-vote-widget.snv .snv-head.has-intro .snv-title { font-size: 27px; letter-spacing: 1.6px; }
	}
}

/* Sideways scroll on phones and tablets. The HUD corner brackets
   (::before, 12–14px outside every box) count towards the page width
   even while invisible, so in a section with little side padding — the
   live page — the page could be dragged a few pixels sideways. The
   widget now clips horizontal overflow (clip, not hidden: it creates no
   scroll box and leaves vertical overflow alone), and on narrower
   widgets the grid gets side room so the brackets of a selected or
   winning box still show in full. */
.sn-vote-widget.snv { overflow-x: clip; }

@container snvote (max-width: 900px) {
	.sn-vote-widget.snv .snv-grid { padding-inline: 10px; }
}
@container snvote (max-width: 620px) {
	.sn-vote-widget.snv .sn-vote-box::before,
	.sn-vote-widget.snv.is-final .sn-vote-box.is-winner::before { inset: -9px; }
}
@supports not (container-type: inline-size) {
	@media (max-width: 940px) {
		.sn-vote-widget.snv .snv-grid { padding-inline: 10px; }
	}
	@media (max-width: 660px) {
		.sn-vote-widget.snv .sn-vote-box::before,
		.sn-vote-widget.snv.is-final .sn-vote-box.is-winner::before { inset: -9px; }
	}
}

/* 4.12.4 — "Cast your vote" moved below the timer, just above the boxes.
   The timer's bottom gap is split around it so the boxes stay where they
   were; hidden once voting has closed. */
.sn-vote-widget.snv .snv-head.has-intro ~ .snv-countdown { margin-bottom: 18px; }
.sn-vote-widget.snv .snv-rule.snv-rule--below { margin: 0 auto 22px; }
.sn-vote-widget.snv.is-final .snv-rule--below { display: none; }

/* 4.12.6 — boxes briefly vanishing (render glitch).
   Each artwork had ~10 ever-running bubbles drawn with blur + mix-blend-mode:
   overlay. Blend modes force the browser to composite the whole box as a
   separate surface every frame; with three large artworks, two looping glows
   and the hover lift, Chrome could run short of graphics memory and drop a
   box's tiles until the next repaint — the box "vanishes" for a moment.
   The bubbles are now plain soft circles in a self-contained layer, and all
   looping animation pauses while the widget is off screen. */
.sn-vote-widget.snv .snv-bubbles { contain: strict; }
.sn-vote-widget.snv .snv-bubbles i {
	filter: none;
	mix-blend-mode: normal;
	background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.55), rgba(147, 234, 253, 0.1) 62%, transparent 72%);
}
.sn-vote-widget.snv.is-offscreen .snv-bubbles i,
.sn-vote-widget.snv.is-offscreen .snv-btn-glow::before,
.sn-vote-widget.snv.is-offscreen .snv-chosen-glow { animation-play-state: paused; }