/* Last Styx — laststyx.com */

@font-face{font-family:"Russo One";src:url(/fonts/russo-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;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:"Russo One";src:url(/fonts/russo-one-cyrillic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Sans";src:url(/fonts/pt-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;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:"PT Sans";src:url(/fonts/pt-sans-cyrillic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Sans";src:url(/fonts/pt-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;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:"PT Sans";src:url(/fonts/pt-sans-cyrillic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Sans";src:url(/fonts/pt-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"PT Sans";src:url(/fonts/pt-sans-cyrillic-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0400-045F,U+2116}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2116,U+2212}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0400-045F}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2116,U+2212}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0400-045F}

:root{
  --deck:#171b1e;      /* палуба: фон */
  --bulkhead:#222a2f;  /* переборка: панели */
  --rivet:#39444b;     /* линии и рамки */
  --amber:#f2a51a;     /* цвет логотипа */
  --rust:#b5530f;
  --alarm:#d8322a;     /* аварийные лампы */
  --paper:#efe7d3;     /* бумага штрафов и личных дел */
  --ink:#2b2219;
  --screen:#57f2d2;    /* экран БАРСИКА */
  --slime:#a3e635;
  --text:#e8e3d8;
  --muted:#a8a397;
  --display:"Russo One",Impact,"Arial Narrow Bold",sans-serif;
  --body:"PT Sans","Trebuchet MS",Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1180px;
  --hazard:repeating-linear-gradient(-45deg,var(--amber) 0 14px,#16191b 14px 28px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:112.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--deck);color:var(--text);font:400 1rem/1.55 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-underline-offset:.18em}
a:hover{color:#ffc65a}
:focus-visible{outline:3px solid var(--screen);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:#000;padding:.5em 1em;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}

h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.08;margin:0}
h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.05rem);color:var(--amber);text-wrap:balance}
h3{font-size:1.25rem;color:var(--text)}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:1.25rem;line-height:1.5;color:var(--text)}

/* Переборка между секторами станции */
.bulkhead{height:18px;background:var(--hazard);border-block:3px solid #0d0f10}

/* Шапка */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.25rem;transition:background .25s}
.top.solid{background:rgba(18,21,23,.94);box-shadow:0 1px 0 var(--rivet)}
.top .mark{width:92px;opacity:0;transition:opacity .25s}
.top.solid .mark{opacity:1}
.top nav{margin-left:auto;display:flex;gap:1.4rem;font-weight:700}
.top nav a{color:var(--text);text-decoration:none}
.top nav a:hover{color:var(--amber)}
.lang{display:flex;border:2px solid var(--amber);font:500 .78rem/1 var(--mono)}
.lang a,.lang span{padding:.42em .6em;text-decoration:none}
.lang span{background:var(--amber);color:#111}
.lang a{color:var(--amber)}
@media (max-width:760px){.top nav{display:none}.lang{margin-left:auto}}

/* Первый экран */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.hero picture,.hero .bg{position:absolute;inset:0;z-index:-2}
.hero .bg{width:100%;height:100%;object-fit:cover;object-position:52% 40%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,13,.55) 0%,rgba(10,12,13,.05) 30%,rgba(10,12,13,.1) 55%,rgba(23,27,30,.92) 86%,var(--deck) 100%)}
.hero-inner{text-align:center;padding:7rem 1.25rem 4rem;display:flex;flex-direction:column;align-items:center}
.hero-logo{width:min(440px,78vw);filter:drop-shadow(0 10px 24px rgba(0,0,0,.65))}
.pitch{font-family:var(--display);font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);margin:1.6rem 0 .4rem;text-shadow:0 2px 12px #000;max-width:30ch}
.sub{color:#d9d2c3;text-shadow:0 1px 8px #000;margin:0 auto 1.8rem;max-width:46ch}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:.55em;font:400 1.02rem/1 var(--display);padding:.95em 1.4em;text-decoration:none;border:3px solid var(--amber);color:#121212;background:var(--amber);cursor:pointer}
.btn:hover{background:#ffc04a;color:#121212}
.btn.ghost{background:rgba(15,17,18,.7);color:var(--amber)}
.btn.ghost:hover{background:rgba(15,17,18,.9);color:#ffc65a}
.btn svg{width:1.15em;height:1.15em;fill:currentColor}
.soon{margin-top:1.4rem;font:400 .8rem/1.4 var(--mono);color:var(--muted)}

/* Секции */
.sect{padding:clamp(4rem,8vw,7rem) 0}
.sect-head{margin-bottom:2.4rem;display:grid;gap:1rem}
.sect-head p{color:var(--muted);margin:0}

/* О игре: служебная записка + терминал БАРСИКА */
.about{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.about p:first-of-type{margin-top:1.6rem}
.terminal{background:#0b1513;border:10px solid #3b3a33;border-radius:18px;padding:1.4rem 1.4rem 1.2rem;box-shadow:inset 0 0 60px rgba(87,242,210,.12),0 0 0 3px #1a1a16}
.terminal .who{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.terminal img{width:78px;border-radius:10px}
.terminal .who b{font:500 .95rem/1.2 var(--mono);color:var(--screen)}
.terminal .who small{display:block;font:400 .75rem/1.3 var(--mono);color:#7bb6a8}
.terminal q{display:block;font:400 1rem/1.6 var(--mono);color:var(--screen);text-shadow:0 0 8px rgba(87,242,210,.45);quotes:none}
.terminal q+q{margin-top:.9rem}
.terminal q::before{content:"> ";opacity:.6}

.facts-line{margin-top:2.5rem;padding-top:1.4rem;border-top:2px solid var(--rivet);color:var(--muted);max-width:none}

/* Механики: инструкция по выживанию */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border-top:3px solid var(--amber)}
.rule{padding:1.6rem 1.6rem 1.6rem 0;border-bottom:1px solid var(--rivet)}
.rule h3{color:var(--amber);margin-bottom:.5rem}
.rule p{margin:0;color:var(--text)}
@media (min-width:700px){.rule:nth-child(odd){padding-right:2.4rem}.rule:nth-child(even){padding-left:2.4rem;border-left:1px solid var(--rivet)}}
@media (min-width:1080px){.rules{grid-template-columns:repeat(3,1fr)}.rule{padding:1.8rem 2rem!important;border-left:1px solid var(--rivet)}.rule:nth-child(3n+1){border-left:0;padding-left:0!important}}

/* Отряд: личные дела */
.files{display:grid;grid-auto-flow:column;grid-auto-columns:min(250px,72vw);gap:1.2rem;overflow-x:auto;padding:0 0 1.4rem;scroll-snap-type:x mandatory;scrollbar-color:var(--amber) var(--bulkhead)}
.file{scroll-snap-align:start;background:var(--paper);color:var(--ink);padding:.7rem .7rem 1rem;position:relative;transform:rotate(var(--tilt,0deg))}
.file:nth-child(3n+2){--tilt:.6deg}.file:nth-child(3n){--tilt:-.5deg}
.file img{aspect-ratio:9/15;object-fit:cover;object-position:50% 0;width:100%;background:#cfc6b0}
.file h3{color:var(--ink);font-size:1.12rem;margin:.75rem 0 .15rem}
.file .role{font:500 .8rem/1.3 var(--mono);color:#7a5a2c;margin:0 0 .6rem}
.file p{font-size:.92rem;line-height:1.4;margin:0 0 .35rem}
.file .stamp{position:absolute;top:1.1rem;right:.4rem;font:400 .8rem/1 var(--display);color:var(--alarm);border:2px solid var(--alarm);padding:.3em .45em;transform:rotate(8deg);background:rgba(239,231,211,.85)}
.hint{color:var(--muted);font-size:.9rem;margin-top:.4rem}

/* Бывшие коллеги */
.kin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
@media (max-width:900px){.kin{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.kin{gap:.8rem}.mut div{padding:.7rem .7rem .9rem}.mut h3{font-size:1.05rem}.mut p{font-size:.82rem}}
.mut{background:var(--bulkhead);border:1px solid var(--rivet);display:flex;flex-direction:column}
.mut img{aspect-ratio:4/5;object-fit:cover;object-position:50% 8%;width:100%}
.mut div{padding:.9rem 1rem 1.1rem}
.mut h3{margin-bottom:.35rem;overflow-wrap:anywhere;hyphens:auto}
.mut p{margin:0;font-size:.93rem;color:var(--muted)}
.mut p b{color:var(--text);font-weight:700}
.mut.redacted{justify-content:center;background:repeating-linear-gradient(0deg,#121516 0 22px,#0c0e0f 22px 26px);min-height:300px}
.mut.redacted div{padding:1.4rem}
.bar{display:block;height:.9em;background:#000;margin:.35em 0;width:var(--w,100%)}
.mut.redacted p{color:var(--text);margin-top:1rem}

/* Станция */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){.places{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.places{grid-template-columns:1fr}}
.shot{all:unset;cursor:zoom-in;display:block}
.shot img{aspect-ratio:16/9;object-fit:cover;width:100%;border:1px solid var(--rivet);transition:filter .2s}
.shot:hover img{filter:brightness(1.12)}
.shot:focus-visible{outline:3px solid var(--screen);outline-offset:3px}
.shot span{display:block;margin-top:.55rem;font-weight:700}
.shot small{display:block;color:var(--muted);font-weight:400}

/* Комикс */
.comic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.pages .shot img{aspect-ratio:2/3;object-fit:cover}
.pages .shot:first-child{grid-column:span 2;grid-row:span 2}
.comic .cta{justify-content:flex-start;margin-top:1.6rem}
@media (max-width:860px){.comic{grid-template-columns:1fr}.pages{grid-template-columns:repeat(4,1fr)}.pages .shot:first-child{grid-column:span 4;grid-row:auto}}

/* Минутка корпоративной заботы */
.care{background:var(--paper);color:var(--ink);background-image:radial-gradient(rgba(43,34,25,.07) 1px,transparent 1.2px);background-size:6px 6px}
.care .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.care img{width:min(260px,40vw);border:6px solid #fff8e6;box-shadow:0 8px 24px rgba(43,34,25,.25);transform:rotate(-2deg)}
.care h2{color:#1f3b73;font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem)}
.care .slogan{font-size:1.35rem;margin:1rem 0 1.4rem;max-width:34ch}
.fine-print{font-size:.72rem;line-height:1.45;color:#6d6252;max-width:70ch;margin:0}
@media (max-width:640px){.care .wrap{grid-template-columns:1fr}.care img{width:200px}}

/* Пресса */
.press{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.sheet{margin:0;border-top:3px solid var(--amber)}
.sheet div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--rivet)}
.sheet dt{color:var(--muted)}
.sheet dd{margin:0}
.downloads{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.7rem}
.downloads a{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;background:var(--bulkhead);border:1px solid var(--rivet);color:var(--text);text-decoration:none;font-weight:700}
.downloads a:hover{border-color:var(--amber);color:var(--amber)}
.downloads small{font:400 .8rem/1.6 var(--mono);color:var(--muted)}
.mail{display:grid;gap:.4rem}
.mail a{font-family:var(--mono);font-size:1rem}
@media (max-width:860px){.about,.press{grid-template-columns:1fr}.sheet div{grid-template-columns:8.5rem 1fr}}

/* Подвал */
footer{padding:3rem 0 4rem;border-top:3px solid #0d0f10;background:#111416;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-start;justify-content:space-between}
.social{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.social a{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--rivet);color:var(--text)}
.social a:hover{border-color:var(--amber);color:var(--amber)}
.social svg{width:20px;height:20px;fill:currentColor}
footer p{margin:0 0 .4rem}

/* Просмотр картинок */
dialog.viewer{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100svh;color:var(--text)}
dialog.viewer::backdrop{background:rgba(6,7,8,.94)}
.viewer figure{margin:0;height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:3.5rem 4.5rem 1rem}
.viewer img{max-height:calc(100svh - 7rem);max-width:100%;width:auto;object-fit:contain}
.viewer figcaption{padding:.8rem;color:var(--muted);text-align:center}
.viewer button{position:absolute;background:rgba(20,23,25,.85);border:2px solid var(--rivet);color:var(--text);width:52px;height:52px;font:400 1.5rem/1 var(--display);cursor:pointer}
.viewer button:hover{border-color:var(--amber);color:var(--amber)}
.viewer .x{top:1rem;right:1rem}
.viewer .prev{left:1rem;top:50%}
.viewer .next{right:1rem;top:50%}
@media (max-width:640px){.viewer figure{padding:4rem .5rem 1rem}.viewer .prev,.viewer .next{top:auto;bottom:1rem}}

/* Штрафы БАРСИКА: чековая лента */
.fines{position:fixed;right:1rem;bottom:0;z-index:30;width:min(300px,calc(100vw - 2rem));pointer-events:none}
.receipt{pointer-events:auto;background:var(--paper);color:var(--ink);font:400 .82rem/1.45 var(--mono);padding:1.1rem 1.1rem 1rem;
  box-shadow:0 -6px 30px rgba(0,0,0,.45);
  -webkit-mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/14px 100%;
          mask:radial-gradient(circle 5px at 50% 0,transparent 98%,#000) 0 0/14px 100%;
  transform:translateY(105%);transition:transform .9s steps(9,end)}
.receipt.on{transform:none}
@media (max-width:480px){.receipt{font-size:.74rem;padding:.9rem .9rem .8rem}.receipt .thanks{display:none}}
@media (prefers-reduced-motion:reduce){.receipt{transition:none}}
.receipt header{display:flex;gap:.7rem;align-items:center;border-bottom:1px dashed #8d8270;padding-bottom:.6rem;margin-bottom:.6rem}
.receipt header svg{width:34px;height:28px;flex:none}
.receipt header b{font-weight:500;display:block}
.receipt .row{display:flex;justify-content:space-between;gap:1rem}
.receipt .why{margin:.2rem 0 .6rem}
.receipt .sum{font-weight:500;border-top:1px dashed #8d8270;padding-top:.5rem;margin-top:.5rem}
.receipt .thanks{margin:.6rem 0 .8rem;color:#6d6252}
.receipt button{font:500 .8rem/1 var(--mono);background:var(--ink);color:var(--paper);border:0;padding:.7em 1em;cursor:pointer;width:100%}
.receipt button:hover{background:#000}

@media print{.top,.fines,.hero::after{display:none}body{background:#fff;color:#000}}