/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 520px) and (orientation: portrait){

  /* ---- Base: tela inteira, sem scroll fantasma ---- */
  html, body{
    height: 100%;
    overflow: hidden;
  }

  

  /* ---- Fundo do jogo (feltro) ---- */
  #game{
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
    background-image: url("/assets/image/bg-g.jpg");
    /*background: radial-gradient(circle at top, #0f7a3a 0%, #0a5a2b 60%, #063f1f 100%) !important;*/
    background-size: cover !important;
    background-position: center !important;

    position: relative;
  }

  /* ---- Placar FIXO no topo ---- */
  #scoreboard{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(10px + env(safe-area-inset-top)) !important;

    width: auto !important;
    height: auto !important;

    z-index: 20000 !important;

    border-radius: 14px !important;
    padding: 10px 10px !important;

    background: rgba(0,0,0,0.18) !important;

    /* sem blur/névoa */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    overflow: hidden !important;
    pointer-events: auto !important;
  }

  .sb-turnbar{
    height: 8px !important;
    margin: 6px 0 6px 0 !important;
  }

  /* ---- Área central (MESA precisa existir e ser clicável) ---- */
  #tableArea{
    height: 100vh !important;

    /* espaço para o placar em cima e HUDs embaixo */
    padding-top: 120px !important;
    padding-bottom: 260px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    pointer-events: auto !important;
  }

  /* ---- BottomArea NÃO pode bloquear clique ---- */
  #bottomArea{
    pointer-events: auto !important;
    background: transparent !important;
  }

  /* =========================================================
     MESA / JOGOS BAIXADOS (VERTICAL NO MOBILE)
     - #table vira coluna
     - cada .grupo-table vira uma “linha” com scroll horizontal
  ========================================================= */

  #table{
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    margin: 18px 0 0 0 !important;
    padding: 0 10px !important;

    border-radius: 0 !important; /* remove “oval” */
    pointer-events: auto !important;

    position: relative;
    z-index: 12000 !important;
  }

  .grupo-table{
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /* scroll horizontal se o jogo for grande */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    gap: 0 !important;
    padding: 8px 10px !important;

    border-radius: 3px !important;
    background: rgba(0,0,0,0.10) !important; /* leve só pra destacar */
    pointer-events: auto !important;

    position: relative;
    z-index: 12001 !important;
  }

  /* cartas baixadas menores + overlap */
  .grupo-table .card{
    width: 46px !important;
    height: 68px !important;
    border-radius: 3px !important;

    margin-left: -26px !important;
    flex: 0 0 auto !important;
  }

  .grupo-table .card:first-child{
    margin-left: 0 !important;
  }



  /* =========================================================
     MONTE / LIXO FIXOS acima da mão (HUD) — menores
  ========================================================= */

  #deck-area{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* fica acima da mão */
    bottom: calc(10px + env(safe-area-inset-bottom) + 118px) !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 !important;

    z-index: 25000 !important;
    pointer-events: auto !important;
  }

  /* slots (se existirem) */
  .pile-slot{
    width: 58px !important;
    height: 78px !important;
    border-radius: 3px !important;
  }

  /* monte/lixo menores e proporcionais */
  #monte, #lixo{
    width: 58px !important;
    height: 78px !important;

    pointer-events: auto !important;
    position: relative;
    z-index: 25001 !important;
  }

  /* =========================================================
     MÃO FIXA no rodapé (overlap)
  ========================================================= */

  #hand{
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;

    width: auto !important;
    max-width: none !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    padding: 10px 6px !important;
    border-radius: 3px !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    gap: 0 !important;

    z-index: 30000 !important;
    pointer-events: auto !important;

    margin-left: 0 !important;
    transform: none !important;
  }

  #hand .card{
    width: 66px !important;
    height: 98px !important;
    border-radius: 3px !important;

    position: relative !important;
    z-index: 1 !important;

    pointer-events: auto !important;

    /* overlap real */
    margin-left: -45px !important;
    flex: 0 0 auto !important;
  }

  #hand .card:first-child{
    margin-left: 0 !important;
  }

  #hand .card.selected{
    transform: translateY(-4px) !important;
  }

  /* pseudo-elements não podem bloquear clique */
  #hand::before,
  #hand::after{
    pointer-events: none !important;
  }

  /* Evita elementos enormes estourarem */
  *{
    max-width: 100%;
  }


  /* ✅ Mesa (jogos baixados) desce para perto do monte/lixo */
  #tableArea{
    justify-content: flex-end !important;   /* era flex-start */
    overflow-y: auto !important;           /* se tiver muitos jogos, rola */
  }

  /* ✅ faz o #table “grudar” mais embaixo dentro do #tableArea */
  #table{
    margin-top: auto !important;
    margin-bottom: 10px !important;        /* pequeno respiro acima do HUD */
  }

  /* ✅ garante que os jogos não fiquem escondidos atrás do placar */
  #table{
    position: relative;
    z-index: 16000 !important;
    pointer-events: auto !important;
  }

  .grupo-table{
    pointer-events: auto !important;
  }



  /* =========================================================
     1) SCOREBOARD NÃO PODE TER ALTURA DE TELA
     (corrige o 364 x 774 que você viu)
  ========================================================= */
  #scoreboard{
    height: auto !important;
    min-height: 0 !important;
    max-height: 140px !important;  /* ajuste fino: 120~170 */
    overflow: hidden !important;

    /* garante que não cresce por flex */
    flex: 0 0 auto !important;

    /* se algum CSS antigo setou height:100% */
    top: calc(10px + env(safe-area-inset-top)) !important;
    bottom: auto !important;
  }

  /* =========================================================
     2) ÁREA DOS JOGOS BAIXADOS FIXA ENTRE HUDS
     (fica “no meio” e não some)
  ========================================================= */

  /* a mesa vira um painel rolável no meio da tela */
  #table{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;

    /* logo abaixo do placar */
    top: calc(10px + env(safe-area-inset-top) + 150px) !important;

    /* acima do HUD de baixo (monte/lixo + mão) */
    bottom: calc(10px + env(safe-area-inset-bottom) + 220px) !important;

    margin: 0 !important;
    padding: 8px 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    z-index: 16000 !important; /* abaixo do deck-area(25000) e hand(30000) */
    pointer-events: auto !important;

    /* visual leve */
    background: transparent !important;
  }

  /* cada jogo baixado vira “linha” com scroll horizontal */
  .grupo-table{
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    padding: 8px 10px !important;
    border-radius: 3px !important;
    background: rgba(0,0,0,0.10) !important;

    pointer-events: auto !important;
  }

  /* cartas baixadas menores + overlap */
  .grupo-table .card{
    width: 46px !important;
    height: 68px !important;
    border-radius: 3px !important;

    margin-left: -26px !important;
    flex: 0 0 auto !important;
  }
  .grupo-table .card:first-child{
    margin-left: 0 !important;
  }

  /* =========================================================
     3) AJUSTE FINO DO HUD DE BAIXO (SE PRECISAR)
  ========================================================= */

  /* se quiser ainda mais espaço para os jogos baixados,
     diminua estes bottoms aos poucos */
  #deck-area{
    bottom: calc(10px + env(safe-area-inset-bottom) + 110px) !important;
  }

  /* mão */
  #hand{
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }


  /* ==============================
     TABLE: jogos lado a lado (horizontal)
  ============================== */

  #table{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;

    top: calc(10px + env(safe-area-inset-top) + 150px) !important;
    bottom: calc(10px + env(safe-area-inset-bottom) + 220px) !important;

    /* agora é uma “faixa” horizontal de jogos */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    padding: 8px 6px !important;
    margin: 0 !important;

    z-index: 16000 !important;
    pointer-events: auto !important;

    background: transparent !important;
  }

  /* ==============================
     CADA JOGO: vira COLUNA (vertical)
  ============================== */

  .grupo-table{
    /* coluna em pé */
    display: flex !important;
    flex-direction: column !important; /* última carta fica embaixo */
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: 54px !important;     /* largura da coluna */
    min-width: 54px !important;

    height: 140px !important;   /* altura da coluna (ajuste fino) */

    overflow: visible !important; /* deixa overlap acontecer */

    padding: 0 !important;
    border-radius: 3px !important;

    background: transparent !important; /* sem “caixinha” */
    pointer-events: auto !important;

    position: relative !important;
  }

  /* ==============================
     CARTAS DENTRO DO JOGO: empilhadas
     (overlap vertical)
  ============================== */

  .grupo-table .card{
    width: 54px !important;
    height: 78px !important;

    margin: 0 !important;
    margin-top: -54px !important;   /* overlap vertical */
    flex: 0 0 auto !important;

    border-radius: 3px !important;
  }

  /* primeira carta do topo não sobe demais */
  .grupo-table .card:last-child{
    margin-top: 0 !important;
  }


  /* faixa horizontal de jogos */
  #table{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;

    top: calc(10px + env(safe-area-inset-top) + 150px) !important;
    bottom: calc(10px + env(safe-area-inset-bottom) + 220px) !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: flex-end !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    padding: 8px 6px !important;
    margin: 0 !important;

    z-index: 16000 !important;
    pointer-events: auto !important;

    background: transparent !important;
  }

  /* cada jogo = coluna (vertical) */
  .grupo-table{
    position: relative !important;

    width: 54px !important;
    min-width: 54px !important;

    /* altura da pilha (1 carta + 12 deslocamentos) */
    height: 320px !important;

    display: block !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* as cartas deixam de “participar do fluxo” e viram empilhadas */
  .grupo-table .card{
    position: absolute !important;
    left: 0 !important;

    width: 54px !important;
    height: 78px !important;

    margin: 0 !important;          /* 🔥 mata margin-left do desktop */
    border-radius: 5px !important;
  }


  /* cartas da coluna */
  .grupo-table .card{
    position: absolute !important;
    left: 0 !important;

    width: 54px !important;
    height: 78px !important;

    margin: 0 !important;          /* 🔥 mata margin-left do desktop */
    border-radius: 5px !important;

  /* primeira carta não sobe */
  .grupo-table .card:first-child{
    margin-top: 0 !important;



  /* garante que z-index funcione */
  .grupo-table .card{
    position: relative !important;
  }

  /* última carta fica por cima (até 13 cartas) */
  .grupo-table .card:nth-child(1)  { top: 1px;   z-index: 1;  }
  .grupo-table .card:nth-child(2)  { top: 20px;  z-index: 2;  }
  .grupo-table .card:nth-child(3)  { top: 40px;  z-index: 3;  }
  .grupo-table .card:nth-child(4)  { top: 60px;  z-index: 4;  }
  .grupo-table .card:nth-child(5)  { top: 80px;  z-index: 5;  }
  .grupo-table .card:nth-child(6)  { top: 100px;  z-index: 6;  }
  .grupo-table .card:nth-child(7)  { top: 120px;  z-index: 7;  }
  .grupo-table .card:nth-child(8)  { top: 140px;  z-index: 8;  }
  .grupo-table .card:nth-child(9)  { top: 160px;  z-index: 9;  }
  .grupo-table .card:nth-child(10) { top: 180px; z-index: 10; }
  .grupo-table .card:nth-child(11) { top: 200px; z-index: 11; }
  .grupo-table .card:nth-child(12) { top: 220px; z-index: 12; }
  .grupo-table .card:nth-child(13) { top: 240px; z-index: 13; }
}

}

}
@media (max-width: 520px) and (orientation: portrait){

  /* cada jogo vira um “slot” fixo onde as cartas serão empilhadas */
  .grupo-table{
    position: relative !important;

    width: 54px !important;
    min-width: 54px !important;

    /* altura da pilha (1 carta + 12 deslocamentos) */
    height: 222px !important;

    display: block !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* as cartas deixam de “participar do fluxo” e viram empilhadas */
  .grupo-table .card{
    position: absolute !important;
    left: 0 !important;

    width: 54px !important;
    height: 78px !important;

    margin: 0 !important;          /* 🔥 mata margin-left do desktop */
    border-radius: 5px !important;
  }

  /* deslocamento vertical (mostra ~12px da carta de baixo) + z-index crescente
     ✅ a ÚLTIMA sempre fica por cima */
  .grupo-table .card:nth-child(1)  { top: 0px;   z-index: 1;  }
  .grupo-table .card:nth-child(2)  { top: 18px;  z-index: 2;  }
  .grupo-table .card:nth-child(3)  { top: 36px;  z-index: 3;  }
  .grupo-table .card:nth-child(4)  { top: 54px;  z-index: 4;  }
  .grupo-table .card:nth-child(5)  { top: 72px;  z-index: 5;  }
  .grupo-table .card:nth-child(6)  { top: 90px;  z-index: 6;  }
  .grupo-table .card:nth-child(7)  { top: 108px;  z-index: 7;  }
  .grupo-table .card:nth-child(8)  { top: 126px;  z-index: 8;  }
  .grupo-table .card:nth-child(9)  { top: 144px;  z-index: 9;  }
  .grupo-table .card:nth-child(10) { top: 162px; z-index: 10; }
  .grupo-table .card:nth-child(11) { top: 180px; z-index: 11; }
  .grupo-table .card:nth-child(12) { top: 198px; z-index: 12; }
  .grupo-table .card:nth-child(13) { top: 216px; z-index: 13; }
}

/* =========================================================
   MOBILE PORTRAIT: placar compacto em 1 linha
========================================================= */
@media (max-width: 520px) and (orientation: portrait){

  /* header do placar fica mais compacto */
  #scoreboard .sb-title{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #scoreboard .sb-name{
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }

  /* ✅ 1 linha: Mão | Total | Fichas | Ante */
  #scoreboard .sb-sub{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    flex-wrap: nowrap !important;      /* força 1 linha */
    gap: 6px !important;

    overflow-x: auto !important;       /* se não couber, rola pro lado */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding-bottom: 2px !important;
  }

  /* esconde scrollbar no mobile */
  #scoreboard .sb-sub::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }

  /* ✅ remove a “quebra” do bloco sb-row */
  #scoreboard .sb-row{
    display: contents !important;      /* filhos entram na mesma linha */
  }

  /* pills menores e mais “HUD” */
  #scoreboard .sb-pill{
    font-size: 12px !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}


