/* Cardamoo landing — Sovereign Vault palette. Token hex values are DELIBERATE
   copies of client/src/theme/themes/vault.ts (importing the TS tokens would
   force a build step; this site is build-free by design). The .btn-cta recipe
   is likewise a resolved-hex port of the game's .btn-arcade-gold
   (client/src/index.css) — its color-mix() calls flattened at authoring time. */

/* Self-hosted latin subsets (OFL) — owner-approved perf pass 2026-07-21; downloaded from Google Fonts. */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/outfit-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/outfit-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/outfit-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/sora-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #15171c;
	--surface: #232630;
	--surface-high: #3a4252;
	--text: #fff6df;
	--text-2: #d0c6ab;
	--muted: #8a7e6b;
	--gold: #ffd700;
	--gold-soft: #ffe680;
	--gold-deep: #9c7d08;
	--royal: #4169e1;
}

* { box-sizing: border-box; margin: 0; }

body {
	font-family: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
	color: var(--text-2);
	background:
		radial-gradient(85% 40% at 50% -5%, rgba(255, 200, 60, 0.10), transparent 60%),
		radial-gradient(70% 55% at 85% 108%, rgba(65, 105, 225, 0.10), transparent 60%),
		radial-gradient(140% 100% at 50% 0%, #232a38 0%, #131722 55%, #0a0d13 100%);
	background-attachment: fixed;
	min-height: 100vh;
	line-height: 1.6;
}

a { color: var(--gold-soft); text-decoration: none; }

/* ── Header ── */
.site-header {
	display: flex; justify-content: space-between; align-items: center;
	max-width: 960px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 24px);
}
.brand {
	display: flex; align-items: center; gap: 10px;
	font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text);
}
.site-header nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 20px); }
.site-header nav a:not(.btn) { color: var(--text-2); font-weight: 500; padding: 10px 4px; }

