/* The field guides (site-src/guides/build.mjs copies this file to site/assets/css/guides.css and stamps its hash into
   the pages). It sits on main.css's tokens and controls (nav, buttons, eyebrows, the paper sections, the torn edges)
   and lays the guides out as plain reading pages: no script, no motion beyond the buttons' own. */

/* Russian: the site's Latin subsets have no Cyrillic, so Oswald's Cyrillic subset (Google Fonts, OFL, v57, a variable
   400 to 700 font) carries it under its own family name (one family with both would drop the Latin Oswald), and the
   Russian pages put it after Oswald in every stack (below) */
@font-face{font-family:'Oswald Cyrillic';src:url('/assets/fonts/Oswald-cyrillic.woff2?v=v57') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body.g-page{padding-bottom:0}
.g-page main{padding-top:var(--nav-h)}
.g-nav .nav__links{display:flex;gap:clamp(10px,2vw,30px);white-space:nowrap}
.g-nav .nav__tools .btn{white-space:nowrap}
@media (max-width:980px){.g-nav .nav__links{font-size:19px;gap:14px}}
@media (max-width:760px){.g-nav .nav__links{display:none}}

/* ---------- hero ---------- */
.g-hero{background:var(--ink-2);--zig:var(--ink-2);position:relative;overflow:hidden;padding:clamp(40px,7vh,96px) 0 clamp(66px,10vh,120px)}
.g-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 15%,rgba(216,57,43,.2),transparent 55%),radial-gradient(ellipse at 5% 100%,rgba(36,52,90,.38),transparent 55%);pointer-events:none}
.g-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.g-hero--hub .wrap{grid-template-columns:minmax(0,1fr)}
@media (max-width:999px){.g-hero .wrap{grid-template-columns:minmax(0,1fr)}}
.g-hero__text{display:grid;gap:clamp(14px,2.2vh,24px);align-content:start;min-width:0}
.g-crumbs{font-family:var(--f-type);font-size:13px;letter-spacing:.08em;color:rgba(243,231,204,.6)}
.g-crumbs a{color:rgba(243,231,204,.8);text-decoration-thickness:1px;text-underline-offset:3px}
.g-crumbs a:hover{color:var(--yellow)}
.g-h1{font-family:var(--f-slab);font-weight:400;line-height:1.04;letter-spacing:.005em;font-size:clamp(32px,3.7vw,62px);color:var(--cream);text-shadow:.05em .05em 0 var(--red);-webkit-text-stroke:.018em var(--ink);paint-order:stroke fill;text-wrap:balance;overflow-wrap:break-word}
.g-h1 em{font-style:normal;color:var(--yellow)}
.g-h1 a{color:inherit;text-decoration:none}
.g-by{font-family:var(--f-type);font-size:14px;letter-spacing:.04em;line-height:1.6;color:rgba(243,231,204,.72);max-width:66ch}
.g-note{border:3px dashed rgba(243,231,204,.32);padding:13px 18px 14px;max-width:70ch;font-size:16px;line-height:1.55;color:rgba(243,231,204,.88);background:rgba(243,231,204,.03)}
.g-note b{display:block;margin-bottom:3px;font-family:var(--f-display);font-weight:400;font-size:21px;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
.g-shot{margin:0;border:6px solid var(--ink);outline:4px solid var(--brass-lo);box-shadow:0 0 0 10px #2a1208,0 26px 50px rgba(0,0,0,.7);transform:rotate(1.1deg);background:#050303;min-width:0}
.g-shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.g-shot figcaption{font-family:var(--f-type);font-size:12.5px;letter-spacing:.03em;line-height:1.45;padding:8px 11px 9px;background:var(--ink);color:rgba(243,231,204,.75)}
@media (max-width:999px){.g-shot{transform:none;max-width:720px}}

/* ---------- sections ---------- */
.g-sec{padding:clamp(58px,9vh,112px) 0}
.g-sec--tight{padding:clamp(44px,7vh,80px) 0}
.g-sec .sec__head{margin-bottom:clamp(22px,3.6vh,40px)}
.g-sec .h2{font-size:clamp(32px,4vw,64px)}
.g-h3{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,2.2vw,40px);letter-spacing:.07em;line-height:1;text-transform:uppercase;color:var(--yellow);margin-bottom:16px}
.sec--paper .g-h3{color:var(--red-d)}
.g-prose{max-width:72ch;font-size:clamp(17px,.7vw + 10px,20px);line-height:1.62;display:grid;gap:1em}
.g-prose a,.g-game a:not(.btn),.g-qa a,.g-small a,.g-note a,.g-by a,.g-cmp td a{color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.sec--paper .g-prose a,.g-game a:not(.btn),.sec--paper .g-small a,.g-cmp td a{color:var(--red-d)}
.g-prose strong{color:var(--yellow);font-weight:700}
.sec--paper .g-prose strong{color:var(--red-d)}
.g-answer{border-left:6px solid var(--red);padding:2px 0 2px clamp(16px,2vw,24px);font-size:clamp(18px,.85vw + 11px,23px);line-height:1.55;max-width:70ch}
.g-small{font-family:var(--f-type);font-size:14px;letter-spacing:.03em;line-height:1.55;color:rgba(243,231,204,.72);max-width:80ch}
.sec--paper .g-small{color:rgba(26,20,16,.72)}
.g-row{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
.g-row .btn{font-size:clamp(19px,1vw + 11px,25px);white-space:normal;max-width:100%;text-align:center;line-height:1.1;word-break:auto-phrase;overflow-wrap:anywhere}

/* ---------- the comparison table ---------- */
.g-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border:4px solid var(--ink);outline:3px solid var(--brass-lo);background:var(--cream);box-shadow:0 0 0 9px #2a1208,0 24px 44px rgba(0,0,0,.6)}
.g-tbl:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.g-cmp{width:100%;min-width:1040px;border-collapse:collapse;font-size:15.5px;line-height:1.42;color:var(--ink)}
.g-cmp caption{caption-side:bottom;text-align:left;padding:10px 14px 11px;font-family:var(--f-type);font-size:12.5px;letter-spacing:.04em;line-height:1.5;color:rgba(26,20,16,.75);background:var(--paper-2)}
.g-cmp th,.g-cmp td{padding:11px 13px 10px;border-bottom:2px solid rgba(26,20,16,.13);text-align:left;vertical-align:top}
.g-cmp thead th{background:var(--ink);color:var(--yellow);font-family:var(--f-type);font-weight:400;font-size:12px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.g-cmp tbody th{font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:.04em;line-height:1.02;text-transform:uppercase;min-width:150px;max-width:190px}
.g-cmp tbody th a{color:var(--ink);text-decoration:none}
.g-cmp tbody th a:hover{color:var(--red-d);text-decoration:underline;text-decoration-thickness:2px}
.g-cmp small{display:block;margin-top:5px;font-family:var(--f-type);font-size:11.5px;letter-spacing:.05em;line-height:1.3;text-transform:none;color:var(--red-d)}
.g-cmp td small{color:rgba(26,20,16,.62)}
.g-cmp tbody tr:nth-child(even){background:rgba(26,20,16,.035)}
.g-cmp tr.is-ours{background:rgba(242,194,48,.3)!important;box-shadow:inset 6px 0 0 var(--red)}
/* the game's name stays in view while the other columns scroll past it */
.g-cmp th:first-child{position:sticky;left:0;z-index:1;background:var(--cream);box-shadow:inset -2px 0 0 rgba(26,20,16,.16)}
.g-cmp thead th:first-child{background:var(--ink);z-index:2}
.g-cmp tbody tr:nth-child(even) th{background:#eadfc5}
.g-cmp tr.is-ours th{background:#f3dc9d}
.g-yes{color:#21540f;font-weight:700}
.g-no{color:rgba(26,20,16,.55)}
.g-swipe{display:none;margin-top:12px;font-family:var(--f-type);font-size:13px;letter-spacing:.06em;color:rgba(243,231,204,.6)}
.g-swipe::after{content:" →"}
@media (max-width:1100px){.g-swipe{display:block}}

/* ---------- the games ---------- */
.g-list{display:grid;gap:clamp(22px,3.2vh,36px)}
.g-game{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,34px);background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--hard);padding:clamp(18px,2.4vw,32px)}
.g-game.has-pic{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
@media (max-width:999px){.g-game.has-pic{grid-template-columns:minmax(0,1fr)}}
.g-game.is-ours{border-color:var(--red-d);box-shadow:8px 8px 0 var(--red-d);background:linear-gradient(180deg,#fbefd3,var(--cream))}
.g-game__text{display:grid;gap:12px;align-content:start;min-width:0}
.g-game header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.g-num{font-family:var(--f-type);font-size:14px;letter-spacing:.12em;color:var(--red-d)}
.g-game h3{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,2.3vw,42px);letter-spacing:.04em;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
.g-game h3 a{color:var(--ink)!important;text-decoration:none}
.g-game h3 a:hover{color:var(--red-d)!important}
.g-tag{font-family:var(--f-type);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--red);color:var(--cream);padding:4px 9px 3px;transform:rotate(-2deg)}
.g-game p{font-size:clamp(16px,.4vw + 13px,18px);line-height:1.6;max-width:74ch}
.g-if{font-family:var(--f-type);font-size:15px!important;line-height:1.5!important;color:var(--red-d)}
.g-if b{font-weight:400;text-transform:uppercase;letter-spacing:.1em}
.g-vs{border-top:2px dashed rgba(26,20,16,.25);padding-top:11px}
.g-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:2px 0 0;font-family:var(--f-type);font-size:13px;letter-spacing:.02em;line-height:1.45;color:rgba(26,20,16,.8)}
.g-facts div{display:flex;gap:6px}
.g-facts dt{color:var(--red-d);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;padding-top:1px}
.g-facts dt::after{content:var(--dt-sep,":")}
html[lang="fr"]{--dt-sep:"\202F:"}
html:is([lang="ja"],[lang="zh-Hans"]){--dt-sep:"："}
.g-facts dd{margin:0}
.g-game .g-row{margin-top:6px}
.g-game__pic{margin:0;border:4px solid var(--ink);box-shadow:var(--hard);background:var(--ink)}
.g-game__pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.g-game__pic figcaption{font-family:var(--f-type);font-size:12.5px;line-height:1.45;padding:7px 10px 8px;color:rgba(243,231,204,.78)}

/* ---------- the dated lists (upcoming games by month, free demos) ---------- */
.g-cmp--list{min-width:880px}
.g-cmp--list tbody th{font-size:20px;max-width:230px}
.g-cmp--list td:nth-child(2){white-space:nowrap}
.g-months ul{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 clamp(26px,4vh,40px)}
.g-months a{display:inline-block;padding:7px 12px 6px;border:3px solid var(--ink-4);font-family:var(--f-type);font-size:13.5px;letter-spacing:.06em;line-height:1.2;text-decoration:none;color:var(--cream);background:rgba(243,231,204,.05)}
.g-months a:hover,.g-months a:focus-visible{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.g-month{scroll-margin-top:90px}
.g-month+.g-month{margin-top:clamp(34px,5vh,56px)}
.g-month .g-h3 span{font-family:var(--f-type);font-size:13px;letter-spacing:.1em;color:rgba(243,231,204,.6);vertical-align:middle;margin-left:8px}
.g-month .g-small{margin:-6px 0 14px}
.g-src--cols{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:28px}
html[lang="ru"] .g-cmp--list tbody th{font-size:17px}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) .g-cmp--list tbody th{font-size:16px}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) .g-month .g-h3 span{font-family:var(--cjk)}

/* ---------- questions ---------- */
.g-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px 22px}
.g-qa{border:3px solid var(--ink-4);background:rgba(243,231,204,.035);padding:16px 18px 18px;display:grid;gap:8px;align-content:start}
.g-qa h3{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,1vw + 15px,28px);letter-spacing:.05em;line-height:1.08;color:var(--yellow)}
.g-qa p{font-size:17px;line-height:1.58;color:rgba(243,231,204,.9)}

/* ---------- sources, languages, closing call ---------- */
.g-src{display:grid;gap:5px;margin-top:12px;padding-left:1.4em;list-style:decimal;font-family:var(--f-type);font-size:13.5px;letter-spacing:.02em;line-height:1.5;color:rgba(26,20,16,.8)}
.g-src a{color:var(--red-d);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.g-langs{margin-top:clamp(28px,4vh,44px);border-top:3px solid rgba(26,20,16,.2);padding-top:18px}
.g-langs p{font-family:var(--f-type);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-d);margin-bottom:12px}
.g-langs ul{display:flex;flex-wrap:wrap;gap:10px}
.g-langs a,.g-langs span{display:inline-block;padding:7px 13px 6px;border:3px solid var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.2;text-decoration:none;color:var(--ink);background:var(--cream);box-shadow:3px 3px 0 var(--ink)}
.g-langs a:hover{background:var(--yellow)}
.g-langs span{background:var(--ink);color:var(--yellow);box-shadow:none}
.g-cta{background:#1b0705;padding:clamp(64px,10vh,120px) 0;text-align:center;position:relative;overflow:hidden}
.g-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(216,57,43,.28),transparent 60%);pointer-events:none}
.g-cta .wrap{position:relative;display:grid;justify-items:center;gap:clamp(18px,3vh,28px)}
.g-cta .h2{font-size:clamp(34px,4.6vw,76px);max-width:20ch}
.g-cta .lede{max-width:52ch;margin-inline:auto}
.g-cta .g-row{justify-content:center}
.g-foot{background:#0a0605;padding:clamp(44px,7vh,80px) 0;text-align:center}
.g-foot .wrap{display:grid;justify-items:center;gap:20px}
.g-foot .finale__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-family:var(--f-display);font-size:21px;letter-spacing:.07em}
.g-foot .finale__links a{color:rgba(243,231,204,.82);text-decoration:none}
.g-foot .finale__links a:hover{color:var(--yellow)}
.g-foot .legal{font-size:14px;line-height:1.5;max-width:70ch;color:rgba(243,231,204,.55)}

/* ---------- the hub ---------- */
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px;margin-top:10px}
.g-card{display:grid;gap:10px;align-content:start;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--hard);padding:18px 20px 20px}
.g-card h3{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,1.2vw + 14px,30px);letter-spacing:.04em;line-height:1.05;text-transform:uppercase}
.g-card h3 a{color:var(--ink);text-decoration:none}
.g-card h3 a:hover{color:var(--red-d);text-decoration:underline}
.g-card h3 em{font-style:normal;color:var(--red-d)}
.g-card p{font-size:16px;line-height:1.5}
.g-card__lang{font-family:var(--f-type);font-size:12px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--red-d)}
.g-cards--dark .g-card{background:var(--ink-3);color:var(--cream);border-color:var(--ink-4);box-shadow:none}
.g-cards--dark .g-card h3 a{color:var(--cream)}
.g-cards--dark .g-card h3 a:hover{color:var(--yellow)}
.g-cards--dark .g-card h3 em{color:var(--yellow)}
.g-cards--dark .g-card__lang{color:var(--yellow)}