/* =========================================================
   FIX SCOREBOARD (MOBILE PORTRAIT)
   - avatar não “amassa”
   - tudo em uma linha (mão/total/fichas/ante)
========================================================= */
@media (max-width: 520px) and (orientation: portrait){

  /* garante que o scoreboard não vira um “tapete” gigante */
  #scoreboard{
    height: auto !important;
    max-height: none !important;
  }

  /* card do placar */
  #scoreboard .sb-card{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 10px !important;
  }

  /* ✅ AVATAR: trava tamanho pra não ficar “magro” */
  #scoreboard .sb-avatar{
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;
    min-height: 40px !important;

    border-radius: 50% !important;
    overflow: hidden !important;
  }

  #scoreboard .sb-avatar img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* info não pode “estourar” e empurrar avatar */
  #scoreboard .sb-info{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* nome na mesma linha, sem quebrar */
  #scoreboard .sb-name{
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ✅ pills em UMA linha só */
  #scoreboard .sb-sub{
    margin-top: 6px !important;
    display: flex !important;
    flex-wrap: nowrap !important;       /* <- não quebra */
    gap: 6px !important;
    overflow: hidden !important;
  }

  #scoreboard .sb-pill{
    font-size: 11px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }
}

  #scoreboard .sb-mobile-bati-btn{
    min-width: 74px !important;
    height: 28px !important;
    padding: 0 10px !important;

    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    color: #fff !important;
    background: linear-gradient(180deg, #1a73e8, #0d47a1) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 4px 12px rgba(0,0,0,0.22) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  #scoreboard .sb-mobile-bati-btn.is-active{
    background: linear-gradient(180deg, #2ecc71, #27ae60) !important;
  }

  #scoreboard .sb-mobile-bati-btn.is-disabled-ui{
    background: linear-gradient(180deg, #e53935, #b71c1c) !important;
  }

    #scoreboard .sb-details-btn{
    display: none !important;
  }

