/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:#0a0a0f;
  color:#e0e0e6;
  line-height:1.7;
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* ===== UTILITY ===== */
.container{max-width:960px;margin:0 auto;padding:0 24px}
a{color:#7c8aff;text-decoration:none;transition:color .2s}
a:hover{color:#a3adff}

/* ===== HEADER / NAV ===== */
header{
  background:rgba(10,10,15,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;z-index:100;
  padding:16px 0;
}
header .container{display:flex;align-items:center;justify-content:center}
.logo{
  font-size:1.6rem;font-weight:800;letter-spacing:-.02em;
  color:#fff;
}
.logo span{color:#1493e3}

/* ===== HERO (homepage) ===== */
.hero{
  text-align:center;
  padding:80px 0 40px;
}
.hero-logo{
  width:160px;height:160px;
  margin:0 auto 32px;
  border-radius:28px;
  background:linear-gradient(135deg,#7c8aff 0%,#4f46e5 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;font-weight:900;color:#fff;
  box-shadow:0 8px 40px rgba(79,70,229,.35);
}
.hero-logo-img{
  width:160px;height:160px;
  margin:0 auto 32px;
  border-radius:28px;
  object-fit:contain;
  filter:drop-shadow(0 0 32px rgba(79,70,229,.45)) drop-shadow(0 0 80px rgba(124,138,255,.2));
}
.hero h1{
  font-size:2.4rem;font-weight:800;color:#fff;letter-spacing:-.02em;
  margin-bottom:8px;
}
.hero p{
  font-size:1.1rem;color:#888;max-width:500px;margin:0 auto;
}

/* ===== GAMES GRID ===== */
.games-section{padding:40px 0 60px}
.games-section h2{
  text-align:center;font-size:1.5rem;font-weight:700;
  color:#fff;margin-bottom:40px;letter-spacing:-.01em;
}
.games-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.game-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.game-card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,138,255,.3);
  box-shadow:0 12px 40px rgba(124,138,255,.12);
}
.game-icon{
  width:100px;height:100px;
  border-radius:20px;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:800;color:#fff;
}
.game-icon.civrise{background:linear-gradient(135deg,#f59e0b,#d97706)}
.game-icon.digs{background:linear-gradient(135deg,#10b981,#059669)}
.game-icon.blast{background:linear-gradient(135deg,#ef4444,#dc2626)}
.game-icon-img{
  width:100px;height:100px;
  border-radius:20px;
  margin:0 auto 20px;
  object-fit:cover;
}
.game-card h3{
  font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:6px;
}
.game-card p{font-size:.88rem;color:#888;margin-bottom:16px}
.game-card .btn{
  display:inline-block;
  padding:10px 24px;
  font-size:.85rem;font-weight:600;
  border-radius:8px;
  background:rgba(124,138,255,.12);
  color:#7c8aff;
  border:1px solid rgba(124,138,255,.25);
  transition:background .2s,color .2s;
}
.game-card .btn:hover{
  background:#7c8aff;color:#0a0a0f;
}

/* ===== FOOTER ===== */
footer{
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.06);
  padding:32px 0;
  text-align:center;
  font-size:.85rem;color:#555;
}
footer .links{margin-bottom:12px}
footer .links a{
  margin:0 12px;color:#888;font-weight:500;
}
footer .links a:hover{color:#7c8aff}

/* ===== LEGAL / POLICY PAGES ===== */
.legal-page{
  padding:60px 0 80px;
  flex:1;
}
.legal-page h1{
  font-size:2rem;font-weight:800;color:#fff;
  margin-bottom:8px;letter-spacing:-.02em;
}
.legal-page .effective{
  font-size:.9rem;color:#666;margin-bottom:40px;
}
.legal-page h2{
  font-size:1.3rem;font-weight:700;color:#ccc;
  margin-top:40px;margin-bottom:12px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.legal-page h3{
  font-size:1.05rem;font-weight:600;color:#bbb;
  margin-top:24px;margin-bottom:8px;
}
.legal-page p,.legal-page li{
  font-size:.95rem;line-height:1.75;color:#aaa;
}
.legal-page ul,.legal-page ol{
  margin:12px 0 12px 24px;
}
.legal-page li{margin-bottom:6px}
.legal-page .address{
  font-style:normal;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  padding:16px 20px;
  margin:16px 0;
  font-size:.9rem;color:#999;
  line-height:1.8;
}
.legal-page table{
  width:100%;border-collapse:collapse;margin:16px 0;
  font-size:.88rem;
}
.legal-page th,.legal-page td{
  text-align:left;padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
}
.legal-page th{
  background:rgba(255,255,255,.05);
  color:#ccc;font-weight:600;
}
.legal-page td{color:#aaa}
.legal-page .supplement-links{
  margin:16px 0;
  padding:16px 20px;
  background:rgba(124,138,255,.06);
  border:1px solid rgba(124,138,255,.12);
  border-radius:8px;
}
.legal-page .supplement-links p{margin-bottom:6px}
.legal-page .model-form{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:20px 24px;
  margin:16px 0;
}
.back-link{
  display:inline-block;margin-bottom:24px;
  font-size:.9rem;color:#7c8aff;
}
.back-link:hover{color:#a3adff}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .hero{padding:48px 0 24px}
  .hero-logo{width:120px;height:120px;font-size:2rem;border-radius:24px}
  .hero-logo-img{width:120px;height:120px;border-radius:24px}
  .game-icon-img{width:80px;height:80px;border-radius:16px}
  .hero h1{font-size:1.6rem}
  .games-grid{grid-template-columns:1fr}
  .legal-page h1{font-size:1.5rem}

}