:root {
  --bg-dark: #05050c;
  --cyan: #00f0ff;
  --cyan-glow: rgba(0, 240, 255, 0.3);
  --purple: #a200ff;
  --purple-glow: rgba(162, 0, 255, 0.35);
  --gold: #ffaa00;
  --text-main: #ffffff;
  --text-muted: #8b9bb4;
  --text-mute: #6b7590;
  --border-dark: #1e263d;
  --rail-max: 1600px;
  --nav-h: 62px;
}

html {
  min-height: 100%;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(circle at top right, rgba(162, 0, 255, 0.15), transparent 40%),
    radial-gradient(circle at bottom left, rgba(0, 240, 255, 0.15), transparent 40%),
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
  background-attachment: fixed;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; color: var(--text-main); font-family: 'Chakra Petch', sans-serif; font-size: 15px; line-height: 1.5; }
body { background: transparent; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
.rail { width: 100%; max-width: var(--rail-max); margin: 0 auto; padding: 0 28px; }

.news-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8, 10, 18, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-dark);
}
.news-nav-inner { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.news-brand img { height: 34px; width: auto; }
.news-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.news-nav-links a:hover,
.news-nav-links a.is-active { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }
.news-nav-spacer { flex: 1; }
.btn-ghost-sm {
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid rgba(162, 0, 255, 0.45);
  color: var(--purple);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.news-subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 150;
  border-bottom: 1px solid var(--border-dark);
  background: rgba(5, 6, 14, 0.9);
  backdrop-filter: blur(10px);
}
.news-subnav-inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}
.news-subnav-inner::-webkit-scrollbar { display: none; }
.news-subnav a {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.news-subnav a:hover { color: #fff; border-color: rgba(0, 240, 255, 0.25); }
.news-subnav a.is-active {
  color: var(--cyan);
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.08);
}

.news-hero {
  padding: 48px 0 36px;
  border-bottom: 1px solid rgba(30, 38, 61, 0.6);
}
.news-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.news-kicker .gem { color: var(--gold); }
.news-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(14px, 2.2vw, 24px);
  line-height: 1.5;
  margin-bottom: 12px;
  text-shadow: 0 0 24px var(--purple-glow);
}
.news-lead { color: var(--text-muted); max-width: 760px; font-size: 16px; line-height: 1.7; }

.news-section { padding: 40px 0 56px; }
.news-feed { display: grid; gap: 14px; }
.news-card {
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid var(--border-dark);
  background: rgba(5, 5, 12, 0.55);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.news-card:hover { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 0 20px rgba(0, 240, 255, 0.06); }
.news-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.news-card-tag {
  color: var(--cyan);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background: rgba(0, 240, 255, 0.06);
}
.news-card h2 { font-size: 18px; margin-bottom: 8px; line-height: 1.35; }
.news-card p { color: var(--text-muted); font-size: 14px; line-height: 1.65; }

.news-empty {
  padding: 28px 24px;
  border-radius: 12px;
  text-align: center;
  border: 1px dashed rgba(255, 170, 0, 0.35);
  background: rgba(255, 170, 0, 0.04);
  color: var(--text-muted);
}
.news-empty i { color: var(--gold); margin-right: 8px; }

.news-footer {
  padding: 24px 0 48px;
  text-align: center;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .news-nav-links { display: none; }
}
@media (max-width: 600px) {
  .rail { padding: 0 16px; }
}

/* ── Devlog (News / Dev Updates / Patch Notes / Changelog) ─────────────────── */
.dl-feed { display: flex; flex-direction: column; gap: 22px; }
.dl-update, .dl-patch, .dl-hubcard {
  background: rgba(10, 14, 28, 0.72);
  border: 1px solid var(--border-dark, #1e263d);
  border-radius: 14px; padding: 24px 26px;
}
.dl-hubcard { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.dl-hubcard:hover { border-color: var(--cyan, #00f0ff); transform: translateY(-2px); }
.dl-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; }
.dl-meta time { color: var(--text-mute, #6b7590); }
.dl-tag, .dl-version {
  font-family: 'Orbitron', monospace; font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  color: var(--cyan, #00f0ff); background: rgba(0, 240, 255, .1); border: 1px solid rgba(0, 240, 255, .35);
}
.dl-version { color: var(--purple, #a200ff); background: rgba(162, 0, 255, .1); border-color: rgba(162, 0, 255, .35); }
.dl-req { color: #ffcaca; background: rgba(255, 60, 60, .14); border: 1px solid rgba(255, 80, 80, .45); padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.dl-auto { color: var(--green, #00ff66); background: rgba(0, 255, 102, .1); border: 1px solid rgba(0, 255, 102, .35); padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.dl-update-title { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; margin: 4px 0 8px; color: var(--text-main, #fff); }
.dl-excerpt { color: var(--text-muted, #8b9bb4); font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
.dl-body { color: #cdd6ea; line-height: 1.72; font-size: 15.5px; }
.dl-body p { margin: 0 0 12px; }
.dl-body strong { color: var(--gold, #ffaa00); font-weight: 700; }
.dl-list { margin: 4px 0 14px; padding-left: 20px; color: #cdd6ea; line-height: 1.7; }
.dl-list li { margin: 3px 0; }
.dl-list.dl-dim { color: var(--text-muted, #8b9bb4); }
.dl-sub { font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute, #6b7590); margin: 12px 0 4px; }
.dl-byline { margin-top: 12px; font-style: italic; color: var(--text-mute, #6b7590); font-size: 13px; }
.dl-more { display: inline-block; margin-top: 12px; color: var(--cyan, #00f0ff); font-weight: 600; font-size: 14px; }
/* Changelog: dense, grouped by day */
.dl-changelog { display: flex; flex-direction: column; gap: 20px; }
.dl-day { border-left: 2px solid var(--border-dark, #1e263d); padding-left: 18px; }
.dl-day-head { font-family: 'Chakra Petch', sans-serif; font-size: 15px; font-weight: 700; color: var(--cyan, #00f0ff); margin: 0 0 10px; }
.dl-day-head i { margin-right: 6px; opacity: .8; }
.dl-row { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(30, 38, 61, .5); }
.dl-row:last-child { border-bottom: none; }
.dl-sum { color: #cdd6ea; font-size: 14px; line-height: 1.5; }
.dl-cat {
  flex: 0 0 auto; min-width: 132px; font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; text-align: center;
  color: var(--text-muted, #8b9bb4); background: rgba(255, 255, 255, .04); border: 1px solid var(--border-dark, #1e263d);
}
.dl-cat-gameplay-battles { color: #ff7a7a; border-color: rgba(255, 80, 80, .4); }
.dl-cat-world-maps { color: var(--green, #00ff66); border-color: rgba(0, 255, 102, .35); }
.dl-cat-map-editor { color: var(--cyan, #00f0ff); border-color: rgba(0, 240, 255, .35); }
.dl-cat-account-social { color: var(--purple, #a200ff); border-color: rgba(162, 0, 255, .4); }
.dl-cat-shop-premium { color: var(--gold, #ffaa00); border-color: rgba(255, 170, 0, .4); }
.dl-cat-performance-infra { color: #7ad8ff; border-color: rgba(120, 216, 255, .35); }
.dl-cat-audio-vfx { color: var(--pink, #ff00ea); border-color: rgba(255, 0, 234, .35); }
.dl-cat-admin-safety { color: #c0b0ff; border-color: rgba(160, 140, 255, .35); }
@media (max-width: 600px) {
  .dl-row { flex-direction: column; gap: 2px; }
  .dl-cat { min-width: 0; align-self: flex-start; }
  .dl-update-title { font-size: 19px; }
}