/* ==========================================================
   AnnaSwipe Direct Play — main stylesheet
   Palette: near-black base, emerald-green "felt" accent, gold accent
   ========================================================== */

:root{
	--bg:            #06090e;
	--bg-raised:     #0d131c;
	--bg-card:       #121a26;
	--border:        rgba(255,255,255,0.08);
	--border-strong: rgba(255,255,255,0.14);

	--gold:          #f2b53d;
	--gold-2:        #ffd873;
	--emerald:       #14b874;
	--emerald-dark:  #0c7a4d;
	--ruby:          #e2445c;

	--text:          #f4f6f9;
	--text-dim:      #aab3c2;
	--text-faint:    #6b7686;

	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;

	--font-display: "Sora", "Manrope", system-ui, sans-serif;
	--font-body: "Manrope", system-ui, sans-serif;

	--shadow-gold: 0 0 0 1px rgba(242,181,61,0.35), 0 8px 24px rgba(242,181,61,0.18);
	--shadow-card: 0 12px 32px rgba(0,0,0,0.45);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background: radial-gradient(120% 100% at 50% -10%, #101a26 0%, var(--bg) 55%) fixed;
	color: var(--text);
	font-family: var(--font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; }
p{ margin:0 0 1em; color:var(--text-dim); }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
	*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:13px 26px; border-radius:999px; font-weight:700; font-size:15px;
	border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
	white-space:nowrap;
}
.btn--cta{
	background:linear-gradient(135deg, var(--gold-2), var(--gold));
	color:#1a1206;
	box-shadow:var(--shadow-gold);
}
.btn--cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(242,181,61,0.32); }
.btn--ghost{
	background:rgba(255,255,255,0.04);
	color:var(--text);
	border-color:var(--border-strong);
}
.btn--ghost:hover{ background:rgba(255,255,255,0.09); }
.btn--lg{ padding:16px 32px; font-size:16px; }
.btn--sm{ padding:9px 16px; font-size:13px; }

/* ---------- Win ticker ---------- */
.win-ticker{
	background:#000;
	border-bottom:1px solid var(--border);
	overflow:hidden;
	white-space:nowrap;
	padding:8px 0;
}
.win-ticker__track{
	display:inline-flex;
	animation: ticker-scroll 38s linear infinite;
}
.win-ticker__item{
	color:var(--emerald);
	font-size:13px;
	font-weight:600;
	padding:0 32px;
	border-right:1px solid var(--border);
}
@keyframes ticker-scroll{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}

/* ---------- Header ---------- */
.site-header{
	position:sticky; top:0; z-index:50;
	background:rgba(6,9,14,0.85);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
}
.site-header__inner{
	display:flex; align-items:center; gap:28px;
	height:76px;
}
.site-logo{
	font-family:var(--font-display); font-weight:800; font-size:20px;
	display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.site-logo__suit{ color:var(--gold); }
.primary-nav{ flex:1; }
#primary-menu{ display:flex; gap:26px; align-items:center; }
#primary-menu a{
	font-size:14px; font-weight:600; color:var(--text-dim);
	display:flex; align-items:center; gap:6px;
	transition:color .15s ease;
}
#primary-menu a:hover{ color:var(--text); }
.hot-tag{
	background:var(--ruby); color:#fff; font-size:10px; font-weight:800;
	padding:2px 6px; border-radius:999px; letter-spacing:.03em;
}
.header-cta{ flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:none; padding:8px; flex-direction:column; gap:5px; }
.nav-toggle span{ width:22px; height:2px; background:var(--text); display:block; }

/* ---------- Hero ---------- */
.hero{
	position:relative;
	padding:72px 0 88px;
	overflow:hidden;
	text-align:center;
}
.hero__bg{
	position:absolute; inset:0; z-index:0; pointer-events:none;
	opacity:.55;
}
.hero__decor{ width:100%; height:100%; object-fit:cover; }
.hero__inner{ position:relative; z-index:1; max-width:820px; }
.eyebrow-suits{ color:var(--gold); letter-spacing:.3em; font-size:14px; margin-bottom:14px; }
.hero__kicker{
	display:inline-flex; gap:6px; align-items:center;
	background:rgba(20,184,116,0.12); border:1px solid rgba(20,184,116,0.35);
	color:var(--emerald); border-radius:999px; padding:6px 16px; font-size:13px;
	margin-bottom:20px;
}
.hero__title{ font-size:clamp(32px,5vw,52px); font-weight:800; letter-spacing:-0.01em; }
.hero__desc{ font-size:17px; max-width:640px; margin:0 auto 32px; }
.hero__desc strong{ color:var(--gold-2); }

