/* ============================================================
   Gaming Technology — CSS (Mobile-First, Dark Tech Theme)
   ============================================================ */

:root {
  /* Palette — neutral tech */
  --bg: #0d1117;
  --bg-alt: #161b22;
  --bg-card: #1c2333;
  --bg-raised: #21283a;
  --border: #2d3748;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --text-dim: #5c6370;
  --accent: #58a6ff;
  --accent-alt: #79c0ff;
  --accent-purple: #7b6cf6;
  --accent-teal: #39d2c0;
  --green: #3fb950;
  --orange: #d2991d;
  --red: #f85149;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,.3);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
  --max-text: 780px;
  --header-h: 60px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px); }

body {
  font-family:var(--font);
  font-size:16px; line-height:1.65;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; height:auto; display:block; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-alt); text-decoration:underline; }

::selection { background:var(--accent); color:#fff; }

/* ---- Typography ---- */
h1,h2,h3,h4 { font-weight:700; line-height:1.25; color:#fff; }
h1 { font-size:clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size:clamp(1.35rem, 3vw, 1.75rem); margin-top:2rem; }
h3 { font-size:clamp(1.1rem, 2vw, 1.35rem); margin-top:1.5rem; }
h4 { font-size:1rem; margin-top:1.25rem; color:var(--text-muted); }

p { margin-bottom:1rem; }
ul, ol { margin-bottom:1rem; padding-left:1.5rem; }
li { margin-bottom:.35rem; }
strong { color:#fff; }
code { font-family:var(--font-mono); font-size:.88em; background:var(--bg-alt); padding:.15em .4em; border-radius:4px; color:var(--accent-alt); }
pre { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; overflow-x:auto; margin-bottom:1rem; }
pre code { background:none; padding:0; color:var(--text); }
blockquote { border-left:3px solid var(--accent); padding:.5rem 1rem; margin:1rem 0; color:var(--text-muted); background:var(--bg-card); border-radius:0 var(--radius) var(--radius) 0; }
hr { border:none; border-top:1px solid var(--border); margin:2rem 0; }
table { width:100%; border-collapse:collapse; margin-bottom:1rem; font-size:.92rem; }
th, td { padding:.6rem .75rem; text-align:left; border-bottom:1px solid var(--border); }
th { font-weight:600; color:#fff; background:var(--bg-alt); }
tbody tr:hover { background:var(--bg-card); }

/* ---- Utility ---- */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }
.text-muted { color:var(--text-muted); }
.text-dim { color:var(--text-dim); }
.badge { display:inline-block; background:var(--bg-card); color:var(--accent); padding:.15em .55em; border-radius:4px; font-size:.78rem; font-weight:600; }

/* ---- Header ---- */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(13,17,23,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  height:var(--header-h);
}
.header-inner {
  max-width:1200px; margin:0 auto; padding:0 1rem;
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
}
.logo { font-size:1.2rem; font-weight:800; color:#fff; white-space:nowrap; }
.logo span { color:var(--accent); }
.logo:hover { text-decoration:none; }

/* ---- Nav ---- */
.main-nav { display:none; }
.main-nav ul { list-style:none; display:flex; gap:1.5rem; padding:0; margin:0; }
.main-nav a { color:var(--text-muted); font-size:.9rem; font-weight:500; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.main-nav a:hover, .main-nav a.active { color:#fff; text-decoration:none; border-bottom-color:var(--accent); }

/* Dropdown */
.has-dropdown { position:relative; }
.has-dropdown > a::after { content:'▾'; margin-left:4px; font-size:.7rem; }
.dropdown {
  display:none; position:absolute; top:100%; left:0;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius); min-width:220px;
  padding:.5rem 0; z-index:110; box-shadow:var(--shadow);
}
.has-dropdown:hover .dropdown { display:block; }
.dropdown a { display:block; padding:.5rem 1rem; color:var(--text-muted); font-size:.85rem; border:none; }
.dropdown a:hover { background:var(--bg-card); color:#fff; text-decoration:none; }

/* Mega Menu — hover, vertical, 2 columns */
.mega-trigger { position:relative; }
.mega-trigger > a::after { content:' ▾'; font-size:.7rem; }
.mega-menu {
  display:none; position:absolute; top:100%; left:0;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius); min-width:240px;
  padding:.5rem 0; z-index:110; box-shadow:var(--shadow);
}
.mega-trigger:hover .mega-menu { display:flex; flex-direction:row; }
.mega-menu .mega-col { padding:0; flex:1; min-width:180px; }
.mega-menu .mega-col h4 { font-size:.8rem; color:var(--accent); margin:0; padding:.5rem 1rem .2rem; text-transform:uppercase; letter-spacing:.05em; }
.mega-menu .mega-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.mega-menu .mega-col li { margin:0; }
.mega-menu .mega-col a { padding:.4rem 1rem; color:var(--text-muted); font-size:.85rem; display:block; border:none; }
.mega-menu .mega-col a:hover { background:var(--bg-card); color:#fff; text-decoration:none; }

/* ---- Mobile Nav Actions ---- */
.nav-actions { display:flex; align-items:center; gap:.5rem; }
.btn-icon {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:.4rem; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  transition:color .2s, background .2s;
}
.btn-icon:hover { color:#fff; background:var(--bg-card); }

/* Burger */
.burger { display:flex; flex-direction:column; gap:4px; padding:.4rem; }
.burger span { display:block; width:20px; height:2px; background:var(--text-muted); border-radius:2px; transition:all .2s; }
.burger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

/* Mobile Menu */
.mobile-menu {
  display:none; position:fixed; top:var(--header-h); left:0; right:0;
  bottom:0; background:var(--bg); z-index:99;
  overflow-y:auto; padding:1rem;
  border-top:1px solid var(--border);
}
.mobile-menu.open { display:block; }
.mobile-menu ul { list-style:none; padding:0; margin:0; }
.mobile-menu > ul > li { border-bottom:1px solid var(--border); }
.mobile-menu a { display:block; padding:.75rem 0; color:var(--text); font-weight:500; }
.mobile-menu .has-sub > a::after { content:' ▾'; font-size:.7rem; color:var(--accent); }
.mobile-menu .has-sub > a.open::after { content:' ▴'; }
.mobile-menu .sub { padding-left:1rem; max-height:0; overflow:hidden; transition:max-height .3s; }
.mobile-menu .sub a { font-size:.9rem; color:var(--text-muted); }
.mobile-menu .sub.open { max-height:500px; overflow:visible; }

/* ---- Breadcrumbs ---- */
.breadcrumbs { font-size:.82rem; color:var(--text-dim); padding:1rem 0; }
.breadcrumbs a { color:var(--text-muted); }
.breadcrumbs span { color:var(--text); }

/* ---- Hero ---- */
.hero { text-align:center; padding:3rem 1rem 2rem; }
.hero h1 { font-size:clamp(2rem, 5vw, 3rem); margin-bottom:.75rem; }
.hero p { font-size:1.15rem; color:var(--text-muted); max-width:600px; margin:0 auto 1.5rem; }
.hero-cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.btn {
  display:inline-block; padding:.6rem 1.5rem; border-radius:var(--radius);
  font-weight:600; font-size:.92rem; transition:all .2s;
  text-decoration:none; cursor:pointer; border:none;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-alt); color:#fff; text-decoration:none; }
.btn-outline { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-outline:hover { background:var(--accent); color:#fff; text-decoration:none; }

/* ---- Category Cards ---- */
.cat-grid { display:grid; grid-template-columns:1fr; gap:1rem; padding:2rem 0; }
.cat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  transition:border-color .2s, transform .2s;
  display:flex; flex-direction:column;
}
.cat-card:hover { border-color:var(--accent); transform:translateY(-2px); text-decoration:none; }
.cat-card-icon { font-size:2rem; margin-bottom:.75rem; }
.cat-card h3 { font-size:1.15rem; margin:0 0 .35rem; color:#fff; }
.cat-card p { font-size:.88rem; color:var(--text-muted); margin:0 0 .5rem; flex:1; }
.cat-card .count { font-size:.78rem; color:var(--text-dim); }

/* ---- Article Cards ---- */
.article-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.article-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color .2s;
}
.article-card:hover { border-color:var(--accent); text-decoration:none; }
.article-card-img {
  height:180px; background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:3rem;
}
.article-card-body { padding:1rem 1.25rem 1.25rem; }
.article-card-body .cat-label { font-size:.75rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.article-card-body h3 { font-size:1.05rem; margin:.3rem 0 .4rem; }
.article-card-body p { font-size:.85rem; color:var(--text-muted); margin:0 0 .6rem; }
.article-meta { font-size:.78rem; color:var(--text-dim); display:flex; gap:.75rem; }

/* ---- Section Titles ---- */
.section-title { font-size:1.5rem; margin-bottom:1rem; padding-top:2rem; }
.section-title span { color:var(--accent); }

/* ---- Sidebar ---- */
.sidebar { margin-top:2rem; }
.sidebar-widget { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1rem; }
.sidebar-widget h4 { font-size:.9rem; margin:0 0 .75rem; color:var(--accent); }
.sidebar-widget ul { list-style:none; padding:0; margin:0; }
.sidebar-widget li { margin-bottom:.4rem; }
.sidebar-widget a { font-size:.88rem; color:var(--text-muted); }
.sidebar-widget a:hover { color:#fff; }

/* ---- Article Page ---- */
.article-layout { display:grid; grid-template-columns:1fr; gap:2rem; padding:1rem 0 2rem; }
.article-main { max-width:var(--max-text); }
.article-header { margin-bottom:1.5rem; }
.article-header .cat-label { font-size:.8rem; color:var(--accent); font-weight:600; text-transform:uppercase; }
.article-header h1 { margin:.3rem 0 .5rem; }
.article-header .meta { font-size:.85rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }

.toc {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:1.5rem;
}
.toc summary { font-weight:600; cursor:pointer; color:#fff; font-size:.95rem; }
.toc nav { margin-top:.75rem; }
.toc nav ol { padding-left:1.25rem; margin:0; }
.toc nav li { font-size:.88rem; margin-bottom:.25rem; }
.toc nav a { color:var(--text-muted); }
.toc nav a:hover { color:var(--accent); }

/* ---- Author Block ---- */
.author-block { display:flex; gap:1rem; align-items:center; margin-top:2rem; padding:1.25rem; background:var(--bg-card); border-radius:var(--radius-lg); }
.author-avatar { width:56px; height:56px; border-radius:50%; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--text-dim); flex-shrink:0; }
.author-info h4 { margin:0; font-size:.95rem; }
.author-info p { font-size:.82rem; color:var(--text-muted); margin:0; }

/* ---- Sources ---- */
.sources { margin-top:2rem; padding:1.25rem; background:var(--bg-card); border-radius:var(--radius); }
.sources h3 { margin-top:0; font-size:1rem; }
.sources ol { font-size:.85rem; }
.sources a { word-break:break-all; }

/* ---- FAQ ---- */
.faq { margin-top:2rem; }
.faq h3 { margin-top:0; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
  width:100%; background:none; border:none; color:#fff;
  font-size:.95rem; font-weight:600; text-align:left;
  padding:.85rem 0; cursor:pointer; display:flex; justify-content:space-between;
  font-family:var(--font);
}
.faq-q::after { content:'+'; font-size:1.2rem; color:var(--accent); }
.faq-item.open .faq-q::after { content:'−'; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s; font-size:.9rem; color:var(--text-muted); }
.faq-item.open .faq-a { max-height:300px; padding-bottom:.85rem; }

/* ---- Glossary ---- */
.glossary-nav { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:1.5rem; }
.glossary-nav a { padding:.3rem .6rem; background:var(--bg-card); border-radius:4px; font-size:.85rem; color:var(--text-muted); }
.glossary-nav a:hover, .glossary-nav a.active { background:var(--accent); color:#fff; text-decoration:none; }

/* ---- Search ---- */
.search-page { padding:2rem 0; }
.search-form { display:flex; gap:.5rem; margin-bottom:2rem; }
.search-form input {
  flex:1; background:var(--bg-card); border:1px solid var(--border);
  color:var(--text); padding:.7rem 1rem; border-radius:var(--radius);
  font-family:var(--font); font-size:1rem;
}
.search-form input:focus { outline:none; border-color:var(--accent); }
.search-form button { padding:.7rem 1.5rem; }

/* ---- Footer ---- */
.site-footer {
  background:var(--bg-alt); border-top:1px solid var(--border);
  padding:3rem 1rem 1.5rem; margin-top:3rem;
}
.footer-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:1200px; margin:0 auto; }
.footer-col h4 { font-size:.85rem; color:var(--accent); margin:0 0 .6rem; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:.3rem; }
.footer-col a { font-size:.85rem; color:var(--text-muted); }
.footer-col a:hover { color:#fff; }
.footer-disclaimer { font-size:.8rem; color:var(--text-dim); max-width:1200px; margin:1.5rem auto 0; padding-top:1rem; border-top:1px solid var(--border); }

/* ---- 404 ---- */
.page-404 { text-align:center; padding:4rem 1rem; }
.page-404 h1 { font-size:4rem; color:var(--accent); }
.page-404 p { color:var(--text-muted); margin-bottom:1.5rem; }

/* ---- Accessibility ---- */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn-icon:focus-visible, .faq-q:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.glossary-nav a:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---- Responsive ---- */
@media (min-width:600px) {
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .article-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width:768px) {
  .cat-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:repeat(3,1fr); }
}

@media (min-width:1024px) {
  .main-nav { display:block; }
  .burger { display:none; }
  .article-layout { grid-template-columns:1fr 280px; }
  .article-grid { grid-template-columns:repeat(3,1fr); }
}

@media (min-width:1280px) {
  .cat-grid { grid-template-columns:repeat(4,1fr); }
  .footer-grid { grid-template-columns:repeat(4,1fr); }
}
/* injected: glossary + see-also */
.glossary-group{margin:1.5rem 0}.glossary-group h2{font-size:1.5rem;border-bottom:1px solid var(--border,#e5e7eb);padding-bottom:.25rem;margin-bottom:.75rem}.glossary-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.5rem}.glossary-list li{padding:.5rem .75rem;border:1px solid var(--border,#e5e7eb);border-radius:.5rem;background:#fff}.glossary-list a{text-decoration:none;color:inherit}.glossary-list a:hover strong{color:var(--accent,#2563eb)}.see-also h2{font-size:1.25rem}.see-also ul{list-style:disc}