/* ============================================================
   NIGHTFLETCH GAMES — système de design
   Palette et typo dérivées du logo (corbeau, lune, flèche)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:            #16111d;
  --bg-elev:       #1f1929;
  --bg-elev-2:     #282133;
  --purple-deep:   #32224c;
  --purple:        #764db8;
  --purple-soft:   #654d8c;
  --purple-glow:   #b095db;
  --silver:        #eee9f7;
  --ink:           #b3a6c9;
  --ink-dim:       #74698a;
  --line:          rgba(176,149,219,0.22);
  --line-strong:   rgba(176,149,219,0.45);

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --wrap: 1100px;
  --edge: clamp(20px, 6vw, 64px);
}

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

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* subtle ambient starfield texture behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(1px 1px at 15% 22%, rgba(238,233,247,0.35), transparent),
    radial-gradient(1px 1px at 82% 15%, rgba(238,233,247,0.25), transparent),
    radial-gradient(1.5px 1.5px at 45% 60%, rgba(176,149,219,0.3), transparent),
    radial-gradient(1px 1px at 65% 85%, rgba(238,233,247,0.2), transparent),
    radial-gradient(1px 1px at 92% 70%, rgba(176,149,219,0.25), transparent),
    radial-gradient(1.5px 1.5px at 8% 78%, rgba(238,233,247,0.2), transparent),
    radial-gradient(1px 1px at 35% 8%, rgba(176,149,219,0.2), transparent);
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:0;
}

/* signature brand watermark — le corbeau/lune veille en fond, fixe pendant le scroll */
body::after{
  content:"";
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(1100px, 130vw);
  height:min(820px, 96vh);
  background-image:url('assets/emblem-watermark.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:0;
  opacity:1;
}

a{ color:inherit; text-decoration:none; }

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

::selection{ background:var(--purple-soft); color:var(--silver); }

:focus-visible{
  outline:2px solid var(--purple-glow);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
  position:relative;
  z-index:1;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--purple-glow);
  display:inline-flex;
  align-items:center;
  gap:10px;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--silver);
  font-weight:600;
  letter-spacing:0.01em;
}

/* ============================================================
   Signature element: divider glyph (croissant + flèche)
   Repris du logo — sépare les sections et sert de puce
   ============================================================ */
.glyph-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 auto;
  width:100%;
  max-width:520px;
  color:var(--purple-soft);
}
.glyph-divider .rule{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.glyph-divider svg{ flex-shrink:0; opacity:0.85; }

/* ============================================================
   Header / nav
   ============================================================ */
header.site{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:linear-gradient(to bottom, rgba(8,7,11,0.92), rgba(8,7,11,0.7) 70%, transparent);
  backdrop-filter:blur(6px);
  padding:18px 0;
}
header.site .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:0.14em;
  color:var(--silver);
  text-transform:uppercase;
}
.brand img{ height:34px; width:34px; object-fit:contain; }
nav.site-nav{ display:flex; gap:32px; }
nav.site-nav a{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  transition:color 0.25s ease;
  position:relative;
  padding-bottom:4px;
}
nav.site-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--purple-glow);
  transition:width 0.3s ease;
}
nav.site-nav a:hover{ color:var(--silver); }
nav.site-nav a:hover::after{ width:100%; }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px var(--edge) 80px;
  position:relative;
}
.hero-emblem{
  width:min(230px, 46vw);
  height:auto;
  margin-bottom:8px;
  filter:drop-shadow(0 0 40px rgba(138,104,201,0.35));
  opacity:0;
  transform:translateY(14px);
  -webkit-mask-image:radial-gradient(circle, black 52%, transparent 76%);
  mask-image:radial-gradient(circle, black 52%, transparent 76%);
  animation:
    emblemIn 1.4s cubic-bezier(.16,.9,.35,1) 0.15s forwards,
    pulseGlow 5s ease-in-out 1.6s infinite;
}
@keyframes emblemIn{
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pulseGlow{
  0%,100%{ filter:drop-shadow(0 0 40px rgba(138,104,201,0.35)); }
  50%{ filter:drop-shadow(0 0 60px rgba(183,154,235,0.5)); }
}
.hero h1{
  font-size:clamp(30px, 5.4vw, 52px);
  letter-spacing:0.08em;
  margin-top:22px;
  opacity:0;
  animation:fadeUp 1s ease 0.5s forwards;
}
.hero .studio-sub{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--purple-glow);
  margin-top:10px;
  opacity:0;
  animation:fadeUp 1s ease 0.65s forwards;
}
.hero .tagline{
  font-family:var(--font-body);
  font-style:italic;
  font-size:clamp(18px, 2.4vw, 24px);
  color:var(--ink);
  margin-top:34px;
  max-width:560px;
  opacity:0;
  animation:fadeUp 1s ease 0.85s forwards;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.scroll-cue{
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0;
  animation:fadeUp 1s ease 1.2s forwards;
}

/* ============================================================
   Section shell + reveal-on-scroll
   ============================================================ */
section{
  padding:110px 0;
  position:relative;
}
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.9s cubic-bezier(.16,.9,.35,1), transform 0.9s cubic-bezier(.16,.9,.35,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.section-head h2{
  font-size:clamp(26px, 3.6vw, 38px);
  margin-top:14px;
}
.section-head p{
  margin-top:18px;
  font-size:19px;
  color:var(--ink);
}

/* ============================================================
   Studio section
   ============================================================ */
.studio-body{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  font-size:19px;
  color:var(--ink);
}
.studio-body p + p{ margin-top:18px; }

/* ============================================================
   Game section
   ============================================================ */
.game-panel{
  background:linear-gradient(160deg, var(--bg-elev), var(--bg-elev-2));
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(32px, 5vw, 64px);
  position:relative;
  overflow:hidden;
}
.game-panel::before{
  content:"";
  position:absolute;
  top:-40%; right:-15%;
  width:60%; height:140%;
  background:radial-gradient(circle, rgba(138,104,201,0.14), transparent 65%);
  pointer-events:none;
}
.game-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
  margin-bottom:32px;
}
.game-title-row h2{ font-size:clamp(28px,4vw,40px); }
.game-tag{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.game-desc{
  font-size:19px;
  max-width:640px;
  color:var(--silver);
  margin-bottom:40px;
}
.feature-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px 40px;
}
.feature-list li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  font-size:16.5px;
  color:var(--ink);
}
.feature-list li svg{ flex-shrink:0; margin-top:3px; color:var(--purple-glow); }
.feature-list li b{ color:var(--silver); font-weight:600; }

