/* Shared styles for Dropoku's site pages (landing, privacy, terms, contact).
   Palette mirrors game.html so the site and the game feel like one product. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --body-bg-a:#f0ecff;--body-bg-b:#e4eeff;--body-bg-c:#ece4ff;
  --bg2:#ffffff;--bg3:#f5f1ff;
  --card-bg:rgba(255,255,255,0.9);--card-border:rgba(120,100,220,0.18);
  --card-shadow:0 4px 24px rgba(80,40,180,0.09);
  --text:#18103a;--text-dim:#5c4f80;--text-light:#8070a8;
  --accent:#5849e8;--accent2:#8b5cf6;
  --btn-primary:linear-gradient(135deg,#5849e8,#8b5cf6);
  --btn-primary-h:linear-gradient(135deg,#6658f0,#9d6fff);
}
@media (prefers-color-scheme:dark){
  :root{
    --body-bg-a:#0f0c22;--body-bg-b:#080615;--body-bg-c:#120e2a;
    --bg2:#13102a;--bg3:#0e0b20;
    --card-bg:rgba(20,16,45,0.92);--card-border:rgba(120,100,255,0.18);
    --card-shadow:0 4px 24px rgba(0,0,0,0.4);
    --text:#e8e0ff;--text-dim:#a99cd6;--text-light:#7a6cb0;
    --accent:#7c6ff7;--accent2:#a78bfa;
    --btn-primary:linear-gradient(135deg,#5849e8,#7c6ff7);
    --btn-primary-h:linear-gradient(135deg,#6658f0,#8d7ff9);
  }
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse at 20% 30%,var(--body-bg-a) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 70%,var(--body-bg-c) 0%,transparent 60%),
    var(--body-bg-b);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Nunito',system-ui,sans-serif;
  line-height:1.65;
}
h1,h2,h3,.logo{font-family:'Exo 2',sans-serif;font-weight:800}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{padding:18px 0;border-bottom:1px solid var(--card-border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo{font-size:1.4rem;letter-spacing:.5px;text-decoration:none;color:var(--text)}
.site-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.site-nav a{color:var(--text-dim);text-decoration:none;font-weight:700;font-size:.92rem}
.site-nav a:hover{color:var(--accent)}
.site-nav .btn{color:#fff}

/* Buttons */
.btn{
  display:inline-block;background:var(--btn-primary);color:#fff;font-family:'Exo 2',sans-serif;
  font-weight:800;letter-spacing:.4px;text-decoration:none;
  padding:14px 30px;border-radius:14px;box-shadow:0 6px 22px rgba(88,73,232,.35);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(88,73,232,.45);background:var(--btn-primary-h)}
.btn.small{padding:9px 18px;border-radius:10px;font-size:.85rem}

/* Hero */
.hero{text-align:center;padding:64px 0 40px}
.hero h1{font-size:2.6rem;color:var(--text);margin-bottom:10px}
.hero .subtitle{color:var(--text-dim);font-size:1.05rem;margin-bottom:28px}
.hero .tiles-preview{display:flex;justify-content:center;gap:8px;margin-bottom:32px;flex-wrap:wrap}
.hero .tiles-preview span{
  width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Exo 2',sans-serif;font-weight:900;font-size:1.1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.hero .tiles-preview span:nth-child(1){background:linear-gradient(145deg,#4361EE,#2541D4)}
.hero .tiles-preview span:nth-child(2){background:linear-gradient(145deg,#10B981,#059669)}
.hero .tiles-preview span:nth-child(3){background:linear-gradient(145deg,#F97316,#C2540A)}
.hero .tiles-preview span:nth-child(4){background:linear-gradient(145deg,#EF4444,#B91C1C)}
.hero .tiles-preview span:nth-child(5){background:linear-gradient(145deg,#9B5DE5,#7C3AED)}

/* Content sections */
section.guide{padding:20px 0}
section.guide h2{font-size:1.5rem;margin:36px 0 12px;color:var(--text)}
section.guide h3{font-size:1.1rem;margin:20px 0 6px;color:var(--accent)}
section.guide p,section.guide li{color:var(--text-dim);font-size:.98rem;margin-bottom:12px}
section.guide ul{padding-left:22px}
section.guide strong{color:var(--text)}
.card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:16px;padding:22px 24px;margin-bottom:18px}

/* Ad slots (manual placement, filled only after AdSense approval) */
.ad-slot{max-width:100%;margin:32px auto;min-height:0;text-align:center}

/* Footer */
.site-footer{border-top:1px solid var(--card-border);padding:26px 0 40px;margin-top:40px}
.site-footer .wrap{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.site-footer nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.site-footer a{color:var(--text-dim);text-decoration:none;font-size:.85rem}
.site-footer a:hover{color:var(--accent)}
.site-footer .copyright{color:var(--text-light);font-size:.8rem}

/* Simple content pages (privacy/terms/contact) */
.page-header{padding:48px 0 8px;text-align:center}
.page-header h1{font-size:2rem}
.page-header .updated{color:var(--text-light);font-size:.85rem;margin-top:6px}
main.page ul{padding-left:22px;margin-bottom:14px}
main.page p,main.page li{color:var(--text-dim)}
main.page h2{margin:30px 0 10px;font-size:1.25rem;color:var(--text)}

@media (max-width:600px){
  .hero h1{font-size:2rem}
  .site-nav{width:100%;justify-content:center}
}