/* ==========================================================================
   ED KROKET – ONE PAGE CSS 
   ========================================================================== */

/* =========================
   1) TOKENS / VARIABLES
   ========================= */
:root{
  --bg0:#0b0b0b;
  --bg1:#121212;

  --txt:#ffffff;
  --muted: rgba(255,255,255,0.78);

  --stroke: rgba(255,255,255,0.12);
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius:18px;

  /* Ed Kroket accent */
  --accent:#ffb000;
  --accent2:#ff5a2a;

  /* Layout */
  --max: 1100px;

  /* Checker wall */
  --checkerA:#d94a1e;
  --checkerB:#f0c36a;
  --tile: 36px;
}

/* =========================
   2) RESET / BASE
   ========================= */
*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family:"Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,0.92);
  text-rendering: optimizeLegibility;
  overflow-x:hidden;

  /* Ed Kroket splash-like orange vertical gradient */
  background: linear-gradient(
    180deg,
    #F39A3D 0%,
    #EE8F34 35%,
    #E6812A 70%,
    #DF7422 100%
  );
  background-attachment: fixed;
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

p{ color: rgba(255,255,255,0.88); margin: 0 0 10px; }

h1, h2, h3, .hero-title{
  text-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

/* =========================
   3) AMBIENT / PAGE WRAPPER
   ========================= */
.ek-ambient{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1400px 900px at 50% 70%, rgba(0,0,0,.22), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.35), transparent 55%);
}

.page{
  position:relative;
  z-index:1;
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  padding: 18px 0 34px;
}

/* Utility text readability (useful on orange bg) */
.text-shadow-soft{
  text-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* =========================
   4) TOPBAR / NAV
   ========================= */
.topbar{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 10px 0 18px;
  z-index: 1000;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 240px;
}

.brand-mark{
  width:44px;height:44px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  display:grid; place-items:center;
}

.brand-icon{
  width:34px;height:34px;
  object-fit:contain;
}

.brand-title{
  font-weight:800;
  letter-spacing:.2px;
  display:block;
  line-height:1.05;
}

.brand-sub{
  display:block;
  font-size:12px;
  color: rgba(255,255,255,0.80);
  margin-top:2px;
}

.nav-links{
  display:flex;
  gap:16px;
  align-items:center;
  z-index: 1100;
}

.nav-links a{
  color:rgb(105, 78, 3);
  opacity:0.92;
  font-size:14px;
}

.nav-links a:hover{ 
  opacity:1; 
  color: rgb(247, 230, 183);
}

.nav-toggle{
  display:none;
  border:1px solid var(--stroke);
  background: rgb(250, 194, 74);
  color:rgb(105, 78, 3);
  border-radius: 12px;
  padding: 10px 12px;
  font-size:18px;
}


/* =========================
   0) backgrond oil
   ========================= */

/* =========================
   0) BACKGROUND OIL BUBBLES
   ========================= */

/* 1) Layering: bubbles boven ambient, onder content */
.oil-bubbles{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;          /* ✅ boven .ek-ambient (0), onder .page (1→ zet .page naar 2) */
  overflow: hidden;
}

/* 2) Basis bubble stijl (DIT MISSEDE BIJ JOU) */
.oil-bubbles span{
  position: absolute;
  bottom: -90px;       /* start buiten beeld */
  border-radius: 999px;
  opacity: 0.35;

  /* “vet bel” look */
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.10) 35%,
      rgba(255,180,60,0.14) 60%,
      rgba(0,0,0,0.05) 100%);
  box-shadow:
    inset 0 10px 16px rgba(255,255,255,0.10),
    inset 0 -14px 18px rgba(0,0,0,0.10),
    0 10px 24px rgba(0,0,0,0.12);

  filter: blur(0.2px);
  animation: bubble-float linear infinite;
  will-change: transform;
}

/* 3) Animatie */
@keyframes bubble-float{
  from{ transform: translateY(0) translateX(0); }
  to  { transform: translateY(-120vh) translateX(40px); }
}

/* 4) Extra variatie per bubble (delay + opacity) */
.oil-bubbles span:nth-child(1){ animation-delay: -2s;  opacity: .18; }
.oil-bubbles span:nth-child(2){ animation-delay: -8s;  opacity: .22; }
.oil-bubbles span:nth-child(3){ animation-delay: -5s;  opacity: .16; }
.oil-bubbles span:nth-child(4){ animation-delay: -14s; opacity: .20; }
.oil-bubbles span:nth-child(5){ animation-delay: -10s; opacity: .18; }
.oil-bubbles span:nth-child(6){ animation-delay: -18s; opacity: .22; }
.oil-bubbles span:nth-child(7){ animation-delay: -6s;  opacity: .14; }
.oil-bubbles span:nth-child(8){ animation-delay: -22s; opacity: .20; }
.oil-bubbles span:nth-child(9){ animation-delay: -12s; opacity: .18; }
.oil-bubbles span:nth-child(10){animation-delay: -3s;  opacity: .12; }

