/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DEADWAVE  ·  Shared Design System
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─ Tokens ─────────────────────────────── */
:root {
  --bg:       #0a0910;
  --bg-2:     #12101d;
  --bg-3:     #1c1633;
  --border:   rgba(255,255,255,.07);
  --border-b: rgba(255,255,255,.1);
  --text:     #f0eef5;
  --text-h:   #ece8f4;
  --dim:      rgba(255,255,255,.6);
  --fade:     rgba(255,255,255,.4);
  --purple:   #9d86ff;
  --purple-d: #7b61ff;
  --purple-x: #6d4dff;
  --green:    #3fe0a0;
  --red:      #ff5d6c;
  --gold:     #ffc44d;
  --cyan:     #43c9ff;
}

/* ─ Base reset ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Outfit, system-ui, sans-serif;
  overflow-x: hidden;
}
a      { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input  { font-family: inherit; outline: none; }

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2540; border-radius: 3px; }

/* ─ Page header band ───────────────────── */
.page-hdr {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 72%, var(--bg) 100%);
  flex-shrink: 0;    /* don't let flex-body compress it */
}
.page-hdr__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 52px 40px 44px;
}
.page-hdr--wide .page-hdr__inner { max-width: 1200px; }
.page-hdr__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

/* ─ Typography ──────────────────────────── */
.label   { font: 700 11px 'Space Mono'; letter-spacing: .24em; color: var(--purple); }
.display { font-family: 'Anton'; letter-spacing: .02em; color: var(--text-h); }