/* =========================================================
   MOBILE PORTRAIT - SALA DE MESAS (mostrar 6 mesas sem scroll)
   - grid 2x3 ocupando a viewport
   - cards compactos (imagem menor, textos reduzidos)
========================================================= */
@media (max-width: 520px) and (orientation: portrait){
  /* ocupa a tela toda */
  

  /* grid 2 colunas x 3 linhas (6 mesas) */
  

  /* card compacto */
  

  /* imagem menor para caber 3 linhas */
  .table-card img{
    height: 92px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
  }

  /* textos menores */
  .table-title{ font-size: 14px !important; }
  .table-value{ font-size: 12px !important; }


  /* assentos menores */
  .seats{ gap: 6px !important; }
  .seat{
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  
}


/* =========================================================
   MOBILE PORTRAIT — SALA DE MESAS (mostrar 6 mesas sem scroll)
   - mantém 2 colunas x 3 linhas
   - reduz a “mesa” e reposiciona as bolinhas
   - esconde textos secundários para caber tudo
========================================================= */
@media (max-width: 520px) and (orientation: portrait) {

  

  /* grid ocupa a tela (desconta o padding do container) */
  

  

  /* título/valores menores */
  .table-title{ font-size: 18px; margin-bottom: 2px; }
  .table-buyin{ font-size: 14px; }

  /* esconde dica para ganhar altura */


  /* imagem da mesa menor */
 

  /* assentos menores e reposicionados */
  .seat{
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  /* topo */
  .seat.pos2{ left: 20%; top: 10%; }
  .seat.pos3{ left: 46%; top: 8%;  }
  .seat.pos4{ left: 72%; top: 10%; }

  /* laterais */
  .seat.pos1{ left: -8px; top: 48%; transform: translateY(-50%); }
  .seat.pos5{ left: 104%; top: 48%; transform: translate(-100%, -50%); }

  /* base */
  .seat.pos6{ left: 50%; top: 92%; }

  /* botão menor */
  .btn-primary{
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
  }
}

/* =========================================================
   MOBILE PORTRAIT — SALA DE MESAS (sem scroll)
   - 6 mesas em 1 coluna e 1 tela
   - cards compactos (linha)
========================================================= */
@media (max-width: 520px) and (orientation: portrait){

  

  

 

  /* mini mesa + assentos */
  .table-visual{
    width: 120px;
    height: 70px;
    position: relative;
  }

  

  /* assentos menores (pra caber no “thumbnail”) */
  .seat{
    width: 22px;
    height: 22px;
    font-size: 12px;
    border-width: 1px;
  }

  /* infos mais compactas */
  
  .table-value{
    font-size: 13px;
    margin: 0;
  }
  

  /* ações viram “mini botão” */
  

  .table-actions button{
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
  }

  

/* ===== FORCE: SALA DE MESAS 1 COLUNA (MOBILE PORTRAIT) ===== */
@media (max-width: 520px) and (orientation: portrait){

  

  

  /* card em “linha” (thumbnail + infos) */
  
}

/* ===== MOBILE PORTRAIT: cards da sala (1 coluna, compactos) ===== */
@media (max-width: 520px) and (orientation: portrait){

  /* 1 coluna com scroll */
 

  

  

  /* mini mesa menor */
  
  

  /* reposiciona texto */
  

  .table-value{
    font-size: 13px !important;
    text-align: left !important;
    margin: 4px 0 0 0 !important;
    opacity: .95 !important;
  }

  /* botão menor e alinhado */
  

  .table-actions button{
    padding: 7px 10px !important;     /* menor */
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
}

/*14ª*/
/* ===== MOBILE PORTRAIT: SALA DE MESAS estilo mockup ===== */
@media (max-width: 520px) and (orientation: portrait){

  /* Lista 1 coluna com scroll */
  

  

  /* Card = esquerda (infos) | direita (mesa) */
  

  /* Remove texto extra no mobile */


  /* ===== Coluna esquerda ===== */
  

  .table-value{
    font-size: 14px !important;
    text-align: left !important;
    margin: 6px 0 0 0 !important;
    opacity: .95 !important;
  }

  

  .table-actions button{
    padding: 5px 10px !important;   /* botão menor */
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  /* ===== Coluna direita (mesa maior) ===== */
  

  

  /* Assentos maiores */
  .seats-overlay .seat{
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
  }
}
/*15ª*/

/* ===== FORCE: Sala de Mesas (Mobile Portrait) no layout do mockup ===== */
@media (max-width: 520px) and (orientation: portrait){

  /* lista 1 coluna */
  

  

  /* joga cada peça pro lugar certo */
  #tablesGrid > .table-card .table-title{  grid-area: title !important;  text-align: left !important; font-size: 18px !important; font-weight: 900 !important; margin: 0 !important; }
  #tablesGrid > .table-card .table-value{  grid-area: value !important;  text-align: left !important; font-size: 14px !important; margin: 6px 0 0 0 !important; opacity: .95 !important; }
  #tablesGrid > .table-card .table-actions{grid-area: actions !important; justify-content: flex-start !important; margin-top: 10px !important; }
  #tablesGrid > .table-card .table-visual{ grid-area: visual !important; }

  /* some com a dica no mobile */


  /* botão menor */
  #tablesGrid > .table-card .table-actions button{
    padding: 7px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  /* mesa maior */
  #tablesGrid > .table-card{
    grid-template-columns: 1fr 215px !important; /* era 190px */
  }

  /* a mesa ocupa toda a largura da coluna */
  #tablesGrid > .table-card .table-visual{
    width: 215px !important;
    height: auto !important;      /* altura vira consequência */
  }

  /* escala pela largura (melhor p/ imagem larga) */
  

  /* assentos maiores (opcional) */
  #tablesGrid > .table-card .seats-overlay .seat{
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
  }
}
/* HOME: esconde banner/painéis no mobile */
@media (max-width: 899px){
  .home-banner,
  .home-panels,
  .home-lastrow,
  .home-status{
    display: none !important;
  }
}
/* Botão Olho*/
/* Botão assistir em formato ícone 
.table-actions .watch-btn{
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 18px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50% !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}*/

/* Botão assistir (ícone redondo) *
.table-actions .watch-btn{
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* SVG *
.watch-icon{
  width: 18px;
  height: 18px;
  fill: white;
}*/

/* MOBILE: só o ícone */
@media (max-width: 899px){

  .watch-text{
    display: none;
  }
}
}

/* =========================================================
   MOBILE TOUCH DRAG - mão
========================================================= */
#hand .card.touch-dragging{
  transform: translateY(-10px) scale(1.04) !important;
  z-index: 40000 !important;
  filter: brightness(1.08);
}

