/* === Site Rebuild: Vanilla Enhancements === */
:root{
  --bg:#0b0b0c; --card:#131417; --muted:#9aa0a6; --text:#e8eaed; --accent:#6ab0ff;
  --radius:12px;
  color-scheme: dark;
  font-synthesis-weight: none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:16px}
.header, .footer{padding:16px 0}
.footer{color:var(--muted);font-size:.9rem;border-top:1px solid #202124;margin-top:24px}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 1px 0 #202124}
h1{font-size:clamp(1.5rem,1.1rem + 2vw,2.2rem);margin:0 0 8px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;font-size:.9rem;color:var(--muted);margin:4px 0 12px}
.meta-row .sep{opacity:.5}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{background:#1f2024;border:1px solid #2a2b31;border-radius:999px;padding:4px 10px;font-size:.78rem;color:#c8ccd0}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat( auto-fill, minmax(220px,1fr) )}
.rel-card{background:#111316;border:1px solid #23242a;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.rel-card img{width:100%;height:130px;object-fit:cover;display:block}
.rel-card .rel-body{padding:10px}
.rel-card .rel-meta{color:#9aa0a6;font-size:.85rem;margin-top:4px}

.embed-wrap{position:relative;background:#000;border-radius:12px;overflow:hidden}
.embed-16x9{aspect-ratio:16/9}
.embed-4x3{aspect-ratio:4/3}
.embed-wrap iframe,.embed-wrap canvas{width:100%;height:100%;display:block;border:0}

.game-desc{color:#cfd3d7;font-size:1rem;margin-top:12px}
.section-title{font-size:1.2rem;margin:8px 0 12px;color:#d7dbdf}
.comment-box{margin-top:16px}
.comment-box .hint{color:#9aa0a6;font-size:.9rem}

img[loading="lazy"]{content-visibility:auto;}

@media (max-width: 880px){
  .layout{display:block}
}



/* Accessibility: improve primary button contrast */
.btn.primary{background:#3a77ff;border:1px solid #2f64d4;color:#020617;border-radius:10px;padding:10px 14px;cursor:pointer}
.btn.primary:hover{
  background:#0b5ed7;
}



/* Accessible skip link */
.sr-only-focusable{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.sr-only-focusable:focus,
.sr-only-focusable:active{
  position:static;
  width:auto;
  height:auto;
  padding:8px 16px;
  margin:8px;
  background:#0d6efd;
  color:#ffffff;
  z-index:10000;
  border-radius:999px;
}

.copy{font-size:13px;color:#9ca3af;text-align:center;margin-top:10px}
.copy a{color:#ffffff;text-decoration:underline;font-weight:600;}
.copy a:hover{
  color:#e5f0ff;
}