/* CouponVerity Verity Vault 0.2.0 — engagement + indexable evergreen game page. */
.cv-vault-page {
	--vv-width: 960px;
	--vv-text: #252a30;
	--vv-muted: #626a75;
	--vv-subtle: #7a828d;
	--vv-line: #d8dee7;
	--vv-line-soft: #e7ebf0;
	--vv-surface: #ffffff;
	--vv-surface-soft: #f6f8fb;
	--vv-accent: #164d84;
	--vv-accent-soft: #edf4fb;
	--vv-success: #17633d;
	--vv-error: #9a332b;
	padding-bottom: 64px;
	color: var(--vv-text);
	font-family: var(--cv-font-family, Arial, "Helvetica Neue", Helvetica, sans-serif);
	font-size: 16px;
	line-height: 1.55;
}

.cv-vault-page h1,
.cv-vault-page h2,
.cv-vault-page h3,
.cv-vault-page .cv-button {
	font-family: var(--cv-font-heading, "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif);
}

.cv-vault-hero,
.cv-vault-tutorial,
.cv-vault-game,
.cv-vault-deal,
.cv-vault-explainer,
.cv-vault-strategy,
.cv-vault-glossary,
.cv-vault-faq {
	width: min(100%, var(--vv-width));
	margin-left: auto;
	margin-right: auto;
}

.cv-vault-kicker,
.cv-vault-label,
.cv-vault-tutorial__label,
.cv-vault-deal__eyebrow {
	margin: 0;
	color: var(--vv-muted);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .055em;
	text-transform: none;
}

/* Hero */
.cv-vault-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	padding: 28px 0 22px;
}

.cv-vault-hero > div:first-child {
	min-width: 0;
}