/* ── Buttons ── */
.btn {
	display: inline-block; border-radius: 12px; font-weight: 700;
	padding: 10px 20px; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-small { background: var(--surface-high); color: var(--text); padding: 10px 18px; }
@media (hover: hover) {
	.btn:hover { transform: translateY(-1px); }
}

/* 3D gold CTA — port of the in-game .btn-arcade-gold (raise button). */
.btn-cta {
	display: inline-block;
	font-family: 'Sora', sans-serif; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.02em;
	color: #231a03;
	font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem);
	padding: clamp(14px, 1vw + 11px, 18px) clamp(28px, 2vw + 20px, 40px);
	border-radius: 14px;
	background: linear-gradient(180deg, #ffec9c 0%, #ffd700 55%, #d6b500 100%);
	box-shadow:
		inset 0 2px 1px rgba(255, 255, 255, 0.5),
		inset 0 -3px 4px rgba(156, 125, 8, 0.55),
		0 5px 0 var(--gold-deep),
		0 8px 12px -5px rgba(0, 0, 0, 0.6);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
@media (hover: hover) {
	.btn-cta:hover {
		transform: translateY(-1px);
		box-shadow:
			inset 0 2px 1px rgba(255, 255, 255, 0.55),
			inset 0 -3px 4px rgba(156, 125, 8, 0.55),
			0 6px 0 var(--gold-deep),
			0 10px 20px -6px rgba(255, 215, 0, 0.35);
	}
}
.btn-cta:active {
	transform: translateY(4px); transition: none;
	box-shadow:
		inset 0 2px 1px rgba(255, 255, 255, 0.4),
		0 1px 0 var(--gold-deep),
		0 3px 6px -4px rgba(0, 0, 0, 0.6);
}
.btn-cta:focus-visible { outline: 2px solid var(--royal); outline-offset: 4px; }

/* ── Hero ── */
.hero {
	max-width: 960px; margin: 0 auto; text-align: center;
	padding: clamp(40px, 8vw, 64px) clamp(16px, 4vw, 24px) clamp(28px, 5vw, 40px);
}
.hero h1 {
	font-family: 'Sora', sans-serif; font-weight: 700; color: var(--text);
	font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.15; letter-spacing: -0.02em;
}
.hero .gold { color: var(--gold-soft); }
.hero .sub { max-width: 620px; margin: 20px auto 32px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem); }
.cta-caption { margin-top: 14px; color: var(--muted); font-size: 0.9rem; }

/* ── Store badges (official art; equal visual height) ── */
.store-row { margin-top: 30px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.store-label { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.store-badge { display: inline-flex; transition: transform 0.15s ease, opacity 0.15s ease; }
.store-badge img { height: clamp(44px, 40px + 1vw, 52px); width: auto; display: block; }
@media (hover: hover) {
	.store-badge:hover { transform: translateY(-1px); opacity: 0.9; }
}

/* ── Playing-card chrome (hero fan + 404 mini-fan) ── */
.pcard {
	position: absolute; left: 50%;
	background: #fdfbf4; color: #1a1d24; border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	transform-origin: 50% 120%;
	display: flex; flex-direction: column; padding: 10px 12px;
}
.pcard .rank { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.3rem; text-align: left; }
.pcard .suit { font-size: 2.6rem; line-height: 1; margin: auto; }
.pcard.red { color: #b03535; }
.pcard-back { padding: 0; overflow: hidden; background: #1a1d24; }
.pcard-back img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero fan: royal flush up front, Barn card backs fanned wider behind.
   Still the page's one ornament — the backs join it, they don't add a second. */
.fan { position: relative; height: clamp(168px, 22vw + 100px, 240px); margin-top: clamp(36px, 6vw, 52px); }
.fan .pcard {
	--w: clamp(84px, 8.5vw + 56px, 112px);
	width: var(--w); height: calc(var(--w) * 1.41); top: 10px;
	transform: translateX(-50%) rotate(var(--r, 0deg));
}
.fan .b1 { --r: -46deg; }
.fan .b2 { --r: -34deg; }
.fan .b3 { --r: 34deg; }
.fan .b4 { --r: 46deg; }
.fan .f1 { --r: -24deg; }
.fan .f2 { --r: -12deg; }
.fan .f3 { --r: 0deg; }
.fan .f4 { --r: 12deg; }
.fan .f5 { --r: 24deg; }
.fan .f3 { transform-origin: 50% 50%; }

/* Fan hover flourishes — CSS port of the game's PlayHero FLOURISH pool
   (client/src/components/ui/PlayHero.tsx). One flourish per card. */
@keyframes fan-hop {
	0%, 100% { transform: translateX(-50%) rotate(var(--r)); }
	40% { transform: translateX(-50%) rotate(var(--r)) translateY(-12px); }
}
@keyframes fan-peek {
	0%, 100% { transform: translateX(-50%) rotate(var(--r)); }
	50% { transform: translateX(-50%) rotate(calc(var(--r) - 9deg)) translate(-4px, -4px); }
}
@keyframes fan-spin {
	from { transform: translateX(-50%) rotate(var(--r)); }
	to { transform: translateX(-50%) rotate(calc(var(--r) + 360deg)); }
}
@keyframes fan-riffle {
	0%, 100% { transform: translateX(-50%) rotate(var(--r)); }
	20% { transform: translateX(-50%) rotate(var(--r)) translate(-3px, -2px); }
	45% { transform: translateX(-50%) rotate(var(--r)) translate(3px, 0); }
	70% { transform: translateX(-50%) rotate(var(--r)) translate(-2px, -1px); }
}
@keyframes fan-tilt {
	0%, 100% { transform: translateX(-50%) rotate(var(--r)); }
	50% { transform: translateX(-50%) rotate(calc(var(--r) + 12deg)) translateX(6px); }
}
@keyframes fan-wiggle {
	0%, 100% { transform: translateX(-50%) rotate(var(--r)); }
	25% { transform: translateX(-50%) rotate(calc(var(--r) - 4deg)); }
	50% { transform: translateX(-50%) rotate(calc(var(--r) + 3deg)); }
	75% { transform: translateX(-50%) rotate(calc(var(--r) - 2deg)); }
}
@keyframes fan-breathe {
	0%, 100% { transform: translateX(-50%) rotate(var(--r)); }
	50% { transform: translateX(-50%) rotate(var(--r)) scale(1.07) translateY(-2px); }
}
@keyframes fan-taptap {
	0%, 100% { transform: translateX(-50%) rotate(var(--r)); }
	25% { transform: translateX(-50%) rotate(var(--r)) translateY(-4px); }
	40% { transform: translateX(-50%) rotate(var(--r)); }
	65% { transform: translateX(-50%) rotate(var(--r)) translateY(-4px); }
}

/* ── Feature cards ── */
.features {
	max-width: 960px; margin: 0 auto;
	padding: clamp(28px, 5vw, 44px) clamp(16px, 4vw, 24px);
	display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 20px);
}
.feature {
	position: relative; overflow: hidden;
	background: linear-gradient(180deg, rgba(42, 46, 58, 0.85), rgba(29, 32, 41, 0.88));
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 16px; padding: 24px 26px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 26px -20px rgba(0, 0, 0, 0.8);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.feature::before {
	content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
	background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
}
@media (hover: hover) {
	.feature:hover {
		transform: translateY(-2px);
		border-color: rgba(255, 230, 128, 0.26);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px -20px rgba(0, 0, 0, 0.9);
	}
	.fan .f1:hover { animation: fan-hop 0.45s ease-in-out; }
	.fan .f2:hover { animation: fan-peek 0.7s ease-in-out; }
	.fan .f3:hover { animation: fan-spin 0.6s ease-in-out; }
	.fan .f4:hover { animation: fan-riffle 0.5s ease-in-out; }
	.fan .f5:hover { animation: fan-tilt 0.55s ease-in-out; }
	.fan .b1:hover { animation: fan-wiggle 0.8s ease-in-out; }
	.fan .b2:hover { animation: fan-breathe 0.9s ease-in-out; }
	.fan .b3:hover { animation: fan-taptap 0.6s ease-in-out; }
	.fan .b4:hover { animation: fan-hop 0.45s ease-in-out 0.08s; }
}
.feature-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.feature-head h2 { font-family: 'Sora', sans-serif; font-size: 1.15rem; color: var(--text); }

/* Icon domes — the game's icon-dome look, per-suit tints. */
.dome {
	width: 46px; height: 46px; border-radius: 50%; flex: none;
	display: grid; place-items: center; font-size: 1.35rem; line-height: 1;
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, 0.28),
		inset 0 -3px 5px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 215, 0, 0.22),
		0 4px 10px -4px rgba(0, 0, 0, 0.6);
}
.dome-navy { background: radial-gradient(circle at 32% 26%, #55628a 0%, #39415e 55%, #232a45 100%); color: #e8ecff; }
.dome-red { background: radial-gradient(circle at 32% 26%, #a04a56 0%, #7d2e38 55%, #521d26 100%); color: #ffd9d9; }

/* ── "See it in play" screenshot band ── */
.showcase { max-width: 960px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) 0 clamp(8px, 2vw, 16px); }
.showcase h2 {
	font-family: 'Sora', sans-serif; color: var(--text); text-align: center;
	font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: clamp(18px, 3vw, 28px);
}
.shots {
	display: flex; gap: clamp(14px, 2.5vw, 24px);
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 8px clamp(16px, 4vw, 24px) 16px;
	scrollbar-width: thin; scrollbar-color: var(--surface-high) transparent;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.shot { flex: none; scroll-snap-align: center; margin: 0; width: min(68vw, 240px); }
.phone {
	background: #101218; border-radius: 28px; padding: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 14px 34px -18px rgba(0, 0, 0, 0.85);
}
.phone img { width: 100%; height: auto; display: block; border-radius: 19px; }
.shot figcaption { text-align: center; font-size: 0.85rem; color: var(--muted); margin-top: 10px; }

/* ── Closer ── */
.closer { text-align: center; padding: clamp(36px, 7vw, 56px) 24px clamp(56px, 9vw, 80px); }
.closer h2 { font-family: 'Sora', sans-serif; color: var(--text); font-size: clamp(1.5rem, 3vw, 1.8rem); margin-bottom: 24px; }

/* ── Footer ── */
.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	max-width: 960px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 24px) 56px;
	font-size: 0.85rem; color: var(--muted); text-align: center;
}
.site-footer nav { display: flex; gap: 16px 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.site-footer nav a { padding: 11px 4px; }
.site-footer p { margin-top: 6px; }

/* ── 404 ── */
.notfound { max-width: 640px; margin: 0 auto; padding: clamp(40px, 9vw, 88px) 24px 72px; text-align: center; }
.mini-fan { position: relative; height: 168px; margin-bottom: 24px; }
.mini-fan .pcard { --w: 96px; width: var(--w); height: calc(var(--w) * 1.41); top: 6px; transform-origin: 50% 115%; }
.mini-fan .m1 { transform: translateX(-50%) rotate(-16deg); }
.mini-fan .m2 { transform: translateX(-50%) rotate(0deg); }
.mini-fan .m3 { transform: translateX(-50%) rotate(16deg); }
.notfound h1 {
	font-family: 'Sora', sans-serif; font-weight: 700; color: var(--text);
	font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.02em; margin-bottom: 10px;
}
.notfound .sub { margin: 0 auto 30px; max-width: 420px; }
.notfound .cta-caption a { color: var(--muted); text-decoration: underline; }

/* ── Responsive + a11y ── */
@media (max-width: 719px) {
	.features { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
	.fan .b1, .fan .b4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
	.btn:hover, .btn-cta:hover, .store-badge:hover, .feature:hover { transform: none; }
	.fan .pcard { animation: none !important; }
}