/*
Theme Name: Caser Ru
Theme URI: https://caser-cs2.cc/
Description: Тема сайта Caser Ru — кейсы CS2, апгрейд и контракты. Язык дизайна «Капсула наклеек».
Version: 1.1.2
Author: Caser Ru
Text Domain: csr-theme
*/

/* ============================================================
   КОНТРАКТ НАПРАВЛЕНИЯ — выбран владельцем 22.09.2026
   (рулетка impeccable, ключ броска ededd088; шрифт заголовка
   выбран владельцем отдельно, вариант A)

   THESIS   Всё на сайте — наклейка из капсулы: её отрывают, она
            блестит фольгой, под ней стоит цена. Сайт отказывается
            от карточки со скруглением и от окна инвентаря Steam
            (последнее занято соседним сайтом сетки).
   OWN-WORLD Чёрная база 0A0A0A, фольгированные плашки с отрезанным
            углом, зелёное свечение бренда сверху экрана, янтарь
            только на числах. Узнаётся с убранным текстом по срезу
            угла и металлическому блику.
   STORY    Человек проглядывает полосу наклеек, цепляется за цену
            и уходит по кнопке открывать кейс.
   FIRST VIEWPORT  Заголовок Seymour One на всю ширину, под ним
            лид и полоса из четырёх плашек с числами; реф-кнопка
            стоит в шапке справа и видна на всех ширинах.
   FORM     Срез угла через clip-path вместо скругления, ноль
            радиусов на сайте, ховер — сдвиг на 2px и смена блика.
   ============================================================ */

/* Оси расхождения с предыдущими сайтами сетки (нужно ≥4 из 7):
   1. Типографика — Seymour One + Ubuntu Condensed, пара в сетке не занята.
   2. Форма поверхностей — срезанный угол, скруглений нет нигде.
   3. Ритм секций — чередование чёрных полос и фольгированных лент.
   4. Характер акцента — зелёный бренда на действии, янтарь только на числах.
   5. Структура первого экрана — заголовок во всю ширину и лента чисел под ним.
   6. Ховер — сдвиг и смена блика, теней нет.
   7. Подача чисел — крупные табличные цифры на фольге. */

@import url('fonts/fonts.css');

:root{
  /* палитра снята с офсайта caser.one/caser.gg */
  --ink:#0A0A0A;
  --ink-2:#121316;
  --ink-3:#1A1C20;
  --line:#26292F;
  --line-2:#33373F;
  --tx:#F2F4F6;
  --tx-dim:#A6AEB6;
  --tx-dim-2:#7F8890;
  --green:#44C987;
  --green-deep:#13432C;
  --green-line:rgba(68,201,135,.45);
  --blue:#83D8FF;
  --amber:#FFA800;
  --red:#FF5252;
  /* Тёмные стопы фольги подняты 23.09.2026: на #8e959d/#9aa1a9 подпись
     плашки #3C4248 давала замером 3,36:1 — ниже AA. Подпись заодно
     затемнена до #33383E, теперь худший пиксель даёт 4,6:1. */
  --foil-1:#d9dde2;
  --foil-2:#9ea5ad;
  --foil-3:#f2f5f8;
  --foil-4:#a1a8b0;

  --hull:1480px;          /* контейнер — правило 19, не уже 1400 */
  --gutter:28px;
  --col:940px;            /* текстовая колонка внутри контейнера */
  --cut:14px;             /* размер среза угла — единственный масштаб формы */
  --f-d:'Seymour One','CaserRub',sans-serif;
  --f-t:'Ubuntu Condensed','CaserRub',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--tx);
  font-family:var(--f-t);font-size:18px;line-height:1.6;
  overflow-x:hidden;
}
/* зерно на фоне — через feTurbulence в data-URI, не тайл из точек */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--f-d);font-weight:400;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(34px,5.2vw,68px);line-height:1.02}
h2{font-size:clamp(26px,3.1vw,40px);line-height:1.1;margin-top:0}
h3{font-size:clamp(20px,2.1vw,25px);line-height:1.18}
p{margin:0 0 1.05em}
::selection{background:var(--green);color:#06210f}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
html{scrollbar-color:var(--line-2) var(--ink)}
input,textarea{caret-color:var(--green)}

.wrap{width:100%;max-width:var(--hull);margin:0 auto;padding:0 var(--gutter)}
/* Узкая текстовая колонка ограничивает СТРОКУ, а не контейнер: иначе
   `.wrap.col` сжимается до 940px вместе с полями и секция уезжает
   в центр экрана, ломая общее выравнивание сайта по левому краю. */
.col{max-width:var(--col)}
.wrap.col{max-width:var(--hull)}
.wrap.col>*{max-width:var(--col)}
.rub{font-family:'CaserRub',sans-serif;font-weight:700;font-size:.9em}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ───────────── шапка ───────────── */
.rail{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.94);
  border-bottom:1px solid var(--line);backdrop-filter:blur(7px)}