.jackpot-card{
	background:linear-gradient(180deg, rgba(20,184,116,0.10), rgba(18,26,38,0.6));
	border:1px solid rgba(20,184,116,0.35);
	border-radius:var(--radius-lg);
	padding:28px; margin:0 auto 32px; max-width:520px;
}
.jackpot-card__label{ color:var(--emerald); font-weight:700; font-size:13px; letter-spacing:.04em; margin-bottom:8px; }
.jackpot-card__amount{
	font-family:var(--font-display); font-weight:800;
	font-size:clamp(30px,5vw,44px); color:var(--gold-2);
	margin:0 0 8px; font-variant-numeric:tabular-nums;
}
.jackpot-card__note{ font-size:12px; color:var(--text-faint); margin:0; }

.hero__cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.hero__pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.hero__pills li{
	font-size:13px; font-weight:600; color:var(--text-dim);
	background:var(--bg-card); border:1px solid var(--border);
	padding:8px 14px; border-radius:999px;
}

/* ---------- Section shells ---------- */
.section{ padding:88px 0; }
.eyebrow{ color:var(--gold); font-weight:700; font-size:13px; letter-spacing:.06em; margin-bottom:10px; }
.section-title{ font-size:clamp(26px,3.4vw,38px); max-width:680px; }
.section-desc{ max-width:600px; font-size:15.5px; }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.section-cta{ text-align:center; margin-top:40px; }
.link-arrow{ color:var(--gold-2); font-weight:700; font-size:14px; white-space:nowrap; }
.link-arrow:hover{ text-decoration:underline; }

/* ---------- Features ---------- */
.features-grid{
	display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;
}
.feature-card{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
	padding:28px 22px; transition:border-color .15s ease, transform .15s ease;
}
.feature-card:hover{ border-color:rgba(242,181,61,0.4); transform:translateY(-3px); }
.feature-card__icon{ font-size:28px; display:block; margin-bottom:14px; }
.feature-card h3{ font-size:17px; margin-bottom:8px; }
.feature-card p{ font-size:14px; margin:0; }

