/* Thief: Каменный век — сайт. Палитра взята из биомов самой игры. */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/press-start-2p-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/press-start-2p-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/golos-text-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/golos-text-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/golos-text-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/golos-text-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
 --ink:#0f1a14;--night:#16241b;--meadow:#2f5a34;--moss:#3d4a2a;--snow:#d3e1e8;--sand:#c9b27a;--lava:#4a2a2a;--crystal:#3a3f7a;--bone:#f1ead6;
 --fire:#ff8a2a;--fire-d:#a8470c;--gold:#ffd23f;
 --px:'Press Start 2P',ui-monospace,Menlo,monospace;--tx:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
 --g:16px;--wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--bone);font:400 18px/1.65 var(--tx)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
h1,h2,h3{font-family:var(--px);font-weight:400;margin:0}
h1{font-size:clamp(22px,4.4vw,42px);line-height:1.4}
h2{font-size:clamp(16px,2.5vw,24px);line-height:1.55;margin-bottom:24px}
h3{font-size:14px;line-height:1.6;margin-bottom:8px}
p{margin:0 0 14px;max-width:64ch}
.pix{image-rendering:pixelated;image-rendering:crisp-edges}

/* полосы-биомы с пиксельным краем */
.band{position:relative;background:var(--bg);color:var(--fg,var(--bone));padding:72px 0 64px;margin-top:0}
.band::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px;background:var(--bg);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 16V12h8V8h8V4h16v4h8v8h8v-4h8V8h16V4h8V0h8v8h16v4h8V8h8v4h16v-4h16v8z'/%3E%3C/svg%3E") repeat-x bottom/160px 16px;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 16V12h8V8h8V4h16v4h8v8h8v-4h8V8h16V4h8V0h8v8h16v4h8V8h8v4h16v-4h16v8z'/%3E%3C/svg%3E") repeat-x bottom/160px 16px}
.band-meadow{--bg:var(--meadow)}
.band-snow{--bg:var(--snow);--fg:var(--ink)}
.band-sand{--bg:var(--sand);--fg:var(--ink)}
.band-lava{--bg:var(--lava)}
.band-crystal{--bg:var(--crystal)}
.band-night{--bg:var(--night)}
.band-bone{--bg:var(--bone);--fg:var(--ink)}
.band-moss{--bg:var(--moss)}
.lead{font-size:20px;line-height:1.6}