#hand .card.touch-drop-target{
  outline: 2px solid rgba(255,255,255,0.9) !important;
  outline-offset: 2px !important;
}

/* ===== Home mobile: separar melhor card do usuário do botão Sair ===== */
@media (max-width: 768px) and (orientation: portrait) {
  .home-status-wrap {
    margin-top: 18px !important;
    display: grid !important;
    gap: 12px !important;
  }

  .home-usercard {
    margin-top: 0 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  .home-usercard-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .home-user-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 52px !important;
  }

  .home-user-meta {
    min-width: 0 !important;
  }

  #homeUserName {
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  #homeUserBalance {
    line-height: 1.15 !important;
    font-size: 14px !important;
  }

  .home-status {
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }
}

/* ===== Home mobile: botões mais elegantes (não full width) ===== */
@media (max-width: 768px) and (orientation: portrait) {

  /* container dos botões da home */
  .home-actions,
  .home-buttons,
  .menu-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* botões */
  .home-actions button,
  .home-buttons button,
  .menu-buttons button,
  #homeScreen button {
    width: 82% !important;
    max-width: 320px !important;

    padding: 12px 14px !important;
    font-size: 16px !important;

    border-radius: 14px !important;

    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  }

  /* botão principal (ex: Jogar Crazy) */
  .home-actions button.primary,
  .home-buttons button.primary,
  #homeScreen button.primary {
    transform: scale(1.02);
  }

  /* hover/touch feedback leve */
  .home-actions button:active,
  .home-buttons button:active,
  #homeScreen button:active {
    transform: scale(0.98);
  }
}