.rail__in{display:flex;align-items:center;gap:26px;height:72px;
  width:100%;max-width:var(--hull);margin:0 auto;padding:0 var(--gutter)}
.mark{display:flex;align-items:center;gap:9px;min-width:0;flex:0 0 auto;
  font-family:var(--f-d);font-size:25px;color:#fff;letter-spacing:.02em}
.mark:hover{text-decoration:none}
.mark__ic{width:26px;height:26px;flex:0 0 auto;display:block}
.mark__tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mark__tx b{font-weight:400;color:var(--green)}
.nav{display:flex;align-items:center;gap:20px;min-width:0;flex:1 1 auto;overflow:hidden}
.nav a{color:var(--tx-dim);font-size:17px;white-space:nowrap;letter-spacing:.02em}
.nav a:hover{color:var(--tx);text-decoration:none}
.nav a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--green)}
.pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--green);color:#06210f;font-family:var(--f-t);font-size:18px;
  padding:11px 22px;letter-spacing:.03em;white-space:nowrap;border:0;cursor:pointer;
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  transition:transform .15s ease,background-color .15s ease}
.pill:hover{background:#5ad894;text-decoration:none;transform:translateY(-2px)}
/* У призрачной кнопки обводки нет намеренно: clip-path срезает углы
   и режет inset-рамку на отдельные отрезки — на живой странице это
   читается как сломанная линия над подписью. Вместо рамки — заливка. */
.pill--ghost{background:var(--ink-3);color:var(--green)}
.pill--ghost:hover{background:#23262b;color:var(--green)}
.pill__short{display:none}
.rail .pill{margin-left:auto}
.burger{display:none;flex:0 0 auto;width:42px;height:38px;background:transparent;
  border:1px solid var(--line-2);color:var(--tx);align-items:center;justify-content:center}
.drawer{display:none;border-top:1px solid var(--line);background:var(--ink-2)}
.drawer.is-shown{display:block}
.drawer__in{max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;
  padding:10px var(--gutter) 22px}
.drawer a{display:block;padding:12px 0;color:var(--tx);border-bottom:1px solid var(--line);
  font-size:19px}
.drawer a:hover{text-decoration:none;color:var(--green)}

/* ───────────── первый экран ─────────────
   Фон капсулы — кадр карты, размытие ЗАПЕЧЕНО в файл (convert -blur 0x10):
   живой filter:blur() заставлял бы браузер размывать 1600px каждый кадр,
   а размытый кадр вдобавок жмётся в разы лучше (3,59 МБ PNG → 16 КБ WebP).
   Кадр светлый (песок и небо), поэтому поверх идёт плотная шторка ::after:
   без неё лид #A6AEB6 давал над песком контраст около 1,4:1. */
.capsule{position:relative;padding:54px 0 12px;overflow:hidden;
  background-color:var(--ink);
  background-image:url('images/hero-bg.jpg');
  background-image:-webkit-image-set(url('images/hero-bg.webp') type('image/webp'),url('images/hero-bg.jpg') type('image/jpeg'));
  background-image:image-set(url('images/hero-bg.webp') type('image/webp'),url('images/hero-bg.jpg') type('image/jpeg'));
  background-repeat:no-repeat;background-position:50% 42%;background-size:cover}
/* шторка под текстом; книзу почти чёрная, чтобы стык с секцией .band не был линией */
.capsule::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,10,.72) 0%,rgba(10,10,10,.80) 58%,rgba(10,10,10,.97) 100%)}
/* свечение бренда ослаблено с .22 до .15: над кадром оно читалось
   зелёным налётом на песке, а по контракту направления оно обязано остаться */
