/* ===== LuckyMax — algemene stijlen (hergebruikt op alle pagina's) ===== */
:root{
  --bg:#213743;
  --panel:#0F212E;
  --ink:#FFFFF2;
  --muted:#A9BBC6;
  --line:#2C4A59;
  --line-soft:#22424F;
  --cta:#5B6CF0;
  --cta-hover:#4756d8;
  --accent:#1FD1A0;
  --hot:#E0556B;
  --new:#3FB8FF;
  --jp:#16C2A3;
  --radius:10px;
  --maxw:1180px;
  --sidebar:264px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  line-height:1.55;
  font-size:16px;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
h1{font-size:2.1rem;font-weight:800}
h2{font-size:1.55rem;font-weight:800}
h3{font-size:1.18rem;font-weight:700}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1em}

/* ===== Knoppen ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.4em;font-weight:700;cursor:pointer;border:0;
  padding:.7em 1.2em;border-radius:8px;font-size:.95rem;
  transition:background .15s,border-color .15s;text-align:center;
}
.btn-cta{background:var(--cta);color:#fff}
.btn-cta:hover{background:var(--cta-hover)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--cta);color:#fff}
.btn-lg{padding:.9em 1.7em;font-size:1.05rem}
.btn-sm{padding:.5em .85em;font-size:.82rem;border-radius:7px}

/* ===== Topbar (mobiel) ===== */
.topbar{display:none}

/* ===== Zijbalk (desktop) ===== */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);
  background:var(--panel);border-right:1px solid var(--line-soft);
  padding:20px 16px;overflow-y:auto;z-index:40;
}
.sidebar-logo{display:block;margin:4px 4px 18px}
.logo-img{height:auto}
.sidebar-auth{display:grid;gap:10px;margin-bottom:18px}
.sidebar-auth .btn{width:100%}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-link{
  display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:8px;color:var(--ink);font-weight:600;font-size:.95rem;
}
.nav-link:hover{background:#16303c}
.nav-ico{width:18px;text-align:center;color:var(--accent);font-size:.85rem}

.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35;border:0;
}

/* ===== Hoofdcontent ===== */
/* ===== Hoofdcontent ===== */
.main{
  margin-left:var(--sidebar);
  padding:22px clamp(20px,3vw,48px) 60px;
}
.main > section,
.main > footer{
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
}

/* ===== Hero ===== */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:14px;padding:34px;margin-bottom:26px;
}
.hero h1{margin-bottom:.35em}
.hero-lead{font-size:1.15rem;font-weight:700;color:var(--accent);margin-bottom:.5em}
.hero-sub{color:var(--muted);max-width:48ch}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 20px}
.fact{
  background:#16303c;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.85rem;color:var(--muted);
}
.fact b{color:var(--ink)}
.hero-art img{width:100%;border-radius:12px;aspect-ratio:16/10;object-fit:cover}