/* ---------- languages whose letters the site's display fonts lack ---------- */
html[lang="ru"]{--f-body:'Oswald','Oswald Cyrillic','Arial Narrow','Helvetica Neue',sans-serif;--f-display:'Oswald','Oswald Cyrillic','Arial Narrow',sans-serif;--f-slab:'Oswald','Oswald Cyrillic','Arial Narrow',sans-serif;--f-type:'Courier New',monospace}
html[lang="ru"] :is(.g-h1,.h2,.g-h3,.g-game h3,.g-cmp tbody th,.g-qa h3,.g-note b,.btn,.nav__links,.g-foot .finale__links,.g-card h3){font-weight:700}
html[lang="ru"] :is(.g-cmp tbody th,.g-game h3,.g-card h3){font-size:clamp(20px,1.6vw + 8px,30px);letter-spacing:.02em}
html[lang="ru"] .g-cmp tbody th{font-size:19px}
html[lang="ja"]{--cjk:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','YuGothic','Meiryo','Noto Sans JP','Noto Sans CJK JP',sans-serif}
html[lang="ko"]{--cjk:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Noto Sans CJK KR',sans-serif}
html[lang="zh-Hans"]{--cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC',sans-serif}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]){--f-body:var(--cjk);--f-type:var(--cjk)}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) :is(.g-h1,.h2){font-family:'Alfa Slab One',var(--cjk);font-weight:800;font-synthesis:none;letter-spacing:0;line-height:1.18}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) :is(.g-h3,.g-game h3,.g-cmp tbody th,.g-qa h3,.g-note b,.btn,.nav__links,.g-foot .finale__links,.g-card h3,.eyebrow){font-family:'Bebas Neue',var(--cjk);font-weight:700;font-synthesis:none;letter-spacing:.02em}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) :is(.g-game h3,.g-card h3){font-size:clamp(22px,1.4vw + 12px,32px);line-height:1.2}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) .g-cmp tbody th{font-size:18px;line-height:1.25}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) :is(.g-prose,.g-game p,.g-qa p,.g-note,.g-cmp){line-height:1.8}
html:is([lang="ja"],[lang="zh-Hans"]){line-break:strict}
html[lang="ja"] :is(.g-h1,.h2,.g-game h3,.g-qa h3){word-break:auto-phrase;overflow-wrap:anywhere}
html[lang="ko"]{word-break:keep-all}
/* the hub is an English page that shows the other languages' titles: their own letters, their own weight */
.g-card :is([lang="ja"],[lang="ko"],[lang="zh-Hans"]){font-family:'Bebas Neue','Hiragino Sans','Apple SD Gothic Neo','PingFang SC','Yu Gothic','Malgun Gothic','Microsoft YaHei','Noto Sans CJK JP',sans-serif;font-weight:700;letter-spacing:.02em;line-height:1.3}
.g-card [lang="ru"]{font-family:'Bebas Neue','Oswald Cyrillic','Oswald',sans-serif}
/* the home page gateways (/tr/, /ru/ and so on): the trailer that loads YouTube on a click, the store quote, the feature lines */
.g-gate .g-hero .g-row{margin-top:6px}
.g-trailer{position:relative;width:min(100%,980px);aspect-ratio:16/9;margin:clamp(18px,3vh,32px) auto 0;background:#050303;border:8px solid var(--brass-lo);outline:5px solid var(--ink);box-shadow:0 0 0 14px #2a1208,0 30px 60px rgba(0,0,0,.75)}
.g-trailer button{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;border:0;padding:0;background:#050303;cursor:pointer}
.g-trailer button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-trailer button i{position:relative;width:clamp(84px,11vw,140px);aspect-ratio:1;border-radius:50%;background:var(--yellow);border:6px solid var(--ink);box-shadow:6px 6px 0 var(--red-d);display:grid;place-items:center;transition:transform .2s var(--ease-snap)}
.g-trailer button:hover i,.g-trailer button:focus-visible i{transform:scale(1.1) rotate(-6deg)}
.g-trailer button svg{width:46%;fill:var(--ink);margin-left:8%}
.g-trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.g-trailer__nojs{position:absolute;inset:auto 0 0 0;padding:10px 14px;background:var(--ink);color:var(--yellow);text-align:center}
@media (max-width:640px){.g-trailer{border-width:5px;outline-width:3px;box-shadow:0 0 0 8px #2a1208,0 16px 30px rgba(0,0,0,.7)}}
.g-quote{margin:0;padding:14px 20px 16px;border-left:6px solid var(--red-d);background:rgba(26,20,16,.06)}
.g-quote p{font-style:italic}
.g-quote footer{margin-top:6px;font-family:var(--f-type);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-d)}
html:is([lang="ja"],[lang="ko"],[lang="zh-Hans"]) .g-quote p{font-style:normal}
.g-bul{display:grid;gap:.55em;padding-left:1.25em;list-style:square}
.g-gate .g-facts{margin-top:clamp(22px,3.5vh,38px)}
.g-presslink{margin-top:18px}