.capsule::before{content:"";position:absolute;left:50%;top:-220px;width:1200px;height:520px;
  transform:translateX(-50%);pointer-events:none;z-index:1;
  background:radial-gradient(52% 60% at 50% 50%,rgba(68,201,135,.15),transparent 70%)}
.capsule>.wrap{position:relative;z-index:2}
.capsule__h1{max-width:19ch}
.capsule__h1 em{font-style:normal;color:var(--amber)}
.capsule__lead{font-size:clamp(18px,1.6vw,21px);color:var(--tx-dim);max-width:60ch;margin-bottom:26px}
.capsule__act{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:34px}
.capsule__act .pill{font-size:19px;padding:14px 28px}

/* Текст и кейс в первом экране главной: две колонки, лента .strip — под ними
   во всю ширину. Ниже 960px кейс уходит ПОД кнопки, а не над ними: иначе он
   выдавливает реф-кнопку с первого экрана на 320–430px. */
.capsule__top{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.capsule__tx{min-width:0}
.capsule__art{min-width:0;margin:0 0 26px}
.capsule__art img{width:100%;max-width:340px;height:auto;margin:0 auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.6))}
.capsule__top .capsule__act{margin-bottom:22px}
@media(min-width:960px){
  .capsule__top{grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:44px}
  .capsule__art{margin:0}
  .capsule__art img{max-width:100%}
  .capsule__top .capsule__act{margin-bottom:34px}
}

/* ───────────── лента плашек-наклеек ───────────── */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stk{position:relative;min-width:0;padding:15px 17px 18px;color:#0A0A0A;
  background:linear-gradient(150deg,var(--foil-1) 0%,var(--foil-2) 42%,var(--foil-3) 58%,var(--foil-4) 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  transition:transform .15s ease,filter .15s ease}
.stk:hover{transform:translateY(-2px);filter:brightness(1.06)}
.stk__u{display:block;font-size:14.5px;letter-spacing:.1em;color:#33383E;text-transform:uppercase}
.stk__b{display:block;font-family:var(--f-d);font-size:clamp(22px,2.4vw,32px);line-height:1.1;margin-top:5px}
.stk--dark{color:var(--tx);background:linear-gradient(150deg,#1E3A2B 0%,#14201A 100%)}
.stk--dark .stk__u{color:var(--green)}

/* ───────────── секции ───────────── */
.band{padding:58px 0}
.band--tight{padding:40px 0}
.band--foil{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band__lead{color:var(--tx-dim);max-width:72ch;margin-bottom:28px}

/* блок со срезом — основная поверхность вместо карточки */
.peel{position:relative;padding:22px 24px 24px;background:var(--ink-3);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  transition:transform .15s ease,box-shadow .15s ease}
.peel:hover{transform:translateY(-2px);background:#212429}
.peel h3{margin-bottom:.35em}
.peel p:last-child{margin-bottom:0}
.peel__n{font-family:var(--f-d);font-size:30px;color:var(--amber);line-height:1;margin-bottom:8px}
.peel--lit{background:linear-gradient(150deg,#16281F 0%,#14181A 100%)}

.rows{display:grid;gap:16px}
.rows--2{grid-template-columns:minmax(0,1fr)}
.rows--3{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.rows--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1020px){.rows--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* список-лента: несущий элемент внутренних страниц */
.tape{display:flex;flex-direction:column;gap:10px}
.tape__i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:14px 18px;background:var(--ink-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.tape__i:hover{background:#1E2126}
.tape__k{font-family:var(--f-d);font-size:15px;color:var(--tx-dim-2);letter-spacing:.06em}
.tape__t{min-width:0}
.tape__t b{display:block;font-weight:400;font-size:19px}
/* Только ПРЯМОЙ потомок: иначе правило ловит служебные спаны цены
   (.num и .rub из csr_price) и разносит «19 ₽» по отдельным строкам
   мелким серым кеглем — дефект виден только кадром живой страницы. */
.tape__t>span{display:block;font-size:16px;color:var(--tx-dim-2)}
.tape__t .num,.tape__t .rub{display:inline;font-size:inherit;color:inherit}
.tape__v{font-family:var(--f-d);font-size:21px;color:var(--green);white-space:nowrap}
.tape__v--amber{color:var(--amber)}
.tape__v--dim{color:var(--tx-dim)}

/* таблица */
.tab{width:100%;border-collapse:collapse;font-size:17px}
.tab th,.tab td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tab th{font-family:var(--f-d);font-weight:400;font-size:15.5px;letter-spacing:.05em;
  color:var(--tx-dim);text-transform:uppercase}
.tab tr:last-child td{border-bottom:0}
.tab td b{font-weight:400;color:#fff}
.tabwrap{overflow-x:auto}

/* врезка */
.note{padding:18px 22px;background:var(--ink-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  color:var(--tx-dim);margin:22px 0}
.note b{color:var(--tx);font-weight:400}
.note--warn{background:linear-gradient(150deg,#2A2114 0%,#191712 100%)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px}
.faq__i{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.faq__q{width:100%;display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:16px 20px;background:transparent;border:0;color:var(--tx);cursor:pointer;
  font-family:var(--f-d);font-size:19px;text-align:left;line-height:1.25}
.faq__q svg{width:20px;height:20px;flex:0 0 auto;color:var(--green);transition:transform .2s ease}
.faq__i.is-open .faq__q svg{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.faq__i.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 20px 18px;margin:0;color:var(--tx-dim)}
.faq__a p+p{padding-top:0}

/* отзывы */
.voices{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.voice{padding:20px 22px 22px;background:var(--ink-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.voice__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.voice__n{font-family:var(--f-d);font-size:19px}
.voice__d{font-size:15px;color:var(--tx-dim-2);white-space:nowrap}
.voice p{margin:8px 0 0;color:var(--tx-dim)}

/* звёзды — процентная заливка */
.star-rating{position:relative;display:inline-flex;line-height:0;vertical-align:middle}
.star-rating__bg,.star-rating__fg{display:flex;gap:2px}
.star-rating__bg{color:var(--tx-dim-2);opacity:.35}
.star-rating__fg{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;color:var(--amber)}
.star-rating svg{width:var(--star-size,20px);height:var(--star-size,20px);flex-shrink:0;
  fill:currentColor;stroke:currentColor}

/* оценка */
.score{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-bottom:22px}
.score__v{font-family:var(--f-d);font-size:56px;line-height:1;color:#fff}
.score__v span{font-size:24px;color:var(--tx-dim-2)}

/* крошки */
.csr-breadcrumb{font-size:15.5px;color:var(--tx-dim-2);padding:18px 0 0}
.csr-breadcrumb a{color:var(--tx-dim)}
.csr-breadcrumb__sep{padding:0 8px;opacity:.5}

/* полоса призыва */
.call{margin:8px 0 0;padding:30px 28px;background:linear-gradient(120deg,var(--green-deep),#0d2b1d);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.call p{margin:0;max-width:62ch;color:#DDF3E6}
.call .pill{font-size:19px;padding:14px 26px}

/* связанные страницы */
.next{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.next a{padding:9px 16px;background:var(--ink-2);color:var(--tx-dim);font-size:16.5px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.next a:hover{color:var(--tx);text-decoration:none;background:#23262b}

/* подвал */
.base{border-top:1px solid var(--line);background:var(--ink-2);padding:40px 0 30px;margin-top:56px}
.base__grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.base__grid{grid-template-columns:1.3fr 1fr 1fr}}
.base__t{font-family:var(--f-d);font-size:18px;color:var(--tx);margin-bottom:12px}
.base__l{display:flex;flex-direction:column;gap:9px}
.base__l a:not(.pill){color:var(--tx-dim);font-size:17px}
.base__l a:not(.pill):hover{color:var(--tx)}
.base__cta{margin-top:30px}
.base__cta .pill{font-size:18px}
.base__legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--tx-dim-2);font-size:15.5px;max-width:110ch}
.base__legal p{margin:0 0 8px}
.base__age{display:inline-flex;align-items:center;gap:8px;color:var(--amber);
  box-shadow:inset 0 0 0 1px rgba(255,168,0,.4);padding:5px 11px;margin-bottom:10px;font-size:15px}

/* 404 */
.lost{padding:70px 0 40px;text-align:left}
.lost__n{font-family:var(--f-d);font-size:clamp(70px,13vw,150px);line-height:.9;color:var(--green)}

/* ───────────── адаптив ─────────────
   Пороги подобраны по замеру зазора между знаком и кнопкой,
   а не по круглым числам: жертва включается ВЫШЕ ширины,
   на которой элементы реально сталкиваются. */
@media(max-width:1180px){
  .nav{gap:15px}
  .nav a{font-size:16px}
}
@media(max-width:1080px){
  .rail__in{gap:16px}
  .nav{display:none}
  .burger{display:inline-flex}
  .rail .pill{margin-left:auto}
}
@media(max-width:860px){
  :root{--gutter:22px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capsule{padding-top:40px}
}
@media(max-width:620px){
  body{font-size:17px}
  .rail__in{height:64px;gap:12px}
  .mark{font-size:22px}
  .pill{padding:10px 16px;font-size:17px}
  .pill__full{display:none}
  .pill__short{display:inline}
  .drawer__in{max-height:calc(100dvh - 64px)}
  .capsule__h1{max-width:100%}
  .capsule__art img{max-width:300px}
  /* Колонка значения уходит на свою строку и переносится по словам.
     С `nowrap` строка «27 999 ₽ — 99 999 ₽» не ужимается и вылезает
     за экран: замер CDP давал до 200px переполнения на 320px. */
  .tape__i{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .tape__k{order:-1}
  .tape__t{min-width:0;overflow-wrap:anywhere}
  .tape__v{justify-self:start;white-space:normal;min-width:0}
  .band{padding:44px 0}
  .call{padding:24px 20px}
}
/* Ниже 400px лента идёт в одну колонку: цена «299 999 ₽» набрана
   неразрывно и в половинную плашку не помещается — замер CDP показывал
   5px выхода за экран именно на этом элементе. */
@media(max-width:400px){
  .strip{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:430px){
  :root{--gutter:16px}
  .strip{gap:12px}
  .stk{padding:13px 14px 16px}
  .mark{font-size:20px;gap:7px}
  .pill{padding:9px 13px;font-size:16px}
  .score__v{font-size:44px}
  .capsule__art img{max-width:248px}
  .capsule__art{margin-bottom:22px}
}
@media(max-width:360px){
  .mark__tx{max-width:112px}
}
/* подпись знака гаснет последней и только если иначе не сходится */
@media(max-width:330px){
  .mark__tx{display:none}
}

/* таблицы на узких экранах — карточками по строкам */
@media(max-width:640px){
  .tab,.tab tbody,.tab tr,.tab td{display:block;width:100%}
  .tab thead{display:none}
  .tab tr{margin-bottom:12px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
  .tab td{border-bottom:1px solid var(--line);padding:10px 14px}
  .tab td:last-child{border-bottom:0}
  .tab td::before{content:attr(data-l);display:block;font-size:14px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--tx-dim-2);margin-bottom:3px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}