:root {
  --bg:#0b0c11;
  --panel:#12141c;
  --accent:#f6c54a;
  --text:#e9ecf2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0b0c11; /* fallback */
  /* overflow: hidden;   <-- deze weghalen! */
  overflow-x: hidden;   /* alleen horizontaal blokkeren */
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position: relative;
}


/* ⭐ Sterren Canvas */
#stars {
    position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  background: #0b0c11;
}

/* HERO */
.hero { text-align:center; margin: 28px 0 10px; position: relative;}
.hero.small { margin: 18px 0 6px; }
.logo { width: 120px; display:block; margin: 0 auto 10px; }
.logo.sm { width: 72px; }
.title { font-size: 34px; margin:0; }
.title.sm { font-size: 22px; }
.tagline { margin: 2px 0 0; color:#cfd3e5; }
.back { color:#cfd3e5; text-decoration:none; position:absolute; left:16px; top:16px; }

/* HOME CARD */
.home-card {
  width:min(92vw, 720px);
  background: linear-gradient(180deg, #0f121a 0%, #0b0e15 100%);
  border:1px solid #23283b;
  border-radius:16px; padding:22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  text-align:center;
}
.muted { color:#cfd3e5; }

.cta-row { display:flex; gap:12px; justify-content:center; margin-top:16px; }
.btn {
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800;
  text-decoration:none; letter-spacing:.2px; transition: transform .15s ease, box-shadow .15s ease;
}
.btn.primary { background:var(--accent); color:#0d0e10; box-shadow: 0 10px 24px rgba(246,197,74,.28); }
.btn.ghost { border:1px solid #2a2f42; color:#dfe3f4; background:#121522; }
.btn:hover { transform: translateY(-1px); }

.footer { margin: 26px 0 20px; color:#9aa3c6; }

/* STAGE (TRY ME) */
.stage {
  position:relative; padding:22px; border-radius:20px;
  background: linear-gradient(180deg, #0f121a 0%, #0b0e15 100%);
  border:1px solid #23283b;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  width:min(92vw, 720px);
  margin: 8px auto 24px;
}
.canvas-wrap { position:relative; }
canvas { display:block; width:100%; height:auto; border-radius:14px; }
.pointer {
  position:absolute; inset-inline:0; top:8px; margin-inline:auto;
  width:0; height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:28px solid var(--accent);
  filter: drop-shadow(0 10px 18px rgba(246,197,74,.35)) drop-shadow(0 2px 6px rgba(0,0,0,.7));
  z-index:3;
}
.pointer::after{
  content:""; position:absolute; left:-28px; top:-14px; right:-28px; height:36px;
  background: radial-gradient(60% 120% at 50% 130%, rgba(246,197,74,.55), transparent 70%);
  filter: blur(8px); pointer-events:none; z-index:-1;
}
.panel { margin-top:18px; text-align:center; }
.result {
  margin-top:12px; padding:10px 12px; border-radius:10px; background:#121420; border:1px solid #22263a; font-size:14px;
}

/* DOC (WHITEPAPER) */
.doc {
  width:min(92vw, 900px);
  background: linear-gradient(180deg, #0f121a 0%, #0b0e15 100%);
  border:1px solid #23283b; border-radius:16px; padding:24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  margin: 8px auto 24px; line-height:1.7;
}
.doc h2 { margin:18px 0 8px; }
.doc h3 { margin:12px 0 6px; color:#dfe3f4; }
.table { width:100%; border-collapse:collapse; margin-top:8px; }
.table th, .table td { border:1px solid #23283b; padding:10px 12px; text-align:left; }
.table thead { background:#151827; }

/* TELEGRAM ICON */
.socials {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.telegram-icon {
  display: inline-block;
  background: #229ED9;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 0 10px rgba(34,158,217,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.telegram-icon img {
  width: 22px;
  height: 22px;
  display: block;
}
.telegram-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(34,158,217,0.9);
}
.back-btn {
  position: fixed;   /* altijd linksboven vast */
  top: 16px;
  left: 16px;
  z-index: 10;       /* altijd boven sterren/achtergrond */
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 10px;
}

/* HEADER BAR FIX */

.header-bar {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 16px;
}

.header-center {
  text-align: center;
}

.header-center .logo {
  width: 72px;
  display: block;
  margin: 0 auto 6px;
}

.header-center .title {
  margin: 0;
  font-size: 22px;
}

.header-spacer {
  width: 80px; /* zelfde breedte als back-btn, zodat center echt in het midden staat */
}
/* CANVAS RESPONSIVE FIX */
.canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;   /* zelfde breedte als .stage */
  aspect-ratio: 1 / 1; /* altijd vierkant */
}

#wheel,
#confetti {
  position: absolute;
  inset: 0;          /* overlappen elkaar perfect */
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
}