/* ================= Мобильная версия (body.m-app, js/mobile) ================= */
/* Всё горизонтально. Фон — гроза над Олимпом (#mStorm), поверх — экраны без своих фонов.
   Типографика как в главном меню: заголовки — Oswald жирным капсом (как название сезона), подписи и кнопки — Oswald
   капсом с разрядкой; главная кнопка — золотая (как «Забрать» и цены в лавке); панели — тёмное стекло. */
#mStorm, #mDim, .m-done { display: none; }
body.m-app {
  --m-gold-1: #ffe17a; --m-gold-2: #f0a71e; --m-gold-ink: #3a2008; --m-gold-edge: #9a5c0a; --m-sky: #5fb8ff; --m-cream: #ffe9b8;
  --m-label: 'Oswald', 'Arial Narrow', sans-serif;
  --m-l: calc(14px + env(safe-area-inset-left)); --m-r: calc(14px + env(safe-area-inset-right));
  --m-t: calc(10px + env(safe-area-inset-top)); --m-b: calc(12px + env(safe-area-inset-bottom));
  --m-col: clamp(206px, 28vw, 244px);
}
body.m-app #mStorm { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 0; }
body.m-app #mDim { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgba(8,10,18,.5); transition: opacity .3s; }
body.m-app[data-m-screen="menu"] #mDim { opacity: 0; }
body.m-app[data-m-screen="game"] #mStorm, body.m-app[data-m-screen="game"] #mDim { display: none; }
/* старый фон меню прячем, но не display:none — его холст рисуется при запуске и с нулевым размером падает */
body.m-app #backdrop, body.m-app #backdropShade, body.m-app #menuVideo { visibility: hidden !important; }

/* всё горизонтально: вертикально — просьба повернуть на любом экране */
#rotateOverlay .rot-screen svg { width: 30px; height: 30px; color: #ffad42; }
@media (orientation: portrait) {
  body.m-app #rotateOverlay { display: flex; }
}
body.m-app:not(.need-land) #rotateLeave { display: none; }

