/* ============================================
   Die Launcher – Theme System (Dark only)
   ============================================ */

/* ── DARK ── */
:root {
  --bg: #09090b;
  --surface: rgba(255,255,255,.03);
  --border: rgba(255,255,255,.06);
  --text: #fafafa;
  --text2: rgba(255,255,255,.55);
  --text3: rgba(255,255,255,.3);
  --glass: rgba(255,255,255,.025);
  --glass-hi: rgba(255,255,255,.04);
  --glass-strong: rgba(255,255,255,.06);
  --shadow: rgba(0,0,0,.3);
  --nav-bg: rgba(9,9,11,.85);
  --red-bg: rgba(239,68,68,.03);
  --red-text: rgba(239,68,68,.55);
  --green-bg: rgba(52,211,153,.03);
  --green-text: rgba(52,211,153,.55);
  --star: rgba(250,204,21,.45);
  --sel: rgba(255,255,255,.15);
  color-scheme: dark;
}

/* ── GLOBAL RESETS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
:focus-visible { outline: 2px solid var(--text3); outline-offset: 3px }
::selection { background: var(--sel) }

/* ── SHARED NAV ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px calc((100% - 1080px) / 2 + 5%); display: flex; align-items: center; justify-content: space-between; transition: background .4s cubic-bezier(.4,0,.2,1) }
@media (max-width: 1180px) { nav { padding: 16px 5% } }
nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%) }
.n-logo { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 8px }
.n-logo img { height: 20px; width: auto; opacity: .9 }
.n-links { display: flex; gap: 2rem; align-items: center; list-style: none }
.n-links a { font-size: .82rem; color: var(--text2); font-weight: 450; transition: color .2s }
.n-links a:hover { color: var(--text) }
.n-cta { font-size: .8rem; font-weight: 500; color: var(--text); padding: 7px 18px; border: none; border-radius: 50px; background: var(--glass-strong); transition: all .3s }
.n-ham { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 4px; position: relative; z-index: 102; width: 40px; height: 40px; display: none; align-items: center; justify-content: center }
@media (max-width: 768px) { .n-links { display: none } .n-ham { display: flex } }

/* ── MOBILE NAV (Modern Fullscreen) ── */
.n-mob {
  position: fixed; inset: 0; z-index: 101;
  background: rgba(9,9,11,.96);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 10%;
  opacity: 0; pointer-events: none;
  transition: opacity .35s cubic-bezier(.4,0,.2,1);
}
.n-mob.open { opacity: 1; pointer-events: auto }
.n-mob a {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 600;
  color: var(--text3);
  letter-spacing: -.03em;
  line-height: 1.2;
  padding: .5rem 0;
  transition: color .25s, transform .4s cubic-bezier(.4,0,.2,1);
  transform: translateX(-20px);
  opacity: 0;
}
.n-mob.open a {
  transform: translateX(0);
  opacity: 1;
}
.n-mob.open a:nth-child(1) { transition-delay: .05s }
.n-mob.open a:nth-child(2) { transition-delay: .1s }
.n-mob.open a:nth-child(3) { transition-delay: .15s }
.n-mob.open a:nth-child(4) { transition-delay: .2s }
.n-mob.open a:nth-child(5) { transition-delay: .25s }
.n-mob.open a:last-child { transition-delay: .3s }
.n-mob a:hover { color: var(--text) }
.n-mob .mob-cta {
  margin-top: 2rem;
  font-size: .9rem;
  font-weight: 500;
  color: #0b0b0e;
  background: var(--text);
  padding: 12px 28px;
  border-radius: 50px;
  letter-spacing: 0;
  transform: translateX(-20px);
  opacity: 0;
}
.n-mob.open .mob-cta {
  transform: translateX(0);
  opacity: 1;
  transition-delay: .35s;
}
.n-mob .mob-footer {
  position: absolute;
  bottom: 2rem; left: 10%; right: 10%;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem; color: var(--text3);
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  opacity: 0;
  transition: opacity .3s .3s;
}
.n-mob.open .mob-footer { opacity: 1 }
.n-mob .mob-footer a { font-size: .72rem; color: var(--text3); padding: 0 }

/* Hamburger → X animation */
.n-ham span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: all .3s cubic-bezier(.4,0,.2,1); position: absolute }
.n-ham span:nth-child(1) { transform: translateY(-5px) }
.n-ham span:nth-child(2) { transform: translateY(5px) }
.n-ham.active span:nth-child(1) { transform: rotate(45deg) }
.n-ham.active span:nth-child(2) { transform: rotate(-45deg) }

/* ── SHARED FOOTER ── */
footer { position: relative; padding: 0 5%; max-width: 1080px; margin: 0 auto }
.f-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 3rem; padding: 48px 0 }
.f-brand p { font-size: .82rem; color: var(--text3); line-height: 1.7; margin: .8rem 0 1.2rem }
.f-social { display: flex; gap: .5rem }
.f-social a { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text3); transition: color .25s }
.f-social a:hover { color: var(--text) }
.f-social svg { width: 14px; height: 14px }
.f-col h3 { font-size: .62rem; font-weight: 450; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: .8rem }
.f-col ul { list-style: none }
.f-col li { margin-bottom: .5rem }
.f-col a { font-size: .8rem; color: var(--text3); transition: color .25s }
.f-col a:hover { color: var(--text) }
.f-btm { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-top: 1px solid var(--border); font-size: .72rem; color: var(--text3); flex-wrap: wrap; gap: .8rem }
.f-btm a { color: var(--text3); margin-left: 1.2rem; transition: color .2s }
.f-btm a:hover { color: var(--text2) }
@media (max-width: 768px) { .f-grid { grid-template-columns: 1fr 1fr; gap: 2rem } }
@media (max-width: 480px) { .f-grid { grid-template-columns: 1fr } }

/* ── Cookie Consent ── */
#ck{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));background:var(--nav-bg);backdrop-filter:blur(20px);border-radius:16px;padding:0;z-index:200;box-shadow:0 12px 40px var(--shadow),0 0 0 1px var(--glass-hi);transition:opacity .4s,transform .4s;overflow:hidden}
#ck.h{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}
.ck-main{padding:18px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ck-main p{flex:1;min-width:200px;font-size:.76rem;color:var(--text2);line-height:1.4}
.ck-main a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.ck-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ck-y,.ck-n{border:none;padding:7px 16px;border-radius:50px;font-size:.76rem;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .2s}
.ck-y{background:var(--text);color:var(--bg)}
.ck-n{background:transparent;color:var(--text2);border:1px solid var(--border)}
.ck-y:hover,.ck-n:hover{opacity:.8}

/* ── SHARED REVEAL ── */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1) }
.rv.v { opacity: 1; transform: none }
.d1 { transition-delay: .07s }
.d2 { transition-delay: .14s }
.d3 { transition-delay: .21s }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important }
}