.cta-row{
  margin-top:48px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.badge-pending{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line-strong);
  padding:14px 24px;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--silver);
  background:rgba(138,104,201,0.06);
}
.badge-pending .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--purple-glow);
  animation:dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(183,154,235,0.5); }
  50%{ opacity:0.5; box-shadow:0 0 0 6px rgba(183,154,235,0); }
}
.cta-note{
  font-size:14px;
  color:var(--ink-dim);
  font-family:var(--font-mono);
}

/* ============================================================
   Footer
   ============================================================ */
footer.site{
  border-top:1px solid var(--line);
  padding:48px 0;
}
footer.site .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
}
.footer-brand img{ height:22px; width:22px; object-fit:contain; opacity:0.8; }
.footer-links{
  display:flex;
  gap:28px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.footer-links a{ color:var(--ink-dim); transition:color 0.25s ease; }
.footer-links a:hover{ color:var(--purple-glow); }
.footer-copy{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-dim);
  width:100%;
  text-align:center;
  margin-top:12px;
  letter-spacing:0.04em;
}

/* ============================================================
   Legal / privacy page
   ============================================================ */
.legal-page{ padding:150px 0 100px; }
.legal-page .wrap{ max-width:760px; }
.legal-page h1{
  font-size:clamp(28px,4vw,40px);
  margin-bottom:8px;
}
.legal-updated{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-dim);
  letter-spacing:0.05em;
  margin-bottom:48px;
  display:block;
}
.legal-page h2{
  font-size:21px;
  margin-top:44px;
  margin-bottom:14px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.legal-page h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.legal-page p{ margin-bottom:14px; font-size:17px; color:var(--ink); }
.legal-page ul{ margin:0 0 14px 22px; color:var(--ink); font-size:17px; }
.legal-page li{ margin-bottom:8px; }
.legal-page strong{ color:var(--silver); }
.legal-page a.inline-link{
  color:var(--purple-glow);
  border-bottom:1px solid var(--line-strong);
}
.legal-page a.inline-link:hover{ color:var(--silver); }
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:40px;
  transition:color 0.25s ease;
}
.back-link:hover{ color:var(--purple-glow); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:760px){
  nav.site-nav{ display:none; }
  .feature-list{ grid-template-columns:1fr; }
  section{ padding:80px 0; }
  .game-title-row{ flex-direction:column; align-items:flex-start; }
  footer.site .wrap{ flex-direction:column; align-items:center; text-align:center; }
}