/* landing/style.css — страница студии на cubevalley.io. Отдельный статический сайт, не часть сборки игры.
   Вид — интерфейс игры v3: токены src/ui/tokens.css (небо, белые плашки и синие окна с тёмной кромкой), пластиковые
   кнопки menu2.css / bright.css, шрифт Nunito 700–900. Одна тема — мир игры: фон и цвета заданы явно.
   Размеры в rem, 1rem = 10px (как в игре). Раскладка: телефон (до 640px), планшет, ПК (от 980px). */

@font-face {
  font-family: 'Nunito'; src: url(fonts/Nunito-landing.woff2) format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;   /* подмножество: латиница, вес 700–900 */
}

:root {
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --c-sky-top: #8fdcff; --c-sky-bot: #4aa9ff;
  --c-surface: #ffffff; --c-surface-2: #eef6ff; --c-surface-3: #dcecff;
  --c-glass: rgba(255, 255, 255, .9);
  --c-ink: #1b2a4a; --c-ink-2: #52648a; --c-ink-inv: #ffffff;
  --c-shadow: rgba(27, 42, 74, .22); --c-text-shadow: rgba(12, 24, 48, .38); --c-scrim: rgba(12, 24, 48, .66);
  --c-green: #38d15c; --c-green-2: #1faa45; --c-green-edge: #15883a;
  --c-yellow: #ffc933; --c-yellow-2: #f5a30f; --c-yellow-edge: #c97d06;
  --c-blue: #3a8dff; --c-blue-2: #1f6ce8; --c-blue-edge: #1654b8;
  --c-win: #3d84f0; --c-win-top: #4f93f7; --c-win-2: #2c6ddd; --c-win-3: #2459c4; --c-win-edge: #173f95;
  --c-win-line: rgba(255, 255, 255, .22); --c-win-muted: #d3e4ff; --c-win-hover: #3775e6;
  --r-s: .8rem; --r-m: 1rem; --r-l: 1.4rem; --r-xl: 2rem;
  --shadow-1: 0 .3rem 0 var(--c-shadow), 0 .8rem 2rem rgba(27, 42, 74, .14);
  --shadow-2: 0 .5rem 0 var(--c-shadow), 0 1.4rem 3rem rgba(27, 42, 74, .2);
  --hi: inset 0 .25rem 0 rgba(255, 255, 255, .45);
  --wrap: 118rem; --gut: 1.6rem;
}
@media (min-width: 700px) { :root { --gut: 3.2rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; color-scheme: light; background: var(--c-sky-bot); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font-ui); font-weight: 700; font-size: 1.7rem; line-height: 1.5; color: var(--c-ink);
  background: var(--c-sky-bot) linear-gradient(180deg, var(--c-sky-top) 0, var(--c-sky-bot) 110rem) no-repeat;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ul, figure { margin: 0; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }

/* ------------------------------------------------------------ кнопки: цветной пластик (menu2.css .nvBtn) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 5.6rem; padding: .8rem 2.6rem;
  border-radius: var(--r-l); font-family: inherit; font-size: 1.9rem; font-weight: 900; letter-spacing: .02em; line-height: 1.15;
  text-decoration: none; color: var(--c-ink-inv); text-shadow: 0 .2rem 0 var(--c-text-shadow); transition: transform .12s, filter .12s;
}
.btn .ico { width: 2.4rem; height: 2.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btnGreen { background: linear-gradient(var(--c-green), var(--c-green-2)); box-shadow: var(--hi), 0 .5rem 0 var(--c-green-edge), 0 1rem 2rem var(--c-shadow); }
.btnBlue { background: linear-gradient(var(--c-blue), var(--c-blue-2)); box-shadow: var(--hi), 0 .5rem 0 var(--c-blue-edge), 0 1rem 2rem var(--c-shadow); }
.btnGhost { color: var(--c-ink); text-shadow: none; background: var(--c-glass); border: .2rem solid var(--c-surface); box-shadow: var(--shadow-1); }
a.btn[href]:hover { transform: translateY(-.2rem); filter: brightness(1.05); }
a.btn[href]:active { transform: translateY(.2rem); }
/* фокус клавиатуры: тёмная кромка окон — на светлом небе и белых плашках контраст 3.8–10:1 (жёлтый там давал 1.0–1.6:1); в тёмном подвале — жёлтый */
a[href]:focus-visible { outline: .3rem solid var(--c-win-edge); outline-offset: .3rem; }
.foot a[href]:focus-visible { outline-color: var(--c-yellow); }
/* Poki (POKI_URL в index.html): с адресом — пластиковая кнопка «Play on Poki» (треугольник); без адреса — не кнопка, а ярлык
   «Coming soon on Poki» (часы): маленькая зелёная плашка, как «NOW BUILDING». Большая кнопка, которая ничего не делает, обманывала бы.
   Зелень ярлыка темнее кнопочной: белые буквы 15 px на ней читаются (3.0–4.6:1, на ярко-зелёном было бы 2:1) */
.pokiBtn .icoPlay { display: none; }
.pokiBtn.live .icoPlay { display: block; fill: currentColor; stroke: none; }
.pokiBtn.live .icoSoon { display: none; }
.pokiBtn:not([href]) { min-height: 0; gap: .7rem; padding: .6rem 1.5rem; border-radius: var(--r-m); font-size: 1.5rem; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(var(--c-green-2), var(--c-green-edge)); box-shadow: var(--hi), 0 .3rem 0 #0e632a; cursor: default; }
.pokiBtn:not([href]) .ico { width: 1.9rem; height: 1.9rem; stroke-width: 2.6; }

/* ------------------------------------------------------------ шапка: небо, облака, название, кнопки, картинка */
.hero { position: relative; overflow: hidden; padding-bottom: 7.2rem; }
.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud { position: absolute; fill: #fff; opacity: .9; shape-rendering: crispEdges; filter: drop-shadow(0 .4rem 0 rgba(255, 255, 255, .35)); }
.c1 { width: 20rem; top: 7rem; left: -6rem; animation: drift 70s linear infinite alternate; }
.c2 { width: 13rem; top: 2.4rem; left: 46%; opacity: .7; animation: drift 90s linear infinite alternate-reverse; }
.c3 { width: 18rem; bottom: 16rem; right: -7rem; opacity: .65; animation: drift 80s linear infinite alternate; }
@keyframes drift { to { transform: translateX(6rem); } }

.bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding-top: max(1.6rem, env(safe-area-inset-top)); }
.brand { display: inline-flex; align-items: center; gap: 1rem; min-height: 4.4rem; text-decoration: none; font-size: 1.9rem; font-weight: 900; color: var(--c-ink-inv);
  text-shadow: 0 .2rem 0 var(--c-win-edge), 0 0 .6rem rgba(23, 63, 149, .35); border-radius: var(--r-m); }
.brand img { width: 4.4rem; height: 4.4rem; border-radius: 1.1rem; box-shadow: 0 0 0 .2rem var(--c-surface), 0 .4rem 0 .2rem var(--c-win-edge); }
.navLinks { display: flex; gap: .8rem; }
.navLinks a { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 1.6rem; border-radius: var(--r-l); text-decoration: none; font-size: 1.5rem; font-weight: 900;
  color: var(--c-ink); background: var(--c-glass); border: .2rem solid var(--c-surface); box-shadow: var(--shadow-1); transition: transform .12s; }
.navLinks a:hover { transform: translateY(-.2rem); }

.heroGrid { position: relative; z-index: 2; display: grid; gap: 4rem; align-items: center; padding-top: 4rem; }
.heroText { text-align: center; container-type: inline-size; }   /* кегль названия — от ширины колонки (cqi), а не экрана: «CubeValley» не наезжает на картинку */
.wordmark { font-weight: 900; line-height: .95; color: var(--c-ink-inv); }
.wmName { display: block; font-size: clamp(4.6rem, 12vw, 8.4rem); font-size: clamp(4.6rem, 17.4cqi, 11.2rem); letter-spacing: -.01em;   /* первая строка — для браузеров без cqi */
  -webkit-text-stroke: .15em var(--c-win-edge); paint-order: stroke fill;   /* обводка под заливкой: снаружи остаётся половина — толстая тёмная кромка, как у логотипа игры */
  text-shadow: 0 .075em 0 var(--c-win-edge), 0 .16em .22em rgba(12, 24, 48, .28); }
.wmStudio { display: inline-block; margin-top: 1.6rem; padding: .7rem 1.6rem .7rem 2.2rem; border-radius: var(--r-l); font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-ink); background: linear-gradient(var(--c-yellow), var(--c-yellow-2)); box-shadow: var(--hi), 0 .5rem 0 var(--c-yellow-edge), 0 1rem 2rem var(--c-shadow); }
/* цифры студии — только в плашках под шапкой (.stats): в шапке те же «15 years / 500+» стояли вторым разом на том же экране */
.heroLead { max-width: 46rem; margin: 2.4rem auto 0; font-size: 1.9rem; line-height: 1.4; }
.heroLead b { font-weight: 900; }
.ctaRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem; margin-top: 2.8rem; }

