/* ============================================================
   Rogue21 — site styles
   Palette: docs/V0_8_VISUAL_IDENTITY_AND_GAME_FEEL_BIBLE.md
   Type: Cormorant (display) + Montserrat (body) — echoes the
   elegant serif used in the game's marketing videos.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  /* brand */
  --bg:#0D0D12; --bg-2:#12121a; --panel:#181824; --panel-2:#1c1c2b;
  --gold:#D4AF37; --gold-soft:#c6a668; --gold-dim:rgba(212,175,55,.32);
  --risk:#C62828; --risk-hot:#FF3D00;
  --text:#ece7db; --muted:#9a948a; --line:rgba(212,175,55,.14);
  /* spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --radius:14px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Cormorant',Georgia,serif; font-weight:600; line-height:1.15}

a{color:var(--gold); text-decoration:none; transition:color .2s var(--ease)}
a:hover{color:#e8c85a}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
img{max-width:100%; display:block}

.wrap{max-width:1080px; margin:0 auto; padding:0 var(--s3)}
.narrow{max-width:720px}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(13,13,18,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; gap:var(--s2); height:68px}
.brand{display:flex; align-items:center; gap:10px; letter-spacing:.22em; font-size:15px;
  font-weight:600; color:var(--gold); font-family:'Montserrat',sans-serif}
.brand img{width:34px; height:34px; border-radius:8px}
nav.main{margin-left:auto; display:flex; gap:var(--s2); font-size:14px; letter-spacing:.06em}
/* 44px minimum touch target (WCAG / iOS HIG): the label is only ~23px tall, so pad it out
   rather than relying on the text box itself. */
nav.main a{color:var(--muted); display:inline-flex; align-items:center;
  min-height:44px; padding:0 10px; border-radius:8px}
nav.main a:hover,nav.main a[aria-current]{color:var(--gold)}
nav.main a:hover{background:rgba(212,175,55,.06)}

/* ---------- hero ---------- */
.hero{
  position:relative; text-align:center; padding:var(--s6) 0 var(--s5);
  border-bottom:1px solid var(--line); overflow:hidden;
}
/* layered depth without WebGL: a slow radial glow behind the mark */
.hero:before{
  content:""; position:absolute; inset:-40% 0 auto; height:640px;
  background:radial-gradient(ellipse at 50% 40%, rgba(212,175,55,.13), transparent 62%);
  pointer-events:none;
}
.hero > *{position:relative}
.hero .mark{
  width:132px; height:132px; border-radius:30px; margin:0 auto;
  box-shadow:0 18px 60px rgba(212,175,55,.22), 0 4px 14px rgba(0,0,0,.6);
}
.hero h1{
  font-size:clamp(52px,10vw,104px); margin:var(--s3) 0 var(--s1);
  letter-spacing:.14em; color:var(--gold); font-weight:600;
}
.hero .tag{font-size:clamp(19px,2.6vw,26px); font-family:'Cormorant',serif; color:var(--text); margin:0 0 12px}
.hero .sub{color:var(--muted); max-width:560px; margin:0 auto; font-size:16px}
.cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:var(--s4);
  padding:14px 30px; border:1px solid var(--gold-soft); border-radius:999px;
  color:var(--gold); font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(180deg,rgba(212,175,55,.10),rgba(212,175,55,.02));
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.cta:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(212,175,55,.18); color:var(--gold)}

/* ---------- sections ---------- */
section{padding:var(--s6) 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.section-head{text-align:center; margin-bottom:var(--s5)}
h2{font-size:clamp(30px,4.4vw,42px); color:var(--gold); letter-spacing:.06em; margin:0 0 10px}
.section-head p{color:var(--muted); margin:0; max-width:560px; margin-inline:auto}
h3{font-size:19px; margin:0 0 6px; color:var(--text)}
p{margin:0 0 14px}

/* ---------- device mockups ---------- */
.devices{display:flex; gap:var(--s4); overflow-x:auto; padding:var(--s2) var(--s3) var(--s4);
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.device{
  flex:0 0 auto; scroll-snap-align:center; width:266px;
  background:linear-gradient(160deg,#2a2a33,#131318);
  border-radius:38px; padding:9px;
  box-shadow:0 26px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(212,175,55,.16),
             inset 0 1px 1px rgba(255,255,255,.09);
}
.device .screen{position:relative; border-radius:30px; overflow:hidden; background:#000}
.device .screen img{width:100%; height:auto; display:block}
/* dynamic island */
.device .screen:before{
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:74px; height:20px; background:#000; border-radius:12px; z-index:2;
}
.device figcaption{margin-top:var(--s2); text-align:center; color:var(--muted);
  font-size:13px; letter-spacing:.05em}

/* ---------- feature cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:var(--s3)}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{transform:translateY(-3px); border-color:var(--gold-dim); box-shadow:0 14px 34px rgba(0,0,0,.45)}
.card .icon{width:28px; height:28px; color:var(--gold); margin-bottom:12px}
.card h3{font-family:'Montserrat',sans-serif; font-size:15px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft)}
.card p{color:var(--muted); font-size:15px; margin:0}

/* ---------- honest block ---------- */
.honest{
  background:linear-gradient(180deg,rgba(212,175,55,.05),transparent);
  border:1px solid var(--gold-dim); border-radius:18px; padding:var(--s4);
}
.honest ul{list-style:none; padding:0; margin:0 0 var(--s3);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px}
.honest li{padding-left:28px; position:relative}
.honest li svg{position:absolute; left:0; top:5px; width:16px; height:16px; color:var(--gold)}
.honest .kicker{font-family:'Cormorant',serif; font-size:26px; color:var(--gold); margin:0}

/* ---------- doc pages ---------- */
.doc h1{font-size:clamp(34px,5vw,46px); color:var(--gold); letter-spacing:.05em; margin:0 0 6px}
.doc .updated{color:var(--muted); font-size:14px; margin-bottom:var(--s4)}
.doc h2{font-size:22px; text-align:left; margin:var(--s4) 0 10px}
.doc ul{padding-left:22px} .doc li{margin:7px 0}

/* ---------- footer ---------- */
footer{padding:var(--s4) 0 var(--s5); color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center}
footer nav{margin-left:auto; display:flex; gap:var(--s1); flex-wrap:wrap}
footer a{color:var(--muted); display:inline-flex; align-items:center;
  min-height:44px; padding:0 10px; border-radius:8px}
footer a:hover{color:var(--gold); background:rgba(212,175,55,.06)}

/* ---------- scroll reveal ----------
   Progressive enhancement: content is visible by default. Only once JS confirms it can
   drive the animation does it add .js-reveal to <html>, which hides elements to animate
   them in. Without JS (or if the observer never fires) everything simply stays visible —
   a crawler or reviewer must never get a blank page. */
.js-reveal .reveal{opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js-reveal .reveal.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media(max-width:768px){
  :root{--s5:48px; --s6:64px}
  header.site .wrap{height:60px}
  nav.main{gap:var(--s2); font-size:13px}
  .device{width:222px}
  .devices{gap:var(--s3)}
}
@media(max-width:380px){
  .device{width:196px}
  nav.main{gap:12px; font-size:12px}
}

/* ---------- accessibility ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}