/* posities + groottes + snelheid */
.oil-bubbles span:nth-child(1){ left: 8%;  width: 24px; height: 24px; animation-duration: 18s; }
.oil-bubbles span:nth-child(2){ left: 18%; width: 42px; height: 42px; animation-duration: 26s; }
.oil-bubbles span:nth-child(3){ left: 28%; width: 16px; height: 16px; animation-duration: 14s; }
.oil-bubbles span:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-duration: 32s; }
.oil-bubbles span:nth-child(5){ left: 52%; width: 20px; height: 20px; animation-duration: 16s; }
.oil-bubbles span:nth-child(6){ left: 63%; width: 36px; height: 36px; animation-duration: 24s; }
.oil-bubbles span:nth-child(7){ left: 72%; width: 14px; height: 14px; animation-duration: 12s; }
.oil-bubbles span:nth-child(8){ left: 82%; width: 50px; height: 50px; animation-duration: 30s; }
.oil-bubbles span:nth-child(9){ left: 90%; width: 22px; height: 22px; animation-duration: 17s; }
.oil-bubbles span:nth-child(10){ left: 96%; width: 10px; height: 10px; animation-duration: 10s; }




/* =========================
   5) HERO
   ========================= */
.hero{
  position: relative; /* needed for ::before glow */
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 26px;
  align-items:start;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-200px;
  background:
    radial-gradient(600px 400px at 30% 20%, rgba(255,180,60,0.18), transparent 60%);
  pointer-events:none;
  z-index:-1;
}

.hero-copy,
.hero-visual{
  margin:0;
  padding:0;
  z-index: 0;         
  position: relative; 
}

.hero-copy{
  position: relative;
  border-radius: 22px;
  padding: 26px 26px 22px;

  /* ✅ egaal, leesbaar */
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.14);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10);

  backdrop-filter: blur(2px); /* mag je ook weghalen */
}

/* optioneel: iets meer “lucht” zodat de rand niet tegen je content aan zit */
.hero-copy{
  padding: 26px 26px;
}

/* optioneel: nét wat extra contrast */
.hero-copy .hero-subtitle,
.hero-copy p{
  text-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.hero-copy-inner{
  max-width: 58ch;        /* voorkomt dat tekst te breed wordt */
}

.hero-copy::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  background:
    radial-gradient(600px 260px at 30% 15%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(700px 320px at 70% 85%, rgba(0,0,0,0.18), transparent 60%);
}

.hero-highlight{ margin-top:0; }

.hero-title{
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.04;
  margin: 14px 0 10px;
  text-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

.hero-subtitle{
  margin:0;
  color: rgba(247, 208, 135, 0.92);
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
  text-shadow: 0 10px 22px rgba(0,0,0,0.18); /* readability */
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 18px;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color:#1a1208;
  font-weight:800;
  box-shadow: 0 10px 26px rgba(255,176,0,.16);
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 16px;
}

.badge{
  font-size: 12px;
  color: rgba(255,255,255,0.80);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  padding: 7px 10px;
  border-radius: 999px;
}

.hero-visual{
  align-self:start;
  transform: translateY(-10px);
}

.hero-banner{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  box-shadow: var(--shadow);
}

/* (Legacy device frame - if still used somewhere) */
.hero-device{
  border-radius: 28px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.device-inner{
  border-radius: 22px;
  overflow:hidden;
  background:#0a0a0a;
  border: 1px solid rgba(255,255,255,.10);
}
.device-screen{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
   6) SECTIONS (generic)
   ========================= */
.section{
  position: relative;
  padding: 28px 0;
}

.section h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing:.2px;
}

.section-lead{
  margin: 0 0 16px;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  max-width: 80ch;
  text-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* =========================
   7) FEATURES / GAMEPLAY
   ========================= */
#features{
  padding-top: 34px;
  padding-bottom: 42px;
}

#features h2{
  text-shadow: 0 8px 24px rgba(0,0,0,.22);
}

#features .section-lead{
  max-width: 860px;
}

.features-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

/* Feature cards use menu_background.png (your chosen paper-like bg) */
.feature-card{
  position: relative;
  overflow:hidden;
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: url("/images/menu_background.png") center / cover no-repeat;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow:
    0 14px 28px rgba(0,0,0,.24),
    0 2px 0 rgba(255,255,255,.18) inset;
}

.feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:18px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.04) 55%,
    rgba(0,0,0,0.10) 100%
  );
}

.feature-card > *{ position:relative; z-index:1; }

.feature-title{
  margin: 0 0 8px 0;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
  color: #4a2a00;
}

.feature-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.52;
  color: #3b2a1a;
}

.feature-card strong{
  color: #2b1600;
  font-weight: 900;
}

@media (hover:hover){
  .feature-card:hover{
    transform: translateY(-2px);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow:
      0 18px 36px rgba(0,0,0,.28),
      0 2px 0 rgba(255,255,255,.18) inset;
  }
}