/* картинка: кадр игры в плитке, как плитки главного меню (белая кромка, большой радиус), герои выходят за край плитки */
.heroArt { position: relative; padding-bottom: 2rem; }
.artTile { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: var(--r-xl); border: .4rem solid var(--c-surface); box-shadow: 0 0 0 .25rem var(--c-win-edge), var(--shadow-2); background: var(--c-surface-3); }
.keyArt { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cast { position: absolute; left: 50%; bottom: 0; width: 108%; max-width: none; transform: translateX(-50%); pointer-events: none; }

/* ------------------------------------------------------------ цифры: белые плашки */
.stats { display: grid; gap: 1.6rem; margin-top: -2.4rem; position: relative; z-index: 2; }
.stat { display: flex; align-items: center; gap: 1.6rem; min-height: 10rem; padding: 1.8rem 2.4rem; border-radius: var(--r-xl); background: var(--c-glass); border: .3rem solid var(--c-surface); box-shadow: var(--shadow-2); }
.num { flex: none; min-width: 9.6rem; font-size: 5.6rem; font-weight: 900; line-height: 1; letter-spacing: -.01em; color: var(--c-blue-2); text-shadow: 0 .3rem 0 rgba(22, 84, 184, .18); }
.stat:nth-child(2) .num { color: var(--c-green-2); text-shadow: 0 .3rem 0 rgba(21, 136, 58, .18); }
.stat span { font-size: 2rem; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.statTop img { flex: none; width: 7.2rem; height: 7.2rem; margin: -.6rem 1.2rem -.6rem 1.2rem; }

/* ------------------------------------------------------------ паблишеры: синее окно (bright.css), имена — слоты как в рюкзаке */
.pubs { margin-top: 6.4rem; }
.win { padding: 3.2rem 2rem 2.4rem; border-radius: var(--r-xl); color: var(--c-ink-inv); background: linear-gradient(var(--c-win-top), var(--c-win));
  border: .4rem solid var(--c-surface); box-shadow: 0 0 0 .25rem var(--c-win-edge), var(--shadow-2); }
.win h2, .gameHead h2, .plate h2 { font-size: clamp(2.8rem, 6.4vw, 4.4rem); font-weight: 900; line-height: 1.1; letter-spacing: .01em; text-wrap: balance; }
.win h2 { text-align: center; text-shadow: 0 .3rem 0 var(--c-win-edge); }
/* ряды по центру: неполный последний ряд (10 имён на 4 колонки планшета) не прилипает к левому краю */
.pubGrid { --cols: 2; --gap: 1rem; list-style: none; padding: 0; margin-top: 2.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.pubGrid li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 8.8rem; padding: 1rem; text-align: center;
  border-radius: var(--r-l); background: var(--c-win-3); border: .2rem solid var(--c-win-edge); box-shadow: inset 0 .3rem 0 rgba(0, 0, 0, .12), 0 .2rem 0 var(--c-win-line);
  font-size: 2rem; font-weight: 900; line-height: 1.15; text-shadow: 0 .2rem 0 var(--c-win-edge); overflow-wrap: anywhere; }
.pubGrid small { display: block; margin-top: .3rem; font-size: 1.3rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-win-muted); text-shadow: none; }

/* ------------------------------------------------------------ игра: текст на плашке и bento-сетка снимков (плитки меню) */
.game { margin-top: 6.4rem; display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
.gameHead { margin-bottom: 1.2rem; padding: 2.8rem 2.4rem; border-radius: var(--r-xl); background: var(--c-glass); border: .3rem solid var(--c-surface); box-shadow: var(--shadow-2); }
.kicker { display: inline-block; margin-bottom: 1.2rem; padding: .3rem 1.2rem; border-radius: var(--r-m); font-size: 1.4rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-inv); background: linear-gradient(var(--c-blue), var(--c-blue-2)); box-shadow: var(--hi), 0 .3rem 0 var(--c-blue-edge); }
.gameHead h2 { color: var(--c-ink); }
.gameHead p:not(.kicker) { margin: 1.2rem 0 2.4rem; font-size: 1.8rem; line-height: 1.5; }
.tile { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-xl); border: .3rem solid var(--c-surface); box-shadow: var(--shadow-1); background: var(--c-surface-3); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tile:hover img { transform: scale(1.04); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, var(--c-scrim)); pointer-events: none; }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.4rem 1.6rem; font-size: 2rem; font-weight: 900; line-height: 1.1; letter-spacing: .02em;
  text-transform: uppercase; color: var(--c-ink-inv); text-shadow: 0 .2rem 0 var(--c-text-shadow), 0 .4rem 1.2rem var(--c-scrim); }

