/* v11: телефон (data-layout="m"). Одна колонка, крупный заголовок по ширине экрана,
   полка 3 × 2 + широкий таємний, коробка на ~60% высоты экрана, нижняя панель. */
[data-layout="m"] .hero { padding: 22px 16px 10px; display: grid; }
[data-layout="m"] .hero-txt { touch-action: pan-y; order: 1; }
[data-layout="m"] .hero-box { order: 0; height: 160px; margin: -6px -16px 0; }
[data-layout="m"] .cube { --s: 92px; }
[data-layout="m"] .lead { font-size: 16px; }
[data-layout="m"] .kin { margin: 10px 0 14px; }
[data-layout="m"] .gh { --rad: 118px; width: 38px; height: 38px; }
/* «НАОСЛІП» — самое длинное слово: кегль по ширине экрана */
[data-layout="m"] .kin { font-size: 18vw; }
[data-layout="m"] .ctas .btn { flex: 1 1 100%; }
[data-layout="m"] .sec { padding: 52px 16px 8px; }
[data-layout="m"] .shelf { touch-action: pan-y; }
[data-layout="m"] .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-layout="m"] .cell.secret { grid-column: 1 / -1; }
[data-layout="m"] .cell.secret .tile { grid-template-columns: auto 90px 1fr; grid-template-rows: auto; align-items: center; justify-items: start; padding: 10px 14px; }
[data-layout="m"] .cell.secret .tile .sil { width: 90px; }
[data-layout="m"] .cell.secret .tile-name { font-size: 16px; text-align: left; }
[data-layout="m"] .ub-stage { height: max(340px, 58vh); height: max(340px, 58svh); }
[data-layout="m"] .ub-btns .btn { flex: 1 1 140px; }
[data-layout="m"] .ub-after .btn { flex: 1 1 100%; }
[data-layout="m"] .known { touch-action: pan-y; }
[data-layout="m"] .sheet { margin: auto 0 0; width: 100vw; }
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  transition: transform .35s var(--ease); }
.mbar .btn { flex: 1 1 0; min-height: 48px; padding: 0 12px; font-size: 15px; min-width: 0; }
.mbar.off { transform: translateY(110%); }
[data-layout="d"] .m-only { display: none !important; }
@media (max-width: 359px) {
  [data-layout="m"] .top { gap: 6px; padding: 8px 12px; }
  [data-layout="m"] .chip { display: none; }
  [data-layout="m"] .shelf-grid { gap: 6px; }
  [data-layout="m"] .tile { padding: 10px 4px; }
  [data-layout="m"] .tile-name { font-size: 12px; }
  .mbar .btn { font-size: 14px; padding: 0 8px; }
}