/* ================= Главное меню: три раскладки ================= */
/* Раскладку выбирает menu.js (fitMenuLayout) по факту: что помещается — компьютер, иначе планшет, иначе телефон.
   Класс ставится на #menu: m-desktop (обычная, стили в menu.css / play.css / pages.css), m-tablet, m-mobile.
   На настоящем телефоне (вертикально и горизонтально) класса нет — работают медиазапросы, как раньше. */

/* ---------- Компьютер: логотип не по центру, если иначе не влезает ---------- */
#menu.m-desktop.m-offcenter .menu-top { grid-template-columns: auto minmax(0, 1fr) auto; }
#menu.m-desktop.m-smalllogo .season-title { width: 220px; }

/* ---------- Планшет: логотип сверху, под ним разделы и кошелёк с профилем, плитки в две колонки ---------- */
#menu.m-tablet { --menu-w: min(100%, 1180px); padding: 14px 20px; overflow-y: auto; overflow-x: hidden; }
#menu.m-tablet .menu-top {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand brand" "nav right";
  row-gap: 10px; column-gap: 12px; margin-bottom: 0;
}
#menu.m-tablet .brand { grid-area: brand; }
#menu.m-tablet .menu-top .topnav { grid-area: nav; }
#menu.m-tablet .top-right { grid-area: right; justify-self: end; }
#menu.m-tablet .season-title { width: 240px; }
#menu.m-tablet #profileChip .profile-name { max-width: 130px; }
#menu.m-tablet .tiles {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 280px 130px 180px 190px 120px;
  width: var(--menu-w); aspect-ratio: auto; flex: none; max-height: none; margin: 16px auto 0;
}
#menu.m-tablet .tile-classic { grid-column: 1; grid-row: 1; }
#menu.m-tablet .classic-stack { grid-column: 1; grid-row: 1; }
#menu.m-tablet .qm-ico { width: 52px; height: 52px; }
#menu.m-tablet .qm-txt b { font-size: 22px; }
#menu.m-tablet .tile-ranked { grid-column: 2; grid-row: 1; }
#menu.m-tablet .tile-weekly { grid-column: 1 / 3; grid-row: 2; }
#menu.m-tablet .tile-band { grid-column: 1 / 3; grid-row: 3; }
#menu.m-tablet .tile-duo { grid-column: 1 / 3; grid-row: 4; }
#menu.m-tablet .tile-soon { grid-column: 1 / 3; grid-row: 5; }
#menu.m-tablet .tile-tall .tile-art { height: 58%; }
#menu.m-tablet .menu-footer { margin: 0; padding-top: 16px; }

/* ---------- Телефон: всё в одну колонку (на широком окне — колонкой по центру) ---------- */
#menu.m-mobile { --menu-w: min(100%, 560px); padding: 12px 14px 16px; overflow-y: auto; overflow-x: hidden; }
#menu.m-mobile .menu-top { display: flex; flex-wrap: wrap; row-gap: 10px; gap: 8px; margin-bottom: 0; }
#menu.m-mobile .brand { order: 0; width: 100%; flex-direction: row; justify-content: center; }
#menu.m-mobile .season-title { width: 220px; margin: 0; }
#menu.m-mobile .menu-top .topnav { order: 1; width: 100%; gap: 6px; }
#menu.m-mobile .nav-link { flex: 1; font-size: 13.5px; padding: 9px 4px; text-align: center; white-space: nowrap; background: rgba(0,0,0,.3); }
#menu.m-mobile .top-right { order: 2; width: 100%; flex-wrap: wrap; row-gap: 10px; }
#menu.m-mobile #profileChip { flex: 1 1 100%; margin-left: 0; order: -1; }
#menu.m-mobile #profileChip .profile-name { max-width: 70%; }
#menu.m-mobile .wallet { flex: 1; justify-content: flex-end; }
#menu.m-mobile .tiles { display: flex; flex-direction: column; gap: 10px; margin: 14px auto 0; flex: none; width: var(--menu-w); aspect-ratio: auto; max-height: none; }
#menu.m-mobile .tile-row, #menu.m-mobile .tile-soon, #menu.m-mobile .classic-stack { display: contents; }
#menu.m-mobile .tile-quick { min-height: 0; order: 0; }
#menu.m-mobile .tile { flex: none; min-height: 132px; border-radius: 12px; }
#menu.m-mobile .tile-tall { min-height: 168px; }
#menu.m-mobile .tile-band { min-height: 176px; }
#menu.m-mobile .tile .tile-art { left: auto; right: 0; top: 0; bottom: 0; width: 46%; height: 100%; }
#menu.m-mobile .tile .tile-text { max-width: 58%; padding: 14px 14px 6px; }
#menu.m-mobile .tile h2 { font-size: 28px; }
#menu.m-mobile .tile h3 { font-size: 22px; }
#menu.m-mobile .tile p { font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
/* порядок: сначала то, во что можно играть; новичку — обучение первым, серые «Скоро» в конце */
#menu.m-mobile .tile-classic { order: 0; }
#menu.m-mobile .tile-ranked, #menu.m-mobile .tile-weekly { order: 1; }
#menu.m-mobile .tile-band { order: 2; }
#menu.m-mobile .tile-character, #menu.m-mobile .tile-shop { order: 3; }
#menu.m-mobile .tile[data-room="arcade"] { order: 5; }
#menu.m-mobile .tile[data-room="coop"] { order: 6; }
body:not(.tutorial-done) #menu.m-mobile .tile-tutorial { order: -1; }
#menu.m-mobile .tile-soon .tile { flex-direction: column; align-items: stretch; }
#menu.m-mobile .tile-soon .tile-ribbon { right: auto; left: 12px; top: auto; bottom: 10px; transform: none; }
#menu.m-mobile .menu-footer { margin: 0; padding-top: 16px; }
#menu.m-mobile .community { flex-wrap: wrap; justify-content: center; width: var(--menu-w); margin: 0 auto; }
#menu.m-mobile .ctile-feedback { width: 100%; }
#menu.m-mobile .ctile-social { flex: 1; justify-content: center; }