.cv-vault-hero h1 {
	margin: 5px 0 0;
	font-size: clamp(2.35rem, 4.7vw, 3rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.035em;
}

.cv-vault-lede {
	max-width: 650px;
	margin: 10px 0 0;
	color: #4f5762;
	font-size: 1rem;
	line-height: 1.55;
}

.cv-vault-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.cv-vault-hero__meta span {
	padding: 7px 10px;
	border: 1px solid var(--vv-line);
	border-radius: 999px;
	background: var(--vv-surface);
	font-size: .79rem;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
}

/* First-play tutorial: intentionally secondary to the daily puzzle. */
.cv-vault-tutorial {
	margin-bottom: 16px;
	padding: 18px 20px;
	border: 1px solid var(--vv-line);
	border-radius: 18px;
	background: var(--vv-surface);
	box-shadow: 0 8px 24px rgba(25, 33, 45, .045);
}

.cv-vault-tutorial__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.cv-vault-tutorial h2 {
	margin: 4px 0 0;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.cv-vault-tutorial__badge {
	padding: 6px 9px;
	border: 1px solid var(--vv-line);
	border-radius: 999px;
	background: var(--vv-surface-soft);
	color: var(--vv-muted);
	font-size: .75rem;
	font-weight: 650;
	white-space: nowrap;
}

.cv-vault-tutorial__copy {
	margin: 8px 0 0;
	color: var(--vv-muted);
	font-size: .9rem;
}

.cv-vault-tutorial__example {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	margin-top: 13px;
	padding: 13px 14px;
	border: 1px solid var(--vv-line-soft);
	border-radius: 13px;
	background: #fafbfd;
}

.cv-vault-tutorial__label {
	display: block;
	margin-bottom: 7px;
	color: var(--vv-subtle);
}

.cv-vault-tutorial__arrow {
	color: var(--vv-subtle);
	font-size: 1.15rem;
	text-align: center;
}

.cv-vault-tutorial__result {
	margin: 10px 0 13px;
	padding: 10px 12px;
	border-left: 3px solid var(--vv-accent);
	border-radius: 8px;
	background: var(--vv-accent-soft);
	color: #354252;
	font-size: .88rem;
	line-height: 1.5;
}

.cv-vault-tutorial .cv-button {
	min-height: 42px;
	padding: 10px 16px;
	font-size: .88rem;
}

/* Main game */
.cv-vault-game {
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--vv-line);
	border-radius: 20px;
	background: var(--vv-surface);
	box-shadow: 0 14px 40px rgba(25, 33, 45, .055);
}

.cv-vault-game__topline,
.cv-vault-entry__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.cv-vault-game__topline h2 {
	margin: 4px 0 0;
	font-size: clamp(1.55rem, 3vw, 1.9rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.025em;
}

.cv-vault-clock {
	min-width: 92px;
	text-align: right;
}

.cv-vault-clock span {
	display: block;
	color: var(--vv-subtle);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .055em;
}

.cv-vault-clock strong {
	display: block;
	margin-top: 2px;
	font-size: 1.3rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.cv-vault-clock small {
	display: block;
	margin-top: 4px;
	color: #8a919a;
	font-size: .67rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.cv-vault-rule {
	margin-top: 17px;
	padding: 13px 15px;
	border-radius: 12px;
	background: var(--vv-surface-soft);
	color: #343b45;
	font-size: .92rem;
	line-height: 1.55;
}

.cv-vault-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 12px;
	color: var(--vv-muted);
	font-size: .82rem;
	line-height: 1.45;
}

.cv-vault-legend b {
	color: #3a424d;
	font-weight: 650;
}

.cv-vault-clues {
	display: grid;
	gap: 9px;
	margin-top: 19px;
}

.cv-vault-clue {
	display: grid;
	grid-template-columns: 62px minmax(230px, 1fr) 190px;
	align-items: center;
	gap: 14px;
	min-height: 70px;
	padding: 11px 13px;
	border: 1px solid var(--vv-line-soft);
	border-radius: 13px;
	background: #fcfdfe;
}

.cv-vault-clue.is-hint {
	border-color: #e2ad56;
	background: #fffaf1;
}

.cv-vault-clue__number {
	color: var(--vv-muted);
	font-size: .76rem;
	font-weight: 700;
	line-height: 1.2;
}

.cv-vault-symbol-row {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.cv-vault-symbol,
.cv-vault-slot,
.cv-vault-key-reveal span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--vv-line);
	border-radius: 11px;
	background: var(--vv-surface);
	font-size: 1.18rem;
	line-height: 1;
}

.cv-vault-feedback {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 5px 12px;
	color: #46505b;
	font-size: .81rem;
	line-height: 1.35;
}

.cv-vault-feedback strong {
	font-weight: 750;
}

/* Player entry */
.cv-vault-entry {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--vv-line-soft);
}

.cv-vault-entry__header p {
	margin: 3px 0 0;
	color: var(--vv-muted);
	font-size: .9rem;
}

.cv-vault-attempts {
	color: var(--vv-muted);
	font-size: .82rem;
}

.cv-vault-attempts strong {
	color: var(--vv-text);
	font-weight: 700;
}

.cv-vault-slots {
	display: flex;
	gap: 9px;
	margin-top: 13px;
}

.cv-vault-slot {
	width: 58px;
	height: 58px;
	background: #f8fafc;
	font-size: 1.4rem;
	font-weight: 750;
}

.cv-vault-slot.is-filled {
	border-color: #94a1b2;
	background: var(--vv-surface);
}

.cv-vault-slot.is-direct-hint {
	border-color: #df9d35;
	background: #fff5df;
	box-shadow: 0 0 0 3px rgba(223, 157, 53, .11);
}

.cv-vault-picker {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-top: 14px;
}

.cv-vault-pick {
	min-height: 68px;
	padding: 8px 6px;
	border: 1px solid var(--vv-line);
	border-radius: 12px;
	background: var(--vv-surface);
	color: var(--vv-text);
	font: inherit;
	cursor: pointer;
}

.cv-vault-pick > span {
	display: block;
	font-size: 1.25rem;
	line-height: 1;
}

.cv-vault-pick small {
	display: block;
	margin-top: 6px;
	color: var(--vv-muted);
	font-size: .7rem;
	font-weight: 650;
	line-height: 1.1;
}

@media (hover: hover) and (pointer: fine) {
	.cv-vault-pick:hover {
		border-color: #cbd3de;
		background: #f8fafc;
	}
}

.cv-vault-pick:focus-visible,
.cv-vault-actions button:focus-visible,
.cv-vault-share-row button:focus-visible,
.cv-vault-tutorial button:focus-visible {
	outline: 3px solid rgba(28, 93, 153, .22);
	outline-offset: 2px;
}

.cv-vault-pick[disabled],
.cv-vault-actions button[disabled] {
	opacity: .38;
	cursor: not-allowed;
}

.cv-vault-actions,
.cv-vault-share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.cv-vault-actions .cv-button,
.cv-vault-share-row .cv-button {
	min-height: 42px;
	padding: 10px 16px;
	font-size: .86rem;
	font-weight: 650;
}

.cv-vault-button--secondary {
	border: 1px solid var(--vv-line) !important;
	background: var(--vv-surface) !important;
	color: #28303a !important;
}

.cv-vault-button--secondary span {
	color: var(--vv-subtle);
	font-size: .78em;
}

.cv-vault-hint {
	margin-top: 13px;
	padding: 12px 14px;
	border: 1px solid #ead2a3;
	border-radius: 10px;
	background: #fffaf0;
	color: #514735;
	font-size: .88rem;
	line-height: 1.5;
}

.cv-vault-hint__step + .cv-vault-hint__step {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #ead2a3;
}

.cv-vault-status {
	min-height: 22px;
	margin: 11px 0 0;
	color: var(--vv-muted);
	font-size: .85rem;
	line-height: 1.45;
}

.cv-vault-status.is-error { color: var(--vv-error); }
.cv-vault-status.is-good { color: var(--vv-success); }

/* Tested keys: compact, informative, not another dashboard card. */
.cv-vault-attempt-history {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid var(--vv-line-soft);
	border-radius: 12px;
	background: #fafbfd;
}

.cv-vault-attempt-history > .cv-vault-label {
	margin-bottom: 6px;
}

.cv-vault-attempt-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-top: 1px solid var(--vv-line-soft);
}

.cv-vault-attempt-row:first-child {
	padding-top: 2px;
	border-top: 0;
}

.cv-vault-attempt-row__key {
	display: flex;
	flex-shrink: 0;
	gap: 5px;
}

.cv-vault-attempt-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--vv-line);
	border-radius: 8px;
	background: var(--vv-surface);
	font-size: .95rem;
}

.cv-vault-attempt-row__result {
	color: #515a65;
	font-size: .8rem;
	text-align: right;
}

/* Win state */
.cv-vault-win {
	margin-top: 22px;
	padding: 24px;
	border: 1px solid #d5e4d9;
	border-radius: 16px;
	background: #f6f9f7;
	text-align: center;
}

.cv-vault-open-mark { font-size: 2.25rem; }

.cv-vault-win h2 {
	margin: 5px 0 4px;
	font-size: 1.55rem;
	font-weight: 600;
	line-height: 1.2;
}

.cv-vault-win > p:not(.cv-vault-label) {
	margin: 0;
	color: var(--vv-muted);
	font-size: .9rem;
}

.cv-vault-key-reveal {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 15px;
}

.cv-vault-key-reveal span { background: var(--vv-surface); }
.cv-vault-share-row { justify-content: center; }

.cv-vault-share-preview {
	max-width: 430px;
	margin: 12px auto 0;
	padding: 12px;
	border: 1px solid var(--vv-line);
	border-radius: 10px;
	background: var(--vv-surface);
	font-size: .82rem;
	text-align: left;
	white-space: pre-wrap;
}

/* Deal Drop */
.cv-vault-deal {
	margin-top: 20px;
	padding: 22px 24px;
	border-radius: 18px;
	background: #171b23;
	color: #fff;
}

.cv-vault-deal__eyebrow { color: #b9c0ca; }

.cv-vault-deal__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	margin-top: 12px;
}

.cv-vault-deal__brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cv-vault-deal__brand img,
.cv-vault-deal__monogram {
	width: 58px;
	height: 58px;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	object-fit: contain;
}

.cv-vault-deal__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1f2530;
	font-size: 1.3rem;
	font-weight: 750;
}

.cv-vault-deal h2 {
	margin: 0;
	color: #fff;
	font-size: 1.28rem;
	font-weight: 600;
}

.cv-vault-deal p {
	margin: 4px 0 0;
	color: #d1d5dc;
	font-size: .9rem;
}

.cv-vault-deal__code {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: 100%;
	padding: 9px 11px;
	border: 1px dashed #596273;
	border-radius: 10px;
	background: #222834;
}

.cv-vault-deal__code span {
	color: #aeb6c2;
	font-size: .74rem;
}

.cv-vault-deal__code strong {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88rem;
	letter-spacing: .065em;
}

.cv-vault-deal__trust {
	grid-column: 1 / -1;
	margin-top: 13px !important;
	color: #aeb6c2 !important;
	font-size: .75rem !important;
	line-height: 1.45 !important;
}

/* Supporting content: editorial, not dashboard cards. */
.cv-vault-explainer,
.cv-vault-strategy,
.cv-vault-glossary,
.cv-vault-faq {
	margin-top: 34px;
}

.cv-vault-explainer h2,
.cv-vault-faq h2 {
	margin: 4px 0 0;
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
}

.cv-vault-explainer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 16px;
}

.cv-vault-explainer__grid > div {
	padding: 14px 0 0;
	border-top: 2px solid #d7dde6;
	background: transparent;
}

.cv-vault-explainer__grid strong {
	font-size: .92rem;
	font-weight: 700;
}

.cv-vault-explainer__grid p {
	margin: 6px 0 0;
	color: var(--vv-muted);
	font-size: .86rem;
	line-height: 1.55;
}

.cv-vault-faq details {
	padding: 13px 0;
	border-bottom: 1px solid var(--vv-line);
}

.cv-vault-faq summary {
	cursor: pointer;
	font-size: .92rem;
	font-weight: 650;
}

.cv-vault-faq details p {
	margin: 7px 0 0;
	color: var(--vv-muted);
	font-size: .86rem;
	line-height: 1.55;
}

.cv-vault-shake { animation: cvVaultShake .24s ease-in-out 2; }
.cv-vault-unlock { animation: cvVaultUnlock .48s ease both; }

