/*
 * 977 Cinema Spin & Win — public wheel styles.
 *
 * Deliberately namespaced (.c977-spin*) and built on its own custom properties,
 * each falling back to the 977 Cinema theme token when that token exists, so the
 * wheel matches the site branding without touching or depending on theme CSS.
 */

/* Brand tokens. Declared on the modal too: openClaimModal() appends it to document.body,
   outside .c977-spin, so every var(--c977-*) inside the dialog was otherwise undefined and
   `background: var(--c977-card)` / the gold headings resolved to nothing. */
.c977-spin,
.c977-spin__modal {
	--c977-bg: var(--bg, #0d0d0f);
	--c977-bg-alt: var(--bg-alt, #141418);
	--c977-card: var(--bg-card, #1a1a20);
	--c977-elevated: var(--bg-elevated, #22222a);
	--c977-text: var(--text-primary, #f0f0f2);
	--c977-muted: var(--text-muted, #9a9aaa);
	--c977-subtle: var(--text-subtle, #6a6a7a);
	--c977-primary: var(--color-accent, #e11d48);
	--c977-primary-hover: var(--color-accent-hover, #f43f5e);
	--c977-primary-dark: #be123c;
	--c977-gold: var(--color-gold, #f5a623);
	--c977-gold-bright: #ffc042;
	--c977-success: var(--color-success, #4caf50);
	--c977-warning: var(--color-warning, #ff9800);
	--c977-danger: var(--color-danger, #f44336);
	--c977-border: var(--border-color, rgba(255, 255, 255, 0.08));
	--c977-radius-sm: var(--radius-sm, 6px);
	--c977-radius-md: var(--radius-md, 10px);
	--c977-radius-lg: var(--radius-lg, 16px);
	--c977-radius-full: var(--radius-full, 9999px);
	--c977-font-display: var(--font-heading, 'Poppins', 'Inter', system-ui, sans-serif);
	--c977-font-body: var(--font-body, 'Inter', system-ui, sans-serif);
	--c977-glow: 0 4px 18px rgba(225, 29, 72, 0.35);
	--c977-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.c977-spin {
	position: relative;
	padding: clamp(24px, 5vw, 64px) 0 clamp(40px, 7vw, 88px);
	background: var(--c977-bg);
	color: var(--c977-text);
	font-family: var(--c977-font-body);
	line-height: 1.6;
}

.c977-spin::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 45% at 50% 0%, rgba(225, 29, 72, 0.16), transparent 70%),
		radial-gradient(ellipse 40% 30% at 85% 80%, rgba(245, 166, 35, 0.08), transparent 70%);
	pointer-events: none;
}

/* The theme header is position:fixed, and it clears it with
   `.site-main { padding-top: var(--header-height) }` — except it zeroes that rule for
   `body.home`, and the /spin/ rewrite endpoint resolves to the front-page query, so it prints
   `class="home blog"` on <body>. Without this the wheel title sits under the logo and the
   mobile menu button. Scoped to .c977-spin-page so a shortcode inside a normal page (which does
   get the theme clearance) is not pushed down twice. */
.c977-spin-page > .c977-spin {
	padding-top: calc(
		var(--header-height, 90px) + clamp(24px, 5vw, 64px)
	);
}

.c977-spin__container {
	position: relative;
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}

.c977-spin__header {
	text-align: center;
	margin-bottom: clamp(20px, 4vw, 40px);
}

.c977-spin__title {
	margin: 0 0 12px;
	font-family: var(--c977-font-display);
	font-size: clamp(1.6rem, 5vw, 2.8rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	background: linear-gradient(135deg, var(--c977-text) 0%, var(--c977-gold-bright) 60%, var(--c977-primary-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.c977-spin__intro {
	max-width: 620px;
	margin: 0 auto;
	color: var(--c977-muted);
	font-size: clamp(0.95rem, 2.2vw, 1.05rem);
}

.c977-spin__loading {
	padding: 60px 0;
	text-align: center;
	color: var(--c977-subtle);
}

/* ---------- layout ---------- */

.c977-spin__grid {
	display: grid;
	gap: clamp(20px, 3vw, 36px);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 900px) {
	.c977-spin__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.c977-spin__panel {
	background: var(--c977-card);
	border: 1px solid var(--c977-border);
	border-radius: var(--c977-radius-lg);
	padding: clamp(18px, 3vw, 28px);
	box-shadow: var(--c977-shadow);
}

.c977-spin__panel + .c977-spin__panel {
	margin-top: 18px;
}

.c977-spin__panel h2,
.c977-spin__panel h3 {
	margin: 0 0 12px;
	font-family: var(--c977-font-display);
	font-size: 1.15rem;
	font-weight: 600;
}

.c977-spin__muted {
	color: var(--c977-muted);
	font-size: 0.92rem;
}

/* ---------- wheel ---------- */

.c977-spin__stage {
	position: relative;
	width: 100%;
	/* Height-aware cap. A width-only 460px cap overflowed short viewports and clipped the
	   top wedges (measured: wheel bottom 631px in a 473px-tall viewport, 677px in a 390px
	   landscape one). 230px is the fixed 90px theme header plus the title block, so this
	   keeps the whole circle on screen at scroll 0 without hiding any content; the 150px
	   floor stops it collapsing on absurdly short windows. Above ~690px of viewport height
	   the 460px/100% terms win, so desktop and portrait phones are unchanged. `dvh` is the
	   accurate mobile height; `vh` is the fallback for engines without it. */
	max-width: min(460px, 100%, max(150px, calc(100vh - 230px)));
	max-width: min(460px, 100%, max(150px, calc(100dvh - 230px)));
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	/* Makes the wheel's own diameter the unit that label/hub type are sized from below. */
	container-type: inline-size;
}

.c977-spin__wheel {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--c977-radius-full);
	border: 6px solid var(--c977-elevated);
	box-shadow:
		0 0 0 2px var(--c977-primary),
		0 0 34px rgba(225, 29, 72, 0.35),
		inset 0 0 26px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	transition: transform 5.2s cubic-bezier(0.16, 0.9, 0.22, 1);
	will-change: transform;
}

.c977-spin__wheel.is-spinning {
	pointer-events: none;
}

.c977-spin__segment {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center start;
	clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0);
}

.c977-spin__label {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 47%;
	margin-top: -0.7em;
	transform-origin: 0 50%;
	font-family: var(--c977-font-display);
	font-weight: 600;
	font-size: clamp(0.6rem, 2.2vw, 0.85rem);
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	white-space: nowrap;
	text-align: right;
	padding-right: 7%;
	pointer-events: none;
}

.c977-spin__label b {
	display: inline-block;
	font-weight: 600;
}

/* Left-half wedges would render upside down; flip only the glyph box. */
.c977-spin__label--flip b {
	transform: rotate(180deg);
}

.c977-spin__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34%;
	height: 34%;
	border-radius: var(--c977-radius-full);
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--c977-primary-hover), var(--c977-primary-dark));
	color: #fff;
	font-family: var(--c977-font-display);
	font-size: clamp(0.85rem, 3vw, 1.15rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	box-shadow: var(--c977-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: filter 0.2s ease, transform 0.2s ease;
}

.c977-spin__hub:hover:not(:disabled) {
	filter: brightness(1.12);
}

.c977-spin__hub:focus-visible {
	outline: 3px solid var(--c977-gold-bright);
	outline-offset: 3px;
}

.c977-spin__hub:disabled {
	cursor: not-allowed;
	filter: grayscale(0.55) brightness(0.72);
}

.c977-spin__pointer {
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-top: 26px solid var(--c977-gold);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
	z-index: 3;
}

.c977-spin__balance {
	margin: 18px 0 0;
	text-align: center;
	font-size: 0.95rem;
	color: var(--c977-muted);
}

.c977-spin__balance strong {
	color: var(--c977-gold-bright);
	font-size: 1.2rem;
}

/* The vw-based clamps above size type against the viewport, but the circle is now capped by
   viewport *height*, so on a short window the labels stayed proportionally huge and ran under
   the hub ("TRY AGAIN" rendered as "TRY AGA" at 540x473). Sizing them off the stage keeps the
   text-to-wheel ratio identical at every size; 3cqw on the 460px desktop wheel is 13.8px, which
   the existing 0.85rem cap already clamps to today's 13.6px, so desktop is pixel-unchanged.
   Below 260px the legibility floor takes over, so the hub shrinks to keep the ring clear. */
@supports (container-type: inline-size) {
	.c977-spin__label {
		font-size: clamp(0.45rem, 3cqw, 0.85rem);
	}

	.c977-spin__hub {
		font-size: clamp(0.6rem, 4cqw, 1.15rem);
	}

	@container (max-width: 260px) {
		.c977-spin__hub {
			width: 28%;
			height: 28%;
		}
	}
}

/* ---------- forms ---------- */

/* Each rule below carries a `.c977-spin__modal …` twin: the claim/win dialog is appended to
   document.body, so a `.c977-spin` descendant selector cannot reach its controls. */
.c977-spin form,
.c977-spin__modal form {
	display: grid;
	gap: 14px;
}

.c977-spin label,
.c977-spin__modal label {
	display: grid;
	gap: 6px;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--c977-muted);
}

.c977-spin input[type="text"],
.c977-spin input[type="email"],
.c977-spin input[type="tel"],
.c977-spin input[type="number"],
.c977-spin__modal input[type="text"],
.c977-spin__modal input[type="email"],
.c977-spin__modal input[type="tel"],
.c977-spin__modal input[type="number"] {
	background: var(--c977-bg);
	border: 1px solid var(--c977-border);
	border-radius: var(--c977-radius-md);
	color: var(--c977-text);
	font-family: inherit;
	font-size: 1rem;
	padding: 12px 14px;
	width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.c977-spin input:focus-visible,
.c977-spin__modal input:focus-visible {
	outline: none;
	border-color: var(--c977-primary);
	box-shadow: var(--c977-glow);
}

/* .c977-spin label above is (0,1,1); these need (0,2,0) to win. */
.c977-spin .c977-spin__checkbox,
.c977-spin__modal .c977-spin__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.85rem;
	color: var(--c977-muted);
}

.c977-spin .c977-spin__checkbox input[type="checkbox"],
.c977-spin__modal .c977-spin__checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 1px;
	accent-color: var(--c977-primary);
	cursor: pointer;
}

.c977-spin button.c977-spin__btn,
.c977-spin .c977-spin__btn,
.c977-spin__modal button.c977-spin__btn,
.c977-spin__modal .c977-spin__btn {
	appearance: none;
	border: none;
	border-radius: var(--c977-radius-md);
	background: linear-gradient(135deg, var(--c977-primary), var(--c977-primary-dark));
	color: #fff;
	cursor: pointer;
	font-family: var(--c977-font-display);
	font-size: 1rem;
	font-weight: 600;
	padding: 13px 22px;
	transition: filter 0.2s ease, transform 0.1s ease;
}

.c977-spin .c977-spin__btn:hover:not(:disabled),
.c977-spin__modal .c977-spin__btn:hover:not(:disabled) {
	filter: brightness(1.1);
}

.c977-spin .c977-spin__btn:active:not(:disabled),
.c977-spin__modal .c977-spin__btn:active:not(:disabled) {
	transform: translateY(1px);
}

.c977-spin .c977-spin__btn:focus-visible,
.c977-spin__modal .c977-spin__btn:focus-visible {
	outline: 3px solid var(--c977-gold-bright);
	outline-offset: 2px;
}

.c977-spin .c977-spin__btn:disabled,
.c977-spin__modal .c977-spin__btn:disabled {
	cursor: not-allowed;
	filter: grayscale(0.6) brightness(0.7);
}

/* The `button.` twins below are load-bearing: the base rule carries
   `.c977-spin button.c977-spin__btn` at (0,2,1) to outrank theme button styling, so a plain
   (0,2,0) variant selector loses to it and every gold/ghost <button> rendered as the red
   default. Anchoring <a> needs no twin — it is already (0,2,0) against a (0,2,0) base. */
.c977-spin button.c977-spin__btn--ghost,
.c977-spin .c977-spin__btn--ghost,
.c977-spin__modal button.c977-spin__btn--ghost,
.c977-spin__modal .c977-spin__btn--ghost {
	background: transparent;
	border: 1px solid var(--c977-border);
	color: var(--c977-muted);
}

.c977-spin button.c977-spin__btn--gold,
.c977-spin .c977-spin__btn--gold,
.c977-spin__modal button.c977-spin__btn--gold,
.c977-spin__modal .c977-spin__btn--gold {
	background: linear-gradient(135deg, var(--c977-gold), #e08e0b);
	color: #1a1200;
}

.c977-spin__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.c977-spin__hint {
	font-size: 0.82rem;
	color: var(--c977-subtle);
}

.c977-spin__error {
	background: rgba(244, 67, 54, 0.12);
	border: 1px solid rgba(244, 67, 54, 0.45);
	border-radius: var(--c977-radius-md);
	color: #ffb3ad;
	font-size: 0.88rem;
	padding: 10px 14px;
}

/* Informational only (campaign not open / paused / ended) — deliberately neutral, not
   success green, so a closed campaign does not read as a confirmed action. */
.c977-spin__notice {
	background: var(--c977-elevated);
	border: 1px solid var(--c977-border);
	border-left: 3px solid var(--c977-gold);
	border-radius: var(--c977-radius-md);
	color: var(--c977-text);
	font-size: 0.88rem;
	padding: 12px 16px;
}

/* ---------- result / rewards / referral ---------- */

.c977-spin__result {
	margin-top: 14px;
	padding: 16px;
	border-radius: var(--c977-radius-md);
	background: var(--c977-elevated);
	border: 1px solid var(--c977-border);
	text-align: center;
}

.c977-spin__result.is-win {
	border-color: var(--c977-gold);
	box-shadow: 0 0 24px rgba(245, 166, 35, 0.25);
}

.c977-spin__result-label {
	display: block;
	font-family: var(--c977-font-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--c977-gold-bright);
}

.c977-spin__reward {
	border: 1px dashed var(--c977-gold);
	border-radius: var(--c977-radius-md);
	padding: 14px;
	margin-bottom: 12px;
	background: rgba(245, 166, 35, 0.06);
}

.c977-spin__code {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.25rem;
	letter-spacing: 0.12em;
	color: var(--c977-gold-bright);
	margin: 8px 0;
	word-break: break-all;
}

.c977-spin__reward dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 12px;
	margin: 10px 0 0;
	font-size: 0.85rem;
}

.c977-spin__reward dt {
	color: var(--c977-subtle);
}

.c977-spin__reward dd {
	margin: 0;
	color: var(--c977-text);
}

.c977-spin__referral {
	display: flex;
	gap: 8px;
	align-items: center;
}

.c977-spin__referral input {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.82rem;
}

.c977-spin__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.c977-spin__list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.88rem;
	padding: 8px 10px;
	border-radius: var(--c977-radius-sm);
	background: var(--c977-bg-alt);
	border: 1px solid var(--c977-border);
}

.c977-spin__status {
	color: var(--c977-subtle);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- modal ---------- */

.c977-spin__modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(5, 5, 8, 0.72);
	color: var(--c977-text);
	font-family: var(--c977-font-body);
	line-height: 1.6;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.c977-spin__modal[hidden] {
	display: none;
}

.c977-spin__dialog {
	width: min(460px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	background: var(--c977-card);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--c977-radius-lg);
	box-shadow: var(--c977-shadow);
	padding: clamp(18px, 4vw, 28px);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.c977-spin__dialog h2 {
	margin: 0 0 6px;
	font-family: var(--c977-font-display);
	font-size: 1.3rem;
	color: var(--c977-gold-bright);
}

.c977-spin__dialog .c977-spin__close {
	position: absolute;
}

.c977-spin__dialog-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.c977-spin__x {
	background: none;
	border: none;
	color: var(--c977-muted);
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 4px;
}

.c977-spin__x:focus-visible {
	outline: 2px solid var(--c977-gold-bright);
	border-radius: var(--c977-radius-sm);
}

/* The win dialog can host the register step, whose terms link must stay legible on the card. */
.c977-spin__modal a {
	color: var(--c977-gold-bright);
	text-decoration: underline;
}

.c977-spin__legal {
	margin-top: clamp(24px, 4vw, 44px);
	text-align: center;
	font-size: 0.85rem;
}

.c977-spin__legal a {
	color: var(--c977-muted);
	text-decoration: underline;
	margin: 0 10px;
}

.c977-spin__legal a:hover {
	color: var(--c977-primary-hover);
}

.c977-spin-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.c977-spin__wheel {
		transition-duration: 0.01ms;
	}
}

@media (max-width: 420px) {
	.c977-spin__row {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---------- home page popup ---------- */

/* Reuses .c977-spin__modal/.c977-spin__dialog (already a fixed, blurred, centred,
   scroll-capped card) so the brand tokens resolve without re-declaring anything.
   99998 sits between the theme's landing popup (9999) and this plugin's own
   claim/register dialog (99999), so registering to claim a win always stacks above
   the popup it came from. */
.c977-spin-popup {
	z-index: 99998;
}

.c977-spin-popup__dialog {
	width: min(520px, 100%);
	padding: clamp(14px, 3vw, 22px);
}

.c977-spin-popup__dialog > .c977-spin__dialog-head h2 {
	font-size: 1.05rem;
	margin: 0;
}

/* The page layout is two columns above 900px of *viewport*, which says nothing about
   a 520px dialog: without this the wheel and the register form shared ~230px each. */
.c977-spin-popup .c977-spin__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

/* Same height-aware idea as the page stage, but the dialog chrome replaces the page
   header/title block: the fixed cap has to leave room for the headline, the close row,
   the spin count line and the dialog padding, all of which are inside this box. The
   160px floor is the page stage's own landscape minimum — measured at 844x390, a 150px
   wheel leaves the wedge text 1px from the hub, where 160px keeps a 4px gap. */
.c977-spin-popup .c977-spin__stage {
	max-width: min(320px, 100%, max(160px, calc(100vh - 300px)));
	max-width: min(320px, 100%, max(160px, calc(100dvh - 300px)));
}

.c977-spin-popup .c977-spin__balance {
	margin-top: 12px;
	font-size: 0.88rem;
}

.c977-spin-popup .c977-spin__panel {
	padding: clamp(12px, 2.5vw, 18px);
}

.c977-spin-popup__legal {
	margin: 14px 0 0;
	text-align: center;
	font-size: 0.78rem;
}

.c977-spin-popup__legal a {
	color: var(--c977-muted);
	text-decoration: underline;
}