/* КОННЕКТ: главная с игрой. Чёрный фон, тонкие белые линии, один акцент. Скруглений нет. */
:root{--bg:#000;--fg:#fff;--mut:rgba(255,255,255,.64);--dim:rgba(255,255,255,.4);--line:rgba(255,255,255,.17);--acc:#ff5958;--hh:56px;--ph:56px;--gut:clamp(16px,3vw,40px)}
*,*::before,*::after{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth;scroll-padding-top:var(--hh)}
body{margin:0;background:var(--bg);color:var(--fg);font:300 16px/1.6 Montserrat,"Helvetica Neue",Arial,sans-serif;padding-bottom:var(--ph);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* шапка */
.kh{position:sticky;top:0;z-index:50;height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gut);background:#000;border-bottom:1px solid var(--line)}
.kh-brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.kh-brand img{height:34px;width:auto;display:block}
.kh-brand span{font-size:21px;letter-spacing:.14em;text-transform:uppercase;font-weight:300;line-height:1}
.kh-nav{display:flex;gap:clamp(18px,3vw,40px)}
.kh-nav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--mut);padding:8px 0;transition:color .2s}
.kh-nav a:hover{color:var(--fg)}
.kh-menu{display:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:10px 0}
@media (max-width:720px){
  .kh-menu{display:block}
  .kh-nav{position:absolute;top:var(--hh);left:0;right:0;flex-direction:column;gap:0;background:#000;border-bottom:1px solid var(--line);padding:6px var(--gut) 14px;display:none}
  .kh.is-open .kh-nav{display:flex}
  .kh-nav a{padding:12px 0;border-top:1px solid var(--line)}
  .kh-brand img{height:28px}
  .kh-brand span{font-size:18px}
}

/* кнопка */
.k-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 30px;border:1px solid var(--fg);font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,transform .1s}
.k-btn:hover{background:var(--fg);color:#000}
.k-btn:active{transform:translateY(1px)}
.k-link{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .2s,border-color .2s}
.k-link:hover{color:var(--fg);border-color:var(--fg)}

/* сцена игры */
.k-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - var(--hh) - var(--ph));min-height:440px}
.k-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;height:42px;min-width:0;overflow:hidden;padding:0 var(--gut);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line)}
.k-hud b{font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums}
.k-hud-l,.k-hud-r{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);min-width:0;white-space:nowrap}
.k-hud-r button{letter-spacing:.16em;text-transform:uppercase;color:var(--mut);padding:8px 0}
.k-hud-r button:hover{color:var(--fg)}
.k-lives{display:flex;gap:6px}
.k-life{width:9px;height:9px;border:1px solid var(--fg)}
.k-life.off{border-color:var(--dim);opacity:.4}
.k-pow{color:var(--acc);opacity:0;transition:opacity .2s}
.is-power .k-pow{opacity:1}
.is-demo .k-hud-r [data-act],.is-over .k-hud-r [data-act],.is-win .k-hud-r [data-act]{visibility:hidden}
.k-field{position:relative;min-height:0}
.k-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:0;transition:opacity .5s}
.is-play .k-field canvas{touch-action:none}
@media (max-width:720px){.k-hide-m{display:none}}

/* панель поверх поля */
.k-ov{position:absolute;inset:0;display:grid;place-items:center;padding:20px var(--gut);pointer-events:none}
.k-ov[hidden]{display:none}
.k-ov-panel{pointer-events:auto;width:min(440px,100%);padding:30px 32px 28px;background:rgba(0,0,0,.86);border:1px solid var(--line);text-align:left}
.k-ov-t{margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:.1em;text-transform:uppercase;line-height:1.15}
.k-ov-p{margin:0 0 22px;color:var(--mut);font-size:14px;line-height:1.6;max-width:42ch}
.k-ov-h{margin:16px 0 0;color:rgba(255,255,255,.52);font-size:11px;letter-spacing:.08em}
.k-ov-x{display:none;margin-left:20px}
/* на стартовом экране панель стоит под надписью, чтобы не закрывать её */
[data-game=v1].is-demo .k-ov,[data-game=v3].is-demo .k-ov{align-items:end;padding-bottom:clamp(16px,5%,44px)}
[data-game=v3] .k-ov-panel{padding:22px 24px 20px}
[data-game=v3] .k-ov-t{font-size:20px}
[data-game=v3] .k-hud .k-hide-v3{display:none}
.is-pause .k-ov-x{display:inline}

