:root{
  --g1:#ff7a59; --g2:#ff4f81; --g3:#5bd1cf;
  --black:#111; --white:#fff; --shadow:rgba(0,0,0,.45);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Bebas Neue',sans-serif; color:var(--white);
  background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ФОН */
.bg{
  position:fixed; inset:0; z-index:-2;

  /* Фоллбек PNG (валидное свойство до image-set) */
  background-image: url('/assets/bg-gta.png');
  background-position: center right;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  /* Поверх — image-set (если браузер поддерживает) */
  background-image: image-set(
    url('/assets/bg-gta.avif') type('image/avif') 1x,
    url('/assets/bg-gta.webp') type('image/webp') 1x,
    url('/assets/bg-gta.png') type('image/png') 1x
  );

  transform: scale(1.03);
  animation: drift 28s ease-in-out infinite alternate;
  filter: saturate(1.05) contrast(1.02) brightness(.92);
}
.bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 85%);
}
@keyframes drift {
  0%   { transform: scale(1.03) translate3d(0,0,0); }
  100% { transform: scale(1.06) translate3d(-1.5vw, -0.6vh, 0); }
}
@media (prefers-reduced-motion: reduce){
  .bg{ animation:none; transform:none; }
}

/* На мобилке немного смещаем фокус, чтобы был виден персонаж */
@media (max-width: 860px){
  .bg{ background-position: 30% center; }
}

