/* Luciano Kikão — cara de aplicativo no celular (até 760 px): barra com o player no centro, tira da faixa e menu que sobe */
.tabbar, .appmenu { display: none; }
@media (max-width: 760px) {
  :root { --tab-h: 68px; --mini-h: 46px; }
  body { --dock-h: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  body.som-on { --dock-h: calc(var(--tab-h) + var(--mini-h) + env(safe-area-inset-bottom, 0px)); }

  /* barra: Início · anterior · PLAY · próxima · Menu */
  .tabbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding: 0 6px env(safe-area-inset-bottom, 0px); background: #0b0908; border-top: 2px solid var(--sol); }
  .tabbar__lado { display: grid; justify-items: center; align-content: center; gap: 3px; height: 100%; color: var(--papel); text-decoration: none; background: none; border: 0; font: inherit; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: .8; }
  .tabbar__lado svg { width: 24px; height: 24px; }
  .tabbar__lado.on { opacity: 1; color: var(--sol); }
  .tabbar__lado:active { transform: scale(.94); }
  .tabbar__ctl { display: flex; align-items: center; gap: 10px; }
  .tabbar__ctl button { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--papel); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar__ctl button svg, .tabbar__ctl button .ic { width: 22px; height: 22px; }
  .tabbar__ctl .tabbar__play { width: 62px; height: 62px; margin-top: -18px; border-radius: 50%; background: var(--sol); color: var(--tinta); border: 3px solid #0b0908; box-shadow: 0 0 0 2px var(--sol), 0 6px 14px rgba(0, 0, 0, .6); }
  .tabbar__ctl .tabbar__play svg, .tabbar__ctl .tabbar__play .ic { width: 26px; height: 26px; }
  .tabbar__ctl button:active { transform: scale(.92); }

  /* tira da faixa: capa + título, em cima da barra; toque abre o player inteiro */
  .dock { display: none; grid-template-columns: auto minmax(0, 1fr); bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); height: var(--mini-h); z-index: 94; border-top: 0; box-shadow: 0 -1px 0 var(--fio-claro); padding: 0 12px; gap: 10px; align-items: center; }
  body.som-on .dock { display: grid; }
  .dock__ctl, .dock__abrir, .dock__serv { display: none !important; }
  .dock__capa { width: 34px; height: 34px; }
  .dock__info b { font-size: 14px; } .dock__info i { font-size: 11.5px; }
  body[data-pagina="mysterious"] .smdock { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); height: var(--mini-h); padding-bottom: 0; grid-template-columns: auto minmax(0, 1fr); }
  body[data-pagina="mysterious"] .smdock__ctl { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

  /* o que a barra substitui */
  .topo__menu, .topo__clube, .clb-copo, .gaveta { display: none !important; }
  .cookies { bottom: calc(var(--dock-h) + 10px); }
  .colp { inset: 0 0 var(--dock-h) 0; }

  /* menu que sobe de baixo, em quadros com imagem */
  .appmenu { display: block; position: fixed; inset: 0 0 calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)) 0; z-index: 93; background: rgba(8, 6, 5, .72); opacity: 0; transition: opacity .25s; overflow: hidden; }
  .appmenu[hidden] { display: none; }
  .appmenu.aberta { opacity: 1; }
  .appmenu__cx { position: absolute; left: 0; right: 0; bottom: 0; max-height: 94%; overflow: auto; background: var(--tinta); color: var(--papel); border-top: 3px solid var(--sol); border-radius: 18px 18px 0 0; padding: 8px 14px 24px; transform: translateY(100%); transition: transform .34s var(--suave); overscroll-behavior: contain; }
  .appmenu.aberta .appmenu__cx { transform: none; }
  .appmenu__puxa { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--fio-claro); margin: 2px auto 8px; }
  .appmenu header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .appmenu header b { font-family: var(--f-cartaz); font-variation-settings: "wdth" 68; font-weight: 900; text-transform: uppercase; font-size: 30px; }
  .appmenu header button { width: 42px; height: 42px; font-size: 18px; background: var(--sol); color: var(--tinta); border: 0; cursor: pointer; }
  .appmenu__clube { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; margin-bottom: 10px; color: var(--tinta); text-decoration: none; background: linear-gradient(90deg, var(--sol) 55%, rgba(246, 194, 26, .2)), var(--img, none) right center / auto 130% no-repeat, var(--sol); border: 2px solid var(--sol); box-shadow: 5px 5px 0 var(--brasa); overflow: hidden; }
  .appmenu__clube svg { width: 40px; height: 40px; }
  .appmenu__clube small { display: block; font-family: var(--f-mao); font-size: 15px; color: var(--brasa-escura); }
  .appmenu__clube b { display: block; font-family: var(--f-cartaz); font-variation-settings: "wdth" 70; font-weight: 900; text-transform: uppercase; font-size: 21px; line-height: 1; }
  .appmenu__clube i { font-style: normal; font-size: 13px; font-weight: 700; } .appmenu__clube em { font-style: normal; font-weight: 900; }
  .appmenu__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .appmenu__grade a { position: relative; aspect-ratio: 1 / .92; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 8px 6px; background: #1d1916; border: 2px solid var(--fio-claro); color: var(--papel); text-decoration: none; text-align: center; overflow: hidden; -webkit-tap-highlight-color: transparent; box-shadow: 3px 3px 0 #000; }
  .appmenu__grade svg { width: 44px; height: 44px; color: var(--sol); }
  .appmenu__grade span { font-family: var(--f-cartaz); font-variation-settings: "wdth" 74; font-weight: 900; text-transform: uppercase; font-size: 13.5px; line-height: 1.02; }
  .appmenu__grade a:last-child:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: auto; grid-auto-flow: column; justify-content: center; align-items: center; gap: 12px; padding: 14px; }
  .appmenu__grade a:last-child:nth-child(3n+1) svg { width: 34px; height: 34px; }
  .appmenu__grade a:active { transform: scale(.96); border-color: var(--sol); }
  .appmenu__grade a.on { background: var(--sol); border-color: var(--sol); color: var(--tinta); } .appmenu__grade a.on svg { color: var(--tinta); }
  .appmenu__instalar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px; background: var(--papel); color: var(--tinta); border: 0; font: inherit; text-align: left; cursor: pointer; box-shadow: 5px 5px 0 var(--brasa); }
  .appmenu__instalar[hidden] { display: none; }
  .appmenu__instalar svg { width: 28px; height: 28px; }
  .appmenu__instalar b { display: block; font-size: 16px; } .appmenu__instalar i { font-style: normal; font-size: 12.5px; }
  .appmenu__ios { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; background: #1d1916; border-left: 4px solid var(--sol); padding: 10px 12px; }
  .appmenu h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--sol); margin: 18px 0 8px; }
  .appmenu__plats, .appmenu__ling { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .appmenu__ling { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appmenu__plats a, .appmenu__ling a { padding: 12px 8px; text-align: center; text-decoration: none; font-weight: 800; font-size: 13.5px; color: #fff; background: var(--cor, #1d1916); border: 2px solid var(--cor, var(--fio-claro)); }
  .appmenu__pe { margin: 18px 0 0; font-size: 12.5px; opacity: .75; text-align: center; }
  .appmenu__pe a { color: inherit; }

  /* avisos do clube: discretos, logo acima do player; somem enquanto o menu está aberto */
  .clb-aviso { width: max-content; font-size: 12.5px; padding: 6px 12px; box-shadow: 3px 3px 0 var(--clb); }
  .appmenu.aberta ~ .clb-aviso { display: none; }

  a, button { touch-action: manipulation; }
  .clb-abas { top: var(--topo-h, 60px); }
}