:root {
--v3-bg:#1a1410;
--v3-bg-2:#221a14;
--v3-bg-3:#0d0907;
--v3-bg-page:#0a0604;
--v3-ink:#e8d9b6;
--v3-ink-2:#c4b594;
--v3-ink-3:#a88a55;
--v3-muted:#a08a5c;
--v3-gold:#d4a747;
--v3-gold-br:#f4c75c;
--v3-rule:#5a3a18;
--v3-rule-soft:#3a2818;
--v3-red:#c8392a;
--v3-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--v3-display:'Cinzel',Georgia,serif;
--v3-serif:'Source Serif 4',Georgia,serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--v3-bg-page); color: var(--v3-ink); font-family: var(--v3-body); font-size: 15px; line-height: 1.6; min-height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* Page shell — every page lives inside this 1240px column */
.v3-shell { max-width: 1240px; width: 100%; margin: 0 auto; background: var(--v3-bg); border-left: 1px solid var(--v3-rule); border-right: 1px solid var(--v3-rule); flex: 1; }
/* Site topbar — logo + main nav, always at the top */
.v3-sitebar { background: var(--v3-bg-3); border-bottom: 1px solid var(--v3-rule); }
.v3-sitebar-inner { max-width: 1240px; margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; gap: 32px; }
.v3-sitebar-logo img { height: 40px; width: auto; }
.v3-sitebar-nav { display: flex; gap: 22px; font-family: var(--v3-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.v3-sitebar-nav a { color: #f4e9d1; font-weight: 700; padding: 6px 0; transition: color 0.2s; }
.v3-sitebar-nav a:hover { color: var(--v3-gold); }
.v3-sitebar-nav a.active { color: var(--v3-gold-br); box-shadow: inset 0 -1px 0 var(--v3-gold); }
.v3-sitebar-nav a { white-space: nowrap; }
.v3-sitebar-find input { width: 180px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 2px; color: var(--v3-ink); padding: 6px 10px; font: 13px var(--v3-body); }
.v3-sitebar-find input::placeholder { color: var(--v3-muted); }
.v3-sitebar-find input:focus { outline: none; border-color: var(--v3-gold); }
.v3-sitebar-find { position: relative; }
.v3-sitebar-findlink { display: none; color: var(--v3-gold-br); padding: 6px; }
.v3-sitebar-findlink svg { display: block; width: 20px; height: 20px; }
@media (max-width: 1100px) { .v3-sitebar-find { display: none; } .v3-sitebar-findlink { display: block; } }
/* Search suggestions under any [data-rg-suggest] box (the header's, the home page's). */
.rg-sug { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 420px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); overflow-y: auto; background: var(--v3-bg-3); border: 1px solid var(--v3-gold); border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.55); padding: 6px 0; text-align: left; }
.rg-sug[hidden] { display: none; }
.rg-sug h6 { margin: 8px 14px 4px; font-family: var(--v3-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-muted); }
.rg-sug a { display: flex; align-items: center; gap: 12px; padding: 7px 14px; color: #f4e9d1; font-family: var(--v3-serif); font-size: 15px; line-height: 1.3; }
.rg-sug a small { font-family: var(--v3-body); font-size: 12px; color: var(--v3-ink-3); margin-left: auto; white-space: nowrap; padding-left: 8px; }
.rg-sug a.on, .rg-sug a:hover { background: var(--v3-bg-2); color: var(--v3-gold-br); }
.rg-sug .cov { flex: none; width: 30px; height: 40px; border-radius: 2px; background: var(--v3-bg-2) center/cover no-repeat; border: 1px solid var(--v3-rule); }
.rg-sug .all { margin-top: 4px; border-top: 1px solid var(--v3-rule); padding-top: 10px; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-gold); }
.rg-sug .none { padding: 10px 14px; font-size: 14px; color: var(--v3-ink-3); }
.v3-sitebar-spacer { flex: 1; }
.v3-sitebar-meta { font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-ink-2); }
/* Site footer */
.v3-sitefoot { background: var(--v3-bg-3); border-top: 1px solid var(--v3-rule); margin-top: 32px; padding: 28px 0 20px; }
.v3-sitefoot-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.v3-sitefoot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; max-width: 1240px; margin: 0 auto; margin-bottom: 22px; }
.v3-sitefoot h5 { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.24em; color: var(--v3-gold); text-transform: uppercase; margin: 0 0 12px; }
.v3-sitefoot p { font-size: 13px; color: var(--v3-ink-3); margin: 0 0 6px; line-height: 1.55; }
.v3-sitefoot ul { list-style: none; padding: 0; margin: 0; }
.v3-sitefoot li { padding: 4px 0; }
.v3-sitefoot li a { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.14em; color: var(--v3-ink-2); text-transform: uppercase; transition: color 0.2s; }
.v3-sitefoot li a:hover { color: var(--v3-gold); }
.v3-sitefoot-bot { display: flex; justify-content: space-between; padding: 18px 0 0; border-top: 1px solid var(--v3-rule); max-width: 1240px; margin: 0 auto; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-muted); text-transform: uppercase; }
@media (max-width: 860px) {
.v3-sitebar-inner { padding: 10px 0 0 16px; gap: 0; flex-direction: column; align-items: flex-start; }
.v3-sitebar-nav { width: 100%; overflow-x: auto; scrollbar-width: none; gap: 20px; font-size: 11px; padding: 8px 16px 8px 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.v3-sitebar-nav::-webkit-scrollbar { display: none; }
.v3-sitebar-spacer { display: none; }
.v3-sitebar-inner { position: relative; }
.v3-sitebar-findlink { position: absolute; top: 12px; right: 16px; }
.v3-sitebar-meta { display: none; }
.v3-sitefoot-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 16px; }
.v3-sitefoot-bot { flex-direction: column; gap: 6px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 540px) {
.v3-sitebar-logo img { height: 32px; }
}
body.home-v3 .v3-sitebar { display: none; }
/* Site-wide editorial prose rules (Smashing-derived legibility) */
.v3-prose { font-family: var(--v3-serif); font-size: 18px; line-height: calc(1ex / 0.32); color: var(--v3-ink); max-width: 68ch; margin-left: auto; margin-right: auto; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; font-variant-numeric: oldstyle-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 540px) { @supports (font-size-adjust: 0.45) { .v3-prose { font-size-adjust: 0.45; } } }
.v3-prose p { margin: 0 0 calc(1ex / 0.32); text-wrap: pretty; }
.v3-prose h2 { font-family: var(--v3-display); font-size: 1.55em; font-weight: 500; color: var(--v3-gold); letter-spacing: 0.03em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0 calc(1ex / 0.5) 0; text-wrap: balance; }
.v3-prose h3 { font-family: var(--v3-display); font-size: 1.15em; font-weight: 500; color: #f4e9d1; letter-spacing: 0.02em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0 calc(1ex / 0.5) 0; text-wrap: balance; }
.v3-prose strong, .v3-prose b { color: #f4e9d1; font-weight: 600; }
.v3-prose em, .v3-prose i { color: var(--v3-ink-2); }
.v3-prose a { color: var(--v3-gold); text-decoration: underline; text-decoration-color: var(--v3-rule); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.v3-prose a:hover { color: var(--v3-gold-br); text-decoration-color: var(--v3-gold); }
.v3-prose a:focus-visible { outline: 2px solid var(--v3-gold); outline-offset: 2px; border-radius: 2px; }
.v3-prose ul, .v3-prose ol { margin: 0 0 calc(1ex / 0.32); padding-left: 26px; }
.v3-prose li { margin: calc(1ex / 0.5) 0; }
.v3-prose blockquote { border-left: 3px solid var(--v3-gold); padding: 0.4em 1.1em; margin: calc(1ex / 0.32) 0; font-style: italic; color: var(--v3-ink-2); background: var(--v3-bg-2); text-wrap: pretty; }
.v3-prose img { max-width: 100%; height: auto; border: 1px solid var(--v3-rule); border-radius: 3px; margin: calc(1ex / 0.32) 0; }
.v3-prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--v3-rule), transparent); margin: calc(1ex / 0.25) 0; }
.v3-prose pre { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.78em; line-height: 1.55; color: var(--v3-ink-2); background: var(--v3-bg-3); border: 1px solid var(--v3-rule); border-left: 3px solid var(--v3-gold); padding: 0.8em 1.1em; margin: calc(1ex / 0.32) 0; overflow-x: auto; border-radius: 2px; white-space: pre; hyphens: none; }
/* Site-wide lightbox */
.v3-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 40px; }
.v3-lightbox.open { display: flex; }
.v3-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.8); border: 2px solid var(--v3-gold); }
.v3-lightbox-close { position: absolute; top: 18px; right: 24px; width: 44px; height: 44px; border: 2px solid var(--v3-gold); background: rgba(13,9,7,0.7); color: var(--v3-gold); font-family: var(--v3-display); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v3-lightbox-close:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.v3-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 2px solid var(--v3-gold); background: rgba(13,9,7,0.7); color: var(--v3-gold); font-family: var(--v3-display); font-size: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v3-lightbox-nav:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.v3-lightbox-nav.prev { left: 24px; }
.v3-lightbox-nav.next { right: 24px; }
.v3-lightbox-cap { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.2em; color: var(--v3-ink-3); text-transform: uppercase; }
@media (max-width: 540px) {
.v3-prose { font-size: 16.5px; line-height: 1.55; max-width: none; padding: 0 4px; }
.v3-prose p { margin: 0 0 14px; }
.v3-prose h2 { font-size: 22px; margin: 28px 0 10px; }
.v3-prose h3 { font-size: 18px; margin: 22px 0 8px; }
}
/* RPG Gamers browse pages: games, genres and worlds, platforms, companies. Readability pass
2026-10-16: no display-font label under 11px (badges on art 10px), info lines in the body face,
muted text #a08a5c (5:1). Tokens come from
layouts/_html-wrapper-v3; the ga3- rules are the games archive's own, the rg- rules are new. */
/* ---- from games/index (ga3-) ---- */
.ga3-crumbs{padding:12px 28px;background:var(--v3-bg-3);border-bottom:1px solid var(--v3-rule);font-family:var(--v3-display);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--v3-ink-2)}
.ga3-crumbs a{color:#f4e9d1}
.ga3-crumbs .sep{color:var(--v3-rule);margin:0 8px}
.ga3-crumbs .here{color:var(--v3-gold)}
.ga3-head{padding:36px 28px 24px;border-bottom:1px solid var(--v3-rule)}
.ga3-eyebrow{font-family:var(--v3-display);font-size:11.5px;font-weight:500;letter-spacing:.28em;color:var(--v3-gold-br);text-transform:uppercase;margin:0 0 14px}
.ga3-title{font-family:var(--v3-display);font-size:44px;font-weight:600;color:#f4e9d1;margin:0 0 10px;letter-spacing:.01em;line-height:1.1}
.ga3-deck{font-family:var(--v3-serif);font-size:18px;font-style:italic;color:var(--v3-ink-2);margin:0;max-width:720px}
.ga3-sec-head{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 12px}
.ga3-sec-head h2{font-family:var(--v3-display);font-size:13px;font-weight:600;letter-spacing:.28em;color:var(--v3-gold);text-transform:uppercase;margin:0;white-space:nowrap}
.ga3-sec-head h2::before{content:'⚜';margin-right:10px}
.ga3-sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--v3-rule),transparent);margin:0 16px}
.ga3-sec-head .meta{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;color:var(--v3-muted);text-transform:uppercase;white-space:nowrap}
.ga3-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:4px 28px 24px}
.ga3-tile{position:relative;display:flex;flex-direction:column;gap:10px;transition:transform .25s;min-width:0}
.ga3-tile:hover{transform:translateY(-3px)}
.ga3-cover{position:relative;display:block;aspect-ratio:3/4;background-size:cover;background-position:center;background-color:var(--v3-bg-2);border:2px solid var(--v3-rule);border-radius:3px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.ga3-tile:hover .ga3-cover{border-color:var(--v3-gold);box-shadow:0 6px 22px rgba(0,0,0,.5)}
.ga3-cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--v3-display);font-size:12px;letter-spacing:.18em;color:var(--v3-gold);text-align:center;padding:0 12px;line-height:1.3;text-transform:uppercase}
.ga3-year-badge{position:absolute;top:8px;right:8px;font-family:var(--v3-display);font-size: 10px;font-weight:500;letter-spacing:.15em;padding:2px 7px;background:rgba(13,9,7,.78);color:var(--v3-gold-br);border:1px solid var(--v3-gold);border-radius:2px;z-index:3}
.ga3-hover-tags{position:absolute;bottom:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:4px;z-index:4;opacity:0;transition:opacity .25s}
.ga3-tile:hover .ga3-hover-tags{opacity:1}
.ga3-hover-tags span{font-family:var(--v3-display);font-size: 10px;letter-spacing:.12em;padding:2px 6px;background:rgba(13,9,7,.85);color:var(--v3-gold-br);border:1px solid var(--v3-gold);border-radius:2px;text-transform:uppercase;white-space:nowrap}
.ga3-tile h3{font-family:var(--v3-serif);font-size:14.5px;color:#f4e9d1;margin:0 0 3px;font-weight:500;line-height:1.25;text-wrap:balance;overflow-wrap:anywhere}
.ga3-tile-meta{font-family: var(--v3-body);font-size: 12px;letter-spacing: 0.01em;color:var(--v3-ink-3);text-transform: none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga3-pager{display:flex;justify-content:center;align-items:center;gap:6px;padding:18px 28px;flex-wrap:wrap}
.ga3-pager a,.ga3-pager span{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;padding:8px 14px;border:1px solid var(--v3-rule);color:var(--v3-ink-2);text-transform:uppercase}
.ga3-pager a:hover{color:var(--v3-gold);border-color:var(--v3-gold)}
.ga3-pager .current{color:var(--v3-bg-3);background:var(--v3-gold);border-color:var(--v3-gold);font-weight:600}
.ga3-pager .gap{border-color:transparent}
/* ---- new: head ledger ---- */
.rg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.rg-ledger{display:flex;margin:0;border:1px solid var(--v3-rule);background:var(--v3-bg-3)}
.rg-ledger div{padding:10px 18px;border-left:1px solid var(--v3-rule-soft);text-align:center}
.rg-ledger div:first-child{border-left:0}
.rg-ledger dt{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;color:var(--v3-muted);text-transform:uppercase}
.rg-ledger dd{white-space:nowrap;margin:2px 0 0;font-family:var(--v3-display);font-size:22px;font-weight:600;color:var(--v3-gold-br);font-variant-numeric:lining-nums tabular-nums}
/* ---- new: toolbar ---- */
.rg-tools{margin:20px 28px 0;padding:16px 18px;background:var(--v3-bg-2);border:1px solid var(--v3-rule);border-radius:3px}
.rg-bar{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:12px}
.rg-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.rg-field>span{font-family:var(--v3-display);font-size: 11px;font-weight:600;letter-spacing: 0.16em;text-transform:uppercase;color:var(--v3-ink-3)}
.rg-field input,.rg-field select{width:100%;background:var(--v3-bg-3);border:1px solid var(--v3-rule);border-radius:2px;color:var(--v3-ink);padding:8px 10px;font-size:14px}
.rg-field input::placeholder{color:var(--v3-muted)}
.rg-field input:focus,.rg-field select:focus{outline:none;border-color:var(--v3-gold)}
.rg-filters-btn{display:none}
.rg-az{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--v3-rule-soft);display:flex;flex-wrap:wrap;gap:4px}
.rg-az li{flex:1 1 0;min-width:34px}
.rg-az a{display:flex;flex-direction:column;align-items:center;padding:5px 6px 4px;border:1px solid var(--v3-rule-soft);border-radius:2px;font-family:var(--v3-display);font-size:13px;font-weight:600;color:#f4e9d1;line-height:1.1}
.rg-az a small{font-family:var(--v3-body);font-size:10px;font-weight:500;color:var(--v3-muted);margin-top:2px}
.rg-az a:hover{border-color:var(--v3-gold);color:var(--v3-gold)}
.rg-az a.on{background:var(--v3-gold);border-color:var(--v3-gold);color:var(--v3-bg-3)}
.rg-az a.on small{color:var(--v3-bg-2)}
.rg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.rg-chips button{background:transparent;border:1px solid var(--v3-gold);color:var(--v3-gold-br);border-radius:2px;padding:3px 9px;font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.12em;text-transform:uppercase;cursor:pointer}
.rg-chips button b{margin-left:4px;color:var(--v3-ink)}
.rg-chips a{font-size:12px;color:var(--v3-ink-3);text-decoration:underline;text-underline-offset:3px;margin-left:6px}
/* ---- new: genres index ---- */
.rg-ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:4px 28px 8px}
.rg-gcard{display:flex;gap:16px;padding:14px;background:var(--v3-bg-2);border:1px solid var(--v3-rule);border-radius:3px;transition:border-color .2s,transform .2s;min-width:0}
.rg-gcard:hover{border-color:var(--v3-gold);transform:translateY(-2px)}
.rg-fan{position:relative;flex:0 0 104px;height:108px}
.rg-fan span{position:absolute;top:4px;width:62px;aspect-ratio:3/4;background:var(--v3-bg-3) center/cover;border:1.5px solid var(--v3-rule);border-radius:2px;box-shadow:0 4px 12px rgba(0,0,0,.55)}
.rg-fan span:nth-child(1){left:0;transform:rotate(-7deg)}
.rg-fan span:nth-child(2){left:21px;top:0;z-index:2}
.rg-fan span:nth-child(3){left:42px;transform:rotate(7deg);z-index:1}
.rg-gcard:hover .rg-fan span{border-color:var(--v3-gold)}
.rg-gtext{min-width:0}
.rg-gtext h3{font-family:var(--v3-display);font-size:17px;font-weight:600;color:#f4e9d1;margin:2px 0 4px;letter-spacing:.02em}
.rg-gtext p{font-family:var(--v3-serif);font-size:13.5px;line-height:1.45;color:var(--v3-ink-2);margin:0 0 8px}
.rg-count{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;color:var(--v3-gold);text-transform:uppercase}
.rg-worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:4px 28px 8px}
.rg-world{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;padding:14px;background:var(--v3-bg-2) center 30%/cover;border:2px solid var(--v3-rule);border-radius:3px;transition:border-color .2s}
.rg-world:hover{border-color:var(--v3-gold)}
.rg-world h3{font-family:var(--v3-display);font-size:18px;font-weight:600;color:#f4e9d1;margin:0;text-shadow:0 2px 8px #000}
.rg-world span{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;color:var(--v3-gold-br);text-transform:uppercase}
.rg-taglist{list-style:none;margin:0;padding:4px 28px 8px;columns:4 220px;column-gap:24px}
.rg-taglist li{break-inside:avoid}
.rg-taglist a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dotted var(--v3-rule-soft);font-size:14px;color:var(--v3-ink)}
.rg-taglist a:hover span{color:var(--v3-gold)}
.rg-taglist b{font-family:var(--v3-display);font-size:11px;color:var(--v3-muted);font-weight:600}
/* ---- new: genre page ---- */
.rg-related{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:14px 28px 0}
.rg-related span{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;color:var(--v3-muted);text-transform:uppercase;margin-right:6px}
.rg-related a{border:1px solid var(--v3-rule);border-radius:2px;padding:3px 10px;font-size:13px;color:var(--v3-ink-2)}
.rg-related a b{color:var(--v3-muted);font-weight:500;margin-left:3px}
.rg-related a:hover{border-color:var(--v3-gold);color:var(--v3-gold)}
.rg-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:4px 28px 4px}
/* ---- new: platforms ---- */
.rg-fams{columns:3 340px;column-gap:20px;padding:24px 28px 8px}
.rg-fam{break-inside:avoid;margin:0 0 20px;padding:14px 16px 10px;background:var(--v3-bg-2);border:1px solid var(--v3-rule);border-radius:3px}
.rg-fam h3{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--v3-display);font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v3-gold);margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--v3-rule-soft)}
.rg-fam h3 small{font-size: 11px;letter-spacing: 0.16em;color:var(--v3-muted)}
.rg-fam ul{list-style:none;margin:0;padding:0}
.rg-fam a{display:grid;grid-template-columns:minmax(0,1.25fr) 1fr 44px;align-items:center;gap:10px;padding:4px 0;font-size:13.5px;color:#f4e9d1}
.rg-fam a:hover .nm{color:var(--v3-gold)}
.rg-fam .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-fam .bar{height:5px;background:var(--v3-bg-3);border-radius:2px;overflow:hidden}
.rg-fam .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--v3-rule),var(--v3-gold))}
.rg-fam b{font-family:var(--v3-display);font-size:11px;font-weight:600;color:var(--v3-ink-3);text-align:right}
.rg-fam li.thin a{color:var(--v3-muted);pointer-events:none}
.rg-fam li.thin .bar i{background:var(--v3-rule-soft)}
/* ---- new: companies ---- */
.rg-houses{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:4px 28px 8px}
.rg-house{position:relative;display:block;padding:14px 16px 12px;background:var(--v3-bg-2);border:1px solid var(--v3-rule);border-left:3px solid var(--v3-gold);border-radius:2px;transition:border-color .2s;min-width:0}
.rg-house:hover{border-color:var(--v3-gold)}
.rg-house h3{font-family:var(--v3-serif);font-size:16.5px;font-weight:500;color:#f4e9d1;margin:0 48px 2px 0;line-height:1.25;overflow-wrap:anywhere}
.rg-house p{margin:0;font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;text-transform:uppercase;color:var(--v3-ink-3)}
.rg-house-n{position:absolute;top:12px;right:14px;font-family:var(--v3-display);font-size:22px;font-weight:600;color:var(--v3-gold-br);line-height:1}
.rg-house-y{display:block;margin-top:6px;font-size:12px;color:var(--v3-muted)}
.rg-tools .rg-bar.co{grid-template-columns:2fr 1fr 1fr}
.rg-colist{list-style:none;margin:0;padding:4px 28px 8px;columns:3 260px;column-gap:28px}
.rg-colist li{break-inside:avoid}
.rg-colist a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dotted var(--v3-rule-soft);font-size:14px;color:#f4e9d1}
.rg-colist a:hover span{color:var(--v3-gold)}
.rg-colist b{font-family:var(--v3-display);font-size:11px;color:var(--v3-ink-3);font-weight:600}
.rg-colist li.one a{color:var(--v3-ink-3)}
.rg-colist li.one b{color:var(--v3-muted)}
/* ---- new: role badge on company page tiles ---- */
.rg-role{position:absolute;top:8px;left:8px;z-index:3;font-family:var(--v3-display);font-size: 10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:2px 6px;background:var(--v3-gold);color:var(--v3-bg-3);border-radius:2px}
/* ---- new: game page facts, linked ---- */
.rg-gamefacts{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:32px 28px}
.rg-gf-cover{aspect-ratio:3/4;background:var(--v3-bg-2) center/cover;border:2px solid var(--v3-gold);border-radius:3px}
.rg-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:18px 0 6px;border-top:1px solid var(--v3-rule)}
.rg-facts div{padding:10px 0;border-bottom:1px solid var(--v3-rule-soft)}
.rg-facts dt{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;text-transform:uppercase;color:var(--v3-muted)}
.rg-facts dd{margin:2px 0 0;font-size:15px}
.rg-facts a,.rg-pills a{color:var(--v3-gold);text-decoration:underline;text-decoration-color:var(--v3-rule);text-underline-offset:.2em}
.rg-facts a:hover,.rg-pills a:hover{color:var(--v3-gold-br);text-decoration-color:var(--v3-gold)}
.rg-facth{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;text-transform:uppercase;color:var(--v3-ink-3);margin:16px 0 6px}
.rg-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rg-pills a{display:inline-block;padding:3px 10px;border:1px solid var(--v3-rule);border-radius:2px;text-decoration:none;font-size:13px}
.rg-pills a:hover{border-color:var(--v3-gold)}
@media (max-width:1100px){.ga3-grid{grid-template-columns:repeat(4,1fr)}
.rg-strip{grid-template-columns:repeat(4,1fr)}.rg-strip>:nth-child(n+5){display:none}
.rg-ggrid{grid-template-columns:repeat(2,1fr)}
.rg-houses{grid-template-columns:repeat(3,1fr)}
.rg-bar{grid-template-columns:1fr 1fr 1fr}.rg-find{grid-column:1/-1}
}
@media (max-width:860px){.ga3-title{font-size:30px}
.ga3-head{padding:24px 16px 18px}
.ga3-deck{font-size:16px}
.rg-head{flex-direction:column;align-items:stretch;gap:16px}
.rg-ledger div{flex:1;padding:8px 6px}.rg-ledger dd{font-size:17px}
.ga3-crumbs{padding:10px 16px}
.ga3-sec-head{padding:20px 16px 10px}
.ga3-sec-head .meta{display:none}
.ga3-grid{grid-template-columns:repeat(3,1fr);gap:14px;padding:4px 16px 18px}
.rg-strip{grid-template-columns:repeat(3,1fr);padding:4px 16px}.rg-strip>:nth-child(n+4){display:none}
.rg-tools{margin:14px 16px 0;padding:12px}
.rg-related{padding:12px 16px 0}
.rg-ggrid,.rg-worlds,.rg-houses,.rg-taglist,.rg-colist{padding-left:16px;padding-right:16px}
.rg-worlds{grid-template-columns:repeat(2,1fr)}
.rg-houses{grid-template-columns:repeat(2,1fr)}
.rg-fams{padding:16px 16px 4px}
.rg-gamefacts{grid-template-columns:1fr;padding:20px 16px}.rg-gf-cover{width:180px}
}
@media (max-width:540px){.ga3-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.rg-strip{grid-template-columns:repeat(2,1fr)}.rg-strip>:nth-child(n+3){display:none}
.rg-ggrid{grid-template-columns:1fr}
.rg-bar{grid-template-columns:1fr auto}
.rg-find{grid-column:auto}
.rg-find>span{display:none}
.rg-filters-btn{display:block;align-self:end;background:var(--v3-bg-3);border:1px solid var(--v3-gold);color:var(--v3-gold-br);border-radius:2px;padding:8px 12px;font-family:var(--v3-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.rg-bar>.rg-field:not(.rg-find){display:none}
.rg-tools.open .rg-bar>.rg-field{display:flex;grid-column:1/-1}
.rg-az{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-12px;padding-right:12px}
.rg-az li{flex:0 0 38px}
.rg-houses{grid-template-columns:1fr}
.rg-tile h3{font-size:13.5px}
.ga3-pager a,.ga3-pager span{padding:6px 10px;font-size: 11px}
.rg-ledger dt{font-size: 11px;letter-spacing: 0.14em}
}
/* Cover images are ![]()
(lazy, sized) rather than CSS backgrounds. */
.ga3-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ga3-cover-fallback{z-index:0}
.ga3-cover img{z-index:1}
.ga3-empty,.rg-none{padding:40px 28px;text-align:center;font-family:var(--v3-display);font-size:11px;letter-spacing:.22em;color:var(--v3-muted);text-transform:uppercase}
.rg-none{display:none}.rg-none.is-on{display:block}
.rg-none button{margin-left:8px;background:transparent;border:1px solid var(--v3-gold);color:var(--v3-gold-br);padding:4px 10px;font:inherit;cursor:pointer}
.rg-az span{display:flex;flex-direction:column;align-items:center;padding:5px 6px 4px;border:1px solid transparent;font-family:var(--v3-display);font-size:13px;font-weight:600;color:#7a5f3a;line-height:1.1}
.rg-az span small{font-family:var(--v3-body);font-size:10px;color:#7a5f3a}
.rg-az a[aria-disabled="true"]{opacity:.35;pointer-events:none}
.rg-range{text-align:center;font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;color:var(--v3-muted);text-transform:uppercase;margin:0 0 8px}
.rg-pager-js{display:none}
.rg-live .rg-pager-js{display:flex}
.rg-live .rg-srvpage{display:none}
.rg-srvpage{grid-column:1/-1;list-style:none}
.rg-grid-wrap.is-loading{opacity:.55;transition:opacity .15s}
.ga3-pager button{font-family:var(--v3-display);font-size: 11px;letter-spacing: 0.16em;padding:8px 14px;border:1px solid var(--v3-rule);color:var(--v3-ink-2);background:transparent;text-transform:uppercase;cursor:pointer}
.ga3-pager button:hover{color:var(--v3-gold);border-color:var(--v3-gold)}
.ga3-pager button[aria-current]{color:var(--v3-bg-3);background:var(--v3-gold);border-color:var(--v3-gold);font-weight:600}
.ga3-pager button:disabled{opacity:.35;cursor:default}
.rg-fam li.thin a,.rg-fam li.thin span.row{color:var(--v3-muted)}
.rg-fam span.row{display:grid;grid-template-columns:minmax(0,1.25fr) 1fr 44px;align-items:center;gap:10px;padding:4px 0;font-size:13.5px}
.rg-taglist span.row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dotted var(--v3-rule-soft);font-size:14px;color:var(--v3-muted)}
.rg-taglist span.row b{font-family:var(--v3-display);font-size:11px;color:var(--v3-rule);font-weight:600}
.rg-colist li.hide{display:none}
.rg-dim{color:var(--v3-muted)}
/* Tiles are ... here (the archive's were bare links). */
ul.ga3-grid,ul.rg-strip{list-style:none;margin:0}
.ga3-tile>a{display:flex;flex-direction:column;gap:10px;min-width:0}
.ga3-tile-text{display:block;min-width:0;padding:0 2px}
.ga3-tile-meta{display:block}
.ga3-tile h3{overflow-wrap:anywhere}
body.game-v3 { --v3-bg:#1a1410; --v3-bg-2:#221a14; --v3-bg-3:#0d0907; --v3-ink:#e8d9b6; --v3-ink-2:#c4b594; --v3-ink-3:#a88a55; --v3-muted:#a08a5c; --v3-gold:#d4a747; --v3-gold-br:#f4c75c; --v3-rule:#5a3a18; --v3-rule-soft:#3a2818; --v3-red:#c8392a; --v3-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --v3-display:'Cinzel',Georgia,serif; --v3-serif:'Source Serif 4',Georgia,serif; background:#0a0604; color:var(--v3-ink); font-family:var(--v3-body); font-size:15px; line-height:1.6; }
body.game-v3 * { box-sizing: border-box; }
body.game-v3 a { color: inherit; text-decoration: none; }
.gv3 { max-width: 1240px; margin: 0 auto; background: var(--v3-bg); border-left: 1px solid var(--v3-rule); border-right: 1px solid var(--v3-rule); }
.gv3-crumbs { padding: 12px 28px; background: var(--v3-bg-3); border-bottom: 1px solid var(--v3-rule); font-family: var(--v3-display); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v3-ink-2); }
.gv3-crumbs a { color: #f4e9d1; }
.gv3-crumbs a:hover { color: var(--v3-gold); }
.gv3-crumbs .sep { color: var(--v3-rule); margin: 0 8px; }
.gv3-crumbs .here { color: var(--v3-gold); }
.gv3-hero { position: relative; height: 380px; overflow: hidden; background-color: var(--v3-bg-3); background: linear-gradient(180deg, var(--v3-bg-2) 0%, var(--v3-bg) 100%); }
.gv3-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* The banner art is often busy and bright (a title screen, a screenshot): the scrim darkens toward the
bottom and the left, where the title and facts sit, and leaves the art visible top right. */
.gv3-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,9,7,0.78) 0%, rgba(13,9,7,0.42) 45%, rgba(13,9,7,0.06) 85%), linear-gradient(180deg, rgba(13,9,7,0.1) 0%, rgba(13,9,7,0.5) 55%, rgba(26,20,16,0.95) 100%); }
.gv3-hero-corner { position: absolute; top: 16px; width: 30px; height: 30px; border: 2px solid var(--v3-gold); z-index: 3; }
.gv3-hero-corner.tl { left: 16px; border-right: none; border-bottom: none; }
.gv3-hero-corner.tr { right: 16px; border-left: none; border-bottom: none; }
.gv3-meta { position: relative; padding: 0 28px 28px; margin-top: -210px; border-bottom: 2px solid #6b4a22; z-index: 5; display: grid; grid-template-columns: 200px 1fr 240px; gap: 28px; align-items: end; }
.gv3-meta > .gv3-cover { align-self: end; }
.gv3-meta > .gv3-title-block { align-self: end; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.gv3-meta { border-bottom: 2px solid #6b4a22; }
.gv3-cover { position: relative; width: 200px; aspect-ratio: 3/4; background-size: cover; background-position: center; background-color: var(--v3-bg-2); border: 3px solid var(--v3-gold); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.7); overflow: hidden; }
.gv3-cover::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(212,167,71,0.5); border-radius: 2px; pointer-events: none; z-index: 2; }
.gv3-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.gv3-cover-fallback { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--v3-display); font-size: 14px; letter-spacing: 0.2em; color: var(--v3-gold); text-align: center; padding: 0 16px; line-height: 1.4; text-transform: uppercase; }
.gv3-title-block { padding-bottom: 18px; }
.gv3-eyebrow { font-family: var(--v3-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.28em; color: var(--v3-gold-br); text-transform: uppercase; margin: 0 0 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
.gv3-title { font-family: var(--v3-display); font-size: 42px; font-weight: 600; color: #f4e9d1; margin: 0 0 8px; letter-spacing: 0.02em; line-height: 1.05; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.gv3-title .year { color: var(--v3-gold); font-size: 32px; font-weight: 600; margin-left: 8px; }
/* Separators sit left of each fact; the facts start 19px left of the column and that strip is
clipped, so whichever fact starts a row (the second row too) has no rule and lines up. */
.gv3-facts { display: flex; gap: 0; flex-wrap: wrap; row-gap: 10px; margin-top: 14px; margin-left: -19px; font-weight: 600; clip-path: inset(-16px -40px -16px 19px); }
.gv3-fact { padding: 0 18px; border-left: 1px solid var(--v3-rule); }
/* a developer or publisher field with no company links prints an empty value */
.gv3-fact:has(.gv3-fact-val:empty) { display: none; }
.gv3-fact-lbl { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-ink-3); text-transform: uppercase; margin-bottom: 3px; text-shadow: 0 1px 6px rgba(0,0,0,0.85); }
.gv3-fact-val a { color: inherit; text-decoration: underline; text-decoration-color: rgba(212,167,71,0.45); text-underline-offset: 0.2em; }
.gv3-fact-val a:hover { color: #fff; text-decoration-color: var(--v3-gold); }
ul.gv3-pills li a:hover { border-color: var(--v3-gold); color: var(--v3-gold-br); }
.gv3-fact-val { font-family: var(--v3-display); font-size: 14px; color: var(--v3-gold-br); letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.85), 0 2px 4px rgba(0,0,0,0.7); }
.gv3-actions { display: flex; font-weight: 600; flex-direction: column; gap: 8px; padding-bottom: 18px; }
.gv3-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--v3-gold); color: var(--v3-gold); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; background: transparent; cursor: pointer; transition: background 0.2s, color 0.2s; }
.gv3-cta.primary { background: var(--v3-gold); color: var(--v3-bg-3); }
.gv3-cta.primary:hover { background: var(--v3-gold-br); }
.gv3-cta.ghost { color: var(--v3-ink-2); border-color: var(--v3-rule); }
.gv3-cta:hover { color: var(--v3-gold-br); border-color: var(--v3-gold-br); }
.gv3-tabs { display: flex; gap: 0; padding: 0 28px; font-weight: 600; background: var(--v3-bg-3); border-top: 1px solid var(--v3-rule); border-bottom: 1px solid var(--v3-rule); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; position: sticky; top: 0; z-index: 50; }
.gv3-tabs a { padding: 14px 16px; color: var(--v3-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.gv3-tabs a:hover { color: var(--v3-gold); }
.gv3-tabs a.active { color: var(--v3-gold-br); border-bottom-color: var(--v3-gold); }
.gv3-tabs .count { color: var(--v3-muted); margin-left: 6px; font-size: 11px; }
.gv3-section { padding: 28px 28px 0; scroll-margin-top: 80px; }
.gv3-section h2 { font-family: var(--v3-display); font-size: 22px; font-weight: 600; color: var(--v3-ink); margin: 0 0 14px; letter-spacing: 0.04em; }
.gv3-section h2 .orn { color: var(--v3-gold); margin-right: 10px; }
.gv3-section .rule { height: 1px; background: linear-gradient(90deg, var(--v3-rule), transparent); margin: 0 0 20px; }
.gv3-section p { font-family: var(--v3-serif); font-size: 16px; color: var(--v3-ink); line-height: 1.65; margin: 0 0 14px; }
.gv3-section .v3-prose p { font-family: var(--v3-serif); font-size: inherit; line-height: inherit; margin: 0 0 calc(1ex / 0.32); color: var(--v3-ink); }
.gv3-summary { padding: 16px 20px; border-left: 2px solid var(--v3-gold); background: var(--v3-bg-2); margin-bottom: 18px; }
.gv3-summary .lbl { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-gold); text-transform: uppercase; margin: 0 0 8px; }
.gv3-summary p { font-style: italic; color: #f0e3c2; margin: 0; font-size: 15.5px; line-height: 1.6; }
.gv3-trailers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gv3-vid-card { position: relative; aspect-ratio: 16/9; background-color: var(--v3-bg-3); background-size: cover; background-position: center; cursor: pointer; border: 1px solid var(--v3-rule); border-radius: 3px; overflow: hidden; transition: border-color 0.25s, transform 0.25s; display: block; }
.gv3-vid-card:hover { border-color: var(--v3-gold); transform: scale(1.01); }
.gv3-vid-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,7,0.05) 0%, rgba(13,9,7,0.55) 60%, rgba(13,9,7,0.95) 100%); transition: opacity 0.25s; }
.gv3-vid-card:hover::before { opacity: 0.7; }
.gv3-vid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border: 2px solid var(--v3-gold); border-radius: 50%; background: rgba(13,9,7,0.65); display: flex; align-items: center; justify-content: center; transition: transform 0.25s, background 0.25s; z-index: 2; }
.gv3-vid-play::before { content: ""; width: 0; height: 0; border-left: 14px solid var(--v3-gold); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.gv3-vid-card:hover .gv3-vid-play { transform: translate(-50%,-50%) scale(1.08); background: rgba(212,167,71,0.92); }
.gv3-vid-card:hover .gv3-vid-play::before { border-left-color: var(--v3-bg-3); }
.gv3-vid-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px 11px; z-index: 3; }
.gv3-vid-cap h4 { font-family: var(--v3-display); font-size: 12.5px; color: #f4e9d1; margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; }
.gv3-vid-badge { position: absolute; top: 8px; left: 8px; font-family: var(--v3-display); font-size: 10px; letter-spacing: 0.2em; padding: 2px 7px; background: rgba(13,9,7,0.7); color: var(--v3-gold); text-transform: uppercase; border: 1px solid var(--v3-rule); z-index: 3; }
/* Lightbox extension for videos */
.gv3-lightbox-video { width: min(1100px, 90vw); aspect-ratio: 16/9; max-height: 90vh; background: #000; border: 2px solid var(--v3-gold); }
.gv3-lightbox-video iframe { width: 100%; height: 100%; border: 0; }
.gv3-walk-card { display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; padding: 16px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; align-items: center; transition: border-color 0.25s; }
.gv3-walk-card:hover { border-color: var(--v3-gold); }
.gv3-walk-cover { width: 110px; aspect-ratio: 3/4; background-size: cover; background-position: center; background-color: var(--v3-bg-3); border: 2px solid #6b4a22; border-radius: 2px; }
.gv3-walk-text .lbl { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-gold); text-transform: uppercase; margin: 0 0 6px; }
.gv3-walk-text h4 { font-family: var(--v3-display); font-size: 17px; color: #f4e9d1; margin: 0 0 6px; font-weight: 600; letter-spacing: 0.015em; }
.gv3-walk-text p { font-family: var(--v3-serif); font-size: 14.5px; color: var(--v3-ink-2); margin: 0; font-style: italic; line-height: 1.5; }
.gv3-walk-more-lbl { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-muted); margin: 20px 0 6px; }
.gv3-walk-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--v3-rule-soft); }
.gv3-walk-row { border-bottom: 1px solid var(--v3-rule-soft); }
.gv3-walk-row > a { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 14px; align-items: center; padding: 11px 8px; transition: background 0.2s; }
.gv3-walk-row > a:hover { background: var(--v3-bg-2); }
.gv3-walk-row-n { font-family: var(--v3-display); font-size: 12px; color: var(--v3-muted); text-align: right; }
.gv3-walk-row-by { font-family: var(--v3-serif); font-size: 15px; color: #f4e9d1; min-width: 0; }
.gv3-walk-row-detail { display: block; font-family: var(--v3-body); font-size: 12px; letter-spacing: 0.01em; text-transform: none; color: var(--v3-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv3-walk-row-tag { font-family: var(--v3-display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-gold); border: 1px solid var(--v3-rule); border-radius: 2px; padding: 2px 7px; }
.gv3-walk-row-go { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-gold); white-space: nowrap; }
@media (max-width: 540px) { .gv3-walk-row > a { grid-template-columns: 22px 1fr auto; } .gv3-walk-row-go { display: none; } }
.gv3-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gv3-news-card { background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color 0.25s, transform 0.25s; }
.gv3-news-card:hover { border-color: var(--v3-gold); transform: translateY(-2px); }
.gv3-news-thumb { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--v3-bg-3); position: relative; }
.gv3-news-date { position: absolute; bottom: 6px; right: 8px; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #f4e9d1; padding: 2px 6px; background: rgba(13,9,7,0.7); border-radius: 2px; }
.gv3-news-body { padding: 13px 15px 15px; flex: 1; }
.gv3-news-card h4 { font-family: var(--v3-display); font-size: 13px; color: #f4e9d1; margin: 0 0 6px; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
.gv3-news-card p { font-family: var(--v3-body); font-size: 13.5px; color: var(--v3-ink-2); margin: 0; line-height: 1.5; }
.gv3-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* The grid fits the number of screenshots (at most five), so no row ends with a lone tile: one or
two side by side, three in a row, four in a row of four, five as one large and four small. */
@media (min-width: 861px) {
.gv3-shots:has(> .gv3-shot:nth-child(1):last-child), .gv3-shots:has(> .gv3-shot:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.gv3-shots:has(> .gv3-shot:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.gv3-shots:has(> .gv3-shot:nth-child(5):last-child) { grid-template-columns: repeat(4, 1fr); }
.gv3-shots:has(> .gv3-shot:nth-child(5):last-child) > .gv3-shot:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
.gv3-shot { aspect-ratio: 16/9; border-radius: 3px; border: 1px solid var(--v3-rule); overflow: hidden; cursor: pointer; background-size: cover; background-position: center; background-color: var(--v3-bg-3); transition: transform 0.25s, border-color 0.25s; }
.gv3-shot:hover { border-color: var(--v3-gold); transform: scale(1.01); }
.gv3-shots-link { text-align: right; margin-top: 14px; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.2em; color: var(--v3-gold); text-transform: uppercase; padding-right: 28px; }
.gv3-empty { padding: 30px; text-align: center; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.2em; color: var(--v3-muted); text-transform: uppercase; background: var(--v3-bg-2); border: 1px dashed var(--v3-rule); border-radius: 3px; }
/* The text column takes the room up to the details panel, which sits flush right; the text itself
stops at a comfortable 74 characters, so the gap between them is a margin, not a hole. */
.gv3-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 48px; align-items: start; }
/* About 68 characters a line, the comfortable reading measure, left-aligned beside the aside. */
.gv3-about-prose { max-width: 74ch; margin-left: 0; margin-right: 0; }
/* Long descriptions fold to about ten lines with a fade and a "Read more" (set by the script below
only when the text is that long; without the script the full text shows). */
.gv3-about-prose.is-folded { max-height: 17em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.gv3-more-btn { margin-top: 10px; background: transparent; border: 1px solid var(--v3-gold); color: var(--v3-gold-br); border-radius: 2px; padding: 8px 16px; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.gv3-more-btn:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.gv3-about-aside { display: flex; flex-direction: column; gap: 20px; font-weight: 600; padding: 18px 18px 22px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; }
.gv3-about-val { font-family: var(--v3-serif); font-size: 16px; color: #f4e9d1; margin: 0; line-height: 1.45; }
.gv3-about-val a { color: var(--v3-gold); text-decoration: underline; text-decoration-color: var(--v3-rule); text-underline-offset: 0.2em; }
.gv3-about-val a:hover { color: var(--v3-gold-br); text-decoration-color: var(--v3-gold); }
.gv3-about-sub { display: block; font-family: var(--v3-body); font-size: 13px; color: var(--v3-ink-3); margin-top: 4px; white-space: pre-line; }
.gv3-about-series { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--v3-serif); font-size: 15px; line-height: 1.35; }
.gv3-about-series li { padding: 3px 0; }
.gv3-about-series a { color: var(--v3-gold); text-decoration: underline; text-decoration-color: var(--v3-rule); text-underline-offset: 0.2em; }
.gv3-about-series a:hover { color: var(--v3-gold-br); }
.gv3-about-series span { font-family: var(--v3-body); font-size: 12px; color: var(--v3-ink-3); }
.gv3-about-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gv3-about-links a { display: inline-block; padding: 6px 12px; border: 1px solid var(--v3-gold); border-radius: 2px; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-gold-br); }
.gv3-about-links a:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.gv3-about-block h4 { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-gold); text-transform: uppercase; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--v3-rule-soft); }
/* A description shorter than the panel: the panel becomes a row of columns above the text (set by
the script after the grid, before first paint) instead of a tall column beside empty space. */
.gv3-about-grid.is-wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.gv3-about-grid.is-wide .gv3-about-aside { order: -1; }
.gv3-about-grid.is-wide .gv3-about-aside { flex-direction: row; flex-wrap: wrap; gap: 18px 36px; padding: 18px 22px 20px; }
.gv3-about-grid.is-wide .gv3-about-block { flex: 0 1 auto; min-width: 110px; max-width: 260px; }
.gv3-about-grid.is-wide .gv3-about-block.is-pills { flex: 1 1 200px; max-width: none; }
.gv3-pegi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; }
.gv3-pegi img { width: 44px; height: 44px; border-radius: 2px; }
.gv3-pegi img.age { height: 54px; }
.gv3-pegi-txt { align-self: center; font-family: var(--v3-body); font-size: 13px; color: var(--v3-ink-2); }
@media (max-width: 860px) { .gv3-about-grid { grid-template-columns: 1fr; gap: 24px; } }
/* GLOBAL-PILLS */
ul.gv3-pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
ul.gv3-pills li { padding: 0; margin: 0; }
ul.gv3-pills li span, ul.gv3-pills li a { display: inline-block; padding: 5px 11px; border: 1px solid var(--v3-rule); border-radius: 2px; font-weight: 600; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-ink-2); white-space: nowrap; }
@media (max-width: 1100px) {
.gv3-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.gv3-meta { grid-template-columns: 140px 1fr; gap: 16px; margin-top: -100px; }
.gv3-cover { width: 140px; }
.gv3-actions { grid-column: span 2; flex-direction: row; flex-wrap: wrap; padding-bottom: 0; padding-top: 14px; }
.gv3-cta { flex: 1; min-width: 140px; }
.gv3-title { font-size: 28px; }
.gv3-title .year { font-size: 22px; }
.gv3-trailer-row { grid-template-columns: 1fr; }
.gv3-news-grid { grid-template-columns: 1fr; }
.gv3-shots { grid-template-columns: 1fr; grid-template-rows: auto; }
.gv3-shot.big { grid-row: auto; aspect-ratio: 16/9; }
.gv3-shot { aspect-ratio: 16/9; }
.gv3-tabs { overflow-x: auto; white-space: nowrap; }
}
.gv3-news-list { list-style: none; padding: 0; margin: 0; }
.gv3-news-row { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px dotted var(--v3-rule-soft); align-items: baseline; }
.gv3-news-row:first-child { padding-top: 0; }
.gv3-news-row:last-child { border-bottom: none; }
.gv3-news-row .gv3-news-date { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v3-gold); white-space: nowrap; position: static; background: transparent; padding: 0; }
.gv3-news-row a { display: block; transition: transform 0.2s; }
.gv3-news-row a:hover { transform: translateX(4px); }
.gv3-news-row h4 { font-family: var(--v3-display); font-size: 16px; color: #f4e9d1; margin: 0 0 6px; font-weight: 500; letter-spacing: 0.015em; line-height: 1.3; }
.gv3-news-row:hover h4 { color: var(--v3-gold); }
.gv3-news-row p { font-family: var(--v3-body); font-size: 14px; color: var(--v3-ink-2); margin: 0; line-height: 1.5; }
@media (max-width: 540px) { .gv3-news-row { grid-template-columns: 1fr; gap: 4px; } }
body.game-v3 .dat-menu-top-header { display: none !important; }
/* Sections with nothing in them (no trailers, screenshots, guides or news yet) are hidden, tab
included, rather than showing an empty dashed box. */
.gv3-section:has(.gv3-empty) { display: none; }
/* channel_images skips its no_results when the loop holds a cf_image tag: go by the shots themselves */
#screenshots:not(:has(.gv3-shot)) { display: none; }
.gv3:not(:has(#screenshots .gv3-shot)) .gv3-tabs a[href="#screenshots"] { display: none; }
.gv3:has(#trailers .gv3-empty) .gv3-tabs a[href="#trailers"],
.gv3:has(#screenshots .gv3-empty) .gv3-tabs a[href="#screenshots"],
.gv3:has(#walkthrough .gv3-empty) .gv3-tabs a[href="#walkthrough"],
.gv3:has(#news .gv3-empty) .gv3-tabs a[href="#news"] { display: none; }
.gv3:has(#news .gv3-empty) .gv3-actions a[href="#news"] { display: none; }
/* More in the series / from the developer. */
.gv3-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.gv3-rail a { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gv3-rail-cover { position: relative; display: block; aspect-ratio: 3/4; background: var(--v3-bg-2); border: 2px solid var(--v3-rule); border-radius: 3px; overflow: hidden; transition: border-color .2s; }
.gv3-rail a:hover .gv3-rail-cover { border-color: var(--v3-gold); }
.gv3-rail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.gv3-rail-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 10px; text-align: center; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v3-gold); }
.gv3-rail-t { font-family: var(--v3-serif); font-size: 14.5px; color: #f4e9d1; line-height: 1.25; overflow-wrap: anywhere; }
.gv3-rail a:hover .gv3-rail-t { color: var(--v3-gold); }
.gv3-rail-m { font-family: var(--v3-body); font-size: 12px; color: var(--v3-ink-3); }
.gv3-rail-sec .gv3-shots-link { padding-right: 0; }
@media (max-width: 1100px) { .gv3-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gv3-rail li:nth-child(n+9) { display: none; } }
@media (max-width: 860px) { .gv3-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 540px) { .gv3-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv3-rail li:nth-child(n+7) { display: none; } }
/* Phones: the cover sits beside the title, the facts take the full width below in two columns,
and the hero is a strip rather than two screens. */
@media (max-width: 600px) {
.gv3-hero { height: 200px; }
.gv3-meta { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 14px; margin-top: -88px; padding: 0 16px 20px; align-items: end; }
.gv3-meta > .gv3-cover { grid-row: 1 / span 2; width: 96px; border-width: 2px; }
.gv3-meta > .gv3-title-block { display: contents; }
.gv3-eyebrow { grid-column: 2; align-self: end; margin: 0; font-size: 11px; letter-spacing: 0.16em; }
.gv3-title { grid-column: 2; font-size: 24px; margin: 0; }
.gv3-facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 16px; }
.gv3-facts { margin-left: 0; clip-path: none; }
.gv3-fact { padding: 0; border: 0; }
.gv3-actions { grid-column: 1 / -1; }
.gv3-section { padding: 22px 16px 0; }
.gv3-walk-card { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
.gv3-walk-cover { width: 72px; }
.gv3-walk-card > .gv3-cta { grid-column: 1 / -1; }
}
.gv3-vid-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 40px; }
.gv3-vid-lightbox.open { display: flex; }
.gv3-vid-lightbox-frame { width: min(1100px, 90vw); aspect-ratio: 16/9; max-height: 90vh; background: #000; border: 2px solid var(--v3-gold); }
.gv3-vid-lightbox-frame iframe { width: 100%; height: 100%; border: 0; }
.gv3-vid-lightbox-close { position: absolute; top: 18px; right: 24px; width: 44px; height: 44px; border: 2px solid var(--v3-gold); background: rgba(13,9,7,0.7); color: var(--v3-gold); font-family: var(--v3-display); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gv3-vid-lightbox-close:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.gv3-vid-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 2px solid var(--v3-gold); background: rgba(13,9,7,0.7); color: var(--v3-gold); font-family: var(--v3-display); font-size: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gv3-vid-lightbox-nav:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.gv3-vid-lightbox-nav.prev { left: 24px; }
.gv3-vid-lightbox-nav.next { right: 24px; }
.gv3-vid-lightbox-cap { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.2em; color: var(--v3-ink-3); text-transform: uppercase; }
body.walk-archive-v3 { --v3-bg:#1a1410; --v3-bg-2:#221a14; --v3-bg-3:#0d0907; --v3-ink:#e8d9b6; --v3-ink-2:#c4b594; --v3-ink-3:#a88a55; --v3-muted:#a08a5c; --v3-gold:#d4a747; --v3-gold-br:#f4c75c; --v3-rule:#5a3a18; --v3-rule-soft:#3a2818; --v3-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --v3-display:'Cinzel',Georgia,serif; --v3-serif:'Source Serif 4',Georgia,serif; background:#0a0604; color:var(--v3-ink); font-family:var(--v3-body); }
body.walk-archive-v3 * { box-sizing: border-box; }
body.walk-archive-v3 a { color: inherit; text-decoration: none; }
.wa3 { max-width: 1240px; margin: 0 auto; background: var(--v3-bg); border-left: 1px solid var(--v3-rule); border-right: 1px solid var(--v3-rule); }
.wa3-crumbs { padding: 12px 28px; background: var(--v3-bg-3); border-bottom: 1px solid var(--v3-rule); font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v3-ink-2); }
.wa3-crumbs a { color: #f4e9d1; }
.wa3-crumbs a:hover { color: var(--v3-gold); }
.wa3-crumbs .sep { color: var(--v3-rule); margin: 0 8px; }
.wa3-crumbs .here { color: var(--v3-gold); }
.wa3-head { padding: 40px 28px 24px; border-bottom: 1px solid var(--v3-rule); }
.wa3-eyebrow { font-family: var(--v3-display); font-size: 11.5px; font-weight: 500; letter-spacing: 0.28em; color: var(--v3-gold-br); text-transform: uppercase; margin: 0 0 14px; }
.wa3-title { font-family: var(--v3-display); font-size: 44px; font-weight: 600; color: #f4e9d1; margin: 0 0 10px; letter-spacing: 0.01em; line-height: 1.1; }
.wa3-deck { font-family: var(--v3-serif); font-size: 18px; font-style: italic; color: var(--v3-ink-2); margin: 0; max-width: 720px; }
.wa3-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 28px 28px 12px; }
.wa3-sec-head h2 { font-family: var(--v3-display); font-size: 13px; font-weight: 600; letter-spacing: 0.28em; color: var(--v3-gold); text-transform: uppercase; margin: 0; }
.wa3-sec-head h2::before { content: '⚜'; margin-right: 10px; color: var(--v3-gold); }
.wa3-sec-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--v3-rule), transparent); margin: 0 16px; }
.wa3-sec-head .meta { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-muted); text-transform: uppercase; }
/* Game-grouped list: each game is a row with box art + game info + nested walkthroughs */
.wa3-list { padding: 4px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.wa3-game-row { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 16px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; transition: border-color 0.25s; }
.wa3-game-row:hover { border-color: var(--v3-gold); }
.wa3-game-cover { display: block; width: 110px; height: auto; aspect-ratio: 3/4; background-size: cover; background-position: center; background-color: var(--v3-bg-3); border: 2px solid #6b4a22; border-radius: 2px; position: relative; overflow: hidden; flex-shrink: 0; }
.wa3-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.wa3-game-cover-fallback { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-gold); text-align: center; padding: 0 8px; line-height: 1.3; text-transform: uppercase; }
.wa3-game-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wa3-game-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wa3-game-head h3 { font-family: var(--v3-display); font-size: 20px; font-weight: 500; color: var(--v3-gold-br); margin: 0; letter-spacing: 0.015em; line-height: 1.2; }
.wa3-game-head h3 a:hover { color: var(--v3-gold); }
.wa3-game-meta { font-family: var(--v3-body); font-size: 12px; letter-spacing: 0.01em; color: var(--v3-ink-3); text-transform: none; flex-shrink: 0; }
.wa3-wt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.wa3-wt-list li { padding: 10px 0; border-top: 1px solid var(--v3-rule-soft); }
.wa3-wt-list li:first-child { border-top: 1px solid var(--v3-rule); padding-top: 12px; }
.wa3-wt-row { display: flex; align-items: baseline; gap: 14px; transition: color 0.2s; }
.wa3-wt-title { flex: 1; min-width: 0; font-family: var(--v3-serif); font-size: 15.5px; color: var(--v3-ink); line-height: 1.4; letter-spacing: 0; }
.wa3-wt-title::before { content: '›'; color: var(--v3-gold); margin-right: 10px; font-family: var(--v3-display); font-weight: 600; }
.wa3-wt-row:hover .wa3-wt-title { color: var(--v3-gold); }
.wa3-wt-contrib { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-ink-3); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.wa3-wt-contrib strong { color: var(--v3-gold-br); font-weight: 600; }
/* What the guide is, and how much of it there is. */
.wa3-wt-meta { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; font-family: var(--v3-body); font-size: 12px; letter-spacing: 0.01em; text-transform: none; color: var(--v3-muted); white-space: nowrap; }
.wa3-wt-meta span { position: relative; }
.wa3-wt-meta span + span::before { content: '·'; color: var(--v3-rule); margin-right: 10px; }
.wa3-tag { font-style: normal; color: var(--v3-ink-2); border: 1px solid var(--v3-rule); border-radius: 2px; padding: 2px 7px; letter-spacing: 0.14em; }
.wa3-tag-hint, .wa3-tag-cheat { color: var(--v3-gold); border-color: var(--v3-rule-soft); }
.wa3-wt-empty { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-muted); text-transform: uppercase; padding: 8px 0; }
/* Pagination */
.wa3-pager { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 22px 28px; flex-wrap: wrap; }
.wa3-pager a, .wa3-pager span { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; padding: 8px 14px; border: 1px solid var(--v3-rule); color: var(--v3-ink-2); text-transform: uppercase; transition: color 0.2s, border-color 0.2s; }
.wa3-pager a:hover { color: var(--v3-gold); border-color: var(--v3-gold); }
.wa3-pager .current { color: var(--v3-bg-3); background: var(--v3-gold); border-color: var(--v3-gold); font-weight: 600; }
/* The letter rail: All, #, A to Z, the pager's own idiom so it reads as part of the same
navigation. Letters with no game behind them stay in place, dimmed, so the alphabet keeps
its shape. */
.wa3-az { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0 28px 14px; }
.wa3-az a, .wa3-az span { display: inline-block; min-width: 32px; text-align: center; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.12em; padding: 7px 8px; border: 1px solid var(--v3-rule); color: var(--v3-ink-2); text-transform: uppercase; transition: color 0.2s, border-color 0.2s; }
.wa3-az a:hover { color: var(--v3-gold); border-color: var(--v3-gold); }
.wa3-az a[aria-current="page"] { color: var(--v3-bg-3); background: var(--v3-gold); border-color: var(--v3-gold); font-weight: 600; }
.wa3-az span { opacity: 0.55; }
.wa3-empty { padding: 50px 28px; text-align: center; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.22em; color: var(--v3-muted); text-transform: uppercase; }
@media (max-width: 860px) {
.wa3-title { font-size: 32px; }
.wa3-head { padding: 28px 20px 18px; }
.wa3-sec-head { padding: 20px 20px 10px; }
.wa3-list { padding: 4px 20px 22px; gap: 12px; }
.wa3-game-row { grid-template-columns: 84px 1fr; gap: 14px; padding: 12px; }
.wa3-game-cover { width: 84px; }
.wa3-game-head h3 { font-size: 17px; }
.wa3-wt-title { font-size: 14px; }
.wa3-wt-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.wa3-wt-meta { flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 540px) {
.wa3-head { padding: 24px 16px 14px; }
.wa3-list { padding: 4px 14px 18px; }
.wa3-game-row { grid-template-columns: 72px 1fr; gap: 12px; padding: 10px; }
.wa3-game-cover { width: 72px; }
.wa3-game-head h3 { font-size: 16px; }
.wa3-game-meta { display: none; }
.wa3-wt-list li { padding: 8px 0; }
.wa3-wt-title { font-size: 13.5px; }
.wa3-pager { padding: 14px 14px; gap: 4px; }
.wa3-pager a, .wa3-pager span { padding: 6px 10px; font-size: 11px; }
}
body.walk-v3 { --v3-bg:#1a1410; --v3-bg-2:#221a14; --v3-bg-3:#0d0907; --v3-ink:#e8d9b6; --v3-ink-2:#c4b594; --v3-ink-3:#a88a55; --v3-muted:#a08a5c; --v3-gold:#d4a747; --v3-gold-br:#f4c75c; --v3-rule:#5a3a18; --v3-rule-soft:#3a2818; --v3-red:#c8392a; --v3-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --v3-display:'Cinzel',Georgia,serif; --v3-serif:'Source Serif 4',Georgia,serif; background:#0a0604; color:var(--v3-ink); font-family:var(--v3-body); font-size:15px; line-height:1.6; }
body.walk-v3 * { box-sizing: border-box; }
body.walk-v3 a { color: inherit; text-decoration: none; }
.wv3 { max-width: 1240px; margin: 0 auto; background: var(--v3-bg); border-left: 1px solid var(--v3-rule); border-right: 1px solid var(--v3-rule); }
.wv3-crumbs { padding: 12px 28px; background: var(--v3-bg-3); border-bottom: 1px solid var(--v3-rule); font-weight: 600; font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v3-ink-2); }
.wv3-crumbs a { color: #f4e9d1; }
.wv3-crumbs a:hover { color: var(--v3-gold); }
.wv3-crumbs .sep { color: var(--v3-rule); margin: 0 8px; }
.wv3-crumbs .here { color: var(--v3-gold); }
.wv3-hero { position: relative; height: 280px; overflow: hidden; background-color: var(--v3-bg-3); background-size: cover; background-position: center; }
.wv3-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,7,0.4) 0%, rgba(13,9,7,0.7) 60%, rgba(26,20,16,0.98) 100%); }
.wv3-hero-corner { position: absolute; top: 16px; width: 28px; height: 28px; border: 2px solid var(--v3-gold); z-index: 3; }
.wv3-hero-corner.tl { left: 16px; border-right: none; border-bottom: none; }
.wv3-hero-corner.tr { right: 16px; border-left: none; border-bottom: none; }
.wv3-lead { position: relative; padding: 0 28px 24px; margin-top: -140px; z-index: 5; font-weight: 600; border-bottom: 2px solid #6b4a22; padding-bottom: 28px; }
.wv3-eyebrow { font-family: var(--v3-display); font-size: 11.5px; font-weight: 500; letter-spacing: 0.28em; color: var(--v3-gold-br); text-transform: uppercase; margin: 0 0 12px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.wv3-eyebrow a { color: var(--v3-gold); }
.wv3-eyebrow a:hover { color: var(--v3-gold-br); }
.wv3-title { font-family: var(--v3-display); font-size: 38px; font-weight: 600; color: #f4e9d1; margin: 0 0 8px; letter-spacing: 0.015em; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.wv3-subtitle { font-family: var(--v3-serif); font-size: 18px; font-style: italic; color: var(--v3-ink-2); margin: 0 0 18px; line-height: 1.4; max-width: 820px; }
.wv3-meta-strip { display: flex; gap: 0; flex-wrap: wrap; }
.wv3-meta-item { padding: 0 18px; border-right: 1px solid var(--v3-rule); }
.wv3-meta-item:last-child { border-right: none; }
.wv3-meta-item:first-child { padding-left: 0; }
.wv3-meta-lbl { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-ink-3); text-transform: uppercase; margin-bottom: 3px; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.wv3-meta-val { font-family: var(--v3-display); font-size: 13.5px; font-weight: 500; color: var(--v3-gold-br); letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.wv3-layout { display: grid; grid-template-columns: 1fr 280px; gap: 36px; padding: 28px; align-items: stretch; }
.wv3-body { min-width: 0; }
.wv3-aside { position: relative; }
.wv3-aside-inner { display: block; height: 100%; }
.wv3-aside .wv3-cover-card { margin-bottom: 18px; }
.wv3-aside .wv3-toc { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; }
.wv3-aside .wv3-cta { display: flex; margin-top: 18px; }
.wv3-cover-card { display: block; padding: 14px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; text-align: center; transition: border-color 0.25s; }
.wv3-cover-card:hover { border-color: var(--v3-gold); }
.wv3-cover-img { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center; background-color: var(--v3-bg-3); border: 2px solid var(--v3-rule); border-radius: 2px; margin-bottom: 10px; }
.wv3-cover-card .lbl { font-family: var(--v3-display); font-size: 10px; letter-spacing: 0.2em; color: var(--v3-muted); text-transform: uppercase; margin: 0 0 4px; }
.wv3-cover-card h4 { font-family: var(--v3-display); font-size: 14px; color: var(--v3-gold); margin: 0; font-weight: 500; letter-spacing: 0.02em; line-height: 1.25; }
.wv3-aside-block { padding: 16px 18px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; }
.wv3-aside-block h5 { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-gold); text-transform: uppercase; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--v3-rule-soft); }
.wv3-toc ul { list-style: none; padding: 0; margin: 0; font-family: var(--v3-body); font-size: 13px; line-height: 1.45; }
.wv3-toc li { padding: 3px 0; }
.wv3-toc li a { color: var(--v3-ink-2); display: block; transition: color 0.2s; border-left: 2px solid transparent; padding-left: 8px; margin-left: -10px; }
.wv3-toc li a:hover { color: var(--v3-gold); border-left-color: var(--v3-gold); }
.wv3-toc li a.active { color: var(--v3-gold-br); border-left-color: var(--v3-gold); }
.wv3-toc li.h3 a { padding-left: 22px; color: var(--v3-ink-3); font-size: 12.5px; }
.wv3-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--v3-gold); color: var(--v3-gold); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; background: transparent; transition: background 0.2s, color 0.2s; text-align: center; }
.wv3-cta.primary { background: var(--v3-gold); color: var(--v3-bg-3); }
.wv3-cta.primary:hover { background: var(--v3-gold-br); }
.wv3-cta:hover { color: var(--v3-gold-br); border-color: var(--v3-gold-br); }
/* Walkthrough body typography */
.wv3-prose { max-width: none; }
.wv3-prose > h2 { font-family: var(--v3-display); font-size: 26px; font-weight: 500; color: var(--v3-gold); letter-spacing: 0.04em; margin: 48px 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--v3-rule); position: relative; scroll-margin-top: 24px; }
.wv3-prose > h2::before { content: '❈'; font-size: 14px; margin-right: 12px; opacity: 0.7; }
.wv3-prose > h2:first-child { margin-top: 0; }
.wv3-prose > h3 { font-family: var(--v3-display); font-size: 17px; font-weight: 500; color: #f4e9d1; letter-spacing: 0.03em; margin: 32px 0 10px; scroll-margin-top: 24px; }
.wv3-prose > h3::before { content: '»'; color: var(--v3-gold); margin-right: 10px; }
.wv3-prose p { margin: 0 0 16px; }
.wv3-prose strong, .wv3-prose b { color: #f4e9d1; font-weight: 600; }
.wv3-prose em, .wv3-prose i { color: var(--v3-ink-2); }
.wv3-prose a { color: var(--v3-gold); text-decoration: underline; text-decoration-color: var(--v3-rule); text-underline-offset: 3px; }
.wv3-prose a:hover { color: var(--v3-gold-br); text-decoration-color: var(--v3-gold); }
.wv3-prose pre { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; color: var(--v3-ink-2); background: var(--v3-bg-3); border: 1px solid var(--v3-rule); border-left: 3px solid var(--v3-gold); padding: 14px 18px; margin: 18px 0; overflow-x: auto; border-radius: 2px; white-space: pre; }
.wv3-prose ul, .wv3-prose ol { margin: 0 0 16px; padding-left: 24px; }
.wv3-prose li { margin: 4px 0; }
.wv3-prose blockquote { border-left: 3px solid var(--v3-gold); padding: 6px 18px; margin: 18px 0; font-style: italic; color: var(--v3-ink-2); background: var(--v3-bg-2); }
.wv3-prose img { max-width: 100%; height: auto; border: 1px solid var(--v3-rule); border-radius: 3px; margin: 18px 0; }
.wv3-prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--v3-rule), transparent); margin: 28px 0; }
.wv3-credit { margin-top: 40px; padding: 22px 24px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-left: 3px solid var(--v3-gold); border-radius: 3px; }
.wv3-credit .lbl { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-gold); text-transform: uppercase; margin: 0 0 6px; }
.wv3-credit p { font-family: var(--v3-serif); font-size: 14.5px; color: var(--v3-ink-2); margin: 0; font-style: italic; line-height: 1.55; }
.wv3-credit p strong { color: #f4e9d1; font-style: normal; }
/* TOC scrollbar styling */
.wv3-toc { scrollbar-width: thin; scrollbar-color: var(--v3-rule) transparent; }
.wv3-toc::-webkit-scrollbar { width: 6px; }
.wv3-toc::-webkit-scrollbar-track { background: transparent; }
.wv3-toc::-webkit-scrollbar-thumb { background: var(--v3-rule); border-radius: 3px; }
.wv3-toc::-webkit-scrollbar-thumb:hover { background: var(--v3-gold); }
@media (max-width: 960px) {
.wv3-layout { grid-template-columns: 1fr; gap: 24px; }
.wv3-aside-inner { position: static; }
.wv3-title { font-size: 28px; }
}
@media (max-width: 540px) {
.wv3-hero { height: 200px; }
.wv3-lead { margin-top: -100px; padding: 0 16px 22px; }
.wv3-layout { padding: 18px 16px; }
}
body.news-archive-v3 { --v3-bg:#1a1410; --v3-bg-2:#221a14; --v3-bg-3:#0d0907; --v3-ink:#e8d9b6; --v3-ink-2:#c4b594; --v3-ink-3:#a88a55; --v3-muted:#a08a5c; --v3-gold:#d4a747; --v3-gold-br:#f4c75c; --v3-rule:#5a3a18; --v3-rule-soft:#3a2818; --v3-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --v3-display:'Cinzel',Georgia,serif; --v3-serif:'Source Serif 4',Georgia,serif; background:#0a0604; color:var(--v3-ink); font-family:var(--v3-body); }
body.news-archive-v3 * { box-sizing: border-box; }
body.news-archive-v3 a { color: inherit; text-decoration: none; }
.na3 { max-width: 1240px; margin: 0 auto; background: var(--v3-bg); border-left: 1px solid var(--v3-rule); border-right: 1px solid var(--v3-rule); }
.na3-crumbs { padding: 12px 28px; background: var(--v3-bg-3); font-weight: 700; border-bottom: 1px solid var(--v3-rule); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-muted); }
.na3-crumbs a { color: var(--v3-ink-3); }
.na3-crumbs a:hover { color: var(--v3-gold); }
.na3-crumbs .sep { color: var(--v3-rule); margin: 0 8px; }
.na3-crumbs .here { color: var(--v3-gold); }
.na3-head { padding: 40px 28px 24px; border-bottom: 1px solid var(--v3-rule); }
.na3-eyebrow { font-family: var(--v3-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.28em; color: var(--v3-gold-br); text-transform: uppercase; margin: 0 0 14px; }
.na3-title { font-family: var(--v3-display); font-size: 44px; font-weight: 600; color: #f4e9d1; margin: 0 0 10px; letter-spacing: 0.01em; line-height: 1.1; }
.na3-deck { font-family: var(--v3-serif); font-size: 18px; font-style: italic; color: var(--v3-ink-2); margin: 0; max-width: 720px; }
/* Featured top article */
.na3-feature { padding: 28px 28px 0; }
.na3-feat-card { position: relative; display: block; aspect-ratio: 21/9; overflow: hidden; background-color: var(--v3-bg-3); background-size: cover; background-position: center; border: 1px solid var(--v3-rule); border-radius: 3px; }
.na3-feat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,7,0.2) 0%, rgba(13,9,7,0.4) 50%, rgba(13,9,7,0.95) 100%); }
.na3-feat-corner { position: absolute; top: 14px; width: 26px; height: 26px; border: 2px solid var(--v3-gold); z-index: 3; }
.na3-feat-corner.tl { left: 14px; border-right: none; border-bottom: none; }
.na3-feat-corner.tr { right: 14px; border-left: none; border-bottom: none; }
.na3-feat-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 36px 30px; z-index: 4; }
.na3-feat-tag { display: inline-block; font-weight: 700; font-family: var(--v3-display); font-size: 10px; letter-spacing: 0.22em; padding: 4px 11px; background: var(--v3-gold); color: var(--v3-bg-3); margin-bottom: 12px; text-transform: uppercase; }
.na3-feat-title { font-family: var(--v3-serif); font-size: 32px; font-weight: 500; color: #fff8e3; margin: 0 0 10px; line-height: 1.15; letter-spacing: 0; text-shadow: 0 3px 16px rgba(0,0,0,0.85); text-wrap: balance; }
.na3-feat-deck { font-family: var(--v3-serif); font-size: 16px; color: rgba(232,217,182,0.95); margin: 0; line-height: 1.4; max-width: 700px; font-style: italic; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.na3-feat-meta { margin-top: 14px; font-weight: 700; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: rgba(232,217,182,0.85); text-transform: uppercase; }
.na3-feat-meta strong { color: var(--v3-gold-br); font-weight: 500; }
/* Section heading */
.na3-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 36px 28px 12px; }
.na3-sec-head h2 { font-family: var(--v3-display); font-size: 13px; font-weight: 700; letter-spacing: 0.28em; color: var(--v3-gold-br); text-transform: uppercase; margin: 0; }
.na3-sec-head h2::before { content: '✦'; margin-right: 10px; color: var(--v3-gold); }
.na3-sec-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--v3-rule), transparent); margin: 0 16px; }
.na3-sec-head .meta { font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--v3-ink-3); text-transform: uppercase; }
/* Grid of cards */
.na3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 4px 28px 24px; }
.na3-card { position: relative; display: flex; flex-direction: column; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; overflow: hidden; transition: border-color 0.25s, transform 0.25s; }
.na3-card:hover { border-color: var(--v3-gold); transform: translateY(-2px); }
.na3-card-thumb { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--v3-bg-3); position: relative; }
.na3-card-date { position: absolute; bottom: 6px; right: 8px; font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #f4e9d1; padding: 2px 6px; background: rgba(13,9,7,0.7); border-radius: 2px; }
.na3-card-body { padding: 14px 16px 16px; }
.na3-card-tag { font-family: var(--v3-display); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--v3-gold-br); text-transform: uppercase; margin: 0 0 6px; }
.na3-card h3 { font-family: var(--v3-serif); font-size: 17px; color: #f4e9d1; margin: 0 0 6px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
.na3-card p { font-family: var(--v3-body); font-size: 13.5px; color: var(--v3-ink-2); margin: 0; line-height: 1.5; }
/* Pagination */
.na3-pager { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 28px; flex-wrap: wrap; }
.na3-pager a, .na3-pager span { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; padding: 8px 14px; border: 1px solid var(--v3-rule); color: var(--v3-ink-2); text-transform: uppercase; transition: color 0.2s, border-color 0.2s; }
.na3-pager a:hover { color: var(--v3-gold); border-color: var(--v3-gold); }
.na3-pager .current { color: var(--v3-bg-3); background: var(--v3-gold); border-color: var(--v3-gold); font-weight: 600; }
.na3-empty { padding: 50px 28px; text-align: center; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.22em; color: var(--v3-muted); text-transform: uppercase; }
@media (max-width: 960px) {
.na3-grid { grid-template-columns: repeat(2, 1fr); }
.na3-title { font-size: 32px; }
.na3-feat-title { font-size: 24px; }
.na3-feat-deck { font-size: 14px; }
.na3-feat-body { padding: 20px 22px 22px; }
}
@media (max-width: 540px) {
.na3-grid { grid-template-columns: 1fr; gap: 10px; }
.na3-card { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
.na3-card-body { display: flex; flex-direction: column; justify-content: center; }
.na3-card-thumb { aspect-ratio: 1/1; width: 110px; height: 110px; }
.na3-card-body { padding: 10px 12px; }
.na3-card h3 { font-size: 14px; }
.na3-card p { display: none; }
.na3-head { padding: 24px 18px 16px; }
.na3-feat-card { aspect-ratio: 16/10; }
.na3-feat-title { font-size: 20px; }
.na3-feat-deck { display: none; }
.na3-feature { padding: 18px 18px 0; }
.na3-sec-head { padding: 24px 18px 8px; }
.na3-grid { padding: 4px 18px 18px; }
}
@media (max-width: 540px) {
.nv3-title { font-size: 22px; letter-spacing: 0.005em; margin: 0 0 12px; line-height: 1.15; }
.nv3-eyebrow { font-size: 11px; letter-spacing: 0.16em; margin: 0 0 10px; }
.nv3-deck { font-size: 16px; margin: 0 0 16px; line-height: 1.45; }
.nv3-byline { font-size: 11px; letter-spacing: 0.16em; padding-top: 12px; gap: 8px; }
.nv3-head { padding: 18px 16px; }
.nv3-prose { padding: 0 16px; }
}
body.news-v3 { --v3-bg:#1a1410; --v3-bg-2:#221a14; --v3-bg-3:#0d0907; --v3-ink:#e8d9b6; --v3-ink-2:#c4b594; --v3-ink-3:#a88a55; --v3-muted:#a08a5c; --v3-gold:#d4a747; --v3-gold-br:#f4c75c; --v3-rule:#5a3a18; --v3-rule-soft:#3a2818; --v3-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --v3-display:'Cinzel',Georgia,serif; --v3-serif:'Source Serif 4',Georgia,serif; background:#0a0604; color:var(--v3-ink); font-family:var(--v3-body); font-size:15px; line-height:1.6; }
body.news-v3 * { box-sizing: border-box; }
body.news-v3 a { color: inherit; /* text-decoration: none; */ font-weight: 600; }
.nv3 { max-width: 1240px; margin: 0 auto; background: var(--v3-bg); border-left: 1px solid var(--v3-rule); border-right: 1px solid var(--v3-rule); }
.nv3-crumbs { padding: 12px 28px; background: var(--v3-bg-3); border-bottom: 1px solid var(--v3-rule); font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v3-ink-2); }
.nv3-crumbs a { color: #f4e9d1; }
.nv3-crumbs a:hover { color: var(--v3-gold); }
.nv3-crumbs .sep { color: var(--v3-rule); margin: 0 8px; }
.nv3-crumbs .here { color: var(--v3-gold); }
/* Hero with overlay lead */
.nv3-hero { position: relative; min-height: 460px; background-color: var(--v3-bg-3); background-size: cover; background-position: center; overflow: hidden; }
.nv3-hero.no-image { min-height: 280px; background: linear-gradient(180deg, var(--v3-bg-2) 0%, var(--v3-bg) 100%); }
.nv3-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,7,0.35) 0%, rgba(13,9,7,0.45) 30%, rgba(13,9,7,0.85) 75%, rgba(26,20,16,1) 100%); }
.nv3-hero-corner { position: absolute; top: 18px; width: 30px; height: 30px; border: 2px solid var(--v3-gold); z-index: 3; }
.nv3-hero-corner.tl { left: 18px; border-right: none; border-bottom: none; }
.nv3-hero-corner.tr { right: 18px; border-left: none; border-bottom: none; }
.nv3-hero-lead { position: relative; z-index: 5; padding: 164px 56px 14px; max-width: 1000px; }
.nv3-eyebrow { font-family: var(--v3-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.28em; color: var(--v3-gold-br); text-transform: uppercase; margin: 0 0 16px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.nv3-eyebrow a { color: var(--v3-gold); }
.nv3-eyebrow a:hover { color: var(--v3-gold-br); }
.nv3-eyebrow .dot { color: rgba(212,167,71,0.5); margin: 0 12px; }
.nv3-title { font-family: var(--v3-display); font-size: 46px; font-weight: 600; color: #fff8e3; margin: 0 0 18px; letter-spacing: 0.01em; line-height: 1.08; text-wrap: balance; text-shadow: 0 4px 22px rgba(0,0,0,0.85), 0 2px 6px rgba(0,0,0,0.6); }
.nv3-deck { font-family: var(--v3-serif); font-size: 20px; font-style: italic; color: #f0e3c2; margin: 0 0 22px; line-height: 1.4; max-width: 780px; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.nv3-byline { display: flex; align-items: center; gap: 14px; padding-top: 18px; font-weight: 700; border-top: 1px solid rgba(212,167,71,0.35); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,217,182,0.85); max-width: 780px; }
.nv3-byline strong { color: var(--v3-gold-br); font-weight: 500; }
.nv3-byline .sep { color: rgba(212,167,71,0.45); }
/* Article layout */
.nv3-layout { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr 290px; gap: 48px; padding: 0 56px 40px; margin-top: -80px; }
/* No related game: no sidebar — center the article column on a comfortable measure. */
.nv3-layout--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.nv3-body { min-width: 0; padding-top: 80px; }
.nv3-aside { position: relative; padding-top: 80px; }
.nv3-aside-inner { display: block; }
.nv3-aside .nv3-sticky { position: sticky; top: 18px; }
/* base prose comes from .v3-prose */
.nv3-prose p { margin: 0 0 calc(1ex / 0.32); text-wrap: pretty; font-weight: 400; }
.nv3-prose p:first-of-type::first-letter { font-family: var(--v3-display); font-size: 56px; line-height: 0.9; float: left; color: var(--v3-gold); padding: 4px 12px 0 0; font-weight: 600; }
.nv3-prose h2 { padding-bottom: 0.5em; border-bottom: 1px solid var(--v3-rule); }
.nv3-prose h3 { font-family: var(--v3-display); font-size: 1.15em; font-weight: 500; color: #f4e9d1; letter-spacing: 0.02em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0 calc(1ex / 0.5) 0; text-wrap: balance; }
.nv3-prose strong, .nv3-prose b { color: #f4e9d1; font-weight: 600; }
.nv3-prose em, .nv3-prose i { color: var(--v3-ink-2); }
.nv3-prose a { color: var(--v3-gold); text-decoration: underline; text-decoration-color: var(--v3-rule); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.nv3-prose a:focus-visible { outline: 2px solid var(--v3-gold); outline-offset: 2px; border-radius: 2px; }
.nv3-prose a:hover { color: var(--v3-gold-br); text-decoration-color: var(--v3-gold); }
.nv3-prose ul, .nv3-prose ol { margin: 0 0 18px; padding-left: 26px; }
.nv3-prose li { margin: 4px 0; }
.nv3-prose blockquote { border-left: 3px solid var(--v3-gold); padding: 8px 22px; margin: 22px 0; font-family: var(--v3-display); font-size: 22px; line-height: 1.4; color: #f4e9d1; font-style: normal; }
.nv3-prose img { max-width: 100%; height: auto; border: 1px solid var(--v3-rule); border-radius: 3px; margin: 20px 0; }
.nv3-prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--v3-rule), transparent); margin: 30px 0; }
/* Sidebar: compact game ribbon + more articles + share */
.nv3-game-ribbon { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 12px; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 3px; align-items: center; transition: border-color 0.25s; margin-bottom: 22px; }
.nv3-game-ribbon:hover { border-color: var(--v3-gold); }
.nv3-game-ribbon-img { width: 56px; aspect-ratio: 3/4; background-size: cover; background-position: center; background-color: var(--v3-bg-3); border: 1px solid var(--v3-rule); border-radius: 2px; }
.nv3-game-ribbon-text .lbl { font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--v3-ink-3); text-transform: uppercase; margin: 0 0 3px; }
.nv3-game-ribbon-text h4 { font-family: var(--v3-display); font-size: 14px; color: var(--v3-gold-br); margin: 0; font-weight: 700; letter-spacing: 0.015em; line-height: 1.25; }
.nv3-side-h { font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--v3-gold-br); text-transform: uppercase; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--v3-rule); }
.nv3-side-h:first-of-type { margin-top: 0; }
.nv3-more-list { list-style: none; padding: 0; margin: 0 0 26px; }
.nv3-more-list li { padding: 10px 0; border-bottom: 1px solid var(--v3-rule-soft); }
.nv3-more-list li:last-child { border-bottom: none; }
.nv3-more-list a { display: block; transition: color 0.2s; }
.nv3-more-list .more-date { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-muted); text-transform: uppercase; margin-bottom: 4px; }
.nv3-more-list .more-title { font-family: var(--v3-display); font-size: 13px; color: var(--v3-ink-2); line-height: 1.35; }
.nv3-more-list a:hover .more-title { color: var(--v3-gold); }
.nv3-share { display: flex; flex-direction: column; gap: 8px; }
.nv3-share a { display: flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--v3-rule); color: var(--v3-ink-2); font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.2s, border-color 0.2s; }
.nv3-share a:hover { color: var(--v3-gold); border-color: var(--v3-gold); }
.nv3-footer-nav { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--v3-rule); display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.nv3-footer-nav .filed { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-muted); text-transform: uppercase; }
.nv3-footer-nav .filed a { color: var(--v3-gold); }
.nv3-footer-nav .back-link { font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; color: var(--v3-gold); text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--v3-gold); }
.nv3-footer-nav .back-link:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.nv3-facts { display: block; margin: 0 0 22px; padding: 0; font-size: 13px; }
.nv3-facts dt { font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--v3-ink-3); text-transform: uppercase; margin-top: 10px; }
.nv3-facts dt:first-child { margin-top: 0; }
.nv3-facts dd { font-family: var(--v3-display); font-size: 13.5px; font-weight: 700; color: var(--v3-gold-br); margin: 2px 0 0; letter-spacing: 0.02em; }
.nv3-link-list { list-style: none; padding: 0; margin: 0 0 22px; }
.nv3-link-list li { padding: 7px 0; border-bottom: 1px solid var(--v3-rule-soft); }
.nv3-link-list li:last-child { border-bottom: none; }
.nv3-link-list a { display: block; font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--v3-ink-2); text-transform: uppercase; transition: color 0.2s; }
.nv3-link-list a:hover { color: var(--v3-gold); }
.nv3-shots-stack { position: relative; height: 270px; margin-bottom: 12px; }
.nv3-shot-card { position: absolute; left: 0; right: 0; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--v3-bg-3); border: 1px solid var(--v3-rule); border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,0.55); transition: transform 0.3s, box-shadow 0.3s, border-color 0.25s; transform-origin: center top; cursor: pointer; }
.nv3-shot-card:hover { border-color: var(--v3-gold); }
.nv3-shot-card.s1 { top: 0; z-index: 3; transform: rotate(-3deg); }
.nv3-shot-card.s2 { top: 50px; z-index: 2; transform: rotate(2deg); }
.nv3-shot-card.s3 { top: 100px; z-index: 1; transform: rotate(-1.5deg); }
.nv3-shots-stack:hover .s1 { transform: rotate(-4deg) translate(-8px,-6px); box-shadow: 0 8px 22px rgba(0,0,0,0.7); }
.nv3-shots-stack:hover .s2 { transform: rotate(3deg) translateY(-3px); }
.nv3-shots-stack:hover .s3 { transform: rotate(-2.5deg) translateX(8px); }
.nv3-shots-link { display: block; font-family: var(--v3-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--v3-gold-br); text-transform: uppercase; padding: 12px 0 4px; text-align: center; }
.nv3-shots-link:hover { color: var(--v3-gold-br); }
@media (max-width: 960px) {
.nv3-layout { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
.nv3-hero-lead { padding: 50px 22px 28px; }
.nv3-title { font-size: 30px; }
.nv3-deck { font-size: 17px; }
.nv3-hero { min-height: auto; }
.nv3-aside .nv3-sticky { position: static; }
}
.rg-srch-form { display: flex; gap: 10px; padding: 0 28px 8px; max-width: 760px; }
.rg-srch-form input { flex: 1; min-width: 0; background: var(--v3-bg-2); border: 1px solid var(--v3-rule); border-radius: 2px; color: var(--v3-ink); padding: 12px 14px; font: 17px var(--v3-body); }
.rg-srch-form input:focus { outline: none; border-color: var(--v3-gold); }
.rg-srch-form button { background: var(--v3-gold); color: var(--v3-bg-3); border: 0; border-radius: 2px; padding: 0 22px; font-family: var(--v3-display); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.rg-srch-form button:hover { background: var(--v3-gold-br); }
.rg-srch-taxo { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 28px 8px; list-style: none; margin: 0; }
.rg-srch-taxo a { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border: 1px solid var(--v3-gold); border-radius: 2px; color: var(--v3-gold-br); font-family: var(--v3-serif); font-size: 15px; }
.rg-srch-taxo a small { font-family: var(--v3-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-muted); }
.rg-srch-taxo a:hover { background: var(--v3-gold); color: var(--v3-bg-3); }
.rg-srch-taxo a:hover small { color: var(--v3-bg-3); }
.rg-srch-list { list-style: none; margin: 0; padding: 0 28px 8px; columns: 2; column-gap: 40px; }
.rg-srch-list li { break-inside: avoid; padding: 9px 0; border-bottom: 1px dotted var(--v3-rule-soft); }
.rg-srch-list a { display: block; font-family: var(--v3-serif); font-size: 16px; color: #f4e9d1; line-height: 1.35; }
.rg-srch-list a:hover { color: var(--v3-gold); }
.rg-srch-list small { display: block; margin-top: 2px; font-family: var(--v3-body); font-size: 12px; color: var(--v3-ink-3); }
.rg-srch-more { padding: 4px 28px 0; margin: 0; font-family: var(--v3-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.rg-srch-more a { color: var(--v3-gold); }
.rg-srch-more a:hover { color: var(--v3-gold-br); }
.rg-srch-none { display: none; padding: 8px 28px 16px; font-family: var(--v3-serif); font-size: 17px; color: var(--v3-ink-2); }
.rg-srch-res:not(:has(.rg-srch-sec)) .rg-srch-none { display: block; }
@media (max-width: 860px) { .rg-srch-list { columns: 1; } }
@media (max-width: 600px) { .rg-srch-form, .rg-srch-taxo, .rg-srch-list, .rg-srch-more, .rg-srch-none { padding-left: 16px; padding-right: 16px; } }