/* ---------- Wheel section ---------- */
.wheel-section{
	background:var(--bg-raised);
	border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.wheel-section__inner{
	display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.wheel-hint{ color:var(--gold-2); font-weight:700; font-size:14px; }
.wheel-wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.wheel{ position:relative; width:280px; height:280px; }
.wheel__face{
	width:100%; height:100%; border-radius:50%;
	filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5));
	transition:transform 3.5s cubic-bezier(.17,.67,.14,1);
}
.wheel__face.is-spinning{ transform:rotate(1800deg); }
.wheel__button{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:76px; height:76px; border-radius:50%; border:3px solid var(--gold-2);
	background:radial-gradient(circle at 35% 30%, #1c2735, #06090e);
	color:var(--gold-2); font-weight:800; font-size:14px; letter-spacing:.04em;
}
.wheel__button:hover{ background:radial-gradient(circle at 35% 30%, #24303f, #0a0e15); }
.wheel__pointer{
	position:absolute; top:-14px; left:50%; transform:translateX(-50%);
	color:var(--gold-2); font-size:22px;
}
.wheel-result{
	text-align:center; background:var(--bg-card); border:1px solid rgba(20,184,116,0.4);
	border-radius:var(--radius-md); padding:24px 28px; max-width:340px;
}
.wheel-result__title{ color:var(--emerald); font-weight:800; font-size:18px; margin-bottom:6px; }
.wheel-result__desc{ font-size:14px; margin-bottom:16px; }

/* ---------- Games lobby ---------- */
.games-filter{ display:flex; gap:10px; flex-wrap:wrap; margin:36px 0 32px; }
.games-filter__btn{
	background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim);
	padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600;
	transition:all .15s ease;
}
.games-filter__btn:hover{ border-color:var(--border-strong); color:var(--text); }
.games-filter__btn.is-active{
	background:linear-gradient(135deg, var(--gold-2), var(--gold)); color:#1a1206; border-color:transparent;
}
.games-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.game-card{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
	overflow:hidden; transition:transform .15s ease, border-color .15s ease;
}
.game-card:hover{ transform:translateY(-4px); border-color:rgba(242,181,61,0.35); }
.game-card__media{ position:relative; aspect-ratio:4/3; background:#000; }
.game-card__media img{ width:100%; height:100%; object-fit:cover; }
.game-card__tags{ position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.tag{ font-size:10px; font-weight:800; padding:4px 8px; border-radius:6px; letter-spacing:.03em; }
.tag--badge{ background:rgba(6,9,14,0.75); color:var(--gold-2); border:1px solid rgba(242,181,61,0.4); }
.tag--direct{ background:var(--emerald); color:#06170f; }
.game-card__quicklook{
	position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
	background:rgba(6,9,14,0.75); border:1px solid var(--border-strong); color:var(--text);
}
.game-card__body{ padding:18px; }
.game-card__meta{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.game-card__body h3{ font-size:18px; margin-bottom:8px; }
.game-card__body p{ font-size:13.5px; margin-bottom:16px; }
.game-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.volatility{ font-size:12px; color:var(--text-faint); font-weight:600; }
.game-card[hidden]{ display:none; }

/* ---------- Daily rewards ---------- */
.daily-rewards{ background:var(--bg-raised); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.rewards-track{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-top:40px; }
.reward-day{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
	padding:20px 10px; text-align:center;
}
.reward-day--featured{
	background:linear-gradient(180deg, rgba(242,181,61,0.15), var(--bg-card));
	border-color:rgba(242,181,61,0.5);
}
.reward-day__label{ font-size:12px; color:var(--text-faint); font-weight:700; margin-bottom:10px; }
.reward-day__gc{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--gold-2); margin-bottom:2px; }
.reward-day__sc{ font-size:11px; color:var(--emerald); font-weight:700; margin:0; }

/* ---------- VIP ---------- */
.vip-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:44px; }
.vip-card{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
	padding:26px 18px; text-align:center; transition:transform .15s ease, border-color .15s ease;
}
.vip-card:hover{ transform:translateY(-3px); border-color:rgba(242,181,61,0.4); }
.vip-card__icon{ font-size:30px; display:block; margin-bottom:12px; }
.vip-card h3{ font-size:16px; margin-bottom:8px; }
.vip-card p{ font-size:12.5px; margin:0; }

/* ---------- Steps ---------- */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.step-card{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
	padding:28px 24px;
}
.step-card__num{ color:var(--gold); font-weight:800; font-size:13px; letter-spacing:.06em; margin-bottom:10px; }
.step-card h3{ font-size:18px; margin-bottom:8px; }
.step-card p{ font-size:14px; margin:0; }

/* ---------- Blog preview ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card{
	background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
	overflow:hidden; transition:transform .15s ease, border-color .15s ease;
}
.blog-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.blog-card__media{ display:block; aspect-ratio:16/10; overflow:hidden; }
.blog-card__media img{ width:100%; height:100%; object-fit:cover; }
.blog-card__body{ padding:20px; }
.blog-card__tag{ color:var(--gold-2); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.blog-card__body h3{ font-size:17px; margin-bottom:8px; }
.blog-card__body h3 a:hover{ color:var(--gold-2); }
.blog-card__body p{ font-size:13.5px; margin-bottom:12px; }
.blog-card__meta{ font-size:11.5px; color:var(--text-faint); margin:0; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:780px; margin:40px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.faq-item__q{
	width:100%; text-align:left; background:none; border:none; color:var(--text);
	font-weight:700; font-size:15px; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item__icon{ color:var(--gold-2); font-size:20px; font-weight:800; flex-shrink:0; transition:transform .15s ease; }
.faq-item.is-open .faq-item__icon{ transform:rotate(45deg); }
.faq-item__a{ padding:0 22px 20px; }
.faq-item__a p{ font-size:14px; margin:0; }

/* ---------- Final CTA ---------- */
.final-cta{ text-align:center; }
.final-cta__inner{ max-width:680px; margin:0 auto; }

/* ---------- Footer ---------- */
.site-footer{ background:#000; border-top:1px solid var(--border); padding:64px 0 28px; margin-bottom:60px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--border); }
.footer-brand p{ font-size:13.5px; margin:14px 0; }
.footer-brand strong{ color:var(--text); }
.footer-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-badges span{ font-size:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:999px; padding:6px 12px; }
.footer-col h4{ font-size:13px; color:var(--text); letter-spacing:.03em; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13.5px; color:var(--text-dim); }
.footer-col a:hover{ color:var(--gold-2); }
.footer-strip{ display:flex; flex-wrap:wrap; gap:10px 24px; padding:28px 0; font-size:12.5px; color:var(--text-faint); }
.footer-bottom{ font-size:12px; color:var(--text-faint); display:flex; flex-direction:column; gap:6px; }

/* ---------- Mobile tab bar (fixed bottom, mobile only) ---------- */
.mobile-tabbar{
	display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
	background:rgba(6,9,14,0.95); backdrop-filter:blur(10px);
	border-top:1px solid var(--border);
	padding:10px 6px calc(10px + env(safe-area-inset-bottom));
	align-items:center; justify-content:space-around;
}
.mobile-tabbar a{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--text-dim); }
.mobile-tabbar span{ font-size:10px; }
.mobile-tabbar__cta{
	background:linear-gradient(135deg, var(--gold-2), var(--gold)); color:#1a1206 !important;
	font-weight:800; padding:8px 14px; border-radius:999px; font-size:11px;
}

/* ---------- Simple page / blog templates ---------- */
.page-hero{ padding:64px 0 32px; text-align:center; }
.page-hero h1{ font-size:clamp(28px,4vw,42px); }
.entry-content{ max-width:760px; margin:0 auto; padding:0 24px 80px; }
.entry-content h2{ font-size:24px; margin-top:1.4em; }
.entry-content h3{ font-size:19px; margin-top:1.2em; }
.entry-content p, .entry-content li{ font-size:15.5px; }
.blog-archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-bottom:80px; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.features-grid{ grid-template-columns:repeat(2,1fr); }
	.games-grid{ grid-template-columns:repeat(2,1fr); }
	.vip-grid{ grid-template-columns:repeat(3,1fr); }
	.rewards-track{ grid-template-columns:repeat(4,1fr); }
	.footer-top{ grid-template-columns:1fr 1fr; }
	.blog-grid, .blog-archive-grid{ grid-template-columns:repeat(2,1fr); }
	.wheel-section__inner{ grid-template-columns:1fr; text-align:center; }
	.wheel-section__copy{ order:2; }
}
@media (max-width:760px){
	.primary-nav{ display:none; }
	.nav-toggle{ display:flex; }
	.header-cta{ display:none; }
	.mobile-tabbar{ display:flex; }
	.features-grid{ grid-template-columns:1fr; }
	.games-grid{ grid-template-columns:1fr; }
	.vip-grid{ grid-template-columns:repeat(2,1fr); }
	.rewards-track{ grid-template-columns:repeat(3,1fr); }
	.steps-grid{ grid-template-columns:1fr; }
	.footer-top{ grid-template-columns:1fr; }
	.blog-grid, .blog-archive-grid{ grid-template-columns:1fr; }
	.section{ padding:56px 0; }
	.hero{ padding:48px 0 56px; }
}

/* ---------- Mobile dropdown menu ---------- */
@media (max-width:760px){
	.primary-nav{
		display:block; position:absolute; top:76px; left:0; right:0;
		background:var(--bg-raised); border-bottom:1px solid var(--border);
		max-height:0; overflow:hidden; transition:max-height .25s ease;
	}
	#primary-menu.is-open{ display:flex; }
	.primary-nav:has(#primary-menu.is-open){ max-height:400px; }
	#primary-menu{ flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px; }
	#primary-menu li{ width:100%; border-bottom:1px solid var(--border); }
	#primary-menu a{ padding:14px 0; width:100%; }
}