/* ===== Spellen-sectie ===== */
.games{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:14px;padding:24px;margin-bottom:26px;
}
.games-bar{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.tabs{display:flex;gap:6px;background:#16303c;border-radius:10px;padding:5px}
.tab{
  background:transparent;color:var(--muted);border:0;cursor:pointer;
  padding:9px 16px;border-radius:7px;font-weight:600;font-size:.9rem;
}
.tab.is-active{background:var(--bg);color:var(--ink)}
.games-tools{display:flex;gap:10px;align-items:center}
.tool{background:#16303c;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:9px 14px;font-size:.85rem;cursor:pointer}
.search{background:#16303c;border:1px solid var(--line);color:var(--muted);
  border-radius:8px;padding:9px 14px;font-size:.85rem}

.row-head{display:flex;justify-content:space-between;align-items:center;
  margin:24px 0 12px}
.row-head h3{margin:0}
.row-ctrl{display:flex;gap:8px;align-items:center}
.arrow{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:#16303c;color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1}
.arrow:hover{border-color:var(--cta)}

.tile-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:180px;gap:14px;
  overflow-x:auto;padding-bottom:8px;scroll-behavior:smooth;
  scrollbar-width:thin;
}
.tile-row::-webkit-scrollbar{height:8px}
.tile-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

.tile{
  position:relative;background:var(--bg);border:1px solid var(--line-soft);
  border-radius:12px;overflow:hidden;
}
.badge{
  position:absolute;top:8px;left:8px;z-index:2;font-size:.66rem;
  font-weight:800;padding:3px 8px;border-radius:6px;color:#05202a;
  letter-spacing:.02em;text-transform:uppercase;
}
.badge-jp{background:var(--jp)}
.badge-top{background:var(--accent)}
.badge-hot{background:var(--hot);color:#fff}
.badge-new{background:var(--new);color:#05202a}
.tile-img{aspect-ratio:9/11;background:#16303c}
.tile-img img{width:100%;height:100%;object-fit:cover}
.tile-foot{padding:10px 11px 12px}
.tile-name{display:block;font-weight:700;font-size:.92rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-prov{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.tile-cta{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  background:rgba(15,33,46,.92);opacity:0;transition:opacity .15s;
}
.tile-cta .btn{min-width:96px}
.tile:hover .tile-cta,.tile:focus-within .tile-cta{opacity:1}

/* ===== Tekstblokken ===== */
.block{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:14px;padding:26px;margin-bottom:22px;
}
.block h3{margin-top:1.3em}
.lead-answer{font-size:1.12rem;font-weight:700}
.list{margin:0 0 1em;padding-left:1.2em}
.list li{margin-bottom:.45em}
.steps{margin:0;padding-left:1.3em}
.steps li{margin-bottom:.5em}

/* ===== Tabellen (scrollbaar op mobiel) ===== */
.tbl-wrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line-soft);border-radius:10px;margin:0 0 1.2em;
}
.tbl{width:100%;border-collapse:collapse;min-width:520px;font-size:.94rem}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-soft)}
.tbl thead th{background:#16303c;font-weight:700}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.tbl-kv{min-width:420px}
.tbl-kv th{width:42%;color:var(--muted);font-weight:600}
.tbl tbody tr:last-child{font-weight:700}

/* ===== Beoordelingskaart ===== */
.rating-card{
  display:flex;gap:18px;align-items:center;background:#16303c;
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:6px;
}
.rating-score{font-size:2rem;font-weight:800;line-height:1}
.rating-score span{font-size:1rem;color:var(--muted)}
.rating-meta{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--muted)}
.rating-stars{color:var(--accent);font-size:1.1rem;letter-spacing:2px}

/* ===== Kaarten (login/registratie) ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 18px}
.step-card{background:#16303c;border:1px solid var(--line);border-radius:12px;padding:18px}
.step-card h3{margin-top:0;font-size:1.02rem}

/* ===== FAQ ===== */
.faq details{
  border:1px solid var(--line-soft);border-radius:10px;
  background:#16303c;margin-bottom:10px;
}
.faq summary{
  cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 16px 16px;color:var(--muted)}

/* ===== Footer ===== */
.footer{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:14px;padding:34px;margin-top:10px;
}
.footer-top{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}
.footer-logo{display:block}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-col h4{margin-bottom:12px}
.footer-col a{display:block;color:var(--muted);font-size:.9rem;padding:4px 0}
.footer-col a:hover{color:var(--ink)}
.footer-mid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;
  border-top:1px solid var(--line-soft);margin-top:28px;padding-top:24px;
}
.footer-mid::before{content:"";grid-column:2;width:1px;background:var(--line-soft)}
.footer-pay,.footer-studios{text-align:center}
.footer-pay h4,.footer-studios h4{margin-bottom:16px}
.ico-row{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:center;align-items:center}
.ico-row img{opacity:.7;height:30px;width:auto;filter:grayscale(1)}
.footer-studios .btn{margin-top:16px}
.footer-text{color:var(--muted);font-size:.85rem;margin:26px 0 18px;max-width:80ch}
.disclaimers{display:flex;flex-wrap:wrap;gap:14px}
.disclaimers img{height:48px;width:auto;border:1px solid var(--line-soft);border-radius:6px}

/* ===== Adaptief ===== */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1}
  .card-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .footer-mid{grid-template-columns:1fr}
  .footer-mid::before{display:none}
}

@media (max-width:760px){
  body{font-size:15px}
  h1{font-size:1.7rem}
  h2{font-size:1.35rem}

  /* topbar tonen, zijbalk wordt drawer */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:50;background:var(--panel);
    border-bottom:1px solid var(--line-soft);padding:10px 14px;gap:12px;
  }
  .topbar-logo .logo-img{height:34px}
  .burger{
    width:42px;height:42px;border:1px solid var(--line);background:#16303c;
    border-radius:8px;display:flex;flex-direction:column;justify-content:center;
    align-items:center;gap:4px;cursor:pointer;
  }
  .burger span{width:18px;height:2px;background:var(--ink);display:block}

  .sidebar{
    transform:translateX(-100%);transition:transform .22s ease;
    width:84%;max-width:320px;
  }
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:16px 14px 48px}
  .hero{padding:22px}
  .block,.games,.footer{padding:18px}
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:14px}
}

@media (min-width:761px){
  .overlay{display:none}
}
.app-content{
  display:grid;
  grid-template-columns:1.3fr 420px;
  gap:28px;
  align-items:center;
}

.app-image img{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width:980px){
  .app-content{
    grid-template-columns:1fr;
  }

  .app-image{
    order:1; 
  }
}