/* WhatsNew — matches the elgrecgames.com hub tokens (dark default). */
:root { --bg:#17181c; --panel:#22242a; --panel2:#1e2026; --line:#33363f; --ink:#e8e9ec; --soft:#a7abb6; --amber:#ffb020; --pink:#ff5d8f; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { overflow-x:hidden; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.6; }
a { color:var(--amber); }
img, video { max-width:100%; }
.wrap { max-width:1060px; margin:0 auto; padding:0 16px; }

/* Header */
header.top { border-bottom:1px solid var(--line); background:var(--panel); }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px; }
.wordmark { font-size:26px; font-weight:900; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.wordmark em { font-style:normal; color:var(--amber); }
.wordmark small { display:block; font-family:ui-monospace,monospace; font-size:10px; font-weight:400; letter-spacing:.22em; color:var(--soft); }
.top nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.top nav a { color:var(--ink); text-decoration:none; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.16em; }
.top nav a:hover { color:var(--amber); }
.hub-btn { display:inline-block; background:var(--amber); color:#1a1200 !important; font-weight:800; padding:10px 16px; border-radius:999px; }
.hub-btn:hover { color:#1a1200; }

/* Marquee — same as hub */
.marquee { overflow:hidden; border:1px solid var(--line); border-radius:12px; padding:9px 0; margin:18px 0 6px; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.18em; color:var(--amber); white-space:nowrap; background:var(--panel); }
.marquee span { display:inline-block; padding-left:20px; animation:scrollx 22s linear infinite; }
@keyframes scrollx { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee span { animation:none; } }

/* Intro */
.intro { padding:22px 0 8px; }
.intro h1 { font-size:clamp(28px,4vw,40px); letter-spacing:-.02em; margin:0 0 6px; }
.intro h1 em { font-style:normal; color:var(--amber); }
.intro p { color:var(--soft); font-size:15px; margin:0; max-width:640px; }

/* Category filter */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 6px; }
.chips button { background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:8px 13px; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.12em; cursor:pointer; }
.chips button.on { background:var(--amber); border-color:var(--amber); color:#1a1200; font-weight:800; }
.empty { display:none; color:var(--soft); padding:26px 0; text-align:center; }

/* Cards */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:14px 0 30px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; }
.card img { width:100%; height:200px; object-fit:cover; display:block; }
.card-body { padding:18px; display:flex; flex-direction:column; flex:1; }
.meta { display:flex; justify-content:space-between; gap:10px; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.14em; color:var(--soft); margin-bottom:10px; flex-wrap:wrap; }
.tag { display:inline-block; background:var(--amber); color:#1a1200; font-weight:900; padding:3px 9px; border-radius:999px; font-size:10px; letter-spacing:.1em; }
.card h2 { font-size:22px; letter-spacing:-.01em; margin:0 0 8px; }
.card h2 a { color:var(--ink); text-decoration:none; }
.card h2 a:hover { color:var(--amber); }
.card p { color:var(--soft); font-size:15px; margin:0 0 14px; flex:1; }
.read { display:inline-block; background:var(--amber); color:#1a1200; font-weight:800; text-decoration:none; padding:11px 16px; border-radius:999px; font-size:14px; margin-bottom:12px; align-self:flex-start; }

/* Share row */
.share { display:flex; gap:7px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); padding-top:12px; }
.share .lbl { font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.16em; color:var(--soft); margin-right:2px; }
.share a, .share button { background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 11px; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.08em; cursor:pointer; text-decoration:none; white-space:nowrap; }
.share a:hover, .share button:hover { border-color:var(--amber); color:var(--amber); }
.share .primary { background:var(--amber); border-color:var(--amber); color:#1a1200; font-weight:800; }
.share .primary:hover { color:#1a1200; }

/* Post page */
.article { max-width:760px; margin:0 auto; padding:22px 16px 30px; }
.article .hero { border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.article .hero img, .article .hero video { width:100%; display:block; }
.article h1 { font-size:clamp(28px,4vw,40px); letter-spacing:-.02em; margin:18px 0 8px; }
.article .meta { margin-bottom:16px; }
.article .body p { color:var(--ink); font-size:16.5px; line-height:1.75; margin:0 0 16px; }
.article .body p a { color:var(--amber); }
.play-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:22px 0; }
.play { display:inline-block; background:var(--amber); color:#1a1200; font-weight:800; text-decoration:none; padding:14px 22px; border-radius:999px; font-size:16px; }
.guide-link { color:var(--soft); text-decoration:none; font-weight:700; font-size:15px; }
.guide-link:hover { color:var(--amber); }
.back-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.back-row a { font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.16em; text-decoration:none; }

/* Footer */
footer { text-align:center; color:var(--soft); font-size:13px; padding:22px 16px 30px; line-height:1.9; border-top:1px solid var(--line); }
footer a { color:var(--amber); text-decoration:none; }

/* Phone */
@media (max-width: 640px) {
  .grid { grid-template-columns:1fr; }
  .card img { height:180px; }
  .wordmark { font-size:22px; }
  header.top .wrap { padding-top:12px; padding-bottom:12px; }
  .share a, .share button { padding:7px 10px; }
}