/* ═══ THE PLUG — marketing site shared styles ═══
   Tokens lifted straight from the game (index.html :root). One fixed dark
   identity — the palette IS the brand, no light theme. */
:root{
  --bg:#060606; --card:#0f0f0f; --border:#1c1c1c;
  --y:#ffd60a; --o:#ff8c00; --r:#ff2d55; --g:#00e87a; --p:#bf5fff; --b:#3dd6f5;
  --ink:#e8e8e8; --ink-soft:#888; --ink-dim:#555;
  --fn:'Bebas Neue',cursive; --fb:'DM Sans',sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;padding:0;
  background:var(--bg);color:var(--ink);
  font-family:var(--fb);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--y)}
a:focus-visible,button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
img{max-width:100%}

/* ── Nav ── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(6,6,6,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:960px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:22px;
}
.nav-logo{
  font-family:var(--fn);font-size:22px;letter-spacing:2px;
  text-decoration:none;line-height:1;
  background:linear-gradient(135deg,var(--y) 0%,var(--o) 45%,var(--r) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav-links{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav-links a{
  font-family:var(--fn);font-size:15px;letter-spacing:1.5px;
  color:var(--ink-dim);text-decoration:none;transition:color .15s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--y)}

/* ── Page shell ── */
.page{max-width:960px;margin:0 auto;padding:48px 20px 90px}
.page-narrow{max-width:740px}

/* ── Type ── */
.eyebrow{
  font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:8px;
}
h1.display{
  font-family:var(--fn);font-weight:400;
  font-size:clamp(44px,9vw,72px);letter-spacing:3px;line-height:.95;
  margin:0 0 8px;text-wrap:balance;
  background:linear-gradient(135deg,var(--y) 0%,var(--o) 45%,var(--r) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.lede{color:var(--ink-soft);font-size:16px;max-width:58ch;margin:0 0 36px}
h2.sec{
  font-family:var(--fn);font-weight:400;font-size:28px;letter-spacing:2px;
  color:var(--ink);margin:52px 0 6px;text-wrap:balance;
}
h2.sec .tick{color:var(--y)}
.sec-sub{color:var(--ink-dim);font-size:13px;margin:0 0 20px}

/* ── Cards ── */
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:18px;transition:border-color .18s;
}
.card:hover{border-color:#2e2e2e}

/* ── Character cards ── */
.char-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.char-em{font-size:34px;line-height:1}
.char-face{
  width:64px;height:64px;border-radius:12px;object-fit:cover;
  border:1px solid #2e2e2e;flex-shrink:0;
}
.char-name{font-family:var(--fn);font-size:24px;letter-spacing:1.5px;line-height:1}
.char-tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--y);margin-top:3px}
.char-stats{
  display:flex;gap:14px;flex-wrap:wrap;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-dim);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:8px 0;margin:10px 0 12px;
  font-variant-numeric:tabular-nums;
}
.char-stats b{color:var(--ink);font-weight:800}
.char-story{font-size:14px;color:var(--ink-soft);margin:0}
.char-story em{color:var(--ink);font-style:normal;font-weight:600}

/* ── Rival dossiers ── */
.dossier{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;
}
.dossier-stripe{height:4px}
.dossier-body{padding:18px}
.dossier-face{
  float:right;width:78px;height:78px;border-radius:10px;object-fit:cover;
  border:1px solid #2e2e2e;margin:0 0 10px 14px;
}
.dossier-file{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.dossier-name{font-family:var(--fn);font-size:30px;letter-spacing:1.5px;line-height:1;margin-bottom:2px}
.dossier-org{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
.dossier-meta{
  display:flex;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-dim);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:8px 0;margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.dossier-meta b{color:var(--ink);font-weight:800}
.dossier-bio{font-size:14px;color:var(--ink-soft);margin:0 0 14px}
.dossier-play{
  background:#0a0a0a;border-left:3px solid var(--y);border-radius:0 8px 8px 0;
  padding:10px 14px;font-size:13px;color:var(--ink-soft);margin-bottom:14px;
}
.dossier-play b{
  display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--y);margin-bottom:3px;
}
.dossier-quote{font-size:13px;color:var(--ink-dim);font-style:italic;margin:0}

/* ── Tips ── */
.tip-group{margin-bottom:8px}
.tip{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;
}
.tip-num{
  font-family:var(--fn);font-size:20px;color:var(--y);line-height:1.2;
  min-width:26px;font-variant-numeric:tabular-nums;
}
.tip-body{font-size:14px;color:var(--ink-soft);margin:0}
.tip-body b{color:var(--ink)}

/* ── Buttons / CTA rows ── */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
  display:inline-block;padding:13px 26px;border-radius:12px;
  font-family:var(--fn);font-size:18px;letter-spacing:2px;line-height:1;
  text-decoration:none;transition:transform .12s,box-shadow .18s;
}
.btn-gold{background:var(--y);color:#000}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 0 24px rgba(255,214,10,.35)}
.btn-ghost{border:1px solid var(--border);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--y);color:var(--y)}

/* ── Footer ── */
.footer{
  border-top:1px solid var(--border);margin-top:70px;padding:26px 20px 40px;
}
.footer-inner{
  max-width:960px;margin:0 auto;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-dim);letter-spacing:1px;
}
.footer-inner a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--border)}
.footer-inner a:hover{color:var(--y);border-color:var(--y)}

@media (max-width:600px){
  .nav-inner{padding:10px 14px;gap:14px}
  .nav-links{gap:12px}
  .page{padding:34px 16px 70px}
}