/* ==========================================================
   Pitch of Destiny — global stylesheet
   Design system: "Midnight Almanac"
   ========================================================== */

:root{
  /* base */
  --ink:        #080b1c;
  --deep:       #101736;
  --veil:       #1b2350;
  --veil-soft:  #232c60;
  --line:       rgba(217,169,76,.28);
  --line-soft:  rgba(163,177,222,.18);

  /* accents */
  --gold:       #d9a94c;
  --gold-lt:    #f0d18c;
  --gold-deep:  #9a7326;
  --opal:       #8fd6d2;
  --plum:       #8a63b0;
  --rose:       #d98fa6;

  /* text */
  --parchment:  #f3ede0;
  --muted:      #a3b1de;
  --muted-dim:  #7b88b4;

  /* type */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* metrics */
  --rail: clamp(18px, 5vw, 56px);
  --wide: 1180px;
  --narrow: 720px;
  --r-card: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background-color:var(--ink);
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(138,99,176,.26), transparent 62%),
    radial-gradient(900px 540px at 6% 4%, rgba(143,214,210,.11), transparent 58%),
    radial-gradient(1400px 900px at 50% 115%, rgba(217,169,76,.10), transparent 60%);
  background-attachment:fixed;
  color:var(--parchment);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  letter-spacing:.005em;
}

img{ max-width:100%; display:block; }

a{ color:var(--gold-lt); text-decoration:none; }
a:hover{ color:var(--parchment); }

:focus-visible{
  outline:2px solid var(--opal);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.01em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.5rem,6.4vw,4.4rem); }
h2{ font-size:clamp(1.9rem,4vw,2.9rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.65rem); }
p{ margin:0 0 1.15em; }

.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--rail); }
.wrap--narrow{ max-width:var(--narrow); }

.eyebrow{
  font-family:var(--body);
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.1em;
}