/* сообщение о проекте */
.k-toast{position:absolute;left:var(--gut);bottom:18px;z-index:5;width:min(340px,calc(100% - 2*var(--gut)));padding:14px 18px 15px;background:rgba(0,0,0,.9);border:1px solid var(--line);border-left:1px solid var(--acc);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.k-toast.on{opacity:1;transform:none;pointer-events:auto}
.k-toast-e{margin:0 0 4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.k-toast-t{margin:0;font-size:16px;font-weight:400;letter-spacing:.06em}
.k-toast-p{margin:4px 0 10px;font-size:13px;line-height:1.45;color:var(--mut)}
.k-toast-a{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:720px){.k-toast{top:10px;bottom:auto;left:10px;width:calc(100% - 20px);padding:10px 14px 11px;transform:translateY(-8px)}.k-toast-e{display:none}.k-toast-t{font-size:14px}.k-toast-p{margin:2px 0 0;font-size:12px}.k-toast-a{display:none}}

/* вариант 2: игра фоном за названием */
[data-game=v2].is-demo .k-field canvas{opacity:.34}
[data-game=v2].is-demo .k-hud{visibility:hidden}
[data-game=v2].is-demo .k-ov-panel{width:auto;max-width:100%;padding:0;background:none;border:0;text-align:center}
[data-game=v2].is-demo .k-ov-t{font-size:clamp(40px,9vw,128px);font-weight:200;letter-spacing:.1em;margin:0 0 6px;padding-left:.1em}
[data-game=v2].is-demo .k-ov-p{font-size:clamp(12px,1.5vw,19px);letter-spacing:.34em;text-transform:uppercase;color:var(--fg);max-width:none;margin:0 0 38px;padding-left:.34em}
[data-game=v2].is-demo .k-ov{background:radial-gradient(ellipse at center,rgba(0,0,0,.78) 0,rgba(0,0,0,.35) 46%,rgba(0,0,0,0) 72%)}

/* вариант 3: окно с игрой рядом с текстом */
.k-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center;min-height:calc(100dvh - var(--hh) - var(--ph));padding:clamp(20px,4vh,48px) var(--gut)}
.k-split-t h1{margin:0;font-size:clamp(40px,6.4vw,96px);font-weight:200;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.k-split-s{margin:12px 0 0;font-size:clamp(11px,1.1vw,15px);letter-spacing:.34em;text-transform:uppercase}
.k-split-p{margin:28px 0 0;max-width:46ch;color:var(--mut);font-size:15px}
.k-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 clamp(24px,3vw,48px);margin:34px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.k-stats dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);grid-row:1}
.k-stats dd{margin:4px 0 0;font-size:22px;font-weight:300;font-variant-numeric:tabular-nums;grid-row:2}
.k-stats dd small{font-size:13px;color:var(--dim)}
.k-win{position:relative;justify-self:center;width:min(100%,calc((100dvh - var(--hh) - var(--ph) - 120px)*.83));min-width:min(100%,300px)}
.k-win .k-stage{height:auto;min-height:0;border:1px solid var(--line)}
.k-win .k-field{aspect-ratio:19/23}
.k-win .k-hud{padding:0 14px}
.k-win-c{margin:10px 0 0;font-size:11px;letter-spacing:.08em;color:var(--dim)}
@media (max-width:900px){
  .k-split{grid-template-columns:minmax(0,1fr);align-items:start}
  .k-win{order:-1;width:min(100%,460px)}
  .k-split-p{margin-top:18px}
}