/* кнопки и панели с вырезанными пиксельными углами */
.notch{clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.btn{display:inline-block;font:400 13px/1.4 var(--px);text-decoration:none;text-align:center;padding:16px 22px 20px;border:0;border-bottom:6px solid var(--fire-d);background:var(--fire);color:var(--ink);cursor:pointer;min-height:48px}
.btn:hover{background:#ff9d4a}
.btn:active{border-bottom-width:2px;padding-bottom:24px;margin-top:4px}
.btn-quiet{background:var(--bone);border-bottom-color:#8b8470;color:var(--ink)}
.btn-quiet:hover{background:#fff}
.btn[aria-disabled=true]{background:#5a5f58;border-bottom-color:#3a3d38;color:#c8c8bc;cursor:not-allowed}
.btn[aria-disabled=true]:hover{background:#5a5f58}
.panel{background:rgba(15,26,20,.55);padding:24px}
.band-snow .panel,.band-sand .panel,.band-bone .panel{background:rgba(255,255,255,.5)}

/* шапка */
.top{background:var(--night);position:sticky;top:0;z-index:20;border-bottom:4px solid var(--ink)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:60px}
.logo{font:400 13px/1 var(--px);text-decoration:none;color:var(--gold);white-space:nowrap}
.nav{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;margin-left:auto;font-size:16px}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;white-space:nowrap;padding:14px 2px;opacity:.88}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold)}

/* главный экран */
.hero{background:var(--night);padding:48px 0 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.hero h1{margin-bottom:22px;color:var(--bone)}
.hero .lead{max-width:36ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px}
.hero-note{font-size:15px;opacity:.8;margin:0}
.shot{border:4px solid var(--ink);box-shadow:10px 10px 0 #0a120d;background:#10351b}
.shot img{width:100%}
.road{position:relative;height:200px;margin-top:40px}
.road::before{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;background:#8a6a3c;border-top:8px solid #2f5a34;
 background-image:linear-gradient(90deg,#6b4f2a 0 24px,transparent 24px 96px);background-size:96px 6px;background-repeat:repeat-x;background-position:0 28px;background-color:#8a6a3c}
.walker{position:absolute;bottom:40px;left:0;width:108px;will-change:transform;animation:march 42s linear infinite}
.walker img{width:108px;height:120px;animation:bob .5s steps(2,jump-none) infinite alternate}
.walker::after{content:'';position:absolute;left:18px;right:18px;bottom:2px;height:6px;background:rgba(0,0,0,.35)}
@keyframes march{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 20px))}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.walker:nth-child(1){animation-delay:-2s}.walker:nth-child(2){animation-delay:-9s}.walker:nth-child(3){animation-delay:-16s}
.walker:nth-child(4){animation-delay:-23s}.walker:nth-child(5){animation-delay:-30s}.walker:nth-child(6){animation-delay:-37s}
@media (prefers-reduced-motion:reduce){.walker{animation:none;position:static;display:inline-block}.walker img{animation:none}.road{height:auto;padding:24px 0 56px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.walker::after{display:none}}

/* о игре */
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin-top:36px}
.feat h3{color:var(--gold)}
.feat p{margin:0}

/* герои */
.cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;margin-top:36px}
.hero-card{text-align:left}
.stage{height:190px;display:flex;align-items:flex-end;justify-content:center;position:relative;margin-bottom:16px}
.stage::before{content:'';position:absolute;left:8%;right:8%;bottom:0;height:34px;background:#5a5446;border-radius:50%;box-shadow:0 -6px 0 #6b6454,0 6px 0 #2a2620}
.stage img{width:144px;height:160px;position:relative;margin-bottom:12px}
.hero-card .role{font-size:15px;opacity:.75;margin:0 0 8px}

/* карты */
.maps{display:flex;align-items:flex-end;gap:28px;margin:36px 0 12px;flex-wrap:wrap}
.maps figure{margin:0}
.maps img{border:4px solid var(--ink);background:#2f5a34;width:100%;height:auto}
.maps figcaption{font-size:15px;margin-top:10px;line-height:1.5}
.maps .m0{flex:0 0 min(100%,200px)}.maps .m1{flex:0 0 min(100%,300px)}.maps .m2{flex:0 0 min(100%,400px)}
.biomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.biomes figure{margin:0;position:relative}
.biomes img{border:4px solid var(--ink);aspect-ratio:16/10;object-fit:cover;width:100%}
.biomes figcaption{position:absolute;left:4px;bottom:4px;background:var(--ink);color:var(--bone);font:400 10px/1 var(--px);padding:7px 8px 6px}
.biome-names{margin-top:20px;font-size:16px}
.relics{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}

/* эксперименты */
.xgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;align-items:center}
.xlist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.xlist b{color:var(--gold);font-weight:600}
.xlist li{padding-left:0}
.warn{margin-top:20px;font-size:16px;opacity:.9}

/* друзья */
.steps{margin:28px 0;padding:0;list-style:none;display:grid;gap:20px;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);font:400 16px/44px var(--px);width:44px;height:44px;text-align:center;background:var(--gold);color:var(--ink);padding-left:2px}

/* скачать */
.dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.dl .panel{display:flex;flex-direction:column;gap:12px}
.dl .btn{margin-top:auto}
.dl p{margin:0}
.dl .big{outline:4px solid var(--fire);outline-offset:-4px}
.tiny{font-size:15px;opacity:.8}
#install{display:none}

/* что нового */
.news{display:grid;gap:28px;margin-top:8px}
.news h3{font-size:13px}
.news ul,.cl ul{margin:10px 0 0;padding-left:22px}
.news li,.cl li{margin-bottom:6px}
.news .date,.cl .date{font-size:15px;opacity:.7}

/* вопросы */
details{border-top:3px solid var(--ink);padding:16px 0}
details:last-of-type{border-bottom:3px solid var(--ink)}
summary{cursor:pointer;font-weight:600;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font:400 18px/1.2 var(--px)}
details[open] summary::after{content:'−'}
details p{margin:12px 0 0}

/* создатели */
.credits{display:grid;grid-template-columns:max-content 1fr;gap:12px 32px;margin:28px 0 0;align-items:baseline}
.credits dt{font-family:var(--px);font-size:12px;line-height:1.7;color:var(--gold)}
.credits dd{margin:0}

footer{background:var(--ink);padding:48px 0 56px;margin-top:0;font-size:16px;position:relative}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer p{margin:0;opacity:.75;max-width:none}

/* журнал изменений */
.cl article{padding:28px 0;border-top:3px solid var(--ink)}
.cl article:first-of-type{border-top:0;padding-top:0}
.cl h2{font-size:16px;margin-bottom:6px}
.cl h3{font-size:12px;margin-top:18px;opacity:.8}

@media (max-width:860px){
 .hero-grid,.xgrid{grid-template-columns:1fr;gap:28px}
 .hero{padding-top:32px}
 .cast{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dl{grid-template-columns:1fr}
 .biomes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .feat,.relics{grid-template-columns:1fr}
 .band{padding:56px 0 48px}
}
@media (max-width:520px){
 body{font-size:17px}
 .logo{font-size:11px}
 .nav{gap:16px;font-size:15px}
 .credits{grid-template-columns:1fr;gap:4px}
 .credits dd{margin-bottom:14px}
 .stage img{width:108px;height:120px}.stage{height:150px}
 .btn{width:100%}
 .hero-cta{gap:12px}
}