/* MU RAVE 99z: páginas que abrem bem no celular (Eventos, Promoção, Compras de Golds, VIP e Confirmar pagamento).
   No computador nada muda: vale só em tela de toque até 1100px de largura ou em qualquer tela até 760px. */
@media (max-width: 1100px) and (hover: none), (max-width: 760px) {
  /* a página rola inteira (sem caixa de rolagem por dentro) e nunca de lado */
  html:root { min-width: 0 !important; overflow-x: hidden !important; overflow-x: clip !important; overflow-y: visible !important; }
  html:root body { min-width: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; }
  .all { padding: 0 14px 48px; }

  /* topo: marca em cima e os links numa faixa que corre de lado */
  nav.main-nav { flex-wrap: wrap; gap: 6px; margin: 0 -14px; padding: 8px 14px 6px; }
  .nav-brand { padding: 2px 0; }
  .nav-links { order: 2; flex: 1 0 100%; margin: 0 -14px; padding: 0 10px 2px; justify-content: flex-start; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-links::-webkit-scrollbar { display: none; }
  /* a faixa de links some aos poucos na direita: dá para ver que tem mais para o lado */
  .nav-links { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 36px; }
  nav.main-nav a:not(.nav-brand) { font-size: 15px; letter-spacing: 1.2px; padding: 9px 11px; }
  nav.main-nav a.rvc-aqui { color: var(--c-gold-b) !important; }
  nav.main-nav a.rvc-aqui::before { width: 22px; }

  /* faixa do topo das páginas internas: mais baixa */
  .brand-hero { margin-left: -14px; margin-right: -14px; }

  /* conteúdo primeiro, painel do lado vai para baixo */
  .main-section { display: flex; flex-direction: column; gap: 18px; }
  .main-section > article.main-article { order: 1; width: 100%; }
  .main-section > aside.esq { order: 2; position: static; width: 100%; }
  /* sem login: o quadro de entrar vem antes do aviso */
  .main-section:has(.painel-restricted) > aside.esq { order: 0; }
  aside.esq .panel-box.rvc-info { display: none; }

  img, video, canvas { max-width: 100%; }

  /* Eventos: o botão Voltar ao site legível (texto escuro no dourado) e o rótulo do cartão em cima do título */
  nav.main-nav a.nav-voltar { color: #241906 !important; }
  nav.main-nav a.nav-voltar::before { display: none; }
  .ev-pill-label, .ev-pill-title { display: block; }

  /* Compras sem login: o aviso fica com cara de aviso */
  .painel-restricted { padding: 18px 16px; text-align: center; background: rgba(230, 184, 79, .06); box-shadow: inset 0 0 0 1px rgba(230, 184, 79, .28); }
  .painel-restricted-icon { font-size: 22px; margin-bottom: 4px; }
  .painel-restricted-title { font-family: var(--f-title); font-weight: 700; font-size: 17px; letter-spacing: 1.5px; color: var(--c-gold-b); text-transform: uppercase; }
  .painel-restricted-desc { margin-top: 6px; font-size: 14px; color: var(--c-text); }
  table { max-width: 100%; }
}
@media (max-width: 560px) {
  .all { padding: 0 12px 40px; }
  /* faixa do topo mais baixa: o conteúdo aparece logo */
  .brand-hero { min-height: 0; margin: 14px -12px 18px; }
  .brand-hero .bh-stage { min-height: 0; padding: 16px 12px; gap: 8px; }
  .brand-hero .bh-title .mu { font-size: 18px; letter-spacing: 5px; }
  .brand-hero .bh-title .zed { font-size: 38px; }
  /* VIP: as tabelas de comparação cabem na tela (4 planos lado a lado) */
  html:root .vip-table { min-width: 0 !important; table-layout: auto; }
  html:root .vip-table thead th { padding: 10px 3px; font-size: 10px; letter-spacing: .3px; line-height: 1.25; white-space: normal; }
  html:root .vip-table thead th:first-child { padding-left: 8px; }
  html:root .vip-table tbody td { padding: 9px 3px; font-size: 12px; }
  html:root .vip-table tbody td:first-child { padding-left: 8px; font-size: 12px; line-height: 1.3; }
  html:root .vip-cell-num { font-size: 11.5px; }
  html:root .vip-table [class*="vip-pill"], html:root .vip-table [class*="pct"] { padding-left: 4px; padding-right: 4px; min-width: 0; }
  nav.main-nav { margin: 0 -12px; padding: 8px 12px 6px; }
  .nav-links { margin: 0 -12px; }
  .brand-hero { margin-left: -12px; margin-right: -12px; }
}