/* =========================================================
   ONIDEX — Design System
   Light editorial + database aesthetic. Mobile-first.
   No frameworks. No custom fonts loaded externally (uses
   the OS font stack for zero extra network requests).
   ========================================================= */

:root{
  --onx-bg:            #ffffff;
  --onx-bg-soft:        #f6f7f9;
  --onx-card:           #ffffff;
  --onx-border:         #e6e8eb;
  --onx-text:           #1c1f26;
  --onx-text-muted:     #5b6270;
  --onx-text-faint:     #8a8f99;
  --onx-accent:         #2563eb;
  --onx-accent-soft:    #eaf1fe;
  --onx-success:        #1a7f4e;
  --onx-warning:        #b3560b;
  --onx-danger:         #c0362c;
  --onx-radius-sm:      6px;
  --onx-radius:         10px;
  --onx-radius-lg:      14px;
  --onx-shadow:         0 1px 2px rgba(20,20,30,.04), 0 1px 8px rgba(20,20,30,.04);
  --onx-shadow-hover:   0 2px 6px rgba(20,20,30,.06), 0 6px 20px rgba(20,20,30,.07);
  --onx-max:            1200px;
  --onx-content:        740px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  background: var(--onx-bg-soft);
  color: var(--onx-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--onx-accent); text-decoration:none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--onx-accent); outline-offset: 2px;
}
h1,h2,h3,h4{ line-height:1.25; font-weight:700; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
h2{ font-size: clamp(1.2rem, 1.05rem + .8vw, 1.5rem); }
h3{ font-size: 1.1rem; }
p{ margin: 0 0 1em; }
ul{ margin:0 0 1em; padding-left: 1.2em; }
table{ border-collapse: collapse; width:100%; }
button{ font-family: inherit; }

.onx-container{ max-width: var(--onx-max); margin:0 auto; padding: 0 20px; }
.onx-content-width{ max-width: var(--onx-content); margin: 0 auto; }
.onx-section{ padding: 36px 0; }
.onx-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.onx-section-head h2{ margin:0; }
.onx-see-all{ font-size:.9rem; font-weight:600; white-space:nowrap; }

/* ---------- Header ---------- */
.onx-header{
  background: var(--onx-bg);
  border-bottom: 1px solid var(--onx-border);
  position: sticky; top:0; z-index: 50;
}
.onx-header-inner{
  max-width: var(--onx-max); margin:0 auto; padding: 12px 20px;
  display:flex; align-items:center; gap: 20px;
}
.onx-logo{ font-size:1.35rem; font-weight:800; color: var(--onx-text); letter-spacing:-.02em; margin-right: auto; display:flex; align-items:center; }
.onx-logo:hover{ text-decoration:none; color: var(--onx-accent); }
.onx-logo span{ color: var(--onx-accent); }
/* Guards an uploaded custom logo (any native resolution) from ever
   overflowing the sticky header, regardless of theme-support size hints. */
.onx-logo img{ max-height: 40px; width: auto; display:block; }
.custom-logo-link{ display:flex; align-items:center; margin-right:auto; }
.custom-logo-link img{ max-height: 40px; width:auto; }
.onx-nav{ display:none; }
.onx-nav ul{ display:flex; gap: 22px; list-style:none; margin:0; padding:0; }
.onx-nav a{ color: var(--onx-text); font-weight:600; font-size:.95rem; }
.onx-nav a:hover{ color: var(--onx-accent); text-decoration:none; }
.onx-header-actions{ display:flex; align-items:center; gap:10px; }
.onx-search-toggle, .onx-menu-toggle{
  background:none; border:1px solid var(--onx-border); border-radius: var(--onx-radius-sm);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  color: var(--onx-text);
}
.onx-search-toggle:hover, .onx-menu-toggle:hover{ border-color: var(--onx-accent); color: var(--onx-accent); }

.onx-search-panel{ display:none; border-bottom:1px solid var(--onx-border); background: var(--onx-bg-soft); }
.onx-search-panel.is-open{ display:block; }
.onx-search-panel form{ max-width: var(--onx-max); margin:0 auto; padding: 14px 20px; display:flex; gap:8px; }
.onx-search-panel input[type="search"]{
  flex:1; padding: 10px 14px; border:1px solid var(--onx-border); border-radius: var(--onx-radius-sm);
  font-size: 1rem; background: var(--onx-bg);
}
.onx-search-panel button{
  padding: 10px 18px; background: var(--onx-accent); color:#fff; border:none; border-radius: var(--onx-radius-sm);
  font-weight:600; cursor:pointer;
}

.onx-mobile-nav{ display:none; border-top:1px solid var(--onx-border); background: var(--onx-bg); }
.onx-mobile-nav.is-open{ display:block; }
.onx-mobile-nav ul{ list-style:none; margin:0; padding: 6px 20px 16px; }
.onx-mobile-nav a{ display:block; padding: 10px 0; color: var(--onx-text); font-weight:600; border-bottom:1px solid var(--onx-border); }
.onx-mobile-nav .onx-nav-secondary a{ font-weight:500; color: var(--onx-text-muted); font-size:.92rem; }

@media (min-width: 900px){
  .onx-nav{ display:block; }
  .onx-menu-toggle{ display:none; }
  .onx-mobile-nav{ display:none !important; }
}

/* ---------- Buttons / Pills ---------- */
.onx-btn{
  display:inline-flex; align-items:center; gap:6px; padding: 9px 16px; border-radius: var(--onx-radius-sm);
  font-weight:600; font-size:.92rem; border:1px solid var(--onx-border); background: var(--onx-bg); color: var(--onx-text); cursor:pointer;
}
.onx-btn:hover{ border-color: var(--onx-accent); color: var(--onx-accent); text-decoration:none; }
.onx-btn--primary{ background: var(--onx-accent); border-color: var(--onx-accent); color:#fff; }
.onx-btn--primary:hover{ color:#fff; opacity:.92; }

.onx-pill{
  display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding: 3px 9px; border-radius: 999px; background: var(--onx-accent-soft); color: var(--onx-accent);
}
.onx-pill--status{ background:#eef7f0; color: var(--onx-success); }

/* ---------- Cards / Grids ---------- */
.onx-grid{ display:grid; gap: 18px; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px){ .onx-grid--2{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 640px){ .onx-grid--3, .onx-grid--4{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px){ .onx-grid--3{ grid-template-columns: repeat(3,1fr); } .onx-grid--4{ grid-template-columns: repeat(4,1fr); } }

.onx-card{
  background: var(--onx-card); border:1px solid var(--onx-border); border-radius: var(--onx-radius);
  overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .15s ease, transform .15s ease;
  box-shadow: var(--onx-shadow);
}
.onx-card:hover{ box-shadow: var(--onx-shadow-hover); text-decoration:none; }
.onx-card-img{ width:100%; aspect-ratio: 16/9; object-fit:cover; background: var(--onx-bg-soft); }
.onx-card-img--placeholder{ display:flex; align-items:center; justify-content:center; }
.onx-card-body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.onx-card-eyebrow{ font-size:.72rem; font-weight:700; color: var(--onx-accent); text-transform:uppercase; letter-spacing:.03em; }
.onx-card-title{ font-size:1rem; font-weight:700; color: var(--onx-text); margin:0; }
.onx-card:hover .onx-card-title{ color: var(--onx-accent); }
.onx-card-meta{ font-size:.82rem; color: var(--onx-text-faint); display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
.onx-card-excerpt{ font-size:.88rem; color: var(--onx-text-muted); }

/* Game card specific (portrait cover) */
.onx-game-card .onx-card-img{ aspect-ratio: 3/4; }
.onx-game-card-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }

/* ---------- Hero (restrained, no giant imagery) ---------- */
.onx-hero{ padding: 28px 0 8px; }
.onx-hero-grid{ display:grid; gap:18px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .onx-hero-grid{ grid-template-columns: 1.6fr 1fr; } }
.onx-hero-feature .onx-card-img{ aspect-ratio: 16/8; }
.onx-hero-feature .onx-card-title{ font-size:1.4rem; }
.onx-hero-side{ display:flex; flex-direction:column; gap:12px; }
.onx-hero-side .onx-card{ flex-direction:row; }
.onx-hero-side .onx-card-img{ width:120px; aspect-ratio:1; flex-shrink:0; }
.onx-hero-side .onx-card-body{ padding:10px 12px; justify-content:center; }
.onx-hero-side .onx-card-title{ font-size:.92rem; }

/* ---------- Breadcrumbs ---------- */
.onx-breadcrumbs{ padding: 14px 0 0; font-size:.82rem; color: var(--onx-text-faint); }
.onx-breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; }
.onx-breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:6px; color: var(--onx-border); }
.onx-breadcrumbs a{ color: var(--onx-text-faint); }

/* ---------- Article / Guide reading experience ---------- */
.onx-article-header{ padding: 18px 0 10px; }
.onx-article-header h1{ margin-bottom:.3em; }
.onx-article-intro{ font-size:1.08rem; color: var(--onx-text-muted); }
.onx-article-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding: 10px 0; border-top:1px solid var(--onx-border); border-bottom:1px solid var(--onx-border); margin:14px 0; font-size:.85rem; color: var(--onx-text-faint); }
.onx-author{ display:flex; align-items:center; gap:8px; color: var(--onx-text); font-weight:600; }
.onx-author img{ border-radius:50%; }
.onx-date{ display:block; }

.onx-article-body{ font-size:1.05rem; }
.onx-article-body h2{ margin-top:1.6em; }
.onx-article-body h3{ margin-top:1.3em; }
.onx-article-body img{ border-radius: var(--onx-radius); margin: 1em 0; }
.onx-article-body ul, .onx-article-body ol{ padding-left:1.4em; }
.onx-article-body blockquote{ border-left:3px solid var(--onx-accent); margin:1.2em 0; padding: .4em 1em; color: var(--onx-text-muted); background: var(--onx-accent-soft); border-radius: 0 var(--onx-radius-sm) var(--onx-radius-sm) 0; }

.onx-toc{ background: var(--onx-bg); border:1px solid var(--onx-border); border-radius: var(--onx-radius); padding: 14px 18px; margin: 18px 0; }
.onx-toc h2{ font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.5em; color: var(--onx-text-muted); }
.onx-toc ol{ margin:0; padding-left:1.1em; font-size:.92rem; }
@media (min-width: 1100px){
  .onx-guide-layout{ display:grid; grid-template-columns: 1fr 220px; gap: 32px; align-items:start; }
  .onx-toc--sticky{ position: sticky; top: 90px; }
}

.onx-quick-answer{ background: var(--onx-accent-soft); border-radius: var(--onx-radius); padding: 16px 18px; margin: 16px 0; }
.onx-quick-answer h2{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color: var(--onx-accent); margin-bottom:.4em; }

/* ---------- FAQ ---------- */
.onx-faq{ margin: 26px 0; }
.onx-faq-item{ border:1px solid var(--onx-border); border-radius: var(--onx-radius-sm); padding: 10px 14px; margin-bottom:8px; background: var(--onx-bg); }
.onx-faq-item summary{ cursor:pointer; font-weight:600; }
.onx-faq-item div{ padding-top:8px; color: var(--onx-text-muted); }

/* ---------- Game Hub Page ---------- */
.onx-game-header{ padding: 24px 0; background: var(--onx-bg); border-bottom:1px solid var(--onx-border); }
.onx-game-header-grid{ display:grid; gap:20px; grid-template-columns: 1fr; }
@media (min-width: 780px){ .onx-game-header-grid{ grid-template-columns: 220px 1fr; align-items:start; } }
.onx-game-cover{ border-radius: var(--onx-radius); overflow:hidden; border:1px solid var(--onx-border); aspect-ratio: 3/4; }
.onx-game-cover img{ width:100%; height:100%; object-fit:cover; }
.onx-game-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.onx-game-facts{ display:grid; grid-template-columns: repeat(2,1fr); gap: 8px 24px; margin-top:14px; font-size:.9rem; }
@media (min-width:600px){ .onx-game-facts{ grid-template-columns: repeat(4,1fr); } }
.onx-game-facts dt{ color: var(--onx-text-faint); font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; }
.onx-game-facts dd{ margin:2px 0 0; font-weight:600; }

.onx-tabs-nav{ display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--onx-border); margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.onx-tabs-nav a{ padding: 10px 14px; white-space:nowrap; color: var(--onx-text-muted); font-weight:600; font-size:.9rem; border-bottom:2px solid transparent; }
.onx-tabs-nav a:hover, .onx-tabs-nav a.is-active{ color: var(--onx-accent); border-color: var(--onx-accent); text-decoration:none; }

/* ---------- Review Scores ---------- */
.onx-score-summary{ display:flex; align-items:center; gap:14px; background: var(--onx-bg); border:1px solid var(--onx-border); border-radius: var(--onx-radius); padding: 16px 20px; margin: 16px 0; }
.onx-score-circle{ width:64px; height:64px; border-radius:50%; background: var(--onx-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800; flex-shrink:0; }
.onx-score-row{ display:grid; grid-template-columns: 130px 1fr 46px; align-items:center; gap:10px; margin-bottom:8px; font-size:.88rem; }
.onx-score-track{ background: var(--onx-bg-soft); border-radius:999px; height:6px; overflow:hidden; }
.onx-score-fill{ background: var(--onx-accent); height:100%; border-radius:999px; }
.onx-score-value{ text-align:right; color: var(--onx-text-faint); }
.onx-pros-cons{ display:grid; gap:16px; grid-template-columns: 1fr; margin: 18px 0; }
@media (min-width:640px){ .onx-pros-cons{ grid-template-columns: 1fr 1fr; } }
.onx-pros-cons > div{ border:1px solid var(--onx-border); border-radius: var(--onx-radius); padding:14px 16px; }
.onx-pros-cons h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
.onx-pros h3{ color: var(--onx-success); }
.onx-cons h3{ color: var(--onx-danger); }

/* ---------- Filters ---------- */
.onx-filters{ display:flex; flex-wrap:wrap; gap:10px; margin: 0 0 22px; padding: 14px 16px; background: var(--onx-bg); border:1px solid var(--onx-border); border-radius: var(--onx-radius); }
.onx-filters select{ padding: 8px 10px; border:1px solid var(--onx-border); border-radius: var(--onx-radius-sm); background: var(--onx-bg); font-size:.88rem; }
.onx-filters button{ padding: 8px 14px; border-radius: var(--onx-radius-sm); border:1px solid var(--onx-accent); background: var(--onx-accent); color:#fff; font-weight:600; font-size:.88rem; cursor:pointer; }

/* ---------- Tables (requirements, patch notes) ---------- */
.onx-table-wrap{ overflow-x:auto; margin: 1em 0; border:1px solid var(--onx-border); border-radius: var(--onx-radius); }
.onx-table-wrap table{ min-width:480px; }
.onx-table-wrap th, .onx-table-wrap td{ padding:10px 14px; border-bottom:1px solid var(--onx-border); text-align:left; font-size:.92rem; }
.onx-table-wrap th{ background: var(--onx-bg-soft); font-weight:700; }

/* ---------- Archive intro ---------- */
.onx-archive-intro{ padding: 26px 0 6px; }
.onx-archive-intro p{ color: var(--onx-text-muted); max-width: 760px; }

/* ---------- Pagination ---------- */
.onx-pagination{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; padding: 26px 0; }
.onx-pagination a, .onx-pagination span{ padding: 8px 13px; border:1px solid var(--onx-border); border-radius: var(--onx-radius-sm); font-size:.88rem; color: var(--onx-text); }
.onx-pagination a:hover{ border-color: var(--onx-accent); color: var(--onx-accent); text-decoration:none; }
.onx-pagination .current{ background: var(--onx-accent); border-color: var(--onx-accent); color:#fff; font-weight:700; }

/* ---------- Related content blocks ---------- */
.onx-related{ margin: 34px 0; }
.onx-related h2{ font-size:1.1rem; border-bottom:1px solid var(--onx-border); padding-bottom:10px; }

/* ---------- Footer ---------- */
.onx-footer{ background: var(--onx-bg); border-top:1px solid var(--onx-border); margin-top: 50px; }
.onx-footer-grid{ display:grid; gap:26px; grid-template-columns: 1fr; padding: 36px 0 20px; }
@media (min-width: 780px){ .onx-footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.onx-footer h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color: var(--onx-text-faint); margin-bottom:.7em; }
.onx-footer ul{ list-style:none; margin:0; padding:0; }
.onx-footer li{ margin-bottom:8px; font-size:.9rem; }
.onx-footer a{ color: var(--onx-text-muted); }
.onx-footer a:hover{ color: var(--onx-accent); }
.onx-footer-bottom{ border-top:1px solid var(--onx-border); padding: 16px 0; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:.82rem; color: var(--onx-text-faint); }
.onx-social{ display:flex; gap:12px; }

/* ---------- Widgets ---------- */
.onx-widget{ margin-bottom: 22px; }
.onx-widget-title{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color: var(--onx-text-faint); }

/* ---------- 404 / empty states ---------- */
.onx-empty-state{ text-align:center; padding: 70px 20px; color: var(--onx-text-muted); }
.onx-empty-state h1{ font-size:2.2rem; }

/* ---------- Utility ---------- */
.onx-visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.onx-muted{ color: var(--onx-text-muted); }
.onx-small{ font-size:.85rem; }