@keyframes cvVaultShake {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@keyframes cvVaultUnlock {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
	.cv-vault-hero {
		display: block;
		padding-top: 24px;
	}

	.cv-vault-hero__meta {
		justify-content: flex-start;
		margin-top: 14px;
	}

	.cv-vault-tutorial__example {
		grid-template-columns: 1fr;
	}

	.cv-vault-tutorial__arrow {
		transform: rotate(90deg);
	}

	.cv-vault-clue {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 8px 12px;
	}

	.cv-vault-clue__number { grid-column: 1; grid-row: 1; }
	.cv-vault-symbol-row { grid-column: 2; grid-row: 1; }
	.cv-vault-feedback {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
	}

	.cv-vault-picker { grid-template-columns: repeat(3, 1fr); }
	.cv-vault-deal__content { grid-template-columns: 1fr; }
	.cv-vault-explainer__grid { grid-template-columns: 1fr; gap: 16px; }
	.cv-vault-deal .cv-button { width: 100%; text-align: center; }
	.cv-vault-deal__code { width: 100%; justify-content: space-between; }
}

@media (max-width: 520px) {
	.cv-vault-hero h1 { font-size: 2.2rem; }
	.cv-vault-tutorial,
	.cv-vault-game { padding: 16px; border-radius: 16px; }
	.cv-vault-tutorial__top { display: block; }
	.cv-vault-tutorial__badge { display: inline-block; margin-top: 8px; }
	.cv-vault-game__topline { gap: 12px; }
	.cv-vault-clock { min-width: 78px; }
	.cv-vault-symbol { width: 41px; height: 41px; font-size: 1.08rem; }
	.cv-vault-slot { width: 54px; height: 54px; }
	.cv-vault-slots { gap: 7px; }
	.cv-vault-picker { gap: 7px; }
	.cv-vault-pick { min-height: 64px; }
	.cv-vault-attempt-row {
		align-items: flex-start;
		flex-direction: column;
	}
	.cv-vault-attempt-row__result { text-align: left; }
}

@media (max-width: 390px) {
	.cv-vault-clue {
		grid-template-columns: 1fr;
	}
	.cv-vault-clue__number,
	.cv-vault-symbol-row,
	.cv-vault-feedback {
		grid-column: 1;
		grid-row: auto;
	}
	.cv-vault-feedback { justify-content: flex-start; }
	.cv-vault-picker { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.cv-vault-shake,
	.cv-vault-unlock { animation: none !important; }
}

/* 0.2.0 engagement layer */
.cv-vault-mission {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 17px;
	padding: 14px 16px;
	border: 1px solid #cfe0f2;
	border-radius: 14px;
	background: linear-gradient(135deg, #f3f8fd 0%, #fbfdff 100%);
}
.cv-vault-mission > div:first-child span,
.cv-vault-score-live span,
.cv-vault-result-grid span {
	display: block;
	color: var(--vv-muted);
	font-size: .7rem;
	font-weight: 750;
	letter-spacing: .045em;
}
.cv-vault-mission strong { display:block; margin-top:3px; font-size:.94rem; }
.cv-vault-score-live { text-align:right; min-width:92px; }
.cv-vault-score-live strong { color:var(--vv-accent); font-size:1.1rem; font-variant-numeric:tabular-nums; }

.cv-vault-result-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
	margin:18px 0;
}
.cv-vault-result-grid > div {
	padding:12px 13px;
	border:1px solid var(--vv-line-soft);
	border-radius:12px;
	background:#fff;
}
.cv-vault-result-grid strong { display:block; margin-top:3px; font-size:.95rem; }
.cv-vault-return { margin:12px 0 0; color:var(--vv-muted); font-size:.84rem; }
.cv-vault-return strong { color:var(--vv-text); }

.cv-vault-section-lede { max-width:760px; margin:9px 0 0; color:var(--vv-muted); }
.cv-vault-strategy,
.cv-vault-glossary { margin-top:34px; padding-top:30px; border-top:1px solid var(--vv-line-soft); }
.cv-vault-strategy h2,
.cv-vault-glossary h2 { margin:5px 0 0; font-size:clamp(1.35rem,2.5vw,1.7rem); font-weight:600; letter-spacing:-.02em; }
.cv-vault-strategy__list {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px;
	margin:18px 0 0;
	padding:0;
	list-style:none;
	counter-reset:vault-strategy;
}
.cv-vault-strategy__list li { counter-increment:vault-strategy; padding-top:14px; border-top:2px solid #cfe0d5; }
.cv-vault-strategy__list li::before { content:counter(vault-strategy) "."; display:block; margin-bottom:5px; color:var(--vv-success); font-weight:800; }
.cv-vault-strategy__list strong { display:block; font-size:.93rem; line-height:1.4; }
.cv-vault-strategy__list span { display:block; margin-top:6px; color:var(--vv-muted); font-size:.86rem; line-height:1.55; }
.cv-vault-glossary__grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:10px;
	margin-top:18px;
}
.cv-vault-glossary__grid > div { display:flex; align-items:center; gap:10px; padding:12px 13px; border:1px solid var(--vv-line-soft); border-radius:12px; background:#fff; }
.cv-vault-glossary__grid span { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; background:var(--vv-surface-soft); font-size:1.12rem; }
.cv-vault-glossary__grid strong { font-size:.9rem; }
.cv-vault-glossary__note { margin:12px 0 0; color:var(--vv-muted); font-size:.82rem; line-height:1.55; }

@media (max-width: 700px) {
	.cv-vault-mission { align-items:flex-start; }
	.cv-vault-result-grid,
	.cv-vault-strategy__list,
	.cv-vault-glossary__grid { grid-template-columns:1fr; }
	.cv-vault-score-live { min-width:auto; }
}