/* site.css — landing page for solitaire-online.com */

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

:root {
  --felt-1: #0e5c3f;
  --felt-2: #052b1c;
  --gold: #d4af37;
  --ink: #f5f0e6;
  --panel: rgba(255, 255, 255, 0.06);
  --line: rgba(212, 175, 55, 0.25);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(212, 175, 55, 0.10), transparent 60%),
    radial-gradient(ellipse at 50% 20%, var(--felt-1), var(--felt-2) 75%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.6;
}

h2 { font-size: 2rem; text-align: center; margin-bottom: 8px; }
.section-sub { text-align: center; opacity: 0.7; margin-bottom: 36px; }

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 5vw;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 35, 23, 0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.3px;
}
.brand-logo { height: 40px; width: 40px; display: block; flex: none; margin-right: 10px; }
.brand-mark { color: var(--gold); }
.brand-accent { color: var(--gold); font-weight: inherit; }

.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; opacity: 0.85; font-size: 0.95rem; }
.site-nav a:hover { opacity: 1; color: var(--gold); }
.site-nav a.active { color: var(--gold); opacity: 1; }

.nav-cta {
  background: var(--gold);
  color: #2a2005;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 999px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35); }

/* ---------- hero ---------- */

.hero {
  text-align: center;
  padding: 60px 5vw 36px;
  overflow: hidden;
}

.hero-cards {
  display: flex;
  justify-content: center;
  height: 190px;
  margin-bottom: 26px;
  pointer-events: none;
}
.hero-card {
  width: 120px;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
  animation: float 5s ease-in-out infinite;
}
.hero-card svg { width: 100%; height: auto; border-radius: 9px; }
.hc0 { transform: rotate(-24deg) translate(34px, 22px); animation-delay: 0s; }
.hc1 { transform: rotate(-12deg) translate(18px, 6px); animation-delay: 0.4s; }
.hc2 { transform: rotate(0deg); animation-delay: 0.8s; }
.hc3 { transform: rotate(12deg) translate(-18px, 6px); animation-delay: 1.2s; }
.hc4 { transform: rotate(24deg) translate(-34px, 22px); animation-delay: 1.6s; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.hero-sub {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 1.1rem;
  opacity: 0.85;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn-primary {
  background: var(--gold);
  color: #2a2005;
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 14px 34px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(212, 175, 55, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212, 175, 55, 0.45); }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  padding: 14px 30px;
  border-radius: 999px;
  transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

.hero-perks {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
  font-size: 0.9rem;
  opacity: 0.75;
}
/* Suit pip instead of a tick, to echo the wordmark's spade. Decorative only,
   so it is hidden from screen readers rather than read out as "black spade". */
.perk-suit {
  color: var(--gold);
  margin-right: 4px;
  font-size: 1.15em;
  line-height: 1;
}

/* ---------- games grid ---------- */

.games { padding: 36px 5vw 30px; max-width: 1150px; margin: 0 auto; }

/* The site header is sticky, so an anchor jump ("Browse all games", the nav
   links) drops the target heading underneath it. The header runs 71px to 102px
   tall depending on where the nav wraps, so this clears the tallest case. */
section[id] { scroll-margin-top: 96px; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.game-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
.game-card.live { border-color: var(--line); }
.game-card.live:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}
.game-card.soon { opacity: 0.62; cursor: default; }

.game-icon { width: 62px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)); }
.game-icon svg { width: 100%; height: auto; border-radius: 5px; }

.game-info h3 { font-size: 1.15rem; margin-bottom: 3px; }
.game-info p { font-size: 0.86rem; opacity: 0.8; margin-bottom: 8px; line-height: 1.45; }

.badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0.85;
}
.badge.play { background: var(--gold); color: #2a2005; border-color: var(--gold); font-weight: 700; }

/* ---------- features ---------- */

.features { padding: 60px 5vw; max-width: 1150px; margin: 0 auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.feature {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
}
.feature-icon { font-size: 2rem; margin-bottom: 10px; }
.feature h3 { margin-bottom: 6px; font-size: 1.05rem; }
.feature p { font-size: 0.88rem; opacity: 0.8; }

/* ---------- about / SEO ---------- */

.about { padding: 50px 5vw; max-width: 900px; margin: 0 auto; }
.about h2 { margin-bottom: 24px; }
.about h3 { color: var(--gold); font-size: 1.05rem; margin: 18px 0 6px; }
.about p { opacity: 0.88; font-size: 0.97rem; margin-bottom: 12px; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { .about-cols { grid-template-columns: 1fr; gap: 0; } }

/* ---------- footer ---------- */

.site-footer {
  text-align: center;
  padding: 44px 5vw 34px;
  border-top: 1px solid var(--line);
  margin-top: 30px;
  opacity: 0.8;
}
.footer-brand { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.site-footer p { font-size: 0.88rem; }
.copyright { margin-top: 14px; opacity: 0.6; }

/* footer link columns */
.footer-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 26px;
  max-width: 800px;
  margin: 0 auto 36px;
  text-align: left;
}
.footer-col h4 {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 10px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 6px; }
.footer-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.86rem;
  opacity: 0.78;
}
.footer-col a:hover { opacity: 1; color: var(--gold); text-decoration: underline; }

@media (max-width: 640px) {
  .site-nav { display: none; }
  .hero { padding-top: 36px; }
  .hero-cards { height: 150px; }
  .hero-card { width: 92px; }
}

/* ---------- footer share row ---------- */
/* Plain links to each network's share endpoint, no widget scripts. Felt
   colours are hard-coded rather than read from --gold: the blog defines its
   own lighter --gold for article text, but this row always sits on dark felt. */
.footer-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 26px auto 4px;
}
.share-label {
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.65;
}
.share-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #f5f0e6;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.28);
  text-decoration: none;
  transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s;
}
.share-btn:hover, .share-btn:focus-visible {
  color: #0e5c3f;
  background: #d4af37;
  border-color: #d4af37;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .share-btn { transition: none; }
  .share-btn:hover, .share-btn:focus-visible { transform: none; }
}

/* ---------- footer trust badges (Product Hunt, SaaSHub) ---------- */
.footer-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px auto 4px;
}
.footer-badges img {
  display: block;
  height: 54px;
  width: auto;
  border-radius: 4px;
}