/* ------------------------------------------------------------ связь (только с CONTACT_EMAIL) и подвал */
.contact { margin-top: 6.4rem; }
.plate { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 3.2rem 2.4rem; text-align: center; border-radius: var(--r-xl); background: var(--c-glass);
  border: .3rem solid var(--c-surface); box-shadow: var(--shadow-2); }
.mailBtn { max-width: 100%; overflow-wrap: anywhere; }
.foot { margin-top: 7.2rem; padding: 2.4rem 0 max(2.4rem, env(safe-area-inset-bottom)); color: var(--c-win-muted); background: var(--c-win-edge); font-size: 1.5rem; }
.footRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2.4rem; }
.foot a { display: inline-flex; align-items: center; min-height: 4.4rem; color: var(--c-ink-inv); font-weight: 900; text-underline-offset: .3rem; border-radius: var(--r-s); }

/* ------------------------------------------------------------ телефон: без пунктов меню в шапке */
@media (max-width: 639px) {
  .navLinks { display: none; }
  .heroGrid { gap: 2.8rem; padding-top: 2.4rem; }
  .heroLead { margin-top: 2rem; }
  .ctaRow { margin-top: 2.2rem; }
  .ctaRow .btn[href] { width: 100%; }   /* кнопка «Play on Poki» — во всю ширину; ярлык «Coming soon» — по тексту */
  .ctaRow .btnGhost { display: none; }   /* картинка — на первом экране; к разделу игры ведёт прокрутка */
  .artTile { aspect-ratio: 4 / 3; }
  .cast { width: 116%; }   /* герои крупнее: конь и дракон уходят за край экрана (.hero обрезает) */
  .mailBtn { padding: .8rem 1.8rem; font-size: 1.7rem; }   /* адрес вида hello@cubevalley.io — в одну строку с 340 px (длиннее — переносится, не вылезает) */
}
@media (max-width: 359px) { .pokiBtn:not([href]) { padding: .6rem 1.2rem; font-size: 1.3rem; letter-spacing: .03em; } }   /* 320–359 px: ярлык в плашке раздела игры — в одну строку */

