/* Игра на странице 404. Живёт в правой половине героя ccp-fx.
   Цвета берутся от плоского скина и ночной темы сайта. */

/* Шапка 404 — одна строка над карточкой: метка ошибки, заголовок и цель.
   Прежде здесь была сетка «герой слева, игра справа»; от неё отказались —
   на широкой карточке игра читается как самостоятельный экран, а не как
   довесок к тексту, и город наконец помещается в кадр целиком. */
.ccp-g404-lead--404{margin-bottom:14px}
/* Заголовок тут скромнее, чем на обычной странице: строка обязана остаться
   строкой, иначе карточка с игрой уезжает под сгиб. */
.ccp-g404-lead--404 h1{font-size:clamp(22px,2.4vw,30px)}
/* Метка и вторая кнопка приехали из ГЕРОЯ, где фон тёмный: там они белые и
   на светлой странице становятся невидимыми. Перекрашиваем по месту. */
.ccp-g404-lead .ccp-fx-kicker{margin:0;color:var(--fx-mut,#6b7280)}
/* ИСПРАВЛЕНО 10.09.2026: kicker и h1 сидели на одной строке по общей
   базовой линии (align-items:baseline у .ccp-g404-lead) — крошечная
   серая метка вплотную к огромному жирному заголовку читалась как
   разнобой шрифтов. Каждый занимает всю ширину ряда — h1 переносится
   на свою строку, lead и кнопки ниже не трогаем. */
.ccp-g404-lead--404 .ccp-fx-kicker{flex-basis:100%;margin:0 0 4px}
.ccp-g404-lead--404 h1{flex-basis:100%}
html[data-theme="night"] .ccp-g404-lead .ccp-fx-kicker{color:#9AA0A6}
.ccp-g404-lead__cta{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.ccp-g404-lead__cta .ccp-fx-btn{height:44px}
/* !important тут вынужденный: базовое правило скина задаёт кнопкам белый
   текст через `.ccp-fx-btn{color:#fff!important}` — оно рассчитано на тёмный
   герой, и обычной специфичностью его не перебить. */
.ccp-g404-lead__cta .ccp-fx-btn:not(.ccp-fx-btn--primary){
  background:transparent;color:var(--fx-txt,#111418) !important;border-color:var(--fx-line,#e6e8ec);
}
html[data-theme="night"] .ccp-g404-lead__cta .ccp-fx-btn:not(.ccp-fx-btn--primary){
  color:#E8EAED !important;border-color:#2b3038;
}
@media (max-width:760px){
  .ccp-g404-lead--404{gap:6px 12px}
  .ccp-g404-lead__cta{margin-left:0;width:100%}
}

/* ---- карточка игры ---- */
.ccp-g404{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  align-self:stretch;
  margin:0;
  border-radius:26px;overflow:hidden;
  background:#ddecf8;
  border:1px solid var(--fx-line,#e6e8ec);
  box-shadow:none;
  min-height:0;
  -webkit-user-select:none;user-select:none;
}
html[data-theme="night"] .ccp-g404{background:#0f1a24;border-color:#2b3038}

.ccp-g404__stage{position:relative;flex:1 1 auto;min-height:0}
.ccp-g404__cv{
  display:block;width:100%;height:100%;
  /* pan-y: страница листается пальцем даже с холста (игра стоит посреди
     прокручиваемой страницы), а установка секции — по короткому тапу. */
  touch-action:pan-y;
  cursor:pointer;
}
.ccp-g404__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:-1px}

/* ---- показания ---- */
.ccp-g404__hud{
  position:absolute;top:14px;right:14px;width:178px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:14px;padding:11px 12px;
  box-shadow:0 10px 30px rgba(32,74,110,.14);
  pointer-events:none;
}
html[data-theme="night"] .ccp-g404__hud{background:rgba(27,31,38,.92);border-color:#2b3038}
.ccp-g404__h{font-size:24px;font-weight:800;letter-spacing:-.03em;color:#111418;line-height:1.1}
html[data-theme="night"] .ccp-g404__h{color:#E8EAED}
.ccp-g404__bar{height:5px;background:#e6eaee;border-radius:99px;overflow:hidden;margin:7px 0 3px}
html[data-theme="night"] .ccp-g404__bar{background:#2b3038}
.ccp-g404__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f8fe8,#57c7ef)}
.ccp-g404__row{
  display:flex;justify-content:space-between;gap:8px;
  padding:5px 0;border-bottom:1px solid #edf0f2;
  font-size:12px;color:#6b7280;
}
html[data-theme="night"] .ccp-g404__row{border-color:#2b3038;color:#9AA0A6}
.ccp-g404__row:last-child{border-bottom:0}
.ccp-g404__row strong{font-size:13.5px;color:#111418}
html[data-theme="night"] .ccp-g404__row strong{color:#E8EAED}

/* ---- плашка ориентира ---- */
.ccp-g404__ms{
  position:absolute;right:14px;top:206px;width:178px;min-height:170px;
  background:rgba(10,18,28,.9);color:#fff;border-radius:14px;
  padding:82px 12px 12px;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 34px rgba(0,0,0,.2);pointer-events:none;
}
.ccp-g404__ms b{display:block;font-size:13.5px;line-height:1.2}
.ccp-g404__ms small{display:block;margin-top:5px;font-size:11.5px;line-height:1.4;color:#c9d4de}
.ccp-g404__msicon{
  position:absolute;left:50%;top:9px;transform:translateX(-50%);
  width:64px;height:70px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:6px;
}

/* ---- кнопки под палец и стилус ---- */
/* Кнопка ушла из центра в правый нижний угол: по центру она наезжала на
   фундамент-щит «404», пока башня ещё низкая, — то есть ровно в те секунды,
   когда щит и надо прочитать. В углу она вдобавок ближе к большому пальцу. */
.ccp-g404__pad{
  position:absolute;right:16px;bottom:14px;
  display:flex;gap:8px;
}
.ccp-g404 .ccp-g404__key{
  /* Днём сплошная белая пилюля била контрастом по светлому небу.
     Делаем полупрозрачной со стеклом — читается, но не кричит.
     Ночью, где она смотрелась хорошо, оставляем плотной. */
  min-width:58px;height:44px;padding:0 16px;
  border-radius:12px;border:1px solid rgba(17,20,24,.13);
  background:rgba(255,255,255,.52);color:rgba(17,20,24,.74);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  font:600 13.5px/1 inherit;cursor:pointer;letter-spacing:.03em;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background .15s,color .15s;
}
.ccp-g404 .ccp-g404__key:hover{background:rgba(255,255,255,.78);color:#111418}
.ccp-g404 .ccp-g404__key--wide{min-width:104px}
.ccp-g404 .ccp-g404__key:active{background:#fff;transform:translateY(1px)}
html[data-theme="night"] .ccp-g404__key{background:rgba(27,31,38,.9);color:#E8EAED;border-color:#3C4043}

/* ---- планшет и телефон: текст 404 сверху, игра под ним ---- */
@media (max-width:1024px){
  .ccp-g404{height:clamp(470px,72vh,700px);border-radius:18px}

  /* Показания и достижения — оба сбоку, столбиком: над краном им не место,
     это единственная полоса кадра без движения. */
  .ccp-g404__hud{width:124px;top:9px;right:9px;padding:9px 10px}
  .ccp-g404__h{font-size:19px}
  .ccp-g404__row{font-size:11px;padding:4px 0}
  .ccp-g404__row strong{font-size:12px}
  .ccp-g404__ms{
    top:178px;right:9px;left:auto;
    width:124px;max-width:none;min-height:0;
    padding:60px 10px 10px;border-radius:12px;
  }
  .ccp-g404__msicon{
    left:50%;top:8px;transform:translateX(-50%);
    width:44px;height:46px;
    border-bottom:1px solid rgba(255,255,255,.12);border-right:0;
    padding:0 0 5px;
  }
  .ccp-g404__ms b{font-size:11.5px}
  .ccp-g404__ms small{
    margin-top:3px;font-size:10px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
}
@media (max-width:600px){
  .ccp-g404{height:clamp(450px,70vh,660px)}
  .ccp-g404__hud{width:116px;padding:8px 9px}
  .ccp-g404__h{font-size:17px}
  .ccp-g404__row{font-size:10.5px}
  .ccp-g404__row strong{font-size:11px}
  .ccp-g404__ms{top:160px;width:116px;padding:52px 8px 8px}
  .ccp-g404__msicon{width:38px;height:40px}
  .ccp-g404__ms b{font-size:10.5px}
  .ccp-g404__ms small{font-size:9.5px;-webkit-line-clamp:2}
  .ccp-g404__key{height:48px;min-width:54px;font-size:14px}
  .ccp-g404__key--wide{min-width:104px;font-size:13px}
  .ccp-g404__pad{bottom:14px;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .ccp-g404 .ccp-g404__key:active{transform:none}
}

/* ---- отдельная страница /game ------------------------------------------
   Тот же компонент, только шире и выше. Игра сама подхватывает ширину:
   поле, ось фундамента и раскладка города считаются от неё. */
.ccp-g404-page{max-width:var(--fx-max,1296px);margin:0 auto}
.ccp-g404-page .ccp-g404{
  height:clamp(520px,74vh,860px);
  border-radius:26px;
}
.ccp-g404-page .ccp-g404__hud{width:190px;top:12px;right:14px;padding:11px 13px}
.ccp-g404-page .ccp-g404__h{font-size:25px}
/* Блоки подняты и нижний сжат, чтобы не закрывать Dubai Frame справа. */
.ccp-g404-page .ccp-g404__ms{width:190px;right:14px;top:206px;min-height:0;padding:74px 12px 12px}
/* 206 = низ панели показаний (192) + зазор 14. Замер: панель 180 px высотой,
   при top:186 блоки накладывались на 6 px. */
.ccp-g404-page .ccp-g404__msicon{width:60px;height:64px;top:8px}
.ccp-g404-page .ccp-g404__ms small{-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.ccp-g404-page .ccp-g404__key{height:46px;min-width:116px;font-size:14px}
.ccp-g404-page .ccp-g404__pad{bottom:18px}
.ccp-g404-lead{
  max-width:var(--fx-max,1296px);margin:0 auto 16px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.ccp-g404-lead h1{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.1;letter-spacing:-.03em}
.ccp-g404-lead p{margin:0;color:var(--fx-mut,#6b7280);font-size:14.5px;line-height:1.5}
@media (max-width:1024px){
  .ccp-g404-page .ccp-g404{height:clamp(460px,70vh,700px);border-radius:18px}
  .ccp-g404-page .ccp-g404__hud{width:138px;top:9px;right:9px;padding:10px 11px}
  .ccp-g404-page .ccp-g404__h{font-size:19px}
  .ccp-g404-page .ccp-g404__ms{width:138px;right:9px;top:178px;min-height:0;padding:60px 10px 10px}
  .ccp-g404-page .ccp-g404__msicon{width:44px;height:46px}
  .ccp-g404-page .ccp-g404__key{height:46px;min-width:104px;font-size:13px}
}

/* Телефон. Правила выше начинаются с `.ccp-g404-page`, поэтому телефонный
   блок @media (max-width:600px) до них не доставал — на боевом 404 показания
   держали планшетные 138 px, то есть 48 % ширины карточки и верхние 62 % её
   высоты: секцию было не видно ровно в тот момент, когда решаешь, где её
   ронять. Тот же скоуп, размеры −35 %: 138x161 -> 90x102. */
@media (max-width:600px){
  .ccp-g404-page .ccp-g404__hud{width:90px;top:8px;right:8px;padding:7px 8px;border-radius:11px}
  .ccp-g404-page .ccp-g404__h{font-size:15px;line-height:1.05}
  .ccp-g404-page .ccp-g404__bar{height:4px;margin:5px 0 2px}
  /* line-height задан явно: без него строки наследуют 1.7 от скина, и панель
     вырастает со 102 до 140 px, съедая весь выигрыш от мелкого шрифта. */
  .ccp-g404-page .ccp-g404__row{font-size:9.5px;line-height:1.25;padding:3px 0;gap:5px}
  .ccp-g404-page .ccp-g404__row strong{font-size:10.5px;line-height:1.25}
  /* 126 = низ показаний (111) + зазор 15. */
  .ccp-g404-page .ccp-g404__ms{width:90px;right:8px;top:126px;padding:42px 8px 8px;border-radius:11px}
  .ccp-g404-page .ccp-g404__msicon{width:30px;height:32px;top:6px;padding-bottom:4px}
  .ccp-g404-page .ccp-g404__ms b{font-size:9.5px;line-height:1.2}
  /* 7 строк, а не 3: в узкой плашке текст вехи иначе обрывается на полуслове.
     Замер на боевой: английскому хватает 6 строк, русскому — 7. Ширина всё
     равно вдвое меньше прежней, так что кадр не заслоняется. */
  .ccp-g404-page .ccp-g404__ms small{font-size:8.5px;line-height:1.35;margin-top:2px;-webkit-line-clamp:7}
}

/* ---- «забрать игру себе» -------------------------------------------------
   Нарочно без акцента: тонкая подпись под карточкой, а не кнопка. */
.ccp-g404-offer{max-width:var(--fx-max,1296px);margin:10px auto 0;padding:0 2px}
/* Кит Elementor красит ЛЮБОЙ <button> в чёрный (.elementor-kit-9 button —
   класс + тег), поэтому одиночного класса тут мало: селектор удвоен, иначе
   надпись превращается в чёрную кнопку. Сбрасывать приходится и то, что кит
   добавляет отдельно: padding, min-height, display, радиус, размер шрифта. */
.ccp-g404-offer .ccp-g404-offer__toggle.ccp-g404-offer__toggle{
  display:inline;min-height:0;height:auto;
  margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.5;
  color:var(--fx-mut,#6b7280);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(107,114,128,.35);
  transition:color .15s;
}
.ccp-g404-offer .ccp-g404-offer__toggle.ccp-g404-offer__toggle:hover,
.ccp-g404-offer .ccp-g404-offer__toggle.ccp-g404-offer__toggle:focus-visible{
  color:#2458c5;text-decoration-color:currentColor;background:none;
}
html[data-theme="night"] .ccp-g404-offer .ccp-g404-offer__toggle.ccp-g404-offer__toggle{color:#8d99a8}
.ccp-g404-offer__box{
  margin-top:10px;padding:14px 16px;border:1px solid var(--fx-line,#e6e8ec);
  border-radius:14px;background:rgba(0,0,0,.015);max-width:760px;
}
html[data-theme="night"] .ccp-g404-offer__box{background:#1b1f26;border-color:#2b3038}
.ccp-g404-offer__box p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--fx-mut,#6b7280)}
.ccp-g404-offer__code{
  width:100%;box-sizing:border-box;resize:vertical;
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#111418;background:#fff;border:1px solid var(--fx-line,#e6e8ec);
  border-radius:10px;padding:10px 12px;
}
html[data-theme="night"] .ccp-g404-offer__code{background:#11151a;color:#dfe6ee;border-color:#2b3038}
/* Тот же кит: без удвоенного класса кнопка «Скопировать» тоже чёрная. */
.ccp-g404-offer .ccp-g404-offer__copy.ccp-g404-offer__copy{
  margin-top:10px;height:38px;min-height:0;padding:0 18px;border-radius:12px;border:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fx-acc,#1D5AD2);color:#fff;
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;
  transition:filter .15s,transform .15s,box-shadow .15s;
}
/* Наведение — ровно то же, что у кнопок сайта (ccp-interaction-states):
   цвет НЕ меняется, кнопка слегка темнеет, приподнимается и даёт мягкую тень.
   Фон продублирован намеренно — чтобы перебить любое чужое правило. */
@media (hover:hover) and (pointer:fine){
  .ccp-g404-offer .ccp-g404-offer__copy.ccp-g404-offer__copy:hover{
    background:var(--fx-acc,#1D5AD2);color:#fff;
    filter:brightness(.9);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(36,88,197,.22);
  }
}
.ccp-g404-offer .ccp-g404-offer__copy.ccp-g404-offer__copy:focus-visible{
  outline:2px solid #2458c5;outline-offset:2px;
}
@media (max-width:600px){
  .ccp-g404-offer{padding:0 2px}
  .ccp-g404-offer__box{padding:12px}
}