/* faith-site — MOBILE FIRST. Base rules are the phone layout (≤768 px); `@media (min-width: 769px)` layers the
   desktop on top. Same palette, fonts, dividers and buttons as landingv2 (lordsforsaken.com). */
html, body { max-width: 100%; overflow-x: hidden; }

:root {
  --mainHero: url("https://app.lordsforsaken.com/cdn/landing/background/hero.webp");
  --mobileHero: url("https://app.lordsforsaken.com/cdn/landing/background/hero-mobile.webp");
  --divider: url("https://app.lordsforsaken.com/cdn/landing/divider2.webp");
  --button: url("https://app.lordsforsaken.com/cdn/landing/button.webp");
  --about-cards: url("https://app.lordsforsaken.com/cdn/landing/background/about-cards.webp");
  --foils: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,1)), url("https://app.lordsforsaken.com/cdn/landing/background/foils.webp");
  --p2e: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,1)), url("https://app.lordsforsaken.com/cdn/landing/background/p2e.webp");
  --join: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url("https://app.lordsforsaken.com/cdn/landing/background/join.webp");
  --shade: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.55) 45%, rgba(0,0,0,.95));
  --gold: #EAC88C;
  --grey: #777E90;
}

body { background-color: black; font-family: 'Poppins', sans-serif; color: var(--grey) !important; padding-bottom: 64px; /* sticky CTA bar */ }
p { font-family: 'Poppins', sans-serif; color: #FFFFFF; }
h1, h2, h3, h4, h5, h6 { font-family: 'Germania One', serif; color: var(--gold) !important; }
h2 { font-size: 34px; margin-bottom: 8px; }
h5 { font-size: 22px; }
section { background-color: black; }

/* nav: compact, the primary CTA is visible without opening the menu */
.navbar { padding: 6px 0; background-color: rgba(0,0,0,.6);
  --bs-navbar-toggler-border-color: white !important;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-brand img { width: 72px; }
.navbar-toggler { padding: 4px 8px; font-size: 1rem; }
.nav-cta { margin-left: auto; margin-right: 10px; padding: 6px 14px; border: 2px solid white; border-radius: 20px; color: white !important; text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav-link { color: var(--grey) !important; font-family: 'Poppins', sans-serif; padding: .5rem 0; }
.nav-link img { filter: grayscale(1%) saturate(1%) contrast(1%); }
.navbar-collapse .navbar-nav:last-child { flex-direction: row; gap: 18px; padding: 6px 0 10px; }

/* buttons — as landing; full width on phones, capped */
.image-button { display: block; width: 100%; max-width: 320px; height: 58px; margin: 0 auto; padding: 0;
  font-family: 'Germania One', serif; font-size: 22px; line-height: 56px; text-align: center; color: var(--gold) !important;
  background-image: var(--button); background-size: 100% 100%; background-repeat: no-repeat; background-color: transparent; border: none;
  cursor: pointer; transition: opacity .3s ease; }
.image-button a { color: inherit !important; text-decoration: none !important; }
.image-button:hover { opacity: .8; }
.cta-row { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.divider { background-image: var(--divider); background-repeat: no-repeat; background-size: cover; background-position: center top; width: 100vw; height: 6px; }

/* hero: darkened art (landing's gradient idiom), copy on a panel, natural height so the countdown + CTA sit above the fold */
.hero { background-image: var(--shade), var(--mobileHero); background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 20px 12px 24px; }
.hero-panel { width: 100%; max-width: 760px; padding: 18px 14px 18px; border-radius: 16px;
  background: rgba(0,0,0,.62); border: 1px solid rgba(234,200,140,.28); backdrop-filter: blur(3px); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.faith-disc { width: 104px; height: 104px; margin: 0 auto 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(0,0,0,.95) 0%, rgba(0,0,0,.85) 55%, rgba(0,0,0,0) 72%); }
.faith-icon { width: 84px; height: auto; filter: drop-shadow(0 0 14px rgba(234,200,140,.9)) drop-shadow(0 0 2px #000); }
.display-title { font-size: 40px; line-height: 1.05; margin: 0; text-shadow: 0 2px 4px #000, 0 0 24px rgba(0,0,0,.95); }
.lead-line { color: #fff; font-size: 14px; line-height: 1.4; margin: 8px 0 14px; text-shadow: 0 1px 3px #000; }
.countdown { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
.cd-box { flex: 1 1 0; max-width: 96px; padding: 8px 4px; border: 1px solid rgba(234,200,140,.45); border-radius: 8px; background: rgba(0,0,0,.55); }
.cd-box span { display: block; font-family: 'Germania One', serif; font-size: 30px; line-height: 1; color: var(--gold); }
.cd-box small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-top: 3px; }
.cd-target { color: var(--grey); font-size: 12px; margin-bottom: 12px; }
.cd-note { color: var(--gold); font-size: 13px; max-width: 520px; margin: 0 auto 10px; }
.tbd { display: inline-block; padding: 0 6px; border: 1px dashed var(--grey); border-radius: 4px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); vertical-align: middle; }

/* live stats: 2×2 */
.stats { padding: 18px 12px 12px; }
.stats-label { color: var(--grey); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.stat { padding: 6px 0; }
.stat span { display: block; font-family: 'Germania One', serif; font-size: 32px; line-height: 1; color: var(--gold); }
.stat small { display: block; color: var(--grey); font-size: 11px; margin-top: 3px; }
.stats-error { color: #C34D85; font-size: 13px; margin-top: 8px; }

/* sections */
.block { padding: 28px 12px; }
.section-lead { color: var(--grey); font-size: 14px; max-width: 720px; margin: 0 auto 16px; }
.p2e { background-image: var(--p2e); background-size: cover; background-position: center top; background-repeat: no-repeat; }
.about-cards { background-image: var(--shade), var(--about-cards); background-size: cover; background-position: center top; background-repeat: no-repeat; }
.foils { background-image: var(--foils); background-size: cover; background-position: center top; background-repeat: no-repeat; }
.join { background-image: var(--join); background-size: cover; background-position: center top; background-repeat: no-repeat; min-height: 40vh; padding: 36px 12px; }
.join h2 { font-size: 30px !important; margin-bottom: 18px; }

/* what FAITH does: swipeable cards on phones, 3-up on desktop */
.features { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 8px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.features::-webkit-scrollbar { display: none; }
.feature { flex: 0 0 78vw; max-width: 340px; scroll-snap-align: center; padding: 18px 16px; border: 1px solid rgba(234,200,140,.25); border-radius: 12px; background: rgba(0,0,0,.7); text-align: center; }
.feature-icon { width: 48px; height: 48px; object-fit: contain; margin-bottom: 8px; }
.feature p { color: var(--grey); font-size: 14px; margin-bottom: 10px; }
.swipe-hint { color: var(--grey); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 4px 0 0; }
.badge-live, .badge-soon, .badge-tbd { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
.badge-live { color: #000; background: var(--gold); }
.badge-soon { color: var(--gold); border: 1px solid var(--gold); }
.badge-tbd { color: var(--grey); border: 1px dashed var(--grey); }

/* snapshot */
.criteria { list-style: none; padding: 0; margin: 0 0 16px; }
.criteria li { color: var(--grey); font-size: 14px; padding: 7px 0; border-bottom: 1px solid rgba(119,126,144,.25); }
.criteria strong { color: #fff; }
.leaderboard { border: 1px solid rgba(234,200,140,.3); border-radius: 12px; background: rgba(0,0,0,.7); overflow: hidden; margin-top: 8px; }
.lb-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-family: 'Germania One', serif; color: var(--gold); font-size: 18px; }
.lb-head small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.leaderboard .table { --bs-table-bg: transparent; --bs-table-color: #fff; --bs-table-border-color: rgba(119,126,144,.25); font-size: 13px; }
.leaderboard th { color: var(--grey); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.leaderboard tbody tr:nth-child(n+6) { display: none; }   /* phones: top 5 */

/* packs: art and card side by side on phones */
.pack-art { max-height: 200px; width: auto; }
.card-carousel { position: relative; height: 210px; }
.card-carousel img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 210px; width: auto; opacity: 0; transition: opacity .8s ease; }
.card-carousel img.on { opacity: 1; }
.pack-copy { color: var(--grey); font-size: 14px; margin-bottom: 8px; }
.common { color: #9D958C; } .rare { color: #7F6AC1; } .epic { color: #C34D85; } .legendary { color: #D17923; }
.civs { justify-content: center; margin-top: 6px; }
.civ-icon { width: 44px; height: 44px; background-repeat: no-repeat; background-position: center, center; }
.egypt-icon  { background-image: url('https://app.lordsforsaken.com/cdn/logos-icons/civs-icons/gray/egypt.png'),  url('https://app.lordsforsaken.com/cdn/landing/icon.webp'); background-size: 30% auto, contain; }
.greece-icon { background-image: url('https://app.lordsforsaken.com/cdn/logos-icons/civs-icons/gray/greece.png'), url('https://app.lordsforsaken.com/cdn/landing/icon.webp'); background-size: auto 70%, contain; }
.norse-icon  { background-image: url('https://app.lordsforsaken.com/cdn/logos-icons/civs-icons/gray/norse.png'),  url('https://app.lordsforsaken.com/cdn/landing/icon.webp'); background-size: 50% auto, contain; }

/* roadmap 2×2 */
.roadmap .rm { height: 100%; padding: 12px 10px; border: 1px solid rgba(119,126,144,.3); border-radius: 12px; }
.roadmap .rm.done { border-color: rgba(234,200,140,.5); }
.roadmap h6 { font-size: 17px; margin-bottom: 4px; }
.rm-mark { display: inline-block; width: 26px; height: 26px; line-height: 24px; border-radius: 50%; border: 1px solid var(--grey); color: var(--grey); margin-bottom: 6px; font-size: 14px; }
.rm.done .rm-mark { border-color: var(--gold); color: #000; background: var(--gold); }
.roadmap p { color: var(--grey); font-size: 12px; margin: 0; }

/* footer */
.footer { padding: 24px 12px 20px; font-family: 'Poppins', sans-serif; color: white; }
.footer img { max-width: 96px; }
.footer .socials img { width: 36px; height: 36px; margin: 8px 2px; }
.footer .socials img:hover { cursor: pointer; opacity: .8; }
.disclaimer { color: var(--grey); font-size: 12px; margin-top: 10px; }
.copy { color: var(--grey); font-size: 11px; }

/* sticky CTA bar (phones only) */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.92); border-top: 1px solid rgba(234,200,140,.35); }
.sticky-play { flex: 1 1 auto; text-align: center; padding: 10px 12px; border-radius: 8px; background: var(--gold); color: #000 !important; font-family: 'Germania One', serif; font-size: 18px; text-decoration: none; }
.sticky-notify { flex: 0 0 auto; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--grey); background: transparent; color: #fff; font-size: 14px; }

.modal-content { background: #0b0b0b; border: 1px solid rgba(234,200,140,.4); color: #fff; }
.modal-header { border-bottom-color: rgba(119,126,144,.3); }
.modal-body p { color: var(--grey); }

/* ---------- desktop layer ---------- */
@media (min-width: 769px) {
  body { padding-bottom: 0; }
  h1 { font-size: 64px !important; }
  h2 { font-size: 56px !important; }
  h5 { font-size: 2rem !important; }
  h6 { font-size: 1.4rem !important; }
  .navbar { padding: 0; background-color: transparent; }
  .navbar-brand img { width: 100px; }
  .navbar-brand { margin-left: 150px; }
  .nav-cta { order: 3; margin: 0 150px 0 16px; padding: 10px 22px; border-radius: 25px; font-size: 16px; }
  .navbar-brand, .navbar-nav .nav-link { padding-top: 2rem; padding-bottom: 2rem; padding-right: 1rem; }
  .nav-item { padding-left: 1.5rem; }
  .navbar-collapse .navbar-nav:last-child { gap: 0; padding: 0; }
  .divider { height: 1vh; }
  .image-button { width: 320px; height: 65px; font-size: 28px; line-height: 50px; margin: 0; }
  .cta-row { flex-direction: row; justify-content: center; gap: 16px; }
  .hero { background-image: var(--shade), var(--mainHero); min-height: 100vh; padding: 80px 160px; display: flex; }
  .hero-panel { padding: 40px 48px 36px; }
  .faith-disc { width: 180px; height: 180px; }
  .faith-icon { width: 144px; }
  .display-title { font-size: 84px; }
  .lead-line { font-size: 20px; margin: 10px 0 22px; }
  .cd-box { max-width: 110px; padding: 14px 10px; }
  .cd-box span { font-size: 52px; }
  .cd-box small { font-size: 11px; }
  .cd-target { font-size: 13px; }
  .stats { padding: 28px 12px 18px; }
  .stat span { font-size: 40px; }
  .block { padding: 60px 160px; }
  .section-lead { font-size: 16px; margin-bottom: 28px; }
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow: visible; padding: 0; margin: 0; }
  .feature { flex: none; max-width: none; padding: 24px 18px; }
  .feature-icon { width: 56px; height: 56px; }
  .feature p { font-size: 15px; }
  .criteria li { font-size: 15px; }
  .leaderboard tbody tr:nth-child(n+6) { display: table-row; }
  .leaderboard .table { font-size: 14px; }
  .lb-head { font-size: 20px; padding: 10px 14px; }
  .pack-art { max-height: 260px; }
  .card-carousel, .card-carousel img { height: 380px; }
  .pack-copy { font-size: 15px; }
  .civs { justify-content: flex-start; }
  .civ-icon { width: 50px; height: 50px; }
  .roadmap .rm { padding: 18px 12px; }
  .roadmap p { font-size: 13px; }
  .join { min-height: 60vh; padding: 40px 16px; }
  .join h2 { font-size: 56px !important; }
  .footer { padding: 40px 16px 70px; }
  .footer img { max-width: 120px; }
  .footer .socials img { width: 40px; height: 40px; margin: 12px 4px; }
}