/* =========================
   8) PROMOTIES
   ========================= */
.promo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Promo cards: darker glass card */
.promo-card{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.promo-img{
  height: 120px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 6px;
  flex: 0 0 auto;
}

.promo-meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width:0;
}

.promo-card span{
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.promo-card small{
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  line-height: 1.35;
  text-align:left;
}

/* =========================
   9) MEDIA (video + screenshots + story)
   ========================= */
.media-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}

.video-card, .screenshots-card, .story-card{
  padding: 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.card-title{
  margin:0 0 10px;
  font-size: 15px;
}

.video-wrap{
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
}

video{
  width:100%;
  height:auto;
  display:block;
}

.screenshot-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.screenshot-grid img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background:#000;
}

.card-note{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  line-height: 1.45;
}

.section-subtitle{
  margin: 0 0 12px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}

.story-card p{
  margin: 0 0 10px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}

.story-card p:last-child{ margin-bottom:0; }

/* =========================
   10) GAME CENTER SECTION
   ========================= */
.gc-wrap{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr; /* image left, text right */
  gap: 22px;
  align-items: start;
}

.gc-media{ justify-self: start; }

.gc-image{
  width: 320px;
  height: auto;
  display:block;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

/* =========================
   11) FOOTER
   ========================= */
.footer{ 
  margin-top: 60px; 
  position: relative;
}

/* Checker wall strip (2 rows, alternating correctly) */
.checker-wall{
  position: relative; 
  z-index: 1; 
  width: 100%;
  display:block;

  height: calc(var(--tile) * 2);

  /* The trick: tile is 2x2 pattern; conic gradient gives alternating squares */
  background: conic-gradient(
    var(--checkerA) 0 90deg,
    var(--checkerB) 90deg 180deg,
    var(--checkerA) 180deg 270deg,
    var(--checkerB) 270deg 360deg
  );
  background-size: calc(var(--tile) * 2) calc(var(--tile) * 2);
  background-repeat: repeat;

  border-top: 2px solid rgba(0,0,0,0.25);
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,0.12),
    inset 0 -5px 8px rgba(0,0,0,0.22);
}

.footer-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 18px 24px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
}

.footer-links a{ color: rgba(255,255,255,0.85); }
.footer-links a:hover{ color:#fff; }

.checker-snacks{
  position: absolute;
  inset: 0;                       /* top/left/right/bottom = 0 binnen checker-wall */
  height: calc(var(--tile) * 2);   /* exact hoogte strip */
  pointer-events: none;
  transform: translateY(-30px);
  z-index: 2;
}

/* snack basis: GEEN bottom:93px meer */
.checker-snacks .snack{
  position: absolute;
  width: auto;
  opacity: 0.95;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.28));
  transform: rotate(var(--rot, 0deg));
}

/* posities: werk met top binnen de strip */
.checker-snacks .s1{ left: 6%;  top: -10px; --rot:-8deg; height:52px; }
.checker-snacks .s2{ left: 22%; top: -10px;  --rot: 6deg; height:46px; }
.checker-snacks .s3{ left: 46%; top: -14px;  --rot:-4deg; height:50px; }
.checker-snacks .s4{ left: 66%; top: -5px;  --rot: 8deg; height:44px; }
.checker-snacks .s5{ left: 84%; top: -8px;  --rot:-6deg; height:48px; }

/* mobiel: iets kleiner + iets hoger binnen de strip */
@media (max-width: 720px){
  .checker-snacks .snack{ height: 34px; }
  .checker-snacks .s4{ display:none; }

  /* 👇 belangrijkste: til ze iets omhoog */
  .checker-snacks{ transform: translateY(-17px); }
}


/* =========================
   12) RESPONSIVE (grouped, no duplicates)
   ========================= */
@media (max-width: 1100px){
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; gap:16px; }
  .media-grid{ grid-template-columns: 1fr; }
  .promo-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px){
  /* Game Center: text above, image full width */
  .gc-wrap{ grid-template-columns: 1fr; }
  .gc-media{ justify-self: stretch; }
  .gc-image{ width:100%; max-width:none; }
}

@media (max-width: 720px){
  .nav-toggle{ display:inline-flex; }

  .nav-links{
    display:none;
    position:absolute;
    right: 20px;
    top: 66px;
    flex-direction:column;
    align-items:flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.14);
    background: rgb(250, 194, 74);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
  }

  .nav-links.is-open{ display:flex; }

  .screenshot-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
  .features-grid{ grid-template-columns: 1fr; }
  .feature-card{ padding: 18px 16px 16px; }
}

@media (max-width: 520px){
  .promo-grid{ grid-template-columns: 1fr; }
}

html, body{
  width: 100%;
  overflow-x: hidden;
}

.page{
  max-width: 1100px;
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

/* voorkomt dat media ooit breder wordt dan container */
img, video, svg{
  max-width: 100%;
  height: auto;
}

/* lange strings/urls mogen niet pushen */
*{
  overflow-wrap: anywhere;
}

body{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}