.wrap{position:relative; z-index:1; padding:56px 16px 24px; max-width:1100px; margin:0 auto;}
.hero{display:grid; grid-template-columns: minmax(260px,540px) 1fr; gap:24px; align-items:center;}
.copy{padding-left:2vw}
.logo{width:200px; height:auto; max-width:40vw; filter:drop-shadow(0 6px 16px var(--shadow));}
h1{font-size:3.4rem; margin:12px 0 6px; text-shadow:3px 3px 0 #000;}
.subtitle{font-size:1.25rem; letter-spacing:.5px; opacity:.9}

/* Topbar + Lang dropdown */
.topbar{
  position:fixed; z-index:5;
  right:max(16px, env(safe-area-inset-right));
  top:max(16px, env(safe-area-inset-top));
  display:flex; gap:0; align-items:center;
  background:rgba(17,17,17,.6); border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  padding:6px; border-radius:12px;
  box-shadow:0 8px 20px var(--shadow);
}
.lang-current{
  display:flex; align-items:center; gap:8px;
  background:#000000b3; color:#fff; border:1px solid rgba(255,255,255,.18);
  padding:8px 12px; border-radius:10px; cursor:pointer; min-width:90px;
}
.lang-current:focus-visible{ outline:3px solid #ff9a3e; outline-offset:3px; }
.lang-menu{
  position:absolute; right:0; top:46px; list-style:none; margin:6px 0 0 0; padding:6px;
  background:rgba(17,17,17,.96); border:1px solid rgba(255,255,255,.15); border-radius:12px;
  box-shadow:0 8px 20px var(--shadow); display:none; min-width:150px;
}
.lang-menu.open{ display:block; z-index:9999; }
.lang-menu li{ margin:0; }
.lang-opt{
  width:100%; display:flex; align-items:center; gap:10px;
  background:transparent; color:#fff; border:0; text-align:left;
  padding:10px 12px; border-radius:8px; cursor:pointer; line-height:1.15;
}
.lang-opt:hover{ background:#ff9a3e; }
.flag{ font-size:1.05em; line-height:1; }

.cta-wrap{margin:26px 0 10px; display:flex; gap:16px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:14px 22px; border-radius:14px; text-decoration:none;
  background:var(--black); color:var(--white); font-size:1.4rem; letter-spacing:.5px;
  box-shadow:0 8px 20px var(--shadow); transition:.2s transform,.2s background,.2s box-shadow;
}
.btn:hover{background:#ff9a3e; transform:translateY(-2px); box-shadow:0 10px 24px var(--shadow)}
.btn:focus-visible{outline:3px solid #ff9a3e; outline-offset:3px}
.btn.btn-outline{background:transparent; border:2px solid rgba(255,255,255,.85);}

.grid{max-width:1100px; margin:20px auto 28px; padding:0 16px; display:grid; gap:16px}
.socials{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
@media (min-width:1200px){ .socials{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:rgba(17,17,17,.72); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:18px; box-shadow:0 8px 20px var(--shadow);
  backdrop-filter: blur(6px);
}
.card h3{margin:0 0 8px; font-size:1.6rem; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.link{
  display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none;
  background:#000000b3; color:#fff; font-size:1.1rem;
  border:1px solid rgba(255,255,255,.18);
  transition: background .2s, transform .2s;
}
.link:hover{background:#ff9a3e; transform: translateY(-1px)}
.link:focus-visible{outline:3px solid #ff9a3e; outline-offset:2px}

/* compact link chip */
.link--sm{ padding:4px 8px; font-size:1rem; }

/* live dot on platform links */
@keyframes livepulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

.donate-cta{font-size:1.8rem; margin:6px 0 14px; text-shadow:2px 2px 0 #000}
.donate-buttons{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.don{padding:12px 18px; border-radius:14px; background:#111; color:#fff; text-decoration:none; font-size:1.2rem; transition: background .2s, transform .2s}
.don:hover{background:#27ae60; transform: translateY(-1px)}
.don:focus-visible{outline:3px solid #27ae60; outline-offset:2px}

footer{margin:42px 0 20px; opacity:.85; font-size:.95rem; text-align:center}

/* Русские переносы: не ломаем заголовок/сабтайтл */
h1, .subtitle { word-break: keep-all; hyphens: manual; }

/* mobile */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
  .copy{text-align:center; padding-left:0}
  h1{font-size:2.6rem}
  .subtitle{font-size:1.3rem; white-space: normal;}
  .btn{font-size:1.3rem}
  .bg::after{
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 100%);
  }
}

/* dead link visual state */
.link.is-dead, .btn.is-dead,
.link[aria-disabled="true"], .btn[aria-disabled="true"]{
  opacity:.45; filter:grayscale(60%);
  pointer-events:none; cursor:not-allowed;
  border-color:rgba(255,255,255,.12);
  background:#00000066;
}

/* Утилиты вместо инлайнов */
.nowrap{ white-space:nowrap; }
.text-muted{ opacity:.85; }
.text-small{ font-size:.98rem; }
.text-md{ font-size:1.05rem; }
.m-0{ margin:0; }
.mt-10{ margin-top:10px; }
.mt-6{ margin-top:6px; }

/* iOS fix: если фон дёргается при scroll */
@supports (-webkit-touch-callout: none) {
  .bg{ background-attachment: scroll; }
}

/* Повышенная контрастность (по желанию) */
@media (prefers-contrast: more){
  .card{ border-color: rgba(255,255,255,.35); }
  .btn, .link{ box-shadow:none; }
}

/* ===== Фокус фона и поведение на разных соотношениях сторон ===== */

/* По умолчанию — фокус немного правее центра (под персонажа). 
   Можно подстроить 70–85% по вкусу. */
:root { --bg-focus-x: 78%; }

/* Базовая позиция фона — из переменной */
.bg{ background-position: var(--bg-focus-x) center; }

/* На широких 16:9 чуть левее — персонаж остаётся в кадре */
@media (min-aspect-ratio: 16/9){
  :root{ --bg-focus-x: 75%; }
}

/* На чуть менее широких (≈ 3:2) можно вернуть фокус правее */
@media (max-aspect-ratio: 3/2){
  :root{ --bg-focus-x: 80%; }
}

/* На ультрашироких (> 21:9) не режем картинку: показываем целиком. 
   По бокам будет ваш градиент body, анимацию фона выключаем,
   чтобы композиция была стабильной. */
@media (min-aspect-ratio: 21/9){
  .bg{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: none;
    transform: none;
  }
}

@media (min-width: 1600px){
  .bg{ animation: none; transform: none; }
}
/* фикс размера стрелочки в переключателе языка */
.topbar svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* на ультрашироких показываем фон целиком */
@media (min-aspect-ratio: 21/9){
  .bg{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: none;
    transform: none;
  }
}
/* Китайская локаль: читаемый шрифт */
html[lang="zh"] body{
  font-family: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}