:root{
  --gg-purple:#7b2cbf;
  --gg-cyan:#38bdf8;
  --gg-deep:#0b0111;
  --gg-card:#13021a;
  --gg-text:#e7e3f0;
  --gg-muted:#b8a7d6;
}

body.devlog {
  background: linear-gradient(0deg, var(--gg-deep) 0%, var(--gg-purple) 100%);
  min-height: 100vh;
  color: var(--gg-text);
}

.devlog-hero{
  padding: 210px 1rem 12px;
  text-align:center;
}
.devlog-hero h1{
  font-family:'Audiowide', cursive, sans-serif;
  letter-spacing:.06em;
  font-size: 2.2rem;
  color:#fff;
  text-shadow:0 2px 16px var(--gg-purple),0 0 8px var(--gg-cyan);
  margin:0 0 .5rem;
}
.devlog-hero p{
  margin:0 auto;
  max-width:820px;
  color:var(--gg-muted);
}

.devlog-list{
  width: min(1200px, 94%);
  margin: 24px auto 80px;
  display:flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 16px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.devlog-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding:16px;
  backdrop-filter: blur(6px);
  flex: 0 0 340px;
  scroll-snap-align: start;
}
.devlog-card h3{
  font-family:'Lilita One', cursive;
  color:#fff;
  font-size:1.35rem;
  margin:0 0 .25rem;
}
.devlog-meta{
  font-size:.9rem;
  color:var(--gg-muted);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.devlog-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;
}
.devlog-tag{
  font-size:.75rem;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.15);color:var(--gg-text);opacity:.9
}
.devlog-card ul{margin:.5rem 0 0 1.1rem}
.devlog-card li{margin:.3rem 0}

.devlog-card:hover{transform:translateY(-2px);transition:.2s ease}

@media (max-width:900px){
  .devlog-hero{padding-top:170px}
  .devlog-card{flex-basis: 300px}
}

.devlog-list::-webkit-scrollbar{height:10px}
.devlog-list::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
.devlog-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

.devlog-vertical-list{
  width: min(900px, 92%);
  margin: 8px auto 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.devlog-vertical-list .devlog-card{
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}