.lede{ font-size:1.16rem; color:#ded7c6; }
.dim{ color:var(--muted); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- signature device: constellation rule ---------- */
.constellation{
  display:flex; align-items:center; gap:14px;
  margin:0; padding:0; border:0;
  color:var(--gold);
}
.constellation::before,
.constellation::after{
  content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.constellation span{
  flex:0 0 auto; display:flex; gap:9px; align-items:center;
}
.constellation i{
  width:5px; height:5px; border-radius:50%;
  background:var(--gold); opacity:.9; display:block;
}
.constellation i:nth-child(2){ width:8px; height:8px; opacity:1; box-shadow:0 0 12px rgba(240,209,140,.7); }
.constellation i:nth-child(3){ opacity:.55; }

/* ---------- signature device: foil-corner tarot frame ---------- */
.tarot{
  position:relative;
  background:linear-gradient(170deg, rgba(27,35,80,.86), rgba(12,17,42,.92));
  border:1px solid var(--line-soft);
  border-radius:var(--r-card);
  padding:30px 28px;
}
.tarot::before,
.tarot::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border:1px solid var(--gold); opacity:.65;
}
.tarot::before{ top:8px; left:8px; border-right:0; border-bottom:0; }
.tarot::after{ bottom:8px; right:8px; border-left:0; border-top:0; }

/* ---------- header ---------- */
.masthead{
  position:sticky; top:0; z-index:40;
  background:rgba(8,11,28,.9);
  backdrop-filter:blur(11px);
  border-bottom:1px solid var(--line-soft);
}
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:74px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__sigil{
  width:34px; height:34px; flex:0 0 34px;
  border:1px solid var(--gold); border-radius:50%;
  display:grid; place-items:center;
  color:var(--gold-lt); font-family:var(--display); font-size:1rem;
  box-shadow:inset 0 0 14px rgba(217,169,76,.24);
}
.brand__name{
  font-family:var(--display); font-size:1.32rem; letter-spacing:.04em;
  color:var(--parchment); line-height:1.1;
}
.brand__name small{
  display:block; font-family:var(--body); font-size:.56rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-top:2px;
}

.nav__list{
  list-style:none; display:flex; gap:26px; margin:0; padding:0;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
}
.nav__list a{ color:var(--muted); padding-block:6px; }
.nav__list a:hover,
.nav__list a[aria-current="page"]{ color:var(--gold-lt); }
.nav__list a[aria-current="page"]{ border-bottom:1px solid var(--gold); }

.nav-toggle{
  display:none; background:transparent; color:var(--parchment);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--body); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; padding:9px 14px; cursor:pointer;
}
.nav-toggle:hover{ border-color:var(--gold); color:var(--gold-lt); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--ink);
    border-bottom:1px solid var(--line-soft);
    padding:10px var(--rail) 22px;
    display:none;
  }
  .nav[data-open="true"]{ display:block; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list li + li{ border-top:1px solid var(--line-soft); }
  .nav__list a{ display:block; padding:14px 0; }
  .nav__list a[aria-current="page"]{ border-bottom:0; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,88px); overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.hero__wheel{
  position:absolute; top:-180px; right:-220px;
  width:min(760px,90vw); aspect-ratio:1; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(217,169,76,.05) 0deg 9deg, transparent 9deg 18deg);
  mask-image:radial-gradient(circle, transparent 20%, #000 40%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle, transparent 20%, #000 40%, transparent 70%);
  pointer-events:none;
}
.hero__grid{
  position:relative; display:grid; gap:clamp(34px,5vw,60px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } }

.hero h1 em{ font-style:italic; color:var(--gold-lt); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; padding:15px 28px;
  border-radius:2px; border:1px solid var(--gold);
  background:transparent; color:var(--gold-lt); cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.btn:hover{ background:rgba(217,169,76,.14); color:var(--parchment); }
.btn:active{ transform:translateY(1px); }
.btn--solid{
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  color:#1a1305; border-color:var(--gold-lt); font-weight:700;
}
.btn--solid:hover{ background:var(--gold-lt); color:#140f04; }
.btn--ghost{ border-color:var(--line-soft); color:var(--muted); }
.btn--ghost:hover{ border-color:var(--opal); color:var(--opal); background:transparent; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

.age-flag{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:999px;
  padding:7px 16px 7px 8px; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:22px;
}
.age-flag b{
  background:var(--gold); color:#170f02; border-radius:999px;
  padding:3px 10px; font-size:.7rem; letter-spacing:.08em;
}

/* ---------- sections ---------- */
.section{ padding:clamp(52px,7.5vw,92px) 0; }
.section--rule{ border-top:1px solid var(--line-soft); }
.section__head{ max-width:640px; margin-bottom:42px; }

.grid{ display:grid; gap:22px; }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .grid--3,.grid--2{ grid-template-columns:1fr; } }

/* ---------- game cards ---------- */
.card-deck{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  max-width:780px;
}
.gcard--flagship{ padding:38px 34px 32px; }
.gcard--flagship .gcard__sign{ font-size:2.8rem; }

.gcard{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(168deg, rgba(27,35,80,.9), rgba(11,15,38,.95));
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  padding:26px 24px 24px; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.gcard::before{
  content:""; position:absolute; inset:7px; border:1px solid rgba(217,169,76,.16);
  border-radius:2px; pointer-events:none;
}
.gcard:hover{ border-color:var(--line); transform:translateY(-3px); }
.gcard--flagship{
  border-color:var(--line);
  background:linear-gradient(168deg, rgba(44,34,74,.94), rgba(12,16,40,.96));
}
.gcard__sign{
  font-family:var(--display); font-size:2.1rem; color:var(--gold-lt);
  line-height:1; margin-bottom:16px;
}
.gcard h3{ margin-bottom:.35em; }
.gcard p{ color:var(--muted); font-size:.95rem; }
.gcard__meta{
  margin-top:auto; padding-top:18px; display:flex; gap:10px; align-items:center;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dim);
}
.tag{
  border:1px solid var(--line); color:var(--gold); border-radius:999px;
  padding:4px 12px; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
}
.tag--soon{ border-color:var(--line-soft); color:var(--muted-dim); }

/* ---------- trust strip ---------- */
.trust{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:rgba(9,13,34,.55);
  padding:clamp(34px,5vw,54px) 0;
}
.trust__grid{ display:grid; gap:26px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:860px){ .trust__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .trust__grid{ grid-template-columns:1fr; } }
.trust__item h4{
  font-family:var(--body); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .7em;
}
.trust__item p{ font-size:.9rem; color:var(--muted); margin:0; }

/* ---------- prose ---------- */
.prose{ max-width:var(--narrow); }
.prose h2{ margin-top:1.7em; }
.prose h3{ margin-top:1.5em; font-size:1.2rem; }
.prose ul{ padding-left:1.15em; margin:0 0 1.2em; color:var(--muted); }
.prose li{ margin-bottom:.5em; }
.prose strong{ color:var(--parchment); }

.page-head{
  padding:clamp(48px,7vw,84px) 0 clamp(26px,4vw,40px);
  border-bottom:1px solid var(--line-soft);
}

.faq{ border-top:1px solid var(--line-soft); }
.faq__item{ border-bottom:1px solid var(--line-soft); padding:26px 0; }
.faq__item h3{ margin-bottom:.4em; }
.faq__item p{ color:var(--muted); margin:0; }

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line-soft);
  background:rgba(6,8,22,.75);
  padding:clamp(44px,6vw,68px) 0 34px;
  margin-top:clamp(40px,6vw,70px);
}
.foot__top{
  display:grid; gap:34px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:820px){ .foot__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .foot__top{ grid-template-columns:1fr; } }
.foot h4{
  font-family:var(--body); font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1.1em;
}
.foot p{ color:var(--muted); font-size:.93rem; }
.foot__links{ list-style:none; margin:0; padding:0; }
.foot__links li{ margin-bottom:.65em; }
.foot__links a{ color:var(--muted); font-size:.93rem; }
.foot__links a:hover{ color:var(--gold-lt); }
.foot__legal{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between;
  font-size:.82rem; color:var(--muted-dim);
}
.foot__legal p{ margin:0; font-size:.82rem; color:var(--muted-dim); max-width:640px; }
.badge-18{
  display:inline-grid; place-items:center; width:42px; height:42px; flex:0 0 42px;
  border:1px solid var(--gold); border-radius:50%;
  color:var(--gold-lt); font-family:var(--display); font-size:.9rem; font-weight:600;
}
.foot__age{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.foot__age p{ margin:0; font-size:.88rem; }

/* ---------- misc ---------- */
.notice{
  border:1px solid var(--line); border-left-width:3px;
  background:rgba(217,169,76,.06);
  padding:20px 22px; border-radius:2px; margin:28px 0;
}
.notice p:last-child{ margin-bottom:0; }
.notice p{ font-size:.95rem; color:#e3dccb; }

/* ---------- hero artwork ---------- */
.hero__art{ margin:0; position:relative; }
.hero__art a{
  display:block; position:relative;
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:10px; background:linear-gradient(168deg, rgba(27,35,80,.9), rgba(11,15,38,.95));
  transition:border-color .25s ease, transform .25s ease;
}
.hero__art a:hover{ border-color:var(--gold); transform:translateY(-3px); }
.hero__art a::before,
.hero__art a::after{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none; z-index:2;
  border:1px solid var(--gold-lt); opacity:.85;
}
.hero__art a::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hero__art a::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.hero__art img{
  width:100%; height:auto; border-radius:2px; display:block;
}
.hero__art figcaption{
  margin-top:16px; text-align:center;
}
.hero__art figcaption strong{
  display:block; font-family:var(--display); font-size:1.45rem;
  color:var(--gold-lt); font-weight:600; letter-spacing:.01em;
}
.hero__art figcaption span{
  display:block; margin-top:6px; font-size:.86rem; color:var(--muted); line-height:1.55;
}

/* ---------- game card: image + play button, whole card clickable ---------- */
.gcard__shot{
  width:100%; height:auto; border-radius:2px;
  border:1px solid var(--line-soft); margin-bottom:22px;
}
.gcard__body{ display:flex; flex-direction:column; flex:1; }
.gcard__play{
  margin-top:20px; align-self:flex-start; justify-content:center;
}
/* The button is the card's link target, stretched over the whole card. */
.gcard__play::after{
  content:""; position:absolute; inset:0; z-index:1;
}
.gcard:hover .gcard__play{ background:var(--gold-lt); color:#140f04; }

@media (min-width:720px){
  .gcard--flagship{
    display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
    gap:30px; align-items:center;
  }
  .gcard--flagship .gcard__shot{ margin-bottom:0; }
}
@media (max-width:480px){
  .gcard__play{ align-self:stretch; }
}