/* разделы под игрой */
.k-sec{padding:clamp(56px,9vw,120px) var(--gut);border-top:1px solid var(--line)}
.k-sec-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px clamp(24px,5vw,80px)}
.k-sec h2{margin:0;font-size:13px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.k-sec p{margin:0 0 22px;max-width:56ch;font-size:clamp(17px,1.6vw,22px);line-height:1.5}
.k-sec p.k-note{font-size:14px;color:var(--mut)}
@media (max-width:720px){.k-sec-in{grid-template-columns:minmax(0,1fr)}}
.k-plist{list-style:none;margin:0;padding:0}
.k-plist li{border-bottom:1px solid var(--line)}
.k-plist li:first-child{border-top:1px solid var(--line)}
.k-plist a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:6px 24px;align-items:baseline;padding:18px 0;text-decoration:none;transition:padding .25s}
.k-plist a:hover{padding-left:10px}
.k-p-n{font-size:clamp(17px,1.7vw,22px);font-weight:400;letter-spacing:.06em}
.k-p-d{font-size:14px;color:var(--mut)}
.k-p-s{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);opacity:0;transition:opacity .3s}
.k-plist li.on .k-p-s{opacity:1}
@media (max-width:720px){.k-plist a{grid-template-columns:minmax(0,1fr) auto}.k-p-d{grid-column:1/-1;grid-row:2}}
.k-rows{display:grid;gap:14px;margin:0;font-size:15px}
.k-rows div{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:16px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.k-rows dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding-top:5px}
.k-rows dd{margin:0}
.k-foot{display:flex;justify-content:space-between;gap:16px;padding:22px var(--gut) 26px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* плеер */
.pl{position:fixed;left:0;right:0;bottom:0;z-index:60;height:var(--ph);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,28px);padding:0 var(--gut);background:#000;border-top:1px solid var(--line)}
.pl[hidden]{display:none}
.pl-ctl{display:flex;align-items:center;gap:6px}
.pl-b{position:relative;width:40px;height:40px;display:grid;place-items:center;color:var(--fg)}
.pl-b[hidden]{display:none}
.pl-b::before{content:"";display:block;background:currentColor}
.pl-b:hover{color:var(--acc)}
[data-pl=play]{border:1px solid var(--line)}
[data-pl=play]::before{width:12px;height:14px;clip-path:polygon(0 0,100% 50%,0 100%);margin-left:3px}
.is-playing [data-pl=play]::before{clip-path:polygon(0 0,36% 0,36% 100%,64% 100%,64% 0,100% 0,100% 100%,0 100%);margin-left:0;width:11px}
[data-pl=prev]::before,[data-pl=next]::before{width:13px;height:11px;clip-path:polygon(0 0,82% 50%,82% 0,100% 0,100% 100%,82% 100%,82% 50%,0 100%)}
[data-pl=prev]::before{transform:scaleX(-1)}
.pl-mid{min-width:0;display:grid;gap:7px}
.pl-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-width:0}
.pl-title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-hint{font-size:11px;color:var(--acc);letter-spacing:.06em;white-space:nowrap}
.pl-hint[hidden]{display:none}
.pl-time{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-bar{position:relative;height:9px;cursor:pointer;display:block;width:100%}
.pl-bar::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line)}
.pl-fill{position:absolute;left:0;right:0;top:4px;height:1px;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
.pl-side{display:flex;align-items:center;gap:18px}
.pl-vol{width:84px;height:18px;appearance:none;-webkit-appearance:none;background:none;cursor:pointer}
.pl-vol::-webkit-slider-runnable-track{height:1px;background:var(--dim)}
.pl-vol::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;margin-top:-4px;background:var(--fg);border:0;border-radius:0}
.pl-vol::-moz-range-track{height:1px;background:var(--dim)}
.pl-vol::-moz-range-thumb{width:9px;height:9px;background:var(--fg);border:0;border-radius:0}
.pl-lst{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);padding:10px 0}
.pl-lst:hover{color:var(--fg)}
.pl-tracks{position:absolute;right:0;bottom:var(--ph);width:min(520px,100%);max-height:60dvh;overflow:auto;margin:0;padding:0;list-style:none;background:#000;border:1px solid var(--line);border-bottom:0;display:none}
.is-open .pl-tracks{display:block}
.pl-tracks button{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;width:100%;padding:14px 18px;text-align:left;font-size:12px;letter-spacing:.08em;border-bottom:1px solid var(--line);color:var(--mut)}
.pl-tracks button:hover,.pl-tracks .on button{color:var(--fg)}
.pl-tracks .on .pl-n{color:var(--acc)}
.pl-n,.pl-d{color:var(--dim);font-variant-numeric:tabular-nums}
@media (max-width:720px){.pl-vol{display:none}.pl-hint{display:none}.pl-side{gap:10px}}

/* выбор варианта: только на время согласования */
.k-var{position:fixed;right:var(--gut);bottom:calc(var(--ph) + 14px);z-index:40;display:flex;align-items:center;gap:2px;padding:4px;background:#000;border:1px solid var(--line);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.k-var span{padding:0 8px;color:var(--dim)}
.k-var a{padding:7px 10px;text-decoration:none;color:var(--mut)}
.k-var a[aria-current]{background:var(--fg);color:#000}
.k-playing .k-var{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* список проектов на главной */
.k-plist a{grid-template-columns:minmax(0,6fr) minmax(0,5fr) minmax(90px,auto)}
.k-plist .k-p-n{font-size:clamp(16px,1.35vw,19px);line-height:1.35}
.k-p-y{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:right;white-space:nowrap}
.k-p-s{grid-column:1/-1;margin-top:-2px}
.k-plist li:not(.on) .k-p-s{display:none}
@media (max-width:720px){.k-plist a{grid-template-columns:minmax(0,1fr) auto}.k-p-y{grid-column:2;grid-row:1;align-self:start;padding-top:5px}}

/* страница проекта */
.pj{padding-bottom:40px}
.pj-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center;max-width:1400px;margin:0 auto;padding:clamp(28px,6vh,72px) var(--gut)}
.pj-back{display:inline-block;margin-bottom:28px}
.pj h1{margin:0;font-size:clamp(28px,3.6vw,54px);font-weight:200;letter-spacing:.04em;line-height:1.12}
.pj-date{margin:16px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.pj-lead{margin:24px 0 0;max-width:60ch;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--mut)}
.pj-cover{margin:0;border:1px solid var(--line)}
.pj-cover img{display:block;width:100%;height:auto;max-height:78dvh;object-fit:cover}
.pj-facts{max-width:1240px;margin:0 auto;padding:0 var(--gut) clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 40px}
.pj-facts div{border-top:1px solid var(--line);padding-top:14px}
.pj-facts dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pj-facts dd{margin:8px 0 0;font-size:15px;line-height:1.55}
.pj-txt{font-size:clamp(15px,1.2vw,18px);line-height:1.65;max-width:68ch}
.pj-txt p{margin:0 0 14px}
.pj-txt a,.pj-lead a,.pj-facts a{color:var(--fg);text-decoration-color:var(--dim);text-underline-offset:3px}
.pj-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.pj-vid{margin:0}
.pj-vid video{display:block;width:100%;background:#0a0a0a;border:1px solid var(--line);aspect-ratio:16/9;object-fit:contain}
.pj-vid.vv video{aspect-ratio:9/16;max-height:78dvh}
.pj-vid figcaption,.pj-gal figcaption{margin-top:8px;font-size:12px;line-height:1.45;color:var(--dim)}
.pj-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pj-gal figure{margin:0}
.pj-zoom{display:block;width:100%;cursor:zoom-in}
.pj-gal img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);transition:border-color .2s}
.pj-zoom:hover img{border-color:var(--fg)}
.pj-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px)}
.pj-nav a{display:grid;gap:8px;padding:28px var(--gut);text-decoration:none;transition:background .2s}
.pj-nav a+a{border-left:1px solid var(--line);text-align:right}
.pj-nav a:hover{background:#0b0b0b}
.pj-nav span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pj-nav b{font-weight:300;font-size:clamp(14px,1.3vw,18px);line-height:1.4}
@media (max-width:900px){.pj-hero{grid-template-columns:minmax(0,1fr)}.pj-cover{order:-1}.pj-nav{grid-template-columns:1fr}.pj-nav a+a{border-left:0;border-top:1px solid var(--line);text-align:left}}

/* просмотр фото */
.lb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(0,0,0,.94);padding:56px 64px}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:100%;max-height:100%;display:grid;gap:10px;justify-items:center}
.lb img{max-width:100%;max-height:calc(100dvh - 150px);object-fit:contain}
.lb figcaption{font-size:12px;color:var(--mut);text-align:center}
.lb-b{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border:1px solid var(--line);color:var(--fg)}
.lb-b::before{content:"";display:block;width:10px;height:10px;margin:auto;border-top:1px solid currentColor;border-right:1px solid currentColor}
.lb-p{left:12px}.lb-p::before{transform:rotate(-135deg)}
.lb-n{right:12px}.lb-n::before{transform:rotate(45deg)}
.lb-b:hover{border-color:var(--fg)}
.lb-x{position:absolute;top:18px;right:20px}
.lb-on body{overflow:hidden}
@media (max-width:720px){.lb{padding:56px 12px}.lb-b{top:auto;bottom:14px}}

