/**
 * Scratch Card Popup — frontend styles.
 *
 * Everything is namespaced under .scp- and uses its own custom properties, so
 * a theme's cascade cannot reach in and break the layout.
 */

.scp-root {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	font-family: inherit;
}

.scp-root.is-open {
	display: flex;
}

.scp-root *,
.scp-root *::before,
.scp-root *::after {
	box-sizing: border-box;
}

/* Locking the page prevents the content behind the popup from scrolling. */
html.scp-locked,
html.scp-locked body {
	overflow: hidden;
}

/* Colour and opacity are set inline per card. */
.scp-overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 16, 0.66);
	animation: scp-fade 0.25s ease both;
}

.scp-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	max-height: 100%;
	overflow: visible;
	animation: scp-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

/* No focus ring on the dialog itself.
 *
 * It is a container, not a control, and it only receives focus programmatically
 * on open so the heading gets announced. Browsers were drawing a focus-visible
 * ring for that programmatic focus, which looked like a stray frame around the
 * popup. Every real control inside still has its own visible focus style, so
 * keyboard navigation stays fully traceable. */
.scp-dialog:focus,
.scp-dialog:focus-visible {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * Close button — deliberately a sibling of the card and pushed clear of it, so
 * no card artwork can ever sit on top of it.
 * ------------------------------------------------------------------------ */

.scp-close {
	position: absolute;
	top: -18px;
	inset-inline-end: -18px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.scp-close:hover {
	transform: scale(1.08);
}

.scp-close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.scp-close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

/* On small screens the button moves inside the padding so it stays on screen. */
@media (max-width: 520px) {
	.scp-close {
		top: -14px;
		inset-inline-end: -6px;
	}
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------ */

.scp-title {
	margin: 0;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.25;
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.scp-instructions {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
	text-align: center;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.scp-card {
	position: relative;
	width: min(var(--scp-width, 420px), calc(100vw - 64px));
	aspect-ratio: var(--scp-ratio, 1 / 1);
	max-height: calc(100vh - 220px);
	overflow: hidden;
	border-radius: 18px;
	background: #f7f2ea;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.scp-root--circle .scp-card {
	border-radius: 50%;
}

.scp-root--square .scp-card,
.scp-root--rectangle .scp-card,
.scp-root--vertical .scp-card {
	border-radius: 18px;
}

.scp-card__reveal {
	position: absolute;
	inset: 0;
}

/* Kept out of sight until the scratch surface has actually painted over it,
 * so the prize never flashes before the visitor scratches. */
.scp-card__reveal.is-hidden {
	visibility: hidden;
}

.scp-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The coupon text is a real DOM node rather than canvas text, so it inherits
 * the site's fonts, wraps properly and handles RTL without extra work. */
.scp-card__text {
	position: absolute;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0 4%;
	width: max-content;
	max-width: 90%;
	white-space: pre-line;
	pointer-events: none;
	word-break: break-word;
}

.scp-card__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	transition: opacity 0.45s ease;
	touch-action: none;
}

.scp-card__canvas.is-cleared {
	opacity: 0;
	pointer-events: none;
}

.scp-card.is-revealed {
	animation: scp-win 0.6s ease;
}

.scp-card.is-errored .scp-card__canvas {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Sparkles
 * ------------------------------------------------------------------------ */

.scp-sparkle {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff8d6 0%, #ffd76a 55%, rgba(255, 215, 106, 0) 70%);
	pointer-events: none;
	animation: scp-sparkle 0.6s ease-out forwards;
}

/* ---------------------------------------------------------------------------
 * Buttons under the card
 * ------------------------------------------------------------------------ */

.scp-reveal-btn,
.scp-copy,
.scp-cta {
	display: inline-block;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.scp-reveal-btn {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.scp-reveal-btn:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* "Hidden" reveal button: out of sight for mouse users, but still in the tab
 * order and fully visible the moment it receives keyboard focus. */
.scp-reveal-btn--on-focus {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.scp-reveal-btn--on-focus:focus,
.scp-reveal-btn--on-focus:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 20px;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* ---------------------------------------------------------------------------
 * Scratch hint — a coin sweeping back and forth, leaving marks behind it.
 *
 * Purely decorative. It sits above the canvas but must never swallow a
 * pointer event, or the visitor would be unable to scratch through it.
 * ------------------------------------------------------------------------ */

.scp-hint {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.scp-hint__coin {
	position: relative;
	z-index: 2;
	display: block;
	width: var(--scp-coin-size, 62px);
	height: var(--scp-coin-size, 62px);
	object-fit: contain;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
	animation: scp-coin-scratch 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.scp-hint__coin--default svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The marks the coin appears to leave. Drawn as three streaks that wipe in
 * behind the coin and fade out before it comes back round. */
.scp-hint__marks {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: var(--scp-marks-width, 150px);
	height: var(--scp-coin-size, 62px);
	margin: calc(var(--scp-coin-size, 62px) / -2) 0 0 calc(var(--scp-marks-width, 150px) / -2);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) center/100% 6px no-repeat,
		linear-gradient(90deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 92%) center top 22%/86% 4px no-repeat,
		linear-gradient(90deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 92%) center bottom 22%/86% 4px no-repeat;
	border-radius: 999px;
	opacity: 0;
	/* A plain white streak vanishes on a pale card, so each one is given a
	 * soft dark edge. That reads on light and dark artwork alike. */
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
	animation: scp-coin-marks 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Over the form image the coin is larger — it is the focal point there. */
.scp-hint--gate {
	--scp-coin-size: 84px;
	--scp-marks-width: 200px;
}

.scp-hint--card {
	--scp-coin-size: 62px;
	--scp-marks-width: 150px;
}

/* Reduced motion: keep the coin as a still cue rather than removing the
 * signal entirely, and drop the marks. */
.scp-hint.is-still .scp-hint__coin {
	animation: none;
}

.scp-hint.is-still .scp-hint__marks {
	display: none;
}

@keyframes scp-coin-scratch {
	0%   { transform: translateX(-34%) rotate(-12deg); }
	12%  { transform: translateX(-34%) rotate(-12deg); }
	38%  { transform: translateX(34%) rotate(10deg); }
	50%  { transform: translateX(34%) rotate(10deg); }
	76%  { transform: translateX(-34%) rotate(-12deg); }
	100% { transform: translateX(-34%) rotate(-12deg); }
}

@keyframes scp-coin-marks {
	0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
	12%  { opacity: 0; clip-path: inset(0 100% 0 0); }
	38%  { opacity: 1; clip-path: inset(0 0 0 0); }
	58%  { opacity: 1; clip-path: inset(0 0 0 0); }
	80%  { opacity: 0; clip-path: inset(0 0 0 0); }
	100% { opacity: 0; clip-path: inset(0 100% 0 0); }
}

@media (max-width: 520px) {
	.scp-hint--gate {
		--scp-coin-size: 66px;
		--scp-marks-width: 160px;
	}
}

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

/* During the email step the card is out of view entirely — the form (and its
 * image) is the whole popup. It returns to the normal centred layout once the
 * form is done. */
.scp-root.is-gate-step .scp-card,
.scp-root.is-gate-step .scp-instructions {
	display: none;
}

.scp-gate-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
}

.scp-gate-wrap[hidden] {
	display: none;
}

/* With an image it becomes two panels side by side, in a single card. */
.scp-gate-wrap.has-image {
	flex-direction: row;
	align-items: stretch;
	width: min(880px, 100%);
	max-height: calc(100vh - 120px);
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.scp-gate__figure {
	position: relative; /* Positioning context for the coin hint. */
	flex: 1 1 50%;
	min-width: 0;
	overflow: hidden;
	background: #efeae3;
}

.scp-gate__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "start" puts the image first in reading order — right in Hebrew, left in
 * English. "end" puts it last. "auto" is the same as "start". */
.scp-gate-wrap--end {
	flex-direction: row-reverse;
}

.scp-gate {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
	width: min(360px, 100%);
	text-align: center;
}

.scp-gate[hidden] {
	display: none;
}

/* Inside the panel the form sits on a white background, so the light-overlay
 * colours apply regardless of the dimmer colour. */
.scp-gate-wrap.has-image .scp-gate {
	flex: 1 1 50%;
	width: auto;
	min-width: 0;
	padding: 32px 28px;
	overflow-y: auto;
}

.scp-gate-wrap.has-image .scp-gate__heading,
.scp-gate-wrap.has-image .scp-gate__desc,
.scp-gate-wrap.has-image .scp-gate__consent,
.scp-gate-wrap.has-image .scp-gate__privacy,
.scp-gate-wrap.has-image .scp-gate__skip {
	color: #16161a;
	text-shadow: none;
}

.scp-gate-wrap.has-image .scp-gate__heading {
	font-size: 1.35rem;
}

.scp-gate-wrap.has-image .scp-gate__input {
	border-color: rgba(0, 0, 0, 0.25);
}

.scp-gate-wrap.has-image .scp-gate__submit {
	background: #16161a;
	color: #fff;
}

.scp-root .scp-gate-wrap.has-image .scp-gate__consent input[type="checkbox"] {
	border-color: rgba(0, 0, 0, 0.55) !important;
	background: rgba(0, 0, 0, 0.04) !important;
}

.scp-root .scp-gate-wrap.has-image .scp-gate__consent input[type="checkbox"]:checked {
	background: #16161a !important;
	border-color: #16161a !important;
}

.scp-root .scp-gate-wrap.has-image .scp-gate__consent input[type="checkbox"]::after {
	border-color: #fff;
}

/* Mobile: the two panels stack, image on top. Its height is capped so the
 * form and its button stay on screen without scrolling. */
@media (max-width: 720px) {
	.scp-gate-wrap.has-image {
		flex-direction: column;
		width: min(420px, 100%);
	}

	.scp-gate-wrap--end {
		flex-direction: column;
	}

	.scp-gate__figure {
		flex: 0 0 auto;
		max-height: 34vh;
	}

	.scp-gate__figure img {
		max-height: 34vh;
	}

	.scp-gate-wrap.has-image .scp-gate {
		flex: 1 1 auto;
		padding: 22px 20px 26px;
	}
}

.scp-gate__heading {
	margin: 0;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.scp-gate__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
}

.scp-gate__input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 10px;
	background: #fff;
	color: #16161a;
	font: inherit;
	font-size: 1rem;
}

.scp-gate__input:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.scp-gate__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.8rem;
	line-height: 1.4;
	text-align: start;
	cursor: pointer;
}

/* The consent box is drawn from scratch rather than relying on the native
 * control.
 *
 * Themes very commonly hide the real checkbox (appearance:none, opacity:0,
 * position:absolute) so they can draw their own next to the label. Inside the
 * popup that left the label with no tickable box at all — and with consent
 * required, nothing could be submitted. These resets are forced so no theme
 * can take the control away again. */
.scp-root .scp-gate__consent input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-block !important;
	position: static !important;
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	clip: auto !important;
	clip-path: none !important;
	transform: none !important;
	box-shadow: none !important;
	border: 2px solid rgba(255, 255, 255, 0.85) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.scp-root .scp-gate__consent input[type="checkbox"]:checked {
	background: #fff !important;
	border-color: #fff !important;
}

/* The tick itself: two borders rotated into a check mark. */
.scp-root .scp-gate__consent input[type="checkbox"]::after {
	content: "";
	display: block;
	width: 5px;
	height: 10px;
	margin: 1px auto 0;
	border: solid #16161a;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.12s ease;
}

.scp-root .scp-gate__consent input[type="checkbox"]:checked::after {
	opacity: 1;
}

.scp-root .scp-gate__consent input[type="checkbox"]:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px;
}

.scp-root--light .scp-gate__consent input[type="checkbox"] {
	border-color: rgba(0, 0, 0, 0.55) !important;
	background: rgba(0, 0, 0, 0.04) !important;
}

.scp-root--light .scp-gate__consent input[type="checkbox"]:checked {
	background: #16161a !important;
	border-color: #16161a !important;
}

.scp-root--light .scp-gate__consent input[type="checkbox"]::after {
	border-color: #fff;
}

.scp-root--light .scp-gate__consent input[type="checkbox"]:focus-visible {
	outline-color: #16161a !important;
}

.scp-gate__privacy {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.78rem;
}

.scp-gate__error {
	margin: 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(200, 0, 60, 0.92);
	color: #fff;
	font-size: 0.85rem;
}

.scp-gate__error[hidden] {
	display: none;
}

.scp-gate__submit {
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #16161a;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.scp-gate__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.scp-gate__skip {
	padding: 4px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.8);
	font: inherit;
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
}

/* The card stays visible behind the form as a teaser, but is dimmed and
 * cannot be scratched until the form is dealt with. */
.scp-card.is-gated {
	opacity: 0.55;
	filter: saturate(0.6);
	pointer-events: none;
}

.scp-root--light .scp-gate__heading,
.scp-root--light .scp-gate__desc,
.scp-root--light .scp-gate__consent,
.scp-root--light .scp-gate__privacy,
.scp-root--light .scp-gate__skip {
	color: #16161a;
	text-shadow: none;
}

.scp-root--light .scp-gate__input {
	border-color: rgba(0, 0, 0, 0.3);
}

.scp-root--light .scp-gate__submit {
	background: #16161a;
	color: #fff;
}

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

.scp-timer {
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.scp-timer[hidden] {
	display: none;
}

.scp-timer.is-expired {
	background: rgba(200, 0, 60, 0.9);
}

.scp-root--light .scp-timer {
	background: rgba(0, 0, 0, 0.08);
	color: #16161a;
}

/* Celebration particles sit above the card but never intercept clicks. */
.scp-celebrate {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* Light overlay: flip the surrounding labels to dark text for contrast. */
.scp-root--light .scp-title,
.scp-root--light .scp-instructions,
.scp-root--light .scp-result__note {
	color: #16161a;
	text-shadow: none;
}

.scp-root--light .scp-reveal-btn {
	color: #16161a;
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.4);
}

.scp-root--light .scp-reveal-btn:hover {
	background: rgba(0, 0, 0, 0.12);
}

.scp-root--light .scp-close {
	background: #16161a;
	color: #fff;
}

.scp-root--light .scp-copy {
	background: #16161a;
	color: #fff;
}

.scp-root--light .scp-dialog:focus-visible,
.scp-root--light .scp-reveal-btn:focus-visible,
.scp-root--light .scp-copy:focus-visible,
.scp-root--light .scp-cta:focus-visible,
.scp-root--light .scp-close:focus-visible {
	outline-color: #16161a;
}

.scp-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.scp-result__note {
	margin: 0;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
}

.scp-copy {
	background: #fff;
	color: #111;
}

.scp-cta {
	background: #c8003c;
	color: #fff;
}

.scp-reveal-btn:focus-visible,
.scp-copy:focus-visible,
.scp-cta:focus-visible,
.scp-teaser:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Teaser icon
 * ------------------------------------------------------------------------ */

.scp-teaser {
	position: fixed;
	z-index: 999998;
	width: var(--scp-teaser-size, 96px);
	height: var(--scp-teaser-size, 96px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3));
	transition: scale 0.2s ease;
}

.scp-teaser[hidden] {
	display: none;
}

/* `scale` rather than `transform: scale()` so it composes with the
 * translate() used to centre the middle/bottom-centre positions. */
.scp-teaser:hover {
	scale: 1.06;
}

.scp-teaser img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.scp-teaser--text {
	width: auto;
	height: auto;
	padding: 12px 20px;
	border-radius: 999px;
	background: #c8003c;
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
}

.scp-teaser--bottom-right { bottom: var(--scp-teaser-y, 24px); inset-inline-end: var(--scp-teaser-x, 24px); }
.scp-teaser--bottom-left  { bottom: var(--scp-teaser-y, 24px); inset-inline-start: var(--scp-teaser-x, 24px); }
.scp-teaser--top-right    { top: var(--scp-teaser-y, 24px); inset-inline-end: var(--scp-teaser-x, 24px); }
.scp-teaser--top-left     { top: var(--scp-teaser-y, 24px); inset-inline-start: var(--scp-teaser-x, 24px); }
.scp-teaser--middle-right { top: 50%; inset-inline-end: var(--scp-teaser-x, 24px); transform: translateY(-50%); }
.scp-teaser--middle-left  { top: 50%; inset-inline-start: var(--scp-teaser-x, 24px); transform: translateY(-50%); }

.scp-teaser--bottom-center {
	bottom: var(--scp-teaser-y, 24px);
	left: 50%;
	transform: translateX(-50%);
}

.scp-teaser.is-pulsing {
	animation: scp-pulse 2.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------------ */

.scp-visually-hidden {
	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;
}

/* ---------------------------------------------------------------------------
 * Animations
 * ------------------------------------------------------------------------ */

@keyframes scp-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes scp-pop {
	from { opacity: 0; transform: scale(0.9) translateY(12px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes scp-win {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.035); }
	100% { transform: scale(1); }
}

@keyframes scp-sparkle {
	from { opacity: 1; transform: scale(0.4); }
	to   { opacity: 0; transform: scale(2.2); }
}

@keyframes scp-pulse {
	0%, 100% { scale: 1; }
	50%      { scale: 1.07; }
}

/* Honour the OS-level motion preference: no pulsing, popping or sparkles. */
@media (prefers-reduced-motion: reduce) {
	.scp-overlay,
	.scp-dialog,
	.scp-card.is-revealed,
	.scp-teaser.is-pulsing,
	.scp-hint__coin {
		animation: none !important;
	}

	.scp-hint__marks {
		display: none;
	}

	.scp-card__canvas,
	.scp-close,
	.scp-teaser {
		transition: none !important;
	}
}

/* Windows high-contrast mode: keep the controls visible. */
@media (forced-colors: active) {
	.scp-close,
	.scp-reveal-btn,
	.scp-copy,
	.scp-cta {
		border: 1px solid ButtonText;
	}
}

@media (max-width: 520px) {
	.scp-root {
		padding: 20px 16px;
	}

	.scp-card {
		max-height: calc(100vh - 200px);
	}

	.scp-title {
		font-size: 1.15rem;
	}
}