/* Ícones do hub gostosos de apertar: afundam no toque, voltam com um quique (hub-toque.js põe a classe e o som).
   Arquivo separado do hub.css (que o GPT edita) para não pisar no trabalho dele. */
#hub .maquina,#hub .larCard,#hub .cofreCard,#hub .hubPerfilApp{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#hub .maquina:active,#hub .larCard:active,#hub .cofreCard:active,#hub .hubPerfilApp:active{transform:none}
#hub .maquina img,#hub .larMini,#hub .cofreCardMilo,#hub .hubPerfilApp img{
  transform:translateY(0) scale(1);
  transition:transform .55s cubic-bezier(.34,1.7,.5,1),filter .45s ease;will-change:transform}
#hub .maquinaInfo strong,#hub .larCardTexto strong,#hub .hubPerfilApp strong{transition:transform .55s cubic-bezier(.34,1.7,.5,1),opacity .3s;display:block}
@media (hover:hover){
  #hub .maquina:hover img,#hub .larCard:hover .larMini,#hub .cofreCard:hover .cofreCardMilo,#hub .hubPerfilApp:hover img{
    transform:translateY(-4px) scale(1.04);filter:drop-shadow(0 13px 12px #091e3b70) brightness(1.06)}
}
/* apertado: desce, achata um pouco, a sombra encolhe e a luz baixa */
#hub .apertado img,#hub .apertado .larMini,#hub .apertado .cofreCardMilo,
#hub .maquina.apertado:hover img,#hub .larCard.apertado:hover .larMini,#hub .cofreCard.apertado:hover .cofreCardMilo,#hub .hubPerfilApp.apertado:hover img{
  transform:translateY(5px) scale(.9,.86);filter:drop-shadow(0 2px 2px #091e3b80) brightness(.9);
  transition:transform .09s cubic-bezier(.3,0,.6,1),filter .09s}
#hub .apertado .maquinaInfo strong,#hub .apertado .larCardTexto strong,#hub .hubPerfilApp.apertado strong{transform:translateY(2px);opacity:.8;transition:transform .09s,opacity .09s}
/* o Windows do usuário vem com "reduzir movimento": o hub.css desliga as transições, mas o toque precisa continuar macio */
@media (prefers-reduced-motion:reduce){
  #hub .maquina img,#hub .larMini,#hub .cofreCardMilo,#hub .hubPerfilApp img,#hub .maquinaInfo strong,#hub .larCardTexto strong,#hub .hubPerfilApp strong{transition:transform .55s cubic-bezier(.34,1.7,.5,1),filter .45s ease,opacity .3s!important}
  #hub .apertado img,#hub .apertado .larMini,#hub .apertado .cofreCardMilo,#hub .apertado .maquinaInfo strong,#hub .apertado .larCardTexto strong,#hub .hubPerfilApp.apertado strong{transition:transform .09s cubic-bezier(.3,0,.6,1),filter .09s,opacity .09s!important}
}
/* "Refazer perfil": aparece só no Meu perfil (perfil.js), discreto embaixo do botão principal */
.hubRefazerPerfil{flex-shrink:0;width:100%;min-height:48px;margin-top:12px;border-radius:16px;border:1px solid #f0dfb966;background:#c1dcff14;color:#f0dfb9;font:600 15px var(--font)}
.hubRefazerPerfil[hidden]{display:none}.hubRefazerPerfil:active{transform:translateY(2px)}
/* o saldo ganha o mesmo painel de vidro de "Minha casa · Cofre do Milo · Meu perfil": mostra que caixa e Strass são um grupo só */
#hub .carteira{padding:14px 18px 12px;background:linear-gradient(130deg,#d7e8ff24,#a8bfd910);border:1px solid #d2e5ff35;border-radius:26px;box-shadow:inset 0 1px #fff2;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media(max-width:350px){#hub .carteira{padding:12px 12px 10px}}
/* os nove jogos também ficam juntos numa caixinha de vidro, igual aos outros grupos */
#hub .maquinas{padding:20px 12px 14px;background:linear-gradient(130deg,#d7e8ff24,#a8bfd910);border:1px solid #d2e5ff35;border-radius:26px;box-shadow:inset 0 1px #fff2;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media(min-width:700px){#hub .maquinas{padding:26px 22px 18px}}
@media(max-width:350px){#hub .maquinas{padding:14px 6px 10px}}
/* "Instalar o app" (instalar.js): um cartão de vidro como os outros grupos, embaixo de Casa/Milo/Perfil */
#hub .hubInstalar{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;padding:12px 16px;text-align:left;color:#eff4fc;background:linear-gradient(130deg,#d7e8ff24,#a8bfd910);border:1px solid #d2e5ff35;border-radius:20px;box-shadow:inset 0 1px #fff2}
#hub .hubInstalar[hidden]{display:none}
#hub .hubInstalarIcone{font-size:26px;line-height:1}#hub .hubInstalar strong{display:block;font:650 14px var(--font)}#hub .hubInstalar small{display:block;font-size:11px;color:#c5d5e5;margin-top:2px}
#hub .hubInstalar .seta{margin-left:auto;font-size:22px;color:#f0dfb9}
.instalarAjuda{width:min(380px,calc(100% - 32px));padding:24px 22px 20px;border:1px solid #d1e6ff44;border-radius:22px;background:linear-gradient(155deg,#4b6f96,#193352 75%);color:#f3f1e8;font-family:var(--font);text-align:center}
.instalarAjuda::backdrop{background:#06132199;backdrop-filter:blur(6px)}
.instalarAjuda img{border-radius:18px}.instalarAjuda h2{font-size:20px;margin:12px 0 10px}
.instalarAjuda ol{text-align:left;margin:0 0 12px;padding-left:22px;font-size:14px;line-height:1.55;color:#dfe8f3}.instalarAjuda li{margin:6px 0}
.instalarAjuda p{font-size:13px;color:#c5d5e5;margin:0 0 16px}
.instalarAjuda button{width:100%;min-height:48px;border-radius:14px;background:linear-gradient(130deg,#f8e6b5,#d9b879);color:#253d40;font-weight:750;font-size:16px}