/* ------------------------------------------------------------ планшет */
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { flex-direction: column; justify-content: center; text-align: center; gap: .8rem; padding: 2.4rem 1.6rem; }
  .num { min-width: 0; font-size: 6.4rem; }
  .statTop img { margin: -.4rem 0 -.2rem; }
  .pubGrid { --cols: 4; --gap: 1.2rem; }
  .win { padding: 4rem 3.2rem 3.2rem; }
  .game { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .gameHead, .tBig { grid-column: 1 / -1; }
  .tile:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

/* ------------------------------------------------------------ ПК: текст слева, картинка справа; сетка снимков 3 колонки */
@media (min-width: 980px) {
  html { font-size: 65%; }
  .hero { padding-bottom: 8.8rem; }
  .heroGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 5.6rem; padding-top: 5.6rem; }
  .heroText { text-align: left; }
  .heroLead { margin-left: 0; }
  .ctaRow { justify-content: flex-start; }
  .stats { margin-top: -3.2rem; }
  .stat { min-height: 17rem; }
  .pubGrid { --cols: 5; }
  .win { padding: 4.8rem 4rem 4rem; }
  .game { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gameHead { grid-column: auto; margin: 0; padding: 3.6rem 3.2rem; }
  .tile, .tile:last-child { grid-column: auto; aspect-ratio: 4 / 3; }
  .tile.tBig { grid-column: 2 / 4; aspect-ratio: auto; min-height: 42rem; }
}
/* узкий ПК и планшет лёжа (980–1199): колонка текста шире, вторая кнопка (та же ссылка, что «CubeValley» в шапке) — не нужна */
@media (min-width: 980px) and (max-width: 1199px) {
  .heroGrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
  .ctaRow .btnGhost { display: none; }
  /* узкая колонка раздела игры (220–293 px): «CubeValley» в 4.4rem (255 px) выходил за плашку до 1090 px, ярлык «Coming soon»
     (277 px) ломался на две строки — заголовок мельче, а ярлык здесь убран: тот же ярлык — в шапке страницы. Кнопка «Play on Poki» остаётся */
  .gameHead h2 { font-size: 3.6rem; }
  .gameHead .pokiBtn:not([href]) { display: none; }
}
@media (min-width: 1500px) { html { font-size: 68.75%; } }

/* ------------------------------------------------------------ меньше движения: облака стоят, без плавной прокрутки и подъёма кнопок */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud { animation: none; }
  .btn, .navLinks a, .tile img { transition: none; }
  a.btn[href]:hover, a.btn[href]:active, .navLinks a:hover, .tile:hover img { transform: none; }
}