/* ---------- Детали ---------- */
.m-glass {
  background: linear-gradient(180deg, rgba(30,38,58,.66), rgba(12,16,26,.74)); border: 1px solid rgba(255,255,255,.13); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; padding: 0;
}
.m-gold {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0;
  border-radius: 14px; border: 1px solid #ffefb3; color: var(--m-gold-ink);
  background: linear-gradient(180deg, #fff1a8 0%, var(--m-gold-1) 18%, var(--m-gold-2) 100%);
  box-shadow: 0 5px 0 var(--m-gold-edge), 0 12px 26px rgba(240,167,30,.35), inset 0 1px 0 rgba(255,255,255,.75);
  font: 700 30px var(--m-label); letter-spacing: 3px; text-transform: uppercase;
  transition: transform .06s, box-shadow .06s, filter .2s;
}
.m-gold b { font: inherit; position: relative; z-index: 1; }
.m-gold::after { /* блик, пробегающий по кнопке */
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: mShine 3.2s ease-in-out infinite;
}
@keyframes mShine { 0%, 55% { left: -80px; } 85%, 100% { left: 110%; } }
.m-gold:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--m-gold-edge), 0 6px 14px rgba(240,167,30,.3), inset 0 1px 0 rgba(255,255,255,.75); }
.m-gold.locked, .m-gold:disabled { filter: grayscale(.8) brightness(.75); }
.m-gold:disabled::after { display: none; }
.m-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #e6eefc; }
.m-kicker { display: block; font: 600 11px var(--m-label); letter-spacing: 2.2px; text-transform: uppercase; color: #9fc8ff; }
.m-title { display: block; font: 700 22px var(--m-label); letter-spacing: 1px; text-transform: uppercase; line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 22px rgba(95,184,255,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-count { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff4a3d;
  border: 2px solid #121722; color: #fff; font: 700 11px/16px Inter, sans-serif; text-align: center; }
.m-count.hidden { display: none; }
.m-chip { height: 34px; padding: 0 12px; border-radius: 17px; font: 600 12px var(--m-label); letter-spacing: 1.2px; text-transform: uppercase; }
.m-chip:disabled { opacity: .4; }

/* ================= Главный экран ================= */
body.m-app #menu { padding: 0; overflow: hidden; background: none; }
body.m-app #menu > :not(#mHome) { display: none !important; }
.m-home { display: none; }
body.m-app .m-home { display: block; position: absolute; inset: 0; }
/* персонаж рисуется на общем фоне (app.js drawHero); здесь — только невидимая кнопка поверх него */
.m-herohit { position: absolute; padding: 0; background: none; border: none; border-radius: 50%; z-index: 3; cursor: pointer; }
.m-top { position: absolute; left: var(--m-l); right: var(--m-r); top: var(--m-t); display: flex; align-items: center; gap: 12px; z-index: 4; }
.m-sp { flex: 1; }
.m-me { display: flex; align-items: center; gap: 9px; padding: 3px 14px 3px 3px; border-radius: 26px; min-width: 0; max-width: 34vw; text-align: left; }
.m-me canvas { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px #ffcf6a; background: radial-gradient(circle at 50% 35%, #3a4a72, #151b2b); }
.m-me .nm { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.m-me .nm b { font: 600 15px var(--m-label); letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-me .nm span { display: flex; align-items: center; gap: 4px; font: 600 12px var(--m-label); color: #ffd27a; letter-spacing: .5px; }
.m-me .rank svg { display: block; }
.m-wallet { display: flex; gap: 14px; }
.m-pill { position: relative; display: flex; align-items: center; height: 32px; border-radius: 16px; background: rgba(6,9,16,.62); border: 1px solid rgba(255,255,255,.12); }
.m-pill-main { display: flex; align-items: center; height: 100%; padding: 0 8px 0 30px; min-width: 64px; background: none; border: none; color: #fff; font: 600 15px var(--m-label); letter-spacing: .4px; }
.m-pill .ci { position: absolute; left: -10px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.m-pill .ci svg { width: 100%; height: 100%; }
.m-plus { width: 24px; height: 24px; margin-right: 4px; border-radius: 50%; padding: 0; display: grid; place-items: center; border: none; color: var(--m-gold-ink);
  background: linear-gradient(180deg, var(--m-gold-1), var(--m-gold-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); font: 700 16px/1 Inter, sans-serif; }

.m-nav { position: absolute; left: var(--m-l); top: 74px; display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.m-nb { position: relative; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; color: #fff; }
.m-nb .r { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--m-cream); }
.m-nb .l { font: 600 12px var(--m-label); letter-spacing: 1.6px; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.m-nb .dot { position: absolute; left: 36px; top: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff4a3d;
  border: 2px solid #121722; font: 700 10px/14px Inter, sans-serif; font-style: normal; text-align: center; }
.m-nb .dot.hidden { display: none; }
.m-nb:active .r { transform: scale(.92); }

.m-season { position: absolute; right: var(--m-r); top: 64px; width: var(--m-col); padding: 10px 14px 11px; text-align: left; z-index: 4; }
.m-season.hidden { display: none; }
.m-season .m-title { font-size: 24px; margin: 2px 0 7px; }
.m-bar { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.m-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--m-gold-2), var(--m-gold-1)); box-shadow: 0 0 10px rgba(255,200,80,.6); }
.m-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font: 500 11px var(--m-label); letter-spacing: 1px; color: #c4cee0; text-transform: uppercase; }
.m-mode { position: absolute; right: var(--m-r); bottom: calc(var(--m-b) + 84px); width: var(--m-col); height: 64px; display: flex; align-items: center; gap: 11px; padding: 0 12px; text-align: left; z-index: 4; }
.m-mode .mi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--m-sky); background: rgba(95,184,255,.12); border: 1px solid rgba(95,184,255,.3); }
.m-mode.locked .mi { color: #ffb08a; background: rgba(255,140,90,.12); border-color: rgba(255,140,90,.35); }
.m-mode .mt { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; flex: 1; min-width: 0; }
.m-mode .mt .m-kicker { font-size: 9.5px; letter-spacing: 1.8px; line-height: 1.1; }
.m-mode .mt b { font: 700 18px/1.1 var(--m-label); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mode .mt em { font: 500 11px/1.2 var(--m-label); font-style: normal; color: #aebbd2; letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mode.locked .mt em { color: #ffb08a; }
.m-mode .sw { color: #9fb0cc; flex-shrink: 0; }
.m-play { position: absolute; right: var(--m-r); bottom: var(--m-b); width: var(--m-col); height: 70px; z-index: 4; }
.m-plate { position: absolute; left: 50%; bottom: var(--m-b); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 5px 18px 5px 8px; border-radius: 24px; z-index: 4; line-height: 1.12; white-space: nowrap; }
.m-plate .pr { display: flex; color: #9fc8ff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.m-plate b { display: block; font: 700 18px var(--m-label); letter-spacing: 1px; }
.m-plate small { display: block; font: 600 11px var(--m-label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--rc, #9fc8ff); }
.m-status { position: absolute; right: var(--m-r); bottom: calc(var(--m-b) + 150px); width: var(--m-col); text-align: center; font: 500 12px var(--m-label); letter-spacing: 1px; color: #ffb08a; z-index: 4; text-shadow: 0 1px 4px #000; }
.m-status:empty { display: none; }

/* ================= Нижние листы ================= */
.m-sheet { position: fixed; inset: 0; z-index: 700; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,8,14,0); transition: background .2s; }
.m-sheet.show { background: rgba(4,8,14,.6); }
.m-sheet-panel {
  width: min(720px, 100%); max-height: 92dvh; display: flex; flex-direction: column;
  padding: 10px calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(26,34,52,.98), rgba(11,15,24,.98)); border: 1px solid rgba(255,255,255,.14); border-bottom: none;
  border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.5);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.9,.3,1);
}
.m-sheet.show .m-sheet-panel { transform: none; }
.m-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; }
.m-sheet-head b { font: 700 20px var(--m-label); letter-spacing: 1.5px; text-transform: uppercase; }
.m-sheet-head .m-round svg { transform: rotate(45deg); }
.m-sheet-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-y: auto; overscroll-behavior: contain; }
.m-card, .m-row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; text-align: left; color: #e7f4fa;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
}
.m-card { min-height: 66px; }
.m-card.cur { border-color: var(--m-gold-1); background: rgba(255,207,90,.12); box-shadow: inset 0 0 0 1px rgba(255,225,122,.35); }
.m-card.locked, .m-card.soon { opacity: .6; }
.m-card-ico, .m-row-ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; color: var(--m-sky); background: rgba(95,184,255,.12); }
.m-row-ico { width: 38px; height: 38px; }
.m-card.cur .m-card-ico { color: var(--m-gold-1); background: rgba(255,207,90,.15); }
.m-card.locked .m-card-ico { color: #ffb08a; background: rgba(255,140,90,.12); }
.m-card-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.m-card-txt b, .m-row b { font: 700 16px var(--m-label); letter-spacing: 1px; text-transform: uppercase; }
.m-row b { font-weight: 600; font-size: 15px; letter-spacing: .8px; }
.m-row.accent b { color: var(--m-gold-1); }
.m-row.danger b { color: #ff8a80; }
.m-card-txt small { font-size: 12px; color: #a9bccb; line-height: 1.3; }
.m-card-tag { position: absolute; right: 10px; top: 8px; padding: 2px 8px; border-radius: 6px; font: 600 10px var(--m-label); letter-spacing: 1.4px; text-transform: uppercase; background: rgba(255,255,255,.12); color: #cfd6df; }
.m-card.shake { animation: mShake .3s; }
@keyframes mShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ================= Лобби ================= */
.m-lobby { display: none; }
body.m-app #lobby { padding: 0; overflow: hidden; background: none; }
body.m-app #lobby > :not(#mLobby):not(.lobby-body) { display: none !important; }
body.m-app .lobby-body { display: block; margin: 0; width: 0; height: 0; }
body.m-app .players-card, body.m-app .settings-card, body.m-app .lobby-stage { display: none; }
body.m-app .m-lobby { display: block; position: absolute; inset: 0; }
.m-lobby .m-top { gap: 10px; }
.m-lt { flex: 1; min-width: 0; }
.m-lt .m-title { font-size: 24px; }
.m-ltools { display: flex; gap: 8px; }
.m-chat { position: relative; }
.m-lineup {
  position: absolute; left: var(--m-l); right: var(--m-r); top: 66px; bottom: calc(var(--m-b) + 80px);
  display: flex; justify-content: center; align-items: stretch; gap: 6px;
}
.m-lineup::after { /* каменный уступ, на котором стоит состав */
  content: ''; position: absolute; left: 2%; right: 2%; bottom: 22px; height: 16px; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(140,165,210,.35), rgba(20,24,36,0) 70%);
}
.m-slot { position: relative; flex: 0 1 140px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 2px; cursor: pointer; }
.m-fig { width: 100%; flex: 1; min-height: 0; }
.m-slot .sn { max-width: 100%; font: 600 14px var(--m-label); letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.m-slot.mine .sn { color: var(--m-gold-1); }
.m-slot[style*="--tc"] .sn { border-bottom: 2px solid var(--tc); }
.m-tag { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 9px;
  font: 600 10px/16px var(--m-label); letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap;
  background: rgba(10,14,24,.75); border: 1px solid rgba(255,255,255,.18); color: #c9d6ee; }
.m-tag.host { background: linear-gradient(180deg, var(--m-gold-1), var(--m-gold-2)); color: var(--m-gold-ink); border-color: #ffefb3; }
.m-tag.warn { top: 28px; color: #ffb0a8; border-color: rgba(255,90,78,.5); }
.m-x, .m-swap { position: absolute; top: 2px; width: 30px; height: 30px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: rgba(10,14,24,.75); border: 1px solid rgba(255,255,255,.2); color: #ff9a90; }
.m-x { right: 4px; }
.m-x svg { transform: rotate(45deg); }
.m-swap { left: 4px; color: #9fc8ff; }
.m-slot.empty { justify-content: center; gap: 8px; padding-bottom: 28px; }
.m-slot.empty .ei { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(159,200,255,.45); color: #9fc8ff; background: rgba(95,184,255,.06); }
.m-slot.empty b { font: 600 13px var(--m-label); letter-spacing: 1.5px; text-transform: uppercase; color: #9fc8ff; }
.m-vs { align-self: center; font: 700 26px var(--m-label); color: var(--m-gold-1); text-shadow: 0 2px 0 #6b3d05; padding: 0 4px; }
.m-lbar { position: absolute; left: var(--m-l); bottom: var(--m-b); right: calc(var(--m-r) + var(--m-col) + 12px); height: 64px; display: flex; gap: 10px; }
.m-lbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 0 14px; text-align: left; }
.m-lbtn .li { color: var(--m-sky); flex-shrink: 0; display: flex; }
.m-lbtn .bt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.m-lbtn .bt b { font: 600 14px var(--m-label); letter-spacing: 1.8px; text-transform: uppercase; }
.m-lbtn .bt small { font-size: 11.5px; color: #aebbd2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-lbtn .fx { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.m-lbtn .fx span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(177,77,255,.2); border: 1px solid rgba(177,77,255,.45); }
.m-lbtn .fx canvas { width: 24px; height: 24px; }
.m-lfoot { position: absolute; right: var(--m-r); bottom: var(--m-b); width: var(--m-col); display: flex; flex-direction: column; gap: 6px; }
.m-lfoot .m-play { position: static; width: 100%; height: 64px; font-size: 26px; }
.m-lmsg { font: 500 11.5px var(--m-label); letter-spacing: .5px; line-height: 1.25; color: #c4cee0; text-align: center; text-shadow: 0 1px 4px #000; }
.m-lmsg.error { color: #ffb08a; }
.m-lmsg:empty { display: none; }

/* экраны лобби: настройки и эффекты — на весь экран, чат — шторкой справа */
body.m-app .m-done {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px; margin-left: 8px; border-radius: 10px; flex-shrink: 0; border: 1px solid #ffefb3;
  font: 700 15px var(--m-label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--m-gold-ink);
  background: linear-gradient(180deg, var(--m-gold-1), var(--m-gold-2)); box-shadow: 0 3px 0 var(--m-gold-edge);
}
body.m-app.lv-settings #lobby .settings-card, body.m-app.lv-effects #lobby .lobby-stage, body.m-app.lv-chat #lobby .players-card {
  display: flex; flex-direction: column; position: fixed; z-index: 300; clip-path: none; border-radius: 0;
  background: linear-gradient(180deg, rgba(20,28,44,.97), rgba(10,14,22,.98)); backdrop-filter: none;
}
body.m-app.lv-settings #lobby .settings-card, body.m-app.lv-effects #lobby .lobby-stage {
  inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.m-app #lobby .card::before, body.m-app #lobby .card::after { display: none; }
body.m-app #lobby .card-head { padding: 8px 14px; min-height: 56px; background: none; border-bottom: 1px solid rgba(255,255,255,.1); }
body.m-app #lobby .card-head h3 { margin-right: auto; font: 700 20px var(--m-label); letter-spacing: 1.5px; color: #fff; }
body.m-app #lobby .card-head h3::before { display: none; }
body.m-app #settingsHint, body.m-app #fxHint { font: 500 12px var(--m-label); letter-spacing: .5px; }
body.m-app.lv-settings #lobby #settingsPanel { column-count: 2; column-gap: 14px; padding: 10px 14px 18px; }
body.m-app.lv-settings #lobby .set-group { break-inside: avoid; }
body.m-app.lv-settings #lobby .set-row { min-height: 46px; }
body.m-app.lv-settings #lobby .set-group-title { font: 600 12px var(--m-label); letter-spacing: 2px; }
body.m-app.lv-effects #lobby .stage-hero { display: none; }
body.m-app.lv-effects #lobby .fx-card { flex: 1; min-height: 0; display: flex; flex-direction: column; background: none; border: none; clip-path: none; box-shadow: none; }
body.m-app.lv-effects #lobby #effectsPanel { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 18px; }
body.m-app.lv-effects #lobby #effectsPanel .fx-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
body.m-app.lv-chat #lobby::after { content: ''; position: fixed; inset: 0; z-index: 299; background: rgba(4,8,14,.55); }
body.m-app.lv-chat #lobby .players-card {
  top: 0; right: 0; bottom: 0; width: min(420px, 62vw);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
  border-left: 1px solid rgba(255,255,255,.14); box-shadow: -10px 0 30px rgba(0,0,0,.5);
}
body.m-app.lv-chat #lobby #playerList, body.m-app.lv-chat #lobby #botActions { display: none; }
body.m-app.lv-chat #lobby .players-card .card-head h3 { font-size: 0; letter-spacing: 0; }
body.m-app.lv-chat #lobby .players-card .card-head h3::after { content: 'Чат комнаты'; font-size: 20px; }
body.m-app.lv-chat #lobby .lobby-chat { flex: 1; min-height: 0; border-top: none; }
body.m-app.lv-chat #lobby .lc-log { flex: 1; height: auto; padding: 10px 14px; }
body.m-app.lv-chat #lobby .lc-log .msg { font-size: 14px; }
body.m-app .lc-form input { font-size: 16px; } /* 16px — iOS не увеличивает страницу при вводе */

/* ================= Разделы (Лавка, Персонаж, Рейтинг, Сезон, Комнаты, Как играть) ================= */
body.m-app #page { background: none; padding: var(--m-t) var(--m-r) 0 var(--m-l); }
body.m-app #page .page-top { min-height: 44px; gap: 12px; margin: 0; width: 100%; }
body.m-app #pageBack {
  height: 44px; padding: 0 16px 0 12px; border-radius: 22px; font: 600 13px var(--m-label); letter-spacing: 1.6px; text-transform: uppercase; color: #e6eefc;
  background: linear-gradient(180deg, rgba(30,38,58,.7), rgba(12,16,26,.78)); border: 1px solid rgba(255,255,255,.13);
}
body.m-app #pageTitle { font: 700 24px var(--m-label); letter-spacing: 1.2px; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
body.m-app #page .page-body { width: 100%; margin-top: 8px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }