/* =========================================================================
   AION GGWP — глобальный мобильный слой (адаптив всего сайта)
   Подключается ПОСЛЕДНИМ в <head> (header.ejs), поэтому перебивает style.css
   по порядку; там, где страница имеет свой инлайновый <style> (он идёт после
   этого файла), правила помечены !important.
   Брейкпоинты: 1024 (планшет) · 900 (узкий планшет/меню) · 760 (телефон) · 520 (узкий телефон)
   ========================================================================= */

html{-webkit-text-size-adjust:100%}
img,video,canvas,svg{max-width:100%}
/* нигде не должно быть горизонтальной прокрутки страницы */
html,body{max-width:100%}
/* дубли кнопок шапки — видны ТОЛЬКО внутри раскрытого мобильного меню */
.nav .mob-only{display:none}

/* ============================ ПЛАНШЕТ ============================ */
@media (max-width:1024px){
  .wrap{padding:0 18px}
  .footer .wrap{padding:44px 18px 24px}
  .page{padding-top:26px}
  .split{gap:26px}
  .lead{font-size:16px}
}

/* ===================== МЕНЮ-БУРГЕР (≤1280 уже включён) ===================== */
@media (max-width:1280px){
  /* панель открытого меню — всегда под шапкой, независимо от её высоты, и прокручиваемая */
  .nav.open{top:100%!important;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
    box-shadow:0 24px 50px rgba(0,0,0,.55)}
  .nav.open .link{padding:11px 2px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav.open .langsw{width:max-content}
  /* блок, который виден только внутри мобильного меню */
  .nav.open .mob-only{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:14px;
    padding-top:13px;border-top:1px solid rgba(255,255,255,.09)}
  .nav.open .mob-only a{font-size:13px}
  .menu-toggle{padding:7px 12px;font-size:19px;line-height:1}
}

@media (max-width:900px){
  /* шапка: оставляем логотип, главную кнопку и бургер — остальное уезжает в меню */
  .topbar .wrap{height:auto;min-height:62px;padding-top:9px;padding-bottom:9px;gap:9px}
  .nav-cta .dlhint,.nav-cta .dlhint-t{display:none}
  .nav-cta{gap:6px}
  .nav-cta .btn.sm{padding:8px 12px;font-size:12.5px}
  .brand{font-size:15px;gap:8px}
  .restart-bar{font-size:11.5px;padding:5px 10px;line-height:1.5}
  .restart-bar .rb-div{margin:0 5px}
}

/* ============================ ТЕЛЕФОН ============================ */
@media (max-width:760px){
  .wrap{padding:0 14px}
  .page{padding:22px 0 34px}
  .lead{font-size:15px}
  .eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:10px}
  .btn{padding:11px 18px;font-size:14px}
  .btn.lg{padding:13px 22px;font-size:15px}
  .btn.sm{padding:8px 13px;font-size:13px}
  .panel{padding:18px 15px;border-radius:15px}
  .panel.narrow{max-width:none}
  .flexbar{align-items:flex-start;gap:14px}
  .flexbar .btn{width:100%;justify-content:center}
  .grid3,.steps,.news,.statband,.cards,.split,.fcols,.cd-twocol,.lk-bottom,.lk-grid{grid-template-columns:1fr}
  .footer .wrap{padding:34px 14px 20px}
  .fbrand{max-width:none}
  /* таблицы: компактнее + горизонтальная прокрутка внутри панели, если не влезли */
  .grid th,.grid td{padding:9px 8px;font-size:12.5px}
  .panel:has(> table.grid),.panel:has(> form > table.grid){overflow-x:auto}
  /* блюр поверх фона дорог на телефоне — снимаем, фон делаем плотнее */
  .panel,.statband .s,.footer,.flash{backdrop-filter:none!important}
  .panel{background:rgba(16,21,34,.88)}
  .bg-grid{display:none}
  /* формы удобнее пальцем */
  input,select,textarea{font-size:16px;padding:12px 13px}  /* 16px = iOS не зумит поле */
  /* --- главная: hero по контенту (короче страница и легче канвас ников) --- */
  .hero{min-height:auto!important;padding:16px 0 26px}
  .hero.sky .sky-center{padding-top:26px}
  .sky-wm .t1{font-size:18px!important;letter-spacing:.5em!important;padding-left:.5em!important}
  .sky-wm .t2{font-size:54px!important}
  .sky-wm .t3{font-size:9px!important;letter-spacing:.3em!important;padding-left:.3em!important}
  .sky-rates{font-size:12px!important;padding:0 8px!important}
  .hero-stats .statband{gap:6px 16px!important}
  .hero-stats .statband .s .n{font-size:17px!important}
  .hero-stats .statband .s .l{font-size:9.5px!important}
  .toppanel{max-width:none!important;padding:11px 9px!important}
  .tp-h{font-size:13.5px!important}
  .fac-cta{padding:11px 13px!important}
  .fac-cta-txt{font-size:12.5px!important}
  /* --- магазин --- */
  .shop-wrap{padding:16px 12px 56px!important}
  .shop-hero{padding:22px 16px!important;border-radius:17px!important}
  .shop-hero h1{font-size:25px!important}
  .shop-hero .glow{width:200px!important;height:200px!important;right:-60px!important;top:-60px!important}
  .filters{top:56px!important;padding:10px 0!important}
  .fl-input,.fl-sel{min-width:0!important;flex:1 1 140px!important}
  .shop-wrap .grid{grid-template-columns:repeat(auto-fill,minmax(144px,1fr))!important;gap:10px!important}
  .m-body{padding:18px 16px 16px!important}
  .m-art img{width:140px!important;height:140px!important}
  .m-art svg{width:100px!important;height:100px!important}
  /* --- колесо --- */
  .wheel-wrap{padding:16px 12px 56px!important}
  .wheel-hero{padding:22px 16px!important}
  .wheel-hero h1{font-size:25px!important}
  .wheel-hero .glow{width:200px!important;height:200px!important;right:-60px!important;top:-60px!important}
  .cell{flex:0 0 116px!important;width:116px!important}
  .btn-spin{padding:12px 22px!important;font-size:15px!important}
  /* --- карточка персонажа --- */
  .pc-wrap{padding:14px 10px 40px!important}
  .pc-body{padding:16px 15px!important}
  .pc-name{font-size:25px!important}
  .pc-row,.pc-kinah,.pc-gods,.pc-wep{padding-left:15px!important;padding-right:15px!important}
  .pc-h{padding-left:15px!important;padding-right:15px!important}
  .pc-pd{padding-left:12px!important;padding-right:12px!important}
  .pc-grid{padding-left:12px!important;padding-right:12px!important}
  /* --- форум / тикеты / посты --- */
  .fp-head,.fp-meta{flex-wrap:wrap!important;gap:7px!important}
  .fpost,.posts .fpost{padding:14px 13px!important}
  .fp-body{font-size:14px!important;word-break:break-word!important}
  .ftabs{gap:6px!important}
  .ftab{padding:6px 11px!important;font-size:13px!important}
  /* --- начало игры / дорожная карта --- */
  .startsec{padding:34px 0 40px!important}
  .startsec .ss-title{font-size:26px!important}
  .rmap-legend{gap:12px!important;font-size:.8rem!important}
  /* --- прочее --- */
  .class-grid,.wiki-grid,.siege-grid,.auc-grid,.pchar-grid,.char-grid{grid-template-columns:1fr!important}
  /* широкая таблица дропа: прокручиваем её саму, а не всю страницу */
  .drop-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .drop-table{min-width:520px!important}
  .feed{grid-template-columns:1fr!important}
  .votebox{flex-direction:column;text-align:center}
  .chat-panel{width:calc(100vw - 24px);height:60vh}
  .egg-card{padding:30px 18px}
}

/* ========================= УЗКИЙ ТЕЛЕФОН ========================= */
@media (max-width:520px){
  .wrap{padding:0 12px}
  .section-title{font-size:23px}
  .panel{padding:15px 13px}
  .btn{width:auto}
  .grid th,.grid td{padding:8px 6px;font-size:12px}
  /* топ-панели на главной: показываем первые 5 строк, чтобы не растягивать экран */
  .toppanel .tp-list li:nth-child(n+6){display:none!important}
  .sky-wm .t2{font-size:44px!important}
  .sky-ring{width:270px!important;height:270px!important}
  .hero-stats .statband{gap:5px 12px!important}
  .shop-wrap .grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;gap:8px!important}
  .pc-stats,.pc-mini{grid-template-columns:repeat(2,1fr)!important}
  .cell{flex:0 0 100px!important;width:100px!important}
  .events-bar{font-size:10.5px}
  .restart-bar{font-size:10.5px}
}

/* ============ бережём батарею и слабые GPU ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