/* ===== Home mobile: card do usuário com mesma largura visual dos botões ===== */
@media (max-width: 768px) and (orientation: portrait) {
  .home-status-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  .home-usercard,
  .home-status {
    width: 82% !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
  }

  .home-usercard-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .home-user-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 52px !important;
  }

  .home-user-meta {
    min-width: 0 !important;
  }

  #homeUserName {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }

  #homeUserBalance {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }
}

/* ===== Home mobile: centralizar de verdade os botões ===== */
@media (max-width: 768px) and (orientation: portrait) {
  #homeScreen button,
  #homeScreen .btn,
  #homeScreen .menu-btn,
  #homeScreen .home-btn {
    display: block !important;
    width: 82% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* espaço vertical entre eles */
  #homeScreen button + button,
  #homeScreen .btn + .btn,
  #homeScreen .menu-btn + .menu-btn,
  #homeScreen .home-btn + .home-btn {
    margin-top: 12px !important;
  }
}

/* =========================================================
   TABLE MELDS - MOBILE PORTRAIT EM 2 FAIXAS
========================================================= */
@media (max-width: 520px) and (orientation: portrait){
  #table{
    position: relative;
  }

  #table .table-melds-layer{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px;

    pointer-events: none;
  }

  #table .table-melds-layer .grupo-table{
    pointer-events: auto;
  }

  #table .table-melds-bottom{
    bottom: 8px;
  }

  #table .table-melds-top{
    top: 64px;
  }
}