/* ─ Section header row ──────────────────── */
.sec-hdr  { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.sec-head { font: 400 clamp(20px,3vw,34px) 'Anton'; letter-spacing: .05em; color: var(--text-h); line-height: 1; }

/* ─ Badges (changelog tags) ─────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font: 800 9px 'Space Mono';
  letter-spacing: .1em;
  border-radius: 5px;
  padding: 3px 9px;
  margin-bottom: 9px;
}
.badge--new     { color: var(--green);  background: rgba(63,224,160,.12);  border: 1px solid rgba(63,224,160,.3); }
.badge--fixed   { color: var(--cyan);   background: rgba(67,201,255,.12);  border: 1px solid rgba(67,201,255,.3); }
.badge--changed { color: var(--purple); background: rgba(157,134,255,.12); border: 1px solid rgba(157,134,255,.3); }
.badge--balance { color: var(--gold);   background: rgba(255,196,77,.12);  border: 1px solid rgba(255,196,77,.3); }

/* ─ Changelog entries ───────────────────── */
.cl-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 36px;
}
.cl-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.cl-version    { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cl-vnum       { font: 400 30px 'Anton'; color: var(--text-h); }
.cl-tag-latest { font: 800 8px 'Space Mono'; letter-spacing: .1em; color: var(--bg); background: var(--green); padding: 3px 7px; border-radius: 5px; }
.cl-tag-closed  { font: 800 8px 'Space Mono'; letter-spacing: .1em; color: rgba(255,255,255,.38); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 3px 7px; border-radius: 5px; }
.cl-tag-launch  { font: 800 8px 'Space Mono'; letter-spacing: .1em; color: #3fe0a0; background: rgba(63,224,160,.12); border: 1px solid rgba(63,224,160,.3); padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.cl-date       { font: 600 12px 'Space Mono'; color: rgba(255,255,255,.45); }
.cl-title      { font: 600 13px Outfit; color: #fff; margin-top: 8px; }
.cl-body       { display: flex; flex-direction: column; gap: 16px; }

.cl-list    { display: flex; flex-direction: column; gap: 7px; font: 500 14px Outfit; color: rgba(255,255,255,.78); line-height: 1.5; list-style: none; }
.cl-list li { display: flex; gap: 9px; }
.sym        { flex: none; }
.sym--n     { color: var(--green); }
.sym--f     { color: var(--cyan); }
.sym--c     { color: var(--purple); }
.sym--b     { color: var(--gold); }

/* ─ Guide: controls grid ────────────────── */
.ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctrl-row  { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; }
.key       { background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 4px 7px; font: 700 11px 'Space Mono'; color: var(--text-h); flex: none; }
.ctrl-lbl  { font: 600 14px Outfit; color: rgba(255,255,255,.8); }

/* ─ Guide: tip cards ────────────────────── */
.tip-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tip-card  { padding: 20px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.tip-head  { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tip-icon  { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.tip-name  { font: 700 14px Outfit; color: var(--text-h); }
.tip-body  { font: 500 13px Outfit; color: rgba(255,255,255,.52); line-height: 1.65; }

/* ─ CTA card ────────────────────────────── */
.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 36px 40px;
  background: linear-gradient(135deg, rgba(109,77,255,.2), rgba(123,97,255,.1));
  border: 1px solid rgba(123,97,255,.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-glow  { position: absolute; left: -40px; top: -40px; width: 240px; height: 240px; border-radius: 50%; filter: blur(70px); background: rgba(123,97,255,.18); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; }

/* ─ Primary button ──────────────────────── */
.btn-primary {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font: 800 14px Outfit;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-x), var(--purple-d));
  border-radius: 11px;
  box-shadow: 0 8px 22px rgba(109,77,255,.45);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* ─ Inline code ─────────────────────────── */
code { font-size: 11px; background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 4px; }

/* ─ Index: wrappers + section typography ── */
.idx-wrap { max-width: 1280px; margin: 0 auto; }
.idx-lbl  { font: 700 11px 'Space Mono'; letter-spacing: .2em; color: var(--purple-d); }
.idx-hd   { font: 400 clamp(34px,4.5vw,52px) 'Anton'; letter-spacing: .04em; color: #e8e4f2; line-height: 1.05; margin-top: 10px; }
.idx-sub  { font: 500 17px Outfit; color: rgba(255,255,255,.7); line-height: 1.7; max-width: 400px; margin-bottom: 18px; }

/* ─ Index: stat grid ────────────────────── */
.stat-grid              { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; background: rgba(16,14,24,.5); }
.stat-cell              { padding: 26px 24px; border-right: 1px solid rgba(255,255,255,.08); }
.stat-cell:last-child   { border-right: none; }
.stat-num               { font: 400 44px 'Anton'; letter-spacing: .02em; color: var(--text-h); line-height: .9; }
.stat-sub               { font: 700 10px 'Space Mono'; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }

/* ─ Index: controls grid ────────────────── */
.idx-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.idx-crow { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: rgba(16,14,24,.7); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; font: 600 14px Outfit; color: rgba(255,255,255,.75); }
.idx-key  { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 4px 9px; background: rgba(10,9,16,.8); border: 1px solid rgba(255,255,255,.14); border-radius: 5px; font: 700 11px 'Space Mono'; color: #fff; }

/* ─ Index: roadmap cards ────────────────── */
.rmcard       { padding: 24px; border-radius: 12px; }
.rmcard--done { background: rgba(63,224,160,.06);  border: 1px solid rgba(63,224,160,.22); }
.rmcard--in   { background: rgba(109,77,255,.07);  border: 1px solid rgba(139,109,255,.3); }
.rmcard--next { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); }
.rmcard-tag   { font: 700 10px 'Space Mono'; letter-spacing: .12em; text-transform: uppercase; }
.rmcard-items { display: flex; flex-direction: column; gap: 6px; font: 600 15px Outfit; color: rgba(255,255,255,.82); }

/* ─ Deploy card buttons ─────────────────── */
.d-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--purple-x), var(--purple-d));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(109,77,255,.4);
  margin-bottom: 10px;
}
.d-btn-center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--purple-x), var(--purple-d));
  color: #fff;
  font: 800 14px Outfit;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(109,77,255,.4);
  margin-bottom: 18px;
}
.d-btn-half {
  flex: 1;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #fff;
  font: 700 13px Outfit;
  cursor: pointer;
}

/* ─ Auth form ───────────────────────────── */
.auth-lbl   { font: 700 9px 'Space Mono'; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; }
.auth-input { width: 100%; padding: 12px 14px; background: rgba(10,9,16,.7); border: 1.5px solid rgba(255,255,255,.12); border-radius: 9px; color: #fff; font: 500 14px Outfit; }
.auth-btn   { width: 100%; padding: 13px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--purple-x), #8b6dff); color: #fff; font: 800 14px Outfit; cursor: pointer; box-shadow: 0 8px 22px rgba(109,77,255,.4); margin-bottom: 14px; }
.auth-ghost { width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); font: 700 13px Outfit; cursor: pointer; margin-bottom: 16px; }

/* ─ Mobile ──────────────────────────────── */
@media (max-width: 768px) {
  /* Gedeelde page header: minder padding */
  .page-hdr__inner { padding: 36px 24px 32px; }
  .page-hdr--wide .page-hdr__inner { max-width: 100%; }

  /* Changelog entries: één kolom, versienummer boven body */
  .cl-entry { grid-template-columns: 1fr; gap: 12px; }

  /* Stat grid: 3 kolommen — alle drie op één rij */
  .stat-grid { grid-template-columns: 1fr 1fr 1fr; }
  .stat-num  { font-size: 26px; }
  .stat-cell { padding: 14px 8px; }

  /* Strip: alleen badge tonen op mobiel — !important wint van inline display:inline-flex */
  .dw-strip-msg { display: none !important; }
  .dw-strip-cta { display: none !important; }

  /* Shared nav: links, feedback en play verbergen — !important wint van inline display:flex */
  .dw-nav-links        { display: none !important; }
  .dw-nav-feedback-btn { display: none !important; }
  #dw-play-btn         { display: none !important; }

  /* Hamburger tonen */
  .dw-ham-btn { display: flex !important; }

  /* Shared nav: minder padding zodat het niet overloopt */
  .dw-nav { padding-left: 20px !important; padding-right: 20px !important; }

  /* Login-knop compacter op mobiel — geldt voor zowel index (#nav-auth-area) als shared nav (#dw-nav-auth) */
  #nav-auth-area button, #dw-nav-auth button { padding: 10px 16px !important; font-size: 13px !important; }

  /* Changelog hero-afbeelding: kleiner en gecentreerd */
  #cl-hero-img { height: 130px !important; margin: 8px auto 0 !important; }
}

/* ─ Index footer ────────────────────────── */
.idx-footer      { position: relative; z-index: 1; padding: 24px 40px; background: var(--bg); border-top: 1px solid rgba(255,255,255,.06); }
.idx-footer__row { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.idx-footer__logo { font: 400 22px 'Anton'; letter-spacing: .1em; color: rgba(255,255,255,.4); }
.idx-footer__links { display: flex; gap: 22px; }
.idx-footer__link  { font: 600 12px Outfit; color: rgba(255,255,255,.4); transition: color .15s; }
.idx-footer__link:hover { color: rgba(255,255,255,.8); }
.idx-footer__copy  { font: 400 11px 'Space Mono'; color: rgba(255,255,255,.3); }