/* подсказка управления после старта */
.k-go{position:absolute;left:50%;top:14px;z-index:4;transform:translateX(-50%);margin:0;padding:9px 16px;background:rgba(0,0,0,.88);border:1px solid var(--acc);font-size:12px;letter-spacing:.06em;white-space:nowrap;pointer-events:none;animation:kgo 1.6s ease-in-out infinite}
.k-go[hidden]{display:none}
@keyframes kgo{50%{border-color:var(--line)}}
@media (max-width:720px){.k-go{white-space:normal;width:calc(100% - 24px);text-align:center}}

/* ссылки на релизы и записи, видео YouTube по щелчку */
.pj-links{display:flex;flex-wrap:wrap;gap:10px;max-width:1400px;margin:0 auto;padding:0 var(--gut) clamp(32px,5vw,56px)}
.k-btn-o{border-color:var(--line);color:var(--mut)}
.k-btn-o:hover{border-color:var(--fg);background:transparent;color:var(--fg)}
.pj-yt{position:relative;aspect-ratio:16/9;display:grid;place-items:center;align-content:center;gap:10px;border:1px solid var(--line);background:#050505}
.pj-yt p{margin:0;font-size:12px;color:var(--dim)}
.pj-yt-b{min-height:46px;padding:0 26px;border:1px solid var(--fg);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.pj-yt-b:hover{background:var(--fg);color:#000}
.pj-yt.on{display:block}
.pj-yt iframe{display:block;width:100%;height:100%;border:0}